/*
 * DOWNLOAD PAGE — spine skin.
 *
 * The download flow is the one page the whole site exists to serve, and it is a
 * LIVE FLOW: 986 lines of JS bound to 34 element ids, [data-i18n], [data-language]
 * and [data-platform-choice]. Restructuring that markup to match the other pages
 * would risk the funnel to gain nothing a stylesheet cannot give.
 *
 * So this file changes TOKENS, not rules. download.css already routes almost
 * everything through custom properties (93 var() uses against a handful of
 * hard-coded hex), so re-pointing those properties at the spine's palette
 * re-skins the page without touching a single selector the flow depends on.
 *
 * Load order matters: base.css (tokens + faces) -> download.css (the flow) ->
 * this file (the reconciliation).
 *
 * WHAT THIS FIXES, beyond palette drift: download.css leads its font stack with
 * -apple-system, so the page the funnel lands on has been rendering in SF Pro /
 * Segoe while every other page renders in Assistant. Same brand, different
 * typeface, on the most important page. That is corrected here.
 *
 * NOT FIXED HERE, and it cannot be: this page loads
 * https://accounts.google.com/gsi/client. Google Sign-In is a functional
 * dependency of the flow, not an asset choice, so the site's zero-external-URL
 * rule genuinely does not hold on this page. Every OTHER page still holds it.
 * Stated rather than quietly excepted.
 */

:root {
  /* re-point download.css's own tokens at the spine */
  --canvas: var(--ground);          /* was #f7f6f3, a warm grey beside the spine's cool one */
  --surface: var(--paper);
  --ink: #0c2340;                   /* already identical — pinned so it stays that way */
  --ink-soft: #2c3448;
  /* --muted is deliberately NOT changed. download.css uses #41566d, which is
     7.56:1 on white — better than the spine's own --muted (#6a6e75, 5.12:1) and
     better than the value I first reached for (#55607a, 6.29:1). Measured before
     changing it, which is the only reason this line still says #41566d: the
     "harmonise everything" instinct would have quietly lowered contrast on the
     page the whole funnel lands on. Palette consistency does not outrank legibility. */
  --muted: #41566d;
  --line: #e6e9ee;
  --line-strong: #ccd3dd;
  --accent: var(--deep);
  /* #0369a1 already passes AA (white on it is 5.93:1). --deep is 7.56:1 and is
     the colour every other page uses for its primary control, so this is an
     alignment that also happens to gain contrast — not a fix for a failure. */
  --action: var(--deep);
  --action-hover: #05405f;
  --soft: #eaf2f8;
  --shadow: var(--sh-3);
}

/* The brand face, on the page that matters most. */
body {
  font-family: 'Assistant', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  background: var(--paper);
}

/* The few colours download.css hard-codes, brought along so the skin is complete
   rather than nearly complete. */
[style*="#0369a1"], .stage a { color: var(--deep); }

/* Header and footer, matched to the other pages. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
}
.language-switch { display: flex; gap: var(--s1); }
.language-switch button {
  min-width: 44px; min-height: 44px; padding-inline: var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--muted); border-radius: var(--r-control);
}
.language-switch button[aria-pressed='true'] { color: var(--ink); font-weight: 700; }
.language-switch button:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

footer { border-top: 1px solid var(--line); padding-block: var(--s4) var(--s7); }
footer a {
  color: var(--muted); text-decoration: none;
  min-height: 44px; min-width: 44px; padding-inline: var(--s2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-control);
}
footer a:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }