/* Styles for blueprints.html (shared rules are in css/site.css). */

@keyframes gsFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* catalog header */
.catalog-header-div-1 { max-width: 1180px; margin: 0 auto; padding: 72px 24px 56px; display: flex; flex-direction: column; gap: 24px; }
.catalog-header-p-2 { margin: 0; font-size: 20px; line-height: 1.5; color: #3d3831; max-width: 640px; text-wrap: pretty; }
.catalog-header-div-3 { display: flex; gap: 28px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6b655a; padding-top: 8px; }
.catalog-header-strong-4 { color: #1a1713; font-weight: 500; }

/* catalog */
.catalog-section-1 { max-width: 1180px; margin: 0 auto; padding: 40px 24px 120px; display: flex; flex-direction: column; gap: 28px; }
.catalog-div-2 { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.catalog-button-3 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.catalog-input-4 { font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 10px 14px; border: 1px solid #1a1713; border-radius: 4px; background: #fbf8f1; color: #1a1713; outline: none; min-width: 220px; }
.catalog-button-5 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 10px 14px; border: 1px solid #1a1713; border-radius: 4px; background: transparent; color: #1a1713; cursor: pointer; white-space: nowrap; }
.catalog-button-5:hover { background: #1a1713; color: #f4efe5; }
.catalog-div-6 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6b655a; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.catalog-span-7 { display: flex; gap: 16px; flex-wrap: wrap; }
.catalog-div-8 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.catalog-div-9 { border: 1px solid #1a1713; border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 4px 4px 0 #1a1713; transition: background .3s; animation: gsRise .3s ease both; }
.catalog-div-10 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.catalog-span-11 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; }
.catalog-div-12 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.015em; line-height: 1.1; }
.catalog-div-13 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #1f6f5f; letter-spacing: .15em; display: flex; justify-content: space-between; align-items: center; }
.catalog-button-14 { margin-top: auto; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; padding: 11px 14px; border-radius: 4px; border: 1px solid #1a1713; cursor: pointer; transition: all .2s; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.catalog-div-15 { border: 1px dashed #1a1713; border-radius: 8px; padding: 48px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.catalog-p-16 { margin: 0; font-size: 17px; color: #3d3831; max-width: 460px; }
.catalog-a-17 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: #1f6f5f; border-bottom: 2px solid #1f6f5f; }
.catalog-a-17:hover { color: #1f6f5f; }  /* was inline: no hover change */

/* how deploy works */
.how-deploy-works-section-1 { border-top: 1px solid #d8d0bf; border-bottom: 1px solid #d8d0bf; }
.how-deploy-works-div-2 { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.how-deploy-works-div-3 { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; border: 1px solid #1a1713; border-radius: 999px; padding: 8px 14px 8px 10px; background: #fbf8f1; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #1a1713; flex-wrap: wrap; }
.how-deploy-works-div-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 45%), 1fr)); gap: 16px; }
.how-deploy-works-div-5 { border: 1px solid #1a1713; border-radius: 8px; background: #fbf8f1; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 6px 6px 0 #1a1713; }
.how-deploy-works-div-6 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.how-deploy-works-span-7 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; border: 1px solid #d8d0bf; color: #6b655a; }
.how-deploy-works-div-8 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.how-deploy-works-div-9 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6b655a; border-top: 1px dashed #d8d0bf; padding-top: 12px; }
.how-deploy-works-div-10 { border: 1px solid #1a1713; border-radius: 8px; background: #1f6f5f; color: #f4efe5; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 6px 6px 0 #1a1713; }
.how-deploy-works-span-11 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em; color: #cfe6dd; }
.how-deploy-works-span-12 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; border: 1px solid #cfe6dd; color: #f4efe5; }
.how-deploy-works-p-13 { margin: 0; font-size: 16px; line-height: 1.5; color: #e2eee8; }
.how-deploy-works-div-14 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #cfe6dd; border-top: 1px dashed rgba(244,239,229,.35); padding-top: 12px; }
.how-deploy-works-div-15 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px; align-items: center; border: 1px solid #d8d0bf; border-radius: 8px; padding: 28px; background: #fbf8f1; }
.how-deploy-works-div-16 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b655a; }
.how-deploy-works-p-17 { margin: 0; font-size: 16px; line-height: 1.5; color: #3d3831; text-wrap: pretty; }
.how-deploy-works-div-18 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.how-deploy-works-a-19 { border: 1px solid #1a1713; border-radius: 6px; padding: 14px 12px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #1a1713; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.how-deploy-works-a-19:hover { background: #e2eee8; color: #1a1713; }
.how-deploy-works-img-20 { width: 22px; height: 22px; display: block; }

/* catalog cta */
.catalog-cta-div-1 { max-width: 1180px; margin: 0 auto; padding: 88px 24px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.catalog-cta-div-2 { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }