/* ============================================================================
   stratamize.com — marketing composition layer
   ----------------------------------------------------------------------------
   Consumes ONLY the semantic tokens from /brand (tokens.css §B/§C). No chromatic
   hex, no new palette, no forked vars. Page-level layout + the marketing-only
   components the seven brand slices do not own (nav, hero, loop diagram, audience
   doors, comparison matrix, pricing tiers, calculators, CTA band, footer).
   The page leads in light "paper"; the hero instrument nests data-theme="dark"
   so the live cockpit reads as the same product, one shade deeper.
   ============================================================================ */

/* ── layout primitives ───────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--measure{max-width:var(--measure-max)}
.band{padding-block:var(--space-section)}
.band--tight{padding-block:clamp(2.5rem,2rem+3vw,4.5rem)}
.band--seam{border-top:1px solid var(--hairline)}
.band--sunken{background:var(--surface-sunken)}
body{overflow-x:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);
  font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-3)}
.eyebrow::before{content:"";width:var(--s-6);height:1px;background:var(--accent)}
.eyebrow--live::before{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-wash)}
.head{max-width:64ch}
.head .h2{margin-top:var(--s-4)}
.head .lead{margin-top:var(--s-5)}
.section-num{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-4);
  letter-spacing:var(--tracking-caps)}

/* ── top nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:var(--z-nav);
  background:color-mix(in oklab,var(--surface-page) 86%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hairline)}
.nav__in{display:flex;align-items:center;gap:var(--s-6);height:var(--shell-h);
  max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);color:var(--ink);
  font:600 1.0625rem/1 var(--font-display);letter-spacing:var(--tracking-wordmark)}
.brand:hover{text-decoration:none}
.brand__mark{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-2);
  background:var(--surface-inverse);color:var(--accent);position:relative;overflow:hidden}
.brand__mark::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rail-w);
  background:var(--accent);animation:caret-blink var(--blink) step-end infinite}
.brand__mark span{font:700 0.8125rem/1 var(--font-mono);color:var(--accent);padding-left:3px}
.nav__links{display:flex;align-items:center;gap:var(--s-1);margin-left:auto}
.nav__link{padding:var(--s-2) var(--s-3);color:var(--ink-2);border-radius:var(--r-2);
  font:500 var(--fs-sm)/1 var(--font-text);transition:color var(--dur-2) var(--ease-out),
  background var(--dur-2) var(--ease-out)}
.nav__link:hover{color:var(--ink);background:var(--row-hover);text-decoration:none}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__sep{width:1px;height:20px;background:var(--hairline);margin-inline:var(--s-2)}
.nav__toggle{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--hairline);
  background:var(--surface-raised);border-radius:var(--r-2);color:var(--ink);cursor:pointer}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";display:block;
  width:18px;height:2px;background:currentColor;margin-inline:auto;position:relative}
.nav__toggle span::before{position:absolute;top:-6px}.nav__toggle span::after{position:absolute;top:6px}
@media (max-width:62em){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:var(--shell-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--surface-page);border-bottom:1px solid var(--hairline);
    padding:var(--s-3) var(--gutter) var(--s-5);margin:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
  .nav__links[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav__link{padding:var(--s-4) var(--s-3);border-bottom:1px solid var(--hairline-faint)}
  .nav__sep{display:none}
  .nav__links .btn{margin-top:var(--s-4)}
}

/* ── buttons: marketing arrow affordance (uses brand .btn base) ───────────── */
.btn__arrow{transition:transform var(--dur-2) var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(3rem,2rem+6vw,7rem) var(--space-section);
  overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 88% -10%,var(--accent-wash),transparent 55%)}
.hero__grid{display:grid;gap:clamp(2.5rem,2rem+4vw,5rem);align-items:center}
@media (min-width:64em){.hero__grid{grid-template-columns:minmax(0,1fr) clamp(340px,34vw,460px)}}
.hero h1{font:600 var(--fs-h1)/var(--leading-tight) var(--font-display);
  letter-spacing:var(--tracking-tight);color:var(--ink);text-wrap:balance;margin-top:var(--s-5)}
.hero h1 em{font-style:normal;color:var(--accent-text);
  background:linear-gradient(var(--accent),var(--accent)) left bottom 0.02em / 0 3px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:underline-in var(--dur-4) var(--ease-edit) 0.4s forwards}
.hero .lead{margin-top:var(--s-6);max-width:54ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.hero__sub{margin-top:var(--s-6);font:400 var(--fs-meta)/1.5 var(--font-mono);color:var(--ink-4);
  letter-spacing:0.01em}
@keyframes underline-in{to{background-size:100% 3px}}

/* the live cockpit instrument (nested dark surface inside the light page) */
.cockpit{border-radius:var(--r-lg);border:1px solid var(--hairline-strong);
  background:var(--surface-page);box-shadow:var(--shadow-3),var(--glow-accent);
  overflow:hidden;position:relative}
.cockpit__bar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);
  background:var(--surface-header);border-bottom:1px solid var(--hairline)}
.cockpit__dot{width:9px;height:9px;border-radius:50%;background:var(--hairline-strong)}
.cockpit__dot--live{background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.cockpit__tag{margin-left:auto;font:500 var(--fs-kicker)/1 var(--font-mono);color:var(--ink-4);
  letter-spacing:var(--tracking-caps)}
.cockpit__body{padding:var(--s-5);display:grid;gap:var(--s-4)}
.cockpit__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.ckpi{padding:var(--s-4);background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--r-3);border-top:2px solid var(--hairline-strong)}
.ckpi--live{border-top-color:var(--accent)}
.ckpi__l{font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-3)}
.ckpi__v{margin-top:var(--s-2);font:500 var(--fs-num-s)/1 var(--font-mono);
  font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:var(--tracking-tight)}
.ckpi__d{margin-top:var(--s-1);font:500 var(--fs-meta)/1 var(--font-mono);color:var(--success)}
.cledger{border:1px solid var(--hairline);border-radius:var(--r-3);overflow:hidden}
.cledger__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-3);align-items:center;
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline-faint)}
.cledger__row:last-child{border-bottom:0}
.cledger__rail{width:var(--rail-w);height:18px;background:var(--accent);border-radius:var(--r-full)}
.cledger__rail--muted{background:var(--hairline-strong)}
.cledger__id{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-3)}
.cledger__amt{font:500 var(--fs-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.cledger__amt .pill{margin-left:var(--s-2)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-full);
  font:600 var(--fs-kicker)/1.4 var(--font-mono);letter-spacing:0.04em}
.pill--ok{background:var(--accent-wash);color:var(--accent-text)}
.pill--ok::before{content:"●";font-size:0.7em}
.pill--info{background:var(--info-wash);color:var(--info)}

/* ── trust strip ─────────────────────────────────────────────────────────── */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);
  padding-block:var(--s-5)}
.trust__item{display:inline-flex;align-items:center;gap:var(--s-2);
  font:500 var(--fs-sm)/1 var(--font-text);color:var(--ink-3)}
.trust__item svg{width:15px;height:15px;color:var(--accent-text);flex:none}
.trust__sep{width:1px;height:16px;background:var(--hairline)}

/* ── the loop diagram (acquire -> board -> provision -> transact -> retain) ─ */
.loop{display:grid;gap:var(--s-4);margin-top:var(--s-10)}
@media (min-width:60em){.loop{grid-template-columns:repeat(5,1fr);gap:0}}
.loop__stage{position:relative;padding:var(--s-6) var(--s-5);background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-md)}
@media (min-width:60em){
  .loop__stage{border-radius:0;border-right:0}
  .loop__stage:first-child{border-top-left-radius:var(--r-md);border-bottom-left-radius:var(--r-md)}
  .loop__stage:last-child{border-right:1px solid var(--hairline);
    border-top-right-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}
  .loop__stage:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;z-index:2;
    width:13px;height:13px;transform:translateY(-50%) rotate(45deg);
    background:var(--surface-raised);border-top:1px solid var(--hairline);
    border-right:1px solid var(--hairline)}
}
.loop__stage::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--hairline-strong);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-4) var(--ease-edit)}
.loop.is-in .loop__stage::before{transform:scaleX(1);background:var(--accent)}
.loop.is-in .loop__stage:nth-child(2)::before{transition-delay:.12s}
.loop.is-in .loop__stage:nth-child(3)::before{transition-delay:.24s}
.loop.is-in .loop__stage:nth-child(4)::before{transition-delay:.36s}
.loop.is-in .loop__stage:nth-child(5)::before{transition-delay:.48s}
.loop__n{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--accent-text);
  letter-spacing:var(--tracking-caps)}
.loop__t{margin-top:var(--s-3);font:600 var(--fs-h4)/1.15 var(--font-display);color:var(--ink)}
.loop__d{margin-top:var(--s-2);font:400 var(--fs-sm)/1.5 var(--font-text);color:var(--ink-3)}
.loop__cap{margin-top:var(--s-6);display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-4) var(--s-5);border-left:2px solid var(--accent);background:var(--accent-wash);
  border-radius:0 var(--r-3) var(--r-3) 0;max-width:60ch}
.loop__cap b{color:var(--ink)}

/* ── stitched vs one-system contrast ─────────────────────────────────────── */
.versus{display:grid;gap:var(--s-5);margin-top:var(--s-8)}
@media (min-width:54em){.versus{grid-template-columns:1fr 1fr}}
.versus__card{padding:var(--s-6);border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--surface-raised)}
.versus__card--them{background:var(--surface-sunken)}
.versus__card--us{border-color:var(--accent-edge);box-shadow:var(--glow-accent)}
.versus__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  font:600 var(--fs-h4)/1.2 var(--font-display);color:var(--ink)}
.versus__list{list-style:none;margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.versus__list li{display:flex;gap:var(--s-3);font:400 var(--fs-sm)/1.45 var(--font-text);
  color:var(--ink-2)}
.versus__list li::before{font:600 0.95em/1.4 var(--font-mono);flex:none}
.versus__card--them li::before{content:"–";color:var(--ink-4)}
.versus__card--us li::before{content:"✓";color:var(--accent-text)}

/* ── three audience doors ────────────────────────────────────────────────── */
.doors{display:grid;gap:var(--grid-gap);margin-top:var(--s-10)}
@media (min-width:54em){.doors{grid-template-columns:repeat(3,1fr)}}
.door{display:flex;flex-direction:column;padding:var(--s-7) var(--s-6);
  background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),
  border-color var(--dur-3) var(--ease-out)}
.door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--rail-w);
  background:var(--scope-rail,var(--hairline-strong))}
.door[data-role="agent"]{--scope-rail:var(--info)}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--hairline-strong)}
.door__role{font:500 var(--fs-kicker)/1 var(--font-mono);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--accent-text)}
.door[data-role="agent"] .door__role{color:var(--info)}
.door__t{margin-top:var(--s-3);font:600 var(--fs-h3)/1.1 var(--font-display);color:var(--ink)}
.door__d{margin-top:var(--s-4);font:400 var(--fs-base)/1.55 var(--font-text);color:var(--ink-2);flex:1}
.door__list{list-style:none;margin-top:var(--s-5);display:grid;gap:var(--s-2)}
.door__list li{display:flex;gap:var(--s-2);font:500 var(--fs-sm)/1.4 var(--font-text);color:var(--ink-3)}
.door__list li::before{content:"→";color:var(--accent-text);font-family:var(--font-mono)}
.door__cta{margin-top:var(--s-6)}

/* ── feature storytelling rows ───────────────────────────────────────────── */
.story{display:grid;gap:clamp(2rem,1.5rem+3vw,4rem);margin-top:var(--s-10)}
.story__row{display:grid;gap:clamp(1.5rem,1rem+3vw,3.5rem);align-items:center}
@media (min-width:60em){
  .story__row{grid-template-columns:1fr 1fr}
  .story__row:nth-child(even) .story__media{order:-1}
}
.story__stage{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--accent-text);
  letter-spacing:var(--tracking-caps)}
.story__t{margin-top:var(--s-3);font:600 var(--fs-h3)/1.1 var(--font-display);color:var(--ink)}
.story__d{margin-top:var(--s-4);font:400 var(--fs-base)/1.55 var(--font-text);color:var(--ink-2);max-width:48ch}
.story__cap{margin-top:var(--s-5);display:inline-flex;gap:var(--s-2);align-items:center;
  font:500 var(--fs-sm)/1.4 var(--font-mono);color:var(--ink);padding:var(--s-2) var(--s-4);
  border:1px solid var(--accent-edge);border-radius:var(--r-full);background:var(--accent-wash)}
.story__cap::before{content:"●";color:var(--accent-text);font-size:0.65em}

/* ── economics: four revenue lines ───────────────────────────────────────── */
.rev{display:grid;gap:var(--s-4);margin-top:var(--s-8)}
@media (min-width:48em){.rev{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72em){.rev{grid-template-columns:repeat(4,1fr)}}
.rev__line{padding:var(--s-6) var(--s-5);background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-md);border-top:2px solid var(--accent)}
.rev__n{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-4)}
.rev__t{margin-top:var(--s-3);font:600 var(--fs-h4)/1.15 var(--font-display);color:var(--ink)}
.rev__d{margin-top:var(--s-3);font:400 var(--fs-sm)/1.5 var(--font-text);color:var(--ink-3)}

/* ── comparison matrix ───────────────────────────────────────────────────── */
.matrix-scroll{overflow-x:auto;margin-top:var(--s-8);border:1px solid var(--hairline);
  border-radius:var(--r-md)}
.matrix{width:100%;border-collapse:collapse;min-width:780px;background:var(--surface-raised)}
.matrix th,.matrix td{padding:var(--s-4) var(--s-5);text-align:left;border-bottom:1px solid var(--hairline);
  font:400 var(--fs-sm)/1.4 var(--font-text);color:var(--ink-2);vertical-align:top}
.matrix thead th{position:sticky;top:0;background:var(--surface-header);color:var(--ink-3);
  font:600 var(--fs-kicker)/1.2 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);white-space:nowrap}
.matrix thead th.is-us{color:var(--accent-text)}
.matrix tbody th{font:500 var(--fs-sm)/1.4 var(--font-text);color:var(--ink);white-space:nowrap}
.matrix col.col-us,.matrix td.is-us{background:var(--accent-wash)}
.matrix .yes{color:var(--accent-text);font-weight:600}
.matrix .no{color:var(--ink-4)}
.matrix .part{color:var(--warn)}
.matrix tbody tr:last-child td,.matrix tbody tr:last-child th{border-bottom:0}
.mark{font-family:var(--font-mono);font-weight:600}

/* ── pricing tiers ───────────────────────────────────────────────────────── */
.tiers{display:grid;gap:var(--grid-gap);margin-top:var(--s-8)}
@media (min-width:54em){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{display:flex;flex-direction:column;padding:var(--s-7) var(--s-6);background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-lg);position:relative}
.tier--rec{border-color:var(--accent-edge);box-shadow:var(--shadow-2),var(--glow-accent);
  transform:translateY(-6px)}
@media (max-width:54em){.tier--rec{transform:none}}
.tier__flag{position:absolute;top:0;right:var(--s-6);transform:translateY(-50%);
  padding:4px 12px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent-solid);
  font:600 var(--fs-kicker)/1.4 var(--font-mono);letter-spacing:0.06em;text-transform:uppercase}
.tier__name{font:600 var(--fs-h4)/1 var(--font-display);color:var(--ink)}
.tier__price{margin-top:var(--s-4);font:500 var(--fs-num-m)/1 var(--font-mono);
  font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:var(--tracking-tight)}
.tier__price small{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-4)}
.tier__sub{margin-top:var(--s-3);font:400 var(--fs-sm)/1.5 var(--font-text);color:var(--ink-3);min-height:2.6em}
.tier__list{list-style:none;margin-top:var(--s-5);display:grid;gap:var(--s-3);flex:1}
.tier__list li{display:flex;gap:var(--s-3);font:400 var(--fs-sm)/1.45 var(--font-text);color:var(--ink-2)}
.tier__list li::before{content:"✓";color:var(--accent-text);font-family:var(--font-mono);font-weight:600;flex:none}
.tier__cta{margin-top:var(--s-6)}

/* ── calculator ──────────────────────────────────────────────────────────── */
.calc{display:grid;gap:clamp(1.5rem,1rem+3vw,3rem);margin-top:var(--s-8);
  padding:clamp(1.5rem,1rem+2vw,2.5rem);background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
@media (min-width:60em){.calc{grid-template-columns:0.9fr 1.1fr}}
.calc__inputs{display:grid;gap:var(--s-6)}
.calc__field label{display:block;font:600 var(--fs-sm)/1 var(--font-text);color:var(--ink-2);
  margin-bottom:var(--s-3)}
.calc__field output{float:right;font:500 var(--fs-sm)/1 var(--font-mono);color:var(--accent-text);
  font-variant-numeric:tabular-nums}
.calc__range{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--r-full);
  background:var(--hairline-strong);outline-offset:4px}
.calc__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--accent);border:3px solid var(--surface-raised);cursor:pointer;
  box-shadow:0 0 0 1px var(--accent-edge)}
.calc__range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid var(--surface-raised);cursor:pointer}
.calc__seg{display:flex;gap:var(--s-2);flex-wrap:wrap}
.calc__seg button{padding:var(--s-2) var(--s-4);border:1px solid var(--hairline);background:transparent;
  border-radius:var(--r-2);font:500 var(--fs-sm)/1 var(--font-text);color:var(--ink-3);cursor:pointer;
  transition:all var(--dur-2) var(--ease-out)}
.calc__seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text);
  background:var(--accent-wash)}
.calc__out{background:var(--surface-page);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--s-6);display:grid;gap:var(--s-4);align-content:start}
.calc__big{font:500 var(--fs-num-l)/1 var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--ink);letter-spacing:var(--tracking-tight)}
.calc__big .cur{font-size:0.5em;color:var(--ink-3);vertical-align:0.35em;margin-right:0.1em}
.calc__big .per{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-4)}
.calc__breakdown{display:grid;gap:var(--s-1);border-top:1px solid var(--hairline);padding-top:var(--s-4)}
.calc__line{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-block:var(--s-2)}
.calc__line span{font:500 var(--fs-sm)/1.3 var(--font-text);color:var(--ink-3)}
.calc__line b{font:500 var(--fs-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.calc__line--total{border-top:1px solid var(--hairline);margin-top:var(--s-2);padding-top:var(--s-4)}
.calc__line--total span,.calc__line--total b{color:var(--ink);font-weight:600}
.calc__note{font:400 var(--fs-meta)/1.5 var(--font-text);color:var(--ink-4)}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.ctaband{position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(2.5rem,2rem+4vw,5rem);background:var(--surface-inverse);
  color:var(--on-inverse);text-align:center}
.ctaband::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(80% 120% at 50% -20%,var(--accent-glow),transparent 60%);opacity:.5}
.ctaband>*{position:relative;z-index:1}
.ctaband .eyebrow{color:var(--accent)}
.ctaband .eyebrow::before{background:var(--accent)}
.ctaband h2{font:600 var(--fs-h2)/1.05 var(--font-display);color:var(--surface-page);
  margin-top:var(--s-4);max-width:24ch;margin-inline:auto;text-wrap:balance}
.ctaband p{margin-top:var(--s-5);color:color-mix(in oklab,var(--surface-page) 72%,var(--surface-inverse));
  max-width:54ch;margin-inline:auto}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-8)}
.ctaband .btn--ghost{color:var(--surface-page);border-color:color-mix(in oklab,var(--surface-page) 30%,transparent)}
.ctaband .btn--ghost:hover{border-color:var(--surface-page);background:color-mix(in oklab,var(--surface-page) 10%,transparent)}

/* ── apply form ──────────────────────────────────────────────────────────── */
.applyform{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
.applyform .field-row{display:grid;gap:var(--s-5)}
@media (min-width:40em){.applyform .field-row{grid-template-columns:1fr 1fr}}
.applyform .full{grid-column:1/-1}
.applyform .ok{display:none;padding:var(--s-5);border-radius:var(--r-md);background:var(--accent-wash);
  border:1px solid var(--accent-edge);color:var(--ink);font:500 var(--fs-sm)/1.5 var(--font-text)}
.applyform.is-sent .ok{display:block}
.applyform.is-sent .applyform__fields{display:none}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--hairline);background:var(--surface-sunken);
  padding-block:var(--space-section) var(--s-8)}
.foot__grid{display:grid;gap:var(--s-10)}
@media (min-width:60em){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot__about{max-width:34ch;margin-top:var(--s-5);font:400 var(--fs-sm)/1.6 var(--font-text);color:var(--ink-3)}
.foot__col h5{font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-4);margin-bottom:var(--s-4)}
.foot__col a{display:block;padding-block:var(--s-2);color:var(--ink-2);font:400 var(--fs-sm)/1.3 var(--font-text)}
.foot__col a:hover{color:var(--accent-text)}
.foot__bottom{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;
  margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--hairline)}
.foot__legal{font:400 var(--fs-meta)/1.4 var(--font-text);color:var(--ink-4)}
.foot__legal a{color:var(--ink-3)}

/* ── small-viewport hardening: grid items default to min-width:auto, which lets
   long mono figures force a track wider than the viewport. Pin them to 0 and let
   text wrap/ellipsis instead of pushing page width. ───────────────────────── */
.cockpit__kpis,.hero__grid,.story__row,.loop,.doors,.tiers,.rev,.versus,.calc,.foot__grid{min-width:0}
.ckpi,.loop__stage,.door,.tier,.rev__line,.versus__card,.cledger__row,.calc__out,.calc__inputs{min-width:0}
.cledger__id{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cledger__amt{white-space:nowrap}
.ckpi__v{white-space:nowrap}
@media (max-width:30em){
  .cockpit__kpis{gap:var(--s-2)}
  .ckpi{padding:var(--s-3)}
  .ckpi__v{font-size:var(--fs-sm)}
  .hero__actions .btn,.ctaband__actions .btn{flex:1 1 auto;justify-content:center}
}

/* ── scroll reveal (progressive enhancement) ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-4) var(--ease-edit),transform var(--dur-4) var(--ease-edit)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .hero h1 em{animation:none;background-size:100% 3px}
  .loop__stage::before{transition:none}
  .brand__mark::after{animation:none}
}