/* Warpling site shell: the Server Kit's look (dark, blueprint grid, Pixelify display, blocky bevels) for
   every page. Home links it as its base; support, privacy, /j/ and 404 link it AFTER their own <style>,
   so the tokens below re-skin their content styles without touching the text. /qr/ keeps its own sheet.
   Palette: apps/warpling launchkit.yml. Bump ?v= on every <link> after a change. */
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/PixelifySans.woff2?v=1") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Figtree.woff2?v=1") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #08101B; --card: #121E2E; --raised: #1A2839; --ring: #5B9BD5; --navy: #1E3A5F;
  --sky: #0EA5E9; --amber: #F9B227; --grass: #4ADE80; --white: #EAEFF5; --muted-c: #9CA9BA; --soft: #C6D0DE;
  --pixel: "Pixelify Sans", "Geist", system-ui, sans-serif;
  /* The older pages' token names, mapped onto the palette above. */
  --bg: var(--ink); --surface: var(--card); --border: var(--raised); --border-strong: #2B3E57;
  --text: var(--soft); --text-heading: var(--white); --text-muted: #A9B5C5; --text-subtle: #8B99AC;
  --primary: #7DD3FC; --primary-fg: var(--ink); --accent: var(--amber); --link: #7DD3FC; --focus-ring: var(--amber);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
body { background-color: var(--ink); color: var(--soft);
  background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: 24px 24px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber); color: var(--ink); }

/* Top bar: Dusk + the pixel wordmark, as on /qr/ */
.topbar { width: min(1180px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 22px;
  padding: 18px 0; font-weight: 600; }
.topbar .home { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.topbar .home img { width: 34px; height: 34px; image-rendering: pixelated; }
.topbar .home span { font: 400 21px/1 var(--pixel); }
.topbar .sp { flex: 1; }
.topbar a.l { color: var(--muted-c); text-decoration: none; font-size: 15px; }
.topbar a.l:hover, .topbar a.l[aria-current] { color: var(--white); }
.topbar a.cta { font: 600 14px/1 var(--sans); color: var(--ink); background: var(--sky); text-decoration: none;
  padding: 10px 14px; border-radius: 8px; box-shadow: inset 0 -3px 0 #0369A1; }
.topbar a.cta:hover { background: #38BDF8; }
@media (max-width: 640px) { .topbar { gap: 14px; } .topbar a.cta { display: none; } }
@media (max-width: 420px) { .topbar .home span { display: none; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ring); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--sky); box-shadow: 8px 0 0 var(--amber);
  margin-right: 8px; border-radius: 0; }

/* Buttons with a pressed-block bevel */
.btn { font: 600 15px/1.2 var(--sans); border-radius: 10px; padding: 12px 18px; border: 2px solid var(--raised);
  background: var(--raised); color: var(--white); display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; min-height: 46px; box-shadow: inset 0 -4px 0 #0005; }
.btn:hover { border-color: #2B3E57; }
.btn.p { background: var(--sky); border-color: var(--sky); color: var(--ink); box-shadow: inset 0 -4px 0 #0369A1; }
.btn.p:hover { background: #38BDF8; border-color: #38BDF8; }
.btn.a { background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: inset 0 -4px 0 #A86F05; }
.btn.a:hover { background: #FBC24F; border-color: #FBC24F; }

/* Official store badges, unmodified. Google's PNG carries its own clear space (41 px of 250 each side). */
.badges { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.badges .gp a { display: block; margin-left: -10px; }
.badges .gp img { height: 64px; width: auto; display: block; }
.badges .as img { height: 44px; width: auto; display: block; }
.badges .soon { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.2 var(--sans); color: var(--muted-c);
  border: 2px dashed #2B3E57; border-radius: 10px; padding: 9px 13px; }
.badges .soon b { color: var(--white); font-weight: 600; }

/* Footer */
.foot-f { width: min(1180px, 100% - 32px); margin: 72px auto 0; color: var(--muted-c); font-size: 13px;
  padding: 36px 0 64px; border-top: 2px solid var(--raised);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-f p { margin: 0; }
.foot-f nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.foot-f a { color: var(--muted-c); text-decoration: none; }
.foot-f a:hover { color: var(--white); }

/* Document pages (support, privacy, /j/, 404): pixel headings, block panels. */
.doc-head h1 { font: 400 clamp(34px, 5vw, 52px)/1.02 var(--pixel); letter-spacing: 0; color: var(--white); }
.legal h2 { font: 400 26px/1.2 var(--pixel); letter-spacing: 0; color: var(--white); }
.legal h2::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--amber);
  margin-right: 12px; vertical-align: 4px; box-shadow: 0 -2px 0 #FBC24F inset; }
.legal strong { color: var(--white); }
.legal a { color: var(--link); }
.legal .table-wrap, .doc-meta, .policy-toc { border-width: 2px; border-radius: 14px; }
.legal .lede { color: var(--soft); }
main.wrap { padding-top: 48px; }
.doc-card { background: var(--card); border: 2px solid var(--raised); border-radius: 18px; padding: 24px 26px; }
.legal .badges { padding: 0; margin: 8px 0 16px; list-style: none; }
.legal .badges li { margin: 0; }
.legal .badges a { border-bottom: 0; }