/**
 * Booking wizard v3 — four steps, with pricing.
 *
 * Namespaced `.bw3`, parallel to booking-wizard.css (v1) and
 * booking-wizard-v2.css (v2). Same light system as v2 — site-next tokens,
 * white cards, hairline borders, ink pills, gold as accent only — extended
 * with the interaction vocabulary of /pricing/: a service tab strip, radio
 * cards, tick-box add-ons with quantity steppers, and a running total.
 *
 * THE COLOUR RULE, restated because it is easy to break when adding controls:
 * brand gold is ~1.4:1 on white and is never text on a light background. It
 * appears only as a fill behind ink, a border, a rule, a dot or a tint.
 *
 * SELF-CONTAINED. Only g2-main.css and purged.css are guaranteed site-wide,
 * and purged.css injects loose legacy type (22px/32px body, 2px heading
 * letter-spacing, 55px h2) into anything it can reach — the scoped reset below
 * is load-bearing.
 */

.bw3 {
  --bw3-gold: #F8DC1D;
  --bw3-gold-tint: rgba(248, 220, 29, 0.14);
  --bw3-gold-wash: #FFFDF3;
  --bw3-gold-glow: rgba(248, 220, 29, 0.35);
  --bw3-ink: #181818;
  --bw3-ink-soft: #454d59;
  --bw3-ink-faint: #6b727c;   /* was #98a0aa — the pale helper text read as too faint */
  --bw3-rule: #e6e9ec;
  --bw3-panel: #f7f8f9;
  --bw3-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Wider than v2's 700px: step 1 carries four tabs and step 3 puts the
     calendar and the time list side by side. Still one width for every step —
     a dialog that resizes as you advance jumps under the cursor. */
  width: min(780px, calc(100vw - 32px));
  max-width: none;
  /* FIXED height, not max-height. The old max-height let the card size to its
     content, so switching from the SMSF tab (~630px) to the Tax Return tab
     (~970px) jerked the whole modal ~340px taller, and every step changed it
     again. A fixed height holds the frame still; the body scrolls when a step
     overflows and centres its content when it doesn't. Clamped to the viewport
     so it never exceeds the screen. */
  height: min(90vh, 840px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--bw3-ink);
  font-family: 'Bariol', sans-serif;
  box-shadow: 0 30px 80px rgba(24, 24, 24, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* CRITICAL: the base rule sets `display: flex`, which overrides the browser's
   built-in `dialog:not([open]) { display: none }`. Without this line the card
   stays laid out in the page after it closes — the Close button (and Escape)
   would fire, `open` would go false, but the box never disappeared. `:not([open])`
   out-specifies the base `.bw3`, so it only hides while genuinely closed. */
.bw3:not([open]) { display: none; }

.bw3[open] { animation: bw3Pop 0.32s cubic-bezier(0.34, 1.3, 0.64, 1); }

@keyframes bw3Pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.bw3::backdrop {
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(40, 40, 30, 0.55), rgba(8, 8, 10, 0.82));
}

@supports (backdrop-filter: blur(2px)) {
  .bw3::backdrop { backdrop-filter: blur(5px); }
}

/* Gold bar across the top — the device that sits under the site header. */
.bw3::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--bw3-gold);
  z-index: 2;
}

/* ------------------------------------------------------------------ *
 *  Scoped reset
 * ------------------------------------------------------------------ */

.bw3 p, .bw3 h2, .bw3 h3, .bw3 dl, .bw3 dd, .bw3 dt, .bw3 ol, .bw3 li {
  margin: 0;
  letter-spacing: normal;
}

.bw3 button { letter-spacing: normal; }

/* ------------------------------------------------------------------ *
 *  Header
 * ------------------------------------------------------------------ */

.bw3__closeform { margin: 0; }

.bw3__close,
.bw3__back {
  position: absolute;
  top: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--bw3-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--bw3-ink-soft);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--bw3-ease), border-color 0.2s var(--bw3-ease),
              background 0.2s var(--bw3-ease);
}

.bw3__close { right: 16px; }
.bw3__back  { left: 16px; }

.bw3__close:hover, .bw3__close:focus-visible,
.bw3__back:hover,  .bw3__back:focus-visible {
  color: var(--bw3-ink);
  border-color: var(--bw3-ink);
  background: var(--bw3-panel);
  outline: none;
}

.bw3__back svg { transition: transform 0.2s var(--bw3-ease); }
.bw3__back:hover svg, .bw3__back:focus-visible svg { transform: translateX(-3px); }

.bw3__header {
  flex: 0 0 auto;
  padding: 46px 24px 0;   /* tightened — the close/back pills clear at 46px, and
                             the old 58px ate a chunk of viewport before the
                             first question on long branches */
  text-align: center;
}

.bw3__title {
  margin: 0;
  color: var(--bw3-ink);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
}

/* ------------------------------------------------------------------ *
 *  Progress — four named stages. At six, labels didn't fit and v2 used
 *  anonymous pips; at four they do, and a named rail is orientation
 *  rather than decoration.
 * ------------------------------------------------------------------ */

.bw3__progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  list-style: none;
}

/* Gap below the heading. Needs the `.bw3` prefix: the scoped reset zeroes
   `.bw3 ol` margins (specificity 0,1,1) and would otherwise win, which is why
   the bars sat flush against "Let's book you in". */
.bw3 .bw3__progress { margin: 28px 0 0; }

.bw3 .bw3__progress li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  color: var(--bw3-ink-faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s var(--bw3-ease);
}

.bw3 .bw3__progress li::before {
  content: '';
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bw3-rule);
  transition: background 0.35s var(--bw3-ease);
}

.bw3__progress li.is-done            { color: var(--bw3-ink-soft); }
/* Done stages fill INK, not gold. A gold segment mid-rail read as accidental —
   "am I part-way into the next step?". Now the bar simply fills black up to and
   including the active stage; everything ahead is grey. Unambiguous position. */
.bw3__progress li.is-done::before    { background: var(--bw3-ink); }
.bw3__progress li.is-active          { color: var(--bw3-ink); }
.bw3__progress li.is-active::before  { background: var(--bw3-ink); }

/* ------------------------------------------------------------------ *
 *  Body + steps
 * ------------------------------------------------------------------ */

.bw3__body {
  flex: 1 1 auto;
  /* Load-bearing. A flex item's default min-height is `auto`, so without this
     the body refuses to shrink below its content and a tall step (the "what"
     screen with six add-ons) pushes the card past its own height — on mobile
     the full-screen sheet started ~125px down the viewport and spilled off the
     bottom instead of scrolling inside. */
  min-height: 0;
  /* Top-align every step so the service tabs sit in the SAME place on every
     branch — centring pushed the tabs down on short panels (SMSF) and left
     them high on tall ones (Business), which read as the layout jumping. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px 24px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Slim, quiet scrollbar — the default track was visually heavier than the
     rest of the modal. */
  scrollbar-width: thin;
  scrollbar-color: var(--bw3-rule) transparent;
}

.bw3__body::-webkit-scrollbar { width: 8px; }
.bw3__body::-webkit-scrollbar-track { background: transparent; }
.bw3__body::-webkit-scrollbar-thumb {
  background: var(--bw3-rule);
  border-radius: 999px;
  border: 2px solid #fff;
}
.bw3__body::-webkit-scrollbar-thumb:hover { background: #d5d9dd; }

.bw3__step[hidden] { display: none; }

/* Don't let the flex body squash a tall step to fit — it must keep its natural
   height so the body scrolls instead of the content compressing. */
.bw3__step.is-active {
  flex-shrink: 0;
  animation: bw3In 0.3s var(--bw3-ease);
}

@keyframes bw3In {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.bw3 .bw3__legend {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bw3-ink-soft);
}

.bw3 .bw3__legend-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bw3-ink-faint);
}

/* Inline "(optional)" — sits on the heading line rather than taking its own
   row, so an optional question reads as lighter without adding vertical bulk. */
.bw3 .bw3__legend-optional {
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bw3-ink-faint);
}

.bw3__legend + .bw3__choices { margin-bottom: 22px; }

/* ------------------------------------------------------------------ *
 *  Service tabs — the /pricing/ pattern, four cards across
 * ------------------------------------------------------------------ */

.bw3__tablist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.bw3__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 1px solid var(--bw3-rule);
  border-radius: 14px;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--bw3-ease), background 0.2s var(--bw3-ease),
              box-shadow 0.2s var(--bw3-ease), transform 0.2s var(--bw3-ease);
}

.bw3__tab-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--bw3-panel);
  color: var(--bw3-ink);
  transition: background 0.2s var(--bw3-ease);
}

.bw3__tab-label { font-size: 0.92rem; font-weight: 700; line-height: 1.2; }
.bw3__tab-sub   { font-size: 0.72rem; line-height: 1.3; color: var(--bw3-ink-soft); }

.bw3__tab:hover, .bw3__tab:focus-visible {
  border-color: var(--bw3-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 24, 24, 0.07);
  outline: none;
}

/* Selected: ONE treatment across the whole wizard — ink border (with a hair of
   ring), a pale cream wash, and a gold marker (here the icon disc). Gold as a
   border is reserved for hover/focus, so "selected vs hovered" is never
   ambiguous. See the matching .bw3__choice / .bw3__addon rules. */
.bw3__tab[aria-selected="true"] {
  border-color: var(--bw3-ink);
  background: var(--bw3-gold-wash);
  box-shadow: 0 0 0 1px var(--bw3-ink), 0 10px 24px rgba(24, 24, 24, 0.06);
}

.bw3__tab[aria-selected="true"] .bw3__tab-ico { background: var(--bw3-gold); }

/* ------------------------------------------------------------------ *
 *  Views — cross-faded panels behind the tabs
 * ------------------------------------------------------------------ */

.bw3__view[hidden] { display: none; }

.bw3__view.is-active { animation: bw3Fade 0.22s var(--bw3-ease); }

@keyframes bw3Fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 *  Radio cards
 * ------------------------------------------------------------------ */

.bw3__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.bw3__choices--stack { grid-template-columns: 1fr; }

/* Fixed 2-up. Used for the advice rate card — four short cards read as a menu
   at half width and halve the scroll. Collapses to one column via the ≤620px
   rule below. */
/* Advice rate card: column-first 2×2 so tax advice fills the left column and
   capital gains the right (matches the ITR add-on grid). 4 items = 2 rows. */
.bw3__choices--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}

.bw3__choice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 13px 44px 13px 16px;
  border: 1px solid var(--bw3-rule);
  border-radius: 12px;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--bw3-ease), box-shadow 0.2s var(--bw3-ease),
              transform 0.2s var(--bw3-ease), background 0.2s var(--bw3-ease);
}

.bw3__choice[hidden] { display: none; }

.bw3__choice-main  { font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
.bw3__choice-sub   { font-size: 0.8rem; line-height: 1.4; color: var(--bw3-ink-soft); }

.bw3__choice-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bw3-ink);
  white-space: nowrap;
}

/* A small savings note under the tax-return choices. */
.bw3 .bw3__hint {
  margin: 10px 2px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--bw3-ink-soft);
}
.bw3__hint strong { color: var(--bw3-ink); }

/* "Save $20" pill on the Phone option (gold as a fill behind ink, never text). */
.bw3 .bw3__save {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bw3-gold-tint);
  color: var(--bw3-ink);
  font-size: 0.76rem;
  font-weight: 700;
}

/* A priced card puts the figure on the right rather than on a third line,
   where it read as an afterthought and made every rate card 24px taller.
   The price stops at the 44px right padding, so it clears the selected tick
   (right: 15px, 22px wide) without needing a third column. */
.bw3__choice:has(.bw3__choice-price) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 14px;
}

.bw3__choice:has(.bw3__choice-price) .bw3__choice-main,
.bw3__choice:has(.bw3__choice-price) .bw3__choice-sub { grid-column: 1; }

.bw3__choice:has(.bw3__choice-price) .bw3__choice-price {
  grid-column: 2;
  grid-row: 1 / -1;
  text-align: right;
}

.bw3__choice:hover, .bw3__choice:focus-visible {
  border-color: var(--bw3-gold);
  box-shadow: 0 8px 20px rgba(24, 24, 24, 0.08);
  transform: translateY(-2px);
  outline: none;
}

.bw3__choice.is-selected {
  border-color: var(--bw3-ink);
  background: var(--bw3-gold-wash);   /* cream, matching the tabs — one selected look */
  box-shadow: 0 0 0 1px var(--bw3-ink);
}

/* Selection carries a mark, not just a colour — survives greyscale. */
.bw3__choice.is-selected::after,
.bw3__person.is-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--bw3-gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}

/* ------------------------------------------------------------------ *
 *  Add-ons — tick boxes, some with a quantity stepper
 * ------------------------------------------------------------------ */

/* Two fixed columns, filled COLUMN-first over 3 rows: the first three add-ons
   (income events) stack down the left, the last three (property / rental) down
   the right. Depends on there being exactly 3 + 3 — see booking-pricing-data.php.
   Collapses to a single top-to-bottom column on mobile (below). */
.bw3__addons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 8px;
}

.bw3__addon {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 9px 13px;
  border: 1px solid var(--bw3-rule);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;   /* the step header is centred; the choice cards opt out and so must these */
  transition: border-color 0.2s var(--bw3-ease), background 0.2s var(--bw3-ease);
}

.bw3__addon:hover { border-color: var(--bw3-gold); }

.bw3__addon.is-on {
  border-color: var(--bw3-ink);
  background: var(--bw3-gold-wash);   /* cream — same selected treatment as everything else */
}

/* The real control, kept in the accessibility tree and focusable — only its
   painted box is replaced. Never display:none, or it leaves the tab order. */
.bw3__addon input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bw3__tick {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.6px solid var(--bw3-rule);
  border-radius: 6px;
  background: #fff;
  transition: background 0.15s var(--bw3-ease), border-color 0.15s var(--bw3-ease);
}

.bw3__addon input:checked ~ .bw3__tick {
  background: var(--bw3-gold);
  border-color: var(--bw3-gold);
}

.bw3__addon input:checked ~ .bw3__tick::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2.4px solid var(--bw3-ink);
  border-bottom: 2.4px solid var(--bw3-ink);
  transform: rotate(-45deg) translate(0.5px, -1.5px);
}

/* Focus ring has to live on the painted box, since the input is invisible. */
.bw3__addon input:focus-visible ~ .bw3__tick {
  outline: 3px solid var(--bw3-gold-glow);
  outline-offset: 2px;
}

.bw3__addon-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bw3__addon-label { font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
.bw3__addon-note  { font-size: 0.74rem; line-height: 1.3; color: var(--bw3-ink-soft); }

.bw3__addon-price {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bw3-ink-soft);
  white-space: nowrap;
}

/* Quantity stepper */
.bw3__qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.bw3__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bw3-rule);
  border-radius: 50%;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s var(--bw3-ease), background 0.15s var(--bw3-ease);
}

.bw3__qty-btn:hover:not(:disabled) {
  border-color: var(--bw3-ink);
  background: var(--bw3-panel);
}

.bw3__qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.bw3__qty-num {
  min-width: 24px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 *  Running total
 * ------------------------------------------------------------------ */

.bw3__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 15px 20px;
  border-radius: 14px;
  background: var(--bw3-ink);
  color: #fff;
}

.bw3__total-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bw3 .bw3__total-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw3-gold);
}

.bw3 .bw3__total-note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.66);
}

/* Reserve room for the widest realistic total so ticking an add-on doesn't
   reflow the row — the same trick the pricing calculator uses. */
.bw3__total-figure {
  flex: 0 0 auto;
  min-width: 3.4em;
  text-align: right;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 *  Info + note blocks
 * ------------------------------------------------------------------ */

.bw3 .bw3__info {
  padding: 16px 18px;
  border: 1px solid var(--bw3-rule);
  border-radius: 14px;
  background: var(--bw3-panel);
}

.bw3 .bw3__info p { font-size: 0.9rem; line-height: 1.6; color: var(--bw3-ink-soft); }
.bw3 .bw3__info p + p { margin-top: 10px; }
.bw3 .bw3__info strong { color: var(--bw3-ink); }
.bw3 .bw3__info a { color: var(--bw3-ink); text-decoration: underline; }
.bw3 .bw3__info-note { font-size: 0.84rem; }

.bw3 .bw3__note {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--bw3-gold);
  border-radius: 0 10px 10px 0;
  background: var(--bw3-gold-tint);
  color: var(--bw3-ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* A note that offers a way out — sits ABOVE the choices it redirects away
   from, so a monthly client sees it before picking a rate they'd never pay. */
.bw3 .bw3__note--action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 22px;
}

.bw3 .bw3__note--action .bw3__link { flex: 0 0 auto; }

/* ------------------------------------------------------------------ *
 *  Step 2 — how + who
 * ------------------------------------------------------------------ */

.bw3__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.bw3__col { min-width: 0; }

.bw3__staff-wrap { position: relative; }

.bw3__staff {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 2px;
  scrollbar-width: thin;
}

.bw3__staff-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34px;
  background: linear-gradient(to top, #fff 20%, rgba(255, 255, 255, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--bw3-ease);
}

.bw3__staff-wrap.is-scrollable::after { opacity: 1; }

.bw3 .bw3__staff-hint {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--bw3-rule);
  border-radius: 12px;
  background: var(--bw3-panel);
  color: var(--bw3-ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.bw3__person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 9px 40px 9px 10px;
  border: 1px solid var(--bw3-rule);
  border-radius: 12px;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--bw3-ease), box-shadow 0.2s var(--bw3-ease),
              transform 0.2s var(--bw3-ease), background 0.2s var(--bw3-ease);
}

.bw3__person:hover:not(:disabled),
.bw3__person:focus-visible:not(:disabled) {
  border-color: var(--bw3-gold);
  box-shadow: 0 6px 16px rgba(24, 24, 24, 0.07);
  transform: translateX(3px);
  outline: none;
}

.bw3__person.is-selected {
  border-color: var(--bw3-ink);
  background: var(--bw3-panel);
  box-shadow: 0 0 0 1px var(--bw3-ink);
}

.bw3__person:disabled,
.bw3__person.is-unavailable {
  background: var(--bw3-panel);
  color: var(--bw3-ink-faint);
  cursor: not-allowed;
}

.bw3__person:disabled .bw3__person-avatar { opacity: 0.45; filter: grayscale(1); }

.bw3__person-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bw3-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bw3-ink-soft);
}

.bw3__person-avatar--any { background: var(--bw3-ink); color: var(--bw3-gold); }

.bw3__person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.bw3__person-name {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw3__person-title { font-size: 0.76rem; line-height: 1.3; color: var(--bw3-ink-soft); }

.bw3__person-next {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bw3-gold-tint);
  color: var(--bw3-ink);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.bw3__person-next:empty { display: none; }

.bw3__person-next.is-none {
  background: transparent;
  border: 1px solid var(--bw3-rule);
  color: var(--bw3-ink-faint);
  font-weight: 400;
}

/* ------------------------------------------------------------------ *
 *  Step 3 — when: calendar and times together
 * ------------------------------------------------------------------ */

.bw3__when {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.bw3__cal {
  padding: 14px;
  border: 1px solid var(--bw3-rule);
  border-radius: 16px;
  background: #fff;
}

.bw3__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.bw3 .bw3__cal-label { font-size: 0.95rem; font-weight: 700; }

.bw3__cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--bw3-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s var(--bw3-ease), background 0.2s var(--bw3-ease);
}

.bw3__cal-nav:hover:not(:disabled),
.bw3__cal-nav:focus-visible:not(:disabled) {
  border-color: var(--bw3-ink);
  background: var(--bw3-panel);
  outline: none;
}

.bw3__cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.bw3__cal-dow,
.bw3__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.bw3__cal-dow {
  margin-bottom: 4px;
  color: var(--bw3-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.bw3__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--bw3-ink-faint);
  font: inherit;
  font-size: 0.84rem;
}

.bw3__day.is-blank { visibility: hidden; }
.bw3__day.is-closed { color: #c3c9d0; }

.bw3__day.is-open {
  border-color: var(--bw3-rule);
  background: #fff;
  color: var(--bw3-ink);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s var(--bw3-ease), background 0.15s var(--bw3-ease),
              color 0.15s var(--bw3-ease);
}

.bw3__day.is-open::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--bw3-gold);
}

.bw3__day.is-open:hover,
.bw3__day.is-open:focus-visible {
  border-color: var(--bw3-ink);
  background: var(--bw3-ink);
  color: #fff;
  outline: none;
}

.bw3__day.is-selected {
  border-color: var(--bw3-ink);
  background: var(--bw3-ink);
  color: #fff;
}

.bw3 .bw3__cal-count {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--bw3-ink-soft);
}

.bw3__cal-count b { color: var(--bw3-ink); }

/* Times column */
.bw3 .bw3__times-head {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.bw3__slot-group + .bw3__slot-group { margin-top: 16px; }

.bw3 .bw3__slot-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bw3-ink-soft);
}

.bw3__slot-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bw3-rule);
}

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

.bw3__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 48px;
  padding: 8px 9px;
  border: 1px solid var(--bw3-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s var(--bw3-ease), background 0.15s var(--bw3-ease),
              color 0.15s var(--bw3-ease), transform 0.15s var(--bw3-ease),
              box-shadow 0.15s var(--bw3-ease);
}

.bw3__slot small {
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--bw3-ink-soft);
  transition: color 0.15s var(--bw3-ease);
}

.bw3__slot:hover, .bw3__slot:focus-visible {
  border-color: var(--bw3-ink);
  background: var(--bw3-ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(24, 24, 24, 0.14);
  outline: none;
}

.bw3__slot:hover small, .bw3__slot:focus-visible small { color: rgba(255, 255, 255, 0.72); }

.bw3 .bw3__tz {
  margin: 14px 0 0;
  color: var(--bw3-ink-soft);
  font-size: 0.76rem;
}

/* Placeholder in the times column before a day is chosen — the column has to
   hold its width or picking a date would visibly re-lay-out the whole step. */
.bw3 .bw3__times-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 22px 18px;
  border: 1px dashed var(--bw3-rule);
  border-radius: 14px;
  background: var(--bw3-panel);
  color: var(--bw3-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.bw3__times-idle svg { color: var(--bw3-ink-faint); }

/* ------------------------------------------------------------------ *
 *  Step 4 — confirm
 * ------------------------------------------------------------------ */

.bw3__summary {
  margin: 0 0 18px;
  padding: 4px 18px;
  border: 1px solid var(--bw3-rule);
  border-radius: 16px;
  background: var(--bw3-panel);
}

.bw3__row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bw3-rule);
}

.bw3__row:last-child { border-bottom: 0; }

.bw3 .bw3__row dt {
  flex: 0 0 82px;
  color: var(--bw3-ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}

.bw3 .bw3__row dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
}

.bw3 .bw3__row dd small {
  display: block;
  margin-top: 4px;
  color: var(--bw3-ink-soft);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
}

/* "(30 mins)" tucked after the time — present but quiet. */
.bw3 .bw3__mins { font-weight: 400; color: var(--bw3-ink-soft); }

/* The "With" row: face + name + title, so a booked accountant is a person
   rather than a bare string. */
.bw3__with { display: flex; align-items: center; gap: 10px; }

.bw3__with-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bw3-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bw3-ink-soft);
}

.bw3__with-avatar--any { background: var(--bw3-ink); color: var(--bw3-gold); }

.bw3__with-text { display: flex; flex-direction: column; min-width: 0; }
.bw3 .bw3__with-name { font-weight: 700; line-height: 1.25; }
.bw3 .bw3__with-text small { margin-top: 0; }

/* Itemised price lines inside the summary */
.bw3__lines { display: grid; gap: 5px; margin-top: 6px; }

.bw3__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--bw3-ink-soft);
}

.bw3__line span:last-child { font-variant-numeric: tabular-nums; }

.bw3__line--total {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--bw3-rule);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bw3-ink);
}

/* Prepay nudge on the how step */
.bw3__prepay { margin-top: 16px; }

/* The saving reads as the point, so let the price sit in ink on a gold tint
   rather than the muted grey the add-on prices use. */
.bw3 .bw3__prepay-card .bw3__addon-price {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bw3-gold-tint);
  color: var(--bw3-ink);
}

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */

.bw3__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  padding: 14px 28px;
  border: 2px solid var(--bw3-gold);
  border-radius: 50px;
  background: var(--bw3-ink);
  color: var(--bw3-gold);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(248, 220, 29, 0.18);
  transition: transform 0.25s var(--bw3-ease), background 0.25s var(--bw3-ease),
              color 0.25s var(--bw3-ease), box-shadow 0.25s var(--bw3-ease),
              border-color 0.25s var(--bw3-ease);
}

.bw3__cta:hover:not(:disabled),
.bw3__cta:focus-visible:not(:disabled) {
  background: #fff;
  color: var(--bw3-ink);
  border-color: var(--bw3-ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(248, 220, 29, 0.4);
  outline: none;
}

.bw3__cta:active:not(:disabled) { transform: translateY(0); }

.bw3__cta svg { transition: transform 0.25s var(--bw3-ease); }
.bw3__cta:hover svg, .bw3__cta:focus-visible svg { transform: translateX(4px); }

.bw3__cta--ghost {
  background: #fff;
  color: var(--bw3-ink);
  border-color: var(--bw3-rule);
  box-shadow: none;
}

.bw3__cta--ghost:hover:not(:disabled),
.bw3__cta--ghost:focus-visible:not(:disabled) {
  background: var(--bw3-panel);
  border-color: var(--bw3-ink);
  box-shadow: none;
}

.bw3__cta:disabled {
  border-color: var(--bw3-rule);
  background: var(--bw3-panel);
  color: var(--bw3-ink-faint);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------------------------ *
 *  Persistent action bar — price (quiet, on the left) + the one black
 *  CTA (right). Pinned between the scrolling body and the footer.
 * ------------------------------------------------------------------ */

.bw3__actionbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 24px;
  border-top: 1px solid var(--bw3-rule);
  background: #fff;
  /* Soft upward lift so scrolling content clearly passes UNDER the bar. */
  box-shadow: 0 -8px 20px rgba(24, 24, 24, 0.05);
}

.bw3__actionbar[hidden] { display: none; }

/* In the bar the CTA is a right-aligned pill with no top margin — one
   dominant action, not a full-width slab under a second slab. */
.bw3__actionbar .bw3__cta {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  min-height: 50px;
}

/* No price to show (business, SMSF, confirm) → the CTA fills the bar. */
.bw3__actionbar:has(.bw3__bar-price[hidden]) .bw3__cta { flex: 1 1 auto; }

.bw3__bar-price {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bw3__bar-price[hidden] { display: none; }

.bw3 .bw3__bar-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bw3-ink-soft);
}

.bw3__bar-figure {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bw3-ink);
  font-variant-numeric: tabular-nums;
}

.bw3 .bw3__bar-gst {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--bw3-ink-soft);
}

.bw3 .bw3__fineprint {
  margin: 14px 0 0;
  color: var(--bw3-ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}

.bw3__fineprint a { color: var(--bw3-ink); text-decoration: underline; }

/* ------------------------------------------------------------------ *
 *  Confirm — "your details" form (native booking).
 *  The site ships NO input styles, so these are authored from the brand:
 *  white field, hairline border, gold focus ring, red invalid ring.
 * ------------------------------------------------------------------ */

.bw3__form { margin: 4px 0 0; }
.bw3__form .bw3__legend { margin-bottom: 12px; }

.bw3__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bw3__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bw3__field--wide { grid-column: 1 / -1; }

.bw3 .bw3__field-label { font-size: 0.78rem; font-weight: 700; color: var(--bw3-ink-soft); }

.bw3__input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--bw3-rule);
  border-radius: 12px;
  background: #fff;
  color: var(--bw3-ink);
  font: inherit;
  font-size: 0.98rem;
  letter-spacing: normal;
  transition: border-color 0.15s var(--bw3-ease), box-shadow 0.15s var(--bw3-ease);
}

.bw3__input:focus,
.bw3__input:focus-visible {
  border-color: var(--bw3-gold);
  box-shadow: 0 0 0 3px var(--bw3-gold-glow);
  outline: none;
}

.bw3__input.is-invalid {
  border-color: #d64541;
  box-shadow: 0 0 0 3px rgba(214, 69, 65, 0.16);
}

/* Honeypot: in the DOM for bots, off-screen and out of the tab order for us. */
.bw3__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bw3 .bw3__formerror {
  margin: 10px 0 0;
  color: #b02a26;
  font-size: 0.84rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 *  Done — native success screen
 * ------------------------------------------------------------------ */

.bw3__done { text-align: center; }

.bw3__done-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 6px auto 16px;
  border-radius: 50%;
  background: var(--bw3-gold);
  color: var(--bw3-ink);
  animation: bw3Pop 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bw3 .bw3__done-title {
  margin: 0 0 20px;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  /* site-next styles bare h3 white (for its dark panels); force the brand ink,
     and clear purged.css's 2px heading letter-spacing. */
  color: var(--bw3-ink);
  letter-spacing: normal;
}

.bw3__done .bw3__summary { text-align: left; }
.bw3__done .bw3__cta { margin-top: 20px; }

/* ------------------------------------------------------------------ *
 *  Loading / empty / error / demo
 * ------------------------------------------------------------------ */

.bw3__skel-cal {
  padding: 14px;
  border: 1px solid var(--bw3-rule);
  border-radius: 16px;
}

.bw3__skel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bw3__skel-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

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

.bw3__skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bw3-panel) 25%, #eef0f2 37%, var(--bw3-panel) 63%);
  background-size: 400% 100%;
  animation: bw3Shimmer 1.4s ease-in-out infinite;
}

.bw3__skel--day   { height: 38px; border-radius: 9px; }
.bw3__skel--slot  { min-height: 48px; border-radius: 999px; }
.bw3__skel--nav   { width: 34px; height: 34px; border-radius: 999px; }
.bw3__skel--label { width: 120px; height: 18px; border-radius: 6px; }
.bw3__skel--person{ min-height: 58px; border-radius: 12px; }

@keyframes bw3Shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

.bw3 .bw3__empty,
.bw3 .bw3__error {
  padding: 20px 16px;
  border: 1px dashed var(--bw3-rule);
  border-radius: 14px;
  background: var(--bw3-panel);
  text-align: center;
  color: var(--bw3-ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.bw3__empty { margin-top: 14px; }
.bw3__error .bw3__cta { margin-top: 14px; }

.bw3__link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--bw3-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bw3 .bw3__demo {
  margin: 16px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bw3-gold-tint);
  color: var(--bw3-ink);
  font-size: 0.76rem;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 *  Footer
 * ------------------------------------------------------------------ */

/* Sits directly under the action bar, so the reassurance reads as a line
   beneath the CTA — minimal top padding. */
.bw3__footer { flex: 0 0 auto; padding: 6px 24px 14px; }

.bw3 .bw3__reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--bw3-ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}

.bw3__reassure svg { flex: 0 0 auto; color: var(--bw3-ink); }

.bw3 :focus-visible {
  outline: 3px solid var(--bw3-gold-glow);
  outline-offset: 3px;
}

.bw3 .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 *  Responsive
 *
 *  purged.css uses descendant selectors that out-specify single-class rules
 *  inside @media, so everything below is written .bw3 .bw3__x.
 * ------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* Calendar above times. Side by side below this the slot grid drops to one
     column and the calendar loses its square-ish proportion. */
  .bw3 .bw3__when {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bw3 .bw3__cal { max-width: 400px; margin: 0 auto; }

  /* With the times below the fold, an idle placeholder is just dead height. */
  .bw3 .bw3__times-idle { min-height: 0; padding: 14px; }

  .bw3 .bw3__split { grid-template-columns: 1fr; gap: 24px; }
  .bw3 .bw3__staff { max-height: none; overflow-y: visible; }
  .bw3 .bw3__staff-wrap::after { display: none; }
}

@media (max-width: 620px) {
  .bw3 {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .bw3 .bw3__header { padding: 54px 16px 0; }
  .bw3 .bw3__body   { padding: 20px 16px 4px; }
  .bw3 .bw3__footer { padding: 6px 16px 12px; }

  /* Tighten the action bar for a narrow sheet so the price stays on one line
     and the CTA keeps enough room. */
  .bw3 .bw3__actionbar { padding: 10px 16px; gap: 12px; }
  .bw3 .bw3__bar-figure { font-size: 1.25rem; white-space: nowrap; }
  .bw3 .bw3__actionbar .bw3__cta { min-height: 46px; padding: 12px 18px; font-size: 0.98rem; }

  .bw3 .bw3__title { font-size: 1.28rem; }

  .bw3 .bw3__close span, .bw3 .bw3__back span { display: none; }
  .bw3 .bw3__close, .bw3 .bw3__back {
    top: 13px;
    min-width: 40px;
    justify-content: center;
    padding: 10px;
  }

  /* Two-up tabs. Four across is 78px a card — narrower than the words. */
  .bw3 .bw3__tablist { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bw3 .bw3__tab { padding: 12px 6px 10px; }
  .bw3 .bw3__tab-sub { display: none; }

  .bw3 .bw3__choices,
  .bw3 .bw3__addons,
  .bw3 .bw3__pay-opts { grid-template-columns: 1fr; }

  /* Undo the desktop column-first flow so add-ons / advice cards stack
     top-to-bottom in DOM order. */
  .bw3 .bw3__addons,
  .bw3 .bw3__choices--grid { grid-template-rows: none; grid-auto-flow: row; }

  /* Progress labels don't fit four-up at this width; keep the rail, drop the
     words, and let the live region carry the step name instead. */
  .bw3 .bw3__progress li { width: 56px; font-size: 0; gap: 0; }

  .bw3 .bw3__total { padding: 13px 16px; }
  .bw3 .bw3__total-figure { font-size: 1.5rem; }

  .bw3 .bw3__slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

  .bw3 .bw3__row { gap: 12px; }
  .bw3 .bw3__row dt { flex-basis: 66px; font-size: 0.68rem; }
}

@media (max-height: 640px) {
  .bw3 .bw3__header { padding-top: 50px; }
  .bw3 .bw3__title::after { margin-top: 8px; }
  .bw3 .bw3__progress { margin-top: 12px; }
  .bw3 .bw3__body { padding-top: 16px; }
}

/* ------------------------------------------------------------------ *
 *  Reduced motion + high contrast
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .bw3 *, .bw3 *::before, .bw3 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bw3[open], .bw3 .bw3__step.is-active, .bw3 .bw3__view.is-active { animation: none; }

  /* Hold the skeleton flat rather than freezing it mid-gradient. */
  .bw3 .bw3__skel { animation: none; background: var(--bw3-panel); }

  .bw3 .bw3__choice:hover,
  .bw3 .bw3__tab:hover,
  .bw3 .bw3__person:hover,
  .bw3 .bw3__slot:hover,
  .bw3 .bw3__cta:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .bw3 {
    --bw3-rule: #767b82;
    --bw3-ink-soft: #24282e;
    --bw3-ink-faint: #4a5058;
  }
  .bw3 .bw3__choice,
  .bw3 .bw3__tab,
  .bw3 .bw3__addon,
  .bw3 .bw3__person,
  .bw3 .bw3__slot,
  .bw3 .bw3__day.is-open,
  .bw3 .bw3__cal-nav,
  .bw3 .bw3__tick { border-color: var(--bw3-ink); }
  .bw3 .bw3__day.is-closed { color: #5c636b; }
}