/* AppDish site — shared styles for the landing page and the policy pages.
   Palette from the logo (brand/logo): saffron plate, ink tile, brick dot, plus the three app colors.
   Rule: no container shares its background with what it sits on (checked in light and dark). */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("fonts/Bric-800.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("fonts/Atk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("fonts/Atk-Bold.woff2") format("woff2"); }

:root {
  --page: #E9ECF0; --surface: #F8F9FB; --surface-2: #DDE2E8; --line: #B3BAC4;
  --ink: #1F2328; --muted: #454C55;
  --saffron: #F2B50F; --saffron-deep: #DDA000; --on-saffron: #1F2328;
  --brick: #A5352A; --brick-text: #9A2E24; --on-brick: #FFFFFF;
  --a1: #1F4E8C; --a2: #8E2A45; --a3: #2F6B3A; --on-a: #FFFFFF;
  --night: #1F2328; --night-2: #2B3038; --night-3: #3A404A; --on-night: #EEF0F3; --on-night-muted: #B4BBC5;
  --paper: #FFFFFF; --paper-line: #E2E5EA; --paper-ink: #1F2328; --paper-muted: #545B65;
  --steel: #8B95A3; --steel-dark: #5D6672;
  --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121417; --surface: #1B1E23; --surface-2: #272B32; --line: #454B56;
    --ink: #EEF0F3; --muted: #B4BBC5;
    --saffron: #F2B93B; --saffron-deep: #C98F12; --on-saffron: #17191D;
    --brick: #B8412F; --brick-text: #F2A090;
    --a1: #2B63AF; --a2: #A8405C; --a3: #3A7F48;
    --night: #1F2328; --night-2: #2B3038; --night-3: #3A404A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #121417; --surface: #1B1E23; --surface-2: #272B32; --line: #454B56;
  --ink: #EEF0F3; --muted: #B4BBC5;
  --saffron: #F2B93B; --saffron-deep: #C98F12; --on-saffron: #17191D;
  --brick: #B8412F; --brick-text: #F2A090;
  --a1: #2B63AF; --a2: #A8405C; --a3: #3A7F48;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.55; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: 16px; padding-right: 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--saffron); color: var(--on-saffron); padding: 8px 14px; border-radius: 10px; font-weight: 700; z-index: 10; }
.skip:focus { left: 16px; }

/* ---- night band: header, hero, footer ---- */
.night { background: var(--night); color: var(--on-night); }
.night .muted { color: var(--on-night-muted); }
.top { display: flex; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: inline-flex; align-items: center; gap: .45em; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.01em; text-decoration: none; color: var(--on-night); }
.brand svg { width: 1.35em; height: 1.35em; flex: none; }
.brand i { font-style: normal; color: #F2A090; }
.top .sp { flex: 1; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; background: var(--night-3); color: var(--on-night); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 16px; text-decoration: none; }
.pill-link:hover { background: #4A515D; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; padding: 14px 22px; font-weight: 700; font-size: 18px; text-decoration: none; line-height: 1.2; }
.btn.primary { background: var(--saffron); color: var(--on-saffron); }
.btn.primary:hover { background: #FFC82E; }
.btn.quiet { background: var(--night-3); color: var(--on-night); }
.btn.quiet:hover { background: #4A515D; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---- policy pages ---- */
.doc { padding-top: 40px; padding-bottom: 72px; }
.doc article { background: var(--surface); border-radius: 24px; padding: clamp(22px, 4vw, 48px); max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.doc h1 { font-size: clamp(34px, 6vw, 52px); }
.doc h2 { font-size: 24px; margin-top: 14px; }
.doc p, .doc li { max-width: 68ch; }
.doc ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.doc .stamp { justify-self: start; background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 3px 12px; font-size: 15px; font-weight: 700; }
.doc .callout { background: var(--surface-2); border-radius: 16px; padding: 16px 18px; }
.doc .back { justify-self: start; display: inline-flex; gap: 8px; align-items: center; background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-weight: 700; text-decoration: none; font-size: 16px; }

/* ---- footer ---- */
.foot { padding-top: 40px; padding-bottom: 40px; display: grid; gap: 22px; }
.foot .row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px; }
.foot nav a { background: var(--night-2); color: var(--on-night); border-radius: 999px; padding: 7px 14px; text-decoration: none; font-weight: 700; font-size: 15px; }
.foot nav a:hover { background: var(--night-3); }
.foot p { font-size: 15px; }