:root{
    --black:#000000;
    --spectral:#f0f0fa;
    --accent:#dc2626;
    --dim:rgba(240,240,250,0.55);
    --dimmer:rgba(240,240,250,0.35);
    --ghost-bg:rgba(240,240,250,0.08);
    --ghost-bg-hover:rgba(240,240,250,0.18);
    --ghost-border:rgba(240,240,250,0.35);
    --overlay:rgba(0,0,0,0.55);
    --font-display:'Saira', 'Geist', 'Inter', 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --font-body:'Geist', 'Inter', 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --font-mono:'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    --font-hero:'Saira', 'Geist', 'Inter', 'Archivo', sans-serif;
    --hero-weight:200;
    --type-scale:1;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#000;color:var(--spectral);}
  body{
    font-family:var(--font-body);
    font-weight:400;
    letter-spacing:0.005em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  /* Base type treatments */
  .u{ text-transform:uppercase; letter-spacing:0.08em; }
  .text-accent{ color:var(--accent); }
  /* Display: Saira (variable) at weight 200, width 95. Per spec — the
     narrower wdth axis gives the headlines a refined editorial feel; the
     light weight + uppercase + tight tracking sits in the premium
     grotesque register requested by the client. font-feature-settings
     keeps Geist alternates available if Saira fails to load. */
  .display{
    font-family:var(--font-hero, var(--font-display));
    font-weight:var(--hero-weight, 200);
    text-transform:uppercase;
    letter-spacing:-0.018em;
    line-height:0.95;
    font-variation-settings:'wdth' 95;
    font-feature-settings:'ss01' on, 'ss02' on, 'cv11' on;
    font-optical-sizing:auto;
  }
  /* Shared section headline tier (homepage problem/answer beats, engineers, etc.) */
  h2.display.section-headline{
    font-size: clamp(36px, 4.5vw, 64px);
    letter-spacing: -0.01em;
    line-height: 0.95;
  }
  #problem h2.display.section-headline{ line-height: 1.05; }
  .eyebrow{
    font-family:var(--font-display);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:14px;
    color:var(--spectral);
  }
  .micro{
    font-family:var(--font-body);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:13px;
    line-height:1.45;
    color:var(--dim);
  }
  .body{
    font-family:var(--font-body);
    font-size:18px;
    line-height:1.55;
    color:var(--spectral);
    font-weight:400;
    letter-spacing:0.005em;
    text-wrap: pretty;
  }
  /* Section takeaway: the punchline paragraph that closes a section.
     Used to be styled with var(--dim) which read like a footnote — promoted
     to full-spectral, slightly heavier, and led with a thin accent rule so
     a reader's eye stops here instead of scanning past. */
  .body.takeaway{
    color:var(--spectral);
    font-weight:500;
    font-size:20px;
    padding-left:18px;
    border-left:2px solid var(--spectral);
  }

  /* Nav */
  .nav{
    position:fixed; top:0; left:0; right:0;
    z-index:80;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 40px;
    mix-blend-mode:difference;
  }
  .nav .brand{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    letter-spacing:0.22em; font-size:15px; color:#fff;
  }
  .nav .links{ display:flex; gap:28px; }
  .nav a{
    color:#fff; text-decoration:none;
    font-family:var(--font-display); font-weight:500;
    text-transform:uppercase; letter-spacing:0.18em; font-size:12px;
    opacity:0.75;
  }
  .nav a:hover{ opacity:1; }

  /* Ghost button */
  .ghost{
    display:inline-flex; align-items:center; gap:14px;
    padding:14px 26px;
    background:var(--ghost-bg);
    color:var(--spectral);
    border:1px solid var(--ghost-border);
    border-radius:32px;
    font-family:var(--font-display);
    font-weight:600; text-transform:uppercase; letter-spacing:0.22em; font-size:12px;
    cursor:pointer;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
    user-select:none;
  }
  .ghost:hover{ background:var(--ghost-bg-hover); }
  .ghost .arrow{ display:inline-block; transform:translateY(-1px); }

  .cta-pair{
    margin-top:36px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }

  /* Section scaffolding */
  section.scene{
    position:relative;
    min-height:100vh;
    width:100%;
    overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  section.scene .bg{
    position:absolute; inset:0; z-index:0;
    background:#000;
  }
  section.scene .bg video,
  section.scene .bg img{
    width:100%; height:100%; object-fit:cover;
    opacity:.9;
  }
  /* Hero uses the product chip animation — show it whole, don't crop */
  section.scene#hero .bg video{
    object-fit:contain;
    object-position:center;
    opacity:1;
  }
  section.scene#hero .bg::after{
    /* lighter overlay so the chip reads clearly */
    background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.85) 100%);
  }
  section.scene .bg::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.75) 100%);
  }
  /* Radial vignette — smooths the video into black toward the edges.
     Intensity is controlled by --vignette (0 = off, 1 = default, up to ~2). */
  section.scene .bg::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    opacity: var(--vignette, 1);
    background:
      radial-gradient(ellipse 85% 75% at center,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,.35) 65%,
        rgba(0,0,0,.85) 92%,
        #000 100%);
  }
  section.scene#hero .bg::before{
    /* hero has a smaller object-fit:contain video — tighter vignette */
    background:
      radial-gradient(ellipse 90% 80% at center,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,.25) 72%,
        rgba(0,0,0,.8) 94%,
        #000 100%);
  }
  section.scene .frame{
    position:relative; z-index:2;
    padding:0 40px 100px;
    width:100%;
  }
  section.scene{
    padding-top:200px; /* reserve space for fixed-position topbar */
  }
  section.scene .topbar{
    position:absolute; top:0; left:0; right:0;
    z-index:2;
    display:flex; justify-content:space-between; align-items:center;
    padding:110px 40px 0;
  }

  /* Hero */
  .hero-headline{
    font-family:var(--font-hero, var(--font-display));
    font-weight:var(--hero-weight, 200);
    font-size: clamp(
      calc(64px * var(--type-scale, 1)),
      calc(11vw * var(--type-scale, 1)),
      calc(180px * var(--type-scale, 1))
    );
    letter-spacing:-0.02em;
    line-height:0.9;
    white-space:nowrap;
  }
  .hero-sub{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height:1.4;
    color:var(--spectral);
    max-width:680px;
  }
  .hero-sub-wrap{ position:relative; }

  /* bar chart strip */
  .chart-strip{
    position:relative; z-index:3;
    background:#000;
    padding:80px 40px 120px;
    border-top:1px solid rgba(240,240,250,0.08);
  }
  .chart-row{
    display:grid;
    grid-template-columns: 220px 1fr 140px;
    gap:24px;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid rgba(240,240,250,0.06);
  }
  .chart-row .label{
    font-family:var(--font-display);
    font-weight:600; text-transform:uppercase;
    letter-spacing:0.16em; font-size:13px;
    color:var(--spectral);
  }
  .chart-row .label small{
    display:block; color:var(--dim); font-weight:400; letter-spacing:0.12em; font-size:11px; margin-top:4px;
  }
  .bars{ display:flex; flex-direction:column; gap:10px; }
  .bar-track{ position:relative; height:28px; }
  .bar-fill{
    position:absolute; left:0; top:0; bottom:0;
    background:var(--spectral);
    display:flex; align-items:center; justify-content:flex-end;
    padding-right:14px;
    font-family:var(--font-mono);
    font-size:11px;
    color:#000;
    letter-spacing:0.08em;
    transform-origin:left center;
    width:0%;
    transition:width 1.2s cubic-bezier(.2,.7,.15,1);
  }
  .bar-fill.alt{ background:rgba(240,240,250,0.25); color:var(--spectral);}
  .bar-row{ display:grid; grid-template-columns: 90px 1fr; align-items:center; gap:16px; }
  .bar-row .who{
    font-family:var(--font-display);
    font-weight:600; text-transform:uppercase;
    letter-spacing:0.14em; font-size:11px;
    color:var(--dim);
  }
  .bar-row.us .who{ color:var(--spectral); }
  .multiplier{
    font-family:var(--font-display);
    font-weight:700;
    font-size:48px;
    line-height:1;
    color:var(--spectral);
    text-align:right;
    letter-spacing:-0.02em;
  }
  .multiplier small{
    display:block;
    font-size:11px; letter-spacing:0.18em; color:var(--dim); font-weight:500;
    margin-top:6px;
  }

  /* Problem divergence chart */
  .diverge{
    position:absolute;
    right:40px; bottom:140px;
    width:min(640px, 45vw);
    height:280px;
    z-index:2;
  }

  /* Panel / drawer */
  .panel-backdrop{
    position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,0.6);
    opacity:0; pointer-events:none;
    transition:opacity .35s ease;
  }
  .panel-backdrop.on{ opacity:1; pointer-events:auto; }
  .panel{
    position:fixed; top:0; right:0; bottom:0;
    width:min(720px, 92vw);
    z-index:101;
    background:#000;
    border-left:1px solid rgba(240,240,250,0.1);
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.2,.7,.15,1);
    overflow-y:auto;
  }
  .panel.on{ transform:translateX(0); }
  .panel .panel-hero{
    position:relative; height:360px; overflow:hidden;
    display:flex; align-items:flex-end; padding:32px;
  }
  .panel .panel-hero video,
  .panel .panel-hero img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:grayscale(.1) contrast(1.05);
  }
  .panel .panel-hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.85) 100%);
  }
  .panel .panel-hero h3{
    position:relative; z-index:2;
    font-family:var(--font-hero, var(--font-display));
    font-weight:var(--hero-weight, 200);
    font-variation-settings:'wdth' 95;
    font-size:56px;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    line-height:0.95;
  }
  .panel .close{
    position:absolute; top:22px; right:22px; z-index:3;
    width:44px; height:44px;
    border:1px solid var(--ghost-border);
    background:var(--ghost-bg);
    color:var(--spectral);
    border-radius:50%;
    cursor:pointer;
    font-family:var(--font-display); font-weight:500;
  }
  .panel .body-wrap{ padding:56px 48px 80px; display:flex; flex-direction:column; gap:28px; }

  /* Contact form — sober, sub-stratum inputs. Hairline border that
     brightens to spectral on focus. Body type in the fields so the form
     reads as written-into rather than UI'd. Lifted from index.html inline
     so non-homepage panels render identically. */
  .contact-form{ display:flex; flex-direction:column; gap:18px; margin-top:4px; }
  .contact-form .cf-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  @media (max-width:540px){ .contact-form .cf-row{ grid-template-columns:1fr; } }
  .contact-form .cf-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
  .contact-form .cf-label{
    font-family:var(--font-display); font-weight:500;
    text-transform:uppercase; letter-spacing:0.18em;
    font-size:11px; color:var(--dim);
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    width:100%; padding:12px 0;
    background:transparent; color:var(--spectral);
    border:0; border-bottom:1px solid rgba(240,240,250,0.18);
    font-family:var(--font-body); font-weight:300; font-size:17px;
    line-height:1.4; letter-spacing:0.005em;
    outline:0; border-radius:0;
    transition:border-color .25s ease;
  }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus{ border-bottom-color:var(--spectral); }
  .contact-form textarea{ resize:vertical; min-height:120px; }
  .contact-form select{
    appearance:none; -webkit-appearance:none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--dim) 50%),
      linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 8px) center;
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
    padding-right:28px; cursor:pointer;
  }
  .contact-form select option{ background:#0e0e12; color:var(--spectral); }
  .contact-form .cf-actions{ margin-top:8px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .contact-form .cf-submit{ cursor:pointer; }
  .contact-form .cf-status{
    font-family:var(--font-display); font-weight:500;
    text-transform:uppercase; letter-spacing:0.18em;
    font-size:11px; color:var(--dim);
  }
  .contact-form .cf-status.is-ok{ color:var(--spectral); }
  .contact-form .cf-status.is-err{ color:#f87171; }
  .contact-form.is-sent{ opacity:0.55; pointer-events:none; }
  .panel .body-wrap .cf-or{
    font-family:var(--font-display); font-weight:500;
    text-transform:uppercase; letter-spacing:0.22em;
    font-size:11px; color:var(--dim);
    margin-top:12px; padding-top:24px;
    border-top:1px solid rgba(240,240,250,0.12);
  }

  /* Testimonial */
  .quote{
    font-family:var(--font-display);
    font-weight:400;
    font-size: clamp(28px, 3.2vw, 48px);
    text-transform:none;
    letter-spacing:-0.005em;
    line-height:1.18;
    max-width:1100px;
    color:var(--spectral);
  }
  .attrib{
    margin-top:48px;
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-size:13px;
    color:var(--dim);
    line-height:2;
  }
  .attrib .name{ color:var(--spectral); font-weight:600; }

  /* 10000x */
  .tenk-wrap{
    position:relative; min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; background:#000;
  }
  .tenk-text{
    position:relative;
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    font-size: clamp(120px, 24vw, 400px);
    line-height:0.85;
    letter-spacing:-0.03em;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size:cover;
    background-position:center;
    z-index:2;
    text-align:center;
  }
  .tenk-sub{
    position:absolute;
    bottom:80px; left:0; right:0;
    text-align:center;
    z-index:3;
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size: clamp(14px, 1.4vw, 20px);
    color:var(--dim);
    padding:0 40px;
  }
  .tenk-chip{
    position:absolute;
    right:8%; top:50%; transform:translateY(-50%);
    width:min(420px, 30vw); height:min(420px, 30vw);
    z-index:4;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 30px 120px rgba(240,240,250,0.08);
    background:
      radial-gradient(circle at 30% 30%, rgba(200,210,230,.6), rgba(40,50,70,.8) 40%, rgba(10,12,18,1) 75%),
      #000;
    border:1px solid rgba(240,240,250,0.1);
    display:none; /* hidden — becomes placeholder only if enabled */
  }

  /* Accordion */
  .qa{
    border-top:1px solid rgba(240,240,250,0.12);
  }
  .qa .item{
    border-bottom:1px solid rgba(240,240,250,0.12);
    padding:0;
  }
  .qa button.q{
    width:100%; text-align:left;
    background:transparent; border:0; color:var(--spectral);
    padding:32px 0;
    display:flex; justify-content:space-between; align-items:center; gap:24px;
    cursor:pointer;
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size: clamp(20px, 2vw, 32px);
    font-weight:500;
  }
  .qa .plus{
    width:36px; height:36px; flex:0 0 36px;
    border:1px solid var(--ghost-border);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:14px;
    transition:transform .3s ease, background .3s ease;
  }
  .qa .item.on .plus{ transform:rotate(45deg); background:var(--spectral); color:#000; border-color:var(--spectral); }
  .qa .a{
    max-height:0; overflow:hidden;
    transition:max-height .45s ease, padding .45s ease;
    font-family:var(--font-body);
    font-size:19px; font-weight:300;
    color:var(--dim);
    line-height:1.5;
  }
  .qa .item.on .a{
    max-height:500px;
    padding:0 0 36px;
    color:var(--spectral);
  }

  /* CTA */
  .cta{
    position:relative;
    min-height:90vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:80px 40px;
    background:#000;
    border-top:1px solid rgba(240,240,250,0.1);
  }

  footer{
    background:#000;
    padding:80px 40px 40px;
    border-top:1px solid rgba(240,240,250,0.08);
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 2fr repeat(5, 1fr);
    gap:40px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(240,240,250,0.08);
  }
  .footer-grid h5{
    font-family:var(--font-display); font-weight:600;
    text-transform:uppercase; letter-spacing:0.2em; font-size:11px;
    color:var(--dim); margin-bottom:16px;
  }
  .footer-grid a{
    display:block;
    color:var(--spectral); text-decoration:none;
    font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:0.1em;
    font-size:13px;
    padding:4px 0; font-weight:400;
  }
  .footer-grid a:hover{ opacity:0.7; }
  .footer-foot{
    padding-top:30px;
    display:flex; justify-content:space-between;
    font-family:var(--font-display); text-transform:uppercase;
    letter-spacing:0.2em; font-size:11px; color:var(--dim);
  }

  /* Helpers */
  .spacer-huge{ height:20vh; }
  .scene-bottom{
    padding:0 40px 80px;
    max-width:1400px;
    position:relative; z-index:2;
  }
  .scene-bottom-wide{
    padding:0 40px 80px;
    width:100%;
    position:relative; z-index:2;
  }

  /* Tweaks panel */
  #tweaks{
    position:fixed; bottom:20px; right:20px;
    width:320px; z-index:200;
    background:#0a0a0a; border:1px solid rgba(240,240,250,0.18);
    border-radius:8px;
    padding:18px;
    display:none;
    font-family:var(--font-display);
    color:var(--spectral);
  }
  #tweaks h4{
    font-size:11px; text-transform:uppercase; letter-spacing:0.24em;
    color:var(--dim); font-weight:600; margin-bottom:12px;
  }
  #tweaks .row{ margin-bottom:14px; }
  #tweaks label{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.18em;
    color:var(--dim); margin-bottom:6px;
  }
  #tweaks select, #tweaks input[type=text]{
    width:100%; background:#000; color:var(--spectral);
    border:1px solid rgba(240,240,250,0.18); border-radius:4px;
    padding:8px 10px; font-family:var(--font-mono); font-size:12px;
  }
  #tweaks .toggle{
    display:flex; align-items:center; gap:10px;
    font-size:12px; text-transform:uppercase; letter-spacing:0.12em;
  }
  #tweaks input[type=range]{ width:100%; }

  /* Tweaks FAB — bottom-left so it doesn't clash with Marker.io (bottom-right) */
  .tweaks-fab{
    position:fixed; left:20px; bottom:20px;
    z-index:150;
    width:40px; height:40px;
    border-radius:50%;
    background:rgba(14,14,18,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(240,240,250,0.18);
    color:var(--spectral);
    font-family:var(--font-display);
    font-weight:600;
    font-size:11px;
    letter-spacing:0.18em;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .2s ease;
  }
  .tweaks-fab:hover{
    background:rgba(240,240,250,0.15);
    transform:scale(1.05);
  }
  .tweaks-fab.on{
    background:var(--spectral);
    color:#000;
    border-color:var(--spectral);
  }
  /* Hidden — TWEAKS defaults still load from HTML + tweaks-sync.js */
  #tweaks,
  .tweaks-fab{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Counter */
  .counter-wrap{
    padding:80px 40px 120px;
    background:#000;
    text-align:center;
    border-top:1px solid rgba(240,240,250,0.06);
  }
  .counter-label{
    font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:0.22em;
    font-size:12px; color:var(--dim); margin-bottom:20px;
  }
  .counter{
    font-family:var(--font-display);
    font-weight:700;
    font-size: clamp(64px, 10vw, 160px);
    line-height:1;
    letter-spacing:-0.02em;
  }
  .counter-sub{
    font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:0.18em;
    font-size:13px; color:var(--dim); margin-top:24px;
  }

  /* Progress scroll hint */
  .scroll-hint{
    position:absolute; left:40px; bottom:30px; z-index:4;
    font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:0.22em;
    font-size:11px; color:var(--dim);
    display:flex; align-items:center; gap:10px;
  }
  .scroll-hint .line{ width:40px; height:1px; background:var(--dim); }

  /* Mobile nav (Breakthrough page) — mirrors index.html pattern so the
     burger + frosted slide-in drawer is consistent across pages. */
  .nav-burger{
    display:none;
    width:44px; height:44px;
    border:1px solid rgba(240,240,250,0.30);
    background:rgba(14,14,18,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius:50%;
    cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center;
    gap:5px; padding:0;
    color:var(--spectral);
    transition: background .2s ease, transform .2s ease;
  }
  .nav-burger:hover{ background:rgba(240,240,250,0.15); }
  .nav-burger span{
    display:block; width:18px; height:1px;
    background:currentColor;
    transition: transform .35s cubic-bezier(.2,.8,.15,1), opacity .25s ease;
    will-change: transform, opacity;
  }
  body.menu-open .nav-burger span:nth-child(1){ transform: translateY(3px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2){ opacity:0; }
  body.menu-open .nav-burger span:nth-child(3){ transform: translateY(-3px) rotate(-45deg); }

  .mobile-menu-backdrop{
    position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity:0; pointer-events:none;
    transition: opacity .4s ease;
  }
  body.menu-open .mobile-menu-backdrop{ opacity:1; pointer-events:auto; }

  .mobile-menu{
    position:fixed; top:0; right:0; bottom:0;
    width: min(720px, 92vw);
    z-index:101;
    background: rgba(14,14,18,0.72);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-left:1px solid rgba(240,240,250,0.12);
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.2,.8,.15,1), box-shadow .3s ease;
    overflow-y:auto;
    overscroll-behavior: contain;
    display:flex; flex-direction:column;
    padding: 110px 32px 40px;
    gap: 6px;
  }
  body.menu-open .mobile-menu{
    transform: translateX(0);
    box-shadow: -40px 0 80px rgba(0,0,0,0.6);
  }
  .mobile-menu .close{
    position:absolute; top:22px; right:22px; z-index:3;
    width:44px; height:44px;
    border:1px solid rgba(240,240,250,0.3);
    background:rgba(14,14,18,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color:var(--spectral);
    border-radius:50%;
    cursor:pointer;
    font-family:var(--font-display); font-weight:400; font-size:20px;
    display:flex; align-items:center; justify-content:center;
    transition: background .2s ease, transform .2s ease;
  }
  .mobile-menu .close:hover{ background:rgba(240,240,250,0.15); transform:scale(1.05); }
  .mobile-menu .menu-eyebrow{
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.24em;
    font-size:11px; font-weight:500;
    color:var(--dim);
    margin-bottom:18px;
  }
  .mobile-menu a.menu-link{
    color:var(--spectral); text-decoration:none;
    font-family:var(--font-hero);
    font-weight:var(--hero-weight);
    text-transform:uppercase;
    letter-spacing:-0.005em;
    line-height:1.05;
    font-size: clamp(28px, 7vw, 44px);
    padding: 18px 0;
    border-bottom:1px solid rgba(240,240,250,0.08);
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
  }
  .mobile-menu a.menu-link:last-of-type{ border-bottom: 0; }
  .mobile-menu a.menu-link .arrow{
    font-family:var(--font-display);
    font-weight:400; font-size:18px;
    color:var(--dim);
    transition: transform .3s cubic-bezier(.2,.8,.15,1), color .2s ease;
  }
  .mobile-menu a.menu-link:hover{ color:var(--spectral); }
  .mobile-menu a.menu-link:hover .arrow{ transform: translateX(6px); color:var(--spectral); }
  .mobile-menu .menu-cta{
    margin-top:32px;
    padding:16px 26px;
    background:var(--spectral);
    color:#000;
    border:1px solid var(--spectral);
    border-radius:32px;
    font-family:var(--font-display);
    font-weight:600; text-transform:uppercase; letter-spacing:0.22em; font-size:12px;
    cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    align-self:flex-start;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .mobile-menu .menu-cta:hover{
    background:var(--accent);
    color:var(--spectral);
    border-color:var(--accent);
  }
  body.menu-open{ overflow:hidden; }

  @media (max-width: 1024px){
    .nav .links{ display:none; }
    .nav-burger{ display:flex; }
  }

  @media (max-width: 800px){
    .cta-pair{
      flex-direction:column;
      align-items:stretch;
    }
    .cta-pair .ghost{
      justify-content:center;
      width:100%;
    }
    .nav{ padding:18px 20px; }
    .chart-row{ grid-template-columns: 1fr; gap:14px; }
    .multiplier{ text-align:left; font-size:36px;}
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .topbar{
      padding:96px 20px 0 !important;
      flex-wrap:wrap;
      align-items:flex-start;
      gap:10px 16px;
    }
    section.scene .topbar .micro{
      font-size:11px;
      letter-spacing:0.12em;
      line-height:1.4;
      max-width:min(100%, 220px);
      text-align:right;
    }
    section.scene{ padding-top:160px; }
    section.scene .frame{ padding:0 20px 56px; }
    .beat{ padding:120px 20px; }
    .panel .body-wrap{ padding:40px 20px 64px; }
    .panel .panel-hero{ height:280px; padding:24px 20px; }
    .panel .panel-hero h3{ font-size:clamp(36px, 10vw, 56px); }
    .panel .body-wrap a[href^="mailto:"]{
      font-size:clamp(17px, 4.6vw, 24px) !important;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .chart-strip{ padding:56px 20px 80px; }
    .hero-headline{
      white-space:normal;
      overflow:visible;
      display:block;
    }
  }

  @media (max-width: 540px){
    .footer-grid{ grid-template-columns:1fr; gap:28px; }
    .team-grid{ grid-template-columns:1fr; }
    .team-grid.leadership{ grid-template-columns:1fr; }
    .perf-stats .s{ padding:28px 18px; min-width:0; }
    .reveal-proof-wrap .proof{ grid-template-columns:1fr; }
    .reveal-scene .reveal-content{ padding:56px 20px; }
    .reveal-scene .reveal-content h2.display{ font-size:clamp(44px, 12vw, 60px); }
    .reveal-proof-wrap{ padding:56px 20px 120px; }
    section.scene .topbar{
      flex-direction:column;
      align-items:flex-start;
    }
    section.scene .topbar .micro{
      text-align:left;
      max-width:100%;
    }
  }


  /* ================================================== */
  /* THE BREAKTHROUGH — page-specific components        */
  /* ================================================== */

  .beat{
    position:relative;
    padding:200px 40px;
    border-top:1px solid rgba(240,240,250,0.08);
  }
  .beat-label{
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:clamp(13px, 1.15vw, 15px);
    line-height:1.45;
    color:var(--dim);
    display:flex; align-items:center; gap:14px;
    margin-bottom:48px;
  }
  .beat-label .num{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--spectral);
    border:1px solid var(--ghost-border);
    padding:5px 12px;
    border-radius:3px;
    letter-spacing:.08em;
    line-height:1.2;
  }
  .beat-wrap{ max-width:1400px; margin:0 auto; }
  .beat h2.display{
    font-size:clamp(36px, 4.5vw, 64px);
    letter-spacing:-0.01em;
    max-width:1100px;
  }
  .beat .lede{
    font-family:var(--font-body);
    font-size:clamp(20px, 1.6vw, 26px);
    line-height:1.45;
    color:var(--dim);
    max-width:780px;
    margin-top:32px;
    font-weight:300;
  }

  /* two-step diagram (Prefill vs Decode). Width split is intentionally
     lopsided (≈78/22) to mirror prefill's dominance — closer to the 93%/7%
     token ratio without making the decode card unreadable at the extreme. */
  .two-step{
    display:grid; grid-template-columns: 7fr 2fr; gap:24px;
    margin-top:70px;
    align-items:stretch;
  }
  .two-step .card{
    border:1px solid rgba(240,240,250,0.12);
    padding:36px;
    position:relative;
    display:flex; flex-direction:column;
    background:linear-gradient(180deg, rgba(240,240,250,0.02) 0%, rgba(0,0,0,0) 100%);
  }
  /* Grows so spec rows (Operation / Bottleneck) sit on the same baseline
     when the two cards stretch to equal height in the side-by-side grid. */
  .two-step .card-fill{ flex:1 1 auto; min-height:0; }
  /* Visual separation between the two cards: the prefill (left) card is
     the focal point of the section so it gets a brighter border + a hint
     of inner glow; the decode card stays quieter so the eye lands on
     prefill first. References the homepage slideout-panel hierarchy. */
  .two-step .card:first-of-type{
    border-color:rgba(240,240,250,0.22);
    background:
      linear-gradient(180deg, rgba(240,240,250,0.045) 0%, rgba(0,0,0,0) 60%),
      radial-gradient(120% 80% at 0% 0%, rgba(240,240,250,0.06) 0%, rgba(0,0,0,0) 60%);
    box-shadow:inset 0 0 0 1px rgba(240,240,250,0.04);
  }
  .two-step .card:last-of-type{
    border-color:rgba(240,240,250,0.06);
    background:transparent;
  }
  .two-step .card h3{
    font-family:var(--font-display); font-weight:200;
    text-transform:uppercase; letter-spacing:-0.005em;
    font-size:32px; line-height:1;
  }
  .two-step .card .pct{
    font-family:var(--font-display); font-weight:200;
    font-size:80px; line-height:1;
    letter-spacing:-0.02em; margin-top:20px;
    font-variant-numeric:tabular-nums;
  }
  /* Three-up percentage cluster on the prefill card. Three metrics
     (% of tokens / % of GPU time / % of energy) sit side-by-side so a
     reader doesn't anchor on a single "93%" and conflate it with the
     other two figures.

     Each cell is a tightly-grouped unit: number on top, hairline rule,
     label below — the hairline-gap pattern from the side-panel stat
     pairs (CONVENTIONAL / NEUROPHOS) but extended to three cells, so
     the trio reads as one framed bank of stats instead of three loose
     numbers. */
  .two-step .card .pct-trio{
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap:1px;
    background:rgba(240,240,250,0.12);
    margin-top:28px;
    border-top:1px solid rgba(240,240,250,0.12);
    border-bottom:1px solid rgba(240,240,250,0.12);
  }
  .two-step .card .pct-cell{
    min-width:0;
    background:#000;
    padding:24px 22px 20px;
    display:flex; flex-direction:column; gap:10px;
  }
  .two-step .card .pct-num{
    font-family:var(--font-display); font-weight:200;
    font-size:72px; line-height:1;
    letter-spacing:-0.02em;
    font-variant-numeric:tabular-nums;
    color:var(--accent);
  }
  .two-step .card .pct-num .pct-sym{
    font-size:0.55em; font-weight:600;
    margin-left:2px; color:inherit;
  }
  /* Responsive pct sizing. NOTE: these blocks must stay BELOW the base
     rules above — same specificity, so source order decides, and an
     earlier attempt in the 540px block higher up was silently dead (the
     base 72px/3-col always won). That dead rule is why the numbers
     clipped on phones: 72px "93%" ~116px wide vs ~78px cells.
     Bands: 961-1060 = two cards side by side (narrow cells);
     541-960 = single card, three cells; <=540 = cells stack. */
  @media (max-width: 1060px) and (min-width: 961px){
    .two-step .card .pct-num{ font-size:clamp(40px, 6.4vw, 72px); }
  }
  @media (max-width: 960px){
    .two-step .card .pct-num{ font-size:clamp(34px, 9.1vw, 72px); }
  }
  @media (max-width: 540px){
    .two-step .card .pct-trio{ grid-template-columns:1fr; }
    .two-step .card .pct-num{ font-size:clamp(48px, 14vw, 72px); }
  }
  .two-step .card .pct-lab{
    margin-top:0;
    font-family:var(--font-mono); font-size:11px;
    text-transform:uppercase; letter-spacing:0.16em;
    color:var(--dim);
  }
  .two-step .card .sub{ color:var(--dim); margin-top:14px; font-family:var(--font-body); font-size:17px; }
  .two-step .card ul{ list-style:none; margin-top:24px; flex-shrink:0; }
  .two-step .card li{
    font-family:var(--font-body); color:var(--spectral);
    font-size:16px; padding:8px 0; border-top:1px solid rgba(240,240,250,0.08);
    display:flex; justify-content:space-between; align-items:center; gap:20px;
  }
  .two-step .card li:first-child{ border-top:0; }
  .two-step .card li span:last-child{
    color:var(--dim); font-family:var(--font-mono); font-size:13px;
    margin-left:auto; text-align:right; flex-shrink:0;
  }

  /* Token-mix bars: two side-by-side vertical stacked bars (Q1 '23 vs.
     Now) flanking an arrow callout. Bar height is generous (480px) so
     the 11% slab still has room to fit its percentage label without
     resorting to a min-height that would break the proportional read. */
  .token-bars{
    position:relative;
    margin-top:60px;
    border:1px solid rgba(240,240,250,0.1);
    padding:36px 36px 32px;
  }
  .token-bars .tb-source{
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:11px;
    color:rgba(240,240,250,0.5);
    text-align:right;
    margin-bottom:24px;
  }
  .token-bars .tb-grid{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 36px;
    align-items: stretch;
  }
  @media (max-width: 760px){
    .token-bars .tb-grid{
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }
  .token-bars .tb-when{
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:11px;
    color:var(--dim);
    margin-bottom:14px;
  }
  .token-bars .tb-bar{
    display:flex;
    flex-direction:column-reverse;
    height: 480px;
    border:1px solid rgba(240,240,250,0.12);
    overflow:hidden;
  }
  /* Coding slab anchored to the bottom — share grows upward. Labels
     sit on the top edge of the slab so they ride the rising fill during
     the GSAP height tween. "Now" column stays pure white; pulse uses
     grey overlays (multiply) so it reads on #f0f0fa. */
  .token-bars .tb-coding{
    position:relative;
    isolation:isolate;
    flex-shrink:0;
    box-sizing:border-box;
    height: var(--share, 50%);
    min-height: 100px;
    background: #f0f0fa;
    color: #000;
    padding: 12px 16px;
    display:flex; flex-direction:column; justify-content:flex-start;
    transition: height 1.2s cubic-bezier(.2,.8,.2,1);
  }
  /* Top edge of the white slab — primed to keep rising */
  .token-bars .tb-coding::after{
    content:'';
    position:absolute;
    left:0; right:0; top:0; bottom:auto;
    height:2px;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(240,240,250,0.85) 16%,
      rgba(255,255,255,0.98) 50%,
      rgba(240,240,250,0.85) 84%,
      transparent 100%
    );
    box-shadow:
      0 0 6px 1px rgba(240,240,250,0.7),
      0 0 16px 2px rgba(240,240,250,0.35);
  }
  .token-bars .tb-col:last-child .tb-coding{
    overflow:hidden;
    /* Coding sits on bottom of bar; scale from bottom = top edge lifts only */
    transform-origin:bottom center;
    backface-visibility:hidden;
  }
  /* Grey shine band — sweeps bottom → top on white */
  .token-bars .tb-col:last-child .tb-coding::before{
    content:'';
    position:absolute;
    left:-25%; right:-25%;
    top:0;
    height:50%;
    pointer-events:none;
    z-index:1;
    background:linear-gradient(
      180deg,
      rgba(30,30,42,0) 0%,
      rgba(30,30,42,0.14) 28%,
      rgba(30,30,42,0.38) 50%,
      rgba(30,30,42,0.14) 72%,
      rgba(30,30,42,0) 100%
    );
    transform:translateY(310%);
    will-change:transform;
    mix-blend-mode:multiply;
    opacity:0.9;
  }
  .token-bars .tb-col:last-child .tb-coding::after{
    height:2px;
    opacity:0.85;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(45,45,58,0.45) 10%,
      rgba(25,25,38,0.72) 50%,
      rgba(45,45,58,0.45) 90%,
      transparent 100%
    );
    box-shadow:
      0 0 8px 1px rgba(0,0,0,0.14),
      0 0 18px 3px rgba(0,0,0,0.08);
  }
  .token-bars .tb-coding .tb-pct,
  .token-bars .tb-coding .tb-label{
    position:relative;
    z-index:2;
  }
  /* Spill glow at the seam above the rising white slab */
  .token-bars .tb-col:last-child .tb-other{
    position:relative;
  }
  .token-bars .tb-col:last-child .tb-other::before{
    content:'';
    position:absolute;
    bottom:0; left:0; right:0; top:auto;
    height:1px;
    pointer-events:none;
    opacity:0.55;
    background:rgba(0,0,0,0.28);
    box-shadow:
      0 0 10px 2px rgba(0,0,0,0.1),
      0 0 22px 4px rgba(0,0,0,0.06);
  }
  /* Shared cycle: grey sweep (linear) + top-edge flare / stretch in the
     last ~15% when the band reaches the slab top. */
  @keyframes tb-coding-fill-shine{
    0%{ transform:translateY(310%); }
    100%{ transform:translateY(-130%); }
  }
  @keyframes tb-coding-edge-hit{
    0%, 82%{
      opacity:0.72;
      filter:brightness(1);
      box-shadow:
        0 0 6px 1px rgba(0,0,0,0.1),
        0 0 14px 2px rgba(0,0,0,0.06);
    }
    88%, 94%{
      opacity:1;
      filter:brightness(0.93);
      box-shadow:
        0 0 12px 3px rgba(0,0,0,0.22),
        0 0 28px 6px rgba(0,0,0,0.12),
        0 0 48px 10px rgba(0,0,0,0.06);
    }
    96%, 100%{
      opacity:0.72;
      filter:brightness(1);
      box-shadow:
        0 0 6px 1px rgba(0,0,0,0.1),
        0 0 14px 2px rgba(0,0,0,0.06);
    }
  }
  @keyframes tb-coding-spill-hit{
    0%, 82%{ opacity:0.45; }
    88%, 94%{ opacity:0.95; }
    96%, 100%{ opacity:0.45; }
  }
  /* Top edge only: vertical scale from bottom when shine reaches slab top
     (late in the 2.6s linear sweep — ~86–98%). */
  @keyframes tb-coding-top-bounce{
    0%, 84%{ transform:scale3d(1, 1, 1); }
    88%{ transform:scale3d(1, 1.018, 1); }
    91%{ transform:scale3d(1, 0.996, 1); }
    94%{ transform:scale3d(1, 1.006, 1); }
    98%, 100%{ transform:scale3d(1, 1, 1); }
  }
  @media (prefers-reduced-motion: no-preference){
    .token-bars.is-gsap-animated[data-bars-ready="true"] .tb-col:last-child .tb-coding::before{
      animation:tb-coding-fill-shine 2.6s linear infinite;
    }
    .token-bars.is-gsap-animated[data-bars-ready="true"] .tb-col:last-child .tb-coding::after{
      animation:tb-coding-edge-hit 2.6s linear infinite;
    }
    .token-bars.is-gsap-animated[data-bars-ready="true"] .tb-col:last-child .tb-other::before{
      animation:tb-coding-spill-hit 2.6s linear infinite;
    }
    .token-bars.is-gsap-animated[data-bars-ready="true"] .tb-col:last-child .tb-coding{
      animation:tb-coding-top-bounce 2.6s linear infinite;
    }
  }
  /* GSAP bar sequence — only hide pre-animation when JS has taken over */
  .token-bars.is-gsap-animated[data-bars-ready="false"] .tb-coding{
    height:0;
    min-height:0;
    overflow:hidden;
  }
  .token-bars.is-gsap-animated[data-bars-ready="false"] .tb-coding .tb-pct,
  .token-bars.is-gsap-animated[data-bars-ready="false"] .tb-coding .tb-label{
    opacity:0;
  }
  .token-bars.is-gsap-animated[data-bars-ready="false"] .tb-arrow{
    opacity:0;
  }
  .token-bars.is-gsap-animated .tb-coding{
    transition:none;
  }
  .token-bars .tb-other{
    flex:1 1 auto;
    background: rgba(240,240,250,0.10);
    color: var(--spectral);
    padding: 14px 18px;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .token-bars .tb-pct{
    font-family:var(--font-hero);
    font-weight: var(--hero-weight);
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1;
    letter-spacing: -0.01em;
    display:block;
  }
  /* Coding slab labels — large enough to read as the hero metric */
  .token-bars .tb-coding .tb-pct{
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight:200;
    letter-spacing:-0.025em;
    line-height:0.95;
  }
  .token-bars .tb-label{
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing: 0.18em;
    font-size: 10px;
    margin-top: 6px;
    opacity: 0.7;
  }
  .token-bars .tb-coding .tb-label{
    font-size: clamp(11px, 1.15vw, 14px);
    letter-spacing:0.22em;
    margin-top:10px;
    opacity:0.85;
    color:rgba(0,0,0,0.72);
    font-weight:600;
  }
  .token-bars .tb-arrow{
    align-self:center;
    text-align:center;
    color:var(--spectral);
    min-width: 130px;
  }
  .token-bars .tb-arrow-num{
    font-family:var(--font-hero);
    font-weight: var(--hero-weight);
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .token-bars .tb-arrow-cap{
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:10px;
    color:var(--dim);
    margin-top:10px;
    line-height:1.4;
  }
  @media (max-width: 760px){
    .token-bars .tb-arrow svg{ display:none; }
    .token-bars .tb-bar{ height: 380px; }
  }

  /* S-curve card — same approach. viewBox is 1200:360 = ~3.33:1. */
  .curve-card{
    border:1px solid rgba(240,240,250,0.1);
    padding:40px; margin-top:24px;
  }
  .curve-card svg{
    width:100%;
    aspect-ratio: 1200 / 360;
    height:auto;
    display:block;
    margin-top:16px;
    overflow:visible;
  }
  /* Right callout — agentic coding endpoint (larger + brand accent) */
  .curve-card .curve-points text.curve-end-pct{
    font-size:24px;
    fill:var(--accent);
  }
  .curve-card .curve-points text.curve-end-lab{
    font-size:13px;
    fill:var(--accent);
    opacity:0.88;
  }
  /* S-curve draw-in — same pathLength technique as homepage divergence chart */
  .curve-card .curve-line{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    transition:stroke-dashoffset 1200ms cubic-bezier(.4, 0, .2, 1);
  }
  .curve-card.in .curve-line{
    stroke-dashoffset:0;
  }
  .curve-card .curve-points{
    opacity:0;
    transition:opacity 650ms ease;
  }
  .curve-card.in .curve-points{
    opacity:1;
    transition-delay:1050ms;
  }
  /* Traveling shine streaks (homepage demand-pulse pattern) */
  .curve-card .curve-pulse{
    stroke-dashoffset:0;
    opacity:0;
    transition:opacity 600ms ease;
  }
  .curve-card .curve-pulse-1{ stroke-dasharray:0.05 1; }
  .curve-card .curve-pulse-2{ stroke-dasharray:0.09 1; }
  .curve-card .curve-pulse-3{ stroke-dasharray:0.14 1; }
  .curve-card.in .curve-pulse{
    opacity:0.85;
    transition-delay:1800ms;
  }
  .curve-card.in .curve-pulse-1{
    animation:curvePulse 2.8s linear 1800ms infinite;
  }
  .curve-card.in .curve-pulse-2{
    animation:curvePulse 3.6s linear 2200ms infinite;
  }
  .curve-card.in .curve-pulse-3{
    animation:curvePulse 4.4s linear 2000ms infinite;
  }
  @keyframes curvePulse{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-1.14; }
  }
  @media (prefers-reduced-motion: reduce){
    .curve-card .curve-line{
      stroke-dashoffset:0;
      transition:none;
    }
    .curve-card .curve-points{
      opacity:1;
      transition:none;
    }
    .curve-card .curve-pulse{
      opacity:0;
      animation:none !important;
    }
  }
  .curve-card .pts{ display:flex; gap:40px; flex-wrap:wrap; margin-top:24px; }
  .curve-card .pt{ border-left:2px solid var(--spectral); padding-left:14px; }
  .curve-card .pt .v{ font-family:var(--font-display); font-weight:700; font-size:32px; }
  .curve-card .pt .l{ font-family:var(--font-body); color:var(--dim); font-size:13px; text-transform:uppercase; letter-spacing:.16em; margin-top:4px; }

  /* Mask reveal for .display headings. Each <br>-separated line gets
     wrapped (by JS) in a .mask-row whose inner <span> translates from
     translateY(110%) up to 0 when .display.in is set. .reveal-clip is
     added to the parent .display so the overflow is hidden during the
     transition. .display.reveal-block is the fallback for headings that
     don't have <br>s — block-level fade-up that preserves text wrapping.
     .pre-reveal is added by JS to sibling eyebrow/body elements so they
     fade in together with the masked headline. */
  .display .mask-row{
    display:inline-block;
    overflow:hidden;
    vertical-align:bottom;
    line-height:inherit;
  }
  .display .mask-row > span{
    display:inline-block;
    transform: translateY(110%);
    transition: transform 1100ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .display.in .mask-row > span{ transform: translateY(0); }
  .display .mask-row:nth-child(2) > span{ transition-delay: 90ms; }
  .display .mask-row:nth-child(3) > span{ transition-delay: 180ms; }
  .display .mask-row:nth-child(4) > span{ transition-delay: 270ms; }
  .display .mask-row:nth-child(5) > span{ transition-delay: 360ms; }
  .display .mask-row:nth-child(6) > span{ transition-delay: 450ms; }
  .reveal-clip{ overflow:hidden; padding-bottom:0.12em; }
  .display.reveal-block{
    opacity:0; transform:translateY(40px);
    transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.8,.2,1);
    will-change: transform, opacity;
  }
  .display.reveal-block.in{ opacity:1; transform:translateY(0); }
  .pre-reveal{
    opacity:0;
    transform:translateY(8px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  .pre-reveal.in{ opacity:1; transform:translateY(0); }

  /* Performance beat (420×) — chip-render bg; blur ramps via --perf-p
     (0 until section top hits viewport, then 0→1 over one vh of scroll). */
  .beat.perf-scene{
    --perf-p:0;
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  .beat.perf-scene .perf-bg{
    position:absolute; inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .beat.perf-scene .perf-bg video{
    width:100%; height:100%;
    object-fit:cover;
    filter:
      brightness(calc(0.55 - 0.13 * var(--perf-p, 0)))
      contrast(1.05)
      blur(calc(var(--perf-p, 0) * 18px));
    transform:scale(calc(1 + var(--perf-p, 0) * 0.08));
    transition:filter 80ms linear;
  }
  .beat.perf-scene .perf-bg::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(120% 90% at 50% 55%,
      rgba(0,0,0, calc(0.25 + 0.1 * var(--perf-p, 0))) 0%,
      rgba(0,0,0, calc(0.55 + 0.15 * var(--perf-p, 0))) 60%,
      rgba(0,0,0, calc(0.80 + 0.12 * var(--perf-p, 0))) 100%);
  }
  .beat.perf-scene .beat-wrap{ position:relative; z-index:1; }

  /* Beat 3: door image pinned top-right of section, behind content.
     Cards use 50% black so text stays readable over the image. */
  #beat-3{ position:relative; overflow:hidden; }
  #beat-3 .beat-wrap{ position:relative; z-index:1; }
  #beat-3 .beat-label,
  #beat-3 .three-doors-hero,
  #beat-3 .doors{ position:relative; z-index:1; }
  .three-doors-hero{
    max-width:min(52%, 640px);
    margin-top:8px;
  }
  .three-doors-title{ min-width:0; }
  .three-doors-img{
    background-image: url('assets/3-door-images.jpeg');
    background-size: cover;
    background-position: center;
    pointer-events:none;
    /* Edge fade so the photo bleeds into substrate rather than sitting
       as a hard rectangle. Mask is a radial that goes solid in the
       center and transparent toward the corners + a vertical taper on
       the top edge so it doesn't fight the eyebrow above. */
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      radial-gradient(ellipse 95% 90% at center, #000 45%, transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      radial-gradient(ellipse 95% 90% at center, #000 45%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    filter: brightness(0.95) contrast(1.06);
  }
  #beat-3 .three-doors-img{
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    left:auto;
    width:874px;
    height:488px;
  }
  #beat-3 .door{
    background:rgba(0,0,0,0.5);
  }
  @media (max-width: 960px){
    .three-doors-hero{ max-width:100%; }
    #beat-3 .three-doors-img{
      width:clamp(200px, 72vw, 520px);
      height:clamp(140px, 38vw, 320px);
      /* centered on narrow screens — right-pinned looks off-balance */
      left:50%; right:auto; transform:translateX(-50%);
    }
  }

  /* Market-shift (beat-2) background — same bleed/mask treatment as the
     three-doors image, pinned to the top-right of the section behind the
     content. */
  .market-grid-img{
    background-image: url('assets/market-grid-bg.jpg');
    background-size: cover;
    background-position: center;
    pointer-events:none;
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      radial-gradient(ellipse 95% 90% at center, #000 45%, transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
      radial-gradient(ellipse 95% 90% at center, #000 45%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    filter: brightness(0.95) contrast(1.06);
  }
  #beat-2{ position:relative; }
  #beat-2 .market-grid-img{
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    left:auto;
    width:874px;
    height:488px;
  }
  #beat-2 .beat-wrap{ position:relative; z-index:1; }
  @media (max-width: 960px){
    #beat-2 .market-grid-img{
      width:clamp(200px, 72vw, 520px);
      height:clamp(140px, 38vw, 320px);
      /* centered on narrow screens — right-pinned looks off-balance */
      left:50%; right:auto; transform:translateX(-50%);
    }
  }

  /* Locked doors / three reasons */
  .doors{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    margin-top:70px;
  }
  /* Desktop: subgrid so row 4 (.now-label) lines up across columns even
     when h4 wraps to different line counts. (Flex + margin-top:auto on
     .now-label could not synchronize row heights across siblings.) */
  @supports (grid-template-rows: subgrid){
    @media (min-width: 961px){
      .doors{
        grid-template-rows: auto auto minmax(72px, 1fr) auto auto;
      }
      .doors > .door{
        display:grid;
        grid-template-rows:subgrid;
        grid-row:1 / 6;
        grid-template-columns:minmax(0, 1fr);
        min-height:0;
      }
      .doors > .door:nth-child(1){ grid-column:1; }
      .doors > .door:nth-child(2){ grid-column:2; }
      .doors > .door:nth-child(3){ grid-column:3; }
      .doors > .door > .door-num{ grid-row:1; align-self:start; }
      .doors > .door > h4{ grid-row:2; align-self:start; }
      .doors > .door > .now-label{
        grid-row:4;
        align-self:start;
        margin-top:0;
      }
      .doors > .door > .now{ grid-row:5; align-self:start; }
    }
  }
  /* Doors: THEN headline, divider, NOW pip + body. Headline is NOT a
     flex-grow region — that + vertical centering caused h4 first lines
     to zig-zag when .now blocks differed in height. */
  .door{
    border:1px solid rgba(240,240,250,0.12);
    padding:44px 36px;
    position:relative;
    min-height:460px;
    display:flex; flex-direction:column;
  }
  .door-num{
    font-family:var(--font-hero);
    font-weight:var(--hero-weight, 200);
    font-size:clamp(44px, 4.5vw, 64px);
    line-height:1;
    letter-spacing:-0.03em;
    color:var(--spectral);
    margin-bottom:28px;
    flex-shrink:0;
  }
  .door h4{
    font-family:var(--font-display); font-weight:600;
    text-transform:uppercase; letter-spacing:-0.005em;
    font-size:clamp(22px, 1.8vw, 30px); line-height:1.15;
    color:var(--dim);
    flex:0 0 auto;
  }
  .door .now-label{
    color:var(--spectral); font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.22em; font-size:11px;
    margin-top:auto; padding-top:24px;
    border-top:1px solid rgba(240,240,250,0.12);
    display:flex; align-items:center; gap:10px;
  }
  .door .now-label::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--spectral); }
  .door .now{
    font-family:var(--font-body); font-size:17px; font-weight:300;
    line-height:1.5; color:var(--spectral); margin-top:14px;
  }

  /* Reveal */
  .reveal{
    position:relative;
    padding:240px 40px;
    background:#000;
    text-align:center;
    overflow:hidden;
    border-top:1px solid rgba(240,240,250,0.08);
  }
  .reveal::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at center, rgba(240,240,250,0.06) 0%, rgba(0,0,0,0) 60%);
  }
  .reveal .setup{
    font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.2em;
    color:var(--dim); font-size:clamp(16px, 1.6vw, 22px);
    max-width:900px; margin:0 auto 60px;
    line-height:1.4;
  }
  .reveal h2{
    font-family:var(--font-display); font-weight:700;
    text-transform:uppercase; letter-spacing:-0.03em;
    font-size:clamp(80px, 14vw, 220px); line-height:0.9;
    position:relative;
  }
  .reveal .proof{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    max-width:1300px; margin:100px auto 0;
    background:rgba(240,240,250,0.1);
  }
  .reveal .proof .p{
    background:#000; padding:36px 24px; text-align:left;
  }
  .reveal .proof .p .v{
    font-family:var(--font-display); font-weight:200;
    font-size:44px; line-height:1; letter-spacing:-.01em;
  }
  .reveal .proof .p .l{
    font-family:var(--font-body); font-size:14px; color:var(--dim);
    margin-top:10px; line-height:1.4;
  }

  /* Speed machine gun */
  .speed-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:40px;
    margin-top:70px; align-items:stretch;
  }
  .speed-card{
    border:1px solid rgba(240,240,250,0.12);
    padding:40px;
    position:relative;
    overflow:hidden;
    min-height:360px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .speed-card .who{
    font-family:var(--font-display); text-transform:uppercase;
    letter-spacing:.22em; font-size:12px; color:var(--dim);
  }
  .speed-card .big{
    font-family:var(--font-display); font-weight:200;
    font-size:104px; line-height:1; letter-spacing:-.02em;
  }
  .speed-card .pulses{
    height:40px; margin-top:24px; position:relative; overflow:hidden;
  }
  .pulse{
    position:absolute; top:50%; transform:translateY(-50%);
    height:18px; width:3px; background:var(--spectral);
  }

  /* Perf three stats */
  .perf-stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    margin-top:60px; border-top:1px solid rgba(240,240,250,0.12);
  }
  .perf-stats .s{
    padding:40px 30px; border-bottom:1px solid rgba(240,240,250,0.12);
    border-right:1px solid rgba(240,240,250,0.12);
  }
  .perf-stats .s:last-child{ border-right:0; }
  .perf-stats .v{
    font-family:var(--font-hero);
    font-weight:var(--hero-weight);
    font-size:104px;
    line-height:0.9;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    /* Stay on a single line — the unit/multiplier inline is sized down
       so the big number always fits the column at any viewport. */
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.06em;
  }
  .perf-stats .v-unit{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.32em;
    letter-spacing: 0;
    color: var(--dim);
    line-height: 1;
    /* Shift up so the small unit aligns with the cap-height of the
       bigger number rather than its baseline. */
    transform: translateY(-0.6em);
    display: inline-block;
  }
  .perf-stats .u{
    font-family:var(--font-display); text-transform:uppercase;
    letter-spacing:.22em; font-size:12px; color:var(--spectral); margin-top:10px;
  }
  .perf-stats .n{
    font-family:var(--font-body); font-size:15px; color:var(--dim);
    margin-top:12px; line-height:1.4;
  }

  /* Scatter plot */
  .scatter-wrap{
    border:1px solid rgba(240,240,250,0.1);
    padding:40px; margin-top:40px;
    position:relative;
  }
  /* Scatter SVG — aspect-ratio drives sizing so preserveAspectRatio="meet"
     fills the container cleanly. 1200:560 ≈ 2.14:1. */
  .scatter-wrap svg{
    width:100%;
    aspect-ratio: 1200 / 560;
    height:auto;
    display:block;
  }
  /* Legend sits above the SVG (in normal flow), not floated over the
     chart, so it can never overlap the upper-right Neurophos point
     cluster. Two keys laid out horizontally to save vertical space. */
  .scatter-wrap .legend{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(240,240,250,0.10);
    font-family:var(--font-display);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--dim);
  }
  .scatter-wrap .legend .row{
    display:flex; align-items:center; gap:10px;
  }
  .scatter-wrap .legend .dot{ width:10px; height:10px; border-radius:50%; }

  /* Neurophos OPU points — pulsing beacon rings (beat-7 scatter) */
  .scatter-beacon-ring{
    fill:none;
    stroke:rgba(240,240,250,0.7);
    stroke-width:1.5;
    opacity:0;
    transform-box:fill-box;
    transform-origin:center;
  }
  .scatter-beacon-glow{
    fill:rgba(240,240,250,0.08);
    transform-box:fill-box;
    transform-origin:center;
  }
  .scatter-beacon-core{
    fill:#f0f0fa;
    transform-box:fill-box;
    transform-origin:center;
  }
  .scatter-wrap.in .scatter-beacon-ring{
    animation:scatterBeaconRing 2.8s cubic-bezier(.15,.85,.25,1) infinite;
    animation-delay:var(--beacon-delay, 0s);
  }
  .scatter-wrap.in .scatter-beacon-ring--b{
    animation-delay:calc(var(--beacon-delay, 0s) + 1.15s);
  }
  .scatter-wrap.in .scatter-beacon-glow{
    animation:scatterBeaconGlow 2.8s ease-in-out infinite;
    animation-delay:var(--beacon-delay, 0s);
  }
  .scatter-wrap.in .scatter-beacon-core{
    animation:scatterBeaconCore 2.8s ease-in-out infinite;
    animation-delay:var(--beacon-delay, 0s);
  }
  @keyframes scatterBeaconRing{
    0%{ transform:scale(1); opacity:0.75; }
    75%, 100%{ transform:scale(2.6); opacity:0; }
  }
  @keyframes scatterBeaconGlow{
    0%, 100%{ transform:scale(1); opacity:0.55; }
    50%{ transform:scale(1.18); opacity:1; }
  }
  @keyframes scatterBeaconCore{
    0%, 100%{ opacity:1; }
    50%{ opacity:0.88; }
  }
  @media (prefers-reduced-motion: reduce){
    .scatter-beacon-ring,
    .scatter-beacon-glow,
    .scatter-beacon-core{ animation:none !important; }
    .scatter-beacon-ring{ opacity:0; }
  }

  /* Spec table — horizontal scroll on narrow viewports */
  .table-scroll{
    width:100%;
    margin-top:40px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* Scroll affordance — on narrow screens the B200 column sits off-screen
       with no cue that the table pans. Edge glows signal hidden content and
       auto-hide at the scroll extents: the two black "cover" gradients are
       attached local (they travel with the content), so when an edge of the
       table reaches the container edge its cover slides over that side's
       fixed glow. When the table fits (desktop), both glows stay covered —
       no media query needed. */
    background:
      linear-gradient(90deg,  #000 35%, rgba(0,0,0,0)) 0 0    / 56px 100% no-repeat,
      linear-gradient(270deg, #000 35%, rgba(0,0,0,0)) 100% 0 / 56px 100% no-repeat,
      linear-gradient(90deg,  rgba(240,240,250,0.10), rgba(240,240,250,0)) 0 0    / 22px 100% no-repeat,
      linear-gradient(270deg, rgba(240,240,250,0.10), rgba(240,240,250,0)) 100% 0 / 22px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  /* Mobile-only micro hint above the comparison table. */
  .table-swipe-hint{ display:none; }
  @media (max-width: 700px){
    .table-swipe-hint{
      display:block;
      margin-top:14px;
      font-family:var(--font-mono);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.18em;
      color:var(--dim);
      text-align:right;
    }
  }
  .spec-table{
    width:100%; border-collapse:collapse;
    font-family:var(--font-body);
  }
  .spec-table th, .spec-table td{
    padding:22px 20px; text-align:left;
    border-bottom:1px solid rgba(240,240,250,0.1);
    vertical-align:top;
  }
  @media (max-width: 600px){
    .spec-table{ min-width:520px; }
    .spec-table th, .spec-table td{ padding:16px 14px; font-size:15px; }
    .spec-table td.us{ font-size:18px; }
    .spec-table th{ font-size:10px; letter-spacing:0.14em; }
  }
  .spec-table th{
    font-family:var(--font-display); font-weight:600;
    text-transform:uppercase; letter-spacing:.2em;
    font-size:12px; color:var(--dim);
  }
  .spec-table th.us{ color:var(--spectral); }
  .spec-table td{
    font-size:17px; font-weight:300; color:var(--spectral);
  }
  .spec-table td.metric{
    font-family:var(--font-display); text-transform:uppercase;
    letter-spacing:.16em; font-size:13px; color:var(--dim);
  }
  .spec-table td.us{
    font-family:var(--font-display); font-weight:600; letter-spacing:-.005em;
    font-size:22px;
  }
  .spec-table td.them{ color:var(--dim); }

  /* Product explorer */
  .explorer{
    display:grid; grid-template-columns: 320px 1fr;
    gap:0;
    margin-top:60px;
    border:1px solid rgba(240,240,250,0.1);
    min-height:560px;
  }
  .explorer-menu{
    border-right:1px solid rgba(240,240,250,0.1);
    padding:0;
  }
  .explorer-menu button{
    display:block; width:100%; text-align:left;
    background:transparent; border:0;
    color:var(--dim);
    font-family:var(--font-display);
    text-transform:uppercase; letter-spacing:.12em;
    font-size:13px; font-weight:500;
    padding:22px 26px;
    border-bottom:1px solid rgba(240,240,250,0.06);
    cursor:pointer;
    transition:background .2s, color .2s;
  }
  .explorer-menu button:hover{ color:var(--spectral); background:rgba(240,240,250,0.03); }
  .explorer-menu button.on{
    color:var(--spectral);
    background:rgba(240,240,250,0.05);
    border-left:3px solid var(--spectral);
  }
  .explorer-view{
    position:relative; min-height:560px;
    display:flex; align-items:center; justify-content:center;
    padding:40px;
    background:
      radial-gradient(circle at 30% 30%, rgba(240,240,250,0.04), rgba(0,0,0,0) 50%),
      #000;
  }
  .explorer-view .stage{
    width:100%; height:100%; position:relative;
  }
  .explorer-caption{
    position:absolute; left:40px; bottom:40px; right:40px;
    font-family:var(--font-body); color:var(--spectral);
    font-size:17px; max-width:520px;
  }
  .explorer-caption .t{
    font-family:var(--font-display); text-transform:uppercase;
    letter-spacing:.22em; font-size:11px; color:var(--dim); margin-bottom:8px;
  }

  /* Team grid — name + role + optional ex-tag. Used on team.html for the
     leadership grid and the advisors/board grid below it. Monochrome,
     hairline-divided cells; no headshots in this stub. */
  .team-grid{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:1px;
    margin-top:60px;
    background:rgba(240,240,250,0.08);
    border:1px solid rgba(240,240,250,0.08);
  }
  .team-cell{
    background:#000;
    padding:32px 28px;
    min-height:240px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  /* Circular headshot placeholder. Medium size (72px) — sized so a single
     card holds the photo + name + role + optional ex-tag without crowding.
     Background gradient hints at depth so the empty state doesn't read as
     "broken image" while real headshots are still in flight. */
  .team-cell .headshot{
    width:72px; height:72px;
    border-radius:50%;
    border:1px solid rgba(240,240,250,0.2);
    background:
      radial-gradient(circle at 38% 32%, rgba(240,240,250,0.10), rgba(240,240,250,0.02) 60%, rgba(0,0,0,0) 80%),
      rgba(240,240,250,0.03);
    margin-bottom:22px;
    flex:0 0 auto;
  }
  .team-cell .name{
    font-family:var(--font-display);
    font-weight:600;
    font-size:20px;
    line-height:1.2;
    letter-spacing:-0.005em;
    color:var(--spectral);
  }
  .team-cell .role{
    font-family:var(--font-display);
    font-size:13px;
    text-transform:uppercase; letter-spacing:0.18em;
    color:var(--dim);
    margin-top:10px;
  }
  .team-cell .ex{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--dim);
    margin-top:18px;
    line-height:1.5;
  }
  .team-cell.advisor .bio{
    font-family:var(--font-body); font-size:15px; color:var(--spectral);
    line-height:1.5; margin-top:14px;
  }

  /* Leadership cards — real circular headshots, top-aligned, with a short
     bio. Same .team-cell shell as advisors; flex-start so the photo sits
     above the name/role/bio instead of being pushed apart by space-between. */
  .team-grid.leadership .team-cell{ justify-content:flex-start; }
  .team-grid.leadership .team-cell .headshot{ width:108px; height:108px; margin-bottom:20px; }
  .team-cell .headshot.photo{ background-size:cover; background-position:center center; }
  .team-grid.leadership .team-cell .bio{
    font-family:var(--font-body); font-size:14px; color:var(--dim);
    line-height:1.55; margin-top:14px;
  }

  /* Alumni provenance logo rows — shared by careers + team pages so the
     "where the team came from" credibility band reads identically on both. */
  .alumni-section{ margin-top:96px; }
  .alumni-section .eyebrow{ margin-bottom:16px; }
  .alumni-section .alumni-lede{ color:var(--dim); max-width:720px; margin-top:24px; }
  .alumni-tier{ margin-top:48px; padding:36px 0; border-top:1px solid rgba(240,240,250,0.08); }
  .alumni-tier:last-child{ border-bottom:1px solid rgba(240,240,250,0.08); }
  .alumni-tier-label{
    font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
    letter-spacing:0.22em; color:var(--dim); margin-bottom:28px;
  }
  .alumni-row{ display:flex; flex-wrap:wrap; align-items:center; gap:36px 56px; }
  .alumni-row > *{ opacity:0.78; transition:opacity 220ms ease; }
  .alumni-row > *:hover{ opacity:1; }
  .alumni-row img.alumni-logo{
    display:block; height:36px; width:auto; max-width:160px; object-fit:contain;
    filter:brightness(0) invert(1);
  }
  .alumni-row img.alumni-logo[alt="Samsung"]{ height:60px; max-width:220px; }
  .alumni-row img.alumni-logo[alt="AMD"]{ height:48px; max-width:120px; }
  .alumni-row img.alumni-logo[alt="Intel"]{ height:42px; }
  .alumni-row img.alumni-logo[alt="Micron"]{ height:30px; max-width:160px; }
  .alumni-row img.alumni-logo[alt="Marvell"]{ height:30px; max-width:160px; }
  .alumni-row img.alumni-logo[alt="Silicon Labs"]{ height:50px; max-width:120px; }
  .alumni-row img.alumni-logo[alt="Infinera"]{ height:24px; max-width:160px; }
  .alumni-row img.alumni-logo[alt="Magic Leap"]{ height:40px; max-width:200px; }
  .alumni-row img.alumni-logo[alt="Luminar"]{ height:32px; max-width:160px; }
  .alumni-row img.alumni-logo[alt="Cadence"]{ height:22px; max-width:160px; }
  .alumni-row img.alumni-logo[alt="Lightmatter"]{ height:24px; max-width:200px; }
  .alumni-row img.alumni-logo[alt="Celestial AI"]{ height:24px; max-width:200px; }
  .alumni-row .alumni-wordmark{
    display:inline-flex; align-items:center; height:36px;
    font-family:var(--font-display); font-weight:500; font-size:21px;
    letter-spacing:-0.005em; color:var(--spectral); line-height:1;
  }
  @media (max-width:960px){
    .alumni-row{ gap:28px 40px; }
    .alumni-row > *{ height:30px; }
    .alumni-row .alumni-wordmark{ font-size:18px; }
  }

  /* Press release article — long-form prose migrated from neurophos.com. */
  .press-article .prose{
    max-width:820px;
    font-family:var(--font-body);
    font-size:18px;
    line-height:1.65;
    color:var(--dim);
  }
  .press-article .prose p{ margin:0 0 1.35em; }
  .press-article .prose .dateline{ color:var(--spectral); }
  .press-article .prose h2{
    font-family:var(--font-display);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:clamp(22px, 2.4vw, 30px);
    color:var(--spectral);
    margin:64px 0 20px;
    line-height:1.15;
  }
  .press-article .prose h2:first-child{ margin-top:0; }
  .press-article .prose .note{
    font-size:15px;
    color:var(--dim);
    border-top:1px solid rgba(240,240,250,0.12);
    padding-top:20px;
    margin-top:48px;
  }
  .press-figure{
    margin:48px 0;
    max-width:980px;
  }
  .press-figure img{
    width:100%;
    display:block;
    border:1px solid rgba(240,240,250,0.12);
  }
  .press-figure figcaption{
    margin-top:12px;
    font-family:var(--font-mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--dim);
  }
  .press-quote{
    border-left:2px solid var(--spectral);
    padding:8px 0 8px 32px;
    margin:48px 0;
    max-width:980px;
  }
  .press-quote p{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:none;
    letter-spacing:-0.01em;
    font-size:clamp(24px, 3vw, 40px);
    line-height:1.22;
    color:var(--spectral);
  }
  .press-quote .attrib{
    margin-top:24px;
    font-family:var(--font-display);
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-size:12px;
    color:var(--dim);
    line-height:1.8;
  }
  .press-quote .attrib .name{ color:var(--spectral); font-weight:600; }
  .press-quote-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(200px, 280px);
    gap:40px;
    align-items:start;
    margin:48px 0;
    max-width:980px;
  }
  .press-quote-row .press-quote{ margin:0; }
  .press-quote-row img{
    width:100%;
    border:1px solid rgba(240,240,250,0.12);
  }
  .press-brand-lockup{
    display:flex;
    align-items:center;
    gap:20px;
    margin:32px 0 40px;
  }
  .press-brand-lockup img{ height:40px; width:auto; }
  @media (max-width:760px){
    .press-quote-row{ grid-template-columns:1fr; }
    .press-quote{ padding-left:20px; }
  }

  /* Press list — chronological rows: date · publication · title-as-link.
     Hairline divider between rows mirrors the .qa accordion treatment. */
  .press-list{
    margin-top:40px;
    border-top:1px solid rgba(240,240,250,0.15);
  }
  .press-list .row{
    display:grid; grid-template-columns: 140px 220px 1fr 60px;
    gap:24px;
    padding:24px 0;
    border-bottom:1px solid rgba(240,240,250,0.12);
    align-items:baseline;
  }
  .press-list .row .date{
    font-family:var(--font-mono); font-size:13px;
    color:var(--dim); text-transform:uppercase; letter-spacing:0.1em;
  }
  .press-list .row .pub{
    font-family:var(--font-display); font-size:13px;
    text-transform:uppercase; letter-spacing:0.18em; color:var(--dim);
  }
  .press-list .row .title{
    font-family:var(--font-body); font-size:18px;
    color:var(--spectral); line-height:1.4;
    text-decoration:none;
  }
  .press-list .row .title:hover{ opacity:0.7; }
  .press-list .row .arrow{
    text-align:right;
    font-family:var(--font-mono); color:var(--dim);
    font-size:18px;
  }

  /* Video card — placeholder stage + caption strip. */
  .video-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
    margin-top:60px;
  }
  .video-card{
    border:1px solid rgba(240,240,250,0.12);
    background:linear-gradient(180deg, rgba(240,240,250,0.04) 0%, rgba(0,0,0,0) 100%);
  }
  .video-card .stage{
    aspect-ratio: 16 / 9;
    background:
      radial-gradient(circle at 50% 50%, rgba(240,240,250,0.06) 0%, rgba(0,0,0,0) 60%),
      #050507;
    display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid rgba(240,240,250,0.08);
    position:relative;
  }
  .video-card .stage .play{
    width:80px; height:80px; border-radius:50%;
    border:1px solid rgba(240,240,250,0.4);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:24px; color:var(--spectral);
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(6px);
  }
  .video-card .meta{
    padding:24px 26px 28px;
  }
  .video-card .meta .t{
    font-family:var(--font-display); font-weight:600;
    font-size:22px; letter-spacing:-0.005em; color:var(--spectral);
  }
  .video-card .meta .d{
    font-family:var(--font-mono); font-size:12px;
    text-transform:uppercase; letter-spacing:0.18em; color:var(--dim);
    margin-top:10px;
  }

  @media (max-width: 960px){
    .two-step{ grid-template-columns:1fr; }
    .doors{ grid-template-columns:1fr; }
    .reveal .proof{ grid-template-columns:1fr 1fr; }
    .speed-grid{ grid-template-columns:1fr; }
    .perf-stats{ grid-template-columns:1fr; }
    /* Stack the big number above EARLY / MID / GHz so the baseline
       offset on .v-unit can't collide with the figure on narrow screens. */
    .perf-stats .v{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
      line-height:0.95;
      font-size:clamp(64px, 18vw, 96px);
    }
    .perf-stats .v-unit{
      transform:none;
      font-size:clamp(13px, 3.6vw, 16px);
      letter-spacing:0.2em;
      line-height:1.2;
    }
    .explorer{ grid-template-columns:1fr; }
    .team-grid{ grid-template-columns: repeat(2, 1fr); }
    .press-list .row{ grid-template-columns: 1fr; gap:4px; padding:18px 0; }
    .press-list .row .arrow{ display:none; }
    .video-grid{ grid-template-columns:1fr; }
  }


  

  


  /* --- Mobile chart treatment (curve chart + scatter) ---
     Scaling the SVGs to phone width makes their labels unreadable, and
     panning hides the data. Instead, on narrow screens each chart renders
     full-width on a taller canvas (preserveAspectRatio="none" + a CSS
     aspect-ratio override; vector-effect keeps stroke widths uniform),
     the in-SVG micro-labels and dots are hidden, and an HTML overlay
     provides round dots and pulsing tap-beacons at the exact data
     positions. Tapping a beacon fills the detail card below the chart
     with that point's value/label (wired in breakthrough.js). Desktop:
     the overlay, detail card and mobile axes are display:none and the
     CSS aspect-ratios match the viewBoxes exactly, so nothing changes. */
  .chart-scroll{ position:relative; }
  .chart-taps, .chart-detail, .chart-axes-mobile, .chart-dot{ display:none; }

  @media (max-width: 700px){
    .curve-card svg{ aspect-ratio: 4 / 3; }
    .scatter-wrap svg{ aspect-ratio: 5 / 4; }
    /* Keep stroke widths uniform under the non-uniform stretch. */
    .curve-chart path, .curve-grid line,
    #scatter path, #scatter rect, #scatter line{ vector-effect:non-scaling-stroke; }
    /* Hide SVG micro-labels, callouts and dots (would stretch into
       ellipses); the HTML overlay replaces them. Gridlines stay. */
    .curve-chart text, .curve-points line, .curve-points circle,
    #scatter text, #scatter circle{ display:none; }

    .chart-taps{ display:block; position:absolute; inset:0; }
    .chart-dot{
      display:block; position:absolute;
      left:var(--tx); top:var(--ty);
      width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
      border-radius:50%;
      background:rgba(240,240,250,0.45);
    }
    .chart-tap{
      position:absolute; left:var(--tx); top:var(--ty);
      width:44px; height:44px; transform:translate(-50%,-50%);
      background:none; border:0; padding:0; cursor:pointer;
    }
    .chart-tap::before{
      content:''; position:absolute;
      left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
      border-radius:50%;
      border:1px solid rgba(240,240,250,0.65);
      animation: chartTapPulse 2.2s ease-out infinite;
      animation-delay: var(--pd, 0s);
    }
    .chart-tap::after{
      content:''; position:absolute;
      left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
      border-radius:50%;
      background:#f0f0fa;
      box-shadow:0 0 12px rgba(240,240,250,0.8);
    }
    /* Status-quo beacon: grey like its legend swatch — a white core here
       would read as a Neurophos point. */
    .chart-tap--sq::after{
      width:8px; height:8px; margin:-4px 0 0 -4px;
      background:rgba(240,240,250,0.55);
      box-shadow:0 0 8px rgba(240,240,250,0.35);
    }
    .chart-tap--sq::before{ border-color:rgba(240,240,250,0.35); }
    /* Selection is a ring, not a recolor — dot colour encodes category
       (white = Neurophos, grey = status quo, per the legend), so the
       selected dot keeps its colour and gains a crisp offset ring. */
    .chart-tap.is-active::after{
      box-shadow:
        0 0 0 3px rgba(0,0,0,0.85),
        0 0 0 4.5px rgba(240,240,250,0.95),
        0 0 18px rgba(240,240,250,0.75);
    }
    .chart-detail{
      display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
      margin-top:18px; padding-top:14px;
      border-top:1px solid rgba(240,240,250,0.12);
    }
    .chart-detail-v{
      font-family:var(--font-display); font-weight:200;
      font-size:34px; line-height:1; color:var(--spectral);
    }
    .curve-card .chart-detail-v{ color:var(--accent); }
    .chart-detail-l{
      font-family:var(--font-mono); font-size:11px;
      letter-spacing:0.18em; text-transform:uppercase;
      color:var(--dim);
    }
    .chart-axes-mobile{
      display:flex; justify-content:space-between; gap:12px;
      margin-top:12px;
      font-family:var(--font-mono); font-size:10px;
      letter-spacing:0.16em; color:var(--dim); text-transform:uppercase;
    }
  }
  @keyframes chartTapPulse{
    0%   { transform:scale(0.5); opacity:0.9; }
    70%  { transform:scale(1.9); opacity:0; }
    100% { transform:scale(1.9); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .chart-tap::before{ animation:none; opacity:0.5; }
  }