/*
  winIQ — the Industry design system, as delivered in
  docs/design/winIQ web design .zip (2 Oct 2026).

  This file is the whole look. index.html, privacy.html, terms.html and
  delete-account.html all load it, which is the only reason it is a separate
  file at all: four inline copies of the same tokens drift, and the first
  symptom is a legal page that no longer looks like the product.

  TWO DELIBERATE DEPARTURES FROM THE DELIVERED CSS
  ────────────────────────────────────────────────
  1. No color-mix(). The source used it for every divider and muted text.
     color-mix() needs Chrome 111 / Safari 16.2 (both 2023). CLAUDE.md §7
     Rule 0 sets the floor at a mid-range Android, where an older WebView is
     ordinary — and the failure mode is not a fallback, it is an invalid
     declaration: dividers vanish and muted text inherits black. Every one of
     those mixes was "N% of a colour over transparent", so each is written
     here as the plain rgba() it computes to. Same pixels, no version floor.

  2. Only the classes this site uses. The delivered file carried the whole
     component library — tables, dialogs, segmented controls, radios. Four
     static pages do not need 430 lines of CSS for components none of them
     render.

  Fonts are Barlow and Barlow Condensed, latin subsets lifted from the design
  bundle and self-hosted. See fonts/README.md: no third-party request means
  no Google Fonts link, because PRIVACY.md says this site makes none.
*/

/* ── fonts ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Barlow-400.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Barlow-500.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Barlow-700.woff2") format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/BarlowCondensed-600.woff2") format('woff2');
}

/* ── tokens ────────────────────────────────────────────────────────────── */

:root {
  /*
    Light only, and declared so. The delivered design has no dark palette —
    its dark passages are two full-bleed accent-900 sections, not a theme.
    Without this line a browser in dark mode force-darkens form controls
    against a #f2f2f3 page, which is how you get grey-on-grey inputs on the
    delete-account form. An approved dark palette is tasks.md T58.
  */
  color-scheme: light;

  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;

  /* was color-mix(in srgb, #1d1f20 16%, transparent) */
  --color-divider: rgba(29, 31, 32, .16);
  --color-hairline: rgba(29, 31, 32, .08);
  --color-muted: rgba(29, 31, 32, .55);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-700: #5d5d60;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;

  --radius-md: 4px;

  --shadow-md: 0 3px 10px rgba(43, 43, 45, .16);

  /* The page gutter. 24px is the design's; 16px below 480px keeps the
     104px hero headline off the bezel on a 360dp screen. */
  --gutter: 24px;
  --measure: 1240px;
}

@media (max-width: 479px) {
  :root { --gutter: 16px; }
}

/* ── base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }

img { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: rgba(89, 128, 166, .3); }

.text-muted { color: var(--color-muted); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* The skip link. Present on every page: the landing page's nav is five stops
   before the headline, and a keyboard user should not have to walk them. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--color-accent-900); color: var(--color-neutral-100);
}
.skip:focus { left: 0; }

/* ── blueprint frame ───────────────────────────────────────────────────── */
/*
  The registration marks at each corner. They are the signature of this
  system: every object is a wireframe part, square and hairlined, with its
  corners called out the way a drawing calls out a datum.
*/

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint > .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: var(--color-muted);
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  /* 44px is the floor Rule 0 sets for a touch target, and these are the
     only controls on the site. */
  min-height: 44px;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--color-bg); }
.btn-secondary:hover { background: rgba(29, 31, 32, .07); color: var(--color-text); }
.btn-secondary:active { background: rgba(29, 31, 32, .14); }

/* ── tags ──────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }

/* ── layout helpers ────────────────────────────────────────────────────── */

.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }

/* The bordered grid. Used for the three steps, the ten categories and the
   three build notes: one hairline cage, cells that reflow by min-width. */
.cage {
  display: grid;
  border-top: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
}
.cage > * {
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── document pages ────────────────────────────────────────────────────── */
/*
  privacy.html, terms.html and delete-account.html. They were built before the
  Industry design system arrived, each with its own inline indigo palette and
  Space Grotesk / Manrope. The words are unchanged; only the shell is, so that
  the policy a player reaches from the footer still looks like the product
  they came from.
*/

:root {
  /*
    Outside the delivered ramps on purpose: the system has no danger role, and
    the privacy and terms pages each carry a warning box that has to read as
    one. #b3261e on #f2f2f3 is 6.0:1, so it carries text as well as a border.
  */
  --color-danger: #b3261e;
}

.doc-header { border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.doc-header-inner { min-height: 64px; display: flex; align-items: center; }

.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
  font-size: 17px;
  line-height: 1.65;
}
.doc h1 { font-size: clamp(34px, 7vw, 52px); text-transform: uppercase; margin: 0 0 8px; }
.doc h2 { font-size: clamp(23px, 4vw, 30px); text-transform: uppercase; margin: 48px 0 12px; }
.doc h3 { font-size: clamp(19px, 3vw, 23px); margin: 32px 0 8px; }
.doc p { margin: 0 0 16px; }
.doc .updated { color: var(--color-neutral-700); font-size: 15px; margin: 0 0 32px; }
.doc .lede { font-size: 19px; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin: 6px 0; }

.doc .scroll { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.doc th, .doc td {
  text-align: left; padding: 12px 14px; vertical-align: top;
  border-bottom: 1px solid var(--color-hairline);
}
.doc th { font-weight: 700; }
.doc thead th {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
}

.doc .callout, .doc .warn {
  border: 1px solid var(--color-danger);
  padding: 16px 20px; margin: 24px 0;
}
.doc .callout strong, .doc .warn strong { color: var(--color-danger); }
.doc .callout p:first-child, .doc .warn p:first-child { margin-top: 0; }
.doc .callout p:last-child, .doc .warn p:last-child { margin-bottom: 0; }

.doc > footer {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--color-divider);
  font-size: 15px; color: var(--color-neutral-700);
}
.doc > footer p { margin: 0 0 8px; }