/* ====================================================================
   Becoming Landing Page - design system
   Sixth fork of the template (TCGBrain -> StarBrain -> ComicBrain ->
   CoinBrain -> StampBrain -> Becoming) and the FIRST that is not an
   identifier app, so the section grammar is inherited verbatim while the
   subject matter is not.

   TOKENS COME FROM THE SHIPPED APP, NOT FROM THE DONOR:
     tailwind.config.js  primary.*, secondary.*, text.*, gradient.*
     src/config/theme.ts colors.primary #9D79D8 / secondary #A883E4
     Play Feature Graphic 1024x500  (the store creative's own gradient)

   THE PURPLE RAMP FAILS AA ALMOST EVERYWHERE. Measured on white:
     primary-50   #F3E8FF   1.18:1  graphics
     primary-100  #EFEBF6   1.17:1  graphics
     primary-200  #D4C4EC   1.63:1  graphics
     primary-300  #C8B7E5   1.85:1  graphics
     primary-400  #AF9AD0   2.51:1  graphics
     primary-600  #AE86EF   2.82:1  graphics
     secondary    #A883E4   2.99:1  graphics
     primary-700  #987CD8   3.38:1  large text / graphics
     primary-500  #9D79D8   3.41:1  GRAPHICS ONLY - the brand hue
     primary-800  #946FCF   3.86:1  large text / graphics
     primary-900  #6A46A3   6.96:1  <- the ONLY app token that carries body text

   So exactly one step in a ten-step ramp is text-safe. Two darker tones are
   DERIVED at the same hue (263deg) and are marked as such below; everything
   else is an app token. The rule that carries over from every previous fork:
   --brand-500 is the glow, the fill and the sunburst - it never carries text
   and never sits behind white text.

   The store creative's rose end (#D27CA9, 2.92:1) fails too, so the warm
   accent is likewise derived: #A6446E at 5.72:1.
   ==================================================================== */

:root {
  /* ===== Brand (app tailwind.config.js primary.*) ===== */
  --brand-50:  #f3e8ff;   /* primary-50 */
  --brand-100: #efebf6;   /* primary-100 */
  --brand-200: #d4c4ec;   /* primary-200 */
  --brand-300: #c8b7e5;   /* primary-300 - graphics only, 1.85:1 */
  --brand-400: #af9ad0;   /* primary-400 / gradient.bgStart */
  --brand-500: #9d79d8;   /* primary-500 = colorPrimary - 3.41:1, GRAPHICS ONLY */
  --brand-600: #946fcf;   /* primary-800 - 3.86:1, large text / graphics */
  --brand-700: #7c5ab8;   /* DERIVED (263deg, darkened primary-500) - 5.23:1, carries text */
  --brand-800: #6a46a3;   /* primary-900 - 6.96:1, carries body text */
  --brand-900: #4c2a7a;   /* DERIVED (263deg, darkened primary-900) - 10.94:1 */
  --deep-900:  #2b1a45;   /* deep aubergine, CTA card floor, 15.71:1 */

  /* ===== The store creative's own gradient (Play Feature Graphic) =====
     Sampled off the shipped 1024x500 artwork, left to right. These are the
     colours a visitor already associates with the app, so the page's
     atmosphere is built from them rather than from a tint of the primary. */
  --dawn-lavender: #c1afe1;
  --dawn-purple:   #a58ad9;
  --dawn-rose:     #d27ca9;
  --dawn-coral:    #d77a82;

  /* Warm accent. --dawn-rose is 2.92:1 and cannot carry text; this is the
     same hue darkened until it clears AA. */
  --rose-700: #a6446e;    /* DERIVED - 5.72:1 */

  /* ===== CTA (both stops clear 4.5:1 behind white; the midpoint #644299
     measures 7.55:1, so the label is safe across the whole sweep). The app's
     own gradient.start/end (#AE86EF -> #987CD8) is 2.82:1 / 3.38:1 and could
     never hold a white label, so the button darkens the same hue instead. */
  --cta-from: #7c5ab8;         /*  5.23:1 */
  --cta-to:   #4c2a7a;         /* 10.94:1 */
  --cta-from-hover: #6a46a3;   /*  6.96:1 - hover DARKENS; a lighter purple drops under AA */
  --cta-to-hover:   #3e1f63;   /* 13.28:1 */

  /* ===== Ink (app tailwind text.*) ===== */
  --ink-900: #030b1a;     /* text.primary  - 19.69:1 */
  --ink-700: #333333;     /* text.secondary - 12.63:1 */
  --ink-600: #4a4550;
  --ink-500: #57534e;     /* text.muted - 7.63:1 */
  --ink-300: #a8a29e;     /* text.placeholder */
  --ink-200: #d6d3d1;     /* text.disabled */
  --ink-100: #f2f0f4;

  /* ===== Status (app tailwind status.*) ===== */
  --success: #22c55e;
  --success-dark: #157f3c;    /* DERIVED - status.success is 2.28:1 */
  --error: #c02b3f;           /* DERIVED - status.error #FB7185 is 2.69:1 */
  --warning: #fbbf24;

  /* ===== Surfaces ===== */
  --white: #ffffff;
  --canvas: #ffffff;
  --wash: #fbf8ff;        /* palest lavender; the creative reads ~#b39fdc */
  --surface: #ffffff;
  --surface-2: #f9f5ff;

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

  --border: #ece4f8;
  --border-strong: #ddd0f2;
  --border-brand: rgba(157, 121, 216, 0.28);

  /* ===== Elevation - soft, layered, never a single flat blur ===== */
  --shadow-xs: 0 1px 2px rgba(43, 26, 69, 0.05);
  --shadow-sm: 0 1px 2px rgba(43, 26, 69, 0.06), 0 6px 16px -6px rgba(43, 26, 69, 0.09);
  --shadow-md: 0 2px 4px rgba(43, 26, 69, 0.04), 0 14px 34px -12px rgba(43, 26, 69, 0.17);
  --shadow-lg: 0 4px 8px rgba(43, 26, 69, 0.04), 0 30px 60px -22px rgba(43, 26, 69, 0.26);
  --shadow-brand: 0 14px 34px -12px rgba(157, 121, 216, 0.55);
  --shadow-cta: 0 14px 30px -10px rgba(76, 42, 122, 0.42), 0 0 0 4px rgba(157, 121, 216, 0.14);

  /* ===== Radii =====
     The app is PILL-SHAPED: tailwind borderRadius.button and .input are both
     9999px and .card is 30px. That is a real fork-level difference from the
     identifier apps' 12px buttons, and it is what makes the page read as
     the same product as the app rather than as a recoloured donor. */
  --radius-btn: 9999px;
  --radius-input: 9999px;
  --radius-sm: 18px;
  --radius: 22px;
  --radius-lg: 30px;      /* tailwind borderRadius.card */
  --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 (tailwind fontFamily
     .urbanist) and is on Google Fonts, so the UI voice is the app's, not a
     substitute. Recoleta - the app's display face - is a licensed font that
     cannot be webfont-served here; Fraunces carries the display line instead
     (see .display / h1-h4). */
  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(193, 175, 225, 0.42), transparent 62%),
    radial-gradient(760px 560px at -8% 16%, rgba(157, 121, 216, 0.16), transparent 60%),
    radial-gradient(900px 660px at 88% 104%, rgba(215, 122, 130, 0.13), transparent 62%),
    radial-gradient(700px 520px at 12% 92%, rgba(210, 124, 169, 0.10), 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 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
   it. Fraunces is the closest webfont relative (same soft, high-contrast
   old-style skeleton), and it is used ONLY where the app uses a serif: the
   display line, section headings and card titles. Body copy stays in
   Urbanist, which the app ships too. */
h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Recoleta', Georgia, serif;
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 34;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: var(--text);
}
.display {
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
  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(166, 68, 110, 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 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%);
  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(76, 42, 122, 0.5), 0 0 0 5px rgba(157, 121, 216, 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(43, 26, 69, 0.6);
}
.store-btn:hover { background: var(--brand-800); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(43, 26, 69, 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(43, 26, 69, 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: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'opsz' 40;
  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);
}

/* ===== Sunburst motif =====
   The app icon is a white sun rising over a horizon line, rays fanning out.
   That is this page's signature device - it replaces the identifier forks'
   four corner scan-brackets, because Becoming does not scan anything.
   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(157, 121, 216, 0.30) 0deg 2.1deg,
    transparent 2.1deg 7.5deg
  );
  -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, #ffffff 0%, #ece4f8 46%, #c8b7e5 100%);
  box-shadow:
    0 2px 4px rgba(43, 26, 69, 0.06),
    0 34px 64px -26px rgba(76, 42, 122, 0.42),
    0 0 0 1px rgba(43, 26, 69, 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);
}

/* ===== 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;
  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-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; } }