:root {
    --bg: #f1f1ef;
    --ink: #111214;
    --muted: #6b6e74;
    --soft: #8d9096;
    --line: #dcdcd8;
    --card: #f8f8f6;
    --victim: #2f9e6b;
    --hop: #3b5bdb;
    --hold: #e0533d;
    --exch: #c78a1c;
  }
  ::selection { background: rgba(224, 83, 61, .28); color: var(--ink); }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
  /* one screen per section: a scroll moves exactly one page */
  .hero, section.block { scroll-snap-align: start; scroll-snap-stop: always; }
  /* the page dots show position, so the browser scrollbar is hidden */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .dots { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #c5c5c0; cursor: pointer; transition: height .3s, background .3s; }
  .dots button:hover { background: var(--muted); }
  .dots button[aria-current="true"] { height: 26px; background: var(--ink); }
  .to-top { position: fixed; right: 28px; bottom: 28px; z-index: 6; width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer;
            background: var(--ink); color: #f6f6f4; display: flex; align-items: center; justify-content: center;
            opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
  .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { background: #2a2c30; }
  .to-top svg { width: 18px; height: 18px; }
  @media (max-width: 900px) { .dots { right: 12px; } .to-top { right: 16px; bottom: 16px; } }
  body { background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

  /* nav */
  nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 96px; }
  .logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; letter-spacing: .2px; }
  .logo svg { width: 54px; height: auto; display: block; }
  .links { display: flex; gap: 40px; font-size: 16px; }
  .links a { color: #2a2c30; transition: color .2s; }
  .links a:hover { color: var(--muted); }
  .pill { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 500; transition: transform .15s, background .2s; white-space: nowrap; }
  .pill:hover { transform: translateY(-1px); }
  .pill.dark { background: var(--ink); color: #f6f6f4; }
  .pill.dark:hover { background: #2a2c30; }
  .pill.light { background: #e3e3df; color: var(--ink); }
  .pill.light:hover { background: #d8d8d3; }

  /* hero */
  .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
  #field { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to bottom, rgba(241,241,239,0), var(--bg) 70%); pointer-events: none; }
  .hero-copy { position: relative; z-index: 2; display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px; align-items: end; padding-bottom: 96px; }
  h1 { font-weight: 400; font-size: clamp(44px, 6vw, 84px); line-height: 1.06; letter-spacing: -1.5px; }
  .lede { font-size: 18px; line-height: 1.6; color: var(--muted); margin-bottom: 28px; }
  .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  /* sections */
  section.block { min-height: 100vh; padding: 96px 0; display: flex; flex-direction: column; justify-content: center; }
  section.block#contact { justify-content: space-between; padding-bottom: 0; }
  section.block#contact > .wrap.contact { flex: 1; align-items: center; }
  .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin-bottom: 20px; }
  h2 { font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.8px; max-width: 880px; }
  .sub { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 680px; margin-top: 20px; }

  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
  .step { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 36px; }
  .step .n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--soft); }
  .step h3 { font-weight: 500; font-size: 24px; margin: 18px 0 12px; }
  .step p { color: var(--muted); line-height: 1.6; font-size: 16px; }
  .tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #fff; padding: 4px 8px; border-radius: 3px; }

  .proof { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; margin-top: 64px; align-items: start; }
  .big { font-weight: 300; font-size: clamp(88px, 12vw, 168px); line-height: .95; letter-spacing: -4px; }
  .big-cap { color: var(--muted); font-size: 18px; line-height: 1.55; margin-top: 18px; max-width: 420px; }
  table { width: 100%; border-collapse: collapse; font-size: 16px; }
  th { text-align: left; font-weight: 500; color: var(--soft); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
  td { padding: 18px 0; border-bottom: 1px solid var(--line); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  tr.us td { font-weight: 600; }
  .note { font-size: 14px; color: var(--soft); margin-top: 18px; line-height: 1.6; }

  .case { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px; }
  .kpi.hl { background: var(--ink); color: #f6f6f4; border-color: var(--ink); }
  .kpi .k { font-size: 14px; color: var(--soft); }
  .kpi .v { font-size: 44px; font-weight: 400; letter-spacing: -1px; margin: 10px 0 8px; }
  .kpi.hl .v { color: #ff8a6e; }
  .kpi .d { font-size: 15px; color: var(--muted); line-height: 1.5; }
  .kpi.hl .d { color: #b7bac0; }

  .market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
  .market .v { font-size: 56px; }

  .compare { margin-top: 56px; }
  .compare td:first-child { color: var(--soft); width: 22%; }

  .contact { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
  footer { padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--soft); font-size: 14px; line-height: 1.6; }
  footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

  @media (max-width: 900px), (max-height: 720px) {
    html { scroll-snap-type: y proximity; }
    .hero, section.block { scroll-snap-stop: normal; }
    section.block { min-height: auto; }
  }
  @media (max-width: 900px) {
    .wrap { padding: 0 20px; }
    .links { display: none; }
    .hero-copy, .proof { grid-template-columns: 1fr; gap: 32px; }
    .hero-copy { padding-bottom: 64px; }
    .steps, .market { grid-template-columns: 1fr; }
    .case { grid-template-columns: 1fr 1fr; }
    section.block { padding: 80px 0; }
  }
  @media (max-width: 520px) { .case { grid-template-columns: 1fr; } }

  /* ───────── glass ───────── */
  html { background: var(--bg); }
  body { background: transparent; }
  /* soft color glows behind everything, so the frosted panels have something to blur */
  body::before { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
    background:
      radial-gradient(38vmax 38vmax at 14% 18%, rgba(59,91,219,.24), transparent 62%),
      radial-gradient(34vmax 34vmax at 86% 26%, rgba(224,83,61,.2), transparent 62%),
      radial-gradient(42vmax 42vmax at 72% 92%, rgba(47,158,107,.19), transparent 62%),
      radial-gradient(32vmax 32vmax at 22% 86%, rgba(199,138,28,.19), transparent 62%);
    animation: drift 40s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg); } }
  @media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
  /* fade only the animation toward the headline, never the shared background, so every page reads as one sheet */
  .hero::after { display: none; }
  #field { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 94%); mask-image: linear-gradient(to bottom, #000 62%, transparent 94%); }

  .glass, .step, .kpi, .pill.light, nav .wrap, .dots, table.compare, .proof > div:last-child {
    background: rgba(255,255,255,.38);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 30px rgba(17,18,20,.07);
  }
  .kpi.hl, .pill.dark, .to-top {
    background: rgba(17,18,20,.74);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(17,18,20,.18);
  }
  .pill.light:hover { background: rgba(255,255,255,.6); }
  .pill.dark:hover, .to-top:hover { background: rgba(17,18,20,.86); }

  /* nav: a floating glass bar on every page */
  nav { position: fixed; top: 16px; }
  nav .wrap { height: 64px; border-radius: 999px; padding: 0 10px 0 28px; max-width: 1180px; }
  nav .pill { height: 44px; }
  .dots { padding: 10px 7px; border-radius: 999px; }
  .proof > div:last-child { border-radius: 18px; padding: 24px 28px 18px; }
  table.compare { border-collapse: separate; border-spacing: 0; border-radius: 18px; padding: 8px 28px; }
  table.compare tr:last-child td { border-bottom: 0; }

  /* ───────── designed sections ───────── */
  h2 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -1.8px; font-weight: 400; max-width: none; }
  h2 .soft { color: #9a9ca2; }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
  /* section index instead of a dot: "02 ── MARKET" */
  body { counter-reset: sec; }
  section.block { counter-increment: sec; }
  .eyebrow::before { content: counter(sec, decimal-leading-zero); color: var(--ink); padding-right: 40px; margin-right: 2px;
    background: linear-gradient(rgba(17,18,20,.28), rgba(17,18,20,.28)) no-repeat right center / 28px 1px; }
  section.block > .wrap { width: 100%; }
  .head { max-width: 760px; }
  .sub { margin-top: 18px; font-size: 18px; }

  [data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(8px);
    transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter 1s; transition-delay: var(--d, 0s); }
  [data-reveal].in { opacity: 1; transform: none; filter: none; }
  @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; } }

  /* how it works */
  .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
  .stage { position: relative; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; }
  .stage:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 128px; z-index: 2; width: 26px; height: 26px; border-radius: 99px;
    display: grid; place-items: center; font-size: 13px; color: var(--muted); background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 4px 14px rgba(17,18,20,.08); }
  .stage-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--soft); letter-spacing: 1px; }
  .chip { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 5px 10px; border-radius: 99px; }
  .vis { height: 196px; border-radius: 16px; padding: 14px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff; overflow: hidden; }
  .stage h3 { font-weight: 500; font-size: 20px; letter-spacing: -.3px; margin: 22px 4px 6px; }
  .stage p { color: var(--muted); font-size: 15px; margin: 0 4px 6px; }
  .tx { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted);
    background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(17,18,20,.05); }
  .tx b { color: var(--ink); font-weight: 500; }
  .tx.ghost { background: transparent; border: 1px dashed #cfcfca; box-shadow: none; color: var(--soft); justify-content: center; }
  .graph { display: grid; place-items: center; }
  .graph svg { width: 100%; height: 100%; }
  .flowline { stroke-dasharray: 5 6; animation: flow 1.6s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -22; } }
  .pulse { transform-origin: 272px 30px; animation: pulse 2s ease-out infinite; }
  @keyframes pulse { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
  .doc { display: flex; flex-direction: column; gap: 7px; }
  .doc-h { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; padding: 2px 2px 8px; border-bottom: 1px solid #e6e6e2; margin-bottom: 2px; }
  .mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); font-weight: 400; }
  .lead { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 9px 10px; font-size: 13px; box-shadow: 0 1px 2px rgba(17,18,20,.05); }
  .lead i { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--soft); }
  .lead b { font-weight: 500; font-variant-numeric: tabular-nums; }
  .lead em { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 3px 7px; border-radius: 99px; }

  /* results */
  .results { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "ring bars"; gap: 56px 72px; align-items: center; }
  .results .head { grid-area: head; }
  .ring-wrap { grid-area: ring; position: relative; width: 300px; height: 300px; justify-self: center; display: grid; place-items: center; }
  .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
  .ring .track { stroke: rgba(17,18,20,.07); }
  .ring .prog { stroke: var(--ink); stroke-dasharray: 653.5; stroke-dashoffset: 653.5; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1) .3s; }
  .ring-wrap.in .prog { stroke-dashoffset: calc(653.5 * (1 - var(--p))); }
  .ring-num { font-weight: 300; font-size: 92px; letter-spacing: -4px; line-height: 1; }
  .ring-num small { font-size: 40px; color: var(--soft); letter-spacing: -1px; }
  .ring-cap { position: absolute; top: 100%; margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; width: 180px; line-height: 1.4; }
  .bars { grid-area: bars; border-radius: 24px; padding: 30px 32px; }
  .bars-h, .bars-note { font-size: 14px; color: var(--muted); }
  .bars-h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin-bottom: 18px; }
  .bar-row { display: grid; grid-template-columns: 1fr; gap: 6px 14px; grid-template-columns: 1fr auto; padding: 14px 0; border-bottom: 1px solid rgba(17,18,20,.06); }
  .bar-row .name { font-size: 15px; }
  .bar-row .val { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; text-align: right; }
  .bar-row .track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(17,18,20,.06); overflow: hidden; }
  .bar-row .fill { height: 100%; width: 0; min-width: 0; border-radius: 99px; background: #b9bbc0; transition: width 1.6s cubic-bezier(.2,.7,.2,1) .4s; }
  .bar-row.us .fill { background: var(--hold); }
  .bar-row.us .name, .bar-row.us .val { font-weight: 600; }
  .bar-row .found { grid-column: 1 / -1; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--soft); letter-spacing: .5px; order: 5; }
  .bar-row .track { order: 4; }
  .bars-note { margin-top: 18px; }
  .bars-note b { color: var(--ink); font-weight: 600; }

  /* market */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid rgba(17,18,20,.1); }
  .stat { padding: 40px 36px 0; border-left: 1px solid rgba(17,18,20,.1); }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .stat .n { font-weight: 300; font-size: clamp(64px, 7.5vw, 112px); letter-spacing: -4px; line-height: 1; font-variant-numeric: tabular-nums; }
  .stat p { color: var(--muted); font-size: 16px; line-height: 1.5; margin-top: 18px; max-width: 280px; }
  .src { display: inline-block; margin-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }

  /* who it's for */
  .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
  .side { border-radius: 26px; padding: 40px 44px; }
  .side-k { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 500; letter-spacing: -.3px; margin-bottom: 26px; color: var(--muted); }
  .side ul { list-style: none; }
  .side li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(17,18,20,.07); font-size: 17px; color: var(--muted); }
  .side li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #b9bbc0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .side.us { color: #f6f6f4; }
  .side.us .side-k { color: #fff; }
  .side.us .mark { width: 40px; height: auto; color: #ff6a52; }
  .side.us li { color: #e9e9e6; border-top-color: rgba(255,255,255,.1); }
  .side.us li svg { stroke: #ff6a52; }
  .side, .stage, .bars { background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 18px 50px rgba(17,18,20,.08); }
  .side.us { background: rgba(17,18,20,.8); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 60px rgba(17,18,20,.25); }

  /* contact */
  #contact { position: relative; overflow: hidden; }
  .closing { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .closing .sub { margin-left: auto; margin-right: auto; }
  .ctas.center { justify-content: center; margin-top: 34px; }
  .watermark { position: absolute; width: min(1100px, 90vw); left: 50%; top: 50%; transform: translate(-50%, -55%); color: var(--ink); opacity: .022; pointer-events: none; }

  @media (max-width: 900px) {
    .flow, .stats, .vs { grid-template-columns: 1fr; }
    .stage:not(:last-child)::after { display: none; }
    .results { grid-template-columns: 1fr; grid-template-areas: "head" "ring" "bars"; }
    .stat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(17,18,20,.1); padding-top: 28px; }
    .stat:first-child { border-top: 0; }
    .ring-wrap { width: 240px; height: 240px; } .ring-num { font-size: 72px; }
  }

  /* who it's for: audiences + what changes */
  .aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
  .aud-card { position: relative; border-radius: 26px; padding: 34px 32px 30px; display: flex; flex-direction: column; min-height: 300px;
    background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 18px 50px rgba(17,18,20,.08);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
  .aud-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 26px 60px rgba(17,18,20,.12); }
  .aud-ico { width: 52px; height: 52px; padding: 12px; border-radius: 16px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
    background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(17,18,20,.07); box-sizing: content-box; }
  .aud-card h3 { font-weight: 500; font-size: 24px; letter-spacing: -.4px; margin: 30px 0 10px; }
  .aud-card p { color: var(--muted); font-size: 16px; line-height: 1.55; flex: 1; }
  .aud-tag { align-self: flex-start; margin-top: 24px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--hold); background: rgba(224,83,61,.1); padding: 6px 11px; border-radius: 99px; }
  .swap { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-radius: 22px; overflow: hidden;
    background: rgba(17,18,20,.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); }
  .swap-item { display: flex; flex-direction: column; gap: 6px; padding: 22px 30px; }
  .swap-item + .swap-item { border-left: 1px solid rgba(255,255,255,.09); }
  .swap-item s { color: #8a8d94; font-size: 14px; text-decoration-color: rgba(255,106,82,.8); text-decoration-thickness: 1.5px; }
  .swap-item span { color: #f6f6f4; font-size: 19px; letter-spacing: -.2px; }
  @media (max-width: 900px) { .aud, .swap { grid-template-columns: 1fr; } .swap-item + .swap-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.09); } .aud-card { min-height: 0; } }

  /* ───────── liquid glass: one recipe for every surface (last, so it wins) ───────── */
  .glass, .step, .kpi, .pill.light, nav .wrap, .dots, .stage, .bars, .aud-card, .side, table.compare, .proof > div:last-child {
    background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),          /* top rim catching the light */
      inset 0 -1px 0 rgba(255,255,255,.35),         /* soft bottom rim */
      inset 1px 0 0 rgba(255,255,255,.3), inset -1px 0 0 rgba(255,255,255,.3),
      0 12px 40px rgba(17,18,20,.08), 0 2px 6px rgba(17,18,20,.04);
  }
  .pill.light:hover, .aud-card:hover { background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.1)); }
  .pill.dark, .to-top, .kpi.hl, .side.us, .swap {
    background: linear-gradient(135deg, rgba(30,31,35,.62) 0%, rgba(17,18,20,.48) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08), inset 0 0 20px rgba(255,255,255,.04),
      0 14px 40px rgba(17,18,20,.18);
  }
  .pill.dark:hover, .to-top:hover { background: linear-gradient(135deg, rgba(30,31,35,.78), rgba(17,18,20,.66)); }
  /* panes inside panes stay clear too */
  .vis { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
  .tx, .lead { background: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(17,18,20,.04); }
  .aud-ico { background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(17,18,20,.06); }
  .stage:not(:last-child)::after { background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.7); }
  nav .wrap { background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); }
  .swap-item s { color: #c3c6cc; }
  .swap { background: linear-gradient(135deg, rgba(30,31,35,.74), rgba(17,18,20,.62)); }

  /* headings arrive one word at a time */
  .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px);
       transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s; transition-delay: calc(var(--i) * var(--step, 75ms) + var(--base, 0ms)); }
  .words-in .w { opacity: 1; transform: none; filter: none; }
  @media (prefers-reduced-motion: reduce) { .w { opacity: 1; transform: none; filter: none; transition: none; } }

  /* mouse: glass cards tilt toward the cursor with a sheen that follows it; background glows drift with it */
  .tilt { position: relative; transform-style: preserve-3d; }
  .tilt.tilting { transition: transform .18s ease-out, box-shadow .4s; }
  .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.42), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; }
  .side.us .glare, .swap .glare { background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.16), rgba(255,255,255,0) 45%); mix-blend-mode: normal; }
  .tilt:hover .glare { opacity: 1; }
  body::before { translate: var(--px, 0) var(--py, 0); transition: translate 1.2s cubic-bezier(.2,.7,.2,1); }
  .hero { cursor: default; }
  .pill, .to-top { will-change: transform; }

  /* who it's for: an editorial index of audiences */
  .who-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
  .who-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.9; color: var(--muted); text-align: right; }
  .rows { margin-top: 56px; border-top: 1px solid rgba(17,18,20,.12); }
  .row { position: relative; display: grid; grid-template-columns: 64px 1fr minmax(0, 380px) 56px; align-items: center; gap: 24px;
    padding: 34px 28px; border-bottom: 1px solid rgba(17,18,20,.12); isolation: isolate; }
  .row::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 22px; opacity: 0; transform: scaleY(.85);
    transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
    background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.06));
    -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 12px 40px rgba(17,18,20,.08); }
  .row:hover::before { opacity: 1; transform: none; }
  .row-n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--soft); letter-spacing: 1px; }
  .row-name { font-weight: 300; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -1.2px; line-height: 1.1; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .row:hover .row-name { transform: translateX(10px); }
  .row-d { color: var(--muted); font-size: 16px; line-height: 1.55; }
  .row-go { width: 48px; height: 48px; border-radius: 99px; display: grid; place-items: center; font-size: 18px; color: var(--ink);
    border: 1px solid rgba(17,18,20,.14); transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s; }
  .row:hover .row-go { background: var(--ink); color: #f6f6f4; border-color: var(--ink); transform: rotate(-45deg); }
  @media (max-width: 900px) {
    .who-kicker { text-align: left; }
    .row { grid-template-columns: 40px 1fr 44px; padding: 24px 8px; }
    .row-d { grid-column: 2 / 3; }
    .row-go { grid-row: 1; grid-column: 3; width: 40px; height: 40px; }
  }

/* ───────── sample case page ───────── */
html.case-page { scroll-snap-type: none; }
.case-main { padding-top: 140px; }
.eyebrow.plain::before { content: none; }
.case-hero { padding-bottom: 40px; }
.case-hero h1 { font-size: clamp(48px, 6vw, 88px); margin-top: 6px; }
.case-hero h1 .soft, .cstep h2 .soft { color: #9a9ca2; }
.case-hero .sub { max-width: 720px; }
.case-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; border-top: 1px solid rgba(17,18,20,.1); }
.case-stats > div { padding: 26px 24px 0; border-left: 1px solid rgba(17,18,20,.1); display: flex; flex-direction: column; gap: 6px; }
.case-stats > div:first-child { border-left: 0; padding-left: 0; }
.case-stats .n { font-weight: 300; font-size: clamp(36px, 4vw, 56px); letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.case-stats .k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.case-stats .hl .n { color: var(--hold); }
.cstep { padding-top: 120px; }
.cstep-head { display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: start; margin-bottom: 40px; }
.cstep-n { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--soft); padding-top: 18px; border-top: 1px solid rgba(17,18,20,.25); }
.cstep h2 { font-size: clamp(34px, 3.6vw, 52px); }
.cstep .sub { max-width: 680px; }
.glass-panel { border-radius: 24px; padding: 10px 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 12px 40px rgba(17,18,20,.08); }
.tx-row, .lead-row { display: grid; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(17,18,20,.07); font-size: 15px; }
.tx-row { grid-template-columns: 140px 160px 1fr 160px; }
.lead-row { grid-template-columns: 44px 170px 1fr 140px 120px; }
.tx-row:last-child, .lead-row:last-child { border-bottom: 0; }
.tx-row.thead, .lead-row.thead { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.tx-row.total { font-weight: 600; }
.tx-row a, .lead-row a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,18,20,.2); text-underline-offset: 3px; }
.tx-row a:hover, .lead-row a:hover { text-decoration-color: var(--ink); }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.rank { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--soft); }
.kind { font-size: 14px; }
.kind.hold { color: var(--hold); }
.kind.exch { color: #a0700f; }
.seized { justify-self: start; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #fff; background: var(--ink); padding: 4px 9px; border-radius: 99px; }
.seized.alt { background: #6b6e74; }
.dash { color: var(--soft); }
.note-line { margin-top: 18px; font-size: 14px; color: var(--soft); line-height: 1.6; max-width: 820px; }
.flow-panel { padding: 28px; }
.flow-svg { width: 100%; height: auto; display: block; }
.fl { stroke-dasharray: 6 7; animation: flow 1.8s linear infinite; }
.fnode rect { fill: rgba(255,255,255,.55); stroke: rgba(17,18,20,.14); }
.fnode text { text-anchor: middle; font-family: 'IBM Plex Sans', sans-serif; }
.fnode .t1 { font-size: 15px; font-weight: 500; fill: var(--ink); }
.fnode .t2 { font-size: 12.5px; font-family: 'IBM Plex Mono', monospace; fill: var(--muted); }
.fnode.blue rect { stroke: rgba(59,91,219,.45); }
.fnode.ghost rect { fill: rgba(255,255,255,.3); stroke-dasharray: 4 4; }
.fnode.red rect { fill: rgba(224,83,61,.1); stroke: rgba(224,83,61,.55); }
.fnode.red .t1 { fill: #b5381f; }
.fnode.amber rect { fill: rgba(199,138,28,.1); stroke: rgba(199,138,28,.55); }
.fnode.amber .t1 { fill: #8a5e0c; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.flow-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 99px; margin-right: 8px; vertical-align: -1px; }
.match { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.match-card { display: flex; flex-direction: column; gap: 8px; border-radius: 22px; padding: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%);
  border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 40px rgba(17,18,20,.08); }
.ml { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.mv { font-weight: 300; font-size: 42px; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.mk { font-size: 14px; color: var(--muted); line-height: 1.45; }
.misses { margin-top: 18px; padding: 22px 28px; }
.misses-h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin-bottom: 8px; }
.miss { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 10px 0; font-size: 15px; color: var(--muted); border-top: 1px solid rgba(17,18,20,.07); }
.miss b { font-family: 'IBM Plex Mono', monospace; color: var(--ink); font-weight: 500; }
.case-cta { text-align: center; padding: 140px 0 120px; }
.case-cta .ctas { margin-top: 30px; }
.case-main footer { margin-top: 0; }
.links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .case-stats { grid-template-columns: repeat(2, 1fr); } .case-stats > div { border-left: 0; padding-left: 0; }
  .tx-row { grid-template-columns: 1fr auto; } .tx-row > :nth-child(2), .tx-row > :nth-child(3) { display: none; }
  .lead-row { grid-template-columns: 30px 1fr auto; } .lead-row .kind, .lead-row > :last-child { display: none; }
  .match { grid-template-columns: 1fr 1fr; } .cstep-head { grid-template-columns: 1fr; }
}
.case-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 15px; font-weight: 500; color: var(--ink); }
.case-link span { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.case-link:hover span { transform: translateX(4px); }

/* results: sample case preview card next to the heading */
.results { grid-template-areas: "head card" "ring bars"; }
.case-card { grid-area: card; align-self: end; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 76px 24px 26px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 12px 40px rgba(17,18,20,.08);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.case-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 22px 56px rgba(17,18,20,.13); }
.cc-k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.cc-t { font-size: 21px; letter-spacing: -.3px; line-height: 1.25; }
.cc-s { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-s b { color: var(--ink); font-weight: 600; }
.cc-s i { width: 3px; height: 3px; border-radius: 99px; background: var(--soft); }
.cc-go { position: absolute; right: 22px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; font-size: 16px;
  border: 1px solid rgba(17,18,20,.14); transition: background .35s, color .35s, rotate .45s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.case-card:hover .cc-go { background: var(--ink); color: #f6f6f4; border-color: var(--ink); rotate: -45deg; }
@media (max-width: 900px) { .results { grid-template-areas: "head" "card" "ring" "bars"; } }
.results h2 { font-size: clamp(36px, 3.6vw, 54px); }

/* ── fuller lower pages: live cards, ticker, case dots, loss counter, coverage chips ── */
.ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.ambient.on { opacity: 1; }

/* trace card: packets ride the lines; report card: a caret waits for the next transfer */
.packet { filter: drop-shadow(0 0 4px currentColor); }
.caret { display: inline-block; width: 1px; height: 12px; margin-left: 3px; vertical-align: -2px; background: var(--muted); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.vis .tx:not(.ghost) { animation: txin 6s ease-in-out infinite; }
.vis .tx:nth-child(2) { animation-delay: .4s; } .vis .tx:nth-child(3) { animation-delay: .8s; }
@keyframes txin { 0%, 70%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(17,18,20,.04); } 8% { box-shadow: inset 0 0 0 1px rgba(47,158,107,.45), 0 4px 14px rgba(47,158,107,.12); } }
/* packet card: each lead lights up in turn, as if being checked */
.doc .lead { animation: scan 4.5s ease-in-out infinite; }
.doc .lead:nth-of-type(2) { animation-delay: 1.5s; } .doc .lead:nth-of-type(3) { animation-delay: 3s; }
@keyframes scan { 0%, 22%, 100% { transform: none; } 8% { transform: translateX(4px); box-shadow: inset 2px 0 0 var(--hold), 0 6px 18px rgba(17,18,20,.08); } }

.ticker { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tick-track { display: flex; gap: 40px; width: max-content; animation: tick 70s linear infinite; }
.tick-track span { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.tick-track span i { width: 6px; height: 6px; border-radius: 99px; background: var(--c); }
.tick-track span b { color: var(--ink); font-weight: 500; }
@keyframes tick { to { transform: translateX(-50%); } }

.results { grid-template-areas: "head card" "ring bars" "cases cases"; }
.cases { grid-area: cases; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding-top: 28px; border-top: 1px solid rgba(17,18,20,.1); }
.cases .bars-h { margin: 0; max-width: 220px; line-height: 1.7; }
.case-dots { display: flex; justify-content: center; gap: 22px; align-items: flex-end; }
.case-col { display: flex; flex-direction: column-reverse; gap: 6px; }
.case-dots i, .legend i { width: 12px; height: 12px; border-radius: 99px; background: rgba(17,18,20,.1); display: block; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1), background .4s; }
.cases.in .case-dots i { transform: scale(1); transition-delay: calc(.4s + var(--k) * 28ms); }
.case-dots i.on { background: var(--ink); }
.cases.in .case-dots i.on { animation: hit .6s calc(1.4s + var(--k) * 28ms) both; }
@keyframes hit { 50% { box-shadow: 0 0 0 6px rgba(224,83,61,.25); background: var(--hold); } }
.legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { transform: none; width: 10px; height: 10px; }
.legend i.on { background: var(--ink); }

.live { display: flex; align-items: baseline; gap: 16px; margin-top: 56px; padding: 22px 28px; border-radius: 20px; width: fit-content; max-width: 100%;
        background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(17,18,20,.05); }
.live-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--hold); align-self: center; box-shadow: 0 0 0 0 rgba(224,83,61,.5); animation: live 1.6s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 10px rgba(224,83,61,0); } }
.live-n { font-family: 'IBM Plex Mono', monospace; font-size: 30px; letter-spacing: -1px; font-variant-numeric: tabular-nums; min-width: 7.5ch; }
.live-t { color: var(--muted); font-size: 15px; }

.covers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; }
.covers-k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); margin-right: 8px; }
.chipx { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px;
         background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: transform .25s; }
.chipx:hover { transform: translateY(-2px); }
.chipx i { width: 7px; height: 7px; border-radius: 99px; background: var(--c); }

@media (max-width: 900px) {
  .results { grid-template-areas: "head" "card" "ring" "bars" "cases"; }
  .cases { grid-template-columns: 1fr; }
  .case-dots { justify-content: flex-start; gap: 14px; }
  .live { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tick-track, .vis .tx, .doc .lead, .caret, .live-dot { animation: none; }
  .case-dots i { transform: none; }
}

/* no lone words on a last line: short copy balances its lines, longer copy avoids orphans */
p, li, .live-t { text-wrap: pretty; }
h1, h2, h3, .row-d, .stat p, .ring-cap, .sub, .lede, .stage p, .cc-t, .bars-note, .who-kicker, .cases .bars-h { text-wrap: balance; }
.bars .bars-h { margin-bottom: 6px; }
.bars-scope { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

/* laptop-height screens: tighten Results so the whole page fits one screen */
@media (min-width: 901px) and (max-height: 1000px) {
  section.block#results { padding: 76px 0 40px; }
  .results { gap: 28px 72px; }
  .results .sub { margin-top: 12px; }
  .ring-wrap { width: 230px; height: 230px; }
  .ring-num { font-size: 72px; } .ring-num small { font-size: 32px; }
  .ring-cap { margin-top: 10px; }
  .bars { padding: 20px 26px; }
  .bars .bars-h { margin-bottom: 4px; } .bars-scope { margin-bottom: 8px; }
  .bar-row { padding: 9px 0; }
  .bars-note { margin-top: 10px; }
  .case-card { padding-top: 18px; padding-bottom: 18px; gap: 6px; }
  .cases { padding-top: 18px; }
  .case-dots i, .legend i { width: 10px; height: 10px; }
  .case-col { gap: 5px; }
}
@media (min-width: 901px) and (max-height: 860px) {
  section.block#results { padding: 64px 0 20px; }
  .results { gap: 20px 72px; }
  #results h2 { font-size: min(4vw, 5.6vh); }
  .case-dots i { width: 8px; height: 8px; } .case-col { gap: 4px; }
}

/* sample case: the one dark card on the page, so it reads as the thing to open */
.case-card { color: #f4f4f2; padding: 24px 26px; gap: 10px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 100% 0%, rgba(224,83,61,.28), transparent 55%), linear-gradient(135deg, #1a1b1e, #0e0f11);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 50px rgba(17,18,20,.22); }
.case-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 28px 70px rgba(17,18,20,.3); }
/* a slow light sweep, so the card catches the eye without being touched */
.case-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 5s ease-in-out 2s infinite; }
@keyframes sweep { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.case-card .cc-k { color: rgba(244,244,242,.5); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-badge { font-style: normal; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; letter-spacing: 1.2px;
  color: #fff; background: rgba(224,83,61,.22); border: 1px solid rgba(224,83,61,.45); }
.cc-badge i { width: 6px; height: 6px; border-radius: 99px; background: var(--hold); box-shadow: 0 0 0 0 rgba(224,83,61,.6); animation: live 1.6s ease-out infinite; }
.case-card .cc-t { font-size: 23px; }
.case-card .cc-s { color: rgba(244,244,242,.6); }
.case-card .cc-s b { color: #fff; }
.case-card .cc-s i { background: rgba(244,244,242,.35); }
.case-card .cc-go { position: static; translate: none; width: auto; height: auto; align-self: flex-start; margin-top: 8px; display: inline-flex; gap: 10px; align-items: center;
  padding: 10px 18px; border-radius: 99px; font-size: 14px; font-weight: 500; background: #f4f4f2; color: var(--ink); border: 0; rotate: none; }
.case-card .cc-go b { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.case-card:hover .cc-go { background: #fff; color: var(--ink); rotate: none; }
.case-card:hover .cc-go b { transform: translateX(4px); }
@media (min-width: 901px) and (max-height: 860px) { .case-card { padding: 16px 22px; gap: 6px; } .case-card .cc-go { margin-top: 4px; padding: 8px 16px; } }
@media (prefers-reduced-motion: reduce) { .case-card::after, .cc-badge i { animation: none; } }
/* sample case card on brand tokens (brand/BRAND.md): fog/paper surface, rule hairline, ink text scale, Hound red fill, trace for red text */
.case-card { color: #F5F5F4;
  background: radial-gradient(520px 300px at 100% -10%, rgba(192,24,31,.30) 0%, rgba(11,11,12,0) 70%), radial-gradient(1100px 620px at 78% -8%, #17171A 0%, rgba(11,11,12,0) 70%), #131315;
  border: 1px solid #1F1F22; }
.case-card .cc-k { color: #93938E; }
.case-card .cc-s { color: #B4B4B0; }
.case-card .cc-s b { color: #F5F5F4; }
.case-card .cc-s i { background: #93938E; }
.cc-badge { color: #E5484D; background: rgba(192,24,31,.14); border-color: rgba(192,24,31,.5); }
.cc-badge i { background: #C0181F; }
.case-card .cc-go, .case-card:hover .cc-go { background: #C0181F; color: #FFFFFF; }
.case-card:hover .cc-go { background: #D4212A; }
/* sample case card enters like the other blocks (its own transition list was overriding the reveal), then its button follows */
.case-card[data-reveal] { transition: opacity 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s), filter 1s var(--d, 0s), translate .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.case-card[data-reveal].in:hover { transform: none; translate: 0 -4px; }
.case-card .cc-badge, .case-card .cc-go { opacity: 0; translate: 0 10px; transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1), background .35s; }
.case-card.in .cc-badge { opacity: 1; translate: none; transition-delay: .6s, .6s, 0s; }
.case-card.in .cc-go { opacity: 1; translate: none; transition-delay: .85s, .85s, 0s; }
@media (prefers-reduced-motion: reduce) { .case-card .cc-badge, .case-card .cc-go { opacity: 1; translate: none; transition: none; } }
/* the dark card is glass too: tinted paper you can see the network through, with the same lit edges as the light glass */
.case-card { background: radial-gradient(520px 300px at 100% -10%, rgba(192,24,31,.34) 0%, rgba(192,24,31,0) 70%), linear-gradient(135deg, rgba(22,22,25,.88), rgba(11,11,12,.8));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(17,18,20,.22); }
.case-card .cc-go { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(192,24,31,.35); }
.cc-badge { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* back to top: pages on the way up appear already loaded, with no entrance animation */
.skip-reveal [data-reveal], .skip-reveal [data-reveal] *, .skip-reveal .w { transition: none !important; animation-delay: 0s !important; }

/* ───────── investigators page (/police) ───────── */
@media (min-width: 901px) and (max-width: 1120px) { .links { gap: 26px; } }
a.inline { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,18,20,.25); text-underline-offset: 3px; }
a.inline:hover { text-decoration-color: var(--ink); }
.police-main .case-hero h1 { max-width: 1080px; }
.p-ctas { margin-top: 30px; }
.p-stats { grid-template-columns: repeat(4, 1fr); }
.pk-list { padding-top: 22px; }
.pk-h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; }
.pk-row { display: grid; grid-template-columns: 150px 170px 120px 110px 1fr; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(17,18,20,.07); font-size: 15px; }
.pk-row:last-child { border-bottom: 0; }
.pk-row.thead { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.pk-row a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,18,20,.2); text-underline-offset: 3px; }
.pk-row a:hover { text-decoration-color: var(--ink); }
.pk-f { color: var(--muted); font-size: 14px; }
.pk-c { color: var(--muted); font-size: 14px; }
.p-grid, .p-acts, .p-match, .p-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.p-grid { margin-top: 40px; }
.p-acts .stage::after { content: none; }
.p-acts .stage h3 { margin-top: 10px; }
.p-acts .stage p { line-height: 1.55; }
.p-callout { margin-top: 18px; padding: 20px 26px; border-radius: 18px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: none;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%);
  border: 1px solid rgba(255,255,255,.55); border-left: 3px solid var(--hold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 40px rgba(17,18,20,.08); }
.p-callout b { color: var(--ink); font-weight: 500; }
.p-match .mv { white-space: nowrap; }
.police-main .misses { margin-top: 18px; }
.police-main .case-link { margin-top: 28px; }
.p-center { margin-left: auto; margin-right: auto; }
footer a.inline { color: inherit; }
@media (max-width: 900px) {
  .p-stats { grid-template-columns: repeat(2, 1fr); }
  .p-grid, .p-acts, .p-match, .p-trust { grid-template-columns: 1fr; }
  .pk-row { grid-template-columns: 1fr auto auto; gap: 12px; }
  .pk-row > :nth-child(4), .pk-row > :nth-child(5) { display: none; }
  .police-main .case-hero h1 br { display: none; }
}
@media (max-width: 420px) { .pk-row { font-size: 14px; } .pk-row .kind { font-size: 13px; } }

/* the film: full-width glass frame after the hero; muted autoplay in view, one tap for sound from 0:00 */
section.block.film { counter-increment: none; }
.film .eyebrow::before { content: "\25B6"; font-size: 10px; }
.film-frame { position: relative; margin-top: 40px; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9;
  background: #0b0b0c; border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 30px 80px rgba(17,18,20,.16), 0 4px 14px rgba(17,18,20,.06); }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-sound { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; gap: 10px; transition: opacity .35s, translate .35s; }
.film-sound svg { width: 18px; height: 18px; }
.film-frame.has-sound .film-sound { opacity: 0; translate: -50% 10px; pointer-events: none; }
.film-frame.has-sound:hover .film-sound, .film-sound:focus-visible { opacity: 1; translate: -50% 0; pointer-events: auto; }
@media (max-width: 900px) { .film-frame { border-radius: 18px; margin-top: 28px; } .film-sound { bottom: 14px; height: 42px; font-size: 14px; } }

/* hero copy: frost hugs the words themselves (each word gets its own feathered patch), so empty space stays clear */
.hero-copy .w { position: relative; }
.hero-copy .w::before {
  content: ""; position: absolute; inset: -.08em -.16em; z-index: -1; pointer-events: none; border-radius: .3em;
  background: rgba(241,241,239,.38);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.hero-copy h1, .hero-copy .lede { isolation: isolate; }

/* pages taller than the window (zoomed in, short laptop screens) must not be cut by snapping: JS adds .no-snap */
html.no-snap { scroll-snap-type: none; }
/* the film always fits the window: width follows the available height */
.film-frame { width: min(100%, calc((100vh - 400px) * 16 / 9)); min-width: min(100%, 480px); margin-left: auto; margin-right: auto; }
section.block.film { padding: 72px 0 40px; }
.film .head h2 { font-size: clamp(36px, 4.6vw, 64px); }
/* lede: wider, softer frost so globe labels never sit right against the words */
.hero-copy .lede .w::before { inset: -.9em -1.1em; background: rgba(241,241,239,.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.hero-copy h1 .w::before { inset: -.35em -.5em; }

/* section labels: Plex Sans, not mono (number + label) */
.eyebrow { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .14em; }
.eyebrow::before { font-variant-numeric: tabular-nums; font-weight: 600; }

/* case/investigator step heads: number sits above the heading like the home page labels, everything on one left edge */
.cstep-head { grid-template-columns: 1fr; gap: 0; }
.cstep-head .cstep-n { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--ink);
  padding: 0 0 0 0; margin-bottom: 18px; border: 0; display: inline-flex; align-items: center; gap: 14px; }
.cstep-head .cstep-n::after { content: ""; width: 28px; height: 1px; background: rgba(17,18,20,.28); }
.cstep-head .cstep-n::before { content: none; }