/* ============================================================
   Wizard — mobile questionnaire (Figma "Wizard prototype", 393px)
   Desktop design does not exist yet; the mobile column is centred.
   ============================================================ */

.wz {
  width: 100%;
  min-height: 100%;
}

.wz-screen {
  display: none;
  width: 100%;
  min-height: calc(100vh - 82px);
  flex-direction: column;
}

.wz-screen.is-active {
  display: flex;
  animation: wz-fade .28s ease both;
}

/* NOTE: this screen-in animation must NEVER use `transform`, `filter`,
   `perspective`, `backdrop-filter`, `contain: paint` or `will-change` on
   `.wz-screen`. Any of those turns the section into a containing block for
   `position: fixed`, which detaches `.wz-float-bar` / `.wz-scroll` from the
   viewport and drops them far below the fold. Animate opacity only. */
@keyframes wz-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------- Themes (per world) ---------- */
.wz-t-dark {
  --wz-bg: #1e3c95;
  --wz-accent: #ffffff;
  --wz-ink: #ffffff;
  --wz-soft: #ffffff;
}

.wz-t-body {
  --wz-bg: #e6effb;
  --wz-accent: #002d70;
  --wz-ink: #1a1a1a;
  --wz-soft: #5f5f5f;
}

.wz-t-nutrition {
  --wz-bg: #eaf4ee;
  --wz-accent: #005c2b;
  --wz-ink: #1a1a1a;
  --wz-soft: #5f5f5f;
}

.wz-t-mind {
  --wz-bg: #ffeff3;
  --wz-accent: #800059;
  --wz-ink: #1a1a1a;
  --wz-soft: #5f5f5f;
}

.wz-t-sleep {
  --wz-bg: #eaebff;
  --wz-accent: #252a88;
  --wz-ink: #1a1a1a;
  --wz-soft: #5f5f5f;
}

.wz-t-cognition {
  --wz-bg: #f0ebfb;
  --wz-accent: #5125b6;
  --wz-ink: #1a1a1a;
  --wz-soft: #5f5f5f;
}

.wz-screen--q {
  background: var(--wz-bg);
}

/* ---------- Progress ---------- */
.wz-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px 16px;
}

.wz-progress-bars {
  display: flex;
  gap: 4px;
}

.wz-bar {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: #e2e4e8;
  transition: background .25s ease, opacity .25s ease;
}

.wz-bar.is-on {
  background: var(--wz-accent);
}

.wz-t-dark .wz-bar {
  background: #ffffff;
  opacity: .3;
}

.wz-t-dark .wz-bar.is-on {
  background: #ffffff;
  opacity: 1;
}

.wz-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.wz-progress-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--wz-ink);
}

.wz-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1e3c95;
  font-family: inherit;
}

.wz-t-dark .wz-back {
  color: #ffffff;
}

.wz-chev {
  width: 24px;
  height: 24px;
  flex: none;
}

.wz-chev-sm {
  width: 16px;
  height: 16px;
}

/* ---------- Question content ---------- */
.wz-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 24px 24px;
  /* the title-row graphic hangs past the screen edge — clip it here so the
     document itself never grows wider than the viewport */
  overflow-x: clip;
}

.wz-q-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wz-world-title {
  font-family: "PloniMLv2AAA-U-Bold", sans-serif;
  font-size: 48px;
  line-height: 56px;
  font-weight: 800;
  color: var(--wz-accent);
}

.wz-q-title {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  color: var(--wz-ink);
}

.wz-q-helper {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--wz-soft);
}

.wz-graphic {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Basics — the world graphic sits in the title row, to the left of the title
   (Figma "02 Q1": the graphic overlaps the H+Title row and runs off the edge). */
.wz-title-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.wz-title-row .wz-world-title {
  flex: 0 0 auto;
}

.wz-graphic--title {
  flex: 0 1 auto; /* width comes from the img's own width attribute */
  min-width: 0;
  margin-inline-end: -24px; /* Figma: the graphic starts at the screen edge */
  margin-bottom: 9px;
}

/* Basics + body: Figma starts these two 40px past the screen edge */
.wz-t-dark .wz-graphic--title,
.wz-t-body .wz-graphic--title {
  margin-inline-end: -64px;
}

/* ---------- Options ---------- */
.wz-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wz-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e2e4e8;
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.wz-opt-label {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #1a1a1a;
}

.wz-opt-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.wz-radio {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e2e4e8;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.wz-opt.is-selected {
  background: #e6effb;
  border: 2px solid #1e3c95;
  padding: 11px;
}

.wz-opt.is-selected .wz-opt-label {
  font-family: "PloniMLv2AAA-D-Bold", sans-serif;
  font-weight: 600;
}

.wz-opt.is-selected .wz-radio {
  border-color: #1e3c95;
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 12px #1e3c95;
}

/* ---------- Stepper ---------- */
.wz-stepper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wz-stepper-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.wz-step-btn {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e2e4e8;
  color: #1e3c95;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .18s ease, opacity .18s ease;
}

.wz-step-btn svg {
  width: 24px;
  height: 24px;
}

.wz-step-plus {
  border-color: #1e3c95;
}

.wz-step-btn:disabled {
  opacity: .45;
  cursor: default;
}

.wz-step-input {
  width: 112px;
  height: 56px;
  background: #ffffff;
  border: 1px solid #e2e4e8;
  border-radius: 16px;
  text-align: center;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  color: #1a1a1a;
}

.wz-step-input:focus {
  outline: 2px solid #1e3c95;
  outline-offset: 1px;
}

.wz-step-unit {
  font-family: "PloniMLv2AAA-D-Bold", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.wz-step-hint {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: #5f5f5f;
  text-align: center;
}

/* ---------- Primary CTA ---------- */
.wz-cta {
  margin-top: auto;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border: 0;
  border-radius: 100px;
  background: #1e3c95;
  color: #ffffff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

/* Locked (no answer chosen yet). `aria-disabled` rather than `disabled` so the
   control stays focusable/announceable and can still explain why it is blocked. */
.wz-cta.is-locked,
.wz-cta:disabled {
  background: #f3f4f6;
  color: #9aa0a6;
  border: 2px solid #e2e4e8;
  opacity: .6;
  cursor: default;
}

.wz-cta.is-locked .wz-chev,
.wz-cta:disabled .wz-chev {
  display: none;
}

.wz-t-dark .wz-cta {
  background: #ffffff;
  color: #1e3c95;
  border: 2px solid #1e3c95;
}

.wz-t-dark .wz-cta.is-locked,
.wz-t-dark .wz-cta:disabled {
  background: #f3f4f6;
  color: #9aa0a6;
  border: 2px solid #e2e4e8;
  opacity: .6;
}

/* inline "pick an answer" hint, announced via aria-live */
.wz-cta-hint {
  width: 100%;
  margin-top: 8px;
  font-family: "PloniMLv2AAA-D-Bold", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #cb0000;
  text-align: center;
  min-height: 0;
}

.wz-t-dark .wz-cta-hint {
  color: #ffd2d2;
}

.wz-cta-hint:empty {
  margin-top: 0;
}

/* ============================================================
   P 01 · Opening
   ============================================================ */
.wz-screen--intro {
  background: #e5e5e5;
  position: relative;
}

/* blue hero on top of the opening screen (mobile) */
.wz-hero-top {
  position: relative;
  /* the drop shadow bleeds 17px past the slot — Figma clips it at the fold */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1e3c95;
  padding: 8px 24px 0;
}

.wz-hero-kicker {
  /* the image's shadow bleeds up behind the headline (blend-multiply in Figma);
     the export's backdrop is the same blue, so keep the headline above it */
  position: relative;
  z-index: 1;
  font-family: "PloniMLv2AAA-U-Bold", sans-serif;
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #e5e5e5;
  text-align: center;
  margin-bottom: 8px;
}

/* 285x219 slot; the export is 285x271 because the shadow starts 35px higher */
.wz-hero-pic {
  position: relative;
  width: min(285px, 100%);
  aspect-ratio: 285 / 219;
}

.wz-hero-pic img {
  position: absolute;
  inset-inline-start: 0;
  top: -15.98%;
  /* -35 / 219 */
  width: 100%;
  height: auto;
}

.wz-intro-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 48px;
}

.wz-intro-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wz-intro-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wz-sub {
  font-family: "PloniMLv2AAA-D-Bold", sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #1a1a1a;
}

.wz-par {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #1a1a1a;
  /* +8px from .wz-intro-block's gap = the 24px of the Figma "Title block" */
  margin-bottom: 16px;
}

.wz-par strong {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: 700;
}

.wz-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wz-benefit {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.wz-benefit-text {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #1a1a1a;
  flex: 1;
  text-align: right;
}

.wz-benefit-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background: #f4dcd9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wz-benefit-icon img {
  width: 16px;
  height: 16px;
}

.wz-card-intro {
  background: #e6effb;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.wz-card-intro-title {
  font-family: "PloniMLv2AAA-D-Bold", sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  color: #000000;
}

.wz-card-intro-body {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #1a1a1a;
  white-space: pre-line;
}

.wz-start {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 24px;
  border: 0;
  border-radius: 100px;
  background: #6499e8;
  color: #002d70;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
}

.wz-start-arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

/* scroll affordance — sits inside the blue hero, on its left edge */
.wz-scroll {
  position: absolute;
  left: 0;
  top: calc(50% + 53.23px);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  cursor: pointer;
  z-index: 2;
  transition: opacity .25s ease;
}

.wz-scroll img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.wz-scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* The arrow bobs down and back in a loop so it reads as "scroll down".
   Mobile only. `.wz-scroll` is absolutely positioned and the transform sits on
   the button itself, so this does NOT create a containing block for the fixed
   bars — see the note at the top of this file. The keyframes keep the
   translateY(-50%) that centres the button on its anchor point. */
@keyframes wz-scroll-bob {
  0%,
  100% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% + 10px));
  }
}

@media (max-width: 1023.98px) {
  .wz-scroll {
    animation: wz-scroll-bob 1.6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wz-scroll {
    animation: none;
  }
}

/* full-width join bar pinned to the bottom of the opening screen */
.wz-float-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  z-index: 40;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* While the user is actively scrolling the bar slides out of the way so the
   content gets the full screen; it slides back in once scrolling stops.
   The transform sits on the fixed element itself (not on an ancestor), so it
   does not create a containing block that would break `position: fixed`. */
.wz-float-bar.is-scrolling {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wz-float-bar {
    transition: none;
  }
}

.wz-float-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 100px;
  background: #d25189;
  color: #ffffff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
}

/* the fixed bar must not cover the footer links on the opening screen */
body.wz-on-intro .main-footer,
body[data-wz-screen="result-nonmember"] .main-footer {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   P 08 / 09 / 10 · End + result screens
   ============================================================ */
.wz-screen--end {
  background: #e5e5e5;
}

.wz-hero {
  background: #1e3c95;
  padding: 24px 24px 0;
}

.wz-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.wz-end-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px 48px;
}

/* ---- P 08 + P 09 (Figma 2078:8817 / 1824:4196) — composition on the
       light page instead of the blue band; back link above the image ---- */
.wz-screen--lightpic {
  position: relative;
}

.wz-hero--lightpic {
  position: relative;
  background: transparent;
  /* 24px back-link row + 10px gap above the 285x219 slot */
  padding: 54px 54px 0;
}

.wz-lightpic {
  position: relative;
  width: 100%;
  aspect-ratio: 285 / 219;
}

.wz-lightpic img {
  position: absolute;
  inset-inline-start: 0;
  /* the export is 285x271 because the shadow starts 35px above the slot */
  top: -15.98%;
  width: 100%;
  height: auto;
}

/* the back link sits above the image, not above the copy */
.wz-screen--lightpic .wz-end-main > .wz-back {
  position: absolute;
  top: 24px;
  right: 24px;
  left: 24px;
}

.wz-screen--lightpic .wz-end-main {
  padding-top: 24px;
}

.wz-screen--lightpic .wz-end-heading {
  gap: 0;
}

/* the outlined button's 2px border must not make it taller than its pair */
.wz-screen--lightpic .wz-cta-stack .wz-btn--outline {
  padding-block: 14px;
}

/* P 09 · member — Figma "Message" stacks title/body/button/tooltip 16px apart */
#wz-result-member .wz-end-main {
  gap: 16px;
  padding-bottom: 32px;
}

/* the outlined "more info" link under the app CTA: its 2px border must not
   make it taller than the magenta button above it */
#wz-result-member .wz-more-btn {
  padding-block: 14px;
}

/* P 10 · not a member — Figma 1824:4232 */
#wz-result-nonmember .wz-end-main {
  gap: 16px;
}

#wz-result-nonmember .wz-benefits--end {
  gap: 8px;
}

/* P 10 — the copy + benefit list give way to the lead form itself, which
   wizard.js relocates into #wz-inline-form. With the form on the screen the
   "join" CTA (and the mobile footer clearance it needed) is redundant. */
body.wz-form-inline #wz-result-nonmember .wz-res-body,
body.wz-form-inline #wz-result-nonmember .wz-benefits--end,
body.wz-form-inline #wz-result-nonmember .wz-end-footer {
  display: none;
}

body.wz-form-inline[data-wz-screen="result-nonmember"] .main-footer {
  padding-bottom: 32px;
}

/* empty on desktop and on every other screen — the node must take no space */
.wz-inline-form:empty {
  display: none;
}

.wz-end-main .wz-back {
  align-self: flex-start;
}

.wz-message {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wz-end-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* desktop-only line break inside a heading (mobile keeps the natural wrap) */
.wz-nl-d {
  display: none;
}

/* elements the desktop frames add and the mobile frames do not have */
.wz-d-only,
.wz-tooltip.wz-d-only {
  display: none;
}

/* groups the end-screen copy into one desktop column; inert on mobile */
.wz-end-copy {
  display: contents;
}

.wz-end-h1 {
  font-family: "PloniMLv2AAA-U-Bold", sans-serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
  color: #1e3c95;
}

.wz-end-h2 {
  font-family: "PloniMLv2AAA-U-Bold", sans-serif;
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  color: #d25189;
}

.wz-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wz-btn {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border: 0;
  border-radius: 100px;
  background: #1e3c95;
  color: #ffffff;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
}

.wz-btn--magenta {
  background: #d25189;
  color: #ffffff;
}

.wz-btn--outline {
  background: #ffffff;
  color: #1e3c95;
  border: 2px solid #1e3c95;
}

.wz-res-title {
  font-family: "PloniMLv2AAA-U-Bold", sans-serif;
  font-size: 28px;
  line-height: 28px;
  font-weight: 800;
  color: #1e3c95;
}

.wz-res-body {
  font-family: "PloniMLv2AAA-D-Bold", sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #1e3c95;
}

.wz-res-body strong {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-weight: 700;
}

.wz-res-body--reg {
  font-family: "PloniMLv2AAA-Regular", sans-serif;
  font-weight: 400;
}

/* the end-screen list keeps the brand blue but is NOT bold */
.wz-benefits--end .wz-benefit-text {
  color: #1e3c95;
}

.wz-end-footer {
  background: #ffffff;
  padding: 16px;
}

/* P 10 · mobile — the join CTA is pinned to the bottom of the viewport, the
   same way the opening screen pins its own join bar. */
#wz-result-nonmember .wz-end-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}

/* tooltip */
.wz-tooltip {
  background: #e6effb;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.wz-tooltip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: #002d70;
}

.wz-tooltip-body {
  width: 100%;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #002054;
}

/* the desktop hero banner + two-column wrapper are inert on mobile */
.wz-intro-hero {
  display: contents;
}

.wz-intro-banner,
.wz-intro-kicker {
  display: none;
}

/* ============================================================
   Tablet — between the two hand-offs: centre the mobile column
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .wz-float-bar,
  #wz-result-nonmember .wz-end-footer {
    left: calc(50% - 196.5px);
    right: auto;
    width: 393px;
  }
}

/* ============================================================
   Desktop — Figma "Wizard flow · 1920×1080" (section 2282:1312)
   800px question column, two-column hero + result screens.
   ============================================================ */
@media (min-width: 1024px) {

  .wz-screen {
    min-height: calc(100vh - 92px);
  }

  /* ---------- Question screens ---------- */
  .wz-screen--q .wz-progress {
    width: 800px;
    margin-inline: auto;
    padding: 64px 0 0;
  }

  .wz-progress-label,
  .wz-back {
    font-size: 16px;
    line-height: 24px;
  }

  .wz-screen--q .wz-content {
    width: 800px;
    margin-inline: auto;
    padding: 64px 64px 64px;
    gap: 32px;
  }

  .wz-world-title {
    font-size: 40px;
    line-height: 48px;
  }

  .wz-q-title {
    font-size: 36px;
    line-height: 44px;
  }

  .wz-q-helper {
    line-height: 24px;
  }

  /* the graphic hangs into the 64px gutter of the 800px column */
  .wz-graphic--title {
    flex: none;
    margin-inline-end: -64px;
    margin-bottom: 4px;
  }

  .wz-opt {
    min-height: 62px;
    padding: 16px 20px;
    border-radius: 16px;
  }

  .wz-opt.is-selected {
    padding: 15px 19px;
  }

  .wz-opt-label {
    font-size: 20px;
    line-height: 28px;
  }

  .wz-cta {
    margin-top: 0;
    min-height: 64px;
    padding: 20px 24px;
  }

  /* ---------- P 01 · Opening (Figma 2452:21797) ---------- */
  .wz-intro-content {
    max-width: 1488px;
    margin-inline: auto;
    padding: 64px 24px;
    gap: 64px;
  }

  /* the desktop banner replaces the mobile blue hero */
  .wz-hero-top,
  .wz-float-bar {
    display: none;
  }

  body.wz-on-intro .main-footer {
    padding-bottom: 32px;
  }

  .wz-intro-hero {
    display: grid;
    /* Figma: two 688px columns with a 64px gutter inside the 1440px wrapper */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
  }

  .wz-intro-block {
    gap: 16px;
  }

  .wz-intro-kicker {
    display: block;
    font-family: "PloniMLv2AAA-U-Bold", sans-serif;
    font-size: 56px;
    line-height: 64px;
    font-weight: 800;
    letter-spacing: 2.8px;
    color: #d25189;
    text-align: right;
  }

  .wz-par,
  .wz-benefit-text {
    font-size: 28px;
    line-height: 36px;
    color: #1e3c95;
  }

  .wz-par {
    margin-bottom: 0;
  }

  .wz-sub {
    font-size: 28px;
    line-height: 32px;
    color: #d25189;
  }

  .wz-benefit-text {
    line-height: 32px;
  }

  .wz-benefits {
    margin-top: 0;
    gap: 8px;
  }

  .wz-benefit-icon {
    width: 40px;
    height: 40px;
  }

  .wz-benefit-icon img {
    width: 24px;
    height: 24px;
  }

  /* 688x486 slot; the export is 688x541 because the shadow bleeds 55px below it */
  .wz-intro-banner {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 688 / 486;
  }

  .wz-intro-banner img {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: auto;
  }

  .wz-card-intro {
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 32px;
    border-radius: 32px;
    margin-top: 0;
  }

  .wz-card-intro-title {
    font-size: 28px;
    line-height: 36px;
  }

  .wz-card-intro-body {
    max-width: 800px;
    font-size: 28px;
    line-height: 36px;
  }

  .wz-start {
    width: 277px;
    min-height: 62px;
    /* +8px from the card's own gap = the 32px of the Figma card */
    margin-top: 24px;
    padding: 20px 40px;
    font-size: 28px;
    line-height: 22px;
  }

  .wz-start-arrow {
    width: 22px;
    height: 22px;
  }

  /* ---------- P 08 / 09 / 10 · End + result screens ---------- */
  .wz-screen--end.is-active {
    display: grid;
    /* fluid below the 1480px hand-off so laptops never scroll sideways */
    grid-template-columns: minmax(0, 535fr) minmax(0, 833fr);
    align-content: start;
    align-items: center;
    column-gap: 64px;
    max-width: 1480px;
    margin-inline: auto;
    padding: 64px 24px;
  }

  .wz-hero {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 584px;
    padding: 0;
    border-radius: 32px;
    overflow: hidden;
  }

  .wz-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .wz-end-main {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }

  .wz-end-main > .wz-back {
    margin-bottom: 40px;
  }

  /* the split screen keeps the desktop two-column layout untouched */
  .wz-hero--lightpic {
    padding: 0;
    background: #1e3c95;
  }

  .wz-lightpic {
    position: static;
    aspect-ratio: auto;
    height: 100%;
  }

  .wz-lightpic picture {
    display: block;
    height: 100%;
  }

  .wz-lightpic img {
    position: static;
  }

  .wz-screen--lightpic .wz-end-main {
    padding-top: 0;
  }

  .wz-screen--lightpic .wz-end-main > .wz-back {
    position: static;
  }

  /* the 2px outline eats into the 64px height, so the padding gives it back */
  .wz-screen--lightpic .wz-cta-stack .wz-btn--outline {
    padding-block: 14px;
  }

  #wz-result-member .wz-end-main {
    gap: 24px;
    padding-bottom: 0;
  }

  #wz-result-nonmember .wz-end-main {
    gap: 24px;
  }

  #wz-result-nonmember .wz-benefits--end {
    gap: 8px;
  }

  .wz-end-heading {
    gap: 0;
  }

  .wz-end-h1,
  .wz-res-title {
    font-size: 48px;
    line-height: 56px;
  }

  .wz-end-h2 {
    font-size: 64px;
    line-height: 72px;
  }

  .wz-res-body {
    font-size: 20px;
    line-height: 32px;
  }

  .wz-cta-stack {
    flex-direction: row;
    gap: 8px;
  }

  .wz-btn {
    width: 400px;
    min-height: 64px;
    padding: 16px 24px;
    font-size: 24px;
    line-height: 32px;
    flex: none;
  }

  /* the two split buttons share the column and shrink with it */
  .wz-cta-stack .wz-btn {
    flex: 1 1 0;
    width: auto;
    max-width: 400px;
  }

  .wz-end-main > .wz-btn {
    align-self: flex-start;
  }

  .wz-end-footer {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    background: transparent;
    padding: 32px 0 0;
  }

  .wz-tooltip {
    padding: 24px;
    gap: 8px;
  }

  .wz-tooltip-head {
    font-size: 20px;
    line-height: 28px;
  }

  .wz-tooltip-head img {
    width: 24px;
    height: 24px;
  }

  .wz-tooltip-body {
    font-size: 16px;
    line-height: 28px;
  }

  /* ---------- P 08 · split screen (Figma 2344:736) ---------- */
  /* 1440 container: copy 808 on the right, illustration 608 on the left,
     back link above both, tooltip full width below */
  #wz-split.is-active {
    grid-template-columns: minmax(0, 808fr) minmax(0, 608fr);
    align-items: center;
    column-gap: 24px;
    row-gap: 64px;
    max-width: 1488px;
    padding: 32px 24px 64px;
    /* below ~1380px the shadow bleed reaches past the page padding */
    overflow-x: clip;
  }

  #wz-split .wz-end-main {
    display: contents;
  }

  #wz-split .wz-back {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 24px;
  }

  #wz-split .wz-hero {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  #wz-split .wz-lightpic,
  #wz-split .wz-lightpic picture {
    height: auto;
  }

  /* the export is 668.0x541 CSS px for a 608x486 slot — the drop shadow
     bleeds 30px past each side and 54.6px below, so it is pulled back out */
  #wz-split .wz-lightpic img {
    display: block;
    width: 109.8697%;
    max-width: none;
    height: auto;
    object-fit: fill;
    margin-inline: -4.9353%;
    margin-bottom: -8.9785%;
  }

  #wz-split .wz-message {
    grid-column: 1;
    grid-row: 2;
    /* the illustration exports with an opaque backdrop, and its shadow bleed
       reaches ~6px into this column — enough to slice the left button's
       rounded end. Lift the copy above it. */
    position: relative;
    z-index: 1;
  }

  #wz-split .wz-end-h1 {
    line-height: 48px;
  }

  #wz-split .wz-end-h2 {
    line-height: 68px;
  }

  #wz-split .wz-tooltip {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #wz-split .wz-tooltip-body {
    font-size: 20px;
  }

  #wz-split .wz-nl-d {
    display: inline;
  }

  /* ---------- P 09 / P 10 · result screens (Figma 2344:807 / 2344:878) ---------- */
  /* 1440 container: copy on the right, 503.4 illustration on the left, 64 gutter */
  #wz-result-member.is-active,
  #wz-result-nonmember.is-active {
    grid-template-columns: minmax(0, 872.574fr) minmax(0, 503.426fr);
    column-gap: 64px;
    row-gap: 0;
    align-items: center;
    max-width: 1488px;
    padding: 32px 24px 128px;
    /* the illustration's shadow bleeds 82px past its column on both sides */
    overflow-x: clip;
  }

  #wz-result-member .wz-end-main,
  #wz-result-nonmember .wz-end-main {
    display: contents;
  }

  #wz-result-member .wz-back,
  #wz-result-nonmember .wz-back {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 64px;
    font-size: 18px;
    line-height: 24px;
  }

  #wz-result-member .wz-hero,
  #wz-result-nonmember .wz-hero {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    height: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* the CTA sits inside the copy column, so the art centres against both rows */
  #wz-result-nonmember .wz-hero {
    grid-row: 2 / span 2;
  }

  #wz-result-member .wz-lightpic,
  #wz-result-member .wz-lightpic picture,
  #wz-result-nonmember .wz-lightpic,
  #wz-result-nonmember .wz-lightpic picture {
    height: auto;
  }

  /* 668.0x541 export inside a 503.4x486 slot — 82.3px of shadow on each side and
     54.6px below it, pulled back out so the slot keeps its design size */
  #wz-result-member .wz-lightpic img,
  #wz-result-nonmember .wz-lightpic img {
    display: block;
    width: 132.6963%;
    max-width: none;
    height: auto;
    object-fit: fill;
    margin-inline: -16.3503%;
    margin-bottom: -10.8435%;
  }

  #wz-result-member .wz-end-copy,
  #wz-result-nonmember .wz-end-copy {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* the illustration exports with an opaque backdrop and its shadow bleeds
       ~18px into this column — it was swallowing the last letter of every
       line. Lift the copy above it. */
    position: relative;
    z-index: 1;
  }

  #wz-result-member .wz-tooltip {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 64px;
  }

  #wz-result-nonmember .wz-tooltip {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 64px;
  }

  #wz-result-member .wz-tooltip-body,
  #wz-result-nonmember .wz-tooltip-body {
    font-size: 20px;
  }

  .wz-d-only {
    display: block;
  }

  .wz-tooltip.wz-d-only {
    display: flex;
  }

  /* --- P 09 --- */
  #wz-result-member .wz-res-title {
    font-size: 56px;
    line-height: 60px;
  }

  #wz-result-member .wz-res-body {
    font-size: 28px;
    line-height: 36px;
    color: #1a1a1a;
  }

  #wz-result-member .wz-end-copy .wz-btn {
    margin-top: 8px;
    align-self: flex-start;
  }

  /* --- P 10 --- */
  /* the copy column now holds only the heading and the 480px lead form, so the
     illustration is given ~20% more room than the 872.6/503.4 Figma split */
  #wz-result-nonmember.is-active {
    grid-template-columns: minmax(0, 772fr) minmax(0, 604fr);
  }

  #wz-result-nonmember .wz-end-h2 {
    font-size: 68px;
  }

  #wz-result-nonmember .wz-res-body {
    font-size: 28px;
    line-height: 32px;
  }

  .wz-sub-end {
    font-family: "PloniMLv2AAA-D-Bold", sans-serif;
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    color: #1e3c95;
  }


  #wz-result-nonmember .wz-end-footer {
    /* desktop keeps it in the grid — undo the mobile pinning */
    position: static;
    grid-column: 1;
    grid-row: 3;
    padding: 24px 0 0;
  }

  /* the inline lead form keeps the modal's own width inside the wide copy column */
  #wz-result-nonmember .wz-inline-form {
    width: 100%;
    max-width: 480px;
    margin-top: 8px;
  }
}