/* =========================================================================
   Service / inner pages — page-hero, fullstack-block, product cards.
   (callout, feature-rows, compare-table, pricing-tiers added with their pages)
   Ported + normalized to tokens.
   ========================================================================= */

/* ----- Generic inner-page hero ----- */
.page-hero { padding: clamp(64px, 8vw, 100px) 0 var(--s-64); border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { margin-bottom: var(--s-24); }
.page-hero .display { margin-bottom: var(--s-24); }
.page-hero .lead { max-width: 68ch; margin-bottom: var(--s-32); }

/* ----- Full-stack feature block (what-we-build hub) ----- */
.fullstack-block { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fullstack-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.fullstack-text .eyebrow { margin-bottom: var(--s-24); }
.fullstack-text .title-xl { margin-bottom: var(--s-24); }
.fullstack-text p { font-size: var(--fs-small); line-height: 1.75; color: var(--text-secondary); margin-bottom: var(--s-16); }
.fullstack-text p strong { color: var(--text); font-weight: 500; }
.fullstack-text .pillars { margin-top: var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); }
.pillar { display: flex; align-items: center; gap: var(--s-16); padding: 14px 18px; border: 1px solid var(--line); background: var(--navy); }
.pillar .num { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--gold); line-height: 1; min-width: 28px; }
.pillar .label { font-size: var(--fs-small); color: var(--text); font-weight: 500; }
.fullstack-text .ctas { margin-top: var(--s-32); display: flex; gap: var(--s-16); flex-wrap: wrap; }

.fullstack-card { background: var(--navy); border: 1px solid var(--line-gold); padding: var(--s-48) var(--s-32); position: relative; text-align: center; }
.fullstack-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.fullstack-card .corner { border-color: var(--gold); }
.fs-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--navy); padding: 5px 16px; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fullstack-card .title-md { margin: var(--s-12) 0; font-size: 32px; }
.fs-tag { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-24); }
.fs-stat-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-24) 0; margin-bottom: var(--s-24); }
.fs-stat { flex: 1; }
.fs-stat + .fs-stat { border-left: 1px solid var(--line); }
.fs-stat .fs-n { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 36px; line-height: 1; color: var(--gold); }
.fs-stat .fs-l { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-8); }
.fs-from-price { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.fs-price { font-family: var(--font-display); font-weight: 300; font-size: 56px; letter-spacing: -0.025em; line-height: 1; color: var(--text); margin-bottom: var(--s-8); }
.fs-price-period { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-24); }

.btn-tier { display: inline-block; background: transparent; color: var(--gold); border: 1px solid var(--gold); padding: 14px 24px; text-align: center; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; white-space: nowrap; }
.btn-tier:hover { background: var(--gold); color: var(--navy); }
.btn-tier.is-featured { background: var(--gold); color: var(--navy); }
.btn-tier.is-featured:hover { background: transparent; color: var(--gold); }

/* ----- Three product cards ----- */
.products-grid { padding: var(--section-padding) 0; }
.products-head { text-align: center; max-width: 760px; margin: 0 auto var(--s-64); }
.products-head .eyebrow { justify-content: center; margin-bottom: var(--s-24); }
.products-head .title-xl { margin-bottom: var(--s-24); }
.products-head p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }
.products-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.product-card { background: var(--navy); padding: var(--s-48) var(--s-32); display: flex; flex-direction: column; transition: background 0.3s; }
.product-card:hover { background: var(--navy-2); }
.product-card .p-num { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-24); }
.product-card .title-md, .product-card h3 { font-size: 32px; margin-bottom: var(--s-16); }
.product-card p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-24); flex: 1; }
.product-card .p-meta { padding-top: var(--s-16); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.product-card .p-from { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.product-card .p-from strong { color: var(--text); font-weight: 500; }
.product-card .p-cta { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
.product-card:hover .p-cta { gap: var(--s-12); }

/* ----- Callout box ----- */
.features-list { padding: var(--section-padding) 0; }
.features-list.tight-top { padding-top: var(--s-48); }
.features-list.no-bottom { padding-bottom: 0; }
.callout-box { background: var(--navy-2); border: 1px solid var(--line-gold); padding: var(--s-48); margin: var(--s-48) 0; position: relative; }
.callout-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.callout-box .eyebrow { margin-bottom: var(--s-16); }
.callout-box h3, .callout-box .title-lg { font-size: clamp(28px, 3vw, 40px); margin-bottom: var(--s-16); }
.callout-box p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-16); }
.callout-box p:last-child { margin-bottom: 0; }
.callout-box p strong { color: var(--text); font-weight: 500; }

/* ----- Feature rows ----- */
.feature-row-detail { display: grid; grid-template-columns: 200px 1fr 1fr; gap: clamp(32px, 5vw, 80px); padding: var(--s-48) 0; border-bottom: 1px solid var(--line); align-items: start; }
.feature-row-detail:last-child { border-bottom: none; }
.feature-row-detail .num { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.feature-row-detail h3, .feature-row-detail .title-md { font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--text); }
.feature-row-detail h3 em { font-style: italic; color: var(--gold); }
.feature-row-detail p { font-size: var(--fs-small); line-height: 1.75; color: var(--text-secondary); }

/* ----- Integration row ----- */
.integration-row { padding: var(--s-48) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--navy); }
.integration-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); flex-wrap: wrap; }
.integration-inner .label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.integration-list { display: flex; gap: var(--s-48); flex-wrap: wrap; font-family: var(--font-display); font-size: 22px; font-weight: 300; font-style: italic; color: var(--text); }
.integration-list .sep { color: var(--gold); font-style: normal; font-size: var(--fs-small); }

/* ----- Pricing tiers ----- */
.pricing-section { padding: var(--section-padding) 0; background: var(--navy-2); }
.pricing-head { text-align: center; margin-bottom: var(--s-80); }
.pricing-head .eyebrow { justify-content: center; margin-bottom: var(--s-24); }
.pricing-head .title-xl { margin-bottom: var(--s-24); }
.pricing-head .lead { margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pricing-grid.pricing-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tier-replaces { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.04em; color: var(--gold); margin-bottom: var(--s-24); padding-bottom: var(--s-16); border-bottom: 1px solid var(--line-gold); }
.tier { padding: var(--s-48) var(--s-32); background: var(--navy); display: flex; flex-direction: column; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tier.featured { background: var(--navy-3); border-color: var(--line-gold); padding-top: var(--s-64); }
.tier.featured::before { content: attr(data-badge); position: absolute; top: -1px; left: -1px; right: -1px; background: var(--gold); color: var(--navy); font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; padding: 6px 12px; text-align: center; }
.tier .tier-name, .tier h4 { font-family: var(--font-display); font-size: 28px; font-weight: 400; font-style: italic; color: var(--text); margin-bottom: var(--s-12); }
.tier .tier-desc { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--s-32); line-height: 1.6; }
.tier .price { font-family: var(--font-display); font-size: 64px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.tier .price-period { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin: var(--s-12) 0 var(--s-32); }
.tier ul { margin-bottom: var(--s-32); flex: 1; }
.tier ul li { font-size: var(--fs-small); color: var(--text-secondary); padding: var(--s-12) 0; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 14px; }
.tier ul li::before { content: '·'; color: var(--gold); font-weight: 600; font-size: 20px; line-height: 1; flex-shrink: 0; }
.tier.featured .btn-tier { background: var(--gold); color: var(--navy); }
.tier.featured .btn-tier:hover { background: transparent; color: var(--gold); }
.tier .btn-tier { display: block; width: 100%; }

/* ----- Compare table ----- */
.compare-section { padding: var(--section-padding) 0; background: var(--navy-2); }
.compare-head { text-align: center; max-width: 800px; margin: 0 auto var(--s-64); }
.compare-head .eyebrow { justify-content: center; margin-bottom: var(--s-24); }
.compare-head .title-xl { margin-bottom: var(--s-24); }
.compare-head .lead { margin: var(--s-24) auto 0; }
.compare-table { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.compare-col { padding: var(--s-48) var(--s-32); background: var(--navy); }
.compare-col.geo { background: rgba(200, 169, 107, 0.04); border-left: 1px solid var(--line-gold); }
.compare-col .col-label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: var(--s-16); }
.compare-col.geo .col-label { color: var(--gold); }
.compare-col .col-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.02em; margin-bottom: var(--s-32); color: var(--text); }
.compare-col .col-title em { font-style: italic; color: var(--gold); }
.compare-col ul li { font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); padding: 14px 0 14px 24px; border-bottom: 1px solid var(--line); position: relative; }
.compare-col ul li:last-child { border-bottom: none; }
.compare-col ul li::before { content: ''; position: absolute; left: 0; top: 22px; width: 14px; height: 1px; background: var(--text-muted); }
.compare-col.geo ul li::before { background: var(--gold); }
.compare-col ul li strong { color: var(--text); font-weight: 500; }

/* ----- Volume visual (compass) ----- */
.volume-section { padding: var(--section-padding) 0; }
.volume-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); align-items: center; }
.volume-text .title-xl { margin-bottom: var(--s-32); }
.volume-text p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-16); }
.volume-text p strong { color: var(--text); font-weight: 500; }
.volume-visual { background: var(--navy-2); border: 1px solid var(--line); padding: var(--s-48); position: relative; }
.volume-visual .corner { z-index: 5; }
.volume-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); }
.vol-stat { padding: var(--s-24) 0; }
.vol-stat .n { font-family: var(--font-display); font-size: 72px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--gold); margin-bottom: var(--s-12); }
.vol-stat .label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: var(--s-8); }
.vol-stat p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }

/* ----- About ----- */
.about-content { padding: var(--section-padding) 0; }
.about-grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(40px, 6vw, 80px); }
.about-text p { font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.55; letter-spacing: -0.005em; color: var(--text); margin-bottom: var(--s-32); }
.about-text p:last-child { margin-bottom: 0; }
.about-text p em { font-style: italic; color: var(--gold); }
.about-text p strong { font-weight: 500; color: var(--gold); font-style: italic; }

@media (max-width: 1100px) {
	.pricing-grid.pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.about-grid { grid-template-columns: 1fr; gap: var(--s-24); }
}
@media (max-width: 960px) {
	.fullstack-inner { grid-template-columns: 1fr; gap: var(--s-48); }
	.products-three { grid-template-columns: 1fr; }
	.feature-row-detail { grid-template-columns: 1fr; gap: var(--s-16); }
	.pricing-grid { grid-template-columns: 1fr; }
	.compare-table { grid-template-columns: 1fr; }
	.volume-grid { grid-template-columns: 1fr; gap: var(--s-48); }
	.integration-inner { flex-direction: column; align-items: flex-start; gap: var(--s-16); }
}
@media (max-width: 600px) {
	.pricing-grid.pricing-grid-4 { grid-template-columns: 1fr; }
}