/* ============================================================================
   RemindMeVoice — shared design system
   Single source of truth for brand tokens, typography, buttons, and the
   reusable components used across every page (home, guides, cambridge, legal).
   Link this BEFORE a page's own <style> block; pages keep only their
   page-specific layout inline. Adapted from the Claude Design brief.
   ============================================================================ */

:root {
  /* Colour — warm canvas, sparing orange.
     Existing token names (--accent, --text, --bg…) are kept so existing
     markup keeps working; values nudged to the brief's warmer palette. */
  --accent:       #E97C3C;  /* accent: CTA fills, key words, graphics ONLY */
  --accent-dark:  #C45F22;  /* hover bg / large headings (≥3:1) */
  --accent-deep:  #B5500E;  /* small text + links on cream — true AA (≥4.5:1) */
  --accent-light: #FBEFE5;
  --text:         #1F1A14;  /* primary text (ink) */
  --text-soft:    #4A3F32;  /* body text */
  --text-muted:   #6E6358;  /* meta / captions — darkened for AA (≥4.5:1 on cream) */
  --bg:           #FAF6EE;  /* primary page background (cream) */
  --bg-alt:       #F2EBDC;  /* alternating section background (bone) */
  --border:       #E5DDCC;  /* hairline borders */
  --white:        #FFFFFF;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;            /* display / headings */
  --sans:  "Instrument Sans", system-ui, -apple-system, sans-serif;    /* body / UI */
  --mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;           /* eyebrows / labels */

  /* Spacing scale (8px base) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* Radius */
  --radius:  16px;          /* legacy alias → medium */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;

  --shadow:      0 2px 16px rgba(60,40,20,0.07);
  --shadow-card: 0 10px 30px rgba(60,40,20,0.06);
  --shadow-lift: 0 20px 50px rgba(60,40,20,0.16);
  --max-w: 720px;
}

/* ── Base typography ─────────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: 1.0625rem;   /* 17px base; body copy (p, li) steps up to 18px */
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); }
h1 { font-weight: 400; letter-spacing: -0.015em; line-height: 1.05;
     font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-weight: 400; letter-spacing: -0.01em; line-height: 1.1;
     font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-weight: 500; line-height: 1.25; font-size: clamp(1.25rem, 2vw, 1.5rem); }

p, li { font-family: var(--sans); font-size: 1.125rem; line-height: 1.6; color: var(--text-soft); }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Mono eyebrow / label (replaces the old pill eyebrow) */
.eyebrow {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 500;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 14px 24px; border-radius: var(--r-pill); border: none;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s, transform .1s;
}
.btn:hover { text-decoration: none; }
.btn--primary, .btn-primary { background: var(--accent); color: var(--text); }
.btn--primary:hover, .btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn--primary:active, .btn-primary:active { transform: translateY(1px); }
/* Inverted pairing: orange becomes the outline + text (hero ask, guide secondary CTAs) */
.btn--secondary, .btn-secondary {
  background: transparent; color: var(--accent-deep);
  box-shadow: inset 0 0 0 1.5px var(--accent-deep);
}
.btn--secondary:hover, .btn-secondary:hover { background: var(--accent-deep); color: #fff; }
.btn--secondary:active, .btn-secondary:active { transform: translateY(1px); }
.btn-lg { padding: 16px 32px; font-size: 1.0625rem; }

/* ── Accessibility ───────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-dark); outline-offset: 2px; border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Trust strip (under the hero, re-homes the privacy reassurances) ──────── */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center;
  list-style: none; margin: 0; padding: var(--s-3);
  background: var(--bg-alt); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); font-size: 0.9375rem; color: var(--text-soft);
}
.trust-strip li { display: flex; align-items: center; gap: 8px; }
.trust-strip li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ── Voice sample player ("Hear the voice") ──────────────────────────────── */
.voice-sample {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: var(--s-2);
  background: var(--text); color: var(--bg); border: none; border-radius: var(--r-md);
  padding: 14px 18px; cursor: pointer; text-align: left; font-family: var(--sans);
}
.voice-sample__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.voice-sample__text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.voice-sample__text strong { font-size: 0.95rem; font-weight: 600; }
.voice-sample__text em { font-size: 0.8rem; color: rgba(250,246,238,0.82); font-style: normal; }
.voice-sample__eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; opacity: .35; }
.voice-sample__eq i { width: 3px; height: 100%; background: var(--bg); border-radius: 2px; transform: scaleY(.3); }

@media (prefers-reduced-motion: no-preference) {
  .voice-sample[aria-pressed="true"] .voice-sample__eq { opacity: 1; }
  .voice-sample[aria-pressed="true"] .voice-sample__eq i { animation: eqbar 1s infinite ease-in-out; }
  .voice-sample[aria-pressed="true"] .voice-sample__eq i:nth-child(2) { animation-delay: .12s; }
  .voice-sample[aria-pressed="true"] .voice-sample__eq i:nth-child(3) { animation-delay: .24s; }
  .voice-sample[aria-pressed="true"] .voice-sample__eq i:nth-child(4) { animation-delay: .36s; }
  .voice-sample[aria-pressed="true"] .voice-sample__eq i:nth-child(5) { animation-delay: .48s; }
}
@keyframes eqbar { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ── Brand logo: mark + live-text wordmark ───────────────────────────────
   Marks are rasterised from web/public/brand/ (tools/rasterise_logo.py); the
   wordmark stays live HTML text (selectable, translatable, SEO-friendly).
   Flex-centre the mark beside the wordmark — align-items:center gives true
   vertical centring (vertical-align:middle left the text sitting slightly
   high). No `gap`: spacing comes from the mark's margin, so the wordmark's
   text runs (incl. the orange "Me" span) stay flush as one word. The flex
   target covers both header shapes: `.nav-logo` is the <a> on some pages and
   a wrapping <div> on others, hence `.nav-logo > a` too. */
.nav-logo, .nav-logo > a { display: inline-flex; align-items: center; }
.nav-logo-mark { flex: none; margin-right: 10px; }
footer .footer-logo { display: inline-flex; align-items: center; }
.footer-logo-mark { flex: none; margin-right: 8px; }