/* ═══════════════════════════════════════════════════════════════════════
   reserve.css — /reserve/ only.

   Every colour, radius, shadow and spacing value here comes from the token
   layer in bloom.css. The two decorative tints that are not tokens — blush
   rgba(232,180,184) and the pale blue — are the two remaining swatches on
   the brand board ("SOFT BLOOM"), and blush is already what .booking::after
   uses on the home page. Neither is ever used as text.

   One family, Heebo, differentiated by weight — the site's own convention.

   THE PAGE HAS ONE IDEA. What a parent is buying is a whole floor, closed,
   for two hours. The photographic head and the framed sheet under it are
   shared furniture now — /entry/ uses them too, so they live in pages.css
   under "SHARED PAGE FURNITURE". What is left here is what only this page
   has: a card that draws the venue as two storeys in bloom — a cherry
   blossom branch over it, a five-petal bloom behind each floor number, the
   upper storey bordered and glowing as "yours", the lower one quieter and
   honestly labelled "open to the public". That card is the only place on
   the page that raises its voice; the rest is a menu card and a form.

   Logical properties throughout (inline-start / block-end), like forms.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── The building ────────────────────────────────────────────────────────
   A section drawing of the venue, at the top of the package section. The
   <ol id="floors"> inside is rendered by reserve.js from the catalogue,
   top storey first, so the drawing cannot say anything the database does
   not. The shell — awning, sign, ground — is static and survives an API
   failure as an empty building rather than a broken one. */

.rv-package-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  margin-block-end: 48px;
}
@media (min-width: 980px) {
  .rv-package-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: clamp(36px, 4vw, 64px);
  }
}
.rv-package-top .rv-section-head { margin-block-end: 0; }

.rv-package-intro { margin-block-start: 18px; }
.rv-package-intro p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(43, 43, 43, 0.76);
}
.rv-package-intro p:last-child { margin-block-end: 0; }

/* ── The building, in bloom ────────────────────────────────────────────
   The two storeys as a card that belongs to a place called Bloom: a cherry
   blossom branch along the top edge (the home page's own drawing — mocha
   branch, sage leaves, blush petals), a five-petal bloom behind each floor
   number, and a leafed stem where the floor plate used to be. The storey
   that is yours alone is the one in flower: blush border, blush glow. */

.house {
  position: relative;
  margin: 0;
  padding: 58px 18px 16px;
  border-radius: 30px;
  background: linear-gradient(168deg, #FCF7F1 0%, #F6EDE3 100%);
  border: 1px solid rgba(140, 90, 54, 0.14);
  box-shadow: var(--shadow-card-hi);
}
/* A breath of blush behind the branch. */
.house::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 45% at 40% 0%, rgba(232, 180, 184, 0.30) 0%, rgba(232, 180, 184, 0) 70%);
}

/* Sized by height so its lowest twig lands exactly on the card's padding
   line (top -26 + 84 = 58 = padding-top) and never over the first storey's
   title. Width follows the drawing's 3.6:1 proportion. */
.house-bloom {
  position: absolute;
  z-index: 2;
  top: -26px;
  left: 5%;
  height: 84px;
  width: auto;
  pointer-events: none;
  overflow: visible;
}
.hb-branch {
  fill: none;
  stroke: var(--mocha);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}
.hb-leaf { fill: var(--sage); opacity: 0.8; }
.hb-petal { fill: #E8B4B8; }
.hb-core { fill: #F4D6D8; }
.hb-bud { fill: #E8B4B8; opacity: 0.85; }

.floors {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.floor {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 20px 18px 20px 20px;
  border-radius: 22px;
  background: rgba(231, 222, 210, 0.42);
  border: 1px solid rgba(140, 90, 54, 0.10);
}

/* A leafed stem between the storeys, where the floor plate was. */
.floor + .floor::before {
  content: '';
  position: absolute;
  inset-block-start: -11px;
  inset-inline: 28px;
  height: 8px;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8'><g fill='%2398A07A' opacity='0.85'><ellipse cx='12' cy='4' rx='9' ry='3' transform='rotate(-12 12 4)'/><ellipse cx='32' cy='4' rx='9' ry='3' transform='rotate(12 32 4)'/></g></svg>") center / auto 8px no-repeat,
    linear-gradient(90deg, rgba(152,160,122,0) 0%, rgba(152,160,122,0.5) 18%, rgba(152,160,122,0.5) 82%, rgba(152,160,122,0) 100%) center / 100% 1px no-repeat;
}

/* The storey that is yours alone, in flower. */
.floor.is-exclusive {
  background: linear-gradient(160deg, #FDF9F4 0%, #F9EFE9 100%);
  border-color: rgba(140, 90, 54, 0.32);
  box-shadow:
    0 0 0 5px rgba(232, 180, 184, 0.22),
    var(--shadow-card);
}

/* Blooming. One orchestrated moment: half a second after the page lands,
   the upper floor warms up. Opacity only; reduced motion gets the lit state. */
.floor.is-exclusive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90% 80% at 50% 0%,
    rgba(232, 180, 184, 0.34) 0%, rgba(232, 180, 184, 0) 70%);
  opacity: 0;
  animation: rv-lights-on 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.5s forwards;
}
@keyframes rv-lights-on { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .floor.is-exclusive::after { animation: none; opacity: 1; }
}

.floor-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

/* The number sits in a five-petal bloom — sage for the shared storey,
   blush for the one that is yours. */
.floor-num {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sage-text);
  font-variant-numeric: tabular-nums;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -32 64 64'><g fill='%23CDD2BF'><circle cx='0' cy='-19' r='13'/><circle cx='18' cy='-6' r='13'/><circle cx='11' cy='16' r='13'/><circle cx='-11' cy='16' r='13'/><circle cx='-18' cy='-6' r='13'/></g><circle r='15' fill='%23FBF7F1'/></svg>") center / 100% 100% no-repeat;
}
.floor.is-exclusive .floor-num {
  color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -32 64 64'><g fill='%23E8B4B8'><circle cx='0' cy='-19' r='13'/><circle cx='18' cy='-6' r='13'/><circle cx='11' cy='16' r='13'/><circle cx='-11' cy='16' r='13'/><circle cx='-18' cy='-6' r='13'/></g><circle r='15' fill='%23FDF9F4'/></svg>");
}

.floor-word {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(43, 43, 43, 0.55);
}

.floor-body { position: relative; z-index: 1; min-width: 0; }

.floor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.floor-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.floor-access {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(152, 160, 122, 0.22);
  color: var(--sage-text);
}
.floor-access::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.floor.is-exclusive .floor-access { background: var(--rose); color: var(--ink); }
.floor.is-exclusive .floor-access::before { opacity: 1; }

.floor-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(43, 43, 43, 0.72);
}

.floor-items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.floor-items li {
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(251, 247, 241, 0.9);
  border: 1px solid rgba(140, 90, 54, 0.14);
  color: rgba(43, 43, 43, 0.85);
}
.floor.is-exclusive .floor-items li { border-color: rgba(232, 180, 184, 0.9); }

.house-ground {
  position: relative;
  z-index: 1;
  margin: 16px 4px 0;
  padding-block-start: 12px;
  border-block-start: 1px dashed rgba(140, 90, 54, 0.22);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(43, 43, 43, 0.6);
}
.house-ground .display-en { letter-spacing: 0.02em; color: var(--sage-text); }

@media (max-width: 560px) {
  .house { padding: 50px 12px 14px; border-radius: 24px; }
  .house-bloom { top: -22px; height: 72px; left: 3%; }
  .floor { grid-template-columns: 58px 1fr; gap: 12px; padding: 16px 14px; }
  .floor-num { width: 52px; height: 52px; font-size: 22px; }
  .floor-title { font-size: 18px; }
}

/* ── Section furniture ─────────────────────────────────────────────────── */

.rv-section-head { max-width: 62ch; margin-block-end: 40px; }
.rv-section-head .eyebrow { color: var(--sage-text); }
.rv-section-head h2 {
  margin: 12px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.rv-section-head p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.72);
}

/* The sections on the sheet carry rhythm only — the ground is the sheet's,
   and the space for the frame's corners is the sheet's first and last
   padding. */
.rv-package {
  padding-block: 0;
  background: transparent;
}

/* ── The package, as a menu card ───────────────────────────────────────
   This is a café. A price column with a dashed fold, a checklist, and
   add-ons with dotted leaders running out to their prices — the one
   layout every parent already knows how to read. */


.menu {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ivory);
  border-radius: 28px;
  border: 1px solid rgba(140, 90, 54, 0.12);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.menu > * { min-width: 0; }

@media (min-width: 900px) {
  .menu { grid-template-columns: 340px minmax(0, 1fr); }
}

.menu-price {
  display: flex;
  flex-direction: column;
  padding: 40px 36px 36px;
  background: var(--cream);
  border-block-end: 1px dashed rgba(140, 90, 54, 0.35);
}
@media (min-width: 900px) {
  .menu-price {
    border-block-end: 0;
    border-inline-end: 1px dashed rgba(140, 90, 54, 0.35);
  }
}

.menu-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sage-text);
}

.price-main {
  margin: 0;
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sage-text);
  font-variant-numeric: tabular-nums;
}

.price-basis {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.price-extra,
.price-tbd {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(43, 43, 43, 0.7);
}

.price-for {
  margin: 18px 0 0;
  padding-block-start: 18px;
  border-block-start: 1px solid rgba(140, 90, 54, 0.12);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.72);
}

.menu-price .btn {
  margin-block-start: 28px;
  align-self: flex-start;
}

.menu-body { padding: 40px 36px 36px; }
@media (max-width: 560px) {
  .menu-price, .menu-body { padding: 28px 22px; }
}

.rv-panel-title {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Two columns of the checklist on a wide screen. Overrides the shared
   .tier-benefits column stack, which was drawn for a narrow pricing tier. */
.menu .tier-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 28px;
  margin-block-end: 0;
}
@media (min-width: 760px) {
  .menu .tier-benefits { grid-template-columns: 1fr 1fr; }
}
.menu .tier-benefits li { font-size: 15px; line-height: 1.6; padding-inline-start: 28px; }
.menu .tier-benefits .tier-yes::before { top: 1px; }

.rv-addons-title {
  margin: 34px 0 6px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(140, 90, 54, 0.12);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sage-text);
}

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

/* Title, leader, price — the leader is a flex child that soaks up the room
   between the two, and the dots are its bottom border. */
.addon {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 12px;
  font-size: 15px;
}

.addon-title { flex: 0 1 auto; min-width: 0; }

.addon-leader {
  flex: 1 1 24px;
  min-width: 24px;
  border-block-end: 2px dotted rgba(140, 90, 54, 0.38);
  transform: translateY(-5px);
}

.addon-price {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.addon-price.is-tbd { font-weight: 600; color: var(--sage-text); }

/* An extra whose price is not agreed yet says so under its name, quietly,
   instead of carrying a number nobody approved. */
.addon-tbd {
  display: block;
  margin-block-start: 3px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(43, 43, 43, 0.62);
}

/* The open door at the foot of the card — same voice as the "אפשר להוסיף"
   label (Heebo 600, mocha), sized to be read as a sentence. */
.menu-disclaimer {
  margin: 26px 0 0;
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(140, 90, 54, 0.12);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--sage-text);
}

/* ── The three steps ───────────────────────────────────────────────────
   Each step is gated on the one before it, so it gets a heading a keyboard
   user can land on and a number that matches the stepper above. The numeral
   is aria-hidden: the heading text already says which step this is. */

.rv-flow { padding-block: 80px 0; background: transparent; }

#reserveStepper { margin-block-end: 48px; }
#reserveStepper li { font-size: 13px; padding: 8px 16px; }

.rv-step { margin-block-end: 64px; }
.rv-step:last-child { margin-block-end: 0; }

.rv-step-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.rv-step-index {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--olive);
  color: var(--ivory);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rv-step-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.72);
}

/* Shown when a kind with no agreed package is selected, so the price above
   cannot be read as applying to it. */
.rv-type-note {
  margin: 16px 0 0;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--sage);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.75);
}

/* ── 1 · Type ──────────────────────────────────────────────────────────
   Cards sized to their content, not to the container: with one kind on
   offer, a full-width radio is a very wide way to say "yes". */
#typeChoices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
  gap: 14px;
}
#typeChoices .choice-card { align-items: center; padding: 18px 20px; }
#typeChoices .choice-title { font-size: 17px; }

/* ── 2 · Date ──────────────────────────────────────────────────────────── */

.rv-cal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 980px) {
  .rv-cal-grid { grid-template-columns: minmax(0, 620px) minmax(260px, 1fr); gap: 32px; }
}

.rv-cal .booking-cal {
  background: var(--ivory);
  border: 1px solid rgba(140, 90, 54, 0.12);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.rv-cal .cal-date { padding: 12px 0; font-size: 14.5px; border-radius: 10px; }
.rv-cal .cal-month { font-size: 17px; }

.rv-cal-aside {
  padding: 26px 26px 24px;
  border-radius: var(--radius-card);
  background: var(--cream);
  border: 1px solid rgba(140, 90, 54, 0.12);
}
.rv-cal-aside .rv-step-note { margin-block-end: 18px; }

.cal-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.cal-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(43, 43, 43, 0.8);
}
.cal-swatch {
  flex: none;
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ivory);
  border: 1px solid rgba(140, 90, 54, 0.22);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cal-swatch.is-selected { background: var(--rose); color: var(--ink); border-color: var(--rose); font-weight: 700; }
/* 0.32 blended to #b2ada5 on the ivory swatch — 1.86:1, the worst contrast
   left on the site after the hero band. A full date is still a date a parent
   has to be able to READ; "unavailable" is information, not decoration, and
   greying it into illegibility is how a parent concludes the calendar is
   broken. 0.71 reads 5.06:1. The strike-through moves with it, or the label
   goes dark while the line through it stays a ghost. */
.cal-swatch.is-full { color: rgba(43, 43, 43, 0.71); }
.cal-swatch.is-full::before {
  content: '';
  position: absolute; top: 50%; left: 20%; right: 20%;
  border-top: 1px solid rgba(43, 43, 43, 0.71);
  transform: rotate(-12deg);
}

.rv-cal-aside-foot {
  margin: 20px 0 0;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(140, 90, 54, 0.12);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(43, 43, 43, 0.66);
}

/* ── 3 · Details ───────────────────────────────────────────────────────── */

.rv-form-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.rv-form-grid > * { min-width: 0; }

/* Single column: the chosen date goes ABOVE the form. It is the confirmation
   of what was just picked, and a parent should see it before they start
   typing rather than after. Beside the form on a wide screen the order does
   not matter. */
.rv-form-grid > .summary-panel { order: -1; }

@media (min-width: 900px) {
  .rv-form-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .rv-form-grid > .summary-panel { order: 0; }
}

.chosen-slot {
  padding: 20px 22px;
  border-radius: var(--radius-field);
  background: var(--neutral);
  border: 1px dashed rgba(140, 90, 54, 0.3);
}
.chosen-slot.is-set {
  background: var(--cream);
  border-style: solid;
  border-color: var(--sage);
  box-shadow: var(--shadow-card);
}

/* 0.66 blended to #6b6864 on the neutral panel — 4.17:1, under the floor.
   0.73 reads 5.05:1. (.rv-cal-aside-foot above keeps 0.66: it sits on a
   lighter ground where that alpha passes, and axe did not flag it.) */
.chosen-empty { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(43, 43, 43, 0.73); }

.chosen-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sage-text);
}
.chosen-when {
  margin-block-start: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.chosen-sub {
  margin-block-start: 4px;
  font-size: 13.5px;
  color: rgba(43, 43, 43, 0.68);
}

/* 0.66 measured 4.48:1 on this panel — short of the floor by 0.02, which is
   the whole failure. 0.70 reads 5.03:1, and is the same alpha the shared
   .summary-note in forms.css already uses: this override was a lighter
   outlier, so the fix converges the two rather than adding a third value. */
.summary-note {
  margin: 14px 4px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.70);
}

/* Whole-request failures — a taken date, an outage. Field-level problems go
   to the error summary, which already exists and already takes focus. */
.form-status {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.65;
}
.form-status.is-error { color: var(--error); font-weight: 600; }
.form-status:empty { display: none; }

/* ── Fact rows — used by the confirmation only ─────────────────────────── */

.fact-list { margin: 0; }
.fact-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  border-block-end: 1px solid rgba(140, 90, 54, 0.12);
  font-size: 15px;
}
.fact-row:last-child { border-block-end: 0; }
.fact-row dt { color: var(--sage-text); font-weight: 600; }
.fact-row dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

.rv-panel-note {
  margin-block-start: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.65);
}

/* ── Confirmation ──────────────────────────────────────────────────────── */

.rv-done { padding-block: 80px 0; }
.rv-done-panel { max-width: 620px; margin-inline: auto; text-align: start; }

.rv-done-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ivory);
  font-size: 22px;
  margin-block-end: 18px;
}
.rv-done-panel h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.rv-done-notice {
  margin-block: 12px 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.78);
}
.rv-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 26px;
}

/* ── What happens next ─────────────────────────────────────────────────
   The shared .steps-list, with two additions: a dashed line joining the
   markers on a wide screen, so it reads as a sequence and not four cards;
   and the last marker in sage, because "payment is the last step" is the
   one fact this section exists to state. */

/* Last on the sheet, so its bottom padding is the room the frame's closing
   corners need. The hairline says "a different subject starts here"
   without a whole new ground. */
.rv-after {
  padding-block: 80px 0;
  background: transparent;
  border-block-start: 1px solid rgba(140, 90, 54, 0.12);
}

.rv-after .rv-section-head { margin-block-end: 36px; }

.rv-after .steps-list li { padding-block-start: 52px; }

@media (min-width: 1080px) {
  .rv-after .steps-list { gap: 28px; }
  .rv-after .steps-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block-start: 17px;
    inset-inline-start: 44px;
    inset-inline-end: -18px;
    border-block-start: 2px dashed rgba(140, 90, 54, 0.28);
  }
}
.rv-after .steps-list li:last-child::before { background: var(--sage-text); }
.rv-after .steps-list h3 { font-size: 17px; }
.rv-after .steps-list p { font-size: 14.5px; }