/* Dark mode: Samsung Internet (and Chrome's auto-dark) repaint every site
   that does not declare dark support — inverting this design into dark
   parchment and unreadable dark-on-dark headings. Declaring "light dark"
   tells the browser the page handles dark mode itself, so it is shown as
   designed. Every colour on the page is set explicitly, so nothing falls back
   to a browser default either way. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { color-scheme: light dark; } }

/* Shared styling for the standalone legal / support pages.
 *
 * These pages exist as their own URLs because app stores, and anyone you send
 * a link to, need a page that IS the policy — not a tab inside the marketing
 * site that has to be clicked to. index.html keeps its in-page tabs; this is
 * the shareable surface.
 *
 * One stylesheet rather than four copies of the same <style> block: the pages
 * must not drift apart, and a single file is one cache hit for all of them.
 * Variables mirror index.html so the two never look like different products.
 */

:root {
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --secondary: #7c3aed;
  --accent: #06b6d4;
  --danger: #ef4444;
  --bg: #ffffff;
  --muted-bg: #f8fafc;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #475569;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(79, 70, 229, .08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  padding: 1.25rem 0;
}

.wrap { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 1.25rem; }

.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.site-header nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.site-header nav a {
  color: rgba(255, 255, 255, .9); text-decoration: none;
  font-size: .9rem; font-weight: 500;
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] {
  color: #fff; text-decoration: underline;
}

/* ── Document body ───────────────────────────────────────────────────────── */
main { padding: 2.5rem 0 4rem; }

h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }

.last-updated {
  color: var(--text-muted); font-size: .9rem;
  margin: .4rem 0 2rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

h2 {
  font-size: 1.15rem; font-weight: 700;
  margin: 2rem 0 .6rem; color: var(--primary-dark);
}

p { margin-bottom: 1rem; color: var(--text-muted); }

ul { margin: 0 0 1rem 1.25rem; color: var(--text-muted); }
li { margin-bottom: .4rem; }

a { color: var(--primary); }

b, strong { color: var(--text); }

/* ── Callouts ────────────────────────────────────────────────────────────── */
.note, .warn {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--primary);
  background: var(--muted-bg);
}
.warn { border-left-color: var(--danger); background: #fef2f2; }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
ol.steps { margin: 0 0 1.5rem 1.25rem; color: var(--text-muted); }
ol.steps li { margin-bottom: .75rem; }

/* ── Cards (support contacts) ────────────────────────────────────────────── */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 1.5rem 0; }
.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; background: var(--bg); box-shadow: var(--shadow);
}
.card .icon { font-size: 1.5rem; }
.card h3 { font-size: 1rem; font-weight: 700; margin: .5rem 0 .25rem; }
.card p { font-size: .9rem; margin-bottom: .5rem; }
.card a { font-weight: 600; word-break: break-word; }

/* ── Table ───────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--border); }
th { color: var(--text); font-weight: 700; }
td { color: var(--text-muted); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.75rem 0; margin-top: 2rem;
  color: var(--text-muted); font-size: .88rem;
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a; --muted-bg: #1e293b; --border: #334155;
    --text: #f1f5f9; --text-muted: #cbd5e1;
    /* Headings and links use these; the light-theme indigo (#3730a3) was
       dark-on-navy and barely legible here. */
    --primary: #a5b4fc; --primary-dark: #c7d2fe;
  }
  /* The header keeps the brand gradient: white text needs the deep indigo
     behind it, not the lighter text accent above. */
  .site-header { background: linear-gradient(135deg, #4f46e5 0%, var(--secondary) 100%); }
  .warn { background: #2a1416; }
}