/* ====================================================================
   Daily Grace Landing Page - design system
   Eighth fork of the template (TCGBrain -> StarBrain -> ComicBrain ->
   CoinBrain -> StampBrain -> Becoming -> FireUp -> Daily Grace), and a
   return to a LIGHT page after FireUp's dark one. Section grammar and
   script.js are inherited unchanged.

   TOKENS COME FROM THE SHIPPED APP, NOT FROM THE DONOR. Counted across
   the whole of src/: #b8860b appears 49 times and is the accent; the
   cream surfaces #f8f3e7 / #f4efe4 / #faf9f6 and the ink #030b1a /
   #333333 / #57534e are the app's own. The warm gradient is sampled off
   the Play feature graphic, which runs cream -> gold -> clay.

   THE GOLD IS GRAPHICS-ONLY, like every light fork before FireUp.
   Measured on white:
     #f8f3e7  1.11:1  surface
     #f4efe4  1.15:1  surface
     #e7d5a7  1.45:1  graphics
     #ddbf69  1.79:1  graphics
     #c19a55  2.62:1  graphics
     #b8860b  3.25:1  THE app accent - GRAPHICS / LARGE TEXT ONLY
     #a17a0a  3.96:1  large text
     #8a6508  5.32:1  <- DERIVED, carries body text
     #7a5a07  6.38:1  <- DERIVED
     #6b4f06  7.65:1  <- DERIVED, headings

   So the accent cannot carry body text and cannot sit behind white text
   (white on #b8860b is 3.25:1). Three darker tones are DERIVED at the
   same hue and marked as such; the CTA fills with the derived pair, whose
   midpoint (#7b5a07) measures 6.35:1 behind a white label.

   The app's second accent #a17479 (dusty rose) is 3.97:1 - large text
   only - so the text-safe rose #8f5f64 (5.26:1) is likewise derived.
   ==================================================================== */

:root {
  /* ===== Brand (the app's gold, plus a ramp derived at the same hue) ===== */
  --brand-50:  #fdfbf5;
  --brand-100: #f8f3e7;   /* app token */
  --brand-200: #f4efe4;   /* app token */
  --brand-300: #e7d5a7;   /* app token - graphics only, 1.45:1 */
  --brand-400: #ddbf69;   /* creative token */
  --brand-500: #b8860b;   /* THE app accent - 3.25:1, GRAPHICS / LARGE ONLY */
  --brand-600: #a17a0a;   /* DERIVED - 3.96:1, large text */
  --brand-700: #8a6508;   /* DERIVED - 5.32:1, carries body text */
  --brand-800: #7a5a07;   /* DERIVED - 6.38:1 */
  --brand-900: #6b4f06;   /* DERIVED - 7.65:1, headings */
  --deep-900:  #3d2d05;   /* deepest, CTA card floor */

  /* ===== The creative's own sweep: cream -> gold -> clay ===== */
  --dawn-cream: #f0e7ca;
  --dawn-gold:  #ddbf69;
  --dawn-amber: #c19a55;
  --dawn-clay:  #9e7148;

  /* Second accent - the app's dusty rose, darkened until it reads. */
  --rose-700: #8f5f64;    /* DERIVED - 5.26:1 */

  /* ===== CTA - both stops clear 4.5:1 behind white; midpoint 6.35:1 ===== */
  --cta-from: #8a6508;
  --cta-to:   #6b4f06;
  --cta-from-hover: #7a5a07;
  --cta-to-hover:   #573f05;

  /* ===== Ink (app tokens) ===== */
  --ink-900: #030b1a;     /* 19.69:1 */
  --ink-700: #333333;     /* 12.63:1 */
  --ink-600: #4a4640;
  --ink-500: #57534e;     /* app token - 7.63:1 */
  --ink-300: #a8a29e;
  --ink-200: #d6d3d1;
  --ink-100: #f1f1f1;     /* app token */

  /* ===== Status ===== */
  --success: #22c55e;
  --success-dark: #157f3c;
  --error: #c02b3f;
  --warning: #b8860b;

  /* ===== Surfaces ===== */
  --white: #ffffff;
  --canvas: #ffffff;
  --wash: #faf9f6;        /* app token - the app's page cream */
  --surface: #ffffff;
  --surface-2: #f8f3e7;   /* app token */

  /* ===== Semantic ===== */
  --text: var(--ink-900);
  --text-body: var(--ink-500);
  --text-mute: #6b6660;

  --border: #efe7d6;
  --border-strong: #e0d3b4;
  --border-brand: rgba(184, 134, 11, 0.26);

  /* ===== Elevation - warm-shadowed, never neutral grey ===== */
  --shadow-xs: 0 1px 2px rgba(61, 45, 5, 0.05);
  --shadow-sm: 0 1px 2px rgba(61, 45, 5, 0.06), 0 6px 16px -6px rgba(61, 45, 5, 0.09);
  --shadow-md: 0 2px 4px rgba(61, 45, 5, 0.04), 0 14px 34px -12px rgba(61, 45, 5, 0.17);
  --shadow-lg: 0 4px 8px rgba(61, 45, 5, 0.04), 0 30px 60px -22px rgba(61, 45, 5, 0.26);
  --shadow-brand: 0 14px 34px -12px rgba(184, 134, 11, 0.5);
  --shadow-cta: 0 14px 30px -10px rgba(107, 79, 6, 0.38), 0 0 0 4px rgba(184, 134, 11, 0.13);

  /* ===== Radii (the app's own card/pill shapes) ===== */
  --radius-btn: 9999px;
  --radius-input: 9999px;
  --radius-sm: 18px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --radius-full: 9999px;

  /* ===== Layout ===== */
  --section: clamp(76px, 9vw, 124px);
  --container: 1200px;

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  /* Urbanist is one of the app's OWN shipped families (src/config/fonts.ts
     ships Urbanist Regular/Medium/SemiBold/Bold) and is on Google Fonts, so
     the UI voice is the app's, not a substitute. See the typography note
     below for why the display line is a serif the app does not itself ship. */
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Atmosphere - dawn. Lavender rising top-left, rose settling bottom-right:
   the store creative's own left-to-right sweep, turned into a page-wide
   light source. Fixed so long scrolls keep the sun in one place. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(880px 620px at 78% -10%, rgba(221, 191, 105, 0.40), transparent 62%),
    radial-gradient(760px 560px at -8% 16%, rgba(240, 231, 202, 0.55), transparent 60%),
    radial-gradient(900px 660px at 88% 104%, rgba(158, 113, 72, 0.16), transparent 62%),
    radial-gradient(700px 520px at 12% 92%, rgba(184, 134, 11, 0.08), transparent 60%),
    var(--wash);
  z-index: 0;
  pointer-events: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease-out); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* Visible keyboard focus - never remove without an equivalent replacement */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-800);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, .store-btn:focus-visible, .nav-cta:focus-visible { outline-offset: 3px; }

/* Anchor targets clear the fixed navbar when arrived at from another page
   (in-page links get the same offset from script.js). */
section[id], header[id] { scroll-margin-top: 92px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* Skip link - visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  padding: 12px 22px;
  background: var(--brand-900);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Screen-reader-only helper for labels that must exist but not show */
.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;
}

/* ===== Typography =====
   The app ships NO serif at all - Urbanist, GeneralSans and Plus Jakarta
   Sans are all sans - but the store creative and the in-app scripture cards
   both set their display line in one, so Playfair Display carries headings
   only and never body copy. Urbanist IS the app's own UI face, so the body
   voice is not a substitute. */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: var(--text);
}
.display {
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.02;
}
.accent { color: var(--brand-800); }
/* Warm accent - the store creative's rose end, darkened until it reads. */
.accent-alt { color: var(--rose-700); }

/* Eyebrow - carries the app icon's sunburst motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-800);
  padding: 8px 16px 8px 13px;
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
}
.eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.eyebrow.alt {
  color: var(--rose-700);
  border-color: rgba(143, 95, 100, 0.26);
  background: rgba(255, 255, 255, 0.9);
}

.section-intro {
  max-width: 740px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-intro .eyebrow { margin-bottom: 20px; }
.section-intro h2 {
  font-size: clamp(2rem, 3.9vw, 2.9rem);
  margin-bottom: 16px;
}
.section-intro p { font-size: 1.06rem; color: var(--text-body); }

/* Section rule - a hairline that fades out, used instead of hard dividers */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 30px;
  border-radius: var(--radius-btn);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.2;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary - the app's gold, darkened to the only two stops on that hue that
   can hold a white label. The app's own #b8860b is 3.25:1 and cannot. */
.btn-primary {
  background: linear-gradient(160deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: var(--white);
  border-color: var(--cta-to);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
  background: linear-gradient(160deg, var(--cta-from-hover) 0%, var(--cta-to-hover) 100%);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(107, 79, 6, 0.5), 0 0 0 5px rgba(184, 134, 11, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-900);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-800);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:active { transform: translateY(0); }

/* ===== Store buttons ===== */
.store-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 24px;
  background: var(--brand-900);
  border: 1px solid var(--brand-900);
  border-radius: var(--radius-btn);
  color: var(--white);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  box-shadow: 0 10px 26px -12px rgba(61, 45, 5, 0.6);
}
.store-btn:hover { background: var(--brand-800); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(61, 45, 5, 0.65); }
.store-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn-text small { font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.86; }
.store-btn-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* Not-yet-live store: rendered as a real disabled control, never a dead link */
.store-btn.is-pending {
  background: var(--white);
  color: var(--ink-500);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  cursor: default;
}
.store-btn.is-pending:hover { transform: none; background: var(--white); box-shadow: none; }
.store-btn.is-pending svg { opacity: 0.55; }
.store-btn.is-pending .store-btn-text strong { color: var(--ink-700); }
.store-pending-tag {
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-800);
  background: var(--brand-50);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  padding: 4px 9px;
  align-self: center;
}

/* ===== Navbar ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  /* High opacity on purpose: this is a light page, so a thinner veil lets
     body text read straight through the bar. */
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -18px rgba(61, 45, 5, 0.5);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.012em;
  color: var(--brand-900);
}
.nav-logo img {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.94rem; font-weight: 600; color: var(--ink-600); }
.nav-links a:hover { color: var(--brand-800); }
.nav-cta { padding: 12px 22px; font-size: 0.9rem; }
/* The link rule above out-specifies .btn-primary, which would leave the CTA
   with dark ink on its fill. Restate the colour at matching specificity. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--white); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--brand-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* ===== Radiance motif =====
   The app icon is a cross inside a rounded square, and the store creative
   sets it against a burst of light. That is this page's signature device:
   a warm radiance behind the phone. The class names are kept so the ported
   section CSS reads unchanged.
   The rays are drawn with repeating-conic-gradient rather than 24 elements,
   and masked to a ring so the phone sits inside the sun rather than behind
   a solid disc. */
.sunburst {
  position: absolute;
  left: 50%; top: 50%;
  width: 132%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(184, 134, 11, 0.30) 0deg 2.1deg,
    transparent 1.6deg 8deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 33%, #000 42%, #000 62%, transparent 78%);
          mask-image: radial-gradient(circle, transparent 33%, #000 42%, #000 62%, transparent 78%);
  animation: sunTurn 90s linear infinite;
}
@keyframes sunTurn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The horizon the sun rises over - the flat bar under the icon's dome.
   Masked hollow in the middle: drawn edge to edge it runs STRAIGHT THROUGH
   the phone, and because the phone's own frame fades out at the bottom the
   line shows through the fade and reads as a stray rule rather than a
   horizon. Clearing the centre puts the phone on the horizon instead of
   behind it, which is what the icon does. */
.horizon {
  position: absolute;
  left: -6%; right: -6%;
  bottom: 9%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--brand-400) 20%, var(--brand-500) 50%, var(--brand-400) 80%, transparent);
  border-radius: 2px;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to right, #000 0 30%, transparent 38% 62%, #000 70% 100%);
          mask-image: linear-gradient(to right, #000 0 30%, transparent 38% 62%, #000 70% 100%);
}

/* ===== Screen frame - real app screens, our own bezel =====
   The store screenshots draw the device as a floating white outline with a
   gap, so the crops here are the SCREEN ONLY and this frame supplies the
   device. Two variants, because the shots crop from two directions:
   the default is rounded at the top and fades out at the bottom (the screen
   continues); .open-top is its mirror. */
.phone-frame {
  position: relative;
  border-radius: 42px 42px 8px 8px;
  padding: 7px 7px 0;
  background: linear-gradient(160deg, #fdfbf5 0%, #f4efe4 46%, #e7d5a7 100%);
  box-shadow:
    0 2px 4px rgba(61, 45, 5, 0.07),
    0 34px 64px -26px rgba(107, 79, 6, 0.38),
    0 0 0 1px rgba(61, 45, 5, 0.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.phone-frame img {
  width: 100%;
  border-radius: 36px 36px 0 0;
  display: block;
  background: var(--white);
}

/* ===== Frameless panel shots =====
   Two of the four usable store screenshots are not device mock-ups: they are
   UI panels composited on the app's own cream. Wrapping those in a phone
   bezel would invent a device the source never showed, so they render bare
   with a hairline and a warm shadow. */
.panel-shot {
  position: relative;
  width: min(420px, 92%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.panel-shot img { width: 100%; display: block; }

/* ===== Footer ===== */
.footer {
  padding: 74px 0 30px;
  background: var(--white);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 44px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 380px;
}
.footer-col h3 {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-900);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.92rem; color: var(--text-mute); }
.footer-col a:hover { color: var(--brand-800); }
.footer-legal {
  font-size: 0.78rem;
  color: var(--text-mute);
  line-height: 1.6;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  max-width: 900px;
}
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.footer-bottom a { color: var(--brand-800); font-weight: 600; }
.footer-bottom a:hover { text-decoration: underline; }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.44s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.52s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.60s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: 0.68s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ===== Legal / long-form pages ===== */
.legal { padding: 132px 0 80px; max-width: 800px; margin: 0 auto; }
.legal h1 {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  margin-bottom: 12px;
  letter-spacing: -0.022em;
}
.legal .legal-meta {
  color: var(--text-mute);
  font-size: 0.9rem;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.legal h2 { font-size: 1.4rem; margin: 36px 0 12px; }
.legal h3 { font-size: 1.08rem; margin: 24px 0 8px; color: var(--ink-700); }
.legal p, .legal li { color: var(--text-body); font-size: 1rem; line-height: 1.78; margin-bottom: 12px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal a { color: var(--brand-800); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink-900); font-weight: 700; }
.legal hr { margin: 34px 0; }
.legal-note {
  background: var(--brand-50);
  border: 1px solid var(--border-brand);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 26px 0;
}
.legal-note p:last-child { margin-bottom: 0; }

/* ===== Responsive base ===== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-links {
    display: none;
    position: fixed;
    top: 70px; left: 16px; right: 16px;
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    gap: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .nav-cta { width: 100%; justify-content: center; padding: 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .legal { padding: 112px 0 64px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .nav-logo { font-size: 1.16rem; gap: 9px; }
  .nav-logo img { width: 34px; height: 34px; border-radius: 10px; }
  .display { font-size: 2.3rem; }
  .section-intro { margin-bottom: 40px; }
  .section-intro h2 { font-size: 1.72rem; }
  .section-intro p { font-size: 0.98rem; }
  .btn { padding: 14px 24px; font-size: 0.94rem; }
}

@media (min-width: 1600px) { :root { --container: 1300px; } }
@media (min-width: 1920px) { :root { --container: 1400px; } body { font-size: 17px; } }