/* Hero EQ landing page. iOS 26 "Liquid Glass" feel on black, in the logo's colours. No frameworks, no inline styles. */
:root {
  --bg: #000;
  --text: #f5f5f7;
  --muted: rgba(245, 245, 247, .72);
  --faint: rgba(245, 245, 247, .5);
  --lime: #c6ff3d;
  --green: #2ee66b;
  --teal: #19e6c1;
  --cyan: #22d3ff;
  --blue: #3b82ff;
  --violet: #8a5cff;
  --g-left: linear-gradient(135deg, var(--lime), var(--green) 55%, var(--teal));
  --g-right: linear-gradient(135deg, var(--cyan), var(--blue) 55%, var(--violet));
  --g-both: linear-gradient(135deg, var(--lime), var(--teal) 45%, var(--blue) 75%, var(--violet));
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Type scale (Apple-style: few sizes, big headlines). Used by the hero and the .scene sections; the launch-list signup keeps its own sizes. */
  --t-display: clamp(48px, min(8.4vw, 11vh), 96px); /* also bounded by height, so the pinned hero never runs into the brain on a short window */
  --t-headline: clamp(40px, 6vw, 64px);
  --t-sub: clamp(19px, 2.2vw, 26px);
  --t-body: clamp(17px, 1.7vw, 21px);
  --t-caption: clamp(13px, 1.2vw, 15px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: inherit; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 3px; }

/* ---------- Ambient colour behind everything ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* No blur filter here: a 90px blur on three huge, endlessly moving layers is very costly (especially in Safari), so the softness is built into the gradients instead. */
.orb { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; }
.orb-a { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: radial-gradient(circle, var(--lime) 0%, var(--green) 28%, rgba(46, 230, 107, .45) 48%, rgba(46, 230, 107, .12) 62%, transparent 74%); animation: drift-a 22s ease-in-out infinite alternate; }
.orb-b { width: 44vmax; height: 44vmax; right: -14vmax; top: -10vmax; background: radial-gradient(circle, var(--cyan) 0%, var(--blue) 30%, rgba(138, 92, 255, .5) 52%, rgba(138, 92, 255, .12) 64%, transparent 74%); animation: drift-b 26s ease-in-out infinite alternate; }
.orb-c { width: 36vmax; height: 36vmax; left: 28vw; bottom: -22vmax; opacity: .3; background: radial-gradient(circle, var(--teal) 0%, rgba(25, 230, 193, .4) 35%, rgba(25, 230, 193, .1) 55%, transparent 72%); animation: drift-a 30s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-6vmax, 6vmax, 0) scale(1.06); } }

/* ---------- Liquid glass ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 24px 70px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(26, 28, 32, .94); }
}
.glass-inset { background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(940px, calc(100% - 24px)); display: flex; align-items: center; gap: 18px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 8px; display: block; }
.brand span { white-space: nowrap; }
.brand .bt { display: flex; flex-direction: column; line-height: 1.15; }
.brand .by { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--faint); }
/* The full name stays on phones (owner, 2026-10-25): the wordmark is a little smaller, and only a very narrow screen drops ": Product Brain". */
@media (max-width: 560px) { .brand .bn { font-size: 13px; } .brand .by { font-size: 10px; } .nav { gap: 12px; } }
@media (max-width: 349px) { .brand .bp { display: none; } }
.nav nav { display: flex; gap: 22px; }
.nav nav a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav nav a:hover { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px;
  color: #04150a; background: var(--g-left); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 26px rgba(46, 230, 107, .3);
  transition: transform .25s var(--ease), filter .25s, box-shadow .25s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-small { padding: 9px 18px; font-size: 14px; }

/* ---------- Hero ---------- */
main { display: block; overflow-x: clip; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; font-size: 13px; color: var(--muted); margin: 0 0 26px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-left); box-shadow: 0 0 12px var(--green); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: .6; } }
h1 { margin: 0 auto; font-size: var(--t-display); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; max-width: 16ch; text-wrap: balance; }
.g-left, .g-right { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.g-left { background-image: var(--g-left); }
.g-right { background-image: var(--g-right); }
.kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--g-both); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lede { margin: 18px auto 0; max-width: 680px; font-size: var(--t-sub); color: var(--muted); letter-spacing: -.01em; text-wrap: balance; }

/* ---------- Opening story: the two-sided brain ----------
   Default (no JavaScript, or reduced motion) is the finished picture: joined brain, three team pills, all captions stacked.
   story.js adds .js to <html>, which turns the section into a tall sticky scroll and drives the stages. */
.story { position: relative; padding: 118px 20px 70px; text-align: center; }
.story .head { max-width: 900px; margin: 0 auto; }
.story .kicker { font-size: clamp(18px, 4.6vw, 24px); margin-bottom: 18px; text-wrap: balance; } /* only this line is larger: it names the audience */
.story .stage { position: relative; height: clamp(230px, 36vw, 380px); aspect-ratio: 1.1 / 1; margin: 56px auto 0; }
.stage, .sh { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* the brain is decoration: no selection or image menu if a finger rests on it */
.sh { position: absolute; top: 0; height: 100%; width: auto; user-select: none; -webkit-user-drag: none; will-change: transform; }
.sh.l { right: 50%; margin-right: -1px; }
.sh.r { left: 50%; margin-left: -1px; }
.node { position: absolute; top: 50%; display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: opacity .5s, transform .7s var(--ease); }
.node i { width: 10px; height: 10px; border-radius: 50%; }
.node.lg { right: calc(100% + 18px); --nx: 40px; }
.node.rg { left: calc(100% + 18px); --nx: -40px; }
.node.lg i { background: var(--g-left); box-shadow: 0 0 12px var(--green); }
.node.rg i { background: var(--g-right); box-shadow: 0 0 12px var(--blue); }
.n1, .n4 { margin-top: -96px; }
.n2, .n5 { margin-top: -24px; }
.n3, .n6 { margin-top: 48px; }
.cap { max-width: 640px; margin: 44px auto 0; }
.cap p { margin: 0 0 24px; }
.cap b { display: block; font-size: clamp(26px, 3.8vw, 48px); letter-spacing: -.025em; margin-bottom: 6px; }
.cap span { color: var(--muted); font-size: clamp(16px, 1.9vw, 21px); }
.cap b .g-left, .cap b .g-right { font-size: inherit; color: transparent; }
.scrollhint { display: none; }

.js .story { height: 380vh; padding: 0; }
.js .stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js .story .head { position: absolute; top: calc(15vh - 20px); left: 0; right: 0; max-width: none; padding: 0 20px; will-change: transform, opacity; }
.js .story .lede { display: none; }
.js .story .stage { position: absolute; left: 50%; top: 67%; transform: translate(-50%, -50%); height: min(36vh, 340px); margin: 0; }
/* --fxl and --fxr (0 to 1) are set by electrons.js while electrons fire through that half; unset, everything looks exactly as before. */
.js .sh { transition: filter .5s; }
.js .sh.l { filter: saturate(calc(.35 + var(--fxl, 0) * .8)) brightness(calc(.7 + var(--fxl, 0) * .5)) drop-shadow(0 0 calc(var(--fxl, 0) * 28px) rgba(198, 255, 61, calc(var(--fxl, 0) * .5))); }
.js .sh.r { filter: saturate(calc(.35 + var(--fxr, 0) * .8)) brightness(calc(.7 + var(--fxr, 0) * .5)) drop-shadow(0 0 calc(var(--fxr, 0) * 28px) rgba(59, 130, 255, calc(var(--fxr, 0) * .5))); }
.js .stage.lit-l .sh.l { filter: saturate(calc(1.15 + var(--fxl, 0) * .35)) brightness(calc(1.15 + var(--fxl, 0) * .3)) drop-shadow(0 0 40px rgba(198, 255, 61, .45)); }
.js .stage.lit-r .sh.r { filter: saturate(calc(1.15 + var(--fxr, 0) * .35)) brightness(calc(1.15 + var(--fxr, 0) * .3)) drop-shadow(0 0 40px rgba(59, 130, 255, .5)); }
.js .stage.lit-l.lit-r .sh.l { filter: saturate(calc(1.1 + var(--fxl, 0) * .35)) brightness(calc(1.1 + var(--fxl, 0) * .3)); }
.js .stage.lit-l.lit-r .sh.r { filter: saturate(calc(1.1 + var(--fxr, 0) * .35)) brightness(calc(1.1 + var(--fxr, 0) * .3)); }
.js .node { opacity: 0; transform: translateX(var(--nx)); }
.js .node.show { opacity: 1; transform: none; }
/* The stage titles take over the top slot where the headline was: as you scroll, the headline converts into Logic, Creative and the joined brain. */
.js .cap { position: absolute; top: calc(15vh + 20px); left: 0; right: 0; height: 120px; margin: 0 auto; padding: 0 20px; }
.js .cap p { position: absolute; left: 20px; right: 20px; margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; }
.js .cap p.on { opacity: 1; transform: none; }
.js .scrollhint { display: block; position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 1000px) {
  .node { font-size: 13px; padding: 7px 12px 7px 10px; }
  .node.lg { right: calc(100% + 8px); }
  .node.rg { left: calc(100% + 8px); }
}
@media (max-width: 700px) {
  .story .stage { height: clamp(140px, 22vh, 170px); }
  .js .story .stage { top: 66%; height: min(22vh, 170px); }
  .node { font-size: 12px; line-height: 1.2; width: 88px; padding: 6px 8px 6px 7px; gap: 5px; white-space: normal; }
  .node.lg { right: calc(100% - 6px); }
  .node.rg { left: calc(100% - 6px); }
  .n1, .n4 { margin-top: -84px; }
  .n2, .n5 { margin-top: -20px; }
  .n3, .n6 { margin-top: 44px; }
  .js .cap { height: 150px; }
}
/* A phone turned sideways is very short: shrink the type, drop the small print, and keep the title clear of the brain. */
@media (max-height: 520px) and (orientation: landscape) {
  .js .story .head { top: 11vh; }
  .js .story h1 { font-size: clamp(24px, 9vh, 38px); }
  .js .story .pill, .js .story .kicker, .js .scrollhint { display: none; }
  .js .story .stage { top: 58%; height: min(38vh, 140px); }
  .js .cap { top: 68px; height: 76px; }
  .js .cap b { font-size: 20px; margin-bottom: 2px; }
  .js .cap span { font-size: 13px; }
}

/* ---------- See it think: the messy-moment demo ----------
   Default (no JavaScript, or reduced motion) is the finished answer card. demo.js adds .live to #demo to play the animation. */
#demo { --wash: radial-gradient(34% 46% at 12% 50%, rgba(198, 255, 61, .2), transparent 72%), radial-gradient(34% 46% at 90% 55%, rgba(34, 211, 255, .24), transparent 72%); }
.demo .kicker { margin-bottom: 12px; }
.demo h2 { max-width: 20ch; }
.dchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 8px; }
.dchips:empty { display: none; }
.dctl { display: flex; justify-content: center; margin: 14px 0 -8px; }
.dpause { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 16px; border-radius: 999px; transition: color .2s, transform .25s var(--ease); }
.dpause:hover { color: #fff; }
.dpause:active { transform: scale(.96); }
.dchip { appearance: none; cursor: pointer; font: inherit; font-weight: 600; color: #fff; padding: 12px 20px; border-radius: 999px; transition: transform .25s var(--ease), box-shadow .25s; }
.dchip:hover { transform: translateY(-2px); }
.dchip:active { transform: scale(.96); }
.dchip[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px var(--lime), 0 10px 30px rgba(198, 255, 61, .25); }
.arena { position: relative; width: min(820px, 100%); margin: 26px auto 0; }
.core { display: none; }
.ans { position: relative; width: min(560px, 100%); margin: 0 auto; border-radius: 28px; padding: 22px 24px; text-align: left; }
.ans .kicker { margin-bottom: 6px; }
.ans h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.con { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.spec { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--faint); transition: background .4s, color .4s; }
.spec.on { background: var(--g-right); color: #001028; font-weight: 600; }
.ans ol { margin: 0; padding: 0; list-style: none; }
.ans li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 16px; transition: opacity .5s, transform .5s; }
.ans li i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--g-left); }
.ans li i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #04150a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.frag { position: absolute; left: 50%; top: 50%; padding: 8px 14px; border-radius: 14px; font-size: 14px; color: var(--muted); white-space: nowrap; opacity: 0;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(var(--r, 0deg));
  transition: transform 1.1s var(--ease), opacity .9s, filter .9s; animation: fl 5s ease-in-out infinite alternate; }
@keyframes fl { to { translate: 0 -10px; } }
.frag.in { opacity: 1; }
.frag.gone { opacity: 0; filter: blur(6px); transform: translate(-50%, -50%) scale(.2); }

.demo.live .arena { height: 380px; }
.demo.live .core { display: block; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); }
.core img { position: absolute; top: 0; height: 100%; width: auto; }
.core .a { right: 50%; }
.core .b { left: 50%; }
.demo.live .core.pulse { animation: pulse-core .9s ease-in-out 2; }
@keyframes pulse-core { 50% { transform: translate(-50%, -50%) scale(1.25); filter: drop-shadow(0 0 40px rgba(34, 211, 255, .7)); } }
.demo.live .ans { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.94); opacity: 0; pointer-events: none; transition: opacity .6s, transform .7s var(--ease); }
.demo.live .ans.show { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.demo.live .ans li { opacity: 0; transform: translateX(-10px); }
.demo.live .ans li.on { opacity: 1; transform: none; }
/* Pinned (demo.js adds .pinned when the screen is tall enough): the pills and the animation stick below the nav while the section scrolls past. */
.dhint { display: none; }
.demo.pinned .dstage { position: sticky; top: 76px; }
.demo.pinned .kicker { margin-bottom: 8px; }
.demo.pinned h2 { font-size: clamp(30px, 4.6vw, 52px); }
.demo.pinned .sub { margin-top: 10px; }
.demo.pinned.lean .sub { display: none; }
.demo.pinned.lean h2 { font-size: clamp(26px, 6.4vw, 40px); }
.demo.pinned .dchips { margin: 16px 0 4px; }
.demo.pinned .dchip { padding: 9px 16px; }
.demo.pinned .dctl { display: none; }
.demo.pinned .fine { margin-top: 10px; }
.demo.live.pinned .arena { height: clamp(300px, 52svh, 380px); margin-top: 14px; }
.demo.live.pinned.tight .arena { height: clamp(220px, 34svh, 300px); }
.demo.pinned .dhint { display: block; margin: 10px 0 0; font-size: 13px; letter-spacing: .02em; color: var(--faint); }
@media (max-width: 700px) {
  .demo.live .arena { height: 440px; }
  .demo.live.pinned .arena { height: clamp(300px, 46svh, 440px); }
  .demo.live.pinned.tight .arena { height: clamp(220px, 34svh, 300px); }
  .frag { font-size: 12px; padding: 6px 10px; }
}

/* ---------- Content blocks ---------- */
.block { position: relative; isolation: isolate; max-width: 1120px; margin: 0 auto; padding: 84px 20px; text-align: center; }
/* Soft colour behind each section so the glass has something to refract. */
.block::before { content: ""; position: absolute; z-index: -1; top: -6%; bottom: -6%; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: var(--wash); }
#updates { --wash: radial-gradient(40% 55% at 22% 50%, rgba(198, 255, 61, .3), transparent 72%), radial-gradient(40% 55% at 80% 50%, rgba(59, 130, 255, .34), transparent 72%); }
.block h2 { margin: 0 auto; font-size: clamp(30px, 5vw, 54px); line-height: 1.06; letter-spacing: -.035em; max-width: 18ch; text-wrap: balance; }
.sub { margin: 16px auto 0; max-width: 620px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); text-wrap: balance; }
.fine { margin: 26px auto 0; max-width: 640px; font-size: 13.5px; color: var(--faint); }
.fine a { text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }


/* ---------- Signup ---------- */
.signup { padding-bottom: 110px; }
.signup-card { max-width: 660px; margin: 0 auto; padding: 48px 34px; border-radius: 40px; }
.signup-card h2 { max-width: none; }
#waitlist { margin-top: 28px; position: relative; }
.field { display: flex; gap: 8px; padding: 7px; border-radius: 999px; transition: box-shadow .25s; }
.field:focus-within { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 3px rgba(198, 255, 61, .4); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 17px; padding: 11px 16px; }
.field input::placeholder { color: rgba(245, 245, 247, .4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.status { min-height: 1.5em; margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.status.ok { color: var(--lime); }
.status.err { color: #ff9a9a; }
.signup-card .fine { margin-top: 8px; }

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 30px 20px 60px; color: var(--faint); font-size: 13.5px; }
.foot a { color: var(--muted); }
.foot p { max-width: 560px; margin: 12px auto 0; font-size: 12.5px; }
.sep { margin: 0 8px; }

/* ---------- Privacy page ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 130px 22px 60px; }
.doc h1 { font-size: clamp(34px, 6vw, 52px); max-width: none; margin: 0 0 8px; text-align: left; }
.doc h2 { font-size: 22px; letter-spacing: -.02em; margin: 34px 0 8px; }
/* Contact form */
.doc .kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.doc .lead { margin: 0 0 26px; }
.cform { display: grid; gap: 14px; }
.cform label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cform .opt { font-weight: 400; color: var(--faint); }
.cform[hidden], .cform [hidden] { display: none; }
/* 16px minimum: iOS zooms the page on focus of any smaller field. */
.cform input, .cform select, .cform textarea { width: 100%; font: inherit; font-size: 17px; font-weight: 400; color: #fff; padding: 14px 16px; border-radius: 20px; outline: 0; appearance: none; -webkit-appearance: none; }
.cform textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.cform select { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.cform select option { color: #000; }
.cform input:focus, .cform select:focus, .cform textarea:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 3px rgba(198, 255, 61, .4); }
.cform .btn { justify-self: start; }
.cform .fine { margin: 4px 0 0; max-width: none; }
.doc h3 { font-size: 17px; letter-spacing: -.01em; margin: 22px 0 4px; }
.doc p, .doc li { color: var(--muted); font-size: 17px; }
.doc ul { padding-left: 22px; }
.doc a { color: #fff; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
.doc a:hover { text-decoration-color: #fff; }
.doc a.btn { color: #04150a; text-decoration: none; }
.doc .updated { color: var(--faint); font-size: 14px; }
.todo { background: rgba(255, 214, 10, .16); color: #ffe27a; padding: 1px 6px; border-radius: 6px; }

/* ---------- Reveal on scroll ---------- */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}
/* Pause / Play must be easy to hit with a thumb. */
@media (pointer: coarse) { .dpause { min-height: 44px; padding: 0 22px; } }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .nav nav { display: none; }
  .block { padding: 60px 18px; }
  .signup-card { padding: 36px 20px; border-radius: 32px; }
  .field { flex-direction: column; border-radius: 28px; padding: 8px; }
  .field input { text-align: center; padding: 14px; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-contrast: more) {
  .glass { background: rgba(18, 18, 22, .97); border-color: rgba(255, 255, 255, .6); }
  .muted, .lede, .sub { color: #fff; }
}


/* ---------- .scene: the redesigned sections (build 17 redesign, 2026-10-25) ----------
   One idea per screen: a small kicker, one headline, one supporting sentence, one interactive object.
   Deliberately separate from .block so the frozen launch-list signup (#updates) never changes with them. */
.scene { position: relative; isolation: isolate; max-width: 1120px; margin: 0 auto; padding: clamp(96px, 16vh, 180px) 20px; text-align: center; }
.scene::before { content: ""; position: absolute; z-index: -1; top: -6%; bottom: -6%; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: var(--wash); }
.scene .kicker { margin-bottom: 16px; }
.scene h2 { margin: 0 auto; font-size: var(--t-headline); line-height: 1.04; letter-spacing: -.04em; max-width: 16ch; text-wrap: balance; }
.scene .sub { margin: 20px auto 0; max-width: 640px; color: var(--muted); font-size: var(--t-sub); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.scene .fine { font-size: var(--t-caption); }


/* ---------- Pinned phone walkthrough (#walk) ----------
   Default (no JavaScript, or reduced motion): five stacked chapters, each with its own screenshot.
   phone.js adds .live to #walk, builds the sticky device frame (#wframe) and the dots (#wdots), and sets data-chapter. */
#walk { --wash: radial-gradient(36% 46% at 16% 45%, rgba(25, 230, 193, .2), transparent 72%), radial-gradient(36% 46% at 86% 55%, rgba(138, 92, 255, .26), transparent 72%); }
.wlayout { margin-top: clamp(40px, 8vh, 96px); }
.wlist { display: grid; gap: 72px; max-width: 520px; margin: 0 auto; }
.chap h3 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.chap p { margin: 0 auto; max-width: 30em; color: var(--muted); font-size: var(--t-body); line-height: 1.4; }
.wshot { display: block; width: min(260px, 72%); height: auto; margin: 28px auto 0; border-radius: 34px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }

#walk.live .wlayout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 7vw, 110px); align-items: start; max-width: 1000px; margin-inline: auto; text-align: left; }
#walk.live .wlist { display: block; max-width: none; margin: 0; }
#walk.live .chap { min-height: 82vh; min-height: 82svh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s var(--ease); }
#walk.live .chap.on { opacity: 1; }
#walk.live .chap p { margin: 0; }
#walk.live .wshot { display: none; }
#wframe { position: sticky; top: max(84px, calc(50vh - 340px)); width: min(300px, calc((100svh - 130px) * .46)); align-self: start; }
#wframe .wscreens { position: relative; aspect-ratio: 600 / 1304; border-radius: 13% / 6%; overflow: hidden; background: linear-gradient(#0e1024, #07070c); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 7px #101013, 0 0 0 8px rgba(255, 255, 255, .14), 0 40px 100px rgba(0, 0, 0, .65), 0 0 90px rgba(59, 130, 255, .18); }
#wframe .pscreen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top; opacity: 0; transition: opacity .55s var(--ease); }
#wframe .pscreen.on { opacity: 1; }
/* A cropped screen (the project page, shown above its updates feed) ends with a soft fade into the dark screen. */
#wframe .pscreen.crop { height: auto; bottom: auto; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
#wdots { display: flex; justify-content: center; gap: 4px; margin-top: 22px; }
#wdots button { appearance: none; border: 0; background: none; padding: 0; width: 36px; height: 44px; cursor: pointer; display: grid; place-items: center; }
#wdots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .3s, transform .3s var(--ease); }
#wdots button[aria-current="true"]::before { background: var(--g-left); transform: scale(1.5); }
@media (max-width: 820px) {
  #walk.live .wlayout { grid-template-columns: 1fr; gap: 0; }
  #wframe { grid-row: 1; top: 70px; z-index: 2; width: min(200px, calc(44svh * .46)); margin: 0 auto; padding-bottom: 14px; }
  #wframe::before { content: ""; position: absolute; z-index: -1; inset: -70px calc(50% - 50vw) 0; background: linear-gradient(#000 78%, rgba(0, 0, 0, 0)); }
  #wdots { margin-top: 10px; }
  #walk.live .chap { min-height: 66svh; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 5svh; } /* text sits below the sticky frame */
  #walk.live .chap p { margin-inline: auto; }
}


/* ---------- Team explorer (#teams) ----------
   Default (no JavaScript): six stacked panels. teams.js builds the tablist and shows one panel at a time. */
#teams { --wash: radial-gradient(34% 46% at 88% 55%, rgba(198, 255, 61, .2), transparent 72%), radial-gradient(34% 46% at 10% 45%, rgba(138, 92, 255, .26), transparent 72%); }
.tpanels { display: grid; gap: 16px; max-width: 760px; margin: clamp(32px, 6vh, 64px) auto 0; text-align: left; }
.tpanel { padding: clamp(24px, 4vw, 40px); border-radius: 32px; }
.tpanel h3 { margin: 0; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.04em; }
.tpanel.left h3 { background: var(--g-left); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tpanel.right h3 { background: var(--g-right); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tpanel .fn { margin: 6px 0 0; font-size: var(--t-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tpanel .tag { margin: 18px 0 0; font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.015em; }
.tpanel .aud { margin: 8px 0 0; color: var(--muted); font-size: var(--t-body); }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.specs li { padding: 7px 14px; border-radius: 999px; font-size: var(--t-caption); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.tpanel .ex { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--t-body); color: var(--text); }
.tpanel .ex span { display: block; margin-bottom: 4px; font-size: var(--t-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tpanel .count { display: inline-block; margin-top: 14px; font-size: var(--t-caption); color: var(--faint); }
.ttabs { position: relative; display: flex; justify-content: flex-start; gap: 8px; margin: clamp(32px, 6vh, 56px) auto 0; padding: 0 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ttabs::-webkit-scrollbar { display: none; }
/* Auto margins centre the row when it fits and collapse when it overflows; justify-content: center would push the first tab out of reach. */
.ttab:first-child { margin-left: auto; }
.ttab:last-child { margin-right: auto; }
.ttab { appearance: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; padding: 10px 18px; border-radius: 999px; transition: color .25s, transform .25s var(--ease), box-shadow .25s; }
.ttab i { width: 9px; height: 9px; border-radius: 50%; background: var(--g-left); }
.ttab.right i { background: var(--g-right); }
.ttab:hover { color: #fff; }
.ttab[aria-selected="true"] { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px rgba(255, 255, 255, .55), 0 10px 30px rgba(59, 130, 255, .22); }
.js #teams .ttabs + .tpanels { margin-top: 24px; }
.tpanel.enter { animation: tp-in .35s var(--ease); }
@keyframes tp-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tpanel.enter { animation: none; } }


/* ---------- Feature tiles (#tiles) ---------- */
#tiles { --wash: radial-gradient(36% 46% at 12% 55%, rgba(198, 255, 61, .16), transparent 72%), radial-gradient(36% 46% at 88% 45%, rgba(34, 211, 255, .22), transparent 72%); }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: clamp(40px, 8vh, 80px) 0 0; text-align: left; }
.tile { padding: clamp(24px, 3vw, 34px); border-radius: 32px; transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .3s var(--ease), border-color .3s; will-change: transform; }
.tile:not(:hover) { transition-duration: .6s; }
@media (hover: hover) { .tile:hover { border-color: rgba(255, 255, 255, .3); } }
.ticon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); }
.ticon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile.left .ticon svg { stroke: var(--lime); }
.tile.right .ticon svg { stroke: var(--cyan); }
.tile h3 { margin: 20px 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.03em; }
.tile p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.35vw, 17px); line-height: 1.45; }
@media (max-width: 980px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tile { transform: none; transition: none; will-change: auto; } }


/* ---------- Your data, your route (#route) ---------- */
#route { --wash: radial-gradient(40% 50% at 50% 70%, rgba(25, 230, 193, .22), transparent 72%), radial-gradient(30% 40% at 90% 30%, rgba(59, 130, 255, .22), transparent 72%); }
.scene .statement { margin: clamp(28px, 5vh, 48px) auto 0; max-width: 18ch; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.rpanels { max-width: 720px; margin: clamp(32px, 6vh, 56px) auto 0; display: grid; gap: 16px; text-align: left; }
.rpanel { padding: clamp(24px, 4vw, 40px); border-radius: 32px; }
.rpanel h3 { margin: 18px 0 8px; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.rpanel p { margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.4; }
.rdiag { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.rdiag .ph { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.rdiag .ph2 { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.rdiag .ring { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-dasharray: 3 7; opacity: .7; }
.rdiag .lock { fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rdiag .wire { stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.rdiag .head { stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.rdiag .dotm { fill: var(--cyan); }
.rdiag .prov { fill: rgba(59, 130, 255, .14); stroke: var(--blue); stroke-width: 2; }
.rdiag text { fill: #f5f5f7; font: 600 17px var(--font); letter-spacing: -.01em; }
.rpanel.enter .dotm { animation: dm 1.1s var(--ease) both; }
@keyframes dm { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(112px); opacity: 1; } }
.rsw { display: inline-flex; gap: 6px; padding: 6px; margin: clamp(32px, 6vh, 56px) auto 0; border-radius: 999px; max-width: 100%; }
.rsw button { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); background: none; min-height: 44px; padding: 10px 20px; border-radius: 999px; transition: color .25s, background .25s; }
.rsw button:hover { color: #fff; }
.rsw button[aria-checked="true"] { color: #04150a; background: var(--g-left); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.rwrap { text-align: center; }
.rwrap + .rpanels { margin-top: 20px; }
.rnotes { list-style: none; margin: 28px auto 0; padding: 0; max-width: 560px; display: grid; gap: 8px; color: var(--muted); font-size: clamp(14px, 1.3vw, 16px); }
@media (max-width: 520px) { .rsw { display: grid; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .rpanel.enter .dotm { animation: none; } }


/* ---------- Nav progress line ---------- */
.navprog { position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.navprog i { display: block; width: 100%; height: 100%; background: var(--g-both); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.nav nav a[aria-current="true"] { color: #fff; }
@media (prefers-reduced-motion: reduce) { .navprog i { transition: none; } }

/* Smooth scrolling for in-page links starts only after the page has loaded (progress.js adds .smooth on load). A smooth scroll that began
   on load, as for a shared link such as /#walk, was aimed before the pinned demo section had grown and stopped about 1600px short. */
@media (prefers-reduced-motion: no-preference) { html.smooth { scroll-behavior: smooth; } }


/* ---------- Second brain (#brain) ---------- */
#brain { --wash: radial-gradient(38% 46% at 50% 38%, rgba(138, 92, 255, .24), transparent 72%), radial-gradient(34% 44% at 12% 70%, rgba(25, 230, 193, .18), transparent 72%); }
.bsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: clamp(40px, 8vh, 80px) 0 0; text-align: left; counter-reset: bstep; }
.bstep { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: 32px; }
.bnum { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 18px; color: #04150a; background: var(--g-left); box-shadow: 0 8px 22px rgba(46, 230, 107, .3); }
.bstep:nth-child(2) .bnum { background: var(--g-both); color: #fff; box-shadow: 0 8px 22px rgba(59, 130, 255, .3); }
.bstep:nth-child(3) .bnum { background: var(--g-right); color: #fff; box-shadow: 0 8px 22px rgba(138, 92, 255, .35); }
.bstep h3 { margin: 22px 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.03em; }
.bstep p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.35vw, 17px); line-height: 1.45; }
.bvs { margin: clamp(36px, 7vh, 64px) auto 0; max-width: 22ch; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
@media (max-width: 900px) { .bsteps { grid-template-columns: 1fr; } }



/* ---------- Founder Principles (#founders) ---------- */
#founders { --wash: radial-gradient(38% 46% at 85% 30%, rgba(198, 255, 61, .18), transparent 72%), radial-gradient(34% 44% at 10% 75%, rgba(59, 130, 255, .22), transparent 72%); }
.fideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(32px, 6vh, 56px) auto 0; padding: 0; max-width: 820px; list-style: none; }
.fideas li { padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: clamp(15px, 1.4vw, 18px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: transform .3s var(--ease), border-color .3s; }
@media (hover: hover) { .fideas li:hover { transform: translateY(-2px); border-color: rgba(198, 255, 61, .6); } }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: clamp(32px, 6vh, 64px) auto 0; max-width: 900px; text-align: left; }
.fcard { padding: clamp(24px, 3vw, 34px); border-radius: 32px; }
.fcard h3 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.03em; }
.fcard.left h3 { background: var(--g-left); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fcard.right h3 { background: var(--g-right); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fcard p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.35vw, 17px); line-height: 1.45; }
@media (max-width: 700px) { .fgrid { grid-template-columns: 1fr; } }


/* ---------- Apple-style motion (motion.js adds html.motion; none of this runs with reduced motion or without JavaScript) ---------- */
/* 1. Grids arrive item by item. The individual `translate` property is used so it never fights a tile's tilt (`transform`). */
html.motion .stagger > * { opacity: 0; translate: 0 30px; transition: opacity .8s var(--ease), translate .95s var(--ease); }
html.motion .stagger.in > * { opacity: 1; translate: 0 0; }
html.motion .stagger > :nth-child(2) { transition-delay: .09s; } html.motion .stagger > :nth-child(3) { transition-delay: .18s; }
html.motion .stagger > :nth-child(4) { transition-delay: .27s; } html.motion .stagger > :nth-child(5) { transition-delay: .36s; }
html.motion .stagger > :nth-child(6) { transition-delay: .45s; } html.motion .stagger > :nth-child(7) { transition-delay: .54s; }
html.motion .stagger > :nth-child(8) { transition-delay: .63s; }
html.motion .tgrid.stagger > .tile { transition: opacity .8s var(--ease), translate .95s var(--ease), transform .3s var(--ease), border-color .3s; }
html.motion .fideas.stagger > li { transition: opacity .8s var(--ease), translate .95s var(--ease), transform .3s var(--ease), border-color .3s; }
html.motion .stagger.done > * { transition-delay: 0s; }

/* 2. Headlines settle into place: a touch larger and then still. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .scene h2.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), scale 1.3s var(--ease); }
  .scene h2.reveal:not(.in) { scale: 1.06; }
}

/* 3. The phone turns a little with each chapter, and the incoming screen rises into place. */
#wframe .wscreens { transform: perspective(1300px) rotateY(calc((var(--ch, 2) - 2) * 2.4deg)) rotateX(calc((var(--ch, 2) - 2) * -.6deg)); transition: transform 1.1s var(--ease); }
#wframe .pscreen { transform: translateY(22px) scale(.985); transition: opacity .6s var(--ease), transform .8s var(--ease); }
#wframe .pscreen.on { transform: none; }
@media (max-width: 820px) { #wframe .wscreens { transform: none; } }

/* 4. Team chips pop in one after another when a team is chosen. */
.tpanel.enter .specs li { animation: chip-in .5s var(--ease) both; }
.tpanel.enter .specs li:nth-child(2) { animation-delay: .05s; } .tpanel.enter .specs li:nth-child(3) { animation-delay: .1s; }
.tpanel.enter .specs li:nth-child(4) { animation-delay: .15s; } .tpanel.enter .specs li:nth-child(5) { animation-delay: .2s; }
.tpanel.enter .specs li:nth-child(6) { animation-delay: .25s; } .tpanel.enter .specs li:nth-child(7) { animation-delay: .3s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }

/* 5. A soft light follows the pointer across a card. */
.tile, .fcard { position: relative; }
.tile::before, .fcard::before, .bstep::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .14), transparent 62%); }
.tile.lit::before, .fcard.lit::before, .bstep.lit::before { opacity: 1; }

/* 6. A line draws itself from step to step in the second-brain section (wide screens). */
@media (min-width: 901px) {
  .bstep { --bp: clamp(24px, 3vw, 34px); }
  .bstep:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: calc(var(--bp) + 19px); left: calc(var(--bp) + 52px); right: calc(-16px - var(--bp) + 12px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lime), var(--cyan)); transform-origin: left center; }
  /* The draw-in transition belongs to the revealed state only, so the hidden state is set without animating. */
  html.motion .bsteps.stagger.in .bstep:not(:last-child)::after { transition: transform 1s var(--ease) .55s; }
  html.motion .bsteps.stagger.in .bstep:nth-child(2)::after { transition-delay: 1.25s; }
  html.motion .bsteps.stagger:not(.in) .bstep::after { transform: scaleX(0); }
}

/* 7. (Removed 2026-10-26: the page glows used to change strength per section. In Safari that made the glass cards behind them flicker in the second brain, Founder Principles and data route sections. The glows keep one strength; each section keeps its own static colour wash.) */

/* 8. The hero brain leans toward the cursor (the individual `translate` property: story.js owns `transform`). */
html.motion .sh.l { translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -7px); transition: translate .5s ease-out; }
html.motion .sh.r { translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * -7px); transition: translate .5s ease-out; }

/* 9. The nav settles into a firmer glass once the page has moved. */
.nav { transition: background .4s ease, border-color .4s ease; }
.nav.scrolled { background: linear-gradient(180deg, rgba(38, 40, 46, .8), rgba(14, 15, 18, .78)); border-color: rgba(255, 255, 255, .22); }

@media (prefers-reduced-motion: reduce) {
  .stagger > *, #wframe .pscreen { translate: none !important; }
  #wframe .wscreens { transform: none !important; }
  .tpanel.enter .specs li { animation: none !important; }
  .sh.l, .sh.r { translate: none !important; }
}


/* ---------- Sound familiar? (#familiar) ---------- */
#familiar { --wash: radial-gradient(40% 46% at 20% 40%, rgba(198, 255, 61, .14), transparent 72%), radial-gradient(40% 46% at 82% 60%, rgba(59, 130, 255, .2), transparent 72%); }
.fam { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin: clamp(36px, 7vh, 64px) auto 0; padding: 0; max-width: 980px; list-style: none; }
.fam li { padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: clamp(16px, 1.9vw, 24px); letter-spacing: -.02em; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 50px rgba(0, 0, 0, .4); }
.fam li:nth-child(odd) { rotate: -1.4deg; }
.fam li:nth-child(even) { rotate: 1.2deg; }
.fam li:nth-child(3n) { background: rgba(198, 255, 61, .09); border-color: rgba(198, 255, 61, .35); }
.fam li:nth-child(3n+1) { background: rgba(59, 130, 255, .1); border-color: rgba(59, 130, 255, .38); }
.famline { margin: clamp(40px, 8vh, 84px) auto 0; max-width: 18ch; font-size: clamp(32px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .fam li { rotate: none; } }

/* iPhone: three huge fixed glows drifting forever repaint behind every scroll frame. On touch devices they hold still (the section mood still changes their strength). */
@media (hover: none) and (pointer: coarse) { .orb { animation: none; } }