.tr2-flow {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-200: #eae7e7;

  --color-accent: #1d8bbb;
  --color-accent-100: #e4f1f8;
  --color-accent-200: #c3e0ee;
  --color-accent-600: #1a7ba6;
  --color-accent-700: #166384;
  --color-accent-800: #124e68;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

.tr2-flow *,
.tr2-flow *::before,
.tr2-flow *::after {
  box-sizing: border-box;
}

.tr2-flow :focus {
  outline: none;
}

.tr2-flow :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tr2-flow ::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.tr2-flow a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

.tr2-flow a:hover {
  color: var(--color-accent-600);
}

.tr2-flow img {
  display: block;
  max-width: 100%;
}

/* — buttons — */
.tr2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
}

.tr2-btn svg {
  display: block;
}

.tr2-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tr2-btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.tr2-btn-primary:hover:not(:disabled) {
  background: var(--color-accent-600);
}

.tr2-btn-primary:active:not(:disabled) {
  background: var(--color-accent-700);
}

.tr2-btn-secondary {
  border-color: var(--color-divider);
}

.tr2-btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

/* — forms — */
.tr2-field>label {
  display: block;
  /* font-weight reset: the site's Bootstrap bolds every label to 700, but the design
       wants a light field label. */
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Inline validation note under a field, e.g. an incomplete postcode. Shares the error red
     the submit message uses. */
.tr2-field-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #dd2b0f;
}

.tr2-input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none;
}

.tr2-input:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.tr2-input:focus,
.tr2-input:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}

.tr2-flow textarea.tr2-input {
  min-height: 90px;
  resize: vertical;
}

.tr2-hr {
  height: 2px;
  border: 0;
  margin: 16px 0;
  background: var(--color-divider);
}

/* — selection state — */
.tr2-flow .is-hidden {
  display: none !important;
}

/* — small caps section label — */
.tr2-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 40px 0 14px;
}

/* — ride type cards — */
.tr2-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* A label wrapping a radio, not the wireframe's button: the choice is a real form
     control (deliveryOption), so it posts and is reachable by keyboard on its own. */
.tr2-mode {
  position: relative;
  display: block;
  overflow: hidden;
  height: 200px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-color: var(--color-text);
  background-size: cover;
  background-position: center;
  /* Unselected tiles sit back: dimmed. They lift forward on hover, see below. */
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* The selection border is an overlay ring rather than a real border, so the scrim can
     cover the full tile (a transparent border would let the image show through its strip)
     and switching selection never shifts the card. 6px at both states, colour only on
     selection, so the ring appears without changing anything's size. */
.tr2-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 6px solid transparent;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.tr2-mode.is-selected {
  opacity: 1;
}

.tr2-mode.is-selected::after {
  border-color: var(--color-accent);
}

/* Hover on an unselected tile brings it to full brightness, nudges it forward with a
     gentle zoom and previews the selection ring in a paler accent. Selected tiles are
     excluded so the interaction only invites the choices not yet made. */
.tr2-mode:not(.is-selected):hover {
  opacity: 1;
  transform: scale(1.02);
}

.tr2-mode:not(.is-selected):hover::after {
  border-color: var(--color-accent-200);
}

.tr2-mode input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tr2-mode:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Disabled card: the home option on a home-only page whose postcode the van cannot reach.
     Dimmed, greyed and inert, with the hover lift and ring suppressed so it reads as
     unavailable rather than a choice still on the table. Placed after the hover rules so it
     wins at equal specificity. */
.tr2-mode.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.tr2-mode.is-disabled:hover {
  opacity: 0.45;
  transform: none;
}

.tr2-mode.is-disabled:hover::after {
  border-color: transparent;
}

.tr2-mode-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
}

.tr2-mode-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Selected badge, pinned to the top-right corner (opposite the kicker). Absolutely
     positioned so it sits in the corner without taking a row in the foot block; the 22px
     offsets match the inner padding so it lines up with the kicker across the top. */
.tr2-mode-badge {
  display: none;
  position: absolute;
  top: 22px;
  right: 22px;
  align-items: center;
  gap: 6px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 9px 5px 7px;
}

.tr2-mode.is-selected .tr2-mode-badge {
  display: inline-flex;
}

.tr2-mode-badge svg {
  width: 13px;
  height: 13px;
}

/* Coverage note, sitting in the foot just above the title (it swapped places with the
     kicker, which is now pinned to the top). align-self keeps the pill hugging its content
     at the left edge rather than stretching. Inked rather than accent so it cannot be
     mistaken for the Selected badge above it. */
.tr2-mode-note {
  align-self: flex-start;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
}

/* Kicker, pinned to the top-left of the card. As the first item in the bottom-aligned
     inner column, margin-bottom:auto swallows the free space and lifts it to the top while
     the badge, note, title and description stay at the foot; align-self hugs the left edge.
     The scrim fades to transparent at the top, so a text-shadow keeps it legible and gives
     it more presence over the un-darkened background image. */
.tr2-mode-kicker {
  align-self: flex-start;
  margin: 0 0 auto;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* On the chosen tile the kicker gains a light frosted pill (translucent white fill and
     border) so it reads as active. Kept translucent so the white text stays legible. */
.tr2-mode.is-selected .tr2-mode-kicker {
  padding: 5px 9px;
  background: var(--color-accent);
  border: 4px solid var(--color-accent);
}

.tr2-mode-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.05;
  color: #fff;
  margin: 8px 0 0;
}

.tr2-mode-desc {
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  opacity: 0.9;
  margin: 8px 0 0;
  max-width: 300px;
}

/* Home-only fallback switch, sitting under the postcode warning in Your details. The
     warning above it carries the explanation, so this just spaces the two cards from it. */
.tr2-home-switch {
  margin-top: 16px;
}

/* — postcode checker — */
.tr2-pc {
  border: 2px solid var(--color-text);
  margin-top: 16px;
  padding: 20px 22px;
}

.tr2-pc-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 4px;
}

.tr2-pc-sub {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 16px;
}

.tr2-pc-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.tr2-pc-row .tr2-field {
  flex: 1;
  min-width: 180px;
  margin: 0;
}

.tr2-pc-row .tr2-btn {
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
}

.tr2-pc-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14px;
}

.tr2-pc-result svg {
  flex: none;
  margin-top: 1px;
}

.tr2-pc-result--ok {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border: 2px solid var(--color-accent);
}

/* Reddish for a postcode the van cannot serve (or a check that failed), sharing the error
     palette the submit message and field notes use. */
.tr2-pc-result--no {
  background: #fdecea;
  color: var(--color-text);
  border: 2px solid #dd2b0f;
}

/* — stepper — */
.tr2-stepper {
  display: flex;
  gap: 12px;
  margin: 36px 0 0;
}

.tr2-step-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 14px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
}

/* Active is marked by the accent border, not an inverted fill. The 1px-to-2px change is
     absorbed by border-box, so the card does not jump between states. */
.tr2-step-btn.is-active {
  background: var(--color-neutral-200);
  border: 2px solid var(--color-accent);
}

.tr2-step-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.tr2-step-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  opacity: 0.55;
}

.tr2-step-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
}

/* — main / aside — */
.tr2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}

.tr2-step-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.tr2-step-sub {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 24px;
}

/* — bike picker — */
.tr2-bikes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.tr2-bike {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--color-surface);
  /* Rounded to 14px, the card radius the wireframe uses across the bike, how-it-works
       and stepper cards alike. */
  border-radius: 14px;
  border: 2px solid var(--color-divider);
  transition: border-color 0.12s;
  font-weight: 400;
}

.tr2-bike.is-selected {
  border-color: var(--color-accent);
}

/* Locked to the one bike on a bike page: shown ticked, but not clickable. */
.tr2-bike--locked {
  pointer-events: none;
}

.tr2-bike input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tr2-bike:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tr2-bike-media {
  display: block;
  position: relative;
  height: 132px;
  background: #fff;
}

.tr2-bike-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tr2-bike-tick {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: var(--color-bg);
  align-items: center;
  justify-content: center;
}

.tr2-bike.is-selected .tr2-bike-tick {
  display: flex;
}

.tr2-bike-body {
  display: block;
  padding: 12px 12px 14px;
}

.tr2-bike-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
}

.tr2-bike-type {
  display: block;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 3px 0 10px;
}

.tr2-bike-rule {
  display: block;
  height: 1px;
  background: var(--color-divider);
  margin-bottom: 10px;
}

.tr2-bike-prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.tr2-bike-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
}

.tr2-bike-was {
  font-size: 12px;
  text-decoration: line-through;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* — not sure — */
.tr2-notsure {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 16px 0 0;
  padding: 16px 18px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-divider);
}

.tr2-notsure.is-selected {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-color: var(--color-accent);
}

.tr2-notsure input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tr2-notsure svg {
  flex: none;
}

.tr2-notsure-sub {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: 0.7;
}

/* — details — */
.tr2-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Full address, revealed under the details grid once a postcode is entered. */
.tr2-address {
  margin-top: 20px;
}

/* The address lines run the full width even where the details grid splits into two
     columns; town and county keep to a single cell each and pair up on the wider layout. */
.tr2-field--full {
  grid-column: 1 / -1;
}

.tr2-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.tr2-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tr2-check .tr2-box {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid var(--color-divider);
}

.tr2-check:hover .tr2-box {
  border-color: var(--color-accent);
}

.tr2-check input:checked+.tr2-box {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}

.tr2-check input:focus-visible+.tr2-box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Home coverage warning, under the postcode field. Reddish, matching the checker's "not
     covered" result: it only appears when the postcode falls outside the van's area, so it
     shares the same error palette as the rest of the form's invalid states. */
.tr2-postcode-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  background: #fdecea;
  color: var(--color-text);
  border: 2px solid #dd2b0f;
}

.tr2-postcode-warning svg {
  flex: none;
  margin-top: 1px;
}

/* Photo ID notice. Shown for a home ride only: that is the only case where a driver
     turns up on a doorstep, so a dealer ride has nothing to warn about. render() owns the
     toggle. */
.tr2-id-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--color-neutral-200);
  border: 2px solid var(--color-divider);
}

.tr2-id-notice svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-accent);
}

.tr2-id-notice-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  margin: 0 0 3px;
}

.tr2-id-notice-text {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin: 0;
}

.tr2-legal {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 20px 0 0;
  max-width: 520px;
}

/* — date & time — */
.tr2-datetime {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.tr2-cal {
  border: 1px solid var(--color-divider);
  padding: 16px;
}

.tr2-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tr2-cal-nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  color: var(--color-text);
}

.tr2-cal-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.tr2-cal-month {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
}

.tr2-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.tr2-cal-dow span {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-weight: 600;
  padding: 4px 0;
}

.tr2-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.tr2-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  cursor: pointer;
  padding: 0;
}

.tr2-cal-day:disabled {
  color: color-mix(in srgb, var(--color-text) 25%, transparent);
  border-color: transparent;
  cursor: default;
}

.tr2-cal-day.is-selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.tr2-cal-day.is-empty {
  visibility: hidden;
}

.tr2-slots-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-bottom: 10px;
}

.tr2-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.tr2-slot {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
}

.tr2-slot.is-selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* Booked out: a home test ride already on the van's calendar sits within three hours of
     this slot, so it cannot be picked. */
.tr2-slot.is-unavailable {
  color: color-mix(in srgb, var(--color-text) 25%, transparent);
  border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
  cursor: default;
  text-decoration: line-through;
}

/* — summary aside — */
.tr2-aside {
  border: 2px solid var(--color-text);
}

.tr2-aside-head {
  padding: 18px 20px;
  border-bottom: 2px solid var(--color-text);
  background: var(--color-text);
}

.tr2-aside-head span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--color-bg);
}

.tr2-aside-body {
  padding: 20px;
  background: var(--color-accent-100);
}

.tr2-aside-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 600;
  margin: 0 0 10px;
}

/* Ride type value, sitting under its label like the bike rows do. */
.tr2-aside-type {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
}

.tr2-aside-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.tr2-aside-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tr2-aside-row strong {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
}

.tr2-aside-row span {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.tr2-aside-empty {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  margin-bottom: 8px;
}

.tr2-aside-when {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.tr2-aside-when+.tr2-aside-when {
  margin-top: 8px;
}

.tr2-aside-when svg {
  opacity: 0.5;
  flex: none;
}

.tr2-aside-dealer {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0;
}

.tr2-aside-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.tr2-aside-actions .tr2-btn-primary {
  width: 100%;
  justify-content: space-between;
  font-size: 15px;
  padding: 12px 16px;
}

.tr2-aside-actions .tr2-btn-secondary {
  width: 100%;
  justify-content: center;
}

.tr2-aside-note {
  font-size: 11px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: 16px 0 0;
}

/* Mobile: once the current step is valid, the primary button lifts out of the aside to a
     fixed bar at the foot of the screen, so it is always in reach rather than down past a
     long panel. Keyed on :not(:disabled) — the script already sets that from canProceed() —
     so a step not yet valid, or a submit in flight, leaves the button in the aside. The aside
     comes back into normal reach at the tablet breakpoint, where the button sits back in it. */
#tr2-next:not(:disabled) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: auto;
  justify-content: center;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* Room at the foot so the fixed bar never covers the last of the content (the aside note,
     the captcha). Matches only while a valid step has lifted the button out. */
.tr2-flow:has(#tr2-next:not(:disabled)) {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* Docked. Scrolling down as far as the aside note puts the foot of the panel on screen, so the
     bar has nothing left to keep in reach and js/test-ride-appointment.js hands the button back
     to its place above the note; scrolling back up lifts it out again. Same reset the tablet
     breakpoint applies for good. The foot padding above is deliberately left in place, so
     docking only ever grows the page rather than pulling it from under a scroll at the bottom. */
.tr2-flow.is-cta-docked #tr2-next:not(:disabled) {
  position: static;
  width: 100%;
  justify-content: space-between;
  padding: 12px 16px;
  box-shadow: none;
}

/* The reCAPTCHA iframe is a fixed 304px and the aside's content box is 300px at the
     artboard width, so it is nudged down to fit rather than allowed to spill. */
.tr2-captcha {
  margin-top: 20px;
  transform: scale(0.97);
  transform-origin: 0 0;
  height: 76px;
}

/* — confirmation — */
.tr2-done {
  max-width: 640px;
  margin: 48px 0;
}

.tr2-done-icon {
  width: 64px;
  height: 64px;
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.tr2-done-icon svg {
  width: 34px;
  height: 34px;
}

.tr2-done-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.tr2-done-lede {
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  margin: 0 0 32px;
}

.tr2-done-card {
  border: 2px solid var(--color-text);
}

.tr2-done-grid {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px 20px;
  font-size: 15px;
}

.tr2-done-grid dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-weight: 400;
  padding-top: 2px;
}

.tr2-done-grid dd {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
}

.tr2-done-grid dd.tr2-done-plain {
  font-family: var(--font-body);
  font-weight: 400;
}

.tr2-done-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.tr2-done-actions span {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

@media (min-width: 768px) {
  .tr2-modes {
    grid-template-columns: 1fr 1fr;
  }

  /* Drop the fixed CTA: the button sits back in the aside as normal. */
  #tr2-next:not(:disabled) {
    position: static;
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    box-shadow: none;
  }

  .tr2-flow:has(#tr2-next:not(:disabled)) {
    padding-bottom: 0;
  }

  .tr2-mode {
    height: 270px;
  }

  .tr2-mode-title {
    font-size: 27px;
  }

  .tr2-step-btn {
    padding: 18px 22px;
  }

  .tr2-step-label {
    font-size: 16px;
  }

  .tr2-step-title {
    font-size: 28px;
  }

  .tr2-bikes {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .tr2-details {
    grid-template-columns: 1fr 1fr;
  }

  .tr2-done-title {
    font-size: 44px;
  }

  .tr2-done-lede {
    font-size: 17px;
  }

  .tr2-done-grid {
    grid-template-columns: 120px 1fr;
  }
}

@media (min-width: 991px) {
  .tr2-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    margin-top: 40px;
  }

  .tr2-aside {
    position: sticky;
    top: 24px;
  }

  .tr2-cal {
    padding: 20px;
  }

  .tr2-datetime {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 40px;
  }

  .tr2-slots {
    grid-template-columns: 1fr;
  }

  /* Tiles have more room at this width, so their text steps up ~15% from the size in
     effect below it (the title from its 768px 27px step). */
  .tr2-mode-badge,
  .tr2-mode-note {
    font-size: 11.5px;
  }

  .tr2-mode-kicker,
  .tr2-mode-desc {
    font-size: 16.1px;
  }

  .tr2-mode-title {
    font-size: 31px;
  }
}

/* Keep the tile's brighten and ring, but drop the zoom for anyone who prefers less
     motion. */
@media (prefers-reduced-motion: reduce) {
  .tr2-mode {
    transition-property: opacity;
  }

  .tr2-mode:not(.is-selected):hover {
    transform: none;
  }
}