/* 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, and the
   accent now marks one thing per region: the answer. The featured card, the active
   slider track and band, the calculator's plan name, focus and selection.
   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 */
  --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-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;

  /* Section rhythm. Three named steps rather than one value repeated, so the page has
     a cadence: the plans and the calculator — the two things the page exists for — get
     the lead step, and the join between those two is deliberately tighter than the
     space around them so they read as one block rather than two bands. */
  --sec: 88px;
  --sec-lead: 112px;
  --sec-join: 64px;
  --gutter: 2.5rem;
}

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 }

/* ---------- 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 var(--gutter) var(--sec); text-align: center;
  border-bottom: 1px solid var(--line); overflow: hidden }
.hero-title { font-size: calc(clamp(4.6rem, 11vw, 9.5rem) * var(--disp)); line-height: .98; margin-bottom: 1.6rem }
.hero-sub { font-size: 18px; color: var(--text-secondary); max-width: 540px; margin: 0 auto 1.6rem; line-height: 1.65 }
/* The terms the page turns on, said once as a line of text. The figure is the entry
   rate, read from the same model as the cards so the two can never disagree. */
.hero-facts { max-width: 680px; margin: 0 auto 2.5rem; font-size: 16px; line-height: 1.9; color: var(--text-secondary) }
.hero-facts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums }
.hero-facts span { color: var(--text-muted); margin: 0 .6em }
.hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }

/* ---------- section headers ---------- */
.s-title { font-size: calc(clamp(2.8rem, 5vw, 4.6rem) * var(--disp)); line-height: 1.08; margin-bottom: .9rem }
.s-sub { font-size: 16px; color: var(--text-secondary); max-width: 520px }

/* ---------- 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 ----------
   The page's centre of gravity: the lead step above it, no rule below, so it runs
   straight into the calculator as one block. Within a card the order is what you are
   choosing between (the name), what you get (slots), then what it costs. */
.tiers-section { padding: var(--sec-lead) var(--gutter) var(--sec-join) }
/* Where the skip link lands. It takes focus so the next Tab continues from the plans
   rather than from the bar, and draws no ring: it is a destination, not a control. */
.tiers-section:focus { outline: none }
.tiers-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: 2.25rem }
.tiers-top .s-title { margin-bottom: .6rem }
.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.1rem; 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: .3rem }
.tier-sub { font-size: 14.5px; color: var(--text-muted); margin-bottom: 1.1rem }
/* The one axis the three plans differ on, so it is said plainly instead of sitting
   fourth in a tick list where every line looks the same. */
.tier-slots { display: flex; align-items: baseline; gap: .45em; padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--text-secondary) }
.tier-slots b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums }
.tier.featured .tier-slots b { color: var(--accent) }
.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-muted); font-variant-numeric: tabular-nums }
.tier-commit b { color: var(--text-secondary); font-weight: 700 }
.tier-divider { height: 1px; background: var(--line); margin: 1.4rem 0 }
.tier-feats { list-style: none; display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.6rem }
.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.1rem; max-width: 68ch; font-size: 14px; color: var(--text-muted) }

/* ---------- disclosures ---------- */
.disclose { margin-top: .9rem; 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 ----------
   Three steps, weighted: the control you move, the answer it produces, then the
   figures that put the answer in context. The answer carries the only accent and the
   only large figure in the box, and its action sits with it rather than in the foot.
   Bands are placed at the slider's real positions rather than spread evenly. */
.calc-section { padding: var(--sec-join) var(--gutter) var(--sec-lead); border-bottom: 1px solid var(--line) }
.calc-box { border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; margin-top: 2rem; background: var(--panel) }
.calc-ctrl { padding: 2rem 2.5rem 1.75rem; 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) }

/* The count leads and the track follows it, so the figure that changes is the first
   thing in the row on a desktop and sits above the thumb on a phone. */
.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; margin-top: 3px }
.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 }

.readout { flex: none; display: flex; align-items: center; gap: 10px }
.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: 32px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums }

/* The answer. One accent, one large figure, and the action that follows from it. */
/* Holds the height of the tallest state, so crossing into 10+ (which has no per-game or
   benchmark figure) does not pull the foot up under the cursor mid-drag. */
/* The answer, the figures under it and the action are three peers of one grid, so the
   arrangement can change without the markup changing. Wide: the action sits beside the
   answer. Narrow: it follows the figures, so every number the slider drives stays in one
   group instead of having a button pushed through the middle of them. */
/* The answer row takes the reserved height and the figures row sizes to its content, so
   when there are no figures to show the answer fills the box instead of an empty track
   holding the difference. */
.calc-result { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "answer act" "support support"; grid-template-rows: 1fr auto; min-height: 304px }
.calc-answer { grid-area: answer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 1.25rem 2.5rem; padding: 1.9rem 2.5rem; background: var(--surface) }
.calc-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 1.9rem 2.5rem 1.9rem 0; background: var(--surface) }
.ans-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .45rem }
.ans-name { font-size: calc(3.4rem * var(--disp)); line-height: 1; color: var(--accent); margin-bottom: .4rem }
.ans-meta { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary) }
.ans-meta b { color: var(--text); font-weight: 700 }
.ans-money { text-align: right }
.ans-amount { font-size: clamp(34px, 3.4vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: .4rem }
.ans-unit { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text-secondary); margin-left: 3px }
/* Above the largest plan there are no per-game or benchmark figures, so the answer is
   the only thing in the reserved height. It fills that height and centres in it rather
   than leaving a band of empty panel under itself. */
.calc-answer.is-custom { grid-template-columns: minmax(0, 1fr); align-content: center }
.calc-answer.is-custom .ans-meta { max-width: 56ch; margin-top: .1rem }

/* Context for the answer, and deliberately quieter than it: no accent, a smaller
   figure. The benchmark comparison is the least certain number on the page and no
   longer the most eye-catching one. */
.calc-support { grid-area: support; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line) }
/* A display declaration outranks the hidden attribute, so say it here too: above the
   largest plan there is nothing to show and the row must leave the flow entirely. */
.calc-support[hidden] { display: none }
.sup { background: var(--panel); padding: 1.3rem 2.5rem }
.sup-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .5rem }
.sup-val { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  color: var(--text); font-variant-numeric: tabular-nums }
.sup-note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); margin-top: 6px; max-width: 46ch }
/* The comparison states its direction with an icon as well as words. */
.tone-lead { display: inline-flex; align-items: center; gap: .28em; white-space: nowrap }
.tone-lead svg { width: .7em; height: .7em; flex: none }
.sup--lower .tone-lead svg { color: var(--text-secondary) }
.sup--higher .tone-lead svg, .sup--same .tone-lead svg { color: var(--text-muted) }

/* The advisory line above the note is conditional, so the foot reserves its height
   rather than growing and shrinking as the slider crosses a plan boundary. */
.calc-foot { display: grid; align-content: center; gap: 2px; min-height: 72px; padding: .9rem 2.5rem;
  background: var(--bg); border-top: 1px solid var(--line) }
.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) }

.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 2.5rem; font-size: 13px; color: var(--text-secondary) }
.disclose--flat summary::after { width: 14px; height: 14px }
.disclose--flat .disclose-body { padding: 0 2.5rem 1rem }
.disclose--flat .disclose-body p { font-size: 13px }

/* ---------- final CTA ---------- */
.cta-section { padding: var(--sec) var(--gutter) var(--sec-lead); 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) }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .sup { padding: 1.2rem 2rem }
}
@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 }
  :root { --gutter: 1.25rem; --sec: 68px; --sec-lead: 80px; --sec-join: 48px }
  /* Clears the two-row bar (about 100px here) with room to breathe. */
  .hero { padding-top: 140px }
  .tiers-grid { grid-template-columns: minmax(0, 1fr) }
  .tiers-top { flex-direction: column; align-items: flex-start }
  .calc-ctrl { padding: 1.4rem 1.25rem }
  /* One column, and the action moves under the figures it follows from. */
  .calc-result { grid-template-columns: minmax(0, 1fr); grid-template-areas: "answer" "support" "act";
    grid-template-rows: auto auto auto }
  .calc-answer { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.25rem; gap: .9rem }
  .calc-act { justify-content: stretch; padding: 1.1rem 1.25rem; background: var(--panel);
    border-top: 1px solid var(--line) }
  .ans-money { text-align: left }
  .sup { padding: 1.1rem 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 }
  .legend { list-style: none; display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 20px; margin: .75rem 0 0;
    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: every figure the slider drives has to be on screen with the track, or the
   control is useless — you would move it, then scroll to find out what happened. So the
   result stops being stacked blocks and becomes rows: the count above the track, the
   plan and its rate in one tight block, and each supporting figure a single line with its
   label left and its value right. That is about 200px less than the stacked version and
   puts the last number ~370px under the thumb, which clears the fold on a small phone as
   well as a large one. */
@media (max-width: 640px) {
  .calc-ctrl { padding: 1.05rem 1.25rem 1rem }
  /* The count is right there at 32px; an example of it is a line and a reflow for nothing,
     and it vanished on first touch, which jogged the whole box as the drag began. */
  .example { display: none }
  .calc-ctrl-head { margin-bottom: .6rem }
  .slider-wrap { flex-direction: column; align-items: stretch; gap: .35rem }
  .readout { justify-content: space-between }
  .track-wrap { margin-top: 0 }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 16px; margin-top: .45rem; line-height: 1.45 }

  .calc-result { min-height: 0 }
  .calc-answer { padding: 1rem 1.25rem; gap: .45rem }
  .ans-label { margin-bottom: .25rem }
  .ans-name { font-size: calc(3rem * var(--disp)); margin-bottom: .2rem }
  .ans-meta { font-size: 12.5px; line-height: 1.4 }
  .ans-amount { font-size: 34px; margin-bottom: .2rem }
  .calc-act { padding: 1rem 1.25rem }
  .calc-act .btn { flex: 1 1 auto; min-height: 44px }

  /* One row per figure: label left, value right, the qualifier under both. A two-column
     grid of cells at this width wrapped every label and every note onto three lines. */
  .calc-support { grid-template-columns: minmax(0, 1fr) }
  .sup { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    column-gap: .9rem; padding: .6rem 1.25rem .65rem }
  /* Tighter tracking buys the longest label its own line beside the figure; at .1em
     "Vs project pricing" broke in two and left the value hanging off the first line. */
  .sup-label { margin-bottom: 0; letter-spacing: .06em }
  .sup-val { font-size: 19px; text-align: right }
  .sup-note { grid-column: 1 / -1; margin-top: 2px; line-height: 1.35; max-width: none }

  .hero-cta-row .btn, .cta-btns .btn { flex: 1 1 100% }
  /* One fact per line: at this width the separators put the breaks mid-phrase. */
  .hero-facts span { display: block; height: 0; overflow: hidden; margin: 0 }
}
@media (max-width: 360px) {
  .term-note { white-space: normal }
}

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

/* Touch screens get full targets on the compact controls, at every width — the links
     had them only under 900px, where the bar wraps to two rows. */
@media (pointer: coarse) {
  .nav-link { padding-block: 6px }
  .nav-cta { display: inline-flex; align-items: center; min-height: 44px }
  .calc-act .btn { min-height: 44px }
}