/* Pricing v05 — the original pricing layout in the studio site's dark theme.

   Surfaces, text, lines and buttons follow the landing page (theme-v05.css): neutral
   dark panels and white pill actions. The Swapo purples are accents only, in two
   places: accent text, and things that are highlighted — the featured Pipeline
   card, the active slider track, band and recommendation, focus and selection.
   The calculator keeps the original pricing page's compact layout.
   Tables and panels stay neutral. Measured contrast of the pairs in use:
     text on raised 14.4 · secondary on raised 9.6 · muted on raised 5.8
     lavender on raised 6.2 · text on electric 7.3 · dark on lavender 7.6
   Electric purple is a fill only (never text); violet is only a highlight edge. */

@font-face {
  font-family: Manrope;
  src: url('assets/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

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

:root {
  /* accent palette (Swapo) — accent text and highlighted states only */
  --lavender: #CD82FF;
  --violet: #8752FA;
  --electric: #4500F9;

  /* studio neutrals, shared with the landing page through tokens.css */
  --bg: var(--sp-bg);
  --panel: var(--sp-panel);                 /* tables, cards, panels */
  --surface: var(--sp-surface);             /* raised within a panel */
  --surface-raised: var(--sp-surface-2);    /* controls, the result bar */
  --text: var(--sp-ink);
  --text-secondary: var(--sp-ink-secondary);
  --text-muted: var(--sp-ink-muted);
  --line: var(--sp-line);
  --line-strong: var(--sp-line-strong);

  /* roles */
  --accent: var(--lavender);                 /* accent text */
  --highlight: var(--violet);                /* edge of a highlighted element */
  --highlight-fill: var(--electric);         /* fill of a selected or featured control */
  --highlight-fill-hover: #5317FF;
  --on-highlight-fill: var(--text);
  --on-accent: var(--bg);
  --action: var(--sp-action);                /* studio's solid pill */
  --action-hover: rgba(255, 255, 255, .85);
  --on-action: var(--sp-on-action);
  --focus: var(--lavender);
  --gradient: linear-gradient(90deg, var(--electric), var(--violet) 55%, var(--lavender));

  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --r: 12px;
  --rl: 20px;
  --pill: 100px;
  /* Headings keep the original's condensed-display scale, sized for Manrope. */
  --disp: .62;
}

html { scroll-behavior: smooth; color-scheme: dark; scrollbar-color: #2e2f36 var(--bg) }
::selection { background: var(--lavender); color: var(--on-accent) }
::-webkit-scrollbar { width: 12px; height: 12px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: #2e2f36; border-radius: 12px; border: 3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover { background: #45464f }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

.lg5 {
  background: var(--bg); color: var(--text);
  font-family: Manrope, system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Zero-specificity base, so button and link classes set their own colour. */
:where(.lg5) a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px }
.lg5 { caret-color: var(--lavender) }
/* Form controls do not inherit the page font by default. */
.lg5 input, .lg5 button, .lg5 output, .lg5 select, .lg5 textarea { font-family: inherit }
.lg5 :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r);
  background: var(--action); color: var(--on-action); font-weight: 700; text-decoration: none }
.skip:focus { top: 12px }
.noscript { padding: 120px 2.5rem; text-align: center }

.disp { font-family: Manrope, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em }
.accent-text { color: var(--accent) }

/* ---------- nav ---------- */
.lg5 nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13, 13, 16, .9); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  padding: 0 2.5rem; height: 64px; display: flex; align-items: center; gap: 2rem;
}
/* Padded to a 44px target; the negative margin keeps the bar the same height. */
.nav-logo { display: block; line-height: 0; text-decoration: none; padding-block: 5px; margin-block: -5px }
.nav-logo img { display: block; height: 34px; width: auto }
.nav-links { display: flex; align-items: center; gap: 2rem; margin-left: auto }
.nav-link { font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color .15s }
.nav-link:hover, .nav-link.current { color: var(--text) }
.nav-link.current { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent) }
.nav-cta { background: var(--action); color: var(--on-action); font-size: 14px; font-weight: 650; text-decoration: none;
  padding: 10px 22px; border-radius: var(--pill); transition: background .35s }
.nav-cta:hover { background: var(--action-hover) }
/* The bar is fixed, so an anchor that scrolled to the very top would land under it. */
.lg5 [id] { scroll-margin-top: 84px }

.lg-container { max-width: 1160px; margin: 0 auto }
.section { padding: 88px 2.5rem; border-bottom: 1px solid var(--line) }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px;
  font-size: 15px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; border-radius: var(--pill); text-align: center;
  transition: background .35s cubic-bezier(.16, 1, .3, 1), border-color .35s cubic-bezier(.16, 1, .3, 1), color .35s cubic-bezier(.16, 1, .3, 1) }
.btn-primary { background: var(--action); color: var(--on-action); border: 1px solid var(--action) }
.btn-primary:hover { background: var(--action-hover); border-color: transparent }
.btn-outline { border: 1px solid var(--line-strong); color: var(--text) }
.btn-outline:hover { border-color: var(--text); background: var(--text); color: var(--bg) }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding: 144px 2.5rem 88px; text-align: center; border-bottom: 1px solid var(--line); overflow: hidden }
.hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--line-strong); padding: 6px 18px; border-radius: var(--pill); margin-bottom: 2rem }
.hero-title { font-size: calc(clamp(4.6rem, 11vw, 9.5rem) * var(--disp)); line-height: .98; margin-bottom: 1.75rem }
.hero-sub { font-size: 18px; color: var(--text-secondary); max-width: 540px; margin: 0 auto 2.75rem; line-height: 1.65 }
.hero-stats { list-style: none; display: inline-flex; border: 1px solid var(--line); border-radius: var(--rl);
  background: var(--panel); overflow: hidden; margin-bottom: 2.5rem }
.hero-stats li { padding: 1.1rem 2.25rem; text-align: center; border-right: 1px solid var(--line); display: flex; flex-direction: column }
.hero-stats li:last-child { border-right: none }
.hero-stat-val { font-size: calc(2.4rem * var(--disp)); color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums }
.hero-stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px }
.hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }

/* ---------- section headers ---------- */
.s-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px }
.s-eyebrow::before { content: ""; display: block; width: 18px; height: 1px; background: var(--line-strong) }
.s-title { font-size: calc(clamp(2.8rem, 5vw, 4.6rem) * var(--disp)); line-height: 1.08; margin-bottom: 1rem }
.s-sub { font-size: 16px; color: var(--text-secondary); max-width: 520px }

/* ---------- comparison ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line);
  border-radius: var(--rl); overflow: hidden; margin-top: 2.5rem }
.c-col { background: var(--panel); padding: 1.9rem 2.4rem }
.c-col.hl { background: var(--surface); border-left: 1px solid var(--line-strong) }
.c-col-head { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem }
.c-col.hl .c-col-head { color: var(--accent) }
.c-row { display: flex; align-items: flex-start; gap: 14px; padding: .85rem 0; border-bottom: 1px solid var(--line) }
.c-row:last-child { border-bottom: none }
.c-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; margin-top: 8px }
.c-col.hl .c-bullet { background: var(--text) }
.c-key { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px }
.c-val { font-size: 15.5px; color: var(--text-secondary) }
.c-col.hl .c-val { color: var(--text) }

/* ---------- term note ---------- */
.term-note { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--pill);
  border: 1px solid var(--line-strong); background: var(--panel); font-size: 14px; color: var(--text-secondary); white-space: nowrap }
.term-note b { color: var(--text); font-weight: 650 }
.term-note span { color: var(--text-muted) }

/* ---------- plans ---------- */
.tiers-section { padding: 88px 2.5rem 72px; border-bottom: 1px solid var(--line) }
.tiers-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: 2.5rem }
.tiers-top .s-title { margin-bottom: .75rem }
.benefits { font-size: 15px; font-weight: 600; color: var(--text-secondary) }
.benefits span { color: var(--text-muted); margin: 0 .35em }

.tiers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch }
.tier { display: flex; flex-direction: column; background: var(--panel); padding: 2rem 1.9rem; border: 1px solid var(--line); border-radius: var(--rl) }
/* Pipeline's emphasis comes from its surface, border and primary CTA, and does not
   follow the calculator. */
.tier.featured { background: var(--surface); border: 1px solid transparent;
  background-image: linear-gradient(var(--surface), var(--surface)), var(--gradient);
  background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 24px 60px -34px rgba(69, 0, 249, .55) }
.tier-badge { align-self: flex-start; min-height: 24px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; margin-bottom: 1.25rem; line-height: 16px }
.tier-badge:empty { visibility: hidden }
.tier.featured .tier-badge { background: var(--lavender); color: var(--on-accent) }
.tier-name { font-size: calc(3rem * var(--disp)); line-height: 1; margin-bottom: .35rem }
.tier-sub { font-size: 15px; color: var(--text-secondary); margin-bottom: 1.5rem }
.tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px }
.tier-price .amount { font-size: clamp(34px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums }
.tier-price-unit { font-size: 15px; font-weight: 600; color: var(--text-secondary) }
.tier-commit { margin-top: 8px; font-size: 14.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums }
.tier-commit b { color: var(--text); font-weight: 700 }
.tier-divider { height: 1px; background: var(--line); margin: 1.5rem 0 }
.tier-feats { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.75rem }
.tier-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-secondary) }
.tier-feats b { color: var(--text); font-weight: 700 }
.fi { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--text-muted) }
.tier.featured .fi { color: var(--accent) }
.tier-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px;
  font-size: 15px; font-weight: 650; text-decoration: none; border-radius: var(--pill);
  border: 1px solid var(--line-strong); color: var(--text); transition: background .35s, border-color .35s, color .35s }
.tier-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg) }
.tier.featured .tier-btn { background: var(--highlight-fill); border-color: var(--highlight-fill); color: var(--on-highlight-fill) }
.tier.featured .tier-btn:hover { background: var(--highlight-fill-hover); border-color: var(--highlight-fill-hover); color: var(--on-highlight-fill) }

.est-note { margin-top: 1.25rem; max-width: 68ch; font-size: 14px; color: var(--text-muted) }

/* ---------- disclosures ---------- */
.disclose { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) }
.disclose summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 16px;
  cursor: pointer; list-style: none; font-size: 15px; font-weight: 650 }
.disclose summary::-webkit-details-marker { display: none }
.disclose summary::after { content: ''; flex: none; width: 16px; height: 16px; background: var(--text-muted);
  -webkit-mask: var(--icon-plus) center / contain no-repeat; mask: var(--icon-plus) center / contain no-repeat; transition: transform .2s }
.disclose[open] summary::after { transform: rotate(45deg); background: var(--text) }
.disclose-body { padding: 0 16px 16px; display: grid; gap: .6rem }
.disclose-body p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); max-width: 64ch }

/* ---------- calculator ----------
   The original page's anatomy: a small uppercase label, a thin track with the count
   beside it, 4px capacity bands with small labels, a recommendation chip, one row of
   four compact figures, and a slim foot. Bands are placed at the slider's real
   positions rather than spread evenly. */
.calc-section { padding: 88px 2.5rem; border-bottom: 1px solid var(--line) }
.calc-box { border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; margin-top: 2.5rem; background: var(--panel) }
.calc-ctrl { padding: 2.25rem 2.5rem 2rem; border-bottom: 1px solid var(--line) }
.calc-ctrl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 1.1rem }
.calc-ctrl-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) }
.example { font-size: 12.5px; color: var(--text-muted) }

.slider-wrap { display: flex; align-items: flex-start; gap: 1.75rem }
/* The track starts and ends half a thumb in; the bands use the same inset. */
.track-wrap { --thumb: 20px; position: relative; flex: 1; min-width: 0; padding-bottom: 34px }
.lg5 input[type=range] { --fill: 50%; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y }
.lg5 input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--electric), var(--violet) calc(var(--fill) * .6), var(--lavender) var(--fill), rgba(255, 255, 255, .12) var(--fill)) }
.lg5 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -8px;
  border-radius: 50%; background: var(--lavender); border: 3px solid var(--panel) }
.lg5 input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12) }
.lg5 input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gradient) }
.lg5 input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--lavender); border: 3px solid var(--panel) }
.lg5 input[type=range]:focus-visible { outline: none }
.lg5 input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--focus) }
.lg5 input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--focus) }

.band-track { position: absolute; left: 0; right: 0; top: 30px; height: 24px }
.band { position: absolute; top: 0 }
.band-bar { display: block; height: 4px; margin: 0 1.5px; border-radius: 2px; background: rgba(255, 255, 255, .1); transition: background .25s }
.band:first-child .band-bar { margin-left: 0 }
.band:last-child .band-bar { margin-right: 0 }
.band.on .band-bar { background: var(--lavender) }
.band-label { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); transition: color .25s }
.band.on .band-label { color: var(--text) }
.band--custom .band-label { left: auto; right: 0; transform: none }
.legend { display: none }

/* Top-aligned so the count centres on the track (12px down), not on the bands. */
.readout { flex: none; display: flex; align-items: center; gap: 10px; margin-top: -4px }
.step { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-secondary); cursor: pointer; transition: border-color .15s, background .15s, color .15s }
.step svg { width: 14px; height: 14px }
.step:hover:not(:disabled) { border-color: var(--text); background: var(--text); color: var(--bg) }
.step:disabled { opacity: .35; cursor: not-allowed }
/* 44px touch targets without growing the drawn control. */
.step { position: relative }
.step::after { content: ''; position: absolute; inset: -6px }
.slider-number { min-width: 2.1ch; text-align: center; font-size: 30px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums }

.auto-rec { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: .25rem; padding: 7px 14px;
  border-radius: var(--pill); border: 1px solid rgba(135, 82, 250, .55); background: var(--surface); font-size: 13px; color: var(--text-secondary) }
.auto-rec svg { width: 14px; height: 14px; flex: none; color: var(--accent) }
.auto-rec strong { color: var(--accent); font-weight: 700 }
.auto-rec .note { color: var(--text-muted); font-size: 12.5px }

.calc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); min-height: 140px }
.cm { background: var(--panel); padding: 1.6rem 1.9rem }
.cm-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .7rem }
.cm-val { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums }
.cm-note { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); margin-top: 6px }
.cm-note b { color: var(--text-secondary); font-weight: 650 }
.cm-fine { display: block; font-size: 12px; color: var(--text-muted) }
.cm--plan .cm-val, .cm--lower .cm-val { color: var(--accent) }
/* The comparison states its direction with an icon as well as colour and words. */
.tone-lead { display: inline-flex; align-items: center; gap: .28em; white-space: nowrap }
.tone-lead svg { width: .7em; height: .7em; flex: none }
.cm--higher .tone-lead svg, .cm--same .tone-lead svg { color: var(--text-muted) }
.calc-metrics.is-custom { display: flex; align-items: center; background: var(--panel) }
.cm--custom { padding: 1.75rem 2.5rem }
.cm--custom .cm-val { font-size: 24px; color: var(--accent) }
.cm--custom .cm-note { font-size: 13.5px; color: var(--text-secondary); max-width: 64ch }

.calc-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding: .9rem 2rem; background: var(--bg); border-top: 1px solid var(--line) }
.calc-foot-text { display: grid; gap: 2px; min-width: 0 }
.calc-context { font-size: 13.5px; font-weight: 600; color: var(--text) }
.calc-context:empty { display: none }
.calc-note { font-size: 12px; color: var(--text-muted) }
.calc-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto }
.calc-cta .btn { min-height: 40px; padding: 8px 20px; font-size: 14px }

.disclose--flat { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--bg) }
.disclose--flat summary { min-height: 44px; padding: 8px 2rem; font-size: 13px; color: var(--text-secondary) }
.disclose--flat summary::after { width: 14px; height: 14px }
.disclose--flat .disclose-body { padding: 0 2rem 1rem }
.disclose--flat .disclose-body p { font-size: 13px }

/* ---------- process ---------- */
.how-section { padding: 88px 2.5rem; border-bottom: 1px solid var(--line) }
.how-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 2.5rem;
  border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; background: var(--line) }
.how-card { background: var(--panel); padding: 2rem 1.9rem }
.how-num { display: block; font-size: calc(4.2rem * var(--disp)); line-height: 1; margin-bottom: .75rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums }
.how-title { font-size: calc(1.6rem * var(--disp) * 1.18); line-height: 1.2; margin-bottom: .5rem }
.how-body { font-size: 15px; color: var(--text-secondary); line-height: 1.6 }

/* ---------- final CTA ---------- */
.cta-section { padding: 96px 2.5rem; text-align: center }
.cta-section .lg-container { padding: 72px 2rem; border-radius: calc(var(--rl) * 1.6); background: var(--panel); border: 1px solid var(--line) }
.cta-title { font-size: calc(clamp(3.8rem, 8vw, 7rem) * var(--disp)); line-height: 1; margin-bottom: 2.25rem }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.cta-mail { margin-top: 1.25rem; font-size: 15px; color: var(--text-secondary) }
.cta-mail a { color: var(--accent) }

.lg5 footer { border-top: 1px solid var(--line); padding: 2rem 2.5rem; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem }
/* Padded to a 44px target; the negative margin keeps the footer row the same height. */
.foot-logo { display: block; line-height: 0; padding-block: 10px; margin-block: -10px }
.foot-logo img { display: block; height: 24px; width: auto }
.foot-note { font-size: 14px; color: var(--text-muted) }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease }
.reveal.visible { opacity: 1; transform: none }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .calc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  /* The links used to be hidden here, which left the logo as the only way off the page.
     They move to a second row instead: logo and call to action on the first, the four
     links spread underneath. The bar grows to about 92px, which the hero allows for. */
  .lg5 nav { padding: 8px 1.25rem; height: auto; flex-wrap: wrap; gap: 6px 1rem }
  .nav-links { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: .75rem }
  /* Padded rather than sized: 21px of text is under the 24px touch floor. */
  .nav-link { font-size: 13px; padding-block: 6px }
  .nav-cta { margin-left: auto }
  /* The bar is taller here, so an anchor has to stop further down. */
  .lg5 [id] { scroll-margin-top: 104px }
  .hero, .section, .tiers-section, .calc-section, .how-section, .cta-section { padding-left: 1.25rem; padding-right: 1.25rem }
  /* Clears the two-row bar (about 100px here) with room to breathe. */
  .hero { padding-top: 140px }
  .hero-stats { display: flex; flex-direction: column }
  .hero-stats li { border-right: none; border-bottom: 1px solid var(--line) }
  .hero-stats li:last-child { border-bottom: none }
  .tiers-grid, .compare-grid, .how-grid { grid-template-columns: minmax(0, 1fr) }
  .c-col.hl { border-left: none; border-top: 1px solid var(--line-strong) }
  .tiers-top { flex-direction: column; align-items: flex-start }
  .calc-ctrl { padding: 1.5rem 1.25rem }
  .cm, .cm--custom { padding: 1.25rem }
  .calc-foot { padding: .9rem 1.25rem }
  .disclose--flat summary { padding: 8px 1.25rem }
  .disclose--flat .disclose-body { padding: 0 1.25rem 1rem }
  .lg5 footer { flex-direction: column; text-align: center }
  .cta-section .lg-container { padding: 48px 1.25rem }
}
/* Below 840px the proportional band names crowd each other, so they move to a compact
   legend and the bands keep only their aligned bars. Measured at the 12px label size:
   the names touch at 761px, clear by 10px at 820 and by 27px at 900. */
@media (max-width: 839px) {
  .track-wrap { padding-bottom: 12px }
  .band-label { display: none }
  .readout { margin-top: -4px }
  .legend { list-style: none; display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 20px; margin: .5rem 0 1rem;
    font-size: 12px; color: var(--text-muted) }
  .legend b { color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; margin-right: 4px }
}
/* Phones: the count and steppers sit under the track. */
@media (max-width: 640px) {
  .slider-wrap { flex-direction: column; align-items: stretch; gap: .5rem }
  .readout { margin-top: 0; justify-content: space-between }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: .75rem }
  .calc-metrics { grid-template-columns: minmax(0, 1fr) }
  .calc-cta { margin-left: 0; width: 100% }
  .calc-cta .btn { flex: 1 1 auto }
  .hero-cta-row .btn, .cta-btns .btn { flex: 1 1 100% }
}
@media (max-width: 360px) {
  .term-note { white-space: normal }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none }
  .nav-link, .nav-cta, .btn, .tier-btn, .step, .band-bar, .band-label, .disclose summary::after { transition: none }
}

/* Touch screens get full 44px targets on the two compact buttons. */
@media (pointer: coarse) {
  .nav-cta { display: inline-flex; align-items: center; min-height: 44px }
  .calc-cta .btn { min-height: 44px }
}