/**
 * Build a Program — wizard styles
 *
 * Split out of components.css (2026-09-23). Loaded globally because the CTA
 * band (and therefore the modal) prints on every page.
 *
 * Layout contract — a car-configurator frame
 *   .pw__layout   grid: stepper across the top, stage left, options right,
 *                 fixed height (--pw-frame) so nothing leaves the viewport
 *   .pw__stage    the isometric floor that assembles as answers come in,
 *                 plus the spec line, the sentence and the build sheet
 *   .pw__config   the option column; .pw__scroll scrolls, .pw__nav is pinned
 *   .pw-sticker   the build sheet (a window sticker) over the stage
 *
 * Phones: the stage becomes a sticky 210px strip above the options.
 *
 * Markup: inc/program-wizard.php · behaviour: assets/js/program-wizard.js
 * Stage art: assets/images/program-stage.svg (GENERATED — node tools/program-stage/build.js)
 */

/* ============================================================
   1. CTA band (every page) — title + two buttons
   ============================================================ */

.cta-band .btn--primary {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.cta-band .btn--primary:hover {
  background: var(--color-navy-light);
  border-color: var(--color-navy-light);
}

.cta-band .btn--secondary {
  border-color: rgba(255, 255, 255, 0.55);
}

.cta-band .btn--secondary:hover {
  border-color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   2. Shell — inline card and modal
   ============================================================ */

.pw--inline {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-8) 0;
  max-width: 1180px;
  margin: 0 auto;
}

.pw__unconfigured {
  text-align: center;
  padding-bottom: var(--space-8);
}

.pw__unconfigured p {
  color: var(--color-text-muted);
  margin: var(--space-2) auto var(--space-6);
  max-width: 48ch;
}

/* Modal: three rows — thin head, scrolling body, pinned footer. Only the body
   scrolls, so the close button and the Continue button are always reachable. */
html.pw-modal-open {
  overflow: hidden;
}

.pw-modal {
  position: fixed;
  inset: 0;
  z-index: 1100; /* above the site header (1000–1002) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.pw-modal[hidden] {
  display: none;
}

.pw-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 41, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.pw-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  height: min(780px, calc(100vh - var(--space-8)));
  height: min(780px, calc(100dvh - var(--space-8)));
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  outline: none;
  overflow: hidden;
}

.pw-modal.is-open .pw-modal__backdrop {
  opacity: 1;
}

.pw-modal.is-open .pw-modal__dialog {
  opacity: 1;
  transform: none;
}

.pw-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.pw-modal__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-saffron-dark);
}

.pw-modal__close {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.pw-modal__close:hover {
  background: var(--color-gray-50);
}

.pw-modal__close:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.pw-modal__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6) 0;
}

/* The form fills the dialog; the frame inside it takes whatever is left. */
.pw-modal__body > .pw__form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pw-modal__body .pw__layout {
  flex: 1;
  min-height: 0;
  height: auto;
}

/* ============================================================
   3. Configurator frame — stepper across the top, the stage on the
      left, options on the right. The frame has a fixed height; only the
      option column scrolls, so the stage and Continue never leave view.
   ============================================================ */

.pw__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--space-6);
  height: var(--pw-frame, 640px);
}

/* /build-a-program/ is a tool page: a compact intro, then the configurator.
   The frame is nearly a full viewport tall: with the card's top just under the
   scrolled header, the card and Continue fit exactly. On first load the intro
   and the top of the card show — step 1 advances on its own, so Continue is not
   needed there — and moving to the next step scrolls the card into full view
   (goTo() in program-wizard.js). */
.bp-tool {
  padding-top: var(--space-3); /* the breadcrumb bar above already spaces it */
}

/* One column — label, h1, lede, proof row — until the proof row fits beside
   the title. Then two columns with their bottoms aligned: the side is kept no
   taller than the title (two lines of lede, one row of proof), so it never
   rises above the label. Longer lede or proof copy breaks that: re-check at
   1240px. */
.bp-intro {
  max-width: 1180px;
  margin: 0 auto var(--space-4);
}

.bp-intro__side {
  margin-top: var(--space-2);
}

@media (max-width: 1239px) {
  .bp-intro h1 br {
    display: none;
  }
}

@media (min-width: 1240px) {
  .bp-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-6);
  }

  .bp-intro__side {
    margin-top: 0;
  }
}

.bp-intro .label {
  margin-bottom: var(--space-2);
}

.bp-intro h1 {
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.bp-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.bp-proof li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.bp-proof svg {
  flex: none;
  stroke: currentColor;
  color: var(--color-saffron-dark);
}

.bp-intro__lede {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 72ch;
}

.pw--inline .pw__layout {
  --pw-frame: clamp(560px, calc(100vh - var(--header-height-scrolled) - 44px), 860px);
  --pw-frame: clamp(560px, calc(100dvh - var(--header-height-scrolled) - 44px), 860px);
}

.bp-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

/* The scheduler's button sits beside Build My Program; its embed opens full width below. */
.bp-close__actions .book-call--button {
  display: contents;
}

.bp-close__actions .book-call__embed {
  flex-basis: 100%;
}

@media (max-height: 560px) {
  .bp-intro__lede,
  .bp-proof {
    display: none;
  }
}

.pw__layout > .pw__stepper {
  grid-column: 1 / -1;
}

.pw__config {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pw__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for focus rings, which overflow:auto would otherwise clip. */
  padding: 4px 6px var(--space-4) 4px;
  margin: -4px -6px 0 -4px;
  scroll-padding-bottom: var(--space-4);
}

.pw__nav {
  flex: none;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) 0 var(--space-5);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
}

.pw__nav [hidden] {
  display: none;
}

.pw__nav .lotus-form__status {
  flex-basis: 100%;
}

.pw__spacer {
  flex: 1;
}

/* Saffron fill with white text is 2.4:1. Navy text on saffron is 7.2:1. */
.pw__nav .btn--primary,
.pw__forward .btn--primary {
  color: var(--color-navy);
  font-weight: 700;
}

.pw__nav .btn--primary .btn-arrow {
  stroke: currentColor;
}

.pw__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.pw__back:hover {
  color: var(--color-navy);
  background: var(--color-gray-50);
}

.pw__back:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.pw__back-icon {
  transform: rotate(180deg);
}

/* ============================================================
   4. Stepper — seven fixed, named segments
   ============================================================ */

.pw__stepper {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.pw__stepper li {
  min-width: 0;
}

/* Desktop carries the named segments; the text count is the mobile stand-in. */
.pw__stepcount {
  display: none;
}

.pw__step-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: default;
  color: var(--color-gray-400);
}

.pw__step-btn::before {
  content: '';
  display: block;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-gray-200);
  margin-bottom: 6px;
  transition: background var(--duration-base) var(--ease-out);
}

.pw__step-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw__stepper li[data-state="done"] .pw__step-btn {
  cursor: pointer;
  color: var(--color-gray-600);
}

.pw__stepper li[data-state="done"] .pw__step-btn::before {
  background: var(--color-saffron);
}

.pw__stepper li[data-state="done"] .pw__step-btn:hover {
  color: var(--color-navy);
}

.pw__stepper li[data-state="current"] .pw__step-btn {
  color: var(--color-navy);
}

.pw__stepper li[data-state="current"] .pw__step-btn::before {
  background: var(--color-saffron);
}

.pw__stepper li[data-state="skipped"] .pw__step-btn {
  opacity: 0.45;
}

.pw__step-btn:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   5. Question column
   ============================================================ */

.pw__step[hidden] {
  display: none;
}

.pw__step--enter {
  animation: pw-step-enter 0.3s var(--ease-out);
}

/* Starts part-visible: if a throttled tab pauses the animation the step is
   still readable. */
@keyframes pw-step-enter {
  from { opacity: 0.45; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.pw__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
  outline: none;
}

.pw__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: 62ch;
}

.pw__group {
  margin-bottom: var(--space-5);
}

.pw__group:last-child {
  margin-bottom: 0;
}

.pw__group[hidden] {
  display: none;
}

.pw__group-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  margin-bottom: var(--space-2);
}

.pw__optional {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-gray-500);
}

.pw__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c0392b;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-3);
}

.pw__error[hidden] {
  display: none;
}

.pw__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.pw__cols .pw__group {
  margin-bottom: 0;
}

/* ============================================================
   6. Option tiles
   ============================================================ */

.pw__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-2);
}

.pw__chips--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw__chips--5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw-chip {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.pw-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pw-chip__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  min-height: 48px;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-800);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast), color var(--duration-fast);
}

.pw-chip__icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  color: var(--color-gray-500);
  transition: color var(--duration-fast);
}

.pw-chip__check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: currentColor;
  color: var(--color-saffron-dark);
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.pw-chip:hover .pw-chip__label {
  border-color: var(--color-navy);
}

/* Saffron means "you chose this" — it appears nowhere at rest. */
.pw-chip.is-selected .pw-chip__label {
  border-color: var(--color-saffron);
  box-shadow: inset 0 0 0 1px var(--color-saffron);
  background: rgba(243, 144, 20, 0.08);
  color: var(--color-navy);
  font-weight: 600;
}

.pw-chip.is-selected .pw-chip__icon {
  color: var(--color-saffron-dark);
}

.pw-chip.is-selected .pw-chip__check {
  opacity: 1;
}

.pw-chip input:focus-visible + .pw-chip__label {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Narrow columns wrap to three lines; keep the check clear of the text. */
.pw__chips--5 .pw-chip__check,
.pw__chips--4 .pw-chip__check {
  top: 10px;
  transform: none;
}

/* Stacked variant — icon above label, used where five must share a row */
.pw__chips--stack .pw-chip__label {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-height: 78px;
  padding: 12px 26px 10px 12px;
  font-size: 12.5px;
}

.pw__chips--stack .pw-chip__check {
  top: 12px;
  right: 10px;
  transform: none;
  width: 14px;
  height: 14px;
}

/* The option column is ~480px: multi-column tile sets drop to two. */
.pw__config .pw__chips,
.pw__config .pw__chips--4,
.pw__config .pw__chips--5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Product cards — a mini render of the unit above the name */
.pw__config .pw__chips--cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw__config .pw__chips--timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pw__chips--cards .pw-chip__label {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 94px;
  padding: 10px 8px 8px;
  text-align: center;
  font-size: 12.5px;
}

.pw__chips--cards .pw-chip__art {
  width: 100%;
  height: 46px;
}

.pw__chips--cards .pw-chip__icon {
  width: 26px;
  height: 26px;
  margin: 10px 0;
}

.pw__chips--cards .pw-chip__check {
  top: 8px;
  right: 8px;
  transform: none;
  width: 14px;
  height: 14px;
}

/* Stage — a timeline, not four boxes: the product's life left to right */
.pw__chips--timeline {
  position: relative;
  gap: var(--space-2);
}

.pw__chips--timeline::before {
  content: '';
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 31px;
  height: 2px;
  background: var(--color-gray-200);
}

.pw__chips--timeline .pw-chip__label,
.pw__chips--timeline .pw-chip.is-selected .pw-chip__label {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 116px;
  padding: 12px 6px 10px;
  text-align: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.pw__chips--timeline .pw-chip__icon {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-gray-600);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.pw__chips--timeline .pw-chip:hover .pw-chip__label {
  border-color: transparent;
}

.pw__chips--timeline .pw-chip:hover .pw-chip__icon {
  border-color: var(--color-navy);
}

.pw__chips--timeline .pw-chip.is-selected .pw-chip__icon {
  border-color: var(--color-saffron);
  background: var(--color-saffron);
  color: var(--color-navy);
  box-shadow: 0 0 0 5px rgba(243, 144, 20, 0.18);
}

.pw__chips--timeline .pw-chip__check {
  display: none;
}

/* Services — Build and Return get a full row each; Store and Ship share one */
.pw__station-col[data-station="build"],
.pw__station-col[data-station="return"] {
  grid-column: 1 / -1;
}

.pw__config .pw__station-col .pw__chips {
  grid-template-columns: 1fr;
  gap: 6px;
}

.pw__config .pw__station-col[data-station="build"] .pw__chips {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Return has four services (call center, warranty, depot repair, refurb) —
   two by two keeps every label on two lines. */
.pw__config .pw__station-col[data-station="return"] .pw__chips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pw__stations .pw-chip--art .pw-chip__label {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 0;
  padding: 7px 24px 7px 9px;
  font-size: 12.5px;
  line-height: 1.25;
}

.pw__stations .pw-chip__art {
  width: 40px;
  height: 26px;
}

.pw__station-head {
  padding-bottom: 4px;
}

.pw__station-col {
  gap: 6px;
}

.pw__stations .pw-chip__check {
  top: 8px;
  transform: none;
}

/* Compact variant — optional multi-selects */
.pw__chips--compact .pw-chip__label {
  min-height: 40px;
  padding: 6px 26px 6px 10px;
  font-size: 12.5px;
}

.pw__chips--compact .pw-chip__icon {
  width: 16px;
  height: 16px;
}

/* "Something else" follow-up */
.pw__other {
  margin-top: var(--space-3);
  max-width: 420px;
}

.pw__other[hidden] {
  display: none;
}

/* ============================================================
   7. Presets — bundles, not options (navy when applied)
   ============================================================ */

.pw__presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pw__preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}

.pw__preset-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-600); /* gray-500 was 4.1:1 on white */
}

.pw__preset-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}

.pw__preset-glyphs {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.pw__preset-glyphs svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  color: var(--color-gray-400);
}

.pw__preset:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

.pw__preset.is-active {
  border-color: var(--color-navy);
  box-shadow: inset 0 0 0 1px var(--color-navy);
  background: var(--color-gray-50);
}

.pw__preset.is-active .pw__preset-glyphs svg {
  color: var(--color-navy);
}

.pw__preset.is-suggested .pw__preset-eyebrow::after {
  content: ' · suggested';
  color: var(--color-saffron-dark);
}

.pw__preset:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* ============================================================
   8. Station columns (step: services)
   ============================================================ */

.pw__stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pw__station-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pw__station-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.pw__station-head svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  color: var(--color-gray-500);
}

.pw__station-col .pw__chips {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

/* ============================================================
   9. Sliders
   ============================================================ */

.pw__slider {
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

.pw__slider[hidden] {
  display: none;
}

.pw__slider-val {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
  min-height: 30px;
  margin-bottom: var(--space-2);
}

.pw__slider-val:empty::before {
  content: 'Drag to choose';
  color: var(--color-gray-400);
  font-weight: 500;
  font-size: var(--text-base);
}

/* 44px tall hit area with a 6px visible track inside it. */
.pw__range {
  --pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.pw__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-saffron) 0 var(--pct), var(--color-gray-200) var(--pct) 100%);
}

.pw__range::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-saffron) 0 var(--pct), var(--color-gray-200) var(--pct) 100%);
}

.pw__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-saffron);
  box-shadow: 0 2px 6px rgba(198, 110, 10, 0.3);
  cursor: grab;
}

.pw__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-saffron);
  box-shadow: 0 2px 6px rgba(198, 110, 10, 0.3);
  cursor: grab;
}

.pw__range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.pw__range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.pw__slider--untouched .pw__range::-webkit-slider-thumb {
  border-color: var(--color-gray-300);
  box-shadow: none;
}

.pw__slider--untouched .pw__range::-moz-range-thumb {
  border-color: var(--color-gray-300);
  box-shadow: none;
}

.pw__slider--untouched .pw__range::-webkit-slider-runnable-track {
  background: var(--color-gray-200);
}

.pw__slider--untouched .pw__range::-moz-range-track {
  background: var(--color-gray-200);
}

/* Absolute so each label lands on its stop. The track is inset by the thumb
   radius (11px), so the label row is inset to match. */
.pw__slider-ticks {
  position: relative;
  height: 16px;
  margin: 0 11px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-gray-600);
}

.pw__slider-ticks span {
  position: absolute;
  top: 0;
  left: var(--pos, 50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.pw__slider-ticks span:first-child {
  transform: none;
  left: 0;
}

.pw__slider-ticks span:last-child {
  transform: none;
  left: auto;
  right: 0;
}

/* "Not sure yet" is a small escape hatch, not a fifth magnitude on the scale. */
.pw__slider-aside {
  margin-top: var(--space-3);
  max-width: 200px;
}

/* Set aside, not disabled: dim the control, keep the label fully legible. */
.pw__group--set-aside .pw__slider-val,
.pw__group--set-aside .pw__range,
.pw__group--set-aside .pw__slider-ticks {
  opacity: 0.4;
}

.pw__slider-aside .pw-chip__label {
  min-height: 40px;
  font-size: 12.5px;
}

/* ============================================================
   10. The stage — an isometric Lotus floor that assembles itself as
       the visitor configures (the 2000s car-configurator idea: pick a
       part, watch it bolt on). SVG: assets/images/program-stage.svg,
       GENERATED by tools/program-stage/build.js.
   ============================================================ */

.pw__stage {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 38%, #FBFAF8 0%, #F1EDE8 70%, #EAE4DD 100%);
  overflow: hidden;
}

.pw__stage-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 16px 0;
}

.pw__stage-eyebrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.pw__live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-saffron);
  animation: pw-live 2.4s ease-out infinite;
}

@keyframes pw-live {
  0%   { box-shadow: 0 0 0 0 rgba(243, 144, 20, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(243, 144, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 144, 20, 0); }
}

.pw__motion {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -6px 0 -6px 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pw__motion::after {            /* a 44px target around the 24px circle */
  content: '';
  position: absolute;
  inset: -10px;
}

.pw__motion:hover {
  color: var(--color-navy);
  background: rgba(12, 24, 41, 0.07);
}

.pw__motion:focus-visible {
  outline: 2px solid var(--color-saffron-dark);
  outline-offset: 1px;
}

.pw__motion svg {
  stroke: currentColor;
}

.pw__motion-pause,
.pw__motion-play {
  display: inline-flex;
}

.pw__motion-play,
.pw__stage.is-paused .pw__motion-pause {
  display: none;
}

.pw__stage.is-paused .pw__motion-play {
  display: inline-flex;
}

.pw__spec {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw__stage-canvas {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
}

.pw__stage-canvas > svg.pws {
  display: block;
  width: 100%;
  height: 100%;
}

/* Stage failed to load (offline, blocked): the form works without it. */
.pw__stage.is-failed .pw__stage-canvas::before {
  content: 'Preview unavailable. Your answers still build the program.';
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.pw__stage-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 16px 14px;
}

.pw__sentence {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-navy);
  min-height: 2.8em;
  display: flex;
  align-items: center;
}

.pw__sheet-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.pw__sheet-btn svg {
  stroke: currentColor;
}

.pw__sheet-btn:hover,
.pw__sheet-btn[aria-expanded="true"] {
  border-color: var(--color-navy);
}

.pw__sheet-btn[aria-expanded="true"] {
  background: var(--color-navy);
  color: var(--color-white);
}

.pw__sheet-btn:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* --- Close-up: the hovered product at size, top-right of the stage --- */

.pw__showcase {
  position: absolute;
  top: 40px;
  right: 14px;
  z-index: 3;
  width: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(12, 24, 41, 0.14);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

.pw__showcase.is-preview {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0s;
}

.pw__showcase-stage {
  position: relative;
  width: 100%;
  height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pw__turntable {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF 0%, #F1EDE8 62%, #DCD5CC 100%);
  box-shadow: inset 0 -3px 0 rgba(12, 24, 41, 0.07);
}

.pw__showcase-art {
  position: relative;
  width: 78%;
  height: 90%;
  margin-bottom: 7%;
  overflow: visible;
}

.pw__showcase-art.is-turn {
  animation: pw-turn 0.3s var(--ease-out);
}

@keyframes pw-turn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.pw__showcase-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.25;
  text-align: center;
}

/* --- Scene state layers (toggled by program-wizard.js) --- */

.pws .pws-mod,
.pws .pws-unit,
.pws .pws-vol,
.pws .pws-proto,
.pws .pws-hero,
.pws .pws-veh,
.pws .pws-flow,
.pws .pws-crew {
  display: none;
}

.pws .pws-crew,
.pws .pws-roof {
  pointer-events: none;
}

.pws .is-on {
  display: inline;
}

.pws .is-new {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pws-drop 0.55s cubic-bezier(0.2, 0.8, 0.25, 1.12) both;
}

@keyframes pws-drop {
  0%   { opacity: 0; transform: translateY(-26px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Vehicles drive in along the floor's x axis instead of dropping. */
.pws .pws-veh.is-new {
  animation: pws-drive 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes pws-drive {
  from { opacity: 0; transform: translate(34px, 19.6px); }
  to   { opacity: 1; transform: none; }
}

/* Buildings don't drive in — the origin site drops in like a module. */
.pws .pws-site.is-new {
  animation: pws-drop 0.55s cubic-bezier(0.2, 0.8, 0.25, 1.12) both;
}

/* The freighter rides the swell: a slow rise and a slight roll. */
.pws .pws-bob {
  transform-box: fill-box;
  transform-origin: 50% 85%;
  animation: pws-bob 4.6s ease-in-out infinite;
}

/* Settled: five seconds after the last change the floor stops moving (the JS
   wakes it on the next one). Loops freeze where they are; the waving arm and
   the button pulse drop back to their rest pose. A drop-in still running is
   left alone — pausing it would freeze a module mid-air (and the JS clears
   .is-new once a drop-in ends, see wireStage()). */
.pw__stage.is-still .pws *:not(.is-new):not(.pws-fr):not(.pws-act),
.pw__stage.is-still .pw__live {
  animation-play-state: paused;
}

.pw__stage.is-still .pws .pws-hot-ring {
  animation: none;
}

/* The staff and what they're doing (the call bubble, the approved claim) keep
   going after the settle — that's why the head has a pause button (WCAG 2.2.2:
   motion that runs on must be pausable). Paused, everything stops and each
   person rests on the working pose. A drop-in still finishes: a paused,
   finished one is painted at its first frame (see .is-new above). */
.pw__stage.is-paused .pws *:not(.is-new),
.pw__stage.is-paused .pw__live {
  animation-play-state: paused;
}

.pw__stage.is-paused .pws .pws-staff .pws-fr,
.pw__stage.is-paused .pws .pws-act,
.pw__stage.is-paused .pws .pws-hot-ring {
  animation: none;
}

/* Wave marks drift slowly across the water. */
.pws .pws-waves {
  animation: pws-waves 6s ease-in-out infinite alternate;
}

@keyframes pws-waves {
  from { transform: translate(-1.5px, 0.8px); opacity: 0.7; }
  to   { transform: translate(1.5px, -0.8px); opacity: 1; }
}

@keyframes pws-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(1.3px) rotate(0.5deg); }
  65%      { transform: translateY(-0.6px) rotate(-0.4deg); }
}

.pws .pws-flow.is-on .pws-dash {
  animation: pws-flow 1.1s linear infinite;
}

@keyframes pws-flow {
  to { stroke-dashoffset: -20; }
}

/* Empty bays: a dashed footprint, and on the Services step a button — white
   pill, navy outline, saffron "+" badge with a pulse ring — that adds the
   service. The tiles remain the accessible control. */
.pws .pws-ghost {
  pointer-events: none;
  transition: opacity var(--duration-base);
}

.pws .pws-ghost.is-filled {
  opacity: 0;
}

.pws .pws-hot {
  display: none;
}

.pws .pws-hot-bg {
  fill: var(--color-white);
  stroke: var(--color-navy);
  stroke-width: 1.4;
  filter: drop-shadow(0 3px 5px rgba(12, 24, 41, 0.22));
  transition: fill var(--duration-fast);
}

.pws .pws-hot-badge {
  fill: var(--color-saffron);
}

.pws .pws-hot-ring {
  fill: none;
  stroke: var(--color-saffron);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pws-ring 1.8s ease-out infinite;
}

@keyframes pws-ring {
  0%   { opacity: 0.8; transform: scale(1); }
  80%  { opacity: 0; transform: scale(2); }
  100% { opacity: 0; transform: scale(2); }
}

.pws .pws-hot-plus {
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pws .pws-hot text {
  fill: var(--color-navy);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pw__stage[data-pw-at="services"] .pws-ghost:not(.is-filled) .pws-hot {
  display: inline;
  /* No pop-in: Chromium ran that opacity + scale animation on the compositor
     and painted the button about 60% transparent, the person behind it
     showing through — even after it finished — and a settled floor paused it
     at its first frame, so the buttons vanished five seconds into Services.
     The pulse ring draws the eye instead. */
}

.pw__stage[data-pw-at="services"] .pws-ghost:not(.is-filled),
.pw__stage[data-pw-at="services"] .pws-mod.is-on {
  pointer-events: all;
  cursor: pointer;
}

/* Hover: the button fills navy and the bay's footprint lights up. */
.pw__stage[data-pw-at="services"] .pws-ghost:hover > polygon {
  fill: var(--color-saffron);
  fill-opacity: 0.16;
  stroke: var(--color-saffron-dark);
}

.pw__stage[data-pw-at="services"] .pws-ghost--btn:hover .pws-hot-bg {
  fill: var(--color-navy);
}

.pw__stage[data-pw-at="services"] .pws-ghost--btn:hover .pws-hot text {
  fill: var(--color-white);
}

.pw__stage[data-pw-at="services"] .pws-ghost--btn:hover .pws-hot-ring {
  animation: none;
  opacity: 0;
}

.pw__stage[data-pw-at="services"] .pws-mod.is-on:hover {
  opacity: 0.82;
}

/* "Tap a bay to add it" — only on Services, only once the floor is drawn */
.pw__stage-hint {
  position: absolute;
  top: 38px;
  left: 16px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
}

.pw__stage-hint svg {
  stroke: var(--color-saffron);
}

.has-stage .pw__stage[data-pw-at="services"] .pw__stage-hint {
  display: inline-flex;
}

/* The staff: sprites cut from ChatGPT sheets (tools/program-stage/staff.py),
   the four frames of each person's loop stacked on their feet. Frame 1 is the
   rest pose, and it is the working pose, so a settled or reduced-motion floor
   still shows everyone on the job. .pws-loop steps through the frames every
   --t; .pws-burst plays them twice at the start of --t, after --d, then holds
   frame 1 — so every time the floor wakes, each waver gestures once before it
   settles again (a burst timed for the end of the cycle never got to play).
   --t and --d are set per person in the generator. */
.pws .pws-fr {
  opacity: 0;
}

.pws .pws-fr1 {
  opacity: 1;
}

.pws .pws-loop .pws-fr {
  animation: pws-fr var(--t, 2s) step-end infinite;
}

.pws .pws-loop .pws-fr2 { animation-delay: calc(var(--t, 2s) * -0.75); }
.pws .pws-loop .pws-fr3 { animation-delay: calc(var(--t, 2s) * -0.5); }
.pws .pws-loop .pws-fr4 { animation-delay: calc(var(--t, 2s) * -0.25); }

@keyframes pws-fr {
  0%        { opacity: 1; }
  25%, 100% { opacity: 0; }
}

.pws .pws-burst .pws-fr1 { animation: pws-b1 var(--t, 7s) step-end var(--d, 0s) infinite; }
.pws .pws-burst .pws-fr2 { animation: pws-b2 var(--t, 7s) step-end var(--d, 0s) infinite; }
.pws .pws-burst .pws-fr3 { animation: pws-b3 var(--t, 7s) step-end var(--d, 0s) infinite; }
.pws .pws-burst .pws-fr4 { animation: pws-b4 var(--t, 7s) step-end var(--d, 0s) infinite; }

/* frames 2 3 4 1 2 3 4 over the first 14% of the cycle, frame 1 the rest */
@keyframes pws-b1 { 0% { opacity: 0; } 6% { opacity: 1; } 8% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes pws-b2 { 0% { opacity: 1; } 2% { opacity: 0; } 8% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes pws-b3 { 0%, 100% { opacity: 0; } 2% { opacity: 1; } 4% { opacity: 0; } 10% { opacity: 1; } 12% { opacity: 0; } }
@keyframes pws-b4 { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 6% { opacity: 0; } 12% { opacity: 1; } 14% { opacity: 0; } }

/* The floor tech waves while the line is idle and works it, his back to us,
   whenever units are on the belt (.is-working). */
.pws .pws-worker .pws-work,
.pws .pws-worker.is-working .pws-wave {
  display: none;
}

.pws .pws-worker.is-working .pws-work {
  display: inline;
}

/* The desk props' loops (the call and the approved claim). */
.pws .pws-act {
  transform-box: view-box;
}

.pws .pws-host,
.pws .pws-director {
  pointer-events: none;
}

.pws .pws-bubble {
  transform-box: fill-box;
  transform-origin: 60% 100%;
  animation: pws-bubble 4s ease-out infinite;                 /* the call center agent, on a call */
}

@keyframes pws-bubble {
  0%       { opacity: 0; transform: scale(0.4); }
  8%       { opacity: 1; transform: scale(1.08); }
  12%, 70% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: scale(0.9); }
}

.pws .pws-approve {
  transform-box: fill-box;
  transform-origin: center;
  animation: pws-approve 5s ease-out infinite;                /* a warranty claim approved */
}

@keyframes pws-approve {
  0%, 30%   { opacity: 0; transform: scale(0.5); }
  36%       { opacity: 1; transform: scale(1.15); }
  40%, 80%  { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: none; }
}

/* --- Mini renders on option tiles (appear once the stage is loaded) --- */

.pw-chip__art {
  display: none;
}

.has-stage .pw-chip--art .pw-chip__art {
  display: block;
  flex: none;
}

.has-stage .pw-chip--art .pw-chip__icon {
  display: none;
}

/* --- Build sheet: a window sticker over the stage --- */

.pw-sticker {
  position: absolute;
  inset: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(12, 24, 41, 0.18);
  overflow: hidden;
  animation: pw-sheet 0.28s var(--ease-out) both;
}

.pw-sticker[hidden] {
  display: none;
}

@keyframes pw-sheet {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pw-sticker__head {
  flex: none;
  position: relative;
  padding: 12px 52px 12px 16px;
  background: var(--color-navy);
  color: var(--color-white);
}

.pw-sticker__brand {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-saffron-light, #F8B45C);
}

.pw-sticker__model {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.pw-sticker__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-white);
  cursor: pointer;
}

.pw-sticker__close svg {
  stroke: currentColor;
}

.pw-sticker__close:focus-visible {
  outline: 2px solid var(--color-saffron);
  outline-offset: 2px;
}

.pw-sticker__cols {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.pw-sticker__col {
  padding: 12px 16px 14px;
  min-width: 0;
}

.pw-sticker__col + .pw-sticker__col {
  border-left: 1px dashed var(--color-gray-300);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pw-sticker__h {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.pw-sticker__col + .pw-sticker__col .pw-sticker__h {
  margin: 0;
}

.pw-sticker__rows {
  margin: 0;
}

.pw-sticker__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--color-gray-300);
  font-size: 13px;
}

.pw-sticker__row[hidden] {
  display: none;
}

.pw-sticker__row dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-gray-600);
}

.pw-sticker__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
}

.pw-sticker__row.is-empty dd {
  color: var(--color-gray-600);
  font-weight: 500;
}

.pw-sticker__edit {
  padding: 4px 6px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-saffron);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pw-sticker__edit:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
}

.pw-sticker__std {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-gray-800);
}

.pw-sticker__std li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  line-height: 1.35;
}

.pw-sticker__std svg {
  flex: none;
  margin-top: 1px;
  stroke: currentColor;
  color: var(--color-saffron-dark);
}

.pw-sticker__due {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-md);
  text-align: center;
}

.pw-sticker__due-label,
.pw-sticker__due-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.pw-sticker__due strong {
  font-size: 17px;
  text-wrap: balance;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.2;
}

.pw-sticker__path {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-gray-800);
}

.pw-sticker__path .pw-sticker__h {
  margin-bottom: 3px;
}

/* Shared-link note under the model name (a snapshot opened from a link) */
.pw-sticker__shared {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}

.pw-sticker__shared[hidden] {
  display: none;
}

/* Forwarding row: Prepared for · Download PDF · Share link */
.pw-sticker__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-gray-300);
  background: var(--color-gray-50, #F8F6F3);
}

.pw-sticker__for {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.pw-sticker__for span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.pw-sticker__for input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font: inherit;
  font-size: 13px;
  color: var(--color-navy);
}

.pw-sticker__for input:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
}

.pw-sticker__acts {
  display: flex;
  gap: 8px;
}

.pw-sticker__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--color-navy);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
  cursor: pointer;
}

.pw-sticker__act svg {
  stroke: currentColor;
}

.pw-sticker__act:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.pw-sticker__act:focus-visible {
  outline: 2px solid var(--color-saffron);
  outline-offset: 2px;
}

.pw-sticker__act[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.pw-sticker__status {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--color-gray-800);
}

.pw-sticker__status:empty {
  display: none;
}

/* Fallback when jsPDF cannot load: print the build sheet alone. */
@media print {
  body.pw-print-mode * {
    visibility: hidden !important;
  }

  body.pw-print-mode .pw-sticker,
  body.pw-print-mode .pw-sticker * {
    visibility: visible !important;
  }

  body.pw-print-mode .pw-sticker {
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    max-height: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }

  body.pw-print-mode .pw-sticker__cols {
    overflow: visible;
  }

  body.pw-print-mode .pw-sticker__close,
  body.pw-print-mode .pw-sticker__edit,
  body.pw-print-mode .pw-sticker__foot {
    display: none;
  }
}

/* ============================================================
   11. Contact step
   ============================================================ */

.pw__step[data-pw-step="contact"] .form-row {
  margin-bottom: var(--space-3);
}

.pw__more {
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
}

.pw__more summary {
  padding: 10px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
}

.pw__more summary::-webkit-details-marker {
  display: none;
}

.pw__more summary::before {
  content: '+ ';
  color: var(--color-saffron-dark);
  font-weight: 700;
}

.pw__step .form-field--checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.pw__more[open] summary::before {
  content: '– ';
}

.pw__more .form-row {
  padding-bottom: var(--space-3);
}

/* ============================================================
   12. Success panel
   ============================================================ */

.pw__success[hidden] {
  display: none;
}

/* Sent: the thank-you takes the questions' column; the stepper, the floor
   and the build sheet stay. */
.pw__form.is-sent .pw__scroll,
.pw__form.is-sent .pw__nav,
.pw__form.is-sent .pw__stage-hint {
  display: none;
}

.pw__success {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  padding: 4px 6px var(--space-6) 4px;
  margin: -4px -6px 0 -4px;
}

.pw__success-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.pw__success-check {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-saffron);
  color: var(--color-navy);
  display: grid;
  place-items: center;
}

.pw__success-check svg {
  stroke: currentColor;
  stroke-width: 3;
}

.pw__success .pw__title {
  margin-bottom: var(--space-2);
}

.pw__success-sentence {
  margin: 0 0 var(--space-4);
  max-width: 54ch;
  color: var(--color-text-muted);
}

/* Forward it: the lead action */
.pw__forward {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
}

.pw__success .pw__forward-lead {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  max-width: 52ch;
}

.pw__forward-lead strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-lg);
  color: var(--color-navy);
}

.pw__forward-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pw__forward-acts .btn {
  gap: var(--space-2);
}

.pw__forward-acts .btn svg {
  stroke: currentColor;
}

.pw__success .pw__forward-status {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.pw__forward-status:empty {
  display: none;
}

/* What happens next */
.pw__next-h {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pw__next {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.pw__next li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  line-height: 24px;
  color: var(--color-text);
}

.pw__next-n {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-saffron);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-navy);
}

.pw__next li strong {
  color: var(--color-navy);
}

/* Talk sooner: the secondary path */
.pw__success-talk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.pw__success-talk p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pw__success-talk a {
  color: var(--color-navy);
  font-weight: 600;
}

.pw__success-talk .btn {
  min-height: 44px;
}

@media (max-width: 640px) {
  .pw__forward-acts .btn,
  .pw__success-talk .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* The build sheet once sent: no Edit links, no duplicate forward buttons,
   and a stamp. */
.pw-sticker.is-sent .pw-sticker__edit,
.pw-sticker.is-sent .pw-sticker__acts,
.pw-sticker.is-sent .pw-sticker__status {
  display: none;
}

.pw-sticker.is-sent .pw-sticker__for input {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  font-weight: 700;
  color: var(--color-navy);
}

.pw-sticker__stamp {
  position: absolute;
  right: 22px;
  bottom: 74px;
  z-index: 2;
  padding: 6px 12px;
  border: 2px solid var(--color-navy);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
  transform: rotate(-6deg);
  pointer-events: none;
}

/* No entrance animation: the floor's settle pauses animations under the
   stage, and Chromium paints a paused, finished one at its first frame
   (the "+ Add" buttons vanished that way). */

/* Screen-reader-only live region */
.pw__announce {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   13. Short viewports — claw back vertical space
   ============================================================ */

@media (max-height: 820px) {
  .pw--inline {
    padding: var(--space-5) var(--space-6) 0;
  }

  .pw-modal__body {
    padding-top: var(--space-3);
  }

  .pw-modal__head {
    padding-block: var(--space-3);
  }

  .pw__stepper {
    margin-bottom: var(--space-3);
  }

  .pw__hint {
    margin-bottom: var(--space-4);
  }

  .pw__nav {
    padding: var(--space-3) 0 var(--space-4);
  }

  .pw__stage {
    margin-bottom: var(--space-4);
  }

  .pw__chips--cards .pw-chip__label {
    min-height: 86px;
  }

  .pw__chips--cards .pw-chip__art {
    height: 40px;
  }

  /* Short screens: the floor already renders every module, so the service
     tiles fall back to a one-line icon + label and Return stays in view. */
  .has-stage .pw__stations .pw-chip--art .pw-chip__art {
    display: none;
  }

  .has-stage .pw__stations .pw-chip--art .pw-chip__icon {
    display: block;
  }

  .pw__stations .pw-chip--art .pw-chip__label {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding-block: 5px;
  }

  .pw__stations .pw-chip__check {
    top: 50%;
    transform: translateY(-50%);
  }

  /* The stage already shows what a package contains. */
  .pw__preset-glyphs {
    display: none;
  }

  .pw__preset {
    min-height: 0;
  }
}

@media (max-height: 560px) {
  .pw__hint {
    display: none;
  }

  /* Too short for a fixed frame on the page: let it flow, pin the stage
     beside the options and the nav to the bottom of the viewport. */
  .pw--inline .pw__layout {
    height: auto;
  }

  .pw--inline .pw__scroll {
    overflow: visible;
  }

  .pw--inline .pw__stage {
    position: sticky;
    top: calc(var(--header-height-scrolled) + 8px);
    height: calc(100vh - var(--header-height-scrolled) - 24px);
    height: calc(100dvh - var(--header-height-scrolled) - 24px);
  }

  .pw--inline .pw__nav {
    position: sticky;
    bottom: 0;
  }

  .pw__title {
    font-size: var(--text-xl);
  }

  .pw-chip__label {
    min-height: 40px;
    padding-block: 6px;
  }

  .pw__nav {
    padding: var(--space-2) 0 var(--space-3);
  }
}

/* Landscape phones: no room for the floor at all. The form stands alone. */
@media (max-width: 900px) and (max-height: 480px) {
  .pw__stage {
    display: none;
  }
}

/* ============================================================
   14. Tablet and phone
   ============================================================ */

@media (max-width: 1100px) {
  .pw__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-5);
  }

  .pw__config .pw__chips--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones: the stage pins to the top as a strip and the options scroll
   beneath it, so every tap still shows up on the floor. */
@media (max-width: 900px) {
  .pw__layout {
    display: block;
    height: auto;
  }

  .pw-modal__body .pw__layout {
    flex: none;
  }

  .pw-modal__body > .pw__form {
    flex: none;
    display: block;
  }

  .pw__stage {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 210px;
    margin: 0 calc(-1 * var(--space-5)) var(--space-4);
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .pw--inline .pw__stage {
    top: var(--header-height-scrolled);
    margin-inline: calc(-1 * var(--space-5));
  }

  .pw__stage-head {
    padding: 8px 14px 0;
  }

  .pw__stage-canvas {
    padding: 2px 8px;
  }

  .pw__stage-foot {
    padding: 0 14px 8px;
    gap: var(--space-2);
  }

  /* Every pixel of the strip goes to the floor: the sentence stays for
     screen readers, the spec line goes, the sheet button floats. */
  .pw__spec {
    display: none;
  }

  .pw__sentence {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pw__stage-foot {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .pw__sheet-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .pw__config {
    display: block;
  }

  .pw__scroll {
    overflow: visible;
    margin: 0;
    padding: 0 0 var(--space-4);
  }

  /* The build sheet becomes a bottom sheet */
  .pw-sticker {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 86vh;
    max-height: 86dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -12px 40px rgba(12, 24, 41, 0.28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pw-sticker__cols {
    grid-template-columns: 1fr;
  }

  .pw-sticker__col + .pw-sticker__col {
    border-left: 0;
    border-top: 1px dashed var(--color-gray-300);
  }

  .pw__stepper {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: var(--space-3);
  }

  /* Visually hidden, not display:none — the segment buttons need a name. */
  .pw__step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pw__stepcount {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    margin: 0 0 var(--space-2);
  }

  .pw__cols {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .pw__presets {
    grid-template-columns: 1fr;
  }

  .pw__preset {
    min-height: 52px;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  /* The eyebrow carries the "suggested" cue, so it stays — just inline. */
  .pw__preset-eyebrow {
    order: 2;
    font-size: 10px;
  }

  .pw__preset.is-active .pw__preset-eyebrow,
  .pw__preset:not(.is-suggested) .pw__preset-eyebrow {
    display: none;
  }

  .pw__preset.is-suggested .pw__preset-eyebrow {
    display: block;
    color: var(--color-saffron-dark);
  }

  .pw__config .pw__chips,
  .pw__config .pw__chips--4,
  .pw__config .pw__chips--5,
  .pw__config .pw__station-col .pw__chips {
    grid-template-columns: 1fr;
  }

  .pw__config .pw__chips--timeline,
  .pw__config .pw__station-col[data-station="build"] .pw__chips,
  .pw__config .pw__station-col[data-station="return"] .pw__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pw__config .pw__chips--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pw__chips--cards .pw-chip__label {
    min-height: 84px;
    padding-inline: 4px;
  }

  .pw__chips--timeline::before {
    display: none;
  }

  .pw__chips--timeline .pw-chip__label,
  .pw__chips--timeline .pw-chip.is-selected .pw-chip__label {
    min-height: 96px;
    border-color: var(--color-gray-200);
  }

  .pw__chips--timeline .pw-chip.is-selected .pw-chip__label {
    border-color: var(--color-saffron);
  }

  .pw__stations {
    grid-template-columns: 1fr 1fr;
  }

  .pw__station-col[data-station="build"],
  .pw__station-col[data-station="return"] {
    grid-column: 1 / -1;
  }

  /* Labels must never be clipped — a truncated option cannot be chosen. */
  .pw-chip__label {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .pw__chips--cards .pw-chip__label,
  .pw__stations .pw-chip__label {
    font-size: 13px;
    overflow-wrap: normal;
    hyphens: auto;
  }

  /* Explicit two-column grid: flex wrapped the primary button onto its own row
     because "Send My Program" exceeds the space left beside Back. */
  .pw__nav {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    margin: 0 calc(-1 * var(--space-5));
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(12, 24, 41, 0.08);
  }

  .pw__spacer {
    display: none;
  }

  .pw__back {
    grid-column: 1;
  }

  .pw__nav .btn--primary {
    grid-column: 2;
    justify-content: center;
    padding-inline: var(--space-4);
  }

  .pw__nav .lotus-form__status {
    grid-column: 1 / -1;
  }

  .pw__nav .lotus-form__status:empty {
    display: none;
  }

  .pw--inline {
    padding: 0 var(--space-5);
    border-radius: var(--radius-xl);
    overflow: clip;
  }

  .pw-modal {
    padding: 0;
    align-items: stretch;
  }

  .pw-modal__dialog {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .pw-modal__body {
    display: block;
    padding: 0 var(--space-5);
  }

  .pw-modal__body .pw__stepper {
    padding-top: var(--space-3);
  }

  .pw-modal__head {
    padding: var(--space-3) var(--space-4);
  }

  /* Small text has a floor on phones */
  .pw__group-label,
  .pw__slider-ticks,
  .pw-sticker__row dt {
    font-size: 12px;
  }

  /* iOS zooms into any field under 16px */
  .pw__form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .pw__form select,
  .pw__form textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw__step--enter,
  .pw__live,
  .pw__showcase-art.is-turn,
  .pw-sticker,
  .pws .is-new,
  .pws .pws-veh.is-new,
  .pws .pws-flow.is-on .pws-dash,
  .pws .pws-hot-ring,
  .pws .pws-staff .pws-fr,
  .pws .pws-act,
  .pws .pws-bob,
  .pws .pws-waves,

  .pw-modal__dialog,
  .pw-modal__backdrop,
  .pw__showcase {
    transition: none !important;
  }
}