/* ==========================================================================
   EarnWhile — website styles
   ==========================================================================

   BRAND
   -----
   This site leads with the approved EarnWhile identity: the round-5 asymmetric
   Coin-E mark, white on navy #1B2F5F, locked by the founder brand selection
   (Issue #1 comment 5483074011). The palette below is built around that navy —
   complementary blues, soft blue-grey surfaces, an off-white page, dark-navy
   text, and a small set of restrained state accents.

   It is NOT a recolour of the previous green system. The type scale, spacing
   rhythm, surfaces, elevation, radii and components were rebuilt around the new
   mark rather than re-tinted.

   RELATIONSHIP TO THE APP
   ----------------------
   The previous version of this file mirrored the iOS app's
   EarnWhile/Views/Shared/DesignSystem.swift one-to-one and said so. That is no
   longer true and pretending otherwise would be the kind of stale comment that
   costs someone an afternoon: the brand has moved to navy on the web first, and
   migrating the app's palette is a separate, unstarted lane. Spacing and radius
   steps still line up with the app's scale. Colour deliberately does not, yet.

   The app is light-only — see docs/DARK_MODE.md — so this site commits to one
   light palette rather than inventing a dark theme the product does not have.
   The deep navy sections are a designed surface, not a theme. Every surface
   paints its own background explicitly so the page never borrows a host theme.

   CONTRAST
   --------
   Every text/background pairing in this file is checked by
   verification/site_a11y_check.py against WCAG 2.1 AA. Do not introduce a new
   pairing without adding it there.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --navy:        #1B2F5F;   /* PRIMARY — the approved brand navy */
  --navy-900:    #0B1424;   /* the deep ground — navy, taken almost to black */
  --navy-800:    #12224A;
  --navy-700:    #16264D;
  --navy-600:    #22397099;
  --navy-500:    #2A457F;
  --navy-400:    #3D5C9E;

  /* ---- Blues ---------------------------------------------------------- */
  --blue-600:    #2C57AE;
  --blue-500:    #3B6FD4;   /* interactive accent on light surfaces */
  --blue-400:    #5B8DEF;   /* decorative / glows — not small text */
  --blue-300:    #8FB4FF;   /* accent text ON navy */
  --blue-200:    #C3D4F5;
  --blue-100:    #E6EAF0;
  --blue-50:     #F1F4F9;   /* the faintest cool surface — reads as neutral */

  /* ---- Neutrals ------------------------------------------------------- */
  --ice:         #F7F8F9;   /* page background — neutral, not blue */
  --surface:     #FFFFFF;
  --surface-2:   #FBFBFC;
  --ink:         #0E1420;   /* primary text — near-black, faint navy undertone */
  --ink-2:       #575E6B;   /* secondary text — AA on every light surface */
  --ink-3:       #868D96;   /* large/decorative text and UI boundaries only */
  --border:      #E5E8ED;   /* hairline */
  --border-2:    #D5DAE2;
  --line-ui:     #868D96;   /* boundaries that must be perceivable (>=3:1) */

  /* ---- Reward-state accents -------------------------------------------
     Semantic, not brand. The cleared state was teal — chosen so no part of
     the retired green identity survived by accident — but on a navy site a
     teal badge is still the one thing on the page that reads as a rewards
     app. It is now navy-derived: a mid navy-blue, deliberately lighter than
     the #1B2F5F used for the mark and for actions, so "cleared" and "press
     this" are not the same colour. The state stays legible from its tint and
     its icon rather than from a hue borrowed from somewhere else.
     verification/site_brand_check.py still fails the build if a retired
     green comes back. */
  --pending:     #9A6206;
  --pending-bg:  #FDF2E0;
  --cleared:     #24487F;
  --cleared-bg:  #E8EEF9;
  --alert:       #B93529;
  --alert-bg:    #FBE8E6;
  --info-bg:     #E9EFFB;
  /* The disabled cash-out control in the wallet illustration. Its label is
     --ink-3 at 4.1:1, above the 3:1 floor and deliberately quieter than live
     text: it has to read as inactive, because it is. */
  --disabled-bg: #EDF1F8;

  /* On-navy accents */
  --on-navy:        #FFFFFF;
  --on-navy-soft:   #C3D4F5;
  --on-navy-amber:  #FFD79A;
  --on-navy-accent: #A9C9F5;
  /* Quiet on-navy text — captions, notes, footer body. A token rather than an
     rgba() blend so verification/site_a11y_check.py can actually read and check
     it; the blends it replaced were invisible to the contrast gate. 6.6:1 on
     the brand navy, 9.1:1 on the deepest. */
  --on-navy-quiet:  #A9BADB;

  /* ---- Spacing -------------------------------------------------------- */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 72px;
  --sp-4xl: 104px;

  /* ---- Radius --------------------------------------------------------- */
  --r-sm:     10px;
  --r-chip:   12px;
  --r-button: 14px;
  --r-card:   18px;
  --r-lg:     24px;
  --r-xl:     32px;
  --r-pill:   999px;

  /* ---- Elevation ------------------------------------------------------
     Blue-tinted rather than neutral grey, so shadows sit in the palette
     instead of muddying it. */
  --shadow-xs:    0 1px 2px rgba(15, 27, 51, 0.04);
  --shadow-sm:    0 2px 8px rgba(15, 27, 51, 0.05);
  --shadow-md:    0 8px 24px rgba(15, 27, 51, 0.07), 0 2px 6px rgba(15, 27, 51, 0.04);
  --shadow-lg:    0 18px 48px rgba(15, 27, 51, 0.10), 0 4px 12px rgba(15, 27, 51, 0.05);
  --shadow-phone: 0 40px 90px rgba(6, 14, 33, 0.45), 0 8px 24px rgba(6, 14, 33, 0.30);
  --shadow-onNavy: 0 20px 50px rgba(4, 10, 26, 0.45);

  /* ---- Type ------------------------------------------------------------
     No web fonts are loaded: it keeps the site dependency-free, matches the
     `font-src 'self'` CSP, and eliminates FOUT. The stack resolves to SF Pro
     on Apple devices, which is both the app's face and — importantly — the
     same straight-sided grotesque register as the approved EarnWhile
     wordmark, so the lockup reads as part of the page rather than pasted on.
     The previous stylesheet set display type in `ui-rounded`; the approved
     wordmark is not rounded, and the mismatch showed. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, sans-serif;

  --measure: 68ch;
  --page-max: 1220px;
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* belt-and-braces against a decorative element bleeding */
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
  font-weight: 700;
}

p { margin: 0; }

ul, ol { margin: 0; }

a { color: var(--blue-600); text-underline-offset: 3px; }
a:hover { color: var(--navy); }

/* A visible focus ring everywhere, including on deep surfaces where a navy
   ring would vanish. Do not remove this. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.on-deep a:focus-visible,
.on-deep button:focus-visible,
.on-deep summary:focus-visible {
  outline-color: var(--blue-300);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-button) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}

::selection { background: var(--blue-100); color: var(--navy); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  /* Fluid gutters. A fixed 24px left content sitting almost against the bezel
     at tablet widths, where the column is already near its max. */
  padding-inline: clamp(var(--sp-md), 3vw, var(--sp-xl));
}

.section { padding-block: var(--sp-4xl); position: relative; }
.section--tight { padding-block: var(--sp-3xl); }
.section--surface { background: var(--surface); }
.section--soft { background: linear-gradient(180deg, var(--blue-50), var(--ice)); }

/* Deep navy section. Carries its own background geometry: a fine grid and two
   soft radial glows, both pure CSS, both decorative. */
.section--deep,
.hero {
  background:
    radial-gradient(58rem 34rem at 82% -12%, rgba(91, 141, 239, 0.30), transparent 62%),
    radial-gradient(46rem 34rem at 4% 108%, rgba(91, 141, 239, 0.18), transparent 60%),
    linear-gradient(168deg, var(--navy-700) 0%, var(--navy) 46%, var(--navy-800) 100%);
  color: #FFFFFF;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--deep::before,
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(75% 65% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.section--deep h1, .section--deep h2, .section--deep h3,
.hero h1, .hero h2, .hero h3 { color: #FFFFFF; }

.grid { display: grid; gap: var(--sp-lg); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack-sm > * + * { margin-top: var(--sp-sm); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-lg > * + * { margin-top: var(--sp-lg); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-2xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: var(--sp-md); }

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.h1 {
  font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4.15rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.h2 {
  font-size: clamp(1.85rem, 1.35rem + 2.05vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.h3 {
  font-size: clamp(1.12rem, 1.04rem + 0.34vw, 1.32rem);
  line-height: 1.28;
  letter-spacing: -0.018em;
}
.h4 {
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.lede {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero .lede, .section--deep .lede, .on-deep .lede { color: var(--on-navy-soft); }

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow--muted { color: var(--ink-2); }
.eyebrow--onDeep { color: var(--blue-300); }

.muted { color: var(--ink-2); }
.small { font-size: 15px; }
.tiny  { font-size: 13.5px; }

.prose { max-width: var(--measure); }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: var(--sp-md); }
.prose strong { color: var(--ink); font-weight: 650; }

.center { text-align: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  min-height: 50px;          /* comfortable touch target */
  padding: 13px 24px;
  border-radius: var(--r-button);
  font-size: 16px;
  font-weight: 620;
  font-family: var(--font-ui);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--navy-700); color: #FFFFFF; }

.btn--secondary {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--border-2);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { border-color: var(--blue-400); color: var(--navy); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-2);
}
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }

/* On deep navy surfaces */
.btn--onDeep {
  background: #FFFFFF;
  color: var(--navy);
  box-shadow: var(--shadow-onNavy);
}
.btn--onDeep:hover { background: var(--blue-50); color: var(--navy); }

.btn--onDeepGhost {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.30);
}
.btn--onDeepGhost:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Badges, chips and pills
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: 0.005em;
  background: var(--info-bg);
  color: var(--navy);
  white-space: nowrap;
}
.badge--pending { background: var(--pending-bg); color: var(--pending); }
.badge--cleared { background: var(--cleared-bg); color: var(--cleared); }
.badge--alert   { background: var(--alert-bg);   color: var(--alert); }

.badge--onDeep {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Status pill — the "in development" line, on deep and light surfaces. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 13px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 580;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--on-navy-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.status-pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--on-navy-amber);
  flex: none;
  box-shadow: 0 0 0 4px rgba(255, 215, 154, 0.16);
}
.status-pill--light {
  background: var(--pending-bg);
  border-color: #F0DCB8;
  color: var(--pending);
}
.status-pill--light .dot {
  background: var(--pending);
  box-shadow: 0 0 0 4px rgba(154, 98, 6, 0.10);
}

/* --------------------------------------------------------------------------
   Cards and surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
}
.card--lg { padding: var(--sp-xl); border-radius: var(--r-lg); }
.card--flat { box-shadow: none; }
.card--tint { background: var(--surface-2); }

.card--onDeep {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.card--onDeep p { color: var(--on-navy-soft); }

.note {
  background: var(--info-bg);
  border: 1px solid var(--blue-100);
  border-left: 3px solid var(--navy);
  border-radius: var(--r-sm);
  padding: var(--sp-md) var(--sp-lg);
  font-size: 15.5px;
  color: var(--ink-2);
}
.note strong { color: var(--ink); }

.note--amber {
  background: var(--pending-bg);
  border-color: #F3E2C4;
  border-left-color: var(--pending);
}
.note--amber strong { color: var(--pending); }

.note--onDeep {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--on-navy-amber);
  color: var(--on-navy-soft);
}
.note--onDeep strong { color: #FFFFFF; }

/* Icon tile used across feature cards, categories and support topics. */
.icon-tile {
  width: 46px;
  height: 46px;
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  background: var(--blue-50);
  color: var(--navy);
  border: 1px solid var(--blue-100);
  flex: none;
}
.icon-tile svg { width: 23px; height: 23px; }
.icon-tile--onDeep {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.icon-tile--cleared { background: var(--cleared-bg); border-color: #CBD8EE; color: var(--cleared); }
.icon-tile--pending { background: var(--pending-bg); border-color: #F3E2C4; color: var(--pending); }
.icon-tile--alert   { background: var(--alert-bg);   border-color: #F5D3CF; color: var(--alert); }

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 249, 254, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
/* JS adds .is-stuck once the page has scrolled; without JS the header is still
   sticky and legible, just without the hairline. */
.site-header.is-stuck { border-bottom-color: var(--border); }

/* On pages whose first section is the deep hero, the header sits on navy until
   it sticks. */
.site-header--onDeep {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header--onDeep .brand__word { color: #FFFFFF; }
.site-header--onDeep .nav > a { color: var(--on-navy-soft); }
.site-header--onDeep .nav > a:hover { color: #FFFFFF; }
.site-header--onDeep .nav > a[aria-current="page"] { color: #FFFFFF; }
/* The base toggle is a white pill for light chrome. On the deep header only
   colour and border were being overridden, which left a white icon on a white
   background — an invisible menu button on every mobile page with a navy
   header. The background has to move with them. */
.site-header--onDeep .nav-toggle {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
}
.site-header--onDeep .nav-toggle:hover { background: rgba(255, 255, 255, 0.18); }

.site-header--onDeep.is-stuck {
  background: rgba(13, 23, 48, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* The approved Coin-E mark is inlined per page with fill="currentColor", so a
   single geometry serves every surface: navy on light chrome, white on the deep
   header and in the footer. The geometry itself is never altered — see
   assets/img/favicon.svg for the locked coordinates and where they come from. */
.brand__mark { width: 32px; height: 32px; flex: none; color: var(--navy); }
.site-header--onDeep .brand__mark,
.site-footer .brand__mark { color: #FFFFFF; }
.site-header--onDeep.is-stuck .brand__mark { color: #FFFFFF; }
.brand:hover .brand__word { color: var(--blue-600); }
.site-header--onDeep .brand:hover .brand__word,
.site-footer .brand:hover .brand__word { color: var(--blue-200); }
.brand__word {
  font-family: var(--font-display);
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--navy);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}
.nav > a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 560;
  padding: 6px 0;
}
.nav > a:hover { color: var(--navy); }
.nav > a[aria-current="page"] { color: var(--navy); font-weight: 640; }
.nav__cta { display: inline-flex; margin-left: var(--sp-xs); }
.nav__cta .btn { min-height: 42px; padding: 9px 18px; font-size: 15px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-chip);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--sp-3xl) var(--sp-4xl);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-3xl));
}

/* V2: the device column gets the larger share. In V1 the copy column was wider
   and the phone read as an illustration beside an argument; the product should
   be the thing you look at first. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--sp-2xl);
  align-items: center;
}

.hero__copy > * + * { margin-top: var(--sp-md); }
.hero__copy .note { margin-top: var(--sp-lg); font-size: 14.6px; }
.hero__copy .timepick { margin-top: var(--sp-lg); }
.hero__cta { margin-top: var(--sp-lg); }
.hero__title { max-width: 15ch; }
/* A solid accent, not a gradient clipped to text: background-clip:text is
   applied per line fragment, so across a wrap the first line came out white and
   the second blue. Predictable at every wrap point matters more than the
   gradient did. */
.hero__title em {
  font-style: normal;
  color: var(--blue-300);
}

.hero__points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-sm);
  max-width: 52ch;
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--on-navy-soft);
  font-size: 15.8px;
  line-height: 1.5;
}
.hero__points svg {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--blue-300);
}

/* The product visual column. */
/* .hero__stage exists only to give the decorative callouts a positioning
   context that is NOT the illustration container. See the comment beside them
   in index.html: inside it, they made the region's rendered text differ between
   390px and 1440px, and the runtime gate compares those. */
.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero__mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero__mock .phone { order: 1; }
/* Caption, under the illustration it describes. It is required to be visible
   text — the site-truth scan strips attributes before checking, so an
   aria-label alone would not satisfy the illustration contract. */
.hero__mock-note {
  order: 2;
  font-size: 12.4px;
  line-height: 1.5;
  color: var(--on-navy-quiet);
  max-width: 330px;
  text-align: center;
  margin-top: var(--sp-md);
}

/* --------------------------------------------------------------------------
   Page hero — the compact deep header used by every page that is not the
   homepage. Same navy field and grid as the hero, a third of the height. It is
   what stops the identity from being a homepage-only effect.
   -------------------------------------------------------------------------- */

.page-hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-3xl));
  padding-bottom: var(--sp-3xl);
}
.page-hero .section-head { margin-bottom: 0; }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-2xl);
  align-items: end;
}
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
}

/* Small key/value board used on the deep header of About and Support. */
.keyboard { display: grid; gap: var(--sp-xs); }
.keyboard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14.6px;
}
.keyboard__row:last-child { border-bottom: 0; }
.keyboard__row dt { color: var(--on-navy-quiet); margin: 0; }
.keyboard__row dd { color: #FFFFFF; margin: 0; font-weight: 620; text-align: right; }

/* --------------------------------------------------------------------------
   Time selector — the product's core idea, made operable
   -------------------------------------------------------------------------- */

.timepick { max-width: 34rem; }
.timepick__label {
  font-size: 13px;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: var(--sp-sm);
}
.timepick__row {
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
}
.timepick__btn {
  min-width: 66px;
  min-height: 48px;
  padding: 11px 18px;
  border-radius: var(--r-button);
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 660;
  cursor: pointer;
}
.timepick__btn:hover { background: rgba(255, 255, 255, 0.15); }
.timepick__btn[aria-pressed="true"] {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(4, 10, 26, 0.35);
}
.timepick__note {
  margin-top: var(--sp-sm);
  font-size: 13.4px;
  line-height: 1.5;
  color: var(--on-navy-quiet);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Phone mock — the app's Home screen, rebuilt in HTML in the new identity
   -------------------------------------------------------------------------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 392px;
  aspect-ratio: 392 / 775;
  border-radius: 54px;
  padding: 13px;
  background: linear-gradient(160deg, #33456F 0%, #1A2947 42%, #0B1430 100%);
  box-shadow: var(--shadow-phone);
  transform: translate3d(var(--phone-x, 0px), var(--phone-y, 0px), 0);
}
.phone::after {           /* the thin bright edge that reads as glass */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 54px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.phone__screen {
  height: 100%;
  border-radius: 43px;
  background: var(--ice);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px 5px;
  font-size: 14px;
  font-weight: 660;
  color: var(--ink);
  font-family: var(--font-num);
}
.phone__statusicons { display: inline-flex; gap: 5px; align-items: center; }
.phone__statusicons svg { width: 17px; height: 17px; color: var(--ink); }

.mock {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg) var(--sp-lg) 0;
  min-height: 0;
}
.mock__greeting {
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 560;
}

.mock__balance {
  margin-top: var(--sp-sm);
  padding: var(--sp-lg);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-800) 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.18);
}
.mock__balance-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-300);
}
.mock__balance-value {
  font-family: var(--font-num);
  font-size: 39px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 2px;
}
.mock__balance-meta {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.mock__balance-meta .badge { font-size: 12.5px; padding: 4px 10px; }
.mock__balance-meta .badge--pending { background: rgba(255, 215, 154, 0.18); color: var(--on-navy-amber); }
.mock__balance-meta .badge--cleared { background: rgba(169, 201, 245, 0.16); color: var(--on-navy-accent); }

.mock__question {
  margin-top: var(--sp-md);
  font-size: 14px;
  font-weight: 620;
  color: var(--ink-2);
}
.mock__chips { display: flex; gap: 6px; margin-top: 10px; }
.mock__chip {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 640;
  color: var(--ink-2);
}
.mock__chip.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}

.mock__section-label {
  margin-top: var(--sp-md);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}

.mock__card {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-md) var(--sp-md) var(--sp-lg);
  box-shadow: var(--shadow-sm);
}
.mock__partner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.mock__partner-name { font-size: 13px; color: var(--ink-2); font-weight: 560; }
.mock__partner .badge { font-size: 12px; padding: 3px 9px; }
.mock__title {
  margin-top: 6px;
  font-size: 17.5px;
  font-weight: 660;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
.mock__stats {
  margin-top: 11px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mock__reward {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.mock__duration { font-size: 13.5px; color: var(--ink-2); }
.mock__qual {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cleared);
  font-weight: 560;
}
.mock__why {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--blue-600);
}
.mock__cta {
  margin-top: 12px;
  padding: 11px;
  border-radius: var(--r-sm);
  background: var(--blue-50);
  border: 1px dashed var(--blue-200);
  text-align: center;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--navy);
  font-family: var(--font-num);
}

.mock__tabbar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding: 12px 0 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-inline: calc(var(--sp-lg) * -1);
  padding-inline: var(--sp-xs);
}
.mock__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 580;
  color: var(--ink-3);
}
.mock__tab svg { width: 21px; height: 21px; }
.mock__tab.is-on { color: var(--navy); }

/* Floating product cards beside the phone. Decorative, desktop only. */
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-onNavy);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink);
  max-width: 202px;
}
.float-card__icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}
.float-card__icon svg { width: 16px; height: 16px; }
.float-card strong { display: block; font-weight: 660; font-size: 12.8px; }
.float-card span { color: var(--ink-2); font-size: 11.6px; }

/* Positioned from the TOP for both, because .hero__mock is taller than the
   device — it also holds the illustration caption underneath — so a `bottom`
   offset put the second callout below the phone instead of against it. */
/* The callouts should kiss the device's edge, not sit across its screen. At
   -6% of the wider V2 column they covered the status bar and the reward card;
   -15% leaves roughly 30px of overlap on the bezel, which reads as depth. */
.float-card--a { top: 22%;  left: -15%; }
.float-card--b { top: 68%;  right: -15%; }

/* Below 1200px the callouts would sit on the phone's own screen rather than
   beside it, so they are removed rather than overlapped. They are decorative
   and aria-hidden, so nothing is lost. */
@media (max-width: 1200px) {
  .float-card { display: none; }
}

/* --------------------------------------------------------------------------
   Current-status strip

   V2 consolidates the three required current-state statements into ONE
   deliberate component instead of repeating them through the marketing copy.
   They are still verbatim, still inside <main>, and still the first thing under
   the hero — but they read as a status board rather than as an apology
   interrupting every section.
   -------------------------------------------------------------------------- */

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.status-strip__item { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.status-strip__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  margin-top: 7px;
  background: var(--pending);
  box-shadow: 0 0 0 4px rgba(154, 98, 6, 0.12);
}
.status-strip__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.status-strip__value { font-size: 14.6px; line-height: 1.45; color: var(--ink-2); }
.status-strip__value strong { color: var(--ink); font-weight: 640; }

/* --------------------------------------------------------------------------
   App surface — a reconstructed panel from the real iOS app

   Used for the product moments that are NOT the hero device: the wallet and the
   recommendation reasoning. Same design language as the phone mock but framed
   as a floating surface, so the page shows the product three times without
   showing the same picture three times.

   Strings and structure are reconstructed from the actual app source
   (EarnWhile/Views/Wallet/WalletView.swift and
   EarnWhile/Views/Explore/OpportunityDetailView.swift) rather than invented, so
   what a visitor sees is what is being built.
   -------------------------------------------------------------------------- */

.app-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  width: 100%;
}
.app-surface--onDeep {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-onNavy);
}

.wallet__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wallet__value {
  font-family: var(--font-num);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--cleared);
  margin-top: 2px;
}
.wallet__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border);
}
.wallet__pair-label {
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wallet__pair-value {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 660;
  margin-top: 3px;
  color: var(--ink);
}
.wallet__pair-value svg { width: 15px; height: 15px; }
.wallet__pair-value--pending { color: var(--pending); }

.wallet__rows { margin-top: var(--sp-lg); display: grid; gap: 2px; }
.wallet__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.wallet__row-main { min-width: 0; }
.wallet__row-title {
  font-size: 14.6px;
  font-weight: 620;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet__row-meta {
  font-size: 12.6px;
  color: var(--ink-2);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.wallet__row-amount {
  font-family: var(--font-num);
  font-size: 15.5px;
  font-weight: 660;
  flex: none;
  /* Aligned to the row's first line, not its centre: when the meta line wraps
     at 390px the amount otherwise floats halfway down the row. */
  align-self: flex-start;
  color: var(--ink);
}
.wallet__row-amount--muted { color: var(--ink-3); text-decoration: line-through; }

/* The disabled cash-out control, shown because it is true. The app ships this
   state and saying so is the whole transparency argument. */
.wallet__cta {
  margin-top: var(--sp-lg);
  padding: 13px;
  border-radius: var(--r-button);
  background: var(--disabled-bg);
  border: 1px solid var(--border-2);
  text-align: center;
  font-size: 15px;
  font-weight: 620;
  color: var(--ink-3);
}
.wallet__cta-note {
  margin-top: var(--sp-xs);
  font-size: 12.4px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
}

/* Recommendation reasoning — the app's "Why EarnWhile recommends this" card. */
.reason__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-chip);
  background: var(--info-bg);
  color: var(--navy);
  font-weight: 640;
  font-size: 14.6px;
}
.reason__head svg { width: 17px; height: 17px; flex: none; }
.reason__list { list-style: none; padding: 0; margin-top: var(--sp-md); display: grid; gap: var(--sp-sm); }
.reason__item { display: flex; gap: 10px; align-items: flex-start; }
.reason__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.reason__icon svg { width: 13px; height: 13px; }
.reason__icon--up   { background: var(--cleared-bg); color: var(--cleared); }
.reason__icon--down { background: var(--pending-bg); color: var(--pending); }
.reason__icon--unk  { background: var(--info-bg);    color: var(--navy); }
.reason__text { font-size: 14.4px; line-height: 1.45; color: var(--ink-2); }
.reason__text strong { color: var(--ink); font-weight: 640; }

/* --------------------------------------------------------------------------
   Split — a product visual beside its argument

   The V2 shape for the two lower product moments. The visual leads on desktop
   (or trails, with --reverse) and always stacks visual-first on mobile, because
   a wall of prose above a screenshot is exactly the order this redesign is
   trying to invert.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3xl);
  align-items: center;
}
.split--reverse .split__visual { order: 2; }
.split--reverse .split__copy   { order: 1; }

.split__visual { display: flex; flex-direction: column; align-items: center; }
.split__caption {
  margin-top: var(--sp-md);
  max-width: 44ch;
  text-align: center;
  font-size: 12.4px;
  line-height: 1.5;
  color: var(--ink-2);
}
.on-deep .split__caption,
.section--deep .split__caption { color: var(--on-navy-quiet); }

.split__copy > * + * { margin-top: var(--sp-lg); }
.split__visual > * + * { margin-top: var(--sp-lg); }

/* The state legend when it sits under a product panel rather than in a prose
   column: full panel width, tighter, no card of its own. */
.legend--panel {
  width: 100%;
  max-width: 460px;
  gap: 9px;
}
.legend--panel > div { grid-template-columns: 112px minmax(0, 1fr); }
.legend--panel dd { font-size: 14px; }

@media (max-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xl); }
  .split--reverse .split__visual,
  .split--reverse .split__copy { order: 0; }
}

/* --------------------------------------------------------------------------
   Feature cards — "why EarnWhile"
   -------------------------------------------------------------------------- */

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.feature > * + * { margin-top: var(--sp-sm); }
.feature h3 { font-size: 1.06rem; }
.feature p { color: var(--ink-2); font-size: 15.2px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Steps ("How it works") — numbered because the order genuinely matters
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-lg);
  counter-reset: step;
  position: relative;
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
}
.step > * + * { margin-top: var(--sp-xs); }
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: var(--sp-sm);
}
.step h3 { font-size: 1.02rem; }
.step p { color: var(--ink-2); font-size: 14.8px; line-height: 1.52; }
/* Must outrank `.step p` above (0,1,1) — a bare `.step__n` (0,1,0) loses to it
   and the number comes out grey-on-navy. */
.step .step__n { color: #FFFFFF; font-size: 16px; line-height: 1; }

/* The connector between steps, drawn only where there is a next step. */
@media (min-width: 861px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 43px;
    right: calc(var(--sp-lg) * -1);
    width: var(--sp-lg);
    height: 2px;
    background: linear-gradient(90deg, var(--border-2), var(--blue-200));
  }
}

/* --------------------------------------------------------------------------
   Reward lifecycle rail — the transparency showpiece
   -------------------------------------------------------------------------- */

.rail {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-lg);
  position: relative;
}

.rail__item {
  position: relative;
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rail__item > * + * { margin-top: var(--sp-sm); }
.rail__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rail__dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.rail__dot svg { width: 18px; height: 18px; stroke-width: 2; }
.rail__item h3 { font-size: 1.02rem; color: #FFFFFF; }
.rail__item p  { font-size: 14.6px; line-height: 1.5; color: var(--on-navy-soft); }

.rail__item--tracking .rail__dot { color: var(--blue-300); }
.rail__item--pending  .rail__dot { color: var(--on-navy-amber); }
.rail__item--cleared  .rail__dot { color: var(--on-navy-accent); }

/* Stacked rail: in the transparency split the three states run DOWN the copy
   column rather than across the page. This has to live after `.rail` — it is
   the same specificity, so source order is what decides it. */
.rail--stack { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }
.rail--stack .rail__item { padding: var(--sp-md) var(--sp-lg); }
.rail--stack .rail__item::after { display: none; }
.rail--stack .rail__item > * + * { margin-top: 6px; }
.rail--stack + .rail-aside { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }

/* Arrow between rail steps. */
@media (min-width: 861px) {
  .rail__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--sp-lg) * -1 - 1px);
    width: calc(var(--sp-lg) + 2px);
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(143, 180, 255, 0.25), rgba(143, 180, 255, 0.75));
  }
}

/* The two states that are not on the happy path. */
.rail-aside {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}
.rail-aside__item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: var(--sp-md);
  border-radius: var(--r-chip);
  background: rgba(185, 53, 41, 0.10);
  border: 1px solid rgba(255, 160, 150, 0.24);
}
.rail-aside__item svg { width: 19px; height: 19px; color: #FFB3AA; flex: none; margin-top: 2px; }
.rail-aside__item strong { color: #FFFFFF; font-weight: 640; display: block; font-size: 14.6px; }
.rail-aside__item span { color: var(--on-navy-soft); font-size: 13.8px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Factor list — the ranking signals
   -------------------------------------------------------------------------- */

.factors { list-style: none; padding: 0; display: grid; gap: var(--sp-md); }

.factor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: var(--sp-md);
  align-items: center;
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--border);
}
.factor:last-child { border-bottom: 0; padding-bottom: 0; }
.factor__name { font-weight: 640; font-size: 15.5px; color: var(--ink); }
.factor__desc { font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.factor__bar {
  display: block;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--blue-100);
  border: 1px solid var(--border-2);
  overflow: hidden;
}
.factor__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--navy), var(--blue-500));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Category cards
   -------------------------------------------------------------------------- */

.cat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.cat > * + * { margin-top: var(--sp-sm); }
.cat h3 { font-size: 1.04rem; }
.cat p { color: var(--ink-2); font-size: 14.8px; line-height: 1.52; }

/* --------------------------------------------------------------------------
   Status legend — real TransactionStatus values from the app
   -------------------------------------------------------------------------- */

.legend { display: grid; gap: var(--sp-sm); margin: 0; }
.legend > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--sp-sm);
  align-items: start;
}
.legend dt { margin: 0; }
.legend dd { margin: 0; font-size: 14.6px; color: var(--ink-2); line-height: 1.5; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.band {
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-xl), 4vw, var(--sp-3xl));
  background:
    radial-gradient(40rem 24rem at 88% -20%, rgba(91, 141, 239, 0.34), transparent 60%),
    linear-gradient(150deg, var(--navy-700), var(--navy) 55%, var(--navy-900));
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 30%, #000, transparent);
          mask-image: radial-gradient(70% 70% at 60% 30%, #000, transparent);
}
/* Centred. Left-aligned copy in a full-width band leaves roughly 40% of the
   final call to action empty at desktop widths, which reads as an unfinished
   layout rather than as deliberate space. */
.band { text-align: center; }
.band > * + * { margin-top: var(--sp-md); }
.band .lede,
.band > p { margin-inline: auto; }
.band .btn-row { justify-content: center; }
.band h2 { color: #FFFFFF; }
/* The band is a deep surface inside a LIGHT section, so it is not matched by
   the `.section--deep .lede` rule and its body text was inheriting the
   light-surface colour — dark grey on navy. */
.band .lede  { color: var(--on-navy-soft); }
.band p      { color: var(--on-navy-soft); }
.band strong { color: #FFFFFF; }
/* Plain links only. `.band a` (0,1,1) outranks `.btn--onDeep` (0,1,0), so an
   unscoped rule here painted the white primary button's label white — an empty
   white pill on the page's main call to action. Buttons carry their own
   colours and must be excluded. */
.band a:not(.btn) { color: #FFFFFF; }
.band .btn-row { margin-top: var(--sp-lg); }

/* --------------------------------------------------------------------------
   Long-form document pages — Privacy, Terms
   -------------------------------------------------------------------------- */

/* The rail is a SIBLING of <main>, not a child of it.

   The site-truth scan digests the visible text of <main> for each legal
   document, so anything added inside it would read as a substantive legal edit
   and fail the version gate — correctly. Putting the rail outside <main> keeps
   the reviewed document byte-identical while still giving the page a real
   contents column, and a <nav> beside the main landmark is the right semantics
   for it anyway. */
.doc-page {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--sp-3xl);
  align-items: start;
}
.doc-main { padding-block: var(--sp-3xl); }

.doc-side {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-xl));
  margin-top: var(--sp-3xl);
  max-height: calc(100vh - var(--header-h) - var(--sp-2xl));
  overflow-y: auto;
  padding-right: var(--sp-xs);
}

/* On desktop the rail IS the table of contents, so the in-document card is
   hidden rather than duplicated. Its markup stays in <main> — it is part of the
   reviewed document — and it comes back below 981px where the rail does not
   fit. */
@media (min-width: 981px) {
  .doc .toc { display: none; }
}
.doc-side__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-sm);
}
.doc-side ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  border-left: 1px solid var(--border);
}
.doc-side li { counter-increment: toc; }
.doc-side a {
  display: block;
  padding: 6px 0 6px var(--sp-md);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14.2px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
}
.doc-side a:hover { color: var(--navy); border-left-color: var(--border-2); }
.doc-side a.is-current {
  color: var(--navy);
  font-weight: 640;
  border-left-color: var(--navy);
}

.doc { max-width: 74ch; }
.doc h1 { margin-bottom: var(--sp-xs); }
.doc h2 {
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  margin-top: var(--sp-2xl);
  margin-bottom: var(--sp-sm);
  padding-top: var(--sp-xs);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.doc h3 {
  font-size: 1.04rem;
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-xs);
}
.doc p, .doc li { color: var(--ink-2); font-size: 16.2px; line-height: 1.68; }
.doc p + p { margin-top: var(--sp-md); }
.doc ul, .doc ol { margin: var(--sp-md) 0; padding-left: var(--sp-lg); }
.doc li + li { margin-top: var(--sp-xs); }
.doc strong { color: var(--ink); font-weight: 640; }
/* `.doc p` is (0,1,1) and would otherwise win over a bare `.doc__meta`. */
.doc .doc__meta {
  color: var(--ink-3);
  font-size: 14.4px;
  line-height: 1.5;
  margin-bottom: var(--sp-lg);
}
.doc .note { margin-block: var(--sp-lg); }

/* The in-document TOC. Retained on narrow screens where the rail is hidden. */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  margin-block: var(--sp-lg);
  box-shadow: var(--shadow-xs);
}
.toc > p {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-sm);
}
.toc ol {
  margin: 0;
  padding-left: var(--sp-lg);
  columns: 2;
  column-gap: var(--sp-lg);
  font-size: 14.6px;
}
.toc li { margin-bottom: 5px; break-inside: avoid; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--navy); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Support page
   -------------------------------------------------------------------------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-md);
}
.topic {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
}
.topic strong { display: block; font-weight: 640; font-size: 15.4px; color: var(--ink); }
.topic span { display: block; font-size: 13.8px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.topic .icon-tile { width: 38px; height: 38px; }
.topic .icon-tile svg { width: 19px; height: 19px; }

.faq {
  /* Constrained to the measure the section heads use. Full-bleed accordion rows
     put a 30-character question in front of 800px of nothing. */
  max-width: 820px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.faq > details + details { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  font-weight: 620;
  font-size: 16px;
  color: var(--ink);
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { background: var(--surface-2); }
.faq__body { padding: 0 var(--sp-lg) var(--sp-lg); }
.faq__body p { color: var(--ink-2); font-size: 15.4px; line-height: 1.62; }
.faq__body p + p { margin-top: var(--sp-sm); }
.faq__body ul { margin: var(--sp-sm) 0 0; padding-left: var(--sp-lg); }
.faq__body li { color: var(--ink-2); font-size: 15.2px; line-height: 1.55; }
.faq__body li + li { margin-top: 5px; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.err {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.err__code {
  font-family: var(--font-num);
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(160deg, var(--navy), var(--blue-400));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-soft);
  padding-block: var(--sp-3xl) var(--sp-xl);
  margin-top: 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 2.4fr;
  gap: var(--sp-2xl) var(--sp-3xl);
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-xl);
}
.site-footer__brand .brand__word { color: #FFFFFF; }
.site-footer__brand > p {
  margin-top: var(--sp-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-navy-quiet);
  max-width: 42ch;
}
.site-footer h2 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: var(--sp-sm);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.site-footer a:not(.btn):not(.brand) {
  color: var(--on-navy-soft);
  text-decoration: none;
  font-size: 14.8px;
  /* The support address is one long token; let it break rather than push the
     column it lives in over its neighbour. */
  overflow-wrap: anywhere;
}
.site-footer a:not(.btn):not(.brand):hover { color: #FFFFFF; text-decoration: underline; }

.site-footer__base {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-lg);
  justify-content: space-between;
  font-size: 13.4px;
  color: var(--on-navy-quiet);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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

.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }
.measure { max-width: var(--measure); }
.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Motion and micro-interactions

   Rules this layer follows:
     1. Nothing here is required to read the page. Every animated element is
        already in its final state in the stylesheet; JS only ever ADDS an
        "animate from" class.
     2. Transitions are short and on transform/opacity only.
     3. The reduced-motion block at the end turns all of it off.
   -------------------------------------------------------------------------- */

.card, .feature, .cat, .step, .topic {
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1),
              box-shadow 220ms ease,
              border-color 220ms ease;
}
.card:hover, .feature:hover, .cat:hover, .step:hover,
.card:focus-within, .feature:focus-within, .cat:focus-within, .step:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}
.topic:hover, .topic:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--blue-200);
}

.btn { transition: background-color 160ms ease, border-color 160ms ease,
                   transform 160ms ease, box-shadow 160ms ease; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.nav > a { transition: color 140ms ease; }
.site-header { transition: background-color 220ms ease, border-color 220ms ease; }

.timepick__btn { transition: background-color 150ms ease, border-color 150ms ease,
                             color 150ms ease, box-shadow 200ms ease; }

.icon-tile { transition: background-color 200ms ease, border-color 200ms ease; }
.feature:hover .icon-tile, .cat:hover .icon-tile { border-color: var(--blue-200); }

/* The preview card's content swap. */
.mock__swap { transition: opacity 130ms ease, transform 130ms ease; }
.mock__swap.is-swapping { opacity: 0; transform: translateY(5px); }

/* ---------- Hero callouts: a slow idle drift ----------

   Six pixels over nine seconds, the two cards out of phase. It is below the
   threshold of "something is animating" and above the threshold of "this page
   is alive" — which is the whole brief for motion here. Decorative and
   aria-hidden, so nothing is lost when it is switched off. */
@keyframes ew-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
.float-card { animation: ew-drift 9s ease-in-out infinite; }
.float-card--b { animation-duration: 11s; animation-delay: -3.5s; }

/* ---------- The lifecycle rail fills as it arrives ----------
   The connector between the three states grows once, when the rail first
   appears. It reads as the progression the section is describing. */
.rail__item:not(:last-child)::after { transform-origin: left center; }

/* ---------- Product panels lift on hover ---------- */
.app-surface {
  transition: transform 320ms cubic-bezier(0.22, 0.8, 0.3, 1),
              box-shadow 320ms ease;
}
.app-surface:hover { transform: translateY(-4px); }

/* ---------- The device leans, very slightly, toward the pointer ----------
   Driven from site.js; the transform is declared here so the element has a
   resting state with no script at all. */

/* ---------- Scroll reveal (JS opt-in) ---------- */
.ew-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms cubic-bezier(0.22, 0.8, 0.3, 1),
              transform 560ms cubic-bezier(0.22, 0.8, 0.3, 1);
  will-change: opacity, transform;
}
.ew-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Ranking bars (JS opt-in) ----------
   Grown with scaleX rather than width so the animation stays on the
   compositor and the layout never reflows mid-transition. */
.ew-bar { transform: scaleX(0); transition: transform 900ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.ew-bar.is-in { transform: scaleX(1); }

/* ---------- Reduced motion ----------
   The global block near the top collapses durations, which stops movement but
   leaves an element that was armed at opacity 0 invisible. These rules put the
   armed states back to their final appearance so a reduced-motion visitor sees
   a complete page, not a blank one. Removing this makes content disappear. */
@media (prefers-reduced-motion: reduce) {
  .ew-reveal { opacity: 1 !important; transform: none !important; }
  .ew-bar { transform: scaleX(1) !important; }
  .card:hover, .feature:hover, .cat:hover, .step:hover, .topic:hover,
  .btn:hover, .btn:active { transform: none !important; }
  .phone { transform: none !important; }
  .faq summary::after { transition: none !important; }
  .float-card { animation: none !important; transform: none !important; }
  .app-surface:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Responsive

   This block lives at the END of the stylesheet on purpose: several rules here
   override component defaults declared above, and source order is what makes
   that work without specificity games.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --sp-4xl: 84px; --sp-3xl: 60px; }
  .hero__grid { gap: var(--sp-2xl); }
  .doc-page { grid-template-columns: 204px minmax(0, 1fr); gap: var(--sp-2xl); }
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2xl);
  }
  .hero__title { max-width: 18ch; }
  .hero__mock { margin-inline: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-side { display: none; }       /* the in-document .toc takes over */
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-strip { grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
}

/* ---------- Mobile navigation ----------
   Below 861px the nav becomes a stacked drawer of full-width targets. site.js
   only collapses it once it knows JS is running, so a visitor without JS always
   has a visible, usable menu. */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .site-header__inner { flex-wrap: wrap; }

  .nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--sp-sm);
  }
  .nav[hidden] { display: none; }
  .nav > a {
    padding: 14px 4px;
    font-size: 16.5px;
    border-bottom: 1px solid var(--border);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .site-header--onDeep .nav > a { border-bottom-color: rgba(255, 255, 255, 0.14); }
  .nav__cta { margin: var(--sp-sm) 0 0; width: 100%; }
  .nav__cta .btn { width: 100%; min-height: 48px; }

  /* The drawer animates open. Reduced motion collapses the duration, and the
     end state is the open one, so nothing is hidden by turning motion off. */
  .nav:not([hidden]) { animation: ew-drawer 220ms cubic-bezier(0.22, 0.8, 0.3, 1); }
  @keyframes ew-drawer {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail-aside { grid-template-columns: minmax(0, 1fr); }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .toc ol { columns: 1; }

  .factor { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
  .factor__bar { max-width: 200px; }

  .legend > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* MOBILE FOOTER.

     V1 stacked four full-width blocks and the footer became a dark wall roughly
     a screen and a half tall. The three link groups now sit three-up in a
     compact grid: the same destinations, none hidden, at about half the
     height. */
  .site-footer { padding-block: var(--sp-2xl) var(--sp-lg); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
  /* Two columns, not three: at 390px a third of the width is ~110px, and
     `support@earnwhile.app` is a single unbreakable token wider than that — it
     spilled straight across the Legal column. */
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-lg) var(--sp-md); }
  .site-footer__nav ul { gap: 7px; }
  .site-footer a:not(.btn):not(.brand) { font-size: 13.6px; }
  .site-footer h2 { font-size: 10.8px; margin-bottom: 8px; }
  .site-footer__brand > p { font-size: 13px; margin-top: var(--sp-sm); }
  .site-footer__base { flex-direction: column; margin-top: var(--sp-lg); padding-top: var(--sp-md); }
}

@media (max-width: 560px) {
  :root { --sp-4xl: 64px; --sp-3xl: 48px; --sp-2xl: 36px; }
  .card, .feature, .cat, .step, .rail__item { padding: var(--sp-md); }
  .card--lg { padding: var(--sp-lg); }
  .band { padding: var(--sp-lg); border-radius: var(--r-lg); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .nav__cta .btn { width: 100%; }
  .timepick__btn { flex: 1; min-width: 0; width: auto; }
  .faq summary { padding: var(--sp-sm) var(--sp-md); font-size: 15.4px; }
  .faq__body { padding: 0 var(--sp-md) var(--sp-md); }
  .doc p, .doc li { font-size: 16px; }
}

/* ==========================================================================
   VISUAL REFRESH — premium, calm, financial
   ==========================================================================
   The V2 page led with a saturated navy field: hero, page headers and several
   bands all carried the same gradient, two radial glows and a grid overlay.
   It read as a product-marketing template rather than a financial product.

   This layer changes appearance only. No content, no legal text, no route, no
   disclosure and no gate contract is touched — every rule below sets colour,
   spacing, radius, weight or elevation.

   The system:
     surfaces   white, with off-white and the faintest cool grey for rhythm
     ink        near-black with a navy undertone, so type belongs to the mark
     brand      navy #1B2F5F — the mark, primary actions, and one deep band
     restraint  hairlines instead of borders, near-flat cards, tight tracking

   Navy is the accent, not the atmosphere. It appears on the mark, on the
   things you can press, and on a single dark band; everywhere else the page
   is white and grey. That inversion is the whole redesign.
   ========================================================================== */

:root {
  /* Precision over softness. The V2 radii (18-32px) read as friendly; a
     financial surface reads as exact. */
  --r-sm:     8px;
  --r-chip:   10px;
  --r-button: 12px;
  --r-card:   14px;
  --r-lg:     18px;
  --r-xl:     22px;

  /* Elevation is nearly gone. A hairline does the work a shadow was doing,
     which is what stops a page of cards looking like a dashboard demo. */
  --shadow-xs:     0 1px 2px rgba(14, 20, 32, 0.05);
  --shadow-sm:     0 1px 2px rgba(14, 20, 32, 0.05);
  --shadow-md:     0 4px 16px rgba(14, 20, 32, 0.06);
  --shadow-lg:     0 12px 32px rgba(14, 20, 32, 0.08);
  --shadow-phone:  0 28px 64px rgba(11, 20, 36, 0.26), 0 6px 18px rgba(11, 20, 36, 0.14);
  --shadow-onNavy: 0 16px 40px rgba(4, 10, 26, 0.35);

  --page-max: 1160px;
  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   Header — light on every page, because no page leads with a dark field now.
   -------------------------------------------------------------------------- */
.site-header,
.site-header--onDeep {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.site-header--onDeep.is-stuck,
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.90);
  border-bottom-color: var(--border);
}
.site-header--onDeep .brand__word,
.site-header--onDeep.is-stuck .brand__word { color: var(--ink); }
.site-header--onDeep .brand__mark,
.site-header--onDeep.is-stuck .brand__mark { color: var(--navy); }
.site-header--onDeep .nav > a { color: var(--ink-2); }
.site-header--onDeep .nav > a:hover,
.site-header--onDeep .nav > a[aria-current="page"] { color: var(--ink); }
.site-header--onDeep .nav-toggle {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-2);
}
.site-header--onDeep .nav-toggle:hover { background: var(--ice); border-color: var(--ink-3); }
.nav > a { font-size: 15px; font-weight: 520; }
.nav__cta .btn { font-size: 15px; }

/* --------------------------------------------------------------------------
   Hero — white. The single largest change on the site.
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, var(--ice) 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-2xl) var(--sp-3xl);
  padding-top: calc(var(--header-h) + var(--sp-2xl));
}
/* The grid overlay and the two radial glows belonged to the navy field. */
.hero::before { display: none; }
.hero h1, .hero h2, .hero h3 { color: var(--ink); }
.hero .lede { color: var(--ink-2); }
.hero__title em { color: var(--navy); font-style: normal; }
.hero__points li { color: var(--ink-2); }
.hero__points svg { color: var(--navy); opacity: 0.85; }
.hero__mock-note { color: var(--ink-3); }
.hero__grid { gap: var(--sp-3xl); align-items: center; }

/* The status pill sat on navy; on white it becomes a hairline chip. */
.hero .status-pill {
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
  box-shadow: none;
  font-weight: 500;
}
.hero .status-pill .dot { background: var(--pending); }

/* Hero actions: the primary is navy, the secondary a hairline. */
.hero .btn--onDeep {
  background: var(--navy);
  color: #FFFFFF;
  border-color: var(--navy);
  box-shadow: none;
}
.hero .btn--onDeep:hover { background: var(--navy-700); }
.hero .btn--onDeepGhost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-2);
}
.hero .btn--onDeepGhost:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }

/* Time selector, on white. */
.hero .timepick__label { color: var(--ink-3); }
.hero .timepick__note { color: var(--ink-3); }
.hero .timepick__btn {
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--ink);
  box-shadow: none;
}
.hero .timepick__btn:hover { border-color: var(--ink-3); }
.hero .timepick__btn[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}

/* The floating callouts: hairline cards, not glassy chips. */
.float-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   Page header — the compact band on About / Support / Privacy / Terms / 404.
   Was the same navy field; now white, separated by a hairline.
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.page-hero::before { display: none; }
.page-hero h1, .page-hero h2, .page-hero h3 { color: var(--ink); }
.page-hero .lede { color: var(--ink-2); }
.page-hero .eyebrow, .page-hero .eyebrow--onDeep { color: var(--ink-3); }
.page-hero .status-pill,
.page-hero .status-pill--light {
  background: var(--ice);
  border: 1px solid var(--border);
  color: var(--ink-2);
  box-shadow: none;
}
.page-hero .btn--onDeep {
  background: var(--navy); color: #FFFFFF; border-color: var(--navy); box-shadow: none;
}
.page-hero .btn--onDeepGhost {
  background: var(--surface); color: var(--ink); border-color: var(--border-2);
}

/* --------------------------------------------------------------------------
   Type — tighter, quieter, more confident.
   -------------------------------------------------------------------------- */
.h1 { letter-spacing: -0.033em; line-height: 1.04; font-weight: 680; }
.h2 { letter-spacing: -0.027em; line-height: 1.1;  font-weight: 660; }
.h3 { letter-spacing: -0.02em;  font-weight: 640; }
.h4 { letter-spacing: -0.012em; font-weight: 620; }
.lede { color: var(--ink-2); font-weight: 400; letter-spacing: -0.005em; }
.eyebrow {
  color: var(--ink-3);
  letter-spacing: 0.10em;
  font-size: 11.5px;
  font-weight: 620;
}
.eyebrow--muted { color: var(--ink-3); }
.section-head { margin-bottom: var(--sp-xl); }

/* --------------------------------------------------------------------------
   Sections — white by default, off-white for rhythm.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--sp-3xl); }
.section--surface { background: var(--surface); }
.section--soft { background: var(--ice); }
body { background: var(--surface); }

/* The one dark band, and it is calm: a flat deep navy with no glow and no
   grid. It exists so the wallet reads as a product surface and so the brand
   lands once, hard, instead of tinting the whole page. */
.section--deep {
  background: var(--navy-900);
  color: #FFFFFF;
}
.section--deep::before { display: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  min-height: 46px;
  padding: 12px 20px;
  font-size: 15.5px;
  font-weight: 600;
  border-width: 1px;
  letter-spacing: -0.006em;
}
.btn--primary { background: var(--navy); color: #FFFFFF; border-color: var(--navy); box-shadow: none; }
.btn--primary:hover { background: var(--navy-700); }
.btn--secondary { border-color: var(--border-2); color: var(--ink); box-shadow: none; }
.btn--secondary:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--ghost { border-color: var(--border-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Cards and small surfaces — hairline, near-flat.
   -------------------------------------------------------------------------- */
.card {
  border-color: var(--border);
  box-shadow: none;
  padding: var(--sp-lg);
}
.card--lg { padding: var(--sp-xl); }
.card--tint { background: var(--ice); border-color: var(--border); }

.icon-tile {
  width: 38px; height: 38px;
  background: var(--ice);
  border-color: var(--border);
  color: var(--ink);
  border-radius: var(--r-sm);
}
.icon-tile svg { width: 19px; height: 19px; }

.badge { font-weight: 600; letter-spacing: 0; }
.note { border-radius: var(--r-card); }
.status-pill { box-shadow: none; }

/* Feature rows read as a considered list, not a grid of boxes. */
.feature { gap: var(--sp-md); }
.feature p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Status strip — the three required statements, directly under the hero.
   Quieter surface, same words, same prominence in the reading order.
   -------------------------------------------------------------------------- */
.status-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.status-strip__label { color: var(--ink-3); }
.status-strip__value { color: var(--ink); }
.status-strip__dot { background: var(--navy); opacity: 0.55; }

/* --------------------------------------------------------------------------
   The device
   -------------------------------------------------------------------------- */
/* The device frame sized itself with `aspect-ratio`, which does not give the
   screen a definite height to resolve `height: 100%` against. The screen fell
   back to its content height and overflowed the frame by 22px, so the frame
   and its shadow painted over the first line of the illustration caption
   underneath — the caption the truth scan requires to be visible. The frame
   now takes its height from the screen it contains. */
.phone { aspect-ratio: auto; box-shadow: var(--shadow-phone); }
.phone__screen { height: auto; }
.mock__balance { border-radius: var(--r-card); }
.mock__card { border-radius: var(--r-card); border-color: var(--border); }
.mock__cta { border-radius: var(--r-sm); }

/* --------------------------------------------------------------------------
   Splits, wallet, reasoning — the product moments.
   -------------------------------------------------------------------------- */
.split { gap: var(--sp-3xl); align-items: center; }
.split__caption { color: var(--ink-3); }
.section--deep .split__caption { color: var(--on-navy-quiet); }
.wallet__label { color: var(--ink-3); letter-spacing: 0.08em; }
.wallet__value { letter-spacing: -0.03em; }
.wallet__cta { border-radius: var(--r-button); }

/* The balance is the page's biggest number, and it was the page's biggest
   colour: --cleared was a teal-green then, so the one thing the eye went to
   first read as a rewards-app total. A balance is not a state — the badges
   below it carry the states — so it is set in ink and the states keep their
   own colours. */
.wallet__value { color: var(--ink); }

/* The closing call to action was still the old saturated field: a blue
   gradient with a radial glow and a grid, sitting a few hundred pixels under
   the calm dark band. One dark treatment, used twice. */
.band {
  background: var(--navy-900);
  box-shadow: none;
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-xl), 4vw, var(--sp-3xl));
}
.band::before { display: none; }

/* The header action: white-on-white once the header stopped being navy. */
.nav__cta .btn--onDeep {
  background: var(--navy);
  color: #FFFFFF;
  border-color: var(--navy);
  box-shadow: none;
}
.nav__cta .btn--onDeep:hover { background: var(--navy-700); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Documents — Privacy and Terms. The reviewed words are untouched; only the
   reading surface changes.
   -------------------------------------------------------------------------- */
.doc-side__title { color: var(--ink-3); }
.doc h2 { letter-spacing: -0.02em; }
.doc p, .doc li { color: var(--ink-2); }
.toc { background: var(--ice); border-color: var(--border); border-radius: var(--r-card); }

/* Support */
.faq { border-color: var(--border); border-radius: var(--r-card); }
.topic { border-color: var(--border); box-shadow: none; }

/* 404 */
/* The numeral was a navy-to-blue gradient clipped to the text, which a flat
   palette makes look like a leftover effect — and `-webkit-text-fill-color`
   meant a plain `color` could not override it. It is now quiet, so the
   sentence under it is the thing you read. */
.err__code {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ink-3);
  letter-spacing: -0.04em;
  font-weight: 660;
}

/* --------------------------------------------------------------------------
   Footer — the second dark surface, and the last thing on the page.
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); }
.site-footer__base { border-top-color: rgba(255, 255, 255, 0.10); }

/* --------------------------------------------------------------------------
   Narrow widths
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + var(--sp-xl)); padding-bottom: var(--sp-2xl); }
  .hero__grid { gap: var(--sp-xl); }
  .section { padding-block: var(--sp-2xl); }
  .h1 { letter-spacing: -0.028em; }
}

/* --------------------------------------------------------------------------
   Page header, resolved
   --------------------------------------------------------------------------
   About and Support carry `section section--deep page-hero on-deep` on one
   element. The calm-dark-band rule above has the same specificity as the
   page-hero rule and comes later, so it repainted the band dark while the
   page-hero rules had already set the type to ink: a headline in near-black
   on near-black, on two of the six pages. Scoping to both classes settles it
   by specificity instead of by source order.
   -------------------------------------------------------------------------- */
.section--deep.page-hero {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.section--deep.page-hero::before { display: none; }
.section--deep.page-hero h1,
.section--deep.page-hero h2,
.section--deep.page-hero h3 { color: var(--ink); }
.section--deep.page-hero .lede { color: var(--ink-2); }
.section--deep.page-hero .eyebrow,
.section--deep.page-hero .eyebrow--onDeep { color: var(--ink-3); }

/* The fact table beside the headline: hairlines and ink, not white-on-navy. */
.section--deep.page-hero .keyboard__row { border-bottom-color: var(--border); }
.section--deep.page-hero .keyboard__row dt { color: var(--ink-2); }
.section--deep.page-hero .keyboard__row dd { color: var(--ink); }

.section--deep.page-hero .btn--onDeep {
  background: var(--navy); color: #FFFFFF; border-color: var(--navy); box-shadow: none;
}
.section--deep.page-hero .btn--onDeep:hover { background: var(--navy-700); color: #FFFFFF; }
.section--deep.page-hero .btn--onDeepGhost {
  background: var(--surface); color: var(--ink); border-color: var(--border-2);
}
.section--deep.page-hero .btn--onDeepGhost:hover { border-color: var(--ink-3); color: var(--ink); }
.section--deep.page-hero a:not(.btn) { color: var(--navy); }
.section--deep.page-hero .status-pill,
.section--deep.page-hero .status-pill--light {
  background: var(--ice); border: 1px solid var(--border); color: var(--ink-2); box-shadow: none;
}

/* The on-deep focus ring is white, which is invisible on a white band. */
.page-hero.on-deep a:focus-visible,
.page-hero.on-deep button:focus-visible,
.page-hero.on-deep summary:focus-visible { outline-color: var(--blue-500); }