/* ===========================================================================
   /roi-calculator — the instrument.

   Additions only. The page runs on site.css (shell, frame, sec-head, nav, dark
   sections, footer, buttons) and this file holds what that page does not
   already have: a stage, a panel, a set of controls, and a readout.

   ROUND TWO, 2026-08-01. Round one built this block as flat ruled paper on the
   page's own ground — hairlines, no fill, no shadow, no radius — on the
   reasoning that Stageflow's floating white card was a skin worth refusing.
   Peter reviewed the two side by side and the verdict was that the trade was
   wrong: their product-grade surface is the thing to have here, and this page
   is authorised to leave the flat editorial system the rest of the site runs
   on. So depth is now in the vocabulary. Elevation, shadow, modest radii
   (8–14px, never a pill on a container), recessed inputs, a sliding segmented
   control, a results card built like hardware.

   WHAT DID NOT CHANGE: the tokens, the three faces, mono labels in tracked
   caps, tabular figures, printed working under every result, and the accent
   discipline below. Nothing here is invented — every colour is a token or a
   token at a stated alpha.

   THE GESTURE: an instrument on a lit bench. An ink field runs the full width
   of the viewport; a paper panel floats on it with a real shadow; a dark
   readout is set into the panel like a screen into a machined face. Depth
   reads in three planes and never more: the stage behind, the panel on it, the
   screen in it.

   ACCENT DISCIPLINE. Vermilion appears in six kinds and no more: the index
   mark on a slider knob, the focus ring on whatever control has focus, the
   status square on the readout bar, the one headline figure in the readout
   (and its echo on the snapshot's difference row), the flag on the cheapest
   card, and the single filled button in the closing section. On canvas the
   accent clears 3:1 and is therefore only ever used at 24px and up or as a
   mark; on the ink card it clears 4.67:1 and can carry small type. No line-item
   dollar amount is accent.

   SHADOW LADDER. Three steps, and every value here is ink at an alpha.
     rest    0 1px 2px / .04    + 0 12px 28px -14px / .20
     lifted  0 2px 4px / .06    + 0 20px 40px -16px / .26
     panel   0 2px 6px / .06    + 0 40px 80px -28px / .55  (on the ink stage)
   =========================================================================== */

/* Screen-reader-only, for the table captions and the live region. site.css has
   no such utility. */
.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;
}

/* ---------------------------------------------------------------- masthead */

.ar-mast__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 11px; letter-spacing: 0.2em; color: var(--faint);
  padding: 20px 0; border-bottom: 1px solid var(--hair);
}
/* Ink rather than the site's usual accent section label. Vermilion on canvas is
   3.1:1, which is fine at 40px and not fine at 11px, and this page has an
   accent figure to protect. */
.ar-mast__meta-l { color: var(--ink); }
.ar-mast__grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.ar-mast__copy { padding: 68px 56px 72px 0; border-right: 1px solid var(--hair); }
.ar-mast__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6.2vw, 78px); line-height: 1.0; letter-spacing: -0.022em;
  margin: 0; max-width: 12ch;
}
.ar-mast__lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 540px; margin: 30px 0 0; }
.ar-mast__note { font-size: 11px; letter-spacing: 0.16em; line-height: 1.7; color: var(--faint); margin: 26px 0 0; }

/* The index reads as a small printed card rather than a list on the page —
   the first hint of the depth the stage below runs on. */
.ar-mast__index { padding: 68px 0 72px 56px; }
.ar-index__card {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
  padding: 24px 24px 20px;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 12px 28px -14px rgba(20, 21, 26, 0.18);
}
.ar-index__label { font-size: 11px; letter-spacing: 0.2em; color: var(--ink); margin: 0 0 8px; }
.ar-index__list { list-style: none; margin: 0; padding: 0; }
.ar-index__list li {
  display: flex; gap: 16px; align-items: baseline;
  border-top: 1px solid var(--hair); padding: 13px 0;
  font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.5; color: var(--ink-2);
}
.ar-index__no { color: var(--faint); flex: none; }
.ar-index__foot {
  border-top: 1px solid var(--hair); padding-top: 16px; margin: 0;
  font-size: 10.5px; letter-spacing: 0.14em; line-height: 1.8; color: var(--faint);
}

/* ------------------------------------------------------------- the stage */

/* Full-bleed ink. Everything the instrument needs to read as an object sits on
   this: the contrast under the panel is what does the work, and it is the one
   thing a flat page cannot fake. */
.ar-stage {
  background: var(--ink); color: var(--on-ink);
  padding: 64px 0 104px;
}
.ar-stage .sec-head--dark { border-bottom-color: var(--dark-line-3); }
.ar-stage__foot {
  font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.8;
  color: var(--on-ink-legal); margin: 26px 0 0; text-align: center;
}

/* The panel. Paper, one modest radius, and the heaviest shadow on the site —
   which it can carry because it is the only object at this plane. */
/* The colour is restated rather than inherited: the stage sets on-ink for its
   own type, and anything inside the panel that forgot to name a colour would
   otherwise arrive light-on-paper. */
.ar-panel {
  background: var(--paper); color: var(--ink); border-radius: 14px;
  margin-top: 40px; padding: 44px;
  box-shadow:
    0 2px 6px rgba(20, 21, 26, 0.06),
    0 40px 80px -28px rgba(20, 21, 26, 0.55);
}

/* ----------------------------------------------------------- the worksheet */

.ar__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr); }
.ar__inputs { padding: 0 44px 8px 0; border-right: 1px solid var(--hair); }
.ar__ledger { padding: 0 0 8px 44px; align-self: start; }
/* The screen follows the controls only on a viewport tall enough to hold the
   whole of it. A sticky panel that has to scroll inside itself is a panel with
   a hidden bottom, and the bottom of this one is where our price sits. */
@media (min-height: 940px) {
  .ar__ledger { position: sticky; top: 96px; }
}
.ar__col-label {
  font-size: 11px; letter-spacing: 0.22em; color: var(--ink);
  margin: 0 0 32px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}

/* ---------------------------------------------------------------- a field */

.ar-field + .ar-field { margin-top: 36px; }
.ar-field__label {
  display: block; font-size: 11px; letter-spacing: 0.18em; line-height: 1.6;
  color: var(--ink-2); margin: 0 0 12px;
}

/* Label left, live value right, the track its own full width underneath —
   Stageflow's control layout, and it is better than the side-by-side row round
   one shipped: a full-width track is more precision per pixel of drag, and a
   value set at the end of the label line is read before the label is. */
.ar-ctl {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin: 0 0 14px;
}
.ar-ctl__label {
  font-size: 11px; letter-spacing: 0.16em; line-height: 1.65;
  color: var(--ink-2); margin: 0; max-width: 42ch;
}
/* The readout is a real input: the number you are watching is the number you
   can type into. The rule under it is the affordance. */
.ar-ctl__val {
  flex: none; display: flex; align-items: baseline; gap: 6px;
  border-bottom: 1px solid var(--hair-strong); padding: 0 2px 5px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.ar-ctl__val:hover { border-bottom-color: var(--ink-2); }
.ar-ctl__val:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.ar-ctl__unit { font-size: 12px; letter-spacing: 0.14em; color: var(--faint); }

.ar-readout {
  flex: none; width: 4.4ch; text-align: right;
  background: none; border: 0; border-radius: 0; padding: 0;
  font-family: var(--mono); font-size: 34px; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ar-readout:focus { outline: none; }
.ar-readout::-webkit-outer-spin-button, .ar-readout::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ar-readout[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Recessed. The panel is the raised plane, so every place that takes a value
   sits below it: wash fill, an inset hairline of shade, and a hard border. */
.ar-field__row {
  display: flex; align-items: center; gap: 10px;
  background: var(--wash); border: 1px solid var(--hair-strong); border-radius: 10px;
  padding: 0 16px;
  box-shadow: inset 0 1px 2px rgba(20, 21, 26, 0.045);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.ar-field__row:hover { border-color: var(--ink-2); }
.ar-field__row:focus-within {
  background: var(--paper); border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(229, 72, 42, 0.26);
}
.ar-field__input {
  flex: 1; min-width: 0; width: 100%;
  background: none; border: 0; border-radius: 0; padding: 15px 0 16px;
  font-family: var(--sans); font-size: 22px; line-height: 1.25; color: var(--ink);
}
.ar-field__input:focus { outline: none; }
/* No stepper arrows. Platform chrome is the one borrowed object on a face this
   deliberate. */
.ar-field__input::-webkit-outer-spin-button, .ar-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ar-field__input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ar-field__unit { font-size: 15px; letter-spacing: 0.1em; color: var(--faint); flex: none; }
.ar-field__unit--pre { font-size: 19px; letter-spacing: 0; color: var(--ink-2); }
.ar-field__note { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; max-width: 46ch; }
/* Ink, with the accent carried by a mark rather than the words. Small accent
   text on canvas does not clear 4.5:1, and no meaning here rides on colour. */
.ar-field__err { font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink); margin: 10px 0 0; }
.ar-field__err::before { content: '\25A0'; color: var(--accent); margin-right: 8px; }
.ar-field__derived { font-size: 10.5px; letter-spacing: 0.16em; color: var(--faint); margin: 10px 0 0; }

/* -------------------------------------------------------------- the track */

/* An 8px rail, hard two-stop fill, and a machined knob: paper cap, real lift,
   one vermilion index mark down the middle. The mark is the detail that makes
   the control ours rather than a restyled platform default — a fader index, not
   a dot. */
.ar-slide { padding: 4px 0 0; }
.ar-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 26px; background: none; cursor: pointer; margin: 0;
}
.ar-range:focus { outline: none; }

.ar-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px;
  background: linear-gradient(to right, var(--ink) 0 var(--p, 0%), var(--hair) var(--p, 0%) 100%);
}
.ar-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 2px 9px no-repeat,
    var(--paper);
  border: 1px solid var(--hair-strong); cursor: grab;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.18), 0 4px 10px -2px rgba(20, 21, 26, 0.22);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.ar-range:hover::-webkit-slider-thumb { box-shadow: 0 1px 2px rgba(20, 21, 26, 0.2), 0 6px 14px -2px rgba(20, 21, 26, 0.28); }
.ar-range:active::-webkit-slider-thumb {
  transform: scale(1.08); cursor: grabbing;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.22), 0 8px 18px -3px rgba(20, 21, 26, 0.32);
}
.ar-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(229, 72, 42, 0.34), 0 1px 2px rgba(20, 21, 26, 0.2), 0 4px 10px -2px rgba(20, 21, 26, 0.22);
}

.ar-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--hair); }
.ar-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--ink); }
.ar-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 2px 9px no-repeat,
    var(--paper);
  border: 1px solid var(--hair-strong); cursor: grab;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.18), 0 4px 10px -2px rgba(20, 21, 26, 0.22);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.ar-range:active::-moz-range-thumb { transform: scale(1.08); cursor: grabbing; }
.ar-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(229, 72, 42, 0.34); }

.ar-scale {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--faint); margin: 10px 0 0;
}
.ar-scale__flag { color: var(--ink); }
.ar-scale__flag[hidden] { display: none; }

/* -------------------------------------------------------------- segmented */

/* Round one refused the sliding lozenge on the grounds that it is the iOS
   default and belongs to nobody. It is also the single most satisfying two-way
   control in general use, and this round takes it: recessed wash track, paper
   cap on a spring curve, our radius and our mono type rather than theirs. */
.seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  width: 100%; max-width: 420px;
  background: var(--wash); border: 1px solid var(--hair-strong); border-radius: 11px;
  padding: 4px; box-shadow: inset 0 1px 2px rgba(20, 21, 26, 0.045);
}
.seg__ind {
  position: absolute; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--paper); border: 1px solid var(--hair); border-radius: 8px;
  box-shadow: 0 1px 1px rgba(20, 21, 26, 0.06), 0 3px 8px -2px rgba(20, 21, 26, 0.16);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
.seg.is-2 .seg__ind { transform: translateX(100%); }
.seg__b {
  position: relative; z-index: 1;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-2);
  padding: 14px 12px; border-radius: 8px;
  transition: color 160ms ease-out;
}
.seg__b:hover { color: var(--ink); }
.seg__b.is-active { color: var(--ink); }
.seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* -------------------------------------------------------------- add it up */

.ar-tasks { margin-top: 20px; }
.ar-tasks__toggle {
  display: inline-flex; align-items: center;
  background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 9px;
  padding: 11px 15px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04);
  transition: border-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.ar-tasks__toggle:hover { border-color: var(--ink); box-shadow: 0 1px 2px rgba(20, 21, 26, 0.06), 0 6px 14px -8px rgba(20, 21, 26, 0.25); }
.ar-tasks__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-tasks__mark { display: inline-block; transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.ar-tasks__toggle.is-open .ar-tasks__mark { transform: rotate(90deg); }

.ar-tasks__panel {
  background: var(--wash); border: 1px solid var(--hair); border-radius: 12px;
  margin: 16px 0 0; padding: 6px 20px 18px; min-width: 0;
  box-shadow: inset 0 1px 2px rgba(20, 21, 26, 0.035);
}
.ar-tasks__legend { font-size: 10px; letter-spacing: 0.18em; color: var(--faint); padding: 16px 0 4px; }
.ar-task {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--hair); padding: 9px 0;
}
.ar-task__label { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.ar-task__in {
  flex: none; width: 78px; text-align: right;
  background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 8px;
  padding: 9px 10px; font-family: var(--mono); font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.ar-task__in::-webkit-outer-spin-button, .ar-task__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ar-task__in[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ar-task__in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(229, 72, 42, 0.26); }
.ar-task__u { flex: none; width: 26px; font-size: 10px; letter-spacing: 0.14em; color: var(--faint); }
.ar-tasks__sum {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--ink); margin: 0; padding: 16px 0 0;
  font-size: 11px; letter-spacing: 0.18em; color: var(--ink);
}
.ar-tasks__sum-v { font-variant-numeric: tabular-nums; color: var(--ink); }
.ar-tasks__foot { font-size: 10px; letter-spacing: 0.14em; line-height: 1.7; color: var(--faint); margin: 12px 0 0; }

/* ------------------------------------------------------------ the screen */

/* Set into the panel like a screen into a machined face: one hairline of light
   along the top edge, a dark border, a real shadow under it, and square-cut
   rows clipped by the radius. */
.rc {
  background: var(--ink); color: var(--on-ink);
  border: 1px solid var(--dark-line-3); border-radius: 12px; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(237, 234, 227, 0.10),
    0 2px 4px rgba(20, 21, 26, 0.10),
    0 24px 48px -20px rgba(20, 21, 26, 0.55);
}
.rc__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 10px; letter-spacing: 0.2em; color: var(--on-ink-faint);
  padding: 16px 28px; border-bottom: 1px solid var(--dark-line-2);
}
/* The status square, which is the site's own mark. Dark while the instrument
   has nothing to say, lit the moment a figure on it is real. */
.rc__dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 11px;
  background: var(--dark-line-3); vertical-align: 1px;
  transition: background-color 220ms ease-out;
}
.rc.is-live .rc__dot { background: var(--accent); }
.rc__vol { color: var(--on-ink); font-variant-numeric: tabular-nums; }

.rc__hero { padding: 34px 28px 30px; border-bottom: 1px solid var(--dark-line-2); }
.rc__label { font-size: 10px; letter-spacing: 0.2em; line-height: 1.6; color: var(--on-ink-faint); margin: 0 0 18px; }
.rc__fig {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(42px, 5.2vw, 62px); line-height: 0.98; letter-spacing: -0.028em;
  color: var(--on-ink-faint); margin: 0;
  font-variant-numeric: tabular-nums;
}
/* The one accent figure. It lights only when the number is real. */
.rc.is-live .rc__fig { color: var(--accent); }
.rc__fig.is-long { font-size: clamp(34px, 4.1vw, 48px); }
.rc__fig.is-vlong { font-size: clamp(26px, 3.1vw, 36px); }
.rc__fig .ar-fig__u { font-size: 0.3em; letter-spacing: 0.16em; margin-left: 0.55em; color: var(--on-ink-faint); vertical-align: baseline; }
.rc__work { font-size: 10px; letter-spacing: 0.14em; line-height: 1.7; color: var(--on-ink-legal); margin: 20px 0 0; font-variant-numeric: tabular-nums; }
.rc__say { font-size: 14.5px; line-height: 1.55; color: var(--on-ink-sub); margin: 16px 0 0; max-width: 44ch; }

.rc__items { margin: 0; padding: 0; }
.rc__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 28px; border-bottom: 1px solid var(--dark-line);
}
.rc__row[hidden] { display: none; }
.rc__row dt { font-size: 10px; letter-spacing: 0.16em; line-height: 1.5; color: var(--on-ink-faint); }
.rc__row dd { margin: 0; }
.rc__v { font-size: 17px; line-height: 1.2; color: var(--on-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc__v.is-empty { color: var(--on-ink-legal); }
.rc__v .ar-fig__u { font-size: 0.6em; letter-spacing: 0.12em; margin-left: 0.4em; color: var(--on-ink-faint); }
/* Our own lines, washed a shade lighter — the reader should always be able to
   see at a glance which row is our price and which rows are theirs. */
.rc__row--ours { background: rgba(237, 234, 227, 0.05); border-bottom-color: var(--dark-line-3); }
.rc__row--ours dt { color: var(--on-ink); }

/* The nested note. Stageflow puts their caveat in a lighter panel inside the
   dark card and it is the right move: a note that sits on the same plane as the
   figures competes with them. */
.rc__verdict {
  background: rgba(237, 234, 227, 0.055); border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0; margin: 24px 28px; padding: 20px 22px;
}
.rc__verdict--quiet { border-left-color: var(--dark-line-3); }
.rc__verdict[hidden] { display: none; }
.rc__verdict-label { font-size: 10px; letter-spacing: 0.2em; color: var(--on-ink-faint); margin: 0 0 12px; }
.rc__verdict-body { font-size: 15px; line-height: 1.6; color: var(--on-ink); margin: 0; }
.rc__link {
  display: inline-block; margin-top: 18px; padding-bottom: 4px;
  font-size: 10.5px; letter-spacing: 0.18em; color: var(--on-ink);
  text-decoration: none; border-bottom: 1px solid var(--dark-line-3);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.rc__link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rc__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.rc__foot {
  font-size: 9.5px; letter-spacing: 0.14em; line-height: 1.9; color: var(--on-ink-legal);
  margin: 0; padding: 18px 28px 20px; border-top: 1px solid var(--dark-line-2);
}

/* No count-up, ever. A number that rolls up is drama applied to arithmetic and
   it is the same theatre as the green savings card. What a changed figure gets
   instead is 140ms of settle: it arrives at its final value immediately and
   fades the last of the way in. */
@keyframes ar-fig-in { from { opacity: 0.3; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.rc__fig.is-fresh, .rc__v.is-fresh, .rc__work.is-fresh, .snap__v.is-fresh, .snap__n.is-fresh {
  animation: ar-fig-in 140ms ease-out;
}

/* ------------------------------------------------------ planning snapshot */

.ar-panel__cap {
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; color: var(--ink);
  margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.ar-panel__foot {
  font-size: 10px; letter-spacing: 0.14em; line-height: 1.9; color: var(--faint);
  margin: 18px 0 0;
}
/* Wide content scrolls inside its own container, never the page. */
.ar-tab-wrap { overflow-x: auto; }

.snap { border-top: 1px solid var(--hair); margin-top: 44px; padding-top: 40px; }
.snap__tab { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.snap__tab thead th {
  font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.18em;
  color: var(--faint); text-align: right; padding: 18px 12px 12px; border-bottom: 1px solid var(--ink);
}
.snap__tab thead th:first-child { text-align: left; padding-left: 16px; }
.snap__tab thead th:last-child { padding-right: 16px; }
.snap__tab tbody th, .snap__tab tbody td { border-bottom: 1px solid var(--hair); }
.snap__tab tbody th {
  text-align: left; font-weight: 400; font-size: 17px; line-height: 1.35;
  color: var(--ink); padding: 20px 12px 20px 16px;
}
.snap__work { display: block; font-size: 10px; letter-spacing: 0.13em; line-height: 1.6; color: var(--faint); margin-top: 8px; }
.snap__n, .snap__v { text-align: right; white-space: nowrap; font-size: 18px; color: var(--ink); padding: 20px 12px; }
.snap__tab tbody td:last-child { padding-right: 16px; }
.snap__n { color: var(--ink-2); }
.snap__n.is-empty, .snap__v.is-empty { color: var(--faint); }

/* The total row is filled and rounded rather than merely ruled — the one row a
   reader should be able to find without reading the table. */
.snap__diff th, .snap__diff td {
  background: var(--wash); border-bottom: 0; border-top: 1px solid var(--ink);
  padding-top: 24px; padding-bottom: 24px;
}
.snap__diff th { font-weight: 500; border-radius: 10px 0 0 10px; }
.snap__diff td:last-child { border-radius: 0 10px 10px 0; }
.snap__v--diff { font-size: 30px; letter-spacing: -0.015em; color: var(--accent); }
.snap__v--diff.is-empty { color: var(--faint); }
.snap__v--diff.is-long { font-size: 26px; }
.snap__v--diff.is-vlong { font-size: 20px; }

/* ------------------------------------------------------------- the rest */

.ar-rest { background: var(--canvas); padding-top: 96px; }

/* ------------------------------------------------------------ the band */

/* Four cards, read left to right as a price ladder from the single kit down to
   the extra. The order is the argument: $49 first is what makes $29 legible. */
.band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.band__card {
  position: relative; background: var(--paper);
  border: 1px solid var(--hair); border-radius: 12px; padding: 30px 26px 26px;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 12px 28px -14px rgba(20, 21, 26, 0.20);
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms ease-out;
}
.band__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 21, 26, 0.06), 0 20px 40px -16px rgba(20, 21, 26, 0.26);
}
.band__card--best {
  background: var(--ink); border-color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(237, 234, 227, 0.10),
    0 3px 6px rgba(20, 21, 26, 0.12),
    0 26px 52px -20px rgba(20, 21, 26, 0.45);
}
.band__card--best:hover {
  box-shadow:
    inset 0 1px 0 rgba(237, 234, 227, 0.10),
    0 4px 8px rgba(20, 21, 26, 0.14),
    0 34px 64px -22px rgba(20, 21, 26, 0.52);
}
/* The flag rides the top edge, centred, so the eye finds it before it reads a
   single card name. */
.band__tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; letter-spacing: 0.16em; white-space: nowrap;
  color: var(--canvas); background: var(--accent);
  border-radius: 6px; padding: 6px 12px; margin: 0;
}
.band__name { font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink-2); margin: 0 0 20px; }
.band__card--best .band__name { color: var(--on-ink-sub); }
.band__fig { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.band__card--best .band__fig { color: var(--on-ink); }
.band__per { font-size: 9.5px; letter-spacing: 0.16em; line-height: 1.6; color: var(--faint); margin: 14px 0 0; }
.band__card--best .band__per { color: var(--on-ink-faint); }
.band__body { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); }
.band__card--best .band__body { color: var(--on-ink-sub); border-top-color: var(--dark-line-2); }

/* ------------------------------------------------------------- panel C */

.ar-say { border-top: 1px solid var(--hair); margin-top: 72px; padding-top: 48px; }
.ar-say__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; margin-top: 32px; align-items: start; }
.ar-say__p { font-size: 17.5px; line-height: 1.62; color: var(--ink); margin: 0; max-width: 62ch; }
.ar-say__p + .ar-say__p { margin-top: 22px; }
.ar-say__p a { color: var(--ink); text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.ar-say__p a:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* The refusal strip is the block's proof of character, so it gets an object of
   its own rather than a column of loose type. */
.ar-say__side {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
  padding: 24px 24px 8px;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.04), 0 12px 28px -14px rgba(20, 21, 26, 0.18);
}
.ar-refuse__label { font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink); margin: 0 0 8px; }
.ar-refuse { list-style: none; margin: 0; padding: 0; }
.ar-refuse li {
  font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.6; color: var(--ink-2);
  padding: 14px 0; border-top: 1px solid var(--hair);
}

/* --------------------------------------------------------- the model */

.ar-model { border-top: 1px solid var(--hair); margin-top: 72px; padding-top: 44px; }
.ar-model__label { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; color: var(--ink); margin: 0 0 22px; }
.ar-model__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.ar-model__list li {
  display: flex; gap: 16px; align-items: baseline;
  border-top: 1px solid var(--hair); padding: 13px 0;
  font-size: 10.5px; letter-spacing: 0.13em; line-height: 1.6; color: var(--ink-2);
}
.ar-model__n { color: var(--faint); flex: none; }
.ar-model__foot {
  border-top: 1px solid var(--hair); margin: 0; padding-top: 16px;
  font-size: 10.5px; letter-spacing: 0.14em; line-height: 1.8; color: var(--faint);
}

/* ------------------------------------------------------------ the door */

.ar-door__frame { padding-bottom: 120px; }
.ar-door__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 96px 0 0; max-width: 16ch;
}
.ar-door__sub { font-size: 18px; line-height: 1.55; color: var(--on-ink-sub); max-width: 600px; margin: 28px 0 0; }
.ar-door__cta { margin-top: 44px; border-radius: 10px; }
.ar-door__note { font-size: 10.5px; letter-spacing: 0.18em; color: var(--on-ink-faint); margin: 26px 0 0; }

/* ------------------------------------------------------ the phone strip */

/* The mobile piece Stageflow does not have: while the controls are on screen
   and the screen is not, the two figures ride the bottom of the viewport, so a
   phone visitor watches their number move as they drag. */
.ar-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; justify-content: space-between; gap: 16px;
  background: var(--ink); border-top: 1px solid var(--dark-line-3);
  box-shadow: 0 -8px 24px -8px rgba(20, 21, 26, 0.45);
  padding: 13px 20px calc(13px + env(safe-area-inset-bottom));
}
.ar-sticky__i { display: grid; gap: 5px; min-width: 0; }
.ar-sticky__k { font-size: 9px; letter-spacing: 0.16em; color: var(--on-ink-faint); }
.ar-sticky__v { font-size: 20px; line-height: 1.1; color: var(--on-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-sticky__v--accent { color: var(--accent); }
.ar-sticky__v.is-empty { color: var(--on-ink-legal); }
.ar-sticky__v .ar-fig__u { font-size: 0.6em; letter-spacing: 0.12em; margin-left: 0.35em; color: var(--on-ink-faint); }
.ar-sticky__i:last-child { text-align: right; }
body.has-sticky { padding-bottom: 76px; }

/* Single-column territory only. Above this the screen sits beside the controls
   and the strip has nothing to add. */
@media (max-width: 980px) {
  .ar-sticky:not([hidden]) { display: flex; }
}

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1120px) {
  .ar-mast__copy { padding-right: 40px; }
  .ar-mast__index { padding-left: 40px; }
  .ar-panel { padding: 36px; }
  .ar__inputs { padding-right: 36px; }
  .ar__ledger { padding-left: 36px; }
  .ar-say__grid { gap: 36px; }
  /* Four across stops being four across before the figures start shrinking to
     fit. Two by two keeps the price ladder readable in reading order. */
  .band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; row-gap: 34px; }
  .band__fig { font-size: 46px; }
  .rc__bar, .rc__hero, .rc__row, .rc__foot { padding-left: 24px; padding-right: 24px; }
  .rc__verdict { margin-left: 24px; margin-right: 24px; }
}

@media (max-width: 980px) {
  .ar-mast__grid, .ar__grid, .ar-say__grid { grid-template-columns: 1fr; }
  .ar-mast__copy { padding: 56px 0 44px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .ar-mast__index { padding: 36px 0 52px; }
  .ar__inputs { padding: 0 0 40px; border-right: 0; border-bottom: 1px solid var(--hair); }
  /* The screen stacks under the controls and stops being sticky: on a phone the
     bottom strip does that job with a tenth of the screen. */
  .ar__ledger { padding: 40px 0 0; position: static; }
  .ar-say__grid { gap: 32px; }
  .ar-model__list { grid-template-columns: 1fr; gap: 0; }
  .band__grid { grid-template-columns: 1fr; gap: 28px; }
  .band__fig { font-size: 48px; }
}

@media (max-width: 700px) {
  .ar-stage { padding: 48px 0 72px; }
  .ar-panel { margin-top: 28px; padding: 22px 20px 26px; border-radius: 12px; }
  .ar-mast__meta { flex-direction: column; gap: 6px; padding: 16px 0; }
  .ar-mast__title { font-size: clamp(34px, 10vw, 46px); max-width: none; }
  .ar-mast__lede { font-size: 17px; }
  /* The row survives the phone. A label that wraps to three lines with the
     figure held at the end of the last one still reads as one control; the
     figure dropped underneath reads as a second thing. */
  .ar-ctl { gap: 14px; }
  .ar-ctl__label { max-width: none; font-size: 10.5px; letter-spacing: 0.13em; }
  .ar-readout { font-size: 30px; }
  .ar-field__input { font-size: 20px; }
  .seg { max-width: none; }
  .seg__b { padding: 14px 8px; font-size: 10px; letter-spacing: 0.1em; }
  .ar-tasks__panel { padding-left: 16px; padding-right: 16px; }
  .rc__bar, .rc__hero, .rc__row, .rc__foot { padding-left: 20px; padding-right: 20px; }
  .rc__verdict { margin-left: 20px; margin-right: 20px; padding: 18px 18px; }
  .rc__fig { font-size: 40px; }
  .rc__fig.is-long { font-size: 32px; }
  .rc__fig.is-vlong { font-size: 25px; }
  .snap { margin-top: 32px; padding-top: 30px; }
  /* Three columns do not fit a phone: at 375 the scenario column drops to four
     words a line and the printed working breaks mid-figure. The listings column
     is the one to lose, because it is the same number in every row and that
     number is already on the readout bar, on control 01, and in the foot line
     under the table. The two columns that carry the argument stay. */
  .snap__tab { table-layout: fixed; }
  .snap__tab thead th:nth-child(2), .snap__tab td.snap__n { display: none; }
  .snap__tab thead th:first-child { padding-left: 12px; width: 58%; }
  .snap__tab tbody th { font-size: 15px; padding: 16px 10px 16px 12px; }
  .snap__v { font-size: 17px; padding: 16px 12px 16px 10px; }
  .snap__work { font-size: 9.5px; letter-spacing: 0.1em; }
  .snap__v--diff { font-size: 25px; }
  .snap__v--diff.is-long { font-size: 22px; }
  .ar-rest { padding-top: 64px; }
  .ar-say__p { font-size: 16px; }
  .ar-door__title { margin-top: 64px; }
  .ar-door__frame { padding-bottom: 88px; }
  .ar-task__label { font-size: 14px; }
}

/* ------------------------------------------------------- reduced motion */

/* The block loses nothing here, because it was never carried by motion. Figures
   swap instantly, the segmented cap jumps, every hover lift is dropped, and the
   focus states change colour with no transition. */
@media (prefers-reduced-motion: reduce) {
  .rc__fig, .rc__v, .rc__work, .snap__v, .snap__n { animation: none !important; }
  .ar-ctl__val, .ar-field__row, .ar-task__in, .ar-tasks__mark, .ar-tasks__toggle,
  .seg__b, .seg__ind, .band__card, .rc__dot, .rc__link { transition: none !important; }
  .band__card:hover { transform: none; }
  /* The vendor thumb pseudo-elements stay in rules of their own. One unknown
     selector voids an entire selector list, and putting the two together here
     would silently drop the whole declaration in both engines. */
  .ar-range::-webkit-slider-thumb { transition: none !important; }
  .ar-range::-moz-range-thumb { transition: none !important; }
  .ar-range:active::-webkit-slider-thumb { transform: none; }
  .ar-range:active::-moz-range-thumb { transform: none; }
}