.hero { position: relative; min-height: var(--hero-min); overflow: hidden; background: var(--color-ink); color: var(--color-paper); }
.hero-media { position: absolute; inset: 0 0 0 auto; width: var(--hero-media-width); background: url("../img/railpilot-hero-site-v2.jpg") center / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--photo-fade-stop)); mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--photo-fade-stop)); }
.hero-inner { position: relative; z-index: var(--z-hero-content); display: grid; min-height: var(--hero-min); grid-template-columns: var(--grid-hero); align-items: center; gap: var(--space-16); padding-top: var(--header-height); padding-bottom: var(--hero-content-bottom-padding); }
.hero-copy { max-width: var(--hero-copy-width); }
.hero-copy h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.hero-copy h1 span { display: block; color: var(--color-signal); }
.hero-copy > p { max-width: var(--hero-caption-width); margin-top: var(--space-6); color: color-mix(in srgb, var(--color-paper) var(--opacity-copy), transparent); font-size: var(--text-md); }
.capture-card { align-self: end; margin-bottom: var(--space-20); padding: var(--space-5); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-md); background: var(--color-overlay); backdrop-filter: blur(var(--space-3)); box-shadow: var(--shadow-card); }
.capture-head, .capture-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); }
.capture-head span, .capture-status { color: var(--color-steel-dark); }
.capture-card dl { display: grid; gap: var(--space-2); margin-block: var(--space-5); }
.capture-card dl div { padding: var(--space-3); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-glass); }
.capture-card dt { color: var(--color-steel-dark); font-size: var(--text-xs); }
.capture-card dd { font-weight: var(--weight-medium); }
.capture-status { justify-content: flex-start; }
.capture-status span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-success); box-shadow: 0 0 var(--space-3) var(--color-success); }
.hero-rail { position: absolute; inset: auto 0 0; z-index: var(--z-hero-rail); height: var(--space-5); background: var(--color-paper); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hero-rail::before, .hero-rail::after { content: ""; position: absolute; top: var(--space-2); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-line); }
.hero-rail::before { left: var(--hero-rail-dot-left); }.hero-rail::after { right: var(--hero-rail-dot-right); }
.hero-rail span { position: absolute; top: var(--space-2); left: var(--hero-rail-span-left); width: var(--space-12); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-line); }
.promise-band { padding-block: var(--space-12); background: var(--color-paper); }
.promise-grid { display: grid; grid-template-columns: var(--grid-promise); gap: var(--space-10); align-items: center; }
.promise-grid h2 { font-size: var(--text-xl); }
.promise-grid p { padding-left: var(--space-6); border-left: var(--border-thin) solid var(--color-line); }
.promise-grid strong, .promise-grid span { display: block; }.promise-grid span { margin-top: var(--space-1); color: var(--color-steel); font-size: var(--text-sm); }
.business-value { background: var(--color-fog); }.business-value-layout { display: grid; grid-template-columns: var(--grid-business); gap: var(--space-16); align-items: center; }.benefit-rail { display: grid; gap: var(--space-4); margin-top: var(--space-10); }.benefit-rail p { display: grid; grid-template-columns: var(--grid-benefit); gap: var(--space-4); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line); }.benefit-rail strong { color: var(--color-ink); font-size: var(--text-sm); }.benefit-rail span { color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }.business-value .fineprint { margin-top: var(--space-6); }
.system-value { background: var(--color-ink); }.system-layout { display: grid; grid-template-columns: var(--grid-product); gap: var(--space-16); align-items: center; }.system-value .section-intro { max-width: var(--content-module); }.system-benefits { color: var(--color-paper); }.system-visual { overflow: hidden; border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-soft); }.system-visual img { width: var(--size-full); }.system-visual figcaption { padding: var(--space-3) var(--space-4); color: var(--color-steel-dark); font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-ink-soft); }.role-rail { display: grid; grid-template-columns: var(--grid-five); gap: var(--space-5); margin-top: var(--space-16); }.role-rail button { min-height: var(--touch-size); padding-top: var(--space-5); text-align: left; border-top: var(--border-thin) solid var(--color-line-dark); color: var(--color-paper); }.role-rail span, .role-panel > span { color: var(--color-signal); font-family: var(--font-mono); font-size: var(--text-xs); }.role-rail strong, .role-rail small { display: block; }.role-rail strong { margin-top: var(--space-3); font-size: var(--text-md); }.role-rail small { margin-top: var(--space-2); color: var(--color-steel-dark); font-size: var(--text-sm); line-height: var(--leading-body); }.role-rail button[aria-selected="true"] { border-color: var(--color-signal); }.role-rail button[aria-selected="true"] strong { color: var(--color-signal); }.role-panel { display: grid; gap: var(--space-4); margin-top: var(--space-10); padding: var(--space-6); border: var(--border-thin) solid var(--color-line-dark); background: var(--color-glass); }.role-panel > strong { max-width: var(--content-module); color: var(--color-paper); font-size: var(--text-lg); }.role-panel dl { display: grid; grid-template-columns: var(--grid-role-details); gap: var(--space-4); }.role-panel dl div { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line-dark); }.role-panel dt { color: var(--color-steel-dark); font-size: var(--text-xs); }.role-panel dd { margin-top: var(--space-2); color: var(--color-paper); font-size: var(--text-sm); }
.work-section { background: var(--color-paper); }.work-section-layout { display: grid; grid-template-columns: var(--grid-product); gap: var(--space-16); align-items: center; }.work-section-visual { overflow: hidden; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-soft); }.work-section-visual img { width: var(--size-full); }.work-section-visual figcaption, .proof-chain-visual figcaption, .readiness-visual figcaption { padding: var(--space-3) var(--space-4); color: var(--color-steel); font-family: var(--font-mono); font-size: var(--text-xs); }.work-ledger { display: grid; grid-template-columns: var(--grid-five); gap: var(--space-5); margin-top: var(--space-16); }.work-ledger p { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line); }.work-ledger strong, .work-ledger span { display: block; }.work-ledger strong { color: var(--color-ink); font-size: var(--text-sm); }.work-ledger span { margin-top: var(--space-2); color: var(--color-steel); font-size: var(--text-sm); }
.tender { background: var(--color-fog); }.tender-layout { display: grid; grid-template-columns: var(--grid-tender); gap: var(--space-16); align-items: start; }.explain-visual { overflow: hidden; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-soft); }.explain-visual img { display: block; width: var(--size-full); }.explain-visual figcaption { padding: var(--space-3) var(--space-4); color: var(--color-steel); font-family: var(--font-mono); font-size: var(--text-xs); }.value-steps { display: grid; gap: var(--space-3); margin-top: var(--space-8); list-style: none; }.value-steps li { display: grid; grid-template-columns: var(--grid-step-mobile); gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-thin) solid var(--color-line); }.value-steps li > span { color: var(--color-signal-deep); font-family: var(--font-mono); font-size: var(--text-xs); }.value-steps strong, .value-steps small { display: block; }.value-steps strong { color: var(--color-ink); }.value-steps small { margin-top: var(--space-1); color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }.tender .fineprint { margin-top: var(--space-6); }
.process { background: var(--color-fog); }
.process-layout { display: grid; grid-template-columns: var(--grid-process); gap: var(--space-20); }
.process-list { position: relative; display: grid; list-style: none; }
.process-list::before { content: ""; position: absolute; inset: 0 auto 0 var(--space-5); width: var(--border-thin); background: var(--color-line); }
.process-list li { position: relative; display: grid; grid-template-columns: var(--grid-step); gap: var(--space-5); padding: var(--space-6) 0; border-bottom: var(--border-thin) solid var(--color-line); }
.process-list li > span { z-index: var(--z-flow-marker); display: grid; width: var(--space-10); height: var(--space-10); place-items: center; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-round); background: var(--color-fog); color: var(--color-steel); font-family: var(--font-mono); }
.process-list h3 { font-size: var(--text-lg); }.process-list p { margin-top: var(--space-2); color: var(--color-steel); }
.technical-core { background: var(--color-paper); }
.technical-grid { display: grid; grid-template-columns: var(--grid-double); gap: var(--space-8); margin-top: var(--space-16); }
.technical-item { overflow: hidden; border-top: var(--border-strong) solid var(--color-signal); background: var(--color-fog); }
.technical-item picture { display: block; }
.technical-item img { display: block; width: var(--size-full); aspect-ratio: var(--practice-aspect); object-fit: cover; object-position: top; }
.technical-item div { padding: var(--space-6); }.technical-item span { color: var(--color-signal-deep); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); }.technical-item h3 { margin-top: var(--space-3); }.technical-item p { margin-top: var(--space-4); color: var(--color-steel); }
.technical-item--copy { grid-template-columns: var(--grid-single); }
.module-rail { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-line); }.module-rail strong, .module-rail small { flex-basis: var(--size-full); }.module-rail span { padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); }.module-rail small { color: var(--color-steel); line-height: var(--leading-body); }
.proof-chain { background: var(--color-ink-soft); }.proof-chain-layout { display: grid; grid-template-columns: var(--grid-proof); gap: var(--space-16); align-items: center; }.proof-chain-visual { overflow: hidden; border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-soft); }.proof-chain-visual picture { display: block; }.proof-chain-visual img { display: block; width: var(--size-full); }.proof-chain-visual figcaption { background: var(--color-ink); color: var(--color-steel-dark); }.proof-points { display: grid; gap: var(--space-4); margin-top: var(--space-10); }.proof-points p { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line-dark); }.proof-points strong, .proof-points span { display: block; }.proof-points strong { color: var(--color-paper); font-size: var(--text-sm); }.proof-points span { margin-top: var(--space-2); color: var(--color-steel-dark); font-size: var(--text-sm); }
.site-story-photo { overflow: hidden; margin-top: var(--space-16); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-md); background: var(--color-ink-soft); box-shadow: var(--shadow-soft); }.site-story-photo img { width: var(--size-full); aspect-ratio: var(--site-photo-aspect); object-fit: cover; }.site-story-photo figcaption { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6); background: var(--color-ink); }.site-story-photo strong { color: var(--color-paper); font-size: var(--text-md); }.site-story-photo span { max-width: var(--copy-width); color: var(--color-steel-dark); font-size: var(--text-sm); }
.mobile-layout { display: grid; grid-template-columns: var(--grid-mobile); gap: var(--space-24); align-items: start; }
.phone-stage { position: sticky; top: calc(var(--header-height) + var(--space-8)); display: grid; min-height: var(--phone-stage-height); place-items: center; }
.phone-stage img { position: relative; z-index: var(--z-phone-media); width: var(--phone-width); max-height: var(--phone-image-height); object-fit: contain; filter: drop-shadow(var(--shadow-soft)); }
.phone-glow { position: absolute; width: var(--glow-size); height: var(--glow-size); border-radius: var(--radius-round); background: color-mix(in srgb, var(--color-signal) var(--opacity-glow), transparent); filter: blur(var(--space-16)); }
.phone-caption { position: absolute; z-index: var(--z-phone-caption); right: 0; bottom: var(--space-12); display: grid; min-width: var(--phone-caption-min); padding: var(--space-4); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-ink-soft); box-shadow: var(--shadow-card); }
.phone-caption span { color: var(--color-signal); font-family: var(--font-mono); font-size: var(--text-xs); }.phone-caption small { color: var(--color-steel-dark); }
.mobile-actions { margin-top: var(--space-12); border-top: var(--border-thin) solid var(--color-line-dark); }
.mobile-action { display: grid; width: var(--size-full); grid-template-columns: var(--grid-action); padding: var(--space-5) 0; text-align: left; border-bottom: var(--border-thin) solid var(--color-line-dark); }
.mobile-action > span { grid-row: 1 / 3; color: var(--color-steel-dark); font-family: var(--font-mono); }.mobile-action strong { font-size: var(--text-md); }.mobile-action small { margin-top: var(--space-1); color: var(--color-steel-dark); font-size: var(--text-sm); }
.mobile-action.is-featured > span { color: var(--color-signal); }.mobile-action.is-featured { padding-left: var(--space-4); border-left: var(--border-strong) solid var(--color-signal); }
.network-note { margin-top: var(--space-8); }
.capability-list { margin-top: var(--space-16); border-top: var(--border-thin) solid var(--color-line); }
.capability { border-bottom: var(--border-thin) solid var(--color-line); }
.capability button { display: grid; width: var(--size-full); grid-template-columns: var(--space-16) var(--grid-single) var(--capability-label-width); align-items: center; gap: var(--space-5); min-height: var(--space-20); padding: var(--space-4) 0; text-align: left; background: transparent; }
.capability button > span { color: var(--color-steel); font-family: var(--font-mono); }.capability button strong { font-size: var(--text-lg); }.capability button em { color: var(--color-steel); font-style: normal; text-align: right; }
.capability.is-open button strong { color: var(--color-signal); }.capability-body { max-width: var(--content-module); padding: 0 0 var(--space-6) var(--space-20); color: var(--color-steel); }
.billing-layout, .control-layout { display: grid; grid-template-columns: var(--grid-product); align-items: center; gap: var(--space-16); }
.billing-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-10); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.billing-flow span { padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-sm); white-space: nowrap; }.billing-flow i { flex: 1 0 var(--space-6); height: var(--border-thin); background: var(--color-signal); }
.billing-details { display: grid; grid-template-columns: var(--grid-double); gap: var(--space-5); margin-top: var(--space-6); }.billing-details p { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line-dark); color: var(--color-steel-dark); font-size: var(--text-sm); }.billing-details strong { color: var(--color-paper); }.billing .fineprint { margin-top: var(--space-6); }
.dossier-note { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-left: var(--border-strong) solid var(--color-signal); background: var(--color-glass); color: var(--color-steel-dark); font-size: var(--text-sm); }.dossier-note strong { color: var(--color-paper); }
.documents { background: var(--color-fog); }.documents-layout { display: grid; grid-template-columns: var(--grid-process); gap: var(--space-20); align-items: start; }
.document-visual { margin-top: var(--space-12); background: var(--color-ink-soft); }.document-visual picture { display: block; }.document-visual figcaption { color: var(--color-steel-dark); background: var(--color-ink); }
.document-rail { display: grid; border-top: var(--border-thin) solid var(--color-line); }.document-rail span { display: flex; min-height: var(--control-height); align-items: center; padding: var(--space-4) 0 var(--space-4) var(--space-8); border-bottom: var(--border-thin) solid var(--color-line); color: var(--color-ink); font-weight: var(--weight-bold); }.document-rail span::before { content: ""; width: var(--space-3); height: var(--space-3); margin-left: calc(var(--space-8) * -1); margin-right: var(--space-5); border: var(--border-strong) solid var(--color-signal); border-radius: var(--radius-round); }
.casefile-flow { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-12); padding-block: var(--space-5); border-block: var(--border-thin) solid var(--color-line); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); }.casefile-flow button { flex: 1; min-height: var(--touch-size); text-align: left; }.casefile-flow button[aria-pressed="true"] { color: var(--color-signal-deep); }.casefile-flow i { width: var(--line-length); height: var(--border-thin); background: var(--color-signal); }.casefile-preview { margin-top: var(--space-6); padding: var(--space-6); border-left: var(--border-strong) solid var(--color-signal); background: var(--color-paper); }.casefile-preview span, .casefile-preview strong { display: block; }.casefile-preview span { color: var(--color-signal-deep); font-family: var(--font-mono); font-size: var(--text-xs); }.casefile-preview strong { margin-top: var(--space-3); color: var(--color-ink); font-size: var(--text-lg); }.casefile-preview p { max-width: var(--content-module); margin-top: var(--space-3); color: var(--color-steel); }.scope-note { margin-top: var(--space-8); }
.assets-section { padding-bottom: var(--section-transition-space); }
.assets-section + .readiness { padding-top: var(--section-transition-space); }
.assets-layout { display: grid; grid-template-columns: var(--grid-product); gap: var(--space-16); align-items: center; }.asset-photo { overflow: hidden; border-radius: var(--radius-md); background: var(--color-ink-soft); }.asset-photo img { width: var(--size-full); aspect-ratio: var(--asset-photo-aspect); object-fit: cover; }.asset-photo figcaption { padding: var(--space-3) var(--space-4); color: var(--color-steel-dark); font-family: var(--font-mono); font-size: var(--text-xs); }
.photo-credit { color: inherit; text-decoration: underline; text-decoration-color: var(--color-signal); text-underline-offset: var(--space-1); }
.readiness { background: var(--color-fog); }.readiness-layout { display: grid; grid-template-columns: var(--grid-product); gap: var(--space-16); align-items: center; }.readiness-visual { overflow: hidden; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-soft); }.readiness-visual img { width: var(--size-full); }.readiness-list { display: grid; gap: var(--zero); margin-top: var(--space-10); }.readiness-check { display: grid; grid-template-columns: 1fr var(--touch-size); gap: var(--space-4); align-items: center; min-height: var(--touch-size); padding-block: var(--space-4); text-align: left; border-top: var(--border-thin) solid var(--color-line); }.readiness-check strong, .readiness-check small { display: block; }.readiness-check strong { color: var(--color-ink); font-size: var(--text-sm); }.readiness-check small { margin-top: var(--space-2); color: var(--color-steel); font-size: var(--text-sm); }.readiness-check i { display: grid; width: var(--space-5); height: var(--space-5); place-self: center; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-round); }.readiness-check[aria-pressed="true"] { border-color: var(--color-signal); }.readiness-check[aria-pressed="true"] i { border-color: var(--color-signal); background: var(--color-signal); box-shadow: inset 0 0 0 var(--space-1) var(--color-paper); }.readiness-status { margin-top: var(--space-5); padding: var(--space-4); border-left: var(--border-strong) solid var(--color-signal); color: var(--color-steel); font-size: var(--text-sm); }.readiness .fineprint { margin-top: var(--space-8); }
.map-section { background: var(--color-paper); }.map-layout { display: grid; grid-template-columns: var(--grid-product); gap: var(--space-16); align-items: center; }.map-points { display: grid; gap: var(--space-3); margin-top: var(--space-8); list-style: none; }.map-points li { position: relative; padding-left: var(--space-6); color: var(--color-steel); }.map-points li::before { content: ""; position: absolute; top: var(--check-offset); left: 0; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-round); background: var(--color-signal); }
.trust-grid { display: grid; grid-template-columns: var(--grid-triple); gap: var(--space-10); margin-top: var(--space-12); }.trust article { padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-line); }.trust article > span { color: var(--color-steel); font-family: var(--font-mono); }.trust h3 { margin-top: var(--space-8); font-size: var(--text-lg); }.trust article p { margin-top: var(--space-4); color: var(--color-steel); }
.rollout { background: var(--color-ink-soft); color: var(--color-paper); }.rollout-layout { display: grid; grid-template-columns: var(--grid-rollout); gap: var(--space-16); align-items: start; }.rollout .section-intro p { color: var(--color-steel-dark); }.rollout-steps { display: grid; gap: var(--space-4); list-style: none; }.rollout-steps li { display: grid; grid-template-columns: var(--grid-step-mobile); gap: var(--space-4); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line-dark); }.rollout-steps span { color: var(--color-signal); font-family: var(--font-mono); font-size: var(--text-xs); }.rollout-steps strong, .rollout-steps small { display: block; }.rollout-steps strong { font-size: var(--text-md); }.rollout-steps small { margin-top: var(--space-1); color: var(--color-steel-dark); font-size: var(--text-sm); line-height: var(--leading-body); }
.faq { background: var(--color-fog); }.faq-layout { display: grid; grid-template-columns: var(--grid-faq); gap: var(--space-16); }.faq-list .capability button { grid-template-columns: var(--grid-faq-button); }.faq-list .capability button > span { font-size: var(--text-lg); }.faq-list .capability-body { padding: var(--space-2) var(--space-5) var(--space-6); }
.contact { padding-block: var(--space-24); background-image: var(--gradient-contact-overlay); background-color: var(--color-ink); }
.contact-inner { display: grid; grid-template-columns: var(--grid-contact); gap: var(--space-16); align-items: end; }.contact h2 { max-width: var(--hero-copy-width); margin-top: var(--space-4); }.contact h2 + p { max-width: var(--copy-width); margin-top: var(--space-6); color: var(--color-steel-dark); }.contact-email { display: block; width: fit-content; margin-top: var(--space-5); color: var(--color-paper); text-decoration: underline; text-underline-offset: var(--space-2); }.contact-action p { margin-top: var(--space-4); color: var(--color-steel-dark); font-size: var(--text-sm); }
.assets-layout--single { grid-template-columns: var(--grid-single); }
.assets-layout--single .section-intro { max-width: var(--content-wide); }
.content-layout--single { grid-template-columns: var(--grid-single); }
.content-layout--single .section-intro { max-width: var(--content-wide); }
.site-footer { padding-block: var(--space-10) var(--space-6); background: var(--color-ink); color: var(--color-paper); border-top: var(--border-thin) solid var(--color-line-dark); }.site-footer .brand img { width: var(--logo-footer-width); }
.footer-grid { display: grid; grid-template-columns: var(--grid-footer); gap: var(--space-10); padding-bottom: var(--space-10); }
.footer-brand p { max-width: var(--footer-claim-width); margin-top: var(--space-5); color: var(--color-steel-dark); font-size: var(--text-sm); line-height: var(--leading-body); }
.footer-nav { display: grid; align-content: start; justify-items: start; gap: var(--space-3); color: var(--color-steel-dark); font-size: var(--text-sm); }
.footer-nav strong { color: var(--color-paper); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--color-paper); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-line-dark); color: var(--color-steel-dark); font-size: var(--text-xs); }.footer-base p { margin: 0; }
.promise-band { border-bottom: var(--border-thin) solid var(--color-line-soft); }
.system-visual figcaption, .work-section-visual figcaption, .proof-chain-visual figcaption, .readiness-visual figcaption, .explain-visual figcaption, .asset-photo figcaption { border-top: var(--border-thin) solid var(--color-line); letter-spacing: var(--media-caption-tracking); line-height: var(--media-caption-leading); }
.system-visual figcaption, .proof-chain-visual figcaption, .asset-photo figcaption { border-color: var(--color-line-dark); }
.site-story-photo figcaption { border-top: var(--border-thin) solid var(--color-line-dark); }
.text-cta { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); padding-bottom: var(--space-2); border-bottom: var(--border-strong) solid var(--color-signal); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.form-price { grid-column: 1 / -1; color: var(--color-steel-dark); font-size: var(--text-xs); }
.text-cta span { color: var(--color-signal-deep); font-size: var(--text-md); }.contact-copy { max-width: var(--content-module); }.contact-outcomes { display: grid; gap: var(--space-4); margin-top: var(--space-10); }.contact-outcomes p { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line-dark); }.contact-outcomes strong, .contact-outcomes span { display: block; }.contact-outcomes strong { color: var(--color-paper); font-size: var(--text-sm); }.contact-outcomes span { margin-top: var(--space-2); color: var(--color-steel-dark); font-size: var(--text-sm); line-height: var(--leading-body); }
.contact-form { display: grid; grid-template-columns: var(--grid-form-fields); gap: var(--space-5); padding: var(--space-8); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-ink) var(--opacity-header), transparent); }
.form-header, .form-field-wide, .form-submit, .form-status { grid-column: 1 / -1; }
.form-header { padding-bottom: var(--space-5); border-bottom: var(--border-thin) solid var(--color-line-dark); }
.form-header h3 { color: var(--color-paper); font-size: var(--text-lg); }
.form-header p { margin-top: var(--space-2); color: var(--color-steel-dark); font-size: var(--text-sm); line-height: var(--leading-body); }
.form-field { display: grid; gap: var(--space-2); }
.form-field label { color: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.form-field label .form-optional { color: var(--color-steel-dark); font-weight: var(--weight-regular); }.form-field label .form-required { color: var(--color-paper); font-weight: var(--weight-regular); }
.form-field input, .form-field textarea { width: var(--size-full); padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-ink-soft); color: var(--color-paper); }
.form-field input { min-height: var(--control-height); }
.form-field textarea { min-height: var(--form-message-min-height); resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-signal); }
.form-field textarea::placeholder { color: var(--color-steel-dark); }
.form-hint { color: var(--color-steel-dark); font-size: var(--text-xs); line-height: var(--leading-body); }
.form-submit { width: var(--size-full); margin-top: var(--space-2); border: 0; }.form-submit:disabled { cursor: wait; opacity: var(--opacity-note); }
.form-status { color: var(--color-steel-dark); font-size: var(--text-sm); }
.form-status::before { display: inline-block; margin-right: var(--space-3); color: var(--color-signal); }
.form-status[data-state="success"]::before { content: "✓"; }
.form-status[data-state="loading"]::before { content: "…"; }
.form-status[data-state="error"] { color: var(--color-danger); }
.form-status[data-state="error"]::before { content: "!"; }
.form-status[data-state="fallback"]::before { content: "↗"; }
.form-field [aria-invalid="true"] { border-color: var(--color-danger); }
.spec-strip { display: grid; grid-template-columns: var(--grid-spec); gap: var(--space-8); margin-top: var(--space-10); padding-top: var(--space-8); border-top: var(--border-thin) solid var(--color-line-soft); }
.spec-strip p { display: grid; align-content: start; gap: var(--space-2); }
.spec-strip strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--spec-number-size); font-stretch: var(--display-stretch); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
.spec-strip span { color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.finance { background: var(--color-fog); }
.finance-layout { display: grid; grid-template-columns: var(--grid-finance); gap: var(--space-16); align-items: center; }
.ledger-card { justify-self: center; width: min(var(--ledger-width), var(--size-full)); padding: var(--space-6); border: var(--border-thin) solid var(--color-line-premium); border-radius: var(--radius-premium); background: var(--color-paper); box-shadow: var(--shadow-premium); }
.ledger-head { display: grid; gap: var(--space-1); }
.ledger-head span { color: var(--color-signal-deep); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ledger-head strong { color: var(--color-ink); font-size: var(--text-md); }
.ledger-card dl { display: grid; gap: var(--space-2); margin-block: var(--space-5); }
.ledger-card dl div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-line-soft); border-radius: var(--radius-sm); background: var(--color-paper-muted); }
.ledger-card dt { color: var(--color-steel); font-size: var(--text-xs); }
.ledger-card dd { color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.ledger-status { display: flex; align-items: center; gap: var(--space-3); color: var(--color-steel); font-size: var(--text-xs); }
.ledger-status span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-success); box-shadow: 0 0 var(--space-3) var(--color-success); }
.security { background: var(--color-paper); }
.security-grid { display: grid; grid-template-columns: var(--grid-security); gap: var(--space-10); margin-top: var(--space-16); }
.security-grid article { padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-line-premium); }
.security-grid h3 { font-size: var(--text-lg); }
.security-grid p { margin-top: var(--space-3); color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.billing-detail-wide { grid-column: 1 / -1; }
.rollout-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.rollout-cta p { margin: 0; color: var(--color-steel-dark); font-size: var(--text-sm); }
.mobile-cta { position: fixed; inset: auto 0 0; z-index: var(--z-header); display: none; padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0rem)); border-top: var(--border-thin) solid var(--color-line-premium-dark); background: color-mix(in srgb, var(--color-ink-rich) var(--opacity-header), transparent); -webkit-backdrop-filter: blur(var(--space-3)); backdrop-filter: blur(var(--space-3)); transform: translateY(var(--size-full)); transition: transform var(--duration-base) var(--ease-out); pointer-events: none; }
.mobile-cta .button { width: var(--size-full); }
.mobile-cta.is-visible { transform: translateY(0); pointer-events: auto; }
body.menu-open .mobile-cta { transform: translateY(var(--size-full)); pointer-events: none; }
.security-note { max-width: var(--content-wide); margin-top: var(--space-12); padding: var(--space-5) var(--space-6); border-left: var(--border-strong) solid var(--color-signal); background: var(--color-fog); color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.security-note strong { color: var(--color-ink); }
.spec-strip p { padding-left: var(--space-6); border-left: var(--border-thin) solid var(--color-line-soft); }
.form-trap { position: absolute; left: var(--form-trap-offset); top: auto; width: var(--visually-hidden-size); height: var(--visually-hidden-size); overflow: hidden; }
.form-privacy { grid-column: 1 / -1; color: var(--color-steel-dark); font-size: var(--text-xs); }
.form-privacy a { color: var(--color-paper); text-decoration: underline; text-underline-offset: var(--space-1); }
.legal-back { margin-left: auto; }
.legal-main { padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-24); background: var(--color-paper); }
.legal-shell { max-width: var(--content-narrow); }
.legal-main h1 { margin-top: var(--space-4); font-size: var(--text-section); }
.legal-updated { margin-top: var(--space-4); color: var(--color-steel); font-size: var(--text-sm); }
.legal-main h2 { margin-top: var(--space-12); font-size: var(--text-lg); }
.legal-main p, .legal-main address, .legal-main ul { margin-top: var(--space-4); color: var(--color-steel); line-height: var(--leading-body); }
.legal-main address { font-style: normal; }
.legal-main address strong, .legal-main p strong { color: var(--color-ink); }
.legal-main a { color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--space-1); }
.legal-main ul { padding-left: var(--space-6); }
.legal-main li { margin-top: var(--space-2); }
.legal-footer .footer-base { padding-top: var(--space-6); border-top: 0; }
.legal-footer-nav { display: flex; gap: var(--space-5); }
.km-indicator { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-header); display: none; padding: var(--space-2) var(--space-4); border: var(--border-thin) solid var(--color-line-premium-dark); border-radius: var(--radius-round); background: color-mix(in srgb, var(--color-ink-rich) var(--opacity-header), transparent); color: var(--color-steel-dark); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--media-caption-tracking); opacity: 0; transform: translateY(var(--space-3)); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); pointer-events: none; }
.km-indicator.is-visible { opacity: 1; transform: translateY(0); }
.hero-media { transform: translateY(calc(var(--hero-parallax-distance) * var(--hero-scroll-ratio))) scale(var(--hero-media-scale)); will-change: transform; }