/* ===========================================================================
   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;
    /* green-700 is the text green. On dark surfaces it has to be a light
       green, or green text on a green-50 fill has no contrast. */
    --green-700:    #5DE9B5;
    --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 {
  /* Kept inside the sticky header's box. With a -1px margin it sat just above
     the viewport, so focusing it on click made the browser scroll up to it. */
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mobile-nav__backdrop { display: none; }

.site-header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  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);
}

/* Invisible hover bridge (desktop only — mobile uses the tap-to-expand
   .is-open mechanism below, where this would sit between stacked list items
   and could swallow a tap). The dropdown rests 6px below the trigger link
   (plus an 8px slide-in offset while it's transitioning open), and that gap
   isn't covered by anything hoverable. Moving the mouse from the link down
   into the menu crosses it, :hover drops off the <li>, and the dropdown
   collapses before the cursor ever reaches it. This sits over that gap,
   sized to match the dropdown's own footprint, so hover never breaks in
   transit. */
@media (min-width: 881px) {
  .site-header__nav-item--has-dropdown::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 14px;
  }
}

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

/* Store badges — two icon-only links (App Store, Google Play) rather than a
   single labeled button, since one platform-specific link can't speak for
   both stores. Visible on desktop next to the nav. */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* Same pair, inline inside the slide-in mobile nav (hidden on desktop) */
.site-header__nav-cta { display: none; }

.site-header__store-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  flex-shrink: 0;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 180ms ease;
}
.site-header__store-icon:hover {
  background: var(--ink-2);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-1px);
}

/* 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.
     Background/border/shadow fade in step with max-height in both directions,
     so closing doesn't pop the backdrop away while the links are still
     visibly shrinking (that mismatch read as a janky, not-smooth close). */
  /* Attached to the bottom edge of the header, so the menu follows the
     header height. A fixed pixel top went wrong each time the header changed. */
  .site-header__nav {
    position: absolute;
    top: 100%;
    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),
      opacity 280ms cubic-bezier(0.25, 0.8, 0.3, 1),
      background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    z-index: 49;
    transform: none;
    opacity: 0;
    visibility: visible;
  }
  /* A second label for the same checkbox, covering the page under the header
     while the menu is open, so a tap outside the menu closes it. Absolute, not
     fixed: the header's backdrop-filter makes it the containing block anyway. */
  .site-header:has(.mobile-nav__input:checked) .mobile-nav__backdrop {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 48;
  }
  .site-header:has(.mobile-nav__input:checked) .site-header__nav {
    max-height: calc(100dvh - var(--header-h));
    opacity: 1;
    padding: var(--s-4) var(--s-5) var(--s-5);
    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%;
  }
  /* Tap feedback. The browser's default tap highlight is a hard box that
     flashes on and off, so it is turned off here and replaced with a soft
     fill that fades in on press and fades out slowly on release. */
  .site-header__nav-link,
  .site-header__dropdown-link,
  .hamburger,
  .mobile-nav__backdrop {
    -webkit-tap-highlight-color: transparent;
  }
  .site-header__nav-link,
  .site-header__dropdown-link {
    transition: background-color 400ms ease;
  }
  /* On touch, :hover sticks after a tap and leaves the row filled in. */
  @media (hover: none) {
    .site-header__dropdown-link:hover { background: transparent; }
  }
  .site-header__nav-link:active,
  .site-header__dropdown-link:active {
    background: var(--bg-2);
    transition-duration: 80ms;
  }
  .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: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    width: 100%;
    margin-top: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .site-header__nav-cta .btn {
    width: 100%;
    padding-inline: 0.5em;
    -webkit-tap-highlight-color: transparent;
  }

  .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 VISUAL (app screenshot) ----------------------------------- */

.hero__visual {
  display: flex;
  justify-content: center;
}
.hero__phone {
  --frame-w: 320px;
  margin: 0;
  animation: rise 1200ms 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* ---------- 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;
}
@media (max-width: 600px) {
  .proof__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.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;
}
.big-idea__more {
  text-align: center;
  margin-top: var(--s-6);
}
.big-idea__more a {
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: rgba(36, 204, 151, 0.3);
  text-underline-offset: 0.2em;
}
.big-idea__more a:hover { text-decoration-color: var(--green-500); }

@media (max-width: 820px) {
  .big-idea__compare { grid-template-columns: minmax(0, 1fr); }
}

.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, minmax(0, 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); }
@media (max-width: 480px) {
  .cat-chip { padding: 0.45rem 0.4rem; font-size: 0.72rem; gap: 0.25rem; }
}
@media (max-width: 360px) {
  .cat-chaos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.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;
}
@media (max-width: 820px) {
  .big-idea__divider { display: none; }
}

/* ---------- SHOWCASE (full-width app image break) -------------------------- */

.showcase {
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
}
.showcase__image {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-inline: auto;
}

/* ---------- 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__more { margin-top: var(--s-7); }

.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;
}

/* ---------- SAVINGS CHART --------------------------------------------------- */

.savings-card {
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.savings-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.savings-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.savings-stat__num {
  font-size: clamp(2rem, 5vw + 0.5rem, 3.25rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--green-600);
  white-space: nowrap;
}
.savings-stat__label {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.35;
  max-width: 24ch;
}
@media (max-width: 480px) {
  .savings-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Bars and axis labels share one six-column grid, so each label sits under
   its bar at every width. */
.savings-chart__plot,
.savings-chart__axis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(var(--s-2), 2.5vw, var(--s-5));
}
.savings-chart__plot {
  align-items: end;
  height: 240px;
  /* Room above the tallest bar for the "Most savers" tag. */
  padding-top: 40px;
  background-image: repeating-linear-gradient(
    0deg,
    var(--line) 0,
    var(--line) 1px,
    transparent 1px,
    transparent 25%
  );
  background-origin: content-box;
  background-clip: content-box;
  border-bottom: 1px solid var(--line-strong);
}
.savings-chart__bar {
  position: relative;
  height: var(--h);
  /* The two ranges where most savers land are solid. The rest step back. */
  background: color-mix(in srgb, var(--green-500) 28%, transparent);
  border-radius: 8px 8px 0 0;
}
.savings-chart__bar--peak {
  background: linear-gradient(180deg, var(--green-300), var(--green-500));
}
.savings-chart__tag {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  /* Spans this bar, the gap and the next bar. */
  width: calc(200% + clamp(var(--s-2), 2.5vw, var(--s-5)));
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-600);
  white-space: nowrap;
}
.savings-chart__axis { margin-top: var(--s-3); }
.savings-chart__axis span {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-align: center;
  line-height: 1.3;
}
.savings-chart__axis .is-peak { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Bars rise as the chart scrolls into view. */
    .savings-chart__bar {
      transform-origin: bottom;
      animation: savings-bar-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes savings-bar-rise {
      from { transform: scaleY(0.12); }
    }
  }
}

/* ---------- 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);
}
@media (prefers-color-scheme: dark) {
  /* Same reason as the hero: the glow reads as a hard-edged band on dark. */
  .testimonial { background: 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); }

/* ---------- BUILDER PROMO --------------------------------------------------- */

.builder-promo {
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
}
.builder-promo__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--surface-warm) 0%, var(--green-50) 100%);
  border: 1px solid rgba(36, 204, 151, 0.25);
}
.builder-promo__copy h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
  margin-block: var(--s-3) var(--s-4);
  max-width: 18ch;
}
.builder-promo__copy .lead {
  color: var(--ink-3);
  max-width: 48ch;
  margin-bottom: var(--s-5);
}
.builder-promo__visual {
  display: flex;
  justify-content: center;
}
.builder-promo__card {
  padding: clamp(var(--s-6), 5vw, var(--s-7));
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 220px;
}
.builder-promo__card-label {
  font-size: var(--fs-sm);
  color: var(--ink-4);
  font-weight: var(--fw-medium);
}
.builder-promo__card-amt {
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.045em;
  color: var(--green-700);
  line-height: 1;
  margin-block: var(--s-2);
}
.builder-promo__card-sub {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .builder-promo__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .builder-promo__copy .lead {
    margin-inline: auto;
  }
}
@media (max-width: 400px) {
  .builder-promo__inner { padding: var(--s-5); }
}

/* ---------- 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;
  filter: drop-shadow(0 24px 40px rgba(20, 24, 30, 0.18));
}
.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;
}

/* Alternating text/image sections below a feature page's hero — copy and
   screenshot swap sides section to section, matching the marketing site.
   A section with no image (see feature-section--text) is a centered,
   full-width block instead of a lopsided grid. */
.feature-section {
  padding-block: clamp(var(--s-7), 6vw, var(--s-8));
  border-top: 1px solid var(--line);
}
.feature-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}
@media (max-width: 820px) {
  .feature-section__grid { grid-template-columns: 1fr; }
}
.feature-section--image-left .feature-section__copy { order: 2; }
.feature-section--image-left .feature-section__visual { order: 1; }
.feature-section--image-right .feature-section__copy { order: 1; }
.feature-section--image-right .feature-section__visual { order: 2; }
@media (max-width: 820px) {
  .feature-section--image-left .feature-section__copy,
  .feature-section--image-right .feature-section__copy { order: 2; }
  .feature-section--image-left .feature-section__visual,
  .feature-section--image-right .feature-section__visual { order: 1; }
}
.feature-section__copy h2 {
  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);
}
.feature-section__copy p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-3);
}
.feature-section__copy p + p { margin-top: var(--s-4); }
.feature-section__copy a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: rgba(23, 129, 98, 0.35);
}
.feature-section__copy a:hover { text-decoration-color: var(--green-700); }
.feature-section__visual {
  display: flex;
  justify-content: center;
}
.feature-section__image {
  max-width: 100%;
  max-height: 520px;
  filter: drop-shadow(0 20px 32px rgba(20, 24, 30, 0.14));
}
/* A framed screenshot in a feature hero or section. The frame carries the
   shadow, so the drop-shadow above is only for unframed compositions. */
.feature-hero__visual .phone-frame,
.feature-section__visual .phone-frame { margin: 0; }
.feature-section__visual .phone-frame--screen { --frame-w: 260px; }
.feature-section__visual .phone-frame:not(.phone-frame--screen) { --frame-w: 400px; }
.feature-section--text .feature-section__copy {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

/* A single review, matched to the feature above it, right before the final
   CTA. Reuses the .testimonial-card component from the Reviews page. */
.feature-testimonial {
  padding-block: clamp(var(--s-7), 6vw, var(--s-8)) 0;
}
.feature-testimonial .testimonial-card {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* ---------- 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);
}
@media (prefers-color-scheme: dark) {
  .testimonials-section { background: 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__image {
  width: 100%;
  aspect-ratio: 650 / 447;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 40px rgba(20, 24, 30, 0.18);
}
.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: minmax(0, 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__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.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: 0;
}

.wizard-summary__reset {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-4);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.wizard-summary__reset:hover {
  color: var(--ink-2);
  text-decoration-color: var(--ink-4);
}

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

.wizard-summary__help {
  position: relative;
  display: inline-flex;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.wizard-summary__help-trigger {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-4);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  cursor: help;
}
.wizard-summary__help-trigger:hover,
.wizard-summary__help-trigger:focus-visible {
  color: var(--ink-2);
  text-decoration-color: var(--ink-4);
}
.wizard-summary__help-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 260px;
  max-width: calc(100vw - 2 * var(--s-5));
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-xs);
  line-height: 1.5;
  font-weight: var(--fw-regular);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 10;
  pointer-events: none;
}
.wizard-summary__help-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.wizard-summary__help-trigger:hover + .wizard-summary__help-tip,
.wizard-summary__help-trigger:focus-visible + .wizard-summary__help-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.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;
}

/* ---------- BLOG --------------------------------------------------------- */

.blog-post { padding-block: var(--s-7) var(--s-8); }

.blog-post__header { margin-bottom: var(--s-5); }
.blog-post__header .eyebrow { margin-bottom: var(--s-3); }
.blog-post__header h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}
.blog-post__meta {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
}
.blog-post__hero-image {
  /* Capped by height, not width: most hero images are landscape/square
     marketing graphics that should fill the column, but a few are tall
     portrait phone screenshots that look enormous at full column width.
     Bounding height instead lets each shrink to whatever looks right for
     its own proportions. */
  display: block;
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  margin-bottom: var(--s-6);
}

.blog-grid-section { padding-block: var(--s-6) var(--s-8); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-6);
}
.blog-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.blog-card:hover {
  border-color: var(--green-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.blog-card__link { display: block; color: var(--ink); text-decoration: none; }
.blog-card__link:hover { text-decoration: none; color: var(--ink); }
.blog-card__image {
  display: block;
  width: 100%;
  /* Most hero images are tall portrait phone screenshots, not landscape
     graphics. A 16:10 box cropped those down to an unreadable sliver;
     `contain` fixed the crop but shrank them to the point of being
     unreadable the other way. A taller, more portrait-leaning box lets
     `cover` show much more of a screenshot's actual content, at the cost
     of cropping the (fewer) landscape/square marketing graphics a bit
     tighter on the sides. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.blog-card__image--placeholder {
  background: linear-gradient(155deg, var(--green-50) 0%, var(--surface) 100%);
}
.blog-card__body { padding: var(--s-5); }
.blog-card__category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: var(--s-3);
}
.blog-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: var(--s-2);
}
.blog-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: var(--s-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__meta {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}

.prose {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.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;
}

/* The one frame for app screenshots. Every screenshot file is a bare screen,
   with no bezel, backdrop or status bar drawn in, and this draws the frame.
   scripts/standardize-screenshots.py makes a file fit that standard.

   The image has a screen radius and sits in a thin white ring. The ring is
   white in dark mode too. A hairline and a shadow mark the outer edge, because
   a white ring does not show on a white page. The ring radius is
   the screen radius plus the ring width, so the two curves stay concentric.
   To restyle every screenshot on the site, change the variables here.

   .phone-frame           A crop or a partial screen. Small radius.
   .phone-frame--screen   A full phone screen. Phone-sized radius.
   .phone-frame--wide     Not phone-shaped, such as a spreadsheet. Full width. */
.phone-frame {
  --frame-w: 300px;
  --screen-r: 12px;
  --ring: 4px;
  --ring-color: #FFFFFF;
  width: fit-content;
  max-width: min(100%, var(--frame-w));
  margin: var(--s-6) auto;
  padding: var(--ring);
  border-radius: calc(var(--screen-r) + var(--ring));
  background: var(--ring-color);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-3);
}
.phone-frame p { margin: 0; }
.phone-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: var(--screen-r);
  box-shadow: none;
}
.phone-frame--screen {
  --screen-r: 36px;
  width: min(100%, var(--frame-w));
}
.phone-frame--screen img { width: 100%; }
.phone-frame--wide { --frame-w: 100%; }
/* Two screenshots side by side, each with an optional caption. They stack
   when the column is too narrow for both. */
.phone-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-5);
  margin: var(--s-6) 0;
}
.phone-pair figure { flex: 0 1 260px; margin: 0; }
.phone-pair .phone-frame { margin: 0 auto; }
.phone-pair figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: center;
}
.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 {
  /* Block, so a table wider than the column scrolls inside itself instead of
     widening the page. Imported posts carry fixed inline widths. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose th, .prose td {
  padding: 0.75em 1em;
  text-align: left;
  border: 1px solid var(--line);
}
@media (max-width: 600px) {
  .prose th, .prose td { padding: 0.6em 0.65em; vertical-align: top; }
}
.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); }
}

@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.
     Relative (not static) on purpose — it still drops the sticky behavior,
     but keeps the header's z-index applicable so the mobile nav drawer stays
     stacked above the page content instead of bleeding through it. */
  .page-builder .site-header {
    position: relative;
  }

  .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; }
}