/* ====================================================================
   Evolve Landing Page - design system
   Twelfth fork of the template (TCGBrain -> StarBrain -> ComicBrain ->
   CoinBrain -> StampBrain -> Becoming -> FireUp -> Daily Grace -> Noor ->
   Sadhana -> Shalom -> Evolve). Section grammar and script.js are inherited
   unchanged.

   TOKENS COME FROM THE SHIPPED APP - src/config/theme.ts. The brand is a
   lime Secondary #b0fc4e over a deep forest #163b1a, with #569605 /
   #3f6b04 as primary and primaryDark, on the app's white and #f7f7f7.

   THIS FORK INVERTS THE USUAL PROBLEM. Every previous accent in this line
   was too dark or too saturated to sit under white text. Evolve's is the
   opposite: it is too LIGHT to carry text on a light page at all. Measured
   on white / #f7f7f7 / #e1f5e3 / #d1e6d3:

     #b0fc4e   1.24 / 1.16 / 1.09 / 1.06   the app accent - GRAPHICS ONLY
     #569605   3.65 / 3.40 / 3.19 / 2.77   app primary - large text at best
     #3f6b04   6.33 / 5.91 / 5.54 / 4.82   app primaryDark - carries text
     #163b1a  12.54 /11.71 /10.97 / 9.54   app deep forest - the workhorse
     #0d2410  16.66 /15.55 /14.57 /12.67   DERIVED, the CTA card's floor

   1.24:1 is not a near miss, it is a non-starter: #b0fc4e can never carry
   text on this page, at any size. It is used for fills, the radiance, the
   player bar and the tick badges, and nowhere else.

   BUT IT IS AN EXCELLENT BACKGROUND. The app's own pairing - #163b1a ink on
   a #b0fc4e ground - measures 10.08:1, which is why the lime pill reads so
   well in the store creative. Where this page puts lime behind something, the
   ink on it is the forest, never white: white on #b0fc4e is 1.24:1.

   THE CTA RUNS #3f6b04 -> #163b1a with a white label (6.33:1 and 12.54:1,
   midpoint #2a530f at 8.96:1). The app's own paywall does the same thing -
   ctaBg #163b1a, onCta #ffffff.

   SECOND ACCENT is the app's linkAccent #015a61, a deep teal that measures
   7.97:1 on white, so unlike the sibling forks' gold it needed no darkening.

   FONTS: Manrope only. The app bundles Manrope in seven weights and uses it
   throughout; it also bundles Luxenta, which is a licensed retail face with
   no web licence here, and Inter-Regular in one place. Manrope is on Google
   Fonts, so the page's whole voice is the app's own with no serif stand-in -
   and no display face this fork is not entitled to serve.
   ==================================================================== */

:root {
  /* ===== Brand - the app's lime over its forest ===== */
  --brand-50:  #f6fdf6;
  --brand-100: #eefbef;
  --brand-200: #e1f5e3;   /* app light green surface */
  --brand-300: #d1e6d3;   /* app tertiary */
  --brand-400: #c4fa84;
  --brand-500: #b0fc4e;   /* app Secondary - THE accent. 1.24:1. NEVER text. */
  --brand-600: #569605;   /* app primary - 2.77:1 at worst, large text only */
  --brand-700: #3f6b04;   /* app primaryDark - 4.82:1 at worst, carries text */
  --brand-800: #163b1a;   /* app deep forest - 9.54:1 at worst */
  --brand-900: #0d2410;   /* DERIVED - 12.67:1 at worst */
  --deep-900:  #061309;   /* the CTA card's floor */

  /* ===== The creative's own field ===== */
  --dawn-pale:  #d1e6d3;
  --dawn-mid:   #b0fc4e;
  --dawn-deep:  #569605;
  --dawn-deeper:#3f6b04;

  /* Second accent - the app's linkAccent, 7.97:1 on white as shipped. */
  --teal-700: #015a61;
  /* What goes ON the forest card: the app's own lime, 10.08:1 against it. */
  --lime-200: #b0fc4e;

  /* ===== CTA - primaryDark into forest. Midpoint #2a530f is 8.96:1. ===== */
  --cta-from: #3f6b04;
  --cta-to:   #163b1a;
  --cta-from-hover: #2d5212;
  --cta-to-hover:   #0d2410;

  /* ===== Ink (app tokens) ===== */
  --ink-900: #030b1a;     /* app text.black */
  --ink-700: #222222;     /* app text.primary */
  --ink-600: #44443f;
  --ink-500: #57534e;     /* app muted */
  --ink-300: #a8a29e;
  --ink-200: #d6d3d1;
  --ink-100: #e0e0e0;

  /* ===== Status ===== */
  --success: #157f3c;
  --success-dark: #157f3c;
  --error: #c02b3f;
  --warning: #015a61;

  /* ===== Surfaces ===== */
  --white: #ffffff;
  --canvas: #ffffff;
  --wash: #f8fdf8;
  --surface: #ffffff;
  --surface-2: #e1f5e3;

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

  --border: #e4efe5;
  --border-strong: #d1e6d3;
  --border-brand: rgba(86, 150, 5, 0.28);

  /* ===== Elevation - forest-shadowed ===== */
  --shadow-xs: 0 1px 2px rgba(22, 59, 26, 0.05);
  --shadow-sm: 0 1px 2px rgba(22, 59, 26, 0.06), 0 6px 16px -6px rgba(22, 59, 26, 0.10);
  --shadow-md: 0 2px 4px rgba(22, 59, 26, 0.04), 0 14px 34px -12px rgba(22, 59, 26, 0.18);
  --shadow-lg: 0 4px 8px rgba(22, 59, 26, 0.05), 0 30px 60px -22px rgba(22, 59, 26, 0.28);
  --shadow-brand: 0 14px 34px -12px rgba(86, 150, 5, 0.40);
  --shadow-cta: 0 14px 30px -10px rgba(22, 59, 26, 0.40), 0 0 0 4px rgba(86, 150, 5, 0.18);

  /* ===== Radii ===== */
  --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. android/app/src/main/assets/fonts ships
     Inter (the UI face, 79 fontFamily references in src/) and PlayfairDisplay
     Regular/Medium/SemiBold/Bold/Black (43 references, the headline face).
     Nothing here is a substitute for something the app does not have - the
     first fork in this line where that is true of the display face too. */
  font-family: 'Manrope', -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. The Play feature graphic is a green field with a mandala
   glowing behind the seated figure; this is that light turned into a
   page-wide source, run pale so the page stays a light page. Fixed, so long
   scrolls keep the light in one place. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(880px 620px at 78% -10%, rgba(176, 252, 78, 0.34), transparent 62%),
    radial-gradient(760px 560px at -8% 16%, rgba(225, 245, 227, 0.75), transparent 60%),
    radial-gradient(900px 660px at 88% 104%, rgba(86, 150, 5, 0.10), transparent 62%),
    radial-gradient(700px 520px at 12% 92%, rgba(86, 150, 5, 0.07), 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 =====
   Playfair Display carries headings and Inter carries everything else -
   which is exactly what the app does (PlayfairDisplay-Bold on headings,
   Inter on body), so the page's voice is the app's voice rather than an
   approximation of it.
   NOTE: Hebrew appears on this page ONLY inside the app screenshots, never
   as live text, so no Hebrew webfont is loaded. The app itself does render
   Hebrew - quotes carry a hebrewText field, rendered in QuotesScreen,
   FullPreviewScreen and ShowWatermarkScreen - but nothing here transliterates
   or re-sets it. */
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); }
/* Second accent - the app's own linkAccent #015a61, used as shipped: it
   measures 7.97:1 on white, so unlike the sibling forks' gold and saffron it
   needed no darkening at all. */
.accent-alt { color: var(--teal-700); }

/* Eyebrow - carries the app icon's spiral motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Manrope', 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(--teal-700);
  border-color: rgba(86, 150, 5, 0.22);
  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: 'Manrope', 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 - primaryDark into forest, the app's own paywall pairing
   (ctaBg #163b1a, onCta #ffffff). Both stops are text-safe behind white
   (6.33:1 and 12.54:1) and so is the midpoint #2a530f (8.96:1). The lime
   itself is nowhere near this button: white on #b0fc4e is 1.24:1. */
.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(22, 59, 26, 0.5), 0 0 0 5px rgba(86, 150, 5, 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(22, 59, 26, 0.6);
}
.store-btn:hover { background: var(--brand-800); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22, 59, 26, 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(22, 59, 26, 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 lime spiral, and the store creative sets its figure
   against a mandala of light on a green field. That is this page's signature
   device: a green 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(86, 150, 5, 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, #f8fdf8 0%, #eefbef 46%, #d1e6d3 100%);
  box-shadow:
    0 2px 4px rgba(22, 59, 26, 0.07),
    0 34px 64px -26px rgba(22, 59, 26, 0.38),
    0 0 0 1px rgba(22, 59, 26, 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: 'Manrope', 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; } }

/* ===== Brand motif =====
   The app's OWN swirl glyph (src/assets/images/evolveSwirlGlyph.png), not a
   drawn approximation. It ships as a white silhouette on transparency - one
   colour among every opaque pixel, 66% alpha coverage - so it can be served
   as a MASK and inherit currentColor, which lets one asset sit in the eyebrow,
   the step icons and the dark CTA card at three different tints. Using it as a
   plain <img> would have pinned it to white and forced a redraw to tint it. */
.motif {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('images/motif-swirl.png') center / contain no-repeat;
          mask: url('images/motif-swirl.png') center / contain no-repeat;
}
.eyebrow .motif { width: 15px; height: 15px; }
.step-icon .motif, .feature-icon .motif, .float-icon .motif { width: 24px; height: 24px; }