/* ==========================================================================
   E:MERGENCE "Signal" design system — launch overhaul 2026-09-02
   Shared by every page under /previews/launch/. Depends on shared-header.js
   (sets html[data-emergence-theme]). Fonts: Unbounded / Space Grotesk / JetBrains Mono.
   ========================================================================== */

:root {
  --n-bg:#030503; --n-bg2:#070b07; --n-ink:#f2f7ec; --n-muted:#bcc9b3; --n-soft:#8f9b88;
  --n-line:rgba(203,237,176,.16); --n-line2:rgba(203,237,176,.34); --n-panel:rgba(9,16,10,.82);
  --n-panel2:rgba(14,22,15,.92); --n-accent:#b7ff27; --n-accent-ink:#06120a;
  --d-bg:#eef1e6; --d-bg2:#e4e9db; --d-ink:#0d1710; --d-muted:#4c5946; --d-soft:#6b7a63;
  --d-line:rgba(13,40,16,.16); --d-line2:rgba(13,40,16,.34); --d-panel:rgba(255,255,255,.86);
  --d-panel2:rgba(255,255,255,.96); --d-accent:#3c7f06; --d-accent-ink:#f4ffe6;

  --bg:var(--n-bg); --bg2:var(--n-bg2); --ink:var(--n-ink); --muted:var(--n-muted); --soft:var(--n-soft);
  --line:var(--n-line); --line2:var(--n-line2); --panel:var(--n-panel); --panel2:var(--n-panel2);
  --accent:var(--n-accent); --accent-ink:var(--n-accent-ink);

  --lime:#b7ff27; --lime2:#75d913; --cyan:#88e9ff; --cyan2:#39b8dc; --amber:#ffbf5e; --red:#ff6d5d;
  --violet:#9f8cff;
  --glow-lime:0 0 60px rgba(183,255,39,.28); --glow-cyan:0 0 80px rgba(136,233,255,.22);
  --shadow:0 30px 100px rgba(2,6,2,.55);
  --max:1280px; --r:22px; --r-sm:14px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --display:"Unbounded", "Space Grotesk", system-ui, sans-serif;
  --body:"Space Grotesk", Inter, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme:dark;
}
html[data-emergence-theme="light"] {
  --bg:var(--d-bg); --bg2:var(--d-bg2); --ink:var(--d-ink); --muted:var(--d-muted); --soft:var(--d-soft);
  --line:var(--d-line); --line2:var(--d-line2); --panel:var(--d-panel); --panel2:var(--d-panel2);
  --accent:var(--d-accent); --accent-ink:var(--d-accent-ink);
  --cyan:#0e7fa3; --cyan2:#0a6684; --amber:#b56a00; --glow-lime:0 0 60px rgba(60,127,6,.18); --glow-cyan:0 0 60px rgba(14,127,163,.16);
  --shadow:0 30px 80px rgba(20,40,20,.18);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* film grain, very subtle */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html[data-emergence-theme="light"] body::after{opacity:.06}

/* ---------- layout ---------- */
.sig{position:relative;z-index:2}
.wrap{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.wrap.narrow{width:min(880px,calc(100% - 48px))}
.section{padding:clamp(72px,10vw,140px) 0;position:relative}
.section.tight{padding:clamp(40px,6vw,80px) 0}
.section + .section{border-top:1px solid var(--line)}
.section.flush{border-top:0}
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:980px){.grid.three,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split.rev{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
@media (max-width:620px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.wrap{width:calc(100% - 32px)}}

/* ---------- type ---------- */
.kicker{display:inline-flex;align-items:center;gap:12px;font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.kicker.cyan{color:var(--cyan)}.kicker.cyan::before{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.kicker.amber{color:var(--amber)}.kicker.amber::before{background:var(--amber);box-shadow:none}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.98;margin:0 0 20px;text-wrap:balance}
h1,.display.xl{font-size:clamp(2.5rem,6.6vw,6rem);font-weight:900}
h2,.display.lg{font-size:clamp(2rem,4.4vw,3.6rem)}
h3,.display.md{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700;line-height:1.1}
.display.giant{font-size:clamp(2.6rem,6vw,5.4rem);line-height:.92;text-wrap:initial}
.display .ln{display:block}
h1{text-wrap:initial}
.lead{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;color:var(--muted);max-width:56ch;margin:0 0 28px}
.lead strong{color:var(--ink);font-weight:600}
.small{font-size:.92rem;color:var(--muted)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.mono b{color:var(--accent);font-weight:600}
.accent{color:var(--accent)}.cyan{color:var(--cyan)}.amber{color:var(--amber)}
.muted{color:var(--muted)}
.measure{max-width:62ch}
p{margin:0 0 16px}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;border:1px solid var(--line2);
  font:600 .95rem/1 var(--body);letter-spacing:.01em;color:var(--ink);background:transparent;transition:transform .35s var(--ease),background .3s,border-color .3s,box-shadow .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 10px 40px rgba(183,255,39,.18)}
.btn.primary:hover{box-shadow:0 16px 50px rgba(183,255,39,.32)}
.btn.cyan{border-color:var(--cyan)}
.btn .arrow{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.lg{padding:18px 30px;font-size:1.05rem}
.btn.sm{padding:11px 16px;font-size:.85rem}

/* ---------- surfaces ---------- */
.tile{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,34px);
  backdrop-filter:blur(14px);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;overflow:hidden}
.tile:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.tile h3{margin:14px 0 10px}
.tile p{color:var(--muted);margin:0}
.tile .icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(183,255,39,.08);border:1px solid var(--line);color:var(--accent)}
.tile .icon svg{width:22px;height:22px}
.tile.cyan .icon{color:var(--cyan);background:rgba(136,233,255,.07)}
.tile.amber .icon{color:var(--amber);background:rgba(255,191,94,.08)}
.tile .index{position:absolute;top:18px;right:22px;font:600 .72rem var(--mono);letter-spacing:.2em;color:var(--soft)}
.tile.glass{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.pill .dot.cyan{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.pill .dot.amber{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:24px 0}

/* ---------- device frames ---------- */
.device{--w:300px;position:relative;width:var(--w);aspect-ratio:9/19.4;border-radius:calc(var(--w) * .148);
  background:linear-gradient(160deg,#2a302a,#0b0e0b 40%,#0b0e0b 60%,#22282a);padding:calc(var(--w) * .033);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 100px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.8);transform-style:preserve-3d}
.device::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 30%,transparent 70%,rgba(255,255,255,.14));
  padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.device .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .118);overflow:hidden;background:#000;isolation:isolate}
.device .screen>img,.device .screen>video{width:100%;height:100%;object-fit:cover;object-position:top}
.device .island{position:absolute;top:calc(var(--w) * .028);left:50%;transform:translateX(-50%);width:calc(var(--w) * .26);height:calc(var(--w) * .066);border-radius:999px;background:#000;z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.device.plain .island{display:none}
.device.tilt{transform:perspective(1400px) rotateY(-16deg) rotateX(4deg) rotateZ(2deg)}
.device.tilt-r{transform:perspective(1400px) rotateY(16deg) rotateX(4deg) rotateZ(-2deg)}
.device.glow::after{content:"";position:absolute;inset:-20%;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;
  background:radial-gradient(closest-side,rgba(136,233,255,.35),rgba(183,255,39,.12) 55%,transparent 75%)}
@media (max-width:620px){.device{--w:min(300px,78vw)}}

/* laptop / desktop frame */
.laptop{position:relative;border-radius:18px 18px 8px 8px;background:linear-gradient(#1c211c,#0b0e0b);padding:14px 14px 22px;box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06)}
.laptop .screen{border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/10}
.laptop .screen>img,.laptop .screen>video{width:100%;height:100%;object-fit:cover}
.laptop::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-10px;height:12px;border-radius:0 0 14px 14px;background:linear-gradient(#2c332c,#0f130f)}

/* ---------- media bands (no boxy video players) ---------- */
.band{position:relative;overflow:hidden;border-radius:0}
.band .media{position:absolute;inset:0}
.band .media>img,.band .media>video{width:100%;height:100%;object-fit:cover}
.band .media.mask-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.band .media.mask-r{-webkit-mask-image:linear-gradient(270deg,transparent,#000 35%);mask-image:linear-gradient(270deg,transparent,#000 35%)}
.band .media.mask-y{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.band .media.dim::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(3,5,3,.6) 45%,transparent 100%)}
.band .content{position:relative;z-index:2}
.frame-cinema{position:relative;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--shadow),0 0 0 1px var(--line)}
.frame-cinema video{width:100%;height:auto;display:block}
.frame-cinema .hud{position:absolute;left:0;right:0;top:0;padding:16px 20px;display:flex;justify-content:space-between;gap:12px;font:600 .68rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#f2f7ec;
  background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none}
.frame-cinema .hud .rec{display:inline-flex;align-items:center;gap:8px}
.frame-cinema .hud .rec i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- marquee of screens ---------- */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:clamp(14px,2vw,28px);width:max-content;animation:marquee var(--speed,60s) linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
.marquee.reverse .track{animation-direction:reverse}
.marquee .shot{flex:0 0 auto;width:clamp(150px,16vw,220px);aspect-ratio:9/19.4;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 20px 50px rgba(0,0,0,.45);
  transition:transform .5s var(--ease)}
.marquee .shot img,.marquee .shot video{width:100%;height:100%;object-fit:cover;object-position:top}
.marquee .shot:hover{transform:translateY(-6px) scale(1.02)}
.marquee .shot.wide{aspect-ratio:16/10;width:clamp(260px,30vw,420px);border-radius:14px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- signal path (scroll-driven) ---------- */
.signal{--p:0;position:relative}
.signal svg.path{width:100%;height:auto;overflow:visible}
.signal .wire{fill:none;stroke:var(--line2);stroke-width:1.5}
.signal .live{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(136,233,255,.7));
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset .12s linear}
.signal .live.lime{stroke:var(--lime);filter:drop-shadow(0 0 8px rgba(183,255,39,.7))}
.signal .packet{fill:var(--cyan);filter:drop-shadow(0 0 10px var(--cyan));offset-rotate:0deg;offset-distance:calc(var(--p) * 100%)}
.signal .node{transition:opacity .4s,transform .5s var(--ease)}
.signal .node.dim{opacity:.35}
.stage-node{position:relative;padding:20px 22px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);transition:border-color .4s,box-shadow .5s,transform .5s var(--ease)}
.stage-node .k{font:600 .68rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.stage-node b{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.stage-node span{color:var(--muted);font-size:.92rem}
.stage-node.on{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(136,233,255,.25),var(--glow-cyan);transform:translateY(-3px)}
.stage-node.on .k{color:var(--cyan)}

/* concentric voice rings */
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{position:absolute;width:var(--s,320px);height:var(--s,320px);border-radius:50%;border:1px solid rgba(136,233,255,.35);animation:ring 4.5s var(--ease-out) infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes ring{0%{transform:scale(.35);opacity:0}12%{opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease-out);transition-delay:var(--rd,0s)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-30px)}[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="scale"]{transform:scale(.94)}

/* ---------- header offset + bulletin compatibility ---------- */
.site-header{position:relative;z-index:50}
.hero-space{height:0}

/* ---------- hero backdrop ---------- */
.backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.backdrop .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.backdrop .glow.a{width:60vw;height:60vw;right:-18vw;top:-10vw;background:radial-gradient(closest-side,rgba(136,233,255,.32),transparent 70%)}
.backdrop .glow.b{width:44vw;height:44vw;left:-10vw;bottom:-14vw;background:radial-gradient(closest-side,rgba(183,255,39,.22),transparent 70%)}
.backdrop .traces{position:absolute;inset:0;opacity:.35;-webkit-mask-image:radial-gradient(60% 60% at 70% 45%,#000,transparent);mask-image:radial-gradient(60% 60% at 70% 45%,#000,transparent)}
html[data-emergence-theme="light"] .backdrop .glow{opacity:.35}

/* ---------- runtime logos strip ---------- */
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logos a{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-weight:600;font-size:.95rem;transition:border-color .3s,transform .4s var(--ease)}
.logos a:hover{border-color:var(--accent);transform:translateY(-2px)}
.logos a img{width:26px;height:26px;border-radius:7px;object-fit:cover}

/* ---------- footer ---------- */
.sig-footer{border-top:1px solid var(--line);padding:48px 0 60px;color:var(--muted);font-size:.9rem}
.sig-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.sig-footer b{display:block;color:var(--ink);font-family:var(--display);font-weight:700;font-size:.9rem;margin-bottom:12px}
.sig-footer a{display:block;padding:4px 0;color:var(--muted)}.sig-footer a:hover{color:var(--accent)}
.sig-footer .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
@media (max-width:820px){.sig-footer .cols{grid-template-columns:1fr 1fr}}

/* ---------- caption feed (transcript synced to video) ---------- */
.captions{font-family:var(--body);display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto;padding-right:8px;scrollbar-width:thin}
.captions .line{padding:8px 12px;border-left:2px solid transparent;color:var(--soft);transition:color .3s,border-color .3s,background .3s;border-radius:0 10px 10px 0;cursor:pointer}
.captions .line .who{font:600 .62rem var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-right:8px}
.captions .line.dan .who{color:var(--amber)}.captions .line.claude .who{color:var(--cyan)}
.captions .line.on{color:var(--ink);border-color:var(--accent);background:rgba(183,255,39,.05)}
.captions .line.past{color:var(--muted)}

/* ---------- misc ---------- */
.eyebrow-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--muted);padding:8px 0}
.check svg{flex:0 0 auto;width:20px;height:20px;color:var(--accent);margin-top:2px}
.big-num{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.stat .l{font:600 .68rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:8px;z-index:999}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .marquee .track{animation:none}.marquee{overflow:auto;mask:none;-webkit-mask:none}
  .rings i{animation:none;opacity:.25;transform:scale(1)}
  .signal .live{transition:none}
  html{scroll-behavior:auto}
}

/* static render mode (?static): everything visible, no motion, viewport-relative heights capped */
html.static [data-reveal]{opacity:1;transform:none;transition:none}
html.static .marquee .track{animation:none}
html.static .rings i{animation:none;opacity:.25;transform:scale(1)}
html.static .hero{min-height:0!important}
html.static .signal{--p:1}