/*
 * CODEX FULL-FUNNEL SKIN v2
 * Pure presentation layer over the 2026-09-02 W1 canonical source.
 * Shared visual geometry; no content, routing, form or submission changes.
 */

:root {
  /* ===== FUNNEL LAYOUT CONSTANTS (Roman, 2026-09-14) =====
   * Every card — existing or new — takes its widths, gutters and control sizes
   * from here. Never hardcode a width on a card. The JS layout owner
   * (codex-accessibility-v3.js → applyDeterministicLayout: standardAxis,
   * EYEBROW_TOP_*, TITLE_GAP_*, TITLE_TOP_NO_EYEBROW_*) carries the same values.
   *   content column (desktop) : min(817px, calc(100% - 72px)), centered
   *   content column (phone)   : 100% of <main> (main padding 14px 16px 16px)
   *   action rail (desktop)    : 849px, CTA min-width 236px, height --funnel-control-height
   *   eyebrow / title axis     : desktop 100px / 125px · phone 152px / 175px (from card top)
   *   board (welcome/info box) : .w1-welcome — reuse the class, do not redraw it
   */
  --funnel-content-max: 817px;
  --funnel-content-gutter: 72px;
  --funnel-content-width: min(var(--funnel-content-max), calc(100% - var(--funnel-content-gutter)));
  --funnel-rail-width: 849px;
  --funnel-cta-min-width: 236px;
  --funnel-mobile-gutter: 16px;
  --funnel-field-height: 56px;
  --funnel-radius-field: 12px;
  --funnel-radius-cta: 14px;
  --cx-night: #090d14;
  --cx-night-2: #0d131e;
  --cx-panel: rgba(18, 25, 38, .78);
  --cx-panel-strong: rgba(21, 29, 44, .94);
  --cx-cream: #f3e8d6;
  --cx-white: #fbfaf7;
  --cx-muted: #a9b1bf;
  --cx-soft: #d5d9df;
  --cx-line: rgba(184, 198, 222, .18);
  --cx-line-strong: rgba(213, 223, 240, .30);
  --cx-burgundy: #96304b;
  --cx-burgundy-deep: #5b1427;
  --cx-rose: #df6d83;
  --cx-gold: #ddb967;
  --cx-indigo: #12162d;
  --cx-indigo-2: #181d3d;
  --cx-green: #081b18;
  --cx-green-2: #0d2922;
  --cx-cyan: #1ca7c1;
  --cx-focus: #f5d688;
}

/* Final V1/V2 opening contract: one heading on mobile, station title on desktop. */
@media (max-width: 799px) {
  html body section.card#v1-0 > main > .v1-opening-desktop-title,
  html body section.card#v2-1 > main > .stage-title {
    display: none !important;
    visibility: hidden !important;
  }
}

/* V2 contact card: compact, balanced desktop layout. */
#v2-contact .contact-channels-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#v2-contact .contact-channels-row .chip {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
}
@media (min-width: 800px) {
  #v2-contact .fpair {
    margin-bottom: 10px !important;
  }
  #v2-contact .contact-channels-row {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  #v2-contact .consent,
  #v2-contact label.consent {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }
  #v2-contact .v2-verification {
    margin-top: 0 !important;
    padding: 8px 10px !important;
  }
  #v2-contact .v2-submit-status {
    margin-top: 4px !important;
  }
}
@media (max-width: 799px) {
  #v2-contact .contact-channels-row {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

@media (min-width: 800px) {
  html body section.card#v1-0 > main > .v1-opening-desktop-title {
    display: block !important;
    visibility: visible !important;
  }
}

html,
body {
  color: var(--cx-white) !important;
  background: var(--cx-night) !important;
  font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
}

body::before {
  background:
    radial-gradient(980px 520px at 54% -180px, rgba(137, 47, 75, .18), transparent 67%),
    radial-gradient(720px 520px at 104% 92%, rgba(57, 78, 121, .12), transparent 68%),
    linear-gradient(155deg, #100d15 0%, var(--cx-night-2) 48%, var(--cx-night) 100%) !important;
}

body:has(#v5-0.on)::before,
body:has(#v5.on)::before,
body:has(#v5-no.on)::before,
body:has(#info-v5.on)::before {
  background:
    radial-gradient(900px 520px at 62% -170px, rgba(84, 91, 185, .27), transparent 70%),
    linear-gradient(150deg, #191d3d 0%, var(--cx-indigo) 53%, #0a0e1a 100%) !important;
}

body:has(#z4.on)::before,
body:has(#z-thanks.on)::before {
  background:
    radial-gradient(900px 540px at 62% -190px, rgba(49, 126, 102, .25), transparent 70%),
    linear-gradient(150deg, var(--cx-green-2) 0%, var(--cx-green) 55%, #06110f 100%) !important;
}

.card,
.card.on,
.card.v1,
.card.v2,
.card.v2-thanks,
.card.paper,
.card.v2.phase {
  color: var(--cx-white) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.form-q,
.v2-title,
.thanks-lead,
.thanks-hello,
.status-h,
.pass-title,
.cover-title,
.stage-title {
  color: var(--cx-cream) !important;
  font-family: "Avenir Next", Avenir, Montserrat, Inter, sans-serif !important;
  letter-spacing: -.035em !important;
}

.form-q,
.v2-title,
.thanks-lead,
.thanks-hello,
.status-h,
.pass-title,
.cover-title {
  text-wrap: balance;
}

.q-label,
.w1-kick,
.quote-kicker,
.status-kicker,
.pass-kicker,
.note-kicker,
.flip-kick,
.sum-k,
.cld-tag {
  color: var(--cx-rose) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 500 !important;
}

#resume-preview-help {
  display: none !important;
}

.q-bar,
.w1-dash,
.card.v1 .q-bar,
.card.v2 .q-bar,
.card.v2.phase .q-bar {
  height: 1px !important;
  background: var(--cx-rose) !important;
  box-shadow: none !important;
  border-radius: 1px !important;
}

.quiz-hint,
.help,
.sub,
.thanks-hint,
.status-p,
.gate-hint,
.verify-note,
.trust,
.step4-hint,
.w1-w-soft,
.quote-blurb,
.quote-extra,
.sum-sub {
  color: var(--cx-muted) !important;
}

.q-ask,
.w1-w-strong,
.flab,
.install-label {
  color: var(--cx-soft) !important;
}

section.card.v2[id^="v2-"] > main > .help + .q-ask {
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--cx-focus) !important;
  outline-offset: 3px !important;
}

header.top .back,
.back {
  color: rgba(255, 255, 255, 0.42) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header.top .back svg,
.back svg {
  opacity: 0.55 !important;
  transition: opacity 0.16s ease !important;
}

header.top .back:hover svg,
.back:hover svg {
  opacity: 1 !important;
}

.have-file {
  color: rgba(243, 232, 214, .76) !important;
  text-decoration-color: rgba(223, 109, 131, .46) !important;
  text-underline-offset: 4px !important;
}

/* Let the Spanish label size itself after translation, within the viewport. */
html[lang="es-419"] .have-file {
  max-width: calc(100vw - 88px) !important;
}

.have-file::before {
  content: "\2192";
  display: inline-block;
  margin-right: 6px;
  font-size: .82em;
  font-weight: 300;
  transform: translateY(-1px);
}

/* Executive Side-Panel styling moved to canonical section below */

.chip,
.card.v1 .chip,
.card.v2 .chip,
.card.v2.phase .chip,
.tier-chip,
.country {
  color: #e7eaf0 !important;
  background: linear-gradient(180deg, rgba(22, 30, 45, .86), rgba(15, 22, 34, .88)) !important;
  border-color: var(--cx-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.chip:hover,
.card.v1 .chip:hover,
.card.v2 .chip:hover {
  border-color: rgba(223, 109, 131, .52) !important;
  background: linear-gradient(180deg, rgba(28, 37, 54, .95), rgba(18, 26, 39, .96)) !important;
}

.chip.picked,
.card.v1 .chip.picked,
.card.v2 .chip.picked,
.card.v2.phase .chip.picked {
  color: var(--cx-white) !important;
  border-color: rgba(223, 109, 131, .78) !important;
  background: linear-gradient(90deg, rgba(150, 48, 75, .58), rgba(35, 27, 40, .92) 68%) !important;
  box-shadow: inset 3px 0 0 var(--cx-rose), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.dot,
.card.v1 .dot,
.card.v2 .dot {
  border-color: rgba(221, 227, 237, .58) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chip.picked .dot,
.card.v1 .chip.picked .dot,
.card.v2 .chip.picked .dot {
  border-color: var(--cx-gold) !important;
  background: var(--cx-gold) !important;
  box-shadow: inset 0 0 0 4px #181e2b !important;
}

.tin,
.card.v2 .tin,
textarea.tin,
input.tin {
  color: var(--cx-white) !important;
  background: rgba(16, 24, 37, .88) !important;
  border-color: var(--cx-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.tin:focus,
.card.v2 .tin:focus {
  border-color: rgba(223, 109, 131, .72) !important;
  box-shadow: 0 0 0 4px rgba(223, 109, 131, .08) !important;
}

.tin::placeholder,
.card.v2 .tin::placeholder {
  color: rgba(188, 198, 215, .38) !important;
}

.w1-welcome,
.note-box,
.step4-hint,
.tree-node,
.rule,
.w1-sum,
.sum-table {
  background: linear-gradient(180deg, rgba(22, 29, 42, .76), rgba(14, 20, 31, .78)) !important;
  border-color: var(--cx-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.w1-welcome {
  border-left-color: var(--cx-gold) !important;
}

/* Preview-only fee-reduction controls on the V5 case summary. They are a
 * compact selector, not another card surface, and keep financial facts calm. */
#v5-0 .fee-reduction-preview {
  width: 780px;
  max-width: calc(100% - 32px);
  margin: 12px auto 0;
  text-align: center;
}

#v5-0 .fee-reduction-preview-label {
  margin: 0 0 8px;
  color: var(--cx-rose);
  font: 800 11px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .16em;
}

#v5-0 .fee-reduction-preview-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#v5-0 .fee-reduction-preview-chip {
  min-height: 44px;
  border: 1px solid rgba(143, 163, 188, .36);
  border-radius: 10px;
  background: rgba(14, 22, 37, .68);
  color: var(--cx-cream);
  cursor: pointer;
  font: 800 15px/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

#v5-0 .fee-reduction-preview-chip:hover {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#v5-0 .fee-reduction-preview-chip:focus-visible {
  outline: 2px solid rgba(142, 224, 175, .62) !important;
  outline-offset: 2px !important;
}

#v5-0 .fee-reduction-preview-chip.is-selected {
  border-color: var(--cx-gold);
  background: linear-gradient(180deg, rgba(125, 80, 25, .38), rgba(14, 22, 37, .78));
  color: #fff4d7;
}

#v5-0 .fee-reduction-preview-hint {
  margin: 8px 0 0;
  color: rgba(188, 198, 215, .76);
  font-size: 12px;
  line-height: 1.35;
}

#v5-0 #w1-sum-cost {
  min-width: 12ch;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 799px) {
  /* v58 — The compact V1 shell has no room for a second station heading.
   * Desktop keeps the centred "Initial Eligibility Check" title; on mobile
   * the question heading is the single visible title, avoiding the v1-0
   * collision that Safari exposed. */
  html body section.card#v1-0 > main > h1.stage-title {
    display: none !important;
  }

  html body section.card#v2-1 > main > .stage-title {
    display: none !important;
  }

  #v5-0 .fee-reduction-preview {
    width: 100%;
    max-width: none;
    margin-top: 14px;
  }

  /* Keep the full selector, truth note and Continue action in the initial
   * 390×844 view by recovering vertical rhythm, not shrinking copy/targets. */
  #v5-0 .sum-table {
    padding: 0 16px 6px;
  }

  #v5-0 .sum-row {
    gap: 12px;
    padding: 9px 0 2px;
  }

  #v5-0 .sum-sub {
    margin-bottom: 3px;
  }

  /* Mobile audit 2026-09-15: a value that does not fit beside its label
   * ("ANSPRUCHSBERECHTIGUNG" + "Starke Ausgangsposition") drops to its own
   * line, right-aligned, instead of being hyphenated into four fragments or
   * running past the card. Rows that fit on one line are unchanged. */
  #v5-0 .sum-row { flex-wrap: wrap; }
  #v5-0 .sum-v,
  #v5-0 #w1-sum-cost {
    min-width: 0;
    margin-inline-start: auto;
    overflow-wrap: anywhere;
  }
}

/* v81 — v1 preliminary-result CTA only: dark transparent green, restrained. */
#v1-gate #v1-gate-next {
  border: 1px solid rgba(102, 185, 142, .52) !important;
  background: linear-gradient(180deg, rgba(13, 70, 48, .92), rgba(6, 40, 28, .96)) !important;
  box-shadow: 0 14px 30px -22px rgba(50, 166, 106, .62), inset 0 1px 0 rgba(255, 255, 255, .065) !important;
  color: #edf7f1 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

#v1-gate #v1-gate-next:not(.is-wait):hover,
#v1-gate #v1-gate-next:not(.is-wait):focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(123, 204, 160, .64) !important;
  background: linear-gradient(180deg, rgba(17, 83, 57, .94), rgba(8, 49, 34, .98)) !important;
  box-shadow: 0 16px 32px -22px rgba(55, 176, 113, .70), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#v1-gate #v1-gate-next.is-wait {
  opacity: .74 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

#v1-gate #v1-gate-next.is-wait:hover,
#v1-gate #v1-gate-next.is-wait:focus-visible {
  transform: none !important;
}

@media (max-width: 799px) {
  #v1-gate #v1-gate-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 92% !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 12px !important;
    font-size: clamp(12px, 4.35vw - 2px, 17px) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #v1-gate #v1-gate-next .cta-arrow {
    flex: 0 0 auto !important;
    display: inline-block !important;
    font-size: 19px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    transform: scaleX(1.35) !important;
    transform-origin: center !important;
  }

}

/* The first V1 welcome is a proper station opening, not a looser cover.
 * Lock its title, kicker, question and welcome board to the same desktop grid
 * as the following Initial Eligibility Check card. */
@media (min-width: 800px) {

  #intro .w1-kick {
    width: 780px !important;
    margin: 76px 54px 0 !important;
  }

  #intro .form-q,
  #intro .w1-welcome {
    width: 780px !important;
    margin-left: 54px !important;
    margin-right: 54px !important;
  }
}

/* Exact homepage wordmark on the first funnel card. Its centre is the browser
 * viewport centre, not the offset content column beside the rail. */

#intro .intro-home-link .codex-homepage-wordmark,
#intro .intro-home-link .stage-title {
  cursor: pointer;
}

#mobileRail,
.mobile-rail,
.mobile-rail-header,
.mobile-rail-title,
.mobile-rail-dot,
.mobile-rail-chevron,
.mobile-rail-drawer,
.mobile-rail-backdrop,
.mobile-rail-menu,
.mobile-rail-step {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.note-box,
.step4-hint {
  border-left-color: rgba(223, 109, 131, .72) !important;
}

.pass {
  position: relative;
}

.pass::before {
  background: linear-gradient(180deg, rgba(221, 185, 103, .22), rgba(223, 109, 131, .48), rgba(221, 185, 103, .20)) !important;
}

.pass-board {
  background: linear-gradient(180deg, rgba(19, 27, 40, .88), rgba(12, 18, 28, .90)) !important;
  border-color: var(--cx-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

.pass-board.is-next {
  background: linear-gradient(180deg, rgba(52, 31, 41, .90), rgba(27, 21, 31, .94)) !important;
  border-color: rgba(223, 109, 131, .36) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .20), inset 3px 0 0 var(--cx-rose) !important;
}

.rule .rn {
  color: var(--cx-gold) !important;
  border-color: rgba(221, 185, 103, .40) !important;
  background: rgba(221, 185, 103, .08) !important;
}

.quote-panel {
  background: linear-gradient(180deg, rgba(21, 28, 43, .94), rgba(12, 18, 29, .96)) !important;
  border-color: var(--cx-line) !important;
  border-left-color: var(--cx-gold) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.quote-amt,
.sum-v,
.in-amt {
  color: var(--cx-cream) !important;
  font-family: "Avenir Next", Avenir, Montserrat, Inter, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums;
}

.quote-time {
  color: var(--cx-soft) !important;
  border-left-color: var(--cx-rose) !important;
}

.quote-break .row {
  border-color: rgba(207, 217, 234, .12) !important;
  color: var(--cx-soft) !important;
}

.quote-break .row.total {
  color: var(--cx-white) !important;
  border-color: rgba(221, 185, 103, .34) !important;
}

.inherit-strip {
  background: linear-gradient(180deg, rgba(29, 25, 34, .86), rgba(15, 20, 29, .90)) !important;
  border-color: rgba(221, 185, 103, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

.in-node {
  border-color: rgba(203, 214, 232, .16) !important;
  background: rgba(13, 19, 29, .58) !important;
}

.in-amt.zero {
  color: var(--cx-gold) !important;
}

.melt-chip,
.melt-fly {
  color: var(--cx-gold) !important;
  background: rgba(221, 185, 103, .10) !important;
  border-color: rgba(221, 185, 103, .32) !important;
}

.file-panel,
.flip-front,
.flip-back {
  background:
    radial-gradient(460px 180px at 50% -30px, rgba(99, 146, 132, .16), transparent 70%),
    linear-gradient(160deg, rgba(17, 39, 34, .92), rgba(8, 25, 22, .96)) !important;
  border-color: rgba(125, 184, 163, .30) !important;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.file-panel .num,
.flip-back .num {
  color: var(--cx-cream) !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, .28) !important;
}

.btn.primary,
.foot-go,
.card.v1 .btn.primary,
.card.v2 .btn.primary,
.card.v2.phase .btn.primary {
  color: #fff !important;
  background: linear-gradient(180deg, #a43a56 0%, var(--cx-burgundy-deep) 100%) !important;
  border-color: rgba(229, 122, 144, .42) !important;
  box-shadow: 0 12px 28px rgba(91, 20, 39, .42), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

#z4 .cta-glow,
#z4 .btn.primary {
  color: #f7fdff !important;
  background: linear-gradient(180deg, #25b7cf 0%, #087186 100%) !important;
  border-color: rgba(125, 235, 250, .54) !important;
  box-shadow: 0 22px 48px -14px rgba(24, 166, 190, .72), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

#z4 .rule,
#z-thanks .file-panel,
#z-thanks .flip-front,
#z-thanks .flip-back {
  background: linear-gradient(180deg, rgba(18, 49, 41, .90), rgba(8, 27, 23, .94)) !important;
  border-color: rgba(116, 183, 159, .30) !important;
}

#z4 .v1-foot,
#z4 .start-over {
  display: none !important;
}

/* Final receipt: the approved dossier is part of the green file-card front,
 * never a detached right-side illustration. The flip back stays clean for the
 * actual file number and its copy control. */
#z-thanks .flip-front,
#v1-thanks .flip-front {
  background-image:
    linear-gradient(180deg, rgba(12, 48, 39, .58), rgba(4, 24, 18, .88)),
    url("/citizenship-test-assets/assets/illustrations/case-dossier-v2.png") !important;
  background-position: center, center 62% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 112% auto !important;
}

#z-thanks .flip-front .flip-kick,
#z-thanks .flip-front .flip-hint,
#v1-thanks .flip-front .flip-kick,
#v1-thanks .flip-front .flip-hint {
  color: #f3e8d6 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72);
}

.month-chips .chip,
.num-chips .chip {
  font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 799px) {
  body::before {
    background:
      radial-gradient(620px 360px at 60% -120px, rgba(137, 47, 75, .16), transparent 68%),
      linear-gradient(160deg, #110d15, #0b1019 58%, #080c12) !important;
  }

  .chip,
  .card.v1 .chip,
  .card.v2 .chip,
  .card.v2.phase .chip {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
  }

  /* Preserve a clear tap lane above the canonical footer on the dense clients card. */
  #z1 .place-list {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #z1 .place-list li {
    padding: 8px 6px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  #z1 .z-ask,
  #z1 .form-q.z-ask,
  #z1 .q-ask.z-ask,
  #z1 h2.z-ask,
  #z2 .z-ask,
  #z2 .form-q.z-ask,
  #z2 .q-ask.z-ask,
  #z2 h2.z-ask,
  [id^="z"] .z-ask,
  [id^="z"] h2.z-ask,
  [id^="z"] h2.form-q {
    font-size: 16px !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }

  #z1 .help {
    margin-bottom: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* v3 remediation: effective target areas and keyboard-visible file cards. */
.back,
header.top .back,
.have-file,
.start-over {
  position: relative;
}

.back::after,
header.top .back::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.have-file {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.have-file::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

header.top .back,
.card .back,
button.back {
  min-width: 44px !important;
  min-height: 44px !important;
}

.copy-num {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flip-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scroll-hint-strip {
  display: none !important;
}

a.secondary,
a.foot-skip,
.v1-contact-link,
#v3-consult-skip {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Flow layout makes restart buttons static. An absolute pseudo hit target
   would then span the card and intercept unrelated fields (notably email).
   Keep the touch target on the real button, never on an invisible overlay. */
.start-over {
  min-height: 44px !important;
}

.start-over::after {
  content: none !important;
}

.foot-back {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.flip-wrap:focus-visible {
  outline: 3px solid var(--cx-focus) !important;
  outline-offset: 5px !important;
  border-radius: 18px;
}

@media (max-width: 799px) {
  html body #v1-0 .stage-title,
  html body #v2-1 .stage-title,
  html body #v3-0 .stage-title,
  html body #v4-1 .stage-title {
    top: 54px !important;
    left: 64px !important;
    right: 64px !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Family Tree keeps its station title inside a main element that starts
   * 60px below the card, unlike the peer station titles. Offset that local
   * containing block so the visible baseline still matches its peers. */
  html body #v4-1 .stage-title {
    top: -6px !important;
  }

  html body #v1-1.card:not(.resume) .opt-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body #v1-1.card:not(.resume) .opt-list .chip {
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    line-height: 1.3 !important;
  }

  html body #z-thanks.card .flip-wrap {
    height: 300px !important;
  }

  html body #v1-thanks.card main {
    padding-inline: 40px !important;
  }

  html body #v1-thanks.card .thanks-hello {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    color: #f8fafc !important;
  }

  html body #v1-thanks.card .thanks-hint {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    color: #94a3b8 !important;
  }

  html body #v1-thanks.card .thanks-lead {
    font-family: Montserrat, Inter, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    color: #f1f5f9 !important;
  }

  html body #v1-thanks.card .thanks-meta {
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    font-size: 12.5px !important;
    color: #8fbfa8 !important;
  }

  html body #v1-thanks.card .cta-glow,
  html body #v1-thanks.card .cta-red {
    min-height: 56px !important;
    height: auto !important;
    padding: 16px 28px !important;
    font-size: 18px !important;
    margin-top: 14px !important;
  }

  html body #v1-thanks.card .reveal-arrow {
    width: 56px !important;
    height: 56px !important;
    margin-top: 18px !important;
  }

  html body #v1-thanks.card .secondary {
    min-height: 44px !important;
    margin-top: 14px !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body #v1-thanks.card .start-over {
    min-height: 44px !important;
    margin-top: 10px !important;
  }

  html body #z4.card .rule {
    position: relative !important;
    display: block !important;
    min-height: 124px !important;
    padding: 10px 12px 10px 50px !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
  }

  html body #z4.card .rule .rn {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html body #z4.card .rule strong {
    font-size: 15px !important;
    line-height: 1.18 !important;
  }

  html body #z4.card .rule-list {
    gap: 10px !important;
  }

  .card.codex-scroll-card > main {
    justify-content: flex-start !important;
  }

  #z4.codex-scroll-card .v1-foot,
  #z4.codex-scroll-card .v2-foot {
    background: transparent !important;
  }
}

@media (max-width: 340px) {
  html body #v1-0 .stage-title,
  html body #v2-1 .stage-title,
  html body #v3-0 .stage-title,
  html body #v4-1 .stage-title {
    left: 60px !important;
    right: 60px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

/* The introduction has three normal-flow rows: logo, process, actions.
 * Short viewports scroll as a whole instead of clipping a fixed button rail. */
#intro {
  --intro-cta-width: 296px;
  --intro-cta-height: 52px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: auto !important;
}
html body #intro.card > main {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(min-content, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  min-height: var(--codex-mobile-visual-height, 100dvh) !important;
  height: auto !important;
  max-height: none !important;
  padding: 26px 24px 24px !important;
  margin: 0 !important;
  overflow: visible !important;
  gap: 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#intro .intro-home-link {
  display: block;
  justify-self: center;
  width: min(256px, 100%);
  min-height: var(--funnel-icon-size);
  text-decoration: none;
}
#intro .stage-title.codex-homepage-wordmark,
#intro .intro-home-link .stage-title {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--funnel-icon-size) !important;
  margin: 0 !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer;
}
#intro .codex-homepage-wordmark-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}
html body #intro.card :is(.v1-foot, .v1-foot-row) {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: min(var(--intro-cta-width), 100%) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #intro.card .v1-foot-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}
#intro :is(#intro-next, #intro-restart-workflow) {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: var(--intro-cta-height) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  transform: none !important;
  border-radius: 16px !important;
  border: 1px solid rgba(190, 194, 200, .3) !important;
  color: #c3c7ce !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-sizing: border-box !important;
}
#intro-next {
  font: italic 300 18px/1.35 "Fraunces", Georgia, serif !important;
}
#intro-restart-workflow,
#intro-restart-workflow > span {
  font: italic 300 18px/1.35 "Fraunces", Georgia, serif !important;
}
#intro-restart-workflow > span { opacity: .5; }
#intro :is(#intro-next, #intro-restart-workflow):hover {
  color: #fff !important;
  border-color: #c3c7ce !important;
  background: rgba(255, 255, 255, .05) !important;
}
#intro :is(#intro-next, #intro-restart-workflow):focus-visible {
  outline: 2px solid var(--cx-focus) !important;
  outline-offset: 4px !important;
}
@media (max-width: 799px) {
  #intro { --intro-cta-width: 216px; --intro-cta-height: 48px; }
  html body #intro.card > main {
    padding: calc(64px + env(safe-area-inset-top, 0px)) 20px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 20px !important;
    /* Two in-flow rows only (letter, actions): the wordmark below is absolutely
     * positioned, so the desktop three-row template would auto-place the
     * actions into the stretched middle row and leave the bottom row empty. */
    grid-template-rows: minmax(min-content, 1fr) auto !important;
  }
  /* Roman, 2026-09-15: on phones the wordmark sits IN the toolbar row — centred
   * between the language and menu icons, on the same vertical axis. It is taken
   * out of the grid flow and pinned to the toolbar band (same top and height as
   * the icons; the toolbar itself is pointer-events:none, so the link stays
   * tappable). left/right 0 + auto margins centre it in LTR and RTL alike. */
  #intro .intro-home-link {
    position: absolute;
    top: var(--funnel-toolbar-top);
    left: 0;
    right: 0;
    width: min(188px, 100%);
    height: var(--funnel-icon-size);
    margin: 0 auto;
  }
  html body #intro.card :is(.v1-foot, .v1-foot-row) { gap: 8px !important; }
  #intro :is(#intro-next, #intro-restart-workflow),
  #intro-restart-workflow > span { font-size: 15px !important; }
}

/* v39 — one stable desktop viewport shell for every funnel card. */
#v1-thanks > header.top,
section.card.on > header.top {
  display: flex !important;
}

@media (min-width: 800px) {
  section.card.on > header.top {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 60 !important;
    pointer-events: none !important;
  }

  section.card.on > header.top > button,
  section.card.on > header.top > a {
    pointer-events: auto !important;
  }

  section.card.on {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  section.card.on::-webkit-scrollbar,
  .card.on::-webkit-scrollbar,
  .card::-webkit-scrollbar,
  section.card.on.codex-content-scroll > main::-webkit-scrollbar,
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  section.card.on::-webkit-scrollbar-track,
  .card.on::-webkit-scrollbar-track,
  section.card.on::-webkit-scrollbar-thumb,
  .card.on::-webkit-scrollbar-thumb,
  section.card.on.codex-content-scroll > main::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-color: transparent !important;
  }

  section.card.on.codex-content-scroll > main,
  section.card,
  .card,
  html,
  body,
  main {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

/*
 * Editorial station backgrounds. Each fills the entire desktop stage rather
 * than reading as a detached illustration board. The content remains on the
 * native stage above it; a left-to-right veil protects copy and controls.
 */
/* A 1952px Safari window is 1332 CSS px after browser chrome/scaling.
 * 1360px therefore silently disabled all desktop station art. 1100px
 * remains desktop-only while preserving the clean 390px mobile layout. */
@media (min-width: 1100px) {
  body:has(#v1-0.on)::after,
  body:has(#intro.on)::after,
  body:has(#v2-1.on)::after,
  body:has(#v3-0.on)::after,
  body:has(#v4-1.on)::after,
  body:has(#v5-0.on)::after,
  body:has(#v5.on)::after,
  body:has(#z1.on)::after,
  body:has(#z2.on)::after,
  body:has(#z4.on)::after {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: .92;
    background-repeat: no-repeat;
    background-position: center, center, right -1vw bottom -6vh;
    background-size: cover, cover, auto 118vh;
    filter: saturate(.62) contrast(.92) brightness(.72);
  }

  body:has(#v1-0.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.985) 36%, rgba(9,13,20,.88) 57%, rgba(9,13,20,.35) 82%, rgba(9,13,20,.68) 100%),
      linear-gradient(180deg, rgba(9,13,20,.18), rgba(9,13,20,.83)),
      url("/citizenship-test-assets/assets/illustrations/poland-borders-1939-1945-v1.png");
  }

  /* The first screen presents the Warsaw-based online legal hub as a working
   * team, with the subject held to the right and protected copy space left. */
  body:has(#intro.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.99) 36%, rgba(9,13,20,.89) 57%, rgba(9,13,20,.34) 82%, rgba(9,13,20,.7) 100%),
      linear-gradient(180deg, rgba(9,13,20,.16), rgba(9,13,20,.84)),
      url("/citizenship-test-assets/assets/illustrations/warsaw-online-legal-hub-v1.png");
  }

  /* The actual V2 entry card shares the evidence-led visual language of the
   * short entry card, while all subsequent V2 questions remain distraction-free. */
  body:has(#v2-1.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.99) 36%, rgba(9,13,20,.89) 57%, rgba(9,13,20,.34) 82%, rgba(9,13,20,.7) 100%),
      linear-gradient(180deg, rgba(9,13,20,.16), rgba(9,13,20,.84)),
      url("/citizenship-test-assets/assets/illustrations/citizenship-test-records-v1.png");
  }

  body:has(#v3-0.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.985) 36%, rgba(9,13,20,.88) 57%, rgba(9,13,20,.35) 82%, rgba(9,13,20,.68) 100%),
      linear-gradient(180deg, rgba(9,13,20,.18), rgba(9,13,20,.83)),
      url("/citizenship-test-assets/assets/illustrations/archival-document-v2.png");
  }

  body:has(#v4-1.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.985) 36%, rgba(9,13,20,.88) 57%, rgba(9,13,20,.35) 82%, rgba(9,13,20,.68) 100%),
      linear-gradient(180deg, rgba(9,13,20,.18), rgba(9,13,20,.83)),
      url("/citizenship-test-assets/assets/illustrations/family-tree-archive-v3.png");
  }

  body:has(#v5-0.on)::after {
    background-image:
      linear-gradient(90deg, #0a1024 0%, rgba(10,16,36,.985) 36%, rgba(10,16,36,.82) 57%, rgba(10,16,36,.18) 82%, rgba(10,16,36,.42) 100%),
      linear-gradient(180deg, rgba(10,16,36,.08), rgba(10,16,36,.55)),
      url("/citizenship-test-assets/assets/illustrations/case-dossier-v2.png");
    background-position: center, center, right -3vw bottom -2vh;
    background-size: cover, cover, auto 126vh;
    filter: saturate(.74) contrast(.95) brightness(.98);
  }

  /* The next-step decision is allowed one quiet temporal cue: a watch
   * mechanism and a question-shaped thread. It is deliberately calm rather
   * than a countdown, so the choice remains unpressured. */
  body:has(#v5.on)::after {
    background-image:
      linear-gradient(90deg, #0a1024 0%, rgba(10,16,36,.99) 37%, rgba(10,16,36,.88) 58%, rgba(10,16,36,.29) 82%, rgba(10,16,36,.68) 100%),
      linear-gradient(180deg, rgba(10,16,36,.12), rgba(10,16,36,.82)),
      url("/citizenship-test-assets/assets/illustrations/v5-time-question-v1.png");
    background-position: center, center, right -1vw bottom -5vh;
    background-size: cover, cover, auto 118vh;
    filter: saturate(.58) contrast(.94) brightness(.68);
  }

  /* Our Clients: a modern, anonymous case-portfolio installation — not a
   * literal portrait, travel scene or airport. The dark left veil protects
   * the country grid and referral choice. */
  body:has(#z1.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.99) 39%, rgba(9,13,20,.89) 61%, rgba(9,13,20,.34) 83%, rgba(9,13,20,.7) 100%),
      linear-gradient(180deg, rgba(9,13,20,.13), rgba(9,13,20,.84)),
      url("/citizenship-test-assets/assets/illustrations/our-clients-case-network-v2.png");
    background-position: center, center, right -1vw center;
    background-size: cover, cover, auto 116vh;
    filter: saturate(.58) contrast(.93) brightness(.65);
  }

  /* Consultation: an anonymous online call and working papers. It supports
   * the decision without implying a particular platform or client identity. */
  body:has(#z2.on)::after {
    background-image:
      linear-gradient(90deg, #090d14 0%, rgba(9,13,20,.99) 39%, rgba(9,13,20,.89) 61%, rgba(9,13,20,.31) 83%, rgba(9,13,20,.72) 100%),
      linear-gradient(180deg, rgba(9,13,20,.14), rgba(9,13,20,.86)),
      url("/citizenship-test-assets/assets/illustrations/consultation-online-papers-v1.png");
    background-position: center, center, right -1vw center;
    background-size: cover, cover, auto 116vh;
    filter: saturate(.52) contrast(.94) brightness(.62);
  }

  /* The penultimate review gate can carry a modern Europe cue without
   * changing the deliberately quiet final received screen. */
  body:has(#z4.on)::after {
    background-image:
      linear-gradient(90deg, #06110f 0%, rgba(6,17,15,.99) 37%, rgba(6,17,15,.88) 58%, rgba(6,17,15,.32) 82%, rgba(6,17,15,.68) 100%),
      linear-gradient(180deg, rgba(6,17,15,.12), rgba(6,17,15,.82)),
      url("/citizenship-test-assets/assets/illustrations/review-europe-glass-v1.png");
    background-position: center, center, right -1vw bottom -6vh;
    background-size: cover, cover, auto 118vh;
    filter: saturate(.66) contrast(.94) brightness(.78);
  }

  /* The canonical green phase paints its own app background. Clear that one
   * layer on z4 only so the approved Europe art is actually visible; z-thanks
   * keeps its clean received-state field. */
  body:has(#z4.on) .app {
    background: transparent !important;
  }

  /* V5 has an opaque stage gradient in the canonical skin. Keep that colour
   * on body::before, but clear the app layer so its approved dossier backdrop
   * can be visible behind the result content. */
  body:has(#v5-0.on) .app {
    background: transparent !important;
  }

  body:has(#v5.on) .app {
    background: transparent !important;
  }
}

@media (max-width: 1099px) {
  body:has(#v1-0.on)::after,
  body:has(#intro.on)::after,
  body:has(#v2-1.on)::after,
  body:has(#v3-0.on)::after,
  body:has(#v4-1.on)::after,
  body:has(#v5-0.on)::after,
  body:has(#v5.on)::after,
  body:has(#z1.on)::after,
  body:has(#z2.on)::after,
  body:has(#z4.on)::after {
    content: none;
  }
}

/* File-number screen: retain the flip/reveal interaction, but keep its compact
 * desktop summary inside one ordinary viewport with the navigation visible. */
@media (min-width: 800px) {
  /* Saved-for-later is a compact hand-off, not a second long document page.
   * Keep the reveal, two guidance bars and navigation in one calm desktop
   * frame; the companion script makes the canonical absolute footer join the
   * normal flow for this card only. */
  html body #v1-later .flip-wrap {
    width: min(280px, 100%) !important;
    height: 176px !important;
    margin: 0 auto 12px !important;
  }

  html body #v1-later .rule-list {
    gap: 8px !important;
  }

  html body #v1-later .rule {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  html body #v1-later .rule > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1.25 !important;
  }

  html body #v1-later .rule > div br {
    display: none !important;
  }

  html body #v1-later .rule strong {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
  }

  html body #v2-file .flip-wrap {
    height: 164px !important;
    /* Deliberate breathing room: the file card is a distinct action before
     * the three explanatory bars, not the first item in a single stack. */
    margin: 0 auto 20px !important;
  }

  html body #v2-file .rule-list {
    gap: 6px !important;
  }

  html body #v2-file .rule {
    /* The bars grow with their two-line copy; 64px is the floor. */
    height: auto !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    gap: 10px !important;
    font-size: 15px !important;
    line-height: 1.32 !important;
  }

  html body #v2-file .rule strong {
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  /* Match the original compact desktop finish card.  This card keeps its
   * complete three-step explanation, but the reference reveal must not turn
   * the final screen into a second long page. */
  html body #z-thanks.card .flip-wrap {
    width: min(330px, 100%) !important;
    height: 150px !important;
    margin: 6px auto 14px !important;
  }

  html body #z-thanks.card .flip-back {
    justify-content: center !important;
    padding: 8px 36px 8px 12px !important;
  }

  html body #z-thanks.card .flip-back .lbl {
    margin: 0 0 2px !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  html body #z-thanks.card .flip-back .num-row {
    width: 100% !important;
    max-width: 278px !important;
    min-height: 24px !important;
    gap: 4px !important;
    margin: 0 auto 2px !important;
    position: relative !important;
    left: -10px !important;
  }

  html body #z-thanks.card .flip-back .num {
    font-size: 15px !important;
    line-height: 1.1 !important;
    letter-spacing: .025em !important;
  }

  html body #z-thanks.card .flip-back .copy-num {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    transform: none !important;
  }

  html body #z-thanks.card .flip-back .flip-close {
    top: 6px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
  }

  html body #z-thanks.card .flip-back p.do {
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px auto 0 !important;
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  /* Safari occasionally composites the reverse face through the front after
   * the 3-D transition.  Explicit state visibility makes the final face
   * deterministic while retaining the authored turn animation. */
  html body #z-thanks.card .flip-wrap:not(.flipped) .flip-front,
  html body #z-thanks.card .flip-wrap.flipped .flip-back {
    visibility: visible !important;
  }

  html body #z-thanks.card .flip-wrap:not(.flipped) .flip-back,
  html body #z-thanks.card .flip-wrap.flipped .flip-front {
    visibility: hidden !important;
  }

  html body #z-thanks.card .start-over {
    margin: 18px auto 8px !important;
  }
}

/* Full-funnel integrity layer v5: predictable flow, honest validation and
 * equal peer geometry at every measured viewport. */
.funnel-validation-note {
  width: min(860px, calc(100% - 32px));
  margin: 12px auto 0;
  padding: 11px 14px;
  border: 1px solid rgba(238, 112, 136, .58);
  border-radius: 10px;
  background: rgba(75, 12, 30, .98);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .36);
  color: #fff4f6;
  font: 700 14px/1.35 Inter, system-ui, sans-serif;
  text-align: left;
}

.funnel-validation-note[hidden],
.nat-details[hidden],
#v2-5j .nat-details[hidden] {
  display: none !important;
}

.nat-details,
#v2-5j .nat-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 12px;
  margin-top: 14px;
  width: 100%;
  max-width: min(817px, calc(100% - 72px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.nat-details .flab,
#v2-5j .nat-details .flab {
  margin: 0 0 6px !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left;
  box-sizing: border-box;
}

[dir="rtl"] .nat-details .flab,
[dir="rtl"] #v2-5j .nat-details .flab {
  text-align: right !important;
}

.nat-field,
#v2-5j .nat-details .nat-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nat-details .tin,
#v2-5j .nat-details .tin {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

.integrity-second-question {
  margin-top: 18px !important;
}

.integrity-office-list {
  margin-top: 0 !important;
}

.contact-channel-hint,
#contact-channel-hint {
  display: none !important;
}

#v1-later .rule > div {
  white-space: pre-line;
}

.chip,
.tier-chip,
.country,
.fee-reduction-preview-chip {
  box-sizing: border-box !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.chip > span:last-child,
.tier-chip > span:last-child,
.country > span:last-child {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#v1-thanks .cta-glow,
#v1-thanks .cta-red,
#v1-thanks .secondary,
#v1-thanks .start-over {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: auto;
  height: auto;
}

#v1-thanks .cta-glow,
#v1-thanks .cta-red {
  z-index: 4 !important;
}

/* ==========================================================================
   WARSAW LEGAL LUXURY — V1 -> V2 PASSING CARD CERTIFICATE (#v1-thanks)
   ========================================================================== */

#v1-thanks.card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  padding: clamp(10px, 1.8vh, 20px) 20px !important;
}

#v1-thanks .thanks-main {
  width: 100% !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  padding-inline: clamp(20px, 2.5vw, 32px) !important;
  background: linear-gradient(180deg, rgba(16, 26, 40, 0.94) 0%, rgba(10, 16, 26, 0.98) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(212, 175, 55, 0.3) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#v1-thanks .v1-cert-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 12px !important;
  margin: 0 auto clamp(5px, 0.8vh, 8px) !important;
  border-radius: 999px !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  color: #4ade80 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#v1-thanks .v1-cert-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
  display: inline-block !important;
}

#v1-thanks .thanks-hello {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(21px, 2.3vw, 27px) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  color: #f8fafc !important;
  margin: 0 0 clamp(4px, 0.6vh, 6px) !important;
  letter-spacing: -0.01em !important;
}

#v1-thanks .thanks-hint {
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.38 !important;
  color: #94a3b8 !important;
  max-width: 560px !important;
  margin: 0 auto clamp(6px, 0.8vh, 8px) !important;
}

/* Evidence Capsule (Summary of what client proved in V1) */
#v1-thanks .status-box,
#v1-thanks .v1-evidence-capsule {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1.2fr !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: clamp(6px, 0.8vh, 8px) auto !important;
  padding: 8px 14px !important;
  background: rgba(14, 23, 36, 0.65) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#v1-thanks .v1-capsule-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#v1-thanks .v1-cap-lbl,
#v1-thanks .status-kicker {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #8fbfa8 !important;
  margin: 0 !important;
}

#v1-thanks .v1-cap-val,
#v1-thanks .status-h {
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin: 0 !important;
}

#v1-thanks .v1-status-ok {
  color: #4ade80 !important;
}

#v1-thanks .v1-capsule-divider {
  width: 1px !important;
  height: 24px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Value Proposition (The Bridge to V2) */
#v1-thanks .v1-bridge-card {
  width: 100% !important;
  max-width: 600px !important;
  margin: clamp(6px, 0.8vh, 8px) auto !important;
  padding: 9px 16px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 11px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#v1-thanks .thanks-lead {
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  margin: 0 0 6px !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

#v1-thanks .v1-why-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#v1-thanks .v1-why-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #cbd5e1 !important;
  line-height: 1.32 !important;
}

#v1-thanks .v1-why-ico {
  color: #22c55e !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  font-size: 12px !important;
}

#v1-thanks .thanks-meta {
  font-size: 11.5px !important;
  color: #8fbfa8 !important;
  margin: clamp(5px, 0.7vh, 7px) auto clamp(7px, 0.9vh, 9px) !important;
  line-height: 1.3 !important;
}

/* Executive Warsaw Emerald & Gold CTA Button */
.cta-red,
html body #v1-thanks.card .cta-red,
#v1-thanks .cta-red,
#v1-thanks .cta-glow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: clamp(7px, 0.9vh, 9px) auto 0 !important;
  padding: 13px 24px !important;
  height: clamp(50px, 5.8vh, 56px) !important;
  min-height: clamp(50px, 5.8vh, 56px) !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #15803d 0%, #0d5926 100%) !important;
  background-color: #15803d !important;
  color: #ffffff !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(14.5px, 1.5vw, 16.5px) !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 14px 32px -8px rgba(22, 101, 52, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.cta-red:hover,
html body #v1-thanks.card .cta-red:hover,
#v1-thanks .cta-red:hover,
#v1-thanks .cta-glow:hover {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
  background-color: #16a34a !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px -6px rgba(22, 101, 52, 0.8), 0 0 20px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(212, 175, 55, 0.75) !important;
}

@media (max-width: 640px) {
  #v1-thanks.card {
    padding: 16px 12px !important;
  }
  #v1-thanks .thanks-main {
    padding-inline: 14px !important;
    border-radius: 16px !important;
  }
  #v1-thanks .status-box,
  #v1-thanks .v1-evidence-capsule {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #v1-thanks .v1-capsule-divider {
    display: none !important;
  }
}

#v1-thanks .secondary {
  z-index: 3 !important;
}

#v1-thanks .start-over {
  z-index: 2 !important;
  align-self: center !important;
}

.card.codex-scroll-card {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.card.codex-scroll-card > main {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.card.codex-scroll-card .v1-foot,
.card.codex-scroll-card .v2-foot {
  box-sizing: border-box !important;
}

/* One semantic heading per card without adding a second visible title. */
.integrity-card-heading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 800px) {
  /* Station names share one exact viewport-centred baseline, independent of
   * the rail width or the card's internal content column. */
  section.card:not(#intro) .stage-title {
    text-align: center !important;
  }

  .card.codex-scroll-card > main {
    padding-top: max(92px, env(safe-area-inset-top)) !important;
  }
}

@media (max-width: 799px) {
  .nat-details,
  #v2-5j .nat-details {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .opt-list {
    align-items: stretch !important;
  }

  .opt-list .chip,
  .card.v1 .opt-list .chip,
  .card.v2 .opt-list .chip,
  .card.v2.phase .opt-list .chip {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.3 !important;
  }

  html body #v1-4 .opt-list.countries,
  html body #v2-live .opt-list.countries,
  html body #v3-1 .opt-list.countries,
  .countries,
  .place-list,
  #v3-10 .opt-list,
  #v4-7 .opt-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #v1-4 .opt-list.countries .chip,
  html body #v2-live .opt-list.countries .chip,
  html body #v3-1 .opt-list.countries .chip {
    white-space: normal !important;
  }

  html body #v1-4 .opt-list.countries .chip > span:last-child,
  html body #v2-live .opt-list.countries .chip > span:last-child,
  html body #v3-1 .opt-list.countries .chip > span:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .card.codex-scroll-card > main {
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 340px) {
  html body #v1-0 .stage-title,
  html body #v2-1 .stage-title,
  html body #v3-0 .stage-title,
  html body #v4-1 .stage-title {
    top: 42px !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  html body #v4-1 .stage-title {
    top: -18px !important;
  }

  html body #v5-0 #w1-sum-cost {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* v226 — new info-cards: tighten help/rule-list rhythm slightly to stay well inside zero-scroll */
#info-v1 .help, #info-v2 .help, #info-v3 .help, #info-v4 .help, #info-v5 .help,
#info-z1 .help, #info-z2 .help, #info-z4 .help { margin-bottom: 10px !important; }

/* v52 — V1 mobile navigation + visible-viewport shell.
 * Desktop remains owned by the frozen >=800px geometry above. On iPhone the
 * original square Back is re-parented into the footer, eliminating the second
 * text Back and reclaiming the header row. The footer is a separate flex row,
 * so browser chrome may shorten the visual viewport without clipping Continue. */
@media (max-width: 799px) {
  section.card.codex-mobile-footer-nav > header.top.codex-mobile-nav-relocated {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  section.card.codex-mobile-footer-nav > .v1-foot > .v1-foot-row {
    display: flex !important;
    order: initial !important;
  }

  section.card.codex-mobile-footer-nav .foot-back.codex-mobile-bottom-back-source[hidden] {
    display: none !important;
  }

  section.card.codex-mobile-footer-nav .codex-mobile-footer-back {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cx-cream) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 2 !important;
  }

  section.card.codex-mobile-footer-nav .codex-mobile-footer-back:hover,
  section.card.codex-mobile-footer-nav .codex-mobile-footer-back:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--cx-rose) !important;
  }

  section.card.codex-mobile-footer-nav .codex-mobile-footer-back svg {
    width: 34px !important;
    height: 18px !important;
    stroke-width: 1.45 !important;
    vector-effect: non-scaling-stroke;
  }

  html body #intro.card .codex-mobile-footer-back {
    display: none !important;
  }

  section.card.codex-mobile-footer-nav > .v1-foot .btn.primary {
    height: 56px !important;
    min-height: 56px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-1:not(.resume) .q-chrome,
  html body section.card.codex-mobile-v1-shell#v1-2 .q-chrome,
  html body section.card.codex-mobile-v1-shell#v1-3 .q-chrome,
  html body section.card.codex-mobile-v1-shell#v1-4 .q-chrome {
    margin-top: 36px !important;
    margin-bottom: 0 !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-1:not(.resume) > main > .form-q {
    margin-top: 7px !important;
    margin-bottom: 24px !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-2 > main > .form-q,
  html body section.card.codex-mobile-v1-shell#v1-3 > main > .form-q,
  html body section.card.codex-mobile-v1-shell#v1-4 > main > .form-q {
    margin-top: 32px !important;
    margin-bottom: 24px !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-1:not(.resume) .opt-list,
  html body section.card.codex-mobile-v1-shell#v1-2 .opt-list,
  html body section.card.codex-mobile-v1-shell#v1-3 .opt-list {
    gap: 14px !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-1:not(.resume) .opt-list .chip,
  html body section.card.codex-mobile-v1-shell#v1-2 .opt-list .chip,
  html body section.card.codex-mobile-v1-shell#v1-3 .opt-list .chip {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-4 .opt-list.countries {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(52px, calc((100svh - 340px) / 7), 62px) !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    align-content: start !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-4 .opt-list.countries .chip {
    height: clamp(52px, calc((100svh - 340px) / 7), 62px) !important;
    min-height: clamp(52px, calc((100svh - 340px) / 7), 62px) !important;
    max-height: clamp(52px, calc((100svh - 340px) / 7), 62px) !important;
    gap: 8px !important;
    padding-inline: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  html body section.card.codex-mobile-v1-shell#v1-4 .opt-list.countries .chip > span:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

#v1-thanks > header.top > .back {
  display: none !important;
}

@media (max-width: 799px) and (max-height: 705px) {
  html body section.card.codex-mobile-v1-shell#v1-1:not(.resume) .opt-list,
  html body section.card.codex-mobile-v1-shell#v1-2 .opt-list,
  html body section.card.codex-mobile-v1-shell#v1-3 .opt-list {
    gap: 10px !important;
  }
}

@media (max-width: 359px) {
  html body section.card.codex-mobile-v1-shell#v1-4 .opt-list.countries {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v75 — restore the canonical final-review ceremony without pretending that
 * the localhost preview submitted a legal file.  These selectors are limited
 * to the last two cards so the rest of the funnel keeps its frozen geometry. */
body:has(#info-z4.on)::before {
  background:
    radial-gradient(900px 540px at 62% -190px, rgba(49, 126, 102, .25), transparent 70%),
    linear-gradient(150deg, var(--cx-green-2) 0%, var(--cx-green) 55%, #06110f 100%) !important;
}

#info-z4 .rule-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#info-z4 .rule {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(116, 183, 159, .30) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(420px 130px at 0 0, rgba(76, 145, 116, .12), transparent 70%),
    linear-gradient(180deg, rgba(18, 49, 41, .90), rgba(8, 27, 23, .94)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  color: #e9eee9 !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
}

#info-z4 .rule .rn {
  display: block !important;
  width: 42px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cx-gold) !important;
  font: 800 32px/1 "Avenir Next", Avenir, Montserrat, Inter, sans-serif !important;
  text-align: center !important;
}

#info-z4 .rule strong {
  color: var(--cx-white) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

#info-z4 .end-review-cta {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: min(560px, 100%) !important;
  min-height: 66px !important;
  margin: 20px auto 0 !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(120, 200, 150, .38) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(31, 107, 58, .96), rgba(13, 50, 28, .98)) !important;
  box-shadow: 0 22px 48px -14px rgba(13, 82, 41, .70), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  color: #f7fdff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}

#info-z4 .end-review-cta:hover,
#info-z4 .end-review-cta:focus-visible {
  border-color: rgba(139, 224, 171, .60) !important;
  background: linear-gradient(180deg, rgba(36, 122, 68, .98), rgba(14, 59, 33, .99)) !important;
  box-shadow: 0 24px 50px -16px rgba(25, 124, 62, .78), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

#info-z4 .v1-foot .foot-back,
#info-z4 .v1-foot .start-over {
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

#info-z4 .v1-foot .foot-back {
  position: static !important;
}

/* Anchor the enlarged touch target to the button itself. */
#info-z4 .v1-foot .start-over {
  position: relative !important;
}

html body #z-thanks.card .thanks-hint {
  width: min(720px, calc(100% - 32px)) !important;
  max-width: 720px !important;
  margin: 0 auto 18px !important;
  color: #b5c3bd !important;
  font-size: clamp(15px, 1.45vw, 17px) !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

html body #v1-thanks.card .flip-wrap {
  width: min(280px, 100%) !important;
  height: 236px !important;
  margin: 12px auto 8px !important;
  perspective: 1100px !important;
}

html body #z-thanks.card .flip-wrap {
  width: min(330px, calc(100% - 24px)) !important;
  height: clamp(330px, 48svh, 466px) !important;
  margin: 24px auto 14px !important;
  perspective: 1100px !important;
}

html body #v1-thanks.card .flip-inner .file-panel,
html body #z-thanks.card .flip-inner .file-panel {
  border: 1px solid rgba(116, 183, 159, .34) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 68px rgba(0, 0, 0, .30), 0 0 48px rgba(41, 126, 95, .10), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html body #v1-thanks.card .flip-front,
html body #z-thanks.card .flip-front {
  justify-content: flex-start !important;
  padding: 30px 22px 24px !important;
}

html body #v1-thanks.card .flip-back {
  justify-content: center !important;
  padding: 24px 16px 16px !important;
}

html body #z-thanks.card .flip-back {
  justify-content: center !important;
  padding: 34px 28px !important;
}

html body #v1-thanks.card .flip-back .lbl {
  margin: 0 0 6px !important;
  color: #c8d8d0 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
}

html body #z-thanks.card .flip-back .lbl {
  margin: 0 0 8px !important;
  color: #c8d8d0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
}

html body #v1-thanks.card .flip-back .num-row {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  max-width: 252px !important;
  min-height: 32px !important;
  gap: 6px !important;
  margin: 0 auto 6px !important;
}

html body #z-thanks.card .flip-back .num-row {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  max-width: 286px !important;
  min-height: 36px !important;
  gap: 8px !important;
  margin: 0 auto 10px !important;
}

html body #v1-thanks.card .flip-back .num {
  color: var(--cx-cream) !important;
  font-size: 14.5px !important;
  line-height: 1.15 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

html body #z-thanks.card .flip-back .num {
  color: var(--cx-cream) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.15 !important;
  letter-spacing: .045em !important;
}

html body #v1-thanks.card .flip-back .copy-num {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  transform: none !important;
}

html body #z-thanks.card .flip-back .copy-num {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 8px !important;
  transform: none !important;
}

html body #v1-thanks.card .flip-back .flip-close {
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}

html body #z-thanks.card .flip-back .flip-close {
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

html body #v1-thanks.card .flip-back p.do {
  width: 100% !important;
  max-width: 240px !important;
  margin: 6px auto 0 !important;
  color: #c1cdc7 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body #z-thanks.card .flip-back p.do {
  width: 100% !important;
  max-width: 260px !important;
  margin: 8px auto 0 !important;
  color: #c1cdc7 !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
}

html body #v1-thanks.card .start-over,
html body #z-thanks.card .start-over {
  position: relative !important;
  display: inline-flex !important;
  margin: 10px auto 16px !important;
}

@media (min-width: 800px) and (max-height: 819px) {
  #info-z4 .rule {
    min-height: 86px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.32 !important;
  }

  #info-z4 .rule strong {
    font-size: 15px !important;
  }

  #info-z4 .end-review-cta {
    min-height: 60px !important;
    margin-top: 14px !important;
    font-size: 17px !important;
  }
}

@media (max-width: 799px) {
  #info-z4 .rule-list {
    gap: 9px !important;
  }

  #info-z4 .rule {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 102px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    font-size: 13.5px !important;
    line-height: 1.32 !important;
  }

  #info-z4 .rule .rn {
    width: 34px !important;
    font-size: 28px !important;
  }

  #info-z4 .rule strong {
    font-size: 15px !important;
  }

  #info-z4 .end-review-cta {
    width: 100% !important;
    min-height: 64px !important;
    margin-top: 14px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
  }

  html body #z-thanks.card .thanks-hint {
    width: 100% !important;
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  html body #z-thanks.card .flip-wrap {
    width: min(330px, calc(100% - 12px)) !important;
    height: 300px !important;
    margin-bottom: 8px !important;
  }

  html body #z-thanks.card .flip-front {
    padding: 24px 18px 20px !important;
  }

  html body #z-thanks.card .flip-back {
    padding: 30px 22px 22px !important;
  }

  html body #z-thanks.card .start-over {
    margin-top: 12px !important;
  }

  /* Safari iOS: use a face swap instead of a 3D rotation. WebKit can
     composite the front face mirrored after an in-page card transition. */
  html body #z-thanks.card .flip-wrap {
    perspective: none !important;
  }

  html body #z-thanks.card .flip-inner {
    transform: none !important;
    transform-style: flat !important;
  }

  html body #z-thanks.card .flip-inner .flip-front,
  html body #z-thanks.card .flip-inner .flip-back {
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }

  html body #z-thanks.card .flip-wrap:not(.flipped) .flip-front,
  html body #z-thanks.card .flip-wrap.flipped .flip-back {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body #z-thanks.card .flip-wrap:not(.flipped) .flip-back,
  html body #z-thanks.card .flip-wrap.flipped .flip-front {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Preview-reference identity: every reveal face uses the same quiet green
   dossier artwork as the final receipt, at its card's existing dimensions. */
html body #v1-later.card .flip-inner .file-panel,
html body #v2-file.card .flip-inner .file-panel,
html body #v1-thanks.card .flip-inner .file-panel,
html body #z-thanks.card .flip-inner .file-panel {
  background: linear-gradient(180deg, rgba(18, 49, 41, .90), rgba(8, 27, 23, .94)) !important;
  border: 1px solid rgba(116, 183, 159, .34) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 68px rgba(0, 0, 0, .30), 0 0 48px rgba(41, 126, 95, .10), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* The submission reference must remain a single, readable identifier on the
   dossier back. Keep the copy action in its own column instead of letting it
   reduce the reference to a narrow wrapping strip. */
html body #v2-file.card .flip-back .num-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body #v2-file.card .flip-back .num {
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: center !important;
}

/* Preserve a generous click target while making the visible close mark quiet. */
html body #v2-file.card .flip-back .flip-close {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

html body #v2-file.card > .v1-foot::before,
html body #v2-file.card > .v1-foot::after {
  display: none !important;
  content: none !important;
}

html body #v1-later.card .flip-inner .flip-front,
html body #v2-file.card .flip-inner .flip-front,
html body #v1-thanks.card .flip-inner .flip-front,
html body #z-thanks.card .flip-inner .flip-front {
  background-color: #06251d !important;
  background-image:
    linear-gradient(180deg, rgba(12, 48, 39, .58), rgba(4, 24, 18, .88)),
    url("/citizenship-test-assets/assets/illustrations/case-dossier-v2.png") !important;
  background-position: center, center 62% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 112% auto !important;
  border: 1px solid rgba(116, 183, 159, .34) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 68px rgba(0, 0, 0, .30), 0 0 48px rgba(41, 126, 95, .10), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html body #v1-later.card .flip-front .flip-kick,
html body #v1-later.card .flip-front .flip-hint,
html body #v2-file.card .flip-front .flip-kick,
html body #v2-file.card .flip-front .flip-hint,
html body #v1-thanks.card .flip-front .flip-kick,
html body #v1-thanks.card .flip-front .flip-hint,
html body #z-thanks.card .flip-front .flip-kick,
html body #z-thanks.card .flip-front .flip-hint {
  color: #f3e8d6 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72) !important;
}

html body #v1-later.card .case-file-cta {
  margin: 0 !important;
  margin-inline-start: auto !important;
  flex: 0 1 220px !important;
  width: min(220px, 100%) !important;
  min-width: 0 !important;
  max-width: 220px !important;
  height: var(--funnel-control-height) !important;
  min-height: var(--funnel-control-height) !important;
  gap: 8px !important;
  padding: 3px 12px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  font-weight: 300 !important;
}

html body #v1-later.card .case-file-cta-label {
  min-width: 0;
  font: inherit;
  font-weight: 300 !important;
  white-space: normal !important;
}

html body #v1-later.card .case-file-cta-arrow {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 1.12em;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-.02em);
}

@media (max-width: 799px) {
  html body section.card .v1-foot .btn.primary.codex-mobile-continue-cta,
  html body section.card .v2-foot .btn.primary.codex-mobile-continue-cta {
    padding-inline: 12px !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    white-space: nowrap !important;
  }


  html body #v1-later.card .case-file-cta {
    gap: 0 !important;
    padding-inline: 12px !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-wrap: balance;
    letter-spacing: .025em !important;
  }

  html body #v1-later.card .case-file-cta-label {
    font-size: 17px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    letter-spacing: .025em !important;
  }

  html body #v1-later.card .case-file-cta-arrow {
    display: none !important;
  }
}

/* V2 in-card progress bar hangs under the eyebrow, out of the flow, as wide as it. */
.funnel-progress-track {
  position: absolute !important;
  inset: calc(100% + 3px) 0 auto 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* The saved-reference entry is its own screen, never an overlay on Question 1. */
html body #v1-1.card.resume .resume-pane {
  width: min(817px, calc(100% - 72px)) !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: clamp(84px, 14vh, 142px) auto 0 !important;
}

html body #v1-1.card.resume .resume-pane .form-q {
  margin: 0 0 26px !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html body #v1-1.card.resume #resume-input {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #v1-1.card.resume #resume-preview-help {
  width: 100% !important;
  margin: 16px 0 0 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

@media (max-width: 799px) {
  html body #v1-1.card.resume .resume-pane {
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(58px, 10svh, 92px) auto 0 !important;
  }

  html body #v1-1.card.resume .resume-pane .form-q {
    margin-bottom: 24px !important;
    font-size: 30px !important;
  }

  html body #v1-1.card.resume #resume-input {
    height: 64px !important;
    min-height: 64px !important;
    font-size: 18px !important;
  }

  html body #v1-1.card.resume #resume-preview-help {
    margin-top: 16px !important;
    font-size: 14px !important;
  }
}

/* v106 — shared contracts replace repeated card-specific repairs. */
section.card.v2 .codex-primary-question {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* One native label/control gap, including dynamically expanded tree fields. */
section.card main .flab {
  margin-bottom: 6px !important;
}

section.card.v2 .q-ask + .opt-list {
  margin-top: 0 !important;
}

#v4-7.card main > .q-ask {
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  width: 92% !important;
  max-width: 92% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#v4-7.card main > .q-ask + .opt-list {
  margin-top: 0 !important;
}

#v4-7 #ggg-fields:not([hidden]) .fpair:first-child {
  margin-top: 18px !important;
}

@media (min-width: 800px) {
  #v4-7 #ggg-fields:not([hidden]) .fpair:nth-child(2) {
    margin-top: 18px !important;
  }
}

section.card[id^="info-"]:not(#info-z4) .rule-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

section.card[id^="info-"]:not(#info-z4) .rule {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  border: 1px solid rgba(120, 150, 190, .24) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(22, 29, 42, .86), rgba(14, 20, 31, .90)) !important;
  box-sizing: border-box !important;
}

section.card[id^="info-"]:not(#info-z4) .rule .rn {
  width: 42px !important;
  color: #e0b95e !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

section.card[id^="info-"]:not(#info-z4) .rule > div {
  min-width: 0 !important;
  color: #aeb8c8 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

section.card[id^="info-"]:not(#info-z4) .rule strong {
  color: #f1eee8 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

@media (max-width: 799px) {
  #v1-0 .stage-title,
  #v2-1 .stage-title,
  #v3-0 .stage-title,
  #v4-1 .stage-title {
    display: none !important;
  }

  section.card[id^="info-"]:not(#info-z4) .rule {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }

  section.card[id^="info-"]:not(#info-z4) .rule .rn {
    width: 34px !important;
    font-size: 26px !important;
  }

  section.card[id^="info-"]:not(#info-z4) .rule > div {
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  section.card[id^="info-"]:not(#info-z4) .rule strong {
    font-size: 15px !important;
  }

  html body #v1-thanks.card .reveal-arrow {
    margin-top: 8px !important;
  }

  html body #v1-thanks.card .secondary {
    margin-top: 8px !important;
  }

  html body #v1-thanks.card .start-over {
    margin-top: 5px !important;
  }
}


/* In-memory answer review: normal document flow, never a nested scroller. */
#info-z4 #codex-answer-review {
  width: 100%; max-width: 920px; min-width: 0; box-sizing: border-box;
  margin: 18px auto 28px; padding: 20px; border: 1px solid #344352;
  border-radius: 16px; background: #101923; color: #edf1f5; text-align: left;
  overflow-wrap: anywhere;
}
#codex-answer-review h2 { font-size: 24px; line-height: 1.25; margin: 0 0 10px; }
#codex-answer-review > p { font-size: 14px; line-height: 1.5; margin: 0 0 18px; color: #bbc5d0; }
#codex-answer-review > section { margin: 20px 0 0; }
#codex-answer-review h3 { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
#codex-answer-review dl { margin: 0; }
#codex-answer-review dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; padding: 10px 0; border-top: 1px solid #2c3947; }
#codex-answer-review dt { margin: 0; font-size: 14px; line-height: 1.45; color: #bbc5d0; }
#codex-answer-review dd { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
@media (max-width: 799px) {
  #info-z4 #codex-answer-review { padding: 16px; }
  #codex-answer-review dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* v1-thanks full-page scroll layout & downstream sections */
html body #v1-thanks.card {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
}

html body #v1-thanks.card > main.thanks-main {
  height: auto !important;
  min-height: auto !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding-inline: 20px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transform: none !important;
}
/* v1-thanks status-box enabled for evidence capsule */

html body #v1-thanks.card .v1-post-section {
  width: 100% !important;
  max-width: 860px !important;
  margin: 40px auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

html body #v1-thanks.card .v1-sec-eyebrow {
  color: #ff8b9b !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

html body #v1-thanks.card .v1-sec-title {
  color: #ffffff !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: clamp(24px, 3.8vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 auto 16px !important;
  max-width: 720px !important;
}

html body #v1-thanks.card .v1-sec-desc {
  color: #94a3b8 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
  margin: 0 auto 28px !important;
}

html body #v1-thanks.card .v1-sec-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto 24px !important;
  min-height: 54px !important;
  height: auto !important;
  padding: 14px 34px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #9f2848 0%, #7a1e38 100%) !important;
  border: 1px solid #b13352 !important;
  box-shadow: 0 8px 24px rgba(122, 30, 56, 0.4) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  width: auto !important;
  max-width: 380px !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}

html body #v1-thanks.card .v1-sec-cta:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}

html body #v1-thanks.card .v1-guides-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 20px auto 30px !important;
  box-sizing: border-box !important;
}

html body #v1-thanks.card .v1-guide-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  background: rgba(14, 21, 37, 0.7) !important;
  border: 1px solid rgba(120, 150, 190, 0.22) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-decoration: none !important;
  min-height: 90px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease !important;
}

html body #v1-thanks.card .v1-guide-card:hover {
  border-color: #ff8b9b !important;
  background: rgba(20, 30, 52, 0.9) !important;
  transform: translateY(-2px) !important;
}

html body #v1-thanks.card .v1-guide-name {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

html body #v1-thanks.card .v1-guide-action {
  color: #ff8b9b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Hide residual stage back buttons from v1-thanks */
html body #v1-thanks.card > header.top,
html body #v1-thanks.card .foot-back,
html body #v1-thanks.card .back,
html body #v1-thanks.card .codex-mobile-footer-back,
html body #v1-thanks.card .codex-mobile-footer-nav {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   BOUTIQUE EDUCATIONAL FUNNEL CARDS (Elevated on desktop)
   ════════════════════════════════════════════════════════════════════════ */
.card.v2[id^="info-"],
.card.v2[id^="info-z"] {
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
}
.card.v2[id^="info-"].on,
.card.v2[id^="info-z"].on {
  display: flex !important;
}
.card.v2[id^="info-"] header.top,
.card.v2[id^="info-z"] header.top {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  z-index: 10 !important;
}
.card.v2[id^="info-"] .v1-foot,
.card.v2[id^="info-z"] .v1-foot {
  display: none !important;
}
.edu-main-wrap {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}
.edu-card-box {
  width: 100% !important;
  max-width: 820px !important;
  min-height: 540px !important;
  background: #0f1521 !important;
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  padding: 56px 64px 36px !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: auto !important;
}
.edu-card-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: auto !important;
}
.edu-icon-wrap {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  margin: 0 auto 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #f1f5f9 !important;
  flex-shrink: 0 !important;
}
.edu-icon-wrap svg {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.edu-card-title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 24px 0 !important;
  letter-spacing: -0.01em !important;
}
.edu-card-text {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: #b8c2d0 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
.edu-card-foot {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 24px !important;
}
.edu-foot-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 32px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0b0f19 !important;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}
.edu-foot-cta:hover {
  background: #f1f5f9 !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 640px) {
  .edu-main-wrap {
    justify-content: center !important;
    padding: 16px !important;
  }
  .edu-card-box {
    max-width: 100% !important;
    min-height: 480px !important;
    padding: 36px 20px 24px !important;
    border-radius: 24px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    margin: auto !important;
  }
  .edu-icon-wrap, .edu-icon-wrap svg {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    margin-bottom: 24px !important;
  }
  .edu-card-title {
    font-size: 26px !important;
    margin-bottom: 20px !important;
  }
  .edu-card-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .edu-card-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 18px !important;
    margin-top: 18px !important;
  }
  .edu-foot-cta {
    width: auto !important;
    min-height: 44px !important;
    padding: 12px 26px !important;
    font-size: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   THEMATIC STATION BACKDROPS & HARMONIZED CARD BOXES (Stations 1–8)
   ════════════════════════════════════════════════════════════════════════ */

/* Station 1: Initial Check — Warm Burgundy / Mahogany */
body:has(#info-v1.on) {
  --info-screen-background:
    radial-gradient(980px 520px at 54% -180px, rgba(150, 48, 75, .24), transparent 67%),
    radial-gradient(720px 520px at 104% 92%, rgba(57, 78, 121, .12), transparent 68%),
    linear-gradient(155deg, #180d16 0%, #120e17 48%, #090d14 100%);
}
body:has(#info-v1.on)::before {
  background: var(--info-screen-background) !important;
}
#info-v1 .edu-card-box {
  background: linear-gradient(175deg, #1a0f18 0%, #120b12 60%, #0a060b 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 2: Citizenship Test — Deep Slate / Midnight Navy */
body:has(#info-v2.on) {
  --info-screen-background:
    radial-gradient(900px 520px at 60% -180px, rgba(57, 78, 121, .25), transparent 70%),
    linear-gradient(155deg, #0f1524 0%, #0b111d 50%, #080c14 100%);
}
body:has(#info-v2.on)::before {
  background: var(--info-screen-background) !important;
}
#info-v2 .edu-card-box {
  background: linear-gradient(175deg, #101726 0%, #0b111c 60%, #060910 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 3: Costs & Time — Dark Bronze / Warm Amber Obsidian */
body:has(#info-v3.on) {
  --info-screen-background:
    radial-gradient(900px 520px at 60% -180px, rgba(185, 135, 45, .24), transparent 70%),
    linear-gradient(155deg, #1c150c 0%, #13100e 48%, #090d14 100%);
}
body:has(#info-v3.on)::before {
  background: var(--info-screen-background) !important;
}
#info-v3 .edu-card-box {
  background: linear-gradient(175deg, #1f180e 0%, #14100a 60%, #0a0805 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 4: Family Tree — Heritage Slate Teal / Deep Pine */
body:has(#info-v4.on) {
  --info-screen-background:
    radial-gradient(900px 520px at 60% -180px, rgba(38, 105, 120, .24), transparent 70%),
    linear-gradient(155deg, #0e1c24 0%, #09131a 50%, #070d14 100%);
}
body:has(#info-v4.on)::before {
  background: var(--info-screen-background) !important;
}
#info-v4 .edu-card-box {
  background: linear-gradient(175deg, #101f28 0%, #0a141b 60%, #060c11 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 5: Result & Next Step — Royal Indigo / Deep Sapphire */
body:has(#info-v5.on) {
  --info-screen-background:
    radial-gradient(900px 520px at 62% -170px, rgba(84, 91, 185, .30), transparent 70%),
    linear-gradient(150deg, #191d3d 0%, var(--cx-indigo) 53%, #0a0e1a 100%);
}
body:has(#info-v5.on)::before {
  background: var(--info-screen-background) !important;
}
#info-v5 .edu-card-box {
  background: linear-gradient(175deg, #181d3d 0%, #11142e 60%, #090a19 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 6: Our Clients — Oceanic Cyan / International Midnight */
body:has(#info-z1.on) {
  --info-screen-background:
    radial-gradient(900px 520px at 60% -180px, rgba(28, 167, 193, .24), transparent 70%),
    linear-gradient(155deg, #0d202a 0%, #08151e 50%, #060d14 100%);
}
body:has(#info-z1.on)::before {
  background: var(--info-screen-background) !important;
}
#info-z1 .edu-card-box {
  background: linear-gradient(175deg, #0e222e 0%, #091720 60%, #050e14 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 7: Consultation — Deep Violet Slate / Evening Call */
body:has(#info-z2.on) {
  --info-screen-background:
    radial-gradient(900px 520px at 60% -180px, rgba(120, 95, 175, .24), transparent 70%),
    linear-gradient(155deg, #19142a 0%, #110e1e 50%, #080a14 100%);
}
body:has(#info-z2.on)::before {
  background: var(--info-screen-background) !important;
}
#info-z2 .edu-card-box {
  background: linear-gradient(175deg, #1b162e 0%, #120e20 60%, #0a0712 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Station 8: Review — Deep Forest / Imperial Emerald */
body:has(#info-z4.on) {
  --info-screen-background:
    radial-gradient(900px 540px at 62% -190px, rgba(49, 126, 102, .30), transparent 70%),
    linear-gradient(150deg, var(--cx-green-2) 0%, var(--cx-green) 55%, #06110f 100%);
}
body:has(#info-z4.on)::before {
  background: var(--info-screen-background) !important;
}
#info-z4 .edu-card-box {
  background: linear-gradient(175deg, #0e2721 0%, #091c18 60%, #05120f 100%) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* v3-result: alignment of payment heading and installment chips with quote-panel axis, remove scroll hint */
#v3-result .scroll-hint-strip {
  display: none !important;
}

#v3-result .install-label {
  display: block !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 20px auto 6px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

[dir="rtl"] #v3-result .install-label,
html[dir="rtl"] #v3-result .install-label {
  text-align: right !important;
}

#v3-result .month-chips {
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* DESKTOP FORM ALIGNMENT: 2-column forms align cleanly to the standard 817px axis */
@media (min-width: 800px) {
  #v4-2 main, #v4-3 main, #v4-4 main, #v4-5 main, #v4-6 main, #v4-7 main, #v2-contact main, #v2-5 main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, calc((min(817px, 100% - 72px) - 16px) / 2))) !important;
    column-gap: 16px !important;
    row-gap: 0px !important;
    justify-content: center !important;
    align-items: start !important;
    align-content: start !important;
  }
  #v4-2 main > *:not(.fpair), #v4-3 main > *:not(.fpair), #v4-4 main > *:not(.fpair),
  #v4-5 main > *:not(.fpair), #v4-6 main > *:not(.fpair), #v4-7 main > *:not(.fpair),
  #v2-contact main > *:not(.fpair), #v2-5 main > *:not(.fpair) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .kid-block:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, calc((min(817px, 100% - 72px) - 16px) / 2))) !important;
    column-gap: 16px !important;
    row-gap: 0px !important;
    justify-content: center !important;
    grid-column: 1 / -1 !important;
    margin-bottom: 10px !important;
  }
}

/* v1-gate aligned to standard axis */
#v1-gate .q-chrome {
  /* Reserve the same kicker row as the question cards, without showing a label. */
  display: flex !important;
  visibility: hidden !important;
}
#v1-gate h1.form-q,
#v1-gate h1 {
  font-family: "Avenir Next", Avenir, Montserrat, Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  margin: 16px auto 10px !important;
  width: 100% !important;
  max-width: none !important;
}
#v1-gate .gate-hint,
#v1-gate p.gate-hint {
  text-align: center !important;
  margin: 0 auto 20px !important;
  max-width: 640px !important;
  color: #9aa3b5 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.card.v1-gate .status-box,
.card.v1-gate .gate-hint,
.card.v1-gate .cta-glow {
  width: min(817px, calc(100% - 72px)) !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Consent checkbox row aligned to standard axis */
.consent, label.consent {
  display: flex !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 18px auto 12px !important;
  box-sizing: border-box !important;
}
@media (max-width: 799px) {
  .consent, label.consent {
    max-width: 100% !important;
    margin: 16px 0 12px !important;
  }
}

/* Zero scrollbars and seamless container on all cards and viewports */
.card,
.card.on,
section.card,
section.card.on,
main {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.card::-webkit-scrollbar,
.card.on::-webkit-scrollbar,
section.card::-webkit-scrollbar,
section.card.on::-webkit-scrollbar,
main::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scroll-hint-strip {
  display: none !important;
}

/* Desktop Thank you card alignment to STAGE 1 OF 8 line */
@media (min-width: 800px) {
}

/* Eliminate all mobile sticky footers - Continue buttons sit directly in document flow on main card background */

/* Hide redundant subtitles on Next Generation cards */
#v2-6a .help,
#v2-6b .help,
#v2-6c .help,
#v2-6d .help {
  display: none !important;
}

/* Cumulative Answers Summary Tables across V1 -> V2 -> V3 -> V4 -> V5 */
.resume-answers-box {
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 18px auto 20px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

[dir="rtl"] .resume-answers-box {
  text-align: right !important;
}

.resume-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 18px 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.resume-section-header:first-child {
  margin-top: 0 !important;
}

.resume-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.resume-item:last-child {
  border-bottom: none !important;
}

.resume-q {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
}

.resume-a {
  color: #f8fafc !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: right !important;
  word-break: break-word !important;
}

[dir="rtl"] .resume-a {
  text-align: left !important;
}

@media (max-width: 640px) {
  .resume-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  .resume-a {
    text-align: left !important;
  }
  [dir="rtl"] .resume-a {
    text-align: right !important;
  }
}

/* ==========================================================================
   TOP CONTROLS: 3 LEFT (BACK, LANG, VOICE), 3 RIGHT (RESTART, PAUSE, DELETE)
   ========================================================================== */

/* Pause button state */

/* Voice button speaking state */

@keyframes codex-voice-pulse {
  0% { transform: scale(1); box-shadow: 0 0 12px rgba(223, 109, 131, .4); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(223, 109, 131, .7); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(223, 109, 131, .4); }
}

/* Start Over button hover */

/* Delete button hover & state */

/* Freeze / Pause Overlay — INFO-CARD Style */

@keyframes codex-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Delete Confirmation Overlay (red variant of pause/freeze modal) */

/* Save Overlay (Requirement 9: exact same design style as PAUSE and DELETE) */

.codex-save-ref-box {
  margin: 20px auto 14px !important;
  padding: 12px 20px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(140, 180, 240, 0.25) !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.codex-save-ref-code {
  font-family: monospace, ui-monospace, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #60a5fa !important;
  letter-spacing: 0.05em !important;
}

.codex-save-copy-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.codex-save-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Resume Card (Requirement 2: Case ID input styling) */
.resume-input-wrap {
  width: 100% !important;
  max-width: 480px !important;
  margin: 18px auto 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: start !important;
}

.resume-input-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(220, 226, 235, 0.85) !important;
  letter-spacing: 0.01em !important;
}

.resume-case-input {
  width: 100% !important;
  height: 50px !important;
  padding: 0 16px !important;
  background: rgba(14, 20, 32, 0.75) !important;
  border: 1px solid rgba(160, 180, 220, 0.3) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: monospace, ui-monospace, sans-serif !important;
  letter-spacing: 0.05em !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.resume-case-input:focus {
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

.resume-case-input::placeholder {
  color: rgba(160, 180, 210, 0.4) !important;
}

@media (max-width: 799px) {
  .funnel-mobile-label {
    padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
  }

  /* Reserve a separate row: the complete file-number label and three 44px
     controls cannot share 320px, especially after localization or text zoom. */
  .card .have-file {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 8px auto 12px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center !important;
    color: #c9c1bc !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 22px !important;
    touch-action: manipulation;
  }
  .card .have-file:focus-visible {
    outline: 3px solid #f7c6d0 !important;
    outline-offset: 3px !important;
  }

  /* Mobile form input optimization for iPhone: 16px font prevents iOS Safari auto-zoom */
  .tin,
  .card.v2 .tin,
  input.tin,
  textarea.tin,
  select.tin,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: rgba(16, 24, 37, 0.78) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }
  .tin:focus,
  .card.v2 .tin:focus,
  input.tin:focus,
  textarea.tin:focus,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
  textarea:focus {
    border-color: #df6d83 !important;
    box-shadow: 0 0 0 3px rgba(223, 109, 131, 0.22) !important;
    outline: none !important;
  }
  .consent-input {
    font-size: 16px !important;
  }
  .chip,
  .opt-list .chip {
    min-height: 50px !important;
    font-size: 15.5px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease !important;
  }
  .chip:active,
  .opt-list .chip:active {
    transform: scale(0.98) !important;
  }

  /* Stage dialog iOS refinement */

  /* Mobile safe-area padding for bottom action footers */
}

/* ==========================================================================
   INFO-CARD MOTTO REMOVAL (ALL CARDS)
   ========================================================================== */
.info-card-motto,
section.card .info-card-motto,
section.card:not([id^="info-"]) .info-card-motto,
section.card:not(.on) .info-card-motto,
section.card.on[id^="info-"] > .info-card-motto,
section.card.on[id^="info-"] .info-card-motto,
[dir="rtl"] section.card.on[id^="info-"] > .info-card-motto,
[dir="rtl"] section.card.on[id^="info-"] .info-card-motto {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* Card 0 Introduction: hide legacy header and back button */
#intro header.top,
#intro .top,
#intro .back {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* On desktop, hide save button (right group is RESTART, PAUSE, DELETE)
   and hide hamburger stage-toggle (desktop uses side rail stepper) */

/* Requirement 8: Remove pill "I already have a file number" from all cards */
.have-file,
.card .have-file,
header.top > .have-file,
.codex-mobile-file-action {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Continuation card (v2-resume) actions */
#v2-resume .v1-foot-row {
  display: flex !important;
  flex-direction: row !important;
}
/* #v2-resume-start-over: colours, size and arrow come from the shared rail
 * rules at the end of this sheet (dark green, same size as Confirm, ← arrow). */
@media (max-width: 799px) {
  /* On a phone Start Over sits UNDER Confirm & Continue, both the same size. */
  #v2-resume .v1-foot-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body section.card#v2-resume:not(#intro) .v1-foot-row > .btn.codex-rail-cta {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* Card 17 (v2-8): Polish and Foreign documents 2-column layout on desktop */
#v2-8 .v2-8-cols {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

#v2-8 .v2-8-col {
  min-width: 0 !important;
  width: 100% !important;
}

#v2-8 .v2-8-col .flab {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(244, 236, 232, 0.6) !important;
}

#v2-8 .v2-8-col .opt-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#v2-8 .v2-8-col .chip {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 800px) {
  #v2-8 .v2-8-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    width: 100% !important;
    max-width: 817px !important;
    margin: 0 auto !important;
  }
}


/* INFO cards have no footer: their authored Back never enters the footer
   relocation path. The viewport toolbar is the single Back owner here. */
section.card[id^="info-"] > header.top > .back {
  display: none !important;
}
@media (min-width: 800px) {
  .codex-desktop-fields-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    width: min(817px, calc(100% - 72px)) !important;
    max-width: min(817px, calc(100% - 72px)) !important;
    margin: 16px auto !important;
    flex: 0 0 auto !important;
  }
  .codex-desktop-field-group { min-width: 0; }
  .codex-desktop-field-group > .flab,
  .codex-desktop-field-group > .q-ask { margin-bottom: 8px !important; }
}

/* Approved informational emphasis: quiet CTAs follow each card's palette. */
@media (min-width: 800px) {
  section.card[id^="info-"] .edu-card-content { transform: translateY(-12px); }
}
section.card[id^="info-"] .edu-foot-cta {
  align-items: baseline !important;
  font-weight: 300 !important;
  color: rgba(204,210,217,.78) !important;
  background: var(--edu-cta-bg, #222c40) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(190,194,200,.12) !important;
}
section.card[id^="info-"] .edu-foot-cta:hover {
  background: var(--edu-cta-hover, #2e3b52) !important;
}

/* Funnel Continue actions use the same quiet interaction language as the
   info-card CTAs, while retaining their established dimensions and placement. */
section.card:not([id^="info-"]):not(.paper):not(#v1-gate):not(#z4) :is(.v1-foot, .v2-foot, .actions-live) .btn.primary {
  color: rgba(255, 244, 240, .82) !important;
  background: rgba(93, 27, 48, .68) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(228, 163, 179, .20) !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}

section.card:not([id^="info-"]):not(.paper):not(#v1-gate):not(#z4) :is(.v1-foot, .v2-foot, .actions-live) .btn.primary:not(.is-wait):hover,
section.card:not([id^="info-"]):not(.paper):not(#v1-gate):not(#z4) :is(.v1-foot, .v2-foot, .actions-live) .btn.primary:not(.is-wait):focus-visible {
  background: rgba(143, 54, 82, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(252, 206, 218, .32) !important;
  transform: translateY(-1px) !important;
}

section.card:not([id^="info-"]):not(.paper):not(#v1-gate):not(#z4) :is(.v1-foot, .v2-foot, .actions-live) .btn.primary:not(.is-wait):active {
  background: rgba(165, 64, 95, .90) !important;
  transform: translateY(0) !important;
}
section.card[id^="info-"] .edu-cta-arrow {
  position: relative;
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 1cap;
  font: inherit;
}
section.card[id^="info-"] .edu-cta-arrow svg {
  position: absolute;
  right: -1px;
  top: 50%;
  width: 24px;
  height: 12px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: .65px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#info-v1 .edu-card-box { --edu-cta-bg: #30212c; --edu-cta-hover: #3e2d3a; }
#info-v2 .edu-card-box { --edu-cta-bg: #222c40; --edu-cta-hover: #2e3b52; }
#info-v3 .edu-card-box { --edu-cta-bg: #332c20; --edu-cta-hover: #443a2a; }
#info-v4 .edu-card-box { --edu-cta-bg: #20343e; --edu-cta-hover: #2b4651; }
#info-v5 .edu-card-box { --edu-cta-bg: #292e4f; --edu-cta-hover: #373d65; }
#info-z1 .edu-card-box { --edu-cta-bg: #203845; --edu-cta-hover: #2b4b5b; }
#info-z2 .edu-card-box { --edu-cta-bg: #30273f; --edu-cta-hover: #413451; }
#info-z4 .edu-card-box { --edu-cta-bg: #203b32; --edu-cta-hover: #2b4f43; }

/* Mobile toolbar owns a real visual band while questions scroll underneath. */
@media (max-width: 799px) {
  html body:has(#phone):not([data-current-card="intro"])::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: calc(env(safe-area-inset-top, 0px) + 60px);
    /* Inherit the screen surface, never the inner info-card palette. */
    background: inherit !important;
    background-size: 100vw 100dvh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    z-index: 49;
    pointer-events: none;
  }
  /* One line, one height: a long translated stage name must not wrap and push
   * the eyebrow/title axis down on that card only (de: v5 "Ergebnis und…"). */
  .funnel-mobile-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center;
    line-height: 1.5;
    height: calc(env(safe-area-inset-top, 0px) + 71px) !important;
    box-sizing: border-box !important;
  }
  section.card[id^="info-"] .edu-main-wrap {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Narration text is not a visual question: broad card widths must not make
   its clipped one-pixel box wider than a narrow RTL screen. */
section.card [data-codex-narration][aria-hidden="true"] {
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
}
@media (max-width: 799px) {
  #v2-contact a.priv {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
  }
}

/* ==========================================================================
   CODEX FUNNEL UNIFIED LAYOUT: TYPOGRAPHY, 28PX VERTICAL SPACING & ALIGNMENT
   ========================================================================== */

/* Stage 6 & 7: The questions "Would you like us to ask someone to speak with you?" and "How would you like to continue?" are question prompts, NOT card titles */
#z1 .z-ask,
#z1 .form-q.z-ask,
#z1 .q-ask.z-ask,
#z1 h2.z-ask,
#z2 .z-ask,
#z2 .form-q.z-ask,
#z2 .q-ask.z-ask,
#z2 h2.z-ask,
[id^="z"] .z-ask,
[id^="z"] h2.z-ask,
[id^="z"] h2.form-q {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #fbf4e8 !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  letter-spacing: normal !important;
}


/* 1. All questions bold across the entire funnel */
.q-ask,
.card .q-ask,
.card.v2 .q-ask,
.integrity-second-question,
.sub-q-group > .q-ask,
#z1 .q-ask,
#z2 .q-ask,
[id^="z"] .q-ask {
  font-weight: 700 !important;
}

/* 2. Uniform 18px distance from ANY question text to the field/options list BELOW it */
.card.v2 .q-ask,
.card.v2 .codex-primary-question,
.card.v2 .integrity-second-question,
.card.v2 .sub-q-group > .q-ask,
.card .q-ask,
.q-ask,
.integrity-second-question,
.sub-q-group > .q-ask,
#v2-5j-nat-ask,
#v4-4 .q-ask {
  margin-bottom: 18px !important;
}

/* 3. Uniform 28px separation above follow-up / secondary questions */
.opt-list + .q-ask,
.opt-list + .sub-q-group,
.sub-q-group + .q-ask,
.sub-q-group,
.integrity-second-question,
#v2-7a .opt-list + .q-ask,
#v2-7b .opt-list + .q-ask,
#v2-5e-mwed-group,
#v2-5j-nat-ask,
#v2-5j-sppl-group + #v2-5j-nat-ask,
#v2-5k .integrity-second-question,
#v4-4 #howm,
#v4-4 #kids-fields {
  margin-top: 28px !important;
}

#v2-5j-sppl-group {
  margin-bottom: 0 !important;
}

/* When the spouse follow-up is hidden, naturalization is the first question.
   Keep it on the same 24px title axis as the other primary questions. */
#v2-5j-sppl-group[style*="display: none"] + #v2-5j-nat-ask {
  margin-top: 0 !important;
}

/* 4. Remove redundant subtitles in #v2-7a and #v2-7b */
#v2-7a .help,
#v2-7b .help {
  display: none !important;
}

/* 5. Flush horizontal alignment between questions and option lists */
.card.v2 .q-ask,
.card.v2 .opt-list,
.card.v2 .sub-q-group,
.sub-q-group,
.integrity-second-question,
.integrity-office-list {
  width: min(817px, calc(100% - 72px)) !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.card.v2 .sub-q-group > .q-ask,
.sub-q-group > .q-ask {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.card.v2 .sub-q-group > .opt-list,
.sub-q-group > .opt-list {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 799px) {
  .card.v2 .q-ask,
  .card.v2 .opt-list,
  .card.v2 .sub-q-group,
  .card.v2 .sub-q-group > .q-ask,
  .card.v2 .sub-q-group > .opt-list,
  .sub-q-group,
  .sub-q-group > .q-ask,
  .sub-q-group > .opt-list,
  .integrity-second-question,
  .integrity-office-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .card.v2 .sub-q-group > .q-ask,
  .sub-q-group > .q-ask {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  .card.codex-scroll-card,
  .card.v2.on {
    min-height: 100svh !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .card.codex-scroll-card > main,
  .card.v2.on > main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}

/* Desktop utility icons blend into the current station background. */
@media (min-width: 800px) {
  body { --utility-tone: 169, 177, 189; }
  body:has(#info-v1.on) { --utility-tone: 188, 151, 169; }
  body:has(#info-v2.on) { --utility-tone: 145, 165, 194; }
  body:has(#info-v3.on) { --utility-tone: 190, 168, 129; }
  body:has(#info-v4.on) { --utility-tone: 139, 178, 188; }
  body:has(#info-v5.on) { --utility-tone: 156, 163, 202; }
  body:has(#info-z1.on) { --utility-tone: 133, 182, 197; }
  body:has(#info-z2.on) { --utility-tone: 178, 158, 199; }
  body:has(#info-z4.on) { --utility-tone: 140, 183, 163; }
}

/* Map-backed question screens: quiet warm surfaces, prominent questions. */
html body section.card:not(#intro):not([id^="info-"]) :is(.w1-welcome, .note-box, .step4-hint, .rule) {
  background: linear-gradient(180deg, rgba(93, 73, 49, .16), rgba(48, 38, 28, .12)) !important;
  border-color: rgba(181, 157, 121, .18) !important;
  box-shadow: none !important;
}
html body section.card:not(#intro):not([id^="info-"]) .w1-welcome {
  background: linear-gradient(180deg, rgba(65, 52, 38, .88), rgba(40, 32, 24, .90)) !important;
  border-left-color: var(--cx-gold) !important;
  border-left-width: 2px !important;
}
html body section.card:not(#intro):not([id^="info-"]) :is(.q-ask, .integrity-second-question, .flab, .install-label) {
  color: #fbf4e8 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
html body section.card:not(#intro):not([id^="info-"]) .w1-w-strong {
  color: #ede3d3 !important;
  font-weight: 700 !important;
}

/* Welcome explanations share the info-card body typography. */
html body section.card .w1-welcome :is(.w1-w-strong, .w1-w-soft) {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif !important;
}
html body section.card .w1-welcome .w1-w-soft {
  font-weight: 300 !important;
}

@media (max-width: 799px) {
  :root { --funnel-content-width: 100%; }
}
/* Portrait framing of the existing desktop stage illustrations. */
@media (max-width: 799px) {
  body:has(#v1-0.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/poland-borders-1939-1945-v1.png"); --mobile-art-focus: 76%; }
  body:has(#v2-1.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/citizenship-test-records-v1.png"); --mobile-art-focus: 76%; }
  body:has(#v3-0.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/archival-document-v2.png"); --mobile-art-focus: 74%; }
  body:has(#v4-1.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/family-tree-archive-v3.png"); --mobile-art-focus: 78%; }
  body:has(#v5-0.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/case-dossier-v2.png"); --mobile-art-focus: 76%; }
  body:has(#v5.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/v5-time-question-v1.png"); --mobile-art-focus: 78%; }
  body:has(#z1.on) { --mobile-art-opacity: .15; --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/our-clients-case-network-v2.png"); --mobile-art-focus: 80%; }
  body:has(#z2.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/consultation-online-papers-v1.png"); --mobile-art-focus: 76%; }
  body:has(#z4.on) { --mobile-stage-art: url("/citizenship-test-assets/assets/illustrations/review-europe-glass-v1.png"); --mobile-art-focus: 76%; }
  body:has(#v1-0.on)::after,
  body:has(#v2-1.on)::after,
  body:has(#v3-0.on)::after,
  body:has(#v4-1.on)::after,
  body:has(#v5-0.on)::after,
  body:has(#v5.on)::after,
  body:has(#z1.on)::after,
  body:has(#z2.on)::after,
  body:has(#z4.on)::after {
    content: "";
    position: fixed;
    inset: 60px 0 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--mobile-stage-art);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: var(--mobile-art-focus) center;
    opacity: var(--mobile-art-opacity, .22);
    filter: saturate(.6);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 65%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 65%, transparent 100%);
  }
  body:has(#v5-0.on) .app,
  body:has(#v5.on) .app,
  body:has(#z4.on) .app { background: transparent !important; }
}

/* Consultation uses the illustration's natural tones, without the burgundy stage wash. */
html body:has(#z2.on) {
  background: #0b0e12 !important;
}
html body:has(#z2.on)::after {
  filter: saturate(.6) blur(3px);
}
@media (min-width: 800px) {
  html body:has(#z2.on)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(90deg, #0b0e12 0%, rgba(11,14,18,.96) 36%, rgba(11,14,18,.65) 62%, rgba(11,14,18,.25) 100%),
      linear-gradient(180deg, rgba(11,14,18,.15), rgba(11,14,18,.65)),
      url("/citizenship-test-assets/assets/illustrations/consultation-online-papers-v1.png");
    background-position: center, center, right -1vw center;
    background-size: cover, cover, auto 116vh;
    background-repeat: no-repeat;
    opacity: .65;
  }
}

/* Mobile info screens use the same station palette as the desktop backdrop. */
@media (max-width: 799px) {
  html body:has(:is(#info-v1, #info-v2, #info-v3, #info-v4, #info-v5, #info-z1, #info-z2, #info-z4).on) {
    background: var(--info-screen-background) !important;
    background-attachment: fixed !important;
  }
}

@media (max-width: 799px) {
  html body:has(:is(#info-v1, #info-v2, #info-v3, #info-v4, #info-v5, #info-z1, #info-z2, #info-z4).on) .app {
    background: transparent !important;
  }
}

/* V1 completion keeps the full citizenship test as its main next step. */
html body #v1-thanks.card {
  --thanks-action-height: clamp(50px, 5.8vh, 56px);
}
html body #v1-thanks.card .thanks-hello {
  font-style: normal !important;
  font-weight: 600 !important;
}
html body #v1-thanks.card :is(.cta-red, .flip-wrap) {
  width: 100% !important;
  max-width: 600px !important;
  height: var(--thanks-action-height) !important;
  min-height: var(--thanks-action-height) !important;
  max-height: var(--thanks-action-height) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
html body #v1-thanks.card .flip-wrap {
  margin: clamp(7px, 0.9vh, 9px) auto 0 !important;
  perspective: 1100px !important;
  cursor: pointer !important;
}
html body :is(#v1-thanks, #v1-later, #v2-file).card .flip-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body :is(#v1-thanks, #v1-later, #v2-file).card .flip-wrap.flipped .flip-inner {
  transform: rotateY(180deg) !important;
}
html body #v1-thanks.card .flip-inner .file-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 6px 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(22, 32, 28, 0.88), rgba(12, 18, 16, 0.94)) !important;
  border: 1px solid rgba(74, 222, 128, 0.28) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
html body #v1-thanks.card .flip-front.save-progress-cta {
  flex-direction: row !important;
  gap: 10px !important;
  cursor: pointer !important;
  background: linear-gradient(180deg, rgba(24, 34, 30, 0.88), rgba(14, 20, 18, 0.94)) !important;
}
html body #v1-thanks.card .flip-front.save-progress-cta:hover {
  border-color: rgba(74, 222, 128, 0.55) !important;
  background: linear-gradient(180deg, rgba(30, 44, 38, 0.95), rgba(18, 26, 24, 0.98)) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.18) !important;
}
html body #v1-thanks.card .flip-front.save-progress-cta .flip-kick {
  color: #e2f1e7 !important;
  font-family: Montserrat, Inter, system-ui, sans-serif !important;
  font-size: clamp(13.5px, 1.5vw, 15px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
}
html body #v1-thanks.card .flip-front.save-progress-cta .save-progress-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: #4ade80 !important;
}
html body #v1-thanks.card .flip-back {
  transform: rotateY(180deg) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: linear-gradient(180deg, rgba(16, 26, 36, 0.94), rgba(10, 16, 24, 0.98)) !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}
html body #v1-thanks.card .flip-back .flip-back-info {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  gap: 1px !important;
  min-width: 0 !important;
}
[dir="rtl"] html body #v1-thanks.card .flip-back .flip-back-info {
  text-align: right !important;
}
html body #v1-thanks.card .flip-back .lbl {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #86efac !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html body #v1-thanks.card .flip-back .flip-back-hint {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #v1-thanks.card .flip-back .num-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
html body #v1-thanks.card .flip-back .num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important;
  font-size: clamp(12.5px, 1.4vw, 14.5px) !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  background: rgba(0, 0, 0, 0.45) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  letter-spacing: 0.04em !important;
}
html body #v1-thanks.card .flip-back :is(.flip-close, .copy-num) {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  position: static !important;
  transform: none !important;
}
html body #v1-thanks.card .flip-back :is(.flip-close, .copy-num):hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
html body #v1-thanks.card .flip-back .copy-num.is-copied,
html body #v1-thanks.card .flip-back .copy-num.copied {
  background: rgba(34, 197, 94, 0.25) !important;
  color: #4ade80 !important;
  border-color: #22c55e !important;
}
[dir="rtl"] html body #v1-thanks.card .flip-back .flip-back-info {
  text-align: right !important;
}
html body #v1-thanks.card .casefile-line { display: none !important; }
@media (max-width: 640px) {
  html body #v1-thanks.card .flip-back .flip-back-hint { display: none !important; }
}
@media (max-width: 799px) {
  html body #v1-thanks.card { --thanks-action-height: 52px; }
  html body #v1-thanks.card .cta-red { padding: 10px 18px !important; font-size: 15px !important; }
}

/* The email result card keeps its submission action in the main content. */
html body #v1-gate.card .v1-foot { display: none !important; }

/* Delete flow: explicit second confirmation, then a persistent reverse receipt. */
.codex-delete-flipper {
  width: 100%;
  max-width: 680px;
  perspective: 1400px;
  margin: auto;
}
.codex-delete-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
#codex-delete-erased-title { outline: none; }
#codex-delete-confirm { white-space: normal; text-align: center; }
.codex-delete-error { color: #fca5a5; font: 14px/1.5 "Plus Jakarta Sans", sans-serif; }
@media (prefers-reduced-motion: reduce) {
  .codex-delete-inner { transition: none; }
}

/* Thank-you: compact luxury rhythm around the V2 invitation; no lower restart/back/secondary. */
html body #v1-thanks.card :is(.start-over, .v1-foot, .v2-foot, .codex-mobile-footer-back, .secondary) {
  display: none !important;
}
html body #v1-thanks.card .thanks-hint {
  margin-bottom: clamp(6px, 0.8vh, 8px) !important;
}
html body #v1-thanks.card .thanks-lead {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}
html body #v1-thanks.card .thanks-meta { margin-bottom: clamp(6px, 0.8vh, 8px) !important; }
html body #v1-thanks.card .flip-back :is(.flip-close, .copy-num) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  color: rgba(188, 205, 198, .68) !important;
  padding: 0 !important;
}
html body #v1-thanks.card .flip-back .reference-close-icon {
  width: 14px !important;
  height: 14px !important;
}
html body #v1-thanks.card .flip-back :is(.copy-ico, .copied-ico) {
  width: 18px !important;
  height: 18px !important;
}
html body #v1-thanks.card .flip-back :is(.flip-close, .copy-num):hover {
  color: #d5e4dd !important;
  background: rgba(188, 205, 198, .06) !important;
}
html body #v1-thanks.card .flip-back :is(.flip-close, .copy-num):focus-visible {
  outline: 1px solid #a8c1b5 !important;
  outline-offset: -5px;
}

/* Keep the reverse reference from bleeding through the front in Safari. */
html body #v1-thanks.card .flip-wrap:not(.flipped) .flip-back,
html body #v1-thanks.card .flip-wrap.flipped .flip-front {
  visibility: hidden !important;
  pointer-events: none !important;
}
html body #v1-thanks.card .flip-wrap:not(.flipped) .flip-front,
html body #v1-thanks.card .flip-wrap.flipped .flip-back {
  visibility: visible !important;
}

/* Mobile stage selection uses green surfaces instead of stacked outlines. */

/* Supporting details use regular weight; primary questions stay prominent. */
html body #v2-4.card .flab:has(+ :is(#maps, #originDetails)),
html body section#v2-5c.card .v2-dates-row .flab,
html body section#v2-5j.card .nat-details .flab {
  font-weight: 400 !important;
}

/* Contact-field labels are supporting instructions, not primary questions. */
html body section.card#v2-contact .fpair .flab {
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Keep the requested ASCII arrow literal in the V3 summary CTA. */
html body #v3-resume-confirm {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0 !important;
}

/* The route can create pairs during activation; reserve their final grid cell
   immediately so inputs have their final width before the first paint. */
@media (min-width: 800px) {
  html body #v2-contact > main > .fpair {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  html body #v2-contact > main > .fpair :is(.flab, .tin) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* v2-resume sits on the shared eyebrow/title axis like every other card; the
 * old +24px/+20px nudge (which only matched the V2 bar offset) is gone. */

/* All action rows belong to the card canvas; they never create a footer layer. */

/* The Family Tree resume link remains entirely inside the visible desktop
   canvas. The generic viewport anchor could be clipped by the preview frame. */
@media (min-width: 800px) {
  html body #v4-1.on > main > .have-file {
    position: fixed !important;
    top: 26px !important;
    right: 72px !important;
    left: auto !important;
    z-index: 61 !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(100vw - 176px) !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    color: #f3e8d6 !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
  }
}

/* Keep the requested literal ASCII arrow rather than an editorial glyph. */
html body #v4-resume-confirm {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0 !important;
}

/* Family Tree field labels are supporting instructions, not headings. */
html body section.card:is(#v4-2, #v4-3, #v4-4, #v4-5, #v4-6, #v4-7) .flab {
  font-weight: 400 !important;
  text-shadow: none !important;
}


/* Restored latest funnel corrections. */
/* Family Tree labels describe inputs and remain regular at every paint. */
html body section.card:is(#v4-2, #v4-3, #v4-4, #v4-5, #v4-6, #v4-7) .flab {
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Contact labels are metadata, not headings. */
html body #v2-contact .flab,
html body #v2-contact .fpair .flab {
  font-weight: 400 !important;
  text-shadow: none !important;
}


/* Family Tree PDF: the document and the assessment guidance share one reversible card.
   MUST BE FULLY VISIBLE WITHOUT SCROLLING on all screen heights. */
#tree-pdf.card {
  overflow: hidden !important;
}
#tree-pdf.card > main {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-bottom: 0 !important;
}

#tree-pdf .tree-card {
  /* 355px = eyebrow/title axis + heading gap + the normal-flow action rail (16 + 56 + 24) + margins. */
  width: min(860px, calc(100% - 48px), calc((100svh - 355px) * (297 / 210))) !important;
  max-width: min(860px, calc((100svh - 355px) * (297 / 210))) !important;
  max-height: calc(100svh - 355px) !important;
  /* Keep the document away from the question heading without allowing it
     to collide with the Continue rail on shorter desktop screens. */
  margin: clamp(26px, 3vh, 50px) auto 12px !important;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
}

@media (min-width: 800px) and (max-height: 879px) {
  /* tree-pdf keeps the shared eyebrow/title axis on short desktops (no private padding). */
  #tree-pdf.card > main > .q-chrome {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }
  #tree-pdf.card > main > .form-q {
    font-size: 24px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }
  #tree-pdf .tree-card {
    width: min(860px, calc(100% - 48px), calc((100svh - 245px) * (297 / 210))) !important;
    max-width: min(860px, calc((100svh - 245px) * (297 / 210))) !important;
    max-height: calc(100svh - 245px) !important;
    margin: 10px auto 8px !important;
  }
}

/* The PDF status line ("Preparing…", "download temporarily unavailable") is a
   fallback message: it lives in the slack under the document, outside the
   flow, so it can never push the tree — or Continue — off the screen. */
#tree-pdf.card > main > #tree-pdf-status.quiz-hint {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 6px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}
#tree-pdf .tree-card:focus-visible .tree-card-inner {
  box-shadow: 0 0 0 3px rgba(232, 99, 122, 0.72);
}
#tree-pdf .tree-card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  max-height: 100%;
  transform-style: preserve-3d;
  transition: transform 480ms ease;
}
#tree-pdf .tree-card.is-flipped .tree-card-inner {
  transform: rotateY(180deg);
}
#tree-pdf .tree-card.is-flipped .tree-card-front,
#tree-pdf .tree-card.is-flipped .tree-pdf-download {
  visibility: hidden;
  pointer-events: none;
}
#tree-pdf .tree-card:not(.is-flipped) .tree-card-back {
  visibility: hidden;
  pointer-events: none;
}
#tree-pdf .tree-card.is-flipped .tree-card-back {
  visibility: visible;
  pointer-events: auto;
}
#tree-pdf .tree-card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(140, 160, 200, 0.22);
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#tree-pdf .tree-card-front {
  background: #121a2b;
}
#tree-pdf #tree-pdf-frame.tree-frame {
  position: relative;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box;
  border: 0;
  border-radius: 14px;
  background: #121a2b;
  line-height: 0;
}
#tree-pdf .tree-card-front canvas,
#tree-pdf .tree-card-front #tree-pdf-canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  background: #fff !important;
}
#tree-pdf #tree-pdf-dl[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .45 !important;
}
#tree-pdf .tree-pdf-download {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #f9eee0;
  background: rgba(7, 14, 29, 0.88);
  border: 1px solid rgba(249, 238, 224, 0.38);
  border-radius: 50%;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease;
}
#tree-pdf .tree-pdf-download:hover,
#tree-pdf .tree-pdf-download:focus-visible {
  transform: translateY(-2px);
  background: #b42348;
  outline: none;
}
#tree-pdf .tree-pdf-download svg {
  width: 18px;
  height: 18px;
}
#tree-pdf .tree-card-more,
#tree-pdf .tree-card-return {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #d5dced;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
}
#tree-pdf .tree-card-more {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 4px 8px;
  color: #f9eee0;
  background: rgba(7, 14, 29, 0.86);
  border: 1px solid rgba(249, 238, 224, 0.28);
  border-radius: 999px;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(7, 14, 29, 0.82);
}
/* The front-side prompt is a persistent part of the card, never a clipped
   overlay. Keep a full 16px safe inset even when a browser rounds the A4
   aspect ratio to a fractional pixel. */
#tree-pdf .tree-card-more {
  bottom: 28px;
  box-sizing: border-box;
}
#tree-pdf .tree-card-back {
  display: block;
  padding: clamp(28px, 4vw, 40px);
  box-sizing: border-box;
  color: #eef2fa;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(175deg, #191e40 0%, #11142e 60%, #090a19 100%);
  transform: rotateY(180deg);
}
#tree-pdf .tree-card-back-copy {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
}
#tree-pdf .tree-card-kicker {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 3px 9px;
  color: #c6b48c;
  background: rgba(198, 180, 140, 0.12);
  border: 1px solid rgba(198, 180, 140, 0.25);
  border-radius: 9999px;
  font: 600 11px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#tree-pdf .tree-card-back h2 {
  margin: 0 0 16px;
  color: #f8fafc;
  font: 400 clamp(21px, 2.4vw, 28px)/1.25 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -0.01em;
}
#tree-pdf .tree-card-back-text {
  flex: 1 1 auto;
}
#tree-pdf .tree-card-back-text p {
  max-width: none !important;
  margin: 0 0 14px !important;
  color: #cbd4e2;
  font: 300 clamp(13px, 1.15vw, 15.5px)/1.6 "Plus Jakarta Sans", system-ui, sans-serif;
  text-align: left !important;
}
#tree-pdf .tree-card-back .tree-card-return {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  color: rgba(204, 210, 217, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font: 400 11.5px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
  transition: color 0.2s ease;
}
#tree-pdf .tree-card-back:hover .tree-card-return {
  color: #f1f5f9;
}
#tree-pdf .tree-card-return-icon {
  font-size: 13px;
  line-height: 1;
}

/* Back is intentionally available only in the global upper-left controls. */
html body section.card :is(.foot-back, .codex-universal-bottom-back, .codex-mobile-footer-back, .codex-mobile-bottom-back-source),
html body :is(.edu-flip-return-icon, .tree-card-return-icon) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 799px) {
  #tree-pdf.card > main {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  #tree-pdf .tree-card {
    width: min(calc(100% - 32px), calc((100svh - 330px) * (4 / 5))) !important;
    max-width: min(calc(100% - 32px), calc((100svh - 330px) * (4 / 5))) !important;
    max-height: calc(100svh - 330px) !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
  }
  #tree-pdf .tree-card-inner { aspect-ratio: 4 / 5; }
  #tree-pdf #tree-pdf-frame.tree-frame { display: grid; place-items: center; }
  #tree-pdf .tree-card-front canvas,
  #tree-pdf .tree-card-front #tree-pdf-canvas { width: 100% !important; max-height: 100% !important; }
  #tree-pdf .tree-card-back { padding: 20px 18px; }
  #tree-pdf .tree-card-back h2 { font-size: 20px; }
  #tree-pdf .tree-card-back-text p { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 799px) and (max-height: 700px) {
  #tree-pdf .tree-card {
    width: min(calc(100% - 32px), calc((100svh - 325px) * (4 / 5))) !important;
    max-width: min(calc(100% - 32px), calc((100svh - 325px) * (4 / 5))) !important;
    max-height: calc(100svh - 325px) !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }
}

/* Override the retired wide CTA rule for the compact PDF download icon. */
#tree-pdf a.tree-pdf-download#tree-pdf-dl {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  color: #f9eee0 !important;
  background: rgba(7, 14, 29, 0.88) !important;
  border: 1px solid rgba(249, 238, 224, 0.38) !important;
  border-radius: 50% !important;
  text-align: center !important;
}
#tree-pdf a.tree-pdf-download#tree-pdf-dl svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}


/* The saved-reference control uses the same clear hierarchy as the red CTA. */
#v1-thanks .flip-front .flip-save-label {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important; width: min(100%, 680px) !important; color: #f7f2e8 !important;
  font-family: Montserrat, Inter, sans-serif !important; font-size: 20px !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important;
  text-align: center !important; text-shadow: 0 2px 16px rgba(0,0,0,.72);
}
#v1-thanks .flip-front .flip-save-label svg { flex: 0 0 auto; color: #e8c85c !important; }

/* The saved-file action on the Family Tree introduction belongs inside its card. */
@media (min-width: 800px) {
  #v4-1 .have-file {
    position: absolute !important;
    top: 24px !important;
    right: 16px !important;
    z-index: 2 !important;
  }
}


/* Stage 6: anonymised people, not a list of client locations. */
#z1 .client-demo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: min(817px, calc(100% - 72px)) !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 0 auto 26px !important;
}
#z1 .client-demo-person {
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(246, 232, 234, .86);
  background: linear-gradient(145deg, rgba(38, 17, 29, .72), rgba(13, 20, 31, .88));
  border: 1px solid rgba(240, 184, 192, .2);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#z1 .client-demo-person svg {
  width: 54px;
  height: 54px;
  fill: rgba(235, 192, 144, .88);
  stroke: rgba(255, 239, 214, .82);
  stroke-width: 1.3;
}
#z1 .client-demo-person:nth-child(3n + 2) svg { fill: rgba(203, 184, 230, .88); }
#z1 .client-demo-person:nth-child(3n) svg { fill: rgba(156, 205, 190, .88); }
#z1 .client-demo-person span { font-size: 13px; font-weight: 400; letter-spacing: .02em; }
/* Our Clients: compact anonymous profiles keep the decision and action visible. */
#z1 .client-demo-grid {
  gap: 10px !important;
  margin-bottom: 16px !important;
}
#z1 .client-demo-person {
  min-height: 92px !important;
  gap: 5px !important;
}
#z1 .client-demo-person svg {
  width: 42px !important;
  height: 42px !important;
}
#z1 .client-demo-person span {
  font-size: 12px !important;
}

@media (max-width: 799px) {
  #z1 .q-chrome { margin-top: 6px !important; }
  #z1 h1.form-q:first-of-type,
  #z1 .form-q:first-of-type { font-size: 22px !important; line-height: 1.25 !important; margin-top: 4px !important; margin-bottom: 8px !important; }
  #z1 p.help { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: 8px !important; }
  #z1 .client-demo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #z1 .client-demo-person {
    min-height: 58px !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    gap: 4px !important;
  }
  #z1 .client-demo-person svg { width: 26px !important; height: 26px !important; }
  #z1 .client-demo-person span { font-size: 10.5px !important; line-height: 1.1 !important; }
  #z1 .z-ask,
  #z1 .form-q.z-ask,
  #z1 .q-ask.z-ask,
  #z1 h2.z-ask,
  #z2 .z-ask,
  #z2 .form-q.z-ask,
  #z2 .q-ask.z-ask,
  #z2 h2.z-ask,
  [id^="z"] .z-ask,
  [id^="z"] h2.z-ask,
  [id^="z"] h2.form-q {
    font-size: 16px !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }
  #z1 .opt-list { gap: 8px !important; margin-bottom: 8px !important; }
  #z1 .opt-list .chip { min-height: 48px !important; padding: 10px 14px !important; }
}

#z1 .v1-foot {
  display: block !important;
}

/* “Not for me” is a considered pause, not a rejection: use the same calm board language as Pause/Delete. */
/* The terminal board is an explicit destination.  Its permanent markup must
 * not create a second visible board below an active question. */
html body #v5-no.card.v5-not-for-me.on {
  min-height: 100dvh !important;
  display: block !important;
  overflow: auto !important;
}
html body #v5-no.card.v5-not-for-me.on > .v5-no-main {
  min-height: 100dvh !important;
  width: min(680px, calc(100% - 40px)) !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  /* Match the vertical anchor used by the INFO and Pause cards. */
  padding-inline: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
html body #v5-no .v5-no-board {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(38px, 5vw, 52px) clamp(24px, 5vw, 52px) 34px !important;
  border: 1px solid rgba(104, 173, 140, .28) !important;
  border-radius: 28px !important;
  color: #f5ead7 !important;
  background: linear-gradient(175deg, #0e2721 0%, #091c18 60%, #05120f 100%) !important;
  box-shadow: 0 32px 70px -12px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255,255,255,.06) !important;
  text-align: center !important;
}
html body #v5-no .v5-no-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 24px !important;
  display: grid !important;
  place-items: center !important;
  color: #d7eee1 !important;
}
html body #v5-no .v5-no-icon svg { width: 64px !important; height: 64px !important; }
html body #v5-no .v5-no-kicker {
  margin: 0 0 12px !important;
  color: #8dd3ad !important;
  font: 700 12px/1.2 "Plus Jakarta Sans", system-ui, sans-serif !important;
  letter-spacing: .19em !important;
}
html body #v5-no .v5-no-board h1 {
  margin: 0 0 18px !important;
  color: #fffaf0 !important;
  font: 400 clamp(31px, 4vw, 40px)/1.16 "Cormorant Garamond", Georgia, serif !important;
  text-wrap: balance !important;
}
html body #v5-no .v5-no-copy {
  max-width: 560px !important;
  margin: 0 auto !important;
  color: #b8cfc1 !important;
  font: 300 16px/1.7 "Plus Jakarta Sans", system-ui, sans-serif !important;
}
html body #v5-no .v5-no-note {
  margin: 18px auto 0 !important;
  color: #93aa9c !important;
  font: 400 13px/1.5 "Plus Jakarta Sans", system-ui, sans-serif !important;
}
html body #v5-no .v5-no-foot {
  display: flex !important;
  justify-content: center !important;
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
}
html body #v5-no .v5-no-return {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  background: rgba(236, 249, 241, .96) !important;
  color: #0b1d16 !important;
  font: 600 14px/1 "Plus Jakarta Sans", system-ui, sans-serif !important;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease !important;
}
html body #v5-no .v5-no-return:hover,
html body #v5-no .v5-no-return:focus-visible {
  background: #fff !important;
  color: #07120d !important;
  transform: translateY(-1px) !important;
}

/* V5 fee-reduction preview: a quiet, optional calculation control. The
 * label follows the stage-caption treatment and the choices use the same
 * restrained green family as the rest of the positive-path UI. */
#v5-0 .fee-reduction-preview {
  margin-top: 14px !important;
  text-align: left !important;
}

#v5-0 .fee-reduction-preview-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 9px !important;
  color: #e7657c !important;
  font: 400 11px/1.2 Inter, system-ui, sans-serif !important;
  letter-spacing: .16em !important;
  text-align: left !important;
}

#v5-0 .fee-reduction-preview-label::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: 0 0 28px;
  background: currentColor;
}

#v5-0 .fee-reduction-preview-chip {
  border: 0 !important;
  background: #0f573a !important;
  color: #b7ebcb !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
}

#v5-0 .fee-reduction-preview-chip:hover {
  border: 0 !important;
  background: #176e4a !important;
  color: #effff4 !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
}

#v5-0 .fee-reduction-preview-chip.is-selected {
  border: 0 !important;
  background: #21915f !important;
  color: #f2fff7 !important;
  box-shadow: none !important;
  outline: none !important;
}

#v5-0 .fee-reduction-preview-chip.is-selected:hover {
  border: 0 !important;
  background: #21915f !important;
  color: #f2fff7 !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
}

#v5-0 .fee-reduction-preview-chip:focus-visible {
  outline: 2px solid rgba(142, 224, 175, .62) !important;
  outline-offset: 2px !important;
}

#v5-0 .fee-reduction-preview-chip:focus:not(:focus-visible) {
  outline: none !important;
}
@media (max-width: 640px) {
  html body #v5-no.card.v5-not-for-me.on > .v5-no-main {
    width: calc(100% - 32px) !important;
    /* Mobile has its stage label above the board, so it needs a smaller inset. */
  }
  html body #v5-no .v5-no-board {
    padding: 34px 20px 24px !important;
    border-radius: 24px !important;
  }
  html body #v5-no .v5-no-icon,
  html body #v5-no .v5-no-icon svg { width: 52px !important; height: 52px !important; }
  html body #v5-no .v5-no-icon { margin-bottom: 18px !important; }
  html body #v5-no .v5-no-copy { font-size: 14.5px !important; line-height: 1.62 !important; }
  html body #v5-no .v5-no-return { width: 100% !important; }
}

/* The saved-preview screen is a recovery route, so its single route back into
 * the funnel must remain in the same visible action rail as every ordinary
 * question.  Keep this explicit rule last: older saved-file card styles used
 * document-flow footers and can otherwise make the CTA look like a dead end. */
html body #v1-later.card.on > .v1-foot {
  display: block !important;
}

html body #v1-later.card.on > .v1-foot .v1-foot-row {
  display: flex !important;
}

@media (min-width: 800px) {
  html body #v1-later.card.on > main { padding-bottom: 116px !important; }
}

@media (max-width: 799px) {
  /* The recovery CTA already gives the one needed next action.  The three
   * explanatory rows would otherwise run underneath its fixed safe rail. */
  html body #v1-later.card.on .rule-list { display: none !important; }
  html body #v1-later.card.on > .v1-foot {
    box-sizing: border-box !important;
  }
  html body #v1-later.card.on > main { padding-bottom: 132px !important; }
}

/* The saved-file entry is the same action on every intake-stage introduction.
 * On desktop it belongs in one predictable, centered top position; mobile
 * keeps its in-card pill layout defined above. */
@media (min-width: 800px) {
  html body :is(#v1-0, #v2-1, #v3-0, #v4-1).card.on > main > .have-file {
    position: fixed !important;
    top: 20px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 70 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: calc(100vw - 176px) !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
    color: #c9c1bc !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 22px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  }
  html body :is(#v1-0, #v2-1, #v3-0, #v4-1).card.on > main > .have-file:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
  }

  html[dir="rtl"] body :is(#v1-0, #v2-1, #v3-0, #v4-1).card.on > main > .have-file {
    right: auto !important;
    left: 50% !important;
  }
}

@media (max-width: 799px) {
  html body :is(#v1-0, #v2-1, #v3-0, #v4-1).card.on > main > .have-file,
  .have-file {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto 14px !important;
    padding: 6px 14px !important;
    min-height: 36px !important;
    font-size: 11.5px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #c9c1bc !important;
    text-align: center !important;
    position: static !important;
  }
}

/* =========================================================================
   UNIVERSAL GEOMETRIC, SPACING, AND VISUAL STANDARDIZATION (ALL 75 CARDS)
   ========================================================================= */

/* 1. Stage titles in flow - never overlap header controls */
#v1-0 .stage-title, #v2-1 .stage-title, #v3-0 .stage-title, #v4-1 .stage-title {
  position: static !important;
  margin: 8px 0 6px 0 !important;
  text-align: left !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #ff5a6e !important;
  text-transform: uppercase !important;
  display: block !important;
}
@media (max-width: 799px) {
  #v1-0 .stage-title, #v2-1 .stage-title, #v3-0 .stage-title, #v4-1 .stage-title {
    font-size: 13px !important;
    margin: 4px 0 4px 0 !important;
  }
}

/* 2. Uniform card main container padding across all cards */
@media (min-width: 800px) {
  .card main, section.card main,
  #v1-4 main, #v2-live main, #v3-1 main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 116px !important;
  }
  #v1-4 header.top, #v2-live header.top, #v3-1 header.top {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 799px) {
  .card main, section.card main,
  #v1-4 main, #v2-live main, #v3-1 main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 104px !important;
  }
}

/* 3. Standardized vertical rhythm for questions */
.card.v1 .form-q, .card.v2 .form-q, .form-q, h1.form-q,
#v1-0 .form-q, #v1-1 .form-q, #v1-2 .form-q, #v1-3 .form-q, #v1-4 .form-q,
#v2-1 .form-q, #v2-3 .form-q, #v2-4 .form-q, #v3-0 .form-q, #v4-1 .form-q {
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: clamp(24px, 3.2vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
}

/* 4. Standardized red chrome indicator */
.q-chrome, .card.v1 .q-chrome, .card.v2 .q-chrome {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.q-label, .q-chrome .q-label,
.card.v1 .q-label, .card.v2 .q-label, .card.v2.phase .q-label,
.w1-kick, .quote-kicker, .status-kicker, .pass-kicker, .note-kicker,
.flip-kick, .sum-k, .cld-tag {
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #ff5a6e !important;
}
.q-bar, .q-chrome .q-bar,
.card.v1 .q-bar, .card.v2 .q-bar, .card.v2.phase .q-bar {
  width: 18px !important;
  height: 1px !important;
  background: #d4213d !important;
  border-radius: 1px !important;
  box-shadow: none !important;
}

/* 5. Subquestion alignment and spacing */
.card.v2 .q-ask, .card.v1 .q-ask, .q-ask,
.integrity-second-question, .sub-q-group > .q-ask,
#v2-5j-nat-ask, #v4-4 .q-ask {
  margin-top: 20px !important;
  margin-bottom: 14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  width: 100% !important;
}
[dir="rtl"] .card.v2 .q-ask, [dir="rtl"] .card.v1 .q-ask, [dir="rtl"] .q-ask {
  text-align: right !important;
}

/* 6. Standardized options list and chips */
.opt-list {
  gap: 12px !important;
}
.chip {
  min-height: 52px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(120, 150, 190, 0.18) !important;
  background: rgba(19, 26, 46, 0.55) !important;
  color: #e3e9f2 !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
.chip:hover {
  border-color: rgba(224, 185, 94, 0.4) !important;
  background: rgba(25, 35, 60, 0.7) !important;
}
.chip.on, .chip[aria-checked="true"] {
  border-color: #ff5a6e !important;
  background: rgba(35, 20, 32, 0.8) !important;
  box-shadow: 0 0 12px rgba(255, 90, 110, 0.2) !important;
}

/* 7. v3-result: compact layout with visible installment selector */
#v3-result.card {
  overflow-y: auto !important;
  height: 100% !important;
  min-height: 100svh !important;
}
#v3-result main {
  overflow-y: auto !important;
  padding-bottom: 120px !important;
}
#v3-result .quote-panel {
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 0 auto 14px !important;
  padding: 20px 24px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
#v3-result #quote-kicker {
  margin-bottom: 6px !important;
  font-size: 11px !important;
}
#v3-result #quote-amt {
  font-size: clamp(34px, 4vw, 44px) !important;
  line-height: 1.05 !important;
  margin: 2px 0 8px !important;
}
#v3-result .quote-ready {
  margin: 4px 0 6px !important;
  font-size: 13px !important;
}
#v3-result #quote-time {
  font-size: 17px !important;
  margin: 6px 0 10px !important;
}
#v3-result #quote-break {
  font-size: 14px !important;
}
#v3-result #quote-break > * {
  padding: 6px 0 !important;
}
#v3-result #quote-blurb {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#v3-result #quote-extra {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
}
#v3-result #quote-pay {
  margin-top: 10px !important;
  font-size: 16px !important;
}
#v3-result .install-label {
  display: block !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 10px auto 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #e3e9f2 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
#v3-result #install-hint {
  margin: 0 auto 8px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  box-sizing: border-box !important;
}
[dir="rtl"] #v3-result .install-label {
  text-align: right !important;
}
[dir="rtl"] #v3-result #install-hint {
  text-align: right !important;
}
/* "How many payments?" is a red count line like "— YOUR ESTIMATE" (Roman, 2026-09-14). */
#v3-result .q-chrome.pay-chrome {
  position: static !important;
  justify-content: flex-start !important;
  text-align: start !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 14px auto 8px !important;
  box-sizing: border-box !important;
}
/* Payment tabs: one justified row, every tab the same width (Roman, 2026-09-14). */
#v3-result .month-chips {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 10px auto 24px !important;
  box-sizing: border-box !important;
}
#v3-result .month-chips .chip {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}
#v3-result .month-chips .chip .dot {
  display: none !important;
}
@media (max-width: 799px) {
  #v3-result .month-chips {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #v3-result .month-chips .chip {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 4px !important;
  }
}
@media (max-width: 799px) {
  #v3-result .quote-panel {
    padding: 18px 18px !important;
  }
  #v3-result .install-label,
  #v3-result .month-chips {
    max-width: 100% !important;
  }
}

/* 8. v4-1 Rule boards & note box */
#v4-1 .rule-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 0 auto 16px !important;
}
#v4-1 .rule {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(19, 26, 46, 0.7) !important;
  border: 1px solid rgba(120, 150, 190, 0.2) !important;
  box-sizing: border-box !important;
}
#v4-1 .rule .rn {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #e0b95e !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}
#v4-1 .rule strong {
  font-size: 16px !important;
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 4px !important;
}
#v4-1 .rule p {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #aebacd !important;
  margin: 0 !important;
}
#v4-1 .note-box {
  width: 100% !important;
  max-width: min(817px, calc(100% - 72px)) !important;
  margin: 0 auto 20px !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  background: rgba(59, 48, 32, 0.4) !important;
  border: 1px solid rgba(226, 212, 189, 0.22) !important;
  box-sizing: border-box !important;
}
@media (max-width: 799px) {
  #v4-1 .rule-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  #v4-1 .note-box {
    max-width: 100% !important;
    padding: 12px 14px !important;
  }
  #v4-1 main {
    padding-bottom: 120px !important;
  }
}

/* 9. v1-gate centering & slate-blue styling across all languages */
#v1-gate .q-chrome {
  display: flex !important;
  visibility: hidden !important;
}
#v1-gate h1.form-q,
#v1-gate h1 {
  font-family: "Avenir Next", Avenir, Montserrat, Inter, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  margin: 16px auto 10px !important;
  width: 100% !important;
  max-width: none !important;
}
#v1-gate .gate-hint,
#v1-gate p.gate-hint {
  text-align: center !important;
  margin: 0 auto 20px !important;
  max-width: 640px !important;
  color: #9aa3b5 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* 10. Hide mobile rail globally across all locales */
#mobileRail, .mobile-rail, .mobile-rail-header, .mobile-rail-title,
.mobile-rail-dot, .mobile-rail-chevron, .mobile-rail-drawer,
.mobile-rail-backdrop, .mobile-rail-menu, .mobile-rail-step {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* 11. Point Y: Remove raw preview reference help */
#resume-preview-help,
.resume-pane #resume-preview-help,
.resume-pane .quiz-hint {
  display: none !important;
}

/* ==========================================================================
   12. Funnel Language Switcher (Top Left Icon & Dropdown Menu)
   ========================================================================== */

.lang-cur-code {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.funnel-lang-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 176px !important;
  background: rgba(12, 18, 36, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(160, 180, 220, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  z-index: 2147483647 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) scale(0.97) !important;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.18s !important;
  pointer-events: none !important;
}

.funnel-lang-dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

[dir="rtl"] .funnel-lang-dropdown {
  left: auto !important;
  right: 0 !important;
}

.funnel-lang-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: rgba(226, 232, 240, 0.6) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.funnel-lang-item:hover {
  background: rgba(45, 60, 95, 0.45) !important;
  color: #ffffff !important;
}

.funnel-lang-item.is-active {
  background: rgba(255, 90, 110, 0.12) !important;
  color: #ff8a9e !important;
  font-weight: 600 !important;
}

.funnel-lang-item .lang-flag {
  font-size: 16px !important;
  line-height: 1 !important;
}

.funnel-lang-item .lang-name {
  flex: 1 !important;
  text-align: left !important;
  color: rgba(226, 232, 240, 0.6) !important;
  transition: color 0.15s ease !important;
}

[dir="rtl"] .funnel-lang-item .lang-name {
  text-align: right !important;
}

.funnel-lang-item:hover .lang-name {
  color: #ffffff !important;
}

.funnel-lang-item.is-active .lang-name {
  color: #ff8a9e !important;
}

.lang-code-pill,
.funnel-lang-item .lang-code-pill,
.funnel-lang-item.is-active .lang-code-pill {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Stage 8: Comprehensive Flow Summary & Clear Lead Position (#z-thanks)
   ========================================================================== */
@media (min-width: 800px) {
  html:has(#z-thanks.on),
  body:has(#z-thanks.on) {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  html body .card.v2.phase#z-thanks,
  html body #z-thanks.card {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  html body .card.v2.phase#z-thanks > main.thanks-main,
  html body #z-thanks.card > main.thanks-main {
    height: auto !important;
    max-height: none !important;
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-inline: 20px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .z-thanks-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 10px 20px !important;
    width: 100% !important;
    max-width: 1180px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  [dir="rtl"] .z-thanks-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  }

  .z-thanks-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .z-thanks-right {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .z-thanks-right .resume-answers-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 110px) !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    overflow-y: auto !important;
    border-radius: 10px !important;
    background: rgba(10, 22, 16, 0.88) !important;
    border: 1px solid #1e3a2b !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(46, 92, 64, 0.6) rgba(0, 0, 0, 0.2) !important;
  }

  .z-thanks-right .resume-answers-box::-webkit-scrollbar {
    width: 5px !important;
  }

  .z-thanks-right .resume-answers-box::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
  }

  .z-thanks-right .resume-answers-box::-webkit-scrollbar-thumb {
    background: rgba(46, 92, 64, 0.6) !important;
    border-radius: 3px !important;
  }

  .z-thanks-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin-top: 2px !important;
  }

  .z-thanks-actions .btn.primary {
    width: auto !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 799px) {
  html body #z-thanks.card {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body #z-thanks.card > main.thanks-main {
    height: auto !important;
    min-height: auto !important;
    max-width: 100% !important;
    padding-inline: 14px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .z-thanks-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .z-thanks-left,
  .z-thanks-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .z-thanks-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  .z-thanks-actions .btn.primary {
    width: 100% !important;
    text-align: center !important;
  }
}

.thanks-head-block {
  text-align: center !important;
  margin-bottom: 6px !important;
  flex-shrink: 0 !important;
}

.thanks-head-block .q-chrome {
  margin: 0 auto 2px !important;
}

.thanks-head-block .thanks-hello {
  font-size: clamp(18px, 1.8vw, 24px) !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
  color: #fff !important;
}

.thanks-head-block .thanks-hint {
  font-size: 12px !important;
  margin: 0 0 6px !important;
  color: #a4b4ad !important;
  line-height: 1.35 !important;
  max-width: 680px !important;
}

/* Executive Lead Position Card */
.lead-position-card {
  width: 100% !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(14, 32, 21, 0.95), rgba(8, 20, 14, 0.98)) !important;
  border: 1px solid #2e5c40 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(46, 92, 64, 0.2) !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

[dir="rtl"] .lead-position-card {
  text-align: right !important;
}

.lead-pos-header {
  border-bottom: 1px solid rgba(46, 92, 64, 0.5) !important;
  padding-bottom: 4px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.lead-pos-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  color: #4ade80 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
}

.lead-pos-kicker {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: #d4af37 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.lead-pos-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 10px !important;
}

@media (max-width: 600px) {
  .lead-pos-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.lead-pos-item {
  background: rgba(18, 48, 34, 0.5) !important;
  border: 1px solid rgba(46, 92, 64, 0.35) !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
}

.lead-pos-title {
  color: #d4af37 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 2px !important;
}

.lead-pos-text {
  color: #e2e8f0 !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.lead-pos-text strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.lead-pos-text em {
  color: #cbd5e1 !important;
  font-style: italic !important;
}

/* Reference Dossier Bar */
html body #z-thanks.card .file-panel.z-dossier-ref-bar {
  width: 100% !important;
  margin: 0 !important;
  background: #0e1f16 !important;
  border: 1px solid #1e3a2b !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body #z-thanks.card .file-panel.z-dossier-ref-bar .z-ref-header {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  gap: 2px !important;
}

[dir="rtl"] html body #z-thanks.card .file-panel.z-dossier-ref-bar .z-ref-header {
  text-align: right !important;
}

html body #z-thanks.card .file-panel.z-dossier-ref-bar .lbl {
  color: #8fbfa8 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

html body #z-thanks.card .file-panel.z-dossier-ref-bar .do {
  color: #9db5a8 !important;
  font-size: 11px !important;
  margin: 0 !important;
}

html body #z-thanks.card .file-panel.z-dossier-ref-bar .num-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(46, 92, 64, 0.5) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  position: static !important;
  margin: 0 !important;
}

html body #z-thanks.card .file-panel.z-dossier-ref-bar .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #f7fdff !important;
  letter-spacing: 0.05em !important;
}

html body #z-thanks.card .file-panel.z-dossier-ref-bar .copy-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  transform: none !important;
}

@media (max-width: 600px) {
  html body #z-thanks.card .file-panel.z-dossier-ref-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 10px 12px !important;
  }
  html body #z-thanks.card .file-panel.z-dossier-ref-bar .z-ref-header {
    text-align: center !important;
  }
  html body #z-thanks.card .file-panel.z-dossier-ref-bar .num-row {
    justify-content: center !important;
  }
}

.z-thanks-actions .start-over {
  margin: 0 !important;
  font-size: 12px !important;
}

/* ========================================================================== */
/* EXECUTIVE SIDE-PANEL / STAGE STEPPER (Warsaw Legal Luxury)                */
/* ========================================================================== */

@media (min-width: 800px) {
  aside.rail {
    display: block !important;
    position: fixed !important;
    left: 36px !important;
    top: 56px !important;
    width: 224px !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  [dir="rtl"] aside.rail {
    left: auto !important;
    right: 36px !important;
  }

  aside.rail .rail-nav {
    pointer-events: auto !important;
    width: 224px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: fixed !important;
  }

  /* Progress Header */
  aside.rail .rail-progress-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #8fbfa8 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  /* Progress Track & Fill */
  aside.rail .rail-progress-track {
    width: 100% !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
  }

  aside.rail .rail-progress-fill {
    height: 100% !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, #d4af37 0%, #22c55e 100%) !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4) !important;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Step item container */
  aside.rail .rail-step {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    border: none !important;
    min-height: 36px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: transform 0.15s ease !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  [dir="rtl"] aside.rail .rail-step {
    border-right: none !important;
  }

  /* Connecting Timeline Line behind dots */
  aside.rail .rail-step::after {
    content: "" !important;
    position: absolute !important;
    left: 9px !important;
    top: 28px !important;
    bottom: -10px !important;
    width: 2px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    z-index: 1 !important;
    border-radius: 1px !important;
  }

  [dir="rtl"] aside.rail .rail-step::after {
    left: auto !important;
    right: 9px !important;
  }

  aside.rail .rail-step:last-child::after {
    display: none !important;
  }

  aside.rail .rail-step.done::after {
    background: rgba(46, 125, 88, 0.45) !important;
  }

  /* Hover state */
  aside.rail .rail-step:hover {
    background: transparent !important;
  }

  aside.rail .rail-step:hover .rail-step-label > span {
    color: #ffffff !important;
  }

  aside.rail .rail-step:hover .rail-dot {
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.05) !important;
  }

  /* Active step highlight */
  aside.rail .rail-step.on {
    background: transparent !important;
  }

  aside.rail .rail-step.on::before {
    display: none !important;
  }

  /* Dot styling */
  aside.rail .rail-dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(18, 28, 42, 0.85) !important;
    color: #8da0b3 !important;
    box-sizing: border-box !important;
  }

  /* Active Step Dot: Warsaw Emerald & Gold */
  aside.rail .rail-step.on .rail-dot {
    width: 22px !important;
    height: 22px !important;
    background: linear-gradient(135deg, #1b4d36 0%, #0d281c 100%) !important;
    border: 1.5px solid #d4af37 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4), 0 0 6px rgba(46, 125, 88, 0.4) !important;
    font-size: 11px !important;
  }

  /* Done Step Dot: Refined Emerald */
  aside.rail .rail-step.done .rail-dot {
    background: #143d2b !important;
    border-color: #2e7d58 !important;
    color: #4ade80 !important;
    box-shadow: 0 0 8px rgba(46, 125, 88, 0.25) !important;
    font-size: 10px !important;
  }

  /* Partial Step Dot: Refined Amber/Bronze */
  aside.rail .rail-step.partial .rail-dot {
    background: rgba(45, 34, 12, 0.9) !important;
    border-color: #d4af37 !important;
    color: #e2c97c !important;
  }

  /* Label Styling */
  aside.rail .rail-step-label {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  aside.rail .rail-step-label > span:first-child,
  aside.rail .rail-step-label > span {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: rgba(180, 194, 210, 0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.2s ease !important;
  }

  /* Active Label */
  aside.rail .rail-step.on .rail-step-label > span:first-child,
  aside.rail .rail-step.on .rail-step-label > span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  }

  /* Done Label */
  aside.rail .rail-step.done .rail-step-label > span:first-child,
  aside.rail .rail-step.done .rail-step-label > span {
    color: #9db5a8 !important;
    font-weight: 500 !important;
  }
}

/* Shared funnel geometry. This replaces the former independent toolbar,
 * operation-dialog and fixed-footer owners above. Card content stays authored. */
:root {
  --funnel-toolbar-top: 26px;
  --funnel-toolbar-inset: 44px;
  --funnel-icon-size: 48px;
  --funnel-icon-gap: 8px;
  --funnel-content-top: 96px;
  --funnel-content-bottom: 24px;
  --funnel-title-size: 30px;
  --funnel-title-gap: 20px;
  --funnel-field-gap: 16px;
  --funnel-label-gap: 8px;
  --funnel-control-height: 56px;
  --funnel-action-gap: 16px;
  /* Desktop: the action row finishes this far above the viewport edge (phones: --funnel-content-bottom). */
  --funnel-rail-bottom-desktop: 24px;
}
#codex-top-controls {
  position: fixed !important;
  top: var(--funnel-toolbar-top) !important;
  left: var(--funnel-toolbar-inset) !important;
  right: var(--funnel-toolbar-inset) !important;
  bottom: auto !important;
  width: auto !important;
  height: var(--funnel-icon-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  direction: ltr !important;
  transform: none !important;
  z-index: 2147483644 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.codex-top-group {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: var(--funnel-icon-gap) !important;
  pointer-events: none !important;
}
.codex-top-left { justify-content: flex-start !important; }
.codex-top-right { justify-content: flex-end !important; margin-left: auto !important; }
#codex-top-controls :is(.codex-top-btn, .funnel-lang-btn, #codex-stage-toggle) {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--funnel-icon-size) !important;
  width: var(--funnel-icon-size) !important;
  height: var(--funnel-icon-size) !important;
  min-width: var(--funnel-icon-size) !important;
  min-height: var(--funnel-icon-size) !important;
  max-width: var(--funnel-icon-size) !important;
  max-height: var(--funnel-icon-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .42) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  transform: none !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease !important;
}
#codex-top-controls button svg {
  width: 19px !important;
  height: 19px !important;
  opacity: .55 !important;
  pointer-events: none !important;
}
#codex-top-controls button svg * { pointer-events: none !important; }
#codex-top-controls button:hover { color: rgba(255,255,255,.85) !important; border-color: rgba(255,255,255,.35) !important; background: transparent !important; }
#codex-top-controls button:is(:hover, :focus-visible) svg { opacity: 1 !important; }
#codex-top-controls button:focus-visible { outline: 2px solid var(--cx-focus) !important; outline-offset: 2px !important; }
#codex-top-controls button:disabled { opacity: .42 !important; cursor: default !important; }
#codex-top-controls #codex-btn-voice[data-speaking="true"] { color: #f8a4b7 !important; border-color: #df6d83 !important; }
#codex-top-controls #funnelLangToggle {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  width: var(--funnel-icon-size) !important;
  height: var(--funnel-icon-size) !important;
  pointer-events: auto !important;
}
#codex-top-controls .funnel-lang-dropdown {
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 8px) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 100px) !important;
  overflow-y: auto !important;
}
body[data-funnel-introduction="true"] #codex-top-controls .codex-top-left > :not(#funnelLangToggle),
body[data-funnel-introduction="true"] #codex-top-controls .codex-top-right > :not(#codex-stage-toggle),
body[data-funnel-introduction="false"] #codex-top-controls :is(#funnelLangToggle, #codex-stage-toggle),
#codex-top-controls [hidden] { display: none !important; }
body:has(#intro.on) aside.rail { display: none !important; }
body:has(#intro.on) :is(.app, #phone) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}
body:has(#intro.on) #phone { flex: 1 1 100% !important; }
html body #intro > header.top { display: none !important; }

/* Shared form rhythm. Textareas and multiline options can grow naturally. */
html body section.card:not(#intro):not([id^="info-"]) .form-q {
  font-size: var(--funnel-title-size) !important;
  line-height: 1.2 !important;
  margin-bottom: var(--funnel-title-gap) !important;
}
html body section.card:not(#intro):not([id^="info-"]) .fpair { margin-bottom: var(--funnel-field-gap) !important; }
html body section.card:not(#intro):not([id^="info-"]) .flab {
  line-height: 1.4 !important;
  margin-bottom: var(--funnel-label-gap) !important;
  text-align: start !important;
}
html body section.card:not(#intro) :is(input.tin, select.tin) {
  min-height: var(--funnel-control-height) !important;
  height: var(--funnel-control-height) !important;
  box-sizing: border-box !important;
}
html body section.card:not(#intro) textarea.tin {
  min-height: calc(var(--funnel-control-height) * 2) !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
}
/* The footer is a layout container only. Its descendants and pseudo-elements
 * cannot reintroduce a glass panel beneath Continue. */
html body section.card:not([id^="info-"]) :is(.v1-foot, .v2-foot, .v1-foot-row, .v2-foot-row, .card-foot, .actions-live, .edu-card-foot) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body section.card:not([id^="info-"]) :is(.v1-foot, .v2-foot, .v1-foot-row, .v2-foot-row, .card-foot, .actions-live, .edu-card-foot)::before,
html body section.card:not([id^="info-"]) :is(.v1-foot, .v2-foot, .v1-foot-row, .v2-foot-row, .card-foot, .actions-live, .edu-card-foot)::after {
  content: none !important;
  display: none !important;
}
html body section.card:not(#intro) :is(.v1-foot, .v2-foot, .card-foot, .actions-live) {
  position: static !important;
  inset: auto !important;
  width: min(817px, calc(100% - 72px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin: var(--funnel-action-gap) auto 0 !important;
  padding: 0 24px var(--funnel-content-bottom) !important;
  transform: none !important;
  z-index: auto !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
html body section.card:not(#intro) :is(.v1-foot-row, .v2-foot-row) {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--funnel-control-height) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}
/* The rail CTA has ONE height and one inline-end anchor on every card: it never
 * wraps, never shrinks, and grows towards the inline start for a longer label.
 * Typography (Roman, 2026-09-14): questions and answers carry the weight, not
 * the buttons — a thin 300 label and one long, 1.2px arrow almost touching it. */
html body section.card:not(#intro) :is(.v1-foot, .v2-foot, .actions-live) .btn.primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--funnel-control-height) !important;
  min-height: var(--funnel-control-height) !important;
  max-height: var(--funnel-control-height) !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 236px !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-inline-start: auto !important; /* inline-end anchor: right in LTR, left in RTL */
  padding: 0 26px !important;
  gap: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  letter-spacing: .06em !important;
  color: rgba(255, 244, 240, .74) !important;
}
html body section.card:not(#intro) :is(.v1-foot-row, .v2-foot-row) .btn.secondary.codex-rail-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 236px !important;
  height: var(--funnel-control-height) !important;
  min-height: var(--funnel-control-height) !important;
  max-height: var(--funnel-control-height) !important;
  margin: 0 !important;
  padding: 0 26px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(46, 125, 88, .72) !important;
  background: linear-gradient(180deg, #1b4d36 0%, #0f3324 100%) !important;
  box-shadow: 0 8px 20px rgba(15, 51, 36, .38) !important;
  color: rgba(226, 240, 232, .92) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
}
html body section.card:not(#intro) :is(.v1-foot-row, .v2-foot-row) .btn.secondary.codex-rail-cta:hover {
  background: linear-gradient(180deg, #226043 0%, #143f2c 100%) !important;
  color: #ffffff !important;
}
/* The one arrow: an SVG line (1.2px) that almost touches the label. */
html body section.card:not(#intro) .btn.codex-rail-cta .codex-cta-arrow {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-inline-start: 4px !important;
  line-height: 0 !important;
}
html body section.card:not(#intro) .btn.codex-rail-cta-back .codex-cta-arrow {
  margin-inline-start: 0 !important;
  margin-inline-end: 4px !important;
}
html body section.card:not(#intro) .btn.codex-rail-cta .codex-cta-arrow svg {
  width: 34px !important;
  height: 12px !important;
  display: block !important;
}
@media (min-width: 800px) {
  /* Two-action rows: Start Over on the far left, Continue on the shared anchor. */
  html body section.card:not(#intro) :is(.v1-foot-row, .v2-foot-row) .btn.secondary.codex-rail-cta {
    order: -1 !important;
    margin-inline-end: auto !important;
  }
  html body section.card:not(#intro) :is(.v1-foot, .v2-foot) :is(.v1-foot-row, .v2-foot-row) .btn.primary { margin-inline-start: 0 !important; }
}
/* v2-resume: the field label reads as part of the sentence above the field. */
html body #v2-resume.card > main > .help > .resume-input-label {
  display: inline !important;
  font: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}
html body #v2-resume.card > main > .resume-input-wrap { margin-top: 12px !important; }

/* v2-4 (origin place) fits one screen with Continue on every viewport
 * (2026-09-14): subtitle removed from the HTML, the four country chips sit in
 * two columns, labels and fields keep a tighter rhythm. Content, not pinning. */
html body section.card#v2-4 > main > .opt-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}
html body section.card#v2-4 > main > .opt-list > .chip {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
html body section.card#v2-4 > main > .flab {
  margin-top: 10px !important;
  margin-bottom: 6px !important;
}
html body section.card#v2-4 > main > .tin { margin-bottom: 0 !important; }
@media (max-width: 799px) {
  html body section.card#v2-4 > main > .opt-list > .chip { min-height: 44px !important; height: 44px !important; }
}

/* A normal-flow action row finishes 48px above the desktop viewport edge.
 * Its axis extends 16px beyond each side of the authored form width. */
@media (min-width: 800px) {
  html body section.card.codex-desktop-flow-actions:not(#intro) > :is(.v1-foot, .v2-foot) {
    width: min(849px, calc(100% - 40px)) !important;
    padding: 0 0 var(--funnel-rail-bottom-desktop) !important;
  }
  /* Opening cards used a narrower 812px rail; Continue now shares the
   * 849px anchor of every other card (one position on desktop). */
}

/* Pause, Save, Delete and Reload share one card, typography and action row. */
.codex-operation-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border: 0 !important;
  align-items: flex-start !important;
  padding: 24px !important;
  margin: 0 !important;
  background: rgba(6, 11, 22, .88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.codex-operation-dialog .codex-operation-card {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 680px !important;
  min-height: 0 !important;
  height: min(560px, calc(100dvh - 48px)) !important;
  margin: auto !important;
  padding: 40px !important;
  background: #0d1821 !important;
  border: 1px solid rgba(182, 199, 212, .3) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.codex-operation-card .edu-card-content {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(182, 199, 212, .35) transparent;
}
.codex-operation-card .edu-card-content::-webkit-scrollbar { display: block !important; width: 5px !important; }
.codex-operation-card .edu-card-content::-webkit-scrollbar-thumb { background: rgba(182, 199, 212, .35); border-radius: 3px; }
.codex-operation-card :is(.edu-icon-wrap, .codex-freeze-icon, .codex-save-icon, .codex-delete-icon) { display: none !important; }
.codex-operation-card :is(.edu-card-title, .codex-freeze-title) {
  font: 400 32px/1.25 "Cormorant Garamond", Georgia, serif !important;
  margin: 0 0 20px !important;
  color: #f4f3ee !important;
}
.codex-operation-card :is(.edu-card-text, .codex-freeze-desc) {
  font: 300 16px/1.6 "Plus Jakarta Sans", sans-serif !important;
  color: #b9c5d0 !important;
  margin: 0 auto !important;
  max-width: 560px !important;
}
.codex-operation-card .edu-card-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 28px !important;
  background: transparent !important;
}
.codex-operation-card .edu-card-foot :is(button, a) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 180px !important;
  max-width: 260px !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 12px 18px !important;
  color: #eef0f3 !important;
  background: transparent !important;
  border: 1px solid rgba(182, 199, 212, .42) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font: 400 15px/1.4 Inter, sans-serif !important;
  white-space: normal !important;
  cursor: pointer !important;
}
.codex-operation-card .edu-card-foot :is(button, a):hover { background: rgba(255,255,255,.07) !important; }
.codex-operation-card .edu-card-foot :is(button, a):focus-visible { outline: 2px solid var(--cx-focus) !important; outline-offset: 3px !important; }
.codex-operation-card #codex-delete-confirm { color: #ffb5be !important; border-color: #ba6271 !important; }
.codex-operation-card .codex-save-ref-box { flex-wrap: wrap !important; justify-content: center !important; max-width: 100% !important; }
.codex-operation-card .codex-save-ref-code { overflow-wrap: anywhere; }

/* Workflow menu mirrors the introduction's transparent, light-weight tiles. */
#codex-stage-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  width: min(720px, calc(100% - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 28px !important;
  margin: auto !important;
  border: 1px solid rgba(182, 199, 212, .3) !important;
  border-radius: 24px !important;
  color: #d2d8df !important;
  background: rgba(9, 13, 20, .95) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}
#codex-stage-dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#codex-stage-dialog .codex-stage-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
#codex-stage-dialog h2 { flex: 1; margin: 0; font: 300 20px/1.4 "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; }
#codex-stage-dialog .codex-stage-close { width: 44px; height: 44px; flex: 0 0 44px; font-size: 24px; }
#codex-stage-dialog button { cursor: pointer; border: 1px solid rgba(182,199,212,.28); border-radius: 12px; background: transparent; color: #c9d0d8; }
#codex-stage-dialog .codex-stage-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#codex-stage-dialog [data-mobile-station] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 14px 12px;
  font: 300 14px/1.5 "Plus Jakarta Sans", sans-serif;
  text-align: center;
  background: transparent;
  opacity: 1;
}
#codex-stage-dialog [data-mobile-station] { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
#codex-stage-dialog [aria-current="step"] { border-color: rgba(182,199,212,.28); color: #e5e9ee; background: rgba(255,255,255,.09); }
#codex-stage-dialog button:hover { border-color: rgba(182,199,212,.28); color: #fff; background: rgba(255,255,255,.13); }
#codex-stage-dialog [data-mobile-station]:hover { transform: translateY(-2px); }
#codex-stage-dialog button:focus { outline: none !important; box-shadow: none !important; }
#codex-stage-dialog button:focus-visible { outline: 2px solid #b8c8d7 !important; outline-offset: 3px !important; }
@media (prefers-reduced-motion: reduce) {
  #codex-stage-dialog [data-mobile-station] { transition: none; }
  #codex-stage-dialog [data-mobile-station]:hover { transform: none; }
}
@media (max-width: 799px) {
  :root {
    --funnel-toolbar-top: calc(8px + env(safe-area-inset-top, 0px));
    --funnel-toolbar-inset: 8px;
    --funnel-icon-size: clamp(36px, calc((100vw - 32px) / 8), 44px);
    --funnel-icon-gap: 2px;
    --funnel-content-top: calc(64px + env(safe-area-inset-top, 0px));
    --funnel-content-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    --funnel-title-size: 26px;
    --funnel-control-height: 48px;
    --funnel-title-gap: 18px;
  }
  #codex-top-controls :is(.codex-top-btn, .funnel-lang-btn, #codex-stage-toggle) { border-radius: 50% !important; }
  #codex-top-controls button svg { width: 16px !important; height: 16px !important; }
  html body section.card:not(#intro) :is(.v1-foot, .v2-foot, .card-foot, .actions-live) { width: calc(100% - 32px) !important; padding-inline: 0 !important; }
  .codex-operation-dialog { padding: 16px !important; }
  .codex-operation-dialog .codex-operation-card { padding: 28px 20px !important; min-height: 0 !important; height: min(560px, calc(100dvh - 32px)) !important; border-radius: 20px !important; }
  .codex-operation-card :is(.edu-card-title, .codex-freeze-title) { font-size: 28px !important; }
  .codex-operation-card .edu-card-foot :is(button, a) { flex-basis: 100% !important; }
  #codex-stage-dialog { padding: 20px !important; border-radius: 20px !important; }
  #codex-stage-dialog .codex-stage-options { gap: 10px; }
  #codex-stage-dialog [data-mobile-station] { padding: 12px 8px; font-size: 13px; min-height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  #codex-top-controls button { transition: none !important; }
}

/* The delete receipt reuses the same normal-flow card, including on text zoom. */
.codex-delete-flipper { max-width: 680px; width: 100%; margin: auto; }
.codex-delete-inner { transform: none !important; }
#codex-delete-overlay .codex-delete-back { display: none !important; }
#codex-delete-overlay[data-stage="erased"] .codex-delete-front { display: none !important; }
#codex-delete-overlay[data-stage="erased"] .codex-delete-back {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* Terminal receipts reserve the same toolbar band. A long receipt starts at
 * the top and scrolls; it must never be vertically centered above the screen. */
html body section.card.on:is(#v1-thanks, #v2-file, #v2-no, #v5-no, #z-thanks) {
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
}
html body section.card.on:is(#v1-thanks, #v2-file, #v2-no, #v5-no, #z-thanks) > main {
  height: auto !important;
  min-height: var(--codex-mobile-visual-height, 100dvh) !important;
  max-height: none !important;
  flex: 1 0 auto !important;
  margin-block: 0 !important;
  padding-top: var(--funnel-content-top) !important;
  padding-bottom: var(--funnel-content-bottom) !important;
  overflow-y: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body #z-thanks.card :is(.z-thanks-grid, .z-thanks-right) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ===== One screen per card (Roman, 2026-09-14): content decisions, never pinning ===== */
/* z2: six answers in two columns, like v2-4. */
html body section.card:not(#intro)#z2 > main > .opt-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}
html body section.card:not(#intro)#z2 > main > .opt-list > .chip { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* z1 / z2: the question under the board keeps a tight rhythm. */
html body section.card:not(#intro):is(#z1, #z2) > main > .z-ask { margin-top: 12px !important; margin-bottom: 10px !important; }
html body section.card:not(#intro)#z1 > main > .client-demo-grid { margin-bottom: 8px !important; }
/* v1-later / v2-file: the hint above the tile does not need a double gap. */
html body section.card:not(#intro):is(#v1-later, #v2-file) > main > .help { margin-bottom: 8px !important; }
/* Form cards: field rows one gap tighter on desktop (56px fields stay). */
@media (min-width: 800px) {
  html body section.card:not(#intro):is(#v2-contact, #v4-5, #v4-6, #v4-7) > main > .fpair { margin-bottom: 12px !important; }
  html body section.card:not(#intro):is(#v2-contact, #v4-5, #v4-6, #v4-7) > main > .help { margin-bottom: 6px !important; }
  html body section.card:not(#intro):is(#v4-5, #v4-6, #v4-7) > main > .fpair:last-of-type { margin-bottom: 0 !important; }
  html body section.card:not(#intro):is(#v4-5, #v4-6, #v4-7) > main > .spouse-sep { margin: 4px 0 2px !important; }
  /* v4-7: the two note boxes read as one line each. */
  html body section.card:not(#intro)#v4-7 > main > .note-box { padding: 10px 14px !important; margin: 12px 0 8px !important; }
}
/* tree-pdf on short desktops: the preview card sits without extra air (tall desktops keep the authored margin). */
@media (min-width: 800px) and (max-height: 879px) {
  html body section.card:not(#intro)#tree-pdf > main > .tree-card { margin: 6px 0 4px !important; }
}

/* Phones (393×852): the same rule — every card fits one screen with Continue. */
@media (max-width: 799px) {
  /* v2-resume: title / hint / field / summary one gap tighter. */
  html body section.card:not(#intro)#v2-resume > main > .form-q { margin-bottom: 12px !important; }
  html body section.card:not(#intro)#v2-resume > main > .help { margin-bottom: 10px !important; }
  html body section.card:not(#intro)#v2-resume > main > .resume-input-wrap { margin-bottom: 12px !important; }
  html body section.card:not(#intro)#v2-resume > main > .resume-answers-box { margin-top: 8px !important; margin-bottom: 12px !important; }
  /* Mobile audit 2026-09-15: the summary box itself one gap tighter (5 rows +
     section header) so Confirm stays on the first screen — rhythm, not copy. */
  html body section.card:not(#intro)#v2-resume .resume-answers-box { padding: 12px 16px !important; }
  html body section.card:not(#intro)#v2-resume .resume-item { padding: 6px 0 !important; }
  html body section.card:not(#intro)#v2-resume .resume-section-header { margin: 12px 0 6px !important; }
  /* Resume ledgers on a phone read as one row per answer (label · value), like
     the z-thanks ledger: a filled v2-resume (six rows incl. e-mail) keeps
     Confirm on the first screen in DE/FR/PT (Codex re-audit 2026-09-15). */
  html body section.card:not(#intro):is(#v2-resume, [id$="-resume"]) .resume-item {
    display: grid !important;
    grid-template-columns: fit-content(58%) minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: baseline !important;
  }
  html body section.card:not(#intro):is(#v2-resume, [id$="-resume"]) .resume-a { text-align: right !important; overflow-wrap: anywhere !important; word-break: normal !important; }
  html[dir="rtl"] body section.card:not(#intro):is(#v2-resume, [id$="-resume"]) .resume-a { text-align: left !important; }
  /* v2-7b: three short questions — the question labels sit closer to their answers. */
  html body section.card:not(#intro)#v2-7b > main > .form-q { margin-bottom: 14px !important; }
  html body section.card:not(#intro)#v2-7b > main > .q-ask { margin-top: 16px !important; margin-bottom: 12px !important; }
  /* v2-8: eleven document chips in two columns per group, compact. */
  html body section.card:not(#intro)#v2-8 > main > .form-q { margin-bottom: 12px !important; }
  html body section.card:not(#intro)#v2-8 .v2-8-col .opt-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  html body section.card:not(#intro)#v2-8 .v2-8-col .chip { width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 44px !important; height: auto !important; padding: 6px 10px !important; font-size: 13px !important; line-height: 1.2 !important; }
  html body section.card:not(#intro)#v2-8 .v2-8-col .flab { margin: 8px 0 6px !important; }
  /* v3-9: three tiers, compact rows. */
  html body section.card:not(#intro)#v3-9 > main > .form-q { margin-bottom: 12px !important; }
  html body section.card:not(#intro)#v3-9 > main > .quiz-hint { margin-bottom: 10px !important; }
  html body section.card:not(#intro)#v3-9 .tier-chip { padding: 8px 12px !important; min-height: 0 !important; }
  html body section.card:not(#intro)#v3-9 .tier-chip .td { font-size: 12.5px !important; line-height: 1.3 !important; margin-top: 2px !important; }
  html body section.card:not(#intro)#v3-9 .tier-chip .tt { margin-top: 2px !important; font-size: 12px !important; }
  html body section.card:not(#intro)#v3-9 .opt-list { gap: 8px !important; }
  /* v3-result: estimate panel and the payment row one gap tighter. */
  html body section.card:not(#intro)#v3-result > main > .form-q { margin-bottom: 12px !important; }
  html body section.card:not(#intro)#v3-result > main > .quote-panel { margin-bottom: 8px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  html body section.card:not(#intro)#v3-result > main > .pay-chrome { margin-top: 10px !important; }
  html body section.card:not(#intro)#v3-result > main > .month-chips { margin-top: 10px !important; }
  /* v4-2: six fields — label gap 6px, row gap 10px, no gap after the last row. */
  html body section.card:not(#intro)#v4-2 > main > .form-q { margin-bottom: 12px !important; }
  html body section.card:not(#intro)#v4-2 > main > .help { margin-bottom: 8px !important; }
  html body section.card:not(#intro)#v4-2 > main > .fpair { margin-bottom: 10px !important; }
  html body section.card:not(#intro)#v4-2 > main > .fpair:last-of-type { margin-bottom: 0 !important; }
  html body section.card:not(#intro)#v4-2 > main > .fpair > .flab { margin-bottom: 6px !important; }
}

/* v2-resume: both actions the same width, wider than the single rail CTA (Roman, 2026-09-14). */
@media (min-width: 800px) {
  html body section.card:not(#intro)#v2-resume .v1-foot-row > .btn.codex-rail-cta { width: 320px !important; min-width: 320px !important; }
}
/* The forward arrow sits as close to its last letter as the back arrow to its first (the tail of a line reads further than a glyph). */
html body section.card:not(#intro) .btn.codex-rail-cta.codex-rail-cta-forward .codex-cta-arrow { margin-inline-start: 2px !important; }

/* ── Roman, 2026-09-14 (V1+V2 pass) ─────────────────────────────────────── */
/* 1. Focus rings are for keyboard users only. While the last input was a
   pointer, no outline anywhere — Safari otherwise frames the control a
   dialog focuses programmatically ("About this step", "Progress saved…"). */
html[data-codex-input="pointer"] :is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):is(:focus, :focus-visible) {
  outline: none !important;
}
html[data-codex-input="pointer"] .codex-operation-card .edu-card-foot :is(button, a):focus-visible,
html[data-codex-input="pointer"] #codex-top-controls button:focus-visible,
html[data-codex-input="pointer"] #codex-stage-dialog button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 8. v2-resume: both actions carry the same label typography (the green
   one's), centred, with their arrows. Colours stay green / red. */
html body section.card:not(#intro)#v2-resume .v1-foot-row > .btn.codex-rail-cta,
html body section.card:not(#intro)#v2-resume .v1-foot-row > .btn.codex-rail-cta .codex-cta-label,
html body section.card:not(#intro)#v2-resume .v1-foot-row > .btn.codex-rail-cta .codex-cta-arrow {
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 17px !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  justify-content: center !important;
}

/* 10. Thank-you page (v2-no): calm, centred, one clear close. */
html body section.card#v2-no > main > .thanks-hint {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(214, 222, 232, .78) !important;
}
html body section.card#v2-no > main > a.secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 34px auto 0 !important;
  padding: 0 34px !important;
  width: 236px !important;
  max-width: 236px !important;
  min-height: 56px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: var(--funnel-radius-cta, 12px) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  color: rgba(238, 241, 247, .88) !important;
}
html body section.card#v2-no > main > .start-over { margin: 18px auto 0 !important; color: rgba(238, 241, 247, .55) !important; }

/* 15/16. v2-5j on the grandmother / great-grandmother branch: the male-line
   note is a compact board; the husband's name takes the full question width. */
html body section.card#v2-5j .w1-welcome.v2-line-note {
  min-height: 0 !important;
  padding: 14px 20px 12px !important;
  margin: 0 0 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body section.card#v2-5j .v2-line-note .w1-w-strong { font-weight: 500 !important; margin-bottom: 4px !important; }
html body section.card#v2-5j .v2-line-note .w1-w-soft { font-weight: 300 !important; margin: 0 !important; }
html body section.card#v2-5j #v2-5j-husband-group { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
html body section.card#v2-5j #v2-5j-husband-group .flab { margin: 0 0 8px !important; }
html body section.card#v2-5j #v2-5j-husband-group .tin { width: 100% !important; max-width: 100% !important; margin: 0 !important; }


/* ==========================================================================
   Z-THANKS — THE DOSSIER (Roman, 2026-09-15: the last page of the funnel
   must be its most beautiful). Three objects only: the brief (legal position,
   four numbered points, set for reading), the file (reference tab + answers on
   record, the one lifted object) and one action row. Type is sized to be read,
   never to squeeze into 100 vh; DE/FR may scroll the page as a safety net.
   Later in the sheet than the 2025 "fit everything" rules, so it wins ties.
   ========================================================================== */
html body #z-thanks.card {
  --zt-gold: #d4af37;
  --zt-gold-soft: rgba(212, 175, 55, .24);
  --zt-gold-faint: rgba(212, 175, 55, .10);
  --zt-hair: rgba(255, 255, 255, .08);
  --zt-ink: #eef3f0;
  --zt-ink-soft: rgba(214, 222, 232, .74);
  --zt-ink-mute: rgba(214, 222, 232, .52);
  --zt-verdict: #7ff0a5;
  --zt-paper: linear-gradient(180deg, rgba(12, 30, 22, .72), rgba(7, 18, 13, .90));
  --zt-file: rgba(4, 12, 9, .62);
}

/* Head: eyebrow, serif-scale title, one calm line. */
html body #z-thanks.card .thanks-head-block { margin: 0 0 22px !important; text-align: center !important; }
html body #z-thanks.card .thanks-head-block .q-chrome { margin: 0 auto 10px !important; }
html body #z-thanks.card .thanks-head-block .thanks-hello {
  font-size: clamp(28px, 2.7vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
  margin: 6px 0 10px !important;
}
html body #z-thanks.card .thanks-head-block .thanks-hint {
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  color: var(--zt-ink-soft) !important;
  max-width: 62ch !important;
  margin: 0 auto !important;
}

/* The brief. */
html body #z-thanks.card .lead-position-card {
  background: var(--zt-paper) !important;
  border: 1px solid var(--zt-hair) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  padding: 20px 24px 6px !important;
}
html body #z-thanks.card .lead-pos-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 18px !important;
  padding-bottom: 14px !important;
  margin-bottom: 2px !important;
  border-bottom: 1px solid var(--zt-gold-soft) !important;
}
html body #z-thanks.card .lead-pos-badge {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: var(--zt-verdict) !important;
  background: rgba(74, 222, 128, .10) !important;
  border: 1px solid rgba(74, 222, 128, .38) !important;
  box-shadow: 0 0 28px -8px rgba(74, 222, 128, .55) !important;
}
/* ROOT-01: the badge colour follows what is on file. */
html body #z-thanks.card .lead-pos-badge.is-review {
  color: #f2d27a !important;
  background: rgba(212, 175, 55, .12) !important;
  border-color: rgba(212, 175, 55, .42) !important;
  box-shadow: 0 0 28px -8px rgba(212, 175, 55, .5) !important;
}
html body #z-thanks.card .lead-pos-badge.is-empty {
  color: rgba(214, 222, 232, .78) !important;
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}
html body #z-thanks.card .lead-pos-kicker {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  color: var(--zt-gold) !important;
}
html body #z-thanks.card .lead-pos-grid { display: block !important; }
html body #z-thanks.card .lead-pos-item {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;
  padding: 13px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--zt-hair) !important;
  border-radius: 0 !important;
}
html body #z-thanks.card .lead-pos-item:last-child { border-bottom: 0 !important; }
html body #z-thanks.card .lead-pos-num {
  display: block !important;
  font: italic 400 24px/1 "Fraunces", Georgia, serif !important;
  color: var(--zt-gold) !important;
  padding-top: 1px !important;
  text-align: center !important;
}
html body #z-thanks.card .lead-pos-body { min-width: 0 !important; }
html body #z-thanks.card .lead-pos-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  color: var(--zt-ink) !important;
  margin: 0 0 4px !important;
}
html body #z-thanks.card .lead-pos-text {
  font-size: 13.5px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: var(--zt-ink-soft) !important;
}
html body #z-thanks.card .lead-pos-text strong { color: #fff !important; font-weight: 500 !important; unicode-bidi: plaintext !important; }
html body #z-thanks.card .z-thanks-mailed,
html body #z4 .z-thanks-mailed,
.z-thanks-mailed {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(74, 222, 128, 0.08) !important;
  border: 1px solid rgba(74, 222, 128, 0.28) !important;
  color: #4ade80 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}
html body #z-thanks.card .z-thanks-mailed[hidden],
html body #z4 .z-thanks-mailed[hidden],
.z-thanks-mailed[hidden] {
  display: none !important;
}
.z-thanks-mailed-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}
.z-thanks-mailed-text {
  flex: 1 1 auto !important;
  color: #e2fbe8 !important;
}
.z-thanks-mailed-text strong {
  color: #ffffff !important;
  font-weight: 600 !important;
  unicode-bidi: plaintext !important;
}

/* The file: reference tab on top of the answers on record. */
html body #z-thanks.card .file-panel.z-dossier-ref-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, var(--zt-gold-faint), rgba(212, 175, 55, .04)) !important;
  border: 1px solid var(--zt-gold-soft) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html body #z-thanks.card .file-panel.z-dossier-ref-bar .z-ref-header { gap: 4px !important; min-width: 0 !important; }
html body #z-thanks.card .file-panel.z-dossier-ref-bar .lbl {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  color: var(--zt-gold) !important;
}
html body #z-thanks.card .file-panel.z-dossier-ref-bar .do {
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--zt-ink-mute) !important;
}
html body #z-thanks.card .file-panel.z-dossier-ref-bar .num-row {
  flex: 0 0 auto !important;
  gap: 10px !important;
  padding: 8px 8px 8px 16px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .42) !important;
  border: 1px solid var(--zt-gold-soft) !important;
}
html body #z-thanks.card .file-panel.z-dossier-ref-bar .num {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: #fff !important;
}
html body #z-thanks.card .file-panel.z-dossier-ref-bar .copy-num {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  border: 1px solid var(--zt-hair) !important;
  background: rgba(255, 255, 255, .04) !important;
}
html body #z-thanks.card .resume-answers-box {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: var(--zt-file) !important;
  border: 1px solid var(--zt-hair) !important;
  border-radius: 18px !important;
  padding: 6px 22px 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--zt-gold-soft) transparent !important;
}
html body #z-thanks.card .resume-answers-box::-webkit-scrollbar { width: 6px !important; }
html body #z-thanks.card .resume-answers-box::-webkit-scrollbar-track { background: transparent !important; }
html body #z-thanks.card .resume-answers-box::-webkit-scrollbar-thumb { background: var(--zt-gold-soft) !important; border-radius: 3px !important; }
html body #z-thanks.card .resume-section-header {
  margin: 18px 0 4px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--zt-gold-soft) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--zt-gold) !important;
  text-align: start !important;
}
html body #z-thanks.card .resume-section-header:first-child { margin-top: 12px !important; }
html body #z-thanks.card .resume-item {
  display: grid !important;
  grid-template-columns: fit-content(56%) minmax(0, 1fr) !important;
  column-gap: 16px !important;
  align-items: baseline !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--zt-hair) !important;
  text-align: start !important;
}
html body #z-thanks.card .resume-section-header + .resume-item { border-top: 0 !important; }
html body #z-thanks.card .resume-item:last-child { border-bottom: 0 !important; }
html body #z-thanks.card .resume-q {
  font-size: 13.5px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--zt-ink-soft) !important;
}
html body #z-thanks.card .resume-a {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  max-width: none !important;
  /* Wrap at spaces; break inside a word only when it is longer than the
     column (an e-mail address on a phone) — never clipped (Codex P2, #287). */
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  /* A formula ("17 × €555 + €565 = €10,000") keeps its own direction inside RTL. */
  unicode-bidi: plaintext !important;
}
/* plaintext resolves "end" per value; the ledger column is the physical edge.
   dir="rtl" sits on <html> itself (Codex P2, #287). */
html[dir="rtl"] body #z-thanks.card .resume-a { text-align: left !important; }

/* Actions: the rail CTA stays; Start over is a quiet companion. */
html body #z-thanks.card .z-thanks-actions .start-over {
  font-size: 13px !important;
  color: var(--zt-ink-mute) !important;
}

/* Desktop composition: the brief reads down the left with its reference stamped
   at its foot and the actions after it; the answers on record keep station on
   the right (sticky) while the reader scrolls the brief. */
@media (min-width: 800px) {
  html body #z-thanks.card { overflow-y: auto !important; }
  html body #z-thanks.card > main.thanks-main { padding-inline: 24px !important; padding-bottom: 32px !important; }
  html body #z-thanks.card .z-thanks-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) !important;
    column-gap: 22px !important;
    align-items: start !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  html body #z-thanks.card .z-thanks-left { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; }
  html body #z-thanks.card .z-thanks-right {
    position: sticky !important;
    top: calc(var(--funnel-toolbar-top, 8px) + var(--funnel-icon-size, 44px) + 12px) !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body #z-thanks.card .resume-answers-box {
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
  }
  html body #z-thanks.card .z-thanks-actions { margin-top: 22px !important; gap: 22px !important; }
}
/* The reference is stamped at the foot of the brief (one document, one number). */
html body #z-thanks.card .lead-position-card { border-radius: 18px 18px 0 0 !important; border-bottom: 0 !important; }
html body #z-thanks.card .file-panel.z-dossier-ref-bar { border-radius: 0 0 18px 18px !important; margin-top: 0 !important; }
html body #z-thanks.card .z-thanks-left { gap: 0 !important; }

/* Phones: one column, the file below the brief, actions at the end of the brief. */
@media (max-width: 799px) {
  /* The stage label already reserves the toolbar band; no second band above it. */
  html body section#z-thanks.card.on > main.thanks-main { padding-top: 0 !important; }
  html body #z-thanks.card .thanks-head-block { margin-bottom: 18px !important; }
  html body #z-thanks.card .thanks-head-block .thanks-hint { font-size: 14px !important; }
  html body #z-thanks.card .lead-position-card { padding: 20px 18px 6px !important; }
  html body #z-thanks.card .lead-pos-header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  html body #z-thanks.card .lead-pos-item { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 10px !important; padding: 14px 0 !important; text-align: start !important; }
  html body #z-thanks.card .lead-pos-num { font-size: 22px !important; }
  html body #z-thanks.card .lead-pos-title { font-size: 15px !important; }
  html body #z-thanks.card .lead-pos-text { font-size: 13.5px !important; }
  html body #z-thanks.card .file-panel.z-dossier-ref-bar { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 16px !important; text-align: center !important; }
  html body #z-thanks.card .file-panel.z-dossier-ref-bar .z-ref-header { align-items: center !important; text-align: center !important; }
  html body #z-thanks.card .file-panel.z-dossier-ref-bar .num-row { justify-content: space-between !important; }
  html body #z-thanks.card .file-panel.z-dossier-ref-bar .num { font-size: 17px !important; }
  html body #z-thanks.card .resume-answers-box { padding: 4px 18px 10px !important; }
  html body #z-thanks.card .z-thanks-grid { gap: 16px !important; }
  html body #z-thanks.card .z-thanks-right { gap: 16px !important; }
  html body #z-thanks.card .z-thanks-actions { margin-top: 18px !important; }
}