/* ============================================================================
   GARPI 2026 | Base layer
   Reset, primitives and the shared control set. Every direction renders the
   same semantic markup from this file; art direction happens in the
   direction stylesheets. Controls therefore behave and read identically to
   assistive technology across all four directions.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  color: var(--fg-strong);
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

::selection { background: var(--accent-wash); color: var(--fg-strong); }

/* -- Focus ---------------------------------------------------------------
   A double ring so the indicator survives any surface it lands on.        */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

/* -- Accessibility helpers ------------------------------------------------ */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--fg-strong);
  color: var(--brand-white);
  font-size: var(--type-small);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================================
   Typographic primitives
   ========================================================================== */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.eyebrow--muted { color: var(--fg-subtle); }

.q-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-subtle);
}

.lead {
  max-width: var(--measure);
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.hint {
  max-width: var(--measure);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--fg-subtle);
  text-wrap: pretty;
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line-strong);
}

/* ============================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--type-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--t-control);
}

.btn__arrow {
  transition: transform calc(var(--dur-fast) * var(--tempo)) var(--ease-standard);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn--primary {
  background: var(--fg-strong);
  border-color: var(--fg-strong);
  color: var(--brand-white);
}
.btn--primary:hover {
  background: var(--brand-navy-mid);
  border-color: var(--brand-navy-mid);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg-muted);
}
.btn--ghost:hover {
  border-color: var(--fg-strong);
  color: var(--fg-strong);
}

.btn--large {
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--type-body);
}

.btn--quiet {
  min-height: 44px;
  padding: var(--space-2) 0;
  /* This one carries a sentence rather than a label – it must be allowed to
     wrap, or it sets a floor no narrow screen can honour. */
  white-space: normal;
  text-align: left;
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  font-weight: 400;
}
.btn--quiet:hover {
  color: var(--fg-strong);
  text-decoration-color: currentColor;
}

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

.field { margin: 0; }
.field + .field { margin-top: var(--space-7); }

.field__legend {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--fg-subtle);
  max-width: var(--measure);
}

.field__control { margin-top: var(--space-4); }

/* ============================================================================
   Choice list – the shared radio control
   ========================================================================== */

.choice-list {
  display: grid;
  gap: var(--space-2);
}

.choice-list--split {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.choice {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  text-align: left;
  cursor: pointer;
}

.choice:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.choice:has(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

.choice[data-selected="true"] {
  border-color: var(--line-ink);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  background: var(--accent-wash);
}

.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.choice__marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-raised);
  transition: border-color calc(var(--dur-fast) * var(--tempo)) var(--ease-standard);
}
.choice[data-selected="true"] .choice__marker { border-color: var(--accent-ink); }

.choice__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-ink);
  transform: scale(0);
}
.choice[data-selected="true"] .choice__dot { transform: scale(1); }

.choice__text,
.choice__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  width: 100%;
  justify-items: start;
  text-align: left;
}

.choice__label {
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.choice[data-selected="true"] .choice__label { color: var(--fg-strong); font-weight: 700; }

.choice__detail {
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--fg-subtle);
  overflow-wrap: anywhere;
}

.choice__check {
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
  opacity: 0;
  transition: opacity calc(var(--dur-fast) * var(--tempo)) var(--ease-standard);
}
.choice[data-selected="true"] .choice__check { opacity: 1; }

/* ============================================================================
   Maturity scale
   Progression is expressed by the rung indicator and the named practice
   level. No numeral is shown, because a numeral on this control would read
   as a score – and no score is ever exposed while the respondent answers.
   ========================================================================== */

.scale {
  display: grid;
  gap: var(--space-2);
}

.scale__option {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 62px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.scale__option:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.scale__option:has(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
}

.scale__option[data-selected="true"] {
  border-color: var(--line-ink);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  background: var(--accent-wash);
}

.scale__option--na {
  margin-top: var(--space-3);
  border-style: dashed;
  background: transparent;
}
.scale__option--na::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) * -1 - 1px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

/* Rungs – one filled rung per step of observed practice. */
.scale__rungs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}

.scale__rung {
  flex: 1;
  border-radius: 1px;
  background: var(--line);
  transform-origin: bottom center;
  transition: background-color calc(var(--dur-base) * var(--tempo)) var(--ease-standard),
              transform calc(var(--dur-base) * var(--tempo)) var(--ease-spring);
}
.scale__rung:nth-child(1) { height: 30%; }
.scale__rung:nth-child(2) { height: 47%; }
.scale__rung:nth-child(3) { height: 64%; }
.scale__rung:nth-child(4) { height: 82%; }
.scale__rung:nth-child(5) { height: 100%; }

.scale__rung[data-on="true"] { background: var(--line-strong); }
.scale__option[data-selected="true"] .scale__rung[data-on="true"] { background: var(--accent-ink); }
.scale__option:hover .scale__rung[data-on="true"] { background: var(--fg-subtle); }
.scale__option[data-selected="true"]:hover .scale__rung[data-on="true"] { background: var(--accent-ink); }

.scale__dash {
  display: grid;
  place-items: center;
  height: 26px;
  color: var(--fg-subtle);
  font-size: var(--type-body);
  letter-spacing: 0.2em;
}

.scale__text,
.scale__copy { display: grid; gap: 3px; min-width: 0; }
.scale__label {
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.scale__option[data-selected="true"] .scale__label { color: var(--fg-strong); font-weight: 700; }
.scale__detail {
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--fg-subtle);
  overflow-wrap: anywhere;
}

/* ============================================================================
   Listbox – a custom select. Never a default browser control.
   ========================================================================== */

.listbox { position: relative; }

.listbox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  text-align: left;
  transition: var(--t-control);
}
.listbox__trigger:hover { border-color: var(--fg-subtle); }
.listbox__trigger[aria-expanded="true"] {
  border-color: var(--line-ink);
  box-shadow: inset 0 0 0 1px var(--line-ink);
}

.listbox__value {
  min-width: 0;
  font-size: var(--type-body);
  color: var(--fg);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.listbox__value[data-placeholder="true"] { color: var(--fg-subtle); }
.listbox[data-filled="true"] .listbox__value { font-weight: 700; color: var(--fg-strong); }

.listbox__chevron {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--fg-subtle);
  transition: transform calc(var(--dur-base) * var(--tempo)) var(--ease-standard);
}
.listbox__trigger[aria-expanded="true"] .listbox__chevron { transform: rotate(180deg); }

.listbox__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 288px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
  background: var(--bg-raised);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius-panel);
  box-shadow: var(--elev-2);
  animation: m-notice-in calc(var(--dur-fast) * var(--tempo)) var(--ease-standard) both;
}
.listbox__panel[hidden] { display: none; }

.listbox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  font-size: var(--type-small);
  line-height: 1.35;
  color: var(--fg);
  cursor: pointer;
}
.listbox__option[data-active="true"] { background: var(--bg-sunken); }
.listbox__option[aria-selected="true"] {
  background: var(--accent-wash);
  color: var(--fg-strong);
  font-weight: 700;
}
.listbox__option[data-active="true"][aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}
.listbox__option > span { min-width: 0; overflow-wrap: anywhere; }
.listbox__option-check { width: 14px; height: 14px; flex: none; opacity: 0; color: var(--accent-ink); }
.listbox__option[aria-selected="true"] .listbox__option-check { opacity: 1; }

/* ============================================================================
   Text input and consent
   ========================================================================== */

.text-field {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: var(--type-body);
  transition: var(--t-control);
}
.text-field::placeholder { color: var(--fg-subtle); }
.text-field:hover { border-color: var(--fg-subtle); }
.text-field:focus { border-color: var(--line-ink); }
.text-field[aria-invalid="true"] { border-color: var(--signal-attention); }

.stack { display: grid; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }

/* Grid items default to min-width:auto, so any child with a wide min-content
   – a nowrap button, a long label – silently widens the track past its
   container and pushes the whole column off a 320px screen. Opting every
   stack child out of that automatic minimum keeps the column honest, and
   makes the child itself responsible for wrapping. */
.stack > * { min-width: 0; }

.label {
  display: block;
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--fg-strong);
}
.label__aside {
  display: block;
  margin-top: 2px;
  font-size: var(--type-caption);
  font-weight: 400;
  color: var(--fg-subtle);
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: var(--bg-sunken);
  border-left: var(--border-emphasis) solid var(--accent);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.consent__box {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  display: grid;
  place-items: center;
  transition: var(--t-control);
}
.consent__box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent-contrast);
  border-bottom: 2px solid var(--accent-contrast);
  transform: rotate(-45deg) scale(0);
  transition: transform calc(var(--dur-fast) * var(--tempo)) var(--ease-spring);
}
.consent__box:checked {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}
.consent__box:checked::after { transform: rotate(-45deg) scale(1); }

.consent__text {
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ============================================================================
   Validation notice – calm, local, specific
   ========================================================================== */

.notice {
  display: none;
  position: relative;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--signal-attention-wash);
  border-radius: var(--radius-control);
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--signal-attention);
}
.notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--border-emphasis);
  background: var(--signal-attention);
  border-radius: var(--radius-control) 0 0 var(--radius-control);
}
.notice:not(:empty) { display: block; }

/* ============================================================================
   Progress
   ========================================================================== */

.progress { display: grid; gap: var(--space-2); }

.progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.progress__step,
.progress__status {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.progress__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.progress__disc {
  --progress-value: 0%;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--progress-value), var(--line) 0);
}

.progress__disc::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--bg);
}

.progress__label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--type-small);
  color: var(--fg-strong);
  text-align: right;
  overflow-wrap: anywhere;
}

.progress__track {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.progress__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
}

.progress__ticks {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-1);
}

.progress__tick {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.progress__tick-bar {
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.progress__tick-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--dur-slow) * var(--tempo)) var(--ease-standard);
}
.progress__tick[data-state="done"] .progress__tick-bar::after { transform: scaleX(1); }
.progress__tick[data-state="current"] .progress__tick-bar::after { transform: scaleX(0.5); }

.progress__tick-label {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.progress__tick[data-state="current"] .progress__tick-label { color: var(--fg-strong); font-weight: 700; }
.progress__tick[data-state="done"] .progress__tick-label { color: var(--fg-muted); }

/* ============================================================================
   Stage actions
   ========================================================================== */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.actions__spacer { flex: 1 1 auto; }

.actions__note {
  flex-basis: 100%;
  font-size: var(--type-caption);
  color: var(--fg-subtle);
}

/* ============================================================================
   Trust strip and reference card
   ========================================================================== */

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-small);
  color: var(--fg-muted);
}
.trust__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.reference {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: var(--border-emphasis) solid var(--accent);
  border-radius: var(--radius-control);
}
.reference__value,
.reference strong {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-strong);
  overflow-wrap: anywhere;
}

/* ============================================================================
   Shared page furniture
   ========================================================================== */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  /* Decorative washes and instrument grids are deliberately bled past the
     edge. `clip` contains them without creating a scroll container, so the
     sticky rails inside still stick to the viewport. `hidden` would break
     them; relying on body{overflow-x:hidden} alone would merely hide a real
     overflow rather than prevent it. */
  overflow-x: clip;
}

.brand-mark { display: block; width: 108px; }

.site-footer {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  font-size: var(--type-caption);
  color: var(--fg-subtle);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  justify-content: space-between;
}

.site-footer__strap {
  font-family: var(--font-display);
  color: var(--fg-muted);
}

.mode-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.mode-flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}


/* ============================================================================
   Small-screen behaviour
   The primary action stays reachable without hunting for it, and no label is
   ever shrunk or clipped to make a layout fit.
   ========================================================================== */

@media (max-width: 768px) {
  .actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-3) var(--gutter);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
  .actions .btn--ghost { flex: 0 1 auto; }
  .actions .btn--quiet { flex: 1 1 100%; }
  .actions__note { order: -1; margin-bottom: var(--space-1); }

  .choice-list--split { grid-template-columns: 1fr; }
  .scale__option { grid-template-columns: 48px 1fr auto; gap: var(--space-3); }
}

@media (max-width: 380px) {
  .choice { gap: var(--space-3); padding: var(--space-3); }
  .scale__option { grid-template-columns: 40px 1fr; padding: var(--space-3); }
  .scale__option .choice__check { display: none; }

  /* At 320 there is no honest way to sit two buttons side by side. Stack them
     and let the labels wrap, rather than clipping them or shrinking the type
     below a comfortable touch target.

     Note: turning the bar into a column re-points flex-basis at the cross
     axis. The note's "flex-basis: 100%" forces a new row while the bar is
     horizontal, but would claim the full height once it is vertical, wrapping
     the buttons into fresh columns off-screen. So every child is reset to its
     natural size and wrapping is switched off. */
  .actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .actions > *,
  .actions .btn,
  .actions .btn--ghost,
  .actions .btn--quiet { flex: 0 0 auto; }
  .actions .btn { white-space: normal; }
  .actions .btn--large { padding-inline: var(--space-4); }
  .actions__spacer { display: none; }
}

/* ============================================================================
   Short-viewport welcome
   On a 1280x720 or 1440x900 laptop the opening view must still land the
   concept AND put the call to action on screen. Rather than shrink the
   headline everywhere, the welcome scene compacts only where vertical space
   is actually scarce. Nothing is hidden; the type simply stops shouting.
   ========================================================================== */

@media (min-width: 901px) and (max-height: 940px) {
  .scene--welcome { padding-block: var(--space-2) 0 !important; }
  .scene--welcome .stack--loose { gap: var(--space-5); }
  .scene--welcome .scene__display {
    font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem);
  }
  .scene--welcome .lead { max-width: 32em; }
}