/* Shared by every page on remycooks.com. Until 21 October 2026 each page carried
   its own copy of these tokens so it could be dropped on any host as one file;
   with the site published as a whole from site/ (Cloudflare Pages), the copies had
   drifted — support.html still looked like the light legal draft next to a black
   front page. Rejected: keeping the copies and syncing by hand, which is how they
   drifted in the first place.

   Black only, like the app since PD-029. Colours are tokens.ts's black scheme. */
:root {
  --bg: #0A0B0A; --surface: #1A1D1B; --raised: #282B29; --border: #383C39; --border-strong: #7E8580;
  --t1: #EDF0EE; --t2: #C2C7C3; --t3: #9EA4A0;
  --accent: #7CE294; --on-accent: #0F2314; --accent-muted: #0B3D1E; --accent-on-muted: #7DE49C;
  --warn-bg: #492F0E; --warn-text: #FFE7A3; --danger: #FD8A83;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--t2); font: 400 17px/1.6 var(--sans); overflow-x: hidden; overflow-wrap: break-word; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
h1, h2, h3 { color: var(--t1); margin: 0; font-weight: 700; }
p { margin: 0; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(10, 11, 10, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.site-head.scrolled { border-bottom-color: #1d201e; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t1); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-head nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); font-size: 15px; font-weight: 500; }
.site-head nav a { text-decoration: none; color: var(--t3); transition: color 150ms ease; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: var(--t1); }
.site-head nav .pill { color: var(--t1); background: var(--surface); padding: 8px 16px; border-radius: 999px; transition: background 150ms ease, transform 150ms ease; }
.site-head nav .pill:hover { background: var(--raised); }
.site-head nav .pill:active { transform: scale(0.97); }
@media (max-width: 560px) { .site-head nav .hide-s { display: none; } }

/* ---------- App Store badge ----------
   Apple's official artwork, untouched (their guidelines forbid redrawing it). Until
   the app is live it is inert and a "Coming soon" tag sits beside it; site.js
   switches every badge on the site from one constant. */
.badge { display: inline-block; line-height: 0; border-radius: 9px; transition: transform 150ms ease, opacity 150ms ease; }
.badge img { height: 52px; width: auto; }
.badge:hover { transform: translateY(-1px); }
.badge:active { transform: scale(0.97); }
.badge[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.soon { font-size: 14px; font-weight: 600; color: var(--accent-on-muted); background: var(--accent-muted); padding: 6px 12px; border-radius: 999px; }
.soon[hidden] { display: none; }

/* ---------- Footer ---------- */
.site-foot { padding-block: 40px 56px; border-top: 1px solid #1d201e; font-size: 14px; color: var(--t3); }
.site-foot .wrap { display: grid; gap: 16px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot nav a { text-decoration: none; color: var(--t2); }
.site-foot nav a:hover { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.site-foot small { font-size: 13px; line-height: 1.5; }

/* ---------- Document pages: privacy, terms, support ---------- */
.doc { max-width: 760px; margin-inline: auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 96px; }
.doc h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.2rem); line-height: 1; letter-spacing: -0.045em; }
.doc .lede { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; margin-top: 20px; color: var(--t2); }
.doc .updated { color: var(--t3); font-size: 15px; margin-top: 14px; }
.doc h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.15; letter-spacing: -0.025em; margin: 64px 0 14px; }
.doc h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 36px 0 10px; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc li ul { margin-top: 8px; }
.doc strong { color: var(--t1); font-weight: 600; }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc .summary { background: var(--surface); border-radius: 20px; padding: 24px 24px 12px; margin-top: 40px; }
.doc .summary h2 { margin-top: 0; }
.doc .table-wrap { overflow-x: auto; margin: 0 0 16px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.doc th { color: var(--t1); font-weight: 600; }
.doc details { border-bottom: 1px solid var(--border); padding: 16px 0; }
.doc summary { color: var(--t1); font-weight: 600; cursor: pointer; }
.doc summary:focus-visible { outline-offset: 4px; }
.doc details p { margin: 10px 0 0; }
/* Placeholders stay loud on purpose: a filled-in page has none left, an unfilled one shows it. */
.ph { background: var(--warn-bg); color: var(--warn-text); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.concept { background: var(--warn-bg); color: var(--warn-text); border-radius: 12px; padding: 12px 16px; font-weight: 600; margin-bottom: 32px; }