/* ============================================================================
   Sevra — Earned Light · web stylesheet
   Marketing + legal/utility pages for sevrafit.com. Mirrors the app's
   "Earned Light" identity: near-black canvas, indigo = action/links,
   gold = earned accent (wordmark period, key numerals), Space Grotesk for
   display + system sans for body. Element-level rules so the legal pages
   (semantic HTML) restyle without touching their copy.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* surfaces */
  --canvas:#07090C; --surface:#0C1015; --raised:#11161D; --overlay:#161C25;
  --hairline:#1C2330; --border:#252D3B; --border-strong:#323B4B;
  /* text */
  --t-heading:#EEF1F6; --t-body:#C7CDD9; --t-secondary:#9AA4B6; --t-tertiary:#7D8799;
  /* brand */
  --accent:#A5B0FF; --accent-focus:#7C8BFF; --action:#4C5CF5; --action-pressed:#3E4BD6;
  --sel-tint:#161A52; --indigo-700:#3039AE;
  --gold-200:#F6E3B0; --gold-300:#F0D391; --gold-500:#E3BC5F; --gold-900:#2A2310;
  --gold-border:rgba(227,188,95,.38);
  /* status */
  --green-300:#7EE2A8; --green-500:#34C77A; --green-900:#0E2E1D;
  --amber-300:#FFD27A; --amber-500:#F5A524; --amber-900:#3A2606;
  --blue-300:#8FC6FF; --blue-900:#0B2440;
  /* type */
  --fd:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* layout */
  --maxw:1080px; --prose:720px;
  --dur:240ms; --ease:cubic-bezier(.2,0,0,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }
body {
  margin:0; background:var(--canvas); color:var(--t-body);
  font:400 16px/1.65 var(--fs); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--sel-tint); color:var(--t-heading); }

a { color:var(--accent); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover { color:var(--accent-focus); text-decoration:underline; text-underline-offset:3px; }
strong { color:var(--t-heading); font-weight:600; }
em { color:var(--t-body); }
hr { border:0; border-top:1px solid var(--hairline); margin:40px 0; }

/* ── site header ──────────────────────────────────────────────────────── */
header.site {
  position:sticky; top:0; z-index:60;
  background:rgba(7,9,12,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav-inner {
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
a.brand {
  font:700 19px/1 var(--fd); letter-spacing:3px; color:var(--t-heading);
  text-decoration:none; display:inline-flex; align-items:baseline;
}
a.brand:hover { text-decoration:none; color:var(--t-heading); }
a.brand b { color:var(--gold-500); font-weight:700; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a {
  color:var(--t-secondary); font:500 14px/1 var(--fs); padding:9px 12px; border-radius:8px;
  min-height:40px; display:inline-flex; align-items:center;
}
.nav-links a:hover { color:var(--t-heading); background:var(--overlay); text-decoration:none; }
.nav-cta {
  background:var(--action) !important; color:#fff !important; font-weight:600 !important;
  padding:0 16px !important; height:40px;
}
.nav-cta:hover { background:var(--action-pressed) !important; }
@media (max-width:640px) { .nav-links a.hide-sm { display:none; } }

/* ── layout containers ────────────────────────────────────────────────── */
main { display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.prose { max-width:var(--prose); margin:0 auto; padding:56px 24px 96px; }

/* ── typography (drives the legal/utility pages) ──────────────────────── */
h1 {
  font:700 clamp(30px,5vw,42px)/1.12 var(--fd); letter-spacing:-.6px;
  color:var(--t-heading); margin:.1em 0 .45em; text-wrap:balance;
}
h2 {
  font:700 clamp(22px,3.2vw,28px)/1.2 var(--fd); letter-spacing:-.3px;
  color:var(--t-heading); margin:2.2em 0 .5em; scroll-margin-top:84px; text-wrap:balance;
}
h3 {
  font:600 19px/1.3 var(--fd); letter-spacing:-.1px; color:var(--t-heading);
  margin:1.6em 0 .35em; scroll-margin-top:84px;
}
p { margin:.8em 0; color:var(--t-body); text-wrap:pretty; }
/* lede: first paragraph of an intro section */
.prose > section:first-of-type > p:first-of-type,
section[aria-labelledby] > p:first-of-type { color:var(--t-secondary); }
.prose .lede, p.lede { font-size:18px; line-height:1.6; color:var(--t-secondary); }

ul, ol { padding-left:1.3em; margin:1em 0; }
li { margin:.5em 0; color:var(--t-body); }
li::marker { color:var(--t-tertiary); }
ul li::marker { color:var(--accent); }

/* draft / status note — the "Draft — pending legal review" line */
.prose section p strong:only-child,
.prose > section > p:first-child > strong {
  color:var(--amber-300);
}

/* ── tables (sub-processor lists etc.) ───────────────────────────────── */
table {
  width:100%; border-collapse:separate; border-spacing:0; margin:1.4em 0; font-size:14.5px;
  border:1px solid var(--hairline); border-radius:12px; overflow:hidden;
}
th, td { padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline); }
th {
  background:var(--surface); color:var(--t-secondary);
  font:600 11px/1.4 var(--fs); letter-spacing:1px; text-transform:uppercase;
}
tr:last-child td { border-bottom:none; }
td { color:var(--t-body); }

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site {
  border-top:1px solid var(--hairline); background:var(--surface);
  margin-top:0; padding:48px 24px 56px; color:var(--t-tertiary); font-size:14px;
}
.foot-inner { max-width:var(--maxw); margin:0 auto; }
.foot-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px 40px; }
.foot-brand { max-width:300px; }
.foot-brand .brand { font:700 17px/1 var(--fd); letter-spacing:3px; color:var(--t-heading); }
.foot-brand .brand b { color:var(--gold-500); }
.foot-brand p { font-size:13.5px; color:var(--t-tertiary); margin-top:10px; line-height:1.6; }
footer.site nav ul { display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:0; }
footer.site nav a { color:var(--t-secondary); }
footer.site nav a:hover { color:var(--t-heading); }
.foot-legal { margin-top:32px; padding-top:22px; border-top:1px solid var(--hairline); font-size:13px; line-height:1.6; color:var(--t-tertiary); }
.foot-legal p { color:var(--t-tertiary); margin:.4em 0; }

/* ── reusable bits ────────────────────────────────────────────────────── */
.overline { font:600 12px/1.3 var(--fs); letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 24px; border-radius:12px; border:none; cursor:pointer;
  font:600 16px/1 var(--fs); text-decoration:none; transition:all var(--dur) var(--ease);
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--action); color:#fff; box-shadow:0 8px 20px rgba(76,92,245,.28); }
.btn-primary:hover { background:var(--action-pressed); color:#fff; box-shadow:0 12px 26px rgba(76,92,245,.34); }
.btn-secondary { background:var(--overlay); color:var(--t-heading); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--raised); color:var(--t-heading); border-color:var(--border-strong); }

/* callout card — for safety / reassurance blocks */
.callout {
  background:var(--raised); border:1px solid var(--border); border-left:3px solid var(--accent-focus);
  border-radius:12px; padding:18px 20px; margin:1.6em 0;
}
.callout.safety { border-left-color:var(--amber-500); }
.callout.safety strong { color:var(--amber-300); }
.callout p:first-child { margin-top:0; }
.callout p:last-child { margin-bottom:0; }

/* table of contents (legal pages) */
nav.toc, section[aria-labelledby="toc-heading"] {
  background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  padding:8px 22px 22px;
}
section[aria-labelledby="toc-heading"] h2 { font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--t-secondary); margin:18px 0 6px; }
section[aria-labelledby="toc-heading"] ul { columns:2; column-gap:36px; padding-left:1.1em; }
@media (max-width:560px) { section[aria-labelledby="toc-heading"] ul { columns:1; } }
section[aria-labelledby="toc-heading"] li { margin:.35em 0; }

/* app store badges */
.badges { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0; }
.badge {
  display:inline-flex; align-items:center; gap:11px; height:54px; padding:0 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  color:var(--t-heading); text-decoration:none; transition:all var(--dur) var(--ease);
}
.badge:hover { border-color:var(--border-strong); background:var(--raised); color:var(--t-heading); text-decoration:none; transform:translateY(-1px); }
.badge svg { width:26px; height:26px; flex:none; }
.badge .b-small { font:400 10px/1.1 var(--fs); color:var(--t-secondary); letter-spacing:.3px; }
.badge .b-big { font:600 17px/1.15 var(--fd); color:var(--t-heading); letter-spacing:.2px; }

.meta-line { font:500 13px/1.5 var(--fs); color:var(--t-tertiary); margin-top:14px; }