/* MCRO homepage v3 — "The ocean and the lighthouse". One continuous sea across both sections. */
@font-face { font-family: "MCRO Hind"; src: url("assets/fonts/Hind-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MCRO Hind"; src: url("assets/fonts/Hind-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "MCRO Hind"; src: url("assets/fonts/Hind-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "MCRO Khand"; src: url("assets/fonts/Khand-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MCRO Khand"; src: url("assets/fonts/Khand-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }

:root {
  --blue: #08337d; --ink: #06265e; --navy: #071f4b; --night: #05102d; --abyss: #030a1f; --sea: #0b3779; --sea-2: #16458d;
  --light: #fbb52a; --light-soft: #ffd47a; --paper: #fffdf9; --pale: #dbe8f2; --mist: #87a5c4; --body: #17304f;
  --font-body: "MCRO Hind", "Hind", system-ui, sans-serif; --font-display: "MCRO Khand", "Khand", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.3, .4, 1);
}
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0; font: 700 .68rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--light); }
.eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--light); }
.display { font-family: var(--font-display); font-weight: 600; line-height: .9; letter-spacing: -.01em; }
/* word reveal: clipped translate, no fade */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.words .w > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms + 60ms); }
.is-in .words .w > span { transform: translateY(0); }
.words .w--light > span { color: var(--light); }

/* ======================================================================================
   THE SEA — one background shared by both sections, with the brand strokes as currents
   ====================================================================================== */
.sea { position: relative; overflow: clip; color: var(--paper); font-family: var(--font-body);
  background: linear-gradient(180deg, var(--abyss) 0%, var(--night) 28%, var(--sea) 46%, var(--navy) 60%, var(--night) 100%); }
.sea + .sea { background: linear-gradient(180deg, var(--night) 0%, var(--navy) 40%, var(--night) 100%); }
.sea__stars { position: absolute; inset: 0 0 55% 0; pointer-events: none; background-image:
  radial-gradient(1px 1px at 11% 22%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 31% 9%, rgba(255,255,255,.8) 50%, transparent 51%),
  radial-gradient(1px 1px at 47% 30%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,.6) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 76% 26%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 89% 8%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 40%, rgba(255,255,255,.35) 50%, transparent 51%), radial-gradient(1px 1px at 94% 36%, rgba(255,255,255,.45) 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }
/* the currents: brand calligraphy, blue on blue, drifting. Each stroke is an <svg><use> so Replit can swap symbols. */
.currents { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.current { position: absolute; fill: var(--sea-2); opacity: var(--o, .16); width: var(--w, 40%); height: auto; left: var(--x, 0); top: var(--y, 50%); transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  animation: drift var(--t, 42s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); filter: blur(var(--b, 0px)); }
@keyframes drift { from { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateX(-2.5%); } to { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateX(2.5%); } }
/* scroll-driven parallax where supported: strokes deeper in the water move slower than the page */
@supports (animation-timeline: view()) {
  .currents--parallax .current { animation: drift var(--t, 42s) ease-in-out infinite alternate, sink linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% exit 100%; }
  @keyframes sink { from { translate: 0 calc(var(--p, 40) * -1px); } to { translate: 0 calc(var(--p, 40) * 1px); } }
}

/* ======================================================================================
   SECTION A — MCRO brings visibility to research
   ====================================================================================== */
.vis { padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) 1.5rem; }
.vis__inner { position: relative; z-index: 3; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head story" "steps steps" "ocean ocean"; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 6vw, 7rem); }
.vis__head { grid-area: head; }
.vis__story { grid-area: story; align-self: end; }
.vis__ocean { grid-area: ocean; }
.vis__steps { grid-area: steps; }
.vis__title { margin: 1.1rem 0 0; max-width: 11ch; font-size: clamp(2.9rem, 6.2vw, 5.4rem); color: var(--paper); }
.vis__claim { margin: 0; font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.2; color: var(--paper); opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease) .35s, transform .9s var(--ease) .35s; }
.vis__text { margin: 1.2rem 0 0; max-width: 40rem; font-size: 1.04rem; line-height: 1.65; color: #bfd0df; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease) .5s, transform .9s var(--ease) .5s; }
.vis__text mark { padding: .06em .12em; margin: 0 -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px; background: linear-gradient(transparent 14%, rgba(251, 181, 42, .26) 14%, rgba(251, 181, 42, .26) 90%, transparent 90%) no-repeat; background-size: 0% 100%; color: var(--paper); transition: background-size 1.1s var(--ease) 1.2s; }
.is-in .vis__claim, .is-in .vis__text { opacity: 1; transform: none; }
.is-in .vis__text mark { background-size: 100% 100%; }

/* ---- the open water: no box. Records drift here, the lighthouse stands here. ---- */
.vis__ocean { position: relative; height: clamp(430px, 43vw, 580px); }
.horizon { display: none; }
/* the lighthouse (vector) */
.lh { position: absolute; left: 6%; bottom: 0; z-index: 4; width: clamp(90px, 9vw, 120px); height: auto; overflow: visible; transform: translateY(12%); opacity: 0; transition: transform 1.3s var(--ease) .4s, opacity .8s var(--ease) .4s; }
.is-in .lh { transform: none; opacity: 1; }
.lh .tower { fill: url(#lh-tower); } .lh .band { fill: var(--ink); } .lh .rock { fill: #0a2559; } .lh .gallery { fill: var(--ink); }
.lh .room { fill: #fff3cf; } .lh .roof { fill: var(--ink); }
.lh .lamp { fill: var(--light); filter: url(#lh-glow); animation: lamp 3.5s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
/* beam: two blades from the lantern, a full turn every 7s; sized to the ocean block */
.beam { position: absolute; z-index: 2; left: var(--lx, 12%); top: var(--ly, 60%); width: 240%; height: 240%; transform-origin: 0 0; pointer-events: none; animation: turn 7s linear infinite; opacity: 0; transition: opacity 1s var(--ease) 1s; mix-blend-mode: screen; }
.is-in .beam { opacity: 1; }
.beam::before, .beam::after { content: ""; position: absolute; inset: 0; }
.beam::before { background: conic-gradient(from 0deg at 0 0, transparent 0deg, rgba(251, 181, 42, .04) 82deg, rgba(251, 181, 42, .30) 90deg, rgba(251, 181, 42, .04) 98deg, transparent 102deg); }
.beam::after { background: conic-gradient(from 0deg at 0 0, transparent 0deg, rgba(251, 181, 42, .03) 262deg, rgba(251, 181, 42, .22) 270deg, rgba(251, 181, 42, .03) 278deg, transparent 282deg); }
@keyframes turn { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
/* light on the water: a soft reflection under the lantern */
.glint { position: absolute; z-index: 1; left: var(--lx, 12%); top: calc(var(--ly, 60%) - 10%); width: 40%; height: 80%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(45% 40% at 50% 50%, rgba(251, 181, 42, .12), transparent 70%); animation: glint 3.5s ease-in-out infinite; }
@keyframes glint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- records: lost in the water, lit as the beam passes, then found / credited / condensed ---- */
.recs { position: absolute; inset: 0; z-index: 3; }
.rec { position: absolute; left: 0; top: 0; width: 17%; min-width: 128px; padding: .7rem .8rem .75rem; border-radius: 4px;
  border: 1px solid rgba(219, 232, 242, .16); background: rgba(5, 16, 45, .55); color: rgba(219, 232, 242, .45); font: 400 .66rem/1.35 var(--font-body);
  --x: var(--sx); --y: var(--sy); --r: var(--sr); --o: .6; --s: 1;
   transform: translate(clamp(16px, var(--x), calc(var(--vw) - var(--card-w, 128px) * var(--s) - 16px)), clamp(16px, var(--y), calc(var(--vh) - var(--card-h, 120px) * var(--s) - 16px))) rotate(var(--r)) scale(var(--s)); opacity: var(--o);
  transition: transform 1.1s var(--ease), opacity .8s var(--ease), border-color .6s, background-color .6s, color .6s, box-shadow .6s; transition-delay: calc(var(--i) * 55ms); will-change: transform; }
.rec b { display: block; margin-bottom: .3rem; font: 600 .78rem/1.2 var(--font-body); color: rgba(255, 253, 249, .7); }
.rec i { display: block; font-style: normal; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.rec .credit { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); color: var(--light); font-weight: 700; font-size: .6rem; letter-spacing: .06em; transition: max-height .6s var(--ease), opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 55ms + .35s); }
.rec .credit::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, var(--light), #f2892f); }
.rec .credit::after { content: "↗"; margin-left: auto; opacity: .8; }
/* lost: bobbing, and a flash each time a blade passes (delay computed per record in JS from its bearing) */
.ocean[data-state="dark"] .rec { animation: bob 6s ease-in-out infinite alternate, flash 3.5s linear infinite; animation-delay: calc(var(--i) * -.9s), var(--flash, 0s); }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 5px; } }
@keyframes flash { 0%, 5.5% { border-color: rgba(219, 232, 242, .16); color: rgba(219, 232, 242, .45); box-shadow: none; }
  2.5% { border-color: rgba(251, 181, 42, .8); color: var(--pale); box-shadow: 0 0 0 1px rgba(251, 181, 42, .25), 0 0 30px rgba(251, 181, 42, .18); background: rgba(8, 51, 125, .85); } }
/* ---- CURATING (state "find"): a scan passes over the water, records are pulled in one at a time in shelf order,
   each gets a tick and its theme tag, and the three shelves label themselves ---- */
.ocean[data-state="find"] .rec { transition-delay: calc(var(--k, var(--i)) * 120ms + .35s); }
.scan { position: absolute; z-index: 5; top: -2%; bottom: -2%; left: 0; width: 2px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--light) 30%, var(--light) 70%, transparent); box-shadow: 0 0 24px 4px rgba(251, 181, 42, .35); }
.ocean[data-state="find"] .scan { animation: scan 1.6s cubic-bezier(.4, 0, .2, 1) .15s forwards; }
@keyframes scan { 0% { opacity: 0; transform: translateX(calc(var(--vw) * .30)); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--vw) * .95)); } }
.rec .tag { display: block; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font: 700 .52rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--light-soft); font-style: normal; transition: max-height .5s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); transition-delay: calc(var(--k, var(--i)) * 120ms + 1.1s); }
.ocean[data-state="find"] .rec .tag, .ocean[data-state="credit"] .rec .tag { max-height: 2rem; margin-top: .45rem; opacity: 1; }
.rec .check { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--light); box-shadow: 0 0 0 3px var(--night), 0 0 14px rgba(251, 181, 42, .6); transform: scale(0); transition: transform .5s var(--ease-spring); transition-delay: calc(var(--k, var(--i)) * 120ms + 1s); }
.rec .check::after { content: ""; position: absolute; left: 5px; top: 4px; width: 5px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ocean[data-state="find"] .rec .check, .ocean[data-state="credit"] .rec .check { transform: scale(1); }
.ocean[data-state="credit"] .rec .check { transition-delay: 0s; }
.shelves { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.shelf { position: absolute; left: calc(var(--vw) * var(--c)); top: calc(var(--vh) * .05 - 1.55rem); width: 17%; min-width: 128px; padding-bottom: .35rem; font: 700 .6rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--light); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.shelf::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--light), transparent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.ocean[data-state="find"] .shelf, .ocean[data-state="credit"] .shelf { opacity: 1; transform: none; }
.ocean[data-state="find"] .shelf::after, .ocean[data-state="credit"] .shelf::after { transform: scaleX(1); }
.ocean[data-state="find"] .shelf:nth-child(1) { transition-delay: .5s; } .ocean[data-state="find"] .shelf:nth-child(2) { transition-delay: 1.1s; } .ocean[data-state="find"] .shelf:nth-child(3) { transition-delay: 1.5s; }
.ocean[data-state="find"] .shelf:nth-child(1)::after { transition-delay: .6s; } .ocean[data-state="find"] .shelf:nth-child(2)::after { transition-delay: 1.2s; } .ocean[data-state="find"] .shelf:nth-child(3)::after { transition-delay: 1.6s; }
/* found */
.ocean[data-state="find"] .rec, .ocean[data-state="credit"] .rec { --x: var(--gx); --y: var(--fit-y, var(--gy)); --r: 0deg; --o: 1; --s: var(--fit-scale, 1); transform-origin: 0 0; border-color: rgba(251, 181, 42, .55); background: rgba(8, 51, 125, .92); color: #bfd0df; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(251, 181, 42, .1); }
.ocean[data-state="find"] .rec b, .ocean[data-state="credit"] .rec b { color: var(--paper); }
.ocean[data-state="credit"] .rec .credit { max-height: 2rem; opacity: 1; transform: none; }
/* condensed */
.ocean[data-state="brief"] .rec { --x: var(--px); --y: var(--py); --r: var(--pr); --o: 1; --s: .96; border-color: rgba(219, 232, 242, .3); background: var(--sea); color: var(--mist); transition-delay: calc((8 - var(--i)) * 45ms); }
.pile-label, .brief { position: absolute; z-index: 4; opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.pile-label { left: 40%; top: 58%; transform: translateY(10px); color: var(--mist); font: 700 .64rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.pile-label strong { display: block; margin-bottom: .35rem; font: 600 3rem/1 var(--font-display); color: var(--pale); letter-spacing: 0; }
.arrow { position: absolute; z-index: 4; left: 59%; top: 42%; width: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--light)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .5s; }
.arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--light); }
.brief { left: 69%; top: 16%; width: 22%; min-width: 190px; aspect-ratio: 1 / 1.1; padding: 1rem 1.05rem; border-radius: 3px; background: var(--paper); color: var(--body); transform: translateY(24px) rotate(1.5deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8), -6px 6px 0 -1px var(--pale), -12px 12px 0 -2px #c7d3df; }
.brief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--light); }
.brief em { display: block; font: 700 .58rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); font-style: normal; }
.brief strong { display: block; margin-top: .5rem; font: 600 1.15rem/1 var(--font-display); color: var(--ink); }
.brief .ln { display: block; height: 5px; margin-top: .55rem; border-radius: 3px; background: linear-gradient(90deg, var(--pale), #eef4f9); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.brief .ln:nth-child(3) { width: 92%; } .brief .ln:nth-child(4) { width: 74%; } .brief .ln:nth-child(5) { width: 84%; } .brief .ln:nth-child(6) { width: 55%; }
.brief .pages { position: absolute; right: .9rem; bottom: .8rem; font: 600 2.4rem/1 var(--font-display); color: var(--light); }
.brief .pages small { display: block; font: 700 .56rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.ocean[data-state="brief"] .pile-label, .ocean[data-state="brief"] .brief { opacity: 1; transform: none; transition-delay: .55s; }
.ocean[data-state="brief"] .arrow { transform: scaleX(1); }
.ocean[data-state="brief"] .brief .ln { transform: scaleX(1); }
.ocean[data-state="brief"] .brief .ln:nth-child(3) { transition-delay: .9s; } .ocean[data-state="brief"] .brief .ln:nth-child(4) { transition-delay: 1s; } .ocean[data-state="brief"] .brief .ln:nth-child(5) { transition-delay: 1.1s; } .ocean[data-state="brief"] .brief .ln:nth-child(6) { transition-delay: 1.2s; }
/* the stage reader sits beside the lantern (--lx/--ly are the lamp's measured position); the lamp is its dot */
.caption { position: absolute; left: calc(var(--lx, 12%) + 1.6rem); top: calc(var(--ly, 60%) - .45em); z-index: 6; display: flex; align-items: baseline; gap: .6rem; margin: 0; color: var(--light); font: 700 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 12px rgba(251, 181, 42, .5); }
.caption::before { content: ""; width: 1.1rem; height: 1px; background: linear-gradient(90deg, var(--light), transparent); align-self: center; }
.caption span { display: none; } .caption span.is-on { display: inline; animation: cap .6s var(--ease); }
@keyframes cap { from { opacity: 0; transform: translateY(6px); } }

/* ---- the three pillars: the one in focus is LIT (number disc, ring that fills over the hold, pool of light) ---- */
@property --ring { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.vis__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1rem, 3vw, 2.5rem); margin: 0; padding: .6rem 0 1.2rem; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 2.1rem 1fr; column-gap: .9rem; align-items: start; padding: .9rem 1rem .9rem .9rem; margin: -.9rem -1rem -.9rem -.9rem; border: 0; border-radius: 8px; background: none; text-align: left; font-family: inherit; color: inherit; cursor: pointer; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease), background .5s var(--ease); transition-delay: calc(.6s + var(--i) * 120ms); }
.is-in .step { opacity: 1; transform: none; transition-delay: calc(.6s + var(--i) * 120ms), calc(.6s + var(--i) * 120ms), 0s; }
.step::before { /* the pool of light behind the pillar in focus: an ellipse that fades out before it reaches any edge, so it never shows as a box */ content: ""; position: absolute; inset: -1.6rem -2.2rem; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side at 34% 42%, rgba(251, 181, 42, .15), rgba(251, 181, 42, .05) 62%, transparent 100%); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.step.is-active::before { opacity: 1; }
.step:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }
.step__num { position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-top: .05rem; border-radius: 50%; font: 600 .8rem/1 var(--font-display); letter-spacing: .04em; color: var(--mist); border: 1px solid rgba(135, 165, 196, .45); transition: color .4s, border-color .4s, background .4s, box-shadow .5s; }
.step__num::after { /* the ring: fills clockwise over the hold, so the timing cue lives in the light itself */ content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--light) var(--ring), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); opacity: 0; }
.step.is-active .step__num { color: var(--ink); background: var(--light); border-color: var(--light); box-shadow: 0 0 0 4px rgba(251, 181, 42, .16), 0 0 26px rgba(251, 181, 42, .45); }
.step.is-active .step__num::after { opacity: 1; animation: ring var(--hold, 4.2s) linear forwards; }
.vis__steps.is-paused .step.is-active .step__num::after { animation-play-state: paused; }
@keyframes ring { from { --ring: 0%; } to { --ring: 100%; } }
.step__body { min-width: 0; }
.step h3 { margin: 0; font: 600 1.45rem/1 var(--font-display); color: var(--mist); transition: color .4s, transform .5s var(--ease); }
.step p { margin: .5rem 0 0; max-width: 30ch; font-size: .92rem; line-height: 1.55; color: rgba(135, 165, 196, .8); transition: color .4s; }
.step:hover h3 { color: var(--pale); }
.step.is-active h3 { color: var(--paper); transform: translateX(3px); }
.step.is-active p { color: #bfd0df; }

/* ======================================================================================
   THE PASSAGE — between the sections the light keeps turning: a lit horizon line
   ====================================================================================== */
.passage { display: none; }

/* ======================================================================================
   SECTION B — Who it is for: the light from the lighthouse routes the audiences
   ====================================================================================== */
.who { padding: clamp(3rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3.5rem); }
.who__inner { position: relative; z-index: 3; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "head router" "cta router"; grid-template-rows: auto 1fr; gap: 0 clamp(2rem, 5vw, 6rem); align-items: start; }
.who__head { grid-area: head; }
.who__title { margin: 1.1rem 0 0; max-width: 8ch; font-size: clamp(2.9rem, 6.2vw, 5.4rem); color: var(--paper); }
.who__lede { margin: 1.3rem 0 0; max-width: 24rem; font-size: 1.05rem; line-height: 1.65; color: #bfd0df; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease) .4s, transform .9s var(--ease) .4s; }
.is-in .who__lede { opacity: 1; transform: none; }
.who__cta { grid-area: cta; align-self: start; margin-top: .5rem; display: inline-flex; align-items: center; gap: .5rem; width: max-content; font: 700 .9rem/1 var(--font-body); color: var(--light); text-decoration: none; opacity: 0; transition: opacity .8s var(--ease) .9s, color .3s; }
.is-in .who__cta { opacity: 1; }
.who__cta .ar { display: inline-block; transition: transform .4s var(--ease-spring); }
.who__cta:hover { color: var(--paper); } .who__cta:hover .ar { transform: translateX(6px); }
.who__router { grid-area: router; position: relative; display: grid; grid-template-columns: minmax(200px, .9fr) 64px minmax(0, 1.4fr); align-items: start; }
.who__rail { position: relative; z-index: 1; display: flex; flex-direction: column; border-top: 1px solid rgba(75, 107, 161, .7); }
.tab { position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: .8rem; align-items: baseline; padding: 1.15rem 1rem 1.15rem 0; border: 0; border-bottom: 1px solid rgba(75, 107, 161, .7); background: none; color: var(--paper); font-family: inherit; text-align: left; cursor: pointer; opacity: 0; transform: translateX(-14px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(.3s + var(--i) * 100ms); }
.is-in .tab { opacity: 1; transform: none; }
.tab:focus-visible { outline: 2px solid var(--light); outline-offset: -2px; }
.tab__idx { font: 600 .8rem/1 var(--font-display); color: var(--mist); letter-spacing: .06em; transition: color .3s; }
.tab__label { font: 600 1.65rem/1 var(--font-display); color: var(--mist); transition: transform .5s var(--ease), color .4s; }
.tab__ar { font-size: 1rem; color: var(--mist); transition: transform .45s var(--ease-spring), color .3s; }
.tab__hint { grid-column: 2 / -1; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: .84rem; line-height: 1.5; color: #bfd0df; transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .5s; }
.tab.is-active .tab__hint { max-height: 5rem; opacity: 1; margin-top: .5rem; }
.tab.is-active .tab__idx, .tab.is-active .tab__ar { color: var(--light); }
.tab.is-active .tab__label { color: var(--paper); transform: translateX(6px); text-shadow: 0 0 24px rgba(251, 181, 42, .35); }
.tab.is-active .tab__ar { transform: translate(3px, -3px); }
.tab:hover:not(.is-active) .tab__label { color: var(--pale); }
.who__wire { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.who__wire path { fill: none; stroke: var(--light); stroke-width: 1.5; stroke-dasharray: 6 5; stroke-linecap: round; opacity: .85; }
.who__wire .dot { fill: var(--light); filter: drop-shadow(0 0 4px rgba(251, 181, 42, .8)); }
.who__panel { position: relative; z-index: 1; display: grid; min-height: 0; transition: height .6s var(--ease), opacity .9s var(--ease) .5s, transform 1s var(--ease) .5s; border-radius: 6px; background: rgba(7, 31, 75, .72); border: 1px solid rgba(75, 107, 161, .55); box-shadow: 0 40px 70px -30px rgba(1, 12, 35, .8); overflow: hidden; isolation: isolate; backdrop-filter: blur(6px); opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .9s var(--ease) .5s, transform 1s var(--ease) .5s; }
.is-in .who__panel { opacity: 1; transform: none; }
.card { grid-area: 1 / 1; position: absolute; top: 0; left: 0; right: 0; z-index: 1;   /* no bottom: an inactive card keeps its OWN height, so the tallest can be measured */ padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; opacity: 0; transform: translateY(26px); pointer-events: none; visibility: hidden; transition: opacity .55s var(--ease), transform .7s var(--ease); }
.card.is-active { position: relative; align-self: start; opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: .15s; }
.card.is-leaving { opacity: 0; transform: translateY(-18px); visibility: visible; }
.card__kicker { margin: 0; font: 700 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--light); }
.card__promise { margin: .8rem 0 0; max-width: 22ch; font: 600 clamp(1.35rem, 2vw, 1.8rem)/1 var(--font-display); color: var(--paper); }
.card__mock { position: relative; margin-top: 1.5rem; padding-bottom: .2rem; }
.card__mock > * { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.card.is-active .card__mock > * { opacity: 1; transform: none; }
.card.is-active .card__mock > :nth-child(1) { transition-delay: .35s; } .card.is-active .card__mock > :nth-child(2) { transition-delay: .45s; } .card.is-active .card__mock > :nth-child(3) { transition-delay: .55s; } .card.is-active .card__mock > :nth-child(4) { transition-delay: .65s; }
/* mocks (same as before) */
.recc { padding: 1rem 1.1rem; border-radius: 4px; background: var(--paper); color: var(--body); border-left: 3px solid var(--light); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
.recc__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; font: 700 .6rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #5b6e83; }
.recc__meta b { color: var(--blue); }
.recc__title { margin: .55rem 0 0; font: 600 1.1rem/1.05 var(--font-display); color: var(--ink); }
.recc__cite { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; padding: .55rem .7rem; border: 1px dashed #c7d3df; border-radius: 3px; font: 400 .72rem/1.4 var(--font-body); color: #5b6e83; }
.recc__cite button { margin-left: auto; flex: 0 0 auto; padding: .4rem .65rem; border: 0; border-radius: 3px; background: var(--blue); color: var(--paper); font: 700 .62rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s, transform .3s var(--ease-spring); }
.recc__cite button:hover { background: var(--ink); transform: translateY(-1px); } .recc__cite button.is-done { background: var(--light); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span { padding: .38rem .65rem; border: 1px solid rgba(219, 232, 242, .3); border-radius: 999px; font: 700 .62rem/1 var(--font-body); letter-spacing: .06em; color: var(--pale); }
.chips span.is-hot { border-color: var(--light); color: var(--light); }
.pages2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.page { position: relative; padding: .9rem .9rem 1rem; aspect-ratio: 1 / 1.15; border-radius: 3px; background: var(--paper); color: var(--body); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); overflow: hidden; }
.page em { display: block; font: 700 .56rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); font-style: normal; }
.page strong { display: block; margin-top: .45rem; font: 600 1rem/1.05 var(--font-display); color: var(--ink); }
.page .ln { display: block; height: 5px; margin-top: .5rem; border-radius: 3px; background: #e6eef5; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.page .ln.w2 { width: 78%; } .page .ln.w3 { width: 60%; } .page .ln.w4 { width: 88%; }
.card.is-active .page .ln { transform: scaleX(1); }
.card.is-active .page .ln:nth-of-type(1) { transition-delay: .7s; } .card.is-active .page .ln:nth-of-type(2) { transition-delay: .8s; } .card.is-active .page .ln:nth-of-type(3) { transition-delay: .9s; } .card.is-active .page .ln:nth-of-type(4) { transition-delay: 1s; }
.page--not::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--light); }
.page .pg { position: absolute; right: .7rem; bottom: .55rem; font: 600 .85rem/1 var(--font-display); color: var(--light); }
.search { display: grid; gap: .7rem; }
.search__bar { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 4px; background: var(--paper); color: #5b6e83; font: 400 .9rem/1 var(--font-body); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
.search__bar .q { color: var(--ink); font-weight: 600; }
.search__bar .q::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--light); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.search__bar .go { margin-left: auto; font: 700 .62rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.search__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; color: var(--mist); font: 700 .6rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.search__or::before, .search__or::after { content: ""; height: 1px; background: rgba(135, 165, 196, .35); }
.search__drop { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1px dashed rgba(251, 181, 42, .6); border-radius: 4px; color: var(--pale); font: 600 .85rem/1.3 var(--font-body); background: rgba(251, 181, 42, .05); transition: background .3s, border-color .3s; }
.search__drop:hover { background: rgba(251, 181, 42, .12); border-color: var(--light); }
.search__drop .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--light); color: var(--ink); font: 700 1.1rem/1 var(--font-body); flex: 0 0 auto; }
.search__drop small { display: block; margin-top: .2rem; font-weight: 400; font-size: .72rem; color: #bfd0df; }
.ledger { display: grid; gap: .9rem; }
.ledger__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .45rem .8rem; font: 600 .88rem/1 var(--font-body); color: var(--pale); }
.ledger__bar { grid-column: 1 / -1; height: 12px; border-radius: 5px; background: rgba(219, 232, 242, .12); overflow: hidden; }
.ledger__bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--light), #f2892f); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.card.is-active .ledger__bar i { transform: scaleX(1); }
.card.is-active .ledger__row:nth-child(1) i { transition-delay: .6s; } .card.is-active .ledger__row:nth-child(2) i { transition-delay: .72s; } .card.is-active .ledger__row:nth-child(3) i { transition-delay: .84s; }
.ledger__buys { font: 700 .6rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.note { margin: .3rem 0 0; font: 400 .72rem/1.5 var(--font-body); color: var(--mist); }
.who__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(219, 232, 242, .1); }
.who__progress i { display: block; height: 100%; background: var(--light); transform: scaleX(0); transform-origin: left; }
.who__router.is-auto .who__progress i { animation: progress var(--hold, 5.2s) linear forwards; }


/* ====================================================================================== responsive */
@media (max-width: 960px) {
  .vis__inner { grid-template-columns: 1fr; grid-template-areas: "head" "story" "steps" "ocean"; }
  .vis__ocean { height: 600px; }
  .rec { width: 44%; min-width: 0; padding: .55rem .65rem; }
  .recs .rec:nth-child(n+7) { display: none; }
  .rec i { display: none; }
  .ocean[data-state="dark"] .recs .rec:nth-child(odd) { --x: calc(var(--vw) * .03); } .ocean[data-state="dark"] .recs .rec:nth-child(even) { --x: calc(var(--vw) * .50); }
  .ocean[data-state="dark"] .recs .rec:nth-child(-n+2) { --y: calc(var(--vh) * .06); } .ocean[data-state="dark"] .recs .rec:nth-child(n+3):nth-child(-n+4) { --y: calc(var(--vh) * .34); } .ocean[data-state="dark"] .recs .rec:nth-child(n+5) { --y: calc(var(--vh) * .60); }
  .ocean[data-state="find"] .recs .rec:nth-child(odd), .ocean[data-state="credit"] .recs .rec:nth-child(odd) { --x: calc(var(--vw) * .04); }
  .ocean[data-state="find"] .recs .rec:nth-child(even), .ocean[data-state="credit"] .recs .rec:nth-child(even) { --x: calc(var(--vw) * .52); }
  .ocean[data-state="find"] .recs .rec:nth-child(-n+2), .ocean[data-state="credit"] .recs .rec:nth-child(-n+2) { --y: calc(var(--vh) * .05); }
  .ocean[data-state="find"] .recs .rec:nth-child(n+3):nth-child(-n+4), .ocean[data-state="credit"] .recs .rec:nth-child(n+3):nth-child(-n+4) { --y: calc(var(--vh) * .26); }
  .ocean[data-state="find"] .recs .rec:nth-child(n+5), .ocean[data-state="credit"] .recs .rec:nth-child(n+5) { --y: calc(var(--vh) * .47); }
  .ocean[data-state="brief"] .rec { --x: calc(var(--vw) * .06); --y: calc(var(--vh) * .18); }
  .pile-label { left: 8%; top: 50%; } .pile-label strong { font-size: 2.2rem; }
  .arrow { left: 40%; top: 32%; width: 12%; } .brief { left: 56%; top: 8%; width: 38%; min-width: 0; }
  .lh { left: 3%; width: 54px; }
  .shelves, .scan { display: none; }
  .vis__steps { grid-template-columns: 1fr; gap: 1.2rem; }
  .who__inner { grid-template-columns: 1fr; grid-template-areas: "head" "router" "cta"; }
  .who__router { grid-template-columns: 1fr; } .who__wire { display: none; }
  .who__rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-top: 0; border-bottom: 1px solid rgba(75, 107, 161, .7); margin-bottom: 1.2rem; }
  .tab { grid-template-columns: auto auto; padding: .9rem 1.1rem .9rem .8rem; border-bottom: 0; white-space: nowrap; flex: 0 0 auto; }
  .tab__label { font-size: 1.15rem; } .tab__ar, .tab__hint { display: none; }
  .tab.is-active { box-shadow: inset 0 -3px 0 var(--light); }
  .pages2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sea *, .sea *::before, .sea *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .words .w > span { transform: none; }
  .vis__claim, .vis__text, .step, .beam, .lh, .tab, .who__lede, .who__cta, .who__panel { opacity: 1; transform: none; }
  .step.is-active .step__num::after { opacity: 0; }
  .beam { transform: rotate(-30deg); }
}

/* ======================================================================================
   VARIATION v4 — .vis--pier : the lighthouse without its rock, standing in the water (waves and pier removed)
   ====================================================================================== */
/* v4: the lighthouse fills the left column, centred on the record grid (grid spans ~5%..87% of the water's height) */
.vis--pier .lh { left: 8.5%; bottom: 24%; width: auto; height: 68%; z-index: 6; }
.vis--pier .glint { top: auto; bottom: -11%; height: 70%; }   /* centre of the glow (35% up its box) = the tower base at 24% */
@media (max-width: 960px) { .vis--pier .lh { left: 4%; width: auto; height: 40%; bottom: 2%; } }
@media (max-width: 960px) { .caption { font-size: .56rem; left: calc(var(--lx, 12%) + 1.2rem); } }

/* ======================================================================================
   SECTION C — the atlas, continuing the sea. Its own styles live in atlas.css; this only blends the join.
   ====================================================================================== */
.sea--atlas { background: var(--night); padding-bottom: 0; }
.sea--atlas .mcro-atlas { background: transparent; }
.sea--atlas .mcro-atlas__stage { background: transparent; }
.sea--atlas .mcro-atlas__footer { border-top: 0; background: transparent; }
/* no darkening overlays on the map: they made a visible edge against the section above */
.sea--atlas .mcro-atlas__svg rect[fill^="url(#mcro-atlas-fade"] { display: none; }
/* the copy is a PANEL floating top-right over the map (over Asia, where there are no pins): hair-thin border,
   dark translucent fill with the land faintly through it, generous padding, right-aligned, a rule above the legend */
.sea--atlas { padding-top: clamp(1rem, 2vw, 2rem); }
.sea--atlas .mcro-atlas__stage { max-width: none; }
.sea--atlas .mcro-atlas__copy { position: absolute; z-index: 3; top: clamp(1.5rem, 3vw, 3rem); right: clamp(1.5rem, 3vw, 3rem); left: auto; width: clamp(22rem, 29vw, 31rem); max-width: calc(100% - 3rem);
  padding: clamp(2rem, 3vw, 2.8rem) clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.4rem, 2vw, 1.8rem); text-align: right; pointer-events: auto;
  background: rgba(5, 16, 45, .84); border: 1px solid rgba(219, 232, 242, .13);
  box-shadow: 0 30px 80px -30px rgba(1, 8, 25, .8), inset 0 0 120px rgba(5, 16, 45, .5); }
.sea--atlas .mcro-atlas__eyebrow { justify-content: flex-end; font-size: .72rem; }
.sea--atlas .mcro-atlas__title { margin: 1rem 0 0; text-transform: uppercase; font-size: clamp(2.6rem, 4.3vw, 4.6rem); line-height: .9; letter-spacing: -.005em; }
.sea--atlas .mcro-atlas__lede { margin: 1.2rem 0 0 auto; max-width: none; font-size: .95rem; line-height: 1.5; }
.sea--atlas .mcro-atlas__filters { justify-content: flex-end; margin-top: 1.6rem; gap: .6rem; }
.sea--atlas .mcro-atlas__chip { padding: .62rem 1.15rem; font-size: .76rem; }
.sea--atlas .mcro-atlas__legend { justify-content: flex-end; margin: 1.4rem calc(-1 * clamp(1.6rem, 2.6vw, 2.4rem)) 0; padding: 1.1rem clamp(1.6rem, 2.6vw, 2.4rem) 0; border-top: 1px solid rgba(219, 232, 242, .13); font-size: .7rem; }
@media (max-width: 960px) {
  .sea--atlas .mcro-atlas__copy { position: static; width: auto; text-align: left; margin: 0 clamp(1rem, 4vw, 2rem) 1rem; padding: 1.6rem 1.4rem 1.2rem; }
  .sea--atlas .mcro-atlas__eyebrow, .sea--atlas .mcro-atlas__filters, .sea--atlas .mcro-atlas__legend { justify-content: flex-start; }
  .sea--atlas .mcro-atlas__lede { margin-left: 0; }
  .sea--atlas .mcro-atlas__legend { margin-left: -1.4rem; margin-right: -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem; }
}
}
.sea--atlas .mcro-atlas__land { opacity: .9; }
.sea--atlas .mcro-atlas__ocean { fill: transparent; }   /* the map floats on the section's own sea: no box */


/* ======================================================================================
   SECTION 0 — the beacon statement. Pinned while the reader scrolls THROUGH it; the reading position advances
   smoothly with the wheel and every line's colour is blended by its distance from it (v3.js sets --lit per line).
   ====================================================================================== */
.beacon { position: relative; background: #f8f5ed; font-family: var(--font-body); --step: 150px; }
.beacon__inner { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; box-sizing: border-box; padding: 0 clamp(1.25rem, 5vw, 4rem); }   /* same gutter as every section below */
.beacon__inner > * { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; }

.beacon__label { display: flex; align-items: center; gap: .7rem; margin: 0 auto; color: var(--blue); font: 700 .68rem/1 var(--font-body); letter-spacing: .19em; text-transform: uppercase; }
.beacon__label::before { content: ""; width: 2rem; height: 1px; background: var(--light); }
.beacon__title { position: relative; margin-top: 1.3rem; font-family: var(--font-display); font-size: clamp(3.4rem, 7.25vw, 8.7rem); font-weight: 600; line-height: .86; letter-spacing: -.035em; }
.beacon__seg { display: block; --lit: 0; color: color-mix(in oklab, var(--blue) calc(var(--lit) * 100%), #a3b0bc); transform: translateX(calc(var(--lit) * .06em)); will-change: color, transform; }
/* the reading light: a short yellow bar that slides down the left edge with the reading position */
.beacon__mark { position: absolute; left: calc(-1 * clamp(1.25rem, 5vw, 4rem) + .8rem); top: 0; width: .4rem; height: 2.2rem; border-radius: 2px; background: var(--light); box-shadow: 0 0 18px rgba(251, 181, 42, .6); transform: translateY(var(--y, 0px)); opacity: 0; transition: opacity .4s var(--ease); }
.beacon.is-reading .beacon__mark { opacity: 1; }
@media (max-width: 767px) {
  .beacon { --step: 120px; }
  .beacon__title { font-size: clamp(3.1rem, 16vw, 6rem); }
  .beacon__mark { display: none; }
}
@media (prefers-reduced-motion: reduce) { .beacon__seg { transform: none; } }

/* ======================================================================================
   HERO — ported from Replit's Homepage.tsx (.mcro-hero-*, .mcro-pill, Tailwind utilities translated)
   ====================================================================================== */
.hero { background: var(--paper); font-family: var(--font-body); }
.hero__card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100dvh; overflow: hidden; padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 4rem); background: #101a20; }   /* same gutter as every section below */
.hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.7); }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(3, 22, 53, .296) 0%, rgba(3, 22, 53, .192) 42%, rgba(3, 22, 53, .04) 100%), linear-gradient(180deg, rgba(3, 22, 53, .048) 0%, rgba(3, 22, 53, .028) 55%, rgba(3, 22, 53, .192) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; text-align: left; }
.hero__pill { display: inline-flex; align-items: center; gap: .65rem; padding: .65rem 1rem; border: 1px solid rgba(219, 232, 242, .55); border-radius: 999px; color: var(--paper); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero__title { margin: 2rem 0 0; color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: clamp(3.75rem, 9vw, 9.6rem); line-height: .84; letter-spacing: -.03em; }
.hero__title span { color: var(--light); }
.hero__lede { max-width: 42rem; margin: 2rem 0 0; color: var(--pale); font-size: 1.25rem; line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.hero__btn { display: inline-flex; align-items: center; gap: .6rem; padding: .875rem 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: transform .2s var(--ease), color .2s, border-color .2s; }
.hero__btn--primary { background: var(--light); color: var(--ink); }
.hero__btn--primary:hover { transform: translateY(-2px); }
.hero__btn--ghost { border: 1px solid var(--mist); color: var(--paper); }
.hero__btn--ghost:hover { border-color: var(--light); color: var(--light); }
.hero__foot { position: absolute; left: max(clamp(1.25rem, 5vw, 4rem), calc((100% - 1320px) / 2)); right: max(clamp(1.25rem, 5vw, 4rem), calc((100% - 1320px) / 2)); bottom: 1.25rem; z-index: 2; display: none; align-items: flex-end; justify-content: space-between; color: var(--mist); font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
@media (min-width: 640px) { .hero__foot { display: flex; } }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero__card { background: #101a20 url("assets/images/mcro-hero-video-first-frame.jpg") center / cover; } }

/* ======================================================================================
   THE BEACON STAGE (the letter fall and the soft fade are gone; their rules were removed in the 2026-10-16 clean-up)
   ====================================================================================== */
/* the stage: the beacon's pinned viewport. Cream lives on the stage so hiding it reveals the section beneath. */
.beacon { background: transparent; z-index: 2; }
html { overflow-anchor: none; }                                             /* scroll anchoring fights pinned layouts: a refresh would move the page */
.beacon__inner { background: #f8f5ed; transition: opacity .12s; }
.beacon__inner > .beacon__title { z-index: 4; }                             /* the statement sits above the rising night (it has faded out before the night reaches it) */
/* A resting fall letter sat 2-4 px past the right edge on phones; clip it sideways only */
.beacon__inner { overflow-x: clip; }

/* the headline block sits clear of the fixed header, the same on the stage and in the section */
:root { --vis-top: max(calc(var(--header-h, 76px) + 4.5rem), 17vh); }
.vis { padding-top: var(--vis-top); }

/* the cue: a pulsing gold arrow under pillar 1, pointing up at it, until something is clicked */
.step__cue { position: absolute; left: 0; top: 100%; display: flex; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--light); font: 700 .8rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; pointer-events: none; animation: cue-pulse 1.6s ease-in-out infinite; }
.step__cue svg { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(251, 181, 42, .8)); animation: cue-bob 1.6s ease-in-out infinite; }
.vis.has-picked .step__cue { display: none; }
@keyframes cue-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cue-bob { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .step__cue, .step__cue svg { animation: none; } }
@media (max-height: 980px) { :root { --vis-top: calc(var(--header-h, 76px) + 2.2rem); } }

/* full-viewport sections: nothing of the next section shows while you are on them */
.who { box-sizing: border-box; min-height: 100vh; display: grid; align-content: center; }
.who__inner { width: 100%; }
.sea--atlas { box-sizing: border-box; min-height: 100vh; display: grid; align-content: center; }

/* who it is for: the module on the right is the size of the space it sits in */
@media (min-width: 901px) {
  .who__inner { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  .who__router { grid-template-columns: minmax(200px, .8fr) 64px minmax(0, 1.65fr); }
  .card { padding: clamp(1.8rem, 3.2vw, 2.8rem); min-height: clamp(460px, 58vh, 720px); }
  .card.is-active { display: flex; }
  .card__kicker { font-size: .72rem; }
  .card__promise { margin-top: 1rem; max-width: 24ch; font-size: clamp(1.7rem, 2.4vw, 2.5rem); }
  .card__mock { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 2rem; }
  .recc { padding: 1.4rem 1.5rem; } .recc__meta { font-size: .68rem; } .recc__title { margin-top: .7rem; font-size: 1.45rem; } .recc__cite { margin-top: 1.1rem; padding: .8rem .9rem; font-size: .86rem; } .recc__cite button { font-size: .7rem; padding: .5rem .8rem; }
  .pages2 { gap: 1.6rem; } .page { padding: 1.2rem 1.2rem 1.3rem; } .page em { font-size: .66rem; } .page strong { margin-top: .6rem; font-size: 1.35rem; } .page .ln { height: 7px; margin-top: .7rem; } .page .pg { font-size: 1.1rem; }
  .ledger { height: 100%; align-content: space-evenly; gap: 0; } .ledger__row { font-size: 1.15rem; } .ledger__bar { height: 14px; }
}

/* version B of the home page: no lighthouse. The records and the pillar scenes stay. */
.no-lh .lh, .no-lh .beam, .no-lh .scan, .no-lh .glint, .no-lh .caption { display: none !important; }

/* version B: with no lighthouse, the three record columns start at the left edge and grow to fill the ocean */
@media (min-width: 901px) {
  .no-lh .rec { width: 28%; min-width: 220px; padding: 1rem 1.15rem 1.05rem; }
  .no-lh .rec b { font-size: 1.05rem; }
  .no-lh .ocean[data-state="find"] .rec, .no-lh .ocean[data-state="credit"] .rec { --x: calc((var(--gx) - var(--vw) * .34) * 1.55 + var(--vw) * .02); }
  .no-lh .shelf { left: calc((var(--vw) * var(--c) - var(--vw) * .34) * 1.55 + var(--vw) * .02); width: 28%; min-width: 220px; }
}

/* laptop heights: a shorter headline block */
@media (min-width: 901px) and (max-height: 1100px) {
  :root { --vis-top: calc(var(--header-h, 76px) + 1.4rem); }
}

/* version B, the brief scene: stack on the left third, the tally under it, the arrow across the middle, the brief page on the right */
@media (min-width: 901px) {
  .no-lh .ocean[data-state="brief"] .rec { --x: calc(var(--px) - var(--vw) * .33); --y: calc(var(--py) - var(--vh) * .14); width: 26%; }
  .no-lh .pile-label { left: 7%; top: 46%; }
  .no-lh .pile-label strong { font-size: 3.6rem; }
  .no-lh .arrow { left: 37%; top: 30%; width: 12%; }
  .no-lh .brief { left: 52%; top: 5%; width: 32%; aspect-ratio: 1 / 1; padding: 1.4rem 1.5rem; }
  .no-lh .brief strong { font-size: 1.5rem; }
  .no-lh .brief .ln { height: 7px; margin-top: .75rem; }
  .no-lh .brief .pages { font-size: 3.2rem; }
}

/* version B, the dark ocean: the scattered records are spread across the whole width and centred (no lighthouse to leave room for) */
@media (min-width: 901px) {
  .no-lh .ocean[data-state="dark"] .rec { --x: calc((var(--sx) - var(--vw) * .22) * 1.1 + var(--vw) * .04); }
}

/* who it is for: the three columns use the full height of the module */
@media (min-width: 901px) {
  .who__inner { align-items: stretch; grid-template-rows: auto minmax(0, 1fr); }
  .who__head { align-self: start; }
  .who__title { max-width: 9ch; font-size: clamp(3.2rem, 6.6vw, 6rem); }
  .who__lede { max-width: 26rem; font-size: 1.12rem; }
  .who__cta { align-self: end; margin: 0 0 .4rem; font-size: 1rem; }
  .who__router { align-items: stretch; }
  .who__rail { height: 100%; }
  .tab { flex: 1 1 0; align-content: center; padding: 1.1rem 1rem 1.1rem 0; }
  .tab__label { font-size: clamp(1.8rem, 2.3vw, 2.3rem); }
  .tab__hint { font-size: .95rem; } .tab.is-active .tab__hint { max-height: 6rem; }
  .who__wire { align-self: stretch; }
  .who__panel { align-self: stretch; }
  .card__mock .ledger { flex: 1; display: grid; align-content: space-evenly; gap: 0; }
  .card__mock .pages2, .card__mock .recc { align-self: center; width: 100%; }
}

@media (min-width: 901px) {
  .who__panel { height: auto !important; }                 /* the panel fills its row; the script no longer sizes it to the active card */
  .card.is-active { align-self: stretch; min-height: 0; }
}

/* Repair the small-screen stage and router without changing their visual language.
   Absolute ocean cards cannot give an auto-height grid row any intrinsic height. */
@media (max-width: 960px) {
  .who__inner { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "router" "cta"; }
  .who__router { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; min-height: 0; }
  .who__rail { grid-row: 1; height: auto; min-width: 0; }
  .who__wire { display: none; }
  .who__panel { grid-row: 2; align-self: start; height: auto !important; }
  .who .card { min-height: 0; padding: 1.25rem; }
  .who .card.is-active { align-self: start; }
  .who .card__mock { flex: none; }
  .who .pages2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .who .page { min-width: 0; aspect-ratio: auto; min-height: 175px; padding: .8rem .7rem 1.5rem; }
  .who .page strong { font-size: 1rem; }
  .who .search__bar { flex-wrap: wrap; line-height: 1.3; }
}
@media (hover: none) and (pointer: coarse) {
  .hero__card, .beacon__inner { min-height: 100svh; }
}
@media (min-width: 961px) {
  .vis__ocean .brief { max-height: calc(84% - 24px); }
  .no-lh .vis__ocean .brief { max-height: calc(95% - 24px); }
}

/* ======================================================================================
   SECTION A2 — #found: the three pillars, and the research they find (reviewers 2026-10-15)
   A plain section after the lighthouse story: no pin, no scrub, native scroll. Every pillar and record is real text.
   Motion, once per item: the pillars rise in turn and their rules draw across; each shelf rises, one soft band of
   light passes over it, and each record it passes gets its check. v3.js adds is-armed, so nothing hides without JS,
   and nothing moves with reduced motion (the .sea rule above stops every transition and animation).
   ====================================================================================== */
.found { box-sizing: border-box; min-height: 100vh; display: grid; align-content: center; padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 8vw, 6.5rem); }
.found__inner { position: relative; z-index: 3; width: 100%; max-width: 1320px; margin: 0 auto; }
.found .reveal { opacity: 1; transform: none; }                                 /* site.css hides every .reveal; here only is-armed may */
.found.is-armed .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* the three pillars */
.found__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem clamp(1.5rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.found .found__step { transition-delay: calc(var(--i, 0) * 120ms); }
.found__num { display: flex; align-items: center; gap: .9rem; font: 600 1.3rem/1 var(--font-display); letter-spacing: .04em; color: var(--light); }
.found__num::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(251, 181, 42, .7), rgba(135, 165, 196, .2)); transform-origin: left; transition: transform 1s var(--ease); transition-delay: calc(.3s + var(--i, 0) * .2s); }
.found.is-armed .found__step:not(.is-in) .found__num::after { transform: scaleX(0); }
.found__step h3 { margin: .9rem 0 0; font: 600 clamp(1.75rem, 2.3vw, 2.2rem)/1.05 var(--font-display); color: var(--paper); }
.found__step p { margin: .7rem 0 0; max-width: 36ch; font-size: 1rem; line-height: 1.65; color: #bfd0df; }

@media (max-width: 900px) {
  .found { min-height: 0; padding: 4rem clamp(1rem, 4vw, 1.6rem) 3.5rem; }
  .found__steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .found__step p { max-width: 42ch; }
}

/* ======================================================================================
   SECTIONS 3-5 REVIEW (2026-10-15): one motion language for the lighthouse story, the pillars and "Who it is for":
   things rise into place once, and the light marks what matters. Readable sizes (no text under 12px), all four
   audiences on screen on a phone, 44px tap targets, and no endless motion beside the text. No wording changed.
   ====================================================================================== */
/* readable labels (site.css sets .eyebrow after this file, so this is scoped to win; the #field, #found and #audiences labels: end of file) */
#audiences .eyebrow { font-size: .75rem; }

/* who it is for: the open card already says its promise in large type, so the tab no longer repeats it. The arrow went
   too: a tab opens a card, not a page, and the light on the wire already runs from the tab to its card (v3.js). */
.tab__hint, .tab__ar { display: none; }
.tab__idx { font-size: .85rem; }
/* the same entrance as the pillars above: rise once (no sideways slide, no scale) */
.tab { transform: translateY(14px); }
.who__panel { transform: translateY(18px); }
.is-in .tab, .is-in .who__panel { transform: none; }
/* the small screens inside the cards: readable, and nothing looks clickable that is not */
.card__kicker { font-size: .75rem; }
.chips span, .search__bar .go, .search__or, .recc__meta, .recc__cite button, .page em { font-size: .75rem; }
.note, .search__drop small { font-size: .8rem; }
.search__drop:hover { background: rgba(251, 181, 42, .05); border-color: rgba(251, 181, 42, .6); }
/* the typing caret blinks three times when its card opens, then holds still */
.search__bar .q::after { animation: none; }
.card.is-active .search__bar .q::after { animation: caret 1s steps(2) 3; }
/* the timer line shows only while the cards turn by themselves (v3.js: with a mouse, once round) */
.who__router:not(.is-auto) .who__progress { display: none; }
/* "The library": a 44px tap target, same look */
.who__cta { min-height: 44px; padding: .6rem 0; }
/* a card never grows past its box: the citation's long web address wraps (it pushed card 03 53px wide at 320px) */
.who__panel { grid-template-columns: minmax(0, 1fr); }
.recc__cite span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .who__title { max-width: none; }                        /* "Who it is for" on one line, not "Who it is / for" */
  .recc__cite { font-size: .8rem; }
  /* all four audiences on screen at once: a 2 x 2 grid of tiles, in place of a sideways strip that hid two of them */
  .who__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .5rem; overflow: visible; border: 0; margin-bottom: .9rem; }
  .tab { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: center; row-gap: .3rem; min-height: 64px; padding: .7rem .85rem; border: 1px solid rgba(75, 107, 161, .7); border-radius: 6px; background: rgba(7, 31, 75, .55); white-space: normal; }
  .tab__label { font-size: 1.12rem; line-height: 1.05; }
  .tab.is-active { box-shadow: none; border-color: var(--light); background: rgba(251, 181, 42, .08); }
  .tab.is-active .tab__label { transform: none; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab, .who__panel { transform: none; }
}
/* ===== Sections 3-5 flow (2026-10-15): one head system. Each section = a headline that states
   its point + one subheading. Scoped to body.flow-345 (index.html only), so index-b / index-lighthouse keep their look.
   :where() keeps the specificity of a plain class, so the section 3 landing rules above still apply. ===== */
:where(.flow-345) .w-keep { white-space: nowrap; }
:where(.flow-345) .vis__title { max-width: none; font-size: clamp(2.6rem, 4.4vw, 4rem); }   /* the section 4 and 5 size: the longer headline (2026-10-15) keeps "Muslim communities" on one line */
:where(.flow-345) .found__head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem clamp(2rem, 5vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
:where(.flow-345) .found__heading { margin: 0; max-width: none; font-size: clamp(2.6rem, 4.4vw, 4rem); }
:where(.flow-345) .found__heading { color: var(--paper); }   /* NOT .found__title: that is the record card title (above) */
:where(.flow-345) .found__sub { margin: 0; max-width: 34rem; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; color: #d3e0ec; transition: opacity .8s var(--ease) .4s, transform .9s var(--ease) .4s; }
:where(.flow-345) .found.is-armed .found__head:not(.is-in) { opacity: 1; transform: none; }   /* the headline words rise by themselves */
:where(.flow-345) .found.is-armed .found__head:not(.is-in) .found__sub { opacity: 0; transform: translateY(14px); }
:where(.flow-345) .found__cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 1.25rem; padding: .6rem 0; font: 700 1rem/1 var(--font-body); color: var(--light); text-decoration: none; }
@media (max-width: 900px) { :where(.flow-345) .found__head { grid-template-columns: minmax(0, 1fr); } }
/* "The library" link under the steps (#found) is a yellow button (2026-10-15):
   the hero button's look. Hover turns paper, as gi-home's primary button; the arrow still slides. It keeps its own
   reveal transition (.found__cta.reveal outranks site.css .reveal, which loads later). ===== */
:where(.flow-345) .found__cta { min-height: 44px; padding: .875rem 1.5rem; border-radius: 999px; background: var(--light); color: var(--ink); font: 700 1rem/1 var(--font-body); }
:where(.flow-345) .found__cta.reveal { transition: opacity .8s var(--ease), transform .9s var(--ease), background-color .25s, color .25s; }
:where(.flow-345) .found__cta:hover { background: var(--paper); color: var(--ink); }
:where(.flow-345) .found__cta .ar { display: inline-block; transition: transform .4s var(--ease-spring); }
:where(.flow-345) .found__cta:hover .ar { transform: translateX(6px); }
:where(.flow-345) .found__cta:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
/* ===== #found without the records (the client removed them, 2026-10-15): the answer, how, then go. The section
   fits its content (no longer a full screen). On wide screens the three numbers sit on one line of light that
   brightens step by step and ends at "The library" button, which glows once when the line reaches it. Under 1101px
   the steps keep their own rules and the button sits below them. The shelf rules were removed in the 2026-10-16 clean-up. ===== */
:where(.flow-345) .found { min-height: 0; padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
:where(.flow-345) .found__inner { --fgap: clamp(1.5rem, 4vw, 4rem); }
:where(.flow-345) .found__steps { column-gap: var(--fgap); }
:where(.flow-345) .found__cta { margin-top: 2.5rem; }
@media (min-width: 1101px) {
  :where(.flow-345) .found__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "steps cta"; column-gap: var(--fgap); align-items: start; }
  :where(.flow-345) .found__head { grid-area: head; }
  :where(.flow-345) .found__steps { grid-area: steps; }
  :where(.flow-345) .found__cta { grid-area: cta; margin-top: calc(.65rem - 22px); }   /* the button's middle on the line (the number is 1.3rem tall) */
  :where(.flow-345) .found__num::after { margin-right: calc(.9rem - var(--fgap)); height: 2px;   /* each rule runs on through the gap to the next number; the third runs to the button */
    background: linear-gradient(90deg, rgba(251, 181, 42, calc(.22 + var(--i, 0) * .22)), rgba(251, 181, 42, calc(.44 + var(--i, 0) * .22)));
    transition: transform .55s cubic-bezier(.45, 0, .55, 1); transition-delay: calc(.35s + var(--i, 0) * .45s); }   /* drawn one after another, left to right */
  :where(.flow-345) .found.is-armed .found__cta.is-in { animation: found-arrive 1.2s ease-out 1.75s 1 both; }   /* when the line arrives: .35 + 2 x .45 + .55 s. Reduced motion: the .sea rule stops it */
}
@keyframes found-arrive { 0% { box-shadow: 0 0 0 0 rgba(251, 181, 42, .55); } 100% { box-shadow: 0 0 0 16px rgba(251, 181, 42, 0); } }
/* ===== "The challenge" and "The solution" (2026-10-15): sections 3 and 4 each read as their own section.
   Each headline opens with a label, the same label as "Four ways in" further down (it prints in capitals). A thin blue
   line opens section 4 (blue: the line is not the light). The label in section 4 spans both columns of its head. ===== */
:where(.flow-345) #field .eyebrow, :where(.flow-345) #found .eyebrow { font-size: .75rem; }
:where(.flow-345) .found__head > .eyebrow { grid-column: 1 / -1; margin-bottom: calc(1.1rem - 1.25rem); }   /* 1.1rem to the headline, as in section 3 (the head's row gap is 1.25rem) */
:where(.flow-345) .found { padding-top: clamp(2rem, 3vw, 2.5rem); }
:where(.flow-345) .found__head { padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid rgba(159, 182, 204, .22); }
/* ===== The challenge and the solution, redesigned (2026-10-15: the challenge gets its
   own screen and the solution shows only after a scroll). One idea across the two sections: scattered, then gathered.
   Section 3 fills the screen: the headline on the left; on the right the three problems as glass cards, thrown at
   angles; loose pages in the water behind. Section 4 fills the next screen: three cards again, now in one straight
   row, each lit from above. Motion: each card flies in once (v3.js mountAssemble adds is-set, per card); the loose
   pages and the section 3 cards drift with the scroll only, never by themselves; the scroll cue runs 3 times. Without
   JS, or with reduced motion, every card shows in its final place. This replaces the thin blue line that opened #found.
   rotate = a card's resting angle, transform = its fly-in, translate = its scroll drift: three properties, no clash. ===== */
/* section 3: one full screen. #field.vis.vis--pier outranks mobile-ocean.css (#field.mobile-vignette), which loads later.
   overflow: clip, not hidden: hidden makes the section a scroll box, and the scroll drift below would never run. */
:where(.flow-345) #field.vis.vis--pier { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; overflow: clip;
  view-timeline: --field block;
  padding: calc(var(--header-h, 76px) + clamp(1.5rem, 4vh, 3rem)) clamp(1.25rem, 5vw, 4rem) clamp(4.5rem, 11vh, 6.5rem); }
:where(.flow-345) #field .vis__inner { width: 100%; }
:where(.flow-345) #field.vis--pier div.vis__story { padding-top: 0; }   /* homepage-review.css adds .75rem for the old layout */
:where(.flow-345) #field .vis__title { font-size: clamp(2.6rem, 5vw, 4.9rem); }
@media (min-width: 961px) {
  :where(.flow-345) #field .vis__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head story"; align-items: center; gap: 2.5rem clamp(2rem, 5vw, 5.5rem); }
}
/* the three problems: glass cards on a 12-column grid, each offset and tilted */
:where(.flow-345) #field .vis__frags { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(.9rem, 2.2vh, 1.5rem); margin: 0; }
:where(.flow-345) #field .vis__frag { --fr: -3deg; --ex: -70px; --ey: 40px; --er: -11deg; --gx: -46px; --gy: -24px;
  grid-column: 1 / 10; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: 1.25rem 1.6rem 1.3rem 1.2rem; border: 1px solid rgba(159, 182, 204, .2); border-radius: 16px;
  background: linear-gradient(160deg, rgba(22, 69, 141, .55), rgba(7, 31, 75, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 28px 50px -24px rgba(3, 10, 31, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: clamp(1.08rem, 1.45vw, 1.35rem); line-height: 1.45; color: #b9cadb;
  rotate: var(--fr); transition: opacity .9s var(--ease), transform 1.3s var(--ease), filter .9s var(--ease); transition-delay: calc(.15s + var(--i, 0) * 150ms); }
:where(.flow-345) #field .vis__frag:nth-child(2) { --fr: 2.4deg; --ex: 80px; --ey: 30px; --er: 12deg; --gx: 56px; --gy: -60px; grid-column: 4 / 13; }
:where(.flow-345) #field .vis__frag:nth-child(3) { --fr: -1.5deg; --ex: -30px; --ey: 90px; --er: -7deg; --gx: -18px; --gy: -100px; grid-column: 2 / 11; }
:where(.flow-345) #field .vis__frag b { font-weight: 600; color: var(--paper); }
:where(.flow-345) #field .vis__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(135, 165, 196, .28); border-radius: 12px; background: rgba(3, 10, 31, .42); color: var(--mist); }
:where(.flow-345) #field .vis__icon svg { width: 1.3rem; height: 1.3rem; }
:where(.flow-345) #field .vis__frags.is-armed .vis__frag:not(.is-set) { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(.92); filter: blur(8px); }
/* loose pages behind the cards: faint outlines with a few lines of "text" */
:where(.flow-345) .vis__slips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
:where(.flow-345) .vis__slips i { position: absolute; left: var(--x); top: var(--y); width: calc(54px * var(--s)); aspect-ratio: 54 / 70; border: 1px solid rgba(159, 182, 204, .2); border-radius: 4px; opacity: .5; rotate: var(--r);
  background: repeating-linear-gradient(180deg, rgba(159, 182, 204, .24) 0 1px, transparent 1px 7px) 50% 30% / 62% 52% no-repeat, linear-gradient(160deg, rgba(22, 69, 141, .3), rgba(7, 31, 75, .3)); }
/* the scroll cue: a short line at the bottom; a dot runs down it 3 times, then the line stays */
:where(.flow-345) #field .vis__cue { position: absolute; left: 50%; bottom: clamp(1.1rem, 3vh, 2rem); z-index: 3; width: 7px; height: 3.25rem; margin-left: -3.5px; overflow: hidden; }
:where(.flow-345) #field .vis__cue::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(219, 232, 242, 0), rgba(219, 232, 242, .45)); }
:where(.flow-345) #field .vis__cue i { position: absolute; left: 1px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--paper); opacity: 0; }
:where(.flow-345) #field .vis__cue.is-set i { animation: cue-fall 1.6s var(--ease) .8s 3 both; }
@keyframes cue-fall { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(3.25rem); opacity: 0; } }
/* scroll drift (browsers with scroll timelines; the others simply hold still): as section 3 leaves, its cards drift
   further apart and the loose pages move at their own depths */
@supports (animation-timeline: view()) {
  :where(.flow-345) .vis__slips i { animation: slip-drift linear both; animation-timeline: --field; animation-range: cover 0% cover 100%; }
  @keyframes slip-drift { from { translate: 0 calc(var(--d) * 50px); } to { translate: 0 calc(var(--d) * -90px); } }
}
@media (min-width: 961px) {
  @supports (animation-timeline: view()) {
    :where(.flow-345) #field .vis__frag { animation: frag-scatter linear both; animation-timeline: --field; animation-range: exit 0% exit 100%; }
    @keyframes frag-scatter { to { translate: var(--gx) var(--gy); rotate: calc(var(--fr) * 2.4); } }
  }
}
@media (max-width: 960px) {
  :where(.flow-345) #field .vis__frags { row-gap: .85rem; }
  :where(.flow-345) #field .vis__frag { --fr: -1.6deg; grid-column: 1 / 12; font-size: 1.05rem; padding: 1rem 1.15rem 1.05rem .95rem; gap: .85rem; }
  :where(.flow-345) #field .vis__frag:nth-child(2) { --fr: 1.4deg; grid-column: 2 / 13; }
  :where(.flow-345) #field .vis__frag:nth-child(3) { --fr: -.8deg; grid-column: 1 / 12; }
  :where(.flow-345) #field .vis__icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; }
  :where(.flow-345) #field .vis__icon svg { width: 1.15rem; height: 1.15rem; }
  :where(.flow-345) #field .vis__frag, :where(.flow-345) #field .vis__frag:nth-child(n) { --ex: 0px; --ey: 46px; --er: 0deg; transition-delay: .1s; }   /* one column: each card rises as it comes into view */
  :where(.flow-345) .vis__slips i:nth-child(n+7) { display: none; }
  :where(.flow-345) #field .vis__cue { display: none; }
  :where(.flow-345) #field.vis.vis--pier { padding-bottom: 3.5rem; }
}

/* section 4: the next full screen. The same cards, now in one straight row and lit from above */
:where(.flow-345) .found { min-height: 100vh; min-height: 100svh; display: grid; align-content: center;
  padding: calc(var(--header-h, 76px) + clamp(1.5rem, 4vh, 3rem)) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 5.5rem); }
:where(.flow-345) .found::before { content: ""; position: absolute; inset: 0 0 auto; height: 75%; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, rgba(251, 181, 42, .11), rgba(251, 181, 42, .03) 45%, transparent 75%); }   /* the light, from above */
:where(.flow-345) .found__inner { display: flex; flex-direction: column; align-items: center; }
:where(.flow-345) .found__head { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: clamp(2.25rem, 6vh, 4rem); padding-top: 0; border-top: 0; text-align: center; }
:where(.flow-345) .found__head > .eyebrow { margin: 0 0 1.1rem; }
:where(.flow-345) .found__head > .eyebrow::after { content: ""; width: 1.4rem; height: 2px; background: var(--light); }
:where(.flow-345) .found__heading { font-size: clamp(2.6rem, 5vw, 4.9rem); }
:where(.flow-345) .found__sub { margin-top: 1.25rem; max-width: 44rem; }
:where(.flow-345) .found__steps { width: 100%; max-width: 1180px; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
:where(.flow-345) .found .found__step { --ex: 0px; --ey: 60px; --er: 0deg; position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.3rem, 2vw, 1.9rem) clamp(1.5rem, 2.4vw, 2rem); border: 1px solid rgba(159, 182, 204, .18); border-radius: 18px;
  background: linear-gradient(170deg, rgba(22, 69, 141, .5), rgba(7, 31, 75, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 34px 60px -30px rgba(3, 10, 31, .95);
  transition: opacity .9s var(--ease), transform 1.3s var(--ease), filter .9s var(--ease); transition-delay: .1s; }
:where(.flow-345) .found__step > * { position: relative; z-index: 1; }
/* the light on each card: a beam along its top edge, and its glow falling into the card */
:where(.flow-345) .found__step::before { content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0));
  box-shadow: 0 0 18px 1px rgba(251, 181, 42, .5); transition: transform .9s var(--ease), opacity .9s var(--ease); transition-delay: .7s; }
:where(.flow-345) .found__step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(85% 55% at 50% 0%, rgba(251, 181, 42, .12), transparent 70%); transition: opacity 1.4s var(--ease); transition-delay: .85s; }
:where(.flow-345) .found__steps.is-armed .found__step:not(.is-set) { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(.94); filter: blur(6px); }
:where(.flow-345) .found__steps.is-armed .found__step:not(.is-set)::before { transform: scaleX(0); opacity: 0; }
:where(.flow-345) .found__steps.is-armed .found__step:not(.is-set)::after { opacity: 0; }
:where(.flow-345) .found__num { display: inline-flex; padding: .4rem .65rem .3rem; border: 1px solid rgba(251, 181, 42, .35); border-radius: 999px; background: rgba(251, 181, 42, .06); font-size: .95rem; letter-spacing: .14em; }
:where(.flow-345) .found__num::after { display: none; }   /* the line of light now runs along each card's top */
:where(.flow-345) .found__step h3 { margin-top: 1.15rem; }
:where(.flow-345) .found__step p { max-width: none; color: #c3d3e2; }
:where(.flow-345) .found__cta { align-self: center; margin-top: clamp(2rem, 5vh, 3rem); }
:where(.flow-345) .found.is-armed .found__cta.is-in { animation: found-arrive 1.2s ease-out .5s 1 both; }
@media (min-width: 901px) {
  :where(.flow-345) .found__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
  /* from scattered to one straight row, one after another: the same tilts as the cards in section 3 */
  :where(.flow-345) .found .found__step { --ex: -50px; --ey: 90px; --er: -8deg; transition-delay: calc(var(--i, 0) * 150ms); }
  :where(.flow-345) .found .found__step:nth-child(2) { --ex: 0px; --ey: 130px; --er: 5deg; }
  :where(.flow-345) .found .found__step:nth-child(3) { --ex: 50px; --ey: 90px; --er: -4deg; }
  :where(.flow-345) .found__step::before { transition-delay: calc(.9s + var(--i, 0) * .25s); }
  :where(.flow-345) .found__step::after { transition-delay: calc(1.05s + var(--i, 0) * .25s); }
  :where(.flow-345) .found.is-armed .found__cta.is-in { animation-delay: 2.1s; }   /* when the third beam is lit */
}
@media (max-width: 767px) {
  :where(.flow-345) .found__head { align-items: flex-start; text-align: left; }
  :where(.flow-345) .found__head > .eyebrow::after { display: none; }
  :where(.flow-345) .found__cta { align-self: flex-start; }
}
/* ===== "Who it is for", redesigned (2026-10-16): the same logic as sections 3 and 4. "The light finds
   you": one full screen; the four readers are glass cards that fly in once; a ray of light runs from the chosen card to
   one large glass stage that shows what that reader finds. v3.js mountWho5 adds is-armed (transitions off for that one
   frame, so nothing fades OUT first), then is-set when the section comes into view. Without JS, or with reduced motion,
   every card shows in its final place and without JS every panel shows. Phones: the four cards are a 2 x 2 grid of
   tiles, no ray, and the section is kept short. Every class is who5__, so the .who rules above (still used
   by index-b and index-lighthouse) never reach it. .who5.sea outranks .sea + .sea. ===== */
:where(.flow-345) .who5.sea { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; overflow: clip;
  padding: calc(var(--header-h, 76px) + clamp(1.5rem, 4vh, 3rem)) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 5rem);
  background: linear-gradient(180deg, var(--night) 0%, var(--navy) 42%, var(--night) 100%); view-timeline: --who5 block; }
/* the lighthouse beam: a faint wedge of light from the top left; it swings into place as the section scrolls in (scroll-linked only) */
:where(.flow-345) .who5__sweep { position: absolute; inset: 0; pointer-events: none; transform-origin: 6% -12%;
  background: conic-gradient(from 112deg at 6% -12%, transparent 0deg, rgba(251, 181, 42, .05) 8deg, rgba(255, 212, 122, .1) 15deg, rgba(251, 181, 42, .05) 22deg, transparent 32deg);
  -webkit-mask-image: radial-gradient(130% 95% at 6% -12%, #000 25%, transparent 78%); mask-image: radial-gradient(130% 95% at 6% -12%, #000 25%, transparent 78%); }
:where(.flow-345) .who5__inner { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; gap: clamp(1.75rem, 4vh, 2.5rem); }
/* the head: the same type as sections 3 and 4 */
:where(.flow-345) .who5__title { margin: 1.1rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.9rem); line-height: .9; letter-spacing: -.01em; color: var(--paper); }
:where(.flow-345) .who5__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
:where(.flow-345) .who5__title .w > span { display: inline-block; transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms + 60ms); }
:where(.flow-345) .who5__lede { margin: 1.25rem 0 0; max-width: 30rem; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; color: #c3d3e2; }
:where(.flow-345) .who5__fade { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
/* the four readers: the loose pages of section 3, now four lit index cards */
:where(.flow-345) .who5__roles { position: relative; z-index: 2; display: grid; gap: .6rem; }
:where(.flow-345) .who5__role { --ex: -40px; --ey: 60px; --er: -7deg; position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  width: 100%; min-height: 60px; margin: 0; padding: .7rem 1.1rem .7rem .8rem; border: 1px solid rgba(159, 182, 204, .16); border-radius: 14px;
  background: linear-gradient(160deg, rgba(22, 69, 141, .3), rgba(7, 31, 75, .52)); color: #b9cadb; font: inherit; text-align: left; cursor: pointer;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease), translate .45s var(--ease), border-color .3s, color .3s, box-shadow .3s;
  transition-delay: calc(.35s + var(--i) * 120ms), calc(.35s + var(--i) * 120ms), calc(.35s + var(--i) * 120ms), 0s, 0s, 0s, 0s; }
:where(.flow-345) .who5__role:nth-child(2) { --ex: 30px; --ey: 80px; --er: 5deg; }
:where(.flow-345) .who5__role:nth-child(3) { --ex: -20px; --ey: 100px; --er: -4deg; }
:where(.flow-345) .who5__role:nth-child(4) { --ex: 40px; --ey: 120px; --er: 6deg; }
:where(.flow-345) .who5__role:hover { border-color: rgba(159, 182, 204, .38); color: var(--paper); }
:where(.flow-345) .who5__idx { display: inline-flex; padding: .36rem .55rem .26rem; border: 1px solid rgba(159, 182, 204, .28); border-radius: 999px; font: 700 .78rem/1 var(--font-body); letter-spacing: .14em; color: var(--mist);
  transition: border-color .3s, color .3s, background-color .3s; }
:where(.flow-345) .who5__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(135, 165, 196, .24); border-radius: 11px; background: rgba(3, 10, 31, .4); color: var(--mist); transition: color .3s; }
:where(.flow-345) .who5__icon svg { width: 1.15rem; height: 1.15rem; }
:where(.flow-345) .who5__label { font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.25; }
:where(.flow-345) .who5__go { width: 1.1rem; height: 1.1rem; color: var(--paper); opacity: 0; translate: -6px 0; transition: opacity .3s, translate .35s var(--ease); }
:where(.flow-345) .who5__role[aria-selected="true"] { border-color: rgba(251, 181, 42, .4); background: linear-gradient(160deg, rgba(22, 69, 141, .64), rgba(7, 31, 75, .86)); color: var(--paper); translate: 8px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 44px -26px rgba(3, 10, 31, .95); }
:where(.flow-345) .who5__role[aria-selected="true"] .who5__idx { border-color: rgba(251, 181, 42, .55); background: rgba(251, 181, 42, .08); color: var(--light); }
:where(.flow-345) .who5__role[aria-selected="true"] .who5__icon { color: var(--paper); }
:where(.flow-345) .who5__role[aria-selected="true"] .who5__go { opacity: 1; translate: 0 0; }
:where(.flow-345) .who5__role:focus-visible, :where(.flow-345) .who5__panel:focus-visible, :where(.flow-345) .who5__cta:focus-visible, :where(.flow-345) .who5__cite button:focus-visible { outline: 2px solid var(--light-soft); outline-offset: 3px; }
/* the light on the chosen card: a beam down its left edge */
:where(.flow-345) .who5__role::before { content: ""; position: absolute; left: -1px; top: 16%; bottom: 16%; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0));
  box-shadow: 0 0 14px 1px rgba(251, 181, 42, .5); transform: scaleY(0); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
:where(.flow-345) .who5.is-hit .who5__role[aria-selected="true"]::before { transform: scaleY(1); opacity: 1; }
/* the ray: from the chosen card across the gap into the stage (v3.js sets --ray-x, --ray-y, --ray-w) */
:where(.flow-345) .who5__ray { position: absolute; z-index: 1; left: var(--ray-x, 0); top: var(--ray-y, 0); width: var(--ray-w, 0); height: 2px; margin-top: -1px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 181, 42, .2), var(--light) 55%, var(--light-soft)); box-shadow: 0 0 16px 1px rgba(251, 181, 42, .45);
  transform-origin: left center; transform: scaleX(0); }
:where(.flow-345) .who5.is-hit .who5__ray { transform: scaleX(1); transition: transform .45s var(--ease); }
/* the stage: one large glass card that shows what the chosen reader finds */
:where(.flow-345) .who5__stage { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.4rem, 2.6vw, 2.4rem); border: 1px solid rgba(159, 182, 204, .18); border-radius: 22px;
  background: linear-gradient(170deg, rgba(22, 69, 141, .5), rgba(7, 31, 75, .8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 70px -34px rgba(3, 10, 31, .95);
  transition: opacity 1s var(--ease) .75s, transform 1.2s var(--ease) .75s, filter 1s var(--ease) .75s; }
:where(.flow-345) .who5__stage > * { position: relative; z-index: 1; }
:where(.flow-345) .who5__stage::before { content: ""; position: absolute; z-index: 2; top: -1px; left: 12%; right: 12%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0));
  box-shadow: 0 0 18px 1px rgba(251, 181, 42, .5); transition: transform .9s var(--ease) 1.45s, opacity .9s var(--ease) 1.45s; }
/* where the ray lands: a warm glow inside the stage at the ray's height, and a short beam on its left edge */
:where(.flow-345) .who5__stage::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 45% at 0% var(--hit-y, 30%), rgba(251, 181, 42, .14), transparent 70%), radial-gradient(85% 50% at 50% 0%, rgba(251, 181, 42, .08), transparent 70%); }
:where(.flow-345) .who5.is-hit .who5__stage::after { opacity: 1; transition: opacity .7s var(--ease) .3s; }
:where(.flow-345) .who5__hit { position: absolute; z-index: 2; left: -1px; top: calc(var(--hit-y, 30%) - 3.5rem); width: 2px; height: 7rem; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 181, 42, 0), var(--light-soft) 50%, rgba(251, 181, 42, 0)); box-shadow: 0 0 14px rgba(251, 181, 42, .5); opacity: 0; transform: scaleY(.2); }
:where(.flow-345) .who5.is-hit .who5__hit { opacity: 1; transform: scaleY(1); transition: opacity .4s .35s, transform .6s var(--ease) .35s; }
/* the panels: only the chosen one shows (v3.js sets hidden); its parts rise in one after another */
:where(.flow-345) .who5__panel { display: flex; flex-direction: column; flex: 1; padding-bottom: clamp(1.1rem, 2.6vh, 1.5rem); border-bottom: 1px solid rgba(159, 182, 204, .14); }
:where(.flow-345) .who5__panel[hidden] { display: none; }   /* an author display beats the hidden attribute */
:where(.flow-345) .who5__panel > * { transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--k, 0) * 90ms); }
:where(.flow-345) .who5__panel.is-enter > * { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: none; }
:where(.flow-345) .who5__kicker { margin: 0; font: 700 .75rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
:where(.flow-345) .who5__promise { margin: .85rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.02; letter-spacing: -.005em; color: var(--paper); }
:where(.flow-345) .who5__mock { margin-top: clamp(1.1rem, 2.6vh, 1.7rem); }
/* 01: the brief, two real pages */
:where(.flow-345) .who5__pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); max-width: 28rem; padding: .3rem .4rem .6rem; }
:where(.flow-345) .who5__page { position: relative; display: flex; flex-direction: column; gap: .45rem; aspect-ratio: 3 / 3.5; padding: 1rem 1rem .85rem; border-radius: 10px;
  background: linear-gradient(170deg, #f8f5ed, #e8e1d0); color: var(--body); box-shadow: 0 26px 40px -22px rgba(3, 10, 31, .9); rotate: -2deg; }
:where(.flow-345) .who5__page + .who5__page { rotate: 2.2deg; translate: 0 10px; }
:where(.flow-345) .who5__page em { font: 700 .62rem/1 var(--font-body); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #5b6e83; }
:where(.flow-345) .who5__page strong { margin-bottom: .2rem; font: 600 1.15rem/1.02 var(--font-display); color: var(--ink); }
:where(.flow-345) .who5__page--not strong { color: #5b6e83; }
:where(.flow-345) .who5__ln { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(23, 48, 79, .16); }
:where(.flow-345) .who5__ln.is-70 { width: 70%; } :where(.flow-345) .who5__ln.is-85 { width: 85%; } :where(.flow-345) .who5__ln.is-55 { width: 55%; }
:where(.flow-345) .who5__pg { margin-top: auto; align-self: flex-end; font: 600 .7rem/1 var(--font-body); color: #5b6e83; }
:where(.flow-345) .who5__note { margin: 1rem 0 0; font-size: .95rem; line-height: 1.5; color: #b9cadb; }
/* 02 and 04: the search */
:where(.flow-345) .who5__search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem 1rem;
  border: 1px solid rgba(159, 182, 204, .26); border-radius: 999px; background: rgba(3, 10, 31, .45); }
:where(.flow-345) .who5__lab { font: 700 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
:where(.flow-345) .who5__q { overflow: hidden; font-size: 1.02rem; color: var(--paper); white-space: nowrap; text-overflow: ellipsis; }
:where(.flow-345) .who5__q::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--paper); opacity: 0; }
:where(.flow-345) .who5__panel:not([hidden]) .who5__q::after { animation: who5-caret 1s steps(1) .6s 3 both; }   /* the caret blinks 3 times, then rests */
@keyframes who5-caret { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
:where(.flow-345) .who5__result { padding: .6rem .9rem .5rem; border-radius: 999px; background: rgba(219, 232, 242, .12); font-weight: 600; font-size: .86rem; line-height: 1; white-space: nowrap; }
:where(.flow-345) .who5__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
:where(.flow-345) .who5__chips span { padding: .42rem .7rem .34rem; border: 1px solid rgba(159, 182, 204, .22); border-radius: 999px; font-size: .82rem; line-height: 1.2; color: #b9cadb; }
:where(.flow-345) .who5__chips .is-hot { border-color: rgba(251, 181, 42, .55); background: rgba(251, 181, 42, .08); color: var(--light); box-shadow: 0 0 16px -5px rgba(251, 181, 42, .5); }
:where(.flow-345) .who5__or { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; font: 700 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
:where(.flow-345) .who5__or::before, :where(.flow-345) .who5__or::after { content: ""; flex: 1; height: 1px; background: rgba(159, 182, 204, .16); }
:where(.flow-345) .who5__drop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1px dashed rgba(159, 182, 204, .34); border-radius: 14px; font-weight: 600; }
:where(.flow-345) .who5__ic { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(159, 182, 204, .34); border-radius: 50%; }
:where(.flow-345) .who5__drop small { display: block; margin-top: .2rem; font-weight: 400; font-size: .88rem; line-height: 1.45; color: #b9cadb; }
/* 03: one record, with its citation */
:where(.flow-345) .who5__rec { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(159, 182, 204, .2); border-radius: 14px; background: rgba(3, 10, 31, .38); }
:where(.flow-345) .who5__meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0; font-size: .78rem; line-height: 1.3; color: var(--mist); }
:where(.flow-345) .who5__meta b { font-weight: 600; color: var(--paper); }
:where(.flow-345) .who5__rtitle { margin: .6rem 0 0; font: 600 1.2rem/1.08 var(--font-display); color: var(--paper); }
:where(.flow-345) .who5__cite { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .8rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(159, 182, 204, .14);
  font-size: .78rem; line-height: 1.45; color: #b9cadb; overflow-wrap: anywhere; }
:where(.flow-345) .who5__cite button { min-height: 44px; padding: .45rem .9rem; border: 1px solid rgba(159, 182, 204, .32); border-radius: 999px; background: transparent; color: var(--paper); font: 600 .8rem/1 var(--font-body); cursor: pointer; transition: border-color .25s, color .25s; }
:where(.flow-345) .who5__cite button:hover { border-color: var(--paper); }
:where(.flow-345) .who5__cite button.is-done { border-color: rgba(251, 181, 42, .55); color: var(--light); }
/* the stage's foot: the yellow button, and the line that times the one round */
:where(.flow-345) .who5__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: clamp(1.1rem, 2.6vh, 1.5rem); }
:where(.flow-345) .who5__cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .875rem 1.5rem; border-radius: 999px; background: var(--light); color: var(--ink); font: 700 1rem/1 var(--font-body); text-decoration: none; transition: background-color .25s, color .25s; }
:where(.flow-345) .who5__cta:hover { background: var(--paper); color: var(--ink); }
:where(.flow-345) .who5__cta .ar { display: inline-block; transition: transform .4s var(--ease-spring); }
:where(.flow-345) .who5__cta:hover .ar { transform: translateX(5px); }
:where(.flow-345) .who5__turn { flex: 0 1 10rem; height: 2px; border-radius: 2px; background: rgba(159, 182, 204, .18); overflow: hidden; }
:where(.flow-345) .who5__turn[hidden] { display: none; }
:where(.flow-345) .who5__turn i { display: block; height: 100%; background: var(--mist); transform-origin: left center; transform: scaleX(0); }
:where(.flow-345) .who5__turn.is-ticking i { animation: who5-fill var(--dur, 6.5s) linear forwards; }
:where(.flow-345) .who5__turn.is-paused i { animation-play-state: paused; }
@keyframes who5-fill { to { transform: scaleX(1); } }
/* arrival: armed by v3.js, set once when the section comes into view */
:where(.flow-345) .who5.is-snap, :where(.flow-345) .who5.is-snap *, :where(.flow-345) .who5.is-snap *::before, :where(.flow-345) .who5.is-snap *::after { transition: none !important; }   /* arming hides at once, never fades out */
:where(.flow-345) .who5.is-armed:not(.is-set) .who5__title .w > span { transform: translateY(110%); }
:where(.flow-345) .who5.is-armed:not(.is-set) .who5__fade { opacity: 0; transform: translateY(14px); }
:where(.flow-345) .who5.is-armed:not(.is-set) .who5__role { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(.94); filter: blur(6px); }
:where(.flow-345) .who5.is-armed:not(.is-set) .who5__stage { opacity: 0; transform: translateY(70px) rotate(2deg) scale(.96); filter: blur(8px); }
:where(.flow-345) .who5.is-armed:not(.is-set) .who5__stage::before { transform: scaleX(0); opacity: 0; }
/* wide screens: the head and the four cards on the left, the stage on the right */
@media (min-width: 1000px) {
  :where(.flow-345) .who5__inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; grid-template-areas: "head stage" "roles stage"; column-gap: clamp(3rem, 6vw, 6rem); }
  :where(.flow-345) .who5__head { grid-area: head; }
  :where(.flow-345) .who5__roles { grid-area: roles; align-self: start; }
  :where(.flow-345) .who5__stage { grid-area: stage; }
  @supports (animation-timeline: view()) {
    :where(.flow-345) .who5__sweep { animation: who5-sweep linear both; animation-timeline: --who5; animation-range: entry 0% cover 50%; }
    @keyframes who5-sweep { from { rotate: -16deg; opacity: .25; } to { rotate: 0deg; opacity: 1; } }
  }
}
/* phones and tablets: one column, the four cards as a 2 x 2 grid of tiles, no ray */
@media (max-width: 999px) {
  :where(.flow-345) .who5__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.flow-345) .who5__role { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: .5rem; min-height: 0; padding: .7rem .75rem .8rem; }
  :where(.flow-345) .who5__icon { margin-left: auto; width: 2.1rem; height: 2.1rem; border-radius: 10px; }
  :where(.flow-345) .who5__icon svg { width: 1.05rem; height: 1.05rem; }
  :where(.flow-345) .who5__label { flex-basis: 100%; font-size: 1rem; }
  :where(.flow-345) .who5__go { display: none; }
  :where(.flow-345) .who5__role[aria-selected="true"] { translate: 0 0; }
  :where(.flow-345) .who5__role::before { left: 16%; right: 16%; top: -1px; bottom: auto; width: auto; height: 2px; transform: scaleX(0); background: linear-gradient(90deg, rgba(251, 181, 42, 0), var(--light) 30%, var(--light-soft) 50%, var(--light) 70%, rgba(251, 181, 42, 0)); }
  :where(.flow-345) .who5.is-hit .who5__role[aria-selected="true"]::before { transform: scaleX(1); }
  :where(.flow-345) .who5__role, :where(.flow-345) .who5__role:nth-child(n) { --ex: 0px; --ey: 40px; --er: 0deg; }
  :where(.flow-345) .who5__ray, :where(.flow-345) .who5__hit { display: none; }
  :where(.flow-345) .who5__stage::after { background: radial-gradient(85% 50% at 50% 0%, rgba(251, 181, 42, .1), transparent 70%); }
}
/* phones: shorter. The section is taller than the screen here anyway, so it does not keep a full screen */
@media (max-width: 767px) {
  :where(.flow-345) .who5.sea { min-height: 0; padding-top: calc(var(--header-h, 76px) + 1rem); padding-bottom: 2.25rem; }
  :where(.flow-345) .who5__inner { gap: 1.25rem; }
  :where(.flow-345) .who5__title { margin-top: .8rem; }
  :where(.flow-345) .who5__lede { margin-top: .9rem; }
  :where(.flow-345) .who5__role { padding: .6rem .7rem .7rem; }
  :where(.flow-345) .who5__icon { width: 1.9rem; height: 1.9rem; }
  :where(.flow-345) .who5__stage { padding: 1.05rem 1rem 1rem; border-radius: 18px; }
  :where(.flow-345) .who5__promise { margin-top: .65rem; font-size: 1.38rem; }
  :where(.flow-345) .who5__mock { margin-top: 1rem; }
  :where(.flow-345) .who5__pages { max-width: 21rem; gap: .7rem; padding: .2rem .2rem .5rem; }
  :where(.flow-345) .who5__page { aspect-ratio: 3 / 2.6; gap: .38rem; padding: .75rem .7rem .7rem; }
  :where(.flow-345) .who5__page strong { font-size: 1rem; }
  :where(.flow-345) .who5__note { margin-top: .75rem; }
  :where(.flow-345) .who5__chips { margin-top: .75rem; }
  :where(.flow-345) .who5__or { margin: .8rem 0; }
  :where(.flow-345) .who5__drop { padding: .75rem .85rem; }
  :where(.flow-345) .who5__panel { padding-bottom: .85rem; }
  :where(.flow-345) .who5__foot { padding-top: .85rem; }
}
@media (max-width: 560px) {
  :where(.flow-345) .who5__search { grid-template-columns: auto minmax(0, 1fr); border-radius: 16px; }
  :where(.flow-345) .who5__result { grid-column: 1 / -1; justify-self: start; }
  :where(.flow-345) .who5__foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.flow-345) .who5 *, :where(.flow-345) .who5 *::before, :where(.flow-345) .who5 *::after { transition: none !important; animation: none !important; }
}