/* ==========================================================================
   VIVID — QUOTE PAGE  (the RFQ; the money page)
   --------------------------------------------------------------------------
   Rhythm: white page-head → INK band (the form) → white (what happens next)
   → RED (talk to a human). Flat colour, hard offsets, 2px borders. No blur,
   no gradient, no price.

   The centrepiece: a WHITE form card standing on the near-black band, thrown
   forward by a solid red offset block, with the live `title` / `notes`
   payload panel beside it.

   Namespace: .q-*   Nothing here leaks to another page.
   ========================================================================== */


/* ==========================================================================
   0. PAGE-LOCAL THEME HOOKS
   --------------------------------------------------------------------------
   Two things on this page cannot be expressed by an existing semantic token,
   so they get page-scoped properties that flip with the theme. Everything else
   resolves through tokens.css.

   --q-code-bg  The <pre> that shows the raw `notes` payload. It has to read as
                RECESSED INTO the ink band. In light the band is near-black, so
                it goes deeper still. In dark the band is the LIFTED graphite
                slab, so a near-black plate would punch a hole clean through the
                page — it becomes a graphite one step DOWN from the slab instead,
                which keeps the band rhythm intact.
   --q-ok-fg    The tick on the success badge. --ok-500 is a deep green in light
                (white tick, 5.6:1) but a BRIGHT green in dark (#35D07F) where a
                white tick is 1.9:1 and vanishes — so the tick goes ink.
   ========================================================================== */
.q-band,
.q-done {
  --q-code-bg: var(--ink-950);
  --q-ok-fg:   var(--white);
}
:root[data-theme="dark"] .q-band,
:root[data-theme="dark"] .q-done {
  --q-code-bg: #171B27;   /* one step DOWN from the dark band — 10.6:1 with body copy */
  --q-ok-fg:   var(--ink-900);   /* ink on #35D07F — 11:1 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .q-band,
  :root:not([data-theme]) .q-done {
    --q-code-bg: #171B27;
    --q-ok-fg:   var(--ink-900);
  }
}


/* ==========================================================================
   1. THE BAND + THE GRID
   ========================================================================== */
.q-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1060px) {
  .q-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 3.5vw, 4rem);
  }
}

.q-main { min-inline-size: 0; }


/* ==========================================================================
   2. THE FORM CARD — white, on ink, on a solid red block.
   ========================================================================== */
.q-card {
  position: relative;
  min-inline-size: 0;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  box-shadow: 10px 10px 0 0 var(--red-500);
}
[dir="rtl"] .q-card { box-shadow: -10px 10px 0 0 var(--red-500); }
@media (max-width: 559px) {
  .q-card { box-shadow: 6px 6px 0 0 var(--red-500); }
  [dir="rtl"] .q-card { box-shadow: -6px 6px 0 0 var(--red-500); }
}

/* The band paints focus rings WHITE and every heading WHITE. Inside the white
   card both would be invisible — put the ink back. */
.q-card :focus-visible { outline-color: var(--focus); }
.q-card h1, .q-card h2, .q-card h3, .q-card h4 { color: var(--text); }


/* ==========================================================================
   3. THE PROGRESS STEPPER
   A hairline rail, a solid red fill, three chunky numbered buttons.
   ========================================================================== */
.q-steps {
  position: relative;
  padding-block-end: var(--sp-6);
  margin-block-end: var(--sp-6);
  border-block-end: var(--bw) solid var(--line-bold);
}

.q-steps__rail {
  position: absolute;
  inset-block-start: 21px;              /* centre of the 42px numeral */
  inset-inline: 21px;
  block-size: 3px;
  /* --line is only 1.4:1 on the dark card — the unfilled rail would disappear. */
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.q-steps__fill {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  background: var(--red-500);
  transition: inline-size var(--dur-4) var(--ease);
}

.q-steps__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.q-steps__item { min-inline-size: 0; }

.q-stepbtn {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  min-block-size: 44px;
  color: var(--text-subtle);
  text-align: center;
  transition: color var(--t-fast);
}
.q-stepbtn:disabled { cursor: not-allowed; }
.q-stepbtn:not(:disabled):hover { color: var(--text); }

.q-stepbtn__n {
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  color: var(--text-muted);
  background: var(--surface);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.q-stepbtn:not(:disabled):hover .q-stepbtn__n { border-color: var(--line-bold); }

.q-stepbtn__t {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* done */
.q-stepbtn.is-done .q-stepbtn__n {
  background: var(--invert-bg);
  border-color: var(--line-bold);
  color: var(--invert-fg);
}
.q-stepbtn.is-done { color: var(--text-2); }

/* live */
.q-stepbtn[aria-current="step"] { color: var(--text); }
.q-stepbtn[aria-current="step"] .q-stepbtn__n {
  background: var(--red-500);
  border-color: var(--red-500);
  color: var(--text-on-red);
}

@media (max-width: 479px) {
  .q-steps__rail { inset-inline: 18px; inset-block-start: 18px; }
  .q-stepbtn__n { inline-size: 36px; block-size: 36px; font-size: var(--fs-sm); }
  .q-stepbtn__t { font-size: var(--fs-3xs); letter-spacing: 0.04em; }
}


/* ==========================================================================
   4. A STEP
   ========================================================================== */
.q-step { min-inline-size: 0; }
.q-step > * + * { margin-block-start: var(--sp-6); }

.q-step__head > * + * { margin-block-start: var(--sp-2); }
.q-step__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
}
.q-step__title {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text);
}
.q-step__hint {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  max-inline-size: 54ch;
}


/* ==========================================================================
   5. THE ?product= PRE-FILL STRIP
   ========================================================================== */
.q-prefill {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-md);
}
.q-prefill__img {
  inline-size: 64px;
  block-size: 64px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--media-bed);
}
.q-prefill__body { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
.q-prefill__k {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
}
.q-prefill__v {
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  overflow-wrap: anywhere;
}
.q-prefill__note { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-subtle); }
.q-prefill__x {
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: var(--bw) solid transparent;
  border-radius: var(--r-xs);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.q-prefill__x:hover { color: var(--line-bold); border-color: var(--line-bold); }
.q-prefill__x svg { inline-size: 16px; block-size: 16px; }


/* ==========================================================================
   6. BAG-TYPE TILES  (a radio group that looks like it was built, not styled)
   ========================================================================== */
.q-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-2);
}

.q-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 52px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  background: var(--surface);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  transition:
    border-color var(--t-fast),
    background-color var(--t-fast),
    color var(--t-fast),
    transform var(--t-fast);
}
.q-tile:hover { border-color: var(--line-bold); transform: translateY(-2px); }

/* The input is the a11y control; the tile is the paint. */
.q-tile__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.q-tile__label { flex: 1 1 auto; min-inline-size: 0; line-height: 1.3; }

.q-tile__tick {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  display: grid;
  place-items: center;
  color: transparent;
  border: var(--bw) solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.q-tile__tick svg { inline-size: 11px; block-size: 11px; }

.q-tile:has(.q-tile__input:checked) {
  background: var(--invert-bg);
  border-color: var(--line-bold);
  color: var(--invert-fg);
}
.q-tile:has(.q-tile__input:checked) .q-tile__tick {
  background: var(--red-500);
  border-color: var(--red-500);
  color: var(--text-on-red);
}
.q-tile:has(.q-tile__input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* the radio group's own invalid state */
.q-field-tiles.is-invalid .q-tiles {
  padding: var(--sp-2);
  margin: calc(-1 * var(--sp-2));
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 2px var(--err-500);
}


/* ==========================================================================
   7. DIMENSIONS  (W × H × gusset) + EXTRAS
   ========================================================================== */
.q-dims__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.q-dims__row .field { flex: 1 1 0; min-inline-size: 0; }
.q-dims__x {
  flex: none;
  margin-block-start: 34px;             /* sits on the input, not on the label */
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  color: var(--text-subtle);
  line-height: 50px;
}
@media (max-width: 559px) {
  .q-dims__row { flex-wrap: wrap; }
  .q-dims__row .field { flex: 1 1 40%; }
  .q-dims__x { display: none; }
}

.q-extras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-2);
}
.q-extra { min-inline-size: 0; }
.q-extra > span { min-inline-size: 0; overflow-wrap: anywhere; }


/* ==========================================================================
   8. ARTWORK FILE  (client-side only — we only ever show the name)
   ========================================================================== */
.q-file {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3);
  border: var(--bw) dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.q-file__btn { flex: none; cursor: pointer; }
/* the input is .sr-only, so the ring has to be painted on its label */
.q-file__input:focus-visible + .q-file__btn {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.q-file__name {
  flex: 1 1 160px;
  min-inline-size: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}
.q-file__name.has-file { color: var(--text); font-weight: var(--fw-heavy); }
.q-file__clear {
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-xs);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.q-file__clear:hover { color: var(--err-500); border-color: var(--err-500); }
.q-file__clear svg { inline-size: 14px; block-size: 14px; }

.q-field-tiles.is-invalid .field__error,
#qFileField.is-invalid .field__error { display: flex; }

.q-consent { align-items: flex-start; padding-block: var(--sp-3); }
.q-consent > span { line-height: var(--lh-normal); }
#qConsentField.is-invalid .q-consent { border-color: var(--err-500); background: var(--err-050); }

.q-noprice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
}
.q-noprice svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--brand-text); }


/* ==========================================================================
   9. THE STEP NAV
   ========================================================================== */
.q-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--bw) solid var(--line-bold);
}
.q-nav__back { flex: none; }
.q-nav__req {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
  text-align: end;
}
.q-nav__next, .q-nav__send { flex: none; }

/* The back arrow is drawn pointing backwards, so it mirrors — and nudges —
   the opposite way to the forward arrow in components.css. */
.q-nav__back .btn__arrow { transform: none; }
[dir="rtl"] .q-nav__back .btn__arrow { transform: scaleX(-1); }
.q-nav__back:hover .btn__arrow { transform: translateX(-3px); }
[dir="rtl"] .q-nav__back:hover .btn__arrow { transform: scaleX(-1) translateX(-3px); }

.q-send__spin { flex: none; border-color: rgba(255, 255, 255, 0.35); border-block-start-color: var(--white); }

@media (max-width: 559px) {
  .q-nav { flex-direction: column-reverse; align-items: stretch; }
  .q-nav__req { text-align: center; order: 1; }
  .q-nav__next, .q-nav__send, .q-nav__back { inline-size: 100%; }
}


/* ==========================================================================
   10. THE SUCCESS SCREEN
   ========================================================================== */
.q-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  min-inline-size: 0;
  animation: qDoneIn var(--dur-4) var(--ease-out) both;
}
@keyframes qDoneIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .q-done { animation: none; } }

.q-done__ico {
  inline-size: 60px;
  block-size: 60px;
  display: grid;
  place-items: center;
  color: var(--q-ok-fg);       /* white on the deep green; INK on the lit green */
  background: var(--ok-500);
  border-radius: var(--r-md);
}
.q-done__ico svg { inline-size: 30px; block-size: 30px; }

.q-done__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text);
}
.q-done__body {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
  max-inline-size: 52ch;
}

.q-done__ref {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--invert-bg);
  border-radius: var(--r-sm);
}
/* The pill is --invert-bg: a solid INK block in light, a solid LIGHT block in
   dark. So its text MUST be --invert-fg — a hardcoded white reference number
   would be white-on-white the moment the page goes dark. The label is the same
   ink/white, held back with opacity rather than a fixed grey (which would only
   ever be right on one of the two plates). */
.q-done__ref-k {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--invert-fg);
  opacity: 0.75;
}
.q-done__ref-v {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  color: var(--invert-fg);
}

.q-done__recap {
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--sp-4);
  background: var(--surface-sunken);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md);
}
.q-recap__k {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.q-recap__t {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  overflow-wrap: anywhere;
}
.q-recap__pre {
  margin-block-start: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.75;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  max-block-size: 220px;
  overflow-y: auto;
}
.q-recap__demo {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
}

.q-done__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.q-done__note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-subtle);
  max-inline-size: 52ch;
}
@media (max-width: 479px) {
  .q-done__actions { inline-size: 100%; }
  .q-done__actions .btn { inline-size: 100%; }
}


/* ==========================================================================
   11. THE SIDEBAR — live payload + reassurance. Both sit ON the ink band.
   ========================================================================== */
.q-side {
  display: grid;
  gap: var(--sp-6);
  min-inline-size: 0;
}
@media (min-width: 1060px) {
  .q-side {
    position: sticky;
    inset-block-start: calc(var(--hdr-h) + var(--sp-5));
  }
}

.q-summary {
  min-inline-size: 0;
  padding: var(--sp-5);
  background: var(--surface-ink-soft);
  border: var(--bw-hair) solid var(--line-on-ink);
  border-radius: var(--r-lg);
}
.q-summary__head > * + * { margin-block-start: var(--sp-2); }
.q-summary__title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text-on-ink);
}
.q-summary__empty {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-ink-subtle);
}

.q-summary__list { margin-block-start: var(--sp-5); display: grid; gap: 0; }
.q-summary__list:empty { margin-block-start: 0; }

.q-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-start: var(--bw-hair) solid var(--line-on-ink);
  min-inline-size: 0;
}
.q-sum:first-child { border-block-start: 0; padding-block-start: 0; }
/* This panel sits ON THE BAND, so its muted tones must come from the ON-INK
   ramp. --text-subtle is tuned for the PAGE and only manages ~3:1 against the
   band in EITHER theme — it fails light and dark alike. */
.q-sum__k {
  flex: 0 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
  overflow-wrap: anywhere;
}
.q-sum__v {
  flex: 1 1 55%;
  min-inline-size: 0;
  margin: 0;
  text-align: end;
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--text-on-ink);
  overflow-wrap: anywhere;
}

/* --- the raw payload. This is literally what gets POSTed. ----------------- */
.q-payload {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw) solid var(--red-500);
  min-inline-size: 0;
}
.q-payload__lead {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-on-ink-subtle);
}
.q-payload__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
  min-inline-size: 0;
}
.q-payload__row--block { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.q-payload__k {
  flex: none;
  align-self: flex-start;
  padding: 3px var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  color: var(--ink-900);   /* pinned: it sits on the light red, in BOTH themes */
  background: var(--red-400);
  border-radius: var(--r-xs);
}
.q-payload__v {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--text-on-ink);
  overflow-wrap: anywhere;
}
.q-payload__pre {
  min-inline-size: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--q-code-bg);
  border: var(--bw-hair) solid var(--line-on-ink);
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.85;
  color: var(--text-on-ink-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  max-block-size: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- why there is no price list ------------------------------------------ */
.q-why { min-inline-size: 0; }
.q-why__title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text-on-ink);
}
.q-why__list { margin-block-start: var(--sp-4); display: grid; gap: var(--sp-4); }
.q-why__item { display: flex; gap: var(--sp-4); min-inline-size: 0; }
.q-why__n {
  flex: none;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--brand-on-ink);
  padding-block-start: 2px;
}
.q-why__body { display: grid; gap: var(--sp-1); min-inline-size: 0; }
.q-why__h {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-ink);
}
.q-why__p {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-ink-muted);
}


/* ==========================================================================
   12. WHAT HAPPENS NEXT  (white band)
   ========================================================================== */
.q-next .fcard__desc [dir="ltr"] { font-weight: var(--fw-bold); }


/* ==========================================================================
   13. THE CLOSING RED BAND
   ========================================================================== */
.q-talk__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .q-talk__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.q-talk__title {
  margin-block-start: var(--sp-3);
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-tight);
  color: var(--text-on-red);
  text-wrap: balance;
}
.q-talk__body {
  margin-block-start: var(--sp-4);
  max-inline-size: 46ch;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-red);
}

.q-talk__lines { display: grid; gap: var(--sp-3); min-inline-size: 0; }
.q-talk__line {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: 64px;
  padding: var(--sp-3) var(--sp-5);
  color: var(--text-on-red);
  background: rgba(255, 255, 255, 0.08);
  border: var(--bw) solid var(--line-on-red);
  border-radius: var(--r-md);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.q-talk__line:hover {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--text);
  transform: translateY(-2px);
}
.q-talk__line svg { inline-size: 22px; block-size: 22px; flex: none; }
.q-talk__line > span { display: grid; gap: 1px; min-inline-size: 0; }
/* NOT opacity. 0.85 white on #DA1920 lands at ~4.0:1 and fails at 11px — on the
   red band hierarchy is carried by SIZE and WEIGHT, and the ink stays pure. */
.q-talk__k {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.q-talk__v {
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  overflow-wrap: anywhere;
}