/* ===================================================================
   wh1ter0se.dev

   The admin palette, applied to a public site: neutral near-black,
   charcoal surfaces, quiet rules, and crimson used the way a good
   dark dashboard uses colour - as a small number of points of light,
   never as paint. Archivo carries the voice; everything else is quiet.

   Self-hosted display face (Archivo, SIL OFL 1.1, licence shipped
   beside it in /assets/fonts). No third-party requests, no analytics
   service, no cookies. One server-side log row per request: IP,
   country and path, kept 30 days.

   DESIGN.md describes this file. If the two disagree, this file is
   right and DESIGN.md is stale.
   =================================================================== */

@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-display.woff2') format('woff2-variations');
  font-weight:400 900;
  font-display:swap;
  font-style:normal;
}

/* For the one-shot radar pass on the GeneralsX heroes. Browsers without
   @property never animate it, and its initial value leaves the art whole. */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:360deg}

:root{
  color-scheme:dark;

  /* ground. Contrast of every text token is measured on --bg / --bg-2. */
  --bg:#111111;       /* page */
  --bg-1:#171717;     /* surface: panels, rows, callouts */
  --bg-2:#1d1d1d;     /* raised: hover, insets, keycaps */
  --bg-3:#242424;     /* pressed, quiet button fill */

  --ink:#f5f5f5;      /* 17.3 / 15.5 : 1 */
  --ink-2:#a6a6a6;    /*  7.8 /  6.9 : 1 */
  --ink-3:#8c8c8c;    /*  5.6 /  5.0 : 1  - the floor for any text */

  --line:#262626;     /* decorative rules only (1.25:1) */
  --line-2:#303030;   /* panel borders on hover, stronger rules */
  --line-3:#3d3d3d;
  --edge-ui:#6b6b6b;  /* CONTROL boundaries: 3.54:1 on --bg, 3.16:1 on --bg-2 (WCAG 1.4.11) */

  /* crimson. #c8223a is 3.37:1 on --bg: fills, bars, glyphs and large
     display type only, never small text. White on it is 5.14:1. */
  --accent:#c8223a;
  --accent-hi:#d62b44;    /* non-text only: focus ring, rules */
  --accent-press:#b01e33; /* hover and pressed FILL: 6.25:1 under --ink. Never lighter. */
  --accent-ink:#eb5b6e;   /* the only crimson that may be small text: 5.6:1 */

  --ok:#4ade80;       /* 10.8:1 */
  --warn:#f2b44c;     /* 10.3:1 */

  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ui:var(--display);
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  /* type scale */
  --fs-hero:clamp(48px,8vw,116px);
  --fs-h2:clamp(34px,4.6vw,60px);
  --fs-title:clamp(34px,4.6vw,64px);
  --fs-h3:clamp(19px,2vw,23px);
  --fs-lede:clamp(17px,1.5vw,19px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-meta:12.5px;

  /* spacing, 4px base */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
  --s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --pad:clamp(16px,5vw,64px);
  --wide:1240px;
  --section:clamp(56px,7vw,96px);

  /* shape: two radii and a pill, nothing else */
  --r-ctl:6px;        /* buttons, copy, keycaps, inline code, inputs */
  --r-panel:10px;     /* panels, rows, callouts, disclosures */
  --r-pill:999px;     /* status pills and tags */

  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entering, feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* moving on screen: disclosure, radar */
  --ease:ease;                                /* colour and border */
  --t-press:120ms;
  --t-hover:150ms;
  --t-state:200ms;
  --t-disclose:240ms;
  --t-enter:480ms;
  --stagger:60ms;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-3) var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%}

::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:2px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--bg);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}

a{color:inherit;text-decoration-color:var(--edge-ui);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:text-decoration-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
a:hover{text-decoration-color:currentColor}
code,kbd,samp{font-family:var(--mono);font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--bg);
  padding:12px 18px;font:600 14px/1 var(--ui);text-decoration:none}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------
   TYPE
   ------------------------------------------------------------------ */
.display{
  font-family:var(--display);font-weight:800;line-height:.92;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
  margin:0;text-wrap:balance;
}
h1.display{font-size:var(--fs-hero)}
h2.display{font-size:var(--fs-h2)}
h3{font:700 var(--fs-h3)/1.15 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 12px;color:var(--ink)}
h4{font:600 17px/1.4 var(--sans);margin:0 0 8px;color:var(--ink)}
h5{font:600 15px/1.4 var(--sans);margin:0 0 6px;color:var(--ink)}

p{margin:0 0 16px;max-width:68ch;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.lede{font:var(--fs-lede)/1.6 var(--sans);color:var(--ink);max-width:58ch}
.fine{font:13.5px/1.6 var(--sans);color:var(--ink-3);max-width:64ch}
strong{color:var(--ink);font-weight:600}
em{color:var(--ink)}

/* A small label. Rationed: one per three sections at most. */
.eyebrow{
  display:block;margin:0 0 16px;
  font:600 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* Pills. Neutral by default; colour only when it states something. */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font:600 12px/1 var(--ui);letter-spacing:.01em;
  padding:5px 10px;border-radius:var(--r-pill);
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink-2);
}
.tag.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--bg));border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.tag.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--bg));border-color:color-mix(in srgb,var(--ok) 26%,transparent)}

/* A live-state pill with a dot. Only for a state that is real right now. */
.status{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  padding:7px 13px 7px 11px;border-radius:var(--r-pill);
  background:var(--bg-1);border:1px solid var(--line-2);
  font:500 13.5px/1 var(--ui);color:var(--ink-2);max-width:none;
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.status.ok::before{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.status.warn::before{background:var(--warn)}

/* ------------------------------------------------------------------
   GLOBAL NAV - one bar, every page. Markup is identical on all pages.
   ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wide);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:12px;min-height:60px;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font:800 16px/1 var(--display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin-right:auto;
}
/* The favicon's mark: a point of crimson inside a faint ring. */
.brand .dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px color-mix(in srgb,var(--accent) 55%,transparent);
  margin:0 2px;
}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-links a{
  padding:9px 12px;border-radius:var(--r-ctl);text-decoration:none;
  font:500 14.5px/1 var(--ui);color:var(--ink-2);
  transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--bg-2)}
.nav-links a[aria-current]{color:var(--ink);background:var(--bg-2)}
.nav-links .nav-cta{
  margin-left:8px;padding:9px 15px;background:var(--ink);color:var(--bg);font-weight:600;
}
.nav-links .nav-cta:hover{background:#fff;color:var(--bg)}

/* the section row inside /generals */
.subnav{border-bottom:1px solid var(--line);background:var(--bg)}
.subnav-in{
  max-width:var(--wide);margin:0 auto;padding:0 var(--pad);
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{
  padding:14px 12px 12px;text-decoration:none;white-space:nowrap;
  font:600 12.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:2px solid transparent;
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.subnav a:hover{color:var(--ink-2)}
.subnav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}

/* EA asks for the non-endorsement line prominently at the top of the site;
   this is that line, not decoration. */
.ea-top{
  background:var(--bg-1);border-bottom:1px solid var(--line);
  font:12.5px/1.5 var(--sans);color:var(--ink-3);text-align:center;
  padding:9px var(--pad);margin:0;max-width:none;
}
.ea-top a{color:var(--ink-2)}

/* ------------------------------------------------------------------
   SHELL
   ------------------------------------------------------------------ */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--section) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head p{margin-top:16px}

/* ------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in{
  position:relative;z-index:2;max-width:var(--wide);margin:0 auto;
  padding:clamp(56px,8vw,96px) var(--pad) clamp(48px,7vw,88px);
}
.hero-copy{max-width:min(100%,640px)}
.hero h1{margin-bottom:24px;max-width:13ch}
.hero .lede{margin-bottom:32px;max-width:52ch}

/* The ember radial is retired. The element may still be in old markup. */
.hero-glow{display:none}

/* Map art: real project data, rendered in greys. The one crimson point on
   it is a .blip the page positions with --x / --y (percent of the art). */
.hero{--art:min(640px,58vw)}
.hero-art,.hero-sweep{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:-4%;top:calc(50% - var(--art) / 2);width:var(--art);height:var(--art);
}
.hero-art{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 78%);
}
.hero-art img{width:100%;height:100%;display:block;object-fit:contain;filter:grayscale(1) brightness(.82)}
.blip{
  position:absolute;left:var(--x,50%);top:var(--y,50%);width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
}
/* the radar beam: visible only during the one pass, invisible at rest */
.hero-sweep{
  opacity:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg 290deg,
    rgb(245 245 245 / .05) 330deg,rgb(245 245 245 / .20) 359deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 72%);
}

/* ------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:13px 20px;border-radius:var(--r-ctl);border:1px solid transparent;
  font:600 15px/1 var(--ui);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--accent);color:var(--ink);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12);
  transition:background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease),transform var(--t-press) var(--ease-out);
}
.btn:hover{background:var(--accent-press);text-decoration:none}
.btn.lg{min-height:52px;padding:17px 26px;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--edge-ui);box-shadow:none}
.btn.ghost:hover{background:var(--bg-2);border-color:var(--ink-3)}
.btn.quiet{background:var(--bg-3);color:var(--ink);border-color:var(--edge-ui);box-shadow:none}
.btn.quiet:hover{background:var(--line-2);border-color:var(--ink-3)}
.btn[aria-disabled="true"]{background:transparent;color:var(--ink-3);border:1px dashed var(--line-3);
  box-shadow:none;cursor:not-allowed;pointer-events:none}

/* platform switcher for the install instructions */
.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg button[aria-selected="true"]:hover{background:#fff;border-color:#fff}
.seg[hidden]{display:none!important}
.pane[hidden]{display:none}

/* Copy. Label and state swap in place; #say carries it to screen readers. */
.copy{
  flex:0 0 auto;min-height:34px;padding:9px 12px;border-radius:var(--r-ctl);cursor:pointer;
  background:var(--bg-2);border:1px solid var(--edge-ui);color:var(--ink-2);
  font:600 11.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),
             background-color var(--t-hover) var(--ease),transform var(--t-press) var(--ease-out);
}
.copy:hover{color:var(--ink);background:var(--bg-3);border-color:var(--ink-3)}
.copy[data-state="done"]{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}

/* ------------------------------------------------------------------
   PLATFORM LIST - every platform always visible, one is lit
   ------------------------------------------------------------------ */
.plats{display:grid;gap:8px;margin-top:16px}
.plat{
  position:relative;
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:16px 18px;border-radius:var(--r-panel);
  background:var(--bg-1);border:1px solid var(--line);
  transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease);
}
.plat:hover{border-color:var(--line-2);background:var(--bg-2)}
.plat.lit{background:var(--bg-2);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
/* "this one is yours": a crimson bar on the leading edge */
.plat.lit::before{
  content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent);transform-origin:50% 0;
}
.plat.off{background:var(--bg);border-style:dashed;border-color:var(--line-3)}
.plat.off .os{color:var(--ink-2)}
.plat.off .file,.plat.off .ico{color:var(--ink-3)}
.plat .ico{color:var(--ink-3);display:flex}
.plat.lit .ico{color:var(--ink)}
.plat .ico svg{width:20px;height:20px;display:block}
.plat .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.plat .os{font:600 16px/1.2 var(--ui);color:var(--ink)}
.plat .file{
  font:12px/1.5 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;flex:1 1 100%;
}
.plat .file .dim{color:var(--edge-ui)}
.plat .file .flag{color:var(--warn)}
.plat .pact{display:flex;align-items:center;gap:10px}
/* the detected-platform pill: light text on crimson, 5.14:1 */
.plat .yours{
  font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-pill);background:var(--accent);color:var(--ink);
}

/* ==================================================================
   PAGE BLOCK: DOWNLOAD  (/generals/download)
   Owned by that page. Every selector sits under main.pg-dl, so
   nothing here reaches another page. Structure after Linear's
   download page (one detected button, then every platform as a row)
   and the dark catalog-dashboard reference (columns of plain values,
   colour only in the pills). Motion here is feedback only; the one
   entrance is the shared hero (.lines, .rise, radar pass, blip).
   ================================================================== */

/* Hero: shorter than the other GeneralsX heroes, because the download
   is the point. Two lines of headline, the lede, then the action with
   what it needs beside it. */
.pg-dl .dl-hero{--art:min(540px,44vw)}
.pg-dl .dl-hero .hero-in{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(44px,6vw,76px)}
/* the art is pinned from the top, so the hero growing when the
   post-click note opens does not move the map */
.pg-dl .dl-hero .hero-art,.pg-dl .dl-hero .hero-sweep{top:clamp(8px,2.5vw,36px)}
.pg-dl .dl-hero .hero-copy{max-width:min(100%,700px)}
.pg-dl .dl-hero h1{font-size:clamp(30px,9.2vw,78px);max-width:none;margin:22px 0 22px}
.pg-dl .dl-hero .lede{margin-bottom:30px}

/* the live build: a grey dot until /api/build answers, green after */
.pg-dl .status::before{transition:background-color var(--t-state) var(--ease)}
.pg-dl .status:has(.is-live)::before{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.pg-dl #live-build.is-live{font:13px/1 var(--mono);color:var(--ink)}
.pg-dl #live-build-sub:not(:empty)::before{content:"\00b7";margin:0 .5em;color:var(--ink-3)}

.pg-dl .dl-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.pg-dl .dl-req{margin:0;max-width:36ch;font:14px/1.55 var(--sans);color:var(--ink-3)}
.pg-dl .dl-req a{color:var(--ink-2)}
/* What the detected file needs, said beside the button. Shown only for
   the lit row, so it can never describe a platform you are not on. */
.pg-dl .req{display:none}
.pg-dl:has(.plat.lit[data-platform="windows"]) .req[data-for="windows"],
.pg-dl:has(.plat.lit[data-platform="macos"]) .req[data-for="macos"],
.pg-dl:has(.plat.lit[data-platform="linux"]) .req[data-for="linux"],
.pg-dl:has(.plat.lit) .req[data-for="any"]{display:inline}

/* the download glyph; the accessible name stays the label alone */
.pg-dl #hero-dl::after,.pg-dl .plat a.btn::after{content:"\2193" / "";font-weight:600;margin-right:-2px}

/* What happens after the click (Perplexity's "you're almost there",
   in place and without a modal). site.js collapses these; with no
   script they are simply there, so every sentence is true either way. */
.pg-dl .dl-next-in{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:14.5px;line-height:1.6}
.pg-dl .dl-next-in p{font-size:inherit;max-width:74ch}
.pg-dl .dl-hero .dl-next-in{
  margin-top:20px;padding:14px 16px;max-width:62ch;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-panel);
}

/* Platform rows as a catalog: name and file, then size, what it runs
   on, and one status pill, each in its own column. */
.pg-dl #get{padding-top:clamp(48px,6vw,80px)}
.pg-dl .plats{gap:6px;margin:0}
.pg-dl .plat{
  grid-template-columns:20px minmax(0,1fr) 4.75rem 8.75rem 7rem auto;
  column-gap:20px;row-gap:0;padding:18px 20px;
}
.pg-dl .plat .ico{grid-column:1;grid-row:1}
.pg-dl .plat .who{grid-column:2;grid-row:1;row-gap:5px}
.pg-dl .plat .file{font-size:12.5px}
.pg-dl .dl-kind{font:500 13px/1.5 var(--ui);color:var(--ink-2);margin-right:4px}
.pg-dl .dl-meta{display:contents}
.pg-dl .dl-meta > *{grid-row:1}
.pg-dl .dl-sz{grid-column:3;text-align:right;font:13px/1.4 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pg-dl .dl-arch{grid-column:4;font:500 14px/1.35 var(--ui);color:var(--ink-2)}
.pg-dl .dl-flag{grid-column:5}
.pg-dl .dl-note{grid-column:3/5;font:14px/1.45 var(--sans);color:var(--ink-3)}
.pg-dl .plat .pact{grid-column:6;grid-row:1;justify-content:flex-end}
.pg-dl .plat .pact .btn{min-width:13rem}
.pg-dl .plat .dl-next{grid-column:2/-1;grid-row:2}
.pg-dl .plat.lit .dl-sz{color:var(--ink)}
.pg-dl .plat.lit .dl-arch{color:var(--ink)}

.pg-dl .dl-after{display:grid;gap:6px;margin:20px 0 28px}
.pg-dl .dl-after .fine{margin:0}

/* What you need first: one lit sentence, the rest quiet */
.pg-dl .dl-statement{
  margin:28px 0 0;max-width:44ch;
  font:600 clamp(21px,2.3vw,30px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink-3);
  text-wrap:pretty;
}
.pg-dl .dl-statement strong{color:var(--ink);font-weight:inherit}
.pg-dl .dl-need .note{margin-top:28px;max-width:62ch}

/* Install: a segmented control over the per-OS procedures */
.pg-dl .dl-seg{
  display:flex;gap:4px;width:max-content;max-width:100%;margin:0 0 36px;padding:4px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-panel);
}
.pg-dl .dl-seg button{
  flex:1 1 0;min-height:44px;padding:0 20px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r-ctl);
  font:600 14.5px/1 var(--ui);color:var(--ink-2);
  transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.pg-dl .dl-seg button:hover{color:var(--ink);background:var(--bg-2)}
.pg-dl .dl-seg button[aria-selected="true"],
.pg-dl .dl-seg button[aria-selected="true"]:hover{background:var(--bg-3);color:var(--ink);border-color:var(--edge-ui)}

.pg-dl .pane{max-width:880px}
.pg-dl .pane:not([hidden]) ~ .pane:not([hidden]){margin-top:72px;padding-top:56px;border-top:1px solid var(--line)}
.pg-dl .pane > h3{font-size:clamp(26px,2.8vw,34px);margin-bottom:16px}
.pg-dl .pane > .lede{margin-bottom:20px}
.pg-dl .steps{margin-top:36px}
.pg-dl .steps + details{margin-top:36px}
.pg-dl .step > h4{font:700 19px/1.3 var(--ui);letter-spacing:-.003em}

/* the check that ends a step: a drawn tick and the word, not a label */
.pg-dl .chk{position:relative;padding-left:46px}
.pg-dl .chk::before{
  content:"";position:absolute;left:19px;top:22px;width:11px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
.pg-dl .ck{font:600 15px/1 var(--ui);color:var(--ok);margin-right:3px}

.pg-dl .dl-label{margin:20px 0 10px;font:600 14px/1.3 var(--ui);color:var(--ink-2)}
.pg-dl .dl-h4{margin:36px 0 10px;font:700 19px/1.3 var(--ui)}
.pg-dl .dl-ol{margin:0 0 16px;padding-left:22px;max-width:68ch;color:var(--ink-2)}
.pg-dl .dl-ol li{margin-bottom:6px}
.pg-dl .dl-why{margin-top:20px}
.pg-dl .dl-mt{margin-top:18px}

.pg-dl .er .sym{font:600 16px/1.45 var(--ui)}

/* The launcher: what it is on the left, what it does on the right */
@media (min-width:961px){
  .pg-dl .dl-launch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,6vw,88px);align-items:start}
  .pg-dl .dl-launch .spec{margin-top:0}
  .pg-dl .dl-launch .spec .srow{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr)}
}
.pg-dl .dl-launch .spec{margin-top:32px}
.pg-dl .dl-lic .note{margin-top:28px;max-width:78ch}
.pg-dl .dl-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* feedback: the download glyph dips toward the file, pointer only */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .pg-dl #hero-dl::after,.pg-dl .plat a.btn::after{display:inline-block;transition:transform var(--t-hover) var(--ease-out)}
  .pg-dl #hero-dl:hover::after,.pg-dl .plat a.btn:hover::after{transform:translateY(2px)}
}

@media (max-width:1179px){
  .pg-dl .plat{grid-template-columns:20px minmax(0,1fr) auto}
  .pg-dl .dl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;grid-column:2;grid-row:2;margin-top:10px}
  .pg-dl .plat .pact{grid-column:3;grid-row:1/span 2}
  .pg-dl .plat .dl-next{grid-column:2/-1;grid-row:3}
}
/* beside the art the headline scales with the column, not the screen */
@media (min-width:861px){
  .pg-dl .dl-hero h1{font-size:clamp(54px,5.6vw,78px)}
}
@media (max-width:860px){
  .pg-dl .dl-hero{--art:min(460px,92vw)}
}
@media (max-width:680px){
  .pg-dl .plat{grid-template-columns:20px minmax(0,1fr);padding:16px}
  .pg-dl .plat .pact{grid-column:1/-1;grid-row:3;margin-top:14px}
  .pg-dl .plat .pact .btn{min-width:0}
  .pg-dl .plat .dl-next{grid-column:1/-1;grid-row:4}
  .pg-dl .dl-seg{width:100%}
  .pg-dl .dl-seg button{padding:0 8px;font-size:14px}
  .pg-dl .chk{padding-left:42px}
  .pg-dl .chk::before{left:17px}
  .pg-dl .dl-cta .btn{width:100%}
}
/* ==================== END PAGE BLOCK: DOWNLOAD ==================== */

/* ------------------------------------------------------------------
   PANELS / CALLOUTS
   ------------------------------------------------------------------ */
.panel{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(20px,3vw,28px)}
.panel.lit{background:var(--bg-2);border-color:var(--line-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}

.note,.chk{border-radius:var(--r-panel);padding:15px 18px;max-width:none;font-size:15px;line-height:1.6;color:var(--ink-2)}
.note{
  margin:16px 0;
  background:color-mix(in srgb,var(--warn) 6%,var(--bg-1));
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
}
.note strong{color:var(--ink)}
/* the check that closes a step */
.chk{
  margin-top:18px;
  background:color-mix(in srgb,var(--ok) 5%,var(--bg-1));
  border:1px solid color-mix(in srgb,var(--ok) 22%,transparent);
}
.chk .eyebrow{color:var(--ok);margin-bottom:8px}
.chk p{margin:0 0 8px;font-size:15px;color:var(--ink-2)}
.chk p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------
   SPEC LIST / ERRATA / KEYS - label column plus value, one rule per row
   ------------------------------------------------------------------ */
.spec,.errata,.keys{margin:0;border-top:1px solid var(--line)}
.spec .srow,.er,.kb{
  display:grid;grid-template-columns:minmax(140px,15rem) minmax(0,1fr);
  gap:6px 28px;padding:15px 0;border-bottom:1px solid var(--line);
}
.spec dt{font:600 12px/1.6 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.spec dd{margin:0;color:var(--ink-2);min-width:0}
.spec dd.m{font:13px/1.6 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.spec dd strong{color:var(--ink)}

.er{padding:18px 0}
.er .sym{font:600 15px/1.5 var(--sans);color:var(--ink)}
.er .fix{color:var(--ink-2);font-size:15px;line-height:1.6}

.kb{padding:12px 0;align-items:baseline}
.kb dt{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.kb dd{margin:0;color:var(--ink-2);font-size:15px}
.kb dt .sep{color:var(--ink-3);font:12px/1 var(--mono);padding:0 1px}
.cap{
  display:inline-block;border:1px solid var(--edge-ui);border-bottom-width:2px;border-radius:var(--r-ctl);
  background:var(--bg-2);color:var(--ink);padding:4px 8px;
  font:12px/1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.np{margin-left:6px;font:600 10.5px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}

/* value + copy button */
.val-act{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.val-act code{
  flex:1 1 17rem;min-width:0;background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-ctl);padding:8px 12px;font:12.5px/1.5 var(--mono);color:var(--ink);
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
p code,li code,dd code,.note code,.chk code{
  font-size:.875em;background:var(--bg-2);color:var(--ink);
  padding:2px 6px;border-radius:4px;border:1px solid var(--line-2);
  overflow-wrap:anywhere;word-break:break-word;
}
.file-i{font-family:var(--mono);font-size:.9em;color:var(--ink)}

/* ------------------------------------------------------------------
   STEPS - a real sequence, so numbered, on a rail
   ------------------------------------------------------------------ */
.steps{counter-reset:s;margin-top:8px}
.step{position:relative;padding:0 0 40px 56px;counter-increment:s}
.step::before{
  content:counter(s);
  position:absolute;left:0;top:-3px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--display);color:var(--ink);
  background:var(--bg-2);border:1px solid var(--edge-ui);
}
.step::after{content:"";position:absolute;left:16px;top:38px;bottom:6px;width:1px;background:var(--line-2)}
.step:last-child{padding-bottom:0}
.step:last-child::after{display:none}
.step > h4{margin-bottom:10px;font-size:18px}

/* ------------------------------------------------------------------
   DISCLOSURE
   ------------------------------------------------------------------ */
details{border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg-1);margin:14px 0}
details summary{
  cursor:pointer;padding:15px 18px;list-style:none;display:flex;align-items:center;gap:12px;
  font:600 15px/1.3 var(--ui);color:var(--ink);border-radius:var(--r-panel);
  transition:background-color var(--t-hover) var(--ease);
}
details summary::-webkit-details-marker{display:none}
details summary:hover{background:var(--bg-2)}
details summary::before{
  content:"";width:7px;height:7px;flex:0 0 auto;margin:0 2px;
  border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);
  transform:rotate(-45deg);transition:transform var(--t-state) var(--ease-out);
}
details[open] > summary::before{transform:rotate(45deg)}
details[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--r-panel) var(--r-panel) 0 0}
.dbody{padding:20px 18px}
.dbody > *:first-child{margin-top:0}
.dbody > *:last-child{margin-bottom:0}

/* ------------------------------------------------------------------
   ARTIFACTS / MAPS / ICONS
   ------------------------------------------------------------------ */
.artifact{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel);padding:20px 22px;margin:12px 0}
.artifact .ahead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.artifact .aname{margin:0;font:600 16px/1.35 var(--ui);color:var(--ink)}
.artifact .aspec{margin:7px 0 0;font:12px/1.6 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.artifact .aspec span{display:block}
.artifact .aget{margin-left:auto}
.artifact .fname{display:block;margin-top:12px;font:12px/1.5 var(--mono);color:var(--ink-3);overflow-wrap:anywhere}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}

.mapcard{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;align-items:center;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel);padding:20px;margin:12px 0;
}
.mapcard .thumb{position:relative;aspect-ratio:1;border-radius:var(--r-ctl);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.mapcard .thumb img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.mapcard .mhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mapcard h4{margin:0;font:700 21px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.005em}

.gxicon{display:block;flex:0 0 auto;width:44px;height:44px;border-radius:9px;
  background:url(/assets/gx.png) center/contain no-repeat}
.gxicon-sm{width:34px;height:34px}

/* ==================================================================
   PAGE BLOCK: REFERENCE PAGES  (/generals/first-run, /generals/keys,
   /generals/maps)
   Owned by those three pages. Every selector sits under main.refpage
   or one of its .ref-* classes, so nothing here reaches another page.
   ================================================================== */

/* A reference page is read mid-task, so the head is short: the title
   owns the left, the explanation starts level with it on the right,
   and the first answer starts inside the first screen. */
.refpage .hero h1{font-size:clamp(40px,5.2vw,72px);margin:0;max-width:none}
.refpage .wrap > section:first-child{padding-top:clamp(32px,4vw,48px)}
.ref-head .hero-in{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;
  gap:24px clamp(32px,5vw,72px);
  padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,5vw,64px);
}
.ref-head .lede{margin:0 0 16px;max-width:52ch}

/* --- first run ---------------------------------------------------- */
/* The platform switcher is the download page's segmented control, with
   the same values (.pg-dl .dl-seg), so the two pages a reader moves
   between choose a platform the same way: the chosen segment is a
   quiet raised fill, not a second ink button. site.js unhides it
   and selects the reader's OS; with no script it stays hidden and every
   panel below is on screen. */
.ref-first .seg{
  display:flex;gap:4px;width:max-content;max-width:100%;padding:4px;margin:0 0 12px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-panel);
}
.ref-first .seg .btn{flex:1 1 0;min-height:44px;padding:0 20px;border-color:transparent;font-size:14.5px;color:var(--ink-2)}
.ref-first .seg .btn:hover{color:var(--ink);background:var(--bg-2)}
.ref-first .seg .btn[aria-selected="true"],
.ref-first .seg .btn[aria-selected="true"]:hover{background:var(--bg-3);color:var(--ink);border-color:var(--edge-ui)}

.ref-pane{
  display:grid;grid-template-columns:minmax(180px,3fr) minmax(0,9fr);gap:28px clamp(28px,5vw,72px);
  padding:clamp(24px,3.5vw,44px);background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel);
}
.ref-pane[hidden]{display:none}
.ref-pane:focus-visible{border-radius:var(--r-panel)}
.ref-pane + .ref-pane{margin-top:12px}
.ref-panehead h2{font-size:clamp(30px,3.4vw,46px)}
.ref-panehead .fine{margin-top:12px}
.ref-pane .steps{margin:0}
/* step titles are read, not announced: sentence case */
.ref-pane .step h3{margin:3px 0 10px;font:650 19px/1.3 var(--ui);text-transform:none;letter-spacing:-.005em}
.ref-pane .step .fine{margin-top:10px}
.ref-pane .val-act{margin:4px 0 0}
/* the exact words the reader is looking for on their own screen */
.ref-ui{
  font:600 .9em/1 var(--ui);color:var(--ink);white-space:nowrap;
  padding:.18em .5em;border-radius:var(--r-ctl);background:var(--bg-2);border:1px solid var(--line-3);
}
.ref-back{margin:clamp(28px,4vw,40px) 0 0}

/* --- keys --------------------------------------------------------- */
/* Grouped columns, the action on the left and its keys on the right,
   the way an in-game controls screen reads. */
.ref-legend b{font:600 13px/1 var(--mono);color:var(--ink);padding:0 2px}
.ref-kgroups{columns:2 22rem;column-gap:clamp(40px,6vw,96px)}
.ref-kgroup{break-inside:avoid;margin:0 0 clamp(36px,4vw,52px)}
/* the section's own padding closes the list; no second gap under it */
.ref-kgroup:last-child{margin-bottom:0}
.ref-kgroup h2{margin:0 0 10px;font:800 var(--fs-h3)/1.15 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
.ref-keys .keys{border-top:0}
.ref-keys .kb{
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"act key";align-items:center;
  gap:6px 20px;padding:11px 0;border-bottom:0;border-top:1px solid var(--line);
}
.ref-keys .kb dt{grid-area:key;justify-content:flex-end}
.ref-keys .kb dd{grid-area:act}

/* --- maps --------------------------------------------------------- */
.ref-maps .hero{--art:min(500px,46vw)}
.ref-maps .hero-in{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.ref-maps .hero h1{margin-bottom:24px}
.ref-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;list-style:none;font:500 14px/1.3 var(--ui);color:var(--ink-2)}
.ref-key li{display:inline-flex;align-items:center;gap:8px}
.ref-sw{width:10px;height:10px;border-radius:50%;background:var(--c)}
.ref-maps .mapcard{
  grid-template-columns:clamp(200px,25vw,300px) minmax(0,1fr);align-items:start;
  gap:clamp(20px,3.5vw,48px);padding:clamp(16px,2vw,22px);
}
.ref-maps .mapcard .thumb img{inset:5%;width:90%;height:90%}
.ref-maps .mapcard .mhead{gap:10px 14px;margin:6px 0 0}
/* the name is a filename, so it keeps its exact case */
.ref-maps .mapcard h3{margin:0;font:800 clamp(24px,2.6vw,34px)/1 var(--display);text-transform:none;letter-spacing:-.015em}
.ref-maps .mapcard .aspec{margin:14px 0 16px;font:12.5px/1.7 var(--mono);color:var(--ink-3);max-width:none}
.ref-maps .mapcard .aspec span{display:block}
.ref-mact{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px}
.ref-mlink{font:500 14.5px/1.3 var(--ui);color:var(--ink-2);text-decoration:none}
.ref-mlink:hover{color:var(--ink)}
.ref-maps .val-act code{flex-basis:22rem}

@media (max-width:860px){
  .ref-maps .hero{--art:min(520px,92vw)}
  .ref-head .hero-in{grid-template-columns:1fr}
  .ref-pane{grid-template-columns:1fr}
  .ref-maps .mapcard{grid-template-columns:1fr}
  .ref-maps .mapcard .thumb{width:min(100%,280px)}
}
@media (max-width:680px){
  .ref-pane{padding:22px 16px}
  .ref-first .seg{width:100%}
  .ref-first .seg .btn{padding:0 8px;font-size:14px}
  .ref-maps .ref-mact .btn{width:100%}
}
/* ================ END PAGE BLOCK: REFERENCE PAGES ================ */

/* ------------------------------------------------------------------
   OFFERS (home, contact)
   ------------------------------------------------------------------ */
.offer{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:24px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--bg-1);margin-bottom:12px;
}
.offer .what{display:block;font:700 18px/1.25 var(--ui);color:var(--ink)}
.offer .detail{display:block;margin-top:8px;max-width:50ch;font:15px/1.6 var(--sans);color:var(--ink-2)}

/* ------------------------------------------------------------------
   HOME
   ------------------------------------------------------------------ */
/* Hero: the headline owns the left, the sentence and the action sit on
   its baseline to the right. Four elements, nothing under the button. */
.home-hero .hero-in{
  display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  grid-template-areas:"status status" "head side";
  align-items:end;column-gap:clamp(32px,5vw,72px);row-gap:clamp(28px,4vw,44px);
  padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(56px,7vw,96px);
}
.home-hero .status{grid-area:status;justify-self:start}
.home-hero h1{grid-area:head;margin:0;max-width:none}
.home-hero .side{grid-area:side;padding-bottom:.35em}
.home-hero .side .lede{margin-bottom:28px}
.home-hero .side p:last-child{margin:0}

/* Headline lines sit in their own clip boxes so they can rise into place.
   The padding gives the caps and the full stop room inside the clip. */
.lines > span{display:block;overflow:hidden;white-space:nowrap;padding:.05em 0 .07em;margin:-.05em 0 -.07em}
.lines > span > span{display:block}
/* the one crimson glyph on the page: the brand's dot, as a full stop */
.stop{color:var(--accent)}

/* the thesis, promoted from fine print: one lit sentence, the rest quiet */
.statement{padding:clamp(56px,7vw,96px) 0}
.statement p{
  margin:0;max-width:32ch;
  font:600 clamp(26px,3vw,42px)/1.16 var(--display);letter-spacing:-.012em;color:var(--ink-3);
  text-wrap:pretty;
}
.statement p span{color:var(--ink)}

/* Work: the project names set large, detail beside them */
.work{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(28px,5vw,72px);
  padding:clamp(32px,4vw,48px) 0;border-top:1px solid var(--line);
}
.work:last-child{padding-bottom:0}
.work-title{margin:0 0 20px;font:800 var(--fs-title)/.92 var(--display);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.work-body > p:first-child{color:var(--ink)}
.work-body .btn{margin-top:8px}
.orglink{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.orglink .logo{display:block;height:32px;width:auto;flex:0 0 auto}
.orglink .logo-zc{height:34px;width:34px;border-radius:8px}
.orglink .orgname,.orglink .orgurl{font:12.5px/1.4 var(--mono);color:var(--ink-3);transition:color var(--t-hover) var(--ease)}
.orglink:hover .orgname,.orglink:hover .orgurl{color:var(--ink)}

/* Timeline: a rail, current roles on filled nodes, the past on a hollow one */
.rail{list-style:none;margin:0;padding:0;max-width:880px}
.rail > li{
  position:relative;display:grid;grid-template-columns:minmax(96px,9rem) minmax(0,1fr);gap:8px 32px;
  padding:0 0 36px 28px;
}
.rail > li::before{
  content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 4px var(--bg);
}
.rail > li.past::before{background:var(--bg);border:1px solid var(--edge-ui);box-sizing:border-box}
.rail > li::after{content:"";position:absolute;left:4px;top:18px;bottom:-4px;width:1px;background:var(--line-2)}
.rail > li:last-child{padding-bottom:0}
.rail > li:last-child::after{display:none}
.rail .per{margin:0;font:12.5px/1.8 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.rail h3{margin:0 0 10px}
.rail .orglink{margin:2px 0 14px}

/* Hire: the address is the display element */
.mailline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 clamp(28px,4vw,44px)}
.mail-big{
  font:700 clamp(22px,4.4vw,58px)/1.1 var(--display);letter-spacing:-.015em;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line-3);text-decoration-thickness:2px;text-underline-offset:.16em;
  overflow-wrap:anywhere;
}
.mail-big:hover{text-decoration-color:var(--accent)}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.offers .offer{flex-direction:column;justify-content:space-between;margin:0}

/* ------------------------------------------------------------------
   LEGAL - long-form reading
   ------------------------------------------------------------------ */
.legal{max-width:74ch}
.legal h3{margin:40px 0 12px;font-size:20px}
.legal h4{margin:24px 0 8px}
.legal p,.legal li{color:var(--ink-2)}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px;max-width:68ch}
.legal li{margin-bottom:7px}
.legal .updated{font:12.5px/1.6 var(--mono);color:var(--ink-3);margin-bottom:30px}
.toc{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel);padding:20px 24px;margin:0 0 36px;max-width:46ch}
.toc .eyebrow{margin-bottom:12px}
.toc ol{margin:0;padding-left:18px}
.toc li{margin-bottom:6px;color:var(--ink-2)}

/* ==================================================================
   PAGE BLOCK: CONTACT + LEGAL  (/contact, /legal/*)
   Owned by those five pages. Every selector is a .ct-* class or sits
   under .lgdoc, so nothing here reaches another page.
   ================================================================== */

/* Contact hero: the headline across, then the sentence and the one
   action on a shared baseline. */
.ct-hero h1{max-width:none}
.ct-lead{
  display:grid;grid-template-columns:minmax(0,58ch) auto;justify-content:space-between;
  align-items:end;gap:28px clamp(32px,5vw,72px);
}
.ct-lead .lede{margin:0}
.ct-addr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-addr .copy{min-height:52px;padding:0 16px}

/* What I take on: one routing list, not three floating cards. Kind,
   what to put in the email, and the address pre-addressed for it. */
.ct-routes{list-style:none;margin:0;padding:0;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel)}
.ct-routes li{
  display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;align-items:center;
  gap:10px clamp(24px,4vw,48px);padding:26px 28px;
}
.ct-routes li + li{border-top:1px solid var(--line)}
.ct-routes h3{margin:0;font:700 18px/1.3 var(--ui);text-transform:none;letter-spacing:0}
.ct-routes p{margin:0;max-width:54ch;font-size:15px;line-height:1.6}
.ct-routes .btn{justify-self:end;min-width:13.5rem}
@media (max-width:1099px){
  .ct-routes li{grid-template-columns:minmax(0,1fr) auto}
  .ct-routes .btn{grid-column:2;grid-row:1 / 3}
}

/* The two statements of fact: the heading holds its place while the
   rows beside it scroll. */
@media (min-width:1100px){
  .ct-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,6vw,96px);align-items:start}
  .ct-split > .sec-head{position:sticky;top:92px;margin:0}
  .ct-split h2.display{font-size:clamp(34px,3.6vw,50px)}
  .ct-split .spec .srow{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr)}
}

/* Legal: the head, a rail (the four documents, then this one's
   sections), and the text. On a phone the rail sits between the head
   and the text as a switcher and a contents box. */
.lgdoc{padding-top:clamp(40px,6vw,72px);padding-bottom:var(--section)}
.lg-head{padding-bottom:clamp(32px,4vw,48px)}
.lg-head h1{font-size:clamp(46px,6.4vw,92px);margin:0 0 24px}
.lg-head .lede{margin:0 0 20px;max-width:60ch}
.lg-head .updated{margin:0;font:12.5px/1.6 var(--mono);color:var(--ink-3)}

.lg-rail{max-width:34rem}
.lgdoc .toc{max-width:none}
.lg-docs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 16px}
.lg-docs a{
  position:relative;display:block;padding:10px 14px;border-radius:var(--r-ctl);
  border:1px solid var(--line-2);text-decoration:none;
  font:500 14.5px/1.3 var(--ui);color:var(--ink-2);
  transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease);
}
.lg-docs a:hover{color:var(--ink);background:var(--bg-2)}
.lg-docs a[aria-current]{color:var(--ink);background:var(--bg-2);border-color:var(--line-3)}
/* the current document: the subnav's crimson mark, set vertically */
.lg-docs a[aria-current]::before{
  content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;
  border-radius:0 2px 2px 0;background:var(--accent);
}

.lgdoc .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.lgdoc .toc li{margin:0;counter-increment:toc}
.lgdoc .toc a{
  position:relative;display:grid;grid-template-columns:1.75rem minmax(0,1fr);padding:5px 0;
  font:500 14px/1.45 var(--ui);color:var(--ink-2);text-decoration:none;
  transition:color var(--t-hover) var(--ease);
}
.lgdoc .toc a::before{content:counter(toc);font:12px/1.7 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.lgdoc .toc a:hover{color:var(--ink)}

.lgdoc > .legal{max-width:70ch}
.lgdoc .legal h3{margin:56px 0 14px;padding-top:32px;border-top:1px solid var(--line);font-size:20px}
.lgdoc .legal > h3:first-of-type{margin-top:0}
.lgdoc .legal [id]{scroll-margin-top:88px}

@media (min-width:960px){
  .lgdoc{
    display:grid;grid-template-columns:13.5rem minmax(0,1fr);
    grid-template-areas:"rail head" "rail body";column-gap:clamp(48px,6vw,104px);
  }
  .lg-head{grid-area:head}
  .lgdoc > .legal{grid-area:body}
  .lg-rail{
    grid-area:rail;align-self:start;position:sticky;top:84px;
    max-height:calc(100dvh - 108px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding:6px 4px 4px 1px;
  }
  .lg-docs{grid-template-columns:1fr;gap:2px;margin:0 0 36px}
  .lg-docs a{padding:8px 14px;border-color:transparent}
  .lg-docs a[aria-current]{border-color:transparent}

  .lgdoc .toc{background:none;border:0;border-radius:0;padding:0;margin:0;max-width:none}
  .lgdoc .toc .eyebrow{padding-left:15px}
  .lgdoc .toc ol{border-left:1px solid var(--line-2)}
  .lgdoc .toc a{padding:6px 0 6px 14px}
  /* where you are in the document: an ink mark on the rail */
  .lgdoc .toc a::after{
    content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;
    background:var(--ink);transform:scaleY(0);transform-origin:50% 0;
  }
}
/* Which section is on screen, with no script: browsers that support
   scroll-target-group mark the link whose target is in view. Kept as
   its own rules, so a browser that does not know :target-current
   drops these and nothing else. */
.lgdoc .toc ol{scroll-target-group:auto}
@media (min-width:960px){
  .lgdoc .toc a:target-current{color:var(--ink)}
}
.lgdoc .toc a:target-current::after{transform:none}
@media (prefers-reduced-motion:no-preference){
  .lgdoc .toc a::after{transition:transform var(--t-state) var(--ease-out)}
}

@media (max-width:860px){
  .ct-lead{grid-template-columns:1fr}
}
@media (max-width:680px){
  .ct-routes li{grid-template-columns:1fr;padding:22px 20px}
  .ct-routes .btn{grid-column:auto;grid-row:auto;justify-self:stretch;min-width:0;margin-top:8px}
  .ct-addr .btn{flex:1 1 100%;font-size:15px;padding-left:16px;padding-right:16px}
  .ct-addr .copy{flex:1 1 100%;min-height:44px}
}
/* the phone nav wraps to two rows, so a jump lands lower */
@media (max-width:560px){
  .lgdoc .legal [id]{scroll-margin-top:124px}
}
/* ================= END PAGE BLOCK: CONTACT + LEGAL ================= */

/* ------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------ */
footer{border-top:1px solid var(--line);background:var(--bg)}
.foot-in{
  max-width:var(--wide);margin:0 auto;padding:56px var(--pad) 40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:32px;
}
.foot-col h5{font:600 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.foot-col a{display:block;padding:5px 0;font-size:14px;color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.foot-col a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{
  max-width:var(--wide);margin:0 auto;padding:20px var(--pad) 44px;
  /* the rule spans the content, not the padding */
  background:linear-gradient(var(--line),var(--line)) var(--pad) 0/calc(100% - 2 * var(--pad)) 1px no-repeat;
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
}
.foot-bottom p{margin:0;font:12px/1.6 var(--mono);color:var(--ink-3);max-width:72ch}

/* ------------------------------------------------------------------
   MOTION
   One orchestrated entrance per page, then stillness. Every keyframe
   below is from{} only with fill "both": the element's own style IS the
   finished state, so a killed or unsupported animation leaves the page
   complete. Movement lives inside no-preference; under reduced motion
   only the colour transitions above remain.
   ------------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes line-up{from{transform:translateY(104%)}}
@keyframes light-on{from{opacity:0;transform:scale(.6)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.94);filter:blur(1.5px)}}
@keyframes bar-in{from{transform:scaleY(0)}}
@keyframes radar-mask{from{--sweep:0deg}}
@keyframes radar-beam{
  0%{opacity:1;rotate:0deg}
  88%{opacity:1}
  100%{opacity:0;rotate:360deg}
}

@media (prefers-reduced-motion:no-preference){
  /* entrance: .rise with style="--i:N" for its place in the sequence */
  .rise{animation:rise var(--t-enter) var(--ease-out) both;animation-delay:calc(var(--i,0) * var(--stagger))}
  .lines > span > span{animation:line-up 560ms var(--ease-out) both;animation-delay:calc(var(--i,0) * var(--stagger))}
  .lines > span:nth-child(2) > span{--i:1}
  .lines > span:nth-child(3) > span{--i:2}
  .lines .stop{display:inline-block;animation:light-on var(--t-state) var(--ease-out) 440ms both}

  /* press */
  .btn:active,.copy:active,.nav-links a:active{transform:scale(.97)}

  /* state changes */
  .copy[data-state="done"]{animation:pop var(--t-state) var(--ease-out)}
  .is-live{animation:fade var(--t-state) var(--ease) both}
  .plat.lit::before{animation:bar-in var(--t-disclose) var(--ease-out) 120ms both}
  .pane:not([hidden]){animation:fade var(--t-hover) var(--ease) both}

  /* GeneralsX heroes: the radar comes online once, then the blip lights */
  .hero-art img{
    -webkit-mask-image:conic-gradient(#000 var(--sweep),transparent 0);
    mask-image:conic-gradient(#000 var(--sweep),transparent 0);
    animation:radar-mask 1100ms var(--ease-in-out) 240ms both;
  }
  .hero-sweep{animation:radar-beam 1100ms var(--ease-in-out) 240ms both}
  .hero-art .blip{animation:light-on var(--t-state) var(--ease-out) 1300ms both}

  /* disclosure height, where the browser can animate to auto */
  :root{interpolate-size:allow-keywords}
  details::details-content{
    block-size:0;overflow:clip;
    transition:block-size var(--t-disclose) var(--ease-in-out),content-visibility var(--t-disclose) allow-discrete;
  }
  details[open]::details-content{block-size:auto}

  /* a trailing arrow nudges on hover; nothing else in a row moves */
  @media (hover:hover) and (pointer:fine){
    .arr{display:inline-block;transition:transform var(--t-hover) var(--ease-out)}
    a:hover .arr{transform:translateX(3px)}
  }
}

/* Reveal: [data-reveal="id"] opens #id in place (site.js). Collapsed only
   once the script has armed it, so with no script the panel is just there. */
.reveal.is-armed{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden}
.reveal.is-armed.is-open{grid-template-rows:1fr;opacity:1;visibility:visible}
.reveal.is-armed > *{min-height:0;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .reveal.is-armed{transition:grid-template-rows var(--t-disclose) var(--ease-in-out),opacity var(--t-disclose) var(--ease),visibility 0s var(--t-disclose)}
  .reveal.is-armed.is-open{transition:grid-template-rows var(--t-disclose) var(--ease-in-out),opacity var(--t-disclose) var(--ease),visibility 0s}
}

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width:860px){
  .hero{--art:min(520px,92vw)}
  .hero-art,.hero-sweep{right:-30%;opacity:.35}
  .hero-sweep{opacity:0}
  .hero-copy{max-width:none}
  .home-hero .hero-in{grid-template-columns:1fr;grid-template-areas:"status" "head" "side"}
  .home-hero .side{padding-bottom:0}
  .work{grid-template-columns:1fr}
  .work-title{margin-bottom:14px}
  .offers{grid-template-columns:1fr}
  .mapcard{grid-template-columns:1fr}
  .mapcard .thumb{max-width:220px}
}
@media (max-width:680px){
  .spec .srow,.er,.kb{grid-template-columns:1fr}
  .rail > li{grid-template-columns:1fr;gap:4px}
  .nav-in{min-height:56px;gap:8px}
  .nav-links a{padding:8px 9px;font-size:14px}
  .brand{font-size:15px}
  .plat{grid-template-columns:20px minmax(0,1fr);row-gap:12px}
  .plat .pact{grid-column:1/-1}
  .plat .pact .btn{width:100%}
  .artifact .aget{margin-left:0;width:100%}
  .artifact .aget .btn{width:100%}
  .step{padding-left:48px}
  .step::before{width:30px;height:30px;font-size:13px}
  .step::after{left:15px;top:34px}
  .offer{flex-direction:column}
  .offer .btn{width:100%}
  .ea-top{text-align:left;font-size:12px}
  /* the subnav scrolls sideways: say so with a fade at the edge */
  .subnav-in{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
/* Nav on a phone: brand and the action on one line, links beneath. */
@media (max-width:560px){
  .nav-in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;row-gap:4px}
  .nav-links{flex-basis:100%;gap:0;margin-left:-9px}
  .nav-links .nav-cta{position:absolute;top:10px;right:var(--pad);margin:0;padding:9px 13px}
  .nav-in{position:relative}
}

@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000}
  .nav,.subnav,.hero-glow,.hero-art,.hero-sweep,.copy,.skip{display:none}
  details > summary{display:none}
  .dbody{padding:0}
  details:not([open]) .dbody{display:block}
  .reveal.is-armed{display:block;opacity:1;visibility:visible}
  a{color:#000}
}

/* ==================================================================
   PAGE BLOCK: GENERALSX OVERVIEW  (/generals)
   Owned by that page. Every selector is a .gx-* class or sits under
   one. Nothing here moves on its own: the page's one entrance is the
   shared hero (.lines, .rise, the radar pass and the blip).
   ================================================================== */

/* once /api/build answers, the commit is a hash: lowercase mono, not an
   uppercase label. The static fallback wording stays part of the label. */
.gx-build #live-build.is-live{font:500 12.5px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-2)}

/* What it is, and is not: one frame split down the middle. The "not"
   half sits one surface deeper, so the two read as a pair, not as cards. */
.gx-isnot{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;
}
.gx-col{padding:clamp(22px,3vw,36px)}
.gx-col + .gx-col{border-left:1px solid var(--line)}
.gx-not{background:var(--bg-1)}
.gx-col h3{margin:0 0 var(--s-2)}
.gx-col ul{list-style:none;margin:0;padding:0}
.gx-col li{padding:var(--s-4) 0 0;margin-top:var(--s-4);border-top:1px solid var(--line);color:var(--ink-2);max-width:60ch}
.gx-col li:first-child{border-top:0;margin-top:0}
.gx-unsigned{margin-top:12px}

/* Seats: the four platforms as one lobby bar. Hairlines are the gaps. */
.gx-seats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;
}
.gx-seats li{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);
  min-height:clamp(150px,13vw,184px);padding:clamp(18px,2.2vw,26px);background:var(--bg-1);
}
.gx-os{font:800 clamp(26px,2.9vw,40px)/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.gx-spec{font:var(--fs-meta)/1.5 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.gx-note{font:13.5px/1.5 var(--sans);color:var(--ink-2);max-width:30ch}
.gx-seats .tag{margin-top:auto}
/* a closed slot: explicit tokens and a faint hatch, never opacity */
.gx-seats li.gx-off{
  background:var(--bg) repeating-linear-gradient(135deg,transparent 0 9px,var(--bg-1) 9px 10px);
}
.gx-off .gx-os{color:var(--ink-2)}
.gx-next-up{margin-top:var(--s-3)}

/* The join check: prose on the left, the two outcomes on the right */
.gx-id{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s-6) clamp(32px,5vw,72px);align-items:start;margin-top:clamp(48px,6vw,80px);
}
.gx-id-copy h3{margin-bottom:var(--s-3)}
.gx-id-copy .btn{margin-top:var(--s-2)}
.gx-join{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gx-case{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-panel);padding:18px 20px 20px}
.gx-refused{border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.gx-when{margin:0 0 12px;font:600 14px/1.3 var(--ui);color:var(--ink)}
.gx-case dl{margin:0;font:13px/1.4 var(--mono)}
.gx-case dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.gx-case dt{color:var(--ink-2)}
.gx-case dd{margin:0}
.gx-same{color:var(--ok)}
.gx-diff{color:var(--warn)}
.gx-verdict{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-2);font:600 14.5px/1.4 var(--ui);color:var(--ink)}
.gx-join figcaption{grid-column:1/-1;font:13.5px/1.6 var(--sans);color:var(--ink-3);max-width:60ch}

/* Once it runs: each row is one link, stretched over the row */
.gx-next{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gx-next li{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(150px,15rem) minmax(0,1fr) auto;align-items:baseline;gap:6px 32px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.gx-next h3{margin:0}
.gx-next p{margin:0;max-width:60ch}
.gx-next a{
  justify-self:end;white-space:nowrap;text-decoration:none;
  font:600 14.5px/1 var(--ui);color:var(--ink-2);transition:color var(--t-hover) var(--ease);
}
.gx-next a::after{content:"";position:absolute;inset:0}
.gx-next li::before{
  content:"";position:absolute;inset:0 calc(-1 * var(--s-4));z-index:-1;border-radius:var(--r-panel);
  background:var(--bg-1);opacity:0;transition:opacity var(--t-hover) var(--ease);
}
.gx-next li:hover::before{opacity:1}
.gx-next li:hover a{color:var(--ink)}
/* the ring goes round the whole row; without :has the link keeps its own */
@supports selector(:has(a)){
  .gx-next li:has(a:focus-visible){outline:2px solid var(--accent-hi);outline-offset:4px;border-radius:2px}
  .gx-next a:focus-visible{outline:0}
}

@media (max-width:860px){
  .gx-isnot{grid-template-columns:1fr}
  .gx-col + .gx-col{border-left:0;border-top:1px solid var(--line)}
  .gx-seats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-id{grid-template-columns:1fr}
}
@media (max-width:680px){
  .gx-next li{grid-template-columns:1fr;gap:8px}
  .gx-next a{justify-self:start;margin-top:6px}
}
@media (max-width:520px){
  .gx-join{grid-template-columns:1fr}
}
@media (hover:none){
  .gx-next li:hover::before{opacity:0}
}
/* ============ END PAGE BLOCK: GENERALSX OVERVIEW ============ */