/* Atlas v2 · the CGM lander (campaign-atlas-cgm 002). The palette is the brand board's
   (playbook/brand/refs/brand-board-2026-10-26.png): Midnight ground, Atlas Blue surfaces, Slate lines, Ivory words,
   Champagne for the moments of done; the light is the wave's pale blue. One family of dark glass cards. */
@font-face { font-family: "Inter"; src: url(/fonts/inter-var.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url(/fonts/fragment-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --midnight: #0b1117; --blue: #1a2433; --slate: #3b485a; --ivory: #edeae3; --champagne: #c8a978;
  --light: #a9cdf2; --light-hi: #e6f1ff; --muted: #9aa6b2; --head: #f3f7fb;
  --frost-grad: linear-gradient(100deg, #e2f2fd 0%, #a9dcff 55%, #7cc4f6 100%); --dim: #5d6876; --warn: #e2876f;
  --glass: rgba(26,36,51,.55); --glass-hi: rgba(36,49,68,.7); --line: rgba(169,205,242,.12); --line-hi: rgba(169,205,242,.28);
  --sans: "Inter", system-ui, sans-serif; --mono: "Fragment Mono", ui-monospace, monospace;
  --gut: clamp(18px, 4.5vw, 72px); --r: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #000; color: var(--muted); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; }
/* the headings as v1 set them (Yusef: "the text from the v1 is way nicer"): its white, its tracking, and the frost
   gradient on the words that carry the line */
h1, h2, h3 { color: var(--head); font-weight: 500; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
em, .hero h1 .two { font-style: normal; color: #bfe3fb; background: var(--frost-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h1 { font-size: clamp(40px, 4.6vw, 76px); line-height: 1; }
h2 { font-size: clamp(32px, 3.8vw, 60px); line-height: 1.04; }
h3 { font-size: 21px; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--gut); position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 400 13px/1 var(--mono); letter-spacing: .22em; color: var(--light); text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--light); opacity: .7; }
.lede { color: var(--head); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.mono { font-family: var(--mono); }

/* buttons: Ivory primary, glass secondary */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 7px; font: 500 15.5px/1 var(--sans); text-decoration: none; cursor: pointer; border: 0; transition: transform .2s, background .2s, box-shadow .2s; }
/* the call to action: bright frost blue with energy (Yusef, 2026-10-26), sharp corners; v2.js lets it give off embers */
.btn.primary { background: linear-gradient(135deg, #e9f6ff 0%, #a9dcff 48%, #6fbdf4 100%); color: #04121e; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(207,232,251,.55) inset, 0 0 24px rgba(127,196,246,.45), 0 0 60px rgba(127,196,246,.18); }
.btn.primary:hover { box-shadow: 0 0 0 1px rgba(233,246,255,.8) inset, 0 0 34px rgba(127,196,246,.65), 0 0 90px rgba(127,196,246,.28); transform: translateY(-1px); }
.btn canvas.embers { position: absolute; left: -40px; top: -70px; width: calc(100% + 80px); height: calc(100% + 100px); z-index: -1; pointer-events: none; }
.btn.ghost { background: rgba(169,205,242,.06); color: var(--ivory); border: 1px solid var(--line-hi); }
.btn.ghost:hover { background: rgba(169,205,242,.12); }
.btn svg { width: 16px; height: 16px; }

/* the "not yet available" badge: anything designed but not switched on yet (Yusef, 2026-10-26) */
.soon { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(142,152,166,.12); border: 1px solid rgba(142,152,166,.25);
  color: var(--muted); font: 400 12px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.soon svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .soon { max-width: 100%; white-space: normal; line-height: 1.35; } .soon svg { flex: none; } }   /* (one line was wider than a phone and pushed the whole page sideways) */
.off { position: relative; }
.off > .off-veil { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: inherit; background: rgba(11,17,23,.55); -webkit-backdrop-filter: grayscale(1) blur(1px); backdrop-filter: grayscale(1) blur(1px); }
.off.is-off * { cursor: not-allowed; }

/* the header (Adam's copy N1–N8, 2026-10-30): the wordmark and the booking on the left, the pages on the right; below
   1100px the pages fold into a menu (chrome.css), and the wordmark and the booking stay in the bar on every width */
.top { position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, rgba(11,17,23,.92), rgba(11,17,23,.7)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.scrolled { border-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; padding-block: 16px; }
.mark { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ivory); }
.mark svg { width: 26px; height: 26px; }
.mark b { font: 400 17px/1 var(--sans); letter-spacing: .42em; }
.mark small { display: block; font: 400 9px/1 var(--mono); letter-spacing: .28em; color: var(--muted); margin-top: 5px; }
.top nav { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; }
.top nav a { text-decoration: none; color: var(--muted); } .top nav a:hover { color: var(--ivory); }
.top .btn { padding: 11px 18px; font-size: 14px; }

/* sections */
section { position: relative; padding-block: clamp(80px, 11vw, 170px); }
.sec-head { display: grid; gap: 22px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
/* the precision line (the board's third element): a hairline with a dot, between sections */
.precision { position: relative; height: 1px; background: linear-gradient(90deg, transparent, var(--line-hi) 30%, var(--line-hi) 70%, transparent); }
.precision::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--light); box-shadow: 0 0 14px var(--light); }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ——— the four pieces of waiting work: one card, two states ——— */
.item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .5s, border-color .5s, opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.item .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(226,135,111,.1); color: var(--warn); transition: background .5s, color .5s; }
.item .ic svg { width: 19px; height: 19px; }
.item b { display: block; color: var(--ivory); font-weight: 500; font-size: 15px; line-height: 1.3; }
.item small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.item .age { font: 400 12px/1 var(--mono); color: var(--warn); white-space: nowrap; }
.item.done { background: rgba(200,169,120,.07); border-color: rgba(200,169,120,.35); }
.item.done .ic { background: rgba(200,169,120,.14); color: var(--champagne); }
.item.done .age { color: var(--champagne); }

/* ——— 1 · the hero: the words on the left, the contrast on the right, the wave behind ——— */
.hero { padding-block: clamp(40px, 6vw, 90px) clamp(60px, 7vw, 110px); min-height: min(92vh, 980px); display: grid; align-items: center; overflow: hidden; }
.hero canvas.wave { position: absolute; inset: -10% -5% 0 0; width: 105%; height: 110%; z-index: 0; pointer-events: none; opacity: .95; }
.hero .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 900px) { .hero .split { grid-template-columns: 1fr; } .hero { min-height: 0; } }
.hero h1 { margin: 26px 0 26px; }
.hero h1 .two { display: block; }
.hero .exec { margin-top: 10px; color: var(--head); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; }
.hero .exec em { font-weight: 500; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .keep { margin-top: 26px; color: var(--muted); font-size: 15px; display: flex; gap: 10px; align-items: center; }
.hero .keep::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); flex: none; }
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lane { border-radius: 18px; padding: 16px; background: rgba(11,17,23,.55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); min-height: 430px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.lane header { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); }
.lane header b { color: var(--ivory); font-weight: 500; font-size: 15px; }
.lane header span { font: 400 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.lane.atlas { border-color: rgba(169,205,242,.22); background: linear-gradient(180deg, rgba(26,36,51,.75), rgba(11,17,23,.6)); box-shadow: 0 0 60px rgba(120,170,230,.08) inset; }
.lane .stack { display: grid; align-content: start; gap: 9px; }
.lane .item { grid-template-columns: 32px minmax(0, 1fr); padding: 11px 12px; gap: 11px; }
.lane .item .ic { width: 32px; height: 32px; } .lane .item .ic svg { width: 15px; height: 15px; }
.lane .item b { font-size: 13.5px; } .lane .item small { font-size: 12px; }
.lane .item .age { grid-column: 2; margin-top: 4px; }
.lane .item.enter { opacity: 0; transform: translateY(-14px) scale(.98); }
.lane .item.leave { opacity: 0; transform: translateX(30px); }
@media (max-width: 900px) { .lane { min-height: 0; } .contrast { grid-template-columns: 1fr; } .lane.crm .stack .item:nth-child(n+3) { display: none; } }
.watch { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 46px; padding: 14px 18px 14px 14px; border-radius: 16px; background: rgba(26,36,51,.5); border: 1px solid var(--line); max-width: 520px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.watch .play { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(169,205,242,.12); border: 1px solid var(--line-hi); color: var(--light-hi); }
.watch .play svg { width: 18px; height: 18px; margin-left: 3px; }
.watch b { display: block; color: var(--ivory); font-weight: 500; } .watch small { color: var(--muted); font-size: 13.5px; }
.watch:hover .play { background: rgba(169,205,242,.22); box-shadow: 0 0 30px rgba(169,205,242,.25); }

/* ——— 2 · what your tools already show you: a phone on a job ——— */
.onjob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .onjob { grid-template-columns: 1fr; } }
.shows { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 10px; }
.shows li { display: flex; gap: 14px; align-items: baseline; color: var(--ivory); }
.shows li::before { content: ""; width: 14px; height: 1px; background: var(--warn); flex: none; transform: translateY(-4px); }
.phone { width: min(330px, 86vw); aspect-ratio: 330 / 680; margin: 0 auto; border-radius: 46px; padding: 14px; background: #05080c; border: 1px solid rgba(169,205,242,.22);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 6px rgba(26,36,51,.6); position: relative; }
.phone .screen { position: absolute; inset: 14px; border-radius: 34px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #1f2b3d 0%, #0d141d 60%); padding: 56px 12px 14px; display: grid; align-content: start; gap: 9px; }
.phone .clock { text-align: center; color: var(--ivory); font: 300 54px/1 var(--sans); letter-spacing: -.02em; margin-bottom: 4px; }
.phone .date { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.phone .notch { position: absolute; top: 26px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #05080c; z-index: 2; }
.note { padding: 11px 12px; border-radius: 16px; background: rgba(237,234,227,.09); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: start;
  opacity: 0; transform: translateY(-10px); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); }
.note.in { opacity: 1; transform: none; }
.note i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--slate); color: var(--ivory); font-style: normal; }
.note i svg { width: 14px; height: 14px; }
.note b { display: block; color: var(--ivory); font-size: 12.5px; font-weight: 500; } .note span { display: block; color: #c4c9d0; font-size: 12px; line-height: 1.35; }
.note em { font: 400 10.5px/1 var(--sans); color: var(--muted); font-style: normal; }
.gloves { text-align: center; margin-top: 14px; font: 400 12px/1 var(--mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }

/* ——— 3 · the gap: the work, aging ——— */
.gap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
@media (max-width: 1000px) { .gap-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .gap-grid { grid-template-columns: 1fr; } }
.gap-grid .item { grid-template-columns: 1fr; gap: 12px; padding: 20px; align-content: start; min-height: 190px; }
.gap-grid .item .age { font-size: 26px; font-family: var(--sans); font-weight: 500; letter-spacing: -.02em; color: var(--warn); }
.gap-grid .item .age small { display: inline; font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.untouched { margin-top: 44px; color: var(--ivory); font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.02em; max-width: 26em; }

/* ——— 4 · CRM → CGM ——— */
.reveal-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 70px); max-width: 900px; display: grid; gap: 20px; justify-items: center; }
.cgm-line { font: 400 clamp(15px, 1.4vw, 19px)/1.4 var(--mono); letter-spacing: .14em; color: var(--light); text-transform: uppercase; }
.flip-table { display: grid; gap: 10px; max-width: 1040px; margin: 0 auto; perspective: 1400px; }
.flip-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 0; }
.flip-row .cell { padding: 18px 22px; border-radius: 12px; font-size: 16.5px; line-height: 1.4; }
.flip-row .crm { background: rgba(59,72,90,.25); border: 1px solid var(--line); color: var(--muted); transition: opacity .8s .1s; }
.flip-row .cgm { background: linear-gradient(90deg, rgba(26,36,51,.9), rgba(36,52,74,.9)); border: 1px solid rgba(169,205,242,.3); color: var(--ivory); transform-origin: left center; transform: rotateY(-80deg); opacity: 0; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .6s; }
.flip-row .arrow { text-align: center; color: var(--light); opacity: 0; transition: opacity .6s; }
.flip-row.in .cgm { transform: none; opacity: 1; } .flip-row.in .arrow { opacity: 1; } .flip-row.in .crm { opacity: .55; }
.flip-row.head .cell { background: none; border: 0; font: 400 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; padding-block: 6px; }
.flip-row.head .cgm { color: var(--light); }
.caveat { text-align: center; margin-top: 22px; font: 400 12.5px/1.5 var(--mono); color: var(--dim); }
.froms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(56px, 7vw, 100px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.froms p { padding: 26px 18px; color: var(--ivory); font-size: 17px; border-left: 1px solid var(--line); } .froms p:first-child { border-left: 0; }
@media (max-width: 900px) { .froms { grid-template-columns: 1fr 1fr; } .flip-row { grid-template-columns: 1fr; gap: 6px; } .flip-row .arrow { display: none; } }

/* ——— 5 · the three departments, by what they take off your plate ——— */
.depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .depts { grid-template-columns: 1fr; } }
.dept { position: relative; border-radius: 22px; padding: 26px; background: linear-gradient(180deg, rgba(26,36,51,.75), rgba(11,17,23,.5)); border: 1px solid var(--line); overflow: hidden; display: grid; gap: 18px; align-content: start; }
.dept .who { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: end; }
.dept .sil { width: 74px; height: 96px; display: block; filter: drop-shadow(0 0 16px rgba(169,205,242,.35));
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.dept .who span { font: 400 11px/1 var(--mono); letter-spacing: .18em; color: var(--light); text-transform: uppercase; }
.dept .who h3 { margin-top: 8px; font-size: 26px; }
.dept .role { font-size: 15px; }
.pair { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.pair .k { font: 400 11px/1 var(--mono); letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.pair .k.a { color: var(--champagne); }
.pair .item { grid-template-columns: 34px 1fr; padding: 11px 12px; } .pair .item .ic { width: 34px; height: 34px; }
.pair .item .age { grid-column: 2; margin-top: 3px; }

/* ——— 6 · the inbound call ——— */
.call { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .call { grid-template-columns: 1fr; } }
.calls-scene .screen { padding-top: 64px; gap: 10px; }
.caller { text-align: center; display: grid; gap: 6px; justify-items: center; margin-bottom: 8px; }
.caller .av { width: 64px; height: 64px; border-radius: 50%; background: var(--slate); display: grid; place-items: center; color: var(--ivory); }
.caller .av svg { width: 30px; height: 30px; }
.caller b { color: var(--ivory); font-weight: 500; } .caller small { color: var(--muted); font-size: 12px; }
.bubble { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: 12.5px; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.bubble.in { opacity: 1; transform: none; }
.bubble.them { background: rgba(237,234,227,.1); color: var(--ivory); justify-self: start; border-bottom-left-radius: 5px; }
.bubble.us { background: rgba(169,205,242,.16); color: var(--light-hi); justify-self: end; border-bottom-right-radius: 5px; }
.bubble.booked { background: rgba(200,169,120,.16); color: var(--champagne); justify-self: center; font: 400 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.call-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

/* ——— 7 · your own findings (the self-audit) ——— */
.audit { border-radius: 26px; padding: clamp(24px, 4vw, 54px); background: radial-gradient(90% 120% at 100% 0%, rgba(60,100,150,.25), transparent 60%), linear-gradient(180deg, rgba(26,36,51,.8), rgba(11,17,23,.7)); border: 1px solid var(--line-hi); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .audit { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { width: 100%; padding: 15px 16px; border-radius: 12px; background: rgba(11,17,23,.6); border: 1px solid var(--line-hi); color: var(--ivory); font: 400 16px/1.2 var(--sans); }
.findings { display: grid; gap: 10px; }
.finding { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; background: rgba(11,17,23,.55); border: 1px solid var(--line); }
.finding b { color: var(--ivory); font-weight: 500; font-size: 15px; } .finding small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.finding .v { font: 500 22px/1 var(--sans); color: var(--warn); letter-spacing: -.02em; }
.finding .v.ok { color: var(--champagne); }
.example-tag { font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-bottom: 10px; display: block; }

/* ——— 10 · what you'd actually receive: the report, and Adam ——— */
.report { border-radius: 22px; overflow: hidden; border: 1px solid var(--line-hi); background: #0e151e; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.report .rh { padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.report .rh b { color: var(--ivory); font-weight: 500; font-size: 17px; } .report .rh small { color: var(--muted); font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.report .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.report .tile { padding: 20px 22px; border-left: 1px solid var(--line); } .report .tile:first-child { border-left: 0; }
.report .tile span { font: 400 11.5px/1.3 var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } .report .tile b { display: block; margin-top: 10px; font: 500 32px/1 var(--sans); color: var(--ivory); letter-spacing: -.02em; }
.report .rows { padding: 14px 26px 22px; display: grid; gap: 2px; }
.report .row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(169,205,242,.06); font-size: 14.5px; color: var(--ivory); }
.report .row em { font-style: normal; font: 400 12.5px/1.4 var(--mono); color: var(--champagne); }
@media (max-width: 600px) { .report .tiles { grid-template-columns: 1fr; } .report .tile { border-left: 0; border-top: 1px solid var(--line); } }
.founder { border-radius: 22px; padding: 26px; border: 1px solid var(--line); background: rgba(26,36,51,.45); display: grid; gap: 18px; }
.founder .vid { aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(135deg, #16202d, #0b1117); display: grid; place-items: center; border: 1px solid var(--line); }

/* ——— 11 · questions: flip cards (V2.md §2.1d). Both faces share one grid cell, so a card is as tall as its longer
   side and nothing clips; a tap turns it over in 3D ——— */
.faq { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1060px; perspective: 1600px; }
.flip { all: unset; box-sizing: border-box; flex: 0 1 330px; cursor: pointer; border-radius: 22px; }
.flip:focus-visible { outline: 2px solid var(--light); outline-offset: 4px; }
.flip-in { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
.flip .face { grid-area: 1 / 1; min-height: 250px; padding: 30px 28px 24px; border-radius: 22px; display: grid; grid-template-rows: 1fr auto; gap: 22px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid var(--line-hi); }
.flip .front { background: linear-gradient(160deg, rgba(36,49,68,.78), rgba(16,24,34,.72)); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(230,241,255,.08); transition: border-color .3s, box-shadow .3s; }
.flip:hover .front { border-color: rgba(169,205,242,.45); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8), 0 0 34px -12px rgba(63,157,255,.55), inset 0 1px 0 rgba(230,241,255,.1); }
.faq.on .flip .front { border-color: rgba(127,220,255,.4); }
.flip .back { transform: rotateY(180deg); background: linear-gradient(160deg, rgba(30,62,104,.9), rgba(14,28,46,.92)); border-color: rgba(124,196,246,.45); box-shadow: 0 0 40px -14px rgba(63,157,255,.6); }
.flip .q { align-self: center; color: var(--head); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.flip .a { color: var(--ivory); font-size: 15.5px; line-height: 1.55; }
.flip .hint { font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--light); opacity: .75; }
.flip .hint::before { content: "↻  "; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }
/* the questions on a screen of their own (V2.md §2.1f): the screen at least the window's height, its words and cards
   centred in it; the cards turn themselves over as it comes into view (v2.js) */
.ask { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-block: calc(var(--head-h, 88px) + 24px) 80px; }
.ask .sec-head { margin-bottom: clamp(28px, 3.4vw, 48px); }
.ask .faq { justify-content: flex-start; max-width: 1100px; }
.ask .flip { flex-basis: 340px; }
.ask .flip .face { min-height: 220px; }
/* QY: the link to the FAQ page under the four cards */
.see-all { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 6px 0; font: 400 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--light); text-decoration: none; border-bottom: 1px solid rgba(127,220,255,.35); transition: color .2s, border-color .2s, gap .2s; }
.see-all:hover, .see-all:focus-visible { color: var(--light-hi); border-color: var(--light); gap: 14px; }
@media (max-width: 720px) { .ask { padding-block: 110px 100px; } .ask .flip { flex-basis: 100%; } .ask .flip .face { min-height: 0; padding: 22px 20px 18px; gap: 16px; } .flip .q { font-size: 19px; } .flip .a { font-size: 15px; } }

/* ——— 12 · book ——— */
.book { text-align: center; }
.book h2 { max-width: 16em; margin: 0 auto; }
.thesis { margin: 26px auto 0; font: 400 clamp(15px, 1.4vw, 18px)/1.5 var(--mono); letter-spacing: .1em; color: var(--light); text-transform: uppercase; }
/* the booking as a bento (V2.md §2.1f): the form large on the left; Call and Text side by side on the right, Email us
   full width beneath them. Phones: Call and Text first, Email, then the form */
.bento { margin: clamp(36px, 4.5vw, 56px) 0 0; max-width: 1240px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto; gap: 18px; text-align: left; }
.bento .reach-form { grid-column: 1; grid-row: 1 / span 2; }
.bento .r-call { grid-column: 2; grid-row: 1; } .bento .r-text { grid-column: 3; grid-row: 1; }
.bento .reach-mail { grid-column: 2 / span 2; grid-row: 2; }
.reach-btn { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 34px 22px; border-radius: 24px; text-decoration: none; text-align: center;
  background: linear-gradient(160deg, rgba(36,72,118,.75), rgba(16,30,50,.85)); border: 1px solid rgba(124,196,246,.45);
  box-shadow: 0 0 46px -16px rgba(63,157,255,.7), inset 0 1px 0 rgba(230,241,255,.12); transition: transform .2s, box-shadow .25s, border-color .25s; }
.reach-btn:hover, .reach-btn:focus-visible, .reach-mail:hover, .reach-mail:focus-visible { transform: translateY(-3px); border-color: rgba(191,227,251,.8); box-shadow: 0 0 70px -10px rgba(63,157,255,.85), inset 0 1px 0 rgba(230,241,255,.16); }
/* (each door's icon breathes a ring of light outward, like a phone ringing; still for reduced motion) */
.reach-btn { position: relative; overflow: hidden; }
.reach-btn::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 42%, rgba(63,157,255,.22), transparent 70%); pointer-events: none; }
.reach-btn .ic { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--frost-grad); color: #04121e; box-shadow: 0 0 40px rgba(127,196,246,.65); margin-bottom: 14px; }
.reach-btn .ic::before, .reach-btn .ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(127,220,255,.55); animation: door-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.reach-btn .ic::after { animation-delay: 1.4s; }
@keyframes door-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reach-btn .ic::before, .reach-btn .ic::after { animation: none; opacity: 0; } }
.reach-btn .ic svg { width: 38px; height: 38px; }
.reach-btn b { color: var(--head); font: 500 clamp(26px, 2.3vw, 34px)/1 var(--sans); letter-spacing: -.02em; }
.reach-btn .num { margin-top: 4px; font: 400 clamp(14px, 1.15vw, 17px)/1 var(--mono); letter-spacing: .04em; color: #bfe3fb; white-space: nowrap; }
.reach-btn small { color: var(--muted); font-size: 14px; }
.reach-mail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 196px; padding: 26px 30px; border-radius: 24px; text-decoration: none;
  background: linear-gradient(160deg, rgba(30,48,72,.7), rgba(13,21,31,.85)); border: 1px solid rgba(124,196,246,.3);
  box-shadow: 0 0 40px -20px rgba(63,157,255,.6), inset 0 1px 0 rgba(230,241,255,.08); transition: transform .2s, box-shadow .25s, border-color .25s; }
/* (twice the height it had, taken from the doors above; its icon the same frost badge as theirs) */
.reach-mail .ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--frost-grad); color: #04121e; box-shadow: 0 0 34px rgba(127,196,246,.6); }
.reach-mail .ic svg { width: 30px; height: 30px; }
.reach-mail b { display: block; color: var(--head); font: 500 clamp(24px, 2vw, 30px)/1.1 var(--sans); letter-spacing: -.015em; }
.reach-mail .addr { display: block; margin-top: 8px; font: 400 clamp(14px, 1.15vw, 17px)/1.2 var(--mono); color: #bfe3fb; overflow-wrap: anywhere; }
.reach-mail .go { color: var(--light); font-size: 22px; transition: transform .2s; } .reach-mail:hover .go { transform: translateX(4px); }

/* the form: two groups of fields under small mono legends, a row of choices for the time, the button full width */
.reach-form { padding: clamp(26px, 2.6vw, 38px); border-radius: 26px; border: 1px solid var(--line-hi); display: grid; gap: 24px; align-content: start;
  background: linear-gradient(180deg, rgba(26,36,51,.88), rgba(11,17,23,.84)); box-shadow: 0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(230,241,255,.07); }
.reach-k { font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--light); }
.reach-lede { margin-top: 12px; color: var(--head); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; letter-spacing: -.01em; max-width: 30em; }
/* what happens on the review (Adam's copy E5, 2026-10-30) */
.reach-steps { margin: 14px 0 0; padding-left: 1.3em; display: grid; gap: 4px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.reach-group { margin: 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; min-width: 0; }
.reach-group legend { float: left; width: 100%; grid-column: 1 / -1; padding: 0; margin: 0 0 2px; font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.reach-group legend + * { clear: both; }
.reach-form .field { margin: 0; min-width: 0; }
.reach-form .field.wide { grid-column: 1 / -1; }
.reach-form .field label { font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reach-form .field label small { margin-left: 6px; letter-spacing: .08em; color: var(--dim); text-transform: none; font-size: 11.5px; }
.reach-form .field input, .reach-form .field select { padding: 14px 15px; transition: border-color .2s, box-shadow .2s; }
.reach-form .field input:focus, .reach-form .field select:focus { outline: none; border-color: var(--light); box-shadow: 0 0 0 3px rgba(127,196,246,.18); }
.reach-form .field input[aria-invalid="true"] { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(226,135,111,.14); }
.reach-form .r-select { position: relative; display: block; }
.reach-form .r-select select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
.reach-form .r-select select option { background: #0f1720; color: var(--ivory); }
.reach-form .r-select::after { content: ""; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--light); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }
.reach-go { display: grid; gap: 12px; padding-top: 4px; }
.reach-go .btn { justify-content: center; padding-block: 18px; font-size: 16.5px; }
.reach-note { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; text-wrap: balance; }
/* E8 and the consent line (campaign-atlas-growth-system 001c): the agreement under the button, in the small print's
   size but never its grey, since a person must be able to read what they agree to */
.reach-consent { font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: pretty; }
.reach-consent a { color: var(--light); }
.reach-err { font-size: 13px; line-height: 1.45; color: var(--warn); text-align: center; }
.reach-err:empty { display: none; }
.reach-form .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
/* the honeypot: off screen for people, still in the form for a bot that fills every field */
.reach-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reach-form { position: relative; }
/* the success state replaces the form's fields once the CRM has the request */
.reach-done { display: grid; gap: 14px; align-content: center; min-height: 320px; text-align: center; }
.reach-done h3 { color: var(--head); font: 500 clamp(26px, 2.3vw, 34px)/1.15 var(--sans); letter-spacing: -.02em; }
.reach-done p { color: var(--muted); font-size: 17px; line-height: 1.5; }
.reach-form.sent > :not(.reach-done), .reach-form:not(.sent) .reach-done { display: none; }

@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento .r-call { grid-column: 1; grid-row: 1; } .bento .r-text { grid-column: 2; grid-row: 1; }
  .bento .reach-mail { grid-column: 1 / -1; grid-row: 2; } .bento .reach-form { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 720px) {
  /* (the header is sticky, so a section's top sits under it: the booking's headline starts clear of the bar and of the
     chapter tag in its bottom edge, however the page arrives here) */
  .book { padding-top: calc(var(--head-h, 88px) + 36px); }
  .bento { gap: 12px; margin-top: 28px; }
  .reach-btn { padding: 22px 10px 20px; border-radius: 20px; gap: 7px; }
  .reach-btn .ic { width: 58px; height: 58px; margin-bottom: 6px; } .reach-btn .ic svg { width: 26px; height: 26px; }
  .reach-btn b { font-size: 22px; } .reach-btn .num { font-size: 13px; letter-spacing: 0; } .reach-btn small { font-size: 12.5px; }
  .reach-mail { min-height: 152px; padding: 18px 18px; gap: 16px; border-radius: 20px; } .reach-mail .ic { width: 58px; height: 58px; } .reach-mail .ic svg { width: 26px; height: 26px; } .reach-mail b { font-size: 21px; } .reach-mail .addr { font-size: 13px; overflow-wrap: normal; white-space: nowrap; }
  /* (on a phone the address needs the arrow's room, or it breaks at its hyphen) */
  .reach-mail { grid-template-columns: auto minmax(0, 1fr); } .reach-mail .go { display: none; }
  .reach-form { padding: 22px 18px; border-radius: 22px; gap: 20px; }
  .reach-group { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; }
}
@media (max-width: 380px) { .reach-mail { gap: 12px; padding-inline: 14px; } .reach-mail .ic { width: 52px; height: 52px; } }

/* the footer, with the recruiting line */
footer { border-top: 1px solid var(--line); padding-block: 56px calc(56px + env(safe-area-inset-bottom, 0px)); }
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .foot { grid-template-columns: 1fr; } }
.foot .join { color: var(--ivory); font-size: 22px; letter-spacing: -.02em; line-height: 1.3; }
.foot nav { display: grid; align-content: start; gap: 10px; font-size: 14.5px; } .foot nav a { text-decoration: none; color: var(--muted); } .foot nav a:hover { color: var(--ivory); }
.fine { margin-top: 40px; font: 400 12px/1.5 var(--mono); color: var(--dim); }

/* the film, opened from "See Atlas in Action" */
.film-modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(5,8,12,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.film-modal.open { display: grid; }
.film-modal canvas { display: block; border-radius: 14px; box-shadow: 0 40px 140px rgba(0,0,0,.7); }
.film-modal .x { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.film-modal .loading { color: var(--muted); font: 400 13px/1 var(--mono); letter-spacing: .12em; }

/* ——— the nervous system (V2.md §2): the nerves on one canvas behind the content, the chapter titles on the spine ——— */
#nerves { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#chapters { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 4; }
.chap-label { position: absolute; white-space: nowrap; text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--light);
  opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1), color .3s; }
.chap-label.out { opacity: .9; transform: none; }
.chap-label:hover { color: var(--light-hi); }
@media (max-width: 720px) { .chap-label { font-size: 9px; letter-spacing: .12em; } }
main, footer { position: relative; z-index: 1; }   /* (the header keeps its own sticky pin and z-index, above) */
/* (ISSUES I-9: the spine's small titles are fixed to the screen down the left and its channels run down the page, so at
   the page's end they drew over the footer's mark and line. The footer is now the page's floor: solid, and above the
   nerves' canvas and the titles, so the rail slides under it as it comes up. The phone's tag rides in the header, above) */
footer { z-index: 5; background: #000; }
/* every chapter's content sits to the right of the spine and its small titles */
.chap .wrap { padding-left: max(var(--gut), 200px); }
@media (max-width: 720px) { .chap .wrap { padding-left: 34px; padding-right: 16px; } }
.chap .sec-head h2, .chap h2 { margin-bottom: 4px; }
.tag { color: var(--head); font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.35; margin-top: 10px; }

/* powered down: grey and still, never invisible (Yusef, 2026-10-26); powered on: colour, with a brief flicker */
html.js [data-feed] { filter: grayscale(1) brightness(.34); transition: filter .7s ease, box-shadow .7s ease, border-color .7s ease; }
html.js [data-feed]:not(.on), html.js [data-feed]:not(.on) * { animation-play-state: paused !important; }
html.js [data-feed].on { filter: none; animation: power-on .55s steps(1, end) 1; }
@keyframes power-on { 0% { filter: brightness(1.8); } 12% { filter: grayscale(1) brightness(.34); } 24% { filter: brightness(1.45); } 40% { filter: grayscale(.4) brightness(.8); } 60% { filter: none; } }
@media (prefers-reduced-motion: reduce) { html.js [data-feed] { filter: none; } html.js [data-feed].on { animation: none; } }

/* (2026-10-27) the hero's markup carries .evolved.relaid from the start, so the first paint is already the final
   layout: the words in their place, one screen tall, the header's height assumed (chrome.css: 88px) until v2.js
   measures it; the 3D scene then fades in on its stage (record.js) instead of the page rearranging itself */
/* the hero: the evolution of record-keeping (v2/evolution/) takes the whole section. Once it mounts (.evolved), the
   hero is just its tall pinned scroll; the words sit on the pinned stage and come up over the orb at the finale (v2.js
   drives their opacity from the component's progress), and the skip button jumps to the end of the story. Without
   the component (no JS, or the module failed) the words stand as an ordinary hero */
.hero-words { position: relative; z-index: 2; }
.hero .exec { max-width: 30em; }
.hero.evolved { --head-h: 88px; position: relative; display: block; min-height: 100vh; min-height: 100svh; padding: 0; overflow: visible; margin-top: calc(-1 * var(--head-h, 0px)); }
/* (with scripts on, the hero is its full scrolling length from the start: its story, four screens of eras and the
   launch's five (four on a tall screen, ticket 021; record.js counts the same), and the pinned stage, so nothing below
   it moves when the stage mounts and the acts' photos aren't fetched as if they were next; .static is the hero without
   its story: reduced motion, no 3D, or the module failed) */
.js .hero.evolved { min-height: calc(900vh + 100svh); }
@media (max-aspect-ratio: 85/100) { .js .hero.evolved { min-height: calc(800vh + 100svh); } }
@media (prefers-reduced-motion: reduce) { .js .hero.evolved { min-height: 100svh; } }
.js .hero.evolved.static { min-height: 100svh; }
.hero-pre { position: sticky; top: 0; height: 100vh; height: 100svh; }   /* (up under the sticky header, so the first screen is the whole stage; visible, so the bloom can spill out) */
/* the finale: the scene fades out at its foot (no hard edge where the hero ends), the spine's nerve runs down from the
   orb on its own canvas above the scene, and a bloom centred on the nerve spills over the edge into the page */
.hero.evolved .evo-cv, .hero.evolved .rec-cv { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade, 0) * 24%), transparent); mask-image: linear-gradient(#000 calc(100% - var(--fade, 0) * 24%), transparent); }
.evo-nerve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-bleed { position: absolute; left: 0; right: 0; bottom: -36vh; height: 72vh; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: var(--fade, 0);
  background: radial-gradient(ellipse 30% 50% at 50% 50%, rgba(130,200,255,.16), rgba(110,180,255,.06) 45%, rgba(110,180,255,0) 75%); }   /* (clip, never hidden: hidden would break the stage's sticky pin) */
.hero.evolved .evo, .hero.evolved .rec { padding: 0; }   /* (the page's section padding would offset the pin and release it early) */
.hero.evolved .evo-final { display: none; }   /* the page's own h1 says the lead, so the rotation (?h=) still works */
.hero.evolved .hero-words { position: absolute; left: 0; right: 0; bottom: calc(28% + clamp(36px, 7vh, 80px)); z-index: 2; text-align: center; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.hero.evolved .hero-words.on { pointer-events: auto; }
.hero.evolved h1 { margin: 0 auto 18px; max-width: 16ch; font-size: clamp(32px, 4.6vw, 72px); line-height: 1.02; text-shadow: 0 2px 24px rgba(11,17,23,.9); }
.hero.evolved .exec { margin: 0 auto; text-shadow: 0 2px 18px rgba(11,17,23,.9); }
.hero.evolved .acts { justify-content: center; margin-top: 26px; }
.evo-skip { display: none; }
.hero.evolved .evo-skip { display: inline-flex; position: absolute; right: var(--gut); bottom: clamp(20px, 5vh, 44px); z-index: 3; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px;
  background: rgba(11,17,23,.55); border: 1px solid var(--line-hi); color: var(--muted); font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, opacity .3s; }
/* the relaid hero (V2.md §2.1b): the words fixed in the left 35%, beside the animation, the whole way through */
.hero.evolved.relaid .hero-words { left: var(--gut); right: auto; width: calc(35% - var(--gut) - 16px); max-width: none; top: 52%; bottom: auto; transform: translateY(-50%) !important;
  text-align: left; opacity: 1 !important; pointer-events: auto; padding: 0; }
.hero.evolved.relaid h1 { margin: 0 0 18px; max-width: 13ch; font-size: clamp(34px, 3.5vw, 58px); }
.hero.evolved.relaid .exec { margin: 0; font-size: clamp(16px, 1.25vw, 20px); }
.hero.evolved.relaid .acts { justify-content: flex-start; margin-top: 28px; }
/* Adam's copy (2026-10-30): who it's for above the headline (H1), and the review's length under the buttons (H5) */
.hero .hero-eb { margin: 0 0 18px; }
.hero .hero-note { margin-top: 14px; font: 400 11px/1.45 var(--mono); letter-spacing: 0; color: var(--muted); }
.hero.evolved.relaid .evo-skip { right: auto; left: var(--gut); bottom: clamp(96px, 15vh, 150px); }
.hero.evolved .evo-skip:hover, .hero.evolved .evo-skip:focus-visible { color: var(--ivory); border-color: var(--light); }
.hero.evolved .evo-skip.gone { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .hero.evolved .hero-words { bottom: calc(28% + 64px); } .hero.evolved .exec { font-size: 16px; } }
/* the relaid hero on a phone (2026-10-27): the words across the top, the card's own words under them (record.js), the
   timeline on its side near the foot; the film button and the skip in one row near the foot. The header carries the
   booking on a phone (N8), so the hero's own Book button steps aside here */
@media (max-width: 720px) {
  .hero.evolved.relaid .hero-words { left: var(--gut); right: var(--gut); width: auto; top: calc(var(--head-h, 88px) + 10px); bottom: 96px; transform: none !important;
    display: flex; flex-direction: column; text-align: center; pointer-events: none; }
  .hero.evolved.relaid .hero-words > * { pointer-events: auto; }
  .hero.evolved.relaid h1 { max-width: none; margin: 0 0 8px; font-size: clamp(22px, 6.6vw, 28px); line-height: 1.08; }
  .hero.evolved.relaid .exec { font-size: 13.5px; line-height: 1.4; color: var(--light); }
  .hero.evolved.relaid .acts { margin-top: auto; justify-content: flex-start; }
  .hero.evolved.relaid .acts .btn.primary { display: none; }
  .hero.evolved.relaid .hero-eb { margin: 0 auto 10px; font-size: 10px; } .hero.evolved.relaid .hero-note { display: none; }   /* (no room above the timeline on a phone) */
  .hero.evolved.relaid .evo-skip { left: 0; right: 0; width: max-content; margin-inline: auto; bottom: 96px; padding: 13px 14px; }   /* (alone since See How It Works went, 2026-11-01: centred) */
}
@media (max-width: 720px) and (max-height: 760px) { .hero.evolved.relaid .exec { display: none; } }
@media (max-width: 380px) { .hero.evolved.relaid .evo-skip { padding: 11px 10px; letter-spacing: .12em; } }

/* how it works: the five steps, each fed by its own neuron */
.steps { display: grid; gap: 12px; max-width: 760px; margin-top: 10px; }
.steps::before, .steps .fill { display: none; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: baseline; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(26,36,51,.4); }
.step .n { font: 400 13px/1 var(--mono); letter-spacing: .16em; color: var(--light); }
.step p { margin: 0; color: var(--head); font-size: clamp(18px, 1.7vw, 23px); letter-spacing: -.02em; line-height: 1.3; }
.sub-h { margin-top: clamp(60px, 7vw, 100px); font-size: clamp(24px, 2.4vw, 36px); max-width: 26em; }
.book { text-align: left; } .book h2 { margin: 0; } .book .thesis { margin: 16px 0 0; } .booker { margin: 40px 0 0; }
.reveal-head { text-align: left; justify-items: start; margin-left: 0; }

/* ——— more contrast, more alive (Yusef, 2026-10-26: "more poppy and alive, more Tron-like and activated"): brighter
   words, a cyan light, and a glowing edge on every card once it is powered on ——— */
:root { --head: #ffffff; --muted: #aab6c3; --light: #7fdcff; --light-hi: #e9fbff; --line: rgba(127,220,255,.14); --line-hi: rgba(127,220,255,.32); }
.eyebrow, .chap-label, .cgm-line, .step .n, .why .vs, .layer.atlas .k { color: var(--light); }
.chap-label.out { opacity: 1; text-shadow: 0 0 10px rgba(127,220,255,.55); }
:is(.item, .dept, .finding, .step, .why article, .layer, .report, .founder, .booker, .flip-row .cgm, .audit, .phone).on,
.on :is(.flip-row .cgm) { border-color: rgba(127,220,255,.45); box-shadow: 0 0 0 1px rgba(127,220,255,.14), 0 0 28px rgba(127,220,255,.12), inset 0 0 24px rgba(127,220,255,.05); }
.item.done.on { border-color: rgba(200,169,120,.55); box-shadow: 0 0 22px rgba(200,169,120,.14); }
h2 { text-shadow: 0 0 34px rgba(127,220,255,.12); }

/* (the booking button's embers reach 40px past it; on a phone the button spans the column, so they'd push the page
   sideways: the section clips sideways only, and they still rise above the button) */
.book { overflow-x: clip; }

/* the ground (Yusef, 2026-10-31): black, with a grid of dots across the whole page, the concept of the hero's
   dotted floor. One fixed layer behind everything, so it costs no repaint on scroll. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(150,190,230,.16) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 120% 90% at 50% 45%, #000 55%, transparent 100%); }