@font-face {
      font-family: 'Ulm Grotesk';
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      src: url("fonts/UlmGrotesk-Medium.woff2") format("woff2");
    }
    @font-face {
      font-family: 'Outfit';
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
      src: url("fonts/Outfit-Variable.woff2") format("woff2");
    }

    :root {
      /* Signature gradient stops. sRGB here, Display-P3 in the @supports block
         below, which is where the neon comes from on wide-gamut displays. */
      --c-yellow: #fbb335;
      --c-red:    #ff274f;
      --c-purple: #9f22d4;
      --c-violet: #b858e8;

      --g:  linear-gradient(90deg, var(--c-yellow) 0%, var(--c-red) 46%, var(--c-purple) 100%);
      --gv: linear-gradient(180deg, var(--c-yellow) 0%, var(--c-red) 46%, var(--c-purple) 100%);
      --g45:linear-gradient(135deg, var(--c-yellow) 0%, var(--c-red) 46%, var(--c-purple) 100%);
      --g-text: linear-gradient(90deg, var(--c-yellow) 0%, var(--c-red) 50%, var(--c-violet) 100%);
      --yellow: var(--c-yellow);
      --red:    var(--c-red);
      --purple: var(--c-purple);

      /* Light mode: neutral surfaces and charcoal text let the brand accents
         carry the colour. Dark mode has its own palette below. */
      color-scheme: light;
      accent-color: #ff274f;
      --ink:    #1d1d26;
      --ink-2:  #54545f;
      --ink-3:  #6b6b78;
      --bg:     #ffffff;
      --bg-2:   #f6f6f8;
      --bg-3:   #eeeef2;
      --border: #e0e0e7;
      --border-2:#c8c8d2;
      --bench-human: #b8b8c2;
      --bench-reference: #b8b8c2;

      /* Theme-sensitive effects. Named by role so a rule never hardcodes a
         value that only reads correctly in one room. */
      --glass:      rgba(255,255,255,.95);   /* sticky nav over content       */
      --glass-solid:rgba(255,255,255,.99);
      --glass-line: rgba(200,200,210,.6);
      --panel:      rgba(246,246,248,.96);   /* floating exhibit surfaces     */
      --panel-hdr:  rgba(238,238,242,.9);
      --panel-line: rgba(29,29,38,.08);
      --scanline:   rgba(29,29,38,.006);     /* faint texture on white        */
      --row-hover:  rgba(29,29,38,.025);
      --tint-violet:rgba(159,34,212,.04);    /* restrained accent effects     */
      --tint-amber: rgba(251,179,53,.05);
      --sh-1: 0 2px 16px rgba(29,29,38,.04);
      --sh-2: 0 16px 40px rgba(29,29,38,.08);
      --sh-3: 0 16px 40px rgba(29,29,38,.10);
      --sh-btn: 0 4px 12px rgba(29,29,38,.10);
      /* Highlight. Selecting text on paper should read as a highlighter, so it
         takes the gradient's warm start rather than the platform blue. A wash
         in the reading room stays gentle under a long quoted passage; the
         signal room uses the marker at full strength, because amber composited
         over near-black turns to mud. */
      --sel-bg:  rgba(251,179,53,.34);
      --sel-ink: #1d1d26;
      /* Featured column in the comparison table. Paper amplifies a tint, so the
         reading room runs lighter than the signal room for the same read. */
      --hi-col:       rgba(159,34,212,.03);
      --hi-col-head:  rgba(159,34,212,.09);
      --hi-col-hover: rgba(159,34,212,.055);
      --hi-line:      rgba(159,34,212,.16);
      --wash-violet:  rgba(159,34,212,.025);  /* corner washes on CTAs        */
      --wash-amber:   rgba(251,179,53,.035);
      --cc-bg: rgba(255,255,255,.94);         /* cookie banner glass pill      */
      --on-hi: var(--ink);                   /* ink on the highlighted column */
      --jade:  #0b7a4b;                      /* 5.3:1 on paper                */

      --r:  8px;
      --rl: 14px;
      --w:  1200px;
      --sp: 96px;
      --ft: 'Ulm Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
      --fb: 'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
      --title-hero: clamp(44px, 5.5vw, 72px);
      --title-section: clamp(32px, 4vw, 48px);
      --title-card: clamp(22px, 2.1vw, 24px);
    }

    /* Neon: the signature gradient at the Display-P3 gamut edge, held at
       constant OKLab hue and lightness so it is the same colour, more
       saturated. Browsers without color() support keep the sRGB stops above.
       On an sRGB display the P3 values gamut-map back, so this is safe to
       apply unconditionally wherever color() parses. */
    @supports (color: color(display-p3 1 1 1)) {
      :root {
        --c-yellow: color(display-p3 0.9868 0.6930 0.0000);
        --c-red:    color(display-p3 0.9828 0.0000 0.2756);
        --c-purple: color(display-p3 0.5934 0.0000 0.8568);
        --c-violet: color(display-p3 0.7184 0.2191 1.0000);
      }
    }

    /* ── The signal room. Set by the pre-paint script in <head> from the
       stored choice, or from the OS when the visitor has not chosen. ───── */
    :root[data-theme-mode="dark"] {
      color-scheme: dark;
      --ink:    #f0ecf8;
      --ink-2:  #b8afcc;
      --ink-3:  #9890b0;
      --bg:     #0a0810;
      --bg-2:   #100e1a;
      --bg-3:   #18152a;
      --border: #2e2545;
      --border-2:#3a2f54;
      --bench-human: var(--ink-3);
      --bench-reference: var(--ink-3);

      --glass:      rgba(10,8,16,.88);
      --glass-solid:rgba(10,8,16,.96);
      --glass-line: rgba(46,37,69,.6);
      --panel:      rgba(10,8,22,.84);
      --panel-hdr:  rgba(16,14,26,.6);
      --panel-line: rgba(255,255,255,.09);
      --scanline:   rgba(255,255,255,.014);
      --row-hover:  rgba(240,236,248,.02);
      --tint-violet:rgba(159,34,212,.14);
      --tint-amber: rgba(251,179,53,.08);
      --sh-1: 0 2px 20px rgba(0,0,0,.45);
      --sh-2: 0 24px 60px rgba(0,0,0,.5);
      --sh-3: 0 16px 48px rgba(0,0,0,.65);
      --sh-btn: 0 4px 12px rgba(0,0,0,.25);
      --sel-bg:  rgba(251,179,53,.92);
      --sel-ink: #0a0810;
      --hi-col:       rgba(159,34,212,.07);
      --hi-col-head:  rgba(159,34,212,.24);
      --hi-col-hover: rgba(159,34,212,.11);
      --hi-line:      rgba(159,34,212,.28);
      --wash-violet:  rgba(159,34,212,.16);
      --wash-amber:   rgba(251,179,53,.07);
      --cc-bg: rgba(16,14,26,.92);
      --on-hi: #fff;
      --jade:  #15a05f;
    }

    /* ── Theme control ──────────────────────────────────────────────────── */
    .logo-dk { display: none; }
    :root[data-theme-mode="dark"] .logo-lt { display: none; }
    :root[data-theme-mode="dark"] .logo-dk { display: block; }

    .theme-btn {
      display: inline-grid; place-items: center;
      width: 34px; height: 34px; padding: 0;
      border: 1px solid var(--border); border-radius: var(--r);
      background: transparent; color: var(--ink-2);
      cursor: pointer; flex-shrink: 0;
      transition: color .15s, border-color .15s, background .15s;
    }
    .theme-btn:hover { color: var(--ink); border-color: var(--border-2); background: var(--tint-amber); }
    .theme-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
    .theme-btn svg { display: block; }
    /* Light room shows the moon (the action available); dark shows the sun. */
    .theme-btn .ti-sun  { display: none; }
    .theme-btn .ti-moon { display: block; }
    :root[data-theme-mode="dark"] .theme-btn .ti-sun  { display: block; }
    :root[data-theme-mode="dark"] .theme-btn .ti-moon { display: none; }

    /* Gradient-clipped text ends on Violet Bright over the void to hold
       contrast, and on Electric Violet over paper for the same reason in the
       opposite direction: #b858e8 is 3.75:1 on white, #9f22d4 is 5.75:1. */
    :root[data-theme-mode="dark"] {
      --g-text: linear-gradient(90deg, var(--c-yellow) 0%, var(--c-red) 50%, var(--c-violet) 100%);
    }
    :root:not([data-theme-mode="dark"]) {
      --g-text: linear-gradient(90deg, var(--c-yellow) 0%, var(--c-red) 50%, var(--c-purple) 100%);
    }

    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; scroll-padding-top:72px; font-size:16px; }
    body.nav-locked { overflow: hidden; }
    body { font-family:var(--fb); color:var(--ink); background:var(--bg);
           -webkit-font-smoothing:antialiased; overflow-x:hidden; }
    img  { display:block; max-width:100%; }
    a    { color:inherit; text-decoration:none; }
    ul,ol{ list-style:none; }
    button { font-family:inherit; }

    .gt { display:inline-block; width:fit-content;
          background:var(--g-text);
          -webkit-background-clip:text; -webkit-text-fill-color:transparent;
          background-clip:text;
          padding-bottom: 0.12em; }

    .wrap { max-width:var(--w); margin:0 auto; padding:0 48px; }

    .eyebrow, .usedby-lbl {
      font-family: var(--ft);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      background: var(--g-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      width: fit-content;
      margin-bottom: 14px;
    }

    /* Three title levels. Components below control spacing, not type variants. */
    .hero-h1, .h2,
    .card-h3, .corpus-h, .journey-feature, .testi-cite-title,
    .hero-lead, .overview-proof .overview-promise {
      font-family: var(--ft);
      font-weight: 500;
      color: var(--ink);
    }
    .h2 {
      font-size: var(--title-section);
      line-height: 1.12;
      letter-spacing: -.03em;
      margin-bottom: 18px;
      text-wrap: balance;
    }
    .card-h3, .corpus-h, .journey-feature, .testi-cite-title,
    .hero-lead, .overview-proof .overview-promise {
      font-size: var(--title-card);
      line-height: 1.3;
      letter-spacing: -.015em;
    }

    .lead {
      font-size: 18px;
      line-height: 1.7;
      color: var(--ink-2);
    }

    .sec-hd { margin-bottom: 52px; }

    .sec-hd:has(.lead) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 72px;
      align-items: end;
    }
    .sec-hd:has(.lead) .eyebrow { grid-column: 1; grid-row: 1; }
    .sec-hd:has(.lead) .h2 { grid-column: 1; grid-row: 2; max-width: none; margin-bottom: 0; }
    .sec-hd:has(.lead) .lead { grid-column: 2; grid-row: 1 / span 2; max-width: none; align-self: end; }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      font-family: var(--ft);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .04em;
      border-radius: var(--r);
      cursor: pointer;
      transition: opacity .18s, transform .15s, box-shadow .18s;
      text-decoration: none;
      border: none;
      text-transform: uppercase;
    }

    @keyframes gradient-flow {
      0%   { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    .btn-p {
      background: linear-gradient(90deg, #fbb335, #ff274f, #9f22d4);
      background: linear-gradient(90deg, color(display-p3 0.9868 0.6930 0.0000), color(display-p3 0.9828 0.0000 0.2756), color(display-p3 0.5934 0.0000 0.8568));
      background-size: 200% 100%;
      animation: gradient-flow 2.5s ease-in-out infinite alternate;
      color: #fff !important;
      box-shadow: 0 0 0 rgba(255,39,79,0);
      transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
    }
    .btn-p:hover { transform:translateY(-1px); box-shadow: var(--sh-btn); }
    /* keyboard focus: visible everywhere, never removed without replacement */
    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 2px solid #b858e8;
      outline: 2px solid color(display-p3 0.7184 0.2191 1.0000);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .btn:focus-visible { outline-offset: 2px; border-radius: 8px; }

    .btn-s {
      font-family: var(--ft);
      background: transparent;
      color: var(--ink);
      position: relative;
    }
    .btn-s::before {
      content:'';
      position:absolute; inset:0;
      border-radius: var(--r);
      padding:2px;
      background: var(--g);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }
    .btn-s:hover { background:rgba(251,179,53,.08); transform:translateY(-1px); }

    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--glass);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom: 1px solid var(--glass-line);
      transition: box-shadow .25s ease, background .25s ease;
    }
    header.scrolled {
      background: var(--glass-solid);
      box-shadow: var(--sh-2);
    }

    /* paper announcement bar (above sticky header) */
    .promobar {
      display: block;
      /* flat dark plate; one tracked uppercase line, gradient ink on tag + CTA only */
      background-color: var(--bg-2);
      border-bottom: 1px solid var(--border);
      color: var(--ink);
      font-family: var(--ft);
    }
    .promobar-in {
      max-width: var(--w);
      margin: 0 auto;
      padding: 12px 48px;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 18px;
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: center;
    }
    @media (max-width: 960px) {
      .promobar-in { font-size: 10.5px; gap: 14px; }
    }
    .pb-tag {
      flex: none;
      background: var(--g-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .pb-txt { color: var(--ink); }
    .pb-cta {
      flex: none;
      white-space: nowrap;
      background: linear-gradient(90deg, var(--red), var(--c-violet));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      transition: transform .18s ease;
    }
    .promobar:hover .pb-cta { transform: translateX(2px); }
    @media (max-width: 720px) {
      .promobar-in { padding: 11px 24px; gap: 8px 16px; font-size: 12px; flex-wrap: wrap; }
    }

    .hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      max-width: var(--w);
      margin: 0 auto;
      padding: 0 48px;
      height: 64px;
      transition: height .25s cubic-bezier(.4,0,.2,1);
    }
    header.scrolled .hdr { height: 54px; }

    /* mobile menu toggle (hidden on desktop) */
    .nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      width: 44px;
      height: 44px;
      padding: 10px;
      background: none;
      border: none;
      cursor: pointer;
    }
    .nt-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      background: var(--ink);
      transition: transform .22s cubic-bezier(.22,1,.36,1);
    }
    .nav-toggle[aria-expanded="true"] .nt-bar:first-child { transform: translateY(4px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nt-bar:last-child  { transform: translateY(-4px) rotate(-45deg); }

    .hdr-logo img { height: 28px; width: auto; }

    .hdr-nav {
      display: flex;
      align-items: center;
      gap: clamp(18px, 2.1vw, 30px);
    }

    .hdr-nav a {
      font-family: var(--ft);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
      transition: color .15s;
      position: relative;
    }
    .hdr-nav a:not(.btn)::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 0;
      height: 1px;
      background: var(--g);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .22s cubic-bezier(.22,1,.36,1);
    }
    .hdr-nav a:not(.btn):hover::after { transform: scaleX(1); }
    .hdr-nav a:hover { color: var(--ink); }
    .hdr-nav .btn-p,
    .hdr-nav .btn-p:hover {
      color: #fff !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      letter-spacing: .06em !important;
      padding: 9px 18px !important;
    }

    #hero {
      position: relative;
      overflow: hidden;
      padding: 112px 48px;
      background: var(--bg);
      --hero-dot: rgba(29,29,38,.085);
    }
    :root[data-theme-mode="dark"] #hero { --hero-dot: rgba(159,34,212,.34); }

    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      left: -40%; right: -40%;
      bottom: -8%; top: 20%;
      background-image: radial-gradient(circle at center, var(--hero-dot) 1.8px, transparent 1.9px);
      background-size: 40px 40px;
      transform: perspective(560px) rotateX(44deg);
      transform-origin: bottom center;
      mask-image: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 45%, transparent 68%);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 45%, transparent 68%);
    }

    .hero-scan {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 3px,
        var(--scanline) 3px,
        var(--scanline) 4px
      );
    }

    .hero-inner {
      max-width: var(--w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 72px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .hero-vid { margin-top: 6px; animation: fade-up .7s .2s cubic-bezier(.22,1,.36,1) both; }

    /* mid-page conversion band */
    .midcta-sec { padding: 0 48px; position: relative; z-index: 2; }
    .midcta {
      max-width: var(--w); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
      flex-wrap: wrap;
      padding: 28px 36px; border-radius: var(--rl);
      border: 1px solid var(--border);
      background: radial-gradient(ellipse 90% 140% at 85% 0%, var(--wash-violet), transparent 60%), var(--bg-2);
      position: relative; overflow: hidden;
    }
    .midcta::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--g); }
    .midcta-t { font-family: var(--ft); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: -.02em; }
    .midcta .btn { flex-shrink: 0; }

    /* hero demo video: a floating exhibit */
    .vid {
      position: relative;
      border-radius: var(--rl);
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--bg-2);
      box-shadow: var(--sh-2), 0 0 0 1px var(--tint-violet);
    }
    .vid-el {
      /* Fallback text only paints when the browser cannot play the video, and
         it sits on the player's own black. Keep it legible in both rooms. */
      color: #f0ecf8; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

    /* what-is: definition entry */
    #what-is .sec-hd { margin-bottom: 34px; }
    .def-entry { margin: 0 0 56px; padding-top: 30px; border-top: 1px solid var(--border); }
    .def-line {
      font-family: var(--ft);
      font-weight: 500;
      font-size: clamp(20px, 2.2vw, 27px);
      line-height: 1.4;
      letter-spacing: -.012em;
      color: var(--ink);
      text-wrap: pretty;
      max-width: 52ch;
    }
    .def-col + .def-col { border-left: 1px solid var(--border); padding-left: 64px; }
    .def-col:first-child { padding-right: 64px; }
    /* signal vs no signal: solid gradient bar under what we are, dashed veil under what we are not */
    .def-lab::after { content: ''; display: block; margin-top: 10px; }
    .def-lab-yes::after { width: 30px; height: 2px; border-radius: 1px; background: var(--g); }
    .def-lab-no::after { width: 30px; height: 0; border-top: 2px dashed var(--border); }
    @media (max-width: 720px) {
      .def-col:first-child { padding-right: 0; }
      .def-col + .def-col { border-left: none; border-top: 1px solid var(--border); padding-left: 0; }
    }

    /* what-is + comparison table (definitional GEO content) */
    .cmp-wrap { position: relative; overflow-x: auto; border-radius: var(--rl); border: 1px solid var(--border); background: var(--bg-2); }
    /* mobile: fade the clipped edge so the horizontal scroll is discoverable */
    @media (max-width: 720px) {
      .cmp-wrap {
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
                mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
      }
    }
    .cmp-wrap.at-end { -webkit-mask-image: none; mask-image: none; }
    /* iOS ignores background-attachment: fixed; serve static texture there */
    @supports (-webkit-touch-callout: none) {
      .sec-alt::before, #book { background-attachment: scroll; }
    }
    .cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; min-width: 660px; }
    .cmp th, .cmp td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
    .cmp thead th { font-family: var(--ft); font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: var(--ink); padding-top: 14px; }
    .cmp tbody th {
      font-family: var(--ft); font-weight: 500; font-size: 11px;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-3); white-space: nowrap; padding-top: 21px;
    }
    .cmp td { color: var(--ink-2); }
    .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
    .cmp tbody tr:hover th, .cmp tbody tr:hover td { background-color: var(--row-hover); }

    /* the signal column: Sunzu's answers run down the table as the one lit strip */
    .cmp .cmp-hi {
      background-color: var(--hi-col);
      border-left: 1px solid var(--hi-line);
      border-right: 1px solid var(--hi-line);
    }
    .cmp thead th.cmp-hi {
      position: relative;
      color: var(--on-hi);
      background: linear-gradient(180deg, var(--hi-col-head), var(--hi-col));
    }
    .cmp thead th.cmp-hi::before {
      content: '';
      position: absolute; top: 0; left: -1px; right: -1px; height: 3px;
      background: var(--g);
      border-radius: 3px 3px 0 0;
    }
    .cmp tbody td.cmp-hi { color: var(--ink); font-weight: 500; }
    .cmp tbody td.cmp-hi::before {
      content: '';
      display: inline-block;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--g);
      margin-right: 10px;
      vertical-align: 2px;
    }
    .cmp tbody tr:hover .cmp-hi { background-color: var(--hi-col-hover); }
    /* the roleplay column stays unlit: muted header, no signal */
    .cmp thead th.cmp-no { color: var(--ink-3); }
    .cmp-more { font-size: 15px; color: var(--ink-2); margin-top: 20px; max-width: 74ch; }
    .cmp-more a { color: var(--ink); border-bottom: 1px solid var(--border); }
    .cmp-more a:hover { color: var(--ink); border-color: var(--red); }
    .skip-link {
      position: absolute; left: 16px; top: -48px; z-index: 200;
      padding: 10px 18px; border-radius: 8px;
      background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
      font-family: var(--ft); font-size: 14px;
      transition: top .15s ease;
    }
    .skip-link:focus-visible { top: 12px; }
    .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

    .hero-h1 {
      font-size: var(--title-hero);
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
    }

    .hero-lead {
      text-wrap: balance;
      margin-bottom: 10px;
    }

    .hero-desc {
      font-size: 18px;
      line-height: 1.7;
      color: var(--ink-2);
      margin-bottom: 40px;
      max-width: 500px;
    }

    .hero-acts { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:0; }

    .hero-proofs { display:flex; flex-direction:column; gap:10px; }
    .proof-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      letter-spacing: .02em;
      color: var(--ink-2);
    }
    .proof-dot {
      width: 6px; height: 6px;
      border-radius: 50%; flex-shrink: 0;
      background: var(--g);
    }
    .hero-right { position: relative; }
    @keyframes hero-card-in {
      from { opacity:0; transform:translateY(24px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:.4} }

    .hero-left > * { animation:fade-up .65s cubic-bezier(.22,1,.36,1) both; }
    .hero-left .eyebrow    { animation-delay:0s; }
    .hero-left .hero-h1    { animation-delay:.07s; }
    .hero-left .hero-lead  { animation-delay:.13s; }
    .hero-left .hero-desc  { animation-delay:.16s; }
    .hero-left .hero-acts  { animation-delay:.20s; }
    .hero-left .hero-proofs{ animation-delay:.22s; }
    @keyframes fade-up {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Audience and brand proof share a label column and consistent row spacing. */
    .usedby {
      background: var(--bg-2);
      position: relative;
      padding: 48px;
    }
    .usedby::before, .usedby::after {
      content: ''; position: absolute; left: 0; right: 0; height: 1px;
      background: var(--g); opacity: .4;
    }
    .usedby::before { top: 0; }
    .usedby::after { bottom: 0; }
    .usedby-in {
      max-width: var(--w);
      margin: 0 auto;
      padding: 0 48px;
      display: grid;
      gap: 28px;
    }
    .usedby-line, .usedby-logos, .usedby-backers {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: center;
      gap: 24px;
    }
    .usedby-lbl {
      margin-bottom: 0;
      line-height: 18px;
    }
    .usedby-roles {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      row-gap: 14px;
    }
    .ub-role {
      font-family: var(--ft);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.4;
      text-align: left;
      color: var(--ink-2);
      padding: 0 12px;
    }
    .ub-role:first-child { padding-left: 0; }
    .ub-role + .ub-role { border-left: 1px solid var(--border); }
    .ub-role:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
    .brand-logos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }
    .brand-logos li {
      flex: 0 1 auto;
      min-width: 0;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .logo {
      display: block;
      background: var(--ink);
      -webkit-mask: var(--logo) left center / contain no-repeat;
              mask: var(--logo) left center / contain no-repeat;
      max-width: 100%;
      flex-shrink: 0;
    }
    .logo-norton { --logo: url("logos/norton.svg"); width: 154px; height: 36px; }
    .logo-vogue { --logo: url("logos/vogue.svg"); width: 134px; height: 37px; }
    .logo-avast { --logo: url("logos/avast.svg"); width: 128px; height: 40px; }
    .logo-condenast { --logo: url("logos/condenast.svg"); width: 180px; height: 30px; }
    .logo-idgeneve { --logo: url("logos/idgeneve.svg"); width: 70px; height: 48px; }
    .logo-msft { --logo: url("logos/microsoft.svg"); width: 30px; height: 30px; }
    .logo-natwest-roundel { --logo: url("logos/natwest-roundel.svg"); width: 30px; height: 30px; }

    .usedby-logos, .usedby-backers { padding-top: 24px; border-top: 1px solid var(--border); }
    .backer-list { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 20px 48px; }
    .partner { display: inline-flex; align-items: center; gap: 12px; }
    .partner-name { font-family: var(--ft); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
    @media (min-width: 901px) and (max-width: 1100px) {
      .usedby-line, .usedby-logos, .usedby-backers { grid-template-columns: 76px minmax(0, 1fr); gap: 20px; }
      .ub-role { font-size: 14px; padding: 0 8px; }
      .brand-logos { gap: 24px; }
      .backer-list { gap: 20px 32px; }
    }
    @media (max-width: 900px) {
      .usedby-line, .usedby-logos, .usedby-backers { grid-template-columns: minmax(0, 1fr); gap: 20px; }
      .usedby-lbl { justify-self: start; }
      .brand-logos { flex-wrap: wrap; justify-content: center; gap: 20px 32px; }
      .brand-logos li { flex-basis: calc((100% - 64px) / 3); }
      .ub-role { font-size: 14px; padding: 0 8px; }
      .backer-list { gap: 20px 32px; }
    }
    @media (max-width: 768px) {
      .usedby { padding: 40px 24px; }
      .usedby-in { padding: 0; }
    }
    @media (max-width: 560px) {
      .usedby-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
      .ub-role:nth-child(n) { border-left: 1px solid var(--border); padding-left: 8px; }
      .ub-role:nth-child(odd) { border-left: 0; padding-left: 0; }
      .brand-logos { gap: 12px 24px; }
      .brand-logos li { flex-basis: calc((100% - 24px) / 2); }
      .backer-list { flex-direction: column; align-items: flex-start; justify-self: start; gap: 20px; }
    }

    /* A compact overview connects the customer proof to the detailed workflows. */
    .overview { padding: 64px 48px 72px; background: var(--bg); }
    .overview-h2 { margin-bottom: 0; }
    .journey {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 28px;
      margin-top: 36px;
    }
    .journey::before {
      content: '';
      position: absolute;
      top: 43px; left: 0; right: 3px;
      height: 2px;
      background: var(--g);
      pointer-events: none;
    }
    .journey::after {
      content: '';
      position: absolute;
      top: 39px; right: 0;
      width: 10px; height: 10px;
      border-top: 2px solid var(--c-purple);
      border-right: 2px solid var(--c-purple);
      transform: rotate(45deg);
      pointer-events: none;
    }
    .journey-link { display: block; position: relative; border-radius: 4px; }
    .journey-phase {
      display: block;
      line-height: 18px;
      margin-bottom: 0;
    }
    .journey-node {
      display: block;
      width: 12px; height: 12px;
      margin: 20px 0 22px;
      border: 2px solid var(--ink-3);
      border-radius: 50%;
      background: var(--bg);
      box-shadow: 0 0 0 5px var(--bg);
    }
    .journey-feature {
      display: block;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-underline-offset: 5px;
      text-decoration-thickness: 1px;
    }
    .journey-outcome { display: block; margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
    .journey-link:hover .journey-feature,
    .journey-link:focus-visible .journey-feature { text-decoration-color: currentColor; }
    .journey-link:hover .journey-node,
    .journey-link:focus-visible .journey-node { background: var(--ink); border-color: var(--ink); }
    .journey-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
    .overview-proof {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px 32px;
      margin-top: 36px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
    }
    .overview-proof p { max-width: 65ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
    .overview-promise { text-wrap: pretty; }
    .overview-proof .text-link { flex-shrink: 0; }
    @media (max-width: 768px) {
      .overview { padding: 48px 24px 56px; }
      .journey { gap: 20px; }
    }
    @media (min-width: 641px) and (max-width: 1000px) {
      .journey-feature { min-height: 2.6em; }
    }
    @media (max-width: 640px) {
      .journey { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; padding: 0 0 16px 36px; }
      .journey::before { top: 8px; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; background: var(--gv); }
      .journey::after { top: auto; bottom: 0; left: 1px; right: auto; transform: rotate(135deg); }
      .journey-node { position: absolute; top: 3px; left: -36px; margin: 0; }
      .journey-feature { margin-top: 7px; }
      .journey-outcome { margin-top: 5px; }
      .overview-proof { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; }
    }

    .sec { padding: var(--sp) 48px; }
    /* One research product, two interfaces. Reuse the page's title hierarchy. */
    #interfaces { padding-top:0; }
    #interfaces > .wrap { padding-top:64px; border-top:1px solid var(--border); }
    .interface-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
    .interface-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--rl); background:var(--bg-2); }
    .interface-card .eyebrow { margin-bottom:12px; }
    .interface-card .card-h3 { margin-bottom:10px; }
    .interface-card .card-p { margin-bottom:24px; }
    .interface-demo { margin-top:auto; }
    .interface-player { aspect-ratio:16/9; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:#fff; }
    .interface-player video { display:block; width:100%; height:100%; object-fit:contain; }
    .interface-player video:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }
    .interface-demo figcaption { margin-top:10px; color:var(--ink-2); font-size:13px; line-height:1.5; }
    .interface-card > .text-link { align-self:flex-start; margin-top:16px; }
    @media (max-width:768px) {
      #interfaces > .wrap { padding-top:48px; }
      .interface-grid { grid-template-columns:minmax(0,1fr); }
      .interface-card { padding:24px; }
    }
    /* Alternating sections carry a grid, because the argument this company
       makes is about measurement. It was drawn for the dark room: 2px violet
       lines at 8% read as a faint glow on near-black and as lilac graph paper
       on white, which looks like an unfinished layout rather than a texture.
       Rebuilt per theme. Light gets graphite hairlines, the way a grid is
       actually printed on paper; dark keeps the violet, where a lit grid reads
       as a display. Both fade out at the section edges so sections blend
       instead of butting, and the grid now scrolls with its section rather
       than sliding underneath it. */
    .sec-alt {
      position: relative;
      isolation: isolate;
      background-color: var(--bg-2);
      --grid: rgba(29,29,38,.055);
    }
    :root[data-theme-mode="dark"] .sec-alt { --grid: rgba(159,34,212,.26); }
    .sec-alt::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      /* Dots, not lines. A line grid runs parallel to every hairline on the
         page (the use-case row rules, the table, the card borders) and lands a
         few pixels off them, which reads as a rendering fault rather than a
         texture. A dot lattice is parallel to nothing, so it can never argue
         with a component, and it keeps the measured, plotted association the
         grid was there for. */
      background-image: radial-gradient(circle at center, var(--grid) 1.5px, transparent 1.6px);
      background-size: 36px 36px;
      /* Anchored to the viewport, not the section: content scrolls over a
         stationary field, so the alternating sections read as windows onto one
         continuous surface. iOS ignores this and falls back to scroll, which
         is why the patch below still exists. */
      background-attachment: fixed;
      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
    }

    .card {
      position: relative;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 40px;
      overflow: hidden;
    }

    .card::before {
      content:'';
      position:absolute; left:0; top:0; bottom:0;
      width:3px;
      background: var(--gv);
      opacity: 1;
    }

    .card-h3 {
      margin-bottom: 12px;
    }
    .card-h3.gt {
      display: block;
      width: auto;
      background: none;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: var(--ink);
      background-clip: unset;
      color: var(--ink);
    }
    .card-p {
      font-size: 16px;
      line-height: 1.68;
      color: var(--ink-2);
    }
    .card-p strong { color: var(--ink); font-weight: 600; }
    .card-p + .card-p { margin-top: 13px; }

    .card-num {
      font-family: var(--ft);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      background: var(--g-text);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      display: block;
      width: fit-content;
      margin-bottom: 8px;
    }

    .prob-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .wf-steps {
      display: flex; flex-direction: column;
      counter-reset: wf-step;
    }
    .wf-step {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 0 56px;
      padding: 52px 0;
      border-bottom: 1px solid var(--border);
      counter-increment: wf-step;
      align-items: start;
    }
    .wf-step:first-child { padding-top: 0; }
    .wf-step:last-child  { border-bottom: none; padding-bottom: 0; }

    .wf-step::before {
      content: counter(wf-step, decimal-leading-zero);
      font-family: var(--ft);
      font-size: 44px;
      font-weight: 500;
      letter-spacing: -.03em;
      line-height: 1;
      background: var(--g);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      width: fit-content;
      padding-top: 2px;
      opacity: 1;
      position: static;
    }

    .step-h3 {
      font-family: var(--ft);
      font-size: 28px;
      font-weight: 500;
      letter-spacing: -.02em;
      margin-bottom: 14px;
      color: var(--ink);
    }
    .step-p { font-size: 17px; line-height: 1.72; color: var(--ink-2); }

    /* Product development timeline with stage labels above each feature. */
    .uc-list {
      --timeline-gap: 16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--timeline-gap);
    }
    .uc-row {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: center;
      gap: 28px;
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: var(--rl);
      background: var(--bg);
    }
    .uc-row::before {
      content: '';
      position: absolute;
      left: 50px;
      top: -1px;
      bottom: calc(-1 * var(--timeline-gap) - 1px);
      width: 1px;
      background: var(--border-2);
      pointer-events: none;
    }
    .uc-row:first-child::before { top: 50%; }
    .uc-row:last-child::before { bottom: 50%; }
    .uc-header { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: center; }
    .uc-intro { min-width: 0; }
    .uc-stage { position: relative; display: flex; align-items: center; }
    .uc-step {
      display: grid;
      place-items: center;
      flex: 0 0 44px;
      height: 44px;
      border: 1px solid var(--border-2);
      border-radius: 50%;
      background: var(--bg);
      font-family: var(--ft);
      font-size: 15px;
      font-weight: 500;
      color: var(--ink-3);
    }
    .uc-phase { margin-bottom: 16px; }
    .uc-copy { min-width: 0; container-type: inline-size; container-name: feature-copy; }
    .uc-row .card-h3 { margin-bottom: 10px; }
    .uc-p { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
    .uc-demo { margin: 24px 0 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: #fff; }
    .uc-demo video { display: block; width: 100%; height: auto; aspect-ratio: 1252 / 720; }
    .uc-demo video:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
    .uc-bench { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
    .uc-bench-group + .uc-bench-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
    .uc-bench-caption { margin-bottom: 12px; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
    #features .uc-bench-caption { text-transform: uppercase; letter-spacing: .08em; }
    .uc-bench-caption span { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--ink-3); }
    .uc-bench-row { display: grid; grid-template-columns: 136px 64px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
    .uc-bench-row + .uc-bench-row { margin-top: 10px; }
    .uc-bench-who { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
    .uc-bench-track { height: 16px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--bg-2); }
    .uc-bench-fill { display: block; height: 100%; background: var(--bench-human); border-radius: 3px 0 0 3px; }
    .uc-bench-row.reference .uc-bench-fill {
      background: repeating-linear-gradient(135deg, var(--bench-reference) 0 6px, transparent 6px 12px);
      border-radius: 3px;
    }
    .uc-bench-row.sunzu .uc-bench-fill { background: var(--g); }
    .uc-bench-value { font-family: var(--ft); font-size: 18px; line-height: 1; font-weight: 500; text-align: right; color: var(--ink-3); }
    .uc-bench-duration { font-size: 12px; line-height: 1.3; text-align: left; white-space: nowrap; color: var(--ink-2); }
    .uc-bench-row.sunzu .uc-bench-value {
      font-size: 22px;
      justify-self: end;
      background: var(--g-text);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    @container feature-copy (max-width: 420px) {
      .uc-bench-row { grid-template-columns: minmax(0, 1fr) 56px; gap: 7px 12px; }
      .uc-bench-who { grid-column: 1 / -1; grid-row: 1; }
      .uc-bench-duration { grid-column: 1 / -1; grid-row: 2; }
      .uc-bench-value { grid-column: 2; grid-row: 3; }
      .uc-bench-track { grid-column: 1; grid-row: 3; }
      .uc-bench-row + .uc-bench-row { margin-top: 12px; }
    }
    .uc-eq {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      column-gap: 16px;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding-left: 28px;
      border-left: 1px solid var(--border);
    }
    .uc-eq.eqv-i { padding-top: 0; }
    .uc-eq.eqv-i::before { display: none; }
    .uc-eq .eqv-study { grid-column: 1 / -1; font-size: 10px; letter-spacing: .1em; margin-bottom: 16px; }
    .uc-eq .eqv-n { grid-column: 1; grid-row: 2; font-size: 48px; }
    .uc-eq .eqv-u { grid-column: 2; grid-row: 2; margin: 0; align-self: center; font-size: 16px; }

    @media (min-width: 861px) and (max-width: 1100px) {
      .uc-row { padding: 24px; gap: 20px; }
      .uc-row::before { left: 46px; }
      .uc-header { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
      .uc-eq { column-gap: 12px; padding-left: 24px; }
      .uc-eq .eqv-n { font-size: 46px; }
    }
    @media (max-width: 860px) {
      .uc-row { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 24px; }
      .uc-row::before { left: 42px; }
      .uc-row:first-child::before { top: 42px; }
      .uc-row:last-child::before { bottom: calc(100% - 42px); }
      .uc-stage { align-self: start; }
      .uc-step { flex-basis: 36px; height: 36px; font-size: 13px; }
      .uc-phase { line-height: 36px; }
      .uc-header { grid-template-columns: minmax(0, 1fr); gap: 24px; }
      .uc-eq { width: fit-content; padding-left: 0; border-left: 0; }
      .uc-eq .eqv-n { font-size: 44px; }
    }
    @media (max-width: 380px) {
      .uc-row { padding: 20px; gap: 10px; }
      .uc-row::before { left: 38px; }
      .uc-row:first-child::before { top: 38px; }
      .uc-row:last-child::before { bottom: calc(100% - 38px); }
      .uc-eq { column-gap: 10px; }
      .uc-eq .eqv-n { font-size: 40px; }
      .uc-eq .eqv-u { font-size: 14px; }
    }

    .tp {
      padding: 28px 0;
      border-bottom: 1px solid var(--border);
    }
    .tp:first-child { padding-top: 0; }
    .tp:last-child  { border-bottom: none; }

    .tp-h3 {
      font-family: var(--ft);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -.01em;
      margin-bottom: 8px;
    }
    .tp-p { font-size: 16px; line-height: 1.68; color: var(--ink-2); }

    /* benchmark: study-specific recovery against human findings */
    .sci-close {
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px 56px;
    }
    .sci-close .tp { padding: 0; border-bottom: none; }
    @media (max-width: 760px) { .sci-close { grid-template-columns: 1fr; gap: 26px; } }

    .bmk {
      margin-top: 72px;
      padding-top: 44px;
      border-top: 1px solid var(--border);
    }
    /* headline left, method lede right: mirrors .sec-hd:has(.lead) */
    .bmk-hd {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 20px 56px;
      align-items: end;
    }
    .bmk-h3 {
      font-family: var(--ft);
      font-weight: 500;
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.1;
      letter-spacing: -.025em;
      text-wrap: balance;
      max-width: 26ch;
    }
    .bmk-sub { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
    @media (max-width: 900px) {
      .bmk-hd { grid-template-columns: 1fr; gap: 14px; align-items: start; }
      .bmk-h3 { max-width: 28ch; }
    }

    /* Equivalence row: the whole claim is "one study = this many people", so
       the figure is the object, not a bar. Same gradient-dash treatment as the
       corpus band in Science, one visual language for evidence on this page. */
    .eqv {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 34px 30px;
      margin: 34px 0 6px;
    }
    .eqv-i { position: relative; padding-top: 20px; }
    .eqv-i::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 28px; height: 3px;
      border-radius: 2px;
      background: var(--g);
    }
    .eqv-study {
      font-family: var(--fb);
      font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
      color: var(--ink-2);
      margin-bottom: 16px;
    }
    .eqv-n {
      margin: 0;
      font-family: var(--ft); font-weight: 500;
      font-size: 62px; line-height: .92; letter-spacing: -.03em;
      background: var(--g-text);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      width: fit-content;
    }
    .eqv-u {
      margin: 12px 0 0;
      font-family: var(--ft); font-weight: 500; font-size: 17px;
      letter-spacing: -.01em; color: var(--ink);
    }
    @media (max-width: 900px) {
      .eqv   { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
      .eqv-n { font-size: 52px; }
    }
    @media (max-width: 460px) {
      .eqv { grid-template-columns: 1fr; }
    }

    .testi-grid {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 24px;
    }

    .testi-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 32px;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 0;
    }

    .testi-card::before {
      content:'';
      position:absolute; top:0; left:0; right:0;
      height:2px; background:var(--g); opacity:1;
    }

    .qmark {
      font-family: var(--ft);
      font-size: 48px;
      line-height: 1;
      background: var(--g);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      width: fit-content;
      opacity: 1;
      height: 30px;
      margin: 24px 0 12px;
      user-select: none;
    }

    .testi-q {
      font-size: 16px;
      line-height: 1.72;
      color: var(--ink-2);
      margin: 0;
    }
    .testi-q p + p { margin-top: 13px; }
    .testi-cite {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: start;
      gap: 20px;
      min-height: 136px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--border);
    }
    .testi-avatar {
      width: 96px; height: 96px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 1.5px solid var(--border);
      filter: grayscale(1) brightness(1.08) contrast(.9);
    }
    .testi-icon { filter: none; }
    .testi-cite-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .testi-cite-meta { font-family: var(--fb); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
    .testi-cite-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
    @media (max-width: 1000px) {
      .testi-grid { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 560px) {
      .testi-card { padding: 28px; }
      .testi-cite { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 24px; }
      .testi-avatar { width: 88px; height: 88px; }
    }
    /* unified styling for every LinkedIn profile link (any link containing the LinkedIn glyph) */
    a:has(.li-ico) { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
    .li-ico { width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px; fill: currentColor; opacity: .8; transition: opacity .2s ease; }
    a:has(.li-ico):hover .li-ico { fill: url(#liGrad); opacity: 1; }

    /* meet the team */
    .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .team-card {
      background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
      padding: 36px 28px; display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 18px; position: relative; overflow: hidden;
    }
    .team-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--g); }
    .team-avatar {
      width: 92px; height: 92px; border-radius: 50%;
      position: relative; overflow: hidden;
      background: transparent; border: 1.5px solid var(--border);
    }
    .team-avatar img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: grayscale(1);
    }
    .team-name { font-family: var(--ft); font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
    .team-role { font-size: 14px; color: var(--ink-3); }
    .team-bio { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 12px; max-width: 30ch; margin-left: auto; margin-right: auto; }

    .faq-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 80px;
      align-items: start;
      border-top: 1px solid var(--border);
    }
    .faq-item { border-bottom: 1px solid var(--border); }

    .faq-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
      background: none; border: none;
      cursor: pointer;
      font-family: var(--ft);
      font-size: 18px;
      font-weight: 500;
      color: var(--ink);
      text-align: left;
      gap: 20px;
      letter-spacing: -.01em;
      transition: color .18s;
    }
    .faq-btn:hover { color: var(--ink); }

    .faq-ico {
      width: 28px; height: 28px; flex-shrink: 0;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      color: var(--ink-3);
      transition: all .22s cubic-bezier(.22,1,.36,1);
      font-family: var(--ft);
      line-height: 1;
    }
    .faq-btn[aria-expanded="true"] .faq-ico {
      border-color: var(--ink-3);
      background: none;
      color: var(--ink);
      transform: rotate(45deg);
    }
    .faq-ans {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1), opacity .25s ease;
      font-size: 17px;
      line-height: 1.72;
      color: var(--ink-2);
    }
    .faq-ans-inner { overflow: hidden; min-height: 0; padding-bottom: 24px; }
    .faq-item.open .faq-ans { grid-template-rows: 1fr; opacity: 1; }

    #book {
      text-align: center;
      padding: var(--sp) 48px;
      position: relative;
      overflow: hidden;
    }

    #book { --grid: rgba(29,29,38,.055); }
    :root[data-theme-mode="dark"] #book { --grid: rgba(159,34,212,.26); }
    #book::before {
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 60% at 20% 50%, var(--wash-amber) 0%, transparent 70%),
        radial-gradient(ellipse 60% 70% at 80% 40%, var(--wash-violet) 0%, transparent 70%),
        radial-gradient(circle at center, var(--grid, rgba(159,34,212,.14)) 1.5px, transparent 1.6px);
      background-size: auto, auto, 36px 36px;
      background-attachment: scroll, scroll, fixed;
      pointer-events:none;
    }
    #book > * { position:relative; z-index:1; }

    .cta-in { max-width: 680px; margin: 0 auto; position:relative; z-index:1; }

    .cta-h2 {
      margin-bottom: 22px;
    }


    footer {
      background: #07050e;
      color: rgba(255,255,255,.85);
      border-top: 3px solid transparent;
      background-clip: padding-box;
      position: relative;
    }
    footer::before {
      content:''; position:absolute; top:-3px; left:0; right:0;
      height:3px; background:var(--g);
    }

    .ftr-main {
      max-width: var(--w);
      margin: 0 auto;
      padding: 64px 48px 48px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
    }

    .ftr-logo { height: 26px; width: auto; margin-bottom: 16px; }
    .ftr-tag { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.5); max-width: 270px; }

    .ftr-nav-t {
      font-family: var(--ft);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.62);
      margin-bottom: 16px;
    }

    .ftr-nav ul { display:flex; flex-direction:column; gap:10px; }
    .ftr-nav a { font-size: 15px; color: rgba(255,255,255,.65); transition: color .15s; }
    .ftr-nav a:hover { color: #fff; }

    .ftr-bot {
      max-width: var(--w);
      margin: 0 auto;
      padding: 20px 48px;
      border-top: 1px solid rgba(255,255,255,.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .ftr-copy { font-size: 13px; color: rgba(255,255,255,.58); max-width: 82ch; }
    .ftr-mail { font-size: 13px; color: rgba(255,255,255,.55); transition: color .15s; }
    .ftr-mail:hover { color: #fff; }

    /* The light footer shares the page's neutral surfaces and text ramp. */
    :root:not([data-theme-mode="dark"]) footer { background: var(--bg-2); color: var(--ink); }
    :root:not([data-theme-mode="dark"]) .ftr-nav-t { color: var(--ink-2); }
    :root:not([data-theme-mode="dark"]) .ftr-nav a { color: var(--ink-2); }
    :root:not([data-theme-mode="dark"]) .ftr-tag,
    :root:not([data-theme-mode="dark"]) .ftr-copy,
    :root:not([data-theme-mode="dark"]) .ftr-mail { color: var(--ink-3); }
    :root:not([data-theme-mode="dark"]) .ftr-nav a:hover,
    :root:not([data-theme-mode="dark"]) .ftr-mail:hover { color: var(--ink); }
    :root:not([data-theme-mode="dark"]) .ftr-bot { border-top-color: var(--border); }

    .reveal-enabled .reveal-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
    }
    .reveal-enabled .reveal-up.in-view { opacity: 1; transform: none; }

    @media (max-width: 1024px) {
      .hero-inner      { grid-template-columns:1fr; gap:48px; }
      .hero-right      { order: 0; }
      .hero-acts       { justify-content: flex-start; }
      .ftr-main        { grid-template-columns:1fr 1fr; gap:32px; }
      .sec-hd:has(.lead) { grid-template-columns: 1fr; gap: 24px 0; }
      .sec-hd:has(.lead) .lead { grid-column: 1; grid-row: 3; align-self: start; }
      .wf-step { grid-template-columns: 52px 1fr; gap: 0 32px; }
      .faq-list { grid-template-columns: 1fr; }
      .nav-toggle      { display: flex; }
      /* nav collapses into a panel under the sticky header */
      .hdr-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 20px;
        background: var(--glass-solid);
        border-bottom: 1px solid var(--border);
      }
      header.nav-open .hdr-nav { display: flex; max-height: calc(100dvh - 64px); overflow-y: auto; }
      .hdr-nav a:not(.btn) {
        display: block;
        padding: 13px 2px;
        font-size: 16px;
        min-height: 44px;
        border-bottom: 1px solid var(--glass-line);
      }
      .hdr-nav .btn { margin-top: 16px; justify-content: center; }
    }
    @media (max-width: 768px) {
      :root { --sp: 72px; }
      .hero-acts { flex-direction: column; align-items: stretch; }
      .hero-acts .btn { justify-content: center; }
      .sec, #hero, #book { padding: var(--sp) 24px; }
      .midcta-sec { padding: 0 24px; }
      .midcta { padding: 24px 24px; }
      .hdr             { padding: 0 24px; }
      .prob-grid       { grid-template-columns: 1fr; }
      .team-grid       { grid-template-columns: 1fr; }
      .wf-step         { grid-template-columns: 1fr; padding: 32px 0; }
      .wf-step::before { font-size: 24px; margin-bottom: 8px; }
      .uc-list         { grid-template-columns: 1fr; }
      .testi-grid      { grid-template-columns: 1fr; }
      .ftr-main        { grid-template-columns: 1fr; }
      .wrap { padding-left:0; padding-right:0; }
      .ftr-main, .ftr-bot { padding-left:24px; padding-right:24px; }
    }

    /* ── Double diamond: the build, end to end ───────────────
       Ported from the deck (slide 03). The deck is light-only and bakes its
       colours into the SVG; here every fill and stroke is a token so the
       drawing follows the theme. Only the type sitting on the gradient
       diamond stays hard white — it is on the gradient in both themes. */
    .dd { margin: 6px 0 40px; }
    .dd svg { display: block; width: 100%; height: auto; }
    .dd .dd-line   { stroke: var(--ink); }
    .dd .dd-d1     { fill: var(--bg-2); stroke: url(#ddg); }
    .dd .dd-d2     { fill: url(#ddg); }
    .dd .dd-div    { stroke: var(--ink-3); }
    .dd .dd-node   { fill: url(#ddg); stroke: var(--bg); }
    .dd .cap       { font-family: var(--ft); font-weight: 500; font-size: 18px; letter-spacing: -.005em; fill: var(--ink); }
    .dd .phase     { font-family: var(--ft); font-weight: 500; font-size: 15px; letter-spacing: .14em; fill: var(--ink); }
    .dd .phase.on-g{ fill: #fff; }
    .dd .end-s     { font-family: var(--fb); font-size: 16px; fill: var(--ink-3); }
    .dd .end-b     { font-family: var(--ft); font-weight: 500; font-size: 21px; letter-spacing: -.01em; fill: var(--ink); }
    .dd .mid-c     { font-family: var(--fb); font-size: 14.5px; fill: var(--ink-2); }
    /* The drop shadow reads as depth on paper and as haze on near-black. */
    :root[data-theme-mode="dark"] .dd .dd-d1,
    :root[data-theme-mode="dark"] .dd .dd-d2 { filter: none; }
    @media (max-width: 700px) {
      .dd .cap   { font-size: 22px; }
      .dd .phase { font-size: 18px; }
      .dd .end-s { font-size: 19px; }
      .dd .end-b { font-size: 25px; }
      .dd .mid-c { font-size: 17px; }
    }

    /* ── Science section ─────────────────────────────────── */
    #science .card-h3 {
      color: var(--ink);
    }

    .sci-ground-h {
      background: var(--g);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
    }

    .sci-ground {
      margin-bottom: 40px;
      padding: 40px;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--rl);
      position: relative;
      overflow: hidden;
    }
    .sci-ground::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--gv);
    }
    .sci-ground-h {
      font-family: var(--ft);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -.01em;
      margin-bottom: 14px;
    }
    .sci-ground-p {
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-2);
    }
    .sci-ground-p + .sci-ground-p { margin-top: 14px; }

    /* Data-foundation band: the corpus figures behind the enrichment claim.
       Figures come from the Persona Characteristics and Heuristics Data Corpus —
       update both together or the paper and the site drift apart. */
    /* The card sat on --bg-2, the same value as the .sec-alt section behind it,
       so only the border separated the two. --bg lifts it off the section in
       both rooms: white on paper, and the base near-black against the raised
       section in the signal room. */
    .corpus {
      margin-bottom: 40px;
      padding: 40px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--rl);
    }
    .corpus-h {
      margin-bottom: 14px;
    }
    .corpus-p {
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-2);
      max-width: 70ch;
    }
    .corpus-grid {
      margin-top: 32px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: start;
      gap: 30px 32px;
    }
    .corpus-v {
      display: block;
      font-family: var(--ft);
      font-size: 40px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.025em;
      background: var(--g-text);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      width: fit-content;
      margin-bottom: 9px;
    }
    .corpus-l {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink-3);
    }
    @media (max-width: 900px) {
      .corpus       { padding: 30px 26px; }
      .corpus-grid  { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; padding-top: 26px; }
      .corpus-v     { font-size: 32px; }
    }
    @media (max-width: 560px) {
      .corpus-grid  { grid-template-columns: 1fr; }
    }

    .trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .trust-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--rl); background: var(--bg-2); }
    .trust-card .card-p { font-size: 15px; }
    .trust-data.corpus { margin: 24px 0 0; padding: 28px; }
    .trust-data .corpus-h { margin-bottom: 0; }
    .trust-data .corpus-grid { margin-top: 24px; padding-top: 24px; }
    .trust-papers { margin-top: 28px; }
    .text-link {
      display: inline-flex; align-items: center; gap: 10px;
      min-height: 44px; max-width: 100%;
      font-size: 16px; font-weight: 500; color: var(--ink);
    }
    .text-link span:first-child {
      padding-bottom: 4px;
      background-image: linear-gradient(var(--border-2), var(--border-2));
      background-position: left bottom; background-size: 100% 1px;
      background-repeat: no-repeat;
    }
    .text-link:hover span:first-child,
    .text-link:focus-visible span:first-child {
      background-image: var(--g); background-size: 100% 2px;
    }
    .text-link .gt { flex-shrink: 0; padding-bottom: 0; }
    .text-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
    @media (max-width: 1000px) {
      .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
      .trust-card { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 28px; }
      .trust-card .card-h3 { margin-bottom: 0; }
    }
    @media (max-width: 600px) {
      .trust-card { display: flex; align-items: stretch; gap: 0; padding: 24px; }
      .trust-card .card-h3 { margin-bottom: 12px; }
      .trust-data.corpus { padding: 24px; }
      .trust-data .corpus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
    }
    @media (max-width: 380px) {
      .trust-data .corpus-v { font-size: 28px; }
    }

    /* Reduced motion: crossfades and instant states instead of movement.
       Covers the CTA gradient loop, entrance reveals and hover lifts. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      html { scroll-behavior: auto; }
    }
    ::selection   { background: var(--sel-bg); color: var(--sel-ink); text-shadow: none; }
    ::-moz-selection { background: var(--sel-bg); color: var(--sel-ink); text-shadow: none; }

    /* Theme switches instantly. Two reasons: a page-wide element-by-element
       cross-fade looks cheap, and a transitioned property that reads a custom
       property can keep a stale computed value when that variable changes. */
    html.theme-instant, html.theme-instant *, html.theme-instant *::before,
    html.theme-instant *::after { transition: none !important; }

    .demo-watch-link { padding: 12px 16px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--border); }
    .benchmark-note { margin-top: 24px; font-size: 13px; color: var(--ink-2); }
    .demo-watch-link a, .benchmark-note a { text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 4px; }
    .demo-watch-link a:hover, .benchmark-note a:hover { text-decoration-color: transparent; background: var(--g) left bottom / 100% 2px no-repeat; }