/**
 * Rush Delivery 3D — support & legal site.
 *
 * These pages used to be five copies of the same inline <style>: system sans on
 * a blue-grey wash, indistinguishable from any other app's policy template. A
 * player who taps "Privacy" inside a chunky voxel arcade game should not land
 * on something that looks like a different company wrote it.
 *
 * So this file carries the game's own tokens (src/styles.css) rather than
 * inventing a second design language:
 *   - Baloo 2 for display, system stack for body — the same split the game uses
 *   - the same --outline navy, --stroke 4px, --lift 6px extrusion
 *   - the same sky / asphalt / gold palette
 *
 * Signature treatment: every panel is a physical extruded card — hard navy
 * outline sitting on a solid bottom edge, exactly like an in-game button — and
 * sections are divided by road lane dashes instead of hairline rules.
 *
 * Single-theme by design, matching the game: a fixed-sun arcade world has no
 * dark variant, so contrast is fixed and verified rather than theme-dependent.
 */

/* ========================================================================== *
 * Fonts — self-hosted, same files the game ships (SIL OFL 1.1, fonts/LICENSE)
 * ========================================================================== */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================================================== *
 * Tokens — lifted from the game so the two never drift
 * ========================================================================== */

:root {
  color-scheme: light;

  --outline: #1d2330;
  --stroke: 4px;
  --lift: 6px;
  --radius: 18px;
  --radius-lg: 24px;

  --ink: #1d2330;
  --ink-body: #333a4d;
  --ink-soft: #5b6880;

  --panel: #ffffff;
  --panel-sunk: #e8eef5;
  --paper: #f2f7fb;

  --info: #38a8f0;
  --info-edge: #1f79b8;
  --buy: #ffc21f;
  --buy-edge: #d99500;
  --danger: #ff5a4d;
  --danger-edge: #c9342a;

  --sky-top: #bfefff;
  --sky-bot: #8fd8f5;
  --road: #454a59;
  --road-alt: #3b4050;

  --font-display: "Baloo 2", ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px;

  --wrap: 720px;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
}

/* ========================================================================== *
 * Base
 * ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  /* 16px, not the 15px this site used to ship. Policy text is the one thing on
     a phone people actually read end to end. */
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

/* Reading column clears the header band. The first heading in the column brings
   its own top margin, so it is zeroed rather than doubled. */
main.wrap { padding-top: var(--s8); }
main.wrap > :first-child { margin-top: 0; }

/* ========================================================================== *
 * Typography — display face does the headings, body face does the reading
 * ========================================================================== */

h1, h2, h3, .wordmark {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 var(--s2);
}

h2 {
  font-size: clamp(21px, 4.4vw, 25px);
  font-weight: 700;
  margin: var(--s8) 0 var(--s3);
}

/* The numbered policy sections carry their own count, so the marker is part of
   the heading rather than a decorative chip beside it. */
h2 .n {
  color: var(--info-edge);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: var(--s6) 0 var(--s2);
}

p, li { margin: 0 0 var(--s4); }
li { margin-bottom: var(--s2); }
ul { padding-left: 1.25em; }
strong { color: var(--ink); font-weight: 650; }

a {
  color: var(--info-edge);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ink); }

/* ========================================================================== *
 * Header band — asphalt with lane markings, the game's own street
 * ========================================================================== */

.band {
  background: var(--road);
  border-bottom: var(--stroke) solid var(--outline);
  position: relative;
  overflow: hidden;
}

/* The lane dashes are the site's through-line: they head the page here and
   divide sections further down. Drawn, not an image request. */
.band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    #f5f7fa 0 34px,
    transparent 34px 68px
  );
  opacity: .85;
}

.band .wrap { padding-block: var(--s8) var(--s10); }

.band h1, .band .wordmark { color: #fff; }
.band .meta { color: #c3ccd8; }

/* Page headers on the document pages: shallower than the home hero, and the
   title sits left rather than centred. */
.band--doc .wrap { padding-block: var(--s6) var(--s8); }

.backlink {
  display: inline-block;
  margin-bottom: var(--s3);
  color: #c3ccd8;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.backlink:hover { color: #fff; text-decoration: underline; }

.meta {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* ========================================================================== *
 * Home hero — wordmark, off-centre, on the asphalt
 * ========================================================================== */

.hero .wrap {
  padding-block: clamp(40px, 9vw, 64px) clamp(44px, 10vw, 72px);
}

.wordmark {
  font-size: clamp(38px, 11vw, 68px);
  font-weight: 800;
  letter-spacing: .5px;
  line-height: .98;
  margin: 0 0 var(--s3);
  text-shadow: 0 4px 0 rgba(0, 0, 0, .28);
}
.wordmark .a { color: var(--buy); display: block; }
.wordmark .b { color: var(--sky-top); display: block; }

.tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 3.6vw, 20px);
  font-weight: 600;
  color: #e4eaf1;
}

/* ========================================================================== *
 * Cards — the signature extruded panel
 * ========================================================================== */

.card {
  background: var(--panel);
  border: var(--stroke) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 0 var(--lift) 0 var(--outline);
  padding: var(--s5);
  margin: 0 0 calc(var(--s5) + var(--lift));
}

/* Callout: same physical card, tinted, used for the "in short" summaries. */
.card--note {
  background: #e8f5ff;
  border-color: var(--info-edge);
  box-shadow: 0 var(--lift) 0 var(--info-edge);
}
.card--note p:last-child,
.card p:last-child { margin-bottom: 0; }

.card--warn {
  background: #fff1ef;
  border-color: var(--danger-edge);
  box-shadow: 0 var(--lift) 0 var(--danger-edge);
}

.card h2 { margin-top: 0; }

/* ========================================================================== *
 * Link list — the home page's route cards. Deliberately NOT a uniform grid:
 * privacy and deletion are what the stores and players come for, so they get
 * the full-width lead treatment and the rest sit in a lighter pair.
 * ========================================================================== */

.routes { list-style: none; padding: 0; margin: 0; }

.routes li { margin: 0 0 calc(var(--s3) + var(--lift)); }

.routes a {
  display: block;
  padding: var(--s4) var(--s5);
  background: var(--panel);
  border: var(--stroke) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 0 var(--lift) 0 var(--outline);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.routes a span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Presses down into its own shadow, like every button in the game. */
.routes a:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--outline); }
.routes a:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--outline); }

.routes .lead a { background: var(--buy); border-color: var(--buy-edge); box-shadow: 0 var(--lift) 0 var(--buy-edge); }
.routes .lead a span { color: #7a5300; }
.routes .lead a:hover { box-shadow: 0 8px 0 var(--buy-edge); }
.routes .lead a:active { box-shadow: 0 0 0 var(--buy-edge); }

/* ========================================================================== *
 * Action button — mailto CTAs
 * ========================================================================== */

.btn {
  display: inline-block;
  padding: var(--s3) var(--s6);
  background: var(--info);
  border: var(--stroke) solid var(--info-edge);
  border-radius: var(--radius);
  box-shadow: 0 var(--lift) 0 var(--info-edge);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  margin-bottom: var(--lift);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 0 var(--info-edge); }
.btn:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--info-edge); }

.btn--danger { background: var(--danger); border-color: var(--danger-edge); box-shadow: 0 var(--lift) 0 var(--danger-edge); }
.btn--danger:hover { box-shadow: 0 8px 0 var(--danger-edge); }
.btn--danger:active { box-shadow: 0 0 0 var(--danger-edge); }

/* ========================================================================== *
 * Lane rule — section divider, the hero's dashes reused at reading scale
 * ========================================================================== */

.lane {
  height: 6px;
  border: 0;
  margin: var(--s8) 0;
  background: repeating-linear-gradient(
    90deg,
    var(--outline) 0 22px,
    transparent 22px 44px
  );
  opacity: .28;
}

/* ========================================================================== *
 * Table — the provider list. Bordered like a card, not a spreadsheet.
 * ========================================================================== */

.table-scroll { overflow-x: auto; margin-bottom: var(--s5); }

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 420px;
  font-size: 15px;
  border: 3px solid var(--outline);
  border-radius: 14px;
  overflow: hidden;
}
th, td { padding: 10px 13px; text-align: left; vertical-align: top; border-bottom: 2px solid #dbe3ec; }
tr:last-child td { border-bottom: 0; }
th {
  background: var(--panel-sunk);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
td { background: var(--panel); }

/* ========================================================================== *
 * Footer
 * ========================================================================== */

.foot {
  border-top: var(--stroke) solid var(--outline);
  background: var(--panel-sunk);
  padding: var(--s6) var(--s5);
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.foot nav { margin-bottom: var(--s2); }
.foot nav a { margin: 0 8px; white-space: nowrap; }

/* ========================================================================== *
 * Access & output
 * ========================================================================== */

:where(a, .btn):focus-visible {
  outline: 3px solid var(--outline);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* Policy and terms get printed and filed. Strip the street, keep the words. */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { background: #fff; border-bottom: 1pt solid #000; }
  .band::after, .lane, .backlink, .foot nav { display: none; }
  .band h1, .band .wordmark { color: #000; }
  .band .meta { color: #333; }
  .card { box-shadow: none; border: 1pt solid #000; break-inside: avoid; }
  a { color: #000; }
}