/* ═══════════════════════════════════════════════════════════════
   team — "Behind the Glass" v2.2 · Inter Light + Nyght Light Italic
   Headline recipe (matches teamrollouts.com): Inter 300/350, tight
   tracking, with <em> accent words in Nyght Light Italic.
   FONT MASTER — change the vars below and the whole site follows.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-LightItalic.woff2') format('woff2');font-style:italic;font-weight:300;font-display:swap}
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-RegularItalic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-MediumItalic.woff2') format('woff2');font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:'InterV';src:url('/v2/assets/fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* ── FONTS: the only place typefaces are named ── */
  --font-display:'InterV',Inter,-apple-system,sans-serif; /* headlines — light, tight */
  --font-serif:'Nyght',Georgia,serif;                     /* accents — light italic */
  --font-sans:'InterV',Inter,-apple-system,sans-serif;    /* everything else */

  /* headline recipe */
  --head-weight:330;
  --head-track:-0.03em;

  /* ── colour (dark, the default) ── */
  --ink:#0d0c0b;
  --ink-2:#161412;
  --ink-3:#1e1a15;
  --bone:#efebe3;
  --bone-dim:rgba(239,235,227,.55);
  --bone-faint:rgba(239,235,227,.24);
  --line:rgba(239,235,227,.14);
  --orange:#f56002;
  --signal:#f56002;
  --lime:#d9fa87;
  --glass:rgba(22,20,18,.55);
  /* global tokens (mirror base.css so nav/footer + a light theme work here too) */
  --on-accent:#0d0c0b;              /* text on a lime fill — dark in both themes */
  --accent:#d9fa87;                 /* accent-as-text / active — = lime in dark */
  --logo-invert:invert(1);          /* white-on-dark brand logos flip to black on light */
  --scrim:rgba(13,12,11,.5);        /* presence of this token reveals the nav theme toggle */
  --shadow:rgba(0,0,0,.4);--shadow-lg:rgba(0,0,0,.5);
  --bloom:rgba(217,250,135,.07);
  --nav-bg:rgba(13,12,11,.72);--mnav-bg:rgba(13,12,11,.97);
  --hover-tint:rgba(239,235,227,.05);--wordmark:#efebe3;

  /* ── motion / rhythm ── */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(1.25rem,4vw,4rem);
}

/* ═══ LIGHT THEME ═══ overrides only — every surface/text flows through the
   tokens above, so flipping them here re-skins the whole page. Product-UI
   mockups (device, chat panes, teammate cards) are dark-locked below so they
   stay dark like real app screenshots on a light page. ═══ */
:root[data-theme="light"]{
  --ink:#f4f0e7;--ink-2:#fbf9f4;--ink-3:#ebe5d8;
  --bone:#191512;--bone-dim:rgba(25,21,18,.64);--bone-faint:rgba(25,21,18,.4);
  --line:rgba(25,21,18,.13);--glass:rgba(255,255,255,.66);
  --signal:#f56002;--accent:var(--orange);--logo-invert:invert(0);
  --scrim:rgba(244,240,233,.46);--shadow:rgba(60,48,24,.12);--shadow-lg:rgba(60,48,24,.18);
  --bloom:rgba(150,190,60,.12);
  --nav-bg:rgba(246,242,234,.8);--mnav-bg:rgba(246,242,234,.97);
  --hover-tint:rgba(25,21,18,.05);--wordmark:#191512;
  color-scheme:light;
}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ink:#f4f0e7;--ink-2:#fbf9f4;--ink-3:#ebe5d8;
  --bone:#191512;--bone-dim:rgba(25,21,18,.64);--bone-faint:rgba(25,21,18,.4);
  --line:rgba(25,21,18,.13);--glass:rgba(255,255,255,.66);
  --signal:#f56002;--accent:var(--orange);--logo-invert:invert(0);
  --scrim:rgba(244,240,233,.46);--shadow:rgba(60,48,24,.12);--shadow-lg:rgba(60,48,24,.18);
  --bloom:rgba(150,190,60,.12);
  --nav-bg:rgba(246,242,234,.8);--mnav-bg:rgba(246,242,234,.97);
  --hover-tint:rgba(25,21,18,.05);--wordmark:#191512;
  color-scheme:light;
}}
/* dark-lock the product-UI mockups + the branded splash: re-pin tokens to
   their dark values so these read like app screenshots regardless of theme. */
.loader,.tmate,.pane,.ledger__row,.device{
  --ink:#0d0c0b;--ink-2:#161412;--ink-3:#1e1a15;
  --bone:#efebe3;--bone-dim:rgba(239,235,227,.56);--bone-faint:rgba(239,235,227,.3);
  --line:rgba(239,235,227,.13);--glass:rgba(22,20,18,.6);
  --accent:#d9fa87;--on-accent:#0d0c0b;--signal:#f56002;--lime:#d9fa87;
  --logo-invert:invert(1);color-scheme:dark;
}

/* ── reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink);color:var(--bone)}
body{font-family:var(--font-sans);font-weight:400;line-height:1.65;overflow-x:clip;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-sans)}
::selection{background:var(--signal);color:var(--ink)}
main{position:relative;z-index:2}
em{font-family:var(--font-serif);font-style:italic;font-weight:300}

/* the one headline recipe — Inter light + Nyght italic accents */
.h2,.hero__title,.turn__title,.truth,.kline,.catch__huge,.credo__title,.finale__title,.whocard h3{
  font-family:var(--font-display);font-weight:var(--head-weight);letter-spacing:var(--head-track);line-height:1.04}
.h2 em,.hero__title em,.turn__title em,.truth em,.catch__huge em,.credo__title em,.finale__title em,.whocard__line em{
  font-family:var(--font-serif);font-style:italic;font-weight:300;letter-spacing:-.01em}

/* ═══ chrome ═══ */
.grain{position:fixed;inset:-40px;z-index:60;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-12px,8px)}50%{transform:translate(10px,-10px)}75%{transform:translate(-8px,-6px)}100%{transform:translate(0,0)}}

.field{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
body.field-on .field{opacity:1}

/* the pointer stays native; over anything interactive it becomes the Team
   logomark — five bars playing like a tiny equalizer */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none}
@media (pointer:fine){.cursor{display:block}}
html.eqcur a,html.eqcur button,html.eqcur [data-hover]{cursor:none}
/* the shared nav + mobile menu keep the real cursor — the equalizer pointer
   never takes over there, and it must stay legible over the dropdowns */
html.eqcur .nav,html.eqcur .nav *,html.eqcur .mnav,html.eqcur .mnav *{cursor:auto}
html.eqcur .nav a,html.eqcur .nav button,html.eqcur .nav [data-hover],
html.eqcur .mnav a,html.eqcur .mnav button{cursor:pointer}
.cursor__eq{display:flex;align-items:center;justify-content:center;gap:2.5px;height:22px;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:opacity .18s ease,transform .22s var(--ease)}
.cursor.is-on .cursor__eq{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor__eq i{width:3px;height:20px;border-radius:2px;background:var(--bone);
  transform:scaleY(.4);transform-origin:center}
.cursor.is-ink .cursor__eq i{background:var(--ink)}
.cursor.is-on .cursor__eq i{animation:eqbar 1.05s ease-in-out infinite}
.cursor__eq i:nth-child(1){animation-delay:-.15s}
.cursor__eq i:nth-child(2){animation-delay:-.45s}
.cursor__eq i:nth-child(3){animation-delay:0s}
.cursor__eq i:nth-child(4){animation-delay:-.7s}
.cursor__eq i:nth-child(5){animation-delay:-.3s}
@keyframes eqbar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* z-index 1: beneath <main> (z2), so the flying core ducks UNDER the device
   band on its way from the turn to the orbit; section backgrounds are
   transparent, so it stays visible everywhere else */
.traveler{position:fixed;left:0;top:0;z-index:1;width:108px;height:108px;border-radius:50%;
  background:var(--signal);display:grid;place-items:center;pointer-events:none;
  opacity:0;will-change:transform,opacity;color:var(--ink)}
.traveler svg{width:46px;height:46px}

/* ═══ loader ═══ */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;
  transition:clip-path 1s var(--ease-io) .15s;clip-path:inset(0 0 0% 0)}
body:not([data-loading]) .loader{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader__mark{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.loader__star{color:var(--bone)}
.loader__star .ls{stroke-dasharray:90;stroke-dashoffset:90;animation:draw .55s var(--ease) forwards}
.loader__star .ls2{animation-delay:.18s}.loader__star .ls3{animation-delay:.36s}
@keyframes draw{to{stroke-dashoffset:0}}
.loader__logo{width:clamp(110px,14vw,170px);opacity:0;animation:fadeup .7s var(--ease) .55s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ═══ NAV ═══ */
.brand{position:fixed;top:1.35rem;left:var(--pad);z-index:80;transition:opacity .4s}
.brand img{height:26px;width:auto}

.capsule{position:fixed;top:1.1rem;right:var(--pad);z-index:80;
  display:flex;align-items:center;gap:1.1rem;
  background:rgba(13,12,11,.6);border:1px solid var(--line);border-radius:99px;
  padding:.5rem .6rem .5rem .55rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.capsule__orb{position:relative;width:36px;height:36px;flex:none}
.capsule__orb svg{width:100%;height:100%;transform:rotate(-90deg)}
.orb__track,.orb__prog{fill:none;stroke-width:2.5}
.orb__track{stroke:var(--line)}
.orb__prog{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4}
.orb__star{position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem;color:var(--bone);
  font-style:normal;animation:spin 24s linear infinite}
.capsule__act{display:flex;flex-direction:column;line-height:1.05;min-width:7.6rem;overflow:hidden}
.capsule__num{font-weight:640;font-size:.62rem;letter-spacing:.3em;color:var(--lime)}
.capsule__name{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:.98rem;color:var(--bone);white-space:nowrap}
.capsule__name.swap{animation:nameswap .45s var(--ease)}
@keyframes nameswap{0%{opacity:0;transform:translateY(90%)}100%{opacity:1;transform:none}}
.capsule__links{display:flex;align-items:center;gap:1.3rem;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:520;padding-right:.4rem}
.capsule__links a{opacity:.6;transition:opacity .3s}
.capsule__links a:hover{opacity:1}
.capsule__links .capsule__cta{opacity:1;color:var(--ink);background:var(--bone);border-radius:99px;
  padding:.55rem 1.05rem;font-weight:640;transition:background .3s}
.capsule__links .capsule__cta:hover{background:var(--lime)}
.capsule__burger{display:none;width:38px;height:38px;background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px}
.capsule__burger i{width:20px;height:2px;background:var(--bone);transition:transform .4s var(--ease)}
body.menu-open .capsule__burger i:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .capsule__burger i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:900px){
  .capsule__links{display:none}
  .capsule__burger{display:flex}
  .capsule__act{min-width:0}
  .capsule__name{display:none}
}

.menu{position:fixed;inset:0;z-index:75;background:rgba(13,12,11,.92);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
body.menu-open .menu{opacity:1;pointer-events:auto}
.menu__list{display:flex;flex-direction:column;gap:.5rem;text-align:left}
.menu__list a{font-family:var(--font-display);font-weight:330;letter-spacing:-.02em;font-size:clamp(2.2rem,8vw,4rem);
  line-height:1.12;display:flex;align-items:baseline;gap:1.2rem;
  opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .7s var(--ease),color .3s}
body.menu-open .menu__list a{opacity:1;transform:none}
.menu__list a:nth-child(2){transition-delay:.06s}.menu__list a:nth-child(3){transition-delay:.12s}.menu__list a:nth-child(4){transition-delay:.18s}
.menu__list a:hover{color:var(--lime)}
.menu__list em{font-family:var(--font-sans);font-style:normal;font-size:.85rem;color:var(--lime);letter-spacing:.24em;font-weight:600}
.menu__foot{position:absolute;bottom:2.2rem;left:0;right:0;text-align:center;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim)}
.menu__foot span{color:var(--lime)}

/* ═══ shared type ═══ */
.h2{font-size:clamp(2.3rem,4.8vw,4rem)}
.h2 em{color:var(--signal)}
.lede{max-width:34rem;margin-top:1.5rem;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--bone-dim)}
.star{width:.95em;height:.95em;color:var(--signal)}
.star--m{width:1.15em;height:1.15em}
.spin{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bp-md{display:none}
@media(min-width:760px){.bp-md{display:inline}}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;
  font-size:.9rem;font-weight:620;letter-spacing:.02em;padding:1rem 1.9rem;transition:background .3s,color .3s,border-color .3s}
.btn--solid{background:var(--lime);color:var(--on-accent)}
.btn--solid:hover{background:var(--bone)}
.btn--ghost{border:1px solid var(--bone-faint);color:var(--bone)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ═══ ACT 0 · hero ═══ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:clip;padding:0 var(--pad)}
.hero__bg{position:absolute;inset:-8%;z-index:-1;opacity:.14}
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.75)}
.hero__bg::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 75% 62% at 50% 46%,transparent 10%,var(--ink) 82%)}
.hero__center{text-align:center;max-width:1050px;will-change:transform,opacity}
.hero__ask{font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--bone-dim);margin-bottom:1.1rem}
.hero__title{font-size:clamp(2.9rem,7vw,6.4rem);line-height:1}
.hero__title em{color:var(--signal)}
@media(min-width:820px){.hero__title{white-space:nowrap}}
.hero__sub{margin:2.1rem auto 0;max-width:44rem;font-size:clamp(.98rem,1.3vw,1.16rem);color:var(--bone-dim)}
.hero__ctas{margin-top:2.5rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero__cue{position:absolute;bottom:2.6rem;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-faint)}
.hero__cue i{width:1px;height:48px;background:linear-gradient(var(--bone-dim),transparent);display:block;
  animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ═══ marquee ═══ */
.marquee{overflow:clip;border-block:1px solid var(--line);padding:1rem 0;background:var(--ink)}
.marquee__track{display:flex;width:max-content;animation:mq 40s linear infinite;align-items:center}
.mqi{display:flex;align-items:center;gap:.75rem;font-weight:560;
  font-size:.8rem;letter-spacing:.24em;color:var(--bone-dim);white-space:nowrap;padding-right:2.6rem}
.mqi img{height:17px;width:auto;opacity:.9}
.mqi i{font-style:normal;color:var(--lime);opacity:.8;padding-left:2.6rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* ═══ pins ═══ */
.pin{position:relative}
.pin__stage{position:sticky;top:0;height:100vh;overflow:clip}
.pin--scatter{height:420vh}
.pin--turn{height:320vh}
.pin--connect{height:300vh}
.pin--reason{height:300vh}
.pin--catch{height:380vh}

/* ═══ ACT 1 · scatter — tracklist lights its tiles ═══ */
.pin--scatter .pin__stage{display:flex;align-items:center;padding:0 var(--pad)}
.track{position:relative;z-index:3;max-width:min(42vw,480px)}
.track__list{list-style:none}
.trow{display:flex;align-items:baseline;gap:1.3rem;padding:1.2rem 0;border-bottom:1px solid var(--line);
  opacity:.22;transform:translateX(-14px);will-change:transform,opacity}
.trow b{font-weight:600;font-size:.72rem;letter-spacing:.2em;color:var(--bone-faint);min-width:2rem}
.trow span{font-family:var(--font-display);font-weight:var(--head-weight);letter-spacing:-.02em;
  font-size:clamp(1.6rem,2.7vw,2.5rem);line-height:1;flex:1}
.trow.on b{color:var(--accent)}
.truth{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;
  font-size:clamp(2.6rem,6.4vw,5.4rem);opacity:0;will-change:opacity;pointer-events:none;padding:0 var(--pad)}
.truth em{color:var(--signal)}

.tile{position:absolute;left:var(--x);top:var(--y);z-index:2;
  display:flex;align-items:flex-start;gap:.8rem;
  background:var(--glass);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1.05rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  min-width:230px;max-width:300px;rotate:var(--r);filter:blur(var(--b));
  opacity:0;will-change:transform,opacity}
.tile>img{height:22px;width:auto;margin-top:.15rem;flex:none}
.tile>img.wide{height:13px;max-width:70px;object-fit:contain}
.tile b{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);font-weight:640}
.tile span{display:block;font-size:.86rem;font-weight:540;margin:.15rem 0 .2rem}
.tile span em{color:var(--signal);font-family:var(--font-sans);font-style:normal;font-weight:640}
.tile i{display:block;font-style:normal;font-size:.7rem;color:var(--bone-faint)}
.tile u{position:absolute;top:-8px;right:-8px;text-decoration:none;background:var(--signal);color:var(--on-accent);
  font-size:.66rem;font-weight:700;min-width:19px;height:19px;border-radius:99px;
  display:grid;place-items:center;padding:0 5px}
@media(max-width:760px){
  .track{max-width:60vw}
  .tile{min-width:170px;max-width:200px;padding:.7rem .8rem;left:calc(var(--x) * .28 + 10%)}
  .truth{font-size:clamp(2.2rem,9vw,3.4rem)}
}

/* ═══ ACT 2 · the turn ═══ */
.pin--turn .pin__stage{display:grid;place-items:center;text-align:center;padding:0 var(--pad)}
.turn__until{position:absolute;inset:0;display:grid;place-items:center;opacity:0;will-change:opacity,transform}
.turn__until p{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:clamp(2.2rem,5.5vw,4.6rem)}
.blink{animation:blink 1.15s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.turn__reveal{position:relative;z-index:2;opacity:0;transform:translateY(40px) scale(.98);will-change:opacity,transform}
.turn__logo{width:clamp(140px,18vw,220px);margin:0 auto 2.2rem}
.turn__title{font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:1.06}
.turn__sub{margin-top:1.8rem;color:var(--bone-dim);font-size:clamp(.98rem,1.35vw,1.15rem)}

/* ═══ split stages ═══ */
.stage--split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,6rem);padding:0 var(--pad)}
.stage--rev{grid-template-columns:1fr 1.05fr}
@media(max-width:900px){.stage--split{grid-template-columns:1fr;align-content:center;gap:2rem}
  .split__viz{max-height:44vh}.stage--split .lede{margin-top:1rem}}
.split__copy{position:relative;z-index:2}
.ticks{list-style:none;margin-top:1.6rem;display:flex;flex-direction:column;gap:.55rem}
.ticks li{display:flex;gap:.8rem;align-items:baseline;color:var(--bone-dim);font-size:.98rem}
.ticks li::before{content:'✳';color:var(--accent);font-size:.8em}
.stat{margin-top:2.2rem;display:flex;align-items:baseline;gap:.6rem}
.stat b{font-family:var(--font-display);font-weight:380;font-size:clamp(2.2rem,3.6vw,3.2rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{color:var(--bone-dim);font-size:.9rem}

.split__viz{display:grid;place-items:center;position:relative;z-index:1}
.orbit{width:min(100%,560px);color:var(--bone);overflow:visible}
.oline{stroke-dasharray:1;stroke-dashoffset:1;opacity:.55}
.onode circle{fill:var(--ink-2);stroke:var(--line);stroke-width:1.5}
.onode text{fill:var(--bone-dim);font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-anchor:middle}
.onode{opacity:0}
.orbit__core .core__disc{fill:var(--signal)}
.orbit__core .core__star{color:var(--ink);stroke:var(--ink)}
.orbit__core{opacity:0}
.orbit__packets circle{fill:var(--lime)}

.split__viz--cards{display:flex;flex-direction:column;gap:1rem;place-items:stretch;perspective:900px}
.pulse{position:absolute;inset:0;display:grid;place-items:center;z-index:-1}
.pulse i{position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid var(--bone-faint);opacity:0}
.stage--split.is-live .pulse i{animation:pulse 3.6s var(--ease-io) infinite}
.stage--split.is-live .pulse i:nth-child(2){animation-delay:1.2s}
.stage--split.is-live .pulse i:nth-child(3){animation-delay:2.4s}
@keyframes pulse{0%{transform:scale(.4);opacity:.5}100%{transform:scale(4.2);opacity:0}}
.insight{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.3rem;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;will-change:transform,opacity;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.insight p{font-size:.95rem;color:var(--bone-dim);margin:.45rem 0 .55rem}
.insight p b{color:var(--bone);font-weight:600}
.insight__tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:620;color:var(--bone-dim)}
.insight__tag--live{color:var(--lime)}
.insight__tag--live::before{content:'●';font-size:.7em;margin-right:.5em;animation:blink 1.4s steps(2) infinite}
.insight__src{font-size:.7rem;color:var(--bone-faint);font-variant-numeric:tabular-nums}

/* ═══ ACT 5 · ledger ═══ */
.actwork{padding:24vh var(--pad);position:relative;overflow:clip}
.actwork__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,7rem);align-items:center;position:relative;z-index:2}
@media(max-width:900px){.actwork__inner{grid-template-columns:1fr}}
.ledger{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.7rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 40px 90px rgba(0,0,0,.4)}
.ledger__head{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim);font-weight:600;
  padding-bottom:1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.6rem}
.ledger__dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:blink 1.6s steps(2) infinite}
.ledger__row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.ledger__row.in{opacity:1;transform:none}
.ledger__row .t{font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--bone-faint)}
.ledger__row .w{font-size:.92rem;color:var(--bone-dim)}
.ledger__row .w i{color:var(--bone-faint);font-style:normal;font-size:.82em}
.ledger__row .s{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:640;padding:.28rem .6rem;border-radius:99px}
.ledger__row .s.ok{color:var(--bone);border:1px solid var(--bone-faint)}
.ledger__row .s.wait{color:var(--ink);background:var(--lime)}
.ledger__sms{margin-top:1.3rem;font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:1.1rem;color:var(--bone-dim);
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .2s,transform .8s var(--ease) .2s}
.ledger__sms.in{opacity:1;transform:none}
.ledger__sms b{font-family:var(--font-sans);font-style:normal;font-weight:560;font-size:.85rem;color:var(--bone)}

/* ═══ ACT 6 · the catch ═══ */
.pin--catch .pin__stage{display:grid;place-items:center;padding:0 var(--pad)}
.catch__bg{position:absolute;inset:0;z-index:0}
.catch__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:brightness(.75)}
.catch__bg::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 65% at 50% 50%,rgba(13,12,11,.25),var(--ink) 92%)}
.catch__sheet{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.4rem;max-width:1100px}
.kline{font-size:clamp(1.7rem,4vw,3.4rem);line-height:1.1;
  color:transparent;-webkit-text-stroke:1px var(--bone-faint);
  background:linear-gradient(var(--bone),var(--bone)) no-repeat 0 0 / var(--fill,0%) 100%;
  -webkit-background-clip:text;background-clip:text}
.catch__huge{margin-top:2.4rem;font-size:clamp(3.2rem,9vw,8rem);line-height:1;
  opacity:0;transform:scale(1.1);will-change:transform,opacity}
.catch__huge em{color:var(--signal)}

/* ═══ ACT 7 · who ═══ */
.who{padding:24vh var(--pad) 18vh;max-width:1500px;margin:0 auto}
.who__kicker{text-align:center;margin-bottom:4.5rem;font-size:clamp(1.5rem,2.8vw,2.2rem)}
.who__kicker em{color:var(--bone-dim);font-weight:300}
.who__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
@media(max-width:900px){.who__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.whocard{position:relative;border:1px solid var(--line);border-radius:18px;overflow:clip;background:var(--ink-2);
  transition:transform .6s var(--ease),border-color .6s}
.whocard:hover{transform:translateY(-10px);border-color:var(--bone-faint)}
.whocard__no{position:absolute;top:1.1rem;right:1.2rem;z-index:2;font-size:1.5rem;color:var(--accent)}
.whocard__img{height:210px;overflow:clip;position:relative}
.whocard__img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--ink-2))}
.whocard__img img{width:100%;height:100%;object-fit:cover;filter:brightness(.75) saturate(.85);
  transition:transform 1.4s var(--ease)}
.whocard:hover .whocard__img img{transform:scale(1.06)}
.whocard h3{font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.05;padding:1.6rem 1.7rem .5rem}
.whocard__line{padding:0 1.7rem;font-size:1.1rem;color:var(--bone)}
.whocard>p:last-child{padding:.7rem 1.7rem 2rem;font-size:.92rem;color:var(--bone-dim)}

/* ═══ ACT 8 · credo ═══ */
.credo{padding:22vh var(--pad);border-block:1px solid var(--line);position:relative;overflow:clip}
.credo__star{position:absolute;right:-16%;top:50%;translate:0 -50%;width:min(58vw,720px);color:var(--bone);
  opacity:.05;animation:spin 90s linear infinite}
.credo__grid{max-width:1250px;margin:0 auto;position:relative;z-index:2;
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2.5rem,6vw,7rem);align-items:center}
@media(max-width:900px){.credo__grid{grid-template-columns:1fr}}
.credo__title{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.06}
.credo__title em{color:var(--signal)}
.credo__mark{margin-top:3rem;font-size:clamp(1.2rem,2vw,1.6rem);font-family:var(--font-serif);font-weight:300;
  display:flex;align-items:center;gap:.8rem;color:var(--bone-dim)}
.credo__rail{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.chip{position:relative;display:flex;align-items:center;gap:1rem;
  background:var(--glass);border:1px solid var(--line);border-radius:12px;
  padding:1.05rem 1.3rem;font-size:.95rem;color:var(--bone-dim);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip i{font-style:normal;font-size:.66rem;letter-spacing:.22em;color:var(--bone-faint);font-weight:640;min-width:1.6rem}
.chip::after{content:'';position:absolute;left:1.1rem;right:1.1rem;top:50%;height:2px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.chip.struck{color:var(--bone-faint)}
.chip.struck::after{transform:scaleX(1)}
.chip--lit{border-color:rgba(217,250,135,.45);color:var(--bone);gap:.7rem}
.chip--lit i{color:var(--accent);font-size:.9rem}
.chip--lit::after{display:none}
.chip--lit img{height:17px;width:auto;margin-left:.2rem;translate:0 2px}

/* ═══ ACT 9 · finale ═══ */
.finale{position:relative;padding:26vh var(--pad) 0;overflow:clip;text-align:center}
.finale__bg{position:absolute;inset:-10% 0;z-index:0;opacity:.18}
.finale__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.finale__bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to bottom,var(--ink) 4%,transparent 45%,var(--ink) 92%)}
.finale__inner{position:relative;z-index:2;max-width:980px;margin:0 auto}
.finale__title{font-size:clamp(3rem,8vw,6.8rem);line-height:1.02}
.finale__title em{color:var(--signal)}
.finale__sub{margin-top:2.2rem;color:var(--bone-dim);font-size:clamp(.98rem,1.35vw,1.15rem)}
.finale__form{margin:2.6rem auto 0;display:flex;gap:.7rem;max-width:560px;position:relative}
.finale__form input{flex:1;background:var(--glass);border:1px solid var(--line);border-radius:99px;
  padding:1rem 1.5rem;color:var(--bone);font-family:var(--font-sans);font-size:.95rem;outline:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s}
.finale__form input:focus{border-color:var(--accent)}
.finale__form input::placeholder{color:var(--bone-faint)}
.finale__form button{background:var(--lime);color:var(--on-accent);border:0;border-radius:99px;padding:1rem 1.6rem;
  font-weight:640;font-size:.9rem;letter-spacing:.02em;cursor:pointer;transition:background .3s,transform .3s;white-space:nowrap}
.finale__form button:hover{background:var(--bone)}
.finale__sent{position:absolute;inset:0;display:none;place-items:center;background:var(--ink);border-radius:99px;
  border:1px solid var(--accent);color:var(--bone);font-size:.92rem}
.finale__form.sent .finale__sent{display:grid}
.finale__demo{display:inline-block;margin-top:1.6rem;font-size:.88rem;color:var(--bone-dim);
  border-bottom:1px solid var(--bone-faint);padding-bottom:.15rem;transition:color .3s,border-color .3s}
.finale__demo:hover{color:var(--bone);border-color:var(--accent)}
@media(max-width:560px){.finale__form{flex-direction:column}.finale__form button{padding:1rem}}

.footer{position:relative;z-index:2;margin-top:18vh;padding:3rem var(--pad) 3.4rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:.9rem}
.footer__logo{height:30px;width:auto}
.footer p{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim)}
.footer__legal{color:var(--bone-faint) !important;letter-spacing:.08em !important;text-transform:none !important}

/* ═══ reduced motion ═══ */
@media (prefers-reduced-motion:reduce){
  .grain,.hero__cue i,.spin,.blink,.ledger__dot,.orb__star,.credo__star{animation:none !important}
  .field,.cursor,.traveler{display:none !important}
  [data-reveal],.ledger__row,.ledger__sms,.insight,.onode,.orbit__core,.turn__reveal,.trow,.truth,.catch__huge,.hero__center,.tile{opacity:1 !important;transform:none !important;filter:none !important}
  .oline{stroke-dashoffset:0 !important;opacity:.55 !important}
  .kline{--fill:100%}
  .tile{display:none}
  .track{max-width:100%}
  .truth{position:static;margin-top:3rem}
  .pin--scatter,.pin--turn,.pin--connect,.pin--reason,.pin--catch{height:auto}
  .pin__stage{position:static;height:auto;padding:16vh var(--pad)}
  .turn__until{display:none}
  .marquee__track{animation:none}
  html{scroll-behavior:auto}
}

/* ── live-site logo, rendered white on dark (as teamrollouts.com does) ── */
.loader__logo,.brand img,.turn__logo,.footer__logo,.chip--lit img{filter:brightness(0) var(--logo-invert)}
.chip--lit img{height:15px}
.brand img{height:22px}
.footer__logo{height:26px}

/* ── splash: logo + tagline (star removed) ── */
.loader__mark{gap:1.1rem}
.loader__logo{width:clamp(130px,16vw,190px);animation-delay:.1s}
.loader__tag{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-dim);
  opacity:0;animation:fadeup .7s var(--ease) .45s forwards}

/* ── teammate whisper card (hero) — styled on the TeamMate chat UI ── */
.tmate{position:absolute;z-index:5;width:272px;pointer-events:none;
  background:#141210;border:1px solid rgba(239,235,227,.12);border-radius:18px;
  padding:.85rem .9rem .8rem;box-shadow:0 30px 70px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .6s var(--ease),transform .7s var(--ease);will-change:transform,opacity}
.tmate.show{opacity:1;transform:none}
.tmate__head{display:flex;align-items:center;gap:.55rem;margin-bottom:.65rem}
.tmate__mark{width:26px;height:26px;border-radius:8px;background:#1f1c19;border:1px solid rgba(239,235,227,.1);
  display:inline-flex;align-items:center;justify-content:center;gap:1.5px;flex:none}
.tmate__mark i{width:2px;border-radius:1px;background:var(--bone);opacity:.9}
.tmate__mark i:nth-child(1),.tmate__mark i:nth-child(5){height:8px}
.tmate__mark i:nth-child(2),.tmate__mark i:nth-child(4){height:11px}
.tmate__mark i:nth-child(3){height:13px}
.tmate__head b{font-size:.86rem;font-weight:620;letter-spacing:-.01em}
.tmate__time{font-size:.68rem;color:var(--bone-faint)}
.tmate__status{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px rgba(245,96,2,.18)}
.tmate__msg{background:#dedbd4;color:#1a1917;border-radius:13px;border-bottom-left-radius:4px;
  padding:.7rem .85rem;font-size:.84rem;line-height:1.5;font-weight:460}
.tmate__pill{display:inline-flex;align-items:center;gap:.45rem;margin-top:.65rem;
  border:1px solid rgba(245,96,2,.45);color:var(--bone-dim);border-radius:99px;
  padding:.4rem .8rem;font-size:.72rem;font-weight:540}
.tmate__pill svg{color:var(--signal)}
@media(max-width:760px){.tmate{display:none}}
@media (prefers-reduced-motion:reduce){.tmate{display:none}}

/* hero ask: white, Nyght italic, matches the sub-copy size */
.hero__ask{font-size:clamp(.98rem,1.3vw,1.16rem);margin-bottom:1.3rem}
.hero__ask em{color:var(--bone)}

/* ═══ ledger, restyled as a teammate card ═══ */
.ledger{background:#141210;border:1px solid rgba(239,235,227,.09);border-radius:20px;padding:1.35rem 1.45rem 1.5rem;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.ledger__head{display:flex;align-items:center;gap:.55rem;padding-bottom:1rem;border-bottom:1px solid rgba(239,235,227,.08);
  font-size:inherit;letter-spacing:normal;text-transform:none;font-weight:400}
.ledger__head b{font-size:.86rem;font-weight:620;letter-spacing:-.01em;color:var(--bone)}
.ledger__when{font-size:.68rem;color:var(--bone-faint)}
.ledger__status{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px rgba(245,96,2,.18)}
.ledger__row{border-bottom:1px solid rgba(239,235,227,.07)}
.ledger__row .t{font-size:.74rem}
.ledger__sms{margin-top:1.15rem;font-family:var(--font-sans);font-style:normal;font-weight:460;
  font-size:.9rem;line-height:1.5;color:#1a1917;background:#dedbd4;
  border-radius:13px;border-bottom-left-radius:4px;padding:.75rem .9rem;max-width:34rem}
.ledger__pill{display:inline-flex;align-items:center;gap:.45rem;margin-top:.85rem;
  border:1px solid rgba(245,96,2,.45);color:var(--bone-dim);border-radius:99px;
  padding:.4rem .8rem;font-size:.72rem;font-weight:540;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .25s,transform .8s var(--ease) .25s}
.ledger__pill.in{opacity:1;transform:none}
.ledger__pill svg{color:var(--signal)}

/* who grid: four audiences */
.who__grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.who__grid{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}}
@media(max-width:640px){.who__grid{grid-template-columns:1fr;max-width:520px}}

/* teammate mark: real logomark replaces the CSS slat bars */
.tmate__mark img{width:13px;height:13px;object-fit:contain;display:block}

/* turn kicker: replaces the logo above the headline */
.turn__kicker{margin-bottom:1.6rem;font-size:clamp(1.05rem,1.6vw,1.35rem)}
.turn__kicker em{color:var(--bone-dim);font-weight:300}

/* hero ask: bigger presence above the headline (both heroes) */
.hero__ask{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:1.2rem}

/* "miss" reads lime, not orange (both heroes) */
.hero__title em{color:var(--accent)}

/* brand: 1.5x logo, vertically centred against the capsule nav */
.brand{top:1.1rem;height:54px;display:flex;align-items:center}
.brand img{height:33px}

/* hero ask: same size as the headline (both heroes) */
.hero__ask{font-size:clamp(2.9rem,7vw,6.4rem);line-height:1;margin-bottom:.5rem}

/* hero pins briefly so the copy holds before it fades — works standalone or mid-page */
.hero{min-height:0;height:180svh;display:block;overflow:visible;padding:0}
.hero__stick{position:sticky;top:0;width:100%;height:100svh;display:grid;place-items:center;overflow:clip;padding:0 var(--pad)}

/* turn: kicker matches the headline size; headline one line; both at 0.8x */
.turn__title{font-size:clamp(2.16rem,5.1vw,4.5rem)}
@media(min-width:1000px){.turn__title{white-space:nowrap}}
.turn__kicker{font-size:clamp(2.16rem,5.1vw,4.5rem);line-height:1.06;margin-bottom:.35rem}

/* traveler + orbit core: lime with the Team logomark (was orange star) */
.traveler{background:var(--lime)}
.traveler img{width:46px;height:46px;object-fit:contain;filter:brightness(0)}
.orbit__core .core__disc{fill:var(--lime)}
.orbit__core .core__mark{filter:brightness(0)}

/* scatter tiles: no depth-of-field blur — every tile legible */
.tile{filter:none}

/* turn logomark: sits above the headline, then travels to centre for the green-circle handoff */
.turn__mark{position:absolute;left:0;top:0;width:56px;height:56px;object-fit:contain;opacity:0;
  filter:brightness(0) var(--logo-invert);pointer-events:none;z-index:3;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.turn__mark{display:none}}

/* ═══ insight cards, redesigned: typed icons, tinted accents, consistent live dots ═══ */
.insight{--acc:var(--accent);--acc-soft:rgba(217,250,135,.13);
  background:#141210;border:1px solid rgba(239,235,227,.09);border-radius:16px;
  padding:1rem 1.15rem .95rem;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 30px 70px rgba(0,0,0,.42);position:relative;overflow:clip}
.insight[data-kind="risk"]{--acc:#f5c84b;--acc-soft:rgba(245,200,75,.13)}
.insight[data-kind="signal"]{--acc:var(--signal);--acc-soft:rgba(245,96,2,.15)}
.insight::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);opacity:.65}
.insight__head{display:flex;align-items:center;gap:.65rem}
.insight__ico{width:30px;height:30px;border-radius:9px;background:var(--acc-soft);color:var(--acc);
  display:grid;place-items:center;flex:none}
.insight__ico svg{width:15px;height:15px}
.insight__tag{color:var(--acc)}
.insight__tag--live::before{content:none}
.insight__dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:insdot 2.6s var(--ease-io) infinite}
.insight:nth-child(3) .insight__dot{animation-delay:.85s}
.insight:nth-child(4) .insight__dot{animation-delay:1.7s}
@keyframes insdot{0%{box-shadow:0 0 0 0 var(--acc-soft)}55%{box-shadow:0 0 0 9px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.insight p{margin:.7rem 0 .55rem}

/* reason: alternate the split — cards left, copy right (copy stacks first on mobile) */
.stage--rev{grid-template-columns:1.05fr 1fr}
.stage--rev .split__viz{order:1}
.stage--rev .split__copy{order:2}
@media(max-width:900px){
  .stage--rev .split__copy{order:1}
  .stage--rev .split__viz{order:2}
}

/* ledger: a feed of individual teammate tiles, not one big card */
.ledger{background:none;border:0;box-shadow:none;padding:0;
  display:flex;flex-direction:column;gap:.7rem}
.ledger__head{border-bottom:0;padding-bottom:.25rem}
.ledger__row{background:#141210;border:1px solid rgba(239,235,227,.09);border-radius:14px;
  padding:.9rem 1.05rem;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.ledger__sms{margin-top:.4rem}
.ledger__pill{align-self:flex-start;margin-top:.15rem}

/* who cards: tighter as they stack — 4 → 2x2 → 1 col without eating scroll */
@media(max-width:1200px){.whocard__img{height:180px}}
@media(max-width:640px){
  .whocard__img{height:120px}
  .whocard h3{padding:1.1rem 1.3rem .3rem;font-size:1.55rem}
  .whocard__line{padding:0 1.3rem;font-size:1rem}
  .whocard>p:last-child{padding:.45rem 1.3rem 1.25rem}
}

/* finale: no rule lines above or below */
.credo{border-bottom:0}
.footer{border-top:0}

/* footer tagline: title case, not caps */
.footer p{text-transform:none;letter-spacing:.14em}

/* ═══ insights, take 3: a reasoning rail — orbit-style nodes + editorial serif annotations, no app cards ═══ */
.split__viz--cards{position:relative;gap:2.2rem}
.split__viz--cards::after{content:'';position:absolute;left:14px;top:2%;bottom:2%;width:1px;z-index:0;
  background:linear-gradient(to bottom,transparent,var(--line) 15%,var(--line) 85%,transparent)}
.insight{background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 0 3.1rem;overflow:visible}
.insight::before{content:none}
.insight__ico{position:absolute;left:0;top:-1px;width:29px;height:29px;border-radius:50%;
  background:var(--ink);border:1px solid var(--acc);color:var(--acc);z-index:2;
  animation:insdot 2.6s var(--ease-io) infinite}
.insight:nth-child(3) .insight__ico{animation-delay:.85s}
.insight:nth-child(4) .insight__ico{animation-delay:1.7s}
.insight__ico svg{width:13px;height:13px}
.insight__tag{font-family:var(--font-serif);font-style:italic;font-weight:300;text-transform:none;
  letter-spacing:.02em;font-size:1.18rem;color:var(--acc)}
.insight__dot{display:none}
.insight p{margin:.35rem 0 .5rem;font-size:1rem;line-height:1.6}
.insight__src{display:inline-flex;align-items:center;gap:.55rem}
.insight__src::before{content:'';width:1.3rem;height:1px;background:var(--acc);opacity:.55}

/* credo: no top rule either */
.credo{border-top:0}

/* accent words: truth line + connect headline (lime in dark, orange in light) */
.truth em{color:var(--accent)}
.pin--connect .h2 em{color:var(--accent)}
.pin--reason .h2 em{color:var(--accent)}
.actwork .h2 em{color:var(--accent)}

/* splash tagline: original size (2x tried 2026-07-08, reverted per Simon) */
.loader__tag{text-align:center;line-height:1.6;padding:0 1.2rem}

/* finale + hero photos: dissolve via mask, no painted overlay layer */
.finale__bg::after{content:none}
.finale__bg{mask-image:linear-gradient(to bottom,transparent 4%,#000 42%,#000 58%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 4%,#000 42%,#000 58%,transparent 92%)}
.hero__bg::after{content:none}
.hero__bg{mask-image:radial-gradient(ellipse 72% 60% at 50% 46%,#000 12%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 72% 60% at 50% 46%,#000 12%,transparent 78%)}

/* finale: no photo layer at all — plain ink + the settling field, same as other sections */
.finale__bg{display:none}

/* nav narrator: Inter, not Nyght */
.capsule__name{font-family:var(--font-sans);font-style:normal;font-weight:480;font-size:.84rem;color:var(--bone-dim)}

/* turn headline: all-Inter, 0.8x */
.turn__title--plain{font-size:clamp(1.73rem,4.08vw,3.6rem)}
.turn__title--plain em{display:none}

/* ═══════════════════════════════════════════════════════
   MOBILE PASS (2026-07-08) — seamless small-screen layout
   ═══════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* scatter: tracklist rides the top, tiles live in the lower half — no overlap */
  .pin--scatter .pin__stage{align-items:flex-start;padding-top:12vh}
  .track{max-width:80vw}
  .tile{left:calc(var(--x) * .5 - 16%);top:calc(47% + var(--y) * .5)}

  /* connect + reason: un-pinned — content flows at natural height, scrub still drives the reveals */
  .pin--connect,.pin--reason{height:auto}
  .pin--connect .pin__stage,.pin--reason .pin__stage{position:relative;height:auto;min-height:100svh;
    padding:13vh var(--pad) 10vh;align-content:start}
  .stage--split{gap:2rem}
  .stage--split .h2{font-size:clamp(1.9rem,7.2vw,2.6rem)}
  .stage--split .lede{font-size:.95rem;line-height:1.6}
  .orbit{max-width:78vw;margin:0 auto}
  .split__viz--cards{gap:1.6rem}
  .insight{padding-left:2.7rem}
  .insight p{font-size:.92rem;line-height:1.55}
  .insight__tag{font-size:1.08rem}

  /* actwork + finale rhythm */
  .actwork{padding:16vh var(--pad)}
  .finale{padding-top:20vh}
}

/* mobile: no forced viewport height on flowed sections; rail line waits for its entries */
@media(max-width:900px){
  .pin--connect .pin__stage,.pin--reason .pin__stage{min-height:0}
}
.split__viz--cards::after{opacity:0;transition:opacity .6s var(--ease)}
.stage--split.is-live .split__viz--cards::after{opacity:1}

/* mobile: tighter section rhythm between flowed sections */
@media(max-width:900px){
  .pin--connect .pin__stage{padding-bottom:6vh}
  .pin--reason .pin__stage{padding-top:9vh}
}

/* mobile: the reversed split stacks like everything else */
@media(max-width:900px){.stage--rev{grid-template-columns:1fr}}

/* mobile scatter — one track at a time, its tiles in a neat column beneath.
   Rows overlap in one spot and cross-fade (JS drives opacity); each tile
   takes a --gi slot (set by JS) instead of the desktop scatter coords. */
@media(max-width:900px){
  .track{max-width:100%}
  .track__list{position:relative;height:3.4rem}
  .trow{position:absolute;top:0;left:0;width:100%;border-bottom:0;padding:.4rem 0;opacity:0}
  .trow span{font-size:clamp(2rem,8.4vw,2.6rem)}
  /* five-tile groups need the tighter rhythm to stay on stage */
  .tile{left:50%;top:calc(22% + var(--gi) * 14%);
    width:min(320px,86vw);min-width:0;max-width:none;margin-left:max(-160px,-43vw);
    padding:.8rem .95rem;rotate:calc(var(--r) * .4)}
}

/* mobile: the beta CTA stays in the capsule — persistent next to the burger */
@media(max-width:900px){
  .capsule__links{display:flex;gap:0;padding-right:0}
  .capsule__links .capsule__cta{padding:.48rem .85rem;font-size:.66rem;letter-spacing:.1em;white-space:nowrap}
}

/* small phones: drop the progress orb so brand + CTA + burger all fit */
@media(max-width:480px){
  .capsule{gap:.55rem;padding:.4rem .5rem}
  .capsule__orb,.capsule__act{display:none}
}

/* ═══ ACT 3.5 · the difference — a chat window vs Team (2026-07-09) ═══ */
.pin--chat{height:340vh}
/* flex + auto margins: content centers when it fits, but the top margin
   collapses on overflow so the headline anchors below the fixed nav (never
   sliding under it) instead of clipping. padding-top reserves nav clearance. */
.pin--chat .pin__stage{display:flex;flex-direction:column;align-items:center;
  row-gap:clamp(1.6rem,3.4vh,2.8rem);padding:5rem var(--pad) 0}
.pin--chat .chat__head{margin-top:auto}
.pin--chat .chat__pro{margin-top:0;margin-bottom:auto}
.chat__head{text-align:center}
.chat__head em{color:var(--accent)}
.chat__panes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,1.8rem);
  width:min(1160px,100%)}
.pane{background:#141210;border:1px solid rgba(239,235,227,.09);border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:clip}
.pane--bot{background:#121110}
.pane__bar{display:flex;align-items:center;gap:.55rem;padding:.95rem 1.25rem;
  border-bottom:1px solid rgba(239,235,227,.08);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:620;color:var(--bone-dim)}
.pane__bar i{font-style:normal;color:var(--bone-faint)}
.pane--team .pane__bar{color:var(--lime)}
.pane__bar .tmate__mark{width:22px;height:22px;border-radius:6px}
.pane__bar .tmate__mark img{width:11px;height:11px}
.pane__body{padding:1.15rem 1.25rem;flex:1;display:flex;flex-direction:column;gap:.95rem}
.pane__q{font-size:.98rem;font-weight:540;min-height:1.5em;color:var(--bone)}
.pane__q .caret{display:inline-block;width:7px;height:14px;background:var(--bone-dim);
  margin-left:2px;vertical-align:-2px;animation:blink 1.05s steps(2) infinite}
.pane__a{font-size:.9rem;line-height:1.6;color:var(--bone-dim);min-height:6em}
.strata{display:flex;flex-direction:column;gap:.45rem}
.stratum{display:grid;grid-template-columns:4.6rem 1fr;gap:.9rem;align-items:center;
  border:1px solid rgba(239,235,227,.07);border-radius:10px;padding:.5rem .8rem;
  font-size:.76rem;color:var(--bone-faint);opacity:.45;
  transition:opacity .45s var(--ease),border-color .45s,background .45s,color .45s}
.stratum b{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:640}
.stratum.lit{opacity:1;color:var(--bone-dim);border-color:rgba(217,250,135,.35);background:rgba(217,250,135,.05)}
.stratum.lit b{color:var(--lime)}
.pane__ans{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pane__ans.on{opacity:1;transform:none}
.pane__ans p{font-size:.9rem;line-height:1.6;color:var(--bone-dim)}
.pane__ans b{color:var(--bone);font-weight:600}
.pane__rcpts{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.45em 1.5em;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:620;color:rgba(217,250,135,.75)}
.pane__rcpts span{white-space:nowrap}
.pane__tags{padding:.85rem 1.25rem;border-top:1px solid rgba(239,235,227,.08);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bone-faint)}
.pane__tags--team{color:rgba(217,250,135,.7)}
.pane__brands{display:flex;align-items:center;justify-content:center;gap:1.7rem;padding:.85rem 1.25rem 1rem}
.pane__brands img{height:16px;width:auto;filter:brightness(0) invert(1);opacity:.4;transition:opacity .3s}
.pane:hover .pane__brands img{opacity:.6}
@media(max-width:900px){
  .pin--chat{height:auto}
  .pin--chat .pin__stage{position:relative;height:auto;min-height:0;padding:10vh var(--pad) 8vh;align-content:start}
  .chat__panes{grid-template-columns:1fr}
  .pane__a{min-height:0}
  .chat__head{font-size:clamp(1.9rem,7.2vw,2.6rem)}
}
@media (prefers-reduced-motion:reduce){
  .pin--chat{height:auto}
  .pane__ans{opacity:1 !important;transform:none !important}
  .stratum{opacity:1 !important}
  .pane__q .caret{animation:none !important}
}

/* the difference: compact on short viewports so head + panes always fit the pin */
@media(min-width:901px) and (max-height:840px){
  .chat__head{font-size:clamp(1.9rem,3.6vw,3rem)}
  .pin--chat .pin__stage{row-gap:1.2rem}
  .pane__a{min-height:4em}
  .pane__body{padding:.9rem 1.1rem;gap:.7rem}
  .stratum{padding:.4rem .75rem}
}

/* orbit: wordmark logos that ship dark render white on the node disc */
.onode image.oinv{filter:brightness(0) invert(1);opacity:.92}

/* ═══ the product — the Team app recreated, after the turn (2026-07-09).
   Ported from the Mission Narrative build, re-grounded for Behind the Glass:
   dark band (the brain field stays behind), glass device frame. ═══ */
#devband{position:relative;z-index:2;padding:6vh var(--pad) 16vh;display:grid;place-items:center}
#devband .mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:500;letter-spacing:.1em}
.device{width:min(1280px,94vw);border:1px solid rgba(154,150,140,.45);border-radius:24px;
  padding:10px;background:rgba(22,20,18,.4);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.device__screen{display:flex;flex-direction:column;aspect-ratio:1440/900;
  background:#100f0e;border:1px solid rgba(239,235,227,.1);border-radius:16px;
  overflow:hidden;box-shadow:0 44px 130px rgba(0,0,0,.45)}
@media(max-width:900px){.device__screen{aspect-ratio:auto}}
/* ═══ device screen: the Team app, recreated ═══ */
.dvc--app{background:#f2eee6;color:var(--ink);display:flex;flex-direction:column;
  aspect-ratio:1440/900;font-size:12px}
.dvc--app .mono{letter-spacing:.1em}
/* top bar */
.app__top{display:flex;align-items:center;gap:1rem;padding:.65rem 1rem;flex:none;
  background:#faf7f1;border-bottom:1px solid rgba(13,12,11,.08)}
.app__mark{height:16px;width:auto}
.app__crumb{font-size:.52rem;color:rgba(13,12,11,.55)}
.app__pill{font-size:.5rem;padding:.45em .9em;border:1px solid rgba(13,12,11,.16);border-radius:5px;color:rgba(13,12,11,.7)}
.app__on{margin-left:auto;display:flex;align-items:center;gap:.5em;font-size:.5rem;color:rgba(13,12,11,.5)}
.app__on i{width:6px;height:6px;border-radius:50%;background:var(--lime);border:1px solid rgba(13,12,11,.2)}
.app__share{font-size:.5rem;padding:.45em 1em;background:var(--ink);color:var(--bone);border-radius:99px}
/* columns */
.app__cols{flex:1;min-height:0;display:grid;grid-template-columns:172px 1fr 262px}
/* left nav */
.app__nav{background:#faf7f1;border-right:1px solid rgba(13,12,11,.08);padding:.9rem .95rem;overflow:hidden}
.app__navlab{font-size:.44rem;letter-spacing:.24em;color:rgba(13,12,11,.4);margin:.9rem 0 .5rem}
.app__navlab:first-child{margin-top:0}
.app__rel{font-weight:560;font-size:.78rem}
.app__newrel{margin-top:.45rem;font-size:.46rem;padding:.5em .8em;border:1px solid rgba(13,12,11,.14);border-radius:6px;color:rgba(13,12,11,.6);display:inline-block}
.app__nav ul{list-style:none}
.app__nav li{font-size:.68rem;font-weight:440;color:rgba(13,12,11,.66);padding:.32rem .5rem;border-radius:5px}
.app__nav li.on{background:rgba(13,12,11,.08);color:var(--ink);font-weight:560}
/* main */
.app__main{padding:1rem 1.25rem;overflow:hidden;min-width:0}
.app__chip{display:inline-flex;align-items:center;gap:.6em;font-size:.48rem;letter-spacing:.2em;
  background:var(--lime);color:var(--ink);padding:.5em 1em;border-radius:99px}
.app__chip i{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.app__h{margin-top:.55rem;font-family:var(--font-serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.2rem,2.2vw,2rem);line-height:1.05}
.app__h em{font-style:italic}
.app__count{margin-top:.3rem;font-family:var(--font-display);font-weight:440;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.1vw,1.9rem);display:flex;align-items:baseline;gap:.25em}
.app__count small{font-size:.45em;color:rgba(13,12,11,.45);font-weight:500}
.app__count span{color:rgba(13,12,11,.3)}
.app__count b{font-weight:440;background:var(--lime);border-radius:6px;padding:0 .18em;display:inline-flex;align-items:baseline}
.app__count b small{color:rgba(13,12,11,.6)}
.app__filters{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.app__filters span{display:inline-flex;align-items:center;gap:.5em;font-size:.46rem;letter-spacing:.14em;
  padding:.55em 1em;border:1px solid rgba(13,12,11,.13);border-radius:99px;color:rgba(13,12,11,.6);white-space:nowrap}
.app__filters span i{width:5px;height:5px;border-radius:50%;background:var(--signal)}
.app__f--dark{background:var(--ink);color:var(--bone) !important;border-color:var(--ink) !important}
.app__f--search{min-width:7rem}
.app__stacked{margin-top:.7rem;font-size:.46rem;color:rgba(13,12,11,.45);
  background:#faf7f1;border:1px solid rgba(13,12,11,.06);border-radius:6px;padding:.55em .9em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app__stacked b{color:#c2497c;font-weight:600}
/* day columns */
.app__days{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:.7rem;min-height:0}
.app__day{border-left:1px dashed rgba(13,12,11,.1);padding-left:.55rem;min-width:0}
.app__day:first-child{border-left:0;padding-left:0}
.app__day.is-today .app__date{background:#e7effa;border-radius:8px}
.app__date{display:flex;align-items:baseline;gap:.45em;padding:.45em .6em;font-size:.5rem;color:rgba(13,12,11,.5)}
.app__date b{font-weight:600;letter-spacing:.14em}
.app__date{font-size:.46rem}
.app__date span{letter-spacing:.16em}
.app__date em{font-style:normal;margin-left:auto;font-size:.9em;letter-spacing:.14em;
  background:#d5e3f6;padding:.3em .7em;border-radius:99px;color:rgba(13,12,11,.55)}
.app__date em.is-rel{background:var(--lime);color:var(--ink)}
.tcard{border-radius:9px;padding:.6rem .65rem;margin-top:.5rem;min-width:0}
.tcard b{display:block;font-size:.62rem;font-weight:540;line-height:1.35}
.tcard > span{display:inline-block;margin-top:.45rem;font-size:.4rem;letter-spacing:.16em;
  padding:.35em .8em;border-radius:99px;background:rgba(13,12,11,.1)}
.tcard__meta{font-size:.4rem;letter-spacing:.18em;margin-bottom:.35rem;opacity:.75}
.tcard--purple{background:#a743e6;color:#fff}
.tcard--purple > span{background:rgba(255,255,255,.2)}
.tcard--purple i{display:block;margin-top:1.2rem;font-size:.52rem;opacity:.75}
.tcard--dark{background:#241f1c;color:var(--bone)}
.tcard--dark > span{background:rgba(239,235,227,.14)}
.tcard--ref{background:#fdf4f5;border:1px dashed #eeb4c3}
.tcard__ref{font-size:.38rem;letter-spacing:.12em;color:#c2497c;margin-bottom:.35rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard--ref > span{background:#f7e2e8;color:#a45}
.tcard--add{border:1px dashed rgba(13,12,11,.18);color:rgba(13,12,11,.45);
  text-align:center;padding:.9rem 0;font-size:.46rem;letter-spacing:.18em}
/* teammate chat */
.app__chat{background:#161311;color:var(--bone);display:flex;flex-direction:column;
  border-left:1px solid rgba(13,12,11,.2);padding:.9rem .95rem;min-height:0}
.app__chathead{display:flex;align-items:center;gap:.55em;font-size:.5rem;letter-spacing:.16em;color:var(--bone-dim);
  padding-bottom:.7rem;border-bottom:1px solid var(--line);flex:none}
.app__chathead img{height:11px;width:auto}
.app__chathead em{font-family:var(--font-serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.15em}
.app__chathead span{margin-left:auto;font-size:.42rem;border:1px solid rgba(217,250,135,.4);color:var(--lime);
  padding:.3em .8em;border-radius:99px}
.app__scroll{flex:1;min-height:0;overflow:hidden;padding-top:.8rem}
.app__msg{margin-bottom:.85rem}
.app__msg u{display:block;text-decoration:none;font-size:.42rem;letter-spacing:.18em;color:var(--bone-faint);margin-bottom:.4rem}
.app__msg p{font-size:.66rem;line-height:1.5;background:#e9e5dc;color:#1d1b18;
  border-radius:10px;padding:.65rem .75rem}
.app__msg > span{display:inline-block;margin-top:.45rem;font-size:.42rem;letter-spacing:.14em;
  border:1px solid var(--line);border-radius:99px;padding:.45em .9em;color:var(--bone-dim)}
.app__msg--you{text-align:right}
.app__msg--you p{background:#2a2622;color:var(--bone);text-align:left}
.app__ask{flex:none;display:flex;align-items:center;font-size:.5rem;letter-spacing:.18em;color:var(--bone-faint);
  border:1px solid var(--line);border-radius:9px;padding:.8em .95em;margin-top:.4rem}
.app__ask i{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;font-style:normal;font-size:.6rem}
.app__feed{flex:none;display:flex;align-items:center;gap:.6em;font-size:.44rem;letter-spacing:.16em;
  color:var(--bone-faint);padding-top:.75rem}
.app__feed i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
@media(max-width:1100px){.app__cols{grid-template-columns:1fr 250px}.app__nav{display:none}}
@media(max-width:760px){
  .dvc--app{aspect-ratio:auto}
  .app__cols{grid-template-columns:1fr}
  .app__chat{border-left:0;border-top:1px solid rgba(13,12,11,.15);max-height:260px}
  .app__days{grid-template-columns:1fr 1fr}
  .app__days .app__day:nth-child(n+3){display:none}
  .app__crumb,.app__on{display:none}
}
/* app screen, animated: extra task colours, landings, chat flow */
.app__count u{text-decoration:none}
.tcard--blue{background:#4a68d8;color:#fff}
.tcard--blue > span{background:rgba(255,255,255,.2)}
.tcard--teal{background:#2f8f80;color:#fff}
.tcard--teal > span{background:rgba(255,255,255,.2)}
.tcard--amber{background:#e8b04b;color:var(--ink)}
.tcard--amber > span{background:rgba(13,12,11,.12)}
@keyframes tpop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.tcard--pop{animation:tpop .55s var(--ease) both}
.tcard--out{opacity:0;transform:translateY(-8px) scale(.97);transition:opacity .5s,transform .5s}
@keyframes msgin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.app__msg--in{animation:msgin .5s var(--ease) both}
.app__scroll{display:flex;flex-direction:column;justify-content:flex-end}

/* reduced motion: the scrubbed ledger renders complete */
@media (prefers-reduced-motion:reduce){
  .ledger__pill{opacity:1 !important;transform:none !important}
}

/* scatter: dark wordmark logos render white on the glass tiles */
.tile>img.winv{filter:brightness(0) var(--logo-invert);opacity:.92}

/* ═══ beta form → CRM (2026-07-09): names row above the email row ═══ */
.finale__form{flex-direction:column}
.finale__names,.finale__row{display:flex;gap:.7rem}
.finale__names input,.finale__row input{flex:1;min-width:0}
.finale__sent{border-radius:18px}
.finale__hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.finale__err{display:none;font-size:.85rem;color:var(--signal);text-align:center}
.finale__form.failed .finale__err{display:block}
.finale__form.busy button{opacity:.6;pointer-events:none}
@media(max-width:560px){.finale__names{flex-direction:column}}

/* hero headline (2026-07-09, Kedar copy direction): longer line than
   "Never miss a beat." — sized down so the one-line rule still holds */
.hero__title{font-size:clamp(2.3rem,4.8vw,4.6rem)}

/* ═══ Kedar copy pass (2026-07-09) ═══ */
/* scatter lead-in: the section's thesis, above the tracklist */
.track__lead{font-family:var(--font-display);font-weight:var(--head-weight);letter-spacing:var(--head-track);
  font-size:clamp(1.7rem,2.9vw,2.7rem);line-height:1.15;margin-bottom:2.4rem;max-width:30rem}
.track__lead em{color:var(--accent)}
/* the "one person remembers everything" beat — full stage weight, same
   grammar as the truth line that follows (bone body, lime Nyght italic) */
.truth--memory{font-size:clamp(2.2rem,5.2vw,4.4rem)}
/* turn line wraps to two lines; "operational brain" in lime Nyght */
.turn__title--plain{white-space:normal;max-width:56rem;margin:0 auto}
.turn__title--plain em{display:inline;font-family:var(--font-serif);font-style:italic;font-weight:300;
  letter-spacing:-.01em;color:var(--accent)}
/* chat comparison: the just-ask-Team line under the headline */
.chat__sub{max-width:46rem;margin:0 auto;text-align:center;
  font-size:clamp(.95rem,1.2vw,1.1rem);color:var(--bone-dim)}
/* who header: Inter h2 with the Nyght pair, Kedar's deck line as sub-copy */
.who__head{text-align:center;margin-bottom:1.2rem}
.who__head em{color:var(--accent)}
.who__sub{max-width:46rem;margin:0 auto 4.5rem;text-align:center;
  font-size:clamp(.95rem,1.2vw,1.1rem);color:var(--bone-dim)}
@media(max-width:900px){
  .track__lead{font-size:1.32rem;margin-bottom:1rem;max-width:100%}
  .tile{top:calc(26% + var(--gi) * 13.5%)}
}
@media(min-width:901px) and (max-height:840px){.chat__sub{font-size:.9rem}}

/* turn line: sized to break across two lines, not three */
.turn__title--plain{font-size:clamp(1.6rem,3.4vw,3rem);max-width:72rem}

/* short viewports: the two tall panes + head + sub + Pro line don't fit a
   pinned 100vh. Reclaim height from the (generous) pane internals so the whole
   comparison stays visible below the fixed nav rather than clipping. */
@media(min-width:901px) and (max-height:900px){
  .pin--chat .pin__stage{row-gap:.9rem;padding-top:4.5rem}
  .chat__head{font-size:clamp(1.9rem,3.4vw,2.7rem)}
  .chat__sub{font-size:.88rem}
  .chat__pro{margin-top:.5rem;font-size:.82rem}
  .pane__bar{padding:.68rem 1.25rem}
  .pane__body{padding:.85rem 1.25rem;gap:.7rem}
  .strata{gap:.32rem}
  .stratum{padding:.36rem .8rem}
  .pane__tags{padding:.6rem 1.25rem}
  .pane__brands{padding:.55rem 1.25rem .7rem}
}

/* connect lede: the keep-your-tools closer breathes as its own para */
.lede--follow{margin-top:.85rem}

/* ═══ cursor equalizer, take 2 (2026-07-10): each bar rides its own
   irregular track at its own tempo — like meters on a desk, not a wave.
   Durations are mutually prime-ish so the pattern never visibly loops. ═══ */
@keyframes eqb1{0%,100%{transform:scaleY(.35)}14%{transform:scaleY(.9)}32%{transform:scaleY(.5)}47%{transform:scaleY(1)}63%{transform:scaleY(.4)}81%{transform:scaleY(.75)}}
@keyframes eqb2{0%,100%{transform:scaleY(.6)}19%{transform:scaleY(.3)}38%{transform:scaleY(.95)}52%{transform:scaleY(.45)}72%{transform:scaleY(.85)}88%{transform:scaleY(.35)}}
@keyframes eqb3{0%,100%{transform:scaleY(.45)}12%{transform:scaleY(1)}29%{transform:scaleY(.55)}48%{transform:scaleY(.8)}66%{transform:scaleY(.3)}84%{transform:scaleY(.95)}}
@keyframes eqb4{0%,100%{transform:scaleY(.8)}16%{transform:scaleY(.4)}34%{transform:scaleY(.7)}55%{transform:scaleY(.3)}71%{transform:scaleY(1)}90%{transform:scaleY(.5)}}
@keyframes eqb5{0%,100%{transform:scaleY(.4)}21%{transform:scaleY(.75)}37%{transform:scaleY(.35)}56%{transform:scaleY(.9)}70%{transform:scaleY(.5)}86%{transform:scaleY(1)}}
.cursor.is-on .cursor__eq i:nth-child(1){animation:eqb1 .94s ease-in-out infinite}
.cursor.is-on .cursor__eq i:nth-child(2){animation:eqb2 1.27s ease-in-out infinite}
.cursor.is-on .cursor__eq i:nth-child(3){animation:eqb3 1.08s ease-in-out infinite}
.cursor.is-on .cursor__eq i:nth-child(4){animation:eqb4 1.43s ease-in-out infinite}
.cursor.is-on .cursor__eq i:nth-child(5){animation:eqb5 1.16s ease-in-out infinite}

/* homepage: the who-cards are doorways into the Solutions pages */
.whocard-link{display:block;color:inherit}

/* homepage: the finale had padding-bottom:0 for its own (now-hidden) footer;
   the shared site footer follows it, so give it real breathing room */
.finale{padding-bottom:clamp(5rem,10vw,9rem)}

/* ═══ light-theme touch-ups ═══ the primary CTAs hover to --bone (a warm
   cream on dark); on light that token is near-black, so hover to a deeper
   lime instead — keeps the dark on-accent label legible. */
:root[data-theme="light"] .btn--solid:hover,
:root[data-theme="light"] .finale__form button:hover{background:#c9e97a}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .btn--solid:hover,
  :root:not([data-theme="dark"]) .finale__form button:hover{background:#c9e97a}
}
/* the ambient-field photos read heavy on paper; soften them a touch */
:root[data-theme="light"] .hero__bg{opacity:.08}
:root[data-theme="light"] .catch__bg img{opacity:.32}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .hero__bg{opacity:.08}
  :root:not([data-theme="dark"]) .catch__bg img{opacity:.32}
}

/* ═══════════════════════════════════════════════════════════════════════
   ASTRO-EMBED OVERRIDES — appended by the port, NOT from onepager.css.
   A wholesale re-port overwrites everything above this banner, so anything
   this page needs that upstream doesn't must live down here or it is lost.
   (Re-applied by scratchpad/port_assets.py — keep the two in sync.)
   ═══════════════════════════════════════════════════════════════════════ */

/* BaseLayout imports src/styles/global.css, which is bundled AFTER this file
   and paints body #fff. `html body` (0,0,2 on elements) outranks its `body`
   regardless of order, so the page keeps its own ground without !important. */
html body{background:var(--ink);color:var(--bone);max-width:none;overflow-x:clip}




/* ── site footer on the homepage ──
   The delivered index.html ends with a minimal inline <footer class="footer">:
   logo, tagline, copyright, and ZERO links — so the homepage offered no route
   to Privacy, Terms or SMS terms while every interior page did. The homepage now
   renders the shared V2Footer instead (same as interior pages), so this inline
   one would be a second, poorer footer stacked above it. */
.finale > .footer{display:none}

/* ══ SOURCE PARITY: hide the page's own chrome ══
   Ported from the inline <style> in the source's index.html <head>, which the
   body port never picked up — I took the <body> and missed a rule that lived in
   the <head>.

   The source hides the capsule outright. Ours was showing it, which is the
   reported "✳ Intro" pill top-right, and it was also the root of three
   workarounds I'd stacked up: .capsule{top:5rem} to stop it colliding with
   V2Nav, .capsule__links{display:none} to kill the duplicate "Sign up free",
   and .brand{display:none} for the doubled wordmark. All three existed to make a
   visible capsule coexist with the site nav. The source's answer is simply not
   to show it — so those are deleted and this replaces them.

   .finale .footer goes too: the page renders the shared V2Footer instead of the
   delivered minimal one. ══ */
.capsule,.brand,.menu,.finale .footer{display:none !important}

/* ══ --accent must be LIME here ══
   This page does NOT load v2-base.css, so the body.v2 token block never reaches
   it and --accent falls through to global.css's :root{--accent:#f56002} —
   orange. The hero's italic ("A *brain* for music operations") resolves through
   var(--accent) at homepage-v2.css:579, so it rendered orange where the source
   renders lime.
   Declared on `html body` (0,0,2 + element) rather than :root (0,1,0) because
   global.css is bundled AFTER this file and would otherwise win. Custom
   properties inherit, so everything inside <body> picks it up. --signal stays
   orange: the source keeps it that way and it's a distinct brand role. ══ */
html body{
  --accent:#d9fa87;
}