/* Gimbix — an attitude indicator for model spend: sky and earth may tilt, the horizon (answer quality) holds level. */

/* Fonts, served from this site. The fallbacks are metric-matched, so text does not reflow when the real face arrives. */
@font-face { font-family: "Saira Semi Condensed"; src: url("/fonts/saira-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Saira Semi Condensed"; src: url("/fonts/saira-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Saira fallback"; src: local("Arial"); size-adjust: 93.5%; ascent-override: 121.3%; descent-override: 46.9%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans fallback"; src: local("Arial"); size-adjust: 102.2%; ascent-override: 92.9%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --sky: #2b63d9;
  --sky-deep: #1d4aa8;
  --earth: #6e4e37;
  --earth-deep: #573c2a;
  --horizon: #ff6a13;
  --ink: #0c1b2e;
  --ink-soft: #41526a;
  --page: #eef2f7;
  --panel: #ffffff;
  --rule: #d5dde8;
  --control: #6b7a90;
  --good: #1f7a4d;
  --bad: #b3261e;
  --display: "Saira Semi Condensed", "Saira fallback", sans-serif;
  --body: "Public Sans", "Public Sans fallback", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: 2.6rem;
  --step-4: clamp(2.6rem, 6.2vw, 4.9rem);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --header: 60px;
  /* Motion: one set of timings for every page. --ease-out is GSAP's power3.out, --ease-inout its power2.inOut. */
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 160ms;
  --t-enter: 600ms;
  --t-draw: 900ms;
  --t-instrument: 1200ms;
  --stagger: 70ms;
  --lead: 150ms;
  --rise: 16px;
  --tip: 12deg; /* positive: a card lies back into the page and stands up, the same way the pinned steps do */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--step-0)/1.6 var(--body); }
a { color: var(--sky-deep); text-underline-offset: 3px; transition: color var(--t-micro), text-decoration-color var(--t-micro); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; border-radius: 3px; }
.hero :focus-visible, .page-head :focus-visible, .problem :focus-visible, .vision-band :focus-visible, .callout :focus-visible, .calc-result :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--horizon); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: 0.005em; margin: 0 0 0.5em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; max-width: 68ch; }
:where(p:not(.kicker):not(.card-k), ul, ol, .table-scroll, .facts, figure, .note, .links) + :is(h2, h3) { margin-top: 1.6em; }
code, .mono, table.data td.num, .readout b { font-family: var(--mono); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 900px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--panel); padding: 8px 12px; z-index: 10; }
.note { font-size: var(--step--1); color: var(--ink-soft); }
.kicker { font: 500 var(--step--1)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.big { font-size: var(--step-1); line-height: 1.5; max-width: 60ch; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 8px 0; border-bottom: 1px solid var(--rule); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 5; background: rgba(238, 242, 247, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); view-transition-name: site-header; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.35rem/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: 0.02em; }
.brand svg { width: 28px; height: 28px; }
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: var(--step--1); }
.site-nav a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.site-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--horizon); }
.site-nav .cta { color: var(--panel); background: var(--ink); padding: 8px 14px; border-radius: 6px; box-shadow: none; }
.site-nav .cta:hover { background: var(--sky-deep); color: var(--panel); }
.nav-menu { display: none; }
@media (max-width: 960px) {
  .site-nav { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-menu summary { list-style: none; cursor: pointer; font: 600 var(--step--1)/1 var(--body); padding: 11px 16px; border: 1.5px solid var(--ink); border-radius: 6px; }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu[open] summary { background: var(--ink); color: #fff; }
  .nav-sheet { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px var(--gutter) 20px; background: var(--panel); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px rgba(12,27,46,0.12); }
  .nav-sheet a:not(.btn) { padding: 13px 0; font: 600 1.15rem/1.2 var(--display); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .nav-sheet a[aria-current] { color: var(--sky-deep); }
  .nav-sheet .btn { margin-top: 16px; text-align: center; }
}

/* ---------- buttons and pills ---------- */
.btn { display: inline-block; font: 600 var(--step-0)/1 var(--body); padding: 15px 22px; border-radius: 8px; text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out), background-color var(--t-micro), border-color var(--t-micro), color var(--t-micro); }
.btn.primary { background: var(--horizon); color: var(--ink); }
.btn.primary:hover { background: #ff8a45; color: var(--ink); }
.btn.ghost { color: #fff; border: 1.5px solid rgba(255,255,255,0.6); background: transparent; }
.btn.ghost:hover { border-color: #fff; color: #fff; }
.btn:active { transform: translateY(1px); transition-duration: 80ms; }
.pill { display: inline-block; font: 500 0.74rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; white-space: nowrap; background: #e8eef9; color: var(--sky-deep); vertical-align: 0.1em; }
.pill.pass { background: #e3f3ea; color: var(--good); }
.pill.fail { background: #fbe7e5; color: var(--bad); }
.pill.muted { background: #eef0f3; color: var(--ink-soft); }
.caps { margin: 0; }
.caps .pill { margin: 0 6px 6px 0; }

/* ---------- hero: the attitude indicator. Sky, earth and gimbal hang from the horizon line itself. ---------- */
.hero { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: center; isolation: isolate; background: var(--earth); min-height: min(88vh, 860px); }
.hero-short { min-height: min(72vh, 700px); }
.level-line { position: relative; height: 3px; }
.level-line .world { position: absolute; z-index: -2; left: -20%; width: 140%; height: 200vh; top: 50%;
  transform: translateY(-50%) rotate(var(--tilt, -4deg)) translateY(var(--pitch, 0px)); transition: transform var(--t-instrument) var(--ease-out); }
.level-line .sky { position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, var(--sky-deep) 45%, var(--sky)); }
.level-line .earth { position: absolute; inset: 50% 0 0 0; background: linear-gradient(180deg, var(--earth), var(--earth-deep) 55%); }
.level-line .horizon { position: relative; height: 3px; background: var(--horizon); box-shadow: 0 0 18px rgba(255,106,19,0.55); }
.off-level .level-line .world { transform: translateY(-50%) rotate(-18deg); transition: none; }
/* The 3D gimbal is centred on the horizon line, so the ball's horizon continues the page's. */
.level-line .gimbal { position: absolute; z-index: -1; top: 50%; right: calc(max(0px, (100vw - var(--max)) / 2) - 36px); width: min(38vw, 540px); aspect-ratio: 1;
  transform: translateY(-50%); opacity: 0; transition: opacity var(--t-instrument) var(--ease-out); pointer-events: none; }
.level-line .gimbal.is-live { opacity: 1; }
.level-line .gimbal canvas { display: block; width: 100% !important; height: 100% !important; }
@media (max-width: 900px) { .level-line .gimbal { width: 86vw; right: -30vw; } .level-line .gimbal.is-live { opacity: 0.42; } }
.hero .above { width: 100%; padding-top: clamp(72px, 12vh, 128px); padding-bottom: 26px; }
.hero .below { width: 100%; padding-top: 30px; padding-bottom: 64px; }
.hero .eyebrow { font: 500 var(--step--1)/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.92); margin-bottom: 18px; }
.hero h1 { font-size: var(--step-4); max-width: 16ch; margin: 0; }
.hero h1 .level { display: block; }
.hero .lede { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; color: rgba(255,255,255,0.94); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 10px 40px; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.28); }
.readout { font-size: var(--step--1); color: rgba(255,255,255,0.88); max-width: 24ch; }
.readout b { display: block; font: 600 var(--step-2)/1.15 var(--mono); color: #fff; }
.hero .footnote { font-size: 0.82rem; color: rgba(255,255,255,0.8); margin-top: 16px; max-width: 78ch; }
@media (max-width: 760px) { .readouts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .readouts { grid-template-columns: 1fr; gap: 14px; } .readout b { display: inline; margin-right: 6px; font-size: var(--step-1); } }

/* ---------- page head: every inner page opens in the sky, above the same level horizon ---------- */
.page-head { position: relative; padding: clamp(44px, 6.5vw, 72px) 0 clamp(34px, 4.5vw, 48px); color: #fff; background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 100%); }
.page-head .horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--horizon); box-shadow: 0 0 18px rgba(255,106,19,0.55); }
.page-head h1 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.6rem); max-width: 22ch; color: #fff; margin-bottom: 14px; hyphens: manual; }
.nb { white-space: nowrap; }
.page-head .lede { font-size: 1.14rem; line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 64ch; }
.page-head a { color: #fff; }
.crumbs { font: 500 0.8rem/1.3 var(--mono); letter-spacing: 0.04em; color: rgba(255,255,255,0.8); margin-bottom: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.6; }
.crumbs a { color: rgba(255,255,255,0.8); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.page-head .facts { border-color: rgba(255,255,255,0.35); }
.page-head .fact { color: var(--ink); }
.page-head .caps .pill { background: rgba(255,255,255,0.16); color: #fff; }
.ratio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 22px 0 0; }
.ratio b { font: 600 clamp(2.4rem, 5vw, 3.6rem)/1 var(--mono); color: #fff; }
.ratio span { color: rgba(255,255,255,0.88); }
.facts { display: flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin: 28px 0; background: var(--panel); }
.fact { flex: 1 1 170px; padding: 16px 18px; background: var(--panel); box-shadow: 0 0 0 0.5px var(--rule); }
.fact span { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 4px; }
.fact b { font: 600 var(--step-1)/1.2 var(--mono); }

/* ---------- sections ---------- */
section.band { padding: clamp(56px, 8vw, 96px) 0; border-bottom: 1px solid var(--rule); overflow-x: clip; }
.page-head + section.band { padding-top: clamp(40px, 6vw, 64px); }
section.band.panel { background: var(--panel); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }
.after-goals { margin-top: 28px; }
.after-table { margin-top: 40px; }

/* ---------- tables ---------- */
.table-scroll { border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data th, table.data td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data thead th { font: 600 var(--step--1)/1.2 var(--body); color: var(--ink-soft); background: #f6f8fb; position: sticky; top: var(--header); z-index: 1; }
table.data tbody th { font-weight: 500; color: var(--ink); }
table.data th.num, table.data td.num { text-align: right; white-space: nowrap; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data tbody tr > * { transition: background-color var(--t-micro); }
table.data tbody tr:hover > * { background: #f8fafd; }
table.data td.win { font-weight: 600; box-shadow: inset 0 -2px 0 var(--horizon); }
table.data thead th button { all: unset; cursor: pointer; }
table.data thead th button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
table.data thead th[aria-sort="ascending"] button::after { content: " ↑"; }
table.data thead th[aria-sort="descending"] button::after { content: " ↓"; }
@media (min-width: 900px) { .table-scroll { overflow: clip; } }
@media (max-width: 899px) {
  .table-scroll { overflow-x: auto; background:
    linear-gradient(90deg, var(--panel) 30%, rgba(255,255,255,0)) left / 40px 100% local no-repeat,
    linear-gradient(270deg, var(--panel) 30%, rgba(255,255,255,0)) right / 40px 100% local no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(12,27,46,0.18), transparent) left / 12px 100% scroll no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(12,27,46,0.18), transparent) right / 12px 100% scroll no-repeat, var(--panel); }
  table.data { background: transparent; }
  table.data thead th { position: static; }
  table.data tbody th { position: sticky; left: 0; background: var(--panel); z-index: 1; }
}
.table-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; }
.table-tools label { font: 500 var(--step--1)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.table-tools input { font: 400 1rem var(--body); padding: 11px 12px; border: 1px solid var(--control); border-radius: 6px; width: min(340px, 100%); background: var(--panel); color: var(--ink); }
.ci-cell { min-width: 170px; }
.ci { position: relative; display: block; height: 10px; background: #e3e9f2; border-radius: 5px; margin: 5px 0 6px; }
.ci i { position: absolute; top: 0; bottom: 0; background: rgba(43,99,217,0.38); border-radius: 5px; }
.ci b { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; background: var(--ink); border-radius: 2px; }
.ci-text { font: 400 0.78rem/1 var(--mono); color: var(--ink-soft); }
.bar-cell { width: 30%; min-width: 120px; vertical-align: middle !important; }
.mini-bar { display: block; height: 10px; background: #e3e9f2; border-radius: 3px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--horizon); }

/* ---------- to-scale bars: one component wherever numbers are compared ---------- */
.tiers { --bar-track: #e3e9f2; --bar-label: var(--ink-soft); --bar-value: var(--ink); margin: 0 0 32px; display: grid; gap: 14px; max-width: 780px; }
.tiers figcaption { font: 500 var(--step--1)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.tier { display: grid; grid-template-columns: minmax(7.5rem, 14rem) 1fr 5.5rem; align-items: center; gap: 14px; font-size: var(--step--1); }
.tier .label { color: var(--bar-label); }
.tier .label strong { color: var(--bar-value); }
.tier .bar { height: 14px; background: var(--bar-track); border-radius: 3px; overflow: hidden; }
.tier .bar i { display: block; height: 100%; background: var(--horizon); border-radius: 3px; transform-origin: 0 50%; }
.tier b { font: 600 var(--step-0)/1 var(--mono); text-align: right; color: var(--bar-value); }
@media (max-width: 560px) { .tier { grid-template-columns: 1fr 5.5rem; row-gap: 6px; } .tier .label { grid-column: 1 / -1; } }

/* ---------- cards, goals, roadmap, lists ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 28px; }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 0; }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 24px; }
.band.panel .card { background: var(--page); }
.card .card-k { font: 500 var(--step--1)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.98rem; }
.card .card-num { font: 600 var(--step-3)/1 var(--mono); color: var(--ink); margin: 16px 0 8px; }
.link-card { display: block; color: inherit; text-decoration: none; border-top: 3px solid var(--ink); transition: border-color var(--t-micro), box-shadow var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out); }
.link-card:hover { color: inherit; border-color: var(--sky); }
.goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 36px; }
.goal { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 22px 18px; }
.goal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.goal h3 { margin: 0; font-size: var(--step-2); }
.goal dl { display: grid; gap: 12px; margin: 0; }
.goal dt { font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 5px; }
.goal dd { margin: 0; font-size: 0.96rem; line-height: 1.5; }
.goal dl > div:first-child dd { font-weight: 600; }
.roadmap { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 40px 0 0; }
.roadmap::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--rule); }
.roadmap li { position: relative; padding-top: 32px; }
.roadmap li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--page); border: 3px solid var(--ink); }
.roadmap li:first-child::before { background: var(--horizon); border-color: var(--horizon); }
.roadmap .when { font: 500 var(--step--1)/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.roadmap h3 { margin: 10px 0 8px; }
.roadmap p { font-size: 0.96rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .roadmap { grid-template-columns: 1fr; }
  .roadmap::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .roadmap li { padding: 0 0 0 36px; }
}
.principles { list-style: none; padding: 0; margin: 0; }
.principles li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--rule); }
.principles li::before { content: ""; position: absolute; left: 0; top: 24px; width: 14px; height: 2px; background: var(--horizon); }
.steps-list { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps-list li { position: relative; padding: 0 0 18px 50px; }
.steps-list li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 0.9rem/34px var(--mono); text-align: center; }
.steps-list h3 { margin: 4px 0 6px; }
.verdict-list { padding-left: 1.2em; }
.verdict-list li { margin-bottom: 12px; }
.list-cols { columns: 3 240px; column-gap: 28px; padding: 0; list-style: none; }
.list-cols li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.faq { border-top: 1px solid var(--rule); }
.faq:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 18px 36px 18px 0; font: 600 1.15rem/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 15px; font: 500 1.4rem/1 var(--mono); color: var(--ink-soft); transition: transform var(--t-micro) var(--ease-out); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 0 18px; color: var(--ink-soft); }

/* ---------- receipt and call to action ---------- */
.receipt { font: 400 0.86rem/1.55 var(--mono); background: var(--panel); border: 1px dashed var(--ink-soft); border-radius: 6px; padding: 20px 22px; max-width: 520px; white-space: pre-wrap; margin: 0 0 12px; }
.callout { background: var(--ink); color: #fff; border-radius: 14px; padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; }
.callout::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--horizon); }
.callout h2 { color: #fff; max-width: 26ch; }
.callout p { color: rgba(255,255,255,0.86); }
.callout .btn.primary { margin-top: 8px; }

/* ---------- dark instrument bands: the problem and the end goal ---------- */
section.band.problem, section.band.vision-band { background: var(--ink); color: #fff; border-bottom: 0; position: relative; }
.problem .kicker, .vision-band .kicker, .problem .tiers figcaption { color: rgba(255,255,255,0.68); }
.problem h2, .vision-band h2 { color: #fff; }
.problem-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: end; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: 36px; } }
.spread { font: 700 clamp(7rem, 21vw, 16rem)/0.82 var(--display); color: var(--horizon); margin: 0 0 22px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; max-width: none; }
.problem h2 { font-size: var(--step-3); max-width: 19ch; }
.problem .big { color: rgba(255,255,255,0.82); }
.problem .tiers { --bar-track: rgba(255,255,255,0.1); --bar-label: rgba(255,255,255,0.85); --bar-value: #fff; margin: 0; padding-bottom: 8px; gap: 18px; }
.vision-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--horizon); box-shadow: 0 0 18px rgba(255,106,19,0.5); }
.statement { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; max-width: 30ch; margin-bottom: 22px; }
.statement span { color: rgba(255,255,255,0.58); }
.vision-band p { color: rgba(255,255,255,0.82); }
.vision-band a { color: #ffb489; }

/* ---------- the idea: request flow ---------- */
.idea-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .idea-grid { grid-template-columns: 1fr; gap: 28px; } }
.flow { margin: 0; }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .node rect { fill: var(--page); stroke: var(--ink); stroke-width: 1.5; }
.band.panel .flow .node rect { fill: var(--page); }
.flow .node text { font: 600 15px var(--mono); fill: var(--ink); text-anchor: middle; }
.flow .node text.small { font: 400 11.5px var(--mono); fill: var(--ink-soft); }
.flow .cheap rect { fill: #e8eef9; stroke: var(--sky); }
.flow .served rect { fill: #e3f3ea; stroke: var(--good); }
.flow .yours rect { fill: #f3ece6; stroke: var(--earth); }
.flow .draw { fill: none; stroke: var(--ink); stroke-width: 2; }
.flow .tip { fill: var(--ink); }

/* ---------- steps: four cards that stand up in 3D while the section holds still ---------- */
.steps3d { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; counter-reset: step; }
.step { background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--ink); border-radius: 10px; padding: 22px 20px 12px; }
.step::before { counter-increment: step; content: "Step " counter(step); font: 500 var(--step--1)/1 var(--mono); color: var(--ink-soft); display: block; margin-bottom: 10px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.98rem; color: var(--ink-soft); }
@media (max-width: 900px) { .steps3d { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps3d { grid-template-columns: 1fr; } }
.steps-rail { position: relative; height: 3px; margin-top: 30px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.steps-rail i { position: absolute; inset: 0; background: var(--horizon); transform-origin: 0 50%; }
@media (min-width: 900px) { .steps-band { min-height: calc(100vh - var(--header)); display: flex; align-items: center; } .steps-band > .wrap { width: 100%; } .steps3d .step { min-height: 250px; padding: 26px 24px 16px; } }

/* ---------- forms: calculator and compare picker ---------- */
.calc-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.calc, .picker { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 22px; }
.calc { display: grid; gap: 18px; }
.calc-models, .calc-inputs { display: grid; gap: 14px; }
.calc-models { grid-template-columns: 1fr 1fr; }
.calc-inputs { grid-template-columns: repeat(3, 1fr); }
.calc label, .picker label { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 6px; }
.calc input, .calc select, .picker select { width: 100%; font: 400 1rem var(--mono); padding: 10px; border: 1px solid var(--control); border-radius: 6px; background: #fbfcfe; color: var(--ink); }
.calc-result { position: sticky; top: calc(var(--header) + 24px); background: var(--ink); color: #fff; border-radius: 12px; padding: 26px; }
.calc-result .kicker { color: rgba(255,255,255,0.68); }
.calc-result .tiers { --bar-track: rgba(255,255,255,0.1); --bar-label: rgba(255,255,255,0.85); --bar-value: #fff; margin: 0 0 18px; }
.calc-result .tier { grid-template-columns: minmax(6rem, 11rem) 1fr auto; }
.calc-result .bar i { transition: width var(--t-enter) var(--ease-out); }
.calc-result output { font: inherit; }
.saving { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 14px; }
.saving b { font: 600 var(--step-3)/1 var(--mono); color: #6fd39b; }
.saving b.up { color: #ff8a80; }
.saving span { color: rgba(255,255,255,0.85); }
.calc-result .note { color: rgba(255,255,255,0.72); margin: 0; }
@media (max-width: 900px) { .calc-layout { grid-template-columns: 1fr; } .calc-result { position: static; } .calc-inputs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .calc-models, .calc-inputs { grid-template-columns: 1fr; } }
.picker { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; margin-bottom: 44px; }
@media (max-width: 700px) { .picker { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { padding: 48px 0 64px; font-size: var(--step--1); color: var(--ink-soft); }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.foot-h { font: 600 var(--step--1)/1 var(--body); color: var(--ink); margin: 0 0 10px; }
.foot-line { margin-top: 12px; }
.foot-note { margin-top: 28px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- motion ---------- */
@keyframes draw-horizon { from { transform: scaleX(0); } }
@keyframes rise { from { transform: translateY(var(--rise)); } }
@keyframes settle { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes appear { from { opacity: 0; } }
@keyframes draw-line { from { stroke-dashoffset: 1; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Load, on every page: the horizon draws across and the head settles onto it. The headline and its first sentence only
     move, never fade, so they paint on the first frame. CSS, so none of it waits on a script. */
  .hero .horizon, .page-head .horizon { transform-origin: 0 50%; animation: draw-horizon var(--t-draw) var(--ease-inout) both; }
  .hero h1, .hero .lede, .page-head h1, .page-head .lede { animation: rise var(--t-enter) var(--ease-out) both; }
  .hero .eyebrow, .page-head .crumbs, .hero .actions, .hero .readouts, .hero .footnote, .page-head .facts, .page-head .caps, .page-head .ratio { animation: settle var(--t-enter) var(--ease-out) both; }
  .hero .actions, .page-head .facts, .page-head .ratio { animation-delay: calc(2 * var(--stagger)); }
  .hero .readouts, .page-head .caps { animation-delay: calc(3 * var(--stagger)); }
  .hero .footnote { animation-delay: calc(4 * var(--stagger)); }
  /* Arriving by a page transition, the horizon glides across instead, so the head is readable at once. */
  .vt .hero *, .vt .page-head * { animation: none !important; }

  /* Instruments draw themselves the first time they are seen: at load when on screen, otherwise on arrival (app.js holds them with .wait). */
  .tiers .bar i { animation: grow var(--t-draw) var(--ease-out) both; animation-delay: calc(var(--lead) + var(--k, 0) * 2 * var(--stagger)); }
  .flow .node, .flow .tip { animation: appear var(--t-enter) var(--ease-out) both; animation-delay: calc(var(--lead) + var(--d, 0) * 3 * var(--stagger)); }
  .flow .tip { animation-delay: calc(var(--lead) + var(--d, 0) * 3 * var(--stagger) + var(--t-draw) * 0.6); }
  .flow .draw { stroke-dasharray: 1; animation: draw-line var(--t-draw) var(--ease-inout) both; animation-delay: calc(var(--lead) + var(--d, 0) * 3 * var(--stagger)); }
  .motion .wait .bar i, .motion .wait.tiers .bar i { animation: none; transform: scaleX(0); }
  .motion .wait.flow .node, .motion .wait.flow .tip { animation: none; opacity: 0; }
  .motion .wait.flow .draw { animation: none; stroke-dashoffset: 1; }

  /* Hover lifts only where there is a pointer that hovers, and only on things that do something. */
  @media (hover: hover) and (pointer: fine) {
    .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,106,19,0.32); }
    .btn.ghost:hover { transform: translateY(-1px); }
    .link-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(12,27,46,0.1); }
  }
  .motion .nav-menu[open] .nav-sheet { animation: settle var(--t-enter) var(--ease-out); }

  /* Page to page: the header holds still, the page cross-fades and the horizon glides to its new place. */
  @view-transition { navigation: auto; }
  .hero .horizon, .page-head .horizon { view-transition-name: horizon; }
  ::view-transition-old(root) { animation: vt-out var(--t-micro) var(--ease-inout) both; }
  ::view-transition-new(root) { animation: vt-in calc(var(--t-enter) / 2) var(--ease-out) both; }
  ::view-transition-group(horizon) { animation-duration: var(--t-enter); animation-timing-function: var(--ease-inout); }
}

/* Reveal on scroll (html.motion is set by app.js after it has marked what is already on screen, so nothing visible is ever hidden). */
.motion .rv:not(.is-in) { opacity: 0; transform: translateY(var(--rise)); }
.motion .rv.tip:not(.is-in) { transform: perspective(1000px) translateY(var(--rise)) rotateX(var(--tip)); transform-origin: 50% 100%; }
.motion .rv.is-in { transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.motion .rv:focus-within { opacity: 1; transform: none; }
/* Short tables fade their first rows in; long tables never hide theirs. */
.motion .rv:not(.is-in) [data-rows] tbody tr:nth-child(-n+12), .motion .rv[data-rows]:not(.is-in) tbody tr:nth-child(-n+12) { opacity: 0; }
.motion .rv.is-in [data-rows] tbody tr, .motion .rv.is-in[data-rows] tbody tr { transition: opacity var(--t-enter) var(--ease-out); transition-delay: calc(var(--lead) + var(--r, 12) * var(--stagger) / 2); }

@media (prefers-reduced-motion: reduce) { .level-line .world, .level-line .gimbal { transition: none; } }
@media print {
  .site-header, .nav-menu, .level-line .gimbal { display: none; }
  .motion .rv, .motion tbody tr { opacity: 1 !important; transform: none !important; }
  .tiers .bar i, .flow .node, .flow .tip, .flow .draw { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}