/* ============================================================
   ShopConnect quiz funnel v4 layer
   Phase A design surface. Loaded after styles.css.
   All classes and custom properties are v4- namespaced.
   ============================================================ */

/* ====== V4 TOKEN CONTRACT (do not rename) ====== */
:root {
  /* Surfaces */
  --v4-page: #ffffff;
  --v4-page-tint: #eef4f1;
  --v4-report: #06120e;
  --v4-report-raised: #0c211a;

  /* Report text and lines */
  --v4-report-ink: #edf4f1;
  --v4-report-muted: #9eb1aa;
  --v4-report-line: rgba(237, 244, 241, 0.13);

  /* Semantic color */
  --v4-teal: oklch(60% 0.10 168);
  --v4-teal-bright: oklch(79% 0.115 168);
  --v4-signal: #d09a4e;
  --v4-signal-soft: rgba(208, 154, 78, 0.17);
  --v4-focus: oklch(83% 0.11 168);

  /* Layout and type */
  --v4-copy: 640px;
  --v4-wide: 1160px;
  --v4-section-y: clamp(48px, 7vw, 96px);

  /* Namespaced radius and shadow additions */
  --v4-radius-card: 22px;
  --v4-radius-inner: 12px;
  --v4-shadow-card:
    0 36px 72px -28px rgba(6, 18, 14, 0.38),
    0 14px 32px -14px rgba(6, 18, 14, 0.24),
    0 2px 8px rgba(6, 18, 14, 0.10);
}

/* ====== PAGE SHELL ====== */
.v4-page [hidden] { display: none !important; }
.v4-page {
  margin: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--v4-page-tint) 0%, rgba(238, 244, 241, 0) 62%),
    var(--v4-page);
  color: var(--ink, #0a1f1a);
  min-height: 100vh;
}

.v4-artifact-stage {
  padding: clamp(16px, 3.5vh, 48px) clamp(12px, 4vw, 32px) 0;
  display: flex;
  justify-content: center;
}

/* ====== BEAT 0: THE REPORT ARTIFACT ====== */
.v4-report-card {
  width: 100%;
  max-width: 660px;
  background:
    linear-gradient(172deg, #0a1c16 0%, var(--v4-report) 46%, #05100c 100%);
  color: var(--v4-report-ink);
  border: 1px solid rgba(237, 244, 241, 0.09);
  border-radius: var(--v4-radius-card);
  box-shadow: var(--v4-shadow-card);
  padding: clamp(18px, 4.5vw, 38px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vw, 20px);
}

/* Title strip */
.v4-report-titlestrip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding-bottom: clamp(10px, 2vw, 16px);
  border-bottom: 1px solid var(--v4-report-line);
}
.v4-report-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(12px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--v4-report-ink);
}
.v4-report-title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--v4-teal-bright);
}
.v4-report-prepared {
  margin: 0;
  font-size: 12.5px;
  color: var(--v4-report-muted);
  letter-spacing: 0.01em;
}

/* Profile chip */
.v4-report-chip {
  align-self: flex-start;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--v4-report-muted);
  background: var(--v4-report-raised);
  border: 1px solid var(--v4-report-line);
  border-radius: 10px;
  padding: 6px 11px;
}

/* Verdict */
.v4-verdict {
  margin: 0;
  font-size: clamp(14.5px, 1.65vw, 17px);
  line-height: 1.5;
  color: var(--v4-report-ink);
  letter-spacing: -0.005em;
  max-width: 56ch;
}
.v4-verdict-lead {
  font-weight: 700;
  color: var(--v4-teal-bright);
}
.v4-verdict-q6 {
  margin: 0;
  font-size: clamp(12.5px, 1.35vw, 13.5px);
  line-height: 1.5;
  color: var(--v4-report-muted);
  border-left: 2px solid var(--v4-teal);
  padding-left: 10px;
  max-width: 56ch;
}

/* The number */
.v4-number {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v4-number-label {
  font-size: clamp(12px, 1.25vw, 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v4-report-muted);
}
.v4-number-figure {
  font-weight: 700;
  font-size: clamp(24px, 6.9vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--v4-report-ink);
  font-feature-settings: "tnum";
}
.v4-number-band { white-space: nowrap; }
.v4-number-unit {
  white-space: nowrap;
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--v4-report-muted);
}
.v4-number-monthly {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 14.5px);
  line-height: 1.5;
  color: var(--v4-report-muted);
  max-width: 52ch;
}

/* Rate band chart: pure CSS, published data only */
.v4-rateband {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(12px, 2.4vw, 18px) clamp(12px, 2.4vw, 18px) clamp(8px, 1.6vw, 12px);
  background: rgba(237, 244, 241, 0.035);
  border: 1px solid var(--v4-report-line);
  border-radius: var(--v4-radius-inner);
}
.v4-rateband-row {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(11.5px, 1.25vw, 13px);
  line-height: 1.45;
  color: var(--v4-report-muted);
}
.v4-rateband-row strong {
  color: var(--v4-report-ink);
  font-weight: 600;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.v4-rateband-key {
  flex: none;
  position: relative;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.v4-rateband-key--you { background: var(--v4-signal); }
.v4-rateband-key--attainable { background: var(--v4-teal-bright); }

.v4-rateband-track {
  position: relative;
  height: clamp(30px, 4.4vw, 40px);
  background: var(--v4-report-raised);
  border: 1px solid var(--v4-report-line);
  border-radius: 8px;
  overflow: hidden;
}
/* Internal, unlabeled scale spanning 2.0 to 4.0. Attainable band 2.2 to 2.5;
   published band 2.9 to 3.6. Ticks are decorative; no axis values render. */
.v4-rateband-seg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 5px;
}
.v4-rateband-seg--attainable {
  left: 10%;
  width: 15%;
  background: linear-gradient(180deg, var(--v4-teal-bright), var(--v4-teal));
}
.v4-rateband-seg--you {
  left: 45%;
  width: 35%;
  background: var(--v4-signal-soft);
  border: 1px solid var(--v4-signal);
  box-shadow: inset 0 0 0 1px rgba(6, 18, 14, 0.35);
}
.v4-rateband-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--v4-report-line);
}

/* Discipline lines */
.v4-report-discipline {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 12px);
  line-height: 1.5;
  color: var(--v4-report-muted);
  max-width: 60ch;
}

/* CTA */
.v4-report-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: clamp(10px, 2vw, 16px);
  border-top: 1px solid var(--v4-report-line);
}
.v4-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--v4-teal-bright), oklch(72% 0.115 168));
  color: #04120d;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: filter 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 10px 22px -10px oklch(70% 0.12 168 / 0.55);
}
.v4-cta:hover { filter: brightness(1.06); }
.v4-cta:focus-visible {
  outline: 2px solid var(--v4-focus);
  outline-offset: 3px;
}
.v4-report-cta-note {
  margin: 0;
  font-size: clamp(11.5px, 1.2vw, 12.5px);
  line-height: 1.5;
  color: var(--v4-report-muted);
  text-align: center;
}

/* ====== MOCKUP CONTROLS (design scaffolding, not funnel UI) ====== */
.v4-mockup-controls {
  max-width: 660px;
  margin: 20px auto 0;
  padding: 0 clamp(12px, 4vw, 32px);
  display: flex;
  justify-content: center;
}
.v4-mockup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3, #5b6b66);
  border: 1px dashed var(--line-2, #d8e1dd);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  user-select: none;
}
.v4-mockup-toggle input {
  accent-color: var(--v4-teal);
  margin: 0;
}
.v4-mockup-toggle input:focus-visible {
  outline: 2px solid var(--v4-teal);
  outline-offset: 2px;
}

/* ====== LANDER BEATS: SHARED RHYTHM ====== */
.v4-beat {
  padding-block: clamp(44px, 7vw, 92px);
}
.v4-beat-inner {
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 32px);
}
.v4-beat-inner--copy { max-width: calc(var(--v4-copy) + 2 * clamp(12px, 4vw, 32px)); }
.v4-beat-inner--cards { max-width: 920px; }
.v4-beat-inner--wide { max-width: var(--v4-wide); }
.v4-beat h2 {
  font-size: clamp(23px, 2.8vw, 32px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 18px;
}

/* ====== BEAT 1: EMPATHY ====== */
.v4-empathy { padding-top: clamp(52px, 8vw, 104px); }
.v4-empathy-p {
  margin: 0 0 22px;
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  line-height: 1.65;
  color: var(--ink-2, #2a3d37);
}
.v4-empathy-p:last-child { margin-bottom: 0; }

/* ====== BEAT 2: UMP, TENSION ====== */
.v4-ump {
  background: linear-gradient(178deg, #0a1a15 0%, var(--v4-report) 70%, #05100c 100%);
  color: var(--v4-report-ink);
  padding-block: clamp(52px, 8vw, 104px);
}
.v4-ump-head { color: var(--v4-report-ink); max-width: 22ch; }
.v4-ump-body {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.65;
  color: #b9c8c2;
  max-width: 58ch;
}

/* ====== BEAT 3: UMS, RELIEF ====== */
.v4-ums {
  background: linear-gradient(180deg, var(--v4-page-tint) 0%, var(--v4-page) 100%);
}
.v4-ums-head { color: var(--ink, #0a1f1a); max-width: 22ch; }
.v4-ums-body {
  margin: 0 0 40px;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.65;
  color: var(--ink-2, #2a3d37);
  max-width: 58ch;
}
.v4-mathcards-head {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep, #1f6b5c);
}
.v4-mathcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.v4-mathcard {
  background: #ffffff;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: var(--v4-radius-inner);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(10, 31, 26, 0.06));
}
.v4-mathcard--a { border-top: 3px solid var(--v4-teal); }
.v4-mathcard--b { border-top: 3px solid var(--v4-report); }
.v4-mathcard-title {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink, #0a1f1a);
}
.v4-mathcard-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2, #2a3d37);
}

/* ====== BEAT 4: OFFER TRANSITION ====== */
.v4-trust {
  list-style: none;
  margin: 0 0 clamp(40px, 6vw, 64px);
  padding: clamp(18px, 3vw, 26px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  border: 1px solid var(--line, #e6ece9);
  border-radius: var(--v4-radius-inner);
  background: #ffffff;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(10, 31, 26, 0.04));
}
.v4-trust-item { display: flex; flex-direction: column; gap: 10px; }
.v4-trust-icon { color: var(--v4-teal); flex: none; }
.v4-trust-item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2, #2a3d37);
}
.v4-call-head { max-width: 22ch; }
.v4-steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v4-step { display: flex; gap: 14px; align-items: flex-start; }
.v4-step-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #04120d;
  background: var(--v4-teal-bright);
  margin-top: 1px;
}
.v4-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #2a3d37);
}
.v4-call-fallback {
  margin: 0 0 36px;
  padding: 14px 16px;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: var(--v4-radius-inner);
  background: var(--v4-page-tint);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2, #2a3d37);
}
.v4-cred { border-top: 1px solid var(--line, #e6ece9); padding-top: 24px; }
.v4-cred-line {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink, #0a1f1a);
}
.v4-cred-bullet {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2, #2a3d37);
}
.v4-cred-bullet::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--v4-teal);
  position: relative;
  top: -1px;
}

/* ====== BEAT 5: INLINE BOOKING ====== */
.v4-booking { scroll-margin-top: 16px; }
/* Programmatic focus target: visible ring for keyboard, quiet for mouse */
.v4-booking:focus-visible {
  outline: 2px solid var(--v4-teal);
  outline-offset: 4px;
  border-radius: 4px;
}
.v4-booking-panel {
  background: #ffffff;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: var(--v4-radius-card);
  box-shadow: var(--shadow-lg, 0 24px 48px -16px rgba(10, 31, 26, 0.12));
  padding: clamp(22px, 4vw, 34px);
}
.v4-booking-head {
  font-size: clamp(21px, 2.4vw, 27px);
  margin-bottom: 20px;
}
.v4-confirm { margin-bottom: 24px; }
.v4-confirm-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: var(--v4-radius-inner);
  background: var(--v4-page-tint);
}
.v4-confirm-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2, #2a3d37);
  overflow-wrap: anywhere;
}
.v4-confirm-line strong { color: var(--ink, #0a1f1a); }
.v4-confirm-micro {
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: var(--ink-3, #5b6b66);
}
.v4-linklike {
  background: none;
  border: none;
  padding: 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--accent-deep, #1f6b5c);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v4-linklike:hover { color: var(--ink, #0a1f1a); }
.v4-linklike:focus-visible {
  outline: 2px solid var(--v4-teal);
  outline-offset: 2px;
  border-radius: 3px;
}
.v4-confirm-edit {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.v4-field { display: flex; flex-direction: column; gap: 5px; }
.v4-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, #5b6b66);
}
.v4-field input {
  font: inherit;
  font-size: 14px;
  color: var(--ink, #0a1f1a);
  padding: 10px 12px;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: 10px;
  background: #ffffff;
  min-height: 0;
}
.v4-field input:focus-visible {
  outline: 2px solid var(--v4-teal);
  outline-offset: 1px;
  border-color: var(--v4-teal);
}
.v4-cta--small {
  width: auto;
  align-self: end;
  justify-self: start;
  padding: 10px 22px;
  font-size: 14px;
}
.v4-picker-label {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink, #0a1f1a);
}
.v4-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.v4-slot {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  font-feature-settings: "tnum";
  color: var(--ink, #0a1f1a);
  background: #ffffff;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: 999px;
  padding: 11px 10px;
  transition: border-color 150ms ease, background 150ms ease;
}
.v4-slot:hover { border-color: var(--v4-teal); background: var(--v4-page-tint); }
.v4-slot:focus-visible { outline: 2px solid var(--v4-teal); outline-offset: 2px; }
.v4-picker-micro {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: var(--ink-3, #5b6b66);
}

/* Confirmed / claimed state: completes the report story on the dark surface */
.v4-confirmed {
  background: linear-gradient(172deg, #0a1c16 0%, var(--v4-report) 60%);
  color: var(--v4-report-ink);
  border-radius: var(--v4-radius-inner);
  padding: clamp(20px, 3.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v4-confirmed:focus-visible {
  outline: 2px solid var(--v4-focus);
  outline-offset: 3px;
}
/* Claimed status strip: echoes the report card's title-strip frame */
.v4-confirmed-strip {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v4-report-line);
}
.v4-claimed-stamp {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--v4-teal-bright);
  border: 1px solid oklch(79% 0.115 168 / 0.55);
  background: oklch(79% 0.115 168 / 0.1);
  border-radius: 6px;
  padding: 6px 10px;
}
.v4-claimed-stamp svg { flex: none; }
.v4-confirmed-head {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--v4-report-ink);
}
.v4-confirmed-p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v4-report-muted);
  overflow-wrap: anywhere;
}
.v4-confirmed-resched {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--v4-report-muted);
}
.v4-confirmed-resched .v4-linklike { color: var(--v4-teal-bright); }
.v4-confirmed-resched .v4-linklike:hover { color: var(--v4-report-ink); }
.v4-confirmed-resched .v4-linklike:focus-visible { outline-color: var(--v4-focus); }

/* ====== FOOTNOTE / COMPLIANCE STRIP ====== */
.v4-footnotes {
  border-top: 1px solid var(--line, #e6ece9);
  padding-block: clamp(28px, 4vw, 44px) 8px;
}
.v4-footnotes p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3, #5b6b66);
  max-width: 88ch;
}
.v4-footnotes-final { font-weight: 650; color: var(--ink-2, #2a3d37); }

/* ====== STICKY MINI-CTA ====== */
.v4-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms;
}
.v4-sticky[data-visible="true"] {
  opacity: 1;
  visibility: visible;
}
.v4-cta--sticky {
  pointer-events: auto;
  width: auto;
  padding: 13px 30px;
  box-shadow:
    0 12px 28px -10px rgba(6, 18, 14, 0.45),
    0 10px 22px -10px oklch(70% 0.12 168 / 0.55);
}

/* ====== QUIZ SCREEN (representative NG3) ====== */
.v4-quiz-stage {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 7vh, 88px) clamp(12px, 4vw, 32px) 0;
}
.v4-quiz-frame {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
}

/* Segmented progress: no numerals; segments flex evenly so Q2 inserts silently */
.v4-progress {
  display: flex;
  gap: 6px;
  margin-bottom: clamp(28px, 5vh, 44px);
}
.v4-progress-seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: var(--line-2, #d8e1dd);
}
.v4-progress-seg--done { background: var(--v4-teal); }
.v4-progress-seg--current {
  background: var(--v4-teal-bright);
  box-shadow: 0 0 0 3px oklch(79% 0.115 168 / 0.22);
}

.v4-quiz-stem {
  margin: 0 0 clamp(20px, 4vh, 30px);
  font-size: clamp(22px, 3vw, 29px);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.25;
  color: var(--ink, #0a1f1a);
}

.v4-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v4-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink, #0a1f1a);
  background: #ffffff;
  border: 1px solid var(--line-2, #d8e1dd);
  border-radius: 14px;
  padding: 15px 16px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.v4-option:hover {
  border-color: var(--v4-teal);
  background: var(--v4-page-tint);
}
.v4-option:focus-visible {
  outline: 2px solid var(--v4-teal);
  outline-offset: 2px;
}
.v4-option-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2, #d8e1dd);
  background: #ffffff;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.v4-option[aria-pressed="true"] {
  border-color: var(--v4-teal);
  background: var(--v4-page-tint);
  box-shadow: inset 0 0 0 1px var(--v4-teal);
}
.v4-option[aria-pressed="true"] .v4-option-mark {
  background: var(--v4-teal);
  border-color: var(--v4-teal);
  color: #ffffff;
}

/* ====== MOCKUP FOOTER ====== */
.v4-mockup-footer {
  margin-top: var(--v4-section-y);
  padding: 18px clamp(12px, 4vw, 32px);
  border-top: 1px solid var(--line, #e6ece9);
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3, #5b6b66);
}

/* ====== MID VIEWPORT ====== */
@media (max-width: 980px) {
  .v4-trust {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .v4-trust-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
  .v4-trust-icon { margin-top: 1px; }
}

@media (max-width: 720px) {
  .v4-mathcards { grid-template-columns: 1fr; }
  .v4-confirm-edit { grid-template-columns: 1fr; }
}

/* ====== NARROW VIEWPORT (artifact must crop cleanly at 360px) ====== */
@media (max-width: 420px) {
  /* styles.css already gives main a 20px phone gutter; do not double it */
  .v4-artifact-stage,
  .v4-mockup-controls,
  .v4-quiz-stage,
  .v4-beat-inner { padding-inline: 0; }
  .v4-artifact-stage { padding-top: 8px; }
  .v4-slots { grid-template-columns: 1fr 1fr; gap: 8px; }
  .v4-slot { font-size: 12.5px; padding: 10px 6px; }
  .v4-booking-panel { padding: 18px 16px; }
  .v4-report-card {
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
  }
  .v4-report-titlestrip { row-gap: 2px; padding-bottom: 8px; }
  .v4-verdict { font-size: 14px; }
  .v4-rateband { gap: 6px; padding: 10px 10px 8px; }
  .v4-cta { padding: 12px 22px; }
  .v4-report-cta-wrap { padding-top: 8px; gap: 7px; }
}

/* ====== MOTION DISCIPLINE ====== */
@media (prefers-reduced-motion: reduce) {
  /* The v4 mockup script tags the root with .v4-root; this overrides the
     base stylesheet's html { scroll-behavior: smooth } for native scrolls.
     Programmatic scrolls additionally pass behavior: "instant". */
  html.v4-root { scroll-behavior: auto; }
  .v4-cta,
  .v4-slot,
  .v4-option,
  .v4-option-mark,
  .v4-sticky { transition: none; }
}