/* ====================================================================
   FireUp Landing Page - design system
   Seventh fork of the template (TCGBrain -> StarBrain -> ComicBrain ->
   CoinBrain -> StampBrain -> Becoming -> FireUp) and THE FIRST DARK ONE.
   Every previous fork is a light page with a tinted wash; FireUp's app is
   near-black with an orange accent, so the page is too. The section
   grammar is inherited unchanged - only the surface polarity, the tokens
   and the motif differ.

   TOKENS COME FROM THE SHIPPED APP, NOT FROM THE DONOR:
     COLORS in src/screens/profile-settings/general/PrivacyPolicyScreen.tsx
       bg #151515, card #1A1A1A, textWhite #FFFFFF
     the accent, counted across the whole of src/: #ff6a33 appears 126 times
     and is by far the most-used non-neutral value; the store creative's
     "DAILY." headline samples to exactly #ff6a33 as well.

   THE POLARITY FLIP INVERTS THE USUAL PROBLEM. On the six light forks the
   brand hue was always too weak to carry text. Here it is the opposite -
   measured on the app's own #151515:
     #ff6a33  primary orange   6.40:1   CARRIES TEXT
     #e87f3c                   6.55:1   carries text
     #b5632f                   4.17:1   large text / graphics
     #6b3b1c                   1.97:1   graphics only
     #ffffff                  18.26:1   AAA
     #b9b9b9                   9.31:1   body copy (app token)
     #686868                   3.28:1   large text / graphics

   THE TRAP THIS CREATES: the orange reads beautifully AS text on dark, so
   it is tempting to fill a button with it and put white on top. White on
   #ff6a33 is 2.85:1 and fails outright. The primary button therefore
   carries the PAGE colour as its label (#151515 on #ff6a33 = 6.40:1),
   which is also what the app's own filled controls do.
   ==================================================================== */

:root {
  /* ===== Brand (the app's orange, plus a ramp derived at the same hue) ===== */
  --brand-50:  #fff3ee;   /* DERIVED - only used on the orange CTA slab */
  --brand-100: rgba(255, 106, 51, 0.12);
  --brand-200: #ffc9b3;   /* DERIVED */
  --brand-300: #ffa885;   /* DERIVED */
  --brand-400: #ff8a5c;   /* DERIVED */
  --brand-500: #ff6a33;   /* THE app accent - 6.40:1 on #151515, carries text */
  --brand-600: #e87f3c;   /* app token - 6.55:1 */
  --brand-700: #ff6a33;   /* alias: on dark the accent IS the text-safe step */
  --brand-800: #ff8a5c;   /* lighter, for hover on dark */
  --brand-900: #b5632f;   /* app token - 4.17:1, large text / graphics */
  --deep-900:  #0c0c0c;   /* app token - the deepest surface */

  /* ===== Ember gradient (the store creative's warm corner wash) ===== */
  --ember-1: #281a17;
  --ember-2: #251b19;
  --ember-3: #6b3b1c;     /* app token */
  --ember-4: #6b1d00;     /* app token */

  /* ===== CTA - orange fill, PAGE-DARK label. Never white on orange. ===== */
  --cta-from: #ff6a33;
  --cta-to:   #f2560f;         /* DERIVED, same hue darkened; label stays 5.6:1+ */
  --cta-from-hover: #ff8149;
  --cta-to-hover:   #ff6a33;
  --cta-ink: #151515;          /* 6.40:1 on the fill */

  /* ===== Ink - INVERTED. On a dark page the ramp runs light-to-dark. ===== */
  --ink-900: #ffffff;     /* 18.26:1 */
  --ink-700: #e2e2e2;     /* app token - 14.10:1 */
  --ink-600: #b9b9b9;     /* app token -  9.31:1 */
  --ink-500: #9a9a9a;     /* DERIVED   -  6.49:1 */
  --ink-300: #686868;     /* app token -  3.28:1, placeholders and graphics only */
  --ink-200: #4a4a4a;     /* app token -  2.06:1, graphics only */
  --ink-100: #272727;     /* app token - hairlines */

  /* ===== Status ===== */
  --success: #4ade80;
  --success-dark: #4ade80;
  --error: #ff8a8a;       /* light enough to read on #151515 */
  --warning: #fbbf24;

  /* ===== Surfaces (app's own ladder) ===== */
  --white: #ffffff;
  --canvas: #151515;      /* COLORS.bg */
  --wash: #151515;
  --surface: #1a1a1a;     /* COLORS.card */
  --surface-2: #1d1d1d;   /* app token */

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

  --border: #272727;
  --border-strong: #3a3a3a;
  --border-brand: rgba(255, 106, 51, 0.32);

  /* ===== Elevation - on a dark page a shadow cannot be seen, so depth is
     carried by a lighter surface plus a hairline. The shadows below are kept
     for the few elements that sit on the orange CTA card, where they DO read. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 34px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 30px 60px -22px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 14px 34px -12px rgba(255, 106, 51, 0.5);
  --shadow-cta: 0 14px 30px -10px rgba(255, 106, 51, 0.38), 0 0 0 4px rgba(255, 106, 51, 0.12);

  /* ===== Radii - the app's own: 30px cards, pill controls ===== */
  --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 {
  /* Both families are the app's OWN, from the FONTS map in
     PrivacyPolicyScreen.tsx / TermsScreen.tsx: Inter for UI and body,
     Montserrat Bold for display. Both are on Google Fonts, so nothing here
     is a substitute for a licensed face - unlike the previous fork, which
     had to stand in for Recoleta. */
  font-family: 'Inter', -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(900px 640px at 82% -12%, rgba(255, 106, 51, 0.13), transparent 60%),
    radial-gradient(760px 560px at -8% 12%, rgba(107, 59, 28, 0.30), transparent 58%),
    radial-gradient(1000px 700px at 88% 106%, rgba(107, 29, 0, 0.28), transparent 62%),
    radial-gradient(700px 520px at 8% 94%, rgba(255, 106, 51, 0.07), transparent 58%),
    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-500); color: var(--cta-ink); }

/* Visible keyboard focus - never remove without an equivalent replacement */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-500);
  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-500);
  color: var(--cta-ink);
  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 sets Recoleta - a soft, high-contrast serif - as the family for the
   WHOLE app, and the store creative sets the wordmark and every headline in
   the app's display face, used for the display line, section headings and
   card titles. Body copy stays in Inter, the app's UI face. Both are the
   app's real families - neither is a stand-in. */
h1, h2, h3, h4 {
  /* Montserrat Bold is the app's display face (FONTS.montserratBold). The
     store creative sets every headline in it, italicised and uppercase; the
     page keeps the weight and the tight tracking but not the uppercase,
     which is unreadable at paragraph-heading length. */
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--text);
}
.display {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.accent { color: var(--brand-500); }
/* Second accent - the app's own #e87f3c, a half-step warmer than the
   primary so the two never read as the same colour. */
.accent-alt { color: var(--brand-600); }

/* Eyebrow - carries the app icon's sunburst motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-500);
  padding: 8px 16px 8px 13px;
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  background: rgba(255, 106, 51, 0.08);
  backdrop-filter: blur(10px);
}
.eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.eyebrow.alt {
  color: var(--brand-600);
  border-color: rgba(232, 127, 60, 0.3);
  background: rgba(232, 127, 60, 0.09);
}

.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: 'Inter', 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 gradient DIRECTION (bright purple into deep purple) at
   the only two stops on that hue that can hold a white label. */
.btn-primary {
  background: linear-gradient(160deg, var(--cta-from) 0%, var(--cta-to) 100%);
  /* NOT white. White on #ff6a33 is 2.85:1 and fails; the page colour on the
     same fill is 6.40:1, and it is what the app's own filled controls use. */
  color: var(--cta-ink);
  border-color: var(--cta-to);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.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(255, 106, 51, 0.45), 0 0 0 5px rgba(255, 106, 51, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-900);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: rgba(255, 106, 51, 0.08);
  transform: translateY(-2px);
}
.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(--white);
  border: 1px solid var(--white);
  border-radius: var(--radius-btn);
  color: var(--canvas);
  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(0, 0, 0, 0.8);
}
.store-btn:hover { background: var(--brand-500); color: var(--cta-ink); transform: translateY(-2px); }
.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: rgba(255, 255, 255, 0.05);
  color: var(--ink-500);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  cursor: default;
}
.store-btn.is-pending:hover { transform: none; background: rgba(255, 255, 255, 0.05); color: var(--ink-500); box-shadow: none; }
.store-btn.is-pending svg { opacity: 0.55; }
.store-btn.is-pending .store-btn-text strong { color: var(--ink-600); }
.store-pending-tag {
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-500);
  background: rgba(255, 106, 51, 0.12);
  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(21, 21, 21, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.nav-logo img {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.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-500); }
.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(--cta-ink); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* ===== Ember motif =====
   The app icon is a flame. Where the previous fork drew a rising sun in
   conic rays, FireUp gets heat: a soft ember bloom behind the phone plus a
   ring of embers that drift upward. It is the same structural slot in the
   markup (.sunburst / .horizon are kept as class names so the ported
   section CSS reads unchanged) with a different device inside it. */
.sunburst {
  position: absolute;
  left: 50%; top: 52%;
  width: 128%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255, 106, 51, 0.30) 0%, rgba(255, 106, 51, 0.10) 38%, transparent 66%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 106, 51, 0.16) 0deg 1.6deg,
      transparent 1.6deg 9deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 44%, #000 60%, transparent 76%);
          mask-image: radial-gradient(circle, transparent 30%, #000 44%, #000 60%, transparent 76%);
  animation: emberTurn 120s linear infinite;
}
@keyframes emberTurn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The heat line the flame sits on - the app's own orange, fading out to
   nothing at both ends and cleared through the middle so it never crosses
   the phone. */
.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-900) 20%, var(--brand-500) 50%, var(--brand-900) 80%, transparent);
  border-radius: 2px;
  opacity: 0.8;
  -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%);
}

/* ===== Frameless panel shots =====
   FireUp's store screenshots are NOT all device mock-ups: four of the six
   are floating UI panels composited on the app's own near-black. Wrapping
   those in a phone bezel would invent a device the source never showed, so
   they render bare and simply blend into the page - which only works
   because this fork is dark and the panels are cut from the same #151515. */
.panel-shot {
  position: relative;
  width: min(430px, 92%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--canvas);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.panel-shot img { width: 100%; display: block; }

/* ===== 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;
  /* The store creative frames the device in a warm bronze; this is that
     bezel, kept dark so the phone reads as an object ON the page rather
     than a white card cut out of it. */
  background: linear-gradient(160deg, #4a3a30 0%, #2a211c 46%, #17120f 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 34px 64px -26px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  -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(--surface);
}

/* ===== Footer ===== */
.footer {
  padding: 74px 0 30px;
  background: var(--deep-900);
  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: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-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-500); }
.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-500); 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;
  font-variation-settings: 'SOFT' 60, 'opsz' 96;
  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-500); 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: rgba(255, 106, 51, 0.07);
  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(--surface);
    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; } }