/* ============================================================
   ShopConnect quiz funnel v5 layer
   Phase A design surface. Loaded after styles.css and after
   quiz-v4.css. All new classes are v5- namespaced, all new
   custom properties are --v5- namespaced.
   quiz-v4.css is read only for this project: v5 keeps the v4
   mechanics (geometry, positioning, show and hide, focus
   plumbing) and overrides appearance from a v5- scoped
   ancestor. No important flag is added here.
   ============================================================ */

/* TREATMENT SEAM ============================================
   Every result and booking surface, ink, border and elevation
   value lives in this block and nowhere else.
   Decision: plain, personal, light, site native. Amendment of
   2026-07-25 supersedes the v4 dark artifact. No dark theme
   ships. Swapping the treatment means editing this block and
   remeasuring contrast, never editing markup.
   ============================================================ */
:root {
  /* Surfaces */
  --v5-result-stage: var(--bg, #ffffff);
  --v5-result-surface: #ffffff;
  --v5-result-surface-raised: var(--bg-soft, #f6f9f8);
  --v5-result-surface-accent: var(--accent-soft, oklch(94% 0.04 168));

  /* Ink */
  --v5-result-ink: var(--ink, #0a1f1a);
  --v5-result-ink-2: var(--ink-2, #2a3d37);
  --v5-result-ink-muted: var(--ink-3, #5b6b66);
  --v5-result-ink-lead: var(--accent-deep, oklch(42% 0.10 168));

  /* Borders and rules */
  --v5-result-border: var(--line, #e6ece9);
  --v5-result-border-strong: var(--line-2, #d8e1dd);
  --v5-result-border-accent: var(--accent-glow, oklch(75% 0.09 168));
  --v5-result-rule: #7f8c87;

  /* Interactive control boundaries. Separate from the border values
     above because those are decorative container hairlines, while a
     control's boundary is what identifies it as a control, so these
     are held to the 3:1 non-text contrast gate against every surface
     they touch. Measured sRGB ratios:
       control-border   3.85 on surface, 3.63 on raised, 3.27 on accent
        control-selected 4.07 on surface, 3.47 on the selected fill,
                        3.85 on raised
     The selected chip pairs this boundary with a doubled ring, so
     selected is not signalled by hue alone, and it stays an outline
     rather than a filled solid so it never competes with the pill. */
  --v5-result-control-border: #78857f;
  --v5-result-control-selected: var(--accent, oklch(58% 0.10 168));

  /* Signal: identifies the current published band only */
  --v5-result-signal: #8a5a14;
  --v5-result-signal-soft: rgba(208, 154, 78, 0.22);

  /* Attainable band, same hue as the CTA */
  --v5-result-attainable: var(--accent-deep, oklch(42% 0.10 168));

  /* CTA */
  --v5-result-cta-bg: var(--accent-deep, oklch(42% 0.10 168));
  --v5-result-cta-bg-hover: oklch(38% 0.10 168);
  --v5-result-cta-ink: #ffffff;

  /* Focus */
  --v5-result-focus: var(--accent-deep, oklch(42% 0.10 168));

  /* Elevation: restrained, matching pricing and index cards */
  --v5-result-elevation:
    0 12px 28px -16px rgba(10, 31, 26, 0.16),
    0 2px 6px rgba(10, 31, 26, 0.05);
  --v5-result-elevation-inner: 0 1px 2px rgba(10, 31, 26, 0.04);
  --v5-result-elevation-sticky: 0 10px 24px -12px rgba(10, 31, 26, 0.30);
}

/* ====== LAYOUT AND RHYTHM TOKENS (treatment agnostic) ======
   Deliberately outside the seam: swapping the treatment must
   not change layout. ========================================= */
:root {
  --v5-card-max: 660px;
  --v5-copy: 640px;
  --v5-wide: 920px;
  /* Floor lowered from 32px to 24px: spec section 10.3 compression
     lever 1, spent against the measured mobile height. Desktop is
     unchanged at 64px. */
  --v5-section-y: clamp(24px, 4.8vw, 64px);
  --v5-radius-card: 20px;
  --v5-radius-inner: 12px;
  --v5-blank-min: 84px;
  --v5-blank-weight: 1.5px;
  --v5-col-gap: clamp(12px, 3vw, 22px);

  /* Sticky reserve. The fixed pill is never shrunk to buy room, so the
     scrolling composition gives the room back: the pill's own height,
     plus the offset it floats at, plus a visible gap. The end of the
     composition and the beat transitions a reader comes to rest on all
     carry at least this much clear space, so the pill lands on ground
     rather than on a line of copy. */
  --v5-sticky-h: clamp(43px, 3.6vw, 48px);
  --v5-sticky-gap: clamp(14px, 1.4vw, 20px);
  --v5-sticky-reserve:
    calc(var(--v5-sticky-h) + max(14px, env(safe-area-inset-bottom)) + var(--v5-sticky-gap));

  /* Line item type for the sample artifact. A statement is set in a
     document face, not in the interface face, and that difference is
     what makes the excerpt read as paper rather than as UI. */
  --v5-doc-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ====== PAGE SHELL ======
   .v4-page supplies the reset and the [hidden] guard.
   .v5-page replaces the v4 radial tint with the flat stage. */
.v5-page {
  background: var(--v5-result-stage);
  color: var(--v5-result-ink);
}
/* The composition reserves the sticky pill's band at its end, so the
   last line of the page can always be read past the pill. */
.v5-page main { padding-block-end: var(--v5-sticky-reserve); }

/* ====== SITE HEADER ======
   The site nav reused as a logo lockup only: no links and no header CTA, so
   the page keeps one CTA concept. It is the one place v5 overrides the base
   nav mechanic: sticky it would hold a permanent band over the report and
   charge the pre-scroll budget for it on every scroll, so here it scrolls
   away with the page and is paid for once. */
.v5-page .v5-nav {
  position: static;
  background: var(--v5-result-stage);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The brand keeps its 44px tap target from the base sheet; the band around it
   does not need to pay for that twice, so the lockup's own padding comes off
   and the header lands at a phone-sized bar. */
.v5-page .v5-nav .nav-inner { padding-block: 11px; }
.v5-page .v5-nav .brand { padding: 0; }

/* Visually hidden, but kept in the accessibility tree */
.v5-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ====== SHARED BEAT RHYTHM ====== */
.v5-beat { padding-block: var(--v5-section-y); }
.v5-beat-inner {
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 32px);
}
.v5-beat-inner--copy { max-width: calc(var(--v5-copy) + 2 * clamp(12px, 4vw, 32px)); }
.v5-beat-inner--wide { max-width: calc(var(--v5-wide) + 2 * clamp(12px, 4vw, 32px)); }
.v5-beat-inner--card { max-width: calc(var(--v5-card-max) + 2 * clamp(12px, 4vw, 32px)); }

/* Heading ladder for the lander beats. Exactly three steps, because the page
   has three levels of business and no more: the bridge is a connector and
   takes the smallest, the route is the working middle, and the sample reveal
   and the scheduler share the top step next to the result card they answer.
   The reveal and the scheduler used to differ by half a pixel and one
   character of measure, which no reader can perceive and no hierarchy needs;
   they are one step now, which is what a shared step is for. */
.v5-bridge-head,
.v5-route-head,
.v5-reveal-head,
.v5-booking-head {
  margin: 0 0 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--v5-result-ink);
  max-width: 24ch;
}
.v5-bridge-head {
  margin-bottom: 8px;
  font-size: clamp(15.5px, 1.6vw, 18px);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.v5-route-head { font-size: clamp(18.5px, 2.1vw, 24px); }
.v5-reveal-head,
.v5-booking-head {
  margin-bottom: clamp(16px, 2.2vw, 24px);
  font-size: clamp(21.5px, 2.9vw, 31px);
  max-width: 20ch;
}

/* ====== BEAT 0: THE PERSONAL RESULT BLOCK ====== */
.v5-result-stage {
  padding: clamp(12px, 3vh, 40px) clamp(12px, 4vw, 32px) 0;
  display: flex;
  justify-content: center;
}

.v5-result-card {
  width: 100%;
  max-width: var(--v5-card-max);
  background: var(--v5-result-surface);
  color: var(--v5-result-ink);
  border: 1px solid var(--v5-result-border-strong);
  border-radius: var(--v5-radius-card);
  box-shadow: var(--v5-result-elevation);
  padding: clamp(18px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vw, 18px);
}

/* Title strip: what makes the card read as prepared for a person */
.v5-result-titlestrip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  flex-wrap: wrap;
  padding-bottom: clamp(10px, 2vw, 15px);
  border-bottom: 1px solid var(--v5-result-border);
}
/* The report's own name sits on the bottom step of the heading ladder rather
   than below it. At 11px on a phone it was a sixth size that only the phone
   ever saw, and it was the smallest heading on the page carrying the largest
   claim on it. Merged upward to the 12.5px step it shares with the fit heads,
   so the ladder is four steps at every width and the title reads at the size
   the desktop already used. */
.v5-result-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--v5-result-ink);
}
.v5-result-prepared {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--v5-result-ink-muted);
}

/* Claimed stamp. UI chrome, hidden until the booking confirms.
   Same treatment in the title strip and inside the confirmed block. */
.v5-result-status,
.v5-claimed-stamp {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--v5-result-ink-lead);
  background: var(--v5-result-surface-accent);
  border: 1px solid var(--v5-result-border-accent);
  border-radius: 6px;
  padding: 6px 10px;
}
.v5-result-status svg,
.v5-claimed-stamp svg { flex: none; }
/* The stamp is a label, so it is only as wide as its label. Stretched
   across the confirmed panel it read as an empty bar. */
.v5-claimed-stamp { align-self: flex-start; }

/* Profile chip: a data echo, so it stays quiet */
.v5-profile-chip {
  align-self: flex-start;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v5-result-ink-muted);
  background: var(--v5-result-surface-raised);
  border: 1px solid var(--v5-result-border);
  border-radius: var(--v5-radius-inner);
  padding: 6px 11px;
  font-feature-settings: "tnum";
}

/* Verdict */
.v5-verdict {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--v5-result-ink);
  max-width: 52ch;
}
.v5-verdict-lead {
  font-weight: 700;
  color: var(--v5-result-ink-lead);
}
.v5-verdict-q6 {
  margin: 0;
  font-size: clamp(12.5px, 1.35vw, 13.5px);
  line-height: 1.5;
  color: var(--v5-result-ink-muted);
  border-inline-start: 2px solid var(--v5-result-border-accent);
  padding-inline-start: 10px;
  max-width: 56ch;
}

/* The number: the largest glyphs on the page. It is the one thing on the card
   a reader is allowed to stop on, so it is the one place on the card that
   gets air on purpose. The margin is on the number alone, not on the card
   gap, so nothing else pays for it. */
.v5-number {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-block: clamp(6px, 1.4vw, 14px) clamp(4px, 1vw, 10px);
}
.v5-number-label {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v5-result-ink-muted);
}
.v5-number-figure {
  margin: 0;
  /* Capped so the full figure plus its trailing unit stays on one line
     inside the 660px card. Above 48px the unit is pushed to its own
     line on desktop, which reads as a layout fault rather than as
     emphasis. */
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--v5-result-ink);
  font-feature-settings: "tnum";
}
.v5-number-unit {
  white-space: nowrap;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--v5-result-ink-muted);
}
.v5-number-monthly {
  margin: 0;
  font-size: clamp(12.5px, 1.4vw, 14px);
  line-height: 1.5;
  color: var(--v5-result-ink-muted);
  max-width: 52ch;
}

/* ====== RATE BAND ======
   Geometry is the unchanged v4 mechanic. Appearance is
   overridden from the .v5-rateband scope. Ranges only. */
.v5-rateband {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 2.2vw, 16px) clamp(10px, 2.2vw, 16px) clamp(8px, 1.6vw, 12px);
  background: var(--v5-result-surface);
  border: 1px solid var(--v5-result-border);
  border-radius: var(--v5-radius-inner);
}
.v5-rateband-row {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(11.5px, 1.25vw, 13px);
  line-height: 1.45;
  color: var(--v5-result-ink-muted);
}
.v5-rateband-row strong {
  font-weight: 650;
  font-feature-settings: "tnum";
  white-space: nowrap;
  color: var(--v5-result-ink);
}
.v5-rateband-key {
  flex: none;
  position: relative;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.v5-rateband-key--you { background: var(--v5-result-signal); }
.v5-rateband-key--attainable { background: var(--v5-result-attainable); }
/* Band label emphasis follows its own key swatch */
.v5-rateband-key--you ~ strong { color: var(--v5-result-signal); }
.v5-rateband-key--attainable ~ strong { color: var(--v5-result-attainable); }

.v5-rateband .v4-rateband-track {
  background: var(--v5-result-surface-raised);
  border-color: var(--v5-result-border-strong);
}
.v5-rateband .v4-rateband-seg--attainable {
  background: var(--v5-result-attainable);
}
.v5-rateband .v4-rateband-seg--you {
  background: var(--v5-result-signal-soft);
  border-color: var(--v5-result-signal);
  box-shadow: none;
}
.v5-rateband .v4-rateband-tick { background: var(--v5-result-border); }

/* Source affordance: attached to the band, never its own row */
.v5-source {
  align-self: flex-end;
  margin-top: -2px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--v5-result-ink-lead);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v5-source:hover { color: var(--v5-result-ink); }
.v5-source-pop {
  position: absolute;
  inset-inline: 0;
  z-index: 5;
  margin-top: 6px;
  max-width: 100%;
  background: var(--v5-result-surface);
  border: 1px solid var(--v5-result-border-strong);
  border-radius: var(--v5-radius-inner);
  box-shadow: var(--v5-result-elevation);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--v5-result-ink-2);
}
.v5-source-pop p { margin: 0 0 8px; }
.v5-source-pop p:last-child { margin-bottom: 0; }

/* Discipline lines: smallest on card type */
.v5-result-discipline {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 12px);
  line-height: 1.5;
  color: var(--v5-result-ink-muted);
  max-width: 60ch;
}

/* ====== BEAT 0.5: THE INCOMPLETE REPORT THRESHOLD ======
   Two columns at every width, including 360px. The hinge is a
   surface step, never a divider graphic, a lock, or a blur. */
.v5-threshold {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v5-col-gap);
  align-items: start;
}
.v5-threshold-col {
  border-radius: var(--v5-radius-inner);
  padding: clamp(10px, 2vw, 14px);
  min-width: 0;
}
.v5-threshold-col--estimated { background: var(--v5-result-surface-raised); }
.v5-threshold-col--confirmed { background: var(--v5-result-surface); }
.v5-threshold-head {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--v5-result-ink-muted);
}
.v5-threshold-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4px;
  column-gap: 10px;
  align-items: baseline;
}
.v5-threshold-term {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--v5-result-ink-muted);
}
.v5-threshold-value {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--v5-result-ink);
  font-feature-settings: "tnum";
}
.v5-threshold-line {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(13.5px, 1.5vw, 15.5px);
  font-weight: 650;
  line-height: 1.45;
  color: var(--v5-result-ink);
}

/* ====== SHARED BLANK FIELD ======
   One rule, two homes: the threshold's named fields and every
   blank in the sample artifact. Never a box, an input, a fill,
   a placeholder, a leader, a lock, or a blur. */
.v5-blank {
  margin: 0 0 6px;
  position: relative;
  top: -2px;
  min-width: var(--v5-blank-min);
  min-height: 1.1em;
  border-bottom: var(--v5-blank-weight) solid var(--v5-result-rule);
}
/* The one permitted variant: the sample's effective all in row */
.v5-blank--total {
  border-bottom-width: 2px;
  border-bottom-color: var(--v5-result-ink-2);
}

/* ====== BEAT 0.6: CTA CLUSTER ======
   The second and last place on the card that is given air rather than rhythm.
   The pill is the page's brightest single element and the only thing under it
   is its own support line, so the gutter above the pill is wider than the
   card's gap and the support line stays tucked under the pill it belongs to. */
.v5-cta-cluster {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: clamp(14px, 2.6vw, 22px);
  border-top: 1px solid var(--v5-result-border);
}
.v5-cta-cluster > .v5-cta { margin-block: clamp(2px, 0.8vw, 8px) clamp(1px, 0.4vw, 4px); }
.v5-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 26px;
  border: 1px solid var(--v5-result-cta-bg);
  border-radius: 999px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: center;
  background: var(--v5-result-cta-bg);
  color: var(--v5-result-cta-ink);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.v5-cta:hover {
  background: var(--v5-result-cta-bg-hover);
  border-color: var(--v5-result-cta-bg-hover);
}
.v5-cta--small {
  width: auto;
  align-self: start;
  justify-self: start;
  padding: 10px 22px;
  font-size: 14px;
}
.v5-cta-support,
.v5-cta-objection {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--v5-result-ink-muted);
}

/* Open times strip: text weight only. No fill and no border are
   permitted here, which is what keeps it from reading as a
   second CTA. */
.v5-openslots {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v5-result-ink-muted);
}
/* Separators are UI chrome and belong to the item they follow, not to the
   item they precede. Carried on the next item's ::before, a wrapped strip
   started a line with a lone middot, which reads as a rendering fault. On the
   previous item's ::after the separator wraps with the item it punctuates and
   a line can only ever begin with a word. The gap between two labels is
   unchanged: the flex gap still sits between the boxes and the 8px is still
   on the separator's other side. inline-block keeps the glyph out of the
   underline the time links propagate, so a separator never reads as part of
   a link. */
.v5-openslots > *:not(:last-child)::after {
  content: "\00B7";
  display: inline-block;
  margin-inline-start: 8px;
  color: var(--v5-result-ink-muted);
  text-decoration: none;
}
.v5-openslot,
.v5-openslots-all {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  font-feature-settings: "tnum";
  color: var(--v5-result-ink-lead);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v5-openslot:hover,
.v5-openslots-all:hover { color: var(--v5-result-ink); }

/* ====== BEAT 1: EMPATHY ======
   The lightest block on the page. No heading, no card, no
   chrome. Generous above, tight below, so it hands into the
   bridge. */
.v5-empathy {
  padding-block: var(--v5-section-y) calc(var(--v5-section-y) / 2);
}
.v5-empathy-p {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--v5-result-ink-2);
}
.v5-empathy-p:last-child { margin-bottom: 0; }

/* ====== BEAT 2: THE BRIDGE ======
   A connector, not a chapter. The tint step is still the tension
   connector (white above, tint here, white below), but the band is
   deliberately the shortest and quietest teaching block on the page:
   small heads, tight leading, a padding floor below the shared beat
   rhythm. It hands the reader on rather than holding them. */
.v5-bridge {
  padding-block: clamp(17px, 3.4vw, 46px);
  background: var(--v5-result-surface-raised);
  border-top: 1px solid var(--v5-result-border);
  border-bottom: 1px solid var(--v5-result-border);
}
.v5-bridge-head { margin-top: 0; }
.v5-bridge-head + .v5-bridge-stanza { margin-top: 0; }
.v5-bridge-stanza {
  margin: 0 0 18px;
  font-size: clamp(14px, 1.45vw, 15.5px);
  line-height: 1.6;
  color: var(--v5-result-ink-2);
}
.v5-bridge-stanza:last-child { margin-bottom: 0; }

/* ====== BEAT 3: YOUR ROUTE ======
   Back to the stage. One route card at full attention. The beat closes
   on a wider gutter than it opens with, which is both the cadence break
   after the tight bridge and the clear ground the sticky pill rests on
   when a reader stops here. */
.v5-route {
  background: var(--v5-result-stage);
  padding-block: var(--v5-section-y) calc(var(--v5-section-y) + clamp(14px, 3.4vw, 48px));
}
.v5-route-card {
  background: var(--v5-result-surface);
  border: 1px solid var(--v5-result-border-strong);
  border-radius: var(--v5-radius-card);
  box-shadow: var(--v5-result-elevation-inner);
  padding: clamp(18px, 3.5vw, 28px);
}
.v5-route-body {
  margin: 0 0 14px;
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.65;
  color: var(--v5-result-ink-2);
}
.v5-route-claim {
  margin: 0;
  font-size: clamp(14px, 1.45vw, 15.5px);
  font-weight: 650;
  line-height: 1.55;
  color: var(--v5-result-ink);
  font-feature-settings: "tnum";
}
.v5-route-claim sup { font-weight: 600; color: var(--v5-result-ink-muted); }

/* Shared objection list: Beat 3 pair and Beat 4 trio.
   No icons, no boxes, no strip framing. */
.v5-objections {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.v5-objection {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--v5-result-border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--v5-result-ink-muted);
}
.v5-objection:last-child { padding-bottom: 0; }

/* Alternate route: one collapsed low emphasis control, never a
   sibling card and never a tab. */
.v5-route-alt-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 16px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--v5-result-ink-lead);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* No generated chevron: the approved toggle copy already ends in one,
   and adding a second glyph read as a rendering fault. Disclosure
   state is carried by aria-expanded and by the panel itself. */
.v5-route-alt-toggle:hover { color: var(--v5-result-ink); }
.v5-route-alt-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--v5-result-border);
}

/* ====== BEAT 4: SAMPLE REVEAL, STEPS, FIT BOUNDARY ======
   The reveal arrives on a wide gutter: it is the page's second dominant
   moment and it has to be entered, not scrolled past. */
.v5-reveal {
  padding-block: calc(var(--v5-section-y) + clamp(14px, 3.2vw, 46px)) var(--v5-section-y);
}
/* The artifact is a dominant moment, so it is closed with real air rather
   than a paragraph gap. That air is also one of the four openings the
   collision aware sticky pill is allowed to appear in, which is why it is
   sized against the pill rather than by eye. */
.v5-sample { margin-bottom: clamp(46px, 6vw, 64px); }

/* The artifact frame. Position context for the always visible badge. */
.v5-sample-crop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.4vw, 18px);
  padding: clamp(34px, 5vw, 42px) clamp(12px, 2.4vw, 18px) clamp(12px, 2.4vw, 18px);
  background: var(--v5-result-surface-raised);
  border: 1px solid var(--v5-result-border);
  border-radius: var(--v5-radius-inner);
  /* Sheets keep their own length. Stretched to a common height, the two
     page crops read as one empty widget; left alone they read as two
     clippings cut from different parts of the same statement. */
  align-items: start;
}
.v5-sample-badge {
  position: absolute;
  top: clamp(10px, 1.75vw, 14px);
  inset-inline-start: clamp(12px, 2.4vw, 18px);
  margin: 0;
  /* The badge must stay one line at every width. Wrapped, it grew past
     the crop's top padding and occluded the first page panel. Size and
     tracking scale with the viewport so the label never wraps and never
     widens the crop frame. */
  white-space: nowrap;
  font-size: clamp(8.5px, 2.4vw, 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--v5-result-ink);
  background: var(--v5-result-surface-raised);
  border: 1px solid var(--v5-result-border-strong);
  border-radius: 6px;
  padding: 5px 8px;
}

/* Page panels. These are sheets of paper, not cards: an almost square
   corner, a hairline edge, and a real document margin around the type.
   The bottom edge fades so each reads as a crop of a longer document.
   The fade is decorative and carries no meaning. */
.v5-sample-page,
.v5-sample-route {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--v5-result-surface);
  border: 1px solid var(--v5-result-border-strong);
  border-radius: 3px;
  box-shadow: var(--v5-result-elevation-inner);
  padding: clamp(12px, 3vw, 26px) clamp(11px, 2.8vw, 24px);
}
.v5-sample-page {
  /* Reserve the strip the crop fade runs over, so the fade reads as a
     cut edge instead of washing out the last labelled row. */
  padding-bottom: clamp(15px, 3.8vw, 34px);
}
.v5-sample-page::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: clamp(18px, 3.4vw, 30px);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--v5-result-surface));
}
/* Page heading: the document's own running head, ruled off from the
   line items underneath it the way a statement section is. */
.v5-sample-pagelabel {
  margin: 0 0 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--v5-result-border-strong);
  font-family: var(--v5-doc-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--v5-result-ink-muted);
}
/* Line items. Ruled rows, document face, label left and the blank
   running to the right edge of the sheet. The column gap is zero and
   the label carries the gutter as padding, so one continuous rule runs
   under every row: hairline under the label, then the heavier blank
   where the number would be. */
.v5-sample-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}
.v5-sample-term {
  margin: 0;
  padding: 7px 14px 5px 0;
  border-bottom: 1px solid var(--v5-result-border-strong);
  font-family: var(--v5-doc-font);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--v5-result-ink-2);
}
.v5-sample-list .v5-blank {
  top: 0;
  margin: 0;
}
/* The payoff row. A statement's total line is set off by a rule above
   it, held on the same document face, and given the one permitted blank
   variant. It is the only row on the sheet that raises its voice. */
.v5-sample-term:has(+ .v5-blank--total) {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--v5-result-ink-2);
  border-bottom-color: var(--v5-result-ink-2);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--v5-result-ink);
}
.v5-sample-list .v5-blank--total {
  margin-top: 11px;
  border-top: 1px solid var(--v5-result-ink-2);
}

/* Call steps */
.v5-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v5-step {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--v5-result-ink-2);
}
.v5-step-num {
  flex: none;
  font-size: 14.5px;
  font-weight: 700;
  font-feature-settings: "tnum";
  color: var(--v5-result-ink-lead);
}

/* The no statement fallback promise. Single home on the page. It closes
   the "how the call runs" group, so the seam under it carries the register
   change into the fit boundary, and it is the second sticky opening. */
.v5-fallback {
  margin: 0 0 clamp(40px, 5.2vw, 54px);
  padding: 14px 16px;
  background: var(--v5-result-surface-raised);
  border: 1px solid var(--v5-result-border);
  border-radius: var(--v5-radius-inner);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v5-result-ink-2);
}

/* Fit boundary. A qualifier, not a chapter: it settles who the call is
   for and gets out of the way, so it is set one step down from the beat
   it sits in and carries no heading scale of its own. The skip column is
   still never visually punished, and the two columns stay side by side
   at every width, spec section 10.3 compression lever 3. */
.v5-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v5-col-gap);
}
.v5-fit-col {
  border: 1px solid var(--v5-result-border);
  border-radius: var(--v5-radius-inner);
  padding: clamp(11px, 2vw, 16px);
  min-width: 0;
}
.v5-fit-col--book { background: var(--v5-result-surface-accent); }
.v5-fit-col--skip { background: var(--v5-result-surface-raised); }
.v5-fit-head {
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--v5-result-ink);
}
.v5-fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v5-fit-list li {
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--v5-result-border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v5-result-ink-2);
}
.v5-fit-list li:last-child { padding-bottom: 0; }

/* Credibility line */
.v5-cred {
  margin: clamp(20px, 3.5vw, 30px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--v5-result-border);
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v5-result-ink-muted);
}
.v5-cred-bullet {
  flex: none;
  position: relative;
  top: -1px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--v5-result-ink-lead);
}

/* ====== BEAT 5: BOOKING ======
   The panel is still the visual twin of the result card: same width,
   radius, surface, outline, elevation and type family. What promotes it
   to the page's third dominant moment is everything around it, not a new
   decoration on it. The beat arrives on the page's widest gutter, then
   the ground steps to the raised surface so the white panel reads as the
   report card returning at the end of the page rather than as one more
   section. Scale and inner space do the rest. No dark surface, no badge,
   no graphic. */
.v5-booking {
  scroll-margin-top: 16px;
  background: var(--v5-result-surface-raised);
  border-top: 1px solid var(--v5-result-border);
  border-bottom: 1px solid var(--v5-result-border);
  padding-block:
    calc(var(--v5-section-y) + clamp(14px, 3.8vw, 56px))
    calc(var(--v5-section-y) + clamp(2px, 1.8vw, 26px));
}
.v5-booking-panel {
  background: var(--v5-result-surface);
  border: 1px solid var(--v5-result-border-strong);
  border-radius: var(--v5-radius-card);
  box-shadow: var(--v5-result-elevation);
  padding: clamp(20px, 4.4vw, 40px);
}

/* Reused v4 confirm and picker mechanics, restyled to the
   plain result family from the .v5-booking-panel scope. */
.v5-booking-panel .v4-confirm-strip {
  background: var(--v5-result-surface-raised);
  border-color: var(--v5-result-border);
  border-radius: var(--v5-radius-inner);
}
.v5-booking-panel .v4-confirm-line { color: var(--v5-result-ink-muted); }
/* The confirm strip breaks anywhere, which is what lets a long email wrap
   inside a phone-width panel. A phone number broken mid-token reads as two
   numbers, so this one token is held whole. It is far shorter than the
   strip's measure at 360px, so holding it wraps the line earlier rather than
   pushing anything past the panel edge. */
.v5-booking-panel .v5-nowrap { white-space: nowrap; }
.v5-booking-panel .v4-confirm-line strong { color: var(--v5-result-ink); }
.v5-booking-panel .v4-confirm-micro { color: var(--v5-result-ink-muted); }
.v5-booking-panel .v4-linklike { color: var(--v5-result-ink-lead); }
.v5-booking-panel .v4-linklike:hover { color: var(--v5-result-ink); }
.v5-booking-panel .v4-field span { color: var(--v5-result-ink-muted); }
.v5-booking-panel .v4-field input {
  color: var(--v5-result-ink);
  background: var(--v5-result-surface);
  border-color: var(--v5-result-control-border);
  border-radius: 10px;
}
.v5-booking-panel .v4-picker-label {
  color: var(--v5-result-ink);
  font-size: clamp(15px, 1.55vw, 16.5px);
}
.v5-booking-panel .v4-picker-micro { color: var(--v5-result-ink-muted); }
.v5-booking-panel .v4-slot {
  color: var(--v5-result-ink);
  background: var(--v5-result-surface);
  border-color: var(--v5-result-control-border);
}
.v5-booking-panel .v4-slot:hover {
  background: var(--v5-result-surface-raised);
  border-color: var(--v5-result-control-selected);
}
/* Selected chip: accent outline plus accent soft fill, never a
   filled solid, so it cannot compete with the primary pill.
   The inset ring doubles the boundary weight without changing the
   border box, so selection survives at 3:1 against both the fill and
   the surrounding surface and is not carried by hue alone. */
.v5-booking-panel .v4-slot[aria-pressed="true"] {
  background: var(--v5-result-surface-accent);
  border-color: var(--v5-result-control-selected);
  box-shadow: inset 0 0 0 1px var(--v5-result-control-selected);
}

/* Confirmed state: stays on the light result family and marks
   itself with the accent wash, the accent outline and the stamp.
   The block is deliberately dense. Stretched to the panel width with
   loose gaps it read as a half filled form; held tight, with the stamp
   sized to its own label and the booked line carrying the weight, it
   reads as a finished receipt. */
.v5-confirmed {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(15px, 2.6vw, 22px) clamp(15px, 2.6vw, 24px);
  background: var(--v5-result-surface-accent);
  border: 1px solid var(--v5-result-border-accent);
  border-radius: var(--v5-radius-inner);
}
/* The booked line is the route step of the heading ladder, not a fourth size
   half a pixel away from it. */
.v5-confirmed-head {
  margin: 2px 0 0;
  font-size: clamp(18.5px, 2.1vw, 24px);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--v5-result-ink);
  /* Wide enough that the booked line holds one line inside the panel.
     Capped tighter it broke after the date and left the block reading
     half filled. */
  max-width: 40ch;
}
.v5-confirmed-p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v5-result-ink-2);
  overflow-wrap: anywhere;
}
.v5-confirmed-resched {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v5-result-ink-muted);
}

/* ====== STICKY MINI CTA ======
   Reuses the fixed pill mechanic from .v4-sticky. Show and hide
   are opacity and visibility only, so it leaves the tab order
   while invisible and never animates a transform.
   The v4 fade is dropped in both directions. The pill's collision
   state can change on any scroll frame, so an interpolated opacity
   meant the rendered pill spent up to 180ms in a half drawn state
   that was neither on nor off: on the way out it sat on the line of
   copy that had just arrived under it, and on the way in it was
   ambiguous to anything measuring what is actually on screen.
   Visibility here is a discrete state and is rendered as one. The
   pill is not resized. */
.v5-sticky {
  transition: none;
}
.v5-cta--sticky {
  pointer-events: auto;
  width: auto;
  padding: 13px 30px;
  box-shadow: var(--v5-result-elevation-sticky);
}

/* ====== FOOTNOTE AND COMPLIANCE STRIP ======
   v4 structure unchanged; v5 tightens the rhythm and re inks. */
/* The page tail is the sticky reserve on main, so the strip itself ends
   flush and does not pay for the same gap twice. */
.v5-footnotes {
  border-top: 1px solid var(--v5-result-border);
  padding-block: var(--v5-section-y) 0;
}
.v5-footnotes p { color: var(--v5-result-ink-muted); }
.v5-footnotes .v4-footnotes-final { color: var(--v5-result-ink-2); }

/* ====== EXTERNAL REVIEWER STRIP ======
   Design scaffolding, not funnel UI. Fixed, so it contributes
   zero page height, and deliberately non native so it can never
   be mistaken for page UI. */
.v5-reviewer {
  position: fixed;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 10px;
  background: var(--bg);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}
.v5-reviewer-head { font-weight: 700; }
.v5-reviewer-row { display: flex; align-items: center; gap: 4px; }

/* ====== FOCUS ======
   One focus treatment for the whole page, including the reused
   v4 controls, which win on the extra v5 scope class rather
   than on an important flag. */
.v5-page :focus-visible {
  outline: 2px solid var(--v5-result-focus);
  outline-offset: 2px;
}
.v5-cta:focus-visible,
.v5-booking:focus-visible,
.v5-confirmed:focus-visible {
  outline: 2px solid var(--v5-result-focus);
  outline-offset: 4px;
}
.v5-booking:focus-visible { border-radius: 4px; }
/* Section landmarks are programmatic focus targets. They take the keyboard
   only when the sticky pill has to leave the screen under it, and when they
   do the reader has to be able to see where focus landed, so they carry the
   same ring as every other target rather than being silenced. The offset is
   pulled inside the band because these run full bleed. */
.v5-page main section[tabindex="-1"]:focus-visible {
  outline: 2px solid var(--v5-result-focus);
  outline-offset: -3px;
  border-radius: 4px;
}
.v5-booking-panel .v4-linklike:focus-visible,
.v5-booking-panel .v4-slot:focus-visible,
.v5-booking-panel .v4-field input:focus-visible {
  outline: 2px solid var(--v5-result-focus);
  outline-offset: 2px;
}
.v5-booking-panel .v4-field input:focus-visible {
  border-color: var(--v5-result-focus);
}

/* ====== WIDER VIEWPORTS ====== */
@media (min-width: 421px) {
  /* Term and value or blank share one line, the blank flexing
     to fill. Below this the term wraps above, which is how the
     two columns survive 360px. */
  .v5-threshold-list { grid-template-columns: auto 1fr; }
  .v5-threshold-value,
  .v5-threshold-list .v5-blank { margin-bottom: 0; }
}

@media (min-width: 561px) {
  /* Three crops laid out on one board. Page 3 is the long one and holds
     the right column on its own; page 1 is short, so the route
     comparison sits under it rather than leaving the left column empty
     below a two line sheet. DOM order is unchanged. */
  .v5-sample-crop { grid-template-columns: 1fr 1fr; }
  .v5-sample-page--one { grid-column: 1; grid-row: 1; }
  .v5-sample-page--three { grid-column: 2; grid-row: 1 / span 2; }
  .v5-sample-route { grid-column: 1; grid-row: 2; }
  /* v4 collapses the edit grid at 720px; v5 holds two columns
     down to 560px. */
  .v5-booking-panel .v4-confirm-edit { grid-template-columns: 1fr 1fr; }
}

/* ====== NARROW VIEWPORT ======
   The phone pass carries the whole mobile height budget from spec
   section 10.2, and every value below is spent against a measured
   overrun rather than guessed. Nothing here hides, crops, or
   truncates approved copy: the levers are type scale, leading, inner
   padding, and one layout hold (the fit boundary).
   styles.css gives main a 20px gutter below 540px; the v5 inners drop
   theirs rather than doubling it. */
@media (max-width: 420px) {
  /* Measure: 14px rather than the base 20px gutter. The extra 12px of
     line length removes roughly one wrapped line from every long
     paragraph on the page, which is the cheapest height on offer and
     costs no legibility. */
  .v5-page main { padding-inline: 14px; }
  /* The lockup sits on the same 14px gutter as the card under it, so the
     header reads as the page's own edge rather than as a strip laid on top
     of it, and the band stays a phone bar rather than a desktop one. */
  .v5-page .v5-nav .nav-inner { padding: 6px 14px; }

  .v5-result-stage,
  .v5-beat-inner { padding-inline: 0; }
  .v5-result-stage { padding-top: 4px; }

  /* Result card. Compression lever 4: inner padding at and below 420px.
     The card must land its title strip, verdict, annual figure and full
     primary CTA above 844px in the taller Q6 state. */
  .v5-result-card {
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
  }
  .v5-result-titlestrip { row-gap: 2px; padding-bottom: 7px; }
  .v5-result-prepared { font-size: 12px; }
  .v5-profile-chip { font-size: 11.5px; line-height: 1.4; padding: 3px 9px; }
  .v5-verdict { font-size: 14.5px; line-height: 1.4; }
  .v5-verdict-q6 { font-size: 12px; line-height: 1.4; padding-inline-start: 8px; }
  /* The card's own rhythm is 6px at this width; the number keeps a wider
     band above and below it so it reads as the one thing on the card worth
     stopping on. This is the whole whitespace budget on the phone card,
     spent in one place rather than sprinkled. */
  .v5-number { gap: 2px; margin-block: 9px 6px; }
  .v5-number-label { font-size: 10.5px; }
  /* The figure keeps its full size at 360px, so the trailing unit wraps.
     Tighter leading and a slightly larger unit make that second line
     read as the unit of the number rather than as an orphan. */
  .v5-number-figure { line-height: 1; }
  .v5-number-unit { font-size: 0.42em; }
  .v5-number-monthly { font-size: 12.5px; line-height: 1.4; }
  .v5-rateband { gap: 4px; padding: 7px 8px 6px; }
  .v5-rateband-row { font-size: 11.5px; line-height: 1.35; }
  .v5-source { font-size: 11.5px; }
  .v5-result-discipline { font-size: 10.5px; line-height: 1.45; }

  /* The threshold holds two columns at 360px, so the type and the row
     rhythm carry its compression and the layout is never touched. */
  .v5-threshold { gap: 8px; }
  .v5-threshold-col { padding: 7px; }
  .v5-threshold-head { font-size: 9.5px; letter-spacing: 0.08em; margin-bottom: 6px; }
  /* The blank's min-height is 1.1em, and the list is what that em
     resolves against. Without this the rule floors every row at the
     inherited 16px body size instead of the row's own size. */
  .v5-threshold-list { row-gap: 2px; font-size: 10.5px; }
  .v5-threshold-term { font-size: 10.5px; line-height: 1.3; }
  .v5-threshold-value { font-size: 12px; line-height: 1.3; margin-bottom: 5px; }
  .v5-threshold-list .v5-blank { margin-bottom: 5px; }
  .v5-threshold-line { font-size: 13px; line-height: 1.4; }

  .v5-cta-cluster { padding-top: 11px; gap: 5px; }
  .v5-cta-cluster > .v5-cta { margin-block: 0 2px; }
  .v5-cta { padding: 11px 18px; font-size: 14.5px; }
  .v5-cta-support,
  .v5-cta-objection { font-size: 11.5px; line-height: 1.4; }
  .v5-openslots { font-size: 11.5px; gap: 3px 7px; }
  .v5-openslot,
  .v5-openslots-all { font-size: 11.5px; }
  .v5-openslots > *:not(:last-child)::after { margin-inline-start: 7px; }

  /* Lander prose: one step down in size and leading. The smaller size
     also fits more characters per line, so the line count falls with
     the leading rather than only alongside it. */
  /* Beat gutters at 360 are set here rather than inherited from the shared
     section rhythm, so the phone can be denser than the desktop without
     changing the rhythm anywhere else. */
  .v5-empathy { padding-block: 20px 10px; }
  .v5-empathy-p { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
  /* The three step heading scale survives the phone pass. It is the
     cheapest carrier of the three moment hierarchy and the first thing
     the page loses if every head collapses to one size. */
  .v5-bridge-head,
  .v5-route-head,
  .v5-reveal-head,
  .v5-booking-head { line-height: 1.2; margin-bottom: 10px; }
  .v5-bridge-head { font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
  .v5-route-head { font-size: 17.5px; }
  .v5-reveal-head,
  .v5-booking-head { font-size: 21px; margin-bottom: 11px; }
  .v5-bridge-stanza { font-size: 13px; line-height: 1.45; margin-bottom: 11px; }

  /* Sticky clearance at the two rest depths the pill can actually reach.
     The visible band the pill occupies at 360 is 56px, so the whitespace
     a reader stops on at the route card and at the reveal head is held
     above that. The gutters are moved between neighbouring beats, not
     invented: the route opens and closes wider and the reveal opens
     tighter, and the white run between them is unchanged. */
  .v5-route { padding-block: 59px 69px; }
  .v5-reveal { padding-block: 10px 14px; }

  .v5-route-card { padding: 12px; border-radius: 16px; }
  .v5-route-body { font-size: 13.5px; line-height: 1.45; margin-bottom: 9px; }
  .v5-route-claim { font-size: 12.5px; line-height: 1.4; }
  .v5-objections { margin-top: 6px; }
  .v5-objection { font-size: 12px; line-height: 1.4; padding: 4px 0; }
  .v5-route-alt-toggle { font-size: 12.5px; margin-top: 6px; }

  /* Beat 4. Compression lever 2 on the sample list: it is a label set,
     not prose, so it takes a tighter row rhythm than the lander copy. */
  /* Sized against the pill's box, not against the type: the seam has to
     clear the artifact's frame and the first call step's paragraph box with
     the safe gap on both sides. */
  .v5-sample { margin-bottom: 79px; }
  .v5-sample-crop {
    gap: 6px;
    padding: 27px 8px 6px;
  }
  .v5-sample-badge { top: 7px; inset-inline-start: 9px; }
  /* The sheets keep their document margin here: the base clamp floors
     already give the phone the smallest one. Overriding it to a flat
     9px inset is what made them read as list widgets, so the phone pass
     now spends its compression on the row rhythm and the type instead. */
  /* Paper margins, tightened but kept. The sheet still has a margin the
     type sits inside, which is what makes it read as paper; it is simply
     a phone's margin rather than a desktop's. */
  .v5-sample-page,
  .v5-sample-route { padding: 10px 11px; }
  .v5-sample-page { padding-bottom: 12px; }
  .v5-sample-page::after { height: 13px; }
  .v5-sample-pagelabel { font-size: 9px; line-height: 1.3; padding-bottom: 4px; margin-bottom: 1px; }
  .v5-sample-term { font-size: 10px; line-height: 1.35; padding: 3px 9px 2px 0; }
  .v5-sample-term:has(+ .v5-blank--total) { font-size: 10.5px; margin-top: 8px; padding-top: 6px; }
  .v5-sample-list .v5-blank--total { margin-top: 8px; }
  .v5-sample-list { font-size: 10px; }

  /* Compression lever 6 */
  .v5-steps { gap: 6px; margin-bottom: 8px; }
  .v5-step { gap: 9px; font-size: 13px; line-height: 1.4; }
  .v5-step-num { font-size: 13px; }
  .v5-fallback { font-size: 12.5px; line-height: 1.4; padding: 8px 11px; margin-bottom: 79px; }

  .v5-fit { gap: 8px; }
  .v5-fit-col { padding: 8px; }
  .v5-fit-head { font-size: 12.5px; margin-bottom: 6px; }
  .v5-fit-list li { font-size: 11px; line-height: 1.4; padding: 5px 0; }
  .v5-cred { margin-top: 6px; padding-top: 6px; font-size: 12px; line-height: 1.45; }

  /* Beat 5. The arrival gutter gives back its excess at this width: the
     scheduler is still announced by the raised ground it sits on and by the
     page's largest heading, and neither of those needs the extra air to
     read. The panel keeps more inner room than the route card, because a
     cramped scheduler reads as an afterthought. */
  /* The arrival gutter gives back another 10px here to pay for the air added
     around the number and the pill. The pill is inert while this beat is in
     view, so nothing in this band is sticky clearance, which is why it is
     reclaimed before the route's gutters are touched at all. Dominance is
     unaffected: the raised ground, the top heading step and the panel
     elevation are what announce the scheduler, not the gutter. */
  .v5-booking { padding-block: 22px 16px; }
  .v5-booking-panel {
    padding: 14px 13px;
    border-radius: 16px;
  }
  /* Holds the booked line on the route step of the ladder, which the phone
     pass sets to 17.5px. */
  .v5-confirmed-head { font-size: 17.5px; }
  .v5-booking-panel .v4-confirm { margin-bottom: 12px; }
  .v5-booking-panel .v4-confirm-strip { padding: 8px 10px; }
  .v5-booking-panel .v4-confirm-line { font-size: 12px; line-height: 1.45; }
  .v5-booking-panel .v4-confirm-micro { font-size: 11.5px; margin-top: 5px; }
  .v5-booking-panel .v4-linklike { font-size: 12.5px; }
  .v5-booking-panel .v4-picker-label { font-size: 13.5px; margin-bottom: 9px; }
  /* One line per chip. A wrapped chip costs 23px, and there are six. */
  .v5-booking-panel .v4-slots { gap: 7px; }
  .v5-booking-panel .v4-slot {
    font-size: 11.5px;
    padding: 9px 4px;
    white-space: nowrap;
  }
  .v5-booking-panel .v4-picker-micro { font-size: 11.5px; margin-top: 6px; }

  /* Compression lever 5 */
  .v5-footnotes { padding-top: 12px; }
  .v5-footnotes p { font-size: 11px; line-height: 1.4; margin-bottom: 4px; }

  .v5-route-card { border-radius: 16px; }
}

/* ====== MOTION DISCIPLINE ======
   No transform, scale or translate feedback anywhere on the
   page. Programmatic scrolls pass instant behavior.

   The root scrolls deterministically. The base stylesheet sets
   html { scroll-behavior: smooth }, which turns every plain
   scrollTo into an animation and leaves the real scroll position
   trailing the requested one, so anything that sets a position and
   then reads the page, a test harness or the page's own code, sees
   a stale position. The page still scrolls smoothly where it means
   to: the CTA and affordance handlers pass behavior explicitly, and
   an explicit behavior wins over this declaration. */
html.v5-root { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  .v5-cta,
  .v5-source,
  .v5-openslot,
  .v5-openslots-all,
  .v5-route-alt-toggle,
  .v5-booking-panel .v4-slot,
  .v5-booking-panel .v4-linklike { transition: none; }
}

/* Live values can be materially longer than the worked mockup values. */
.v5-result-card,
.v5-rateband-row,
.v5-booking-panel,
.v5-confirmed,
.v5-confirmed-head,
.v5-confirmed-p,
.v5-booking-panel .v4-confirm-line,
.v5-booking-panel .v4-field,
.v5-booking-panel .v4-slot { min-width: 0; }
.v5-result-prepared,
.v5-profile-chip,
.v5-verdict,
.v5-rateband-row > span,
.v5-rateband-row strong,
.v5-booking-panel .v4-confirm-line,
.v5-confirmed-head,
.v5-confirmed-p,
.v5-booking-panel .v4-slot { overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .v5-profile-chip,
  .v5-result-prepared,
  .v5-rateband-row,
  .v5-booking-panel .v4-slot { max-width: 100%; }
  .v5-booking-panel .v4-slot { white-space: normal; }
}