/* Fonts */
  @font-face { font-family: 'PP Monument Wide'; src: url('fonts/PPMonumentWide-Regular.woff') format('woff'); font-weight: 100 600; font-style: normal; font-display: swap; }
  @font-face { font-family: 'PP Monument Wide'; src: url('fonts/PPMonumentWide-Bold.woff') format('woff'); font-weight: 700 900; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Red Hat Mono'; src: url('fonts/RedHatMono-Regular.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
  :root {
    --ground: #C02838;
    --ink: #F6F2EF;
    --ink-strong: #FFFFFF;
    --paper: #FBF5F6;
    --paper-ink: #2A1418;
    --paper-muted: #6E5458;
    --grid: #EFDDE0;
    --axis: #3A2226;
    --line: #D0263E;
    --card: #FFFFFF;
    --card-edge: #EBD6DA;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ground);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #B22434; --paper: #1A0E10; --paper-ink: #F6ECEE; --paper-muted: #B79CA1;
      --grid: #35202400; --grid: #352024; --axis: #D9C3C7; --line: #F0485D; --card: #241417; --card-edge: #3E262B;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ground: #B22434; --paper: #1A0E10; --paper-ink: #F6ECEE; --paper-muted: #B79CA1;
    --grid: #352024; --axis: #D9C3C7; --line: #F0485D; --card: #241417; --card-edge: #3E262B;
    color-scheme: dark;
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  *, *::before, *::after { box-sizing: inherit; }
  body {
    margin: 0;
    background: var(--paper); color: var(--paper-ink);
    font-family: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    overflow-x: hidden;
  }
  a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

  /* ---------- Hero ---------- */
  .hero {
    background: var(--ground); color: var(--ink);
    min-height: 100svh; min-height: 560px;
    display: flex; flex-direction: column;
  }
  @supports (min-height: 100svh) { .hero { min-height: max(560px, 100svh); } }
  .hero a { color: var(--ink); text-decoration: none; }
  .hero a:hover { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 6px; }
  header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 48px; padding: 20px 24px;
  }
  .wordmark {
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif;
    font-stretch: 125%; font-weight: 700; font-size: 15px; letter-spacing: 0.14em;
    padding: 12px 0;
  }
  nav { display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 5vw, 72px); }
  nav a, .contact { font-size: 12px; letter-spacing: 0.14em; padding: 14px 0; display: inline-block; }
  .login {
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 2px; cursor: pointer;
    background: #140A0C; color: #F0485D;
    font: 500 12px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.14em;
  }
  .login:hover { background: #000000; color: #FF6274; }
  .login:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  /* ---------- Account dialog ----------
     The log-in dialog in the site's own style: a #0C0C0D panel with a grey 1px edge and square corners; the title
     and buttons in PP Monument Wide, words and inputs in Red Hat Mono; LOG IN in the site's red with the red sweep
     of READ THE DOCS / APPLY on hover. It fades and rises into place over a backdrop that fades in, and sinks back
     out before it closes: site.js ("Org ID login") adds and removes .is-in. No movement with reduced motion. */
  .auth {
    --au-ease: cubic-bezier(.2,.7,.2,1);
    width: min(464px, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100% - 32px);
    padding: 0; border: 1px solid #2A2A2A; border-radius: 0; background: #0C0C0D; color: #F2F2F2;
    font-family: 'Red Hat Mono', ui-monospace, monospace; overflow-x: hidden;
    opacity: 0; transform: translateY(12px) scale(0.98);
    transition: opacity 320ms ease, transform 320ms var(--au-ease);
  }
  .auth.is-in { opacity: 1; transform: none; }
  .auth::backdrop { background: rgba(0, 0, 0, 0.66); opacity: 0; transition: opacity 320ms ease; }
  .auth.is-in::backdrop { opacity: 1; }
  .auth-in { display: grid; gap: 22px; padding: 24px; }
  .auth-head { display: flex; align-items: center; justify-content: space-between; margin: -8px -12px -8px 0; }
  .auth-head h2 { margin: 0; font: 700 13px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; color: #F2F2F2; }
  .auth .x { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: #8E8E8E; cursor: pointer;
             transition: color 160ms ease, background-color 160ms ease; }
  .auth .x:hover, .auth .x:focus-visible { color: #FFFFFF; background: #1A1A1A; }
  .auth .x:focus-visible { outline: 2px solid #F0485D; outline-offset: -2px; }
  .auth p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #8E8E8E; }
  .auth label, .auth .idk { display: block; margin: 0 0 8px; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #8E8E8E; }
  .auth input {
    width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #333333; border-radius: 0; background: #111111; color: #F2F2F2;
    font: 500 14px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.1em; transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .auth input::placeholder { color: #4A4A4A; opacity: 1; }
  .auth input:hover { border-color: #4A4A4A; }
  .auth input:focus { outline: none; border-color: #F0485D; box-shadow: inset 0 0 0 1px #F0485D; }
  @media (max-width: 480px) { .auth #org-in { padding: 0 12px; font-size: min(12.5px, 3.4vw); letter-spacing: 0; } }   /* the grouped 28-digit org ID fits on one line */
  .auth .err { color: #FF8A97; }
  .auth .err:empty { display: none; }
  .auth .view { display: grid; gap: 14px; min-width: 0; }
  .auth .view[hidden] { display: none; }
  /* buttons: square, Monument Wide; a red sweeps in from the left on hover (lighter red on the red LOG IN) */
  .auth .primary, .auth .ghost {
    position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: 0 18px; border-radius: 0; cursor: pointer;
    font: 700 10.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.12em;
    transition: color 420ms var(--au-ease), border-color 420ms var(--au-ease);
  }
  .auth .primary::before, .auth .ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--au-ease); }
  .auth .primary { border: 0; background: #F0485D; color: #140A0C; }
  .auth .primary::before { background: #FF6274; }
  .auth .ghost { border: 1px solid #333333; background: transparent; color: #CFCFCF; }
  .auth .ghost::before { background: #F0485D; }
  .auth .primary:hover::before, .auth .primary:focus-visible::before, .auth .ghost:hover::before, .auth .ghost:focus-visible::before, .auth .idbox:hover .ghost::before { transform: scaleX(1); }
  .auth .ghost:hover, .auth .ghost:focus-visible, .auth .idbox:hover .ghost { color: #FFFFFF; border-color: #F0485D; }
  .auth .primary:focus-visible, .auth .ghost:focus-visible { outline: 2px solid #F0485D; outline-offset: 2px; }
  /* new users: a rule, the question, then the get-an-org-ID block ("Log-in dialog: its own block") */
  .auth .auth-new { margin-top: 8px; padding-top: 22px; border-top: 1px solid #222222; }
  .auth .auth-new-p { margin: 0 0 12px; color: #CFCFCF; letter-spacing: 0.02em; }
  /* the id view: the org ID and the API key each in a box; a click anywhere on a box copies it (site.js) */
  .auth .idk { margin: 6px 0 -6px; }
  .auth .keyrow { display: grid; gap: 8px; min-width: 0; }
  .auth .keyrow[hidden] { display: none; }
  .auth .keyrow .idk { margin: 6px 0 0; }
  .auth .idbox { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 10px 10px 16px; border: 1px solid #2A2A2A; background: #111111; cursor: pointer; transition: border-color 220ms ease; }
  .auth .idbox:hover { border-color: #4A4A4A; }
  .auth .idbox.is-copied { border-color: #F0485D; }
  .auth .idbox code { flex: 1 1 auto; min-width: 0; font: 500 clamp(12px, 3.45vw, 13.5px)/1.5 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.02em; color: #F0485D; overflow-wrap: anywhere; }
  .auth #id-show { text-wrap: balance; }
  .auth #key-show { font-size: 12.5px; color: #EDEDED; word-break: break-all; }
  .auth .idbox .ghost { flex: none; min-height: 30px; padding: 0 10px; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; }
  .auth .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .auth .row .primary { flex: 1; }
  @media (max-width: 480px) { .auth-in { padding: 20px 16px; } }
  @media (max-width: 359px) { .auth .row { flex-direction: column; } }   /* GO TO DASHBOARD on one line: the two buttons stack */
  @media (prefers-reduced-motion: reduce) {
    .auth, .auth::backdrop, .auth .primary, .auth .ghost, .auth .primary::before, .auth .ghost::before, .auth .idbox, .auth input { transition: none; }
  }

  .hero main {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(24px, 4vh, 40px); padding: 8px 24px 56px;
  }
  #mark, .mark-clone {
    margin: 0; font-family: inherit; font-weight: 500;
    font-size: clamp(8px, 2.2vw, 12px); line-height: 1.08;
    user-select: none; white-space: pre;
  }
  .pitch { text-align: center; display: grid; gap: 10px; max-width: 100%; }
  @media (min-width: 640px) { .pitch p { white-space: nowrap; } }
  .pitch h1 {
    margin: 0; font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif;
    font-stretch: 125%; font-weight: 700; font-size: clamp(17px, 1.95vw, 21.5px); line-height: 1.15;
  }
  .pitch p { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink); }
  @media (max-width: 640px) {
    header { justify-content: flex-start; }
    nav { order: 3; width: 100%; }
  }

  /* ---------- Stats ---------- */
  .stats { background: #111111; color: #F4F4F4; padding: clamp(16px, 2vw, 24px) clamp(16px, 2.5vw, 44px); }
  .stats-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    background: #2C2C2C; border: 1px solid #2C2C2C; margin: 0;
  }
  .stat {
    background: #111111; min-height: clamp(140px, 12vw, 200px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px 16px; text-align: center;
  }
  .stat .num {
    margin: 0; font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif;
    font-stretch: 125%; font-weight: 400; font-size: clamp(20px, 2.1vw, 27.5px); line-height: 1;
    letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .stat .label {
    margin: 0; font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%;
    font-size: 10.5px; letter-spacing: 0.16em; color: #8E8E8E;
  }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (max-width: 720px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .stat { min-height: 112px; }
  }

  /* ---------- Revenue ---------- */
  .revenue {
    padding: clamp(64px, 10vw, 128px) 24px clamp(64px, 8vw, 112px);
    background:
      radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--line) 6%, transparent), transparent 70%),
      var(--paper);
  }
  .wrap { max-width: 1200px; margin: 0 auto; }
  .intro { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 64ch; }
  .intro h2 {
    margin: 0;
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif;
    font-stretch: 125%; font-weight: 700;
    font-size: 13.5px; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .intro p { margin: 0; font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: var(--paper-muted); }
  .intro .figure { font-family: inherit; color: var(--line); font-weight: 500; }

  .chart { position: relative; }
  .counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 32px) 24px; margin: 0 0 clamp(40px, 6vw, 72px); }
  .counters .ctr-head { grid-column: 1 / -1; }
  @media (max-width: 720px) { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .ctr-label { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: var(--line); }
  .ctr-dot { width: 7px; height: 7px; background: var(--line); display: inline-block; animation: liveblink 1.1s steps(2, start) infinite; }
  .ctr-num { display: block; max-width: 100%; }
  .ctr-num rect.new { animation: blockin 640ms ease-out both; }
  @keyframes blockin { 0% { opacity: 0; fill: var(--line); } 30% { opacity: 1; fill: var(--line); } 100% { opacity: 0.86; fill: var(--paper-ink); } }
  .ctr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
  .ctr-meter { display: grid; grid-template-columns: repeat(24, 4px); gap: 2px; }
  .ctr-meter i { display: block; height: 4px; background: var(--grid); }
  .ctr-meter i.on { background: var(--line); }
  .ctr-meter.flash i:not(.on) { animation: meterflash 160ms ease-out; }
  @keyframes meterflash { 0% { background: var(--line); } 100% { background: var(--grid); } }
  .ctr-rate { font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: var(--paper-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .ctr-num rect.new, .ctr-meter.flash i { animation: none; } }
  .ctr-head { margin-bottom: -6px; color: var(--paper-muted); }
  .ctr .ctr-label { margin-bottom: 10px; }
  .ctr-num .px { fill: var(--paper-ink); opacity: 0.86; }
  .ctr-num .cm { fill: var(--paper-muted); opacity: 0.7; }
  .live-dot { fill: var(--line); animation: liveblink 1.1s steps(2, start) infinite; }
  .live-ring { fill: none; stroke: var(--line); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: livering 2.2s ease-out infinite; }
  .live-lab { font: 500 10.5px 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.08em; fill: var(--line); }
  @keyframes liveblink { to { opacity: 0.15; } }
  @keyframes livering { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .ctr-dot, .live-dot, .live-ring { animation: none; } }
  .chart svg { display: block; width: 100%; height: clamp(300px, 42vw, 460px); overflow: visible; }
  .ylab { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; fill: var(--paper-muted); }
  .ytitle { font-size: 9.5px; letter-spacing: 0.16em; fill: var(--line); }
  .gridline { stroke: var(--grid); stroke-width: 1; }
  .rev-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .rev-glow { fill: none; stroke: var(--line); stroke-width: 8; opacity: 0.18; stroke-linejoin: round; }
  .guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.55; }
  .pt { fill: var(--line); stroke: var(--paper); stroke-width: 3; }
  .pt-halo { fill: var(--line); opacity: 0.16; }

  /* Timeline: same horizontal frame as the plot area */
  .timeline { position: relative; height: 72px; margin-right: 72px; margin-left: 8px; }
  .axis-line { position: absolute; left: -8px; right: -24px; top: 34px; height: 1px; background: var(--grid); }
  .tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
  .tick span { font-size: 10.5px; letter-spacing: 0.1em; color: var(--paper-muted); white-space: nowrap; }
  .tick i { display: block; width: 1px; height: 14px; background: var(--axis); }
  .node {
    position: absolute; top: 34px; width: 36px; height: 36px; margin: -18px 0 0 -18px;
    padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--line);
    display: grid; place-items: center; border-radius: 4px;
  }
  .node::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--paper);
    border: 1.5px solid var(--paper-muted);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  }
  .node:hover::before, .node[aria-pressed="true"]::before {
    background: var(--line); border-color: var(--line); transform: scale(1.4);
  }
  @media (max-width: 640px) { .tick.minor span { display: none; } }

  .detail {
    margin: 8px 0 0 8px; max-width: 560px;
    display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: baseline;
    padding: 20px 24px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 6px;
  }
  .detail .when { font-size: 11.5px; letter-spacing: 0.12em; color: var(--paper-muted); }
  .detail .amt { font-size: 11.5px; letter-spacing: 0.06em; color: var(--line); justify-self: end; }
  .detail h3 {
    grid-column: 1 / -1; margin: 4px 0 0;
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 112%;
    font-weight: 700; font-size: 17px; line-height: 1.25;
  }
  .detail p { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--paper-muted); }
  .hint { margin: 16px 0 0 8px; font-size: 11.5px; color: var(--paper-muted); }

  /* ---------- Chips ---------- */
  .chips { padding: clamp(48px, 7vw, 96px) 24px clamp(64px, 8vw, 112px); background: var(--paper); border-top: 1px solid var(--grid); }
  .chip-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
    background: var(--grid); border: 1px solid var(--grid);
  }
  .chip { grid-column: span 3; }
  @media (max-width: 560px) {
    .chip-grid { grid-template-columns: minmax(0, 1fr); }
    .chip { grid-column: span 1; }
  }
  .chip { margin: 0; background: var(--paper); padding: 24px 20px 24px; display: grid; gap: 20px; }
  .chip svg { width: 100%; height: auto; max-height: 230px; display: block; overflow: visible; }
  .chip .smgrid { fill: url(#smgrid); stroke: none; }
  .chip .s { fill: none; stroke: var(--line); stroke-width: 0.9; }
  .chips.live .chip .s:not(.flow) { stroke-dasharray: none; }
  .chip .s.thin { stroke-width: 0.7; opacity: 0.7; }
  .chip .hatch { fill: url(#hatch); stroke: none; }
  .chip .anno { font: 400 8.5px 'Red Hat Mono', ui-monospace, monospace; fill: var(--paper-muted); letter-spacing: 0.04em; }
  .chip .lead { stroke: var(--paper-muted); stroke-width: 0.7; fill: none; stroke-dasharray: 2 2; }
  .chips.armed .s { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1500ms cubic-bezier(.45,.1,.2,1); }
  .chips.armed .hatch, .chips.armed .smgrid, .chips.armed .anno, .chips.armed .lead { opacity: 0; transition: opacity 600ms ease 1100ms; }
  .chips.armed.in .s { stroke-dashoffset: 0; }
  .chips.armed.in .hatch, .chips.armed.in .smgrid, .chips.armed.in .anno, .chips.armed.in .lead { opacity: 1; }
  .chip figcaption { display: grid; gap: 4px; }
  .chip .vendor { font-size: 10.5px; letter-spacing: 0.14em; color: var(--paper-muted); }
  .chip strong {
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%;
    font-weight: 700; font-size: 18.5px; letter-spacing: 0.02em; color: var(--paper-ink);
  }
  .chip .spec { font-size: 11.5px; color: var(--paper-muted); }

  /* ---------- Regions map ---------- */
  .regions { background: #111111; color: #F4F4F4; padding: clamp(40px, 6vw, 72px) clamp(16px, 2.5vw, 44px); }
  .map-wrap { position: relative; max-width: 1360px; margin: 0 auto; }
  .map-stage { position: relative; aspect-ratio: 150 / 64; }
  #map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .reg-copy { position: static; max-width: 64ch; display: grid; gap: 12px; margin: 0 0 clamp(24px, 4vw, 40px); }
  .reg-copy h2 {
    margin: 0; font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%;
    font-weight: 700; font-size: clamp(17.5px, 2.25vw, 25px); line-height: 1.1;
  }
  .reg-copy p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #A8A8A8; }
  .marker { position: absolute; transform: translate(-5px, -5px); display: flex; align-items: center; gap: 8px; pointer-events: none; }
  .marker i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #F0485D; flex: none; }
  .marker i::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #F0485D;
    animation: ping 2.4s ease-out infinite; animation-delay: var(--d, 0s);
  }
  .marker span { font-size: 11.5px; letter-spacing: 0.08em; color: #FF7A8A; white-space: nowrap; background: rgba(17,17,17,0.7); padding: 2px 4px; }
  .reg-filter { display: flex; flex-wrap: wrap; border-bottom: 1px solid #262626; margin: 0 0 clamp(20px, 3vw, 32px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .reg-filter button { min-height: 44px; padding: 0 18px; margin-bottom: -1px; background: none; border: 0; border-bottom: 1px solid transparent; color: #7A7A7A; cursor: pointer; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }
  .reg-filter button:first-child { padding-left: 0; }
  .reg-filter button span { color: #555; margin-left: 4px; }
  .reg-filter button:hover { color: #D6D6D6; }
  .reg-filter button[aria-pressed="true"] { color: #F2F2F2; border-bottom-color: #F0485D; }
  .reg-filter button[aria-pressed="true"] span { color: #F0485D; }
  .marker { transition: opacity 300ms ease; }
  .marker.dim { opacity: 0.15; }
  .reg-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; margin-top: clamp(20px, 3vw, 32px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  @media (max-width: 760px) { .reg-list { grid-template-columns: minmax(0, 1fr); } }
  .reg-col { background: #111111; padding: 18px 20px 20px; }
  .reg-col > * { transition: opacity 300ms ease; }
  .reg-col.dim > * { opacity: 0.35; }
  .reg-col h3 { margin: 0 0 10px; padding: 6px 0; color: #F0485D; font: 500 10px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }
  .reg-col h3 button { background: none; border: 0; padding: 6px 0; color: #F0485D; cursor: pointer; font: 500 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }
  .reg-col h3 button:hover { text-decoration: underline; text-underline-offset: 4px; }
  .reg-col ul { list-style: none; margin: 0; padding: 0; }
  .reg-col li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #1E1E1E; font-size: 11.5px; letter-spacing: 0.04em; color: #E0E0E0; }
  .reg-col code { font-family: inherit; color: #7A7A7A; }
  @media (prefers-reduced-motion: reduce) { .marker, .reg-col > * { transition: none; } }
  .marker.left { flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -5px); }
  @keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
  @media (max-width: 760px) {
    .reg-copy { position: static; margin-bottom: 24px; }
    .marker span { font-size: 9.5px; }
  }
  @media (prefers-reduced-motion: reduce) { .marker i::after { animation: none; opacity: 0.5; } }

  /* ---------- Footer ---------- */
  .foot {
    --foot-bg: #FFFFFF; --foot-ink: #1A1A1A; --foot-muted: #5E5E5E;
    background: var(--foot-bg); color: var(--foot-ink);
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 24px;
    padding: 64px 28px 24px;
    font-size: 11.5px; letter-spacing: 0.14em;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foot { --foot-bg: #0B0B0B; --foot-ink: #EDEDED; --foot-muted: #9A9A9A; } }
  :root[data-theme="dark"] .foot { --foot-bg: #0B0B0B; --foot-ink: #EDEDED; --foot-muted: #9A9A9A; }
  .foot-left { display: grid; gap: 4px; justify-self: start; }
  .foot-left address { font-style: normal; }
  .foot-left time { color: var(--foot-muted); font-variant-numeric: tabular-nums; }
  .foot-left .gc { white-space: nowrap; }
  .foot-mark { width: 26px; height: auto; display: block; align-self: center; }
  .foot-right { justify-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
  .foot-left .foot-talent { margin-top: 10px; color: var(--foot-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; padding: 8px 0; justify-self: start; }
  .foot-left .foot-talent:hover { color: #C02838; }
  .foot-right a { color: var(--foot-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; padding: 12px 0; display: inline-block; }
  .foot-right a:hover { color: #C02838; }
  @media (max-width: 560px) {
    .foot { grid-template-columns: minmax(0, 1fr); justify-items: start; padding-top: 48px; }
    .foot-mark { order: -1; }
    .foot-right { justify-self: start; }
  }

  /* ---------- Research (#research, #research/<slug>) ---------- */
  .research-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.research-mode .hero, body.research-mode .revenue, body.research-mode .chips,
  body.research-mode .regions, body.research-mode .legal, body.research-mode .docs-page { display: none; }
  body.research-mode .research-page { display: block; }
  .r-bar { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #2A2A2A; }
  .r-bar a { color: #EDEDED; text-decoration: none; }
  .r-bar .crumb { font-size: 11.5px; letter-spacing: 0.14em; color: #9A9A9A; }
  .r-bar .crumb a { color: #9A9A9A; }
  .r-bar .crumb a:hover { color: #EDEDED; }
  .r-list { padding: clamp(56px, 8vw, 104px) 19px; display: grid; }
  .r-list[hidden] { display: none; }
  .r-item { display: flex; align-items: center; padding: 10px 0; min-height: 44px; color: #F2F2F2; text-decoration: none; }
  .r-num { flex: none; width: 27px; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 10.5px; color: #7A7A7A; }
  .r-title {
    flex: 0 1 auto; max-width: 72%;
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 100%; font-weight: 400;
    font-size: 11.5px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px;
    transition: text-decoration-color 200ms ease;
  }
  .r-rule { flex: 1 1 24px; min-width: 24px; height: 1px; margin: 0 20px; background: #2A2A2A; transition: background 200ms ease; }
  .r-tag { flex: none; margin-right: 16px; padding: 3px 6px; border: 1px solid #3A3A3A; border-radius: 2px; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.14em; color: #B5B5B5; }
  .paper-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
  .post-body .paper-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border: 1px solid #3A3A3A; border-radius: 2px; background: none; color: #EDEDED; cursor: pointer;
    font: 500 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-decoration: none;
  }
  .post-body .paper-btn:hover { border-color: #F0485D; color: #FFFFFF; }
  .post-body .paper-btn.primary { background: #F0485D; border-color: #F0485D; color: #140A0C; }
  .post-body .paper-btn.primary:hover { background: #FF6274; }
  .post-body .post-tbl td:first-child { color: #8E8E8E; width: 1%; }
  .post-body .bib { margin: 0; padding: 14px 16px; overflow-x: auto; background: #161616; border: 1px solid #2A2A2A; font: 400 10.5px/1.65 'Red Hat Mono', ui-monospace, monospace; color: #D6D6D6; letter-spacing: 0.02em; }
  .r-date { flex: none; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; color: #7A7A7A; }
  .r-item:hover .r-title, .r-item:focus-visible .r-title { text-decoration-color: currentColor; }
  .r-item:hover .r-rule, .r-item:focus-visible .r-rule { background: #4A4A4A; }
  .r-item:focus-visible { outline: 2px solid #F0485D; outline-offset: 4px; }
  @media (max-width: 640px) {
    .r-item { align-items: baseline; gap: 12px; }
    .r-num { width: auto; }
    .r-title { flex: 1 1 auto; max-width: none; }
    .r-rule { display: none; }
  }

  .r-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; display: none; }
  body.reading .r-progress { display: block; }
  .r-progress i { display: block; height: 3px; background: #F0485D; transform-origin: 0 50%; transform: scaleX(0); }

  .post[hidden] { display: none; }
  .post {
    padding: 22px clamp(16px, 5.8vw, 74px) clamp(64px, 10vw, 120px);
    font-family: 'Red Hat Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  .post-head, .post-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: 48px;
  }
  .post-all { grid-column: 1; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: #F0485D; text-decoration: none; font-size: 10.5px; letter-spacing: 0.2em; padding: 0; line-height: 1.6; }
  .post-all:hover { color: #FF7A8A; }
  .post-titles { grid-column: 2; text-align: center; padding: 0 0 36px; border-bottom: 1px solid #2E2E2E; display: grid; justify-items: center; }
  .post-date { margin: 0; color: #F0485D; font-size: 10.5px; line-height: 1.6; letter-spacing: 0.2em; }
  .post-titles h1 { margin: 26px 0 0; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #F2F2F2; line-height: 1.6; }
  .post-by { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: 0.16em; color: #CFCFCF; }
  .post-by svg { width: 8px; height: auto; display: block; }
  .post-titles .dek { display: none; }
  .post-toc { grid-column: 1; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 32px); align-self: start; justify-self: start; padding-top: 14px; max-width: 240px; }
  .post-toc ol { list-style: none; margin: 0; padding: 0; }
  .post-toc button {
    display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; position: relative;
    padding: 5px 0 5px 12px; font: 400 9.5px/1.6 'Red Hat Mono', ui-monospace, monospace;
    letter-spacing: 0.18em; text-transform: uppercase; color: #7A7A7A;
  }
  .post-toc button:hover { color: #D6D6D6; }
  .post-toc button[aria-current="true"] { color: #F2F2F2; }
  .post-toc button[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 9px; margin-top: -4.5px; background: #F2F2F2; }
  .post-main { grid-column: 2; min-width: 0; }
  .post-sec { scroll-margin-top: 24px; }
  .post-sec h2 { margin: 38px 0 22px; font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; line-height: 1.6; }
  .post-sec:first-child h2 { margin-top: 36px; }
  .post-body { font-size: 12px; line-height: 1.62; letter-spacing: 0.06em; color: #CFCFCF; min-width: 0; }
  .post-body p { margin: 0 0 14px; }
  .post-body ol, .post-body ul { margin: 0 0 14px; padding-left: 22px; }
  .post-body li { margin: 0 0 6px; }
  .post-body strong { font-weight: 500; color: #FFFFFF; }
  .post-body a { color: #F0485D; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .post-body code { font-family: inherit; font-size: 1em; background: #1F1F1F; color: #F2F2F2; padding: 1px 5px; border-radius: 2px; }
  .post-body blockquote { margin: 20px 0; padding: 2px 0 2px 16px; border-left: 1px solid #F0485D; color: #F2F2F2; }
  .post-body blockquote cite { display: block; margin-top: 6px; font-style: normal; color: #8E8E8E; }
  .post-body figure { margin: 22px 0 24px; }
  .post-body figure svg { width: 100%; height: auto; display: block; background: #161616; border: 1px solid #2A2A2A; }
  .post-body figcaption { margin-top: 10px; font-size: 10.5px; line-height: 1.6; color: #9A9A9A; }
  .post-body figcaption b { font-weight: 500; color: #E6E6E6; }
  .post-body mjx-container { color: inherit; }
  .post-body mjx-container[display="true"] { display: block; overflow-x: auto; overflow-y: hidden; margin: 18px 0 !important; padding: 4px 0; }
  .post-body .eq-note { font-size: 10.5px; color: #8E8E8E; }
  .post-tbl { overflow-x: auto; margin: 18px 0 24px; border: 1px solid #2A2A2A; }
  .post-tbl table { width: 100%; border-collapse: collapse; font-family: inherit; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.04em; }
  .post-tbl th { text-align: left; font-weight: 500; font-size: 9.5px; letter-spacing: 0.12em; color: #9A9A9A; padding: 8px 12px; border-bottom: 1px solid #2A2A2A; white-space: nowrap; }
  .post-tbl td { padding: 8px 12px; border-bottom: 1px solid #2A2A2A; color: #E4E4E4; white-space: nowrap; }
  .post-tbl tr:last-child td { border-bottom: 0; }
  .post-tbl td.hi { color: #F0485D; }
  .fnref { font: 500 9px/1 'Red Hat Mono', ui-monospace, monospace; vertical-align: super; color: #F0485D; background: none; border: 0; padding: 2px 2px; cursor: pointer; }
  .fnref:hover { text-decoration: underline; }
  .post-notes { margin-top: 44px; padding-top: 18px; border-top: 1px solid #2E2E2E; }
  .post-notes ol { margin: 0; padding-left: 20px; font-size: 10.5px; line-height: 1.65; letter-spacing: 0.04em; color: #9A9A9A; }
  .post-notes li { margin-bottom: 8px; scroll-margin-top: 40px; transition: color 300ms ease; }
  .post-notes li.flash { color: #FFFFFF; }
  .post-back { margin-top: 36px; }
  .post-back a { color: #F0485D; font-size: 10.5px; letter-spacing: 0.2em; text-decoration: none; padding: 12px 0; display: inline-block; }
  .post-back a:hover { color: #FF7A8A; }

  .r-bar { justify-content: space-between; flex-wrap: wrap; gap: 4px 32px; border-bottom: 0; padding: 22px 17px 18px; }
  .r-bar .wordmark { color: #F0485D; font-size: 13.5px; padding: 4px 0; }
  .r-nav { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3.4vw, 44px); }
  .r-nav a { color: #F0485D; font-size: 10px; letter-spacing: 0.22em; padding: 12px 0; text-decoration: none; }
  .r-nav a:hover, .r-nav a[aria-current="page"] { color: #FF7A8A; }
  .r-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .r-mark { position: fixed; left: 17px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); width: 14px; height: auto; display: none; z-index: 5; }
  body.reading .r-mark { display: block; }

  @media (max-width: 1100px) {
    .post-head, .post-layout { grid-template-columns: minmax(0, 680px); justify-content: center; }
    .post-all, .post-titles, .post-main { grid-column: 1; }
    .post-all { margin-bottom: 28px; }
    .post-toc { display: none; }
    body.reading .r-mark { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .r-title { transition: none; } }

  /* ---------- Login button in every page bar ---------- */
  .r-bar, .legal-bar { justify-content: flex-start; }
  .r-bar .r-nav, .legal-bar nav { margin-left: auto; }
  .r-bar .login, .legal-bar .login { margin-left: clamp(20px, 3.4vw, 44px); }
  .r-bar .login { border: 1px solid #3E262B; }
  .docs-bar .login { margin-left: auto; }

  /* ---------- Security (#security) ---------- */
  .security-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.security-mode .hero, body.security-mode .revenue, body.security-mode .chips, body.security-mode .regions { display: none; }
  body.security-mode .security-page { display: block; }
  .sec-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 19px clamp(64px, 10vw, 120px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .sec-wrap h1 { margin: 0 0 18px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .sec-intro { margin: 0 0 56px; max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; color: #BDBDBD; }
  .sec-h2 { margin: 0 0 18px; font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; color: #8E8E8E; }
  .comp-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px;
    background: #262626; border: 1px solid #262626; margin-bottom: clamp(64px, 9vw, 112px);
  }
  .comp-grid > .comp { grid-column: span 3; }
  .comp-grid > .comp:nth-child(n+5) { grid-column: span 4; }
  @media (max-width: 1100px) {
    .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comp-grid > .comp, .comp-grid > .comp:nth-child(n+5) { grid-column: span 1; }
    .comp-grid > .comp:last-child { grid-column: span 2; }
  }
  @media (max-width: 600px) {
    .comp-grid { grid-template-columns: minmax(0, 1fr); }
    .comp-grid > .comp:last-child { grid-column: span 1; }
  }
  @media (max-width: 1100px) { .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .comp-top { display: flex; }
  .comp .status.on { color: #8FD19E; border-color: #2E4A35; }
  .comp .comp-tags { font-size: 9.5px; letter-spacing: 0.16em; color: #6E6E6E; }
  @media (max-width: 600px) { .comp-grid { grid-template-columns: minmax(0, 1fr); } }
  .comp { background: #111111; padding: 26px 26px 28px; min-height: 300px; display: flex; flex-direction: column; gap: 12px; }
  .comp h3 { margin: 0; font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 100%; font-weight: 400; font-size: 16px; color: #F4F4F4; }
  .comp p { margin: 0; font-size: 12px; line-height: 1.65; letter-spacing: 0.03em; color: #A8A8A8; max-width: 44ch; }
  .comp .status { align-self: flex-start; font-size: 9.5px; letter-spacing: 0.16em; color: #F0485D; border: 1px solid #4A2D33; padding: 5px 8px; border-radius: 2px; }
  .comp .seal { margin-top: auto; width: 64px; height: 64px; display: block; }
  .seal * { fill: none; stroke: #CFCFCF; stroke-width: 0.9; }
  .seal text { fill: #CFCFCF; stroke: none; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 7.6px; letter-spacing: 0.02em; }
  .seal .bg { fill: #111111; stroke: none; }
  .seal .star { fill: #CFCFCF; stroke: none; }

  .comp-sec { margin-top: clamp(64px, 9vw, 112px); padding-top: 36px; border-top: 1px solid #262626; }
  .comp-sec h2 { margin: 0 0 24px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .comp-sec .comp-grid { margin-bottom: 0; }
  .zdr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding-top: 36px; border-top: 1px solid #262626; }
  @media (max-width: 960px) { .zdr { grid-template-columns: minmax(0, 1fr); } }
  .zdr h2 { margin: 0 0 18px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .zdr-copy p { margin: 0 0 16px; font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: #BDBDBD; }
  .zdr-copy ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
  .zdr-copy li { font-size: 11.5px; line-height: 1.6; letter-spacing: 0.05em; color: #D6D6D6; padding-left: 18px; position: relative; }
  /* bullet: a slim red rhombus, taller than wide like the two pieces of the Silares mark; integer px so it stays crisp.
     top 4px + height 10px centres it on the first 18.4px line (11.5px x 1.6) */
  .zdr-copy li::before { content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: 10px; background: #F0485D; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

  .zr { position: relative; border: 1px solid #262626; background: #0C0C0C; padding: 18px; display: grid; gap: 16px; }
  .zr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 10px; letter-spacing: 0.16em; color: #8E8E8E; }
  .zr-head b { font-weight: 500; color: #F0485D; font-variant-numeric: tabular-nums; }
  #zr-phase { color: #F2F2F2; }
  .zr-label { margin: 0 0 8px; font-size: 9.5px; letter-spacing: 0.18em; color: #7A7A7A; transition: color 200ms ease; }
  .zr-region.residue .zr-label { color: #F0485D; animation: zrblink 0.8s steps(2, start) infinite; }
  @keyframes zrblink { to { visibility: hidden; } }
  .zr-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px 4px; font-size: 10.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
  .zr-regs { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
  .zr-regs > span { font-size: 9.5px; letter-spacing: 0.1em; color: #7A7A7A; }
  .zb { color: #343434; text-align: center; }
  .zb.s { color: #F0485D; }
  .zb.m { color: #F2F2F2; }
  .zr-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-top: 1px solid #1E1E1E; padding-top: 14px; }
  .zr-cap { margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; color: #CFCFCF; min-height: 3.2em; }
  .zr-ctl { flex: none; min-height: 32px; padding: 0 12px; background: none; border: 1px solid #333; border-radius: 2px; color: #CFCFCF; cursor: pointer; font: 500 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; }
  .zr-ctl:hover { border-color: #F0485D; color: #F2F2F2; }
  @media (max-width: 520px) { .zr-grid { font-size: 8.5px; gap: 2px 2px; } .zr { padding: 12px; } }
  @media (prefers-reduced-motion: reduce) { .zr-region.residue .zr-label { animation: none; } }

  .case { margin-top: clamp(56px, 8vw, 96px); padding-top: 36px; border-top: 1px solid #262626; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  @media (max-width: 960px) { .case { grid-template-columns: minmax(0, 1fr); } }
  .case h2 { margin: 0; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; line-height: 1.7; }
  .case h2 span { display: block; color: #8E8E8E; font-weight: 400; }
  .case-body p { margin: 0 0 16px; font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: #BDBDBD; }
  .case-body code { font-family: inherit; background: #1F1F1F; color: #F2F2F2; padding: 1px 5px; border-radius: 2px; }
  .case-links { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid #262626; }
  .case-links li { border-bottom: 1px solid #262626; }
  .case-links a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; color: #EDEDED; text-decoration: none; font-size: 11.5px; letter-spacing: 0.06em; }
  .case-links a span { color: #7A7A7A; font-size: 10px; letter-spacing: 0.14em; white-space: nowrap; }
  .case-links a:hover { color: #F0485D; }

  /* ---------- Dashboard (#dashboard) ---------- */
  .dash-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.dash-mode .hero, body.dash-mode .revenue, body.dash-mode .chips, body.dash-mode .regions { display: none; }
  body.dash-mode .dash-page { display: block; }
  .db-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 19px clamp(64px, 10vw, 120px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .db-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
  .db-head h1 { margin: 0 0 10px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .db-org { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.12em; color: #9A9A9A; }
  .db-org code { font-family: inherit; color: #F0485D; letter-spacing: 0.1em; }
  .db-btn { min-height: 36px; padding: 0 14px; background: none; border: 1px solid #333; border-radius: 2px; color: #D6D6D6; cursor: pointer; font: 500 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; }
  .db-btn:hover { border-color: #F0485D; color: #FFFFFF; }
  .db-btn.primary { background: #F0485D; border-color: #F0485D; color: #140A0C; }
  .db-btn.primary:hover { background: #FF6274; }
  .db-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .db-panel[hidden] { display: none; }
  .db-sub { margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid #262626; font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; color: #F2F2F2; }
  .db-panel { padding-top: 28px; }
  .db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; margin-bottom: 28px; }
  @media (max-width: 860px) { .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .db-kpi { background: #111111; padding: 20px 20px 22px; display: grid; gap: 10px; }
  .db-kpi span { font-size: 9.5px; letter-spacing: 0.18em; color: #7A7A7A; }
  .db-kpi b { font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 112%; font-weight: 400; font-size: clamp(18.5px, 1.95vw, 21.5px); color: #F4F4F4; font-variant-numeric: tabular-nums; }
  .db-kpi b.red { color: #F0485D; }
  .db-kpi small { font-size: 10.5px; color: #8E8E8E; letter-spacing: 0.04em; }
  .db-card { border: 1px solid #262626; padding: 18px; margin-bottom: 28px; }
  .db-card h2 { margin: 0 0 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-weight: 500; font-size: 10px; letter-spacing: 0.18em; color: #9A9A9A; }
  .db-legend { display: flex; gap: 16px; font-weight: 400; }
  .db-legend i { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; }
  .db-chart { width: 100%; height: 240px; display: block; }
  .db-chart text { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 9.5px; fill: #7A7A7A; }
  .db-tbl { overflow-x: auto; }
  .db-tbl table { width: 100%; border-collapse: collapse; font-size: 11.5px; letter-spacing: 0.03em; }
  .db-tbl th { text-align: left; font-weight: 400; font-size: 9.5px; letter-spacing: 0.16em; color: #7A7A7A; padding: 12px 12px 10px; border-bottom: 1px solid #2A2A2A; white-space: nowrap; }
  .db-tbl td { padding: 11px 12px; border-bottom: 1px solid #1E1E1E; color: #E0E0E0; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .db-tbl th:first-child, .db-tbl td:first-child { padding-left: 0; }
  .db-tbl .num { text-align: right; }
  .db-tbl .dim { color: #7A7A7A; }
  .db-tbl .ok { color: #8FD19E; }
  .db-tbl .bad { color: #F0485D; }
  .db-tbl tbody tr:hover td { background: #161616; }
  .db-note { margin: 0 0 16px; font-size: 11px; line-height: 1.6; color: #8E8E8E; letter-spacing: 0.04em; max-width: 80ch; }
  .db-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 10.5px; letter-spacing: 0.12em; color: #8E8E8E; }
  .db-filter select { min-height: 36px; background: #161616; color: #EDEDED; border: 1px solid #333; border-radius: 2px; padding: 0 10px; font: 400 11.5px 'Red Hat Mono', ui-monospace, monospace; }

  .db-amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
  .db-amounts button { min-height: 44px; min-width: 84px; padding: 0 16px; background: none; border: 1px solid #333; border-radius: 3px; color: #EDEDED; cursor: pointer; font: 500 12.5px/1 'Red Hat Mono', ui-monospace, monospace; }
  .db-amounts button[aria-pressed="true"] { border-color: #F0485D; background: #1C0F12; color: #FFFFFF; }
  .db-group { border-top: 1px solid #262626; padding: 20px 0 24px; }
  .db-group h3 { margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; font-weight: 500; font-size: 10.5px; letter-spacing: 0.18em; color: #F2F2F2; }
  .db-group h3 span { font-weight: 400; color: #7A7A7A; letter-spacing: 0.08em; }
  .db-methods { display: flex; flex-wrap: wrap; gap: 12px; }
  .db-method {
    position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px;
    background: #141414; border: 1px solid #2E2E2E; border-radius: 4px; color: #EDEDED; cursor: pointer;
    font: 400 12px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; overflow: hidden;
  }
  .db-method svg { width: 22px; height: 22px; flex: none; color: #CFCFCF; }
  .db-method:hover { border-color: #555; }
  .db-method[aria-pressed="true"] { border-color: #F0485D; background: #1C0F12; }
  .db-method[aria-pressed="true"] svg { color: #F0485D; }
  .db-method .off { position: absolute; top: 7px; left: -18px; width: 62px; transform: rotate(-45deg); background: #F0485D; color: #140A0C; font-size: 8.5px; font-weight: 500; letter-spacing: 0.04em; text-align: center; padding: 2px 0; }
  .db-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 0 8px; border-top: 1px solid #262626; }
  .db-pay p { margin: 0; font-size: 11.5px; color: #BDBDBD; letter-spacing: 0.04em; }
  .db-pay-msg { margin: 12px 0 28px; padding: 14px 16px; border: 1px dashed #4A2D33; font-size: 11.5px; line-height: 1.6; color: #E0E0E0; }
  .db-pay-msg[hidden] { display: none; }
  .db-empty { padding: 72px 0; display: grid; justify-items: start; gap: 18px; }
  .db-empty p { margin: 0; font-size: 12px; line-height: 1.7; color: #BDBDBD; max-width: 56ch; letter-spacing: 0.04em; }
  .db-empty[hidden], .db-main[hidden] { display: none; }

  /* ---------- Enterprise (#enterprise) ---------- */
  .ent-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.ent-mode .hero, body.ent-mode .revenue, body.ent-mode .chips, body.ent-mode .regions { display: none; }
  body.ent-mode .ent-page { display: block; }
  .ent-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 19px clamp(64px, 10vw, 120px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .ent-wrap h1 { margin: 0 0 18px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .ent-intro { margin: 0 0 56px; max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; color: #BDBDBD; }
  .ent-sec { padding-top: 36px; border-top: 1px solid #262626; margin-bottom: clamp(56px, 8vw, 96px); }
  .ent-sec > h2 { margin: 0 0 24px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .ent-note { margin: 14px 0 0; font-size: 10.5px; line-height: 1.6; color: #7A7A7A; letter-spacing: 0.04em; }

  .ent-form-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  @media (max-width: 900px) { .ent-form-grid { grid-template-columns: minmax(0, 1fr); } }
  .ent-form-copy p { margin: 0 0 14px; font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: #BDBDBD; max-width: 44ch; }
  .ent-form { display: grid; gap: 22px; }
  .ent-field label { display: block; margin: 0 0 10px; font-size: 10.5px; letter-spacing: 0.16em; color: #EDEDED; }
  .ent-field label b { color: #F0485D; font-weight: 400; margin-left: 4px; }
  .ent-field input, .ent-field select, .ent-field textarea {
    width: 100%; min-height: 48px; padding: 0 14px; background: #111111; border: 1px solid #3A3A3A; border-radius: 0;
    color: #EDEDED; font: 400 11.5px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.03em;
  }
  .ent-field textarea { min-height: 140px; padding: 12px 14px; resize: vertical; }
  .ent-field select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23BDBDBD' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .ent-field select:invalid { color: #6E6E6E; }
  .ent-field option { background: #1A1A1A; color: #EDEDED; }
  .ent-field input:focus, .ent-field select:focus, .ent-field textarea:focus { outline: none; border-color: #EDEDED; }
  .ent-field.bad input, .ent-field.bad select { border-color: #F0485D; }
  .ent-err { margin: 8px 0 0; font-size: 10.5px; color: #FF8A97; }
  .ent-err:empty { display: none; }
  .ent-submit {
    justify-self: start; min-height: 46px; min-width: 170px; padding: 0 28px; background: #EDEDED; color: #111111; border: 0; cursor: pointer;
    font: 700 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em;
  }
  .ent-submit:hover { background: #FFFFFF; }
  .ent-submit:focus-visible, .sch-btn:focus-visible { outline: 2px solid #F0485D; outline-offset: 3px; }

  .sched { background: linear-gradient(180deg, #C02838 0%, #8E1A28 100%); color: #FFFFFF; padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px); }
  .sched[hidden] { display: none; }
  .sched { scroll-margin-top: 0; }
  #cal-title { scroll-margin-top: 32px; }
  .sched h2 { margin: 0 0 clamp(28px, 4vw, 44px); text-align: center; font: 700 clamp(15px, 1.65vw, 18.5px)/1.2 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; }
  .sch-panel { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); border: 1px solid rgba(255, 255, 255, 0.28); }
  @media (max-width: 900px) { .sch-panel { grid-template-columns: minmax(0, 1fr); } }
  .sch-col { padding: 28px; border-right: 1px solid rgba(255, 255, 255, 0.2); min-width: 0; }
  .sch-col:last-child { border-right: 0; }
  @media (max-width: 900px) { .sch-col { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .sch-col:last-child { border-bottom: 0; } }
  .sch-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; font: 700 14.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; }
  .sch-brand svg { width: 12px; height: auto; }
  .sch-meta { display: grid; gap: 14px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
  .sch-meta div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
  .sch-meta svg { width: 16px; height: 16px; margin-top: 2px; }
  .sch-h3 { margin: 0 0 22px; font: 700 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; }
  .sch-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font: 700 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 112%; letter-spacing: 0.12em; }
  .sch-month button { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: #FFFFFF; cursor: pointer; }
  .sch-month button:disabled { opacity: 0.3; cursor: default; }
  .sch-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
  .sch-grid .dow { font-size: 10px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.75); padding: 6px 0 10px; }
  .sch-day { aspect-ratio: 1; min-height: 36px; display: grid; place-items: center; border: 1px solid transparent; background: none; color: rgba(255, 255, 255, 0.4); font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace; }
  .sch-day.avail { background: rgba(120, 10, 25, 0.45); color: #FFFFFF; cursor: pointer; }
  .sch-day.avail:hover { border-color: rgba(255, 255, 255, 0.6); }
  .sch-day[aria-pressed="true"] { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
  .sch-tz { margin-top: 26px; }
  .sch-tz label { display: block; margin-bottom: 10px; font: 700 10.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; }
  .sch-tz select { width: 100%; max-width: 320px; min-height: 40px; padding: 0 10px; background: rgba(0, 0, 0, 0.18); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.35); font: 400 12px 'Red Hat Mono', ui-monospace, monospace; }
  .sch-tz option { background: #7A1622; }
  .sch-date-label { margin: 0 0 18px; font-size: 11.5px; color: rgba(255, 255, 255, 0.9); }
  .sch-slots { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
  .sch-slot { min-height: 44px; background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #FFFFFF; cursor: pointer; font: 400 12px/1 'Red Hat Mono', ui-monospace, monospace; }
  .sch-slot:hover { background: rgba(255, 255, 255, 0.08); }
  .sch-slot[aria-pressed="true"] { border: 2px solid #FFFFFF; background: rgba(255, 255, 255, 0.12); }
  .sch-empty { font-size: 12px; color: rgba(255, 255, 255, 0.75); line-height: 1.6; }
  .sch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
  .sch-btn { min-height: 44px; padding: 0 22px; cursor: pointer; font: 700 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; }
  .sch-btn.solid { background: #FFFFFF; color: #C02838; border: 0; }
  .sch-btn.solid:disabled { opacity: 0.45; cursor: not-allowed; }
  .sch-btn.ghost { background: none; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.55); text-decoration: none; display: inline-flex; align-items: center; }
  .sch-btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }
  .sch-done { max-width: 560px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 16px; }
  .sch-done h2 { margin: 8px 0 0; }
  .sch-done p { margin: 0; font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
  .sch-sum { width: 100%; margin-top: 16px; padding: 22px 28px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.04); text-align: left; }
  .sch-sum .sch-meta { font-size: 11.5px; }

  /* ---------- Pricing (#pricing) ---------- */
  .pricing-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.pricing-mode .hero, body.pricing-mode .revenue, body.pricing-mode .chips, body.pricing-mode .regions { display: none; }
  body.pricing-mode .pricing-page { display: block; }
  .pr-wrap { max-width: 980px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 19px clamp(64px, 10vw, 120px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .pr-wrap h1 { margin: 0 0 18px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .pr-intro { margin: 0 0 36px; max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; color: #BDBDBD; }
  .pr-search { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; }
  .pr-icon { position: absolute; left: 13px; top: 15px; width: 14px; height: 14px; color: #7A7A7A; pointer-events: none; }
  #pr-q {
    width: min(440px, 100%); min-height: 44px; padding: 0 14px 0 36px; border: 1px solid #333; border-radius: 3px;
    background: #161616; color: #EDEDED; font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.02em;
  }
  #pr-q::placeholder { color: #6E6E6E; }
  #pr-q:focus { outline: 2px solid #F0485D; outline-offset: 1px; }
  .pr-count { font-size: 10.5px; letter-spacing: 0.1em; color: #8E8E8E; }
  .pr-count button { background: none; border: 0; padding: 4px 2px; color: #F0485D; cursor: pointer; font: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .pr-empty { margin: 0; padding: 22px 0; font-size: 11.5px; letter-spacing: 0.04em; color: #8E8E8E; border-bottom: 1px solid #1F1F1F; }
  .pr-empty[hidden] { display: none; }
  .pr-tbl mark { background: rgba(240, 72, 93, 0.25); color: inherit; padding: 0 1px; border-radius: 2px; }
  .pr-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #2A2A2A; }
  .pr-tabs button {
    min-height: 44px; padding: 0 18px; margin-bottom: -1px; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
    font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: #7A7A7A;
  }
  .pr-tabs button:first-child { padding-left: 0; }
  .pr-tabs button:hover { color: #D6D6D6; }
  .pr-tabs button[aria-selected="true"] { color: #F2F2F2; border-bottom-color: #F0485D; }
  .pr-tabs button:focus-visible { outline: 2px solid #F0485D; outline-offset: -2px; }
  .pr-panel[hidden] { display: none; }
  .pr-tbl { overflow-x: auto; }
  .pr-tbl table { width: 100%; border-collapse: collapse; font-size: 11.5px; letter-spacing: 0.04em; }
  .pr-tbl th { text-align: left; font-weight: 400; font-size: 9.5px; letter-spacing: 0.16em; color: #7A7A7A; padding: 18px 14px 12px; border-bottom: 1px solid #2A2A2A; white-space: nowrap; }
  .pr-tbl td { padding: 16px 14px; border-bottom: 1px solid #1F1F1F; color: #E4E4E4; white-space: nowrap; vertical-align: top; }
  .pr-tbl th:first-child, .pr-tbl td:first-child { padding-left: 0; }
  .pr-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
  .pr-tbl .dim { color: #5E5E5E; }
  .pr-tbl tbody tr:hover td { background: #161616; }
  .m-name { display: block; color: #F2F2F2; }
  .m-org { display: block; margin-top: 4px; font-size: 10px; letter-spacing: 0.12em; color: #7A7A7A; }
  .pr-note { margin: 18px 0 0; font-size: 10.5px; line-height: 1.7; letter-spacing: 0.04em; color: #8E8E8E; max-width: 72ch; }
  .pr-foot { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid #2A2A2A; font-size: 10.5px; line-height: 1.8; letter-spacing: 0.04em; color: #8E8E8E; }
  .pr-foot a { color: #F0485D; text-underline-offset: 3px; }

  /* ---------- Docs page (#docs) ---------- */
  .docs-page { display: none; background: var(--paper); color: var(--paper-ink); }
  body.docs-mode .hero, body.docs-mode .revenue, body.docs-mode .chips,
  body.docs-mode .regions, body.docs-mode .legal { display: none; }
  body.docs-mode .docs-page { display: block; }
  .docs-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
    padding: 20px 24px; background: var(--ground); color: var(--ink);
  }
  .docs-bar a { color: var(--ink); text-decoration: none; }
  .docs-bar .crumb { font-size: 11.5px; letter-spacing: 0.14em; opacity: 0.85; margin-left: 16px; }
  .docs-layout {
    max-width: 1180px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 24px clamp(64px, 8vw, 112px);
    display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start;
  }
  .docs-toc { flex: 1 1 180px; max-width: 220px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); }
  .docs-toc p { margin: 0 0 12px; font-size: 10.5px; letter-spacing: 0.16em; color: var(--paper-muted); }
  .docs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--grid); }
  .docs-toc a {
    display: block; padding: 8px 0 8px 14px; margin-left: -1px; border-left: 1px solid transparent;
    font-size: 11.5px; color: var(--paper-muted); text-decoration: none;
  }
  .docs-toc a:hover { color: var(--paper-ink); }
  .docs-toc a[aria-current="true"] { color: var(--line); border-left-color: var(--line); }
  .docs-body {
    flex: 999 1 560px; min-width: 0; max-width: 760px;
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 100%; font-size: 13.5px; line-height: 1.7;
  }
  .docs-body h1 { font-stretch: 125%; font-weight: 700; font-size: clamp(23px, 3.75vw, 30px); line-height: 1.05; margin: 0 0 16px; }
  .docs-body .lede { font-size: 15px; margin: 0 0 8px; }
  .docs-body section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--grid); scroll-margin-top: 24px; }
  .docs-body h2 { font-stretch: 125%; font-weight: 700; font-size: 18.5px; margin: 0 0 12px; }
  .docs-body h3 { font-stretch: 112%; font-weight: 700; font-size: 13.5px; margin: 28px 0 8px; }
  .docs-body p { margin: 0 0 14px; }
  .docs-body ol.steps { margin: 0 0 16px; padding-left: 22px; }
  .docs-body ol.steps li { margin: 0 0 8px; }
  .docs-body code { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 12.5px; background: color-mix(in srgb, var(--line) 8%, transparent); padding: 1px 5px; border-radius: 3px; }
  .docs-body a { color: var(--line); }
  .inline-btn { font: inherit; color: var(--line); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .codeblock { position: relative; margin: 12px 0 20px; background: #140A0C; border-radius: 6px; border: 1px solid #2E1A1E; }
  .codeblock pre {
    margin: 0; padding: 16px 84px 16px 18px; overflow-x: auto;
    font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11.5px; line-height: 1.65; color: #F3E9EB;
  }
  .codeblock .cb-copy {
    position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border-radius: 4px; cursor: pointer;
    font: 500 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em;
    background: transparent; color: #F3E9EB; border: 1px solid #4A2D33;
  }
  .codeblock .cb-copy:hover { background: #24141A; }
  .lang-tabs { display: flex; gap: 4px; margin: 16px 0 -4px; }
  .lang-tabs button {
    min-height: 36px; padding: 0 14px; border: 1px solid var(--grid); border-bottom: 0; border-radius: 4px 4px 0 0; cursor: pointer;
    font: 500 11.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.1em; background: transparent; color: var(--paper-muted);
  }
  .lang-tabs button[aria-pressed="true"] { background: #140A0C; color: #F3E9EB; border-color: #140A0C; }
  .lang-panel[hidden] { display: none; }
  .lang-panel .codeblock { margin-top: 4px; border-top-left-radius: 0; }
  .tbl { overflow-x: auto; margin: 12px 0 20px; border: 1px solid var(--grid); border-radius: 6px; }
  .tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; }
  .tbl th { text-align: left; font-family: 'Red Hat Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; color: var(--paper-muted); padding: 10px 14px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
  .tbl td { padding: 10px 14px; border-bottom: 1px solid var(--grid); vertical-align: top; }
  .tbl tr:last-child td { border-bottom: 0; }
  .tbl td:first-child { white-space: nowrap; }
  .req { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; color: var(--line); }
  .endpoint { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 12.5px; }
  .endpoint b { font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; background: var(--line); color: #FFFFFF; padding: 4px 8px; border-radius: 3px; }
  @media (max-width: 860px) {
    .docs-toc { position: static; max-width: none; flex-basis: 100%; }
    .docs-toc ol { display: flex; flex-wrap: wrap; border-left: 0; gap: 4px 16px; }
    .docs-toc a { padding: 8px 0; border-left: 0; margin: 0; }
  }

  .docs-search { position: relative; margin-bottom: 28px; }
  .ds-icon { position: absolute; left: 11px; top: 13px; width: 14px; height: 14px; color: var(--paper-muted); pointer-events: none; }
  #docs-q {
    width: 100%; min-height: 40px; padding: 0 12px 0 32px; border: 1px solid var(--grid); border-radius: 4px;
    background: var(--card); color: var(--paper-ink); font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace;
  }
  #docs-q::placeholder { color: var(--paper-muted); }
  #docs-q:focus { outline: 2px solid var(--line); outline-offset: 1px; }
  .ds-results {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 380px); max-width: calc(100vw - 48px);
    max-height: 60vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    background: var(--card); border: 1px solid var(--grid); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
  .ds-opt { display: grid; gap: 4px; padding: 10px 12px; border-radius: 4px; cursor: pointer; }
  .ds-opt[aria-selected="true"] { background: color-mix(in srgb, var(--line) 9%, transparent); }
  .ds-t { font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-size: 12.5px; color: var(--paper-ink); }
  .ds-s { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; color: var(--paper-muted); }
  .ds-results mark { background: color-mix(in srgb, var(--line) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
  .ds-empty { padding: 12px; font-size: 11.5px; color: var(--paper-muted); }
  .docs-body section h2 { transition: color 300ms ease; }
  .docs-body section.hit h2 { color: var(--line); }
  @media (max-width: 860px) { .ds-results { width: 100%; max-width: none; } }

  /* ---------- Legal pages (#tos, #privacy) ---------- */
  .legal { display: none; background: var(--paper); color: var(--paper-ink); }
  body.legal-mode .hero, body.legal-mode .stats, body.legal-mode .revenue,
  body.legal-mode .chips, body.legal-mode .regions { display: none; }
  body.legal-mode .legal { display: block; }
  .legal-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
    padding: 20px 24px; background: var(--ground); color: var(--ink);
  }
  .legal-bar a { color: var(--ink); text-decoration: none; }
  .legal-bar nav { display: flex; gap: 28px; }
  .legal-bar nav a { font-size: 11.5px; letter-spacing: 0.14em; padding: 12px 0; }
  .legal-bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
  .legal article[hidden] { display: none; }
  .doc {
    max-width: 68ch; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 24px clamp(64px, 10vw, 120px);
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 100%;
    font-size: 13.5px; line-height: 1.7;
  }
  .doc .meta { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; color: var(--paper-muted); margin: 0 0 16px; }
  .doc h1 { font-stretch: 125%; font-weight: 700; font-size: clamp(23px, 3.75vw, 30px); line-height: 1.05; margin: 0 0 24px; }
  .doc .lede { font-size: 15px; color: var(--paper-ink); margin: 0 0 40px; }
  .doc h2 { font-stretch: 125%; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--grid); }
  .doc p, .doc li { color: var(--paper-ink); }
  .doc p { margin: 0 0 14px; }
  .doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
  .doc li { margin: 0 0 8px; }
  .doc strong { font-weight: 700; }
  .doc a { color: var(--line); }
  .doc code { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 12.5px; background: color-mix(in srgb, var(--line) 8%, transparent); padding: 1px 5px; border-radius: 3px; }
  .doc blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--line); color: var(--paper-muted); }

  @media (prefers-reduced-motion: reduce) { .node::before { transition: none; } }

  /* =====================================================================
     Consistency layer: one type scale and one dark interior style for
     docs and legal pages, matching research, trust, pricing, dashboard.
     ===================================================================== */
  .docs-page, .legal { background: #111111; color: #D2D2D2; }
  .legal-bar { background: none; color: #EDEDED; padding: 0 19px; border-bottom: 1px solid #262626; justify-content: flex-start; }
  .legal-bar nav { margin-left: 0; display: flex; gap: 28px; }
  .legal-bar nav a { color: #8E8E8E; font-size: 10.5px; letter-spacing: 0.18em; padding: 14px 0; text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: -1px; }
  .legal-bar nav a:hover { color: #EDEDED; }
  .legal-bar nav a[aria-current="page"] { color: #F2F2F2; border-bottom-color: #F0485D; text-decoration: none; }

  /* Docs */
  .docs-layout { max-width: 1240px; padding: clamp(48px, 7vw, 96px) 19px clamp(64px, 10vw, 120px); gap: 56px; }
  .docs-toc p { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.18em; color: #6E6E6E; }
  .docs-toc ol { border-left-color: #262626; }
  .docs-toc a { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: #8E8E8E; padding: 7px 0 7px 14px; }
  .docs-toc a:hover { color: #EDEDED; }
  .docs-toc a[aria-current="true"] { color: #F0485D; border-left-color: #F0485D; }
  .docs-body { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.75; letter-spacing: 0.04em; color: #CFCFCF; max-width: 780px; }
  .docs-body h1 { font-family: inherit; font-stretch: 100%; font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: #F2F2F2; margin: 0 0 18px; }
  .docs-body .lede { font-size: 12px; line-height: 1.7; color: #BDBDBD; max-width: 64ch; }
  .docs-body section { margin-top: 36px; padding-top: 36px; border-top-color: #262626; }
  .docs-body h2 { font-family: inherit; font-stretch: 100%; font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; margin: 0 0 16px; }
  .docs-body h3 { font-family: inherit; font-stretch: 100%; font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #8E8E8E; margin: 28px 0 10px; }
  .docs-body p { margin: 0 0 14px; }
  .docs-body ol.steps li { margin: 0 0 6px; }
  .docs-body a, .inline-btn { color: #F0485D; text-underline-offset: 3px; }
  .docs-body code { font-family: inherit; font-size: 1em; background: #1F1F1F; color: #F2F2F2; padding: 1px 5px; border-radius: 2px; }
  .docs-body .codeblock { background: #0C0C0C; border: 1px solid #262626; border-radius: 3px; }
  .docs-body .codeblock pre { font-size: 11.5px; line-height: 1.7; color: #E0E0E0; padding: 16px 84px 16px 18px; }
  .docs-body .codeblock pre code { background: none; padding: 0; color: inherit; }
  .docs-body .codeblock .cb-copy { border-color: #333; color: #CFCFCF; font-size: 9.5px; letter-spacing: 0.16em; }
  .docs-body .codeblock .cb-copy:hover { background: #1A1A1A; border-color: #F0485D; }
  .lang-tabs { margin: 16px 0 0; gap: 0; border-bottom: 1px solid #262626; }
  .lang-tabs button { min-height: 40px; padding: 0 16px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; margin-bottom: -1px; background: none; color: #7A7A7A; font-size: 10px; letter-spacing: 0.18em; }
  .lang-tabs button:first-child { padding-left: 0; }
  .lang-tabs button:hover { color: #D6D6D6; }
  .lang-tabs button[aria-pressed="true"] { background: none; color: #F2F2F2; border-color: transparent; border-bottom-color: #F0485D; }
  .lang-panel .codeblock { margin-top: 12px; border-top-left-radius: 3px; }
  .docs-body .tbl { border-color: #262626; border-radius: 3px; }
  .docs-body .tbl table { font-size: 11.5px; }
  .docs-body .tbl th { font-size: 9.5px; letter-spacing: 0.16em; color: #7A7A7A; border-bottom-color: #262626; font-weight: 400; }
  .docs-body .tbl td { color: #E0E0E0; border-bottom-color: #1E1E1E; }
  .docs-body .req { color: #F0485D; font-size: 9.5px; }
  .docs-body .endpoint { font-size: 12px; color: #F2F2F2; }
  .docs-body .endpoint b { background: #F0485D; color: #140A0C; font-size: 9.5px; }
  .docs-body section.hit h2 { color: #F0485D; }
  .ds-icon { color: #6E6E6E; }
  #docs-q { background: #161616; border-color: #333; color: #EDEDED; font-size: 11.5px; border-radius: 3px; }
  #docs-q::placeholder { color: #6E6E6E; }
  #docs-q:focus { outline-color: #F0485D; }
  .ds-results { background: #161616; border-color: #333; border-radius: 3px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
  .ds-opt[aria-selected="true"] { background: #221316; }
  .ds-t { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.04em; color: #F2F2F2; }
  .ds-s { font-size: 10.5px; color: #8E8E8E; }
  .ds-results mark { background: rgba(240, 72, 93, 0.25); }
  .ds-empty { color: #8E8E8E; }

  /* Legal */
  .doc { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.75; letter-spacing: 0.04em; max-width: 780px; padding: clamp(48px, 7vw, 96px) 19px clamp(64px, 10vw, 120px); }
  .doc .meta { font-size: 10.5px; letter-spacing: 0.18em; color: #F0485D; margin: 0 0 18px; }
  .doc h1 { font-family: inherit; font-stretch: 100%; font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: #F2F2F2; margin: 0 0 18px; }
  .doc .lede { font-size: 12px; line-height: 1.7; color: #BDBDBD; margin: 0 0 36px; }
  .doc h2 { font-family: inherit; font-stretch: 100%; font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; margin: 36px 0 14px; padding-top: 24px; border-top-color: #262626; }
  .doc p, .doc li { color: #CFCFCF; }
  .doc strong { color: #FFFFFF; font-weight: 500; }
  .doc a { color: #F0485D; text-underline-offset: 3px; }
  .doc code { background: #1F1F1F; color: #F2F2F2; font-size: 1em; }
  .doc blockquote { border-left: 1px solid #F0485D; color: #BDBDBD; }

  /* Homepage cards and captions on the same scale */
  .detail { border-radius: 3px; }
  .detail h3 { font-stretch: 125%; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }
  .detail p { font-size: 12px; line-height: 1.7; letter-spacing: 0.03em; }
  .detail .when, .detail .amt { font-size: 10.5px; }
  .chip strong { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; }
  .chip .spec { font-size: 11px; }
  .chip .vendor { font-size: 10px; }
  .reg-copy h2 { font-size: 13.5px; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; }
  .reg-copy p { font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; }
  .comp h3 { font-size: 13.5px; }
  .db-kpi b { font-size: clamp(17px, 1.65vw, 18.5px); }

  /* =====================================================================
     Section blending: each section fades into the next instead of a hard edge.
     ===================================================================== */
  .hero { background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 160px), var(--paper) 100%); }
  .hero main { padding-top: 56px; padding-bottom: 150px; }
  .hero { position: relative; }
  .scroll-cue {
    position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
    display: grid; justify-items: center; gap: 10px; padding: 8px 14px;
    background: none; border: 0; color: var(--ink); cursor: pointer; transition: opacity 400ms ease;
    font: 500 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.32em; text-indent: 0.32em;
  }
  .scroll-cue svg { width: 14px; height: 22px; overflow: visible; animation: cuefade 0.9s ease-in-out infinite; }
  @keyframes cuefade { 0% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
  .scroll-cue path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .scroll-cue .cue-rail { opacity: 0.3; }
  .scroll-cue .cue-drip { stroke-dasharray: 6 24; animation: cuedrip 0.9s cubic-bezier(.5,0,.6,1) infinite; }
  .scroll-cue .cue-head { animation: cuebob 0.9s ease-in-out infinite; }
  .scroll-cue:hover { color: #FFFFFF; }
  .scroll-cue.gone { opacity: 0; pointer-events: none; }
  @keyframes cuedrip { from { stroke-dashoffset: 6; } to { stroke-dashoffset: -16; } }
  @keyframes cuebob { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(3px); } }
  @media (prefers-reduced-motion: reduce) { .scroll-cue svg, .scroll-cue .cue-drip, .scroll-cue .cue-head { animation: none; } .scroll-cue .cue-drip { stroke-dasharray: none; } }
  @media (max-height: 640px) { .scroll-cue { display: none; } }
  @media (max-height: 860px) { .scroll-cue { bottom: 36px; } }
  .revenue { background: var(--paper); }
  .chips {
    border-top: 0;
    padding-bottom: clamp(160px, 18vw, 240px);
    background: linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(100% - 260px), #111111 100%);
  }
  .foot {
    --foot-bg: #0B0B0B; --foot-ink: #EDEDED; --foot-muted: #9A9A9A;
    background: linear-gradient(to bottom, #111111 0, var(--foot-bg) 160px);
    padding-top: 120px;
  }
  .sched { background: linear-gradient(180deg, #111111 0, #C02838 140px, #8E1A28 calc(100% - 160px), #111111 100%); padding-top: clamp(96px, 10vw, 140px); padding-bottom: clamp(120px, 12vw, 180px); }

  /* ---------- Chip sketches: continuous motion after draw-in ---------- */
  .chips.live .chip .lead { animation: leadmarch 3s linear infinite; }
  @keyframes leadmarch { to { stroke-dashoffset: -8; } }
  .chips.live .chip .flow { stroke-dasharray: 0.05 0.035 !important; animation: flowmarch 1.8s linear infinite; }
  @keyframes flowmarch { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -0.17; } }
  .chips.live .chip .pulse { animation: hatchpulse 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes hatchpulse { 0%, 100% { opacity: 0.2; } 45% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .chips.live .chip .lead, .chips.live .chip .flow, .chips.live .chip .pulse { animation: none; } }

  /* ---------- Performance (homepage) ---------- */
  .perf { background: #111111; color: #EDEDED; padding: clamp(40px, 6vw, 72px) clamp(16px, 2.5vw, 44px) clamp(24px, 4vw, 48px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .perf-wrap { max-width: 1360px; margin: 0 auto; }
  .perf h2 { margin: 0 0 14px; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; }
  .perf-intro { margin: 0 0 clamp(24px, 4vw, 36px); max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: #A8A8A8; }
  .perf .db-kpis { margin-bottom: 24px; }
  .race { border: 1px solid #262626; padding: 18px 20px 6px; }
  .race-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; font-size: 10px; letter-spacing: 0.16em; color: #7A7A7A; }
  .race-head b { font-weight: 500; color: #F0485D; font-variant-numeric: tabular-nums; }
  .race-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(220px, 290px); gap: 12px 24px; align-items: center; padding: 14px 0; border-top: 1px solid #1E1E1E; }
  .race-name span { display: block; font-size: 12px; color: #F2F2F2; }
  .race-name small { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: 0.14em; color: #7A7A7A; }
  .track { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; }
  .track i { display: block; height: 12px; background: #1C1C1C; }
  .track i.on { background: #CFCFCF; }
  .track i.head { background: #F0485D; }
  .track i.wait { background: #4A2D33; animation: waitblink 0.5s steps(2, start) infinite; }
  @keyframes waitblink { to { background: #1C1C1C; } }
  .race-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; text-align: right; }
  .race-stats div { display: grid; gap: 4px; }
  .race-stats span { font-size: 9.5px; letter-spacing: 0.14em; color: #6E6E6E; }
  .race-stats b { font-weight: 400; font-size: 11.5px; color: #E0E0E0; font-variant-numeric: tabular-nums; }
  .race-stats b.live { color: #F0485D; }
  .race-foot { margin: 0; padding: 12px 0 10px; border-top: 1px solid #1E1E1E; font-size: 10.5px; line-height: 1.6; color: #6E6E6E; letter-spacing: 0.04em; }
  .race-ctl { float: right; min-height: 30px; padding: 0 10px; margin-left: 12px; background: none; border: 1px solid #333; color: #CFCFCF; cursor: pointer; font: 500 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; }
  .race-ctl:hover { border-color: #F0485D; }
  @media (max-width: 860px) { .race-row { grid-template-columns: minmax(0, 1fr); } .race-stats { text-align: left; } }
  @media (prefers-reduced-motion: reduce) { .track i.wait { animation: none; } }

  /* ---------- Region status lights ---------- */
  .sl { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #555; }
  .sl.ok { background: #3FB950; box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.15); }
  .sl.degraded { background: #D29922; box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.18); }
  .sl.outage { background: #F85149; box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.18); }
  .sl.soon { background: transparent; border: 1px solid #5A5A5A; }
  .reg-col li { align-items: center; }
  .reg-col li .rl-name { display: inline-flex; align-items: center; gap: 10px; }
  .reg-col li.soon .rl-name { color: #6E6E6E; }
  .reg-col li.soon code { color: #6E6E6E; font-size: 9.5px; letter-spacing: 0.14em; }
  .reg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin-top: 14px; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; color: #7A7A7A; }
  .reg-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .reg-legend span { display: inline-flex; align-items: center; gap: 8px; }
  .reg-foot a { color: #F0485D; text-decoration: none; padding: 8px 0; }
  .reg-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .marker.soon i { background: #E6E6E6; }
  .marker.soon i::after { border-color: #E6E6E6; }
  .marker.soon span { color: #CFCFCF; }
  .marker.degraded i { background: #D29922; }
  .marker.degraded i::after { border-color: #D29922; }
  .marker.degraded span { color: #E3B341; }
  .marker.outage i { background: #F85149; }
  .marker.outage i::after { border-color: #F85149; }
  .foot-right .foot-status { display: inline-flex; align-items: center; gap: 8px; margin-right: 20px; }

  /* ---------- Status page (#status) ---------- */
  .status-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.status-mode .hero, body.status-mode .revenue, body.status-mode .chips, body.status-mode .perf, body.status-mode .regions { display: none; }
  body.status-mode .status-page { display: block; }
  .st-wrap { max-width: 1100px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 19px clamp(64px, 10vw, 120px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .st-wrap h1 { margin: 0 0 18px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .st-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 20px; margin: 24px 0 48px; border: 1px solid #262626; border-left: 3px solid #D29922; background: #151515; }
  .st-banner.ok { border-left-color: #3FB950; }
  .st-banner b { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 11.5px; letter-spacing: 0.12em; color: #F2F2F2; }
  .st-banner small { font-size: 10.5px; letter-spacing: 0.1em; color: #7A7A7A; }
  .st-sec { margin-bottom: 48px; }
  .st-sec > h2 { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 12px; font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; color: #9A9A9A; }
  .st-sec > h2 span { font-weight: 400; color: #6E6E6E; letter-spacing: 0.12em; }
  .st-list { border: 1px solid #262626; }
  .st-row { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) 90px; gap: 10px 20px; align-items: center; padding: 14px 16px; border-top: 1px solid #1E1E1E; }
  .st-row:first-child { border-top: 0; }
  .st-name { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #F2F2F2; }
  .st-name small { display: block; margin-top: 3px; font-size: 10px; color: #7A7A7A; letter-spacing: 0.06em; }
  .st-bars { display: flex; gap: 2px; height: 24px; }
  .st-bars i { flex: 1; border-radius: 1px; background: #3FB950; opacity: 0.85; }
  .st-bars i.d { background: #D29922; }
  .st-bars i.o { background: #F85149; }
  .st-bars i.n { background: #262626; }
  .st-up { text-align: right; font-size: 11.5px; color: #E0E0E0; font-variant-numeric: tabular-nums; }
  .st-up small { display: block; font-size: 9.5px; color: #6E6E6E; letter-spacing: 0.1em; }
  .st-state { font-size: 10px; letter-spacing: 0.14em; }
  .st-state.ok { color: #3FB950; } .st-state.degraded { color: #D29922; } .st-state.outage { color: #F85149; } .st-state.soon { color: #6E6E6E; }
  .st-row.soon .st-name { color: #6E6E6E; }
  .st-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 9.5px; letter-spacing: 0.12em; color: #5E5E5E; }
  .st-inc { border-top: 1px solid #262626; padding: 18px 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 24px; }
  .st-inc time { font-size: 10.5px; letter-spacing: 0.12em; color: #7A7A7A; }
  .st-inc h3 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 500; font-size: 11.5px; color: #F2F2F2; }
  .st-inc p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.7; color: #BDBDBD; letter-spacing: 0.03em; }
  .st-tag { font-size: 9.5px; letter-spacing: 0.16em; padding: 3px 7px; border: 1px solid #333; color: #9A9A9A; }
  .st-tag.live { color: #D29922; border-color: #5A4515; }
  .st-note { font-size: 10.5px; line-height: 1.7; color: #6E6E6E; letter-spacing: 0.04em; }
  @media (max-width: 760px) {
    .st-row { grid-template-columns: minmax(0, 1fr) 80px; }
    .st-bars { grid-column: 1 / -1; order: 3; }
    .st-bars i:nth-child(-n+60) { display: none; }
    .st-inc { grid-template-columns: minmax(0, 1fr); }
  }
  :root { background: #0B0B0B linear-gradient(var(--ground), var(--ground)) no-repeat top / 100% 50%; }
  body.legal-mode, body.docs-mode, body.research-mode, body.pricing-mode, body.security-mode, body.dash-mode, body.ent-mode, body.status-mode { background: #111111; }

  /* ---------- Map markers as buttons with tooltips ---------- */
  #markers .marker { width: 28px; height: 28px; transform: translate(-14px, -14px); display: grid; place-items: center; gap: 0; padding: 0; background: none; border: 0; cursor: pointer; pointer-events: auto; }
  #markers .marker:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 0; border-radius: 50%; }
  #markers .marker:hover i { transform: scale(1.35); }
  #markers .marker i { transition: transform 150ms ease; }
  .map-tip {
    position: absolute; z-index: 5; min-width: 200px; max-width: 260px; padding: 12px 14px; pointer-events: none;
    background: #0B0B0B; border: 1px solid #333; border-radius: 3px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    font-family: 'Red Hat Mono', ui-monospace, monospace; color: #EDEDED; display: grid; gap: 6px;
    transform: translate(-50%, calc(-100% - 18px));
  }
  .map-tip[hidden] { display: none; }
  .map-tip.below { transform: translate(-50%, 18px); }
  .map-tip b { font-weight: 500; font-size: 12px; letter-spacing: 0.04em; }
  .map-tip .tt-loc { font-size: 10.5px; color: #9A9A9A; }
  .map-tip .tt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: 0.12em; }
  .map-tip .tt-st { display: inline-flex; align-items: center; gap: 8px; }
  .map-tip code { font-family: inherit; color: #7A7A7A; font-size: 10px; }
  .jur { display: inline-block; padding: 2px 6px; border: 1px solid #3A3A3A; border-radius: 2px; font-size: 9.5px; letter-spacing: 0.14em; color: #BDBDBD; font-weight: 400; }

  /* Region list rows: name + id, then location and jurisdiction */
  .reg-col li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; }
  .reg-col li .rl-meta { grid-column: 1 / -1; padding-left: 18px; display: flex; align-items: center; gap: 10px; font-size: 10px; color: #7A7A7A; letter-spacing: 0.04em; }
  .reg-col li.soon .rl-meta { color: #555; }
  .reg-col li.soon .jur { color: #6E6E6E; border-color: #2A2A2A; }

  /* Status lights that breathe: faster when something is wrong */
  .sl.live.ok { animation: slbreathe 2.6s ease-in-out infinite; }
  .sl.live.degraded { animation: slbreathe 1.3s ease-in-out infinite; }
  .sl.live.outage { animation: slbreathe 0.7s ease-in-out infinite; }
  @keyframes slbreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .st-banner.outage { border-left-color: #F85149; }
  .st-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -24px 0 40px; font-size: 10px; letter-spacing: 0.16em; color: #8E8E8E; }
  .st-filter select {
    min-height: 40px; min-width: 260px; padding: 0 36px 0 12px; background: #161616; color: #EDEDED; border: 1px solid #333; border-radius: 2px;
    font: 400 11.5px 'Red Hat Mono', ui-monospace, monospace; appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23BDBDBD' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
  }
  .st-filter select:focus { outline: 2px solid #F0485D; outline-offset: 1px; }
  .st-filter option, .st-filter optgroup { background: #1A1A1A; color: #EDEDED; }
  @media (prefers-reduced-motion: reduce) { .sl.live { animation: none !important; } }

  .perf-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #262626; margin: 0 0 16px; }
  .perf-tabs button { min-height: 44px; padding: 0 18px; margin-bottom: -1px; background: none; border: 0; border-bottom: 1px solid transparent; color: #7A7A7A; cursor: pointer; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }
  .perf-tabs button:first-child { padding-left: 0; }
  .perf-tabs button:hover { color: #D6D6D6; }
  .perf-tabs button[aria-selected="true"] { color: #F2F2F2; border-bottom-color: #F0485D; }
  .race[hidden] { display: none; }
  .btrack { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); grid-auto-rows: 4px; gap: 2px; }
  .btrack i { display: block; background: #1C1C1C; }
  .btrack i.on { background: #CFCFCF; }
  .btrack i.head { background: #F0485D; }
  .ctr-num.soon .px { fill: var(--paper-muted); opacity: 0.4; }
  .ctr-soon { margin-top: 12px; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: var(--paper-muted); }
  .pr-soon { margin: 0; padding: 28px 0; border-bottom: 1px solid #1F1F1F; font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: #BDBDBD; }
  .pr-soon b { color: #F0485D; font-weight: 500; letter-spacing: 0.16em; font-size: 10.5px; display: block; margin-bottom: 6px; }
  body.legal-mode .perf, body.docs-mode .perf, body.research-mode .perf, body.pricing-mode .perf, body.security-mode .perf, body.dash-mode .perf, body.ent-mode .perf, body.status-mode .perf { display: none; }

  /* Timeline detail: plain text, no box */
  .detail { margin: 18px 0 0 8px; padding: 0; background: none; border: 0; border-radius: 0; max-width: 64ch; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 96px; }
  .detail .when { color: var(--line); letter-spacing: 0.16em; }


  /* Where am I: '>' marks the current page in inner-page navs; HOME link on the left */
  .r-nav a[aria-current="page"]::before { content: ""; }
  .r-home { margin-left: clamp(16px, 2.5vw, 32px); padding: 12px 0; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: #9A9A9A; text-decoration: none; }
  .r-home:hover { color: #FFFFFF; }
  .r-bar .r-home + .r-nav, .r-bar .r-home ~ .r-nav { margin-left: auto; }

  /* Page transitions */
  .route-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; background: #F0485D; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; margin-top: env(safe-area-inset-top, 0px); }
  .route-bar.go { animation: routebar 325ms cubic-bezier(.3,.7,.2,1) both; }
  @keyframes routebar { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
  ::view-transition-old(root) { animation: vtout 110ms ease both; }
  ::view-transition-new(root) { animation: vtin 180ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes vtout { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vtin { from { opacity: 0; transform: translateY(10px); } }
  body.page-in > *:not(dialog):not(.route-bar) { animation: vtin 180ms cubic-bezier(.2,.7,.2,1) both; }
  @media (prefers-reduced-motion: reduce) { .route-bar { display: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

  /* Live regions glow green on the map */

  /* Tighter rhythm between homepage sections */
  .revenue { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 40px); }
  .intro { margin-bottom: clamp(20px, 3vw, 32px); }
  .counters { margin-bottom: clamp(28px, 4vw, 44px); }
  .detail { min-height: 0; }
  .chips { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(96px, 10vw, 140px); background: linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(100% - 150px), #111111 100%); }
  .chips .intro { margin-bottom: clamp(20px, 3vw, 32px); }
  .perf { padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(16px, 2vw, 24px); }
  .regions { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); }
  .reg-copy { margin-bottom: clamp(16px, 2.5vw, 28px); }
  .foot { padding-top: 72px; }

  /* Enterprise: logo marquees */
  .mq-wrap { display: grid; gap: 6px; margin: -16px 0 24px; padding: 18px 0 8px; border-top: 1px solid #1E1E1E; }
  .mq { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 64px; }
  .mq-label { font: 500 10px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: #BDBDBD; }
  .mq-view { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .mq-track { display: flex; flex: none; align-items: center; gap: clamp(40px, 6vw, 88px); margin: 0; padding: 0 clamp(20px, 3vw, 44px); list-style: none; animation: mqscroll var(--dur, 40s) linear infinite; }
  .mq-track.rev { animation-direction: reverse; }
  .mq-view:hover .mq-track { animation-play-state: paused; }
  .mq-track li { flex: none; white-space: nowrap; font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-size: clamp(14.5px, 1.35vw, 18.5px); letter-spacing: -0.01em; color: #6E6E6E; transition: color 200ms ease; }
  .mq-track li:hover { color: #E6E6E6; }
  .mq-track li.ph { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.16em; color: #555; border: 1px dashed #333; padding: 10px 14px; }
  @keyframes mqscroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
  @media (max-width: 640px) { .mq { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
  @media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .mq-track[aria-hidden] { display: none; } .mq-view { overflow-x: auto; } }

  /* Timeline caption: a log-style line, distinct from section headings */
  .detail {
    margin: 14px 0 0 8px; padding: 2px 0 2px 16px; border-left: 1px solid var(--line);
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: baseline; max-width: 72ch;
  }
  .detail .when { grid-row: 1 / span 2; font: 400 10.5px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em; color: var(--line); white-space: nowrap; }
  .detail h3 { margin: 0; font-family: 'Red Hat Mono', ui-monospace, monospace; font-stretch: 100%; font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; text-transform: none; line-height: 1.6; color: var(--paper-ink); }
  .detail p { margin: 0; font-size: 11.5px; line-height: 1.65; letter-spacing: 0.02em; color: var(--paper-muted); }
  @media (max-width: 560px) { .detail { grid-template-columns: minmax(0, 1fr); } .detail .when { grid-row: auto; } }

  /* Enterprise: platforms + customers grid */
  .pt-sec { padding-top: 36px; border-top: 1px solid #262626; margin-bottom: clamp(48px, 7vw, 80px); }
  .pt-sec h2 { margin: 0 0 20px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .pt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  @media (max-width: 860px) { .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pt { position: relative; background: #111111; min-height: 120px; display: grid; place-items: center; padding: 28px 16px 20px; transition: background 200ms ease; }
  .pt:hover { background: #151515; }
  .pt-tag { position: absolute; top: 12px; left: 14px; font: 400 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: #5E5E5E; }
  .pt-name { font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-size: clamp(14.5px, 1.27vw, 17.5px); letter-spacing: -0.01em; color: #8A8A8A; text-align: center; transition: color 200ms ease; }
  .pt:hover .pt-name { color: #EDEDED; }
  .pt.ph .pt-name { font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: #4A4A4A; border: 1px dashed #2E2E2E; padding: 10px 14px; }

  /* Homepage is dark in every color scheme */
  :root { --paper: #1A0E10; --paper-ink: #F6ECEE; --paper-muted: #B79CA1; --grid: #352024; --axis: #D9C3C7; --line: #F0485D; --card: #241417; --card-edge: #3E262B; color-scheme: dark; }

  /* Zero data retention on the homepage */
  .home-zdr { background: var(--paper); color: #EDEDED; padding: clamp(32px, 4vw, 56px) clamp(16px, 2.5vw, 44px) clamp(24px, 3vw, 40px); font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .home-zdr-wrap { max-width: 1200px; margin: 0 auto; }
  .home-zdr .zdr { border-top: 0; padding-top: 0; }
  .home-zdr .zdr h2 { font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; color: #F2F2F2; margin-bottom: 14px; }
  .home-zdr .zdr-copy p { color: var(--paper-muted); }
  body[class*="-mode"] .home-zdr { display: none; }

  /* Tokens section now sits on the dark stretch above Global Capacity */
  .revenue { background: #111111; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(16px, 2vw, 24px); }

  /* Research list: same page structure as Trust, Pricing and Enterprise */
  .r-head { display: block; max-width: 1100px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 19px 0; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .r-head h1 { margin: 0 0 18px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .r-head p { margin: 0; max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; color: #BDBDBD; }
  body.reading .r-head { display: none; }
  .r-list { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 4vw, 44px) 19px clamp(64px, 10vw, 120px); }
  .r-item { position: relative; padding: 20px 0; min-height: 0; border-top: 1px solid #1F1F1F; }
  .r-item:last-child { border-bottom: 1px solid #1F1F1F; }
  .r-num { width: 36px; font-size: 10.5px; color: #5E5E5E; transition: color 200ms ease; }
  .r-title { font-family: 'Red Hat Mono', ui-monospace, monospace; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; color: #E6E6E6; text-decoration: none; transition: color 200ms ease; }
  .r-rule { background: #262626; transition: background 250ms ease; }
  .r-tag { transition: color 200ms ease, border-color 200ms ease; }
  .r-date { font-size: 10.5px; letter-spacing: 0.12em; color: #7A7A7A; transition: color 200ms ease, transform 250ms ease; }
  .r-item::after { content: none; flex: none; margin-left: 14px; font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace; color: #F0485D; opacity: 0; transform: translateX(-6px); transition: opacity 200ms ease, transform 250ms ease; }
  .r-item:hover .r-title, .r-item:focus-visible .r-title, .r-item:hover .r-num, .r-item:hover .r-date { color: #F0485D; text-decoration: none; }
  .r-item:hover .r-rule, .r-item:focus-visible .r-rule { background: #F0485D; }
  .r-item:hover .r-tag { color: #F0485D; border-color: #6A2A33; }
  .r-item:hover::after, .r-item:focus-visible::after { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .r-item::after, .r-rule, .r-title { transition: none; } }

  /* Region labels on the map */
  #markers .marker { overflow: visible; }
  #markers .marker .mk-label {
    position: absolute; top: 50%; left: 24px; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
    font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.08em; padding: 3px 5px; background: rgba(17, 17, 17, 0.72);
  }
  #markers .marker.lbl-left .mk-label { left: auto; right: 24px; }
  #markers .marker.ok .mk-label { color: #FF7A8A; }
  #markers .marker.soon .mk-label { color: #CFCFCF; }
  #markers .marker.degraded .mk-label { color: #E3B341; }
  #markers .marker.outage .mk-label { color: #FF8A80; }
  @media (max-width: 760px) { #markers .marker .mk-label { display: none; } }

  /* Compliance now lives on the enterprise page */
  .ent-wrap .comp-sec { margin-top: 0; margin-bottom: clamp(48px, 7vw, 80px); scroll-margin-top: 24px; }

  /* Enterprise content lives under pricing */
  .pricing-page .pr-wrap { max-width: 1240px; padding-bottom: clamp(32px, 4vw, 48px); }
  .ent-in-pricing { padding-top: 0; }
  .ent-in-pricing .comp-sec { margin-top: 0; }

  /* Latency arcs */
  .map-stage { position: relative; }
  .lat-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
  #markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  #markers .marker { pointer-events: auto; }
  .lat-line { fill: none; stroke: rgba(230, 230, 230, 0.22); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; transition: stroke 200ms ease, stroke-width 200ms ease; }
  .lat-edge.live .lat-line { stroke: rgba(240, 72, 93, 0.5); stroke-dasharray: none; }
  .lat-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; vector-effect: non-scaling-stroke; }
  .lat-dot { fill: #E6E6E6; }
  .lat-edge.live .lat-dot { fill: #F0485D; }
  .lat-edge.hot .lat-line { stroke: #FFFFFF; stroke-width: 2; stroke-dasharray: none; }
  .lat-edge.live.hot .lat-line { stroke: #FF7A8A; }
  .map-tip { z-index: 6; }
  @media (max-width: 760px) { .lat-dot { display: none; } }
  .ent-wrap .pt-sec { margin-bottom: 12px; }
  .ent-wrap .pt-sec + .comp-sec { border-top: 0; padding-top: 0; }

  .ent-in-pricing { scroll-margin-top: 16px; }
  .ent-head { padding-top: 36px; border-top: 1px solid #262626; margin-bottom: 28px; }
  .ent-head h2 { margin: 0 0 14px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: #F2F2F2; }
  .ent-head p { margin: 0; max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: #BDBDBD; }
  .ent-head + .pt-sec { border-top: 0; padding-top: 0; }
  .ent-head + .pt-sec h2 { font-size: 10px; color: #8E8E8E; }
  .pt-lede { margin: -6px 0 18px; max-width: 72ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.03em; color: #BDBDBD; }
  .ent-in-pricing .pt-sec + .comp-sec { margin-top: clamp(40px, 5vw, 56px); }
  .ent-in-pricing .comp-sec > h2 { margin: 0 0 20px; font-weight: 500; font-size: 10px; letter-spacing: 0.2em; color: #8E8E8E; }

  /* =====================================================================
     Homepage: four pillars, one column width, one heading style
     ===================================================================== */
  .hero { background: linear-gradient(to bottom, var(--ground) 0, var(--ground) calc(100% - 160px), #111111 100%); }
  .pillars, .home-zdr, .perf, .revenue, .regions, .anymodel, .chips { background: #111111; padding-left: clamp(16px, 2.5vw, 44px); padding-right: clamp(16px, 2.5vw, 44px); }
  .pl-wrap, .home-zdr-wrap, .perf-wrap, .revenue .wrap, .chips .wrap, .map-wrap, .am-wrap { max-width: 1200px; margin-left: auto; margin-right: auto; }
  .intro h2, .perf h2, .home-zdr .zdr h2, .reg-copy h2, .anymodel h2 {
    margin: 0 0 14px; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2;
  }
  .kicker { margin: 0 0 10px; font: 500 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #F0485D; }
  .home-zdr { padding-top: clamp(40px, 5vw, 64px); }
  .perf { padding-top: clamp(40px, 5vw, 64px); }
  .chips { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }

  .pillars { padding-top: 8px; padding-bottom: clamp(8px, 2vw, 16px); }
  .pl-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  @media (max-width: 860px) { .pl-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pl { display: grid; gap: 8px; align-content: start; text-align: left; padding: 20px 20px 22px; background: #111111; border: 0; cursor: pointer; color: #EDEDED; font-family: 'Red Hat Mono', ui-monospace, monospace; transition: background 200ms ease; }
  .pl:hover { background: #171012; }
  .pl:focus-visible { outline: 2px solid #F0485D; outline-offset: -2px; }
  .pl-n { font-size: 10px; letter-spacing: 0.2em; color: #F0485D; }
  .pl b { font: 700 11.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; }
  .pl-t { font-size: 11.5px; line-height: 1.6; letter-spacing: 0.03em; color: #9A9A9A; }
  .pl:hover b { color: #FF7A8A; }

  .anymodel { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); color: #EDEDED; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .am-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  @media (max-width: 960px) { .am-wrap { grid-template-columns: minmax(0, 1fr); } }
  .am-copy p { margin: 0 0 16px; font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: #B79CA1; }
  .am-copy p.kicker { color: #F0485D; margin-bottom: 10px; }
  .am-tags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .am-tags li { font-size: 9.5px; letter-spacing: 0.16em; padding: 6px 9px; border: 1px solid #333; color: #CFCFCF; }
  .am-tags li.hl { border-color: #6A2A33; color: #FF7A8A; }
  .ab { border: 1px solid #262626; background: #0C0C0C; padding: 18px; display: grid; gap: 12px; }
  .ab-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 10px; letter-spacing: 0.16em; color: #8E8E8E; }
  .ab-head #ab-phase { color: #F2F2F2; }
  .ab-head b { font-weight: 500; color: #F0485D; font-variant-numeric: tabular-nums; }
  #ab-svg { width: 100%; height: auto; display: block; }
  #ab-svg text { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; paint-order: stroke; stroke: #0C0C0C; stroke-width: 4px; stroke-linejoin: round; }
  .ab-cap { margin: 0; padding-top: 12px; border-top: 1px solid #1E1E1E; font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; color: #CFCFCF; min-height: 3.2em; }

  body[class*="-mode"] .pillars, body[class*="-mode"] .anymodel { display: none; }
  .zdr-copy p.kicker, .home-zdr p.kicker { color: #F0485D; margin-bottom: 10px; }
  .chips .chip { background: #111111; }
  .chips .chip-grid { background: #262626; border-color: #262626; }
  .timeline .tick.first { transform: none; align-items: flex-start; }
  /* Multisilicon engines reads as part of 03 / Performance */
  .perf + svg + .chips { padding-top: clamp(16px, 2vw, 28px); }

  /* Multisilicon engines as a tab in the performance panel */
  .chips-panel .chips { padding: 6px 0 10px; background: none; }
  .chips-panel .chip-grid { margin: 0; }
  .chips-panel .chip { padding: 18px 16px; }
  .chips-panel .chip svg { max-height: 190px; }
  .reg-copy p.kicker, .perf p.kicker, .anymodel p.kicker { color: #F0485D; }

  /* Smaller map nodes */
  #markers .marker { width: 22px; height: 22px; transform: translate(-11px, -11px); }
  #markers .marker i { width: 6px; height: 6px; }
  #markers .marker i::after { inset: -3px; border-width: 1px; }
  #markers .marker:hover i { transform: scale(1.5); }
  @keyframes ping { 0% { transform: scale(0.7); opacity: 0.85; } 100% { transform: scale(2); opacity: 0; } }
  #markers .marker .mk-label { left: 16px; font-size: 10px; }
  #markers .marker.lbl-left .mk-label { right: 16px; }

  /* Nav centered on the page, in line with the centered logo */
  @media (min-width: 620px) {
    .hero header { position: relative; }
    .hero header nav[aria-label="Primary"] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: max-content; }
  }
  @media (min-width: 820px) {
    .r-bar { position: relative; }
    .r-bar .r-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: max-content; }
    .r-bar .login { margin-left: auto; }
  }

  /* =====================================================================
     Every page: same top bar, same column, same headings as the homepage
     ===================================================================== */
  .r-bar { padding: 20px 24px; }
  .r-bar .wordmark { color: #F6F2EF; font-size: 15px; letter-spacing: 0.14em; padding: 12px 0; }
  .r-bar .wordmark:hover { color: #FFFFFF; text-decoration: none; }
  .r-nav { gap: 0 clamp(24px, 5vw, 72px); }
  .r-nav a { color: #EDEDED; font-size: 12px; letter-spacing: 0.14em; padding: 14px 0; }
  .r-nav a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 6px; }
  .r-nav a[aria-current="page"] { color: #F0485D; text-decoration: none; }
  .r-home { font-size: 12px; letter-spacing: 0.14em; color: #9A9A9A; }

  .pr-wrap, .r-head, .r-list, .st-wrap, .db-wrap, .docs-layout, .doc, .ent-in-pricing {
    max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); margin-left: auto; margin-right: auto;
    padding-left: clamp(16px, 2.5vw, 44px); padding-right: clamp(16px, 2.5vw, 44px);
  }
  .doc > p, .doc > ul, .doc > ol, .doc > blockquote { max-width: 72ch; }

  .pr-wrap h1, .r-head h1, .st-wrap h1, .db-head h1, .docs-body h1, .doc h1, .ent-head h2, #work-title, #db-title {
    margin: 0 0 14px !important; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; font-stretch: 125% !important;
    letter-spacing: 0.16em !important; text-transform: uppercase; color: #F2F2F2 !important;
  }
  .pricing-page .pr-wrap, .pricing-page .ent-in-pricing { max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); }
  /* The '>' marker hangs outside the link so nothing shifts between pages */
  .r-nav a { position: relative; }
  .r-nav a[aria-current="page"]::before { content: ""; position: absolute; right: 100%; margin-right: 8px; }

  /* Concise, evenly spaced date ticks */
  .tick span { font-size: 10px; letter-spacing: 0.08em; }
  .tick.minor-tick i { height: 7px; opacity: 0.6; }

  /* =====================================================================
     Phones and touch screens
     ===================================================================== */
  @media (pointer: coarse), (max-width: 760px) {
    .zr-ctl, .cb-copy, .race-ctl { min-height: 44px; min-width: 44px; }
    #markers .marker { width: 40px; height: 40px; transform: translate(-20px, -20px); }
    .timeline .node { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
    .reg-foot a, .foot-talent, .foot-status, .foot-right a, .r-home, .post-all, .docs-toc a, .legal-bar a {
      display: inline-flex; align-items: center; min-height: 44px;
    }
    .inline-btn { padding: 12px 0; }
    .fnref { display: inline-block; padding: 8px 4px; margin: -8px 0; }
    .scroll-cue { min-width: 44px; min-height: 44px; }
    .cb-copy, .db-btn { min-height: 44px !important; }
    .post-foot a, .post-all { display: inline-flex; align-items: center; min-height: 44px; }
  }
  @media (max-width: 760px) {
    /* map: dots only, plus a readable list */
    .lat-svg { display: none; }
    .reg-mobile { display: grid; gap: 10px; margin-top: 20px; font-family: 'Red Hat Mono', ui-monospace, monospace; }
    .reg-mobile .rm-h { margin: 8px 0 0; font-size: 10px; letter-spacing: 0.2em; color: #E6E6E6; }
    .reg-mobile .rm-ok { color: #F0485D; }
    .reg-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
    .reg-mobile li { background: #111111; padding: 12px; display: grid; gap: 4px; }
    .reg-mobile b { font-weight: 500; font-size: 11.5px; color: #EDEDED; }
    .reg-mobile span { font-size: 10.5px; color: #8E8E8E; }
    .reg-legend { flex-wrap: wrap; }
  }
  @media (min-width: 761px) { .reg-mobile { display: none; } }
  @media (max-width: 640px) {
    #mark, .mark-clone { font-size: 12px; }
    .hero { min-height: 100svh; }
    /* performance: keep the essentials */
    .race-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #perf-lat .race-stats > div:nth-child(2) { display: none; }
    #perf-batch .race-stats > div:nth-child(1) { display: none; }
    .perf-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .perf-tabs button { flex: none; }
    /* pricing: model, input, output */
    #prp-text th:nth-child(2), #prp-text td:nth-child(2), #prp-text th:nth-child(5), #prp-text td:nth-child(5) { display: none; }
    /* abliteration diagram fits the width */
    .ab { padding: 12px; }
    .am-tags { gap: 6px; }
  }
  @media (max-width: 480px) {
    .pl-wrap { grid-template-columns: minmax(0, 1fr); }
    .pl { padding: 16px 18px 18px; }
    .chips-panel .chip-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 619px) { .hero header .login { margin-left: auto; } }
  @media (max-width: 819px) { .r-bar .login { margin-left: auto; } }

  /* Tokens: intro on the left, venues and chips box on the right */
  .rev-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 32px 48px; align-items: start; margin-bottom: clamp(20px, 3vw, 32px); }
  .rev-top .intro { margin-bottom: 0; }
  .tok-ctx { border: 1px solid #262626; background: #0E0E0E; padding: 14px 16px 16px; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .tc-h { margin: 0 0 12px; font-size: 9.5px; letter-spacing: 0.2em; color: #8E8E8E; }
  .tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #262626; }
  .tc-grid > div { background: #0E0E0E; padding: 10px 12px 12px 0; display: grid; gap: 6px; align-content: start; }
  .tc-grid > div + div { padding-left: 14px; }
  .tc-grid span { font-size: 9.5px; letter-spacing: 0.16em; color: #8E8E8E; }
  .tc-grid b { font: 700 20px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; font-variant-numeric: tabular-nums; }
  .tc-grid small { font-size: 10px; line-height: 1.5; letter-spacing: 0.04em; color: #6E6E6E; }
  @media (max-width: 760px) { .rev-top { grid-template-columns: minmax(0, 1fr); } }

  /* Feature cards as tabs */
  .pl[aria-selected="true"] { background: #1A1113; box-shadow: inset 0 2px 0 #F0485D; }
  .pl[aria-selected="true"] b { color: #FFFFFF; }
  .pl[aria-selected="false"] .pl-t { color: #7E7E7E; }
  .pl::after { content: none; justify-self: start; font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace; color: #5E5E5E; transition: color 200ms ease, transform 200ms ease; }
  .pl[aria-selected="true"]::after { color: #F0485D; }
  .pl:hover::after { transform: translateY(2px); }
  .pl-panel[hidden] { display: none !important; }
  .pl-panel.pl-in { animation: plIn 320ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes plIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .pl-panel { scroll-margin-top: 12px; }
  .pl { grid-template-rows: auto auto 1fr auto; }
  .pl::after { align-self: end; margin-top: 4px; }

  /* Tokens intro is a single column again */
  .rev-top { grid-template-columns: minmax(0, 1fr); }
  /* Footer on phones: one centred column */
  @media (max-width: 640px) {
    .foot { justify-items: center; text-align: center; gap: 28px; padding-left: 20px; padding-right: 20px; }
    .foot-mark { justify-self: center; }
    .foot-left { justify-self: center; justify-items: center; }
    .foot-right { justify-self: center; justify-content: center; flex-wrap: wrap; }
  }

  /* Static, solid tokens chart */
  .rev-area { fill: #F0485D; fill-opacity: 0.22; stroke: none; }
  .rev-line { stroke-width: 2; }
  .end-dot { fill: #F0485D; }

  /* Mobile top bar: nav spans the width under the logo row; compact login */
  @media (max-width: 619px) {
    .hero header nav[aria-label="Primary"] { order: 3; flex-basis: 100%; display: flex; justify-content: space-between; gap: 0; margin: 2px 0 0; }
  }
  @media (max-width: 819px) {
    .r-bar { flex-wrap: wrap; }
    .r-bar .r-nav { order: 3; flex-basis: 100%; display: flex; justify-content: space-between; gap: 0; margin: 6px 0 0; }
    .r-nav a[aria-current="page"]::before { content: none; }
    .r-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
    .r-home { gap: 6px; margin-left: 20px; }
  }
  @media (max-width: 819px) {
    .login { min-height: 40px; height: 40px; padding: 0 14px; font-size: 11px; letter-spacing: 0.14em; align-self: center; }
    .hero header .wordmark, .r-bar .wordmark { align-self: center; }
  }

  /* US-focused, static latency map */
  .map-stage { aspect-ratio: 150 / 64; }
  .lat-line { stroke-dasharray: none; }
  .lat-edge .lat-line { stroke: rgba(240, 72, 93, 0.45); }
  .metro-dot { fill: #8A8A8A; }
  .metro-lab { font: 400 9.5px 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em; fill: #8A8A8A; paint-order: stroke; stroke: #111111; stroke-width: 3px; pointer-events: none; }
  @media (max-width: 760px) { .lat-svg { display: block; } .metro-lab { display: none; } .lat-dot { display: none; } }

  .pl-panel.pl-out { animation: plOut 180ms ease both; }
  @keyframes plOut { to { opacity: 0; transform: translateY(-6px); } }
  .pl-panel.pl-in { animation: plIn 360ms cubic-bezier(.2,.7,.2,1) both; }
  .pl, .pl b, .pl .pl-t, .pl::after { transition: background 240ms ease, box-shadow 240ms ease, color 240ms ease, transform 200ms ease; }
  #markers .marker[hidden] { display: none !important; }

  /* Smaller LOGIN button everywhere; the tap area stays 44px tall */
  .login { position: relative; min-height: 0 !important; height: 32px !important; padding: 0 14px !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; align-self: center; }
  .login::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .r-bar .login { border-width: 1px; }
  /* Sign-up nudge on phones */
  .nudge { border: 1px solid #3E262B; background: #170D0F; padding: 12px 14px; margin: 4px 0 12px; display: grid; gap: 6px; }
  .nudge b { font-weight: 500; font-size: 11.5px; letter-spacing: 0.04em; color: #FF7A8A; }
  .nudge p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #CFCFCF; }

  /* Feature panels: height glides, new section fades in; no keyframe restarts */
  .pl-stage { position: relative; transition: height 340ms cubic-bezier(.2,.7,.2,1); }
  .pl-stage.pl-moving { overflow: hidden; }
  .pl-panel { transition: opacity 300ms ease, transform 300ms cubic-bezier(.2,.7,.2,1); }
  .pl-panel.pl-enter { opacity: 0; transform: translateY(8px); transition: none; }
  .pl-panel.pl-in, .pl-panel.pl-out { animation: none !important; }
  @media (prefers-reduced-motion: reduce) { .pl-stage, .pl-panel { transition: none; } }

  /* Pricing: monthly plan card */
  .plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0; border: 1px solid #262626; background: #0E0E0E; margin: 8px 0 36px; }
  .plan-main { padding: 24px 26px; border-right: 1px solid #262626; display: grid; gap: 8px; align-content: start; }
  .plan-k { margin: 0; font-size: 10px; letter-spacing: 0.2em; color: #F0485D; }
  .plan h2 { margin: 0; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; }
  .plan-price { margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; }
  .plan-price b { font: 700 27.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; letter-spacing: -0.01em; }
  .plan-price span { font-size: 12px; letter-spacing: 0.08em; color: #9A9A9A; }
  .plan-plus { margin: 0; font-size: 11.5px; line-height: 1.6; color: #F0485D; letter-spacing: 0.03em; }
  .plan-list { list-style: none; margin: 0; padding: 24px 26px; display: grid; gap: 10px; align-content: center; }
  .plan-list li { position: relative; padding-left: 20px; font-size: 12px; line-height: 1.6; color: #CFCFCF; letter-spacing: 0.03em; }
  .plan-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: #F0485D; }
  @media (max-width: 760px) { .plan { grid-template-columns: minmax(0, 1fr); } .plan-main { border-right: 0; border-bottom: 1px solid #262626; } }

  /* Map load-in: markers and the latency line fade in after the dots sweep across */
  .map-stage #markers, .map-stage .lat-svg { opacity: 0; transition: opacity 500ms ease; }
  .map-stage.map-in #markers, .map-stage.map-in .lat-svg { opacity: 1; transition-delay: 650ms; }
  @media (prefers-reduced-motion: reduce) { .map-stage #markers, .map-stage .lat-svg { opacity: 1; transition: none; } }
  /* Sections under the cards start straight with their content */
  .pl-panel { padding-top: clamp(28px, 3.5vw, 44px) !important; }

  /* Selected card opens into a panel: one connected shape (folder-tab style) */
  :root { --pl-panel: #151012; }
  .pillars { padding-bottom: 0 !important; }
  .pl-stage {
    max-width: 1200px; width: calc(100% - 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto clamp(40px, 5vw, 64px);
    background: var(--pl-panel); border: 1px solid #262626; border-top: 0;
  }
  .pl-stage > .pl-panel { background: transparent !important; padding-left: clamp(18px, 2.4vw, 32px) !important; padding-right: clamp(18px, 2.4vw, 32px) !important; padding-bottom: clamp(24px, 3vw, 36px) !important; }
  .pl-stage .zdr-anim, .pl-stage .ab, .pl-stage .race, .pl-stage .db-kpi, .pl-stage .db-kpis { background-color: #0E0B0C; }
  .pl[aria-selected="true"] { background: var(--pl-panel); position: relative; z-index: 1; }
  @media (min-width: 481px) {
    .pl-wrap { overflow: visible; }
    .pl[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--pl-panel); }
  }
  @media (max-width: 480px) {
    .pl-stage { border-top: 1px solid #262626; margin-top: 12px; }
  }
  body:not([class*="-mode"]) { background: #111111; }

  /* Pricing: variant switch above the modality tabs */
  .pr-variant { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 28px 0 6px; }
  .pr-variant button { min-height: 40px; padding: 0 18px; border: 1px solid #333; background: transparent; color: #9A9A9A; cursor: pointer; font: 500 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }
  .pr-variant button + button { border-left: 0; }
  .pr-variant button[aria-checked="true"] { background: #1A1113; color: #F2F2F2; border-color: #6A2A33; box-shadow: inset 0 -2px 0 #F0485D; }
  .pr-variant button + button[aria-checked="true"] { border-left: 1px solid #6A2A33; margin-left: -1px; }
  .pr-variant button:focus-visible { outline: 2px solid #F0485D; outline-offset: 2px; }
  .pr-variant-note { flex-basis: 100%; margin: 10px 0 0; font-size: 11.5px; letter-spacing: 0.03em; color: #8E8E8E; }
  .m-var { display: table; margin: 5px 0 3px; padding: 2px 6px; border: 1px solid #6A2A33; color: #FF7A8A; font-size: 9.5px; letter-spacing: 0.14em; vertical-align: 2px; }
  #pricing tr[data-variant][hidden] { display: none; }

  /* Compliance now follows the contact form */
  .ent-comp { margin-top: 0; }
  .ent-in-pricing .ent-sec { margin-top: clamp(28px, 3.5vw, 40px) !important; margin-bottom: clamp(36px, 4vw, 48px) !important; padding-bottom: 0 !important; }
  #pricing-page .sched { margin-bottom: clamp(36px, 4vw, 48px); }
  .ent-comp .comp-sec { margin-top: 0 !important; padding-top: 36px; border-top: 1px solid #262626; }
  .ent-comp .comp-sec > h2 { margin: 0 0 20px; font-weight: 500; font-size: 10px; letter-spacing: 0.2em; color: #8E8E8E; }
  #enterprise.ent-in-pricing { padding-bottom: 0 !important; }
  .ent-comp { padding-bottom: clamp(48px, 6vw, 80px) !important; }
  .ent-comp .comp-sec { margin-bottom: 0 !important; }

  /* Platforms: Liquid Inference (single platform, monochrome logo) */
  .pt-grid .pt-logo { min-height: 120px; }
  .pt-img { display: block; width: min(180px, 70%); height: auto; opacity: 0.72; transition: opacity 200ms ease; }
  .pt-logo:hover .pt-img { opacity: 1; }

  /* Applications page */
  .apps-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  body.apps-mode .apps-page { display: block; }
  body.apps-mode .hero, body.apps-mode .pillars, body.apps-mode .pl-stage, body.apps-mode .revenue, body.apps-mode .perf, body.apps-mode .regions, body.apps-mode .chips { display: none !important; }
  body.apps-mode { background: #111111; }
  .ap-wrap { max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 2.5vw, 44px) clamp(64px, 8vw, 110px); }
  .ap-wrap h1 { margin: 0 0 14px; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; color: #F2F2F2; }
  .ap-intro { margin: 0 0 40px; max-width: 64ch; font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: #BDBDBD; }
  .ap-k { margin: 0 0 12px; font-size: 10px; letter-spacing: 0.2em; color: #F0485D; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .ap-status { padding: 3px 7px; border: 1px solid #6A2A33; color: #FF7A8A; font-size: 9.5px; letter-spacing: 0.16em; }
  .ap-app { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); gap: 48px; align-items: center; padding: 32px; border: 1px solid #262626; background: #151012; }
  .ap-app h2 { margin: 0 0 14px; font: 700 clamp(17px, 1.65vw, 18.5px)/1.25 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; letter-spacing: -0.005em; }
  .ap-copy > p { margin: 0 0 18px; font-size: 12px; line-height: 1.7; color: #CFCFCF; letter-spacing: 0.03em; max-width: 60ch; }
  .ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .ap-list li { position: relative; padding-left: 20px; font-size: 12px; line-height: 1.65; color: #BDBDBD; letter-spacing: 0.02em; }
  .ap-list li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: #F0485D; }
  .ap-list b { color: #F2F2F2; font-weight: 500; }
  .ap-phone { margin: 0; justify-self: center; display: grid; gap: 10px; justify-items: center; }
  .ap-phone figcaption { font-size: 9.5px; letter-spacing: 0.18em; color: #6E6E6E; }
  .ph-screen { width: 250px; height: 500px; border-radius: 34px; border: 8px solid #2A2A2A; background: #0B0B0B; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
  .ph-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 16px 12px; border-bottom: 1px solid #1E1E1E; font-size: 9.5px; letter-spacing: 0.16em; }
  .ph-top span:first-child { font: 700 10.5px 'PP Monument Wide', sans-serif; letter-spacing: 0.16em; color: #F2F2F2; }
  .ph-model { color: #9A9A9A; }
  .ph-msgs { padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
  .ph-msgs p { margin: 0; font-size: 10px; line-height: 1.55; padding: 9px 11px; border-radius: 12px; max-width: 86%; }
  .ph-me { align-self: flex-end; background: #2A1418; color: #F6E4E7; border-bottom-right-radius: 4px; }
  .ph-ai { align-self: flex-start; background: #1A1A1A; color: #D8D8D8; border-bottom-left-radius: 4px; }
  .ph-voice { display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: #FF9AA6; }
  .ph-voice i { display: block; width: 3px; border-radius: 2px; background: #F0485D; height: 8px; }
  .ph-voice i:nth-child(2) { height: 14px; } .ph-voice i:nth-child(3) { height: 18px; } .ph-voice i:nth-child(4) { height: 11px; } .ph-voice i:nth-child(5) { height: 16px; } .ph-voice i:nth-child(6) { height: 9px; } .ph-voice i:nth-child(7) { height: 5px; margin-right: 6px; }
  .ph-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px 18px; border-top: 1px solid #1E1E1E; }
  .ph-input { flex: 1; padding: 9px 12px; border: 1px solid #262626; border-radius: 18px; font-size: 10px; color: #6E6E6E; }
  .ph-mic { width: 34px; height: 34px; border-radius: 50%; background: #F0485D; color: #140A0C; display: grid; place-items: center; }
  .ap-sec { margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid #262626; }
  .ap-sec h2 { margin: 0 0 20px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #F2F2F2; }
  .ap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  .ap-steps > div { background: #111111; padding: 22px 22px 24px; }
  .ap-steps ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 11.5px; line-height: 1.6; color: #CFCFCF; }
  .ap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .ap-cols p { margin: 0; font-size: 12px; line-height: 1.75; color: #BDBDBD; letter-spacing: 0.02em; }
  .ap-foot { margin: 40px 0 0; font-size: 11.5px; color: #9A9A9A; }
  .ap-note { margin: -6px 0 20px; max-width: 70ch; font-size: 12px; line-height: 1.7; color: #BDBDBD; }
  .ap-foot a { color: #F0485D; }
  @media (max-width: 860px) {
    .ap-app { grid-template-columns: minmax(0, 1fr); padding: 22px; }
    .ap-steps, .ap-cols { grid-template-columns: minmax(0, 1fr); }
  }

  /* Applications: futures carousel */
  .cz { margin: 0 0 clamp(48px, 6vw, 72px); }
  .cz-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
  .cz-head h2 { margin: 0; font: 700 clamp(15px, 1.5vw, 17.5px)/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; max-width: 30ch; }
  .cz-ctrl { display: flex; gap: 8px; flex: none; }
  .cz-btn { width: 44px; height: 44px; border: 1px solid #333; background: transparent; color: #EDEDED; cursor: pointer; font: 400 13.5px/1 'Red Hat Mono', monospace; transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease; }
  .cz-btn:hover:not(:disabled) { border-color: #F0485D; color: #F0485D; }
  .cz-btn:disabled { opacity: 0.3; cursor: default; }
  .cz-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 42%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cz-track::-webkit-scrollbar { display: none; }
  .cz-track:focus-visible { outline: 2px solid #F0485D; outline-offset: 4px; }
  .cz-card { scroll-snap-align: start; border: 1px solid #262626; background: #141012; padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 380px; transition: border-color 300ms ease, background 300ms ease; }
  .cz-card.is-active { border-color: #4A2A30; background: #1A1113; }
  .cz-top { display: flex; justify-content: space-between; align-items: center; }
  .cz-n { font: 700 20px/1 'PP Monument Wide', sans-serif; color: #3A2A2E; }
  .cz-card.is-active .cz-n { color: #F0485D; }
  .cz-h { font-size: 9.5px; letter-spacing: 0.18em; padding: 4px 8px; border: 1px solid #333; color: #BDBDBD; }
  .cz-now { border-color: #2E6B3B; color: #7EE29A; }
  .cz-next { border-color: #6A2A33; color: #FF7A8A; }
  .cz-later { border-color: #5A4A20; color: #E3B341; }
  .cz-speculative { border-color: #3A3A5A; color: #A9A9E6; }
  .cz-tag { margin: 6px 0 0; font-size: 10px; letter-spacing: 0.2em; color: #8E8E8E; }
  .cz-card h3 { margin: 0; font: 700 16px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; }
  .cz-body { margin: 0; font-size: 12px; line-height: 1.7; color: #BDBDBD; letter-spacing: 0.02em; }
  .cz-pts { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid #262626; display: grid; gap: 8px; }
  .cz-pts li { position: relative; padding-left: 18px; font-size: 11px; line-height: 1.55; color: #CFCFCF; }
  .cz-pts li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: #F0485D; }
  .cz-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
  .cz-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .cz-dot::before { content: ""; width: 18px; height: 2px; background: #333; transition: background 250ms ease, width 250ms ease; }
  .cz-dot[aria-current="true"]::before { background: #F0485D; width: 28px; }
  .ap-first { margin: 0 0 14px; }
  @media (max-width: 860px) { .cz-track { grid-auto-columns: 86%; } .cz-head h2 { font-size: 15px; } }
  @media (prefers-reduced-motion: reduce) { .cz-track { scroll-behavior: auto; } }
  .cz-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%); scroll-padding-left: 28px; padding-left: 28px; padding-right: 56px; margin: 0 -28px; }
  @media (max-width: 860px) { .cz-track { margin: 0 -16px; padding-left: 16px; padding-right: 32px; scroll-padding-left: 16px; -webkit-mask-image: none; mask-image: none; } }

  /* Applications v2: audience cards */
  .cz-card { min-height: 430px; }
  .cz-cta { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 10.5px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #F0485D; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
  .cz-cta:hover { color: #FF7A8A; text-decoration: underline; text-underline-offset: 5px; }
  .cz-pts { margin-top: auto; }
  .ap-code { padding: 14px 16px; border: 1px solid #262626; background: #0C0C0C; overflow-x: auto; margin: 0 0 12px; }
  .ap-code code { font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; color: #EDEDED; white-space: nowrap; }
  .ap-note a { color: #F0485D; }

  /* Applications: audiences as a static grid (no carousel) */
  .au { margin: 0 0 clamp(48px, 6vw, 72px); }
  .au h2 { margin: 0 0 20px; font: 700 clamp(15px, 1.5vw, 17.5px)/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; }
  .au-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  .au-card { background: #141012; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; }
  .au-card .cz-n { color: #F0485D; }
  .au-card h3 { margin: 0; font: 700 16px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; }
  .au-card .cz-pts { margin-top: auto; }
  @media (max-width: 760px) { .au-grid { grid-template-columns: minmax(0, 1fr); } }

  /* Applications v3: thesis, exclusions, roadmap */
  .th h2 { margin: 0 0 28px; max-width: 28ch; font: 700 clamp(17.5px, 2.25vw, 26px)/1.2 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; letter-spacing: -0.01em; }
  .th-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  .th-pts > div { background: #111111; padding: 20px 22px 22px; }
  .th-pts b { display: block; margin-bottom: 8px; font-weight: 500; font-size: 11.5px; color: #F2F2F2; letter-spacing: 0.02em; }
  .th-pts p { margin: 0; font-size: 12px; line-height: 1.7; color: #BDBDBD; }
  .ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  .ex-card { background: #141012; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
  .ex-k { margin: 0; font-size: 10px; letter-spacing: 0.2em; color: #F0485D; }
  .ex-card h3 { margin: 0; font: 700 15px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; }
  .ex-card > p { margin: 0; font-size: 12px; line-height: 1.7; color: #BDBDBD; }
  .ex-card .ex-us { margin-top: auto; padding-top: 12px; border-top: 1px solid #262626; color: #E6E6E6; }
  .ex-us span { display: block; margin-bottom: 4px; font-size: 9.5px; letter-spacing: 0.2em; color: #8E8E8E; }
  .rm-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
  .rm-line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: #333; }
  .rm-step { position: relative; padding-top: 30px; display: flex; flex-direction: column; gap: 10px; }
  .rm-step::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #111111; border: 1px solid #6E6E6E; }
  .rm-step.is-now::before { background: #F0485D; border-color: #F0485D; box-shadow: 0 0 0 4px rgba(240, 72, 93, 0.18); }
  .rm-k { margin: 0; font-size: 10px; letter-spacing: 0.2em; color: #8E8E8E; display: flex; gap: 10px; flex-wrap: wrap; }
  .rm-k span { color: #F2F2F2; }
  .rm-step.is-now .rm-k span { color: #F0485D; }
  .rm-step h3 { margin: 0; font: 700 14.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; }
  .rm-step ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .rm-step ul li { position: relative; padding-left: 16px; font-size: 11.5px; line-height: 1.6; color: #BDBDBD; }
  .rm-step ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 7px; height: 1px; background: #6E6E6E; }
  .rm-who { margin: auto 0 0; padding-top: 10px; border-top: 1px solid #262626; font-size: 10.5px; letter-spacing: 0.06em; color: #F0485D; }
  @media (max-width: 960px) {
    .th-pts, .ex-grid { grid-template-columns: minmax(0, 1fr); }
    .rm-line { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 26px; }
    .rm-line::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .rm-step { padding-top: 0; }
    .rm-step::before { left: -26px; top: 2px; }
  }
  .ap-empty { min-height: 50vh; }

  /* =====================================================================
     The Afterlife: community hub (cyberpunk bar, performance first)
     ===================================================================== */
  .apps-page { background: #0A0A0B; }
  body.apps-mode { background: #0A0A0B; }
  .al { max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(16px, 2.5vw, 44px) clamp(64px, 8vw, 110px); font-family: 'Red Hat Mono', ui-monospace, monospace; color: #E6E6E6; }
  .al-k { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.22em; color: #F0485D; }
  .al-k b { color: #F2F2F2; font-weight: 500; }
  .al-hero { position: relative; padding: clamp(28px, 4vw, 48px); border: 1px solid #2A1A1D; background:
      radial-gradient(120% 80% at 10% 0%, rgba(240,72,93,0.16), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px), #0E0B0C; overflow: hidden; }
  .al-neon { margin: 6px 0 18px; font: 800 clamp(25px, 6vw, 59.5px)/0.95 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.04em; color: #FFE3E7;
      text-shadow: 0 0 4px #fff, 0 0 12px #F0485D, 0 0 28px #F0485D, 0 0 60px rgba(240,72,93,0.7); animation: alFlicker 6s infinite steps(1); }
  @keyframes alFlicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: 0.55; } 43% { opacity: 1; } 77% { opacity: 1; } 78% { opacity: 0.7; } 79% { opacity: 1; } }
  .al-sub { margin: 0 0 24px; max-width: 62ch; font-size: 11.5px; line-height: 1.75; color: #CFCFCF; }
  .al-how { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #2A1A1D; border: 1px solid #2A1A1D; }
  .al-how li { background: rgba(10,10,11,0.85); padding: 16px 18px; display: grid; gap: 6px; }
  .al-how b { font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; color: #F0485D; }
  .al-how span { font-size: 11.5px; line-height: 1.6; color: #BDBDBD; }
  .al-stats { display: flex; flex-wrap: wrap; gap: 28px; }
  .al-stats div { display: grid; gap: 4px; }
  .al-stats b { font: 700 18.5px/1 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .al-stats span { font-size: 9.5px; letter-spacing: 0.2em; color: #8E8E8E; }
  .al-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #262626; margin: 28px 0 24px; }
  .al-tabs button { min-height: 44px; padding: 0 18px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: #7A7A7A; cursor: pointer; font: 500 10.5px/1 'Red Hat Mono', monospace; letter-spacing: 0.2em; }
  .al-tabs button:first-child { padding-left: 0; }
  .al-tabs button:hover { color: #D6D6D6; }
  .al-tabs button[aria-selected="true"] { color: #F2F2F2; border-bottom-color: #F0485D; }
  .al-panel[hidden] { display: none; }
  .al-legends { margin-bottom: 22px; }
  .al-legends ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .al-legends li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #2A1A1D; background: linear-gradient(90deg, rgba(240,72,93,0.10), transparent 70%); cursor: pointer; }
  .al-legends li:hover { border-color: #6A2A33; }
  .al-legends .lg-n { font: 700 18.5px/1 'PP Monument Wide', sans-serif; color: #F0485D; text-shadow: 0 0 10px rgba(240,72,93,0.6); }
  .al-legends .lg-t { font-size: 12px; color: #F2F2F2; } .al-legends .lg-a { display: block; font-size: 10px; color: #8E8E8E; margin-top: 2px; }
  .al-legends .lg-v { font-size: 10.5px; color: #E6E6E6; text-align: right; }
  .al-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
  .al-search input { width: min(360px, 100%); height: 40px; padding: 0 12px; background: #111; border: 1px solid #333; color: #EDEDED; font: 400 12px 'Red Hat Mono', monospace; }
  .al-search input:focus { outline: none; border-color: #F0485D; }
  .al-search { flex: 1 1 260px; }
  .al-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .al-chips button { min-height: 34px; padding: 0 12px; border: 1px solid #333; background: none; color: #9A9A9A; cursor: pointer; font: 500 9.5px/1 'Red Hat Mono', monospace; letter-spacing: 0.16em; }
  .al-chips button[aria-pressed="true"] { border-color: #F0485D; color: #F2F2F2; background: rgba(240,72,93,0.12); }
  .al-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .al-card { display: flex; flex-direction: column; border: 1px solid #222; background: #0F0F10; cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
  .al-card:hover, .al-card:focus-visible { border-color: #6A2A33; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(240,72,93,0.25), 0 12px 30px rgba(240,72,93,0.12); outline: none; }
  .al-cover { aspect-ratio: 16 / 9; background-size: cover; background-position: center; position: relative; }
  .al-cover .al-badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
  .al-badge { font-size: 9px; letter-spacing: 0.16em; padding: 3px 6px; background: rgba(10,10,11,0.85); border: 1px solid #444; color: #CFCFCF; }
  .al-badge.red { border-color: #6A2A33; color: #FF7A8A; } .al-badge.amber { border-color: #5A4A20; color: #E3B341; }
  .al-cbody { padding: 14px 16px 16px; display: grid; gap: 8px; }
  .al-cbody h3 { margin: 0; font: 700 13.5px/1.3 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .al-cbody p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #BDBDBD; }
  .al-by { font-size: 10px; color: #8E8E8E; letter-spacing: 0.06em; }
  .al-perf { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid #1E1E1E; font-size: 10px; color: #9A9A9A; }
  .al-perf b { color: #F2F2F2; font-weight: 500; }
  .al-note { margin: 16px 0 0; font-size: 10.5px; color: #6E6E6E; letter-spacing: 0.03em; }
  .al-empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed #333; color: #8E8E8E; font-size: 11.5px; text-align: center; }
  .al-rhead h2, .al-form h2 { margin: 0 0 10px; font: 700 17px/1.3 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .al-rhead p, .al-form-l p { margin: 0 0 22px; max-width: 70ch; font-size: 12px; line-height: 1.7; color: #BDBDBD; }
  .al-research { display: grid; gap: 1px; background: #262626; border: 1px solid #262626; }
  .al-paper { background: #0F0F10; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
  .al-paper h3 { margin: 0; font: 700 13.5px/1.35 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .al-paper p { margin: 0; grid-column: 1; font-size: 11.5px; line-height: 1.65; color: #BDBDBD; }
  .al-paper .al-pmeta { grid-column: 2; grid-row: 1 / span 3; display: grid; gap: 6px; align-content: start; justify-items: end; font-size: 10px; color: #9A9A9A; text-align: right; }
  .al-paper .al-pmeta b { color: #F2F2F2; font-weight: 500; }
  .al-gate { padding: 28px; border: 1px solid #262626; background: #0F0F10; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
  .al-gate p { margin: 0; font-size: 12px; color: #CFCFCF; }
  .al-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid #444; background: #111; color: #EDEDED; cursor: pointer; font: 500 10.5px/1 'Red Hat Mono', monospace; letter-spacing: 0.16em; text-decoration: none; }
  .al-btn:hover { border-color: #F0485D; color: #FFFFFF; }
  .al-btn-sm { min-height: 34px; padding: 0 10px; font-size: 9.5px; }
  .al-btn-red { background: #F0485D; border-color: #F0485D; color: #140A0C; }
  .al-btn-red:hover { background: #FF5E72; color: #140A0C; box-shadow: 0 0 18px rgba(240,72,93,0.5); }
  .al-msg { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid #262626; min-height: 460px; }
  .al-me { border-right: 1px solid #262626; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: #0F0F10; }
  .al-k-gap { margin-top: 12px; }
  .al-handle, .al-new { display: flex; gap: 6px; }
  .al-handle input, .al-new input, .al-send input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; background: #0A0A0B; border: 1px solid #333; color: #EDEDED; font: 400 11.5px 'Red Hat Mono', monospace; }
  .al-handle input:focus, .al-new input:focus, .al-send input:focus { outline: none; border-color: #F0485D; }
  .al-fp { margin: 0; font-size: 9.5px; color: #6E6E6E; letter-spacing: 0.08em; } .al-fp code { color: #9A9A9A; }
  .al-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; align-content: start; }
  .al-threads button { width: 100%; text-align: left; padding: 10px; border: 1px solid transparent; background: none; color: #CFCFCF; cursor: pointer; font: 400 11.5px 'Red Hat Mono', monospace; }
  .al-threads button small { display: block; margin-top: 3px; font-size: 10px; color: #6E6E6E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .al-threads button[aria-current="true"] { border-color: #6A2A33; background: rgba(240,72,93,0.08); color: #F2F2F2; }
  .al-chat { display: flex; flex-direction: column; padding: 18px; gap: 12px; min-width: 0; }
  .al-chat-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid #1E1E1E; }
  .al-chat-top b { font-weight: 500; color: #F2F2F2; } .al-chat-top span { font-size: 9.5px; letter-spacing: 0.2em; color: #3FB950; }
  .al-log { flex: 1; min-height: 260px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
  .al-m { max-width: 78%; padding: 10px 12px; border: 1px solid #262626; background: #111; font-size: 12px; line-height: 1.55; }
  .al-m.me { align-self: flex-end; border-color: #4A2A30; background: #1A1113; }
  .al-m small { display: block; margin-top: 6px; font-size: 9.5px; color: #5E5E5E; word-break: break-all; }
  .al-send { display: flex; gap: 8px; }
  .al-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; }
  .al-form-r { display: grid; gap: 14px; }
  .al-form label, .al-form legend { display: grid; gap: 6px; font-size: 10px; letter-spacing: 0.18em; color: #BDBDBD; }
  .al-form input:not([type="checkbox"]):not([type="file"]), .al-form select, .al-form textarea { padding: 10px 12px; background: #0F0F10; border: 1px solid #333; color: #EDEDED; font: 400 12px 'Red Hat Mono', monospace; letter-spacing: 0.02em; }
  .al-form input:focus, .al-form select:focus, .al-form textarea:focus { outline: none; border-color: #F0485D; }
  .al-form fieldset { border: 1px solid #262626; padding: 12px 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
  .al-form .al-cb { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.04em; font-size: 11.5px; color: #CFCFCF; }
  .al-err { margin: 0; min-height: 1.2em; font-size: 11px; color: #FF8A80; }
  .al-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.72); display: grid; place-items: center; padding: 20px; }
  .al-modal[hidden] { display: none; }
  .al-modal-card { position: relative; width: min(760px, 100%); max-height: 90vh; overflow-y: auto; background: #0F0F10; border: 1px solid #4A2A30; box-shadow: 0 0 40px rgba(240,72,93,0.18); }
  .al-x { position: absolute; right: 10px; top: 10px; z-index: 1; width: 40px; height: 40px; border: 1px solid #333; background: rgba(10,10,11,0.85); color: #EDEDED; cursor: pointer; font-size: 15px; }
  .alm-cover { aspect-ratio: 21 / 9; background-size: cover; background-position: center; }
  .alm-body { padding: 22px 24px 26px; display: grid; gap: 10px; }
  .alm-body h2 { margin: 0; font: 700 17.5px/1.2 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .alm-pitch { margin: 0; font-size: 11.5px; color: #CFCFCF; }
  .alm-stats { display: flex; flex-wrap: wrap; gap: 20px; padding: 12px 0; border-top: 1px solid #1E1E1E; border-bottom: 1px solid #1E1E1E; font-size: 10.5px; color: #9A9A9A; }
  .alm-stats b { display: block; font: 700 15px/1.2 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .alm-desc { margin: 0 0 6px; font-size: 12px; line-height: 1.75; color: #BDBDBD; white-space: pre-line; }
  .alm-models { margin: 0 0 6px; font-size: 11.5px; color: #E6E6E6; }
  .alm-papers { margin: 0 0 8px; padding-left: 18px; font-size: 11.5px; line-height: 1.7; } .alm-papers a { color: #F0485D; word-break: break-all; }
  .alm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  @media (max-width: 960px) {
    .al-grid, .al-legends ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .al-how { grid-template-columns: minmax(0, 1fr); }
    .al-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  }
  @media (max-width: 640px) {
    .al-grid, .al-legends ol { grid-template-columns: minmax(0, 1fr); }
    .al-msg { grid-template-columns: minmax(0, 1fr); }
    .al-me { border-right: 0; border-bottom: 1px solid #262626; }
    .al-paper { grid-template-columns: minmax(0, 1fr); } .al-paper .al-pmeta { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; }
    .al-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .al-tabs button { flex: none; }
  }
  @media (prefers-reduced-motion: reduce) { .al-neon { animation: none; } .al-card { transition: none; } }
  .al-hero { display: block; }
  .al-gate[hidden], .al-msg[hidden] { display: none !important; }

  /* Hero tagline */
  .tagline em { font-style: italic; }
  .tagline .tg-a { display: inline-block; max-width: 100%; transition: color 200ms ease; }
  .tagline .tg-a.is-scrambling { color: #FFE3E7; text-shadow: 0 0 10px rgba(255, 255, 255, 0.35); }

  /* =====================================================================
     The Afterlife: App Store-style floor
     ===================================================================== */
  .al-enter { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 24px; }
  .al-enter-note { font-size: 11px; color: #9A9A9A; }
  .as-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 26px; margin: 0 0 26px; border: 1px solid #2A1A1D; background: radial-gradient(90% 120% at 100% 0%, rgba(240,72,93,0.14), transparent 60%), #0E0B0C; }
  .as-ftxt { display: grid; gap: 14px; justify-items: start; }
  .as-fhead { display: flex; gap: 16px; align-items: center; }
  .as-fhead h2 { margin: 0; font: 700 18.5px/1.1 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .as-fhead p { margin: 4px 0 0; font-size: 10.5px; color: #9A9A9A; }
  .as-fpitch { margin: 0; font-size: 12px; line-height: 1.7; color: #CFCFCF; max-width: 52ch; }
  .as-fstats { display: flex; gap: 24px; flex-wrap: wrap; }
  .as-fstats div { display: grid; gap: 2px; } .as-fstats b { font: 700 15px/1.2 'PP Monument Wide', sans-serif; color: #F2F2F2; } .as-fstats span { font-size: 9.5px; letter-spacing: 0.2em; color: #8E8E8E; }
  .as-fshots { position: relative; min-height: 260px; }
  .as-fshots .as-win { position: absolute; width: 78%; }
  .as-fshots .as-win:first-child { left: 0; top: 0; z-index: 2; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
  .as-fshots .as-win:last-child { right: 0; top: 38px; opacity: 0.75; transform: scale(0.94); }
  .as-icon { width: 52px; height: 52px; flex: none; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 6px 18px rgba(0,0,0,0.4); }
  .as-icon span { font: 800 18.5px/1 'PP Monument Wide', sans-serif; color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
  .as-icon-lg { width: 76px; height: 76px; border-radius: 18px; } .as-icon-lg span { font-size: 23px; }
  .as-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
  .as-card { display: grid; gap: 12px; align-content: start; }
  .as-shot { display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 10px; transition: transform 220ms ease; }
  .as-shot:hover, .as-shot:focus-visible { transform: translateY(-3px); outline: none; }
  .as-shot:focus-visible .as-win { box-shadow: 0 0 0 2px #F0485D; }
  .as-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
  .as-meta { display: grid; gap: 2px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
  .as-meta b { font: 700 13px/1.3 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .as-meta span { font-size: 11px; color: #BDBDBD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .as-meta small { font-size: 9.5px; color: #7E7E7E; letter-spacing: 0.04em; }
  .as-get { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 14px; border-radius: 999px; background: #241417; color: #FF7A8A; font: 600 10px/1 'Red Hat Mono', monospace; letter-spacing: 0.14em; text-decoration: none; border: 1px solid #4A2A30; transition: background 200ms ease, color 200ms ease; }
  .as-get:hover { background: #F0485D; color: #140A0C; }
  .as-get[aria-disabled="true"] { opacity: 0.6; cursor: default; }
  .as-perf { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; color: #7E7E7E; } .as-perf b { color: #CFCFCF; font-weight: 500; }
  /* window chrome for screenshot previews */
  .as-win { border-radius: 10px; overflow: hidden; background: #0C0C0D; border: 1px solid #262626; aspect-ratio: 16 / 10; display: grid; grid-template-rows: 26px 1fr; }
  .as-img { background-size: cover; background-position: top center; display: block; }
  .as-bar { display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #151516; border-bottom: 1px solid #222; }
  .as-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3A3A; }
  .as-bar i:nth-child(1) { background: #FF5F57; } .as-bar i:nth-child(2) { background: #FEBC2E; } .as-bar i:nth-child(3) { background: #28C840; }
  .as-bar span { margin-left: 8px; font-size: 9.5px; color: #8E8E8E; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .as-wbody { position: relative; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .as-line { display: block; height: 6px; border-radius: 3px; background: #2A2A2C; }
  .as-hl { background: rgba(240,72,93,0.55); }
  .as-story { padding: 0; } .as-scene { position: absolute; inset: 0; }
  .as-say { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px; border-radius: 6px; background: rgba(10,10,11,0.82); border: 1px solid #333; display: grid; gap: 6px; }
  .as-say b { font-size: 9px; letter-spacing: 0.2em; color: #FF7A8A; font-weight: 500; }
  .as-voice, .as-voice2 { align-items: center; justify-content: center; background: radial-gradient(60% 70% at 50% 40%, hsl(var(--h) 80% 40% / 0.35), transparent 70%); }
  .as-orb { width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, hsl(var(--h) 90% 60%) 35%, hsl(var(--h) 70% 25%) 75%); box-shadow: 0 0 30px hsl(var(--h) 90% 55% / 0.6); }
  .as-voice2 .as-orb { border-radius: 30%; }
  .as-wave { display: flex; gap: 3px; align-items: center; height: 46px; } .as-wave i { width: 4px; border-radius: 2px; background: hsl(var(--h) 85% 62%); }
  .as-cap { margin: 0; font-size: 9px; letter-spacing: 0.22em; color: #CFCFCF; }
  .as-log { display: grid; gap: 6px; } .as-logr { display: flex; gap: 8px; align-items: center; font-size: 9.5px; color: #CFCFCF; }
  .as-logr i { width: 7px; height: 7px; border-radius: 50%; background: #3FB950; } .as-logr i.warn { background: #D29922; }
  .as-table { display: grid; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid #222; } .as-table > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .as-cell { width: auto !important; }
  .as-doc { flex-direction: row; } .as-page { flex: 1.6; padding: 10px; border-radius: 4px; background: #141415; display: flex; flex-direction: column; gap: 7px; }
  .as-side { flex: 1; display: grid; gap: 6px; align-content: start; } .as-side p { margin: 0; padding: 6px 7px; border-left: 2px solid #F0485D; background: rgba(240,72,93,0.08); font-size: 9px; line-height: 1.4; color: #E6E6E6; }
  .as-chart { flex: 1; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 4px; border-bottom: 1px solid #2A2A2A; } .as-chart i { flex: 1; background: #3A3A3C; border-radius: 2px 2px 0 0; } .as-chart i.hot { background: #F0485D; }
  .as-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .as-tiles div { padding: 6px; background: #141415; border-radius: 4px; display: grid; } .as-tiles span { font-size: 8px; letter-spacing: 0.18em; color: #7E7E7E; } .as-tiles b { font-size: 11.5px; color: #F2F2F2; font-weight: 500; }
  .as-chatb { display: grid; gap: 8px; } .as-bub { max-width: 70%; padding: 8px; border-radius: 8px; background: #1C1C1E; display: grid; gap: 5px; } .as-bub.me { justify-self: end; background: #3A1A20; }
  /* app page (modal) */
  .al-modal-card { width: min(920px, 100%); }
  .alm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 26px 26px 18px; }
  .alm-id h2 { margin: 0 0 4px; font: 700 18.5px/1.15 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .alm-id .alm-pitch { margin: 0 0 6px; font-size: 12px; color: #CFCFCF; } .alm-id .al-k { margin: 0; color: #9A9A9A; }
  .alm-actions { display: grid; gap: 8px; justify-items: end; } .alm-actions .as-get { min-height: 36px; padding: 0 22px; font-size: 11px; }
  .alm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 26px; border-top: 1px solid #222; border-bottom: 1px solid #222; }
  .alm-stats div { padding: 12px 0; display: grid; gap: 4px; justify-items: center; text-align: center; } .alm-stats div + div { border-left: 1px solid #222; }
  .alm-stats span { font-size: 9px; letter-spacing: 0.2em; color: #7E7E7E; } .alm-stats b { font: 700 13.5px/1.2 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .alm-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; padding: 20px 26px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .alm-shots .as-win { scroll-snap-align: start; }
  .alm-shots:focus-visible { outline: 2px solid #F0485D; outline-offset: -2px; }
  .alm-body { padding: 0 26px 26px; display: grid; gap: 8px; }
  .alm-info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 12px; border-top: 1px solid #222; }
  .alm-cover { display: none; }
  @media (max-width: 960px) { .as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-feature { grid-template-columns: minmax(0, 1fr); } .as-fshots { min-height: 220px; } }
  @media (max-width: 640px) {
    .as-grid { grid-template-columns: minmax(0, 1fr); }
    .alm-head { grid-template-columns: auto minmax(0, 1fr); } .alm-actions { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; }
    .alm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alm-stats div:nth-child(3) { border-left: 0; }
    .alm-shots { grid-auto-columns: 86%; } .alm-info { grid-template-columns: minmax(0, 1fr); }
    .as-fshots .as-win { width: 88%; }
  }
  .alm-head { padding-right: 76px; }
  @media (max-width: 640px) { .alm-head { padding-right: 26px; padding-top: 60px; } }
  /* Static counter: no live meter */
  .ctr-meter { display: none !important; }
  .ctr-rate { letter-spacing: 0.16em; color: #8E8E8E; }

  /* Performance metrics kept private while data is collected (remove "metrics-private" from #perf to publish) */
  .metrics-private .db-kpi b { color: transparent !important; position: relative; display: inline-block; min-width: 4.5em; text-shadow: none; }
  .metrics-private .db-kpi b::after { content: ""; position: absolute; left: 0; right: 0; top: 18%; bottom: 18%; background: repeating-linear-gradient(90deg, #2A2A2C 0 10px, #222224 10px 12px); }
  .metrics-private .db-kpi small::before { content: "Private \00b7 "; color: #F0485D; }
  .metrics-private #perf-lat > :not(.perf-private), .metrics-private #perf-batch > :not(.perf-private) { display: none !important; }
  .perf-private { display: none; }
  .metrics-private .perf-private { display: grid; gap: 10px; padding: 26px 24px; }
  .perf-private p { margin: 0; font-size: 12px; line-height: 1.7; color: #BDBDBD; max-width: 70ch; }
  .perf-private .pp-k { font-size: 10px; letter-spacing: 0.22em; color: #F0485D; }
  .perf-private .pp-models { font-size: 10.5px; letter-spacing: 0.06em; color: #8E8E8E; }
  /* Pricing without enterprise: platforms block opens its own section */
  #enterprise .pt-sec { padding-top: 36px; border-top: 1px solid #262626; }
  #enterprise .pt-sec h2 { font-size: 12px; color: #F2F2F2; }

  /* =====================================================================
     Silena: open-source terminal agent
     ===================================================================== */
  .silena-page { display: none; background: #0B0B0B; color: #EDEDED; min-height: 100vh; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  body.silena-mode .silena-page { display: block; }
  body.silena-mode .hero, body.silena-mode .pillars, body.silena-mode .pl-stage, body.silena-mode .revenue, body.silena-mode .perf, body.silena-mode .regions, body.silena-mode .chips { display: none !important; }
  body.silena-mode { background: #0B0B0B; }
  .sn { max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(16px, 2.5vw, 44px) clamp(64px, 8vw, 110px); }
  .sn-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
  .sn-k { margin: 0 0 12px; font-size: 10px; letter-spacing: 0.22em; color: #F0485D; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .sn-tag { padding: 3px 7px; border: 1px solid #6A2A33; color: #FF7A8A; font-size: 9.5px; letter-spacing: 0.16em; }
  .sn-hero h1 { margin: 0 0 16px; font: 800 clamp(30px, 5.25vw, 52px)/0.95 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.06em; color: #F2F2F2; }
  .sn-lede { margin: 0 0 24px; max-width: 54ch; font-size: 11.5px; line-height: 1.75; color: #CFCFCF; }
  .sn-itabs { display: flex; gap: 0; margin-bottom: -1px; }
  .sn-itabs button { min-height: 34px; padding: 0 14px; border: 1px solid #333; border-bottom-color: transparent; background: none; color: #8E8E8E; cursor: pointer; font: 500 10px/1 'Red Hat Mono', monospace; letter-spacing: 0.16em; }
  .sn-itabs button + button { border-left: 0; }
  .sn-itabs button[aria-selected="true"] { color: #F2F2F2; background: #121212; box-shadow: inset 0 2px 0 #F0485D; }
  .sn-cmd { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid #333; background: #121212; overflow-x: auto; }
  .sn-cmd code { flex: 1; font-size: 12px; color: #EDEDED; white-space: nowrap; }
  .sn-cmd code::before { content: "$ "; color: #6E6E6E; }
  .sn-copy { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid #444; background: #0B0B0B; color: #EDEDED; cursor: pointer; font: 500 9.5px/1 'Red Hat Mono', monospace; letter-spacing: 0.16em; }
  .sn-copy:hover { border-color: #F0485D; }
  .sn-note { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: #8E8E8E; } .sn-note code { color: #EDEDED; }
  .sn-term { margin: 0; border: 1px solid #2A2A2A; border-radius: 10px; overflow: hidden; background: #070707; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(240,72,93,0.08); }
  .sn-tbar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #141414; border-bottom: 1px solid #222; }
  .sn-tbar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; } .sn-tbar i:nth-child(2) { background: #FEBC2E; } .sn-tbar i:nth-child(3) { background: #28C840; }
  .sn-tbar span { margin-left: 10px; font-size: 10px; color: #8E8E8E; }
  .sn-screen { margin: 0; height: 340px; overflow: hidden; padding: 16px 18px; font: 400 12px/1.75 'Red Hat Mono', ui-monospace, monospace; color: #CFCFCF; white-space: pre-wrap; }
  .sn-cmd { } .sn-screen .sn-t-cmd { color: #F2F2F2; } .sn-screen .sn-t-sys { color: #F0485D; } .sn-screen .sn-t-out { color: #9A9A9A; }
  .sn-screen .sn-t-ask { color: #E3B341; } .sn-screen .sn-t-ok { color: #3FB950; }
  .sn-screen .sn-t-cur { color: #F0485D; animation: slBlink 1s steps(1) infinite; }
  @keyframes slBlink { 50% { opacity: 0; } }
  .sn-sec { margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid #262626; }
  .sn-sec h2 { margin: 0 0 20px; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #F2F2F2; }
  .sn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #262626; border: 1px solid #262626; }
  .sn-grid article { background: #0F0F10; padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
  .sn-grid b { font: 700 13.5px/1.3 'PP Monument Wide', sans-serif; color: #F2F2F2; }
  .sn-grid p { margin: 0; font-size: 11.5px; line-height: 1.7; color: #BDBDBD; } .sn-grid code { color: #FF7A8A; }
  .sn-table-wrap { overflow-x: auto; border: 1px solid #262626; }
  .sn-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .sn-table th { text-align: left; padding: 12px 16px; font-weight: 500; font-size: 9.5px; letter-spacing: 0.2em; color: #8E8E8E; border-bottom: 1px solid #262626; }
  .sn-table td { padding: 12px 16px; border-bottom: 1px solid #1C1C1C; color: #CFCFCF; vertical-align: top; }
  .sn-table tr:last-child td { border-bottom: 0; }
  .sn-table code { color: #F2F2F2; white-space: nowrap; }
  @media (max-width: 960px) { .sn-hero { grid-template-columns: minmax(0, 1fr); } .sn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .sn-grid { grid-template-columns: minmax(0, 1fr); } .sn-screen { height: 300px; font-size: 10.5px; } }
  @media (prefers-reduced-motion: reduce) { .sn-screen .sn-t-cur { animation: none; } }

  /* =====================================================================
     Homepage = spinning logo only; the former homepage lives under API
     ===================================================================== */
  .home-splash { display: none; }
  body:not(.api-view):not([class*="-mode"]) .home-splash {
    display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100svh; background: var(--ground); color: #F6F2EF;
  }
  body:not(.api-view):not([class*="-mode"]) > .hero,
  body:not(.api-view):not([class*="-mode"]) > .pillars,
  body:not(.api-view):not([class*="-mode"]) > .pl-stage,
  body:not(.api-view):not([class*="-mode"]) > .revenue,
  body:not(.api-view):not([class*="-mode"]) > svg[aria-hidden="true"] { display: none !important; }
  body:not(.api-view):not([class*="-mode"]) { background: var(--ground); }
  .home-splash header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; position: relative; }
  .home-splash .wordmark { color: #F6F2EF; font: 700 15px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.14em; text-decoration: none; padding: 12px 0; }
  .home-splash nav { display: flex; gap: 0 clamp(24px, 5vw, 72px); }
  .home-splash nav a { color: #F6F2EF; text-decoration: none; font: 400 12px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.14em; padding: 14px 0; }
  .home-splash nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .home-splash main { display: grid; place-items: center; padding: 0 16px 8vh; }
  .home-splash #mark { margin: 0; font: 500 clamp(9px, 1.2vw, 13.5px)/1.08 'Red Hat Mono', ui-monospace, monospace; color: #F6F2EF; white-space: pre; user-select: none; }
  @media (min-width: 620px) { .home-splash nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } }
  @media (max-width: 619px) {
    .home-splash header { flex-wrap: wrap; }
    .home-splash .login { margin-left: auto; }
    .home-splash nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 0; }
  }
  /* API page header: the hero no longer holds the logo */
  .hero header nav a[aria-current="page"] { position: relative; color: #FFFFFF; text-decoration: underline; text-underline-offset: 7px; }
  @media (min-width: 620px) { .hero header nav a[aria-current="page"] { text-decoration: none; } .hero header nav a[aria-current="page"]::before { content: ""; position: absolute; right: 100%; margin-right: 8px; } }


  /* Homepage: solid spinning mark and the team line */
  .home-splash main { gap: 28px; align-content: center; justify-items: center; }
  .mark-solid { width: clamp(180px, 26vw, 300px); height: auto; overflow: visible; }
  .mark-solid polygon { stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.8; stroke-linejoin: round; }
  .home-line { margin: 0; max-width: 62ch; text-align: center; font: 400 11.5px/1.75 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.02em; color: rgba(246, 242, 239, 0.92); }
  @media (max-width: 640px) { .home-line { font-size: 11.5px; padding: 0 8px; } }

  /* Pricing, now the last section of the API page */
  .api-pricing { background: #111111; color: #EDEDED; padding: clamp(40px, 5vw, 64px) clamp(16px, 2.5vw, 44px) clamp(48px, 6vw, 80px); font-family: 'Red Hat Mono', ui-monospace, monospace; scroll-margin-top: 0; }
  .api-pricing .pr-wrap { max-width: 1200px; margin: 0 auto; padding: 0; }
  .api-pricing #pr-title { margin: 0 0 14px; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; color: #F2F2F2; }
  body:not(.api-view):not([class*="-mode"]) > .api-pricing { display: none !important; }
  body[class*="-mode"] .api-pricing { display: none; }

  /* =====================================================================
     Homepage mark and intro, modelled on silares.com
     ===================================================================== */
  .sp-mark { position: relative; width: clamp(200px, 30vw, 360px); aspect-ratio: 1; display: grid; place-items: center; }
  .sp-ring, .sp-dial { position: absolute; inset: 0; width: 100%; height: 100%; }
  .sp-ring { transform: rotate(-90deg); }
  .sp-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.4; stroke-dasharray: 620; stroke-dashoffset: 0; }
  .sp-dial { inset: -14%; width: 128%; height: 128%; }
  .sp-dial path { stroke: #F6F2EF; stroke-width: 2; fill: none; }
  .sp-logo { display: flex; flex-direction: column; align-items: center; }
  .sp-logo svg { display: block; height: clamp(54px, 8.4vw, 113px); width: auto; }
  .sp-logo path { fill: #F6F2EF; }
  .sp-top { transform: translateX(-50%); }
  .sp-bot { transform: translateX(50%); margin-top: calc(clamp(54px, 8.4vw, 113px) * -0.265); }
  .sp-dial { opacity: 0.7; transition: opacity 500ms cubic-bezier(.645,.045,.355,1); }
  /* intro start state */
  .sp-intro .sp-top { opacity: 0; transform: translate(-50%, -150%); }
  .sp-intro .sp-bot { opacity: 0; transform: translate(50%, 150%); }
  .sp-intro.sp-converge .sp-top { transform: translate(-50%, 0); transition: transform 200ms cubic-bezier(.895,.03,.685,.22); }
  .sp-intro.sp-converge .sp-bot { transform: translate(50%, 0); transition: transform 200ms cubic-bezier(.895,.03,.685,.22); }
  .sp-intro .sp-ring circle { stroke-dashoffset: 620; }
  .sp-intro.sp-ring-on .sp-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms cubic-bezier(.645,.045,.355,1); }
  .sp-intro .sp-dial { opacity: 0; }
  .sp-intro .home-line, .sp-intro header .wordmark, .sp-intro header nav a, .sp-intro header .login { opacity: 0; }
  /* safety net: if scripts never run, show everything after 4 s */
  .sp-intro .sp-top, .sp-intro .sp-bot, .sp-intro .home-line, .sp-intro header .wordmark, .sp-intro header nav a, .sp-intro header .login, .sp-intro .sp-dial { animation: spFailsafe 0s 4s forwards; }
  @keyframes spFailsafe { to { opacity: 1; } }
  .home-line { min-height: 3.5em; }
  @media (prefers-reduced-motion: reduce) { .sp-intro .sp-top, .sp-intro .sp-bot, .sp-intro .home-line, .sp-intro header .wordmark, .sp-intro header nav a, .sp-intro header .login, .sp-intro .sp-dial { opacity: 1 !important; } }
  .home-splash main { gap: clamp(48px, 7vh, 72px); }
  .sp-intro .sp-dial { transition: none; }
  .sp-intro .sp-dial[style*="opacity"] { transition: opacity 500ms cubic-bezier(.645,.045,.355,1); }
  /* Logo only: no ring or dial */
  .sp-mark { width: auto; aspect-ratio: auto; }
  .home-splash main { gap: clamp(36px, 6vh, 56px); }


  /* =====================================================================
     Type: PP Monument Wide for display and labels, Red Hat Mono for text
     ===================================================================== */
  .wordmark, .r-nav a, .hero header nav a, .home-splash nav a, .login, h1, h2, h3, .al-k, .kicker, .pl b, .pl-n,
  .perf-tabs button, .pr-tabs button, .pr-variant button, .ctr-label, .r-home, .foot-right a, .foot-talent {
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .wordmark { font-weight: 700; letter-spacing: 0.12em; }
  .r-nav a, .hero header nav a, .home-splash nav a, .login, .r-home { font-weight: 400; font-size: 11.5px; letter-spacing: 0.12em; }
  body { font-family: 'Red Hat Mono', ui-monospace, monospace; }

  /* Homepage statement section */
  .home-splash { position: relative; }
  .sp-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px; }
  .sp-cue svg { width: 14px; height: 22px; } .sp-cue path { fill: none; stroke: #F6F2EF; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .sp-cue { animation: spCue 2.4s ease-in-out infinite; }
  @keyframes spCue { 0%, 100% { opacity: 0.5; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 5px); } }
  .home-about { display: none; background: #111111; color: #EDEDED; padding: clamp(80px, 14vh, 160px) clamp(16px, 2.5vw, 44px); }
  body:not(.api-view):not([class*="-mode"]) .home-about { display: block; }
  .ha-wrap { max-width: 1200px; margin: 0 auto; }
  .ha-k { margin: 0 0 22px; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #F0485D; }
  .ha-title { margin: 0 0 28px; max-width: 22ch; font: 400 clamp(20px, 3.15vw, 34.5px)/1.12 'PP Monument Wide', 'Helvetica Neue', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #F2F2F2; }
  .ha-body { margin: 0 0 36px; max-width: 52ch; font: 400 clamp(12.5px, 0.94vw, 14.5px)/1.75 'Red Hat Mono', ui-monospace, monospace; color: #BDBDBD; }
  .ha-links { display: flex; flex-wrap: wrap; gap: 14px; }
  .ha-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid #F2F2F2; color: #F2F2F2; text-decoration: none; font: 400 11.5px/1 'PP Monument Wide', sans-serif; letter-spacing: 0.14em; transition: background 200ms ease, color 200ms ease; }
  .ha-links a:first-child { background: #F2F2F2; color: #111111; }
  .ha-links a:hover { background: #F0485D; border-color: #F0485D; color: #FFFFFF; }
  .home-about .ha-title, .home-about .ha-body, .home-about .ha-links, .home-about .ha-k { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
  .home-about.in .ha-k { opacity: 1; transform: none; }
  .home-about.in .ha-title { opacity: 1; transform: none; transition-delay: 100ms; }
  .home-about.in .ha-body { opacity: 1; transform: none; transition-delay: 250ms; }
  .home-about.in .ha-links { opacity: 1; transform: none; transition-delay: 400ms; }
  @media (prefers-reduced-motion: reduce) { .home-about .ha-title, .home-about .ha-body, .home-about .ha-links, .home-about .ha-k { opacity: 1; transform: none; transition: none; } .sp-cue { animation: none; } }

  /* Careers */
  .careers-page { display: none; background: #111111; color: #EDEDED; min-height: 100vh; }
  body.careers-mode .careers-page { display: block; }
  body.careers-mode { background: #111111; }
  body.careers-mode > .hero, body.careers-mode > .pillars, body.careers-mode > .pl-stage, body.careers-mode > .revenue, body.careers-mode > .api-pricing, body.careers-mode > .home-splash, body.careers-mode > .home-about { display: none !important; }
  .cr-wrap { max-width: 1000px; margin: 0 auto; padding: clamp(56px, 9vh, 110px) clamp(16px, 2.5vw, 44px) clamp(80px, 10vw, 140px); }
  .cr-list h1, .cr-job h1 { margin: 0 0 clamp(40px, 6vh, 64px); text-align: center; font: 400 clamp(18.5px, 2.25vw, 25px)/1.1 'PP Monument Wide', sans-serif; letter-spacing: 0.12em; color: #F2F2F2; }
  .cr-cards { display: grid; gap: 28px; }
  .cr-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 26px 26px 28px; border: 1px solid #2E2E2E; color: inherit; text-decoration: none; transition: border-color 200ms ease, background 200ms ease; }
  .cr-card:hover { border-color: #6E6E6E; background: #151515; }
  .cr-card h2 { margin: 0 0 18px; font: 400 clamp(13.5px, 1.05vw, 15px)/1.2 'PP Monument Wide', sans-serif; letter-spacing: 0.12em; color: #F2F2F2; }
  .cr-card p { margin: 0; font: 400 11.5px/1 'Red Hat Mono', monospace; color: #8E8E8E; }
  /* APPLY: red sweeps in from the left like READ THE DOCS (.dc-fill); the text fades to white with it */
  .cr-apply { position: relative; isolation: isolate; overflow: hidden; flex: none; padding: 10px 12px; background: #F2F2F2; color: #111111; font: 400 10.5px/1 'PP Monument Wide', sans-serif; letter-spacing: 0.14em; transition: color 420ms cubic-bezier(.2,.7,.2,1); }
  .cr-apply::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #F0485D; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
  .cr-card:hover .cr-apply, .cr-card:focus-visible .cr-apply { color: #FFFFFF; }
  .cr-card:hover .cr-apply::before, .cr-card:focus-visible .cr-apply::before { transform: scaleX(1); }
  .cr-job h1 { margin-bottom: 10px; }
  .cr-loc { margin: 0 0 clamp(40px, 6vh, 64px); text-align: center; font: 400 11.5px/1 'Red Hat Mono', monospace; color: #8E8E8E; }
  /* ALL ROLES matches ALL RESEARCH on posts (.post-all): red Red Hat Mono, and on wide screens the same spot,
     top left of the page (x = 12px + the post's side padding, level with the table of contents text, y = 122px), outside the job column */
  .cr-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 20px; color: #F0485D; text-decoration: none; font: 400 10.5px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; }
  .cr-back:hover { color: #FF7A8A; }
  @media (min-width: 1101px) {
    .careers-page { position: relative; }
    .cr-back { position: absolute; left: calc(12px + clamp(16px, 5.8vw, 74px)); top: 122px; min-height: 0; margin: 0; }
  }
  .cr-job h3 { margin: 48px 0 18px; font: 400 clamp(11.5px, 0.9vw, 13.5px)/1.2 'PP Monument Wide', sans-serif; letter-spacing: 0.14em; color: #F2F2F2; }
  .cr-job ul, .cr-job ol { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
  .cr-job li { font: 400 clamp(11.5px, 0.83vw, 13.5px)/1.7 'Red Hat Mono', monospace; color: #D6D6D6; }
  .cr-job li b { color: #F2F2F2; font-weight: 600; }
  .cr-cta { display: flex; justify-content: center; margin-top: 64px; }
  .cr-cv { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; min-height: 56px; padding: 0 36px; border: 1px solid #F2F2F2; color: #F2F2F2; text-decoration: none; font: 400 11.5px/1 'PP Monument Wide', sans-serif; letter-spacing: 0.14em; transition: border-color 420ms cubic-bezier(.2,.7,.2,1), color 420ms cubic-bezier(.2,.7,.2,1); }
  .cr-cv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #F0485D; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
  .cr-cv:hover, .cr-cv:focus-visible { border-color: #F0485D; color: #FFFFFF; }
  .cr-cv:hover::before, .cr-cv:focus-visible::before { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .cr-apply, .cr-apply::before, .cr-cv, .cr-cv::before { transition: none; } }
  .cr-list[hidden], .cr-job[hidden] { display: none; }


  /* Careers copy in Red Hat Mono: outside the articles the site uses only PP Monument Wide and Red Hat Mono */
  .cr-job li, .cr-card p, .cr-loc { font-family: 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.01em; }
  .cr-job li { font-size: 14.5px; line-height: 1.75; }
  .cr-job li b { font-weight: 600; }
  .cr-list[hidden], .cr-job[hidden] { display: none; }

  /* "AT ALL COSTS" under the mark, scrambling between languages as on silares.com */
  .sp-motto { margin: 0; min-height: 1.4em; text-align: center; font: 400 12px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #F6F2EF; }
  .home-splash main { gap: clamp(28px, 4.5vh, 44px); }

  /* =====================================================================
     Page transitions. The bar and nav stay put; the page body moves in the
     direction of travel along the nav (WRITING, API, DOCS, CAREERS).
     ===================================================================== */
  .pt-target { will-change: transform, opacity; }
  .pt-out-left  { animation: ptOutLeft 170ms cubic-bezier(.4,0,1,1) forwards; }
  .pt-out-right { animation: ptOutRight 170ms cubic-bezier(.4,0,1,1) forwards; }
  .pt-out-down  { animation: ptOutDown 170ms cubic-bezier(.4,0,1,1) forwards; }
  .pt-out-up    { animation: ptOutUp 170ms cubic-bezier(.4,0,1,1) forwards; }
  .pt-out-fade  { animation: ptOutFade 150ms linear forwards; }
  .pt-in-right  { animation: ptInRight 340ms cubic-bezier(.16,1,.3,1) both; }
  .pt-in-left   { animation: ptInLeft 340ms cubic-bezier(.16,1,.3,1) both; }
  .pt-in-up     { animation: ptInUp 340ms cubic-bezier(.16,1,.3,1) both; }
  .pt-in-down   { animation: ptInDown 340ms cubic-bezier(.16,1,.3,1) both; }
  .pt-in-fade   { animation: ptInFade 260ms ease-out both; }
  @keyframes ptOutLeft  { to { opacity: 0; transform: translateX(-28px); } }
  @keyframes ptOutRight { to { opacity: 0; transform: translateX(28px); } }
  @keyframes ptOutDown  { to { opacity: 0; transform: translateY(18px); } }
  @keyframes ptOutUp    { to { opacity: 0; transform: translateY(-18px); } }
  @keyframes ptOutFade  { to { opacity: 0; } }
  @keyframes ptInRight  { from { opacity: 0; transform: translateX(36px); } }
  @keyframes ptInLeft   { from { opacity: 0; transform: translateX(-36px); } }
  @keyframes ptInUp     { from { opacity: 0; transform: translateY(26px); } }
  @keyframes ptInDown   { from { opacity: 0; transform: translateY(-26px); } }
  @keyframes ptInFade   { from { opacity: 0; } }
  /* the nav's current-page marker slides in from the side you came from */
  .pt-mark-from-left a[aria-current="page"]  { animation: ptInLeft 380ms cubic-bezier(.16,1,.3,1) both; }
  .pt-mark-from-right a[aria-current="page"] { animation: ptInRight 380ms cubic-bezier(.16,1,.3,1) both; }
  @media (prefers-reduced-motion: reduce) {
    .pt-out-left, .pt-out-right, .pt-out-down, .pt-out-up, .pt-out-fade, .pt-in-right, .pt-in-left, .pt-in-up, .pt-in-down, .pt-in-fade,
    .pt-mark-from-left a[aria-current="page"], .pt-mark-from-right a[aria-current="page"] { animation: none !important; }
  }

  /* One logo size for both marks: the solid diamonds on the home page and the ASCII mark on the API page
     are sized from the same height, so moving between the two pages keeps the logo the same size. */
  :root { --mark-h: clamp(150px, 26vh, 230px); }
  .sp-logo svg { height: calc(var(--mark-h) / 1.735); }
  .sp-bot { margin-top: calc(var(--mark-h) / 1.735 * -0.265); }
  #mark, .mark-clone { font-size: calc(var(--mark-h) / 23.76) !important; line-height: 1.08; }

  /* Home, inverted: charcoal ground, the mark printed in red as a dot matrix (like the jacket),
     with a gradient into the section below, mirroring the API header's fade. */
  body:not(.api-view):not([class*="-mode"]) { background: #111111; }
  body:not(.api-view):not([class*="-mode"]) .home-splash {
    background:
      radial-gradient(42% 46% at 50% 47%, rgba(210, 0, 49, 0.16), rgba(210, 0, 49, 0) 70%),
      linear-gradient(to bottom, #1C1C1E 0%, #18181A calc(100% - 200px), #111111 100%);
    color: #EDEDED;
  }
  .home-splash .sp-logo path { fill: url(#sp-dots); }
  .home-splash .login { background: transparent; border: 1px solid rgba(240, 72, 93, 0.55); color: #F0485D; }
  .home-splash .login:hover { background: #D20031; border-color: #D20031; color: #FFFFFF; }
  .sp-motto { margin-top: clamp(28px, 6vh, 64px); color: #CFCFCF; }

  /* Docs, now the last section of the API page */
  .api-docs { display: none; background: #111111; color: #CFCFCF; padding: clamp(40px, 5vw, 64px) clamp(16px, 2.5vw, 44px) clamp(56px, 7vw, 96px); border-top: 1px solid #222222; }
  body.api-view .api-docs { display: block; }
  .api-docs .docs-layout { max-width: 1200px; margin: 0 auto; }
  .api-docs, .api-docs [id] { scroll-margin-top: 16px; }

  /* =====================================================================
     Home -> API hand-off: both first screens share one geometry, so the dotted
     diamonds become the spinning ASCII mark in the same spot, and AT ALL COSTS
     sits exactly where the curl command appears.
     ===================================================================== */
  :root { --line-gap: clamp(56px, 10vh, 108px); --motto-h: 17px; --hdr-h: 80px; }
  .home-splash, .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid !important; grid-template-rows: auto 1fr; }
  .home-splash header, .hero header { box-sizing: border-box; height: var(--hdr-h); align-content: center; padding: 20px 24px !important; margin: 0 !important; }
  .home-splash main, .hero main { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0 !important; padding: 0 16px 8vh !important; margin: 0 !important; min-height: 0; }
  .sp-motto { margin: var(--line-gap) 0 0 !important; height: var(--motto-h); line-height: var(--motto-h); }
  /* ASCII mark: crop the empty rows so its box is exactly the logo height */
  .hero .mark-clone { margin: calc(var(--mark-h) / -22 * 3) 0 calc(var(--mark-h) / -22 * 5) !important; }
  .api-line { width: 100%; height: var(--motto-h); margin-top: var(--line-gap); display: flex; align-items: center; justify-content: center; }
  .api-after { width: 100%; height: 0; overflow: visible; }
  .api-after .pitch { margin-top: calc(26px + 20px); }
  .hero .scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; }
  @media (max-width: 619px) { :root { --hdr-h: 136px; } }
  .api-docs { padding-top: clamp(32px, 4vw, 48px); }
  .api-docs .docs-layout { padding-top: 0 !important; margin-top: 0 !important; }

  /* Home: the charcoal top now merges into brand red at the bottom of the first screen,
     and the section below carries the red on and fades back to dark, the way the API header fades. */
  body:not(.api-view):not([class*="-mode"]) .home-splash {
    background:
      radial-gradient(42% 40% at 50% 42%, rgba(210, 0, 49, 0.14), rgba(210, 0, 49, 0) 70%),
      linear-gradient(to bottom, #1C1C1E 0%, #1A1A1C 52%, #3A0A15 76%, #9E0A2A 92%, #D20031 100%);
  }
  body:not(.api-view):not([class*="-mode"]) .home-about {
    background: linear-gradient(to bottom, #D20031 0%, #8E0A27 22%, #2A0B12 52%, #111111 78%);
  }
  .home-about .ha-k { color: #FFD9DF; }
  .sp-cue path { stroke: #FFFFFF; }

  /* Footer: small and quiet everywhere */
  .foot { padding-top: 40px !important; padding-bottom: 28px !important; }
  .foot .gc, .foot-left .foot-talent, .foot-right a, .foot-right span {
    font-family: 'Red Hat Mono', ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 0.14em !important; font-weight: 400 !important;
  }
  .foot .gc { color: var(--foot-muted, #8E8E8E); }
  .foot-left .foot-talent { margin-top: 4px; padding: 6px 0; text-underline-offset: 4px; }
  .foot-right a { padding: 8px 0; text-underline-offset: 4px; }
  .foot-right { gap: 14px; }
  .foot-right .sl { transform: scale(0.8); }
  .foot-mark { width: 18px; }
  @media (pointer: coarse) { .foot-left .foot-talent, .foot-right a { min-height: 32px; display: inline-flex; align-items: center; } }
  .foot-right { grid-column: -2 / -1; justify-self: end; }
  @media (max-width: 640px) { .foot-right { grid-column: auto; justify-self: center; } }

  /* No scroll arrow: the first screen stops short so the statement below peeks over the fold.
     The API header uses the same height, so the logo hand-off between the two pages still lines up. */
  :root { --peek: clamp(72px, 11vh, 104px); }
  .home-splash, .hero { min-height: calc(100vh - var(--peek)) !important; min-height: calc(100svh - var(--peek)) !important; }
  body:not(.api-view):not([class*="-mode"]) .home-about { padding-top: clamp(18px, 2.6vh, 28px); }
  .ha-title { margin-bottom: 22px; }
  .ha-body { margin-bottom: 0; }
  .home-about .ha-title { opacity: 1; transform: none; }
  /* API page sections each open with a rule and their heading: Tokens processed, Pricing, API docs */
  .api-pricing { border-top: 1px solid #222222; }
  .api-pricing #pr-title, .api-docs .docs-body > h1:first-child { margin-top: 0; }

  /* Home, revised: full first screen again (no peek), dark at the top turning to solid red
     through the lower half. The API header keeps the same height so the logo hand-off still lines up. */
  .home-splash, .hero { min-height: 100vh !important; min-height: 100svh !important; }
  body:not(.api-view):not([class*="-mode"]) .home-splash {
    background:
      radial-gradient(40% 34% at 50% 40%, rgba(210, 0, 49, 0.12), rgba(210, 0, 49, 0) 70%),
      linear-gradient(to bottom, #1C1C1E 0%, #1D1A1B 44%, #3A0A15 55%, #A00828 62%, #D20031 67%, #D20031 100%);
  }
  body:not(.api-view):not([class*="-mode"]) .home-about { padding-top: clamp(80px, 12vh, 140px); }
  .sp-motto { color: #FFFFFF; }

  /* Red lower half anchored to the layout, not to percentages: the fade starts just under the
     diamonds and is fully red just above AT ALL COSTS, at any window height. */
  body:not(.api-view):not([class*="-mode"]) .home-splash {
    background:
      radial-gradient(40% 34% at 50% 40%, rgba(210, 0, 49, 0.12), rgba(210, 0, 49, 0) 70%),
      #1C1C1E;
    overflow: hidden; isolation: isolate;
  }
  .home-splash .sp-motto { position: relative; }
  .home-splash .sp-motto::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; width: 300vw; transform: translateX(-50%);
    top: calc(var(--line-gap) * -1.7); height: 220vh;
    background: linear-gradient(to bottom, rgba(28, 28, 30, 0) 0, rgba(60, 8, 20, 0.75) calc(var(--line-gap) * 0.55), #6A0A1E calc(var(--line-gap) * 0.95), #B0082A calc(var(--line-gap) * 1.3), #D20031 calc(var(--line-gap) * 1.6), #D20031 100%);
  }

  /* Home colours reverted to black: charcoal first screen with only a faint red glow behind the mark,
     fading into the dark statement section. No red band. */
  body:not(.api-view):not([class*="-mode"]) .home-splash {
    background:
      radial-gradient(42% 46% at 50% 47%, rgba(210, 0, 49, 0.16), rgba(210, 0, 49, 0) 70%),
      linear-gradient(to bottom, #1C1C1E 0%, #18181A calc(100% - 200px), #111111 100%) !important;
  }
  .home-splash .sp-motto::before { content: none !important; display: none !important; }
  body:not(.api-view):not([class*="-mode"]) .home-about { background: #111111 !important; }
  .sp-motto { color: #CFCFCF !important; }

  /* Tokens processed now lives on the home page, under the team statement */
  body:not(.api-view):not([class*="-mode"]) > .revenue.home-tokens { display: block !important; background: #111111; }
  .home-tokens { padding-top: 0 !important; }
  body:not(.api-view):not([class*="-mode"]) .home-about { padding-bottom: clamp(56px, 8vh, 96px); }

  /* Scroll cue: a quiet label and a thin line with a red pulse travelling down it */
  .sp-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; color: #8E8E8E; transition: color 200ms ease; }
  .sp-scroll:hover { color: #EDEDED; }
  .sp-scroll-k { font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.3em; padding-left: 0.3em; }
  .sp-scroll-line { position: relative; width: 1px; height: 44px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
  .sp-scroll-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: linear-gradient(to bottom, rgba(210, 0, 49, 0), #F0485D); animation: spScroll 1.9s cubic-bezier(.6,0,.3,1) infinite; }
  @keyframes spScroll { 0% { top: -40%; } 70%, 100% { top: 100%; } }
  .sp-intro .sp-scroll { opacity: 0; }
  .sp-done .sp-scroll { opacity: 1; transition: opacity 600ms ease 300ms; }
  @media (prefers-reduced-motion: reduce) { .sp-scroll-line::after { animation: none; top: 30%; } }
  @media (max-height: 560px) { .sp-scroll { display: none; } }

  /* Room between the team statement and Tokens processed */
  .home-tokens { padding-top: clamp(96px, 14vh, 160px) !important; }
  .home-tokens .wrap, .home-tokens > div:first-child { position: relative; }
  .home-tokens::before { content: ""; display: block; max-width: 1200px; height: 1px; margin: 0 auto clamp(56px, 8vh, 88px); background: #262626; }

  /* Footer text a touch larger, everywhere */
  .foot .gc, .foot-left .foot-talent, .foot-right a, .foot-right span { font-size: 11.5px !important; }

  /* Learn more: a short tick, not a long bar */
  .sp-scroll-line { height: 18px !important; }
  .sp-scroll { gap: 8px; }

  /* Scrolling down splits the mark: the top shard slides left, the bottom shard right,
     opening up onto the team statement. Driven by --split (0 to 1) set from scroll position. */
  .home-splash .sp-top { translate: calc(var(--split, 0) * -42vw) calc(var(--split, 0) * -6vh); }
  .home-splash .sp-bot { translate: calc(var(--split, 0) * 42vw) calc(var(--split, 0) * 6vh); }
  .home-splash .sp-logo svg { opacity: calc(1 - var(--split, 0) * 0.85); }
  .home-splash .sp-motto, .home-splash .sp-scroll { opacity: calc(1 - var(--split, 0) * 2.2); }
  .sp-done .sp-scroll { transition: none; }

  /* Tokens processed: back on the API page, last section after Pricing and Docs */
  body.api-view > .revenue.api-tokens { display: block !important; border-top: 1px solid #222222; }
  .api-tokens::before { content: none !important; }
  .api-tokens { padding-top: clamp(40px, 5vw, 64px) !important; }

  /* Home: the mark opens like a door as you scroll. The shards part left and right and the
     team statement comes through. Clicking the mark does the same. */
  .home-splash .sp-mark { cursor: pointer; }
  .sp-open .sp-top, .sp-open .sp-bot { transition: none !important; }

  /* the statement fills the screen it opens onto */
  body:not(.api-view):not([class*="-mode"]) .home-about { min-height: 100vh; min-height: 100svh; display: flex !important; align-items: center; box-sizing: border-box; padding-top: clamp(64px, 10vh, 120px) !important; padding-bottom: clamp(64px, 10vh, 120px) !important; }
  .home-about .ha-wrap { width: 100%; }
  .home-splash { z-index: 0; }
  .home-about { position: relative; z-index: 1; }

  /* =====================================================================
     Home: timed open. Mark locks -> breaks apart left/right -> statement front and centre
     -> spinning mark appears to its right. No scrolling required.
     ===================================================================== */
  .home-splash main { position: relative; }
  .sp-open-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(40px, 7vw, 120px); padding: 0 clamp(20px, 5vw, 80px) 8vh; pointer-events: none; }
  .sp-statement { max-width: 760px; }
  .sp-statement .ha-title { margin: 0 0 26px; font: 400 clamp(26px, 3.4vw, 50px)/1.1 'PP Monument Wide', 'Helvetica Neue', sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: #F2F2F2; opacity: 1 !important; transform: none !important; }
  .sp-statement .ha-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
  .sp-statement .ha-title .ln > span { display: inline-block; transform: translateY(105%); transition: transform 900ms cubic-bezier(.16,1,.3,1); }
  .sp-statement .ha-body { margin: 0; max-width: 52ch; font: 400 clamp(13px, 1.1vw, 16px)/1.75 'Red Hat Mono', ui-monospace, monospace; color: #BDBDBD; opacity: 0; transform: translateY(10px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.16,1,.3,1); }
  .sp-opened .sp-open-stage { pointer-events: auto; }
  .sp-opened .sp-statement .ha-title .ln > span { transform: none; }
  .sp-opened .sp-statement .ha-title .ln:nth-child(2) > span { transition-delay: 90ms; }
  .sp-opened .sp-statement .ha-title .ln:nth-child(3) > span { transition-delay: 180ms; }
  .sp-opened .sp-statement .ha-body { opacity: 1; transform: none; transition-delay: 380ms; }
  .home-spin { flex: none; margin: calc(var(--mark-h) / -22 * 3) 0 calc(var(--mark-h) / -22 * 5); font: 500 calc(var(--mark-h) / 23.76)/1.08 'Red Hat Mono', ui-monospace, monospace; color: #E0193F; white-space: pre; user-select: none; opacity: 0; color: #F0485D !important; }
  /* the break: shards fly apart sideways and fade, the motto goes with them */
  .sp-opening .sp-top { transform: translate(calc(-50% - min(38vw, 520px)), 0) !important; opacity: 0 !important; transition: transform 700ms cubic-bezier(.7,0,.2,1), opacity 500ms ease 250ms !important; animation: none !important; }
  .sp-opening .sp-bot { transform: translate(calc(50% + min(38vw, 520px)), 0) !important; opacity: 0 !important; transition: transform 700ms cubic-bezier(.7,0,.2,1), opacity 500ms ease 250ms !important; animation: none !important; }
  .sp-opening .sp-motto { opacity: 0 !important; transition: opacity 300ms ease; }
  .sp-opened .sp-mark { pointer-events: none; }
  @media (max-width: 760px) {
    .sp-open-stage { flex-direction: column; justify-content: center; gap: 28px; padding-bottom: 6vh; text-align: left; }
    .sp-statement .ha-title { font-size: clamp(22px, 7vw, 30px); }
    .home-spin { --mark-h: 140px; order: 2; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sp-statement .ha-title .ln > span, .sp-statement .ha-body { transform: none !important; opacity: 1 !important; transition: none !important; }
    .sp-opened .sp-top, .sp-opened .sp-bot, .sp-opened .sp-motto { opacity: 0 !important; }
  }
  .home-about { display: none !important; }

  /* Home statement: bigger mark beside it, better-balanced type */
  .home-spin { --mark-h: clamp(260px, 40vh, 440px); }
  .sp-open-stage { gap: clamp(48px, 8vw, 150px); }
  .sp-statement { max-width: 820px; }
  .sp-statement .ha-title { font-size: clamp(30px, 3.7vw, 60px) !important; line-height: 1.06 !important; letter-spacing: 0.02em !important; margin-bottom: clamp(22px, 3vh, 34px) !important; }
  .sp-statement .ha-body { font-family: 'Red Hat Mono', ui-monospace, monospace !important; font-size: clamp(15px, 1.25vw, 19px) !important; line-height: 1.6 !important; letter-spacing: 0.005em !important; max-width: 44ch !important; color: #C4C4C4 !important; }
  @media (max-width: 760px) { .home-spin { --mark-h: 170px; } .sp-statement .ha-title { font-size: clamp(24px, 7.4vw, 32px) !important; } }
  @media (min-width: 761px) {
    .sp-statement { max-width: none; }
    .sp-statement .ha-title { font-size: clamp(28px, 3.25vw, 56px) !important; }
    .sp-statement .ha-title .ln > span { white-space: nowrap; }
  }

  /* Home statement: calmer heading, readable body, bigger mark beside it */
  .sp-open-stage { gap: clamp(48px, 8vw, 140px); }
  .sp-statement { max-width: 620px; }
  .sp-statement .ha-title { font-size: clamp(24px, 2.7vw, 40px) !important; line-height: 1.12 !important; letter-spacing: 0.035em !important; margin-bottom: 24px !important; }
  .sp-statement .ha-body { font-family: 'Red Hat Mono', ui-monospace, monospace !important; font-size: clamp(15px, 1.15vw, 17px) !important; line-height: 1.65 !important; letter-spacing: 0.01em; color: #C8C8C8 !important; max-width: 46ch !important; }
  .home-spin { --mark-h: clamp(240px, 38vh, 360px); }
  @media (max-width: 760px) { .home-spin { --mark-h: 170px; } .sp-statement .ha-title { font-size: clamp(22px, 6.4vw, 28px) !important; } }

  /* "We are ___": the role holds, the whole line scrambles out, and it scrambles back in with the next role */
  .sp-statement .ha-title .ln-type { min-height: 2.24em; }          /* room for a two-line role, so nothing jumps */
  .ha-typed { color: #F2F2F2; }
  .ha-caret { display: inline-block; width: 0.09em; height: 0.92em; margin-left: 0.08em; vertical-align: -0.08em; background: #F0485D; animation: haCaret 1s steps(1) infinite; }
  .ha-busy .ha-caret { visibility: hidden; }                          /* caret only shows (blinking) while a role is held */
  @keyframes haCaret { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .ha-caret { animation: none; } }
  /* fixed width so the group never re-centres while a role types out */
  .sp-statement { width: min(640px, 54vw); flex: none; }
  @media (max-width: 760px) { .sp-statement { width: 100%; } }

  /* =====================================================================
     Mobile pass
     ===================================================================== */
  /* the API header's grid must never grow to fit the one-line curl command */
  .hero, .home-splash { grid-template-columns: minmax(0, 1fr); }
  .hero main, .home-splash main { min-width: 0; width: 100%; box-sizing: border-box; }
  .api-line { min-width: 0; max-width: 100%; }
  /* research list rows: date wraps under the title instead of pushing the row wider */
  .r-item { min-width: 0; max-width: 100%; box-sizing: border-box; flex-wrap: wrap; }
  .r-item > * { min-width: 0; }
  /* tables inside posts and docs scroll sideways inside themselves */
  .post table, .docs-body table, .legal table { display: block; max-width: 100%; overflow-x: auto; }
  /* comfortable tap targets for small links */
  @media (max-width: 820px), (pointer: coarse) {
    .docs-toc a { display: flex; align-items: center; min-height: 40px; }
    .legal-bar a, .legal-tabs a, .doc-tabs a { display: inline-flex; align-items: center; min-height: 40px; }
    .fnref a, a.fnref { display: inline-block; min-width: 24px; min-height: 32px; text-align: center; }
  }
  /* nothing readable smaller than 11px on phones (any width, including landscape) */
  @media (max-width: 820px), (pointer: coarse) {
    #ab-svg text,
    .ab-head,
    .al-badge,
    .al-btn,
    .al-btn-sm,
    .al-by,
    .al-chat-top span,
    .al-chips button,
    .al-form label,
    .al-form legend,
    .al-fp,
    .al-how b,
    .al-k,
    .al-legends .lg-a,
    .al-legends .lg-v,
    .al-m small,
    .al-note,
    .al-paper .al-pmeta,
    .al-perf,
    .al-stats span,
    .al-tabs button,
    .al-threads button small,
    .alm-stats,
    .alm-stats span,
    .am-tags li,
    .ap-k,
    .ap-phone figcaption,
    .ap-status,
    .as-bar span,
    .as-cap,
    .as-fhead p,
    .as-fstats span,
    .as-get,
    .as-logr,
    .as-meta small,
    .as-perf,
    .as-say b,
    .as-side p,
    .as-tiles span,
    .case-links a span,
    .chip .anno,
    .chip .vendor,
    .codeblock .cb-copy,
    .comp .comp-tags,
    .comp .status,
    .cr-apply,
    .cr-back,
    .ctr-label,
    .ctr-rate,
    .ctr-soon,
    .cz-cta,
    .cz-h,
    .cz-tag,
    .db-btn,
    .db-card h2,
    .db-chart text,
    .db-filter,
    .db-group h3,
    .db-kpi small,
    .db-kpi span,
    .db-method .off,
    .db-sub,
    .db-tbl th,
    .detail .amt,
    .detail .when,
    .doc .meta,
    .docs-body .codeblock .cb-copy,
    .docs-body .endpoint b,
    .docs-body .req,
    .docs-body .tbl th,
    .docs-body h3,
    .docs-toc p,
    .ds-s,
    .endpoint b,
    .ent-comp .comp-sec > h2,
    .ent-err,
    .ent-field label,
    .ent-head + .pt-sec h2,
    .ent-in-pricing .comp-sec > h2,
    .ent-note,
    .ex-k,
    .ex-us span,
    .foot .gc,
    .foot-left .foot-talent,
    .foot-right a,
    .foot-right span,
    .ha-k,
    .jur,
    .kicker,
    .lang-tabs button,
    .legal-bar nav a,
    .live-lab,
    .m-org,
    .m-var,
    .map-tip .tt-loc,
    .map-tip .tt-row,
    .map-tip code,
    .marker span,
    .metro-lab,
    .mq-label,
    .perf-private .pp-k,
    .perf-private .pp-models,
    .perf-tabs button,
    .ph-input,
    .ph-msgs p,
    .ph-top,
    .ph-top span:first-child,
    .ph-voice,
    .pl-n,
    .plan-k,
    .post-all,
    .post-back a,
    .post-body .bib,
    .post-body .eq-note,
    .post-body .paper-btn,
    .post-body figcaption,
    .post-by,
    .post-date,
    .post-notes ol,
    .post-tbl table,
    .post-tbl th,
    .post-toc button,
    .pr-count,
    .pr-foot,
    .pr-note,
    .pr-soon b,
    .pr-tabs button,
    .pr-tbl th,
    .pr-variant button,
    .pt-tag,
    .pt.ph .pt-name,
    .r-date,
    .r-home,
    .r-nav a,
    .r-num,
    .r-tag,
    .race-ctl,
    .race-foot,
    .race-head,
    .race-name small,
    .race-stats span,
    .reg-col h3,
    .reg-col h3 button,
    .reg-col li .rl-meta,
    .reg-col li.soon code,
    .reg-filter button,
    .reg-foot,
    .reg-mobile .rm-h,
    .reg-mobile span,
    .req,
    .rm-k,
    .rm-who,
    .sch-grid .dow,
    .sch-tz label,
    .scroll-cue,
    .seal text,
    .sec-h2,
    .sn-copy,
    .sn-itabs button,
    .sn-k,
    .sn-screen,
    .sn-table th,
    .sn-tag,
    .sn-tbar span,
    .sp-scroll-k,
    .st-banner small,
    .st-filter,
    .st-inc time,
    .st-name small,
    .st-note,
    .st-scale,
    .st-sec > h2,
    .st-state,
    .st-tag,
    .st-up small,
    .stat .label,
    .tbl th,
    .tc-grid small,
    .tc-grid span,
    .tc-h,
    .tick span,
    .ytitle,
    .zr-ctl,
    .zr-grid,
    .zr-head,
    .zr-label,
    .zr-regs > span,
    /* Smaller LOGIN button everywhere; the tap area stays 44px tall */
  .login { font-size: 11px !important; }
  }

  /* =====================================================================
     Home footer: part of the first screen, revealed once the mark has opened
     ===================================================================== */
  body:not(.api-view):not([class*="-mode"]) > .foot { opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
  body.home-opened:not(.api-view):not([class*="-mode"]) > .foot { opacity: 1; pointer-events: auto; }
  .sp-open-stage { pointer-events: none !important; }
  .sp-open-stage .sp-statement, .sp-open-stage .home-spin { pointer-events: auto; }
  @media (min-width: 761px) and (min-height: 560px) {
    body:not(.api-view):not([class*="-mode"]) { position: relative; }
    body:not(.api-view):not([class*="-mode"]) > .foot { position: absolute; left: 0; right: 0; bottom: 0; background: transparent !important; padding-top: 0 !important; z-index: 2; }
  }

  /* Nav hover: no underline; the label scrambles into place like the footer links (site.js) */
  .home-splash nav a:hover, .hero header nav a:hover, .r-nav a:hover { text-decoration: none !important; }

  /* footer links scramble on hover (see site.js); keep their width steady while they do */
  .foot a .scr { display: inline-block; }

  /* "We are ___": the typed role always sits on one line, at a size the longest role fits */
  .sp-statement .ha-title { font-size: clamp(18px, 2.25vw, 32px) !important; }
  .sp-statement .ha-title .ln-type { min-height: 0; white-space: nowrap; }
  .sp-statement .ha-title .ln-type > span { white-space: nowrap; }
  @media (max-width: 760px) { .sp-statement .ha-title { font-size: min(4.4vw, 22px) !important; } }
  /* the line masks clip only vertically (for the slide-up reveal), never the end of a word */
  .sp-statement .ha-title { display: block; width: 100%; }
  .sp-statement .ha-title .ln { overflow: visible !important; clip-path: inset(0 -100vw 0 -100vw); width: 100%; }
  .sp-statement .ha-title { max-width: none !important; }

  /* Home subtext: harder, wide, uppercase, with a red rule; reads as a statement, not a caption */
  .sp-statement .ha-body {
    font-family: 'PP Monument Wide', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important; text-transform: uppercase;
    font-size: clamp(11px, 0.92vw, 13.5px) !important; line-height: 1.75 !important; letter-spacing: 0.07em !important;
    color: #EDEDED !important; max-width: 46ch !important;
    padding-left: 16px; border-left: 2px solid #E0193F;
  }
  @media (max-width: 760px) { .sp-statement .ha-body { font-size: 11.5px !important; padding-left: 12px; } }

  /* Home headline on ONE line: "WE ARE <role>". Each part is its own inline mask for the slide-up reveal. */
  .sp-statement { width: min(760px, 60vw) !important; }
  .sp-statement .ha-title { white-space: nowrap !important; font-size: clamp(13px, 1.85vw, 28px) !important; line-height: 1.2 !important; }
  .sp-statement .ha-title .ln { display: inline-block !important; width: auto !important; overflow: hidden !important; clip-path: none !important; vertical-align: bottom; padding-bottom: 0.08em; }
  .sp-statement .ha-title .ln-type { min-height: 0 !important; }
  /* nothing from the statement shows until the mark has opened */
  .home-splash:not(.sp-opened) .sp-open-stage { visibility: hidden; }
  @media (max-width: 760px) {
    .sp-statement { width: 100% !important; }
    .sp-statement .ha-title { font-size: min(3.55vw, 18px) !important; }
  }
  .home-splash nav a, .hero header nav a, .r-nav a, .foot a { display: inline-block; }

  /* =====================================================================
     Home "About": three statements, one per line, each landing on its own as you scroll
     ===================================================================== */
  /* the footer goes back into the page flow, after this section */
  @media (min-width: 761px) and (min-height: 560px) {
    body:not(.api-view):not([class*="-mode"]) > .foot { position: static !important; padding-top: 40px !important; }
  }
  .home-build { display: none; background: #111111; color: #F2F2F2; }
  body:not(.api-view):not([class*="-mode"]) .home-build { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: clamp(72px, 12vh, 140px) clamp(20px, 4vw, 64px); }
  .hb-wrap { width: 100%; max-width: 1200px; margin: 0 auto; }
  .hb-k { margin: 0 0 clamp(36px, 6vh, 64px); font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.3em; color: #8E8E8E; }
  .hb-line { display: grid; grid-template-columns: clamp(36px, 4vw, 60px) minmax(0, 1fr); align-items: baseline; gap: clamp(12px, 2vw, 28px); margin: 0; padding: clamp(18px, 3vh, 30px) 0; border-top: 1px solid #262626; overflow: hidden; }
  .hb-line:last-child { border-bottom: 1px solid #262626; }
  .hb-n { font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #E0193F; }
  .hb-t { display: block; font: 400 clamp(20px, 3.6vw, 54px)/1.08 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: #F2F2F2; }
  .hb-lead { color: #E0193F; }
  /* each line slides up into view, one after another, when it reaches the screen */
  .hb-line .hb-t, .hb-line .hb-n { transform: translateY(110%); opacity: 0; transition: transform 900ms cubic-bezier(.16,1,.3,1), opacity 500ms ease; }
  .hb-line.in .hb-t, .hb-line.in .hb-n { transform: none; opacity: 1; }
  .hb-line.in .hb-t { transition-delay: 80ms; }
  @media (prefers-reduced-motion: reduce) { .hb-line .hb-t, .hb-line .hb-n { transform: none; opacity: 1; transition: none; } }
  @media (max-width: 760px) { .hb-line { grid-template-columns: 28px minmax(0, 1fr); } .hb-t { font-size: clamp(18px, 6vw, 26px); } }

  /* Home About, simplified: centred mono caps, one idea per line, red links and one solid red button */
  body:not(.api-view):not([class*="-mode"]) .home-build { justify-content: center; }
  .home-build .hb-wrap { max-width: 980px; text-align: center; }
  .home-build .hb-k { margin: 0 0 30px; font: 400 14px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #E0193F; }
  .home-build .hb-p { margin: 0 auto 26px; max-width: 72ch; font: 400 clamp(12.5px, 1.05vw, 15px)/1.7 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #E6E6E6; }
  .home-build .hb-gap { margin-top: 64px; }
  .home-build .hb-strong { color: #FFFFFF; margin-bottom: 34px; }
  .home-build .hb-p a { color: #E0193F; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .home-build .hb-p a:hover { color: #FF4D6A; }
  .home-build .hb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 44px; background: #C4162F; color: #FFFFFF; text-decoration: none; font: 400 14px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; transition: background 200ms ease; }
  .home-build .hb-btn:hover { background: #E0193F; }
  .home-build .hb-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
  /* gentle arrival as the section comes into view */
  .home-build .hb-wrap > * { opacity: 0; transform: translateY(10px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.16,1,.3,1); }
  .home-build.in .hb-wrap > * { opacity: 1; transform: none; }
  .home-build.in .hb-wrap > *:nth-child(2) { transition-delay: 80ms; } .home-build.in .hb-wrap > *:nth-child(3) { transition-delay: 160ms; }
  .home-build.in .hb-wrap > *:nth-child(4) { transition-delay: 260ms; } .home-build.in .hb-wrap > *:nth-child(5) { transition-delay: 320ms; } .home-build.in .hb-wrap > *:nth-child(6) { transition-delay: 380ms; }
  @media (prefers-reduced-motion: reduce) { .home-build .hb-wrap > * { opacity: 1; transform: none; transition: none; } }
  @media (max-width: 760px) { .home-build .hb-p { font-size: 12.5px; } .home-build .hb-gap { margin-top: 44px; } }
  .home-build .hb-wrap { max-width: 1100px; } .home-build .hb-p { max-width: none; text-wrap: balance; }

  /* Home About (numbered statements), each statement held to ONE line: the type is sized from the
     container width so the longest line exactly fits. */
  .hb-lines .hb-wrap { max-width: 1200px !important; text-align: left !important; container-type: inline-size; }
  .hb-lines .hb-wrap > * { opacity: 1; transform: none; }
  .hb-lines .hb-k { margin: 0 0 clamp(36px, 6vh, 64px) !important; font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: 0.3em !important; color: #8E8E8E !important; text-transform: none; }
  .hb-lines .hb-line { grid-template-columns: 48px minmax(0, 1fr); gap: 20px; }
  .hb-lines .hb-t { white-space: nowrap; font-size: min(2.6vw, 36px); }
  @supports (font-size: 1cqi) { .hb-lines .hb-t { font-size: min(calc((100cqi - 68px) / 31.5), 40px); } }
  /* phones: one line would mean ~9px type, so statements wrap at a readable size instead */
  @media (max-width: 600px) { .hb-lines .hb-line { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; } .hb-lines .hb-t { white-space: normal; font-size: clamp(18px, 5.6vw, 24px) !important; } }

  /* =====================================================================
     Home, one screen: "WE ARE ___", then the three statements underneath, then the
     footer at the bottom. Everything a visitor needs without scrolling.
     ===================================================================== */
  .sp-statement { container-type: inline-size; }
  .sp-statement .hb-list { margin-top: clamp(22px, 3.4vh, 36px); }
  .sp-statement .hb-line { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; gap: 12px; margin: 0; padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid #2A2A2A; overflow: hidden; }
  .sp-statement .hb-line:last-child { border-bottom: 1px solid #2A2A2A; }
  .sp-statement .hb-n { font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #E0193F; }
  .sp-statement .hb-t { display: block; white-space: nowrap; font: 400 min(2vw, 22px)/1.1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: #F2F2F2; }
  @supports (font-size: 1cqi) { .sp-statement .hb-t { font-size: min(calc((100cqi - 44px) / 31.5), 22px); } }
  .sp-statement .hb-lead { color: #E0193F; }
  /* the statements land one after another once the headline has come forward */
  .sp-statement .hb-line .hb-t, .sp-statement .hb-line .hb-n { transform: translateY(115%); opacity: 0; transition: transform 800ms cubic-bezier(.16,1,.3,1), opacity 400ms ease; }
  .sp-opened .sp-statement .hb-line .hb-t, .sp-opened .sp-statement .hb-line .hb-n { transform: none; opacity: 1; }
  .sp-opened .sp-statement .hb-line:nth-child(1) > * { transition-delay: 380ms; }
  .sp-opened .sp-statement .hb-line:nth-child(2) > * { transition-delay: 500ms; }
  .sp-opened .sp-statement .hb-line:nth-child(3) > * { transition-delay: 620ms; }
  @media (prefers-reduced-motion: reduce) { .sp-statement .hb-line .hb-t, .sp-statement .hb-line .hb-n { transform: none; opacity: 1; transition: none; } }
  /* footer back at the bottom of the first screen (it still waits for the opening) */
  @media (min-width: 761px) and (min-height: 560px) {
    body:not(.api-view):not([class*="-mode"]) > .foot { position: absolute !important; left: 0; right: 0; bottom: 0; padding-top: 0 !important; }
  }
  @media (max-width: 760px) { .sp-statement .hb-t { white-space: normal; font-size: clamp(15px, 4.6vw, 19px) !important; } .sp-statement .hb-line { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; } }
  @media (max-width: 820px), (pointer: coarse) { .sp-statement .hb-n { font-size: 11px; } }

  /* statement 02 is a full sentence: it may wrap, balanced across two lines, at the same size as 01 */
  .sp-statement .hb-long .hb-t { white-space: normal; text-wrap: balance; line-height: 1.25; }

  /* =====================================================================
     One header, identical on every page, so it never moves during a page change
     ===================================================================== */
  .home-splash header, .hero header, .r-bar {
    position: relative; box-sizing: border-box; height: 80px; margin: 0 !important; padding: 0 24px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px; border-bottom: 0 !important;
  }
  .home-splash header .wordmark, .hero header .wordmark, .r-bar .wordmark {
    font: 700 15px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.12em !important; padding: 12px 0 !important; margin: 0 !important; color: #F6F2EF !important;
  }
  .r-bar .r-home { display: none !important; }          /* the wordmark already goes home */
  @media (min-width: 620px) {
    .home-splash header nav, .hero header nav, .r-bar .r-nav { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; flex-wrap: nowrap !important; gap: 0 clamp(24px, 5vw, 72px) !important; }
  }
  .home-splash header .login, .hero header .login, .r-bar .login { margin: 0 0 0 auto !important; height: 32px; box-sizing: border-box; }
  @media (max-width: 619px) {
    .home-splash header, .hero header, .r-bar { height: 136px; flex-wrap: wrap !important; align-content: center !important; row-gap: 14px; padding: 0 24px !important; }
    .home-splash header nav, .hero header nav, .r-bar .r-nav { order: 3; flex-basis: 100%; display: flex !important; justify-content: space-between !important; gap: 0 !important; position: static !important; transform: none !important; }
  }
  .home-splash header nav a, .hero header nav a, .r-bar .r-nav a { display: inline-block !important; padding: 12px 0 !important; font: 400 11.5px/16px 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.14em !important; }
  .home-splash header .login, .hero header .login, .r-bar .login { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 14px !important; font: 400 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.14em !important; }
  .home-splash header .login, .hero header .login, .r-bar .login { border: 1px solid rgba(240, 72, 93, 0.55) !important; width: 79px; }
  @media (max-width: 619px) {
    .home-splash header, .hero header, .r-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 64px 56px; align-items: center; align-content: start; row-gap: 0; padding: 8px 24px !important; height: 136px; }
    .home-splash header .wordmark, .hero header .wordmark, .r-bar .wordmark { grid-column: 1; grid-row: 1; justify-self: start; }
    .home-splash header .login, .hero header .login, .r-bar .login { grid-column: 2; grid-row: 1; }
    .home-splash header nav, .hero header nav, .r-bar .r-nav { grid-column: 1 / -1; grid-row: 2; align-self: center; }
  }
  @media (max-width: 619px) { .home-splash header nav, .hero header nav, .r-bar .r-nav { height: 40px; padding: 0 !important; margin: 0 !important; align-items: center !important; align-self: center !important; } .home-splash header nav a, .hero header nav a, .r-bar .r-nav a { margin: 0 !important; } }

  /* arriving on the home page from another page: no intro, the opened state is simply there */
  .sp-instant .sp-top, .sp-instant .sp-bot, .sp-instant .sp-motto, .sp-instant .ha-title .ln > span,
  .sp-instant .hb-line > *, .sp-instant .home-spin, .sp-instant header * { transition: none !important; }
  .sp-instant .home-spin { opacity: 1 !important; }
  body.home-opened .sp-instant ~ .foot, .sp-instant ~ .foot { transition: none !important; }

  /* Home: one strong line under "WE ARE ___", then the plain-language description */
  .sp-statement .hb-one { margin: clamp(20px, 3vh, 30px) 0 0; padding: clamp(12px, 1.8vh, 16px) 0; border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A; white-space: nowrap; overflow: hidden;
    font: 400 min(2vw, 22px)/1.1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; color: #F2F2F2; }
  @supports (font-size: 1cqi) { .sp-statement .hb-one { font-size: min(calc(100cqi / 21), 22px); } }
  .sp-statement .hb-desc { margin: clamp(16px, 2.4vh, 22px) 0 0; max-width: 56ch; font: 400 clamp(13px, 1vw, 15px)/1.65 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.01em; color: #B8B8B8; }
  .sp-statement .hb-one, .sp-statement .hb-desc { opacity: 0; transform: translateY(10px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.16,1,.3,1); }
  .sp-opened .sp-statement .hb-one { opacity: 1; transform: none; transition-delay: 380ms; }
  .sp-opened .sp-statement .hb-desc { opacity: 1; transform: none; transition-delay: 560ms; }
  .sp-instant .sp-statement .hb-one, .sp-instant .sp-statement .hb-desc { transition: none !important; }
  @media (prefers-reduced-motion: reduce) { .sp-statement .hb-one, .sp-statement .hb-desc { opacity: 1; transform: none; transition: none; } }
  @media (max-width: 760px) { .sp-statement .hb-one { white-space: normal; font-size: clamp(15px, 4.6vw, 19px) !important; } .sp-statement .hb-desc { font-size: 14px; } }

  /* Footer centre: the competition line, small and quiet */
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr) !important; }
  .foot-motto { grid-column: 2; align-self: end; margin: 0; max-width: 46ch; text-align: center; font: 400 11.5px/1.7 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foot-muted, #8E8E8E); padding-bottom: 6px; }
  @media (max-width: 640px) { .foot { grid-template-columns: minmax(0, 1fr) !important; } .foot-motto { grid-column: auto; order: -1; padding-bottom: 0; } }

  /* =====================================================================
     Calmer home: a static dotted mark with a slow light tracing its edges, no rules around the
     one-liner, a plain descriptive line, and a one-line footer statement
     ===================================================================== */
  .home-mark { flex: none; height: var(--mark-h, 360px); width: auto; overflow: visible; opacity: 0; }
  .home-mark .hm-fill path { fill: url(#sp-dots); }
  .home-mark .hm-edge path { fill: none; stroke: rgba(240, 72, 93, 0.22); stroke-width: 0.35; vector-effect: non-scaling-stroke; }
  .home-mark .hm-trace path { fill: none; stroke: #FF5A70; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 9 91; stroke-dashoffset: 100; animation: hmTrace 7s linear infinite; filter: drop-shadow(0 0 3px rgba(255, 70, 95, 0.8)); }
  .home-mark .hm-trace .hm-b { animation-delay: -3.5s; }
  @keyframes hmTrace { to { stroke-dashoffset: 0; } }
  .home-spin { display: none !important; }
  @media (prefers-reduced-motion: reduce) { .home-mark .hm-trace path { animation: none; stroke-dasharray: none; stroke: rgba(240, 72, 93, 0.5); filter: none; } }
  @media (max-width: 760px) { .home-mark { --mark-h: 180px; } }

  .sp-statement .hb-one { border-top: 0 !important; border-bottom: 0 !important; padding: 0 !important; margin-top: clamp(14px, 2vh, 20px) !important; }
  .sp-statement .hb-desc { font: 400 12px/1.75 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: 0.04em !important; color: #8E8E8E !important; max-width: none !important; text-wrap: pretty; margin-top: clamp(16px, 2.4vh, 22px) !important; }

  .foot-motto { max-width: none !important; }
  @media (min-width: 1000px) { .foot-motto { white-space: nowrap; } }
  .home-mark { --mark-h: clamp(260px, 40vh, 380px); }  @media (max-width: 760px) { .home-mark { --mark-h: 180px; } }
  /* "BUILDING …" matches the "WE ARE ___" line exactly */
  .sp-statement .hb-one { font-size: clamp(13px, 1.85vw, 28px) !important; line-height: 1.2 !important; letter-spacing: inherit; }
  @supports (font-size: 1cqi) { .sp-statement .hb-one { font-size: clamp(13px, 1.85vw, 28px) !important; } }
  @media (max-width: 760px) { .sp-statement .hb-one { font-size: min(3.55vw, 18px) !important; white-space: nowrap; } }
  .sp-statement .hb-one { letter-spacing: 0.035em !important; }
  .sp-statement { width: min(940px, 62vw) !important; }
  @media (max-width: 760px) { .sp-statement { width: 100% !important; } .sp-statement .hb-one { white-space: normal !important; overflow: visible; } }
  .sp-statement { max-width: none !important; }

  /* =====================================================================
     Cyberpunk accents on the home intro, each played once:
     glitch on lock, a short HUD readout, and a signal break when the mark opens
     ===================================================================== */
  /* 1. glitch on lock: slices jump sideways with a red/cyan split, then snap clean */
  .sp-glitch .sp-logo { animation: spGlitch 260ms steps(1) 1; }
  @keyframes spGlitch {
    0%   { transform: translate(-6px, 0) skewX(-8deg); clip-path: inset(8% 0 58% 0); filter: drop-shadow(-4px 0 0 rgba(0, 240, 255, 0.85)) drop-shadow(4px 0 0 rgba(255, 0, 60, 0.9)); }
    18%  { transform: translate(7px, 0); clip-path: inset(56% 0 10% 0); filter: drop-shadow(5px 0 0 rgba(0, 240, 255, 0.85)) drop-shadow(-3px 0 0 rgba(255, 0, 60, 0.9)); }
    36%  { transform: translate(-3px, 0); clip-path: inset(30% 0 34% 0); filter: drop-shadow(-2px 0 0 rgba(0, 240, 255, 0.8)) drop-shadow(2px 0 0 rgba(255, 0, 60, 0.85)); }
    54%  { transform: translate(4px, 0); clip-path: none; filter: drop-shadow(2px 0 0 rgba(0, 240, 255, 0.6)) drop-shadow(-2px 0 0 rgba(255, 0, 60, 0.7)); }
    72%  { transform: translate(-1px, 0); clip-path: none; filter: none; }
    100% { transform: none; clip-path: none; filter: none; }
  }
  /* 2. HUD readout beside the locked mark */
  .sp-hud { position: absolute; left: calc(50% + 70px); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; pointer-events: none;
    font: 400 10.5px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: #8E8E8E; text-transform: uppercase; white-space: pre; }
  .sp-hud li { opacity: 0; }
  .sp-hud li.on { opacity: 1; }
  .sp-hud b { font-weight: 400; color: #F0485D; }
  .sp-hud.off { opacity: 0; transition: opacity 120ms steps(2); }
  .sp-mark { position: relative; }
  @media (max-width: 760px) { .sp-hud { display: none; } }
  /* 4. signal break: horizontal bands of the mark scatter and flicker out (bands are built in site.js) */
  .sp-break { position: fixed; pointer-events: none; z-index: 30; }
  .sp-break .sp-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
  .sp-break-on .sp-top, .sp-break-on .sp-bot { opacity: 0 !important; transition: none !important; }
  @media (prefers-reduced-motion: reduce) { .sp-glitch .sp-logo { animation: none; } .sp-hud, .sp-break { display: none !important; } }

  /* Opened home mark: no edge trace; instead a short glitch fires every few seconds */
  .home-mark .hm-trace { display: none; }
  .sp-spin-on .home-mark { animation: hmGlitch 5.6s steps(1) 1.2s infinite; }
  @keyframes hmGlitch {
    0%, 91%  { transform: none; clip-path: none; filter: none; }
    92%      { transform: translate(-6px, 0) skewX(-6deg); clip-path: inset(10% -10% 56% -10%); filter: drop-shadow(-4px 0 0 rgba(0, 240, 255, 0.85)) drop-shadow(4px 0 0 rgba(255, 0, 60, 0.9)); }
    93.5%    { transform: translate(7px, 0); clip-path: inset(58% -10% 12% -10%); filter: drop-shadow(5px 0 0 rgba(0, 240, 255, 0.85)) drop-shadow(-3px 0 0 rgba(255, 0, 60, 0.9)); }
    95%      { transform: translate(-3px, 0); clip-path: inset(32% -10% 30% -10%); filter: drop-shadow(-2px 0 0 rgba(0, 240, 255, 0.8)) drop-shadow(2px 0 0 rgba(255, 0, 60, 0.85)); }
    96.5%    { transform: translate(3px, 0); clip-path: none; filter: drop-shadow(2px 0 0 rgba(0, 240, 255, 0.6)) drop-shadow(-2px 0 0 rgba(255, 0, 60, 0.7)); }
    98%      { transform: none; clip-path: none; filter: none; }
  }
  @media (prefers-reduced-motion: reduce) { .sp-spin-on .home-mark { animation: none; } }
  .foot-right span[aria-hidden="true"] { color: var(--foot-muted, #8E8E8E); }

  /* =====================================================================
     Glitch, refined: no colour split, no skew, no blur. A band of the mark is copied and
     displaced by exact dot-grid steps, then snaps back. Reads as a precise data shift.
     ===================================================================== */
  .hm-wrap { position: relative; flex: none; opacity: 0; line-height: 0; }
  .hm-wrap .home-mark { display: block; animation: none; }
  .hm-wrap > .home-mark:not(.hm-ghost) { opacity: 1 !important; }
  .hm-wrap > .hm-ghost { opacity: 0; }
  .sp-spin-on .hm-wrap > .hm-ghost { animation: hmShift 2.4s steps(1) 0.9s infinite !important; }

  .hm-ghost { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
  .sp-spin-on .hm-ghost { animation: hmShift 2.4s steps(1) 0.9s infinite; }
  .sp-spin-on .hm-wrap > .home-mark:first-child { animation: hmCut 2.4s steps(1) 0.9s infinite !important; }
  /* the ghost carries the displaced band; 1 dot-grid step = 2.4 units of the 60-unit-wide mark */
  @keyframes hmShift {
    0%, 86%   { opacity: 0; transform: none; clip-path: inset(0); }
    87%       { opacity: 1; transform: translateX(8%);  clip-path: inset(22% 0 63% 0); }
    89%       { opacity: 1; transform: translateX(-12%); clip-path: inset(58% 0 30% 0); }
    91%       { opacity: 1; transform: translateX(4%);  clip-path: inset(40% 0 52% 0); }
    92.5%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  }
  /* the original loses the same band at the same instant, so the shift is a clean cut, not a doubling */
  @keyframes hmCut {
    0%, 86%   { clip-path: none; }
    87%       { clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%, 0 37%, 100% 37%, 100% 100%, 0 100%); }
    89%       { clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%, 0 70%, 100% 70%, 100% 100%, 0 100%); }
    91%       { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%, 0 48%, 100% 48%, 100% 100%, 0 100%); }
    92.5%, 100% { clip-path: none; }
  }
  /* the lock glitch in the intro follows the same rules: hard band offsets, red only */
  @keyframes spGlitch {
    0%   { transform: translateX(-6px); clip-path: inset(8% 0 58% 0); filter: none; }
    25%  { transform: translateX(8px);  clip-path: inset(56% 0 12% 0); filter: none; }
    50%  { transform: translateX(-3px); clip-path: inset(30% 0 36% 0); filter: none; }
    75%  { transform: none; clip-path: none; filter: none; }
    100% { transform: none; clip-path: none; filter: none; }
  }
  @media (prefers-reduced-motion: reduce) { .hm-ghost, .hm-wrap > .home-mark:first-child { animation: none !important; } }
  @media (max-width: 760px) { .hm-wrap { --mark-h: 180px; } }

  /* API header: a larger ASCII mark */
  .hero { --mark-h: clamp(240px, 42vh, 400px); }
  @media (max-width: 760px) { .hero { --mark-h: clamp(200px, 34vh, 280px); } }

  /* =====================================================================
     Home, institutional pass: flat charcoal ground (no glow), red kept for the mark and the
     caret only, a statement set on a strict left edge, and hard facts set like a report.
     ===================================================================== */
  body:not(.api-view):not([class*="-mode"]) .home-splash { background: linear-gradient(to bottom, #161618 0%, #131315 70%, #111111 100%) !important; }
  .sp-statement .hb-lead { color: inherit !important; }
  .hb-facts { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 clamp(32px, 4vw, 64px); margin: clamp(28px, 4.5vh, 44px) 0 0; padding-top: clamp(16px, 2.4vh, 22px); border-top: 1px solid #2A2A2A; }
  .hb-facts div { display: grid; gap: 8px; }
  .hb-facts dt { font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #7E7E7E; }
  .hb-facts dd { margin: 0; font: 400 clamp(15px, 1.35vw, 20px)/1 'Red Hat Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; color: #EDEDED; }
  .hb-asof { margin: 14px 0 0; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #5E5E5E; }
  .sp-statement .hb-facts, .sp-statement .hb-asof { opacity: 0; transition: opacity 900ms ease; }
  .sp-opened .sp-statement .hb-facts { opacity: 1; transition-delay: 700ms; }
  .sp-opened .sp-statement .hb-asof { opacity: 1; transition-delay: 900ms; }
  .sp-instant .sp-statement .hb-facts, .sp-instant .sp-statement .hb-asof { transition: none !important; }
  @media (prefers-reduced-motion: reduce) { .sp-statement .hb-facts, .sp-statement .hb-asof { opacity: 1; transition: none; } }
  @media (max-width: 760px) { .hb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; } .hb-facts dd { font-size: 14px; } }
  @media (max-width: 820px), (pointer: coarse) { .hb-facts dt, .hb-asof { font-size: 11px; } }

  /* footer copyright, as quiet as the links */
  .foot-copy { display: block; margin: 10px 0 0; font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.14em; color: var(--foot-muted, #8E8E8E); }

  /* =====================================================================
     Sleek pass: one quiet facts line, a single-row footer, a lighter login, tighter rhythm
     ===================================================================== */
  .sp-statement .hb-one { margin-top: clamp(10px, 1.6vh, 16px) !important; }
  .hb-meta { margin: clamp(26px, 4vh, 40px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0;
    font: 400 10.5px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #7A7A7A; font-variant-numeric: tabular-nums; }
  .hb-meta i { display: inline-block; width: 18px; height: 1px; margin: 0 14px; background: #3A3A3A; }
  .sp-statement .hb-meta { opacity: 0; transition: opacity 900ms ease; }
  .sp-opened .sp-statement .hb-meta { opacity: 1; transition-delay: 700ms; }
  .sp-instant .sp-statement .hb-meta { transition: none !important; }
  @media (prefers-reduced-motion: reduce) { .sp-statement .hb-meta { opacity: 1; transition: none; } }
  @media (max-width: 820px), (pointer: coarse) { .hb-meta { font-size: 11px; } .hb-meta i { width: 12px; margin: 0 10px; } }

  /* footer: one clean row everywhere */
  .foot { align-items: center !important; padding: 26px 28px !important; }
  .foot .gc { display: none !important; }
  .foot-left { display: flex !important; align-items: center; gap: 28px; }
  .foot-left .foot-talent { margin: 0 !important; padding: 6px 0 !important; order: 2; }
  .foot-copy { margin: 0 !important; order: 1; }
  .foot-motto { padding-bottom: 0 !important; align-self: center !important; }
  @media (max-width: 640px) { .foot { justify-items: center; text-align: center; gap: 14px !important; padding: 22px 20px !important; } .foot-left { justify-content: center; flex-wrap: wrap; gap: 8px 20px; } }

  /* login: a hairline outline that fills on hover */
  .home-splash header .login, .hero header .login, .r-bar .login { border-color: rgba(255, 255, 255, 0.18) !important; color: #EDEDED !important; background: transparent !important; transition: border-color 200ms ease, background 200ms ease; }
  .home-splash header .login:hover, .hero header .login:hover, .r-bar .login:hover { border-color: #E0193F !important; background: #E0193F !important; color: #FFFFFF !important; }

  .foot-copy { white-space: nowrap; }
  .foot-right { display: flex !important; align-items: center; gap: 0 14px; white-space: nowrap; }
  .foot-right .foot-talent { margin-right: 18px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--foot-ink, #EDEDED); }
  @media (max-width: 640px) { .foot-right { flex-wrap: wrap; justify-content: center; } .foot-right .foot-talent { margin-right: 6px; } }
  @media (min-width: 1000px) and (max-width: 1239px) { .foot-motto { white-space: normal !important; max-width: 40ch !important; } }
  .foot-right a, .foot-right span { padding-top: 4px !important; padding-bottom: 4px !important; }
  @media (min-width: 641px) { .foot-right { flex-wrap: nowrap !important; justify-content: flex-end; } }
  @media (min-width: 1000px) and (max-width: 1499px) { .foot-motto { white-space: normal !important; max-width: 38ch !important; } }
  /* footer grid that can never collide: side columns take their content, the motto takes what is left */
  .foot { grid-template-columns: max-content minmax(0, 1fr) max-content !important; column-gap: 40px !important; }
  .foot-motto { white-space: normal !important; max-width: 64ch !important; justify-self: center; text-wrap: balance; }
  @media (max-width: 899px) {
    .foot { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; row-gap: 14px !important; }
    .foot-motto { grid-column: auto; order: -1; }
    .foot-left, .foot-right { justify-content: center; }
    .foot-right { flex-wrap: wrap !important; }
  }
  .foot-motto { max-width: none !important; }
  @media (max-width: 999px) {
    .foot { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; row-gap: 14px !important; }
    .foot-motto { grid-column: auto; order: -1; }
    .foot-left, .foot-right { justify-content: center; }
    .foot-right { flex-wrap: wrap !important; }
  }

  /* the role being typed is the one red word on the page */
  .ha-typed { color: #E0193F !important; }

  /* "ULTRA-LOW-LATENCY SYSTEMS.": arrives in a single frame (no easing), then a 1px red pulse
     crosses its baseline in ~120 ms, timed to land with every other band-shift of the mark */
  .sp-statement .hb-one { transition: none !important; }
  .sp-opened .sp-statement .hb-one { opacity: 1; transform: none; transition: opacity 0s linear 380ms, transform 0s linear 380ms !important; }
  .sp-instant .sp-statement .hb-one { transition: none !important; }
  .hb-ul { position: relative; display: inline-block; }
  .hb-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(224, 25, 63, 0) 0%, rgba(224, 25, 63, 0) 35%, #E0193F 47%, #FF6A80 50%, rgba(224, 25, 63, 0) 53%, rgba(224, 25, 63, 0) 100%);
    background-size: 300% 100%; background-position: 100% 0; }
  .sp-spin-on .hb-ul::after { animation: hbPulse 4.8s linear 0.9s infinite; }
  @keyframes hbPulse {
    0%, 43%   { opacity: 0; background-position: 100% 0; }
    43.01%    { opacity: 1; background-position: 100% 0; }
    45.5%     { opacity: 1; background-position: 0% 0; }
    45.51%, 100% { opacity: 0; background-position: 0% 0; }
  }
  @media (prefers-reduced-motion: reduce) { .sp-spin-on .hb-ul::after { animation: none; } }
  .sp-statement .hb-one { overflow: visible !important; padding-bottom: 8px !important; }

  /* Pulse every 2.4 s (with every band-shift of the mark), and the words light red as it passes */
  .sp-spin-on .hb-ul::after { animation: hbPulse2 2.4s linear 0.9s infinite !important; }
  @keyframes hbPulse2 {
    0%, 86.9%  { opacity: 0; background-position: 100% 0; }
    87%        { opacity: 1; background-position: 100% 0; }
    92%        { opacity: 1; background-position: 0% 0; }
    92.1%, 100% { opacity: 0; background-position: 0% 0; }
  }
  .hb-ul {
    color: transparent; -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 38%, #E0193F 45%, #FF4D66 50%, #E0193F 55%, #F2F2F2 62%, #F2F2F2 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
  }
  .sp-spin-on .hb-ul { animation: hbSweep 2.4s linear 0.9s infinite; }
  @keyframes hbSweep {
    0%, 86.9%  { background-position: 100% 0; }
    87%        { background-position: 100% 0; }
    92%        { background-position: 0% 0; }
    92.1%, 100% { background-position: 100% 0; }
  }
  @media (prefers-reduced-motion: reduce) { .sp-spin-on .hb-ul, .sp-spin-on .hb-ul::after { animation: none !important; } }

  /* The red sweep on "ULTRA-LOW-LATENCY SYSTEMS." now fires once each time a role finishes typing,
     and runs slowly enough to read as red: wipe in (0.6 s), hold, wipe out. */
  .sp-spin-on .hb-ul, .sp-spin-on .hb-ul::after { animation: none !important; }
  .hb-ul { background-image: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 33.33%, #E0193F 33.34%, #E0193F 66.66%, #F2F2F2 66.67%, #F2F2F2 100%) !important; background-repeat: no-repeat;
    background-size: 300% 100% !important; background-position: 100% 0; -webkit-background-clip: text !important; background-clip: text !important; }
  .hb-ul::after { background: #E0193F !important; background-size: auto !important; opacity: 1 !important; transform: scaleX(0); transform-origin: left center; }
  .sp-statement .hb-ul.hb-fire { animation: hbFill 0.7s cubic-bezier(.65, 0, .35, 1) 1 both !important; }
  .sp-statement .hb-ul.hb-fire::after { animation: hbLine 0.7s cubic-bezier(.65, 0, .35, 1) 1 both !important; }
  @keyframes hbFill { 0% { background-position: 100% 0; } 32% { background-position: 50% 0; } 68% { background-position: 50% 0; } 100% { background-position: 0% 0; } }
  @keyframes hbLine { 0% { transform: scaleX(0); transform-origin: left center; } 32% { transform: scaleX(1); transform-origin: left center; } 68% { transform: scaleX(1); transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } }
  @media (prefers-reduced-motion: reduce) { .sp-statement .hb-ul.hb-fire, .sp-statement .hb-ul.hb-fire::after { animation: none !important; } }

  /* =====================================================================
     Footer, final layout: legal links left, statement dead centre, contact right
     ===================================================================== */
  .foot { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr) !important; column-gap: 40px !important; align-items: center !important; }
  .foot-left { justify-self: start; display: flex !important; align-items: center; }
  .foot-legal { display: flex; align-items: center; gap: 0 14px; white-space: nowrap; }
  .foot-legal a, .foot-legal span { font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: 0.14em !important; padding: 4px 0 !important; }
  .foot-legal a { color: var(--foot-ink, #EDEDED); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .foot-legal a:hover { color: #E0193F; }
  .foot-legal span { color: var(--foot-muted, #8E8E8E); }
  .foot-legal .foot-status { margin-right: 6px; }
  .foot-motto { grid-column: 2 !important; justify-self: center; text-align: center; }
  .foot-right { grid-column: 3; justify-self: end; display: flex !important; align-items: center; }
  .foot-right .foot-talent { margin: 0 !important; }
  @media (max-width: 999px) {
    .foot { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; row-gap: 14px !important; }
    .foot-motto, .foot-left, .foot-right { grid-column: auto !important; justify-self: center; }
    .foot-motto { order: -1; }
  }
  .foot-legal .foot-status { display: inline-flex !important; align-items: center; gap: 8px; } .foot-legal .foot-status .sl { position: static !important; margin: 0 !important; flex: none; }

  /* footer without the centre line: legal left, contact right */
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .foot-right { grid-column: 2 !important; }
  @media (max-width: 640px) { .foot { grid-template-columns: minmax(0, 1fr) !important; } .foot-right { grid-column: auto !important; } }

  /* =====================================================================
     API performance, by silicon: B200 and B300 live, other families coming soon.
     Each metric at P50 and P90. Values stay redacted while "metrics-private" is on #perf.
     ===================================================================== */
  .si-tabs button { display: inline-flex; align-items: center; gap: 10px; }
  .si-tabs button small { font-size: 9px; letter-spacing: 0.18em; color: #E0193F; }
  .si-tabs button.soon small { color: #5E5E5E; }
  .si-tabs button.soon { color: #5E5E5E; }
  .si-tabs button.soon[aria-selected="true"] { color: #BDBDBD; border-bottom-color: #3A3A3A; }
  .si-panel { border: 1px solid #262626; background: #0E0E0F; }
  .si-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid #262626; font: 400 10.5px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: #8E8E8E; }
  .si-head span:first-child { color: #EDEDED; }
  .si-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); align-items: center; gap: 24px; padding: 8px 20px 20px; }
  .si-table { width: 100%; border-collapse: collapse; font-family: 'Red Hat Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  .si-table th, .si-table td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid #1F1F1F; vertical-align: middle; }
  .si-table thead th { padding-top: 14px; padding-bottom: 12px; font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: #6E6E6E; }
  .si-table tbody th { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #D6D6D6; }
  .si-table td { font-size: 15px; color: #F2F2F2; white-space: nowrap; }
  .si-table td.si-why, .si-table th.si-why { font-size: 11.5px; color: #7E7E7E; white-space: normal; letter-spacing: 0.02em; text-transform: none; }
  .si-table tbody tr:last-child th, .si-table tbody tr:last-child td { border-bottom: 0; }
  .si-fig .chip { padding: 0; background: transparent; }
  .si-fig .chip svg { max-height: 200px; }
  .si-fig .chip .s { stroke: #F0485D; }
  .si-fig .chip .anno, .si-fig .chip .vendor { fill: #7E7E7E; color: #7E7E7E; }
  .si-fig .chip figcaption { color: #BDBDBD; font: 400 11px/1.5 'Red Hat Mono', ui-monospace, monospace; }
  .si-fig .chip figcaption strong { color: #F2F2F2; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
  .si-foot { margin: 0; padding: 12px 20px 16px; border-top: 1px solid #1F1F1F; font: 400 11px/1.6 'Red Hat Mono', ui-monospace, monospace; color: #6E6E6E; }
  .si-soon .si-body { grid-template-columns: minmax(0, 1fr) auto; padding: 20px; }
  .si-soon .si-fig { opacity: 0.45; filter: grayscale(1); }
  .si-soon-k { margin: 0; justify-self: end; font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.3em; color: #8E8E8E; border: 1px solid #333; padding: 12px 16px; }
  /* private: each value is a solid bar until published */
  .metrics-private .si-v { display: inline-block; width: 5.5em; height: 0.9em; vertical-align: middle; background: repeating-linear-gradient(90deg, #262626 0 9px, #1C1C1C 9px 11px); color: transparent; user-select: none; }
  .metrics-private .si-panel:not(.si-soon) .si-head span:last-child::after { content: "  ·  FIGURES PRIVATE"; color: #E0193F; }
  @media (max-width: 860px) {
    .si-body, .si-soon .si-body { grid-template-columns: minmax(0, 1fr); }
    .si-table .si-why { display: none; }
    .si-soon-k { justify-self: start; }
  }

  /* silicon panel polish: steady column widths, calmer type, figure set apart on its own column */
  .si-tabs button { font: 400 11px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.14em !important; }
  .si-panel { border-color: #232323; }
  .si-head { padding: 16px 24px; }
  .si-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 0; padding: 0; align-items: stretch; }
  .si-body > .si-table { margin: 4px 0 8px; }
  .si-table { table-layout: fixed; }
  .si-table th:nth-child(1), .si-table td:nth-child(1) { width: 34%; padding-left: 24px; }
  .si-table th:nth-child(2), .si-table td:nth-child(2), .si-table th:nth-child(3), .si-table td:nth-child(3) { width: 15%; }
  .si-table th.si-why, .si-table td.si-why { width: 36%; padding-right: 24px; }
  .si-table tbody th { font-size: 11.5px; line-height: 1.5; }
  .si-fig { border-left: 1px solid #1F1F1F; padding: 24px; display: flex; align-items: center; }
  .si-fig .chip { gap: 16px; width: 100%; }
  .si-foot { padding: 14px 24px 18px; }
  @media (max-width: 860px) {
    .si-body { grid-template-columns: minmax(0, 1fr); }
    .si-fig { border-left: 0; border-top: 1px solid #1F1F1F; }
    .si-table th:nth-child(1), .si-table td:nth-child(1) { width: 50%; padding-left: 16px; }
    .si-table th:nth-child(2), .si-table td:nth-child(2), .si-table th:nth-child(3), .si-table td:nth-child(3) { width: 25%; }
  }
  .metrics-private .si-v { width: min(5.5em, 90%) !important; } @media (max-width: 860px) { .si-table td { padding-right: 10px; } }

  /* B200 and B300 side by side: drawing on top, then the metrics with long bars */
  .si-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .si-pair .si-body { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; }
  .si-pair .si-fig { border-left: 0 !important; border-bottom: 1px solid #1F1F1F; padding: 20px 24px; justify-content: center; }
  .si-pair .si-fig .chip { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
  .si-pair .si-fig .chip svg { max-height: 170px; }
  .si-pair .si-table th:nth-child(1), .si-pair .si-table td:nth-child(1) { width: 40% !important; padding-left: 24px; }
  .si-pair .si-table th:nth-child(2), .si-pair .si-table td:nth-child(2), .si-pair .si-table th:nth-child(3), .si-pair .si-table td:nth-child(3) { width: 30% !important; padding-right: 20px; }
  .metrics-private .si-pair .si-v { width: 100% !important; height: 0.95em; }
  .si-note { margin: 14px 0 0; font: 400 11px/1.6 'Red Hat Mono', ui-monospace, monospace; color: #6E6E6E; }
  @media (max-width: 980px) { .si-pair { grid-template-columns: minmax(0, 1fr); } }

  /* keep the two columns in lockstep: same header height, same drawing height, tables start level */
  .si-pair .si-head { flex-direction: column; justify-content: flex-start; gap: 8px; }
  .si-pair .si-fig { height: 300px; box-sizing: border-box; align-items: center; }
  @media (max-width: 980px) { .si-pair .si-fig { height: auto; } }
  @media (max-width: 1099px) { .si-pair { grid-template-columns: minmax(0, 1fr); } .si-pair .si-fig { height: auto; } }

  /* model picker: a quiet segmented control above the two cards */
  .si-models { display: inline-flex; flex-wrap: wrap; margin: 0 0 16px; border: 1px solid #262626; }
  .si-models button { min-height: 40px; padding: 0 18px; background: transparent; border: 0; border-right: 1px solid #262626; color: #7A7A7A; cursor: pointer; font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.1em; }
  .si-models button:last-child { border-right: 0; }
  .si-models button:hover { color: #D6D6D6; }
  .si-models button[aria-checked="true"] { background: #1A1A1A; color: #F2F2F2; box-shadow: inset 0 -1px 0 #E0193F; }
  .si-models button:focus-visible { outline: 1px solid #F2F2F2; outline-offset: -3px; }
  .si-pair .si-fig { display: none; }
  @media (max-width: 600px) { .si-models { display: flex; } .si-models button { flex: 1 1 auto; padding: 0 10px; } }

  /* =====================================================================
     API tagline, two lines, larger:
     1) "UNRESTRICTED BY DEFAULT." with a black censor bar across the middle of the letters
     2) "HIGH PERFORMANCE BY DESIGN." set like a drawing: cap and base guide lines with end ticks,
        an oblique cut for speed, and a single fast wipe as it appears
     ===================================================================== */
  .tl-two { display: grid; justify-items: center; gap: clamp(14px, 2vh, 22px); margin: 0; }
  .tl-redact, .tl-arch-t { font: 400 clamp(15px, 1.75vw, 24px)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; }
  .tl-redact { position: relative; display: inline-block; padding: 0.08em 0.1em; }
  .tl-redact::after { content: ""; position: absolute; left: -0.45em; right: -0.45em; top: 30%; height: 44%; background: #0B0B0C; transform: rotate(-1.2deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
  .tl-arch { position: relative; display: inline-block; padding: 0.55em 1.6em; }
  .tl-arch::before, .tl-arch::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.55); }
  .tl-arch::before { top: 0.36em; }
  .tl-arch::after { bottom: 0.36em; }
  .tl-arch-t { position: relative; display: inline-block; transform: skewX(-12deg); font-weight: 700; letter-spacing: 0.04em; }
  .tl-arch-t::before, .tl-arch-t::after { content: ""; position: absolute; top: -0.42em; bottom: -0.42em; width: 1px; background: rgba(255, 255, 255, 0.55); transform: skewX(12deg); }
  .tl-arch-t::before { left: -1.35em; }
  .tl-arch-t::after { right: -1.35em; }
  /* one fast wipe on load: the guides draw, then the words cut in from the left */
  .tl-arch::before, .tl-arch::after { transform-origin: left center; animation: tlRule 320ms cubic-bezier(.7, 0, .2, 1) 500ms both; }
  .tl-arch-t { clip-path: inset(0 0 0 0); animation: tlCut 220ms cubic-bezier(.7, 0, .2, 1) 760ms both; }
  @keyframes tlRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes tlCut { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @media (prefers-reduced-motion: reduce) { .tl-arch::before, .tl-arch::after, .tl-arch-t { animation: none; } }
  .api-after .pitch { margin-top: clamp(30px, 5vh, 48px) !important; }
  @media (max-width: 600px) { .tl-redact, .tl-arch-t { font-size: clamp(12px, 3.7vw, 15px); } .tl-arch { padding: 0.55em 1.2em; } }
  .tl-redact::after { top: 38% !important; height: 30% !important; }
  @media (max-height: 780px) { .hero .scroll-cue { display: none; } }

  /* High Performance follows the first two tabs: copy on the left, the instrument on the right */
  .perf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding-top: 36px; border-top: 1px solid #262626; max-width: 1200px; }
  .perf-copy p { margin: 0 0 16px; font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: #BDBDBD; }
  .perf-defs { margin: 8px 0 20px; display: grid; gap: 12px; }
  .perf-defs div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .perf-defs dt { font-size: 10.5px; letter-spacing: 0.14em; color: #F0485D; }
  .perf-defs dd { margin: 0; font-size: 11.5px; line-height: 1.6; letter-spacing: 0.04em; color: #D6D6D6; }
  .perf-method { color: #6E6E6E !important; font-size: 11px !important; }
  .perf-side { min-width: 0; }
  .perf-side .si-pair { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .perf-side .si-head { padding: 14px 16px; }
  .perf-side .si-table th:nth-child(1), .perf-side .si-table td:nth-child(1) { width: 38% !important; padding-left: 16px !important; }
  .perf-side .si-table th:nth-child(2), .perf-side .si-table td:nth-child(2), .perf-side .si-table th:nth-child(3), .perf-side .si-table td:nth-child(3) { width: 31% !important; padding-right: 12px !important; }
  .perf-side .si-table tbody th { font-size: 11px; letter-spacing: 0.1em; }
  .perf-side .si-models { margin-bottom: 12px; }
  .metrics-private .si-panel .si-head span:last-child::after { content: none !important; }
  @media (max-width: 1100px) { .perf-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
  @media (max-width: 640px) { .perf-side .si-pair { grid-template-columns: minmax(0, 1fr) !important; } }
  .perf-defs div { grid-template-columns: 112px minmax(0, 1fr); } .perf-defs dt { white-space: nowrap; }
  .perf-side .si-table tbody th { white-space: nowrap; letter-spacing: 0.06em; }

  /* =====================================================================
     API tagline. "Unrestricted by default." sits under a straight black bar across its middle,
     like a censor bar over the eyes. "High performance by design." is drawn like an architect's
     elevation (outlined letters between extension lines, end ticks) and leans forward with
     speed lines trailing behind it.
     ===================================================================== */
  .tl-two { gap: clamp(18px, 2.6vh, 30px) !important; }
  .tl-redact, .tl-arch-t { font-size: clamp(20px, 2.6vw, 36px) !important; }
  .tl-redact { padding: 0.1em 0.12em !important; }
  .tl-redact::after { left: -0.3em !important; right: -0.3em !important; top: 30% !important; height: 42% !important; background: #0A0A0B !important; transform: none !important; box-shadow: none !important; }
  .tl-arch { padding: 0.6em 1.2em 0.6em 2.4em !important;
    background:
      linear-gradient(#FFFFFF, #FFFFFF) left 0 top 40% / 1.4em 1px no-repeat,
      linear-gradient(#FFFFFF, #FFFFFF) left 0.5em top 52% / 0.9em 1px no-repeat,
      linear-gradient(#FFFFFF, #FFFFFF) left 0.2em top 64% / 1.15em 1px no-repeat; }
  .tl-arch::before, .tl-arch::after { left: 2.1em !important; right: 0.6em !important; background: rgba(255, 255, 255, 0.6) !important; }
  .tl-arch-t { color: transparent !important; -webkit-text-stroke: 1.1px #FFFFFF; font-weight: 700 !important; transform: skewX(-14deg) !important; }
  .tl-arch-t::before { left: -0.35em; } .tl-arch-t::after { right: -0.35em; }
  @supports not (-webkit-text-stroke: 1px #fff) { .tl-arch-t { color: #FFFFFF !important; } }
  @media (max-width: 760px) { .tl-redact, .tl-arch-t { font-size: clamp(15px, 4.6vw, 20px) !important; } }
  .api-after .pitch { margin-top: 26px !important; } .hero .scroll-cue { bottom: 8px !important; }
  @media (max-height: 820px) and (min-width: 700px) { .hero .scroll-cue { display: none !important; } }

  /* tagline v3: one line, smaller, and the bar is a thin band so the words stay readable */
  .tl-two { display: flex !important; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 44px) !important; }
  .tl-redact, .tl-arch-t { font-size: clamp(13px, 1.35vw, 19px) !important; white-space: nowrap; }
  .tl-redact::after { top: 43% !important; height: 16% !important; left: -0.2em !important; right: -0.2em !important; }
  .tl-arch { padding: 0.55em 0.9em 0.55em 2em !important; }
  .tl-arch::before, .tl-arch::after { left: 1.7em !important; right: 0.4em !important; }
  @media (max-width: 860px) { .tl-two { flex-wrap: wrap; row-gap: 12px !important; } .tl-redact, .tl-arch-t { font-size: clamp(12px, 3.6vw, 15px) !important; } }
  /* the bar sits across the middle of the words like a censor bar, but behind them, so they stay readable */
  .tl-redact { isolation: isolate; }
  .tl-redact::after { z-index: -1 !important; top: 26% !important; height: 50% !important; left: -0.35em !important; right: -0.35em !important; background: #0A0A0B !important; }

  /* tagline v4: no speed lines, no extension lines or ticks.
     "HIGH PERFORMANCE BY DESIGN." blinks on (on, off, on) like the rest of the UI, then gives a
     single hard blink every few seconds. */
  .tl-arch { background: none !important; padding: 0 !important; }
  .tl-arch::before, .tl-arch::after, .tl-arch-t::before, .tl-arch-t::after { content: none !important; display: none !important; }
  .tl-arch-t { animation: tlBlinkIn 420ms steps(1) 900ms both, tlBlink 6s steps(1) 2.4s infinite; }
  @keyframes tlBlinkIn { 0% { opacity: 0; } 24% { opacity: 1; } 48% { opacity: 0; } 72%, 100% { opacity: 1; } }
  @keyframes tlBlink { 0%, 95% { opacity: 1; } 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .tl-arch-t { animation: none !important; opacity: 1; } }

  /* =====================================================================
     API header in the brand system: charcoal ground like the homepage, the mark in red,
     and one tagline treatment for both phrases.
     ===================================================================== */
  body.api-view { background: #111111 !important; }
  .hero { background: linear-gradient(to bottom, #161618 0%, #131315 70%, #111111 100%) !important; }
  .hero .mark-clone { color: #E0193F !important; }
  .hero .scroll-cue { color: #6E6E6E !important; }

  /* tagline: upright Monument Wide caps, same size, white, a thin divider between the two phrases */
  .tl-one { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px clamp(18px, 2.4vw, 32px); margin: 0; white-space: normal !important; }
  .tl-a, .tl-b { font: 400 clamp(12px, 1.2vw, 16px)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #F2F2F2; white-space: nowrap; }
  .tl-div { width: 1px; height: 1.2em; background: #3A3A3A; }
  /* the brand's redaction motif (segmented bar, as on private metrics), in red, behind one word */
  .tl-band { display: inline-block; padding: 0.32em 0.4em; margin: -0.32em 0.1em -0.32em -0.4em; color: #FFFFFF;
    background: repeating-linear-gradient(90deg, #E0193F 0 9px, #B5122F 9px 11px); }
  /* "high performance" blinks on with the rest of the UI, then a single hard blink every few seconds */
  .tl-b { animation: tlBlinkIn 420ms steps(1) 900ms both, tlBlink 6s steps(1) 2.4s infinite; }
  @media (prefers-reduced-motion: reduce) { .tl-b { animation: none !important; opacity: 1; } }
  @media (max-width: 640px) { .tl-div { display: none; } .tl-a, .tl-b { font-size: 12px; } }
  .api-after .pitch { margin-top: 30px !important; } @media (max-width: 640px) { .api-after .pitch { margin-top: 22px !important; } }
  .api-after .pitch { margin-top: 46px !important; } @media (max-width: 640px) { .api-after .pitch { margin-top: 40px !important; } }

  /* the red segmented band now runs behind the whole phrase */
  .tl-band { margin: -0.32em 0 !important; padding: 0.32em 0.55em !important; }

  /* "HIGH PERFORMANCE BY DESIGN": every ~4.8 s a burst of speed. The words strobe three times
     in ~250 ms while two slices of the line jump sideways (one red, one white), then everything
     snaps back to still. Hard cuts only, no blur, no easing. */
  .tl-b { position: relative; display: inline-block;
    animation: tlBlinkIn 420ms steps(1) 900ms both, tlStrobe 4.8s steps(1) 2.4s infinite !important; }
  .tl-b::before, .tl-b::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; white-space: nowrap; }
  .tl-b::before { color: #E0193F; animation: tlSliceA 4.8s steps(1) 2.4s infinite; }
  .tl-b::after  { color: #FFFFFF; animation: tlSliceB 4.8s steps(1) 2.4s infinite; }
  @keyframes tlStrobe {
    0%, 88% { opacity: 1; } 88.5% { opacity: 0.15; } 89.5% { opacity: 1; } 90.5% { opacity: 0.15; } 91.5% { opacity: 1; } 92.5% { opacity: 0.15; } 93.5%, 100% { opacity: 1; }
  }
  @keyframes tlSliceA {
    0%, 88% { opacity: 0; transform: none; clip-path: inset(0); }
    88.5% { opacity: 1; transform: translateX(7px);  clip-path: inset(8% 0 58% 0); }
    90%   { opacity: 1; transform: translateX(-5px); clip-path: inset(46% 0 22% 0); }
    91.5% { opacity: 1; transform: translateX(10px); clip-path: inset(20% 0 52% 0); }
    93%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  }
  @keyframes tlSliceB {
    0%, 89% { opacity: 0; transform: none; clip-path: inset(0); }
    89.5% { opacity: 1; transform: translateX(-8px); clip-path: inset(60% 0 6% 0); }
    91%   { opacity: 1; transform: translateX(6px);  clip-path: inset(30% 0 44% 0); }
    92.5%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  }
  @media (prefers-reduced-motion: reduce) { .tl-b, .tl-b::before, .tl-b::after { animation: none !important; } .tl-b { opacity: 1; } }

  /* claim + qualifier: the claims in Monument Wide caps, the qualifiers in quiet mono, same on both sides */
  .tl-a, .tl-c { display: inline-flex; align-items: baseline; gap: 0.7em; white-space: nowrap; }
  .tl-a .tl-q, .tl-c .tl-q { font: 400 0.82em/1 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: 0.06em; text-transform: lowercase; color: #8E8E8E; }
  .tl-c .tl-q { font-size: clamp(11px, 1vw, 13px) !important; }
  .tl-band { margin: -0.32em 0 !important; padding: 0.32em 0.5em !important; }
  /* HIGH PERFORMANCE carries a low red glow that flares during each speed burst */
  .tl-b { text-shadow: 0 0 10px rgba(224, 25, 63, 0.55), 0 0 26px rgba(224, 25, 63, 0.22);
    animation: tlBlinkIn 420ms steps(1) 900ms both, tlStrobe 4.8s steps(1) 2.4s infinite, tlGlow 4.8s steps(1) 2.4s infinite !important; }
  .tl-b::before, .tl-b::after { text-shadow: none; }
  @keyframes tlGlow {
    0%, 87.9% { text-shadow: 0 0 10px rgba(224, 25, 63, 0.55), 0 0 26px rgba(224, 25, 63, 0.22); }
    88%, 93.4% { text-shadow: 0 0 6px rgba(255, 70, 95, 0.95), 0 0 18px rgba(224, 25, 63, 0.8), 0 0 42px rgba(224, 25, 63, 0.45); }
    93.5%, 100% { text-shadow: 0 0 10px rgba(224, 25, 63, 0.55), 0 0 26px rgba(224, 25, 63, 0.22); }
  }
  @media (prefers-reduced-motion: reduce) { .tl-b { animation: none !important; } }
  .tl-c { font-size: clamp(12px, 1.2vw, 16px); } .tl-a, .tl-c { gap: 0.85em; }

  /* API scroll cue: always shown, readable on charcoal */
  @media (max-height: 820px) and (min-width: 700px) { .hero .scroll-cue { display: inline-flex !important; } }
  .hero .scroll-cue { color: #BDBDBD !important; bottom: 14px !important; }
  .hero .scroll-cue:hover { color: #FFFFFF !important; }

  /* qualifiers: same family as the claims, set smaller, wider and in grey (no second typeface) */
  .tl-a .tl-q, .tl-c .tl-q { font: 400 0.68em/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #8E8E8E !important; }
  .tl-c .tl-q { font-size: 0.68em !important; }
  .tl-a, .tl-c { align-items: center; gap: 0.9em; }
  .hero .scroll-cue { display: inline-flex !important; } @media (max-height: 600px) { .hero .scroll-cue { display: none !important; } }
  @media (max-height: 660px) { .hero .scroll-cue { display: none !important; } }

  /* =====================================================================
     One shared beat, every 3.2 s:
     the red block flashes in over "UNRESTRICTED" (on, off, on), hides it, then exposes it again,
     and at the same instant "HIGH PERFORMANCE" strobes, slices and flares red.
     ===================================================================== */
  .tl-band { position: relative; }
  .tl-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: repeating-linear-gradient(90deg, #E0193F 0 9px, #C4162F 9px 11px);
    animation: tlCensor 3.2s steps(1) 2.4s infinite; }
  @keyframes tlCensor {
    0%, 87.9% { opacity: 0; }
    88%       { opacity: 1; }
    89%       { opacity: 0; }
    90%       { opacity: 1; }
    96%, 100% { opacity: 0; }
  }
  .tl-b { animation: tlBlinkIn 420ms steps(1) 900ms both, tlStrobe 3.2s steps(1) 2.4s infinite, tlGlow 3.2s steps(1) 2.4s infinite !important; }
  .tl-b::before { animation: tlSliceA 3.2s steps(1) 2.4s infinite !important; }
  .tl-b::after  { animation: tlSliceB 3.2s steps(1) 2.4s infinite !important; }
  @media (prefers-reduced-motion: reduce) { .tl-band::after, .tl-b, .tl-b::before, .tl-b::after { animation: none !important; } }

  /* =====================================================================
     Tagline v6
     - The divider sits exactly on the centre axis shared by the mark and the curl box:
       two equal halves, left phrase pushed to the axis, right phrase starting from it.
     - UNRESTRICTED starts hidden under a solid red block; the block wipes away to reveal the
       word, holds, then wipes back over it. Every 4 s.
     - At the moment of each reveal a red trace flashes across every letter of
       HIGH PERFORMANCE BY DESIGN, left to right.
     ===================================================================== */
  .tl-one { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(18px, 2.4vw, 32px); width: 100%; }
  .tl-a { justify-self: end; }
  .tl-c { justify-self: start; }
  @media (max-width: 760px) { .tl-one { grid-template-columns: minmax(0, 1fr); row-gap: 12px; justify-items: center; } .tl-a, .tl-c { justify-self: center; } .tl-div { display: none; } }

  .tl-band { position: relative; background: none !important; color: #F2F2F2 !important; }
  .tl-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1 !important; background: #E0193F !important;
    transform: scaleX(1); transform-origin: right center; animation: tlCover 4s linear 1.4s infinite both !important; }
  @keyframes tlCover {
    0%   { transform: scaleX(1); transform-origin: right center; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
    6%   { transform: scaleX(0); transform-origin: right center; }
    80%  { transform: scaleX(0); transform-origin: left center; animation-timing-function: cubic-bezier(.7, 0, .3, 1); }
    86%  { transform: scaleX(1); transform-origin: left center; }
    100% { transform: scaleX(1); transform-origin: left center; }
  }

  .tl-b::before, .tl-b::after { content: none !important; animation: none !important; }
  .tl-b, .tl-c .tl-q { color: transparent !important; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
    background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; text-shadow: none !important; }
  .tl-b { background-image: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 42%, #E0193F 46%, #FF4D66 50%, #E0193F 54%, #F2F2F2 58%, #F2F2F2 100%);
    animation: tlBlinkIn 420ms steps(1) 900ms both, tlTraceA 4s linear 1.4s infinite !important; }
  .tl-c .tl-q { background-image: linear-gradient(90deg, #8E8E8E 0%, #8E8E8E 42%, #E0193F 46%, #FF4D66 50%, #E0193F 54%, #8E8E8E 58%, #8E8E8E 100%);
    animation: tlTraceB 4s linear 1.4s infinite !important; }
  @keyframes tlTraceA { 0%, 2% { background-position: 100% 0; } 9% { background-position: 0% 0; } 9.01%, 100% { background-position: 100% 0; } }
  @keyframes tlTraceB { 0%, 7.5% { background-position: 100% 0; } 12% { background-position: 0% 0; } 12.01%, 100% { background-position: 100% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .tl-band::after { animation: none !important; transform: scaleX(0); }
    .tl-b, .tl-c .tl-q { animation: none !important; }
  }

  /* faster, and locked together: every movement of the red block is matched by a red trace.
     3 s cycle. Reveal 0–6% (180 ms) with the trace running the same 180 ms; re-cover 80–86% with a second trace. */
  .tl-band::after { animation: tlCover2 3s linear 1.4s infinite both !important; }
  @keyframes tlCover2 {
    0%   { transform: scaleX(1); transform-origin: right center; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    6%   { transform: scaleX(0); transform-origin: right center; }
    80%  { transform: scaleX(0); transform-origin: left center; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    86%  { transform: scaleX(1); transform-origin: left center; }
    100% { transform: scaleX(1); transform-origin: left center; }
  }
  .tl-b { animation: tlBlinkIn 420ms steps(1) 900ms both, tlTraceA2 3s linear 1.4s infinite !important; }
  .tl-c .tl-q { animation: tlTraceB2 3s linear 1.4s infinite !important; }
  @keyframes tlTraceA2 {
    0% { background-position: 100% 0; } 4.2% { background-position: 0% 0; } 4.21%, 80% { background-position: 100% 0; }
    84.2% { background-position: 0% 0; } 84.21%, 100% { background-position: 100% 0; }
  }
  @keyframes tlTraceB2 {
    0%, 3.6% { background-position: 100% 0; } 6% { background-position: 0% 0; } 6.01%, 83.6% { background-position: 100% 0; }
    86% { background-position: 0% 0; } 86.01%, 100% { background-position: 100% 0; }
  }
  @media (prefers-reduced-motion: reduce) { .tl-band::after { animation: none !important; transform: scaleX(0); } .tl-b, .tl-c .tl-q { animation: none !important; } }

  /* paper actions, centred */
  .paper-actions-c { justify-content: center; }

  /* blog post: stat tiles, code blocks, numeric table columns */
  .wp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 22px 0 26px; background: #2A2A2A; border: 1px solid #2A2A2A; }
  .wp-stats div { background: #111111; padding: 18px 16px; display: grid; gap: 8px; }
  .wp-stats b { font: 400 clamp(18px, 2vw, 26px)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F0485D; font-variant-numeric: tabular-nums; }
  .wp-stats span { font-size: 11px; line-height: 1.5; color: #9A9A9A; }
  .post-body pre.code { margin: 16px 0 22px; white-space: pre; }
  .post-body pre.code code { background: none; padding: 0; color: inherit; font-size: 1em; }
  .post-tbl td.num, .post-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .post-tbl td strong { color: #F0485D; font-weight: 500; }
  .post-body ul { padding-left: 18px; }
  .post-body ul li { margin: 0 0 8px; }
  @media (max-width: 640px) { .wp-stats { grid-template-columns: minmax(0, 1fr); } }

  .post-tbl.tight th, .post-tbl.tight td { padding: 8px 9px; letter-spacing: 0.01em; }
  .post-tbl.tight td:first-child, .post-tbl.tight th:first-child { color: #9A9A9A; }
  .post-tbl.tight td { white-space: nowrap; }
  .post-tbl.tight td:last-child { white-space: normal; }
  @media (max-width: 820px), (pointer: coarse) { .foot-legal a, .foot-right .foot-talent { display: inline-flex !important; align-items: center; min-height: 36px; padding-top: 0 !important; padding-bottom: 0 !important; } }
  @media (max-width: 760px) { .tl-a .tl-q, .tl-c .tl-q { font-size: 10.5px !important; } }

  .r-mark { display: none !important; }
  .wp-stats b { font-size: clamp(16px, 1.55vw, 21px) !important; white-space: nowrap; }

  /* =====================================================================
     Long-form post readability: a reading face for prose, generous measure and rhythm,
     mono kept for code, tables and labels
     ===================================================================== */
  .post-long .post-body { font: 400 15px/1.75 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.005em; color: #D2D2D2; }
  .post-long .post-body p, .post-long .post-body ul { max-width: 68ch; }
  .post-long .post-body p { margin: 0 0 18px; }
  .post-long .post-body strong { color: #FFFFFF; font-weight: 600; }
  .post-long .post-body em { color: #EDEDED; }
  .post-long .post-body a { color: #F0485D; text-underline-offset: 3px; }
  .post-long .post-body code { font: 400 0.84em/1 'Red Hat Mono', ui-monospace, monospace; background: #1A1A1B; border: 1px solid #262626; color: #F2F2F2; padding: 2px 5px; border-radius: 3px; white-space: nowrap; }
  .post-long .post-sec h2 { margin-top: 64px; margin-bottom: 26px; font-size: 12.5px; }
  .post-long .post-sec:first-of-type h2 { margin-top: 40px; }
  .post-long .post-body ul:not(.toc) li { margin: 0 0 10px; padding-left: 4px; }
  .post-long .post-body ul.toc { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; font: 400 11.5px/1.5 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; counter-reset: toc; }
  .post-long .post-body ul.toc li { counter-increment: toc; display: flex; gap: 14px; }
  .post-long .post-body ul.toc li::before { content: counter(toc, decimal-leading-zero); color: #5E5E5E; }
  .post-long .post-body ul.toc a { color: #CFCFCF; text-decoration: none; }
  .post-long .post-body ul.toc a:hover { color: #F0485D; }
  .post-long .post-tbl { margin: 22px 0 28px; }
  .post-long .post-tbl table { font-size: 11px; }

  /* code blocks: a labelled panel, mono 12px, generous line height */
  .post-long figure.cb { margin: 22px 0 28px; border: 1px solid #262626; background: #0C0C0D; }
  .post-long figure.cb figcaption { padding: 8px 14px; border-bottom: 1px solid #1F1F1F; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #6E6E6E; }
  .post-long figure.cb pre.code { margin: 0 !important; border: 0 !important; background: transparent !important; padding: 16px 18px !important; font: 400 12px/1.75 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: 0 !important; color: #BDBDBD !important; overflow-x: auto; tab-size: 4; }
  .post-long figure.cb pre.code code { background: none !important; border: 0 !important; padding: 0 !important; white-space: pre !important; font: inherit !important; color: inherit !important; }

  /* syntax colours, red / white / grey only */
  .hl-op { color: #F2F2F2; }
  .hl-reg, .hl-arg { color: #A9A9A9; }
  .hl-num { color: #FF8597; }
  .hl-pred { color: #F0485D; }
  .hl-lbl { color: #F0485D; font-weight: 500; }
  .hl-cmt { color: #6A6A6A; font-style: italic; }
  .hl-pun { color: #6E6E6E; }
  .hl-mk-add { color: #F0485D; font-weight: 600; }
  .hl-mk-loop { color: #5E5E5E; }
  .hl-dir { color: #F0485D; }
  .hl-prompt { color: #F0485D; }
  .hl-cmd { color: #F2F2F2; }
  .hl-ok { color: #D6D6D6; }
  .hl-bad { color: #F0485D; }
  .hl-hdr { color: #6E6E6E; }
  /* OCaml via Pygments */
  .pg-k, .pg-kd, .pg-kn, .pg-kr, .pg-kc, .pg-kp { color: #F0485D; }
  .pg-kt { color: #FF8597; }
  .pg-s, .pg-s1, .pg-s2, .pg-sb, .pg-sc, .pg-ss { color: #E9C5CB; }
  .pg-c, .pg-c1, .pg-cm { color: #6A6A6A; font-style: italic; }
  .pg-m, .pg-mi, .pg-mf, .pg-mh { color: #FF8597; }
  .pg-o, .pg-p { color: #8A8A8A; }
  .pg-nc, .pg-nn { color: #F2F2F2; }
  .pg-n, .pg-nv, .pg-nf, .pg-nl { color: #D6D6D6; }
  .pg-ow { color: #F0485D; }
  @media (max-width: 640px) { .post-long .post-body { font-size: 14.5px; } .post-long figure.cb pre.code { font-size: 11px !important; padding: 12px 12px !important; } }
  .post-long figure.cb.wrap pre.code code { white-space: pre-wrap !important; word-break: break-word; }

  /* blog sizing, one step smaller (recorded in the README) */
  .post-long .post-body { font-size: 14px; line-height: 1.72; }
  .post-long .post-body code { font-size: 0.82em; }
  .post-long .post-sec h2 { font-size: 11.5px; }
  .post-long figure.cb pre.code { font-size: 11.5px !important; line-height: 1.7 !important; }
  .post-long .post-body ul.toc { font-size: 11px; }
  .post-long .post-tbl table { font-size: 10.5px; }
  .post-long .wp-stats b { font-size: clamp(15px, 1.4vw, 19px) !important; }
  .post-long .wp-stats span { font-size: 10.5px; }
  @media (max-width: 640px) { .post-long .post-body { font-size: 13.5px; } .post-long figure.cb pre.code { font-size: 10.5px !important; } }

  /* the paper's abstract opens the post: set apart from the buttons, with a red rule */
  .post-long .paper-actions-c { margin-bottom: 36px; }
  .wp-abstract { margin: 0 0 40px; padding: 4px 0 4px 20px; border-left: 2px solid #E0193F; }
  .wp-abstract p { max-width: 68ch; color: #C4C4C4; }
  .wp-abstract p:last-child { margin-bottom: 0; }
  .wp-abstract .wp-abstract-k { margin: 0 0 14px !important; font: 400 10.5px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #F0485D !important; }
  .wp-abstract .wp-abstract-k { max-width: none !important; }
  .post-long .post-sec h2 { margin-top: 28px !important; margin-bottom: 14px !important; } .post-long .post-sec:first-of-type h2 { margin-top: 28px !important; }

  /* citation blocks: copy button in the panel label */
  .post-long figure.cb figcaption { display: flex; justify-content: space-between; align-items: center; }
  .cite-copy { background: transparent; border: 1px solid #2E2E2E; color: #8E8E8E; font: 400 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; padding: 5px 8px; cursor: pointer; }
  .cite-copy:hover { color: #FFFFFF; border-color: #E0193F; background: #E0193F; }
  .cite-copy.done { color: #F0485D; border-color: #F0485D; background: transparent; }
  @media (max-width: 820px), (pointer: coarse) { .cite-copy { min-height: 32px; font-size: 11px; } }

  /* =====================================================================
     Syntax colours, site-wide (Pygments classes "pg-*" and the site's own "hl-*"),
     red / white / grey only. tools/highlight_code.py writes the spans.
     ===================================================================== */
  pre.hl, pre.hl code { color: #C9C9C9; }
  .pg-k, .pg-kd, .pg-kn, .pg-kr, .pg-kp, .pg-ow, .pg-kc { color: #F0485D; }
  .pg-kt, .pg-m, .pg-mi, .pg-mf, .pg-mh, .pg-il { color: #FF8597; }
  .pg-s, .pg-s1, .pg-s2, .pg-sb, .pg-sc, .pg-ss, .pg-sd, .pg-sh { color: #E9C5CB; }
  .pg-sa, .pg-si, .pg-se { color: #F0485D; }
  .pg-c, .pg-c1, .pg-cm, .pg-ch, .pg-cs { color: #6A6A6A; font-style: italic; }
  .pg-o, .pg-p { color: #8A8A8A; }
  .pg-nc, .pg-nn, .pg-nf, .pg-fm, .pg-nb, .pg-bp { color: #F2F2F2; }
  .pg-n, .pg-nx, .pg-nl, .pg-na, .pg-py { color: #D6D6D6; }
  .pg-nv, .pg-vg, .pg-vi { color: #FF8597; }
  .pg-nt { color: #F2F2F2; }
  .hl-url { color: #D6D6D6; text-decoration: underline; text-decoration-color: #3A3A3A; text-underline-offset: 3px; }
  .post-long .paper-actions-top { margin: 32px 0 6px !important; }
  /* paper buttons work anywhere in a post, not only inside the body text */
  .post .paper-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border: 1px solid #3A3A3A; border-radius: 2px; background: none; color: #EDEDED; cursor: pointer;
    font: 500 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-decoration: none;
  }
  .post .paper-btn:hover { border-color: #F0485D; color: #FFFFFF; }
  .post .paper-btn.primary { background: #F0485D; border-color: #F0485D; color: #140A0C; }
  .post .paper-btn.primary:hover { background: #FF6274; }
  .post .paper-btn svg { flex: none; }
  @media (max-width: 820px), (pointer: coarse) { .post .paper-btn { font-size: 11px; } }
  .post-long .post-tbl table, .post-long .post-tbl th, .post-long .post-tbl td { font-family: 'Red Hat Mono', ui-monospace, monospace; }

  .hero main { position: relative; }

  /* =====================================================================
     About now carries Careers: the roles sit under the statement, the footer follows them
     ===================================================================== */
  body.about-view > .foot { position: static !important; }
  .ab-careers { background: #111111; color: #EDEDED; }
  .ab-careers .cr-wrap { padding-top: clamp(72px, 11vh, 120px); }
  .ab-k { margin: 0 0 clamp(32px, 5vh, 52px) !important; text-align: center; font: 400 clamp(16px, 1.9vw, 22px)/1.1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.12em; color: #F2F2F2; }
  .ab-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: #BDBDBD; opacity: 0; pointer-events: none; z-index: 2; }
  .sp-opened .ab-cue { opacity: 1; pointer-events: auto; transition: opacity 500ms ease 900ms; }
  .sp-instant .ab-cue { transition: none; }
  .ab-cue:hover { color: #FFFFFF; }
  @media (max-height: 600px) { .ab-cue { display: none; } }


  /* HIGH PERFORMANCE BY DESIGN: the pulse now fills every letter red as it passes, holds the
     whole phrase red for about a second, then wipes back to white. Same 3 s beat as the red
     block on UNRESTRICTED: the phrase turns red as UNRESTRICTED is revealed. */
  .tl-b { background-image: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 33.2%, #E0193F 33.4%, #FF3355 50%, #E0193F 66.6%, #F2F2F2 66.8%, #F2F2F2 100%) !important;
    animation: tlBlinkIn 420ms steps(1) 900ms both, tlFillA 3s linear 1.4s infinite !important; }
  .tl-c .tl-q { background-image: linear-gradient(90deg, #8E8E8E 0%, #8E8E8E 33.2%, #E0193F 33.4%, #E0193F 66.6%, #8E8E8E 66.8%, #8E8E8E 100%) !important;
    animation: tlFillB 3s linear 1.4s infinite !important; }
  @keyframes tlFillA {
    0%   { background-position: 100% 0; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    7%   { background-position: 50% 0; }
    42%  { background-position: 50% 0; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    49%  { background-position: 0% 0; }
    49.01%, 100% { background-position: 100% 0; }
  }
  @keyframes tlFillB {
    0%, 4% { background-position: 100% 0; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    9%   { background-position: 50% 0; }
    44%  { background-position: 50% 0; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
    50%  { background-position: 0% 0; }
    50.01%, 100% { background-position: 100% 0; }
  }
  @media (prefers-reduced-motion: reduce) { .tl-b, .tl-c .tl-q { animation: none !important; } }
  .post-long .paper-actions-mid { margin: 26px 0 26px !important; }

  /* GitHub link styled like LOGIN: a hairline outline that fills red on hover */
  .post .gh-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; box-sizing: border-box; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #EDEDED; text-decoration: none;
    font: 400 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.14em;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
  .post .gh-btn:hover, .post .gh-btn:focus-visible { border-color: #E0193F; background: #E0193F; color: #FFFFFF; }
  @media (max-width: 820px), (pointer: coarse) { .post .gh-btn { height: 40px; } }

  /* blog sizing, a small step up */
  .post-long .post-body { font-size: 14.75px; }
  .post-long .post-sec h2 { font-size: 12px; }
  .post-long figure.cb pre.code { font-size: 12px !important; }
  .post-long .post-tbl table { font-size: 11px; }
  .post-long .wp-stats span { font-size: 11px; }
  @media (max-width: 640px) { .post-long .post-body { font-size: 14px; } .post-long figure.cb pre.code { font-size: 11px !important; } }

  /* results chart in the post (classes prefixed wc- so no other chart's styles reach them) */
  .wp-chart { margin: 22px 0 26px; padding: 18px 18px 10px; border: 1px solid #262626; background: #0C0C0D; }
  .wp-chart svg { display: block; width: 100%; height: auto; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .wp-chart .wc-cap { font-size: 10px; letter-spacing: 0.18em; fill: #6E6E6E; }
  .wp-chart .wc-lbl { font-size: 11px; fill: #BDBDBD; }
  .wp-chart .wc-tick { font-size: 10px; fill: #6E6E6E; }
  .wp-chart .wc-ax { stroke: #1F1F1F; stroke-width: 1; }
  .wp-chart .wc-ax0 { stroke: #4A4A4A; stroke-width: 1; }
  .wp-chart rect.wc-pos { fill: #E0193F; }
  .wp-chart rect.wc-neg { fill: #4A4A4A; }
  .wp-chart .wc-val { font-size: 11px; }
  .wp-chart text.wc-pos { fill: #FF8597; }
  .wp-chart text.wc-neg { fill: #8E8E8E; }
  .wp-chart .wc-brk { stroke: #0C0C0D; stroke-width: 3; }
  .post-body figure.wp-chart svg { background: none !important; border: 0 !important; }

  /* =====================================================================
     Performance figures: a card with no figures stays redacted; a published card
     uncovers each figure with a red block that wipes away, row by row
     ===================================================================== */
  .si-private .si-v { display: inline-block; width: min(5.5em, 90%); height: 0.95em; vertical-align: middle; background: repeating-linear-gradient(90deg, #262626 0 9px, #1C1C1C 9px 11px); color: transparent !important; user-select: none; }
  .si-private .si-head span:last-child::after { content: "  ·  FIGURES PRIVATE"; color: #E0193F; }
  .si-v.is-null { color: #5E5E5E; }
  .si-panel:not(.si-private) .si-v { position: relative; display: inline-block; color: #F2F2F2; font-variant-numeric: tabular-nums; }
  .si-panel:not(.si-private) .si-v.is-null { color: #5E5E5E; }
  .si-panel:not(.si-private) .si-v::after { content: ""; position: absolute; inset: -2px -3px; background: #E0193F; transform: scaleX(1); transform-origin: right center; }
  .si-panel.si-shown .si-v::after { transform: scaleX(0); transition: transform 420ms cubic-bezier(.7, 0, .3, 1); }
  .si-panel.si-shown tbody tr:nth-child(1) .si-v::after { transition-delay: 0ms; }
  .si-panel.si-shown tbody tr:nth-child(2) .si-v::after { transition-delay: 110ms; }
  .si-panel.si-shown tbody tr:nth-child(3) .si-v::after { transition-delay: 220ms; }
  .si-panel.si-shown tbody tr:nth-child(4) .si-v::after { transition-delay: 330ms; }
  .si-panel.si-shown tbody tr td:nth-child(3) .si-v::after { transition-delay: calc(var(--d, 0ms) + 60ms); }
  @media (prefers-reduced-motion: reduce) { .si-panel:not(.si-private) .si-v::after { display: none; } }
  .si-table td[colspan] { text-align: left; }
  .si-private .si-head span:last-child::after { content: "  ·  PRIVATE" !important; }
  .si-private .si-head span:last-child::after { content: none !important; }
  .si-private .si-head span:first-child::after { content: "  ·  PRIVATE"; color: #E0193F; }

  /* =====================================================================
     Header: LOG IN (hairline outline) and SIGN UP (solid red), each opening its own view
     ===================================================================== */
  .auth-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { width: auto !important; margin: 0 !important; padding: 0 14px !important; }
  .home-splash header .login.signup, .hero header .login.signup, .r-bar .login.signup { background: #E0193F !important; border-color: #E0193F !important; color: #FFFFFF !important; }
  .home-splash header .login.signup:hover, .hero header .login.signup:hover, .r-bar .login.signup:hover { background: #FF2A4E !important; border-color: #FF2A4E !important; }
  .auth-btns .login[hidden] { display: none !important; }
  @media (max-width: 619px) {
    .home-splash header .auth-btns, .hero header .auth-btns, .r-bar .auth-btns { grid-column: 2; grid-row: 1; gap: 6px; }
    .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { padding: 0 10px !important; }
  }
  /* B200 card: the private badge rides on its title so both cards' rows stay level */
  .si-private .si-head span:last-child::after { content: none !important; }
  .si-private .si-head span:first-child::after { content: "  ·  PRIVATE"; color: #E0193F; }

  /* LOG IN and SIGN UP: one size */
  .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { width: 100px !important; padding: 0 !important; justify-content: center; }
  @media (max-width: 619px) { .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { width: 88px !important; } }

  /* LOG IN and SIGN UP, one size */
  .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { width: 100px !important; padding: 0 !important; justify-content: center; }
  @media (max-width: 619px) { .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { width: 84px !important; } }

  .home-splash header .auth-btns .login.is-org, .hero header .auth-btns .login.is-org, .r-bar .auth-btns .login.is-org { width: auto !important; padding: 0 14px !important; }

  /* =====================================================================
     About: Tokens processed (numbers only), between the statement and Careers,
     set like the Careers block: centred heading, quiet line, one row of counters
     ===================================================================== */
  body.about-view > .revenue.ab-tokens { display: block !important; background: #111111; padding: clamp(80px, 12vh, 128px) clamp(16px, 2.5vw, 44px) 0 !important; border: 0 !important; }
  .ab-tokens .wrap { max-width: 1100px; margin: 0 auto; }
  .ab-tokens .rev-top { display: block; margin: 0 0 clamp(36px, 5vh, 52px); text-align: center; }
  .ab-tokens .rev-top .intro { max-width: none; margin: 0 auto; }
  .ab-tokens .rev-top .intro p { margin: 0; font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: #8E8E8E; }
  .ab-tokens .counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid #262626; margin: 0; }
  .ab-tokens .counters .ctr-head { display: none; }
  .ab-tokens .counters .ctr { padding: 24px 22px 22px; border-left: 1px solid #262626; }
  .ab-tokens .counters .ctr:nth-of-type(2) { border-left: 0; }
  .ab-careers .cr-wrap { padding-top: clamp(80px, 12vh, 128px); }
  @media (max-width: 760px) { .ab-tokens .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-tokens .counters .ctr:nth-of-type(4) { border-left: 0; } .ab-tokens .counters .ctr:nth-of-type(n+4) { border-top: 1px solid #262626; } }
  /* align Tokens processed with Careers: same heading, same width */
  .ab-tokens .wrap { max-width: 936px !important; padding: 0 !important; }
  .ab-tokens h2.ab-k { font: 400 clamp(16px, 1.9vw, 22px)/1.1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.12em !important; text-transform: none; margin: 0 0 14px !important; color: #F2F2F2 !important; }
  .ab-tokens .counters .ctr { border-left: 1px solid #262626 !important; }
  .ab-tokens .counters .ctr:first-of-type { border-left: 0 !important; }
  @media (max-width: 760px) { .ab-tokens .counters .ctr:nth-of-type(3) { border-left: 0 !important; } .ab-tokens .counters .ctr:nth-of-type(n+3) { border-top: 1px solid #262626; } }


  /* About: the same current-page marker as Research and the role pages ("> ABOUT" in red) */
  .home-splash header nav a[aria-current="page"] { position: relative; color: #F0485D !important; text-decoration: none; }
  .home-splash header nav a[aria-current="page"]::before { content: ""; position: absolute; right: 100%; margin-right: 8px; }
  @media (max-width: 619px) {
    .home-splash header nav a[aria-current="page"]::before { content: none; }
    .home-splash header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
  }

  /* the wordmark is home's nav item: red on the homepage, white everywhere else */
  .hero header .wordmark[aria-current="page"], .home-splash header .wordmark[aria-current="page"], .r-bar .wordmark[aria-current="page"] { color: #F0485D !important; }

  /* HIGH PERFORMANCE BY DESIGN: a blink-dash. The red creeps in, then whips across the
     rest of the phrase (slow to fast), lands with a hard double flicker, holds, and leaves
     the same way. Same 3 s beat as UNRESTRICTED. */
  .tl-b { animation: tlBlinkIn 420ms steps(1) 900ms both, tlDashA 3s linear 1.4s infinite, tlDashBlink 3s linear 1.4s infinite !important; }
  .tl-c .tl-q { animation: tlDashB 3s linear 1.4s infinite, tlDashBlink 3s linear 1.4s infinite !important; }
  @keyframes tlDashA {
    0%     { background-position: 100% 0; animation-timing-function: cubic-bezier(.92, 0, 1, .55); }
    11%    { background-position: 50% 0; }
    44%    { background-position: 50% 0; animation-timing-function: cubic-bezier(.92, 0, 1, .55); }
    53%    { background-position: 0% 0; }
    53.01%, 100% { background-position: 100% 0; }
  }
  @keyframes tlDashB {
    0%, 10%  { background-position: 100% 0; animation-timing-function: cubic-bezier(.7, 0, 1, .6); }
    13%      { background-position: 50% 0; }
    52%      { background-position: 50% 0; animation-timing-function: cubic-bezier(.7, 0, 1, .6); }
    55%      { background-position: 0% 0; }
    55.01%, 100% { background-position: 100% 0; }
  }
  @keyframes tlDashBlink {
    0%, 13%   { opacity: 1; }
    13.3%     { opacity: 0.2; }
    13.9%     { opacity: 1; }
    14.4%     { opacity: 0.45; }
    15%, 55%  { opacity: 1; }
    55.3%     { opacity: 0.25; }
    55.8%, 100% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .tl-b, .tl-c .tl-q { animation: none !important; } }
  /* the wordmark never underlines on hover */
  .wordmark, .wordmark:hover, .wordmark:focus, .wordmark:focus-visible { text-decoration: none !important; }
  /* > API on the homepage, red like > RESEARCH and > ABOUT */
  .hero header nav a[aria-current="page"] { color: #F0485D !important; }

  /* About: one counting figure between the statement and Careers */
  button.ab-cue { background: none; border: 0; padding: 0; cursor: pointer; }
  .ab-tokens .counters.ab-count { display: flex; justify-content: center; border: 0 !important; }
  .ab-tokens .ab-count .ctr { border: 0 !important; padding: 8px 0 0 !important; display: flex; flex-direction: column; align-items: center; }
  .ab-tokens .ab-count .ctr-meter { display: none !important; }
  .ab-tokens .ab-count .ctr-meta { justify-content: center; margin-top: 16px; }
  .ab-tokens .ab-count .ctr-rate { font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #6E6E6E; }
  .ab-sub { margin: -14px 0 clamp(32px, 5vh, 48px); text-align: center; font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: #8E8E8E; }
  .ab-tokens .ab-count .ctr { width: 100%; }

  /* Nav: RESEARCH sits exactly on the page's centre line, API and ABOUT mirror it at equal gaps */
  @media (min-width: 620px) {
    .hero header nav[aria-label="Primary"], .home-splash header nav[aria-label="Primary"], .r-bar nav.r-nav[aria-label="Primary"] {
      display: grid !important; grid-template-columns: 1fr auto 1fr; column-gap: 5vw !important; row-gap: 0;
      width: calc(90px + 2 * (5vw + 62px)); justify-items: center;
    }
    .hero header nav[aria-label="Primary"] > a:first-child, .home-splash header nav[aria-label="Primary"] > a:first-child, .r-bar nav.r-nav[aria-label="Primary"] > a:first-child { justify-self: end; }
    .hero header nav[aria-label="Primary"] > a:last-child, .home-splash header nav[aria-label="Primary"] > a:last-child, .r-bar nav.r-nav[aria-label="Primary"] > a:last-child { justify-self: start; }
  }



  /* =====================================================================
     HIGH PERFORMANCE: blink-dash + switch LEDs. The red dashes in (slow to fast) and lands
     with a blink, then, while the phrase is red, its letters flicker independently and fast,
     like the activity lights on a busy network switch, until the red dashes out.
     BY DESIGN keeps the dash but no longer blinks.
     ===================================================================== */
  .tl-c .tl-q { animation: tlDashB 3s linear 1.4s infinite !important; }
  .tl-b { position: relative; }
  .tl-leds { position: absolute; left: 0; top: 0; white-space: pre; pointer-events: none; }
  .tl-leds span { color: transparent; -webkit-text-fill-color: currentColor; }
  .tl-leds span.on { color: #FF6A82; text-shadow: 0 0 6px rgba(255, 60, 90, 0.55); }
  .tl-leds span.off { color: #4A0812; }
  @media (prefers-reduced-motion: reduce) { .tl-leds { display: none; } }

  /* curl highlighting: command white, flag grey, method red, URL pale pink with the host brightest */
  .hl-cmd { color: #FFFFFF !important; }
  .hl-flag { color: #8E8E8E !important; }
  .hl-method { color: #F0485D !important; }
  .hl-url { color: #E9C5CB !important; text-decoration: none !important; }
  .hl-url .hl-scheme { color: #A8878D; }
  .hl-url .hl-path { color: #FF8597; }
  /* Team order: statement → Careers → Tokens processed; even spacing between and below */
  .ab-careers .cr-wrap { padding-bottom: 0 !important; }
  body.about-view > .revenue.ab-tokens { padding-bottom: clamp(88px, 12vh, 128px) !important; }

  /* Team: "ultra-low-latency systems." runs the same blink-dash + switch LEDs as HIGH PERFORMANCE */
  .sp-statement .hb-ul::after { display: none !important; }
  .sp-statement .hb-ul { position: relative; background-image: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 33.2%, #E0193F 33.4%, #FF3355 50%, #E0193F 66.6%, #F2F2F2 66.8%, #F2F2F2 100%) !important; background-size: 300% 100% !important; }
  .sp-opened .sp-statement .hb-ul, .sp-opened .hb-ul { animation: tlDashA 3s linear 0.4s infinite, tlDashBlink 3s linear 0.4s infinite !important; }
  .sp-instant .hb-ul { animation-delay: 0s, 0s !important; }
  @media (prefers-reduced-motion: reduce) { .sp-opened .hb-ul { animation: none !important; } }

  /* =====================================================================
     API: features and pricing are one tabbed block (01–05), then the docs.
     No hairlines between sections; the same 96px space before the block,
     between the block and the docs, and between the docs and the footer.
     ===================================================================== */
  .pl-wrap { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  @media (max-width: 1100px) { .pl-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
  @media (max-width: 760px) { .pl-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 480px) { .pl-wrap { grid-template-columns: minmax(0, 1fr) !important; } }
  .pl-stage .api-pricing { border-top: 0 !important; background: transparent !important; display: block; }
  .pl-stage .api-pricing[hidden] { display: none !important; }
  .pl-stage .api-pricing .pr-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.api-view .pillars { padding-top: 96px !important; }
  body.api-view .pl-stage { margin-bottom: 0 !important; }
  body.api-view .api-docs { border-top: 0 !important; padding-top: 96px !important; padding-bottom: 96px !important; }
  body.api-view > .foot { border-top: 0 !important; }

  /* BY DESIGN matches BY DEFAULT: plain, steady, no red pass */
  .tl-c .tl-q { animation: none !important; background: none !important; color: #8E8E8E !important; -webkit-text-fill-color: #8E8E8E !important; }

  /* the wordmark, one step larger (15px → 17px), same position and centre line */
  .hero header .wordmark, .home-splash header .wordmark, .r-bar .wordmark, header .wordmark, .wordmark { font-size: 17px !important; letter-spacing: 0.12em !important; }
  @media (max-width: 480px) { .hero header .wordmark, .home-splash header .wordmark, .r-bar .wordmark, header .wordmark, .wordmark { font-size: 16px !important; } }
  /* the wordmark is the SVG logo (assets/silares-wordmark.svg, viewBox cropped to the glyphs), filled with
     currentColor so the colours above still apply; 0.78em matches the old text's cap height (13.3px / 12.5px) */
  .wordmark .wordmark-logo { display: block; height: 0.78em; width: auto; aspect-ratio: 126.24 / 17.1; overflow: visible; }

  /* =====================================================================
     Writing: ESSAYS · RESEARCH · NEWS. Research reads in dark; Essays and News
     (and News articles) read in light, on warm paper. The switch fades.
     ===================================================================== */
  .wr-tabs { display: flex; justify-content: center; gap: clamp(28px, 5vw, 64px); margin: 0 auto clamp(26px, 4vh, 40px); padding: 0 16px; }
  .wr-tabs button { position: relative; background: none; border: 0; padding: 10px 0; cursor: pointer; font: 400 12px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.16em; color: #8E8E8E; }
  .wr-tabs button:hover { color: #F2F2F2; }
  .wr-tabs button[aria-selected="true"] { color: #E0193F; }
  .wr-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; }
  .wr-panel .wr-blurb { margin: 0 0 18px; text-align: center; font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #8E8E8E; }
  .wr-panel .wr-empty { margin: 36px 0 0; text-align: center; font: 400 11px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #6A6A6A; }
  .writing-page .r-head { text-align: center; }
  .writing-page .r-head p { margin-left: auto; margin-right: auto; }

  /* the fade between grounds */
  body.research-mode, body.research-mode .research-page, body.research-mode > .foot, body.research-mode .r-bar { transition: background-color 320ms ease, color 320ms ease; }

  /* ---- light mode ---- */
  body.wr-light { background: #F3F0EB !important; color: #141414; }
  body.wr-light .research-page { background: #F3F0EB !important; }
  body.wr-light .r-bar { background: transparent !important; }
  body.wr-light .r-bar .wordmark { color: #141414 !important; }
  body.wr-light .r-nav a { color: #141414 !important; }
  body.wr-light .r-nav a[aria-current="page"] { color: #E0193F !important; }
  body.wr-light .r-bar .login { color: #141414 !important; border-color: rgba(20, 20, 20, 0.28) !important; }
  body.wr-light .r-bar .login:hover { color: #FFFFFF !important; background: #E0193F !important; border-color: #E0193F !important; }
  body.wr-light .r-head h1 { color: #141414 !important; }
  body.wr-light .r-head p, body.wr-light .wr-blurb { color: #6A6A6A !important; }
  body.wr-light .wr-tabs button { color: #8A8580; }
  body.wr-light .wr-tabs button:hover { color: #141414; }
  body.wr-light .wr-tabs button[aria-selected="true"] { color: #E0193F; }
  body.wr-light .r-list, body.wr-light .r-item { border-color: rgba(20, 20, 20, 0.14) !important; }
  body.wr-light .r-title { color: #141414 !important; }
  body.wr-light .r-num, body.wr-light .r-date { color: #8A8580 !important; }
  body.wr-light .r-rule { background: rgba(20, 20, 20, 0.16) !important; }
  body.wr-light .r-item:hover .r-rule { background: #E0193F !important; }
  body.wr-light .wr-empty { color: #8A8580; }
  body.wr-light > .foot { background: #F3F0EB !important; color: #141414; }
  body.wr-light > .foot a { color: #141414 !important; border-bottom-color: rgba(20, 20, 20, 0.4) !important; text-decoration-color: rgba(20, 20, 20, 0.4) !important; }
  body.wr-light > .foot a:hover { color: #E0193F !important; }
  body.wr-light > .foot .foot-legal span { color: #8A8580 !important; }

  /* light articles */
  body.wr-light .post-head h1 { color: #141414 !important; }
  body.wr-light .post-head .post-by { color: #3A3A3A !important; }
  body.wr-light .post-head { border-bottom-color: rgba(20, 20, 20, 0.14) !important; }
  body.wr-light .post-sec h2 { color: #141414 !important; }
  body.wr-light .post-long .post-body { color: #2A2A2A !important; }
  body.wr-light .post-long .post-body strong { color: #141414 !important; }
  body.wr-light .post-long .post-body a { color: #C0102F; }
  body.wr-light .post-long .post-body code { background: #E8E3DC; border-color: #D9D2C9; color: #141414; }
  body.wr-light .post-long .post-tbl table, body.wr-light .post-long .post-tbl th, body.wr-light .post-long .post-tbl td { color: #2A2A2A !important; border-color: rgba(20, 20, 20, 0.14) !important; background: transparent !important; }
  body.wr-light .post-long .post-tbl th { color: #6A6A6A !important; }
  body.wr-light .post-long .post-tbl { border-color: rgba(20, 20, 20, 0.14) !important; }
  body.wr-light .post-toc button { color: #8A8580 !important; }
  body.wr-light .post-toc button[aria-current="true"], body.wr-light .post-toc button.on { color: #141414 !important; }
  body.wr-light .post-back a { color: #E0193F !important; }
  /* code stays on its dark panel, which reads as an inset on paper */
  body.wr-light .post-long figure.cb { border-color: #1E1E1E; }
  .writing-page .wr-tabs { margin-top: clamp(26px, 4vh, 40px); }

  /* HIGH PERFORMANCE is always on screen; only the red dash animates.
     (The old blink-in hid the words for the first 0.9 s of every visit.) */
  .tl-b { animation: tlDashA 3s linear 1.4s infinite, tlDashBlink 3s linear 1.4s infinite !important; opacity: 1 !important; background-position: 100% 0; }

  /* TESTING ONLY: the test-login link under LOG IN */
  #auth .auth-test { display: block; width: 100%; margin: 0; padding: 10px 0; background: none; border: 1px dashed #3A3A3A; color: #8E8E8E; cursor: pointer; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }
  #auth .auth-test:hover { color: #FFFFFF; border-color: #E0193F; }

  /* =====================================================================
     Footer: on pages short enough to fit, it rests at the bottom of the window;
     on long pages it follows the content as before.
     ===================================================================== */
  body.research-mode, body.dash-mode, body.status-mode, body.careers-mode, body.apps-mode, body.legal-mode {
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  }
  body.research-mode > .research-page, body.dash-mode > .dash-page, body.status-mode > .status-page,
  body.careers-mode > .careers-page, body.apps-mode > .apps-page, body.legal-mode > .legal {
    min-height: 0 !important; flex: 1 0 auto; width: 100%;
  }
  body.research-mode > .foot, body.dash-mode > .foot, body.status-mode > .foot, body.careers-mode > .foot, body.apps-mode > .foot, body.legal-mode > .foot {
    margin-top: auto; flex: none; width: 100%;
  }

  /* Writing: one ground (dark) for every shelf; heading left, shelf switch on the right of the same row */
  .writing-page .r-head.wr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; }
  .writing-page .r-head.wr-head h1 { margin: 0; }
  .writing-page .wr-head .wr-tabs { margin: 0 !important; padding: 0; justify-content: flex-end; gap: clamp(20px, 2.6vw, 36px); }
  .writing-page .wr-head .wr-tabs button { padding: 6px 0; font-size: 11.5px; }
  .writing-page .wr-panel .r-list { margin-top: 0; }
  .writing-page .wr-panel .wr-empty { text-align: left; margin: 22px 0 0; }
  @media (max-width: 560px) { .writing-page .r-head.wr-head { flex-direction: column; align-items: flex-start; gap: 14px; } .writing-page .wr-head .wr-tabs { justify-content: flex-start; } }
  /* the empty shelf lines up with the heading and the lists */
  .writing-page .wr-panel .wr-empty { max-width: 1264px; margin: 22px 8px 0 !important; padding: 0 32px; }
  @media (max-width: 760px) { .writing-page .wr-panel .wr-empty { margin: 22px 0 0 !important; padding: 0 16px; } }

  /* Dashboard: one view (balance, add credit, receipts + notifications) */
  .db-kpis.db-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .db-rc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
  .db-rc select { height: 40px; min-width: 200px; padding: 0 12px; background: #0E0E0F; border: 1px solid #2E2E2E; color: #F2F2F2; font: 400 12px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; }
  .db-rc-auto { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font: 400 12px/1.4 'Red Hat Mono', ui-monospace, monospace; color: #BDBDBD; cursor: pointer; }
  .db-rc-auto input { accent-color: #E0193F; width: 15px; height: 15px; }
  .db-notes { list-style: none; margin: 0; padding: 0; }
  .db-notes > li { border-top: 1px solid #222222; padding: 14px 0; }
  .db-notes > li:first-child { border-top: 0; }
  .db-notes > li.dim { color: #6A6A6A; font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; }
  .db-note-head { display: flex; align-items: center; gap: 16px; }
  .db-note-k { flex: none; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: #F0485D; min-width: 132px; }
  .db-note-t { flex: 1 1 auto; font: 400 12.5px/1.5 'Red Hat Mono', ui-monospace, monospace; color: #E6E6E6; }
  .db-receipt { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 14px 0 2px 148px; padding: 14px 16px; background: #0E0E0F; border: 1px solid #262626; font: 400 12px/1.5 'Red Hat Mono', ui-monospace, monospace; }
  .db-receipt[hidden] { display: none; }
  .db-receipt dt { color: #8E8E8E; } .db-receipt dd { margin: 0; color: #F2F2F2; }
  .db-receipt dt:nth-last-of-type(2), .db-receipt dd:nth-last-of-type(2) { color: #F0485D; }
  @media (max-width: 640px) { .db-note-head { flex-wrap: wrap; gap: 8px; } .db-note-k { min-width: 0; } .db-receipt { margin-left: 0; grid-template-columns: 120px 1fr; } .db-rc-auto { margin-left: 0; } .db-kpis.db-kpis-2 { grid-template-columns: minmax(0, 1fr) !important; } }
  /* One tab (WRITING; TEAM was removed): one column sized to the link, so it is centred on the page's centre line */
  @media (min-width: 620px) {
    .hero header nav[aria-label="Primary"], .home-splash header nav[aria-label="Primary"], .r-bar nav.r-nav[aria-label="Primary"] { grid-template-columns: auto; width: max-content !important; }
  }


  /* Dashboard: balance and add credit in one card; plan beside the rates */
  .db-balance { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: 0; padding: 0 !important; }
  .db-balance > div { padding: 22px 24px; }
  .db-balance .db-bal-add { border-left: 1px solid #262626; }
  .db-k { display: block; margin: 0 0 10px; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.2em; color: #8E8E8E; }
  .db-bal-now b { display: block; font: 400 clamp(26px, 3vw, 34px)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.02em; }
  .db-bal-now b.red { color: #F0485D; }
  .db-bal-now small, .db-plan small { display: block; margin-top: 10px; font: 400 11.5px/1.6 'Red Hat Mono', ui-monospace, monospace; color: #8E8E8E; }
  .db-bal-add .db-amounts { margin: 0 0 18px; }
  .db-bal-add .db-group { margin: 0 0 14px; }
  .db-group-primary .db-method { min-width: 240px; }
  .db-method .db-m-name { color: #F2F2F2; }
  .db-method .db-m-sub { margin-left: 10px; font-size: 10.5px; color: #8E8E8E; }
  .db-group-soon .db-method[disabled] { opacity: 0.45; cursor: not-allowed; position: relative; }
  .db-soon { margin-left: 10px; padding: 3px 6px; border: 1px solid #3A3A3A; font: 400 9px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: #BDBDBD; }
  .db-pricing { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); padding: 0 !important; }
  .db-pricing > div { padding: 22px 24px; }
  .db-pricing .db-rates { border-left: 1px solid #262626; }
  .db-plan b { display: block; font: 400 clamp(26px, 3vw, 34px)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #F2F2F2; }
  .db-plan b small { display: inline; margin: 0; font: 400 12px/1 'Red Hat Mono', ui-monospace, monospace; color: #8E8E8E; }
  .db-rates .db-tbl { margin: 0; }
  .db-rates .db-note { margin: 12px 0 0; }
  .db-rates .db-note a { color: #F0485D; }
  @media (max-width: 860px) { .db-balance, .db-pricing { grid-template-columns: minmax(0, 1fr); } .db-balance .db-bal-add, .db-pricing .db-rates { border-left: 0; border-top: 1px solid #262626; } .db-group-primary .db-method { min-width: 0; } }

  /* Dashboard: amount and CONTINUE TO STRIPE on one row; cash and crypto beneath; current plan */
  .db-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .db-add-row .db-amounts { margin: 0 !important; }
  .db-add-row #db-pay { height: 40px; padding: 0 18px; }
  .db-pay-sum { margin: 10px 0 0; font: 400 11.5px/1.6 'Red Hat Mono', ui-monospace, monospace; color: #8E8E8E; }
  .db-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #222222; }
  .db-alt .db-k { margin: 0 6px 0 0; }
  .db-soon-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px dashed #333333; color: #6E6E6E; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; cursor: not-allowed; }
  .db-soon-pill i { font-style: normal; color: #8E8E8E; }
  .db-bal-add .db-pay-msg { margin-top: 14px; }
  .db-plan-name { margin: 0 0 8px; font: 400 13px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.14em; color: #F2F2F2; display: flex; align-items: center; gap: 10px; }
  .db-active { padding: 3px 7px; border: 1px solid #F0485D; color: #F0485D; font: 400 9px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; }

  /* Dashboard: the full pricing block (search, aligned/abliterated, modality tabs) under the current plan */
  .db-pricing { grid-template-columns: minmax(0, 1fr) !important; }
  .db-pricing .db-rates { border-left: 0 !important; border-top: 1px solid #262626; }
  .db-pricing .db-plan { display: grid; grid-template-columns: auto auto 1fr; align-items: end; column-gap: 28px; row-gap: 6px; }
  .db-pricing .db-plan .db-k { grid-column: 1 / -1; margin-bottom: 4px; }
  .db-pricing .db-plan .db-plan-name { margin: 0; }
  .db-pricing .db-plan small { margin: 0; align-self: center; }
  .db-rates .pr-search { margin-bottom: 18px; }
  .db-rates .pr-foot { margin: 16px 0 0; }
  @media (max-width: 760px) { .db-pricing .db-plan { grid-template-columns: minmax(0, 1fr); } }

  /* Pricing is its own section again, between the features and the docs, 96px from each */
  .pl-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  @media (max-width: 860px) { .pl-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 480px) { .pl-wrap { grid-template-columns: minmax(0, 1fr) !important; } }
  body.api-view > .api-pricing { display: block; border-top: 0 !important; padding-top: 96px !important; padding-bottom: 0 !important; }
  body.api-view > .api-pricing .pr-wrap { padding-top: 0; }
  body.api-view > .api-pricing h2#pr-title { margin-top: 0; }

  /* Pricing, then the docs at the bottom: a tighter gap between them, room before the footer */
  body.api-view > .api-docs { padding-top: 48px !important; padding-bottom: 96px !important; }
  body.api-view > .api-pricing { padding-bottom: 0 !important; }
  body.api-view > .api-docs .docs-layout { padding-bottom: 0 !important; }
  body.api-view > .api-docs #docs-errors .tbl { margin-bottom: 0; }
  /* Phones: wrap code instead of scrolling it sideways, so no line runs under the COPY button */
  @media (max-width: 760px) {
    .docs-body .codeblock pre { white-space: pre-wrap !important; overflow-wrap: break-word; overflow-x: visible; font-size: 10.5px !important; padding: 14px 76px 14px 14px !important; }
  }

  /* Docs as tabs: QUICKSTART / OPENAI SDK / OPTIONS / ERRORS, one panel at a time, no sidebar */
  .api-docs .docs-body { max-width: 860px; }
  body.api-view > .api-docs .docs-layout { max-width: 1200px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .docs-body .docs-tabs { margin-top: 32px; }
  .docs-body .docs-tabs button { font-size: 11px; letter-spacing: 0.16em; min-height: 44px; color: #8E8E8E; }
  .docs-body .docs-tabs button[aria-pressed="true"] { color: #FFFFFF; }
  .docs-body section.docs-panel { margin-top: 0; padding-top: 24px; border-top: 0; }
  .docs-body section.docs-panel > p:first-child { margin-top: 0; }
  @media (max-width: 760px) {
    .docs-body .docs-tabs { overflow-x: auto; scrollbar-width: none; }
    .docs-body .docs-tabs::-webkit-scrollbar { display: none; }
    .docs-body .docs-tabs button { flex: none; padding: 0 12px; }
  }

  /* Syntax colours v3: higher contrast so code reads as highlighted, still on-brand.
     site palette only: reds, white, greys. keyword red · string pale red · number/variable/key bright red · name white · punctuation grey */
  pre .pg-k, pre .pg-kd, pre .pg-kn, pre .pg-kr, pre .pg-kp, pre .pg-kc, pre .pg-ow { color: #F0485D; }
  pre .pg-s, pre .pg-s1, pre .pg-s2, pre .pg-sb, pre .pg-sc, pre .pg-ss, pre .pg-sd, pre .pg-sh { color: #F6C3CB; }
  pre .pg-sa, pre .pg-si, pre .pg-se { color: #F0485D; }
  pre .pg-m, pre .pg-mi, pre .pg-mf, pre .pg-mh, pre .pg-il, pre .pg-kt { color: #FF8597; }
  pre .pg-nb, pre .pg-bp, pre .pg-nf, pre .pg-fm, pre .pg-nc, pre .pg-nn { color: #FF8597; }
  pre .pg-nv, pre .pg-vg, pre .pg-vi { color: #FF8597; }
  pre .pg-nt { color: #FF8597; }
  pre .pg-n, pre .pg-nx, pre .pg-nl, pre .pg-na, pre .pg-py { color: #EDEDED; }
  pre .pg-o, pre .pg-p { color: #7E7E7E; }
  pre .pg-c, pre .pg-c1, pre .pg-cm, pre .pg-ch, pre .pg-cs { color: #6A6A6A; font-style: italic; }
  pre .hl-flag { color: #9A9A9A !important; }
  pre .hl-url { color: #FFFFFF !important; }
  pre .hl-url .hl-scheme { color: #8E8E8E !important; }
  pre .hl-url .hl-path { color: #FF6B7F !important; }

  /* Pricing: the model ID to send, under each model name */
  .m-id { display: block; width: max-content; margin: 4px 0 2px; padding: 0; background: none !important; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.02em; color: #FF8597; }
  .docs-body .tbl th.num, .docs-body .tbl td.num { text-align: right; }
  @media (max-width: 760px) {
    #docs-limits .tbl th, #docs-limits .tbl td { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
    #docs-limits .tbl th { font-size: 9px; letter-spacing: 0.08em; }
  }

  /* Homepage pricing, compact: one plan card on the left, the table on the right;
     ALIGNED / ABLITERATED are the table's tabs, with the search on the same row */
  .api-pricing .pr-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
  .api-pricing .plan-one { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; margin: 0; padding: 22px 22px 24px; }
  .api-pricing .plan-one h3 { margin: 0; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; }
  .api-pricing .plan-one .plan-list { padding: 14px 0 0; margin-top: 8px; border-top: 1px solid #262626; gap: 8px; }
  .api-pricing .plan-one .plan-list li { font-size: 11.5px; }
  .api-pricing .pr-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; border-bottom: 1px solid #2A2A2A; }
  .api-pricing .pr-vtabs { margin: 0; flex-wrap: nowrap; }
  .api-pricing .pr-vtabs button { min-height: 44px; padding: 0 18px; border: 0 !important; border-bottom: 1px solid transparent !important; margin: 0 0 -1px !important; background: none !important; box-shadow: none !important; color: #8E8E8E; }
  .api-pricing .pr-vtabs button:first-child { padding-left: 0; }
  .api-pricing .pr-vtabs button:hover { color: #D6D6D6; }
  .api-pricing .pr-vtabs button[aria-checked="true"] { color: #F2F2F2; border-bottom-color: #F0485D !important; }
  .api-pricing .pr-bar .pr-search { margin: 0 0 8px; flex: 0 1 280px; flex-wrap: nowrap; }
  .api-pricing .pr-bar #pr-q { width: 100%; }
  .api-pricing .pr-bar .pr-count:empty { display: none; }
  .api-pricing .pr-main .pr-panel { padding-top: 0; }
  .api-pricing .pr-main .pr-tbl { margin-top: 0; }
  @media (max-width: 900px) {
    .api-pricing .pr-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    .api-pricing .pr-bar { flex-wrap: wrap; }
    .api-pricing .pr-bar .pr-search { flex-basis: 100%; order: -1; margin: 0 0 4px; }
  }
  /* API docs: just the install command under the heading */
  .api-docs .docs-body > h1 + .codeblock { margin-top: 16px; }

  /* Docs on the pricing grid: menu card left (plan-card width), content right at full width */
  body.api-view > .api-docs .docs-layout { display: block; }
  .api-docs .docs-h { margin: 0 0 14px; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; color: #F2F2F2; }
  .api-docs .docs-grid { margin-top: 20px; }
  .api-docs .docs-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .api-docs .docs-body { max-width: none !important; min-width: 0; }
  .api-docs .docs-nav { position: sticky; top: 24px; border: 1px solid #262626; background: #0E0E0E; padding: 10px 0; }
  .api-docs .docs-nav .docs-tabs { display: grid; gap: 0; margin: 0; border: 0; }
  .api-docs .docs-nav .docs-tabs button { display: block; width: 100%; min-height: 40px; padding: 0 22px !important; margin: 0; text-align: left; border: 0; border-left: 2px solid transparent; color: #8E8E8E; font-size: 11px; letter-spacing: 0.06em; text-transform: none; }
  .api-docs .docs-nav .docs-tabs button:hover { color: #EDEDED; }
  .api-docs .docs-nav .docs-tabs button[aria-pressed="true"] { color: #FFFFFF; border-left-color: #F0485D; border-bottom-color: transparent; background: #151515; }
  .api-docs .docs-body section.docs-panel { padding-top: 0; }
  .api-docs .docs-body .steps { margin-top: 0; }
  @media (max-width: 900px) {
    .api-docs .docs-grid { grid-template-columns: minmax(0, 1fr); }
    .api-docs .docs-nav { position: static; padding: 0; border: 0; background: none; }
    .api-docs .docs-nav .docs-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #262626; }
    .api-docs .docs-nav .docs-tabs::-webkit-scrollbar { display: none; }
    .api-docs .docs-nav .docs-tabs button { flex: none; width: auto; min-height: 44px; padding: 0 14px !important; border-left: 0; border-bottom: 1px solid transparent; background: none; margin-bottom: -1px; }
    .api-docs .docs-nav .docs-tabs button:first-child { padding-left: 0 !important; }
    .api-docs .docs-nav .docs-tabs button[aria-pressed="true"] { background: none; border-bottom-color: #F0485D; }
  }
  .api-docs .docs-nav .docs-tabs { justify-items: stretch; }
  .api-docs .docs-nav .docs-tabs button { width: 100% !important; max-width: none !important; }
  .api-docs .docs-body .tbl table { width: 100%; }
  @media (max-width: 900px) {
    .api-docs .docs-grid > .docs-nav { order: -1 !important; }
    .api-docs .docs-nav .docs-tabs button { width: auto !important; }
  }
  .api-docs .docs-nav .docs-tabs { width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; }
  @media (min-width: 561px) { .api-docs .docs-body .tbl table { display: table !important; width: 100% !important; } }
  @media (max-width: 900px) { .api-docs .docs-nav .docs-tabs { width: auto !important; } }

  /* Pricing as the last docs tab: the plan as one wide strip, then the variant tabs + search, then the table */
  #pricing .plan-row { display: grid !important; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 0; margin: 0 0 20px; padding: 0; border: 1px solid #262626; background: #0E0E0E; }
  #pricing .plan-head { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-right: 1px solid #262626; }
  #pricing .plan-name { margin: 0; font: 700 13.5px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; }
  #pricing .plan-row .plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; align-content: center; padding: 20px 22px; margin: 0; border: 0; }
  #pricing .plan-row .plan-list li { font-size: 11.5px; }
  #pricing .pr-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; border-bottom: 1px solid #2A2A2A; }
  #pricing .pr-vtabs { margin: 0; flex-wrap: nowrap; }
  #pricing .pr-vtabs button { min-height: 44px; padding: 0 18px; border: 0 !important; border-bottom: 1px solid transparent !important; margin: 0 0 -1px !important; background: none !important; box-shadow: none !important; color: #8E8E8E; }
  #pricing .pr-vtabs button:first-child { padding-left: 0; }
  #pricing .pr-vtabs button:hover { color: #D6D6D6; }
  #pricing .pr-vtabs button[aria-checked="true"] { color: #F2F2F2; border-bottom-color: #F0485D !important; }
  #pricing .pr-bar .pr-search { margin: 0 0 8px; flex: 0 1 280px; flex-wrap: nowrap; }
  #pricing .pr-bar #pr-q { width: 100%; }
  #pricing .pr-bar .pr-count:empty { display: none; }
  #pricing .pr-tbl { margin: 0; border: 0; }
  #pricing .pr-tbl table { display: table !important; width: 100% !important; }
  @media (max-width: 760px) {
    #pricing .plan-row { grid-template-columns: minmax(0, 1fr); }
    #pricing .plan-head { border-right: 0; border-bottom: 1px solid #262626; }
    #pricing .plan-row .plan-list { grid-template-columns: minmax(0, 1fr); }
    #pricing .pr-bar { flex-wrap: wrap; }
    #pricing .pr-bar .pr-search { flex-basis: 100%; order: -1; margin: 0 0 4px; }
  }
  /* With pricing inside the docs, the docs follow the feature tabs directly */
  body.api-view > .api-docs { padding-top: 96px !important; padding-bottom: 72px !important; }
  /* Footer on the homepage: on the same 1200px edges as the content above it */
  body.api-view > .foot { padding-left: max(clamp(16px, 2.5vw, 44px), calc((100% - 1200px) / 2)) !important; padding-right: max(clamp(16px, 2.5vw, 44px), calc((100% - 1200px) / 2)) !important; border-top: 1px solid #1E1E1E; }
  #pricing .m-id { display: block; margin: 4px 0 2px !important; padding: 0 !important; background: none !important; border: 0 !important; color: #FF8597 !important; font-size: 11px !important; letter-spacing: 0.02em; }
  #pricing .plan-head p { margin: 0 !important; }
  #pricing .plan-head .plan-price { margin-top: 4px !important; }
  #pricing .plan-row .plan-list { align-content: center; }
  #pricing .plan-row .plan-list li { margin: 0; }

  /* Docs page (docs.html): same docs block as the homepage had, under a plain bar */
  body.apidocs-mode { background: #111111; }
  body.apidocs-mode .api-docs { display: block; padding: 40px clamp(16px, 2.5vw, 44px) 72px; }
  body.apidocs-mode .api-docs .docs-layout { max-width: 1200px; margin: 0 auto; padding: 0; display: block; }
  .docs-nav-k { margin: 14px 22px 6px; padding-top: 14px; border-top: 1px solid #262626; font-size: 9.5px; letter-spacing: 0.2em; color: #6E6E6E; font-family: 'Red Hat Mono', ui-monospace, monospace; }
  .docs-nav-link { display: block; padding: 10px 22px; border-left: 2px solid transparent; color: #8E8E8E; font: 400 11px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-decoration: none; }
  .docs-nav-link:hover { color: #EDEDED; }
  @media (max-width: 900px) {
    .docs-nav-k { display: none; }
    .docs-nav-link { display: inline-block; padding: 12px 16px 0 0; border: 0; text-decoration: underline; text-underline-offset: 4px; }
  }
  /* Footer: one static filled Silares mark, centred */
  .foot.foot-min { display: flex !important; justify-content: center; align-items: center; padding: 40px 16px 48px !important; border-top: 1px solid #1E1E1E; background: var(--foot-bg, #0B0B0B); }
  .foot-logo { display: inline-flex; padding: 6px; }
  .foot-logo svg { height: 44px; width: auto; display: block; }
  .foot-logo svg path { fill: #F0485D; }
  .foot-logo:hover svg path { fill: #FF5A70; }
  .foot-logo:focus-visible { outline: 2px solid #F0485D; outline-offset: 4px; }
  .docs-legal-m { display: none; }
  @media (max-width: 900px) {
    .api-docs .docs-nav .docs-nav-k, .api-docs .docs-nav .docs-nav-link { display: none !important; }
    .docs-legal-m { display: flex; gap: 20px; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid #262626; font: 400 11px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; }
    .docs-legal-m a { color: #8E8E8E; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
  }

  body.api-view .pl-stage > .api-docs { padding-top: 44px !important; padding-bottom: clamp(24px, 3vw, 36px) !important; }
  .pl-stage > .api-docs .docs-grid { margin-top: 0 !important; }
  /* Phones: the four feature cards compact, two by two (number + title only) */
  @media (max-width: 480px) {
    .pl-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .pl { padding: 14px 14px 16px !important; gap: 4px !important; grid-template-rows: auto auto !important; }
    .pl .pl-t, .pl > :last-child:not(b):not(.pl-n) { display: none !important; }
    .pl b { font-size: 11px !important; letter-spacing: 0.12em !important; }
  }
  @media (max-width: 900px) { .pl-stage > .api-docs .docs-nav { background: none !important; } }
  @media (max-width: 760px) { body.api-view .pl-stage > .api-docs { padding-top: 16px !important; } }

  /* Footer: API DOCS on the left, the mark in the centre */
  .foot.foot-min { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; padding-left: max(clamp(16px, 2.5vw, 44px), calc((100% - 1200px) / 2)) !important; padding-right: max(clamp(16px, 2.5vw, 44px), calc((100% - 1200px) / 2)) !important; }
  .foot-docs { justify-self: start; color: #EDEDED; font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; padding: 12px 0; }
  .foot-docs:hover { color: #F0485D; }
  /* Docs menu: LEGAL label between the API sections and Terms / Privacy */
  .api-docs .docs-nav .docs-tabs .docs-nav-k { margin: 10px 22px 4px; padding-top: 14px; }
  @media (max-width: 900px) { .api-docs .docs-nav .docs-tabs .docs-nav-k { display: none !important; } }
  /* Legal sections read as prose */
  .docs-body .docs-legal { max-width: 72ch; }
  .docs-body .docs-legal .meta { margin: 0 0 12px; font-size: 10px; letter-spacing: 0.16em; color: #6E6E6E; }
  .docs-body .docs-legal h2 { margin: 28px 0 10px; }
  .docs-body .docs-legal p, .docs-body .docs-legal li { line-height: 1.75; }
  .foot.foot-min { position: relative; }
  .foot.foot-min .foot-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

  /* Homepage as a scroll: every feature its own section, the docs last; one header style for all */
  .feats { max-width: 1200px; width: calc(100% - 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; }
  .feats > .feat { display: block !important; background: transparent !important; border: 0 !important; border-top: 1px solid #222 !important; margin: 0 !important;
                   padding: clamp(56px, 8vw, 104px) 0 !important; scroll-margin-top: 0; }
  .feats > .feat:first-child { border-top: 0 !important; padding-top: clamp(32px, 5vw, 64px) !important; }
  .feats > .feat > [class$="-wrap"], .feats > .feat > .map-wrap, .feats > .feat > .docs-layout { max-width: none !important; width: auto !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .feat-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: baseline; margin: 0 0 clamp(28px, 4vw, 44px); }
  .feat-head .feat-n { grid-row: span 2; font: 500 12px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.12em; color: #F0485D; }
  .feat-head h2 { margin: 0; font: 700 15px/1.2 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; }
  .feat-head p { grid-column: 2; margin: 0; max-width: 60ch; font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #9A9A9A; }
  .feats .zdr-anim, .feats .ab, .feats .race { background-color: #0E0E0E; }
  body.api-view .feats > .api-docs { display: block !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
  .feats > .api-docs .docs-layout { padding: 0 !important; }
  .feats > .api-docs .docs-grid { margin-top: 0 !important; }
  /* section headers are <header> elements: undo the site-bar header styles on them */
  .feats .feat-head { position: static !important; display: grid !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 clamp(28px, 4vw, 44px) !important; background: none !important; border: 0 !important; box-shadow: none !important; justify-content: start !important; width: auto !important; max-width: none !important; }
  .feats .perf-wrap, .feats .perf-grid { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
  .feats > .api-docs .docs-layout { display: block !important; gap: 0 !important; }
  @media (max-width: 760px) { .feats .home-zdr ul { padding-left: 14px !important; } }

  /* READ THE DOCS: one link under 04, a red tracer around it, a typed line of what the docs cover */
  .docs-cta { max-width: 1200px; width: calc(100% - 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; padding: 0 0 clamp(64px, 9vw, 112px); }
  .dc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(16px, 3vw, 40px);
        padding: clamp(26px, 3.4vw, 40px) clamp(20px, 3vw, 40px); background: #0C0C0C; color: #F2F2F2; text-decoration: none; overflow: hidden; isolation: isolate; }
  .dc-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
  .dc-trace rect { fill: none; vector-effect: non-scaling-stroke; x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
  .dc-glow { stroke: #2A2A2A; stroke-width: 1; }
  .dc-line { stroke: #F0485D; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 14 86; stroke-dashoffset: 0; animation: dcRun 5.5s linear infinite; filter: drop-shadow(0 0 4px rgba(240, 72, 93, 0.7)); }
  @keyframes dcRun { to { stroke-dashoffset: -100; } }
  .dc-fill { position: absolute; inset: 0; z-index: -1; background: #F0485D; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
  .dc-main { font: 700 clamp(20px, 3.2vw, 34px)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.08em; white-space: nowrap; }
  .dc-type { font: 400 clamp(11px, 1.2vw, 13px)/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.08em; color: #9A9A9A; white-space: nowrap; overflow: hidden; }
  .dc-p { color: #F0485D; margin-right: 10px; }
  .dc-word { color: #EDEDED; }
  .dc-caret { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 3px; vertical-align: -0.2em; background: #F0485D; animation: dcBlink 1s steps(1) infinite; }
  @keyframes dcBlink { 50% { opacity: 0; } }
  .dc-arrow { display: inline-flex; width: clamp(34px, 4vw, 48px); }
  .dc-arrow svg { width: 100%; height: auto; overflow: visible; }
  .dc-arrow path { fill: none; stroke: #F0485D; stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: stroke 200ms ease; }
  .dc-arrow svg { transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
  .dc:hover .dc-fill, .dc:focus-visible .dc-fill { transform: scaleX(1); }
  .dc:hover .dc-type, .dc:focus-visible .dc-type, .dc:hover .dc-word, .dc:focus-visible .dc-word { color: #FFFFFF; }
  .dc:hover .dc-p, .dc:focus-visible .dc-p { color: #111111; }
  .dc:hover .dc-caret, .dc:focus-visible .dc-caret { background: #FFFFFF; }
  .dc:hover .dc-arrow path, .dc:focus-visible .dc-arrow path { stroke: #FFFFFF; }
  .dc:hover .dc-arrow svg, .dc:focus-visible .dc-arrow svg { transform: translateX(8px); }
  .dc:hover .dc-line, .dc:focus-visible .dc-line { stroke: #FFFFFF; filter: none; }
  .dc:focus-visible { outline: none; }
  /* entrance: the block rises in when it first scrolls into view */
  .dc { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1); }
  .dc.dc-in { opacity: 1; transform: none; }
  @media (max-width: 760px) {
    .dc { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
    .dc-main { grid-column: 1; grid-row: 1; }
    .dc-arrow { grid-column: 2; grid-row: 1 / span 2; }
    .dc-type { grid-column: 1; grid-row: 2; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dc { opacity: 1; transform: none; transition: none; }
    .dc-line { animation: none; stroke-dasharray: none; stroke: #6A2A33; filter: none; }
    .dc-caret { animation: none; }
    .dc-fill, .dc-arrow svg { transition: none; }
  }
  /* the regions section is now the last one before the link: no bottom rule */
  .feats > .feat:last-child { padding-bottom: clamp(40px, 6vw, 72px) !important; }

  /* READ THE DOCS as the homepage footer: thinner, capitalised */
  .foot-cta { padding: 0 0 clamp(28px, 4vw, 44px) !important; }
  .foot-cta .dc { padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px); }
  .foot-cta .dc-main { font-size: clamp(15px, 1.9vw, 21px); letter-spacing: 0.12em; }
  .foot-cta .dc-type { text-transform: uppercase; font-size: clamp(10px, 1vw, 11.5px); letter-spacing: 0.16em; }
  .foot-cta .dc-arrow { width: clamp(26px, 3vw, 36px); }
  /* docs.html in the Terms / Privacy page style: tab row under the bar, one column below */
  body.docs-legal-page .legal-bar { overflow-x: auto; scrollbar-width: none; }
  body.docs-legal-page .legal-bar::-webkit-scrollbar { display: none; }
  body.docs-legal-page .legal-bar .docs-tabs { display: flex; flex-wrap: nowrap; gap: 28px; margin: 0; border: 0; }
  body.docs-legal-page .legal-bar .docs-tabs button { flex: none; min-height: 0; margin: 0 0 -1px; padding: 14px 0 !important; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
      color: #8E8E8E; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
  body.docs-legal-page .legal-bar .docs-tabs button:hover { color: #EDEDED; }
  body.docs-legal-page .legal-bar .docs-tabs button[aria-pressed="true"] { color: #F2F2F2; border-bottom-color: #F0485D; }
  body.docs-legal-page .doc.docs-body { max-width: 1200px; margin: 0 auto; padding-left: clamp(16px, 2.5vw, 44px); padding-right: clamp(16px, 2.5vw, 44px); box-sizing: content-box; }
  body.docs-legal-page .doc .docs-panel > h1 { margin-top: 0; }
  body.docs-legal-page .doc .docs-panel > p, body.docs-legal-page .doc .docs-panel > ol, body.docs-legal-page .doc .docs-panel > ul { max-width: 72ch; }
  body.docs-legal-page .doc .codeblock, body.docs-legal-page .doc .tbl, body.docs-legal-page .doc .lang-tabs { max-width: 920px; }
  body.docs-legal-page .doc pre code, body.docs-legal-page .doc .codeblock code { background: none !important; padding: 0 !important; }
  body.docs-legal-page .doc .docs-legal { max-width: none; }
  @media (max-width: 760px) { body.docs-legal-page .legal-bar { padding-left: 16px; padding-right: 16px; } }
  body.docs-legal-page #pricing .plan-k, body.docs-legal-page #pricing .plan-plus { color: #F0485D !important; }
  body.docs-legal-page #pricing .plan-name, body.docs-legal-page #pricing .plan-price b { color: #F2F2F2 !important; }
  body.docs-legal-page #pricing .plan-price span { color: #9A9A9A !important; }

  /* Docs page v3: old Terms/Privacy format, vertical sidebar with search */
  body.docs-legal-page .dz { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 2.5vw, 44px) clamp(64px, 9vw, 112px);
      display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; box-sizing: content-box; }
  body.docs-legal-page .dz-side { position: sticky; top: 24px; }
  body.docs-legal-page .dz-side .docs-search { margin: 0 0 22px; }
  body.docs-legal-page #dz-q { width: 100%; box-sizing: border-box; min-height: 38px; padding: 0 12px 0 34px; border: 1px solid #333; border-radius: 3px; background: #161616; color: #EDEDED;
      font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; }
  body.docs-legal-page #dz-q::placeholder { color: #6E6E6E; }
  body.docs-legal-page #dz-q:focus { outline: 1px solid #F0485D; outline-offset: 0; border-color: #F0485D; }
  body.docs-legal-page .dz-side .ds-icon { top: 12px; left: 11px; }
  body.docs-legal-page .dz-side .ds-results { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; margin: 0; padding: 6px; list-style: none;
      background: #141414; border: 1px solid #333; border-radius: 3px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
  body.docs-legal-page .dz-side .ds-opt { display: grid; gap: 4px; padding: 10px 12px; border-radius: 2px; cursor: pointer; }
  body.docs-legal-page .dz-side .ds-opt[aria-selected="true"] { background: #1E1416; }
  body.docs-legal-page .dz-side .ds-t { font: 500 11px/1.4 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: #F2F2F2; }
  body.docs-legal-page .dz-side .ds-s { font: 400 10.5px/1.5 'Red Hat Mono', ui-monospace, monospace; color: #8E8E8E; }
  body.docs-legal-page .dz-side .ds-results mark { background: rgba(240, 72, 93, 0.25); color: #FFFFFF; }
  body.docs-legal-page .dz-side .ds-empty { padding: 10px 12px; font: 400 11px/1.4 'Red Hat Mono', ui-monospace, monospace; color: #8E8E8E; }
  body.docs-legal-page .dz-nav { display: grid; gap: 0; margin: 0; border: 0; }
  body.docs-legal-page .dz-k { margin: 18px 0 6px; font: 400 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.22em; color: #6E6E6E; }
  body.docs-legal-page .dz-k:first-child { margin-top: 0; }
  body.docs-legal-page .dz-nav button { display: block; width: 100%; text-align: left; min-height: 0; margin: 0; padding: 9px 0 9px 14px !important; background: none; border: 0; border-left: 1px solid #262626; border-radius: 0;
      color: #8E8E8E; font: 400 10.5px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
  body.docs-legal-page .dz-nav button:hover { color: #EDEDED; }
  body.docs-legal-page .dz-nav button[aria-pressed="true"] { color: #F2F2F2; border-left-color: #F0485D; }
  /* the column: exactly the old .doc look */
  body.docs-legal-page .dz .doc { max-width: none; margin: 0; padding: 0 !important; box-sizing: border-box; }
  body.docs-legal-page .dz .doc .meta { color: #F0485D !important; }
  body.docs-legal-page .dz .doc .docs-panel { margin: 0; padding: 0; border: 0; }
  body.docs-legal-page .dz .doc .docs-panel > p, body.docs-legal-page .dz .doc .docs-panel > ul, body.docs-legal-page .dz .doc .docs-panel > ol { max-width: 64ch; }
  body.docs-legal-page .dz .doc .docs-panel > h2 { scroll-margin-top: 24px; transition: color 300ms ease; }
  body.docs-legal-page .dz .doc .docs-panel > h2.dz-hit, body.docs-legal-page .dz .doc .docs-panel > h1.dz-hit { color: #F0485D; }
  body.docs-legal-page .dz .doc .codeblock, body.docs-legal-page .dz .doc .tbl, body.docs-legal-page .dz .doc .lang-tabs, body.docs-legal-page .dz .doc .plan-row, body.docs-legal-page .dz .doc .pr-bar, body.docs-legal-page .dz .doc .pr-panel { max-width: none; }
  @media (max-width: 900px) {
    body.docs-legal-page .dz { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    body.docs-legal-page .dz-side { position: static; }
    body.docs-legal-page .dz-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    body.docs-legal-page .dz-k { grid-column: 1 / -1; }
  }
  /* Header: a smaller LOG IN / org button */
  .login { height: 28px !important; padding: 0 11px !important; font-size: 9.5px !important; letter-spacing: 0.16em !important; }
  @media (max-width: 760px) { .login { height: 30px !important; } }

  /* Feature headings sit at the top of each section's text column, directly above the body text and level
     with the top of the diagram; every section is left-aligned (copy left, diagram right). Specific enough to
     beat the column rules (.home-zdr .zdr h2, .home-zdr .zdr-copy p) the heading now sits inside. */
  .feats .feat .feat-head { margin: 0 0 clamp(18px, 2vw, 24px) !important; }
  .feats .feat .feat-head h2 { margin: 0; font: 700 15px/1.2 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: #F2F2F2; }
  .feats .feat .feat-head p { grid-column: 1 / -1; margin: 0; max-width: 60ch; font: 400 12px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #9A9A9A; }

  /* Writing: switching shelves. The red line slides between tabs; the old list leaves, the new one
     slides in from the side you moved toward, rules draw in and titles decode. */
  .wr-tabs.has-ink { position: relative; }
  .wr-tabs.has-ink button[aria-selected="true"]::after { display: none; }
  .wr-ink { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #E0193F; pointer-events: none;
            transition: left 420ms cubic-bezier(.2,.7,.2,1), width 420ms cubic-bezier(.2,.7,.2,1); }
  .writing-page .wr-head .wr-tabs .wr-ink { bottom: 0; }
  .wr-panel.wr-out .r-item { animation: wrOut 170ms ease-in forwards; }
  @keyframes wrOut { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -18px)); } }
  .wr-panel.wr-in .r-item { animation: wrIn 520ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes wrIn { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); } }
  .wr-panel.wr-in .r-rule { transform-origin: left center; animation: wrRule 640ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms); }
  @keyframes wrRule { from { transform: scaleX(0); } }
  .wr-panel.wr-in .wr-blurb, .wr-panel.wr-in .wr-empty { animation: wrFade 420ms ease both; }
  @keyframes wrFade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .wr-ink { transition: none; } .wr-panel.wr-in .r-item, .wr-panel.wr-out .r-item, .wr-panel.wr-in .r-rule { animation: none; } }
  /* Writing: each row names its kind (NEWS, RESEARCH) in a quiet column just before the date, so kinds and dates line up */
  .r-kind { flex: none; width: 84px; margin-right: 12px; font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.14em; color: #7A7A7A; white-space: nowrap; transition: color 200ms ease; }
  .r-item:hover .r-kind, .r-item:focus-visible .r-kind { color: #F0485D; }
  .r-item.r-opening .r-kind { color: #FFFFFF !important; }
  body.wr-light .r-kind { color: #8A8580; }
  @media (max-width: 820px), (pointer: coarse) { .r-kind { font-size: 11px; } }   /* same size as the date on phones */
  /* phones: every row is number + title on one line (a long title wraps under itself, not under the number),
     then PDF tag / type / date on their own line lined up under the title, even when a short title
     would leave room for the type beside it */
  @media (max-width: 640px) {
    .r-kind { width: auto; margin-right: 0; }
    .writing-page .r-item { column-gap: 12px; row-gap: 6px; padding: 14px 0; }
    .writing-page .r-item .r-num { width: 24px; }
    .writing-page .r-item .r-title { flex: 1 1 calc(100% - 36px); }   /* 36px = number 24px + gap 12px */
    .writing-page .r-item .r-rule + * { margin-left: 36px; }          /* first item of the meta line (the rule is hidden) */
    .writing-page .r-item .r-tag { margin-right: 0; }   /* the row's gap alone spaces PDF / kind / date evenly */
  }
  /* an empty shelf: the note sits inside the list's box, between the same rules as a row, so it lines up with the lists */
  .writing-page .wr-panel .r-list > .wr-empty { max-width: none; margin: 0 !important; padding: 20px 0; border-top: 1px solid #1F1F1F; border-bottom: 1px solid #1F1F1F; }
  body.wr-light .writing-page .wr-panel .r-list > .wr-empty { border-color: rgba(20, 20, 20, 0.14); }
  /* Writing tabs on phones: the five labels stay on one row, set a little smaller and spread across the full
     width (10px with 0.1em tracking needs 283px; 360px phones have 328px between the 16px gutters) */
  @media (max-width: 480px) {
    .writing-page .wr-head .wr-tabs { align-self: stretch; justify-content: space-between; gap: 8px; }
    .writing-page .wr-head .wr-tabs button { font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; }
  }
  @media (max-width: 340px) { .writing-page .wr-head .wr-tabs button { font-size: 9px; } }

  /* Page loader (refresh / fresh visit): the mark, its two diamonds blinking in turn */
  .ld { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #111111;
        animation: ldAuto 0.35s ease 4s forwards; }                 /* fails safe if scripts never run */
  .ld svg { height: clamp(56px, 8vw, 76px); width: auto; overflow: visible; }
  .ld path { fill: #D61F3A; }
  .ld-a { animation: ldBlink 0.96s steps(1, end) infinite; }
  .ld-b { animation: ldBlink 0.96s steps(1, end) infinite 0.48s; }
  @keyframes ldBlink { 0% { opacity: 1; } 25% { opacity: 0.14; } 50% { opacity: 1; } 62% { opacity: 0.14; } 75% { opacity: 1; } }
  .ld.ld-done { opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s 220ms; }
  html.ld-skip .ld { display: none; }
  @keyframes ldAuto { to { opacity: 0; visibility: hidden; } }
  @media (prefers-reduced-motion: reduce) { .ld-a, .ld-b { animation: none; } }

  /* Opening an article from a list: the row floods red, the arrow shoots out, the others step back */
  .r-item { isolation: isolate; }
  .r-item::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; background: #F0485D; transform: scaleX(0); transform-origin: left center; }
  .r-item.r-opening::before { animation: rFlood 320ms cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes rFlood { to { transform: scaleX(1); } }
  .r-item.r-opening .r-title, .r-item.r-opening .r-num, .r-item.r-opening .r-date, .r-item.r-opening .r-tag { color: #FFFFFF !important; border-color: rgba(255,255,255,0.6) !important; transition: color 160ms ease 80ms; }
  .r-item.r-opening .r-rule { background: rgba(255,255,255,0.75) !important; }
  .r-item.r-opening::after { opacity: 1 !important; color: #FFFFFF !important; animation: rShoot 420ms cubic-bezier(.4,0,.2,1) 120ms forwards; }
  @keyframes rShoot { to { transform: translateX(18px); } }
  .r-list.r-leaving .r-item:not(.r-opening) { animation: rBack 300ms ease forwards; }
  @keyframes rBack { to { opacity: 0.15; transform: translateY(4px); } }

  /* Loader v2: bigger mark, both diamonds blinking together, faster */
  .ld svg { height: clamp(96px, 13vw, 132px) !important; }
  /* both diamonds lit; the top one blinks while the bottom stays, then the bottom one blinks ("da da");
     the page opens at the end of a round (rounds repeat only while the page is still loading) */
  .ld-a, .ld-b { opacity: 1; }
  .ld-a { animation: ldOne 0.5s linear infinite !important; }
  .ld-b { animation: ldTwo 0.5s linear infinite !important; }
  @keyframes ldOne { 0% { opacity: 1; } 4% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }
  .ld-a, .ld-b { transition: opacity 140ms ease-in; }
  .ld.ld-done .ld-a, .ld.ld-done .ld-b { animation: none !important; opacity: 0; }   /* then both go out together */
  @keyframes ldTwo { 0% { opacity: 1; } 44% { opacity: 1; } 48% { opacity: 0; } 74% { opacity: 1; } 100% { opacity: 1; } }
  .ld svg { height: clamp(150px, 19vw, 210px) !important; }
  @media (prefers-reduced-motion: reduce) { .ld-a, .ld-b { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .ld-a, .ld-b { animation: none !important; } }

  /* Homepage features: the same fixed space above and below every section (the thin rule between them stays),
     rather than one window-tall screen per feature, which left large, uneven gaps that changed with window height. */
  .feats > .feat { display: block !important; min-height: 0; box-sizing: border-box;
                   padding-top: clamp(40px, 5.5vw, 80px) !important; padding-bottom: clamp(40px, 5.5vw, 80px) !important; }
  .feats > .feat:first-child { padding-top: clamp(48px, 7vw, 88px) !important; }
  .feats > .feat > * { width: 100%; }

  /* Article body: spacing and colour. The face (Latin Modern Roman, LaTeX's) is set in "Fonts: the LaTeX face for articles" at the end of this file. */
  article.post .post-body p, article.post .post-body li, article.post .post-body blockquote {
      line-height: 1.6 !important; letter-spacing: 0 !important; font-weight: 400; color: #DADADA; }
  article.post .post-body p strong, article.post .post-body li strong, article.post .post-body p b, article.post .post-body li b { font-weight: 700; color: #FFFFFF; }
  article.post .post-body p code, article.post .post-body li code { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 0.8em; }
  article.post .post-body p, article.post .post-body ul, article.post .post-body ol { max-width: none !important; }

  /* One black everywhere: every page uses the Writing page's #111111 (no lighter hero gradient, no darker variants) */
  html { background-color: #111111 !important; }
  body, .hero, .home-splash, body:not(.api-view):not([class*="-mode"]) .home-splash, body.apps-mode, .apps-page, .as-scene, .foot.foot-min { background: #111111 !important; }


  /* Status page: inference endpoints (search, modality, alignment) */
  .st-mbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 14px; }
  .st-msearch { flex: 1 1 320px; min-width: 0; }
  .st-mf { margin: 0 !important; }
  .st-mal { display: inline-flex; border: 1px solid #2A2A2A; }
  .st-mal button { padding: 9px 12px; background: none; border: 0; border-left: 1px solid #2A2A2A; color: #8E8E8E; font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; cursor: pointer; }
  .st-mal button:first-child { border-left: 0; }
  .st-mal button:hover { color: #EDEDED; }
  .st-mal button[aria-checked="true"] { color: #F2F2F2; background: #1C1C1C; box-shadow: inset 0 -1px 0 #F0485D; }
  .st-mal button:focus-visible { outline: 2px solid #F0485D; outline-offset: -2px; }
  .st-tags { display: flex; gap: 6px; margin-top: 6px; }
  .st-tags b { font-weight: 400; font-size: 9px; letter-spacing: 0.14em; color: #8E8E8E; border: 1px solid #2A2A2A; padding: 3px 6px 2px; }
  .st-tags b.abl { color: #F0485D; border-color: #4A1F27; }
  .st-row.st-api { background: #141414; }
  .st-none { padding: 16px; margin: 0; }

  /* Top-bar status pill: a breathing dot and STATUS; hover or focus slides out the live state */
  .auth-btns { display: inline-flex; align-items: center; gap: 10px; }
  .sys { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; gap: 9px; box-sizing: border-box; border: 1px solid #2A2A2A; color: #BDBDBD; text-decoration: none;
         font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; white-space: nowrap; transition: border-color 200ms ease, color 200ms ease; }
  .sys .sl { width: 6px; height: 6px; }
  .sys .sl.ok { box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.16); }
  .sys-v { display: inline-block; max-width: 0; overflow: hidden; transition: max-width 360ms cubic-bezier(.2, .7, .2, 1); }
  .sys-t { display: inline-block; padding-left: 9px; border-left: 1px solid #2A2A2A; color: #8E8E8E; transform: translateX(-6px); opacity: 0; transition: transform 360ms cubic-bezier(.2, .7, .2, 1), opacity 240ms ease; }
  .sys:hover, .sys:focus-visible, .sys[aria-current="page"] { border-color: #4A4A4A; color: #F2F2F2; }
  .sys:hover .sys-v, .sys:focus-visible .sys-v, .sys[aria-current="page"] .sys-v { max-width: 240px; }
  .sys:hover .sys-t, .sys:focus-visible .sys-t, .sys[aria-current="page"] .sys-t { transform: none; opacity: 1; }
  .sys.degraded { border-color: rgba(210, 153, 34, 0.5); } .sys.degraded .sys-t { color: #D29922; }
  .sys.outage { border-color: rgba(248, 81, 73, 0.55); } .sys.outage .sys-t { color: #F85149; }
  .sys.degraded .sys-v, .sys.outage .sys-v { max-width: 240px; } .sys.degraded .sys-t, .sys.outage .sys-t { transform: none; opacity: 1; }   /* trouble is always shown */
  .sys:focus-visible { outline: 2px solid #F0485D; outline-offset: 2px; }
  .r-bar .sys + .login, .legal-bar .sys + .login { margin-left: 0 !important; }
  @media (max-width: 760px) { .sys { padding: 0 9px; } .sys-k, .sys-v { display: none; } }
  @media (prefers-reduced-motion: reduce) { .sys-v, .sys-t { transition: none; } }
  .r-bar .sys, .legal-bar .sys { margin-left: clamp(20px, 3.4vw, 44px); }

  /* status page: search and filters styled like the pricing table's */
  .st-msearch { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; flex: 1 1 320px; }
  #st-mq { flex: 1 1 auto; width: 100%; max-width: 440px; min-height: 40px; padding: 0 14px 0 36px; border: 1px solid #333; border-radius: 3px; box-sizing: border-box;
           background: #161616; color: #EDEDED; font: 400 11.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
  #st-mq::placeholder { color: #6E6E6E; }
  #st-mq:focus { outline: 2px solid #F0485D; outline-offset: 1px; }
  .st-msearch .pr-icon { top: 13px; }
  .st-msearch .pr-count { flex: none; }
  .st-mal { border: 0; gap: 0; }
  .st-mal button { min-height: 40px; padding: 0 14px; border: 0 !important; border-bottom: 1px solid transparent !important; background: none !important; box-shadow: none !important; }
  .st-mal button[aria-checked="true"] { color: #F2F2F2; border-bottom-color: #F0485D !important; }
  .st-mf select, .st-rf select { min-height: 40px; }
  .st-rf { margin: 0 0 14px !important; }
  .sys .sys-k, .sys .sys-t { text-decoration: none !important; border-bottom: 0 !important; background: none !important; }
  .sys::after, .sys::before { content: none !important; display: none !important; }
  @media (max-width: 760px) { .st-mbar { gap: 10px; } .st-msearch { flex-basis: 100%; } .st-msearch .pr-count { display: none; } }
  .hero a.sys:hover, a.sys:hover { text-decoration: none !important; }

  /* Team mark: no periodic glitch cut; the diamonds stay whole */
  .sp-spin-on .hm-wrap > .hm-ghost, .sp-spin-on .hm-ghost { animation: none !important; opacity: 0 !important; }
  .sp-spin-on .hm-wrap > .home-mark:first-child, .sp-spin-on .home-mark { animation: none !important; clip-path: none !important; }

  /* home intro: both diamonds solid brand red */

  /* status pill: just the dot and STATUS (no state text); a problem shows in the dot and border colour */
  .sys-v, .sys-t { display: none !important; }

  /* READ THE DOCS: the words alone, centred in the button (no typed line, no arrow) */
  .foot-cta .dc { display: flex !important; justify-content: center; align-items: center; }
  .foot-cta .dc-main { text-align: center; }
  /* status page: the banner only appears when something is wrong */
  .st-banner[hidden] { display: none !important; }

  /* READ THE DOCS is always visible; it only waits (and rises in) when script has hidden it with .dc-wait */
  .foot-cta .dc { opacity: 1 !important; transform: none !important; }
  .foot-cta .dc.dc-wait { opacity: 0 !important; transform: translateY(14px) !important; }

  /* Status + LOG IN as a matched pair: same face, size, border, corners and width; the dot is the only difference */
  .auth-btns { gap: 8px !important; }
  a.sys { box-sizing: border-box; height: 28px !important; min-width: 100px; justify-content: center; gap: 8px; padding: 0 12px !important;
          font: 400 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif !important; letter-spacing: 0.14em !important;
          color: #EDEDED !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 2px !important; background: transparent !important; }
  a.sys .sl { width: 6px; height: 6px; }
  .auth-btns .login { min-width: 100px; }
  a.sys:hover, a.sys:focus-visible { border-color: #E0193F !important; background: #E0193F !important; color: #FFFFFF !important; }
  a.sys:hover .sl, a.sys:focus-visible .sl { background: #FFFFFF !important; box-shadow: none !important; animation: none !important; }
  a.sys[aria-current="page"] { border-color: rgba(255, 255, 255, 0.4) !important; }
  a.sys.degraded { border-color: rgba(210, 153, 34, 0.6) !important; } a.sys.outage { border-color: rgba(248, 81, 73, 0.65) !important; }
  .r-bar .sys, .legal-bar .sys { margin-left: clamp(20px, 3.4vw, 44px); }
  @media (max-width: 760px) { a.sys { min-width: 0; width: 28px; padding: 0 !important; } }

  /* Current page in the nav: a solid red triangle pointing right (echoes the Silares mark) in place of ">" */
  .r-nav a[aria-current="page"]::before, .hero header nav a[aria-current="page"]::before, .home-splash header nav a[aria-current="page"]::before {
    position: absolute; right: 100%; top: 50%; margin-right: 9px; width: 0.5em; height: 0.62em; transform: translateY(-50%);
    background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

  /* Team statement: half the space between "We are ___" and "Building ultra-low-latency systems"
     (the collapsed gap was max(title 24px, list clamp(22px, 3.4vh, 36px), line clamp(14px, 2vh, 20px)) */
  .sp-statement .ha-title { margin-bottom: 12px !important; }
  .sp-statement .hb-list { margin-top: clamp(11px, 1.7vh, 18px); }
  .sp-statement .hb-one { margin-top: clamp(7px, 1vh, 10px) !important; }

  /* Legal footer on every page, under READ THE DOCS where a page has it: copyright left, terms and privacy right */
  .site-legal { box-sizing: border-box; width: calc(100% - 2 * clamp(16px, 2.5vw, 44px)); max-width: 1200px; margin: 0 auto; padding: 18px 0 24px;
                display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; border-top: 1px solid #222;
                font: 400 10.5px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: #6E6E6E; }
  .sl-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
  .sl-links a { color: #8E8E8E; text-decoration: none; transition: color 200ms ease; }
  .sl-links a:hover, .sl-links a:focus-visible { color: #F0485D; }
  body.research-mode > .site-legal, body.dash-mode > .site-legal, body.status-mode > .site-legal, body.careers-mode > .site-legal,
  body.apps-mode > .site-legal, body.legal-mode > .site-legal { flex: none; }
  @media (max-width: 820px), (pointer: coarse) { .site-legal { font-size: 11px; } .sl-links a { display: inline-flex; align-items: center; min-height: 40px; } }

  /* Team mark, hover (site.js "Team mark"): the top diamond becomes a transistor array, the bottom one a
     marching chevron formation, both drawn on a canvas over the mark, which never moves. The hovered diamond's dot fill steps back
     at once (no transition in) and comes back over 200 ms when the pointer leaves. */
  .hm-wrap .hm-num { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
  .hm-wrap .home-mark .hm-fill path { transition: opacity 200ms ease; }
  .hm-wrap.hm-on-top .home-mark:not(.hm-ghost) .hm-fill path:first-child { opacity: 0; transition: none; }
  .hm-wrap.hm-on-bot .home-mark:not(.hm-ghost) .hm-fill path:last-child { opacity: 0; transition: none; }
  .hm-wrap.hm-live .hm-ghost { visibility: hidden; }
  @media (prefers-reduced-motion: reduce) { .hm-wrap .home-mark .hm-fill path { transition: none; } }
  .sp-open-stage .hm-wrap { pointer-events: auto; }

  /* UNRESTRICTED: the red block runs behind the word, not over it, so the word stays readable in white
     while covered (a highlight, not a redaction; the black redaction bars are for restricted figures) */
  .tl-band { isolation: isolate; color: #FFFFFF !important; }
  .tl-band::after { z-index: -1; }

  /* Team: JOIN THE TEAM under "Expect our execution…", scrolls to Careers (the [data-scroll-to] handler in site.js).
     Same button as APPLY WITH YOUR CV: outlined, red sweeps in from the left on hover and focus */
  .hb-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin: clamp(22px, 3.4vh, 32px) 0 0; padding: 0 28px;
            border: 1px solid #F2F2F2; border-radius: 0; background: transparent; color: #F2F2F2; cursor: pointer;
            font: 400 11px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.14em;
            transition: border-color 420ms cubic-bezier(.2,.7,.2,1), color 420ms cubic-bezier(.2,.7,.2,1); }
  .hb-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #F0485D; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
  .hb-cta span { display: inline-block; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
  .hb-cta:hover, .hb-cta:focus-visible { border-color: #F0485D; color: #FFFFFF; outline: none; }
  .hb-cta:hover::before, .hb-cta:focus-visible::before { transform: scaleX(1); }
  .hb-cta:hover span, .hb-cta:focus-visible span { transform: translateY(3px); }
  .sp-statement .hb-cta { opacity: 0; transition: opacity 900ms ease, border-color 420ms cubic-bezier(.2,.7,.2,1), color 420ms cubic-bezier(.2,.7,.2,1); }
  .sp-opened .sp-statement .hb-cta { opacity: 1; }
  .sp-instant .sp-statement .hb-cta { transition: border-color 420ms cubic-bezier(.2,.7,.2,1), color 420ms cubic-bezier(.2,.7,.2,1); }
  @media (prefers-reduced-motion: reduce) { .hb-cta, .hb-cta::before, .hb-cta span, .sp-statement .hb-cta { transition: none; opacity: 1; } }
  /* Team: Careers is now the last section (Tokens processed removed), so it needs its own space before READ THE DOCS */
  .ab-careers .cr-wrap { padding-bottom: clamp(64px, 9vw, 112px) !important; }

  /* Feature header groups (homepage 01-04): the number sits above the headline, not beside it, so number,
     headline, tagline and body copy all share the text column's left edge */
  .feats .feat .feat-head { display: block !important; }
  .feats .feat .feat-head .feat-n { display: block; margin: 0 0 10px; line-height: 1; }
  .feats .feat .feat-head p { margin-top: 8px; }

  /* Legal footer: copyright, terms and privacy all one size and spacing on every page and width
     (a site-wide link rule had made the two links 12px beside an 11px copyright) */
  .site-legal .sl-copy, .site-legal .sl-links a { font-size: 11px !important; letter-spacing: 0.16em !important; line-height: 1.6; }

  /* Back links (HOME, ALL RESEARCH / NEWS / ESSAYS, ALL ROLES): a solid triangle pointing left, the mirror of the
     nav's current-page triangle, in place of the "<-" arrow */
  .back-tri { display: inline-block; flex: none; width: 0.5em; height: 0.62em; background: currentColor; clip-path: polygon(100% 0, 0 50%, 100% 100%); vertical-align: 0.02em; }
  .cr-back { gap: 10px; }
  /* ALL RESEARCH (and ALL NEWS / ESSAYS) lines up with the table of contents text below it on wide screens:
     the post header's 24px side padding put it 12px to the right of the contents list */
  @media (min-width: 1101px) { .post-head .post-all { margin-left: -12px; } }
  /* LaTeX a little smaller than the body text it sits in */
  .post-body mjx-container { font-size: 90%; }

  /* Post section headings (INTRODUCTION, THE NUMBERS, ...) in red, like the other labels on posts */
  .post-sec h2 { color: #F0485D !important; }
  body.wr-light .post-sec h2 { color: #E0193F !important; }

  /* Header: STATUS and LOG IN / ORG set exactly like the nav words. The org ID is in capitals like everything
     else in the bar, both buttons are one width so they sit as a pair, and the text drops 1px so its
     baseline lines up with the nav's (the boxes are centred on the nav row, but the face sits high in them). */
  .auth-btns a.sys, .auth-btns .login { box-sizing: border-box; min-width: 124px !important; padding-top: 2px !important; text-transform: uppercase; }
  @media (max-width: 760px) { .auth-btns a.sys { min-width: 0 !important; } }
  .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login,
  .home-splash header .auth-btns .login.is-org, .hero header .auth-btns .login.is-org, .r-bar .auth-btns .login.is-org { padding-top: 2px !important; }


  /* Page transitions: on arrival the head script marks <html> .pt-arriving so the incoming content is hidden from
     the first paint; site.js removes it as it starts the entrance (the same elements as targets() in site.js) */
  html.pt-arriving main, html.pt-arriving .research-page > :not(.r-bar):not(.r-progress), html.pt-arriving body > section.ab-careers,
  html.pt-arriving body > section.pillars, html.pt-arriving body > .pl-stage, html.pt-arriving body > section.api-pricing,
  html.pt-arriving .home-splash.sp-opened .sp-open-stage, html.pt-arriving .legal > .dz { opacity: 0; }

  /* Mobile: one side margin everywhere, the homepage body's 16px. Header bar and nav, post text and post header,
     and the docs menu all sit on the same edge as the content and the footer below them. */
  @media (max-width: 760px) {
    .r-bar, .hero > header, .home-splash > header { padding-left: 16px !important; padding-right: 16px !important; }
    article.post { padding-left: 16px !important; padding-right: 16px !important; }
    .post-head { padding-left: 0 !important; padding-right: 0 !important; }
    .dz-side .lang-tabs button { min-width: 0; max-width: 100%; box-sizing: border-box; }
  }

  /* Docs menu: one sliding red marker (site.js "Docs menu"); the buttons keep only their grey rule */
  body.docs-legal-page .dz-nav.has-ink { position: relative; }
  body.docs-legal-page .dz-nav.has-ink button[aria-pressed="true"] { border-left-color: #262626; }
  .dz-ink { position: absolute; left: 0; top: 0; width: 1px; background: #F0485D; pointer-events: none; z-index: 1;
            transition: transform 420ms cubic-bezier(.2,.7,.2,1), height 420ms cubic-bezier(.2,.7,.2,1); }
  .dz-ink.dz-ink-instant { transition: none; }
  @media (prefers-reduced-motion: reduce) { .dz-ink { transition: none; } }

  /* ---------- Mobile menu ----------
     Phones (up to 619px, where the nav used to drop to its own row): INFERENCE / WRITING / TEAM and LOG IN
     fold into a hamburger at the top right, beside the STATUS dot. site.js "Mobile menu" builds the button
     and the panel from the page's own nav and login button. Desktop and tablet widths are untouched.
     "scripting: enabled" keeps the old two-row header when scripts are off, and hides the nav before
     site.js runs so the header never jumps. */
  .mm-btn, .mm-panel, .mm-scrim { display: none; }
  @media (max-width: 619px) and (scripting: enabled) {
    :root { --hdr-h: 80px; }
    .home-splash > header, .hero > header, .r-bar { grid-template-rows: 64px !important; height: 80px !important; }
    .home-splash header nav, .hero header nav, .r-bar .r-nav, .r-bar .r-home,
    .home-splash header .auth-btns .login, .hero header .auth-btns .login, .r-bar .auth-btns .login { display: none !important; }

    .mm-btn { position: relative; display: inline-flex; flex: none; width: 28px; height: 28px; margin: 0; padding: 0; box-sizing: border-box;
              background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 2px; color: #EDEDED; cursor: pointer;
              -webkit-tap-highlight-color: transparent; transition: border-color 200ms ease, color 200ms ease; }
    .mm-btn::before { content: ""; position: absolute; left: -4px; right: -8px; top: -8px; bottom: -8px; }   /* a thumb-sized target */
    .mm-btn i { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: currentColor;
                transition: transform 320ms cubic-bezier(.2, .7, .2, 1), opacity 200ms ease; }
    .mm-btn i:nth-child(1) { transform: translateY(-4.5px); }
    .mm-btn i:nth-child(3) { transform: translateY(4.5px); }
    .mm-btn[aria-expanded="true"] { color: #FFFFFF; }   /* same quiet border open or closed; only :focus-visible draws a red ring */
    .mm-btn[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); }
    .mm-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
    .mm-btn[aria-expanded="true"] i:nth-child(3) { transform: rotate(-45deg); }
    .mm-btn:focus-visible { outline: 2px solid #F0485D; outline-offset: 2px; }

    /* the page under the open menu dims; tapping it closes the menu */
    .mm-scrim { display: block; position: fixed; left: 0; right: 0; top: var(--mm-top, 80px); bottom: 0; z-index: 940; background: rgba(0, 0, 0, 0.62);
                opacity: 0; visibility: hidden; transition: opacity 320ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 320ms; }
    .mm-panel { display: block; position: fixed; left: 0; right: 0; top: var(--mm-top, 80px); z-index: 950; max-height: calc(100% - var(--mm-top, 80px));
                overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 0 16px; background: #111111;
                border-top: 1px solid #222222; border-bottom: 1px solid #2A2A2A;
                clip-path: inset(0 0 100% 0); visibility: hidden;
                transition: clip-path 380ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 380ms; }
    html.mm-open .mm-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
    html.mm-open .mm-panel { clip-path: inset(0 0 -1px 0); visibility: visible; transition-delay: 0s; }
    html.mm-open, html.mm-open body { overflow: hidden !important; }

    .mm-panel ul { list-style: none; margin: 0; padding: 0; }
    .mm-panel li { opacity: 0; transform: translateY(-6px); transition: opacity 220ms ease, transform 320ms cubic-bezier(.2, .7, .2, 1); }
    html.mm-open .mm-panel li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 40ms); }
    .mm-link { display: flex; align-items: center; height: 56px; border-bottom: 1px solid #222222; color: #EDEDED; text-decoration: none;
               font: 400 11.5px/16px 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.14em;
               -webkit-tap-highlight-color: transparent; transition: color 200ms ease; }
    .mm-link:hover, .mm-link:active { color: #FFFFFF; }
    .mm-panel li:last-child .mm-link { border-bottom: 0; }   /* the panel's own bottom border closes the list; no empty band under it */
    .mm-link[aria-current="page"] { color: #F0485D; }
    .mm-link[aria-current="page"]::before { content: ""; flex: none; width: 0.5em; height: 0.62em; margin-right: 10px; background: currentColor;
                                            clip-path: polygon(0 0, 100% 50%, 0 100%); }
    .mm-link:focus-visible, .mm-login:focus-visible { outline: 2px solid #F0485D; outline-offset: -2px; }
    .mm-login { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin: 24px 0; padding: 0 14px; box-sizing: border-box;
                background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 2px; color: #EDEDED; cursor: pointer;
                font: 400 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.14em;
                -webkit-tap-highlight-color: transparent; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
    .mm-login:hover, .mm-login:active { border-color: #E0193F; background: #E0193F; color: #FFFFFF; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mm-btn, .mm-btn i, .mm-scrim, .mm-panel, .mm-panel li, .mm-link, .mm-login { transition: none !important; }
  }

  /* =====================================================================
     Org ID: two equal ways to get one, GENERATE ORG ID (made in the browser) and INSTALL SLI (the command), offered
     by the get-an-org-ID block ("Homepage hero: the one block") in the hero and in the log-in dialog. The hero's
     GENERATE ORG ID and the docs Quickstart button open the dialog (data-auth-gen) and hide once logged in.
     ===================================================================== */
  [data-auth-gen][hidden] { display: none !important; }
  /* docs Quickstart: the generate button, set like the code blocks' COPY */
  .docs-body .dz-gen-row { margin: 0 0 18px; }
  .docs-body .dz-gen { min-height: 0; height: 34px; padding: 0 14px; background: transparent; border: 1px solid #333333; border-radius: 2px; color: #CFCFCF; cursor: pointer;
                       font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
  .docs-body .dz-gen:hover, .docs-body .dz-gen:focus-visible { color: #FFFFFF; border-color: #E0193F; background: #E0193F; }

  /* ---------- Mobile footer ----------
     One line needs about 400px at this size, more than a phone has, so on phones the copyright is centred
     with TERMS OF SERVICE and PRIVACY POLICY centred on one line beneath it. */
  @media (max-width: 760px) {
    .site-legal { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; padding: 20px 0 28px; }
    .site-legal .sl-links { justify-content: center; gap: 0 24px; }
  }


  /* =====================================================================
     Homepage hero: two equal ways to get an org ID, and a first screen that fits on phones.
     One block, the size the install command's box used to be: GENERATE ORG ID on the left (opens the log-in
     dialog on that option through [data-auth-gen]), INSTALL SLI on the right (shows and copies the curl command).
     Once logged in the generate half hides (site.js) and INSTALL SLI fills the block. Drawn in "Homepage hero:
     the one block" below.
     Phones (up to 760px): the mark is sized from the room the rest leaves, so the pieces keep even
     gaps at any height; the hero is a full large viewport, so 01 PRIVACY never shows before a scroll
     even with the toolbars retracted; the scroll arrow ends the small viewport (toolbars shown).
     ===================================================================== */
  .hero .api-line { height: auto; margin-top: clamp(36px, 6vh, 60px); }
  .hero .api-after { height: auto; }
  .hero .api-after .pitch { margin-top: clamp(32px, 5vh, 52px) !important; padding-top: 0; }
  @media (max-width: 760px) {
    .hero { --mark-h: clamp(108px, calc(100vh - 350px), 300px); min-height: 100vh !important; min-height: 100lvh !important;
            grid-template-rows: auto auto auto !important; align-content: start; }
    @supports (height: 100svh) { .hero { --mark-h: clamp(108px, calc(100svh - 350px), 300px); } }
    .hero main { min-height: calc(100vh - var(--hdr-h) - 64px) !important; min-height: calc(100svh - var(--hdr-h) - 64px) !important;
                 padding: 12px 16px 8px !important; box-sizing: border-box; }
    .hero .api-line { margin-top: clamp(26px, 4.5vh, 44px); }
    .hero .api-after .pitch { margin-top: clamp(24px, 4vh, 40px) !important; }
    .hero > .scroll-cue { position: static !important; transform: none !important; display: inline-flex !important; justify-self: center; align-self: start;
                          box-sizing: border-box; height: 64px; margin: 0; padding: 4px 14px 16px; align-items: center; }
  }

  /* ---------- Homepage hero: the one block ----------
     A component (.hg-opts, class-based, any number per page): the homepage hero has one and the log-in dialog has
     its own ("Log-in dialog: its own block" below). Sizes that are only the hero's are set on .api-line .hg-opts.
     The install box's old footprint (420 x 44), split into two halves in the site's two strongest styles so the
     choice reads at a glance: GENERATE ORG ID is the primary button (red #F0485D, words #140A0C, like the
     dialog's LOG IN), INSTALL SLI is the dark command box (#0C0C0D, grey 1px edge, light words). Words in
     PP Monument Wide, centred. Two transparent buttons (.hg-hit) always cover the left and right halves, so the
     pointer picks a half by where it is; the visible halves (.hg-p, in .hg-stage) follow them. Hovering or
     focusing a half widens it across the block while the other folds away:
       GENERATE ORG ID: the primary hover red (#FF6274) sweeps in (.dc-fill, as READ THE DOCS) and org ID digits
       are drawn over and over (site.js), in the same #140A0C (6.7:1).
       INSTALL SLI: the edge turns red and the curl command shows in the site's command colours with a copy square
       filled red; a click copies it and a red COPIED tag slides in (SELECTED, .is-selected, if it could only be selected). A click (or a touch screen's tap) leaves the
       block open on the command (.is-open); .is-copied shows the tag for a moment.
     Logged in, the generate half is gone and the dark half shows the command at rest.
     Phones: full width, 52px tall, and the open command breaks after -fsSL onto two lines. */
  .hg-opts { --hg-ease: cubic-bezier(.2,.7,.2,1); position: relative; width: min(100%, 420px); height: 44px; margin: 0 auto; }
  .hg-stage { display: flex; height: 100%; overflow: hidden; }
  .hg-p { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
          flex: 1 1 0; min-width: 0; padding: 0 10px; box-sizing: border-box;
          transition: flex-grow 420ms var(--hg-ease), padding 420ms var(--hg-ease), box-shadow 220ms ease; }
  .hg-p-gen { background: #F0485D; color: #140A0C; }
  .hg-p-gen .dc-fill { background: #FF6274; }
  .hg-p-cli { background: #0C0C0D; color: #F2F2F2; box-shadow: inset 0 0 0 1px #2A2A2A; }
  .hg-face, .hg-alt { grid-area: 1 / 1; max-width: 100%; transition: opacity 220ms ease, transform 320ms var(--hg-ease); }
  .hg-face { font: 700 10px/1.25 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.08em; text-align: center; }
  .hg-alt { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(6px); white-space: nowrap; }
  .hg-num { font: 500 13px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
  .hg-code { font: 500 12px/1.35 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0; color: #EDEDED; }
  .hg-code .prompt { color: #F0485D; }
  .hg-br { display: none; }
  .hg-sq { flex: none; display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border: 1px solid #333333; border-radius: 2px; color: #BDBDBD;
           transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; }
  .hg-ic { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .hg-ok, .hg-opts.is-copied .hg-ic:not(.hg-ok) { visibility: hidden; }
  .hg-opts.is-copied .hg-ok { visibility: visible; }
  .hg-done { position: absolute; top: 7px; right: 7px; bottom: 7px; display: flex; align-items: center; padding: 0 12px; background: #F0485D; color: #140A0C;
             font: 700 10px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.12em;
             transform: translateX(calc(100% + 8px)); transition: transform 320ms var(--hg-ease); }
  .hg-hit { position: absolute; top: 0; bottom: 0; z-index: 3; width: 50%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
            cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hg-gen { left: 0; }
  .hg-cli { right: 0; }
  .hg-hit:focus-visible { outline: none; }
  .hg-opts:has(.hg-hit:focus-visible) { outline: 2px solid #F0485D; outline-offset: 3px; }   /* keyboard: the ring goes round the block, the open half shows which */
  /* a half opens: it widens, the other folds, its words give way */
  .hg-opts:has(.hg-gen:hover, .hg-gen:focus-visible):not(.is-open) .hg-p-cli, .hg-opts:has(.hg-cli:hover, .hg-cli:focus-visible) .hg-p-gen, .hg-opts.is-open .hg-p-gen { flex-grow: 0; padding: 0; }
  .hg-opts:has(.hg-gen:hover, .hg-gen:focus-visible):not(.is-open) .hg-p-gen .dc-fill { transform: scaleX(1); }
  .hg-opts:has(.hg-cli:hover, .hg-cli:focus-visible) .hg-p-cli, .hg-opts.is-open .hg-p-cli { box-shadow: inset 0 0 0 1px #F0485D; }
  .hg-opts:has(.hg-cli:hover, .hg-cli:focus-visible) .hg-sq, .hg-opts.is-open .hg-sq { background: #F0485D; border-color: #F0485D; color: #FFFFFF; }
  .hg-opts:has(.hg-gen:hover, .hg-gen:focus-visible):not(.is-open) .hg-p-gen .hg-face, .hg-opts:has(.hg-cli:hover, .hg-cli:focus-visible) .hg-p-cli .hg-face, .hg-opts.is-open .hg-p-cli .hg-face { opacity: 0; transform: translateY(-6px); }
  .hg-opts:has(.hg-gen:hover, .hg-gen:focus-visible):not(.is-open) .hg-p-gen .hg-alt, .hg-opts:has(.hg-cli:hover, .hg-cli:focus-visible) .hg-p-cli .hg-alt, .hg-opts.is-open .hg-p-cli .hg-alt { opacity: 1; transform: none; }
  .hg-opts:has(.hg-gen:hover, .hg-gen:focus-visible):not(.is-open) .hg-p-cli .hg-face, .hg-opts:has(.hg-cli:hover, .hg-cli:focus-visible) .hg-p-gen .hg-face, .hg-opts.is-open .hg-p-gen .hg-face { opacity: 0; }
  .hg-opts.is-copied .hg-done { transform: none; }
  /* logged in: the generate half is gone; INSTALL SLI fills the block with the command at rest */
  .hg-hit[hidden] { display: none; }
  .hg-opts:has(.hg-gen[hidden]) .hg-p-gen { display: none; }
  .hg-opts:has(.hg-gen[hidden]) .hg-cli { width: 100%; }
  .hg-opts:has(.hg-gen[hidden]) .hg-p-cli .hg-face { opacity: 0; }
  .hg-opts:has(.hg-gen[hidden]) .hg-p-cli .hg-alt { opacity: 1; transform: none; }
  @media (max-width: 860px) { .api-line .hg-opts { width: min(100%, 440px); height: 52px; } }
  @media (max-width: 479px) {
    .hg-p { padding: 0 6px; }
    .hg-face { font-size: 9px; letter-spacing: 0.06em; }
    .hg-num { font-size: 12px; letter-spacing: 0.04em; }
    .hg-code { font-size: 11.5px; white-space: normal; }
    .hg-br { display: inline; }
    /* no room beside the two-line command: COPIED sits on the block's top right corner, over the frame */
    .hg-done { top: 0; right: 0; bottom: auto; height: 15px; padding: 0 7px; font-size: 8px; }
  }
  @media (max-width: 359px) { .hg-code { font-size: 11px; } }
  @media (prefers-reduced-motion: reduce) { .hg-p, .hg-face, .hg-alt, .hg-done, .hg-sq { transition: none; } }

  /* ---------- Log-in dialog: its own block ----------
     The dialog's instance of the hero's block, under "No org ID yet? Get one either way:", as wide as the dialog's
     content and 44px tall. GENERATE ORG ID here generates for real (site.js "Org ID login"): the half stays open
     (.is-gen) on the new org ID, grouped, in place of the scramble, and a COPIED chip (.hg-got, SELECTED if it could
     only be selected) comes in beside it once copied (.is-got); then the dialog shows the id view. On phones the
     block grows to 56px while a half is open, so the org ID and the command each wrap onto two lines. */
  .auth .hg-opts { width: 100%; height: 44px; margin: 0; }
  .auth .hg-alt { min-width: 0; }
  .auth .hg-num { font-size: 12px; white-space: normal; text-align: center; text-wrap: balance; }   /* wrapped, it splits four groups over three */
  .hg-got { flex: none; display: flex; align-items: center; height: 22px; padding: 0 8px; background: #140A0C; color: #FFFFFF;
            font: 700 9px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-stretch: 125%; letter-spacing: 0.12em;
            opacity: 0; transform: translateX(6px); transition: opacity 220ms ease, transform 320ms var(--hg-ease); }
  .hg-opts.is-got .hg-got { opacity: 1; transform: none; }
  .hg-opts.is-gen .hg-p-cli { flex-grow: 0; padding: 0; }
  .hg-opts.is-gen .hg-p-gen .dc-fill { transform: scaleX(1); }
  .hg-opts.is-gen .hg-p-gen .hg-face { opacity: 0; transform: translateY(-6px); }
  .hg-opts.is-gen .hg-p-gen .hg-alt { opacity: 1; transform: none; }
  .hg-opts.is-gen .hg-gen { width: 100%; cursor: default; }
  .hg-opts.is-gen .hg-cli { display: none; }
  .hg-opts.is-selected .hg-p-cli .hg-done { transform: none; }
  @media (max-width: 479px) { .auth .hg-opts.is-open, .auth .hg-opts.is-gen { height: 56px; } }
  @media (max-width: 359px) { .auth .hg-sq { display: none; } }   /* the command keeps to two lines; COPIED still shows in the corner */
  @media (prefers-reduced-motion: reduce) { .hg-got { transition: none; } }


  /* ---------- Fonts: the LaTeX face for articles ----------
     Outside the articles the site uses only its own two faces, PP Monument Wide and Red Hat Mono. Article prose
     (research, news and essays) is set in Latin Modern Roman, the maintained OpenType version of Computer Modern,
     LaTeX's default face, so the text matches the MathJax maths in it. Hosted here (GUST Font License, from CTAN)
     so it looks the same on every system; it runs smaller than Iowan, hence 18px. Headings, labels and code keep
     the site's faces. */
  @font-face { font-family: 'Latin Modern Roman'; src: url('fonts/LatinModernRoman-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Latin Modern Roman'; src: url('fonts/LatinModernRoman-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: 'Latin Modern Roman'; src: url('fonts/LatinModernRoman-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Latin Modern Roman'; src: url('fonts/LatinModernRoman-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
  article.post .post-body, article.post .post-body p, article.post .post-body li, article.post .post-body blockquote {
      font-family: 'Latin Modern Roman', 'Computer Modern Serif', 'CMU Serif', serif !important; font-size: 18px !important; }
  article.post .post-body p code, article.post .post-body li code { font-size: 0.78em; }

  /* Status: the STATUS heading sits as far above WEBSITE as each section sits above the next (the sections' 48px) */
  .st-wrap > h1 { margin-bottom: 48px !important; }

  /* ---------- Homepage tagline on phones: one line, as on desktop ----------
     UNRESTRICTED BY DEFAULT | HIGH PERFORMANCE BY DESIGN stays on one row with its divider; the type is sized from
     the screen width (and tracked a little tighter) so the whole line fits inside the 16px side margins. */
  @media (max-width: 760px) {
    .tl-one { grid-template-columns: auto auto auto !important; justify-content: center; justify-items: initial; column-gap: 2.2vw !important; row-gap: 0 !important; }
    .tl-a { justify-self: end !important; } .tl-c { justify-self: start !important; }
    .tl-div { display: block !important; height: 1.1em; }
    .tl-a, .tl-c { font-size: min(2.32vw, 13px) !important; gap: 0.55em !important; }
    .tl-band, .tl-b { font-size: 1em !important; letter-spacing: 0.06em !important; }
    .tl-band { padding: 0.3em 0.4em !important; }
    .tl-a .tl-q, .tl-c .tl-q { font-size: 0.74em !important; letter-spacing: 0.1em !important; }
  }

  /* Homepage hero block on phones and tablets: a compact bar centred under the mark, as on desktop (44px tall),
     not a full-width slab: up to 420px wide on tablets, 320px on phones */
  @media (max-width: 860px) { .api-line .hg-opts { width: min(100%, 420px) !important; height: 44px !important; } }
  @media (max-width: 479px) { .api-line .hg-opts { width: min(100%, 320px) !important; } }
  /* phones: the divider sits on the centre line (two equal halves around it), and every word is one size */
  @media (max-width: 760px) {
    .tl-one { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; justify-content: stretch; column-gap: 2.6vw !important; }
    .tl-a { justify-self: end !important; } .tl-c { justify-self: start !important; }
    .tl-a, .tl-c { font-size: min(2.04vw, 13px) !important; }   /* the largest that fits both halves at 320-760px */
    .tl-a .tl-q, .tl-c .tl-q { font-size: 1em !important; letter-spacing: 0.06em !important; }
  }

  /* Homepage hero, thinner block (desktop and phones): 36px instead of 44px */
  .api-line .hg-opts { height: 36px !important; }
  .hg-sq { width: 24px; height: 24px; }
  /* phones: the tagline tracked and spaced tighter so its single line can be set larger */
  @media (max-width: 760px) {
    .tl-one { column-gap: 1.4vw !important; }
    .tl-a, .tl-c { gap: 0.36em !important; }
    .tl-band, .tl-b, .tl-a .tl-q, .tl-c .tl-q { letter-spacing: 0 !important; }
    .tl-band { padding: 0.25em 0.3em !important; }
    .tl-a, .tl-c { font-size: min(2.28vw, 13px) !important; }   /* the largest that fits both halves, 320-760px */
  }
  /* each half's row is the block's height, so a label stays centred even when the hidden content beside it
     (the two-line command on phones) is taller; on phones the block grows to 52px only while the command shows */
  .hg-p { grid-template-rows: minmax(0, 1fr); }
  .hg-opts { transition: height 320ms cubic-bezier(.2,.7,.2,1); }
  @media (max-width: 479px) { .api-line .hg-opts.is-open { height: 52px !important; } }
  @media (prefers-reduced-motion: reduce) { .hg-opts { transition: none; } }
  /* phones: the block is as long as the tagline line under it (both span the content width), and its split sits on
     the same centre line as the tagline's divider and the mark */
  @media (max-width: 479px) { .api-line .hg-opts { width: 100% !important; } }
  /* phones: the block is shorter than the tagline line below it on both sides (twice the shorter half of the line,
     about 80% of the screen), its split still on the centre line */
  @media (max-width: 479px) { .api-line .hg-opts { width: 78vw !important; } }
  @media (max-width: 359px) { .hg-face { font-size: 8px !important; letter-spacing: 0.04em !important; } }

  /* Homepage hero: more air between the mark and the button block (the mark's box ends in blank rows, so the visible
     gap was only 26-54px). Phones give the extra 22px back from the mark's size so 01 PRIVACY stays below the fold. */
  .api-line .hg-opts { margin-top: 28px !important; }
  @media (max-width: 760px) {
    .api-line .hg-opts { margin-top: 22px !important; }
    .hero { --mark-h: clamp(100px, calc(100vh - 372px), 300px); }
    @supports (height: 100svh) { .hero { --mark-h: clamp(100px, calc(100svh - 372px), 300px); } }
  }

  /* Homepage tagline: more room either side of the divider (desktop and phones), so each phrase stands clear of
     the bar and the line reaches past the button block on both sides */
  .tl-one { column-gap: clamp(28px, 3.4vw, 48px) !important; }
  @media (max-width: 760px) {
    .tl-one { column-gap: 5vw !important; }
    .tl-a, .tl-c { font-size: min(2.1vw, 13px) !important; }
    .api-line .hg-opts { width: 70vw !important; }
    /* the button block and the line under it sit a little lower on phones */
    .api-line .hg-opts { margin-top: 38px !important; }
    .hero { --mark-h: clamp(96px, calc(100vh - 388px), 300px); }
    @supports (height: 100svh) { .hero { --mark-h: clamp(96px, calc(100svh - 388px), 300px); } }
  }
  /* phones: a little more size for the tagline, from a slightly narrower (still clear) divider gap and tighter
     word spacing */
  @media (max-width: 760px) {
    .tl-one { column-gap: 3vw !important; }
    .tl-a, .tl-c { gap: 0.3em !important; }
    .tl-band { padding: 0.2em 0.25em !important; }
    .tl-a, .tl-c { font-size: var(--tl-fs, min(2.1vw, 13px)) !important; }
  }

  /* ---------- Homepage tagline on phones: UNRESTRICTED | HIGH PERFORMANCE ----------
     Phones show the two bold phrases only (BY DEFAULT / BY DESIGN stay on desktop), so the line can be set at
     nearly desktop's proportion to the button labels (desktop 16px : 10px; here up to 14.4px : 9px). The line
     spans the content width with UNRESTRICTED at its left edge and HIGH PERFORMANCE at its right edge and the
     divider on the centre line, so it reaches equally far past the button block on both sides. */
  @media (max-width: 760px) {
    .tl-a .tl-q, .tl-c .tl-q { display: none !important; }
    .tl-one { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; column-gap: 0 !important; width: 100% !important; justify-content: stretch !important; }
    .tl-a { justify-self: start !important; } .tl-c { justify-self: end !important; }
    .tl-a, .tl-c { font-size: min(3.28vw, 14.4px) !important; }   /* the largest that fits at 320-760px, capped at desktop's 1.6x the 9px button labels */
    .tl-band { padding: 0.2em 0.3em !important; }
  }
  /* desktop: the phrases sit closer to the divider (was up to 48px either side) */
  @media (min-width: 761px) { .tl-one { column-gap: clamp(16px, 1.6vw, 24px) !important; } }
  /* phones: BY DEFAULT and BY DESIGN back in, every word one size, the line still spread edge to edge */
  @media (max-width: 760px) {
    .tl-a .tl-q, .tl-c .tl-q { display: inline !important; font-size: 1em !important; letter-spacing: 0 !important; }
    .tl-band, .tl-b { letter-spacing: 0 !important; }
    .tl-a, .tl-c { gap: 0.32em !important; font-size: min(2.18vw, 13px) !important; }   /* the largest that fits at 320-760px */
  }
  /* phones: BY DEFAULT and HIGH PERFORMANCE sit the same distance from the divider, which stays on the centre line
     (with the block's split and the mark); the line is sized so its longer half fits */
  @media (max-width: 760px) {
    .tl-one { column-gap: 3.2vw !important; }
    .tl-a { justify-self: end !important; } .tl-c { justify-self: start !important; }
    .tl-a, .tl-c { font-size: min(2.2vw, 13px) !important; }   /* the largest that fits at 320-760px */
  }
  /* phones: UNRESTRICTED BY DEFAULT is tracked out (0.092em) to exactly the width of HIGH PERFORMANCE BY DESIGN,
     so with the divider on the centre line the gaps either side of it are equal AND the line reaches equally far
     past the button block on both sides (all lengths here are in em, so this holds at every phone width) */
  @media (max-width: 760px) {
    .tl-a .tl-band, .tl-a .tl-q { letter-spacing: 0.0922em !important; }
  }

  /* ---------- Homepage tagline: a horizontal diamond for the divider, and more room inside each phrase ----------
     The divider becomes an outline diamond lying on its side (<>), in the divider's grey, on desktop and phones;
     UNRESTRICTED / BY DEFAULT and HIGH PERFORMANCE / BY DESIGN get a wider gap. */
  .tl-div { width: 1.15em !important; height: 0.6em !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12' preserveAspectRatio='none'%3E%3Cpath d='M1 6 11.5 1 22 6 11.5 11z' fill='none' stroke='%23F0485D' stroke-width='1.2' vector-effect='non-scaling-stroke' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; align-self: center; }
  .tl-a, .tl-c { gap: 0.7em !important; }
  @media (max-width: 760px) { .tl-a, .tl-c { gap: 0.55em !important; } }
  @media (max-width: 760px) { .tl-a, .tl-c { font-size: min(2.06vw, 13px) !important; } }   /* the largest that fits at 320-760px with the diamond and the wider gaps */

  /* ---------- Footer on phones: one line, as on desktop ----------
     © 2026 SILARES on the left, TERMS OF SERVICE and PRIVACY POLICY on the right; the type is sized from the screen
     width (tracking tightened) so the whole line fits inside the 16px margins. */
  @media (max-width: 760px) {
    .site-legal { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; text-align: left !important; gap: 0 12px !important; }
    .site-legal .sl-links { flex-wrap: nowrap !important; gap: 0 4vw !important; justify-content: flex-end !important; }
    .site-legal .sl-copy, .site-legal .sl-links a { font-size: 11px !important; letter-spacing: 0.06em !important; white-space: nowrap; }
  }
  /* phones: the three footer items spread evenly across the line (equal space between copyright, terms and privacy) */
  @media (max-width: 760px) {
    .site-legal .sl-links { display: contents !important; }
    .site-legal { justify-content: space-between !important; gap: 0 !important; }
  }

  /* footer links read TERMS and PRIVACY (full names in aria-label), short enough for one line at 11px on every phone */
  /* phones: TERMS and PRIVACY sit together on the right, as on desktop (copyright on the left) */
  @media (max-width: 760px) {
    .site-legal .sl-links { display: flex !important; gap: 0 24px !important; justify-content: flex-end !important; }
  }

  /* Footer links: TERMS & PRIVACY, one phrase of two underlined links joined by an ampersand (desktop and phones) */
  .site-legal .sl-links { display: flex !important; align-items: center; gap: 0 0.7em !important; justify-content: flex-end !important; }
  .site-legal .sl-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .site-legal .sl-amp { color: #6E6E6E; font: inherit; }
  /* phones: the footer sits lower, with less space under it (clear of the iPhone home indicator) */
  @media (max-width: 760px) { .site-legal { padding-top: 16px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; } }

  /* Docs: switching sections in place (the menu, or TERMS & PRIVACY in the docs page's own footer) fades the new
     section in, with the timing of the page transitions' fade */
  body.docs-legal-page .docs-panel:not([hidden]) { animation: ptInFade 260ms ease-out both; }
  @media (prefers-reduced-motion: reduce) { body.docs-legal-page .docs-panel:not([hidden]) { animation: none; } }

  /* ---------- Custom dropdowns (site.js "Custom dropdowns") ----------
     The site's own menu in place of the system's: a dark field with a grey edge, a small chevron that turns when
     open, and a list that drops in (or opens upward near the bottom of the window); the chosen option carries the
     red mark the docs menu uses. The native <select> stays in the page, hidden, as the source of truth. */
  .cs { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
  .cs.cs-full { display: block; width: 100%; }
  .cs .cs-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
  .cs-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; margin: 0; padding: 0 12px;
            box-sizing: border-box; background: #0C0C0D; color: #EDEDED; border: 1px solid #333333; border-radius: 2px; cursor: pointer; text-align: left;
            font-family: 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; transition: border-color 200ms ease; }
  .cs-btn:hover, .cs.cs-open .cs-btn { border-color: #6E6E6E; }
  .cs-btn:focus-visible { outline: none; border-color: #F0485D; }
  .cs.cs-empty .cs-val { color: #6E6E6E; }
  .cs-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-chev { flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid #8E8E8E; border-bottom: 1.5px solid #8E8E8E; transform: rotate(45deg);
             transition: transform 220ms cubic-bezier(.2,.7,.2,1), margin 220ms cubic-bezier(.2,.7,.2,1), border-color 200ms ease; }
  .cs.cs-open .cs-chev { transform: rotate(225deg); margin-top: 3px; border-color: #F0485D; }
  .cs-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 100%; max-height: 260px; overflow-y: auto; margin: 0; padding: 4px 0;
             list-style: none; background: #0C0C0D; border: 1px solid #333333; border-radius: 2px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); outline: none;
             scrollbar-width: thin; scrollbar-color: #333 transparent; animation: csIn 180ms cubic-bezier(.2,.7,.2,1) both; }
  .cs.cs-up .cs-list { top: auto; bottom: calc(100% + 4px); animation-name: csInUp; }
  @keyframes csIn { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes csInUp { from { opacity: 0; transform: translateY(4px); } }
  .cs-list [role="option"] { position: relative; padding: 9px 12px 9px 16px; color: #BDBDBD; cursor: pointer; white-space: nowrap; font: inherit; letter-spacing: 0.04em; }
  .cs-list { font-family: 'Red Hat Mono', ui-monospace, monospace; font-size: 11.5px; }
  .cs-list [role="option"].cs-act { background: #161616; color: #F2F2F2; }
  .cs-list [role="option"][aria-selected="true"] { color: #F2F2F2; }
  .cs-list [role="option"][aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: #F0485D; }
  .cs-list [role="option"][aria-disabled="true"] { color: #555555; cursor: default; }
  @media (prefers-reduced-motion: reduce) { .cs-list { animation: none; } .cs-chev { transition: none; } }
  /* Docs on phones: with the nav moved into the menu, the SEARCH DOCS field sits right under the header, where the
     nav row used to be */
  @media (max-width: 619px) { body.docs-legal-page .dz { padding-top: 6px !important; } }

  /* Team on phones: the mark sits above the headline, smaller (100px), on the text column's left edge, and the two
     are centred on the screen as one group; its hover and tap effects keep working */
  @media (max-width: 760px) {
    .home-splash .sp-open-stage { justify-content: center !important; align-items: stretch !important; gap: 30px !important; }
    .home-splash .sp-open-stage > .hm-wrap { order: -1; position: relative !important; align-self: flex-start !important; margin: 0 !important; --mark-h: 100px !important; }
    .home-splash .sp-open-stage > .hm-wrap .home-mark { --mark-h: 100px !important; }
  }
  /* Team on short phones: a smaller mark and gap so the group still fits above the scroll arrow */
  @media (max-width: 760px) and (max-height: 700px) {
    .home-splash .sp-open-stage { gap: 20px !important; }
    .home-splash .sp-open-stage > .hm-wrap, .home-splash .sp-open-stage > .hm-wrap .home-mark { --mark-h: 72px !important; }
  }
  @media (max-width: 760px) and (max-height: 600px) {
    .home-splash .sp-open-stage { gap: 14px !important; }
    .home-splash .sp-open-stage > .hm-wrap, .home-splash .sp-open-stage > .hm-wrap .home-mark { --mark-h: 52px !important; }
  }
  /* Team on phones: the mark and statement start a short, fixed distance under the header instead of being centred
     (which left a large empty band above them) */
  @media (max-width: 760px) {
    .home-splash .sp-open-stage { justify-content: flex-start !important; padding-top: clamp(28px, 7vh, 72px) !important; }
  }

  /* Team on phones: no mark; the statement (headline, tagline, JOIN THE TEAM) is centred in the first screen */
  @media (max-width: 760px) {
    .home-splash .sp-open-stage > .hm-wrap { display: none !important; }
    .home-splash .sp-open-stage { justify-content: center !important; padding-top: 0 !important; }
  }

  /* Log-in dialog, GENERATE: while the org ID is being made the half shows a GENERATING tag (the COPIED chip's slot,
     with a pulse) and a thin bar filling along its foot for the whole wait, so it's clear something is happening */
  .auth .hg-opts.is-working .hg-got { opacity: 1; transform: none; animation: hgPulse 900ms ease-in-out infinite; }
  @keyframes hgPulse { 50% { opacity: 0.55; } }
  .hg-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #140A0C; transform-origin: left center; transform: scaleX(0);
             animation: hgProg linear forwards; pointer-events: none; z-index: 2; }
  @keyframes hgProg { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .auth .hg-opts.is-working .hg-got { animation: none; } .hg-prog { animation: none; transform: scaleX(1); } }

  /* Article contents (Research, Writing and News posts): the docs menu's look. A grey rule down the left and
     one red marker (.dz-ink, site.js "Article contents marker") that slides to the section being read. */
  .post-toc ol.has-ink { position: relative; }
  .post-toc ol.has-ink button { border-left: 1px solid #262626; padding-left: 14px; }
  .post-toc ol.has-ink button[aria-current="true"]::before { display: none; }
  .post-toc ol.has-ink button[aria-current="true"] { color: #F2F2F2; }

  /* =====================================================================
     Writing view previews (preview only: writing.html?v=d | e | f | g, flag set in writing.html's <head>,
     behaviour in site.js "Writing view previews"). Each drives the hidden tabs; without ?v none of this applies.
     ===================================================================== */
  html.wv .wr-tabs { display: none !important; }
  .wv-word:focus-visible, .wv-code:focus-visible, .wv-stat:focus-visible, .wv-seg:focus-visible { outline: 1px solid #F0485D; outline-offset: 3px; }
  .wv-code:focus-visible { outline-offset: -4px; }   /* inside its own cell of the control */

  /* d: the count line is the filter; it sits on the heading's baseline and wraps like a sentence on phones */
  .writing-page .wr-head .wv-line { margin: 0; max-width: none; text-align: right; font: 400 11px/2 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em; color: #4A4A4A; }
  .wv-word { margin: 0; padding: 0; background: none; border: 0; cursor: pointer; white-space: nowrap; font: inherit; letter-spacing: inherit; color: #8E8E8E;
          text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: color 200ms ease, text-decoration-color 200ms ease; }
  .wv-word .wv-n { color: #D6D6D6; transition: color 200ms ease; }
  .wv-word:hover { color: #F2F2F2; text-decoration-color: #4A4A4A; }
  .wv-word:hover .wv-n { color: #F2F2F2; }
  .wv-word.is-none, .wv-word.is-none .wv-n { color: #4E4E4E; }
  .wv-word[aria-pressed="true"], .wv-word[aria-pressed="true"] .wv-n { color: #F0485D; text-decoration-color: #E0193F; }
  .wv-dash { color: #3A3A3A; }
  @media (max-width: 560px) { .writing-page .wr-head .wv-line { text-align: left; } }

  /* e: short codes; the rest of a name slides out after its code on hover or focus, and stays out once chosen */
  .wv-codes { display: inline-flex; border: 1px solid #262626; }
  .wv-code { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 10px 12px 10px 14px; background: none; border: 0;
             border-left: 1px solid #262626; cursor: pointer; white-space: nowrap; font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em;
             color: #8E8E8E; transition: color 200ms ease, background-color 200ms ease; }
  .wv-code:first-child { border-left: 0; }
  .wv-x { display: inline-block; width: 0; overflow: hidden; transition: width 360ms cubic-bezier(.2,.7,.2,1); }
  .wv-xi { display: inline-block; color: #5A5A5A; transition: color 200ms ease; }
  .wv-code.is-none { color: #4E4E4E; }
  .wv-code:focus-visible .wv-x, .wv-code[aria-pressed="true"] .wv-x { width: var(--w, auto); }
  @media (hover: hover) {
    .wv-code:hover { color: #F2F2F2; }
    .wv-code:hover .wv-x { width: var(--w, auto); }
  }
  .wv-code[aria-pressed="true"] { color: #F2F2F2; background: #1A1A1A; }
  .wv-code[aria-pressed="true"] .wv-code-k { color: #F0485D; }
  .wv-code[aria-pressed="true"] .wv-xi { color: #F2F2F2; }
  .wv-code[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #E0193F; }
  @media (max-width: 560px) {
    .wv-codes { display: flex; align-self: stretch; }
    .wv-code { flex: 1 1 auto; padding: 12px 6px 12px 8px; }
  }
  @media (max-width: 340px) { .wv-code { font-size: 10px; letter-spacing: 0.12em; } }

  /* f: the counts are the control, written as a sum (all = each shelf added up); the figures sit on the heading's baseline */
  .wv-stats { --big: clamp(30px, 2.9vw, 40px); display: flex; align-items: flex-start; gap: clamp(10px, 1.3vw, 18px); }
  html.wv-f .writing-page .r-head.wr-head { align-items: flex-end; }
  html.wv-f .writing-page .r-head.wr-head h1 { margin-bottom: 0 !important; }   /* its foot on the labels' line */
  .wv-stat { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
  .wv-big { font: 400 var(--big)/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; font-variant-numeric: tabular-nums; color: #8E8E8E; transition: color 200ms ease; }
  .wv-lab { font: 400 9.5px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.16em; color: #6A6A6A; white-space: nowrap; transition: color 200ms ease; }
  .wv-op { font: 400 calc(var(--big) * 0.5)/var(--big) 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; color: #3A3A3A; }
  .wv-stat:hover .wv-big { color: #F2F2F2; }
  .wv-stat:hover .wv-lab { color: #BDBDBD; }
  .wv-stat.is-none .wv-big { color: #333333; }
  .wv-stat.is-none .wv-lab { color: #4E4E4E; }
  .wv-stat.is-none:hover .wv-big { color: #6A6A6A; }
  .wv-stat[aria-pressed="true"] .wv-big { color: #F0485D; }
  .wv-stat[aria-pressed="true"] .wv-lab { color: #F2F2F2; }
  @media (max-width: 560px) {
    html.wv-f .writing-page .r-head.wr-head { align-items: flex-start; }
    .wv-stats { --big: 30px; align-self: stretch; justify-content: space-between; gap: 0; margin-top: 6px; }
    .wv-lab { font-size: 9px; letter-spacing: 0.12em; }
  }
  @media (max-width: 340px) { .wv-stats { --big: 26px; } .wv-lab { font-size: 8.5px; letter-spacing: 0.08em; } }

  /* g: the lists sit in one box whose left edge is a spine of shelf names, read bottom to top like a y-axis label;
     the chosen shelf is a filled red segment (the marker slides under the labels). The list area is at least as tall
     as the spine and closes on a rule level with its foot, so a short shelf reads as a shelf, not a dangling rail. */
  .wv-spine { --rail: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; box-sizing: border-box;
              max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; padding: clamp(28px, 4vw, 44px) clamp(16px, 2.5vw, 44px) clamp(64px, 10vw, 120px); }
  .wv-spine .r-list { max-width: none; margin: 0; padding: 0 0 0 clamp(18px, 2.4vw, 32px); }
  .wv-spine-body { align-self: stretch; min-width: 0; border-bottom: 1px solid #262626; }
  .wv-rail { position: sticky; top: 24px; display: flex; flex-direction: column; border: 1px solid #262626; border-bottom: 0; }
  .wv-seg { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: var(--rail); margin: 0; padding: 14px 0 16px;
            background: none; border: 0; border-bottom: 1px solid #262626; cursor: pointer; color: #A3A3A3;
            transition: color 200ms ease 80ms, background-color 200ms ease; }
  .wv-seg-n { font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: #8E8E8E; transition: color 200ms ease 80ms; }
  .wv-seg-k { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font: 400 11.5px/1 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.08em; }
  .wv-seg:hover { color: #F2F2F2; background: #1A1A1A; }
  .wv-seg:hover .wv-seg-n { color: #F2F2F2; }
  .wv-seg.is-none { color: #6E6E6E; }
  .wv-seg.is-none .wv-seg-n { color: #5E5E5E; }
  .wv-seg.is-none:hover, .wv-seg.is-none:hover .wv-seg-n { color: #BDBDBD; }
  .wv-seg[aria-pressed="true"], .wv-seg[aria-pressed="true"] .wv-seg-n { color: #FFFFFF; background: none; cursor: default; }
  .wv-seg[aria-pressed="true"] { border-bottom-color: transparent; }   /* the red runs to the next divider */
  .wv-seg[aria-pressed="true"]:focus-visible { outline-color: #FFFFFF; }
  .wv-seg:focus-visible { outline-offset: -5px; }
  .wv-mark { position: absolute; z-index: 0; top: 0; left: -1px; right: -1px; height: 0; background: #E0193F; opacity: 0; pointer-events: none;
             transition: transform 420ms cubic-bezier(.2,.7,.2,1), height 420ms cubic-bezier(.2,.7,.2,1); }
  /* wide screens: the spine hangs in the left margin, so the list keeps the heading's left edge */
  @media (min-width: 1420px) {
    .wv-spine { max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px) + 2 * (var(--rail) + 34px)); padding-right: calc(clamp(16px, 2.5vw, 44px) + var(--rail) + 34px); }
    .wv-spine .r-list { padding-left: 32px; }
  }
  @media (max-width: 560px) {
    .wv-spine { --rail: 34px; }
    .wv-seg { gap: 10px; padding: 12px 0 14px; }
    .wv-seg-k { font-size: 10.5px; letter-spacing: 0.06em; }
    .wv-spine .r-list { padding-left: 14px; }
  }
  @media (prefers-reduced-motion: reduce) { .wv-x, .wv-mark { transition: none; } }

  /* h: readable tabs (Cursor-inspired). The real .wr-tabs move onto their own row under the heading, left-aligned
     with the list's numbers; plain Red Hat Mono labels, the chosen one full white, the rest dimmed, no underline.
     Phones: one row; if it ever runs out of room it scrolls sideways (scrollbar hidden) rather than wrapping. */
  html.wv-h .writing-page .r-head.wr-head { display: block; }
  html.wv-h .writing-page .r-head.wr-head h1 { margin: 0; }
  html.wv-h .writing-page .wr-head .wr-tabs { display: flex; justify-content: flex-start; gap: 0; margin: clamp(28px, 4vw, 40px) 0 0 -10px !important; padding: 0;
           overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.wv-h .writing-page .wr-head .wr-tabs::-webkit-scrollbar { display: none; }
  html.wv-h .writing-page .wr-head .wr-tabs button { flex: none; padding: 8px 10px; white-space: nowrap; font: 400 13.5px/1.2 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0;
           color: #F2F2F2; opacity: 0.5; transition: opacity 160ms ease; }
  html.wv-h .writing-page .wr-head .wr-tabs button:hover, html.wv-h .writing-page .wr-head .wr-tabs button[aria-selected="true"] { color: #F2F2F2; opacity: 1; }
  html.wv-h .writing-page .wr-head .wr-tabs button:focus-visible { outline: 1px solid #F0485D; outline-offset: -2px; opacity: 1; }
  html.wv-h .writing-page .wr-head .wr-tabs .wr-ink { display: none; }
  html.wv-h .writing-page .wr-panel .r-list { padding-top: 14px; }
  /* phones: 13px with 8px side padding fits all five on one row down to 360px (330px of 336px); the sideways scroll is only a fallback */
  @media (max-width: 480px) {
    html.wv-h .writing-page .wr-head .wr-tabs { margin: 28px 0 0 -8px !important; }
    html.wv-h .writing-page .wr-head .wr-tabs button { padding: 8px; font-size: 13px; }
  }

  /* Writing options (writing-options.html, unlisted): the current tabs and the ?v previews, one row each */
  .wo-list { box-sizing: border-box; max-width: calc(1200px + 2 * clamp(16px, 2.5vw, 44px)); margin: 0 auto; list-style: none;
             padding: clamp(28px, 4vw, 44px) clamp(16px, 2.5vw, 44px) clamp(64px, 10vw, 120px); }
  .wo-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid #1F1F1F; }
  .wo-item:last-child { border-bottom: 1px solid #1F1F1F; }
  .wo-k { font: 400 10px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.18em; color: #F0485D; }
  .wo-name { margin: 0 0 12px; font: 400 12px/1.3 'PP Monument Wide', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
  .wo-name a { color: #F2F2F2; text-decoration: none; transition: color 200ms ease; }
  .wo-name a:hover { color: #F0485D; }
  .wo-name a:focus-visible, .wo-go:focus-visible { outline: 1px solid #F0485D; outline-offset: 3px; }
  .wo-desc { margin: 0 0 8px; max-width: 72ch; font: 400 12px/1.7 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #BDBDBD; }
  .wo-note { margin: 0; max-width: 72ch; font: 400 11px/1.6 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: #6A6A6A; }
  .wo-go { padding: 7px 10px; border: 1px solid #262626; font: 400 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: 0.12em; color: #8E8E8E;
           text-decoration: none; white-space: nowrap; transition: color 200ms ease, border-color 200ms ease; }
  .wo-go:hover { color: #F0485D; border-color: #E0193F; }
  @media (max-width: 640px) {
    .wo-item { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
    .wo-go { grid-column: 2; justify-self: start; margin-top: 16px; }
  }

  /* =====================================================================
     Homepage hero: the spinning ASCII mark and the typed "We are ___" line under it, centred together
     in the room under the header. The mark's 30 rows are cropped evenly (4 off the top, 4 off the
     bottom, one row = --mark-h / 22), so its box is the logo height and its centre is the drawing's centre.
     The line, "We are <role> building ultra-low-latency systems", is sized by the role it shows, so each role is
     centred; site.js swaps roles only while the line is blank, and every letter cell keeps its real letter's width,
     so nothing moves while text is visible. One size, --hero-fs, chosen so the longest state (PERFORMANCE
     ENGINEERS) fits on one line inside the 16px gutters at 390px. padding-left equal to the letter-spacing cancels
     the trailing letter-spacing at the end of the line, so the ink (not just the box) is centred. Kerning is off
     so the letter cells and the switch-LED overlay on "ultra-low-latency systems" line up exactly.
     ===================================================================== */
  .hero { grid-template-rows: auto 1fr !important; }
  .hero main { min-height: 0 !important; padding: 0 16px !important; justify-content: center; align-items: center;
               --hero-fs: clamp(6px, 1.75vw, 18px); }
  .hero .mark-clone { margin: calc(var(--mark-h) / -22 * 4) 0 !important; }
  .hero .ha-title { margin: clamp(24px, 5vh, 44px) 0 0; padding-left: 0.04em; max-width: 100%; text-align: center; white-space: nowrap;
                    font: 400 var(--hero-fs)/1.2 'PP Monument Wide', 'Helvetica Neue', sans-serif; font-kerning: none; letter-spacing: 0.04em; text-transform: uppercase; color: #F2F2F2; }
  .hero .ha-title .ln-type { display: inline-grid; text-align: left; vertical-align: top; }
  .hero .ha-title .ln-type > * { grid-area: 1 / 1; }
  /* one cell per letter, sized by the real letter (hidden <s>); the shown glyph (<i>) sits over it in normal flow,
     zero-width and centred, so a scrambled glyph of another width never moves the line. An empty <i> is a blank cell. */
  .hero .ha-title .ha-ch { display: inline-grid; }
  .hero .ha-title .ha-ch > * { grid-area: 1 / 1; }
  .hero .ha-title .ha-ch > s { visibility: hidden; text-decoration: none; }
  .hero .ha-title .ha-ch > i { width: 0; justify-self: center; display: flex; justify-content: center; white-space: pre; font-style: normal; }
  /* "Building ultra-low-latency systems" (moved here from the old Team page) ends the line. "ultra-low-latency
     systems" keeps its blink-dash (tlDashA / tlDashBlink) and the switch-LED flicker (site.js "Switch-LED flicker"),
     whose overlay is hidden while the line scrambles. */
  .hero .hb-lead { color: inherit; }
  .hero .hb-ul::after { display: none; }
  .hero .hb-ul { background-image: linear-gradient(90deg, #F2F2F2 0%, #F2F2F2 33.2%, #E0193F 33.4%, #FF3355 50%, #E0193F 66.6%, #F2F2F2 66.8%, #F2F2F2 100%) !important;
                 background-size: 300% 100% !important; animation: tlDashA 3s linear 1.4s infinite, tlDashBlink 3s linear 1.4s infinite; }
  .hero .ha-busy .tl-leds { visibility: hidden; }
  @media (prefers-reduced-motion: reduce) { .hero .hb-ul { animation: none; } }
  .hero .ha-title.ha-static { white-space: normal; max-width: 40ch; text-wrap: balance; }
  .hero .ha-title.ha-static .ln-type { display: inline; }
  /* --hero-gap: the space between the mark and the line. */
  .hero main { --hero-gap: clamp(24px, 5vh, 44px); }
  .hero .ha-title { margin-top: var(--hero-gap); }
  /* Phones (640px and narrower): the sentence breaks after the role into two centred lines, "WE ARE <ROLE>" and
     "BUILDING ULTRA-LOW-LATENCY SYSTEMS" (the tail becomes a block; no <br>, the aria-label is unchanged). The second
     line is the longer one, about 27.9em with kerning off; 3.2vw is the largest size that keeps it inside the 16px
     gutters down to 360px (12.5px at 390). */
  @media (max-width: 640px) {
    .hero main { --hero-fs: min(3.2vw, 14px); }
    .hero .ha-title .hb-tail { display: block; }
  }

  /* Legal footer: the copyright centred on every page, desktop and phones (top rule kept). padding-left equal to the
     letter-spacing balances the tracking after the last letter, so the ink itself sits on the centre line.
     Home: the hero and this footer share one screen (the feature sections below the hero are gone), so no scroll. */
  .site-legal { justify-content: center !important; text-align: center !important; }
  .site-legal .sl-copy { padding-left: 0.16em; }
  @media (max-width: 760px) { .site-legal .sl-copy { padding-left: 0.06em; } }
  body.api-view { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  body.api-view > .hero { flex: 1 0 auto; min-height: 0 !important; }


  /* Writing list: NEWS / RESEARCH labels in the brand red */
  .writing-page .r-item .r-kind { color: #E0193F !important; }
  body.wr-light.writing-page .r-item .r-kind { color: #C0102F !important; }