/* ==========================================================================
   Aperi · flow.css — the /start/ lead flow. Tokens and components: base.css.

   One question per screen, full viewport, content centred in a 720px column
   and left-aligned. Steps are stacked absolutely; flow.js moves between them
   with the Web Animations API (springs from base.css), so every transition
   starts from whatever is on screen and can be reversed mid-flight.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Document: the flow owns the viewport, nothing scrolls behind it
   -------------------------------------------------------------------------- */
.flow-doc,
.flow-doc body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.flow-doc body { min-height: 0; }

.flow {
  --flow-col: 720px;
  --opts-w: 560px;
  --q-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);     /* 28 → 44 */
  --a-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);      /* 24 → 36 */
  --top-h: var(--nav-h);
  --pager-space: 96px;
  --progress: 0;

  position: fixed;
  left: 0;
  right: 0;
  /* flow.js mirrors the visual viewport on touch devices, so the on-screen
     keyboard shrinks the flow instead of covering the OK button */
  top: var(--vv-top, 0px);
  height: var(--vv-h, 100dvh);
  overflow: hidden;
  isolation: isolate;
}
@supports not (height: 100dvh) {
  .flow { height: var(--vv-h, 100vh); }
}

/* --------------------------------------------------------------------------
   Atmosphere: calm. A faint dot field and one low glow that drifts with
   progress. It should never compete with the question.
   -------------------------------------------------------------------------- */
.flow__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.flow__bg .bg-grid {
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 8%, transparent 72%);
}
.flow__glow {
  width: min(1100px, 140vw);
  height: 760px;
  left: -18%;
  bottom: -520px;
  opacity: 0.55;
  transform: translateX(calc(var(--progress) * 46vw));
  transition: transform 1600ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   Top chrome: progress line, logo, counter, close
   -------------------------------------------------------------------------- */
.flow-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
/* Content that scrolls under the bar (small screens) fades out beneath it */
.flow-top::before {
  content: "";
  position: absolute;
  inset: 0 0 -20px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, rgba(5, 7, 6, 0) 100%);
  pointer-events: none;
}
.flow-top__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-inline: var(--gutter);
  pointer-events: auto;
}
.flow-top__right { display: flex; align-items: center; gap: 14px; }

.flow-progress {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 2px;
  background: rgba(214, 255, 216, 0.06);
  overflow: hidden;
}
.flow-progress__bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(141, 255, 144, 0.55), var(--green));
  box-shadow: 0 0 12px var(--green-a50);
  transform-origin: left center;
  transform: scaleX(var(--progress));
  transition: transform var(--spring-smooth-ms) var(--spring-smooth);
}

.flow-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: opacity 240ms var(--ease-out);
}
.flow-count__now { display: inline-block; color: var(--text); }
.flow-count__sep { color: var(--text-3); opacity: 0.6; }
.flow-count[data-hidden] { opacity: 0; }

.flow-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    color 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    transform var(--spring-ui-ms) var(--spring-ui);
}
.flow-close svg { width: 16px; height: 16px; }
.flow-close:hover { color: var(--text); background: rgba(238, 243, 238, 0.07); }
.flow-close:active { transform: scale(0.9); transition-duration: 180ms, 180ms, var(--press-ms); }
.flow-close:focus-visible { border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   Stage and steps
   -------------------------------------------------------------------------- */
.flow-stage, .flow-form { position: absolute; inset: 0; margin: 0; }
/* Just after a step change the incoming question ignores the pointer, so a
   double click on OK cannot land on an option sliding in beneath it. The
   pager lives outside the stage and stays live. */
.flow[data-settling] .flow-stage { pointer-events: none; }

.step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--top-h) + env(safe-area-inset-top) + 20px)
    var(--gutter)
    calc(var(--pager-space) + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  visibility: hidden;
  opacity: 0;
  outline: none;
}
.step[data-state="active"],
.step[data-state="leaving"] { visibility: visible; opacity: 1; }
.step[data-state="leaving"] { pointer-events: none; }
.step:focus, .step:focus-visible { outline: none; }

/* margin:auto centres vertically when there is room and falls back to
   top-aligned scrolling when there is not (no clipped first line) */
.step__inner {
  position: relative;
  width: 100%;
  max-width: var(--flow-col);
  margin: auto;
}

/* --------------------------------------------------------------------------
   Question type
   -------------------------------------------------------------------------- */
.q__title {
  position: relative;
  font-size: var(--q-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: pretty;
}
/* "3 →": baseline-aligned to the question through a zero-width strut set
   in the question's own size */
.q__index {
  position: relative;
  /* lift from the baseline so the small figures sit on the question's
     x-height centre rather than reading like a footnote */
  top: -0.13em;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-right: 0.42em;
  color: var(--green);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.q__index::before { content: "\200B"; }
.q__index-n {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.q__index svg { position: relative; top: 1px; width: 14px; height: 14px; flex: none; }
@media (min-width: 960px) {
  /* Wide screens: the index hangs in the margin, so question, answer and
     options share one clean left edge */
  .q__index {
    position: absolute;
    right: 100%;
    top: -0.13em;
    margin-right: 22px;
  }
}
@media (max-width: 959px) {
  /* Narrower: no margin to hang it in, so the index takes its own line and
     the question keeps one clean left edge with the answer */
  .q__index {
    display: flex;
    align-items: center;
    top: 0;
    width: max-content;
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1;
  }
  .q__index::before { display: none; }
  .q__index svg { top: 0; }
}
/* "Nice to meet you, Markus." gets its own quieter line; the question
   proper starts on the next one */
.q__greeting { color: var(--text-2); }
.q__line { display: block; }
.q__greeting[hidden] + .q__line { display: inline; }

.q__helper {
  margin-top: 14px;
  max-width: 36em;
  font-size: 1.125rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-2);
}

.q__control { margin-top: clamp(28px, 4.2vh, 40px); }

/* Big answer input: transparent, a single line beneath that lights green */
.q-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  caret-color: var(--green);
  font-size: var(--a-size);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -1px 0 var(--line-3);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 240ms var(--ease-out);
}
.q-input::placeholder { color: var(--text-3); opacity: 1; }
.q-input:hover { box-shadow: inset 0 -1px 0 rgba(214, 255, 216, 0.34); }
.q-input:focus { box-shadow: inset 0 -2px 0 var(--green); }
.q-input:focus-visible { outline: none; }
.q-input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--danger); }
.q-input:-webkit-autofill,
.q-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s 0s, box-shadow 240ms var(--ease-out);
}
/* Long answers wrap and grow rather than run off as a single line */
.q-input--area {
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  line-height: 1.38;
  resize: none;
  overflow-y: auto;
  min-height: calc(1.38em + 16px);
  max-height: 34vh;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.q__subhint {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Actions row: OK and its error share one slot, so an error never pushes
   the layout around (the same place the user is already looking)
   -------------------------------------------------------------------------- */
.q__actions {
  display: grid;
  align-items: center;
  justify-items: start;
  min-height: 48px;
  margin-top: 28px;
}
.q__actions > * { grid-area: 1 / 1; }
.q__ok {
  display: flex;
  align-items: center;
  gap: 16px;
  transition:
    opacity 200ms var(--ease-out),
    transform var(--spring-ui-ms) var(--spring-ui),
    visibility 0s linear 0s;
}
.step[data-invalid] .q__actions:not(.q__actions--submit) .q__ok,
.step[data-kind="single"]:not([data-show-ok]) .q__ok {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  transition:
    opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out),
    visibility 0s linear 140ms;
}

/* Single choice: OK only appears for "Other" or a revisited answer, so it
   sits just below the options, out of flow, and the question is centred on
   what is actually visible. Showing it (or its error) moves nothing. */
.step[data-kind="single"] .q__actions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.flow-ok { --btn-h: 46px; padding-inline: 22px 20px; gap: 8px; }
.flow-ok svg { width: 15px; height: 15px; flex: none; }

.q__hint {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-3);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .q__hint, .q__subhint { display: inline-flex; }
}

/* Error pill */
.q__error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 10px;
  background: rgba(255, 138, 128, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 128, 0.24);
  color: var(--danger);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.006em;
}
.q__error svg { width: 16px; height: 16px; flex: none; }
.q__error--inline { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Option rows
   -------------------------------------------------------------------------- */
.opts {
  display: grid;
  gap: 10px;
  max-width: var(--opts-w);
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 16px 10px 13px;
  border-radius: var(--r-sm);
  background: rgba(238, 243, 238, 0.028);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    transform var(--spring-ui-ms) var(--spring-ui);
}
.opt--rich { min-height: 74px; padding-block: 14px; align-items: center; }
/* The real control stays in the accessibility tree and takes keyboard focus */
.opt__input {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.opt__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(5, 7, 6, 0.6);
  box-shadow: inset 0 0 0 1px var(--line-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-2);
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}
.opt__text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.opt__label {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.014em;
}
.opt__desc {
  text-wrap: pretty;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: var(--text-2);
}
.opt__check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  color: var(--green);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 140ms var(--ease-out),
    transform var(--spring-bounce-ms) var(--spring-bounce);
}

@media (hover: hover) {
  .opt:hover { background: rgba(238, 243, 238, 0.055); box-shadow: inset 0 0 0 1px var(--line-3); }
  .opt:hover .opt__key { color: var(--text); box-shadow: inset 0 0 0 1px rgba(214, 255, 216, 0.34); }
}
/* Press: lands instantly, releases on a spring */
.opt:active {
  transform: scale(0.98);
  transition-duration: 180ms, 180ms, var(--press-ms);
}

.opt[data-checked] {
  background: var(--green-a10);
  box-shadow: inset 0 0 0 1px var(--green), 0 0 24px -12px var(--green-a50);
}
.opt[data-checked] .opt__key {
  background: var(--green);
  color: var(--green-ink);
  box-shadow: none;
}
.opt[data-checked] .opt__check { opacity: 1; transform: none; }
@media (hover: hover) {
  .opt[data-checked]:hover { background: rgba(141, 255, 144, 0.13); box-shadow: inset 0 0 0 1px var(--green-hi), 0 0 24px -12px var(--green-a50); }
  .opt[data-checked]:hover .opt__key { color: var(--green-ink); box-shadow: none; }
}
/* Keyboard focus is neutral: green means chosen, and arrow keys move focus
   without choosing */
.opt:has(.opt__input:focus-visible) {
  outline: 2px solid rgba(238, 243, 238, 0.72);
  outline-offset: 3px;
}
.opt:has(.opt__input:focus-visible):not([data-checked]) .opt__key {
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(238, 243, 238, 0.5);
}

/* "Other": the last card turns into a text field in place (as Typeform
   does), so nothing moves and the card stays under the pointer. The field
   is overlaid on the card's label; the green card, key and tick stay. */
.q__control { position: relative; }
.opt-other {
  --other-h: 58px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--opts-w);
  height: var(--other-h);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 110ms var(--ease-out),
    visibility 0s linear 110ms;
}
.opt-other__clip { height: 100%; }
.step[data-other-open] .opt-other {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--ease-out) 60ms, visibility 0s linear 0s;
}
/* Sequenced, never overlapping: the label leaves before the field arrives,
   and comes back only once the field has gone */
.opts > .opt:last-child .opt__label { transition: opacity 180ms var(--ease-out) 100ms; }
.step[data-other-open] .opts > .opt:last-child .opt__label { opacity: 0; transition: opacity 90ms var(--ease-out); }
.opt-other__input {
  display: block;
  /* clear the key on the left (13 + 28 + 14) and the tick on the right */
  width: calc(100% - 55px - 44px);
  height: 100%;
  margin: 0 0 0 55px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  caret-color: var(--green);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.014em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.opt-other__input::placeholder { color: var(--text-3); font-weight: 400; opacity: 1; }
.opt-other__input:focus-visible { outline: none; }
@media (hover: hover) {
  /* Hovering the field still reads as hovering its card */
  .q__control:has(.opt-other:hover) .opts > .opt[data-checked]:last-child {
    background: rgba(141, 255, 144, 0.13);
    box-shadow: inset 0 0 0 1px var(--green-hi), 0 0 24px -12px var(--green-a50);
  }
}

/* --------------------------------------------------------------------------
   Welcome
   -------------------------------------------------------------------------- */
.welcome__eyebrow { margin-bottom: clamp(24px, 3.4vh, 36px); }
.welcome__title {
  max-width: 13ch;
  font-size: clamp(2.5rem, 1.2rem + 4vw, 4.5rem);       /* 40 → 72 */
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.034em;
  color: var(--text);
}
.welcome__lead { margin-top: clamp(18px, 2.4vh, 26px); max-width: 30em; }
@media (min-width: 641px) {
  .welcome__lead-line { display: block; }
}
.welcome__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 7px 13px 7px 10px;
  border-radius: var(--r-pill);
  background: var(--green-a06);
  box-shadow: inset 0 0 0 1px var(--green-a28);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--green);
}
.welcome__chip svg { width: 14px; height: 14px; flex: none; }
.welcome__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: clamp(32px, 4.4vh, 44px);
}
.welcome__meta { margin-top: clamp(28px, 4vh, 40px); }

/* --------------------------------------------------------------------------
   Message step: submit, verification and errors
   -------------------------------------------------------------------------- */
.flow-turnstile[data-challenge] { margin-top: 24px; }
.q__actions--submit { margin-top: 28px; }
.flow-submit { min-width: 148px; }
.flow-submit__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(3, 20, 10, 0.25);
  border-top-color: var(--green-ink);
  animation: flow-spin 700ms linear infinite;
}
.flow-submit[data-busy] .flow-submit__spinner { display: inline-block; }
.flow-submit[data-busy] .btn__arrow { display: none; }
.flow-submit[data-busy][aria-disabled="true"] { opacity: 0.82; }
@keyframes flow-spin { to { transform: rotate(360deg); } }

.flow-privacy { margin-top: 18px; }

.submit-error {
  display: grid;
  gap: 14px;
  max-width: var(--opts-w);
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 138, 128, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 128, 0.22);
}
.submit-error__msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
}
.submit-error__msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--danger); }
.submit-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-left: 26px;
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Done
   -------------------------------------------------------------------------- */
.done__mark {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: clamp(28px, 4vh, 40px);
  color: var(--green);
}
.done__mark::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--green-a16), transparent);
  opacity: 0;
}
.done__check { position: relative; width: 100%; height: 100%; }
.done__check circle { stroke-dasharray: 183; stroke-dashoffset: 183; transform: rotate(-90deg); transform-origin: 50% 50%; }
.done__check path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.step--done[data-state="active"] .done__check circle { animation: flow-draw 760ms var(--ease-out) 120ms forwards; }
.step--done[data-state="active"] .done__check path { animation: flow-draw 460ms var(--ease-out) 640ms forwards; }
.step--done[data-state="active"] .done__mark::before { animation: flow-glow 1400ms var(--ease-out) 600ms forwards; }
@keyframes flow-draw { to { stroke-dashoffset: 0; } }
@keyframes flow-glow { 0% { opacity: 0; transform: scale(0.6); } 40% { opacity: 1; } 100% { opacity: 0.55; transform: scale(1); } }

.done__title {
  max-width: 16ch;
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem);   /* 36 → 60 */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.032em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.done__lead { margin-top: 18px; max-width: 32em; overflow-wrap: anywhere; }
.done__lead strong { font-weight: 500; }
.done__actions { margin-top: clamp(32px, 4.4vh, 44px); }

/* --------------------------------------------------------------------------
   Previous / next pill (bottom right)
   -------------------------------------------------------------------------- */
.flow-pager {
  position: absolute;
  right: var(--gutter);
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(14, 18, 15, 0.74);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  transition:
    opacity 240ms var(--ease-out),
    transform var(--spring-ui-ms) var(--spring-ui),
    visibility 0s linear 0s;
}
.flow-pager[data-hidden] {
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s linear 180ms;
}
/* Touch keyboard open: the pill steps aside so the answer and OK get the
   room above the keyboard (flow.js sets data-typing) */
.flow[data-typing] { --pager-space: 24px; }
/* The out-of-flow OK row (single choice) needs its own room to scroll into */
.flow[data-typing] .step[data-kind="single"] .q__actions { padding-bottom: 24px; }
.flow[data-typing] .flow-pager {
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s linear 180ms;
}
.flow-pager__btn {
  width: 42px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    color 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    opacity 160ms var(--ease-out),
    transform var(--spring-ui-ms) var(--spring-ui);
}
.flow-pager__btn svg { width: 16px; height: 16px; }
.flow-pager__btn:hover { background: rgba(238, 243, 238, 0.08); }
.flow-pager__btn:active { transform: scale(0.9); transition-duration: 160ms, 160ms, 160ms, var(--press-ms); }
.flow-pager__btn:disabled { color: var(--text-3); opacity: 0.45; cursor: default; background: none; transform: none; }
.flow-pager__btn:focus-visible { outline-offset: 1px; border-radius: var(--r-pill); }
.flow-pager__sep { width: 1px; height: 18px; background: var(--line-2); }

/* --------------------------------------------------------------------------
   No JavaScript: a plain message in place of the questions
   -------------------------------------------------------------------------- */
html:not(.js) .flow-stage,
html:not(.js) .flow-pager,
html:not(.js) .flow-count,
html:not(.js) .flow-progress { display: none; }
.js .flow-noscript { display: none; }
.flow-noscript {
  position: absolute;
  inset: 0;
  display: flex;
  padding: calc(var(--top-h) + 20px) var(--gutter) 64px;
}
.flow-noscript__inner { width: 100%; max-width: var(--flow-col); margin: auto; display: grid; gap: 20px; justify-items: start; }
.flow-noscript__title {
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.032em;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .flow { --top-h: 58px; --pager-space: 92px; }
  .flow-top__logo { font-size: 1.0625rem; }
  .flow-top__logo .logo__mark { width: 24px; height: 24px; }
  .flow-top__right { gap: 8px; margin-right: -8px; }
  .step { padding-top: calc(var(--top-h) + env(safe-area-inset-top) + 12px); }
  .q__helper { margin-top: 10px; font-size: 1.0625rem; }
  .q__control { margin-top: 26px; }
  .q__actions { margin-top: 22px; }
  .opts { gap: 8px; }
  .opt { min-height: 56px; gap: 12px; padding: 10px 14px 10px 12px; }
  .opt--rich { padding-block: 13px; }
  .opt__label { font-size: 1.0625rem; }
  .opt__desc { font-size: 0.875rem; }
  .opt-other { --other-h: 56px; }
  .opt-other__input { width: calc(100% - 52px - 42px); margin-left: 52px; font-size: 1.0625rem; }
  .flow-pager { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .flow-pager__btn { width: 46px; height: 42px; }
  .welcome__actions .btn { min-width: 160px; }
  .submit-error__actions { padding-left: 0; }
}

/* Short desktop windows (small laptops): tighten the rhythm so six options
   and the OK button still fit without scrolling */
@media (max-height: 760px) and (min-width: 641px) {
  .step { padding-top: calc(var(--top-h) + 4px); padding-bottom: 76px; }
  .q__control { margin-top: 24px; }
  .q__actions { margin-top: 20px; }
  .opts { gap: 8px; }
  .opt { min-height: 52px; padding-block: 8px; }
  .opt--rich { min-height: 68px; padding-block: 11px; }
  .opt-other { --other-h: 52px; }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .flow-progress__bar { transition: transform 200ms linear; }
  .flow__glow { transition: none; transform: none; }
  .opt, .opt__check, .q__ok, .opt-other, .opt__label, .flow-pager, .flow-pager__btn, .flow-close { transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .opt:active, .flow-pager__btn:active, .flow-close:active { transform: none; }
  .done__check circle, .done__check path { stroke-dashoffset: 0; }
  .step--done[data-state="active"] .done__check circle,
  .step--done[data-state="active"] .done__check path,
  .step--done[data-state="active"] .done__mark::before { animation: none; }
  .flow-submit__spinner { animation-duration: 2s; }
}
@media (prefers-reduced-transparency: reduce) {
  .flow-pager { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .opt { border: 1px solid CanvasText; }
  .opt[data-checked] { border: 3px solid Highlight; }
  .q-input { border-bottom: 1px solid CanvasText; }
  .flow-progress__bar { background: Highlight; }
}