/* ===========================================================================
   WEEKLY — marketing site
   Single-typeface, bold-and-confident, green-anchored.
   Hierarchy comes from weight, size, color — never italic.
   =========================================================================== */

/* ---------- TOKENS --------------------------------------------------------- */

:root {
  /* Height of the sticky site header, used for scroll offsets. */
  --header-h: 93px;

  /* Brand */
  --green-50:        #EFFBF5;
  --green-100:       #D5F5E5;
  --green-200:       #A6EBC9;
  --green-300:       #5DE9B5;
  --green-500:       #24CC97;   /* PRIMARY — Safe-to-Spend */
  --green-600:       #1FAA80;
  --green-700:       #178162;
  --green-900:       #0A3D2D;
  --cyan-glow:       #07D4FA;

  --blue-500:        #1983FF;
  --blue-700:        #1080C6;
  --blue-900:        #033553;

  --orange-500:      #FF7744;
  --yellow-500:      #FFCC66;
  --purple-500:      #9071E0;
  --pink-500:        #FF4578;

  /* Surface — clean cool-neutral whites. The brand atmosphere comes from the
     subtle green/cyan radial gradients on the body, not from a cream base. */
  --bg:              #FBFCFD;
  --bg-2:            #F3F5F7;
  --bg-3:            #E7EBEF;
  --surface:         #FFFFFF;
  --surface-warm:    #FFFFFF;

  /* Ink */
  --ink:             #14181E;
  --ink-2:           #2D343C;
  --ink-3:           #4A5159;
  --ink-4:           #6E747C;
  --ink-5:           #9CA3AB;

  /* Lines */
  --line:            #E6E9ED;
  --line-strong:     #C9CDD3;

  --link:            var(--green-700);
  --link-hover:      var(--green-600);

  /* Type — single typeface family. Avenir Next on Apple, Plus Jakarta Sans
     elsewhere. Both are geometric humanist sans with similar proportions. */
  --font-sans:       'Avenir Next', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale (fluid) */
  --fs-xs:    0.8125rem;   /* 13px */
  --fs-sm:    0.9375rem;   /* 15px */
  --fs-base:  1.0625rem;   /* 17px */
  --fs-md:    1.1875rem;   /* 19px */
  --fs-lg:    1.375rem;    /* 22px */
  --fs-xl:    1.75rem;     /* 28px */
  --fs-2xl:   clamp(1.875rem, 2.6vw + 1rem,  2.5rem);
  --fs-3xl:   clamp(2.25rem, 3.6vw + 1rem,  3.25rem);
  --fs-4xl:   clamp(2.75rem, 5vw   + 1rem,  4.5rem);
  --fs-5xl:   clamp(3.25rem, 7vw   + 1rem,  6rem);

  /* Weights — Avenir Next has full range; Plus Jakarta covers similar */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-heavy:     800;

  /* Spacing */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4.5rem;
  --s-9:   7rem;
  --s-10:  10rem;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  --container:        1200px;
  --container-wide:   1320px;
  --container-narrow: 720px;

  --shadow-1: 0 1px 2px rgba(20, 24, 30, 0.04), 0 2px 6px rgba(20, 24, 30, 0.04);
  --shadow-2: 0 6px 16px rgba(20, 24, 30, 0.06), 0 2px 4px rgba(20, 24, 30, 0.04);
  --shadow-3: 0 18px 40px rgba(20, 24, 30, 0.10), 0 4px 12px rgba(20, 24, 30, 0.06);
  --shadow-glow: 0 30px 80px -20px rgba(36, 204, 151, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Slightly cooler, cleaner blacks — less warm/aged. Lifted bg by a hair
       so cards have a clearer separation. */
    --bg:           #101317;
    --bg-2:         #161A1F;
    --bg-3:         #1E232A;
    --surface:      #1C2026;
    --surface-warm: #1C2026;

    --ink:          #F4F2EA;
    --ink-2:        #DCDAD0;
    --ink-3:        #B5B7BB;
    --ink-4:        #8A8E96;
    --ink-5:        #5F646C;

    --line:         #262C35;
    --line-strong:  #383F4A;

    --green-50:     #0A2E22;
    --green-100:    #0F4632;
    --link:         #5DE9B5;
    --link-hover:   #A6EBC9;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 0 transparent;
  }
}

/* ---------- RESET ---------------------------------------------------------- */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: 'ss01' on, 'cv11' on;
  font-variant-ligatures: common-ligatures;
}
/* Light-mode atmosphere: very subtle. Dark mode: none. */
@media (prefers-color-scheme: light) {
  body {
    background-image:
      radial-gradient(at 0% 0%,   rgba(36, 204, 151, 0.025) 0px, transparent 45%),
      radial-gradient(at 100% 0%, rgba(7, 212, 250, 0.02)   0px, transparent 45%);
    background-attachment: fixed;
  }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.06em;
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Suppress browser italic on <em> — emphasis comes through color/weight */
em, i { font-style: normal; }

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

/* ---------- TYPOGRAPHY ----------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold);  letter-spacing: -0.025em; line-height: 1.08; }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);  letter-spacing: -0.018em; line-height: 1.15; }
h4 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); letter-spacing: -0.01em;  line-height: 1.25; }
h5 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); letter-spacing: -0.005em; line-height: 1.3; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--green { color: var(--green-600); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-3);
  font-weight: var(--fw-regular);
}

.numerals {
  font-feature-settings: 'tnum' on, 'lnum' on, 'ss01' on;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Color emphasis — replaces italic for accent words in headlines */
.accent { color: var(--green-600); }
.accent--ink { color: var(--ink); }
.accent--gold { color: var(--yellow-500); }

/* ---------- LAYOUT --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.25rem);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); }
.section--tight { padding-block: clamp(var(--s-6), 5vw, var(--s-8)); }

.section-head { max-width: 56ch; margin-bottom: var(--s-7); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- BUTTONS -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.4em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }

.btn--primary {
  background: var(--green-500);
  color: #FFFFFF;
  border-color: var(--green-500);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px rgba(36,204,151,0.30);
}
.btn--primary:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(36,204,151,0.35);
}

.btn--dark {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: 0 6px 16px rgba(20,24,30,0.18);
}
.btn--dark:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--bg);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn--lg { padding: 1.05em 1.7em; font-size: var(--fs-base); }
.btn--sm { padding: 0.65em 1.1em; font-size: var(--fs-xs); }

.btn .arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn:hover .arrow { transform: translateX(3px); }

.btn__store-icon { flex-shrink: 0; }

/* ---------- BADGES / PILLS ------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill--green {
  background: var(--green-50);
  color: var(--green-700);
  border-color: rgba(36,204,151,0.25);
}
.pill--green::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(36,204,151,0.18);
  animation: pillpulse 2.4s ease-in-out infinite;
}
@keyframes pillpulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(36,204,151,0.18); }
  50%       { box-shadow: 0 0 0 6px rgba(36,204,151,0.06); }
}

/* ---------- SITE HEADER ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: 1rem;
}

/* Brand wordmark — Fredoka 700 with half-split mint gradient */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.site-header__brand-logo {
  display: block;
  height: 60px;
  width: auto;
}
.site-header__brand:hover { text-decoration: none; }

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

.site-header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-6);
}
.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.site-header__nav-item { position: relative; }
.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  padding-block: 0.4rem;
  position: relative;
}
.site-header__nav-link:hover,
.site-header__nav-link[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}
.site-header__nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--green-500);
  border-radius: 2px;
}
.site-header__chevron {
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
  flex-shrink: 0;
  margin-top: 1px;
}
.site-header__nav-item--has-dropdown:hover .site-header__chevron,
.site-header__nav-item--has-dropdown:focus-within .site-header__chevron {
  transform: rotate(180deg);
}

/* Dropdown menu (desktop) */
.site-header__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), visibility 220ms;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-2);
  box-shadow: var(--shadow-3);
  min-width: 320px;
  z-index: 100;
}
.site-header__nav-item--has-dropdown:hover .site-header__dropdown,
.site-header__nav-item--has-dropdown:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-header__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.site-header__dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  color: var(--ink);
  transition: background-color 160ms ease;
}
.site-header__dropdown-link:hover {
  background: var(--green-50);
  text-decoration: none;
  color: var(--ink);
}
.site-header__dropdown-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.site-header__dropdown-link:hover .site-header__dropdown-title { color: var(--green-700); }
.site-header__dropdown-desc {
  font-size: 0.82rem;
  color: var(--ink-4);
  line-height: 1.4;
}

/* CTA visible on desktop */
.site-header__cta { flex-shrink: 0; }
/* Inline CTA inside the slide-in mobile nav (hidden on desktop) */
.site-header__nav-cta { display: none; }

/* Hamburger toggle (mobile only) */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background-color 160ms ease;
}
.hamburger span {
  position: absolute;
  left: 8px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 200ms ease, top 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 19px; }
.hamburger span:nth-child(3) { top: 24px; }
.hamburger:hover { background: var(--bg-2); }

@media (max-width: 880px) {
  /* Drawer-style expansion from behind the header — no slide from above.
     When closed: no background or border so nothing visually peeks through.
     When open: surface bg + border + shadow appear instantly while max-height
     animates the height. */
  .site-header__nav {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--s-3);
    padding: 0 var(--s-5);
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    max-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: max-height 280ms cubic-bezier(0.25, 0.8, 0.3, 1);
    z-index: 49;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .site-header:has(.mobile-nav__input:checked) .site-header__nav {
    max-height: calc(100dvh - 61px);
    padding: var(--s-4) var(--s-5) var(--s-7);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.08);
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
  }

  .site-header__nav-link {
    padding: 0.85rem 0.5rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    border-radius: 10px;
    justify-content: space-between;
    width: 100%;
  }
  .site-header__nav-link[aria-current="page"]::after { display: none; }
  .site-header__nav-link[aria-current="page"] {
    background: var(--green-50);
    color: var(--green-700);
  }
  .site-header__chevron {
    display: inline-block;
    margin-left: auto;
    width: 14px;
    height: 14px;
  }

  /* Dropdowns: collapsed by default, expand when parent toggled (.is-open).
     Override the desktop hover/focus-within rules so :focus-within from a tap
     doesn't shift the dropdown off-screen. */
  .site-header__dropdown,
  .site-header__nav-item--has-dropdown:hover > .site-header__dropdown,
  .site-header__nav-item--has-dropdown:focus-within > .site-header__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 var(--s-4);
    min-width: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    transition: max-height 240ms cubic-bezier(0.25, 0.8, 0.3, 1);
  }
  /* Collapsed by default on mobile */
  .site-header__dropdown {
    max-height: 0;
  }
  .site-header__nav-item--has-dropdown.is-open > .site-header__dropdown {
    max-height: 540px;
  }
  .site-header__nav-item--has-dropdown.is-open > .site-header__nav-link .site-header__chevron {
    transform: rotate(180deg);
  }
  .site-header__dropdown-link { padding: 0.55rem 0.5rem; }
  .site-header__dropdown-title { font-weight: var(--fw-semibold); }
  .site-header__dropdown-desc { display: none; }

  .site-header__cta { display: none; }
  .site-header__nav-cta {
    display: inline-flex;
    width: 100%;
    margin-top: var(--s-3);
  }

  .hamburger { display: block; margin-left: auto; }

  .site-header:has(.mobile-nav__input:checked) .hamburger span:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
  }
  .site-header:has(.mobile-nav__input:checked) .hamburger span:nth-child(2) { opacity: 0; }
  .site-header:has(.mobile-nav__input:checked) .hamburger span:nth-child(3) {
    top: 19px;
    transform: rotate(-45deg);
  }
  body:has(.mobile-nav__input:checked) { overflow: hidden; }
}

/* ---------- HERO ----------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--s-7), 9vw, var(--s-10)) clamp(var(--s-7), 7vw, var(--s-8));
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -10%; right: -15%;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 30% 30%, rgba(36,204,151,0.10), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -20%; left: -10%;
  width: 45vw; height: 45vw;
  max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(7,212,250,0.07), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  /* No radial atmosphere glows in dark mode — they read aged/grungy. */
  .hero::before,
  .hero::after { display: none; }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

.hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  animation: rise 800ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero__title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: var(--s-5);
  color: var(--ink);
  animation: rise 900ms 80ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero__lead {
  font-size: clamp(var(--fs-md), 1.4vw + 0.7rem, var(--fs-xl));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 38ch;
  margin-bottom: var(--s-6);
  animation: rise 900ms 160ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  animation: rise 900ms 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero__cta-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--ink-4);
  font-weight: var(--fw-medium);
}
.hero__cta-meta::before {
  content: "";
  display: block;
  width: 28px; height: 1px;
  background: var(--line-strong);
}

/* ---------- SAFE-TO-SPEND CARD (hero visual) ------------------------------ */

.sts-card {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-7);
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3), var(--shadow-glow);
  animation: rise 1200ms 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 30%),
    linear-gradient(180deg, transparent 80%, rgba(36,204,151,0.04) 100%);
}
@media (prefers-color-scheme: dark) {
  /* The white-overlay gradient reads dirty against dark surface. Use a clean,
     flat surface in dark mode, with a slightly cleaner border. */
  .sts-card {
    background-image: none;
    background: var(--surface);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-3);
  }
}
.sts-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.sts-card__week {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}
.sts-card__day {
  font-size: 0.78rem;
  color: var(--ink-3);
  font-weight: var(--fw-medium);
}

.sts-card__amount {
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(3rem, 6vw + 1rem, 4.5rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  margin-bottom: var(--s-2);
}
.sts-card__amount .currency {
  font-size: 0.42em;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-right: 0.04em;
  align-self: flex-start;
  margin-top: 0.4em;
}
.sts-card__amount .cents {
  font-size: 0.42em;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  margin-left: -0.04em;
  letter-spacing: 0;
}

.sts-card__label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-5);
}
.sts-card__label .delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
}

.sts-card__bar {
  height: 8px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--s-4);
  position: relative;
}
.sts-card__bar-fill {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  box-shadow: 0 0 12px rgba(36,204,151,0.40);
  animation: barFill 1600ms 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.sts-card__bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-4);
  font-weight: var(--fw-medium);
}

.sts-card__txns {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.txn-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-sm);
}
.txn-row__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  background: var(--bg-2);
}
.txn-row__icon--coffee  { background: #FFF1E0; }
.txn-row__icon--grocery { background: var(--green-50); }
.txn-row__icon--gas     { background: #F2EBFF; }
.txn-row__name { color: var(--ink-2); font-weight: var(--fw-medium); }
.txn-row__amount {
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-3);
  font-weight: var(--fw-semibold);
}

/* ---------- SOCIAL PROOF STRIP -------------------------------------------- */

.proof {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-6);
  background: var(--bg-2);
}
.proof__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5);
  align-items: center;
}
.proof__stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.proof__stat-num {
  font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.proof__stat-num .accent { color: var(--green-600); }
.proof__stat-num .accent--gold { color: #FFB800; }
.proof__stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}

/* ---------- TRUST BAND ----------------------------------------------------- */

.trust {
  padding-block: clamp(var(--s-7), 5vw, var(--s-8));
}
.trust__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 820px) {
  .trust__items { grid-template-columns: 1fr; gap: var(--s-5); }
}
.trust__item {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.trust__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(36, 204, 151, 0.25);
}
.trust__icon svg {
  width: 20px;
  height: 20px;
}
.trust__item h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.012em;
  margin-bottom: 0.2em;
  color: var(--ink);
}
.trust__item p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 36ch;
}

/* ---------- BIG IDEA (contrast) ------------------------------------------- */

.big-idea {
  padding-block: clamp(var(--s-8), 10vw, var(--s-10));
  position: relative;
}
.big-idea__head { margin-bottom: var(--s-8); }
.big-idea__head .eyebrow { margin-bottom: var(--s-3); }
.big-idea__head h2 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
  max-width: 24ch;
  margin-bottom: var(--s-4);
  line-height: 1.05;
}
.big-idea__head h2 .accent { color: var(--green-600); }

.big-idea__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 820px) {
  .big-idea__compare { grid-template-columns: 1fr; }
  .big-idea__divider { display: none; }
}

.compare-card {
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-warm);
  position: relative;
}
.compare-card--old {
  background: var(--bg-2);
  color: var(--ink-4);
  border-color: var(--line);
  border-style: dashed;
}
.compare-card--old .compare-card__label {
  color: var(--pink-500);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.compare-card--old .compare-card__label::before {
  content: "✕";
  font-weight: var(--fw-heavy);
  font-size: 1.05em;
  letter-spacing: 0;
}
.compare-card--old .compare-card__title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 69, 120, 0.45);
  text-decoration-skip-ink: none;
}
.compare-card--old p { color: var(--ink-4); }
.compare-card--old .cat-chip {
  filter: grayscale(60%);
  opacity: 0.65;
}

.compare-card--new {
  background: linear-gradient(155deg, var(--surface-warm) 0%, var(--green-50) 100%);
  border-color: rgba(36,204,151,0.3);
  box-shadow: 0 20px 40px -20px rgba(36,204,151,0.25);
}

.compare-card__label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-4);
  margin-bottom: var(--s-3);
}
.compare-card--new .compare-card__label { color: var(--green-700); }

.compare-card__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-bottom: var(--s-4);
  color: var(--ink);
}

.cat-chaos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: var(--s-4);
}
.cat-chip {
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--fw-medium);
}
.cat-chip__amt { color: var(--ink-4); font-size: 0.72rem; font-weight: var(--fw-semibold); }
.cat-chip:nth-child(3n+2) { background: var(--surface); }

.one-number {
  margin-top: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--radius-md);
  background: var(--surface-warm);
  border: 1px solid rgba(36,204,151,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.one-number__amt {
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.4rem, 5vw + 0.5rem, 3.2rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.045em;
  color: var(--green-700);
  line-height: 1;
}
.one-number__label {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
}

.big-idea__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: var(--fw-heavy);
  color: var(--green-600);
  letter-spacing: 0;
}

/* ---------- HOW IT WORKS -------------------------------------------------- */

.how {
  padding-block: clamp(var(--s-8), 8vw, var(--s-9));
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  counter-reset: step;
}
@media (max-width: 820px) {
  .how__steps { grid-template-columns: 1fr; gap: var(--s-5); }
}

.how__step {
  position: relative;
  padding-top: var(--s-6);
  counter-increment: step;
}
.how__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-size: 1.2rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  color: var(--green-600);
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.how__step::after {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 2.6rem;
  right: 0;
  height: 1px;
  background: var(--line-strong);
}
.how__step h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-3);
  letter-spacing: -0.015em;
}
.how__step p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 32ch;
}

/* ---------- FEATURES GRID -------------------------------------------------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px) { .features-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }

.feature-card {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 280ms ease;
  overflow: hidden;
  isolation: isolate;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}
.feature-card a.feature-card__link {
  position: absolute; inset: 0;
  text-indent: -9999px;
  z-index: 2;
}
.feature-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.feature-card h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.feature-card p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
}
.feature-card__more {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--green-700);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.feature-card__more .arrow { transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.feature-card:hover .feature-card__more .arrow { transform: translateX(3px); }

.feature-card--lead   { grid-column: span 7; min-height: 280px; background: linear-gradient(155deg, var(--surface-warm) 0%, var(--green-50) 100%); border-color: rgba(36,204,151,0.25); }
.feature-card--side   { grid-column: span 5; }
.feature-card--third  { grid-column: span 4; }
.feature-card--half   { grid-column: span 6; }
.feature-card--wide   { grid-column: span 8; }

@media (max-width: 980px) {
  .feature-card--lead, .feature-card--side, .feature-card--wide { grid-column: span 6; }
  .feature-card--third, .feature-card--half { grid-column: span 3; }
}
@media (max-width: 600px) {
  .feature-card--lead, .feature-card--side, .feature-card--wide,
  .feature-card--third, .feature-card--half { grid-column: 1 / -1; }
}

.feature-card__decor {
  position: absolute;
  bottom: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,204,151,0.12), transparent 70%);
  z-index: -1;
}

/* ---------- TESTIMONIAL ---------------------------------------------------- */

.testimonial {
  padding-block: clamp(var(--s-8), 8vw, var(--s-9));
  background:
    radial-gradient(circle at 80% 20%, rgba(36,204,151,0.08), transparent 50%),
    var(--bg);
}

.quote {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.quote__mark {
  display: block;
  font-size: 4.5rem;
  font-weight: var(--fw-heavy);
  line-height: 0.6;
  color: var(--green-500);
  margin-bottom: var(--s-4);
  letter-spacing: -0.05em;
}
.quote p {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.018em;
}
.quote__source {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-4);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.quote__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--yellow-500);
  margin-right: 0.4em;
  letter-spacing: 0.02em;
}

/* ---------- FAQ ------------------------------------------------------------ */

.faq {
  padding-block: clamp(var(--s-7), 7vw, var(--s-8));
}
.faq .section-head { margin-bottom: var(--s-6); }
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 180ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-50);
  border: 1px solid rgba(36, 204, 151, 0.25);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 12px 2px, 2px 12px;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--green-700);
  transition: transform 250ms cubic-bezier(0.2, 0.7, 0.3, 1), background-size 250ms ease;
}
.faq__item[open] summary::after {
  background-size: 12px 2px, 0 0;
  transform: rotate(180deg);
}
.faq__item summary:hover { color: var(--green-700); }
.faq__body {
  padding: 0 0 var(--s-5);
  max-width: 60ch;
}
.faq__body p {
  font-size: var(--fs-base);
  color: var(--ink-3);
  line-height: 1.65;
}
.faq__body p + p { margin-top: var(--s-3); }
.faq__body strong { color: var(--ink); font-weight: var(--fw-bold); }
.faq__body a {
  color: var(--green-700);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: rgba(36, 204, 151, 0.3);
  text-underline-offset: 0.2em;
}
.faq__body a:hover { text-decoration-color: var(--green-500); }

/* ---------- FINAL CTA ------------------------------------------------------ */

.cta-final {
  padding-block: clamp(var(--s-8), 8vw, var(--s-9));
}
.cta-final__inner {
  position: relative;
  padding: clamp(var(--s-7), 6vw, var(--s-9)) clamp(var(--s-5), 5vw, var(--s-8));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 20% 100%, rgba(7,212,250,0.18), transparent 50%),
    radial-gradient(circle at 90% 0%, rgba(36,204,151,0.20), transparent 50%),
    linear-gradient(155deg, #0F1A22 0%, #0A2D26 100%);
  color: #F4F2EA;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-final__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.cta-final h2 {
  color: #F4F2EA;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0 auto var(--s-4);
}
.cta-final h2 .accent { color: var(--green-300); }
.cta-final p {
  color: rgba(244,242,234,0.75);
  font-size: var(--fs-md);
  max-width: 50ch;
  margin: 0 auto var(--s-6);
}
.cta-final .btn--primary {
  background: var(--green-500);
  color: var(--green-900);
  border-color: var(--green-500);
}
.cta-final .btn--primary:hover {
  background: var(--green-300);
  border-color: var(--green-300);
  color: var(--green-900);
}
.cta-final .btn--dark {
  background: #F4F2EA;
  color: #14181E;
  border-color: #F4F2EA;
}
.cta-final .btn--dark:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #14181E;
}
.cta-final .btn--ghost {
  border-color: rgba(244,242,234,0.3);
  color: rgba(244,242,234,0.95);
  background: transparent;
}
.cta-final .btn--ghost:hover {
  background: rgba(244,242,234,0.08);
  border-color: rgba(244,242,234,0.5);
  color: #F4F2EA;
}

/* ---------- SITE FOOTER ---------------------------------------------------- */

.site-footer {
  margin-top: 0;
  padding-top: clamp(var(--s-7), 5vw, var(--s-8));
  padding-bottom: var(--s-6);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  margin-bottom: var(--s-7);
}
@media (max-width: 760px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__brand-logo {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: var(--s-2);
}
.site-footer__tagline {
  max-width: 32ch;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: var(--s-3);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-5);
}
.site-footer__col h4 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-4);
  margin-bottom: var(--s-3);
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.site-footer__col a {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.site-footer__col a:hover { color: var(--green-700); text-decoration: none; }

.site-footer__bottom {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.site-footer__bottom small {
  color: var(--ink-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.site-footer__social {
  display: flex;
  gap: var(--s-4);
}
.site-footer__social a {
  color: var(--ink-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold);
}
.site-footer__social a:hover { color: var(--ink-2); text-decoration: none; }

/* ---------- GENERIC PAGE LAYOUT ------------------------------------------- */

.page-hero {
  padding-block: clamp(var(--s-7), 7vw, var(--s-9)) clamp(var(--s-5), 4vw, var(--s-7));
  position: relative;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(280px, 50%, 600px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
  transform: translateX(-50%);
}
.page-hero .eyebrow { margin-bottom: var(--s-3); }
.page-hero__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin-bottom: var(--s-4);
  color: var(--ink);
  max-width: 22ch;
}
.page-hero__lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 56ch;
}

.page-hero--center {
  text-align: center;
}
.page-hero--center .page-hero__title {
  max-width: none;
  margin-inline: auto;
}
.page-hero--center .page-hero__lead {
  margin-inline: auto;
}

.page-content {
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
}

/* Article-style pages (prose starting right after the hero lead) don't need
   the full marketing hero's bottom padding stacked on top of the content's
   own top padding — that combination leaves a gap that reads as a mistake. */
.page-article .page-hero {
  padding-bottom: var(--s-4);
}
.page-article .page-content {
  padding-top: var(--s-5);
}
.page-content .prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* ---------- FEATURE PAGE TEMPLATE ----------------------------------------- */

.feature-hero {
  padding-block: clamp(var(--s-7), 8vw, var(--s-9)) clamp(var(--s-6), 5vw, var(--s-8));
  position: relative;
  overflow: hidden;
}
.feature-hero::before {
  content: "";
  position: absolute;
  top: 0; right: -10%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  background: radial-gradient(circle at 40% 40%, rgba(36, 204, 151, 0.10), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .feature-hero::before { display: none; }
}

.feature-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
@media (max-width: 920px) {
  .feature-hero__grid { grid-template-columns: 1fr; }
}

.feature-hero__copy .eyebrow { margin-bottom: var(--s-3); }
.feature-hero__title {
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: var(--s-4);
  color: var(--ink);
}
.feature-hero__lead {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 50ch;
  margin-bottom: var(--s-6);
}
.feature-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.feature-hero__visual {
  display: flex;
  justify-content: center;
}
.feature-hero__image {
  max-width: 100%;
  max-height: 600px;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 60px -20px rgba(20, 24, 30, 0.15);
}
.feature-hero__placeholder {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 19;
  border-radius: 36px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(36, 204, 151, 0.06) 0 12px,
      transparent 12px 24px
    ),
    linear-gradient(155deg, var(--green-50) 0%, var(--surface) 100%);
  border: 1px dashed rgba(36, 204, 151, 0.5);
  display: grid;
  place-items: center;
}
.feature-hero__placeholder-label {
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  opacity: 0.7;
}

/* ---------- PRICING PAGE --------------------------------------------------- */

.pricing-tiers {
  padding-block: var(--s-7) var(--s-6);
}
.pricing-tiers__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  max-width: 940px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .pricing-tiers__grid { grid-template-columns: 1fr; }
}

.pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
}
.pricing-card--pro {
  background: linear-gradient(155deg, var(--surface) 0%, var(--green-50) 100%);
  border-color: rgba(36, 204, 151, 0.4);
  box-shadow: 0 28px 48px -20px rgba(36, 204, 151, 0.30);
}
.pricing-card__badge {
  position: absolute;
  top: -14px;
  right: var(--s-5);
  background: var(--green-500);
  color: #FFFFFF;
  padding: 0.45em 0.9em;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(36, 204, 151, 0.32);
}
.pricing-card__head {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.pricing-card--pro .pricing-card__head {
  border-bottom-color: rgba(36, 204, 151, 0.25);
}
.pricing-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.pricing-card--pro .pricing-card__name { color: var(--green-700); }

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin-bottom: 0.3em;
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
}
.pricing-card__amount {
  font-size: clamp(2.5rem, 4vw + 0.75rem, 3.5rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.pricing-card__period {
  font-size: var(--fs-md);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
}
.pricing-card__price-alt {
  font-size: var(--fs-sm);
  color: var(--green-700);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-4);
}
.pricing-card__pitch {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
  margin-top: var(--s-4);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  line-height: 1.5;
}
.pricing-card__features li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15em;
  border-radius: 50%;
  background: var(--green-500);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.pricing-card__cta { width: 100%; margin-top: auto; }
.pricing-card__meta {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-align: center;
  font-weight: var(--fw-medium);
}

.pricing-tiers__fine {
  text-align: center;
  margin-top: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--ink-4);
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------- REVIEWS PAGE STAT CALLOUT ------------------------------------- */

.reviews-stat {
  padding-block: var(--s-6) var(--s-7);
}
.reviews-stat__card {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--surface) 0%, var(--green-50) 100%);
  border: 1px solid rgba(36, 204, 151, 0.30);
  box-shadow: 0 24px 48px -22px rgba(36, 204, 151, 0.25);
}
@media (max-width: 720px) {
  .reviews-stat__card {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    text-align: center;
  }
}
.reviews-stat__rating {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
@media (max-width: 720px) {
  .reviews-stat__rating { justify-content: center; }
}
.reviews-stat__num {
  font-size: clamp(3rem, 6vw + 1rem, 4.5rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--ink);
}
.reviews-stat__stars-block { display: flex; flex-direction: column; gap: 0.25rem; }
.reviews-stat__stars {
  color: #FFB800;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  line-height: 1;
}
.reviews-stat__source {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}
.reviews-stat__divider {
  width: 1px;
  height: 60px;
  background: var(--line-strong);
  justify-self: center;
}
@media (max-width: 720px) {
  .reviews-stat__divider {
    width: 60px;
    height: 1px;
    justify-self: center;
  }
}
.reviews-stat__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.reviews-stat__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.reviews-stat__metric-num {
  font-size: clamp(1.5rem, 2.4vw + 0.4rem, 2rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.025em;
  color: var(--green-700);
  line-height: 1;
}
.reviews-stat__metric-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}

/* ---------- TESTIMONIALS GRID --------------------------------------------- */

.testimonials-section {
  background:
    radial-gradient(circle at 80% 20%, rgba(36,204,151,0.06), transparent 50%),
    var(--bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  max-width: 940px;
  margin-inline: auto;
}
.testimonials-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
}
@media (max-width: 980px) {
  .testimonials-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .testimonials-grid,
  .testimonials-grid--3 { grid-template-columns: 1fr; }
}

.testimonial-card {
  padding: var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.testimonial-card__stars {
  color: #FFB800;
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: var(--s-3);
}
.testimonial-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.testimonial-card__quote {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
  flex: 1;
}
.testimonial-card__author {
  font-size: 0.78rem;
  color: var(--ink-4);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- PRESS PAGE ----------------------------------------------------- */

.press-list {
  padding-block: var(--s-7);
}
.press-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.press-card {
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.press-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.press-card__kind {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-50);
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(36, 204, 151, 0.2);
  margin-bottom: var(--s-3);
}
.press-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin-bottom: var(--s-2);
}
.press-card__title a {
  color: var(--ink);
  text-decoration: none;
}
.press-card__title a:hover { color: var(--green-700); text-decoration: none; }
.press-card__source {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.press-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
}

/* ---------- ABOUT PAGE ----------------------------------------------------- */

.about-origin {
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
}
.about-origin__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
@media (max-width: 820px) {
  .about-origin__grid { grid-template-columns: 1fr; }
}
.about-origin__copy .eyebrow { margin-bottom: var(--s-3); }
.about-origin__copy h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: var(--s-5);
  max-width: 22ch;
}
.about-origin__copy p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-3);
}
.about-origin__copy p + p { margin-top: var(--s-4); }
.about-origin__copy strong { color: var(--ink); }
.about-origin__copy em { color: var(--green-700); font-style: normal; font-weight: var(--fw-bold); }

.founder-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.founder-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(36, 204, 151, 0.06) 0 14px,
      transparent 14px 28px
    ),
    linear-gradient(155deg, var(--green-50) 0%, var(--surface) 100%);
  border: 1px dashed rgba(36, 204, 151, 0.4);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
}
.founder-card__caption {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
  text-align: center;
}

.trust-stack {
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-stack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.trust-stack__item {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.trust-stack__icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(36, 204, 151, 0.25);
  margin-bottom: var(--s-4);
}
.trust-stack__icon svg { width: 22px; height: 22px; }
.trust-stack__item h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.012em;
  margin-bottom: var(--s-2);
}
.trust-stack__item p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
}

.about-numbers {
  padding-block: clamp(var(--s-7), 6vw, var(--s-8));
}
.about-numbers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5);
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}
.about-numbers__stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.about-numbers__num {
  font-size: clamp(2rem, 3vw + 0.5rem, 2.75rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.about-numbers__num .accent { color: var(--green-600); }
.about-numbers__num .accent--gold { color: #FFB800; }
.about-numbers__label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}

/* ---------- FORMS ---------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 600px;
  margin-inline: auto;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-field label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--fw-bold);
}
.form-field input,
.form-field textarea {
  padding: 0.85rem 1rem;
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  width: 100%;
}
.form-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(36, 204, 151, 0.15);
}
.form-field--hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.form-status {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
}
.form-status--ok { color: var(--green-700); }
.form-status--err { color: var(--pink-500); }

/* ---------- BUDGET BUILDER WIZARD ------------------------------------------ */

/* The hero here is just a small "Budget Builder" label, not a full marketing
   header, so it doesn't need the generic hero's large top/bottom padding —
   that would leave the actual wizard sitting well below the nav. */
.page-builder .page-hero {
  padding-block: var(--s-4) var(--s-3);
}
.page-builder .page-content {
  padding-block: 0 clamp(var(--s-6), 5vw, var(--s-8));
}

.wizard-layout {
  --wizard-bleed: clamp(1.25rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(260px, 340px);
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .wizard-layout { grid-template-columns: 1fr; }
}

/* Mirrors .wizard-layout's own column widths (same two tracks, same
   centering) so "Budget Builder" lands exactly above the step indicator
   inside the wizard column, rather than the container's own left edge. */
.page-hero__columns {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(260px, 340px);
  justify-content: center;
}
.page-hero__columns h1 {
  justify-self: start;
  text-align: left;
}
@media (max-width: 880px) {
  .page-hero__columns {
    grid-template-columns: 1fr;
    justify-content: normal;
  }
}

/* Continue always sits on the right, Back on the left. Row-reverse gets that
   layout while leaving the primary action first in the DOM and the tab order,
   and it puts a lone Continue on the right too. */
.wizard .form-actions {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* Keeps a pair of store buttons together as one flex item, so a row built
   for exactly two slots (primary action, Back) still gets exactly two. */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.wizard {
  scroll-margin-top: calc(var(--header-h) + 8px);
  max-width: 600px;
  margin-inline: auto;
}
.wizard-layout .wizard { max-width: none; margin-inline: 0; }

.wizard-summary {
  position: sticky;
  top: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-5);
}
@media (max-width: 880px) {
  .wizard-summary { position: static; }
}

.wizard-summary__title {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-4);
}

.wizard-summary__empty {
  color: var(--ink-4);
  font-size: var(--fs-sm);
}

.summary-section + .summary-section { margin-top: var(--s-4); }
.summary-section__label {
  display: block;
  width: 100%;
  padding: 0;
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: start;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 0.4rem;
  transition: color 160ms ease;
}
.summary-section__label:hover,
.summary-section__label:focus-visible {
  color: var(--green-600);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  padding-block: 0.3rem;
  color: var(--ink-2);
}
.summary-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-row__amount { flex: 0 0 auto; font-weight: var(--fw-medium); }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.summary-total .numerals {
  font-family: 'Fredoka', var(--font-sans);
  color: var(--green-600);
}
.summary-total--negative .numerals { color: var(--pink-500); }
.summary-total--pending .numerals { color: var(--ink-4); }
.summary-total__note {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-4);
}

.summary-note {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 200;
}

.wizard__progress {
  margin-bottom: var(--s-5);
}
.wizard__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.wizard__progress-name::before {
  /* Non-breaking spaces, because HTML collapses the plain ones around it. */
  content: "\00a0\00b7\00a0";
}
.wizard__progress-total {
  font-family: 'Fredoka', var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--green-600);
  white-space: nowrap;
}
.wizard__progress-total--pending { color: var(--ink-4); }
.wizard__progress-total--negative { color: var(--pink-500); }
/* The strip already repeats what the summary card shows, so it only earns its
   place on small screens where that card is far below the fold. */
@media (min-width: 881px) {
  .wizard__progress-total { display: none; }
}
.wizard__progress-label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
  margin-bottom: 0.6rem;
}
.wizard__progress-track {
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.wizard__progress-fill {
  height: 100%;
  width: 9.0909%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), #5DE9B5);
  transition: width 320ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .wizard__progress-fill { transition: none; }
}

.wizard__step[hidden] { display: none; }
.wizard__step-title[tabindex]:focus,
.wizard__result-label[tabindex]:focus { outline: none; }
.wizard__step {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.wizard__step-lead {
  color: var(--ink-3);
  margin-top: -0.75rem;
}
.wizard__step-subtitle {
  margin-top: -0.5rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
}
/* The lead already hugs a title above it; when it follows a subtitle instead,
   the flex gap between them is the right amount of space on its own. */
.wizard__step-subtitle + .wizard__step-lead {
  margin-top: 0;
}
.wizard__step-note {
  color: var(--ink-3);
}
/* Same tightening the lead normally gets, for the screens where the note
   sits directly under the title instead of a lead paragraph. */
.wizard__step-title + .wizard__step-note {
  margin-top: -0.75rem;
}

.input-currency {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.input-currency:focus-within {
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(36, 204, 151, 0.15);
}
.input-currency__symbol {
  padding-inline-start: 1rem;
  color: var(--ink-4);
  font-weight: var(--fw-semibold);
}
/* Without this the input keeps its user-agent background, which paints a
   square over the wrapper's rounded corners. */
.input-currency input {
  min-width: 0;
  background: transparent !important;
  color: var(--ink);
  border: none !important;
  box-shadow: none !important;
}
.input-currency input:focus { outline: none; }

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.pill-option {
  padding: 0.6em 1.1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.pill-option:hover { border-color: var(--ink-3); color: var(--ink); }
.pill-option.is-active {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #FFFFFF;
}
.pill-option--custom {
  background: transparent;
  border-style: dashed;
  color: var(--ink-4);
}
.pill-option--custom:hover { border-color: var(--ink-3); color: var(--ink); }
.pill-option.is-added {
  background: var(--green-50);
  border-color: var(--green-500);
  color: var(--green-700);
}
.pill-option.is-added::before { content: '✓ '; }

/* ---------- EXPENSE ROWS (budget builder) ----------------------------------- */

.expense-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.expense-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.expense-row__label {
  flex: 1 1 160px;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.expense-row__label:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(36, 204, 151, 0.15);
}
.input-currency--row {
  flex: 0 0 118px;
}
.input-currency--row input {
  padding: 0.65rem 0.85rem 0.65rem 0;
  font-size: var(--fs-sm);
}
.expense-row__frequency {
  flex: 0 0 140px;
  padding: 0.65rem 0.75rem;
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.expense-row__frequency:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(36, 204, 151, 0.15);
}
.expense-row__remove {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-4);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.expense-row__remove:hover {
  border-color: var(--pink-500);
  color: var(--pink-500);
}

.category-total {
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
}

.wizard__result[hidden] { display: none; }
.wizard__result {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.wizard__result-label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: var(--fw-medium);
}
.wizard__result-amount {
  font-family: 'Fredoka', var(--font-sans);
  font-size: var(--fs-5xl);
  font-weight: 700;
  color: var(--ink);
}
.wizard__result-amount--negative { color: var(--pink-500); }
.wizard__result-note {
  color: var(--ink-3);
  max-width: 40ch;
}
/* The result screen ends in one of two panels: what to do next when there is
   money left, or what to look at when the bills already outrun the income. */
.result-next {
  width: 100%;
  max-width: 44ch;
  margin-top: var(--s-2);
  padding: var(--s-5);
  text-align: start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.result-next--warn {
  background: color-mix(in srgb, var(--pink-500) 7%, var(--bg-2));
  border-color: color-mix(in srgb, var(--pink-500) 26%, var(--line));
}
.result-next__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-4);
}
.result-next__list {
  counter-reset: result-step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.result-next__list li {
  counter-increment: result-step;
  position: relative;
  padding-inline-start: 2.4rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-3);
}
.result-next__list li::before {
  content: counter(result-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-50);
  border-radius: var(--radius-pill);
}
.result-next--warn .result-next__list li::before {
  color: var(--pink-500);
  background: color-mix(in srgb, var(--pink-500) 16%, transparent);
}
.result-next__list strong {
  display: block;
  color: var(--ink);
  font-weight: var(--fw-bold);
}


/* ---------- KB STYLES ------------------------------------------------------ */

.kb-article { padding-block: var(--s-7) var(--s-8); }
.kb-article .container-narrow,
.kb-article.container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 1.75rem);
}

.kb-article__breadcrumb {
  font-size: 0.78rem;
  color: var(--ink-4);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
}
.kb-article__breadcrumb a { color: var(--ink-3); }
.kb-article__breadcrumb a:hover { color: var(--green-700); text-decoration: none; }

.kb-article__header { margin-bottom: var(--s-6); }
.kb-article__header h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.025em;
  max-width: 26ch;
  margin-bottom: var(--s-3);
  line-height: 1.1;
}
.kb-article__meta {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
}

.kb-article__footer {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* Prev/next pager */
.kb-article__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .kb-article__pager { grid-template-columns: 1fr; }
}
.kb-article__pager-prev,
.kb-article__pager-next { display: flex; }
.kb-article__pager-next { justify-content: flex-end; }
.kb-article__pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  width: 100%;
  max-width: 320px;
}
.kb-article__pager-link:hover {
  text-decoration: none;
  border-color: var(--green-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.kb-article__pager-link--next { text-align: right; }
.kb-article__pager-label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}
.kb-article__pager-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

/* Related articles */
.kb-article__related {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.kb-article__related-heading {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-3);
}
.kb-article__related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-2);
}
.kb-article__related-list a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.kb-article__related-list a:hover {
  background: var(--surface);
  color: var(--green-700);
  text-decoration: none;
}

.prose {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-2);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 1.8em;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.prose h3 {
  margin-top: 1.5em;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.prose ul, .prose ol {
  padding-left: 1.5rem;
  list-style: revert;
}
.prose li + li { margin-top: 0.4em; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--bg-2);
  border-radius: 6px;
  border: 1px solid var(--line);
}
.prose blockquote {
  margin-left: 0;
  padding: var(--s-3) var(--s-5);
  border-left: 3px solid var(--green-500);
  background: var(--green-50);
  color: var(--ink-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote p { margin: 0; }
.prose img {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin: var(--s-4) auto;
}

/* A dark bezel + shadow around an app screenshot so it reads as "inside a
   phone" rather than a floating rectangle — the screenshot's own simulator
   status bar already supplies the notch, so the frame is all this needs. */
.phone-frame {
  max-width: 300px;
  margin: var(--s-6) auto;
  padding: 8px;
  /* Fixed, not var(--ink) — a phone bezel is a real device color, not a
     theme-adaptive text color, so it must not flip light in dark mode. */
  background: #3a3d42;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.phone-frame img {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: var(--radius-lg);
}
.prose a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: rgba(36,204,151,0.4);
  text-underline-offset: 0.2em;
  font-weight: var(--fw-semibold);
}
.prose a:hover { text-decoration-color: var(--green-500); }
.prose strong { font-weight: var(--fw-bold); color: var(--ink); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose th, .prose td {
  padding: 0.75em 1em;
  text-align: left;
  border: 1px solid var(--line);
}
.prose th {
  background: var(--bg-2);
  color: var(--ink);
  font-weight: var(--fw-bold);
}

/* KB index */
.kb-index { padding-block: var(--s-6) var(--s-8); }
.kb-index h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-3);
}

/* KB search wrapper + Pagefind UI overrides */
.kb-search {
  padding-block: 0 var(--s-6);
}
.kb-search #kb-search {
  /* Pagefind UI variables — re-skinned to match brand */
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--green-700);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--bg-2);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 14px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
  .kb-search #kb-search {
    --pagefind-ui-primary: var(--green-300);
    --pagefind-ui-background: var(--surface);
    --pagefind-ui-text: var(--ink-2);
    --pagefind-ui-border: var(--line-strong);
    --pagefind-ui-tag: var(--bg-3);
  }
}
.pagefind-ui__search-input {
  font-weight: var(--fw-medium) !important;
  background: var(--bg-2) !important;
}
.pagefind-ui__search-input::placeholder { color: var(--ink-4) !important; }
.pagefind-ui__result-title a {
  color: var(--ink) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: -0.01em !important;
}
.pagefind-ui__result-title a:hover { color: var(--green-700) !important; }
.kb-section { margin-top: var(--s-7); }
.kb-section h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.012em;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--green-700);
}
.kb-section ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 1100px) {
  .kb-section ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .kb-section ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .kb-section ul { grid-template-columns: 1fr; }
}
.kb-section a {
  display: block;
  padding: var(--s-4);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.kb-section a:hover {
  text-decoration: none;
  border-color: var(--green-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

/* ---------- ANIMATIONS ----------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes barFill {
  from { width: 0%; }
  to   { width: 64%; }
}

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

/* ---------- UTILITIES ------------------------------------------------------ */

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

/* ---------- BUDGET BUILDER ON SMALL SCREENS --------------------------------
   Three things drive this block. The software keyboard covers roughly half the
   screen, so vertical space is scarce and anything sticky has to earn its
   height. Sticky is used rather than fixed, because iOS leaves the layout
   viewport alone when the keyboard opens and fixed elements end up behind it.
   And every focusable field needs scroll margins, or the browser's own
   scroll-into-view drops it underneath the sticky strip.                     */

@media (max-width: 880px) {
  /* The marketing header is not worth 93px while somebody is filling in a
     form, and dropping it lets the progress strip own the top of the screen. */
  .page-builder .site-header {
    position: static;
  }

  .page-builder.is-wizard-active .page-hero::after {
    display: none;
  }

  .wizard {
    scroll-margin-top: var(--s-2);
  }

  .wizard__progress {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-block-end: var(--s-4);
    margin-inline: calc(var(--wizard-bleed) * -1);
    padding: 0.7rem var(--wizard-bleed);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .wizard__progress-label { margin-bottom: 0.5rem; }
  .wizard__progress-name { display: none; }

  /* Continue stays reachable without scrolling to the end of a long category.
     It is sticky rather than fixed, so it never floats over the content. */
  .wizard .form-actions {
    /* The result screen centers its children, which left this bar sized to its
       buttons rather than to the viewport. Everywhere else the step is a plain
       column and the bar stretches on its own. */
    align-self: stretch;
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-block-start: var(--s-5);
    margin-inline: calc(var(--wizard-bleed) * -1);
    padding: 0.7rem var(--wizard-bleed) calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .wizard .form-actions .btn { flex: 0 1 auto; }

  /* iOS Safari zooms the page in whenever a focused control is smaller than
     16px, and it does not reliably zoom back out, which leaves the layout
     scaled up and clipped on the right. The tokens are 15px, so the builder's
     controls are pinned to 16px here instead. */
  .expense-row__label,
  .expense-row__frequency,
  .input-currency--row input {
    font-size: 1rem;
  }

  /* Keep a focused field clear of the progress strip above and the action bar
     below when the browser scrolls it into view. */
  .expense-row input,
  .expense-row select,
  .wizard .btn {
    scroll-margin-top: 96px;
    scroll-margin-bottom: 96px;
  }
}

@media (max-width: 560px) {
  /* Flex-wrapping left the interval and the remove button stranded on a second
     line with nothing to tie them to their row. Each row becomes a card with a
     fixed two-by-two shape instead. */
  .expense-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.7rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .expense-row__label {
    grid-area: 1 / 1 / 2 / 2;
    flex: none;
  }
  .expense-row__remove {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: end;
    align-self: center;
    width: 2.5rem;
    height: 2.5rem;
  }
  .input-currency--row {
    grid-area: 2 / 1 / 3 / 2;
    flex: none;
  }
  .expense-row__frequency {
    grid-area: 2 / 2 / 3 / 3;
    flex: none;
    width: 100%;
  }

  .pill-option { padding: 0.6em 0.95em; }
}