:root {
    --dur: .8s;
    --ease: cubic-bezier(.65, 0, .35, 1);
    --inset: clamp(12px, 2vw, 28px);
    --hdr: 64px;
    --radius: clamp(16px, 2.2vw, 32px);
    --stage: var(--page);
    --sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --m: clamp(24px, 6.7vw, 96px);   /* side margin of each half */

    --page: #0d0e11;
    --page-fg: #ffffff;

    --l-bg: #0d0e11;
    --l-glow: #0d0e11;
    --l-fg: #ffffff;
    --l-accent: #ffffff;
    --l-on: #0d0e11;

    --r-bg: #0d0e11;
    --r-glow: #0d0e11;
    --r-fg: #ffffff;
    --r-accent: #9dff3a;
    --r-on: #0d0e11;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --page: #0d0e11; --page-fg: #ffffff;
      --l-bg: #0d0e11; --l-glow: #0d0e11; --l-fg: #ffffff; --l-accent: #ffffff; --l-on: #0d0e11;
      --r-bg: #0d0e11; --r-glow: #0d0e11; --r-fg: #ffffff; --r-accent: #9dff3a; --r-on: #0d0e11;
    }
  }
  :root[data-theme="dark"] {
    --page: #0d0e11; --page-fg: #ffffff;
    --l-bg: #0d0e11; --l-glow: #0d0e11; --l-fg: #ffffff; --l-accent: #ffffff; --l-on: #0d0e11;
    --r-bg: #0d0e11; --r-glow: #0d0e11; --r-fg: #ffffff; --r-accent: #9dff3a; --r-on: #0d0e11;
  }

  html, body { height: 100%; }
  /* The page takes the colour of the small (contracted) section */
  html { background: var(--stage); transition: background-color var(--dur) var(--ease); }
  :root[data-active="right"] { --stage: var(--l-bg); }
  :root[data-active="left"]  { --stage: var(--r-bg); }
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--page-fg);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* ---------- The split ---------- */
  .split {
    display: flex;
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    padding: 0;
    transition: padding var(--dur) var(--ease);
  }
  /* Enlarged state: the big panel floats inside a margin instead of touching the edges */
  .split[data-active="left"],
  .split[data-active="right"] { padding: var(--hdr) var(--inset) var(--inset); }

  .panel {
    position: relative;
    container-type: inline-size;   /* lets the left panel scale type with its own width (cqw) */
    flex: 1 1 0;               /* 1 : 1  -> 50 / 50 */
    min-width: 0;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    color: var(--fg);
    border-radius: 0;
    background-color: var(--bg);
    transition: flex-grow var(--dur) var(--ease), border-radius var(--dur) var(--ease);
    cursor: default;
  }
  .split[data-active="left"] .panel,
  .split[data-active="right"] .panel { border-radius: var(--radius); }

  /* Gradient lives on a layer so it can fade out, leaving the flat page colour behind the small panel */
  .panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(90% 90% at var(--gx) 15%, var(--glow), var(--bg) 70%);
    transition: opacity var(--dur) var(--ease);
  }
  .panel::before { display: none; }   /* flat colours: nothing to paint */
  .panel::-webkit-scrollbar { display: none; }
  .panel.is-open { flex-grow: 5.6667; }   /* 5.667 : 1  -> 85 / 15 */

  .panel[data-side="left"] {
    --fg: var(--l-fg); --accent: var(--l-accent); --on: var(--l-on);
    --bg: var(--l-bg); --glow: var(--l-glow); --gx: 25%;
  }
  .panel[data-side="right"] {
    --fg: var(--r-fg); --accent: var(--r-accent); --on: var(--r-on);
    --bg: var(--r-bg); --glow: var(--r-glow); --gx: 75%;
  }

  /* Fixed-width column, centred on the panel with a margin (not a transform),
     so text never re-wraps while the panel width animates. */
  .stack {
    --col: clamp(260px, 38vw, 520px);
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--col);
    margin-block: auto;
    margin-inline-start: calc(50% - var(--col) / 2);
    padding: 32px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: opacity .6s ease;
  }
  .panel.is-dim .stack { opacity: .55; }

  h2 {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -.02em;
    line-height: 1.05;
    white-space: nowrap;
  }

  /* ---------- Revealed content ---------- */
  .reveal {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows var(--dur) var(--ease);
  }
  .panel.is-open .reveal { grid-template-rows: 1fr; }

  .inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s .45s;   /* hide from tab order / AT after fade-out */
  }
  .panel.is-open .inner { visibility: visible; transition-delay: 0s; }

  .inner > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .15s ease, transform .15s ease;   /* leaves quickly */
  }
  .panel.is-open .inner > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease .32s, transform .7s var(--ease) .32s;  /* arrives after the panel has mostly grown */
  }
  .panel.is-open .inner > :nth-child(2) { transition-delay: .4s; }
  .panel.is-open .inner > :nth-child(3) { transition-delay: .48s; }

  .inner p {
    margin: 1.1rem 0 0;
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 62ch;
    opacity: .9;
  }
  .inner p + p { margin-top: .8rem; }
  .media {
    margin: 1.4rem 0 .4rem;
    width: 100%;
    height: clamp(110px, 22vh, 230px);
    border-radius: 14px;
    overflow: hidden;
  }
  .media svg { display: block; width: 100%; height: 100%; }

  /* ---------- CTA ---------- */
  .cta {
    margin-top: 1.4rem;
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -10px var(--accent); }
  .cta:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

  /* ---------- Right panel: "Treat" content (Figma node 73:1050) ---------- */
  .stack--zombie {
    --col: 0px;
    flex: 1 1 0;
    flex-direction: row;            /* text column + game column; the game column is 0 wide until the panel is enlarged */
    align-self: stretch;            /* full height of the panel, so the game column can fill it */
    width: auto;
    min-width: 0;
    margin-block: 0;
    margin-inline: 0;
    box-sizing: border-box;
    padding: 32px 16px;
    min-height: 460px;              /* below this the panel scrolls instead of squeezing the game */
    container-type: size;           /* lets the game column size itself from the panel's height (cqh) */
    align-items: center;
    text-align: center;
  }
  .ztext { flex: 1 1 0; min-width: 0; max-width: 800px; margin-inline: auto; box-sizing: border-box; padding-inline: 16px; display: flex; flex-direction: column; align-items: center; }
  .zgamecol {
    flex: 0 0 0; min-width: 0; align-self: stretch; overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: flex-basis var(--dur) var(--ease), opacity .5s ease, visibility 0s .45s;
  }
  /* its width follows its height (the game is 720 x 765), so the game fills the full height of the panel */
  .panel.is-open .zgamecol { flex-basis: min(calc(100cqh * 720 / 765), 62cqw); opacity: 1; visibility: visible; transition: flex-basis var(--dur) var(--ease), opacity .5s ease .32s, visibility 0s; }
  .badge {
    display: inline-block;
    background: #000;
    color: #f69834;
    border-radius: 4px;
    padding: 6px 12px;
    font-family: Creepster, "Creepy House", fantasy;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 40px;
  }
  .zgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  h2.pixel {
    font-family: "Press Start 2P", "Courier New", monospace;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.3vw, 2rem);   /* large: default (50/50) and enlarged */
    line-height: 1.78;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    white-space: normal;
    color: var(--fg);
  }
  .cta--pill {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
    padding: 7.5px 18px;
    background: #fff;
    color: #000;
    border: 1.5px solid #e5000d;
    font-family: "Momo Trust Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    font-size: 9px;
    line-height: 16.8px;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cta--pill:hover { box-shadow: 0 8px 24px -12px #e5000d; }
  .cta--pill:focus-visible { outline-color: #000; }
  .zicon { width: 22.431px; height: 24px; flex: none; }
  .game {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  /* ---------- Left panel: "Trick" content (Figma node 75:1102) ---------- */
  .stack--sola {
    /* Heading scales with the panel's width, so it glides instead of re-wrapping */
    --f: clamp(2rem, 3.4vw, 3rem);   /* large: default (50/50) and enlarged */
    --bw: 240px;
    --measure: clamp(280px, 52vw, 768px);
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 832px;               /* 800px of content + 16px padding either side */
    margin-inline: auto;
    box-sizing: border-box;
    padding: 32px 16px;
    align-items: flex-start;
    text-align: left;
    color: var(--fg);
  }
  .badge--orange { background: #f69834; color: #000; }
  .stack--sola .badge { margin-bottom: 24px; }

  .headrow {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    transition: min-height var(--dur) var(--ease), padding-right var(--dur) var(--ease);
  }
  .panel.is-open .headrow { padding-right: calc(var(--bw) + 16px); }
  .panel.is-open .headrow { min-height: calc(var(--bw) * 563 / 1495); }
  h2.serif {
    margin: 0;
    font-family: Calistoga, Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: var(--f);
    line-height: 1.15;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--fg);
  }
  .sub {
    margin: 0;
    font-family: "AR One Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(.9rem, 1.4vw, 1.25rem);
    letter-spacing: .135px;
    line-height: 1.2;
    white-space: normal;
  }
  .footbrain { background: url(../img/brain-mark.png) center / contain no-repeat; }
  .brain {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--bw);
    height: auto;
    aspect-ratio: 1495 / 563;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
  }
  .panel.is-open .brain { opacity: 1; transition: opacity .6s ease .35s; }

  .stack--sola .inner { width: 100%; }
  .stack--sola .story > p:first-child { margin-top: 24px; }
  .about > :first-child { margin-top: 64px; }
  .stack--sola .inner p { margin: 0 0 12px; max-width: none; opacity: 1; }
  .stack--sola .inner p + p { display: block; margin-top: 0; }
  .story p {
    font-family: Anybody, "AR One Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: 1px;
  }
  .story b { font-weight: 700; }
  .story .hot { color: #e5000d; }

  .ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    margin-top: 24px;
  }
  .cta--sola { height: 42px; padding: 10.5px 18px; border-radius: 36.75px; }
  .cta--sola:hover { box-shadow: 0 8px 24px -12px #e5000d; }
  .cta--sola:focus-visible { outline-color: #000; }
  .linkbtn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
    height: 42px;
    color: var(--fg);
    font-family: "Momo Trust Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 9px;
    line-height: 16.8px;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .linkbtn:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 999px; }
  .linkbtn svg { width: 16px; height: 16px; flex: none; }

  .about h3 {
    margin: 0 0 12px;
    font-family: "AR One Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 1px;
  }
  .about p {
    font-family: "AR One Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 16.8px;
    letter-spacing: 1px;
  }
  .about p b { font-weight: 700; }
  .about .row { display: flex; gap: 24px; align-items: flex-start; margin-top: 32px; }
  .about .col { flex: 1; min-width: 0; }
  .logobox {
    flex: none;
    width: 178.25px;
    height: 178.25px;
    box-sizing: border-box;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Default / 25% states show only the badge + main heading; everything else is revealed when enlarged */
  .stack--sola .inner > .sub { margin-top: 16px; }
  .stack--zombie .badge { margin-bottom: 48px; }
  .zrow { margin-top: 16px; }
  .zgame { margin-top: 30px; }
  .panel:focus-visible { outline: 3px solid var(--fg); outline-offset: -6px; }

  /* ---------- Sticky header (Figma node 34:368): transparent, on top of the layout ---------- */
  .site-header {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: var(--hdr);
    padding: 0 32px;
    display: flex;
    align-items: center;
    background: transparent;
    color: #000;
    z-index: 20;
    pointer-events: none;
    transition: color var(--dur) var(--ease);
  }
  /* When the orange panel is enlarged the page behind the header is black, so the text flips to white */
  :root[data-active="left"] .site-header { color: #fff; }
  .brand { display: flex; align-items: center; gap: 13px; }
  .footbrain { display: block; width: 35.604px; height: 32px; flex: none; }
  .wordmark {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: "Asta Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    line-height: normal;
    letter-spacing: .48px;
    white-space: nowrap;
  }
  .wordmark .b { font-weight: 800; letter-spacing: 7.68px; }

  /* ---------- Bottom section: Read more / Read less (Figma node 100:7445) ---------- */
  .collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
  }
  .collapse > .cin {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s .45s;
  }
  .about .cin > h3:first-child { margin-top: 12px; }
  .about .blk2 { margin-top: 32px; }
  .cin > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .15s ease, transform .15s ease;
  }
  .about.is-expanded .collapse { grid-template-rows: 1fr; }
  .about.is-expanded .collapse > .cin { visibility: visible; transition-delay: 0s; }
  .about.is-expanded .cin > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease .25s, transform .6s var(--ease) .25s;
  }
  .about.is-expanded .cin > :nth-child(2) { transition-delay: .32s; }
  .about.is-expanded .cin > :nth-child(3) { transition-delay: .39s; }
  .about.is-expanded .cin > :nth-child(4) { transition-delay: .46s; }
  .linkbtn .chev { transition: transform var(--dur) var(--ease); }
  .about.is-expanded .chev { transform: rotate(180deg); }
  .linkbtn .when-open { display: none; }
  .about.is-expanded .linkbtn .when-open { display: inline; }
  .about.is-expanded .linkbtn .when-closed { display: none; }

  /* The left image keeps its 240px width; on narrower windows the heading gives way instead */
  @media (max-width: 720px) {
    .panel.is-open { flex-grow: 3; }   /* phones stack the panels: a 15% strip would be too short */
    .brain { position: relative; max-height: 0; transition: opacity .15s ease, max-height var(--dur) var(--ease); }
    .panel.is-open .brain { max-height: 120px; margin-top: 16px; transition: opacity .6s ease .35s, max-height var(--dur) var(--ease); }
    .panel.is-open .headrow { min-height: 0; padding-right: 0; }
  }

  /* ---------- Game (Grey Matter v4): fills the height of the right-hand column when the panel is enlarged ---------- */
  .stack--zombie .inner { width: 100%; }
  /* The game is laid out at 720px wide (its own desktop size, where every screen fits without scrolling)
     and scaled to fit the column (contain), centred, so it uses the full height whenever the width allows. */
  .gamebox { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: transparent; }
  .gamebox iframe {
    position: absolute;
    top: var(--oy, 0px);
    left: var(--ox, 0px);
    width: 720px;
    height: 770px;
    border: 0;
    transform-origin: 0 0;
    transform: scale(var(--k, .72));
    display: none;
    opacity: 0;
    transition: opacity .35s ease;
  }

  /* Enlarged right panel (Figma node 110:7449): everything centred, heading on one line, sub line under it */
  .stack--zombie .badge { transition: margin-bottom var(--dur) var(--ease); }
  .panel.is-open .stack--zombie .badge { margin-bottom: 24px; }
  .zsub {
    margin-top: 16px;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 10px;
    line-height: 14.4px;
    letter-spacing: 1px;
    color: #fff;
    white-space: normal;
    text-align: center;
  }

  @keyframes crt-flicker {
    0%, 100% { filter: brightness(1); }
    8%  { filter: brightness(.965); }
    14% { filter: brightness(1.02); }
    31% { filter: brightness(.975); }
    47% { filter: brightness(1.015); }
    63% { filter: brightness(.96); }
    79% { filter: brightness(1.02); }
    90% { filter: brightness(.98); }
  }
  .brain, .footbrain { animation: crt-flicker 2.4s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .brain, .footbrain { animation: none; } }

  .site-header .watch { margin-left: auto; pointer-events: auto; }   /* the header itself ignores the pointer; the button does not */

  .gamebox:fullscreen { background: #000; border-radius: 0; }   /* full screen: the box fills the display, the game is centred in it */

  /* Heading sizes: two only. Large in the default and enlarged states, small in the 15% strip
     (sized so "Brain.Security!" and "zombie." still fit it). The change eases in with the panel. */
  .panel.is-dim .stack--sola { --f: clamp(1.25rem, calc((.15 * (100vw - 56px) - 32px) / 8), 3rem); }
  .panel.is-dim h2.pixel { font-size: clamp(1rem, calc((.15 * (100vw - 56px) - 32px) / 7.2), 2rem); }
  h2.serif, h2.pixel { transition: font-size var(--dur) var(--ease), color .25s ease; }

  /* =====================  QUIET SPLIT  =====================
     paper + ink, one green accent, a modern grotesk, generous margins, almost no ornament */
  .kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; font: 700 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
  .kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
  .stack--sola .kicker { color: #111; align-self: flex-start; }
  .stack--zombie .kicker { color: #9dff3a; }

  /* headlines: one grotesk for both sides, tight tracking, two sizes (large; small in the 15% strip) */
  h2.serif, h2.pixel { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; }
  .stack--sola { --f: clamp(2.25rem, 4.4vw, 4.25rem); }
  .panel.is-dim .stack--sola { --f: clamp(1.25rem, calc((.15 * (100vw - 56px) - 32px) / 8.4), 3rem); }
  h2.pixel { font-size: clamp(2.25rem, 4.4vw, 4.25rem); }
  .panel.is-dim h2.pixel { font-size: clamp(1rem, calc((.15 * (100vw - 56px) - 32px) / 7), 3rem); }

  /* margins: 96px on a wide screen, never less than 16px, and 16px in the strip */
  .stack--sola { padding-inline: var(--m); max-width: calc(800px + 2 * var(--m)); transition: padding-inline var(--dur) var(--ease); }
  .panel.is-dim .stack--sola { padding-inline: 16px; }
  .stack--zombie { text-align: left; }
  .ztext { align-items: flex-start; padding-inline: var(--m); transition: padding var(--dur) var(--ease); }
  .panel.is-open .ztext { padding-inline: 32px; padding-bottom: 0; }
  .panel.is-dim .ztext { padding-inline: 16px; padding-bottom: 0; }

  /* supporting text */
  .sub { font-family: var(--sans); font-weight: 400; font-size: clamp(1rem, 1.45vw, 1.3125rem); letter-spacing: 0; line-height: 1.5; color: #6b6a64; }
  .zsub { font-family: var(--sans); font-size: clamp(1rem, 1.45vw, 1.3125rem); letter-spacing: 0; line-height: 1.5; color: #8b8f98; text-align: left; margin-top: 20px; }
  .zprize { margin: 24px 0 0; font: 600 clamp(.95rem, 1.2vw, 1.125rem)/1.5 var(--sans); color: #fff; text-align: left; }
  .zprize span { display: block; color: #ff9200; }
  .story p, .about p { font-family: var(--sans); font-size: 15px; line-height: 1.65; letter-spacing: 0; color: #3b3a36; }
  .about h3 { font-family: var(--sans); font-size: 22px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
  .story .hot { color: inherit; text-decoration: underline; text-decoration-color: #9dff3a; text-decoration-thickness: 3px; text-underline-offset: 3px; }

  /* buttons */
  .cta.cta--pill.cta--sola { background: #111; color: #fff; border: 0; height: 58px; padding: 0 32px; border-radius: 999px; font: 700 15px/1 var(--sans); letter-spacing: 0; text-transform: none; box-shadow: none; }
  .cta.cta--pill.cta--sola:hover { background: #000; box-shadow: none; transform: translateY(-1px); }
  .cta.cta--pill.cta--sola:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
  .linkbtn { font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none; height: auto; padding: 4px 0; border-bottom: 1px solid currentColor; border-radius: 0; }
  .ctas { column-gap: 28px; margin-top: 32px; }

  /* header */
  .wordmark { flex-direction: row; gap: .7em; font: 700 12px/1 var(--sans); letter-spacing: .25em; }
  .wordmark .b { font-weight: 700; letter-spacing: .25em; }
  .site-header .watch.cta--pill { background: transparent; color: #fff; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); height: 42px; padding: 0 20px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: none; }
  .site-header .watch.cta--pill:hover { box-shadow: none; transform: none; border-color: currentColor; }
  .site-header .watch.cta--pill:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  :root[data-active="right"] .site-header .watch.cta--pill { color: #111; }   /* page behind it is paper */

  /* a few quiet details: index labels, a crescent, a faint dot grid echoing the game's pellets */
  .idx { position: absolute; bottom: 68px; left: var(--m); font: 500 12px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; pointer-events: none; transition: opacity .4s ease; }
  .panel[data-side="left"] .idx { color: #8a8984; }
  .panel[data-side="right"] .idx { color: #6f737c; }
  .panel.is-open .idx, .panel.is-dim .idx { opacity: 0; }   /* only in the default view; an enlarged panel can scroll */
  .pellets { position: absolute; right: var(--m); bottom: 112px; width: 270px; height: 150px; pointer-events: none; opacity: .5;
    background: radial-gradient(circle, #9dff3a 2.2px, transparent 2.7px) 0 0 / 30px 30px;
    -webkit-mask-image: linear-gradient(135deg, transparent 0, #000 65%); mask-image: linear-gradient(135deg, transparent 0, #000 65%); transition: opacity .4s ease; }
  .panel.is-open .pellets, .panel.is-dim .pellets { opacity: 0; }

  body .hint { background: transparent; color: #fff; mix-blend-mode: difference; padding: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }

  /* a thin, quiet scrollbar on the left half; it only exists while that half's content overflows */
  .panel[data-side="left"] { scrollbar-width: thin; scrollbar-color: rgba(17, 17, 17, .28) transparent; scrollbar-gutter: stable; }
  .panel[data-side="left"]::-webkit-scrollbar { display: block; width: 6px; }
  .panel[data-side="left"]::-webkit-scrollbar-track { background: transparent; margin: 24px 0; }
  .panel[data-side="left"]::-webkit-scrollbar-thumb { background: rgba(17, 17, 17, .28); border-radius: 999px; }
  .panel[data-side="left"]::-webkit-scrollbar-thumb:hover { background: rgba(17, 17, 17, .5); }

  /* =====================  SOLA SECURITY BRAIN SITE  (Figma node 143:8090)  =====================
     one ink page: hero + proof points on the left, the zombie game as a strip on the right */
  :root { --m2: clamp(16px, 5.6vw, 108px); --gap2: clamp(24px, 6vw, 117px);
          --hero-w: min(1388px, calc((100vw - 2 * var(--m2)) * .85 - var(--gap2) - 20px)); }
  html, body { background: #0d0e11; }
  body .site-header, :root[data-active="left"] .site-header, :root[data-active="right"] .site-header { color: #fff; }
  .split[data-active="left"], .split[data-active="right"] { padding: var(--hdr) var(--m2) 48px; }   /* the bottom band holds the footer */
  .split .panel, .split[data-active] .panel { border-radius: 0; }
  .panel.is-dim .stack { opacity: 1; }

  /* header actions */
  .hactions { margin-left: auto; display: flex; gap: 12px; pointer-events: auto; }
  .pill { appearance: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 42px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.32); font: 500 12px/12px var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
  .pill svg { width: 6.3px; height: 7.2px; flex: none; }
  .pill--ghost { background: transparent; color: #fff; }
  .pill--ghost:hover { border-color: #fff; }
  .pill--solid { background: #fff; color: #000; min-width: 218px; }
  .pill--solid:hover { background: #e7e7e9; }
  .pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .pill:disabled { opacity: .38; cursor: default; pointer-events: none; }   /* the button of the section that is already open */
  /* the header's pair is smaller than the hero's buttons */
  .site-header .pill { height: 34px; padding: 0 18px; gap: 10px; font-size: 11px; line-height: 11px; letter-spacing: .14em; }
  .site-header .pill--solid { min-width: 0; }
  /* a collapsed side is one big button: a click anywhere on it opens it (app.js) */
  .split[data-active] .panel.is-dim { cursor: pointer; }
  /* the way into the game: treat-orange and slowly glowing until the visitor has switched sides once */
  .pill--treat { background: #ff9200; border-color: #ff9200; color: #0d0e11; font-weight: 700; animation: treat-glow 2.4s ease-in-out infinite; }
  .pill--treat:hover { background: #ffa733; border-color: #ffa733; }
  .pill--treat:disabled, body.has-interacted .pill--treat { animation: none; }
  @keyframes treat-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 146, 0, 0); } 50% { box-shadow: 0 0 22px 2px rgba(255, 146, 0, .45); } }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero-play { display: none; }   /* phones only (shown in the 720px block): on desktop the header button does this */
  /* the game strip leans out once when the intro modal closes (app.js adds .is-nudge), and its badge bounces */
  .panel[data-side="right"].is-nudge { animation: strip-nudge 1.6s var(--ease); }
  .panel[data-side="right"].is-nudge .tbadge { animation: badge-bounce .5s ease 3 .2s; }
  @keyframes strip-nudge { 0%, 100% { flex-grow: 1; } 30%, 55% { flex-grow: 1.6; } }
  @keyframes badge-bounce { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) rotate(-4deg); } }
  /* the collapsed game strip smoulders: faint orange, violet and sickly-green glows drift up and down, with the odd flicker.
     It fades in after the panel has shrunk and out as soon as it starts to open. Flicker uses brightness, not opacity,
     so the fade transition keeps working while the animation runs. */
  .panel[data-side="right"]::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* closest-side: each glow fades to nothing inside its own tile, and the tiles stay inside the strip, so no edge ever shows */
    background:
      radial-gradient(closest-side, rgba(255, 146, 0, .15), rgba(255, 146, 0, .05) 55%, transparent),
      radial-gradient(closest-side, rgba(122, 44, 191, .13), rgba(122, 44, 191, .04) 55%, transparent),
      radial-gradient(closest-side, rgba(157, 255, 58, .05), transparent);
    background-size: 100% 70%, 100% 60%, 100% 50%;
    background-repeat: no-repeat;
    opacity: 0; transition: opacity .4s ease;
  }
  .panel[data-side="right"].is-dim::after {
    opacity: 1; transition: opacity 1.4s ease .6s;
    animation: strip-smoulder 11s ease-in-out infinite alternate, strip-flicker 6.7s linear infinite;
  }
  @keyframes strip-smoulder {
    0%   { background-position: 50% 100%, 50% 0%, 50% 45%; }
    50%  { background-position: 50% 60%, 50% 35%, 50% 90%; }
    100% { background-position: 50% 20%, 50% 70%, 50% 10%; }
  }
  @keyframes strip-flicker {
    0%, 38%, 44%, 70%, 75%, 100% { filter: brightness(1); }
    40% { filter: brightness(.8); }
    42% { filter: brightness(1.1); }
    72% { filter: brightness(.85); }
  }
  /* the current top score, under the strip heading, with an arrow into the game (collapsed strip only) */
  .ztop { margin: 32px 0 0; font: 400 clamp(.9rem, 1.25vw, 1.5rem)/1.25 var(--sans); letter-spacing: .08em; color: #fff; text-align: left; }
  .ztop span { display: block; }
  .ztop b { display: block; margin-top: 12px; font-weight: 700; }
  .zarrow { display: none; width: clamp(80px, 6.9vw, 132px); height: 12px; margin-top: 28px; overflow: visible; fill: none; stroke: #fff; stroke-width: 2; }
  .panel[data-side="right"].is-dim .ztop:not([hidden]) + .zarrow { display: block; }
  @media (prefers-reduced-motion: reduce) { .pill--treat, .panel[data-side="right"].is-nudge, .panel[data-side="right"].is-nudge .tbadge, .panel[data-side="right"].is-dim::after { animation: none; } }

  /* the left half: hero (when enlarged) or a strip (when the game is enlarged) */
  .stack--hero { flex: 1 1 0; width: auto; min-width: 0; margin-inline: 0; padding: 72px 10px; align-items: flex-start; text-align: left; transition: padding var(--dur) var(--ease); }
  .panel[data-side="left"] { transition: flex-grow var(--dur) var(--ease), padding var(--dur) var(--ease); }
  .panel[data-side="left"].is-open { padding-right: var(--gap2); box-shadow: inset 0 0 0 1px #000; }
  .panel[data-side="left"].is-dim { padding-right: 0; border-right: 2px solid #fff; }
  .panel[data-side="right"].is-dim { border-left: 2px solid rgba(255, 255, 255, .22); }   /* grey: the spider's silk (app.js) fills it white as it drops */
  .panel.is-dim .stack--hero { padding: 24px 20px; }
  .lcol { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }

  .hero { grid-area: 1 / 1; position: relative; width: var(--hero-w); display: flex; flex-direction: column; gap: 72px; container-type: inline-size;
          max-height: 4000px; opacity: 1; visibility: visible; transition: opacity .3s ease .35s, visibility 0s; }
  .panel.is-dim .hero { opacity: 0; visibility: hidden; max-height: 0; width: 0; overflow: hidden; transition: opacity .2s ease, visibility 0s .2s, max-height 0s .2s, width 0s .2s; }
  .hero-top { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  .hero-title { margin: 0; max-width: 100%; white-space: normal; font: 700 clamp(2.25rem, 3.54vw, 4.25rem)/1.04 var(--sans); letter-spacing: -.03em; color: #fff; }
  .hero-lead { margin: 0; max-width: min(100%, 49.9vw); font: 400 clamp(1rem, 1.25vw, 1.5rem)/1.3 var(--sans); letter-spacing: -.015em; color: #fff; }
  .proof { display: flex; flex-direction: column; gap: 32px; }
  .proof h3 { margin: 0; font: 700 clamp(1.25rem, 1.67vw, 2rem)/1.2 var(--sans); letter-spacing: -.03em; color: #fff; }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, clamp(120px, 13.96vw, 268px))); gap: clamp(24px, 2.5vw, 48px); }
  .stat .num { font: 700 clamp(2.5rem, 3.33vw, 4rem)/1.1 var(--sans); letter-spacing: -.03em; color: #fff; }
  .stat .lab { margin-top: 4px; font: 400 clamp(.9rem, 1.25vw, 1.5rem)/1.25 var(--sans); letter-spacing: .08em; color: #fff; }
  .ascii-fallback, .ascii-video { position: absolute; top: 0; }
  .ascii-fallback { left: 0; width: 100%; height: 100%; }
  .ascii-video { left: 0; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity .6s ease; }   /* the brain sits right of centre and runs off to the strip's line, as in the design */
  .ascii-video.is-ready { opacity: 1; }
  .ascii.has-video .ascii-fallback { display: none; }
  .ascii { overflow: hidden; position: absolute; left: calc(51.4cqw + var(--gap2) + 10px); top: 11.4cqw; width: 48.6cqw;   /* its right edge meets the strip's line, where the brain is cut, as in the design */
          aspect-ratio: 674 / 580; pointer-events: none; }
  /* the video sits in its own ink-coloured clip (right of the copy), so its black blends away and nothing underneath is covered */
  .ascii-clip { position: absolute; top: 0; left: 22%; width: 78%; height: 100%; isolation: isolate; overflow: hidden; }
  .ascii { transform: translateX(var(--ascii-shift, 0px)); }   /* app.js slides the crop edge onto the divider */
  .ascii.has-video .ascii-clip { background: #0d0e11; }   /* only needed once the video is playing, so the drawn fallback is never covered */
  .ascii-video { mix-blend-mode: screen; }
  .hero-top, .proof { position: relative; z-index: 1; }   /* the brain sits behind the copy where they overlap, never over it */

  .lstrip { grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
  .panel.is-dim .lstrip { opacity: 1; visibility: visible; transition: opacity .4s ease .45s, visibility 0s .45s; }
  /* The collapsed left side (the game is open) is not folded into a strip: its page stays exactly where it was,
     blurred and faded, and the game side slides over it. Same width and padding as when open, so nothing reflows. */
  .panel[data-side="left"].is-dim { overflow: hidden; }
  .panel[data-side="left"].is-dim .stack--hero { padding: 72px 10px; }
  .panel[data-side="left"] .hero { transition: opacity .4s ease, filter .4s ease, visibility 0s; }
  .panel[data-side="left"].is-dim .hero { opacity: .35; visibility: visible; max-height: 4000px; width: var(--hero-w); overflow: visible;
                                          filter: blur(5px); pointer-events: none; }
  .panel[data-side="left"].is-dim .lstrip { display: none; }
  .strip-title { margin: 0; font: 700 clamp(.9rem, 1.12vw, 1.5rem)/1.1 var(--sans); letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere; }
  .tbadge { display: inline-flex; align-items: center; height: 30px; padding: 0 15px; background: #ff9200; border-radius: 5px; font: 400 17.5px/15px Creepster, Impact, "Arial Narrow", fantasy; letter-spacing: .143em; text-transform: uppercase; color: #fff; }

  /* the right half as a strip: badge + three-line heading */
  .ztext .tbadge { margin-bottom: 24px; }
  .panel[data-side="right"].is-dim .ztext { padding: 24px 8px; }
  .panel[data-side="right"].is-dim .stack--zombie { padding-inline: 8px; }   /* the strip is narrow on laptop widths: keep "zombie." on one line */
  .panel[data-side="right"].is-dim .ztext .tbadge { margin-bottom: 16px; }
  .panel.is-dim h2.pixel { font-size: clamp(1.1rem, 1.84vw, 2.2rem); letter-spacing: -.03em; line-height: 1.04; }
  /* desktop: the collapsed strip's heading matches the hero title, and may run past the strip into the page margin */
  @media (min-width: 1200px) {   /* below this the large heading would reach the window edge */
    .panel[data-side="right"].is-dim { overflow: visible; }
    .panel[data-side="right"].is-dim .ztext { padding: 24px 0 24px 32px; }
    .panel[data-side="right"].is-dim .ztext .tbadge { margin-bottom: 24px; }
    .panel[data-side="right"].is-dim h2.pixel { font-size: clamp(2.25rem, 3.54vw, 4.25rem); white-space: nowrap; }
    .panel[data-side="right"].is-dim .ztop { white-space: nowrap; }
    .panel[data-side="right"].is-dim .stack--zombie { margin-block: 0 auto; padding-top: 72px; }   /* top-aligned, just under the spider */
  }
  /* hovering the collapsed strip widens it from 15% to 16%, a hint that it opens; its text keeps its line breaks */
  @media (hover: hover) and (pointer: fine) {
    .split[data-active="left"] .panel[data-side="right"].is-dim:hover { flex-grow: 1.0794; }   /* 5.667 : 1.079 -> 84 / 16 */
    /* the strip's text column stays at the 15% width (the panel's content box: page minus margins, the left panel's
       inner gap and the 2px divider), so nothing re-wraps while the strip widens */
    .split[data-active="left"] .panel[data-side="right"].is-dim .stack--zombie { width: calc((100vw - 2 * var(--m2) - var(--gap2) - 2px) * .15); }
    .split[data-active="left"] .panel[data-side="right"].is-dim:hover h2.pixel { color: #ff9200; }   /* the treat badge's orange */
  }
  /* The left half scrolls with a spider instead of a scrollbar (app.js): it hangs on a silk thread from the top of the
     divider and climbs up and down it with the scroll position, legs walking as it goes. It can be dragged. The
     native bar is hidden; wheel, touch and keyboard scrolling are unchanged. */
  .panel[data-side="left"] { scrollbar-width: none; scrollbar-gutter: auto; }
  .panel[data-side="left"]::-webkit-scrollbar { display: none; }
  .spider-bar, .spider-thread { position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
  .spider-bar.is-on, .spider-thread.is-on { opacity: 1; visibility: visible; transition: opacity .4s ease .3s, visibility 0s; }
  .spider-bar { z-index: 15; width: 44px; height: 44px; margin: -22px 0 0 -22px; cursor: grab; touch-action: none; }
  .spider-bar.is-dragging { cursor: grabbing; }
  .spider-bar svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(180deg); }   /* hangs head-down from its silk */
  .spider-thread { z-index: 14; width: 1px; height: 1px; overflow: visible; pointer-events: none; }   /* an svg rope; at rest it lies exactly over the divider */
  .spider-thread path { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
  @media (max-width: 720px) {
    :root { --hero-w: 100%; }
    .stats { grid-template-columns: 1fr; }
    .ascii { display: none; }
  }

  /* ---------- Intro modal (Figma node 143:7836): opens 1s after load, click outside or the x to close ---------- */
  .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 9, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
  .modal[hidden] { display: none !important; }
  .modal.is-open { opacity: 1; }
  .modal__card { box-sizing: border-box; position: relative; width: min(863px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #f4f2ed; border-radius: 12px; padding: clamp(24px, 7.4vw, 64px); transform: translateY(10px) scale(.985); transition: transform .35s var(--ease); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
  .modal.is-open .modal__card { transform: none; }
  .modal__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .modal__bg svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); filter: blur(5.35px); }
  .modal__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .8); }
  .modal__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .modal__copy { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .modal__row { display: flex; gap: 32px; align-items: flex-start; }
  .modal__title { margin: 0; flex: 1 1 0; min-width: 0; white-space: normal; font: 700 clamp(2.25rem, 7.9vw, 4.25rem)/1.06 var(--sans); letter-spacing: -.03em; color: #111; }
  .modal__zombie { flex: none; width: clamp(90px, 22.7%, 167px); height: auto; }
  .modal__sub { margin: 0; font: 400 clamp(1rem, 2.4vw, 1.3125rem)/1.5 var(--sans); color: #6b6a64; }
  .modal__text { display: flex; flex-direction: column; gap: 4px; }
  .modal__text p { margin: 0; font: 400 15px/1.65 var(--sans); color: #3b3a36; }
  .modal__text b { font-weight: 700; }
  .modal__text .hot { text-decoration: underline; text-decoration-color: #9dff3a; text-decoration-thickness: 3px; text-underline-offset: 3px; }
  .modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .08); color: #111; cursor: pointer; transition: background-color .2s ease; }
  .modal__close:hover { background: rgba(17, 17, 17, .16); }
  .modal__close:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
  .modal__close svg { width: 18px; height: 18px; }
  @media (prefers-reduced-motion: reduce) { .modal, .modal__card { transition: none; } }

  /* footer: in the 48px band under the panels on desktop, at the end of the page on phones */
  .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 48px; box-sizing: border-box; padding: 0 var(--m2);
                 display: flex; align-items: center; justify-content: space-between; pointer-events: none;
                 color: #8b8f98; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
  .site-footer > * { pointer-events: auto; }
  .foot-logo { display: block; width: auto; height: 32px; opacity: .9; }
  .foot-links { display: flex; align-items: center; gap: 20px; }
  .foot-link { padding: 6px 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .foot-icon { display: grid; place-items: center; width: 24px; height: 24px; color: inherit; }
  .foot-icon svg { width: 18px; height: 18px; }
  .foot-link:hover, .foot-icon:hover { color: #fff; }
  .foot-link:focus-visible, .foot-icon:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

  /* terms: the intro modal's overlay and card, sized for reading */
  .terms-card { width: min(680px, 100%); padding: clamp(24px, 5vw, 48px); color: #111; }
  .terms-title { margin: 0 44px 20px 0; font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--sans); letter-spacing: -.02em; color: #111; white-space: normal; text-wrap: balance; }   /* the base h2 rule is nowrap */
  .terms { margin: 0; padding-left: 1.3em; font: 400 15px/1.55 var(--sans); }
  .terms li + li { margin-top: 10px; }
  .terms b { font-weight: 700; }
  .terms a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* stats: double rings, outer = agent alone, inner = with Sola, Sola's icon in the middle */
  .ring-fig { margin-top: clamp(12px, 1.6vw, 26px); display: flex; flex-direction: column; gap: 14px; }
  .ring { display: block; width: min(70%, 165px); height: auto; }
  .ring .rtrack, .ring .arc { fill: none; stroke-width: 16; }
  .ring .rtrack { stroke: rgba(255, 255, 255, .06); }
  .ring .arc { stroke-linecap: round; stroke-dasharray: var(--p) 100; }
  .ring .arc--alone { stroke: #4a4e59; }
  .ring .arc--sola { stroke: #9dff3a; }
  html:not(.rings-go) .ring .arc { stroke-dasharray: 0 100; }          /* drawn in once the intro modal is closed */
  html.rings-go .ring .arc { animation: ringIn 1.4s var(--ease) both; }
  html.rings-go .ring .arc--sola { animation-delay: .25s; }
  @keyframes ringIn { from { stroke-dasharray: 0 100; } }
  @media (prefers-reduced-motion: reduce) { html:not(.rings-go) .ring .arc { stroke-dasharray: var(--p) 100; } html.rings-go .ring .arc { animation: none; } }
  .ring-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 8px; font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #8b8f98; }
  .ring-legend .lg { display: inline-flex; align-items: center; gap: 10px; }
  .ring-legend .lg::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #4a4e59; }
  .ring-legend .lg--sola { color: #fff; }
  .ring-legend .lg--sola::before { background: #9dff3a; }

  /* ---------- First-load hint ---------- */
  .hint {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--page);
    color: var(--page-fg);
    font-size: .85rem;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .5s ease;
  }
  .hint .touch { display: none; }
  @media (hover: none) {
    .hint .mouse { display: none; }
    .hint .touch { display: inline; }
  }
  body.has-interacted .hint { opacity: 0; }

  /* ---------- Narrow screens: stack top / bottom, tap to expand ---------- */
  @media (max-width: 720px) {
    .split { flex-direction: column; }
    .stack {
      width: 100%;
      max-width: 520px;
      box-sizing: border-box;
      margin-inline: auto;
      padding: 20px 24px;
    }
    h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
    .stack--zombie { flex-direction: column; align-self: auto; margin-block: auto; padding: 24px 0; container-type: normal; min-height: 0; }
    .ztext { padding-inline: 16px; }
    .zgamecol { flex: none; width: 100%; min-height: 0; max-height: 0; aspect-ratio: 720 / 800; transition: max-height var(--dur) var(--ease), opacity .5s ease, visibility 0s .45s; }
    .panel.is-open .zgamecol { flex-basis: auto; max-height: 1600px; transition: max-height var(--dur) var(--ease), opacity .5s ease .32s, visibility 0s; }
    h2.pixel { font-size: 1.5rem; }
    .inner p + p { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur: .01s; }
    .inner > *, .panel.is-open .inner > * { transition-duration: .01s; transition-delay: 0s !important; }
  }

  /* =====================  PHONES (up to 720px): both sections open, stacked, no header buttons, nothing to expand  ===================== */
  @media (max-width: 720px) {
    html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
    body { display: block; }
    .site-header { background: #0d0e11; pointer-events: auto; padding: 0 20px; }
    .site-header .hactions { display: none; }
    .split, .split[data-active] { display: block; height: auto; padding: var(--hdr) 0 32px; }
    .panel, .panel.is-open, .panel.is-dim { display: block; flex: none; width: 100%; height: auto; overflow: visible; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
    .panel[data-side="right"], .panel[data-side="right"].is-open { border-top: 2px solid #fff !important; margin-top: 24px; }
    .stack--hero, .panel.is-open .stack--hero { padding: 40px 20px 32px; }
    .hero { width: 100%; gap: 40px; }
    .hero-title { font-size: 2.25rem; }
    .hero-lead { max-width: 100%; }
    .ring-fig { margin-top: 12px; }
    .ring { width: min(70%, 154px); }
    .ascii { display: block; position: relative; left: auto; top: auto; order: -1; width: min(55%, 220px); margin: 0 auto -16px; }   /* first in the section, small, above the title */
    .ascii-clip { left: 0; width: 100%; }
    .ascii-video { left: 50%; transform: translateX(-50%); }
    .stack--zombie { padding: 40px 20px 32px; }
    .ztext, .panel.is-open .ztext { padding-inline: 0; }
    .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }   /* stacked, each on one line */
    .hero-ctas .pill { display: inline-flex; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; gap: 10px; }
    .panel[data-side="right"] { scroll-margin-top: var(--hdr); }
    .panel[data-side="right"]::after { display: none; }   /* no strip on phones, so no glow */
    .spider-bar, .spider-thread { display: none; }   /* the page itself scrolls on phones */
    .split[data-active] .panel.is-dim { cursor: auto; }   /* both sides are open on phones: nothing to click open */
    .site-footer { position: static; height: auto; padding: 8px 20px 32px; }   /* scrolled to by the hero button and ?play: clear the fixed header */
    h2.pixel, .panel.is-open h2.pixel { font-size: 2.25rem; }
  }