/* ============================================
   START — Voice Application
   NSS Dark Cosmic + Reading Paper Aesthetic
   ============================================ */

:root {
  /* Cosmic surfaces (matches selfless) */
  --bg: #1a0f1f;
  --cosmic: #0d0a14;

  /* Brand */
  --gold: #f5d87a;
  --gold-soft: #d4a843;
  --gold-dim: rgba(212, 168, 67, 0.35);
  --b-gold: rgba(245, 216, 122, 0.20);
  --purple: rgba(139, 92, 246, 0.5);
  --green: rgba(5, 150, 105, 0.7);
  --green-bright: rgba(5, 150, 105, 1);
  --rose: #db2777;
  --rose-light: #fda4af;

  /* Text ladder (matches selfless) */
  --t1: rgba(255, 255, 255, 0.95);
  --t2: rgba(255, 255, 255, 0.72);
  --t3: rgba(255, 255, 255, 0.50);--lc-text-t3: rgba(255, 255, 255, 0.56);
  --t4: rgba(255, 255, 255, 0.32);--lc-text-t4: rgba(255, 255, 255, 0.56);
  --text: var(--t2);
  --text-dim: var(--t3);
  --text-faint: var(--t4);

  /* Surfaces */
  --surface: rgba(255, 255, 255, 0.04);
  --surface-border: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.025);
  --card-border: rgba(255, 255, 255, 0.06);

  --radius: 3px;
  --radius-card: 20px;

  /* Cream (reading mode) */
  --cream: #f8f6f2;
  --cream-text: #2a2a2a;
  --cream-dim: #5a5a5a;
  --cream-eyebrow: #a08545;

  /* Fonts */
  --f-display: 'Bebas Neue', sans-serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --f-ui: 'Inter', system-ui, sans-serif;
}

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

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---- Cosmic ambient bg (mirrors selfless, flipped horizontally) ----
   Selfless uses 135deg (top-left + bottom-right dark corners). 225deg
   mirrors that across the vertical axis: dark corners are now top-right
   and bottom-left. */
.cosmos {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(225deg,
      #1a0f1f 0%,
      #2a1635 22%,
      transparent 45%,
      transparent 55%,
      #2a1635 78%,
      #1a0f1f 100%),
    linear-gradient(225deg,
      #1a0f1f 0%,
      #2a1635 30%,
      #3d2050 50%,
      #2a1635 70%,
      #1a0f1f 100%);
}
.cosmos canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* ---- Screens ---- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.screen.active {
  display: block;
  opacity: 1;
}

/* Center content for card-based screens (welcome, question, complete, mic-denied, invalid) */
.screen.center-content {
  display: none;
}
.screen.center-content.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---- Bottom-fade on overflow (the house scroll treatment) ----
   Each .screen is its own scroller, so each carries the sitewide
   scroll-fade mask: content dissolves over the last 64px as a "more
   below" cue. scroll-fade.js adds .at-bottom to clear the mask once
   the scroller is at the end — and immediately when there is nothing
   to scroll — so a short screen never wears a fade and the last line
   is never left half-faded.

   ⚠ DUPLICATED from nav.js's NAV_CSS (this page and the fit quiz are
   the two shells that don't load nav.js). Keep the copies identical.

   Safe on a fixed scroller: a mask creates a stacking context but NOT
   a containing block, so the fixed .card-back pill inside still
   anchors to the viewport. (backdrop-filter is what would trap it —
   which is why the pill lives outside the glass card. Measured.) */
.scroll-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), transparent 100%);
}
.scroll-fade.at-bottom {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ============================================
   APPLICATION HEADER (shared — reading + question)
   APPLICATION label + stepped progress bar
   ============================================ */

.app-header {
  position: relative;
  z-index: 2;
  padding: 40px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #d4a843;
  margin-bottom: 18px;
}
.app-eyebrow:empty {
  display: none;
}

/* Welcome: ecosystem label stacked above the card */
.welcome-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-step {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: all 0.3s ease;
}

.app-step.done {
  background: linear-gradient(160deg,
    rgba(5, 150, 105, 0.55) 0%,
    rgba(5, 150, 105, 0.30) 100%);
  border-color: rgba(5, 150, 105, 0.55);
}

.app-step.current {
  background: linear-gradient(160deg,
    rgba(5, 150, 105, 0.75) 0%,
    rgba(5, 150, 105, 0.40) 100%);
  border-color: rgba(5, 150, 105, 0.85);
  box-shadow:
    0 0 0 3px rgba(5, 150, 105, 0.20),
    0 0 14px rgba(5, 150, 105, 0.55);
}

/* ============================================
   WELCOME / SIGNUP SCREEN
   Naked card, more breathing room
   ============================================ */

/* Translucent card — heavier blur + subtle internal gradient for depth */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background:
    linear-gradient(160deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(255, 255, 255, 0.025) 50%,
      rgba(255, 255, 255, 0.008) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-card);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.42),
    0 8px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.card-inner {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(var(--lc-5, 26px), 5vw, var(--lc-6, 34px));
  line-height: 1.2;
  color: var(--t1);
  margin-bottom: 16px;
}

.hero-desc {
  font-family: var(--f-ui);
  font-size: var(--lc-3, 16px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--lc-text-t3, var(--t3));
  max-width: 360px;
  margin-bottom: 28px;
}

.input-group {
  width: 100%;
  max-width: 300px;
  margin-bottom: 14px;
  text-align: left;
}

.input-label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--lc-3, 16px);
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--lc-text-t3, var(--t3));
  margin-bottom: 8px;
}

.contact-input {
  width: 100%;
  padding: 13px 16px;
  background: rgb(0 0 0 / 15%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: var(--t1);
  font-family: var(--f-mono);
  font-size: var(--lc-3, 16px);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-shadow: inset 0px 0px 5px #00000080;
}

.contact-input::placeholder {
  color: var(--t4);
}

.contact-input:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--b-gold);
  box-shadow: 0 0 0 3px rgba(245, 216, 122, 0.08);
}

/* The browser repaints its pale autofill background on every state
   change (notably :focus), so the only reliable mask is an opaque
   inset shadow. #231a2b matches how the dark input reads over the
   glass card. :focus is handled separately below so a focused
   autofilled field stays dark and just gains the gold ring.
   animation-name drives the JS autofill-detection hook. */
.contact-input:-webkit-autofill,
.contact-input:-webkit-autofill:hover,
.contact-input:-webkit-autofill:active,
.contact-input:autofill,
.contact-input:autofill:hover,
.contact-input:autofill:active {
  border: 1px solid rgba(255, 255, 255, 0.10);
  caret-color: var(--t1);
  -webkit-text-fill-color: var(--t1);
  -webkit-box-shadow:
    inset 0 0 0 1000px #231a2b,
    inset 0 0 5px #00000080;
  box-shadow:
    inset 0 0 0 1000px #231a2b,
    inset 0 0 5px #00000080;
  animation-name: onAutofill;
}

.contact-input:-webkit-autofill:focus,
.contact-input:autofill:focus {
  border-color: var(--b-gold);
  -webkit-text-fill-color: var(--t1);
  -webkit-box-shadow:
    inset 0 0 0 1000px #231a2b,
    0 0 0 3px rgba(245, 216, 122, 0.08);
  box-shadow:
    inset 0 0 0 1000px #231a2b,
    0 0 0 3px rgba(245, 216, 122, 0.08);
  animation-name: onAutofill;
}

@keyframes onAutofill {
  from {
    /* no-op — presence of the animation is the signal */
  }
}

.input-error {
  font-size: var(--lc-3, 16px);
  color: var(--rose);
  margin-top: 6px;
  min-height: 18px;
}

/* ---- Buttons (pill-shaped translucent gold gradient) ---- */
.btn-primary {
  margin-top: 14px;
  padding: 13px 32px;
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--b-gold);
  border-radius: 999px;
  background:
    linear-gradient(135deg,
      rgba(245, 216, 122, 0.08) 0%,
      rgba(245, 216, 122, 0.16) 50%,
      rgba(245, 216, 122, 0.06) 100%);
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover:not(:disabled) {
  background:
    linear-gradient(135deg,
      rgba(245, 216, 122, 0.14) 0%,
      rgba(245, 216, 122, 0.24) 50%,
      rgba(245, 216, 122, 0.10) 100%);
  border-color: var(--gold);
  color: #ffeaa3;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 32px rgba(245, 216, 122, 0.18);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-ghost {
  padding: 11px 26px;
  background: transparent;
  color: var(--lc-text-t3, var(--t3));
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-ghost:hover {
  color: var(--t1);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.footnote {
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 400;
  letter-spacing: 1.4px;
  color: var(--lc-text-t4, var(--t4));
  text-transform: uppercase;
}

/* ============================================
   READING PAGE — blog-style on cream paper
   ============================================ */

#screen-reading {
  padding: 0;
}

.reading-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 80px;
}

.reading-surface {
  width: 100%;
  max-width: 680px;
  background: var(--cream);
  border-radius: 8px;
  padding: 52px 56px;
  box-shadow:
    0 1px 0 rgba(212, 168, 67, 0.3),
    0 -1px 0 rgba(5, 150, 105, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Paper texture overlay */
.reading-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* "Previous step" control — a pill in the upper-left corner of the
   viewport, mirroring the modal's close (✕) at upper-right. Fixed, so
   it leaves the content column entirely (which also reclaims its
   height from the centred stack) and lands in the same place on every
   screen of both flows: the application and the fit quiz share this
   one rule. z-index clears .app-header (z 2) and .q-wrap (z 1).

   ⚠ Must NOT be nested inside a backdrop-filter ancestor (.card /
   .card-question): backdrop-filter makes that ancestor the containing
   block for fixed descendants, and the pill then scrolls away with
   the card. In start.html and fit.html the button is a direct child
   of its .screen for exactly this reason. */
.card-back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 6;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--t2);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.card-back::before {
  content: "←";
  margin-right: 7px;
}
.card-back:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--t1);
}
.card-back:focus-visible {
  outline: 2px solid rgba(143, 227, 180, 0.65);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .card-back {
    top: 12px;
    left: 12px;
    padding: 10px 16px;
  }
}

.reading-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(var(--lc-6, 34px), 5vw, var(--lc-7, 48px));
  line-height: 1.2;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 12px;
}

.reading-title:empty {
  display: none;
  margin-bottom: 0;
}

.reading-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--lc-4, 20px);
  line-height: 1.5;
  color: var(--cream-dim);
  text-align: center;
  margin: 0 auto 28px;
  max-width: 480px;
}

.reading-subtitle:empty {
  display: none;
  margin-bottom: 0;
}

.reading-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.5), transparent);
  margin: 0 auto 36px;
}

.reading-body {
  color: var(--cream-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--lc-3, 16px);
  line-height: 1.78;
}

.reading-body p {
  margin-bottom: 20px;
}

.reading-body p:last-child {
  margin-bottom: 0;
}

.reading-body strong {
  font-weight: 600;
  color: #1a1a1a;
}

.reading-body .reading-separator {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.4), transparent);
  margin: 32px auto;
}

/* Continue button now lives outside the cream surface. This row only
   has to centre Continue — the old 3-column grid existed to hang Back
   at the far-left edge, and Back is now a fixed pill in the corner
   (see .card-back), out of the flow entirely. */
.reading-cta {
  width: 100%;
  max-width: 680px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

.btn-continue {
  padding: 14px 44px;
  margin-top: 0;
}

/* ============================================
   QUESTION PAGE — unified text, light record button
   ============================================ */

#screen-question {
  padding: 0;
}

.q-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 40px 24px 80px;
}

.card-question {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  background:
    linear-gradient(160deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(255, 255, 255, 0.025) 50%,
      rgba(255, 255, 255, 0.008) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-card);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.42),
    0 8px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.card-question .card-inner {
  padding: 52px 44px;
}

.q-text {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--lc-4, 20px);
  line-height: 1.5;
  color: var(--t1);
  max-width: 480px;
  margin: 0 auto 36px;
  text-align: center;
}

.q-preamble:empty {
  display: none;
  margin-bottom: 0;
}

/* ---- Contribution (pledge) step: a real header + a description ----
   The pledge prompt carries both the ask and the reasoning behind it.
   As one 21px serif paragraph that read as an undifferentiated run-on
   (and the authored blank lines collapsed), so the step gets a proper
   header with the reasoning below it as body copy. start.js does the
   split and drops the small preamble slot on this step — an authored
   preamble joins the description instead of sitting above the header
   as an eyebrow. */
#screen-input.is-pledge .q-text {
  font-size: clamp(var(--lc-5, 26px), 4.4vw, var(--lc-5, 26px));
  line-height: 1.22;
  max-width: 560px;
  margin-bottom: 16px;
}

.q-desc {
  font-family: var(--f-ui);
  font-size: var(--lc-4, 20px);
  font-weight: 300;
  line-height: 1.7;
  color: rgb(255 255 255 / 75%);
  max-width: 520px;
  margin: 0 auto 30px;
  text-align: justify;
}
.q-desc p + p {
  margin-top: 12px;
}
.q-desc:empty {
  display: none;
  margin-bottom: 0;
}

/* ---- Recorder widget ---- */
.recorder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.recorder.hidden {
  display: none;
}

/* Record button — pill-shaped translucent gold gradient */
.rec-record-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 34px;
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--b-gold);
  border-radius: 999px;
  background:
    linear-gradient(135deg,
      rgba(245, 216, 122, 0.08) 0%,
      rgba(245, 216, 122, 0.16) 50%,
      rgba(245, 216, 122, 0.06) 100%);
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.rec-record-btn:hover {
  background:
    linear-gradient(135deg,
      rgba(245, 216, 122, 0.14) 0%,
      rgba(245, 216, 122, 0.24) 50%,
      rgba(245, 216, 122, 0.10) 100%);
  border-color: var(--gold);
  color: #ffeaa3;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 32px rgba(245, 216, 122, 0.18);
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(219, 39, 119, 0.6);
}

.rec-hint {
  margin-top: 4px;
  font-family: var(--f-serif);
  font-size: var(--lc-2, 14px);
  font-style: italic;
  color: var(--lc-text-t4, var(--t4));
  text-align: center;
  max-width: 380px;
  line-height: 1.55;
}

/* Live recording pill — mirrors .rec-player's frosted-glass shell so the
   recording and playback states share a visual language. Pulse on the
   left, scrolling DAW-style waveform in the middle, live timer on the
   right. The shape, padding, bg, border, and blur are intentionally
   identical to .rec-player below. */
.rec-live-player {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.rec-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 10px rgba(219, 39, 119, 0.7);
  animation: pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.rec-timer {
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* Live DAW-style waveform — fills the middle of the pill. */
.rec-visualizer {
  display: block;
  flex: 1;
  height: 32px;
  min-width: 0;
}

.rec-stop-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  background:
    linear-gradient(135deg,
      rgba(219, 39, 119, 0.10) 0%,
      rgba(219, 39, 119, 0.18) 50%,
      rgba(219, 39, 119, 0.08) 100%);
  border: 1px solid rgba(219, 39, 119, 0.30);
  border-radius: 999px;
  color: var(--rose-light);
  font-family: var(--f-mono);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.rec-stop-btn:hover {
  background:
    linear-gradient(135deg,
      rgba(219, 39, 119, 0.18) 0%,
      rgba(219, 39, 119, 0.28) 50%,
      rgba(219, 39, 119, 0.14) 100%);
  border-color: rgba(219, 39, 119, 0.55);
  transform: translateY(-1px);
}

.rec-stop-icon {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--rose-light);
  flex-shrink: 0;
}

.rec-player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.rec-play-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg,
      rgba(245, 216, 122, 0.10) 0%,
      rgba(245, 216, 122, 0.20) 100%);
  border: 1px solid var(--b-gold);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.rec-play-btn:hover {
  background:
    linear-gradient(135deg,
      rgba(245, 216, 122, 0.18) 0%,
      rgba(245, 216, 122, 0.32) 100%);
  border-color: var(--gold);
  color: #ffeaa3;
}

.play-icon.hidden {
  display: none;
}

.rec-waveform-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rec-scrub-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.rec-scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.1s linear;
}

.rec-duration {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--lc-2, 14px);
  color: var(--text-dim);
  flex-shrink: 0;
}

.rec-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.btn-next {
  padding: 14px 40px;
  margin-top: 0;
}

/* ---- Upload status ---- */
.upload-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--lc-2, 14px);
  color: var(--text-dim);
  margin-top: 16px;
}

.upload-status.hidden {
  display: none;
}

.upload-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface-border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   COMPLETE / MIC DENIED / INVALID SCREENS
   ============================================ */

.complete-icon {
  margin-bottom: 28px;
  opacity: 0;
  transform: scale(0.8);
  animation: fadeScale 0.6s ease 0.2s forwards;
}

@keyframes fadeScale {
  to { opacity: 1; transform: scale(1); }
}

.complete-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--lc-5, 26px);
  line-height: 1.2;
  color: var(--t1);
  margin-bottom: 16px;
}

.complete-desc {
  font-family: var(--f-ui);
  font-size: var(--lc-3, 16px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--lc-text-t3, var(--t3));
  max-width: 380px;
  margin-bottom: 32px;
}

.mic-denied-icon {
  margin-bottom: 28px;
}

.btn-back {
  text-decoration: none;
  display: inline-block;
}

/* ---- Hidden utility ---- */
.hidden {
  display: none !important;
}

/* ============================================
   PREVIEW MODE (admin walking the draft)
   ============================================ */

.preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(212, 168, 67, 0.18);
  border-bottom: 1px solid rgba(212, 168, 67, 0.40);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--f-mono, "IBM Plex Mono", monospace);
  font-size: var(--lc-2, 14px);
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.preview-banner-icon { font-size: 14px; }
.preview-banner-text { flex: 1; line-height: 1.4; }
.preview-banner-close {
  background: none;
  border: 1px solid rgba(212, 168, 67, 0.45);
  border-radius: 6px;
  color: rgba(212, 168, 67, 0.85);
  padding: 4px 12px;
  font: inherit;
  font-size: var(--lc-2, 14px);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.preview-banner-close:hover {
  background: rgba(212, 168, 67, 0.12);
  color: rgba(212, 168, 67, 1);
}

/* "Skip recording in preview" affordance — only rendered on voice steps
   when previewMode is true. Sits below the record button. */
.preview-skip {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: 1px dashed rgba(212, 168, 67, 0.45);
  border-radius: 8px;
  color: rgba(212, 168, 67, 0.85);
  padding: 8px 16px;
  font-family: var(--f-mono, "IBM Plex Mono", monospace);
  font-size: var(--lc-2, 14px);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.preview-skip:hover {
  background: rgba(212, 168, 67, 0.10);
  color: rgba(212, 168, 67, 1);
}

/* ============================================
   INPUT SCREEN (pledge / single / multi / ranked)
   Shares the dark-glass q-wrap/card-question skin with the voice
   question screen. Per-kind input UIs are built dynamically by start.js.
   ============================================ */

#screen-input {
  padding: 0;
}

.input-actions {
  margin-top: 24px;
}

.input-helper {
  font-family: var(--f-mono);
  font-size: var(--lc-3, 16px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* ---- Pledge ---- */
.pledge-input {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 24px auto 8px;
  font-family: var(--f-serif, "Cormorant Garamond", serif);
  color: var(--t1, rgba(255, 255, 255, 0.92));
}
.pledge-prefix {
  font-size: var(--lc-6, 34px);
  color: rgba(255, 255, 255, 0.56);
  font-weight: 300;
}
.pledge-input input {
  width: 140px;
  font-family: inherit;
  font-size: var(--lc-7, 48px);
  font-weight: 400;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.92);
  padding: 4px 4px 8px;
  outline: none;
  letter-spacing: 0.02em;
  transition: border-color 0.2s;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pledge-input input::-webkit-outer-spin-button,
.pledge-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pledge-input input:focus { border-bottom-color: var(--gold, #d4a843); }
.pledge-input input::placeholder { color: rgba(255, 255, 255, 0.18); }
.pledge-suffix {
  font-size: var(--lc-3, 16px);
  color: rgba(255, 255, 255, 0.56);
  margin-left: 4px;
}

/* ---- Choice list (single + multi) ---- */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px auto 0;
  max-width: 420px;
}
.choice-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  font-family: var(--f-sans, "Inter", sans-serif);
  color: rgba(255, 255, 255, 0.86);
}
.choice-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.choice-row.is-selected {
  background: rgba(212, 168, 67, 0.10);
  border-color: rgba(212, 168, 67, 0.55);
  color: rgba(255, 255, 255, 0.96);
}
.choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-marker {
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color 0.18s, background 0.18s;
}
.choice-marker-radio { border-radius: 50%; }
.choice-marker-checkbox { border-radius: 5px; }
.choice-marker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: inherit;
  background: var(--gold, #d4a843);
  transform: scale(0);
  transition: transform 0.18s;
}
.choice-marker-checkbox::after {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.choice-row.is-selected .choice-marker {
  border-color: var(--gold, #d4a843);
}
.choice-row.is-selected .choice-marker::after { transform: scale(1); }
.choice-label {
  font-size: var(--lc-2, 14px);
  line-height: 1.4;
  flex: 1;
}

/* ---- Ranked list ---- */
.ranked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px auto 0;
  max-width: 420px;
}
.ranked-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-family: var(--f-sans, "Inter", sans-serif);
  color: rgba(255, 255, 255, 0.86);
  text-align: left;
  transition: background 0.18s, border-color 0.18s;
}
.ranked-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.ranked-row.is-ranked {
  background: rgba(212, 168, 67, 0.10);
  border-color: rgba(212, 168, 67, 0.55);
  color: rgba(255, 255, 255, 0.96);
}
.ranked-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-mono, "IBM Plex Mono", monospace);
  font-size: var(--lc-2, 14px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.ranked-row.is-ranked .ranked-marker {
  border-color: var(--gold, #d4a843);
  background: rgba(212, 168, 67, 0.20);
  color: var(--gold, #d4a843);
}
.ranked-label {
  font-size: var(--lc-2, 14px);
  line-height: 1.4;
  flex: 1;
}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 600px) {
  .screen.center-content.active {
    padding: 16px 12px;
  }

  .app-header {
    padding: 28px 16px 0;
  }

  .app-eyebrow {
    font-size: var(--lc-3, 16px);
    letter-spacing: 3px;
    margin-bottom: 16px;
  }

  .app-progress {
    gap: 8px;
  }

  .app-step {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }

  .reading-wrap {
    padding: 24px 12px 60px;
  }

  .reading-surface {
    padding: 36px 28px;
    border-radius: 6px;
  }

  .reading-body {
    font-size: var(--lc-3, 16px);
  }

  .reading-title {
    font-size: var(--lc-6, 34px);
  }

  .reading-subtitle {
    font-size: var(--lc-3, 16px);
  }

  .card {
    border-radius: 16px;
  }

  .card-inner {
    padding: 36px 26px;
  }

  .card-question .card-inner {
    padding: 40px 26px;
  }

  .hero-title {
    font-size: var(--lc-5, 26px);
  }

  .q-text {
    font-size: var(--lc-3, 16px);
  }

  /* On mobile, vertically center the recording card on the screen */
  .q-wrap {
    min-height: calc(100vh - 96px);
    align-items: center;
    padding: 24px 12px 40px;
  }

  .rec-player,
  .rec-live-player {
    padding: 12px 14px;
  }

  .rec-actions {
    flex-direction: column;
    width: 100%;
  }

  .rec-actions .btn-ghost,
  .rec-actions .btn-next {
    width: 100%;
    text-align: center;
  }

  .btn-primary {
    padding: 12px 36px;
  }
}
/* Contact field fills with black at 15% — written as rgb(0 0 0 / 15%), which
   is why it reads as a grey slab on the pale form. Focus keeps its gold ring;
   the 3px halo goes to the ink gold so it is visible against white. */
html[data-theme="light"] .contact-input,
html[data-theme="light"] .contact-input:focus {
  background: #ffffff;
  border-color: var(--surface-border);
}
html[data-theme="light"] .contact-input:focus {
  border-color: rgba(161, 98, 7, 0.55);
  box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.12);
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — apply flow

   This sheet flips its token ladder correctly (theme-light.css outranks the
   :root block above), so prose and headings were already fine. What was left
   is everything that hardcodes a dark-mode literal instead of a token: white
   text, white-alpha fills, and the #d4a843 gold that only reads against black.

   Measured on the shipped sheet, on the ground each element actually sits on:

     .app-eyebrow            1.07:1     .pledge-suffix        1.16:1
     .preview-banner-close   1.14:1     .pledge-prefix        1.20:1
     .preview-skip           1.18:1     .ranked-marker        1.31:1
     .ranked-row             1.31:1     .pledge input         1.34:1
     .input-helper           1.34:1     .choice-row           1.38:1
     .preview-banner         1.44:1     .rows when chosen     1.43-1.54:1
     .rec-hint               2.71:1     .footnote             2.77:1
     .input-error            2.90:1     .btn-primary          3.54:1

   The rows and the button are the same story as the profile actions: a 4%
   white fill and a 10% gold wash are lit surfaces against black and nothing
   at all against a pale page, so the choice rows read as unbounded text and
   the selected state is indistinguishable from the unselected one. They get
   real fills, and selection is carried by a gold tint plus a gold edge that
   both actually register.
   ════════════════════════════════════════════════════════════ */

/* ── The card the whole flow sits in ──
   Its base was a 20%-black-to-white-alpha gradient with a 10% white edge and
   a 0 24px 72px black shadow: dark-mode construction throughout. On a pale
   page the black stop turns the top of the card into a muddy grey-brown —
   measured rgb(178,170,165) where the eyebrow sits — the white edge vanishes,
   and the shadow reads as dirt rather than lift. It takes the same near-white
   base and tinted elevation the shared .panel-card already uses, so the apply
   flow sits on the same rung of the value ladder as the rest of the site.
   Everything below is measured against this corrected ground. */
html[data-theme="light"] .card {
  background: #f6f4fb;
  border-color: var(--card-border);
  box-shadow: var(--elev-3);
}

/* ── Choice / ranked rows ── */
html[data-theme="light"] .choice-row,
html[data-theme="light"] .ranked-row {
  background: #ffffff;
  border-color: var(--surface-border);
  color: var(--t1);
}
html[data-theme="light"] .choice-row:hover,
html[data-theme="light"] .ranked-row:hover {
  background: #f7f6fb;
}
html[data-theme="light"] .choice-row.is-selected,
html[data-theme="light"] .ranked-row.is-ranked {
  background: #fdf6e7;
  border-color: rgba(161, 98, 7, 0.45);
  color: var(--t1);
}
html[data-theme="light"] .ranked-marker {
  color: var(--t2);
}
html[data-theme="light"] .ranked-row.is-ranked .ranked-marker {
  background: rgba(161, 98, 7, 0.16);
  color: #78350f;
}

/* ── The pledge field ──
   The amount is the largest thing on its step at 52px and was white on white.
   Prefix and suffix step down the ink ladder rather than fading toward the
   page, and the placeholder deepens to 0.62 — --t4 (0.46) measures 2.84:1
   here, which is under even for a hint. */
html[data-theme="light"] .pledge-input input {
  color: var(--t1);
  border-bottom-color: var(--surface-border);
}
html[data-theme="light"] .pledge-input input::placeholder {
  color: rgba(17, 17, 27, 0.62);
}
html[data-theme="light"] .pledge-input input:focus {
  border-bottom-color: #78350f;
}
html[data-theme="light"] .pledge-prefix,
html[data-theme="light"] .pledge-suffix {
  color: var(--t2);
}

/* ── Small type ──
   --t4 is the faint end of the ladder and lands at 2.7-2.9:1 on these
   grounds. 0.68 keeps them clearly secondary while clearing 4.5. The error
   line takes the deep rose: --rose (#db2777) measures 2.90:1, and an error
   is the one label that must never be the faint one. */
html[data-theme="light"] .footnote,
html[data-theme="light"] .rec-hint,
html[data-theme="light"] .input-helper,
html[data-theme="light"] .contact-input::placeholder {
  color: rgba(17, 17, 27, 0.68);
}
html[data-theme="light"] .input-error {
  color: #9f1239;
}

/* ── Gold that only worked on black ──
   #d4a843 and rgba(212,168,67,·) are the dark-mode gold; on a pale page they
   are between 1.07 and 1.18:1. The eyebrow and the two preview actions take
   the deep amber, one stop below the light gold, which small type needs. */
html[data-theme="light"] .app-eyebrow,
html[data-theme="light"] .preview-banner-close,
html[data-theme="light"] .preview-skip {
  color: #78350f;
}
html[data-theme="light"] .preview-banner-close {
  border-color: rgba(120, 53, 15, 0.45);
}
html[data-theme="light"] .preview-banner-close:hover,
html[data-theme="light"] .preview-skip:hover {
  background: rgba(120, 53, 15, 0.10);
  color: #5c2d0b;
}
html[data-theme="light"] .preview-banner {
  background: rgba(161, 98, 7, 0.14);
  border-bottom-color: rgba(161, 98, 7, 0.40);
  color: var(--t1);
}

/* ── The primary actions ──
   Gold ink on a gold wash, 3.54:1. Same fix as the profile's Connect: a real
   white surface, so the label stands on white (9.1:1) and the border draws
   the control. The hover was #ffeaa3 — a pale yellow meant to brighten
   against black, which on a white pill is near-white on near-white, so the
   button would vanish exactly when pointed at. It deepens instead. */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .rec-record-btn,
html[data-theme="light"] .rec-play-btn {
  background: #ffffff;
  border-color: rgba(120, 53, 15, 0.42);
  color: #78350f;
}
html[data-theme="light"] .btn-primary:hover:not(:disabled),
html[data-theme="light"] .rec-record-btn:hover,
html[data-theme="light"] .rec-play-btn:hover {
  background: #fdf8ef;
  border-color: #78350f;
  color: #5c2d0b;
}

/* Group applications inherit the updated quiz's display scale and glass panel.
   Mobile content width = viewport - 32px gutters - 40px panel padding. */
.group-application {
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 26px;
  --fs-6: 34px;
  --fs-7: 48px;
}
.group-application #screen-welcome .app-eyebrow { display: none; }
.group-application .welcome-stack { width: 100%; max-width: 640px; }
.group-application #screen-welcome .card { max-width: 640px; }
/* 544px content + 48px padding on each side = 640px card. */
.group-application #screen-welcome .card-inner { padding: 48px; }
.group-application #screen-welcome .hero-title {
  font: 500 var(--fs-7)/1.12 var(--f-serif);
  text-wrap: balance;
}
@media (max-width: 760px) {
  .group-application #screen-welcome .card-inner { padding: 32px 24px; }
  .group-application #screen-welcome .hero-title { font-size: var(--fs-6); }
}
.group-application .q-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: 1384px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  min-height: 0;
}
.group-application .card-question {
  max-width: 1040px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: rgba(255,255,255,.042);
  box-shadow: 0 28px 76px rgba(7,2,15,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
.group-application .card-question .card-inner { padding: 40px 42px; }
.group-application .q-text,
.group-application #screen-input.is-pledge .q-text {
  max-width: 820px;
  margin: 0 auto 32px;
  color: var(--t1);
  font: 500 var(--fs-7)/1.12 var(--f-serif);
  text-align: center;
  text-wrap: balance;
}
.group-application .q-desc {
  max-width: 680px;
  font: 400 var(--fs-4)/1.65 var(--f-ui);
  color: var(--t2);
  text-align: left;
}
.group-application .application-guide {
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(10,4,17,.32);
  color: var(--t2);
  text-align: left;
  font: var(--fs-3)/1.6 var(--f-ui);
}
.group-application .application-guide h2 { margin: 0 0 16px; color: var(--t1); font: 500 var(--fs-5)/1.4 var(--f-ui); }
.group-application .application-guide p + p { margin-top: 16px; }
.group-application .application-guide[hidden] { display: none; }
.group-application #screen-question .app-eyebrow,
.group-application #screen-input .app-eyebrow { display: none; }
.group-application .app-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  margin: 16px auto 0;
}
.group-application .application-step-label {
  flex-basis: 100%;
  margin-bottom: 8px;
  text-align: center;
  color: var(--t2);
  font: var(--fs-2)/1.5 var(--f-ui);
}
.group-application .app-step { flex: 1; height: 3px; border: 0; border-radius: 99px; background: rgba(255,255,255,.13); }
.group-application .app-step.done { background: rgba(255,255,255,.42); }
.group-application .app-step.current { background: var(--t1); }
.group-application .rec-hint { display: none; }
.group-application .rec-record-btn {
  background: var(--gold);
  color: #24152d;
  border-color: var(--gold);
  font: 600 var(--fs-3)/1.5 var(--f-ui);
  letter-spacing: 0;
  text-transform: none;
}
.group-application .rec-record-btn:hover { background: #ffe69a; color: #24152d; }
/* Legible Cosmos: body 16px, lead 20px, controls/metadata at least 14px.
   The question remains the screen's single 48px display heading. */
.group-application .hero-desc { font: var(--fs-4)/1.6 var(--f-ui); color: var(--t2); }
.group-application .input-label,
.group-application .input-error,
.group-application .upload-status,
.group-application .rec-timer,
.group-application .rec-duration { font-size: var(--fs-2); }
.group-application .input-label { color: var(--t2); }
.group-application .input-helper { font: var(--fs-2)/1.6 var(--f-ui); color: var(--t2); }
.group-application .contact-input { font-size: var(--fs-3); color: var(--t1); }
.group-application .contact-input::placeholder { color: var(--t3); }
.group-application .btn-primary,
.group-application .btn-ghost,
.group-application .rec-stop-btn {
  font: 500 var(--fs-3)/1.5 var(--f-ui);
  letter-spacing: 0;
  text-transform: none;
}
.group-application .pledge-input input { font-size: var(--fs-6); color: var(--t1); }
.group-application .pledge-input input::placeholder { color: var(--t3); }
.group-application .pledge-prefix { font-size: var(--fs-6); color: var(--t2); }
.group-application .pledge-suffix { font: var(--fs-3)/1.5 var(--f-ui); color: var(--t2); }
/* Desktop rail: 280px × 1.25 = 350px. Remaining viewport holds the card
   with 32px clearance on either side. 350 + 64 + 586 = 1000px. */
@media (min-width: 1000px) {
  .group-application #screen-question,
  .group-application #screen-input { padding-left: 350px; }
  .group-application #screen-question > .card-back,
  .group-application #screen-input > .card-back { left: calc(350px + 24px); }
  .group-application .q-wrap { display: flex; }
  .group-application .application-guide {
    position: fixed;
    inset: 0 auto 0 0;
    width: 350px;
    height: 100dvh;
    overflow-y: auto;
    padding: 96px 24px 32px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.09);
    border-radius: 0;
  }
}
@media (max-width: 999px) {
  .group-application .q-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  /* Back pill: 12px top + 36px height + 24px clearance. */
  .group-application .app-header { padding-top: 72px; }
  .group-application .q-wrap { padding: 24px 16px 40px; }
  .group-application .card-question { border-radius: 20px; }
  .group-application .card-question .card-inner { padding: 24px 20px; }
  .group-application .q-text,
  .group-application #screen-input.is-pledge .q-text { font-size: var(--fs-6); }
  .group-application .q-desc { font-size: var(--fs-3); }
}

/* At 1200px: viewport - 350px rail - 64px gutters - 84px padding
   - 32px gap - 260px amount column leaves 410px for the explanation. */
@media (min-width: 1200px) {
  .group-application #screen-input.is-pledge .card-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 32px;
    align-items: start;
  }
  .group-application #screen-input.is-pledge .q-text { grid-column: 1; grid-row: 1; text-align: left; text-wrap: pretty; }
  .group-application #screen-input.is-pledge .q-desc { grid-column: 1; grid-row: 2; margin: 0; }
  .group-application #screen-input.is-pledge .contribution-entry-card { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
  .group-application #screen-input.is-pledge .pledge-input { margin-top: 0; }
}
.group-application .contribution-entry-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 24px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  background: rgba(10,4,17,.28);
  box-shadow: 0 16px 40px rgba(7,2,15,.18);
}
.group-application .contribution-entry-card .pledge-input input { width: 100px; min-width: 0; }
.group-application .contribution-entry-card .input-actions { margin-top: 0; }
.group-application .contribution-entry-card .btn-primary { width: 100%; white-space: normal; }