/* Calculator page — page-scoped layout on top of scroll.css (CalculatorV2). Prefix: .calc- */

/* ── Hero (dust) ── */
.calc-hero { padding-block: 120px 104px; }
.calc-hero__content { display: flex; flex-direction: column; gap: 28px; }
.calc-hero h1 { max-width: 1152px; font-size: clamp(56px, 6.4vw, 92px); text-wrap: initial; }
.calc-hero__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; margin-top: 8px; padding-top: 32px; border-top: 1px solid rgba(149,173,197,0.12); }
.calc-hero__foot .lead { max-width: 640px; }
.calc-hero__jump { justify-self: end; margin-bottom: 6px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(234,165,114,0.35); color: var(--coral); transition: background-color .25s ease, border-color .25s ease, transform .25s var(--ease-out); }
.calc-hero__jump svg { width: 22px; height: 22px; }
.calc-hero__jump:hover { background: rgba(234,165,114,0.1); border-color: var(--coral); transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) {
  .calc-hero__jump svg { animation: calc-bob 2.4s var(--ease-std) infinite; }
}
@keyframes calc-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (max-width: 900px) {
  .calc-hero__foot { gap: 32px; }
}
@media (max-width: 620px) {
  .calc-hero { padding-block: 72px 64px; }
  .calc-hero__content { gap: 20px; }
  .calc-hero h1 { font-size: clamp(36px, 11.2vw, 46px); text-wrap: balance; }
  .calc-hero h1 br { display: none; }
  .calc-hero__foot { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding-top: 22px; }
  .calc-hero__jump { display: none; }
}

/* ── Calculator layout ── */
.calc-panel { padding-block: 96px var(--pad-y); }
.calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }

/* inputs card */
.calc-inputs { display: flex; flex-direction: column; gap: 32px; padding: 40px; background: var(--charcoal); border: 1px solid var(--hair); border-radius: var(--radius-card); }
.calc-inputs__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid rgba(149,173,197,0.1); }
.calc-inputs__head h2 { font-size: 34px; line-height: 1.05; }

.calc-field { min-width: 0; }
.calc-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.calc-field__head--center { align-items: center; }
.calc-field__label { font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--cream); cursor: pointer; }
.calc-field__value { font: 700 32px/1 var(--font-display); color: var(--coral); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-field__scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--meta); }
.calc-field__help { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--slate); }
.calc-field--margin { padding-top: 28px; border-top: 1px solid rgba(149,173,197,0.1); }
.calc-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 16px; background: rgba(234,165,114,0.08); border: 1px solid rgba(234,165,114,0.22); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--coral); }
.calc-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.calc-note--warn { background: rgba(234,165,114,0.14); border-color: rgba(234,165,114,0.5); border-left-width: 4px; padding-left: 13px; }

/* range slider (v2 palette): filled coral track up to the thumb via --fill (set by JS) */
.calc-range { --fill: 50%; display: block; width: 100%; height: 28px; margin: 8px 0 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.calc-range:focus { outline: none; }
.calc-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--coral-ink) 0%, var(--coral) var(--fill), rgba(149,173,197,0.16) var(--fill)); }
.calc-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(149,173,197,0.16); }
.calc-range::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--coral-ink), var(--coral)); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--coral); border: 4px solid var(--charcoal); box-shadow: 0 0 0 1px var(--coral), 0 4px 14px rgba(0,0,0,0.5); transition: transform .18s var(--ease-out), box-shadow .2s ease, background-color .2s ease; }
.calc-range::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); border: 4px solid var(--charcoal); box-shadow: 0 0 0 1px var(--coral), 0 4px 14px rgba(0,0,0,0.5); transition: transform .18s var(--ease-out), box-shadow .2s ease; }
.calc-range:hover::-webkit-slider-thumb { background: var(--coral-glow); box-shadow: 0 0 0 1px var(--coral), 0 0 0 8px rgba(234,165,114,0.14), 0 4px 14px rgba(0,0,0,0.5); }
.calc-range:hover::-moz-range-thumb { box-shadow: 0 0 0 1px var(--coral), 0 0 0 8px rgba(234,165,114,0.14); }
.calc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc-range:active::-moz-range-thumb { transform: scale(1.12); }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--coral), 0 0 0 6px var(--charcoal), 0 0 0 8px var(--coral); }
.calc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--coral), 0 0 0 6px var(--charcoal), 0 0 0 8px var(--coral); }

/* margin number field */
/* Each slider carries a number box beside it: a slider alone cannot express
   "$18,750" when it steps in 500s. --num-w is set per field so the box is only
   as wide as the digits it holds. */
.calc-num { display: inline-flex; align-items: center; gap: 6px; }
.calc-num__input { width: var(--num-w, 96px); padding: 6px 10px; background: var(--placeholder); border: 1px solid rgba(149,173,197,0.22); border-radius: 8px; color: var(--coral); font: 700 26px/1.1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; transition: border-color .2s ease, box-shadow .2s ease; }
.calc-num__input::-webkit-outer-spin-button, .calc-num__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-num__input:hover { border-color: rgba(234,165,114,0.45); }
.calc-num__input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(234,165,114,0.18); }
.calc-num__unit { font: 700 22px/1 var(--font-display); color: var(--coral); white-space: nowrap; }

.calc-margin { display: flex; align-items: center; gap: 8px; }
.calc-margin__input { width: 92px; padding: 8px 12px; background: var(--placeholder); border: 1px solid rgba(149,173,197,0.22); border-radius: 8px; color: var(--cream); font: 700 26px/1.1 var(--font-display); text-align: right; -moz-appearance: textfield; appearance: textfield; transition: border-color .2s ease, box-shadow .2s ease; }
.calc-margin__input::-webkit-outer-spin-button, .calc-margin__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-margin__input:hover { border-color: rgba(234,165,114,0.45); }
.calc-margin__input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(234,165,114,0.18); }
.calc-margin__unit { font: 700 26px/1 var(--font-display); color: var(--coral); }

/* results */
.calc-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.calc-hero-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 32px 40px; background: var(--charcoal); border: 1px solid rgba(234,165,114,0.28); border-radius: var(--radius-card); text-align: center; }
.calc-hero-stat::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(234,165,114,0.14) 0%, rgba(234,165,114,0) 70%); }
.calc-hero-stat > * { position: relative; }
.calc-hero-stat__label { font: 600 12px/1.3 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--coral); }
.calc-hero-stat { container-type: inline-size; }
.calc-hero-stat__n { font: 700 min(80px, calc(190cqi / var(--len, 7)))/1 var(--font-display); color: var(--coral); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-hero-stat__meta { max-width: 34ch; font: 500 13.5px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--slate); }  /* a sentence now, not a two-word caption */

.calc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.calc-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px 24px 22px; background: var(--charcoal); border: 1px solid var(--hair); border-radius: var(--radius-card); }
.calc-tile__label { font: 600 11px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--slate); }
.calc-tile { container-type: inline-size; }
.calc-tile__n { font: 700 min(40px, calc(190cqi / var(--len, 5)))/1 var(--font-display); color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; }

.calc-breakdown { margin: 0; padding: 8px 28px; background: var(--charcoal); border: 1px solid var(--hair); border-radius: var(--radius-card); }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 15px; line-height: 1.4; }
.calc-row + .calc-row { border-top: 1px solid var(--hair); }
.calc-row dt { color: var(--slate); }
.calc-row dd { margin: 0; color: var(--cream); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-row--strong dt { color: var(--cream); font-weight: 600; }
.calc-row--strong dd { font-weight: 700; }
.calc-row--fee dt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.calc-row--profit { padding: 18px 0 16px; }
.calc-row--profit dt { color: var(--coral); font-weight: 600; }
.calc-row--profit dd { font: 700 30px/1 var(--font-display); color: var(--coral); }

/* Monthly / Quarterly segmented toggle */
.calc-toggle { display: inline-flex; padding: 3px; background: var(--placeholder); border: 1px solid rgba(149,173,197,0.15); border-radius: 999px; }
.calc-toggle__opt { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; font: 700 11px/1.3 var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--slate); transition: background-color .2s ease, color .2s ease; }
.calc-toggle__opt:hover { color: var(--cream); }
.calc-toggle__opt[aria-checked="true"] { background: var(--coral); color: var(--ink); }
.calc-toggle__opt:focus-visible { outline-offset: 2px; border-radius: 999px; }

.calc-fine { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 0; list-style: none; font-size: 12px; line-height: 1.6; color: #7f8c98; }
.calc-results__cta { margin-top: 8px; }


@media (max-width: 1100px) {
  .calc-inputs { padding: 32px 28px; }
  .calc-breakdown { padding: 6px 22px; }
}
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 620px) {
  .calc-panel { padding-block: 40px 56px; }
  .calc-inputs { gap: 26px; padding: 24px 20px; border-radius: 14px; }
  .calc-inputs__head { padding-bottom: 20px; }
  .calc-inputs__head h2 { font-size: clamp(26px, 7.7vw, 30px); }
  .calc-field__label { font-size: 11px; letter-spacing: 1.5px; }
  .calc-field__value { font-size: 26px; }
  .calc-field__help { font-size: 13px; }
  .calc-margin__input { width: 80px; font-size: 22px; padding: 6px 10px; }
  .calc-num__input { width: calc(var(--num-w, 96px) - 14px); font-size: 20px; padding: 6px 8px; }
  .calc-num__unit { font-size: 18px; }
  .calc-margin__unit { font-size: 22px; }
  .calc-hero-stat { padding: 30px 20px 28px; border-radius: 14px; }
  .calc-hero-stat__label { font-size: 11px; letter-spacing: 2px; }
  .calc-hero-stat__n { font-size: min(56px, calc(190cqi / var(--len, 7))); }
  .calc-hero-stat__meta { font-size: 11px; }
  .calc-tiles { gap: 10px; }
  .calc-tile { padding: 18px 16px; gap: 8px; border-radius: 14px; }
  .calc-tile__label { font-size: 10px; letter-spacing: 1.5px; }
  .calc-tile__n { font-size: min(30px, calc(190cqi / var(--len, 5))); }
  .calc-breakdown { padding: 4px 18px; border-radius: 14px; }
  .calc-row { padding: 14px 0; font-size: 14px; gap: 12px; }
  .calc-row--profit { flex-wrap: wrap; row-gap: 6px; }
  .calc-row--profit dd { font-size: 26px; }
}
@media (max-width: 360px) {
  .calc-row--fee { flex-wrap: wrap; }
}

/* ── Let's Talk (cream) + booking ── */
.calc-talk__grid { gap: 64px; }
.calc-talk__copy { gap: 20px; }
.calc-talk__copy .lead { max-width: 520px; }
.calc-talk__photo { position: relative; align-self: stretch; margin-top: 16px; aspect-ratio: 740 / 600; border-radius: var(--radius-card); overflow: hidden; background: #E6E3DC; }
.calc-talk__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.calc-talk .booking { border: 1px solid rgba(26,26,26,0.08); box-shadow: 0 24px 60px rgba(26,26,26,0.10); }
@media (min-width: 901px) {
  .calc-talk__copy { position: sticky; top: calc(var(--navh) + 48px); }
}
@media (max-width: 900px) {
  .calc-talk__grid { gap: 40px; }
  .calc-talk__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .calc-talk__grid { gap: 28px; }
  .calc-talk__copy { gap: 16px; }
  .calc-talk__photo { margin-top: 4px; border-radius: 12px; }
}

/* three scenarios, so one optimistic default does not set the expectation alone */
.calc-scen { margin-top: 26px; padding: 22px 22px 18px; border: 1px solid var(--hair-2); border-radius: 14px; background: rgba(255,255,255,0.03); }
.calc-scen__title { font: 600 11px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--meta); }
.calc-scen__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.calc-scen__cell { padding: 14px 14px 13px; border-radius: 11px; background: rgba(255,255,255,0.04); text-align: center; }
.calc-scen__cell--mid { background: rgba(234,165,114,0.12); outline: 1px solid rgba(234,165,114,0.34); }
.calc-scen__name { font: 600 11px/1 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--meta); }
.calc-scen__n { margin-top: 9px; font: 700 clamp(21px, 2.3vw, 29px)/1 var(--font-display); color: var(--cream); }
.calc-scen__cell--mid .calc-scen__n { color: var(--coral); }
.calc-scen__meta { margin-top: 7px; font-size: 11.5px; line-height: 1.4; color: var(--slate); }
.calc-scen__note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--slate); }
@media (max-width: 620px) {
  .calc-scen { margin-top: 20px; padding: 18px 16px 15px; }
  .calc-scen__grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .calc-scen__cell { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: left; padding: 12px 14px; }
  .calc-scen__name { flex: none; }
  .calc-scen__n { margin-top: 0; font-size: 22px; }
  .calc-scen__meta { margin-top: 0; flex-basis: 100%; }
}

/* the hero folded into the calculator, so the page headline lives here now */
.calc-inputs__title { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; text-wrap: pretty; }
.calc-inputs__qualifier { margin-top: 14px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--slate); }
.calc-inputs__eyebrow { margin-top: 30px; }
.calc-row__note { margin: -4px 0 0; padding-bottom: 12px; font-size: 12.5px; line-height: 1.5; color: var(--meta); }

/* ── One-screen layout ──
   The inputs card carried the page title, a qualifier, an eyebrow and an h2:
   361px of header before the first slider. The title now sits above both
   columns, the card keeps only its own heading, and the results column sticks
   so a slider change is always visible without scrolling back up. */
/* Photo hero, matching /our-team/. It carries the heading so the calculator
   below can own a whole screen on its own. */
.calc-hero { padding-block: clamp(84px, 11vw, 152px); }
.calc-hero__content { gap: 24px; max-width: 860px; }
.calc-hero__title { font-size: clamp(46px, 5.4vw, 78px); line-height: 1.02; }
.calc-hero__lead { max-width: 560px; }
@media (max-width: 620px) {
  .calc-hero { padding-block: 64px 72px; }
  .calc-hero__content { gap: 18px; }
  .calc-hero__title { font-size: clamp(34px, 10.4vw, 44px); line-height: 1.04; }
  .calc-hero__title br { display: none; }
}
.calc-head__title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; }
.calc-head__qualifier { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.calc-panel { padding-block: clamp(28px, 4vh, 56px) clamp(40px, 6vh, 96px); }
.calc-inputs { gap: 20px; padding: 28px; }
.calc-inputs__head { padding-bottom: 16px; gap: 6px; }
.calc-field__value { font-size: 26px; }
.calc-field__help { margin-top: 6px; font-size: 13px; line-height: 1.45; }
.calc-field__scale { margin-top: 6px; font-size: 11px; }
.calc-field--margin { padding-top: 18px; }
@media (min-width: 1025px) {
  /* Full-screen calculator: the grid is capped to the viewport and each column
     scrolls inside itself, so the sliders and the numbers they change are always
     on screen together. Sticky could not do this: a sticky card can only travel
     inside its own grid item, which was the height of the inputs.
     .panel sets overflow:clip for its rounded corners, which would also have
     made the panel the scroll container. */
  .calc-panel { overflow: visible; padding-block: 28px; }
  /* the heading is a separate band now, so the grid gets the screen minus the
     sticky header and this panel's own padding */
  .calc { height: calc(100vh - var(--navh) - 56px); align-items: stretch; gap: 20px; }
  /* Two sliders per row. Five stacked fields could not fit any laptop viewport,
     so the column only "fitted" by clipping and scrolling inside itself, which is
     still scrolling to reach a slider. Three rows instead of five removes ~300px.
     The margin field keeps its own row: it is a number input, not a slider. */
  .calc-inputs__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
  .calc-field--margin { grid-column: 1 / -1; }
  .calc-field__help { font-size: 12.5px; line-height: 1.4; }
  /* three tiles on one row rather than 2 + 1: same figures, ~120px less height */
  .calc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-hero-stat { padding: 18px 22px; }
  .calc-inputs, .calc-resultcol { min-height: 0; }
  .calc-inputs { overflow-y: auto; overscroll-behavior: contain; }
  .calc-resultcol { display: flex; }
  .calc-results { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* Belt and braces: if a short viewport still overflows, the button stays put
     at the bottom of the column rather than scrolling out of reach. */
  .calc-results__cta { position: sticky; bottom: 0; margin-top: auto; }
  /* the card is a flex column: without this its children shrink to fit the
     capped height and the headline number collapses to nothing */
  .calc-results > * { flex: 0 0 auto; }
  .calc-inputs, .calc-results { scrollbar-width: thin; scrollbar-color: rgba(149,173,197,0.3) transparent; }
  .calc-inputs::-webkit-scrollbar, .calc-results::-webkit-scrollbar { width: 6px; }
  .calc-inputs::-webkit-scrollbar-thumb, .calc-results::-webkit-scrollbar-thumb { background: rgba(149,173,197,0.3); border-radius: 3px; }
}
/* results: the live numbers sit at the top, so the sticky card keeps them in
   view; the breakdown and fine print below are reference and may run past the
   fold. Trimmed anyway so more of the card fits at 900px. */
.calc-results { gap: 12px; }
.calc-hero-stat { padding: 22px 24px; }
.calc-tiles { gap: 12px; }
.calc-scen { padding: 18px 20px; }
.calc-breakdown { padding: 18px 20px; }
.calc-fine { font-size: 12px; line-height: 1.5; }

/* The breakdown and the fine print are reference, not live figures, and together
   they were 447px of a card that had to fit beside the sliders. Collapsed by
   default so the numbers that respond to the sliders fit on one screen. */
.calc-more { border-top: 1px solid rgba(149,173,197,0.12); padding-top: 14px; }
.calc-more__toggle { cursor: pointer; list-style: none; font: 600 12px/1 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--coral); }
.calc-more__toggle::-webkit-details-marker { display: none; }
.calc-more__toggle::after { content: ' +'; }
.calc-more[open] .calc-more__toggle::after { content: ' −'; }
.calc-more__toggle:hover { color: var(--coral-glow); }
.calc-more > *:not(summary) { margin-top: 14px; }

/* ── What the projection assumes ──
   Sits with the results rather than behind the breakdown toggle: an assumption
   you have to open a disclosure to find is one most people never read. */
.calc-assume { padding: 18px 20px; border: 1px solid rgba(149,173,197,0.16); border-radius: 12px; background: rgba(255,255,255,0.02); }
.calc-assume__title { font: 600 11px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral); }
.calc-assume__list { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.calc-assume__list li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.calc-assume__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 1px; background: var(--coral); }
.calc-assume__list b { color: var(--cream); font-weight: 700; }
.calc-assume__link { margin-top: 12px; font-size: 13px; }
@media (max-width: 620px) { .calc-assume { padding: 16px; } .calc-assume__list li { font-size: 13px; } }

/* ── Fit the results column on a desktop, rather than scrolling it ──
     Measured at 1440x900: 1028px of content in a 766px column, so 262px was
     hidden and the booking button sat below the fold of its own scroller. A
     column you have to scroll to reach the call to action is a column that does
     not convert, so everything comes down a step instead: the hero figure, the
     gaps, the scenario block, and the assumptions, which at 328px were the
     largest thing here and not the hero card Dan pointed at. */
@media (min-width: 1025px) {
  .calc-results { gap: 7px; }
  .calc-tile { padding: 14px 16px; }
  .calc-tile__n { font-size: 30px; }
  .calc-scen__grid { gap: 8px; }
  .calc-scen__cell { padding: 10px 8px; }
  .calc-hero-stat { padding: 16px 24px 14px; gap: 4px; }
  .calc-hero-stat__n { font-size: min(54px, calc(150cqi / var(--len, 7))); }
  .calc-hero-stat__meta { max-width: 42ch; font-size: 12.5px; line-height: 1.4; }
  .calc-scen { padding: 14px 16px; }
  .calc-scen__n { font-size: 25px; }
  .calc-assume { padding: 13px 16px; }
  .calc-assume__list { gap: 4px; margin-top: 8px; }
  .calc-assume__list li { font-size: 12.5px; line-height: 1.4; }
  .calc-assume__link { margin-top: 8px; font-size: 12px; }
}