/* Hallmark · genre: editorial (on dark) · macrostructure: Workbench, printed ticket ledger · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4
 * tone: floodlit utility · anchor hue: gold · contrast: pass (40-41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49-57)
 * =============================================================================
   Ticket2Go - request form v2 (proposal, 2026-09-14). Loaded AFTER design.css.
   Overlay only: no markup, id, data-act, data-i18n or wizard logic changes.

   THE IDEA
   The visitor is building a request, so the page prints it for them. Beside
   the working surface (the active step, ink) lies a paper match ticket in the
   site's paper band. Each answer prints one row on it - label, dotted leader,
   value, crests for a fixture - and its tear-off band is the progress. On a
   phone the ticket is only its band: counter, progress, one line of answers.
   On the summary the ticket folds to its band and the summary itself is the
   printed sheet, with the page's one gold gradient under it: the request CTA.

   ONE MOTION IDEA: a row inks in (opacity + colour, 240ms) the moment it is
   answered. The step change is a plain 200ms opacity fade with no movement.
   No keyframes, no loops. prefers-reduced-motion removes all of it.

   FONT CONFLICT (flagged, not resolved here): design.md says body Heebo; this
   page runs Rubik + Secular One by Or's request (design.css, 2026-09-05). v2
   keeps the page's current faces. Or decides.

   No text is added through `content`: every `content` below is "" for a
   drawn shape.
   ========================================================================== */

/* =================================================================== tokens */

:root {
  /* design.md, locked */
  --v2-ink: #08080a;
  --v2-ink-soft: #101014;
  --v2-ink-card: #16161c;
  --v2-ink-line: #26262f;
  --v2-gold: #e0b352;
  --v2-gold-bright: #f7e3a1;
  --v2-gold-deep: #a9762c;
  --v2-gold-ink: #8a5f20;       /* gold TEXT on paper only (4.9:1 on the band) */
  --v2-paper: #f6f6f4;
  --v2-paper-band: #f3f1ea;
  --v2-muted: #a19c92;
  --v2-wa: #25d366;

  /* extensions, derived from the locked set */
  --v2-ink-raise: #1d1d25;
  --v2-ink-line-strong: #3a3a45;
  --v2-paper-dim: #d8d3c8;      /* secondary text on ink, 11:1 on ink-card */
  --v2-paper-map: #f6f4ee;      /* the seat-map frame's own paper */
  --v2-paper-line: #e2ddd0;
  --v2-paper-rule: #c9c1ad;     /* perforations and leaders on paper */
  --v2-paper-muted: #5f5a50;    /* labels on paper, 6:1 on the band */
  --v2-error: #f3a59c;          /* 9:1 on ink-soft */
  --v2-surface: rgba(16, 16, 20, 0.92);
  --v2-ink-90: rgba(8, 8, 10, 0.9);
  --v2-shadow: rgba(0, 0, 0, 0.55);
  --v2-paper-shadow: rgba(0, 0, 0, 0.45);
  --v2-gold-a08: rgba(224, 179, 82, 0.08);
  --v2-gold-a10: rgba(224, 179, 82, 0.1);
  --v2-gold-a30: rgba(224, 179, 82, 0.3);
  --v2-gold-a45: rgba(224, 179, 82, 0.45);
  --v2-gold-bright-a78: rgba(247, 227, 161, 0.78);
  --v2-wa-a12: rgba(37, 211, 102, 0.12);
  --v2-wa-a55: rgba(37, 211, 102, 0.55);
  --v2-error-a10: rgba(243, 165, 156, 0.1);
  --v2-mask: #000;              /* mask alpha only, never painted */
  --v2-cta-fill: linear-gradient(135deg, var(--v2-gold-bright) 0%, var(--v2-gold) 46%, var(--v2-gold-deep) 100%);

  /* one line-icon voice for the event types, painted through a mask */
  --v2-icon-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M12 7.4l4.4 3.2-1.7 5.1H9.3l-1.7-5.1z'/%3E%3Cpath d='M12 7.4V2.4M16.4 10.6l4.8-1.5M14.7 15.7l2.9 4M9.3 15.7l-2.9 4M7.6 10.6L2.8 9.1'/%3E%3C/svg%3E");
  --v2-icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.6' y='2.4' width='6.8' height='11.6' rx='3.4'/%3E%3Cpath d='M5.4 10.6a6.6 6.6 0 0 0 13.2 0M12 17.2v4.4M8.6 21.6h6.8'/%3E%3C/svg%3E");

  --v2-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-fast: 160ms;
  --v2-fade: 200ms;
  --v2-fill: 240ms;

  --v2-r-card: 20px;
  --v2-r-ctl: 12px;
  --v2-r-pill: 999px;

  --v2-gutter: 14px;
  --v2-card-pad-block: 22px;
  --v2-card-pad-inline: 16px;
  --v2-measure: 560px;          /* one width for every control column */
  --v2-pill-h: 44px;            /* the float row pills; the phone lang pill sits on it */

  /* the old page's own tokens, pointed at the site palette so any rule this
     file does not reach stops drawing peach and navy */
  --gold-1: var(--v2-gold);
  --gold-2: var(--v2-gold-deep);
  --dark-1: var(--v2-ink);
  --dark-2: var(--v2-ink-card);
  --dark-3: var(--v2-ink-line-strong);
  --glass: var(--v2-ink-card);
  --glass-strong: var(--v2-surface);
  --glass-line: var(--v2-gold-a45);
  --gold-glow: transparent;
}

/* Arabic needs a face with Arabic glyphs for display and UI alike. */
html[lang="ar"] {
  --font-body: "Cairo Variable", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: "Cairo Variable", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ============================================================ page and scene */

html,
body {
  overflow-x: clip;
}

body {
  background: var(--v2-ink);
  color: var(--v2-paper);
}

/* No endless loops: the orbs, the beams, the logo float, the title sheen, the
   button pulse and the progress shimmer all stop. The beams stay, still. */
.bg-scene::before {
  display: none;
  animation: none;
}

.bg-scene::after {
  animation: none;
  width: auto;
  height: auto;
  border-radius: 0;
  inset: 0;
}

/* The beams' box ends at 38vh, and its lower edge showed as a hard line
   across the photo (plain to see at 1280x720); the mask fades it out. */
.form-container::before {
  animation: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, var(--v2-mask) 30%, transparent 100%);
  mask-image: linear-gradient(180deg, var(--v2-mask) 30%, transparent 100%);
}

/* ================================================================ container */

/* padding-inline only: a padding shorthand here would wipe the desk lane that
   design.css keeps under the last control for the floating pair. */
.form-container {
  padding-inline: var(--v2-gutter);
}

/* Visual order (DOM order is untouched, so reading and tab order are too):
   header, "how it works" on step 1 only, the ticket band, the step, then
   "how it works" from step 2 on - each new step opens at the top. */
html[data-v2-ledger] .form-header { order: 1; }
html[data-v2-ledger][data-v2-step="1"] .how-it-works { order: 2; }
html[data-v2-ledger] .v2-ledger { order: 3; }
html[data-v2-ledger] .steps-viewport { order: 4; }
html[data-v2-ledger] .how-it-works { order: 5; }

/* The wizard's own bar and counter stay in the page for screen readers; the
   ticket draws them for the eye. */
[data-v2-progress] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================================================================== header */

.form-container .form-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 12px;
  text-align: start;
  padding: 10px 0 16px;
}

html[dir="ltr"] .form-container .form-header {
  text-align: start;
}

.form-container .home-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  transition: none;
}

.form-container .home-mark:hover {
  transform: none;
}

.form-container .home-mark:focus-visible {
  outline: 2px solid var(--v2-gold);
  outline-offset: 4px;
  border-radius: 8px;
}

.form-container .form-header img {
  height: 34px;
  margin: 0;
  filter: none;
  animation: none;
}

.form-container .form-header h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--v2-paper);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  animation: none;
  overflow-wrap: anywhere;
}

.form-container .form-header h1::after {
  display: none;
}

html[lang="ar"] .form-container .form-header h1 {
  font-weight: 800;
  line-height: 1.35;
}

/* ============================================================ language menu */

.form-container .lang-menu {
  top: 20px;
  inset-inline-start: auto;
  inset-inline-end: var(--v2-gutter);
}

/* opaque ink instead of a second blur layer */
.lang-menu > .lang-switch {
  min-height: var(--v2-pill-h);
  padding: 0 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--v2-paper-dim);
  background: var(--v2-ink-90);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-ink-line-strong);
  box-shadow: none;
  transform: none;
  transition: border-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}

.lang-menu > .lang-switch:hover {
  transform: none;
  color: var(--v2-paper-dim);
  border-color: var(--v2-ink-line-strong);
}

@media (hover: hover) {
  .lang-menu > .lang-switch:hover {
    color: var(--v2-gold);
    border-color: var(--v2-gold-a45);
  }
}

.lang-menu > .lang-switch:focus-visible {
  outline: 2px solid var(--v2-gold);
  outline-offset: 2px;
}

.lang-menu[open] > .lang-switch {
  border-color: var(--v2-gold-a45);
  color: var(--v2-gold);
}

.lang-menu .lang-list {
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  padding: 4px;
  background: var(--v2-ink-card);
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: var(--v2-r-ctl);
  box-shadow: 0 18px 40px -20px var(--v2-shadow);
}

.lang-menu .lang-opt {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--v2-paper);
  font-weight: 500;
}

.lang-menu .lang-opt:hover {
  background: transparent;
  color: var(--v2-paper);
}

@media (hover: hover) {
  .lang-menu .lang-opt:hover {
    background: var(--v2-ink-raise);
    color: var(--v2-gold);
  }
}

.lang-menu .lang-opt:focus-visible {
  background: var(--v2-ink-raise);
  color: var(--v2-gold);
  outline: none;
  box-shadow: inset 0 0 0 2px var(--v2-gold);
}

/* ============================================================ how it works */

/* Plain type, no card: it explains, it does not compete with the step. */
.form-container .how-it-works {
  max-width: var(--v2-measure);
  width: 100%;
  margin: 28px 0 8px;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: start;
}

html[data-v2-ledger][data-v2-step="1"] .form-container .how-it-works {
  margin: 0 0 16px;
}

.how-it-works h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--v2-gold);
}

.how-it-works .hiw-steps {
  gap: 12px;
}

.how-it-works .hiw-steps li {
  gap: 12px;
}

.how-it-works .hiw-num {
  flex: 0 0 26px;
  height: 26px;
  /* ink, not transparent: the numeral never depends on the photo behind it */
  background: var(--v2-ink);
  border: 1px solid var(--v2-gold-a45);
  color: var(--v2-gold);
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1;
}

.how-it-works .hiw-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--v2-muted);
}

.how-it-works .hiw-body strong {
  color: var(--v2-paper);
  font-weight: 500;
}

.how-it-works .hiw-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--v2-ink-line);
  font-size: 0.8125rem;
  color: var(--v2-muted);
}

/* ======================================================= the printed ticket */

.v2-ledger {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 0 14px;
}

/* Nothing answered yet (step 1, or back on it): no ticket. */
.v2-ledger:not([data-known]) {
  display: none;
}

/* Paper in the site's paper band. The two notches are cut by a mask at the
   perforation; no grain, no fibre - the notches and the band carry the idea. */
.v2-ticket {
  --v2-notch: 8px;
  --v2-perf: 88px;
  --v2-nx: var(--v2-perf);
  position: relative;
  background: var(--v2-paper-band);
  color: var(--v2-ink);
  border-radius: 12px;
  box-shadow: 0 18px 36px -24px var(--v2-paper-shadow);
  -webkit-mask:
    radial-gradient(circle at var(--v2-nx) 0, transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--v2-nx) 100%, transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--v2-nx) 0, transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--v2-nx) 100%, transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) bottom / 100% 51% no-repeat;
}

html[dir="rtl"] .v2-ticket {
  --v2-nx: calc(100% - var(--v2-perf));
}

.v2-ticket__body {
  display: none;
}

/* the band: counter | perforation | progress over one line of answers */
.v2-ticket__tear {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--v2-perf) - 28px) minmax(0, 1fr);
  grid-template-areas:
    "count segs"
    "count trail";
  column-gap: 28px;
  row-gap: 8px;
  align-items: center;
  padding: 10px 16px;
  min-height: 66px;
}

/* one perforation style everywhere: a row of round dots */
.v2-ticket__tear::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  inset-inline-start: calc(var(--v2-perf) - 1px);
  width: 2px;
  background-image: radial-gradient(circle, var(--v2-paper-rule) 1px, transparent 1.5px);
  background-size: 2px 6px;
  background-repeat: repeat-y;
}

.v2-count {
  grid-area: count;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.v2-count__word {
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--v2-paper-muted);
}

.v2-count__line {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.v2-count__cur {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--v2-gold-ink);
}

.v2-count__of {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--v2-paper-muted);
}

.v2-count__tot {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--v2-ink);
}

html[lang="ar"] .v2-count__cur,
html[lang="ar"] .v2-count__tot {
  font-weight: 700;
}

.v2-segs {
  grid-area: segs;
  display: flex;
  gap: 4px;
  height: 6px;
  min-width: 0;
}

.v2-seg {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 3px;
  background: var(--v2-paper-line);
  transition: background-color var(--v2-fill) var(--v2-ease);
}

.v2-seg[data-state="done"] {
  background: var(--v2-gold-deep);
}

.v2-seg[data-state="current"] {
  background: var(--v2-ink);
}

.v2-ledger[data-success] .v2-seg {
  background: var(--v2-gold-deep);
}

.v2-trail {
  grid-area: trail;
  margin: 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--v2-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  unicode-bidi: plaintext;
}

/* rows (the full desk ticket) */
.v2-ticket__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--v2-ink);
}

html[lang="ar"] .v2-ticket__title {
  font-weight: 700;
}

.v2-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* label ....... value, like a ledger line. Only answered lines are printed. */
.v2-row {
  display: grid;
  grid-template-columns: 7px max-content minmax(16px, 1fr) fit-content(64%);
  column-gap: 9px;
  align-items: center;
  min-height: 34px;
  padding: 6px 0;
  opacity: 1;
  transition: opacity var(--v2-fill) var(--v2-ease);
}

.v2-row[hidden],
.v2-row[data-lit="0"] {
  display: none;
}

.v2-row__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-gold-deep);
}

.v2-row__label {
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--v2-paper-muted);
}

.v2-row__leader {
  align-self: center;
  height: 2px;
  background-image: radial-gradient(circle, var(--v2-paper-rule) 0.9px, transparent 1.2px);
  background-size: 5px 2px;
  background-repeat: repeat-x;
}

.v2-row__value {
  display: block;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--v2-ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  transition: color var(--v2-fill) var(--v2-ease);
}

/* the value hugs the far edge, like a printed amount */
html[dir="rtl"] .v2-row__value { text-align: left; }
html[dir="ltr"] .v2-row__value { text-align: right; }

/* THE MOTION IDEA: a new row is held unprinted for one frame by design-v2.js,
   then inks in. A transition on a row that is already displayed. */
.v2-row[data-fresh] {
  opacity: 0;
}

.v2-row[data-fresh] .v2-row__value {
  color: var(--v2-gold-ink);
}

.v2-line {
  display: block;
}

.v2-line + .v2-line {
  margin-top: 4px;
}

.v2-line .mr-teams {
  justify-content: flex-end;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 2px 6px;
  color: var(--v2-ink);
}

.v2-line .mr-crest {
  width: 16px;
  height: 16px;
}

.v2-line .mr-vs {
  color: var(--v2-paper-muted);
}

/* ============================================================== the steps */

/* Not a scroll container any more: the calendar is no longer clipped, and a
   focus() inside a step cannot shift the card up inside a hidden clip. The
   clip margin keeps the card's own shadow. */
.form-container .steps-viewport {
  flex: 0 0 auto;
  overflow: clip;
  overflow-clip-margin: 32px;
}

/* Inactive steps are hidden outright (no ghost of the old step, no tab stops
   in it). The active one fades in: opacity only, no movement, no keyframes.
   Only opacity and transform stay in the transition list, as design.css set
   it, so backdrop-filter and shadow never join it and strand a step. */
.step {
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  column-gap: 12px;
  text-align: start;
  visibility: hidden;
  transform: none;
  transition-property: opacity, transform;
  transition-duration: var(--v2-fade);
  transition-timing-function: var(--v2-ease);
}

.step > * {
  flex: 0 0 100%;
  min-width: 0;
}

.step > .btn-next,
.step > .btn-back {
  flex: 0 0 auto;
}

.step.active {
  visibility: visible;
  opacity: 1;
  transform: none;
  background: var(--v2-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-ink-line);
  border-radius: var(--v2-r-card);
  padding: var(--v2-card-pad-block) var(--v2-card-pad-inline);
  box-shadow: 0 28px 60px -34px var(--v2-shadow);
}

.step .question-label {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: start;
  text-shadow: none;
  color: var(--v2-paper);
  overflow-wrap: anywhere;
}

html[lang="ar"] .step .question-label {
  font-weight: 800;
  line-height: 1.4;
}

.step .question-sub {
  margin: 0 0 18px;
  max-width: 52ch;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  color: var(--v2-muted);
}

/* the 5b note carries inline type; it is a footnote, not a heading. Full
   width, so "back" never rides up beside it and reads as the next action. */
.step[data-step="5b"] > .question-sub[style] {
  max-width: none;
  margin-top: 16px !important;
  margin-bottom: 0;
  font-size: 0.875rem !important;
  color: var(--v2-paper-dim) !important;
}

/* =============================================================== buttons */

.step .btn-next {
  animation: none;
  min-height: 50px;
  margin-top: 20px;
  padding: 0 24px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--v2-r-pill);
  background: var(--v2-gold);
  color: var(--v2-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: background-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}

.step .btn-next::before {
  display: none;
}

/* the chevron points the way the page reads: left in RTL, right in LTR */
.step .btn-next::after,
html[dir="rtl"] .step .btn-next:hover::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(135deg);
  transition: none;
}

html[dir="ltr"] .step .btn-next::after,
html[dir="ltr"] .step .btn-next:hover::after {
  transform: rotate(-45deg);
}

.step .btn-next:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

@media (hover: hover) {
  .step .btn-next:hover {
    background: var(--v2-gold-bright);
  }
}

.step .btn-next:active {
  transform: translateY(1px);
}

.step .btn-next:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Blocked = "the primary, not ready yet": still gold, unlit. Still clickable
   on purpose (form.js explains what is missing on press). */
.step .btn-next.is-blocked,
.step .btn-next.is-blocked:hover {
  opacity: 1;
  background: var(--v2-gold-a08);
  color: var(--v2-gold-bright-a78);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--v2-gold-a30);
}

@media (hover: hover) {
  .step .btn-next.is-blocked:hover {
    background: var(--v2-gold-a10);
    color: var(--v2-gold-bright);
    box-shadow: inset 0 0 0 1px var(--v2-gold-a45);
  }
}

.step .btn-back {
  min-height: 48px;
  margin-top: 20px;
  padding: 0 20px;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: var(--v2-r-pill);
  background: transparent;
  color: var(--v2-paper-dim);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transform: none;
  transition: border-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}

.step .btn-back:hover {
  color: var(--v2-paper-dim);
}

@media (hover: hover) {
  .step .btn-back:hover {
    color: var(--v2-paper);
    border-color: var(--v2-gold-a45);
  }
}

.step .btn-back:active {
  transform: translateY(1px);
}

/* focus rings appear instantly and never transition */
.step :is(.btn-next, .btn-back, .btn-email, .btn-submit, .btn-restart, .match-chip-x, .match-manual-toggle, .date-cal-btn, .cal-nav-btn, .cal-day, a):focus-visible,
.float-bar a:focus-visible {
  outline: 2px solid var(--v2-gold);
  outline-offset: 3px;
}

/* The choice cards and pills take keyboard focus since 2026-09-14 (form.js,
   __choiceKeys). The quantity keys sit in a clipped segmented row, so their
   ring is drawn inside the key instead of outside it. */
.step :is(.choice-card, .pill):focus-visible {
  outline: 2px solid var(--v2-gold);
  outline-offset: 3px;
}

.step[data-step="5"] .pill:focus-visible {
  outline-offset: -4px;
}

/* The step 1 cards are cut with a ticket-notch mask, and a mask clips anything
   outside the border box - an outside ring painted nothing (QA, 2026-09-14). */
.step[data-step="1"] .choice-card:focus-visible {
  outline-offset: -5px;
}

/* After a keyboard step change form.js focuses the new step's heading
   (tabindex=-1) so it is announced; it is not a control, so no ring. */
.step .question-label:focus,
.step .success-screen h2:focus {
  outline: none;
}

/* A selected card's stub is gold, and a gold ring vanished over it. */
.step[data-step="1"] .choice-card.selected:focus-visible {
  outline-color: var(--v2-paper);
}

/* The seat-map frame, focused by the keyboard (form.js sets data-kb-focus). */
.step iframe[data-kb-focus] {
  /* Inside the frame: its block clips anything outside, and the map is on
     paper, where gold-ink carries the contrast plain gold does not. */
  outline: 3px solid var(--v2-gold-ink);
  outline-offset: -3px;
}

/* The calendar's next-month button comes first in the markup, which puts it on
   the right in Hebrew and Arabic but on the LEFT in English, pointing the wrong
   way. Visible now that the calendar speaks English (2026-09-14). */
html[dir="ltr"] .cal-popup .cal-header {
  flex-direction: row-reverse;
}

/* ============================================================ choice cards */

.step .choices {
  justify-content: flex-start;
  gap: 12px;
}

.step .choice-card {
  --v2-card-line: var(--v2-ink-line-strong);
  --v2-card-fill: var(--v2-ink-card);
  flex: 1 1 0;
  min-width: 0;
  max-width: 272px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  text-align: start;
  border: 1px solid var(--v2-card-line);
  border-radius: 16px;
  background: var(--v2-card-fill) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition: border-color var(--v2-fast) var(--v2-ease), background-color var(--v2-fast) var(--v2-ease);
}

.step .choice-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--v2-card-line);
}

.step .choice-card::before {
  display: none;
}

/* the selection ring (seating cards) */
.step .choice-card::after {
  content: "";
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--v2-ink-line-strong);
  background: transparent;
  box-shadow: inset 0 0 0 4px var(--v2-card-fill);
  transition: background-color var(--v2-fill) var(--v2-ease), border-color var(--v2-fill) var(--v2-ease);
}

@media (hover: hover) {
  .step .choice-card:not(.selected):hover {
    --v2-card-line: var(--v2-gold-a45);
    --v2-card-fill: var(--v2-ink-raise);
  }
}

.step .choice-card.selected {
  --v2-card-line: var(--v2-gold);
  --v2-card-fill: var(--v2-ink-raise);
  box-shadow: inset 0 0 0 1px var(--v2-gold);
}

.step .choice-card.selected::after {
  border-color: var(--v2-gold);
  background: var(--v2-gold);
}

.step .choice-title,
.step .choice-card.selected .choice-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--v2-paper);
  background: none;
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
}

.step .choice-card.selected .choice-title {
  color: var(--v2-gold-bright);
}

html[lang="ar"] .step .choice-title {
  font-weight: 700;
}

/* Event type: each option is a ticket. A stub at the start carries a gold
   line icon (the emoji stays in the DOM at size 0), a perforation with two
   notches separates it from the name. Chosen = the stub is punched gold. */
.step[data-step="1"] .choices {
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: var(--v2-measure);
  gap: 10px;
}

.step[data-step="1"] .choice-card {
  --v2-stub: 76px;
  --v2-sx: var(--v2-stub);
  --v2-stub-fill: transparent;
  --v2-dots: var(--v2-ink-line-strong);
  --v2-icon: var(--v2-gold);
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-block: 0;
  padding-inline: calc(var(--v2-stub) + 22px) 22px;
  border-radius: 14px;
  background:
    radial-gradient(circle, var(--v2-dots) 1px, transparent 1.5px) var(--v2-sx) 50% / 2px 6px repeat-y border-box,
    linear-gradient(var(--v2-stub-fill), var(--v2-stub-fill)) left top / var(--v2-stub) 100% no-repeat border-box,
    var(--v2-card-fill) !important;
  -webkit-mask:
    radial-gradient(circle at var(--v2-sx) 0, transparent 8px, var(--v2-mask) 8.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--v2-sx) 100%, transparent 8px, var(--v2-mask) 8.5px) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--v2-sx) 0, transparent 8px, var(--v2-mask) 8.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--v2-sx) 100%, transparent 8px, var(--v2-mask) 8.5px) bottom / 100% 51% no-repeat;
}

/* in RTL the stub is on the right */
html[dir="rtl"] .step[data-step="1"] .choice-card {
  --v2-sx: calc(100% - var(--v2-stub));
  background:
    radial-gradient(circle, var(--v2-dots) 1px, transparent 1.5px) var(--v2-sx) 50% / 2px 6px repeat-y border-box,
    linear-gradient(var(--v2-stub-fill), var(--v2-stub-fill)) right top / var(--v2-stub) 100% no-repeat border-box,
    var(--v2-card-fill) !important;
}

.step[data-step="1"] .choice-card::after {
  display: none;
}

.step[data-step="1"] .choice-card .choice-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--v2-stub) / 2 - 18px);
  width: 36px;
  height: 36px;
  margin: -18px 0 0;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  background-color: var(--v2-icon);
  -webkit-mask: var(--v2-icon-ball) center / contain no-repeat;
  mask: var(--v2-icon-ball) center / contain no-repeat;
  transition: background-color var(--v2-fast) var(--v2-ease);
}

.step[data-step="1"] .choice-card[data-arg="concert"] .choice-icon {
  -webkit-mask-image: var(--v2-icon-mic);
  mask-image: var(--v2-icon-mic);
}

@media (hover: hover) {
  .step[data-step="1"] .choice-card:not(.selected):hover {
    --v2-dots: var(--v2-gold-a45);
    --v2-stub-fill: var(--v2-gold-a10);
    --v2-icon: var(--v2-gold-bright);
  }
}

.step[data-step="1"] .choice-card.selected {
  --v2-dots: var(--v2-gold);
  --v2-stub-fill: var(--v2-gold);
  --v2-icon: var(--v2-ink);
  box-shadow: none;
}

.step[data-step="1"] .choice-title,
.step[data-step="1"] .choice-card.selected .choice-title {
  font-size: 1.5rem;
}

/* Seating: the drawn seats take the palette (gold together, muted split). */
.step[data-step="5b"] .choice-icon {
  margin: 0;
  line-height: 0;
}

.step[data-step="5b"] .choice-icon svg {
  width: 104px;
  max-width: 100%;
  height: auto;
}

.step[data-step="5b"] .choice-card:first-child svg rect { fill: var(--v2-gold); }
.step[data-step="5b"] .choice-card:first-child svg line { stroke: var(--v2-gold); }
.step[data-step="5b"] .choice-card:last-child svg rect { fill: var(--v2-muted); }
.step[data-step="5b"] .choice-card:last-child svg circle { fill: var(--v2-muted); }
.step[data-step="5b"] .choice-card:last-child svg line { stroke: var(--v2-muted); }

/* =================================================================== pills */

.step .pill-choices {
  justify-content: flex-start;
  gap: 10px;
}

.step .pill {
  --v2-pill-line: var(--v2-ink-line-strong);
  --v2-pill-fill: var(--v2-ink-card);
  --v2-pill-text: var(--v2-paper);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--v2-pill-line);
  border-radius: var(--v2-r-pill);
  background: var(--v2-pill-fill) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--v2-pill-text);
  font-size: 1rem;
  font-weight: 500;
  transform: none;
  transition: border-color var(--v2-fast) var(--v2-ease), background-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}

.step .pill:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--v2-pill-line);
}

@media (hover: hover) {
  .step .pill:not(.selected):hover {
    --v2-pill-line: var(--v2-gold-a45);
    --v2-pill-fill: var(--v2-ink-raise);
  }
}

.step .pill.selected {
  --v2-pill-line: var(--v2-gold);
  --v2-pill-fill: var(--v2-ink-raise);
  --v2-pill-text: var(--v2-gold-bright);
  box-shadow: inset 0 0 0 1px var(--v2-gold);
}

/* Quantity: one segmented key set, like a turnstile counter. The 1px gaps are
   the dividers, so it is the same in both directions. Five keys, one row, down
   to 320. */
.step[data-step="5"] .pill-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  max-width: var(--v2-measure);
  overflow: hidden;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: 16px;
  background: var(--v2-ink-line-strong);
}

.step[data-step="5"] .pill {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.step[data-step="5"] .pill.selected {
  --v2-pill-fill: var(--v2-gold);
  --v2-pill-text: var(--v2-ink);
  box-shadow: none;
}

html[lang="ar"] .step[data-step="5"] .pill {
  font-weight: 700;
}

/* "5+" stays "5+" in a right-to-left page */
.step .pill[data-arg="5+"] {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Category (step 6): a list of plates with a drawn radio mark. */
.step #categoryPills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: var(--v2-measure);
}

.step #categoryPills .pill {
  display: flex;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 14px;
  line-height: 1.3;
  text-align: start;
  white-space: normal;
}

.step #categoryPills .pill::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--v2-ink-line-strong);
  box-shadow: inset 0 0 0 3px var(--v2-pill-fill);
  background: var(--v2-pill-fill);
  transition: background-color var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}

.step #categoryPills .pill.selected::before {
  border-color: var(--v2-gold);
  background: var(--v2-gold);
}

/* ================================================================== inputs */

.step .input-group,
.step .match-picker,
.step .date-picker-wrap {
  max-width: var(--v2-measure);
}

/* One height with the buttons' family (52), 1px border in every state; the
   focus ring is an outline reserved at rest, so nothing shifts. */
.step .text-input,
.step .input-group textarea {
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: var(--v2-r-ctl);
  background: var(--v2-ink-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--v2-paper);
  caret-color: var(--v2-gold);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color var(--v2-fast) var(--v2-ease);
}

.step .text-input::placeholder {
  color: var(--v2-muted);
  font-weight: 400;
}

.step .text-input:focus,
.step .input-group textarea:focus {
  border-color: var(--v2-gold);
  background: var(--v2-ink-card) !important;
  box-shadow: none;
  outline-color: var(--v2-gold-a45);
}

.step textarea.text-input {
  min-height: 112px;
  line-height: 1.5;
}

.step[data-step="8"] label[style] {
  margin-bottom: 8px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--v2-paper-dim) !important;
}

/* The phone number stays a left-to-right field (a "+972 54" must not
   reorder); its digits line up with the page's start edge. Only the Hebrew or
   Arabic placeholder is set right-to-left, on the placeholder itself, so the
   field never flips direction under the caret on the first keystroke. */
html[dir="rtl"] .step #contactPhone {
  text-align: right !important;
}

html[dir="ltr"] .step #contactPhone {
  text-align: left !important;
}

html[dir="rtl"] .step #contactPhone::placeholder,
html[dir="rtl"] .step .date-text-input::placeholder {
  direction: rtl;
}

.step .input-hint {
  text-align: start;
  color: var(--v2-muted);
  font-size: 0.875rem;
}

/* errors: said next to the field, and the field is marked (but while the
   visitor is typing into it, the gold focus wins) */
.step .field-error {
  text-align: start;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--v2-error);
}

.step .field-error:empty {
  margin-top: 0;
}

.step:has(#err-3-football.show) #matchSearch:not(:focus),
.step:has(#err-2-concert.show) #concertName:not(:focus),
.step:has(#err-8.show) #contactName:placeholder-shown:not(:focus),
.step:has(#err-8.show) #contactName:not(:placeholder-shown) ~ #contactPhone:not(:focus) {
  border-color: var(--v2-error);
}

.step:has(#err-7.show) .map-cat-block {
  border-color: var(--v2-error);
}

/* Step 8: the phone error sits under the phone field, not under the notes.
   display:contents + order is visual only; no focusable element moves in the
   tab order (the error line is not focusable). */
.step[data-step="8"] .input-group {
  display: contents;
}

.step[data-step="8"] .input-group > * {
  flex: 0 0 100%;
  max-width: var(--v2-measure);
}

.step[data-step="8"] > .question-label { order: 1; }
.step[data-step="8"] > .question-sub { order: 2; }
.step[data-step="8"] .input-group > label:nth-of-type(1) { order: 3; }
.step[data-step="8"] #contactName { order: 4; }
.step[data-step="8"] .input-group > label:nth-of-type(2) { order: 5; }
.step[data-step="8"] #contactPhone { order: 6; }
.step[data-step="8"] > #err-8 { order: 7; margin: -6px 0 14px; }
.step[data-step="8"] > #err-8:empty { margin: 0; }
.step[data-step="8"] .input-group > label:nth-of-type(3) { order: 8; }
.step[data-step="8"] #contactNotes { order: 9; }
.step[data-step="8"]::after { order: 10; }
.step[data-step="8"] > .btn-next { order: 11; }
.step[data-step="8"] > .btn-back { order: 12; }

/* A zero-height line break, so a button never rides up beside a field that is
   narrower than the card. */
.step[data-step="8"]::after,
.step[data-step="9"]::after {
  content: "";
  flex: 0 0 100%;
  height: 0;
}

.step[data-step="9"] > * { order: 2; }
.step[data-step="9"] > .question-label,
.step[data-step="9"] > .question-sub,
.step[data-step="9"] > .summary-card,
.step[data-step="9"] > .btn-back,
.step[data-step="9"]::after { order: 1; }

/* ============================================================ match picker */

.step .match-results {
  margin-top: 8px;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: var(--v2-r-ctl);
  background: var(--v2-ink-card);
  box-shadow: 0 18px 40px -26px var(--v2-shadow);
}

.step .match-result {
  min-height: 56px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--v2-ink-line);
  background: transparent;
  color: var(--v2-paper);
  transition: background-color var(--v2-fast) var(--v2-ease);
}

.step .match-result:hover {
  background: transparent;
}

@media (hover: hover) {
  .step .match-result:hover {
    background: var(--v2-gold-a10);
  }
}

.step .match-result:focus-visible {
  background: var(--v2-gold-a10);
  outline: 2px solid var(--v2-gold);
  outline-offset: -2px;
}

.step .mr-vs,
.step .mr-meta,
.step .match-note {
  color: var(--v2-muted);
}

.step .match-chosen.show {
  gap: 8px;
}

.step .match-chip {
  gap: 6px;
  padding-block: 6px;
  padding-inline: 14px 4px;
  border: 1px solid var(--v2-gold-a45);
  border-radius: var(--v2-r-ctl);
  background: var(--v2-gold-a10);
}

.step .match-chip-text > b {
  color: var(--v2-paper);
}

.step .match-chip-x {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--v2-paper-dim);
  background: transparent;
  transition: background-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}

.step .match-chip-x:hover {
  color: var(--v2-paper-dim);
  background: transparent;
}

@media (hover: hover) {
  .step .match-chip-x:hover {
    color: var(--v2-paper);
    background: var(--v2-ink-raise);
  }
}

.step .match-manual-toggle {
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: start;
  color: var(--v2-paper-dim);
  text-decoration-color: var(--v2-gold-a45);
  text-underline-offset: 4px;
  transition: color var(--v2-fast) var(--v2-ease);
}

.step .match-manual-toggle:hover {
  color: var(--v2-paper-dim);
}

@media (hover: hover) {
  .step .match-manual-toggle:hover {
    color: var(--v2-gold);
  }
}

/* =================================================================== date */

.step .date-input-row {
  min-height: 56px;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: var(--v2-r-ctl);
  background: var(--v2-ink-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: border-color var(--v2-fast) var(--v2-ease);
}

.step .date-input-row:focus-within {
  border-color: var(--v2-gold);
  background: var(--v2-ink-card) !important;
  box-shadow: none;
}

.step .date-input-row.has-value {
  border-color: var(--v2-gold-a45);
  background: var(--v2-ink-card) !important;
  box-shadow: none;
}

.step .date-input-row.has-value:focus-within {
  border-color: var(--v2-gold);
}

.step .date-cal-btn,
.step .date-cal-btn:hover {
  flex: 0 0 56px;
  width: 56px;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid var(--v2-ink-line);
  background: transparent;
  color: var(--v2-gold);
  transition: color var(--v2-fast) var(--v2-ease), background-color var(--v2-fast) var(--v2-ease);
}

@media (hover: hover) {
  .step .date-cal-btn:hover {
    color: var(--v2-gold-bright);
    background: var(--v2-ink-raise);
  }
}

.step .date-cal-btn::after {
  display: none;
}

.step .date-cal-btn svg,
.step .date-cal-btn:hover svg {
  transform: none;
  filter: none;
  width: 22px;
  height: 22px;
}

.step .date-cal-btn:focus-visible {
  outline-offset: -4px;
}

.step .date-text-input {
  padding: 0 16px;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  caret-color: var(--v2-gold);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--v2-paper);
  font-variant-numeric: tabular-nums;
}

.step .date-text-input::placeholder {
  color: var(--v2-muted);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* The calendar opens IN the step, below the field: nothing can clip it and it
   pushes the buttons down instead of covering them. No entrance motion. */
.date-picker-wrap .cal-popup {
  position: static;
  display: none;
  min-width: 0;
  width: auto;
  margin-top: 10px;
  padding: 12px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  background: var(--v2-ink-card) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: 16px;
  box-shadow: none;
  transition: none;
}

.date-picker-wrap .cal-popup.open {
  display: block;
  transform: none;
}

.cal-popup .cal-header {
  margin-bottom: 8px;
  padding: 0;
}

.cal-popup .cal-nav-btn,
.cal-popup .cal-nav-btn:hover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--v2-ink-line);
  background: transparent;
  color: var(--v2-paper-dim);
  font-size: 1.25rem;
  transform: none;
  transition: border-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}

@media (hover: hover) {
  .cal-popup .cal-nav-btn:hover {
    border-color: var(--v2-gold-a45);
    color: var(--v2-gold);
  }
}

.cal-popup .cal-month-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0;
  color: var(--v2-paper);
}

.cal-popup .cal-grid {
  gap: 2px;
}

.cal-popup .cal-weekday {
  padding: 4px 0 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--v2-muted);
}

/* Day colours live in custom properties so the page's own (ungated, higher
   specificity) hover rule can be pinned to them and never stick after a tap. */
.cal-popup .cal-day {
  --v2-day-fill: transparent;
  --v2-day-line: transparent;
  --v2-day-text: var(--v2-paper-dim);
  height: 44px;
  line-height: 42px;
  border: 1px solid var(--v2-day-line);
  border-radius: 10px;
  background: var(--v2-day-fill);
  color: var(--v2-day-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  transform: none;
  transition: background-color var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}

.cal-popup .cal-day:hover:not(.empty):not(.past) {
  background: var(--v2-day-fill);
  border-color: var(--v2-day-line);
  color: var(--v2-day-text);
  transform: none;
}

@media (hover: hover) {
  .cal-popup .cal-day:not(.selected):hover {
    --v2-day-fill: var(--v2-ink-raise);
    --v2-day-line: var(--v2-gold-a45);
    --v2-day-text: var(--v2-paper);
  }
}

.cal-popup .cal-day.today {
  --v2-day-text: var(--v2-gold);
  font-weight: 600;
}

.cal-popup .cal-day.today::after {
  bottom: 6px;
  background: var(--v2-gold);
}

.cal-popup .cal-day.selected {
  --v2-day-fill: var(--v2-gold);
  --v2-day-line: var(--v2-gold);
  --v2-day-text: var(--v2-ink);
  font-weight: 700;
}

.cal-popup .cal-day.past {
  --v2-day-text: var(--v2-muted);
  opacity: 0.4;
}

/* =============================================================== seat map */

/* The fixture head, the stadium frame and the picked line read as one sheet
   of paper inside the ink card. Nothing here reaches inside the frame. */
.step .map-cats {
  max-width: 100%;
  gap: 16px;
}

.step .map-cat-block {
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: 16px;
  background: var(--v2-paper-map);
  color: var(--v2-ink);
}

.step .map-cat-head {
  padding: 14px 16px 12px;
  background: var(--v2-paper-map);
  border-bottom: 1px solid var(--v2-paper-line);
  color: var(--v2-ink);
}

.step .map-cat-head .mr-vs {
  color: var(--v2-gold-ink);
}

.step .map-cat-where {
  color: var(--v2-paper-muted);
  font-size: 0.8125rem;
}

/* The frame keeps its height (fitFrame sets it inline); its slack at the
   bottom shows the embedded page's dark body. The picked line is drawn over
   exactly that slack, measured per frame by design-v2.js (--v2-slack), with
   24px as the no-script fallback. */
.step .map-cat-picked {
  position: relative;
  margin-top: calc(-1 * var(--v2-slack, 24px));
  padding: 12px 16px;
  background: var(--v2-paper-map);
  border-top: 1px solid var(--v2-paper-line);
  color: var(--v2-paper-muted);
  font-size: 0.875rem;
}

.step .map-cat-picked.has {
  color: var(--v2-gold-ink);
  font-weight: 600;
}

.step .map-cat-none {
  color: var(--v2-muted);
}

/* ======================================================= summary: printed */

/* The request, printed on the paper band - the same paper as the ticket. */
.step .summary-card {
  max-width: var(--v2-measure);
  margin: 4px 0 0;
  padding: 6px 20px;
  background: var(--v2-paper-band);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  color: var(--v2-ink);
  text-align: start;
}

.summary-card .summary-row {
  display: grid;
  grid-template-columns: minmax(6rem, 32%) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 0;
  background-image: radial-gradient(circle, var(--v2-paper-rule) 0.9px, transparent 1.2px);
  background-size: 5px 2px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  font-size: 1rem;
}

.summary-card .summary-row:last-child {
  background-image: none;
}

.summary-card .summary-label {
  color: var(--v2-paper-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.summary-card .summary-value {
  color: var(--v2-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* dir="auto" stays on each value (a phone number must not reverse); the
   alignment follows the page, so digits line up with the words above them */
html[dir="rtl"] .summary-card .summary-value { text-align: right; }
html[dir="ltr"] .summary-card .summary-value { text-align: left; }

.step[data-step="9"] > .btn-back {
  margin-top: 14px !important;
}

.step[data-step="9"] > .btn-email,
.step[data-step="9"] > .btn-submit,
.step[data-step="9"] > .submit-error {
  flex: 0 0 100%;
  max-width: var(--v2-measure);
}

/* the request CTA: the page's one gold gradient */
.step .btn-email,
.step .btn-email:hover {
  justify-content: center;
  min-height: 56px;
  margin-top: 18px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--v2-r-pill);
  background: var(--v2-cta-fill);
  color: var(--v2-ink);
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: filter var(--v2-fast) var(--v2-ease);
}

.step .btn-email::before {
  display: none;
}

@media (hover: hover) {
  .step .btn-email:hover {
    filter: brightness(1.06);
  }
}

.step .btn-email:active {
  transform: translateY(1px);
}

/* in flight: form.js sets pointer-events none while it sends */
.step .btn-email[style*="pointer-events: none"] {
  cursor: progress;
  opacity: 0.85;
}

.step .btn-email.sent {
  background: var(--v2-ink-card);
  color: var(--v2-gold);
  box-shadow: inset 0 0 0 1px var(--v2-gold);
}

/* WhatsApp: a hairline pill with the green glyph; the gold request leads */
.step .btn-submit,
.step .btn-submit:hover {
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--v2-wa-a55);
  border-radius: var(--v2-r-pill);
  background: transparent;
  color: var(--v2-paper);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  transition: background-color var(--v2-fast) var(--v2-ease), border-color var(--v2-fast) var(--v2-ease);
}

.step .btn-submit::before {
  display: none;
}

@media (hover: hover) {
  .step .btn-submit:hover {
    background: var(--v2-wa-a12);
    border-color: var(--v2-wa);
  }
}

.step .btn-submit:active {
  transform: translateY(1px);
}

.step .btn-submit svg {
  width: 20px;
  height: 20px;
  color: var(--v2-wa);
}

.step .submit-error {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--v2-error);
  border-radius: var(--v2-r-ctl);
  background: var(--v2-error-a10);
  text-align: start;
}

.step .submit-error strong {
  color: var(--v2-error);
}

.step .submit-error span {
  color: var(--v2-paper-dim);
  font-weight: 400;
}

.step .submit-error .wa-fallback-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  background: var(--v2-wa);
  color: var(--v2-ink);
  box-shadow: none;
  font-weight: 600;
}

.step .submit-error .wa-fallback-phone {
  color: var(--v2-paper);
}

.step .restart-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--v2-ink-line);
  text-align: start;
}

#restartText,
#successRestartText {
  margin-bottom: 12px;
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  color: var(--v2-paper) !important;
}

html[lang="ar"] #restartText,
html[lang="ar"] #successRestartText {
  font-weight: 700 !important;
}

/* an empty line leaves no stray gap above "send another request" */
.restart-text:empty {
  display: none;
}

.step .btn-restart,
.step .btn-restart:hover {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--v2-ink-line-strong);
  border-radius: var(--v2-r-pill);
  background: transparent;
  color: var(--v2-paper);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transform: none;
  transition: border-color var(--v2-fast) var(--v2-ease);
}

@media (hover: hover) {
  .step .btn-restart:hover {
    border-color: var(--v2-gold-a45);
  }
}

.step .btn-restart:active {
  transform: translateY(1px);
}

/* ================================================================ success */

.step .success-screen {
  padding: 4px 0 0;
  text-align: start;
}

.success-screen .success-icon {
  width: 64px;
  height: 64px;
  margin: 0 0 18px;
  border: 1.5px solid var(--v2-gold);
  background: transparent;
  color: var(--v2-gold);
  font-size: 1.75rem;
  box-shadow: inset 0 0 0 4px var(--v2-ink-soft), inset 0 0 0 5px var(--v2-gold-a45);
  animation: none;
}

.success-screen h2,
.step .success-screen h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--v2-paper);
  background: none;
  -webkit-text-fill-color: currentColor;
  overflow-wrap: anywhere;
}

html[lang="ar"] .success-screen h2 {
  font-weight: 800;
  line-height: 1.4;
}

.success-screen p,
.step .success-screen p {
  max-width: 52ch;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--v2-paper-dim);
}

#successEmoji {
  display: none;
}

.success-screen a.btn-back {
  display: inline-flex !important;
  align-items: center;
  min-height: 48px;
  margin-top: 16px !important;
}

/* The issued ticket (desk): on success every segment is gold and the counter
   wears a double stamp ring. A state, not an animation. The phone band has
   no room for a ring beside its line of answers, so it only turns gold. */
@media (min-width: 1024px) {
  html[data-v2-ledger]:not([data-v2-fold]) .v2-ledger[data-success] .v2-count__cur {
    display: inline-grid;
    place-items: center;
    min-width: 1.5em;
    height: 1.5em;
    margin: 3px;
    border: 1.5px solid var(--v2-gold-ink);
    border-radius: 50%;
    outline: 1px solid var(--v2-gold-ink);
    outline-offset: 2px;
    font-size: 1.625rem;
  }
}

/* ============================================================= float pair */

.float-bar .wa-float,
.float-bar .wa-float:hover {
  background: var(--v2-wa);
  color: var(--v2-ink);
  box-shadow: none;
  transform: none;
}

/* Opaque ink instead of a second blur layer. Trap: the blur was also what
   lifted this pill above the fixed .bg-scene in the static phone row (a
   backdrop-filter paints like a positioned layer). Without it, a z-index on
   the flex item does the same job - as the WhatsApp pill's own z-index does. */
.float-bar .site-float,
.float-bar .site-float:hover {
  z-index: 1;
  color: var(--v2-gold);
  background: var(--v2-ink-90);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--v2-gold-a45);
  box-shadow: none;
  transform: none;
}

@media (hover: hover) {
  .float-bar .site-float:hover {
    border-color: var(--v2-gold);
  }
}

@media (max-width: 640px), (pointer: coarse) {
  .float-bar .wa-float,
  .float-bar .site-float {
    min-height: var(--v2-pill-h);
    box-shadow: none;
  }
}

/* The summary and success screens: design-v2.js marks the bar when its
   resting box is level with a request button over the card. Same exit as
   form.js's own .is-yielding, and the bar stays centred for its maths. */
@media (min-width: 641px) and (pointer: fine), (min-width: 641px) and (pointer: none) {
  .float-bar[data-v2-yield]:not(.is-yielding) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px);
  }
}

/* =============================================== progress without the ticket */

/* Only seen if design-v2.js never ran: the old bar in the site palette. */
.progress-segment {
  height: 6px;
  background: var(--v2-ink-line-strong);
  box-shadow: none;
}

html[dir] .progress-segment.active {
  background: var(--v2-gold);
  box-shadow: none;
}

.progress-segment.active::after {
  display: none;
  animation: none;
}

.step-counter {
  color: var(--v2-muted);
}

.step-counter span {
  color: var(--v2-gold);
}

/* =================================================================== tablet */

@media (min-width: 641px) {
  :root {
    --v2-gutter: 24px;
    --v2-card-pad-block: 30px;
    --v2-card-pad-inline: 28px;
  }

  .form-container {
    max-width: 680px;
  }

  .form-container .form-header {
    column-gap: 16px;
    padding: 18px 0 20px;
    padding-inline-end: 150px;
  }

  .form-container .form-header img {
    height: 44px;
  }

  .form-container .form-header h1 {
    flex: 0 1 auto;
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--v2-ink-line-strong);
    font-size: 1.75rem;
  }

  .form-container .lang-menu {
    top: 24px;
  }

  .step .question-label {
    font-size: 2rem;
    line-height: 1.15;
  }

  .step .question-sub {
    font-size: 1rem;
    margin-bottom: 22px;
  }

  /* one blur layer, on the card, only where the photo shows through it */
  .step.active {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  body.step-wide .step.active {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-v2-ledger] .how-it-works {
    margin-top: 32px;
  }
}

/* A short laptop (1280x720 and the like): the header gives height back so the
   first question and its answers sit above the fold. */
@media (min-width: 641px) and (max-height: 800px) {
  .form-container .form-header {
    padding-block: 12px 14px;
  }

  .form-container .form-header img {
    height: 38px;
  }

  .form-container .form-header h1 {
    font-size: 1.5rem;
  }

  .form-container .lang-menu {
    top: 16px;
  }

  /* the summary is the tallest card: tighter rows keep the request buttons
     nearer the first screen (html:root outranks the desk block's :root) */
  html:root {
    --v2-card-pad-block: 28px;
  }

  .summary-card .summary-row {
    padding-block: 8px;
  }

  .step[data-step="9"] > .btn-email {
    margin-top: 14px;
  }
}

/* ===================================================== desk: the workbench */

@media (min-width: 1024px) {
  :root {
    --v2-gutter: 32px;
    --v2-card-pad-block: 36px;
    --v2-card-pad-inline: 40px;
  }

  /* working surface at inline-start (where the eye starts in either
     direction), the ticket and "how it works" at inline-end */
  html[data-v2-ledger] .form-container,
  html[data-v2-ledger] body.step-wide .form-container {
    max-width: 1160px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "head head"
      "work ledger"
      "work hiw"
      "work rest";
    column-gap: 48px;
    align-items: start;
    align-content: start;
  }

  /* The frame's own two-column layout needs the width it has today
     (1160 - 2 x 20 - 2 x 22 - 2): keep exactly that on the map step. */
  html[data-v2-ledger] body.step-wide {
    --v2-gutter: 20px;
    --v2-card-pad-inline: 22px;
  }

  html[data-v2-ledger] body.step-wide .form-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "head"
      "ledger"
      "work"
      "hiw";
  }

  html[data-v2-ledger] .form-container .form-header,
  html[data-v2-ledger] body.step-wide .form-container .form-header {
    grid-area: head;
    max-width: none;
    margin: 0;
    padding: 26px 0 26px;
    padding-inline-end: 180px;
  }

  html[data-v2-ledger] .form-container .form-header img {
    height: 48px;
  }

  html[data-v2-ledger] .form-container .form-header h1 {
    font-size: 1.875rem;
    line-height: 1.1;
  }

  html[data-v2-ledger] .form-container .lang-menu {
    top: 28px;
  }

  html[data-v2-ledger] .v2-ledger {
    grid-area: ledger;
    margin: 0 0 32px;
  }

  html[data-v2-ledger] .form-container .how-it-works,
  html[data-v2-ledger][data-v2-step="1"] .form-container .how-it-works,
  html[data-v2-ledger] body.step-wide .form-container .how-it-works {
    grid-area: hiw;
    max-width: none;
    margin: 4px 0 0;
    padding-inline: 4px;
  }

  html[data-v2-ledger] body.step-wide .form-container .how-it-works {
    max-width: var(--v2-measure);
    margin: 36px 0 0;
  }

  html[data-v2-ledger] .form-container .steps-viewport {
    grid-area: work;
  }

  .step .question-label {
    font-size: 2.25rem;
    line-height: 1.12;
  }

  .step .question-sub {
    font-size: 1.0625rem;
    margin-bottom: 26px;
  }

  .step .choice-card {
    min-height: 150px;
    padding: 22px;
  }

  .step .choice-title,
  .step .choice-card.selected .choice-title {
    font-size: 1.5rem;
  }

  .step[data-step="1"] .choice-card {
    --v2-stub: 92px;
    min-height: 104px;
  }

  .step[data-step="1"] .choice-card .choice-icon {
    inset-inline-start: calc(var(--v2-stub) / 2 - 21px);
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }

  .step[data-step="1"] .choice-title,
  .step[data-step="1"] .choice-card.selected .choice-title {
    font-size: 1.75rem;
  }

  .step .btn-next {
    min-height: 54px;
    padding: 0 28px;
    font-size: 1.125rem;
  }

  .step .btn-back {
    min-height: 54px;
    padding: 0 22px;
  }

  /* the full ticket: title, printed rows, notched perforation, tear-off band */
  html[data-v2-ledger]:not([data-v2-fold]) .v2-ticket {
    --v2-tear: 84px;
    --v2-notch: 11px;
    border-radius: 16px;
    -webkit-mask:
      radial-gradient(circle at 0 calc(100% - var(--v2-tear)), transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% calc(100% - var(--v2-tear)), transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle at 0 calc(100% - var(--v2-tear)), transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% calc(100% - var(--v2-tear)), transparent var(--v2-notch), var(--v2-mask) calc(var(--v2-notch) + 0.5px)) right / 51% 100% no-repeat;
  }

  html[data-v2-ledger]:not([data-v2-fold]) .v2-ticket__body {
    display: block;
    padding: 20px 24px 12px;
  }

  html[data-v2-ledger]:not([data-v2-fold]) .v2-ticket__tear {
    height: var(--v2-tear);
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "count segs";
    column-gap: 22px;
    padding: 0 24px;
  }

  html[data-v2-ledger]:not([data-v2-fold]) .v2-ticket__tear::before {
    top: 0;
    bottom: auto;
    inset-inline-start: 18px;
    inset-inline-end: 18px;
    width: auto;
    height: 2px;
    background-size: 7px 2px;
    background-repeat: repeat-x;
  }

  html[data-v2-ledger]:not([data-v2-fold]) .v2-trail {
    display: none;
  }

  html[data-v2-ledger]:not([data-v2-fold]) .v2-count__cur {
    font-size: 2.5rem;
  }

  /* step 7: the band sits above the stadium, at the measure */
  html[data-v2-ledger] body.step-wide .v2-ledger {
    max-width: var(--v2-measure);
    margin: 0 0 16px;
  }
}

/* ============================================= phones: the step comes first */

@media (max-width: 640px) {
  /* The language pill joins the static float row above the header (its
     inline-start end; the pair sits at inline-end), which gives the header
     its whole row. It is placed from the top of .form-container, which starts
     right under that row: one pill height up. */
  .form-container .lang-menu {
    top: calc(-1 * var(--v2-pill-h));
    inset-inline-start: 14px;
    inset-inline-end: auto;
  }

  .lang-menu > .lang-switch {
    padding: 0 12px;
  }

  .lang-menu .lang-list {
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

  .step .choice-card {
    min-height: 116px;
    padding: 16px;
  }

  .step .choice-card::after {
    top: 14px;
    inset-inline-end: 14px;
  }

  .step .choice-title,
  .step .choice-card.selected .choice-title {
    font-size: 1.25rem;
  }

  .step[data-step="1"] .choice-card {
    --v2-stub: 68px;
    min-height: 76px;
    padding-inline: calc(var(--v2-stub) + 18px) 16px;
  }

  .step[data-step="1"] .choice-card .choice-icon {
    inset-inline-start: calc(var(--v2-stub) / 2 - 16px);
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }

  .step .btn-next {
    flex: 1 1 auto;
    justify-content: center;
    max-width: 280px;
  }

  .step[data-step="5"] .pill {
    min-height: 58px;
  }

  .step .summary-card {
    padding: 4px 16px;
  }

  .step .summary-card .summary-row {
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 0;
    font-size: 0.9375rem;
  }

  .date-picker-wrap .cal-popup {
    margin-inline: -8px;
    padding: 8px 6px;
  }

  .date-picker-wrap .cal-popup .cal-grid {
    gap: 0;
  }

  .success-screen .success-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .step .success-screen h2 {
    font-size: 1.5rem;
  }
}

/* Arabic on the narrowest phones: its three float-row labels are the longest
   and would reach the language pill, so the pill goes back to the header row
   (end of the row, the header keeps room for it). */
@media (max-width: 374px) {
  html[lang="ar"] .form-container .lang-menu {
    top: 10px;
    inset-inline-start: auto;
    inset-inline-end: var(--v2-gutter);
  }

  html[lang="ar"] .lang-menu .lang-list {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  html[lang="ar"] .form-container .form-header {
    padding-inline-end: 96px;
  }
}

/* category plates: one column where two would wrap their labels */
@media (max-width: 480px) {
  .step #categoryPills {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (max-width: 400px) {
  :root {
    --v2-gutter: 12px;
    --v2-card-pad-inline: 14px;
  }

  .step .question-label {
    font-size: 1.375rem;
  }

  .form-container .form-header h1 {
    font-size: 1.25rem;
  }

  .form-container .form-header img {
    height: 30px;
  }

  .v2-ticket {
    --v2-perf: 80px;
  }

  .v2-ticket__tear {
    column-gap: 22px;
    padding: 9px 14px;
  }

  .v2-count__cur {
    font-size: 1.625rem;
  }

  .step[data-step="5"] .pill {
    min-height: 56px;
    font-size: 1.5rem;
  }
}

/* The narrowest phones: the summary stacks label over value, so a long match
   or category is not squeezed into a sliver. */
@media (max-width: 359px) {
  .step .summary-card .summary-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .step[data-step="1"] .choice-title,
  .step[data-step="1"] .choice-card.selected .choice-title {
    font-size: 1.25rem;
  }

  /* the float row at 320: in English the language pill met the pair with a
     1px gap; slimmer pills give the row air (targets stay 44px tall) */
  .float-bar .wa-float,
  .float-bar .site-float {
    padding-inline: 12px;
  }

  .lang-menu > .lang-switch {
    padding: 0 10px;
  }
}

/* ================================================================== motion */

@media (prefers-reduced-motion: reduce) {
  .step,
  .step *,
  .v2-ledger *,
  .float-bar,
  .float-bar *,
  .lang-switch {
    transition: none !important;
  }

  .v2-row[data-fresh] {
    opacity: 1;
  }

  /* form.js draws the in-flight spinner with an inline endless rotation;
     reduced motion stops it (the "sending" label and busy style remain) */
  .step .btn-email svg {
    animation: none !important;
  }

  .float-bar[data-v2-yield]:not(.is-yielding) {
    transform: translate(-50%, 0);
  }

  .form-container::before {
    display: none;
  }
}