/* ==========================================================================
   FLEXMAX marketing site — shared stylesheet
   Self-contained: system fonts only, no external CDNs / web fonts / trackers.
   Mobile-first. Theme-aware (dark default, light via prefers-color-scheme +
   [data-theme] override). Premium Tesla-minimal. Green = go/primary (AA-safe),
   red = destructive only.
   ========================================================================== */

/* ---------- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; /* CHANGED: interpolate-size enables the CSS-only accordion easing below */ overflow-x: clip; /* ADDED: safety net for oversized display type — clip, not hidden, so position:sticky still works */ }
/* ADDED: anchor jumps clear the 62px sticky header (price-card CTAs → #get-started, skip-link → #main) */
[id] { scroll-margin-top: calc(62px + .75rem); }
/* ADDED: keep browser-injected color on-brand — green selection, no gray tap flash */
::selection { background: var(--green); color: var(--green-ink); }
a, button { -webkit-tap-highlight-color: transparent; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
/* ADDED: author-origin `display` beats the UA sheet's [hidden] rule, which silently defeated
   every progressive-enhancement gate (the meter controls and the pricing toggle both rendered
   as dead controls with JS off). This restores the attribute's meaning. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* Neutral palette — DARK (default, the signature FLEXMAX look) */
  --bg:            #0B0D0E;
  --bg-elev:       #121618;
  --surface:       #161B1E;
  --surface-2:     #1D2427;
  --border:        #262E32;
  --border-strong: #35403F;
  --text:          #F3F6F5;
  --text-muted:    #9EA9A5;
  --text-faint:    #7C8781;   /* CHANGED: was #6C7772 (4.19:1 on --bg) — now AA at small sizes on bg AND surface */
  --border-interactive: #6F7B76; /* ADDED: ≥3:1 control boundaries (WCAG 1.4.11) on bg, surface, surface-2 AND the green-tint callouts (worst case 3.23:1) */
  --card-shadow:   none;      /* ADDED: elevation token — dark mode uses tonal steps, light mode uses shadow */

  /* Brand green — GO / primary. AA-safe pairings baked in. */
  --green:         #2FBF71;   /* button fill on dark */
  --green-hover:   #37D07F;
  --green-ink:     #05130B;   /* text on green fill — ~11:1 on --green */
  --green-text:    #4EDC8E;   /* green as text on dark bg — ~7:1 on --bg */
  --green-faint:   rgba(47, 191, 113, 0.12);
  --green-line:    rgba(47, 191, 113, 0.35);

  /* Red — DESTRUCTIVE ONLY (never brand/accent) */
  --danger:        #E5484D;
  --danger-text:   #FF7076;   /* on dark */

  /* Utility */
  --focus:         #4EDC8E;
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-soft:   0 1px 2px rgba(0,0,0,.3);

  /* Typography — native system stack, zero network cost */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scale / rhythm */
  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.8vw, 3.9rem);
  /* ADDED: editorial display sizes — used sparingly by design (see .display below) */
  --step--2: clamp(.68rem, .66rem + .1vw, .74rem);
  --step-5:  clamp(2.25rem, 1rem + 5vw, 6.25rem); /* CHANGED: smaller floor so the hero CTA stays above the fold at 390px; desktop keeps the full drama */
  --step-6:  clamp(4.5rem, 1rem + 16vw, 13rem);
  /* ADDED: the catch-mark as a reusable alpha mask — same data URI as .brand__dot, takes currentColor */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='400 424 388 352'%3E%3Cdefs%3E%3ClinearGradient id='u' x1='443' y1='764' x2='776' y2='435' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2310964A'/%3E%3Cstop offset='1' stop-color='%235EDF50'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='497' y1='690' x2='690' y2='504' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2319AD54'/%3E%3Cstop offset='1' stop-color='%2333CE5C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='507.5' y='511' width='172' height='172' rx='48' transform='rotate(-8 593.5 597)' fill='url(%23t)'/%3E%3Cpath d='M443.5 530.5V658A73.5 73.5 0 0 0 517 731.5H670A73.5 73.5 0 0 0 743.5 658V467.5' fill='none' stroke='url(%23u)' stroke-width='65' stroke-linecap='round'/%3E%3C/svg%3E");

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --container: 1120px;
  --gutter:    clamp(1.15rem, 4vw, 2rem);

  color-scheme: dark;
}

/* Light theme — via OS preference … */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:            #FBFCFC;
    --bg-elev:       #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     #F3F6F5;
    --border:        #E4E9E7;
    --border-strong: #CED6D3;
    --text:          #0C1110;
    --text-muted:    #56635F;
    --text-faint:    #6B7671;   /* CHANGED: was #7A8681 (3.68:1) — now AA at small sizes */
    --border-interactive: #6E7975; /* ADDED: ≥3:1 control boundaries on white, surface-2 and the green tint (worst case 3.96:1) */
    --card-shadow:   var(--shadow-soft); /* ADDED: light mode needs shadow elevation — hairlines alone dissolve */

    --green:         #117F47;   /* CHANGED: was #12894C (4.46:1 with white ink — just under AA); now 5.06:1 */
    --green-hover:   #0F7A43;
    --green-ink:     #FFFFFF;   /* on green fill — AA */
    --green-text:    #0B7A43;   /* green as text on light bg — AA */
    --green-faint:   rgba(18, 137, 76, 0.10);
    --green-line:    rgba(18, 137, 76, 0.30);

    --danger:        #C93338;
    --danger-text:   #C0272C;

    --focus:         #0B7A43;
    --shadow:        0 1px 2px rgba(16,24,20,.06), 0 14px 34px rgba(16,24,20,.10);
    --shadow-soft:   0 1px 2px rgba(16,24,20,.06);
    color-scheme: light;
  }
}

/* … and via explicit override (data-theme wins in both directions) */
:root[data-theme="light"] {
  --bg:#FBFCFC; --bg-elev:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F6F5;
  --border:#E4E9E7; --border-strong:#CED6D3; --text:#0C1110; --text-muted:#56635F;
  --text-faint:#6B7671; --green:#117F47; --green-hover:#0F7A43; --green-ink:#FFFFFF;
  --green-text:#0B7A43; --green-faint:rgba(18,137,76,.10); --green-line:rgba(18,137,76,.30);
  --border-interactive:#6E7975; --card-shadow:var(--shadow-soft); /* ADDED (CHANGED faint/green above to match media-query block) */
  --danger:#C93338; --danger-text:#C0272C; --focus:#0B7A43;
  --shadow:0 1px 2px rgba(16,24,20,.06),0 14px 34px rgba(16,24,20,.10);
  --shadow-soft:0 1px 2px rgba(16,24,20,.06); color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

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

/* ---------- Base elements ------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 650; color: var(--text); }
h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
p  { color: var(--text-muted); }
strong { color: var(--text); font-weight: 620; }
small { font-size: var(--step--1); }
.mono { font-family: var(--font-mono); }

/* ---------- Layout primitives ------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
/* ADDED: alternating surface band — promoted from features.html's repeated inline styles */
.section--band { background: var(--bg-elev); border-block: 1px solid var(--border); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5ch;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-text);
}
.lead { font-size: var(--step-1); color: var(--text-muted); max-width: 46ch; }
.kw { color: var(--green-text); } /* ADDED: keyword prefix inside H2s (replaces the separate eyebrow label) */
.section > .container > header { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.divider { height: 1px; background: var(--border); border: 0; margin-block: clamp(2rem,6vw,4rem); }

/* Responsive grid helper */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.grid.cols-2 { grid-template-columns: 1fr; }
.grid.cols-3 { grid-template-columns: 1fr; }
.grid.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55ch;
  padding: .8rem 1.4rem; min-height: 48px; border-radius: 999px;
  font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: var(--green-ink); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--green-hover); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-interactive); } /* CHANGED: 3:1 control boundary */
.btn--ghost:hover { border-color: var(--green-line); color: var(--green-text); }
.btn--subtle { background: var(--surface-2); color: var(--text); border-color: var(--border-interactive); } /* CHANGED: 3:1 control boundary */
.btn--subtle:hover { border-color: var(--border-strong); }
.btn--danger { background: transparent; color: var(--danger-text); border-color: var(--danger); }
.btn--danger:hover { background: rgba(229,72,77,.10); }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 1rem 1.8rem; min-height: 54px; font-size: var(--step-1); }

/* ---------- Header / nav ------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; }
.brand { font-weight: 750; letter-spacing: -0.02em; font-size: 1.18rem; color: var(--text); display: inline-flex; align-items: center; gap: .5ch; }
/* CHANGED: was a plain green dot; now renders the catch-mark logo (2026-07 rebrand) as a
   self-contained SVG data URI. Markup unchanged — every page's <span class="brand__dot"> gets it. */
.brand__dot {
  width: 1.16em; height: 1.05em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='400 424 388 352'%3E%3Cdefs%3E%3ClinearGradient id='u' x1='443' y1='764' x2='776' y2='435' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2310964A'/%3E%3Cstop offset='1' stop-color='%235EDF50'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='497' y1='690' x2='690' y2='504' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2319AD54'/%3E%3Cstop offset='1' stop-color='%2333CE5C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='507.5' y='511' width='172' height='172' rx='48' transform='rotate(-8 593.5 597)' fill='url(%23t)'/%3E%3Cpath d='M443.5 530.5V658A73.5 73.5 0 0 0 517 731.5H670A73.5 73.5 0 0 0 743.5 658V467.5' fill='none' stroke='url(%23u)' stroke-width='65' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-nav { display: flex; align-items: center; gap: .35rem; }
.site-nav a.navlink { display: none; padding: .5rem .8rem; border-radius: 8px; color: var(--text-muted); font-weight: 500; font-size: var(--step--1); }
.site-nav a.navlink:hover, .site-nav a.navlink[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.site-nav .btn { padding: .55rem 1.05rem; min-height: 44px; font-size: var(--step--1); } /* CHANGED: 42→44px touch target */
@media (min-width: 860px) {
  .site-nav a.navlink { display: inline-flex; }
  .nav-menu { display: none; } /* ADDED: disclosure menu is mobile-only */
}
/* ADDED: JS-free mobile navigation — <details class="nav-menu"> disclosure in the header.
   Below 860px the navlinks are hidden; this menu restores Features/Pricing/FAQ wayfinding. */
.nav-menu { position: relative; }
.nav-menu summary {
  list-style: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; cursor: pointer; color: var(--text); border: 1px solid var(--border-interactive);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--surface-2); }
.nav-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 11.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .4rem; display: grid; z-index: 60;
}
.nav-menu__panel a {
  display: flex; align-items: center; min-height: 44px; padding: .5rem .85rem;
  border-radius: 8px; color: var(--text-muted); font-weight: 500;
}
.nav-menu__panel a:hover, .nav-menu__panel a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* ---------- Hero --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7rem); }
/* CHANGED: the radial green glow (the default dark-startup recipe) is replaced by the
   catch-mark itself as an oversized watermark — brand geometry instead of generic bloom. */
.hero::after {
  content: ""; position: absolute; right: -6vw; bottom: -14%;
  width: min(64vmin, 620px); aspect-ratio: 388 / 352;
  background: var(--text); opacity: .06;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
  pointer-events: none; z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-top: 1.25rem; max-width: 34ch; font-size: var(--step-1); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
/* ADDED: below 480px stacked hero CTAs go full-width — clean equal thumb targets instead of a ragged wrap */
@media (max-width: 479px) { .hero__cta .btn { flex: 1 1 100%; } }
.hero__note { margin-top: 1.1rem; font-size: var(--step--1); color: var(--text-faint); }
/* CHANGED: the desktop-only CSS phone mock is gone — every competitor sells with phone
   screenshots, and it was hidden below 960px anyway. The tape (below) replaces it and
   works best on the phone-sized viewport Google actually ranks. */

/* ==========================================================================
   ADDED — editorial system (2026-08 redesign)
   The category (flexingbot / flexer) all ship the same light SaaS template:
   stat strip, screenshot carousel, icon-card grid, testimonials. This system
   deliberately does none of that: type is the artwork, the argument is the
   layout, and the brand mark is the only graphic device.
   ========================================================================== */

/* Display type — SCARCE ON PURPOSE. .display appears exactly twice sitewide
   (index H1 + index closing H2); .display--xl exactly once (the 0% numeral). */
.display { font-size: var(--step-5); font-weight: 800; letter-spacing: -.045em; line-height: .95; text-wrap: balance; }
.display--xl {
  font-size: var(--step-6); font-weight: 800; letter-spacing: -.055em; line-height: .85;
  font-variant-numeric: tabular-nums lining-nums;
}
.h1__kicker {
  display: block; font-size: var(--step--1); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-text); margin-bottom: .6rem;
}

/* The catch-mark as an inline glyph — inherits currentColor, so it works in
   both themes at any size with no new asset and no extra request. */
.mark {
  display: inline-block; flex: none; width: 1em; height: .9em; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
/* Mark inside the two large primary CTAs only — restraint is the point */
.btn--primary.btn--lg::before {
  content: ""; width: 1.05em; height: .95em; flex: none; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
@media (forced-colors: active) { .btn--primary.btn--lg::before { display: none; } }

/* ---------- The tape: block chips scrolling like a departures board ------- */
.tape {
  position: relative; overflow: hidden; min-height: 5.25rem; display: flex; align-items: center;
  border-block: 1px solid var(--border); background: var(--bg-elev);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tape__track { display: flex; gap: .75rem; width: max-content; padding-inline: .75rem; animation: tape 52s linear infinite; }
/* CHANGED: -50% resolves against the border box, which includes padding-inline — that left a
   6px jump every loop. Subtracting half the gap makes the two duplicated halves seam exactly. */
@keyframes tape { to { transform: translate3d(calc(-50% - .375rem), 0, 0); } }
.tape:hover .tape__track { animation-play-state: paused; }
/* ADDED: WCAG 2.2.2 requires a real mechanism to pause motion lasting >5s. :hover is
   mouse-only and the tape has no focusable children, so a genuine button is required. */
.tape__pause[aria-pressed="true"] ~ .tape .tape__track,
.tape-wrap:has(.tape__pause[aria-pressed="true"]) .tape__track { animation-play-state: paused; }
.tape-wrap { position: relative; }
.tape__pause {
  position: absolute; right: .6rem; top: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4ch; min-height: 34px; padding: .3rem .7rem;
  font: 600 var(--step--2)/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-interactive);
  border-radius: 999px; cursor: pointer;
}
.tape__pause:hover { color: var(--text); border-color: var(--green-line); }
.tape__chip {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-size: var(--step--1);
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: .5rem .9rem; font-variant-numeric: tabular-nums;
}
.tape__chip b { color: var(--text); font-weight: 650; }
/* -8deg is lifted from the logo geometry (rotate(-8 …) in the mark) */
.stamp {
  rotate: -8deg; border: 2px solid var(--green); color: var(--green-text); font-weight: 800;
  font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase;
  border-radius: 6px; padding: .15rem .45rem;
}
.tape__cap { font-size: .72rem; color: var(--text-faint); text-align: center; margin-top: .6rem; }
@media (prefers-reduced-motion: reduce) {
  /* CHANGED: no longer a mouse-only scroll region — the track wraps instead, so users who
     asked for less motion get a static, fully keyboard-reachable block. */
  .tape { -webkit-mask-image: none; mask-image: none; min-height: 0; padding-block: .75rem; }
  .tape__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .tape__pause { display: none; }
}

/* ---------- The spec sheet: hairline rows, not icon cards ---------------- */
.spec { border-top: 1px solid var(--border); margin: 0; padding: 0; list-style: none; }
.spec__row {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: .35rem 1.25rem;
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem); border-bottom: 1px solid var(--border); align-items: start;
}
@media (min-width: 820px) { .spec__row { grid-template-columns: 4.5rem minmax(0, 26ch) 1fr; align-items: baseline; } }
.spec__n { font-variant-numeric: tabular-nums; font-size: var(--step-1); font-weight: 800; color: var(--text-faint); letter-spacing: -.02em; }
.spec__row h3 { font-size: var(--step-2); letter-spacing: -.025em; display: flex; align-items: center; gap: .6ch; }
.spec__row h3 .mark { color: var(--green-text); }
.spec__row h3 a { color: inherit; }
.spec__row h3 a:hover { color: var(--green-text); }
.spec__row p { grid-column: 2 / -1; font-size: var(--step-0); }
@media (min-width: 820px) { .spec__row p { grid-column: 3 / -1; margin-top: 0; } }

/* ---------- The 0% wall + commission meter ------------------------------- */
.wall { text-align: center; }
.wall__num { color: var(--green-text); margin: .5rem 0 0; }
/* CHANGED: use -webkit-text-fill-color, not color:transparent — the latter also makes
   currentColor transparent, which paints the stroke with nothing (invisible glyph). */
.wall__num .outline { -webkit-text-stroke: .04em currentColor; -webkit-text-fill-color: transparent; }
@supports not (-webkit-text-stroke: 1px currentColor) { .wall__num .outline { -webkit-text-fill-color: currentColor; } }
.wall__label { font-size: var(--step--2); letter-spacing: .42em; text-transform: uppercase; color: var(--text-faint); margin-top: .35rem; }

.meter { margin-top: clamp(2rem, 5vw, 3rem); }
.meter label { display: block; font-weight: 620; color: var(--text); margin-bottom: .75rem; }
.meter__field { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.meter__field input[type="range"] { flex: 1 1 16rem; accent-color: var(--green); min-height: 44px; }
.meter__field input[type="number"] {
  width: 8rem; min-height: 44px; padding: .5rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-interactive); background: var(--surface); color: var(--text);
  font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}
.meter__out { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .meter__out { grid-template-columns: repeat(3, 1fr); } }
.meter__cell { background: var(--surface); padding: 1.15rem 1.1rem; }
.meter__lab { font-size: var(--step--1); color: var(--text-muted); }
.meter__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--step-2); font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; }
.meter__sub { font-size: var(--step--1); color: var(--text-faint); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.meter__cell--loss .meter__num { color: var(--danger-text); }
.meter__cell--us .meter__num { color: var(--green-text); }
.meter__verdict { margin-top: 1.15rem; font-size: var(--step-1); color: var(--text); }
.meter__verdict b { color: var(--green-text); }

/* ---------- Three moves (how it works) ----------------------------------- */
.moves { display: grid; gap: clamp(1.25rem, 3vw, 2rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 820px) { .moves { grid-template-columns: repeat(3, 1fr); } }
.moves li { display: grid; gap: .4rem; }
.moves__n {
  font-variant-numeric: tabular-nums; font-size: var(--step-3); font-weight: 800;
  color: var(--green-text); line-height: 1; letter-spacing: -.03em;
}
.moves h3 { font-size: var(--step-1); }

/* ---------- Scroll reveal (progressive, respects reduced motion) --------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 10% cover 26%; }
    @keyframes reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- Cards -------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--card-shadow); /* ADDED: light-theme elevation */
  transition: border-color .16s ease, transform .16s ease;
}
.card:hover { border-color: var(--border-strong); background: var(--surface-2); } /* CHANGED: lift removed — the editorial system reads flatter and more deliberate */
.card h3 { margin-bottom: .4rem; }
.card h3 a { color: inherit; } /* ADDED: feature cards deep-link to their /features section */
.card h3 a:hover { color: var(--green-text); }
.card p { font-size: var(--step-0); }
.card__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--green-faint); color: var(--green-text); margin-bottom: 1rem; font-size: 1.25rem;
}

/* Differentiator / proof strip (honest — facts only, no invented stats) */
.proof { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); grid-template-columns: repeat(2, 1fr); } /* CHANGED: 2×2 at base — four stacked rows cost ~380px of mobile scroll for 16 words */
.proof__item { background: var(--surface); padding: 1.25rem 1.15rem; }
.proof__k { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.proof__k .u { color: var(--green-text); }
.proof__v { font-size: var(--step--1); color: var(--text-muted); margin-top: .2rem; }
@media (min-width: 960px) { .proof { grid-template-columns: repeat(4, 1fr); } }

/* Steps (how it works) — CHANGED: removed dead `counter-reset: step` (no counter() consumer existed) */
.step__n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-faint); color: var(--green-text); font-weight: 700; margin-bottom: .9rem;
}
.step__n--inline { width: 28px; height: 28px; margin: 0; flex: none; font-size: .85rem; } /* ADDED: for success.html's next-steps list (replaces repeated inline styles) */

/* ---------- Comparison (flat vs commission) ------------------------------ */
.compare { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--card-shadow); } /* CHANGED: elevation token */
.compare table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.compare th, .compare td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 600; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .col-us { color: var(--green-text); font-weight: 620; }
/* ADDED: table typography — numerals right-aligned in tabular figures; the commission column reads as loss */
.compare .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare .col-loss { color: var(--danger-text); }
.compare caption { caption-side: bottom; padding: .85rem 1rem; font-size: var(--step--1); color: var(--text-faint); text-align: left; }
/* CHANGED: scroll shadows hint that a wide table pans — fades appear only at scrollable edges */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--surface) 35%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 35%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(90deg, rgba(0,0,0,.28), transparent) left / 12px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(0,0,0,.28), transparent) right / 12px 100% no-repeat scroll;
}

/* ---------- Pricing ------------------------------------------------------ */

.price-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .price-grid { grid-template-columns: repeat(2, 1fr); } } /* CHANGED: two cards now — UK + everywhere else */

.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; }
.price-card--featured { border-color: var(--green-line); box-shadow: 0 0 0 1px var(--green-line), var(--shadow); }
.price-card__market { font-weight: 620; color: var(--text); display: flex; align-items: center; justify-content: space-between; }
.price-card__badge { font-size: var(--step--1); color: var(--green-text); background: var(--green-faint); padding: .2rem .6rem; border-radius: 999px; }
.price-amount { display: flex; align-items: baseline; gap: .4ch; margin: 1rem 0 .2rem; }
.price-amount .num { font-size: var(--step-3); font-weight: 720; letter-spacing: -0.03em; color: var(--text); }
.price-amount .cyc { color: var(--text-muted); font-size: var(--step-0); }
.price-placeholder { font-size: var(--step--1); color: var(--text-faint); }
.price-derived { font-size: var(--step-0); color: var(--text-muted); margin-top: .15rem; } /* CHANGED [monthly-only]: "£24.99 billed monthly" under the per-day headline — the real charge, so step-0 not step--1 */
.price-card ul { margin: 1.25rem 0; display: grid; gap: .6rem; }
.price-card li { display: flex; gap: .6ch; font-size: var(--step-0); color: var(--text-muted); }
.price-card li::before { content: "✓"; content: "✓" / ""; color: var(--green-text); font-weight: 700; } /* CHANGED: alt-text syntax hides the glyph from screen readers */
.price-card .btn { margin-top: auto; }

/* ---------- FAQ ---------------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 48rem; } /* CHANGED: cap the measure (~72ch, matches .prose) — answers ran ~110ch wide */
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 1.15rem; box-shadow: var(--card-shadow); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; color: var(--green-text); font-size: 1.4rem; line-height: 1; font-weight: 400; } /* CHANGED: alt-text syntax — <details> already announces state */
.faq details[open] summary::after { content: "–"; content: "–" / ""; }
.faq details[open] summary { padding-bottom: .5rem; }
.faq details > p { padding-bottom: 1.1rem; font-size: var(--step-0); }
/* ADDED: CSS-only accordion easing — closed content is height:0/clipped, open is auto;
   with html { interpolate-size: allow-keywords } the 0→auto change animates in supporting
   engines and is instant everywhere else (progressive enhancement). */
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    height: 0; overflow: clip;
    transition: height .2s ease, content-visibility .2s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}
/* ADDED: FAQ group headings + question index (jump links) */
.faq-group { font-size: var(--step-1); margin: 2.25rem 0 .9rem; }
.faq-index { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.faq-index a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .85rem;
  border: 1px solid var(--border-interactive); border-radius: 999px;
  font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
}
.faq-index a:hover { color: var(--green-text); border-color: var(--green-line); }
.faq-link { color: var(--green-text); text-decoration: underline; text-underline-offset: 3px; }
.faq-link:hover { color: var(--green); }

/* ---------- Callout / disclaimer bar ------------------------------------- */
.callout { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 1.15rem 1.25rem; font-size: var(--step--1); color: var(--text-muted); }
.callout strong { color: var(--text); }
.callout--accent { border-color: var(--green-line); background: var(--green-faint); }
/* ADDED: compact disclosure strip — pricing's four subscription terms as a 2×2 grid of short items,
   with the full wording one <details> away. Clear-and-conspicuous, without a full-screen legal wall. */
.terms-strip { display: grid; grid-template-columns: 1fr; gap: .5rem .9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .terms-strip { grid-template-columns: repeat(2, 1fr); } } /* CHANGED: was 2-up at every width — index sentences are far longer than pricing's chips */
.terms-strip li { display: flex; gap: .55ch; font-size: var(--step--1); color: var(--text-muted); }
.terms-strip li::before { content: "✓"; content: "✓" / ""; color: var(--green-text); font-weight: 700; }
.terms-strip strong { color: var(--text); }
.terms-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 40px; font-size: var(--step--1); font-weight: 600; color: var(--green-text); }
.terms-more summary::-webkit-details-marker { display: none; }
.terms-more summary::after { content: " +"; content: " +" / ""; }
.terms-more[open] summary::after { content: " –"; content: " –" / ""; }

/* Status pages (success / cancel / 404) */
.status { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.status__icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.25rem; font-size: 1.9rem; }
.status__icon--go { background: var(--green-faint); color: var(--green-text); }
.status__icon--neutral { background: var(--surface-2); color: var(--text-muted); }
.brand__dot--lg { width: 2.1em; height: 1.9em; } /* ADDED: catch-mark at status-icon scale (success/404 reuse the brand geometry) */
.status .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }

/* Legal / long-form prose */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin: 1rem 0; }
.prose a { color: var(--green-text); text-decoration: underline; text-underline-offset: 3px; }
.prose .meta { font-size: var(--step--1); color: var(--text-faint); }

/* ---------- Footer ------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding-block: clamp(2.5rem, 6vw, 3.5rem); margin-top: clamp(3rem, 8vw, 5rem); }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4, .site-footer__label { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: .9rem; font-weight: 600; } /* CHANGED: .site-footer__label added — pages demote the h4s (h2→h4 skipped levels in the outline) */
.site-footer nav a, .site-footer li a { display: block; padding: .3rem 0; color: var(--text-muted); font-size: var(--step-0); }
@media (max-width: 859px) { .site-footer nav a, .site-footer li a { padding: .55rem 0; } } /* ADDED: comfortable touch pitch — footer is also mobile nav fallback */
.site-footer nav a:hover, .site-footer li a:hover { color: var(--green-text); }
.site-footer__disclaimer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--text-faint); max-width: 90ch; }
.site-footer__meta { margin-top: 1rem; font-size: var(--step--1); color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* Skip link (a11y) */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: var(--green-ink); padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 100; }
.skip-link:focus { left: 0; }

/* Utilities — CHANGED: removed duplicate .text-center (use .center; the one usage was updated) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}

/* ---------- Print (ADDED) -------------------------------------------------
   Legal pages are the part of a marketing site people actually print/PDF.
   Force readable ink, drop chrome, keep the non-affiliation disclaimer. */
@media print {
  :root { --bg:#FFFFFF; --bg-elev:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
    --text:#000000; --text-muted:#333333; --text-faint:#555555; --border:#BBBBBB; }
  /* ADDED: scroll-driven reveals never advance in print — force them visible */
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .tape, .tape__cap, .tape__pause, .tape-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .site-header, .skip-link, .hero__cta, .btn, .btn-row, .site-footer__grid, .nav-menu { display: none !important; }
  .site-footer { border: 0; margin-top: 1rem; padding: 0; background: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ---------- Forced colors / Windows High Contrast (ADDED) ----------------
   Backgrounds and shadows are stripped in this mode; states conveyed by fill
   alone need a structural fallback. */
@media (forced-colors: active) {
  .price-card--featured { border: 2px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
}