/**
 * POA Quiz — landing + centered sheet (scoped under .poa-quiz-pack).
 * Load poa-quiz-fonts.css before this file.
 */

/*
 * WordPress / themes often use min-height: 100vh on html or body. On iOS Safari, 100vh is the
 * *large* layout viewport (e.g. ~773px) while the visible area is smaller (~665px) — that
 * mismatch *is* the extra scroll; our .poa-quiz-pack alone cannot shrink the document root.
 * Override with small/dynamic viewport units so document height matches what you actually see.
 */
html:has([data-poa-quiz-root]),
body:has([data-poa-quiz-root]) {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  height: auto !important;
  max-height: none !important;
}

.poa-quiz-pack {
  --poa-forest: #1d3d2f;
  --poa-cream: #f7f2ea;
  --poa-cream-deep: #ebe4d9;
  --poa-sheet-border: #c9c3b6;
  --poa-sheet-rule: #d9d4ca;
  --poa-sheet-frame-border: #c4bfb2;
  --poa-sky: #00b5b5;
  --poa-sun: #ffc107;
  --poa-font-mono: 'POA Mono', ui-monospace, monospace;
  /** Latin Modern Mono Prop Lt 10 — quiz sheet (match design names). */
  --poa-font-mono-label: 'LMMonoPropLt10', 'POA Mono', ui-monospace, monospace;
  --poa-font-mono-regular: 'LMMonoPropLt10-Regular', 'POA Mono', ui-monospace, monospace;
  --poa-font-script: 'POA Script', 'Brush Script MT', cursive;
  --poa-font-castaway: 'POA Castaway', 'POA SignPainter', system-ui, sans-serif;
  --poa-font-headline: 'POA SignPainter', 'POA Castaway', system-ui, sans-serif;
  /** House Showcard / SignPainter — result mood line. */
  --poa-font-signpainter: 'POA SignPainter', 'SignPainter', 'Segoe UI', system-ui, sans-serif;
  /** Landing tagline (Bobby Jones Soft). */
  --poa-font-tagline: 'Bobby Jones Soft', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  /** Optional display outline (e.g. accents); not used by default tokens. */
  --poa-font-bobby-outline: 'Bobby Jones Soft Outline', 'Bobby Jones Soft', system-ui, sans-serif;
  /** Sheet Back / Next — bold UI sans (reference). */
  --poa-font-sheet-ui: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  /* Fluid layout clamps: interpolate between these viewport widths. */
  --poa-viewport-min: 360px;
  --poa-viewport-max: 1366px;
  --poa-viewport-span: calc(var(--poa-viewport-max) - var(--poa-viewport-min));
  /*
   * Numeric viewport span (px) for fluid linear calc. Keep equal to (max - min) as numbers.
   * Patterns like (100vw - min) * 18px / span multiply length × length in strict calc(); Chrome
   * often accepts that, Firefox/Safari can drop font-size/width and you get tiny inherited text.
   */
  --poa-vw-interp-den: 1006;
  /* Logo cap (image only). Landing column is wider so tagline/CTA center on the same axis as the viewport, not a logo-width strip. */
  --poa-landing-logo-max: min(90vw, 42rem);
  /* Desktop artboard cap; tagline stays one line without horizontal scroll. */
  --poa-landing-col-max: min(var(--poa-viewport-max), calc(100vw - 1.5rem));
  --poa-landing-cta: #2d4739;
  --poa-taupe: #7a756c;
  --poa-taupe-muted: #9a958c;
  /** Result card — rules / borders closer to print comp (ref). */
  --poa-result-rule: #cfc9be;
  --poa-result-rule-strong: #c2bbb0;
  --poa-result-tab-bg: #e9e3d9;
  --poa-result-tab-border: #c9c2b6;
  --poa-result-retake: #8a847a;
  --poa-lets-go-aspect: 57.639763 / 19.809355;
  /** Landing hero — slow fade-in together; motion starts after fade. */
  --poa-landing-intro-fade: 1.35s;
  --poa-landing-intro-ease: ease-out;
  /** "Let's Go" → sheet handoff (duration / sheet delay overridden in JS). */
  --poa-landing-start-duration: 0.88s;
  --poa-landing-start-sheet-delay: 0.14s;
  --poa-landing-start-ease-out: cubic-bezier(0.22, 0.99, 0.26, 1);
  /** Flow wrapper flies in from above on “Let’s Go”; inner .poa-quiz-sheet does not move. */
  --poa-sheet-enter-offset: -100vh;
  --poa-sheet-enter-ease: cubic-bezier(0.22, 0.99, 0.26, 1);
  /** Matches registry `landingToQuizTransitionMs` (420) so lead open/close feels like step-bridge motion. */
  --poa-lead-enter-duration: 0.42s;
  /** Pause between lead motion legs; 0s keeps the handoff tight once the return leg is full-opacity. */
  --poa-lead-bridge-gap: 0s;
  --poa-lead-enter-ease: cubic-bezier(0.22, 0.99, 0.26, 1);
  /** Lead overlay: slide from above (timing is linear per product). */
  --poa-lead-enter-timing: linear;
  --poa-sheet-ribbon-aspect-back: 152.93611 / 54.949999;
  --poa-sheet-ribbon-aspect-next: 40.4617 / 14.538854;
  /** Nav ribbon hit area width (fluid); height comes from aspect-ratio per button. */
  --poa-ribbon-width-min: 100px;
  --poa-ribbon-width-max: 156px;
  --poa-quiz-sheet-max: min(650px, calc(100vw - 1.5rem));
  /* ../svg/ works from css/ (standalone) and from assets/css/ (WordPress theme & plugin). */
  --poa-checkbox-x-url: url('../svg/checkbox-x.svg');

  position: relative;
  isolation: isolate;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--poa-bg, #0a6f6f);
  color: var(--poa-forest);
  /*
   * Mobile Safari: 100vh can exceed the *visible* viewport (toolbar), causing ~100px scroll
   * and a gap under fixed layers. Prefer dvh, then svh (smallest) so layout matches the screen.
   */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  box-sizing: border-box;
}

.poa-quiz-pack *,
.poa-quiz-pack *::before,
.poa-quiz-pack *::after {
  box-sizing: border-box;
}

.poa-quiz-pack .poa-stage-wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
}

/* Viewport-fixed so vector backdrops stay full-screen while the pack / page scrolls. */
.poa-quiz-pack [data-poa-svg-host] {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* Direct SVG children stack for opacity crossfade between backgrounds */
.poa-quiz-pack [data-poa-svg-host] > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/*
 * Landing only: hide the lower ~70% of drifting cloud paint (viewBox vertical) so white clouds
 * do not sit behind the white HTML tagline. Scoped to the landing artboard SVG via
 * data-poa-landing-backdrop (see background-stage.js).
 */
.poa-quiz-pack
  .poa-stage-wrap:has(.poa-landing:not(.poa-landing--dismissed))
  [data-poa-svg-host]
  > svg[data-poa-landing-backdrop='1']
  [data-poa-layer='clouds'] {
  -webkit-clip-path: inset(0 0 70% 0);
  clip-path: inset(0 0 70% 0);
}

@supports (clip-path: view-box inset(0 0 1% 0)) {
  .poa-quiz-pack
    .poa-stage-wrap:has(.poa-landing:not(.poa-landing--dismissed))
    [data-poa-svg-host]
    > svg[data-poa-landing-backdrop='1']
    [data-poa-layer='clouds'] {
    -webkit-clip-path: view-box inset(0 0 70% 0);
    clip-path: view-box inset(0 0 70% 0);
  }
}

.poa-quiz-pack .poa-load-error {
  position: absolute;
  inset: auto 1rem 6rem;
  z-index: 5;
  pointer-events: auto;
  max-width: 28rem;
  margin: 0;
  padding: 1rem 1.1rem;
  color: #fecaca;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  font-size: 0.875rem;
}

/* --- Overlay column: landing + quiz --- */
.poa-quiz-pack .poa-quiz {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  pointer-events: none;
}

.poa-quiz-pack .poa-quiz > * {
  pointer-events: auto;
}

/* After “Let’s Go”, JS adds poa-landing--dismissed (not native hidden) so DevTools does not imply the whole quiz is gone. */
.poa-quiz-pack .poa-landing.poa-landing--dismissed {
  display: none !important;
}

/* --- Landing hero --- */
.poa-quiz-pack .poa-landing {
  width: 100%;
  max-width: var(--poa-landing-col-max);
  margin-inline: auto;
  text-align: center;
}

.poa-quiz-pack .poa-landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.25vw, 1rem);
  padding: clamp(0.5rem, 2vh, 1.25rem) clamp(0.75rem, 3vw, 1.5rem) clamp(1.5rem, 4vh, 2.5rem);
  overflow: visible;
}

.poa-quiz-pack .poa-landing-title {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 100%;
  line-height: 0;
}

.poa-quiz-pack .poa-landing-logo,
.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] {
  display: block;
  width: min(var(--poa-landing-logo-max), 100%);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@keyframes poa-title-wobble-l {
  0%,
  100% {
    transform: rotate(-1.75deg);
  }
  50% {
    transform: rotate(1.75deg);
  }
}

@keyframes poa-title-wobble-r {
  0%,
  100% {
    transform: rotate(1.5deg);
  }
  50% {
    transform: rotate(-1.5deg);
  }
}

@keyframes poa-playlist-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.014);
    opacity: 0.97;
  }
}

@keyframes poa-landing-hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* g56 = small-caps "DISCOVER" + "YOUR"; fade the group while row wobbles run underneath (same time). */
.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] #poa-landing-g56 {
  opacity: 0;
  animation: poa-landing-hero-fade-in var(--poa-landing-intro-fade) var(--poa-landing-intro-ease) 0s forwards;
}

.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] .poa-title-wobble--top,
.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] .poa-title-wobble--bottom {
  transform-box: fill-box;
  transform-origin: center;
}

.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] .poa-title-wobble--top {
  animation: poa-title-wobble-l 2.9s ease-in-out 0s infinite;
}

.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] .poa-title-wobble--bottom {
  animation: poa-title-wobble-r 2.9s ease-in-out 0s infinite;
}

/* g45 = script "Playlist…"; fade outer while breathe runs on inner layer. */
.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] #poa-landing-g45 {
  opacity: 0;
  animation: poa-landing-hero-fade-in var(--poa-landing-intro-fade) var(--poa-landing-intro-ease) 0s forwards;
}

.poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] #poa-landing-g45 .poa-playlist-breathe-layer {
  transform-box: fill-box;
  transform-origin: center;
  animation: poa-playlist-breathe 3.6s ease-in-out -0.4s infinite;
}

.poa-quiz-pack .poa-landing-title img.poa-landing-logo {
  opacity: 0;
  animation: poa-landing-hero-fade-in var(--poa-landing-intro-fade) var(--poa-landing-intro-ease) 0s forwards;
}

@media (max-width: 360px) {
  .poa-quiz-pack {
    --poa-landing-logo-max: min(calc(100vw - 1rem), 100%);
  }
}

.poa-quiz-pack .poa-landing-tagline {
  opacity: 0;
  animation: poa-landing-hero-fade-in var(--poa-landing-intro-fade) var(--poa-landing-intro-ease) 0s forwards;
  display: block;
  width: 100%;
  margin: clamp(0.75rem, 2vh, 1.35rem) 0 0;
  padding: 0.35rem 0 0;
  box-sizing: border-box;
  margin-inline: 0;
  text-align: center;
  font-family: var(--poa-font-tagline);
  /* Fluid up to 38px at desktop (--poa-viewport-max). */
  font-size: clamp(
    0.8125rem,
    calc(0.8125rem + (100vw - var(--poa-viewport-min)) * 25 / var(--poa-vw-interp-den)),
    38px
  );
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  white-space: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.poa-quiz-pack .poa-landing-tagline__row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.15em;
  max-width: 100%;
  line-height: 1.2;
}

.poa-quiz-pack .poa-landing-tagline__star {
  font-family: var(--poa-font-castaway);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1em;
  /* Match the row line box so the glyph centers against Bobby Jones caps. */
  height: 1.2em;
  margin-inline: 0.02em;
  transform: translateY(25%);
}

.poa-quiz-pack .poa-btn-lets-go {
  opacity: 0;
  animation: poa-landing-hero-fade-in var(--poa-landing-intro-fade) var(--poa-landing-intro-ease) 0s forwards;
  position: relative;
  /* grid (not inline-grid): Firefox can collapse inline-grid + aspect-ratio inside a flex column. */
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  margin-top: clamp(1.1rem, 3vh, 2rem);
  margin-inline: auto;
  box-sizing: border-box;
  /* 140px @ 360px → 204px @ 1366px (8.75rem / 12.75rem at 16px root). */
  --poa-lets-go-w: clamp(
    140px,
    calc(140px + (100vw - var(--poa-viewport-min)) * 64 / var(--poa-vw-interp-den)),
    204px
  );
  width: var(--poa-lets-go-w);
  /* Explicit height matches --poa-lets-go-aspect (Firefox: avoid aspect-ratio-only sizing here). */
  height: calc(var(--poa-lets-go-w) * 19.809355 / 57.639763);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  transition: filter 0.15s ease, transform 0.1s ease;
}

.poa-quiz-pack .poa-btn-lets-go__shape {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.poa-quiz-pack .poa-btn-lets-go__label {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  font-family: var(--poa-font-script);
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0 0.12em 0.08em 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  /* 48px at 1366px; scales down to 30px at 360px so the script fits the ribbon. */
  font-size: clamp(
    30px,
    calc(30px + (100vw - var(--poa-viewport-min)) * 18 / var(--poa-vw-interp-den)),
    48px
  );
  transform: translateX(-0.08em);
}

.poa-quiz-pack .poa-btn-lets-go:hover {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)) brightness(1.06);
}

.poa-quiz-pack .poa-btn-lets-go:active {
  transform: scale(0.99);
}

.poa-quiz-pack .poa-btn-lets-go:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Landing: Visit Columbia County (white mark; scales down on narrow viewports). */
.poa-quiz-pack .poa-landing-partner-logo-link {
  opacity: 0;
  animation: poa-landing-hero-fade-in var(--poa-landing-intro-fade) var(--poa-landing-intro-ease) 0s forwards;
  display: block;
  width: min(325px, 100%);
  max-width: 100%;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  margin-inline: auto;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 0;
}

.poa-quiz-pack .poa-landing-partner-logo-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 4px;
  border-radius: 2px;
}

.poa-quiz-pack .poa-landing-partner-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Results ticket: green mark between itinerary CTA and retake. */
.poa-quiz-pack .poa-results-partner-logo-link {
  display: block;
  width: min(250px, 100%);
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 0;
}

.poa-quiz-pack .poa-results-partner-logo-link:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: 3px;
  border-radius: 2px;
}

.poa-quiz-pack .poa-results-partner-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Quiz flow wrapper --- */
.poa-quiz-pack .poa-quiz-flow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pre-start only (class — avoid native hidden, which themes/editors can re-apply and which pairs badly with [hidden]{display:none}). */
.poa-quiz-pack .poa-quiz-flow.poa-quiz-flow--awaiting-start {
  display: none !important;
}

/* Live quiz session: keep overlay above the SVG stage and force the flow column visible after WAAPI handoff. */
.poa-quiz-pack[data-poa-quiz-session='live'] .poa-quiz {
  z-index: 10;
}

/*
 * Live session (steady state): pull the overlay out of the stage’s absolute inset + overflow:hidden trap.
 * Otherwise a tall results sheet is vertically centered inside a viewport-tall box and the top/bottom are
 * clipped with no document scroll — fixed SVG backdrops then look “wrong”. In-flow .poa-quiz grows the
 * pack so the page can scroll; [data-poa-svg-host] stays position:fixed to the viewport behind it.
 * Excludes start / step / lead motion when .poa-quiz-flow is temporarily position:fixed for WAAPI.
 */
.poa-quiz-pack[data-poa-quiz-session='live']
  .poa-quiz:not(.poa-quiz--start-transition):not(.poa-quiz--step-transition):not(.poa-quiz--lead-motion) {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: max(env(safe-area-inset-top, 0px), clamp(0.75rem, 3vw, 2rem));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(0.75rem, 3vw, 2rem));
  padding-left: clamp(0.75rem, 3vw, 2rem);
  padding-right: clamp(0.75rem, 3vw, 2rem);
}

.poa-quiz-pack[data-poa-quiz-session='live'] .poa-stage-wrap {
  overflow: visible;
}

/*
 * Result sheet: keep the column top-aligned so a follow-up render (SVG prefetch / playlist icons)
 * does not re-run flex “center” with a new height — that read as a jump on mobile.
 */
.poa-quiz-pack[data-poa-quiz-session='live']:has([data-poa-quiz-panel][data-poa-sheet-mode='result'])
  .poa-quiz:not(.poa-quiz--start-transition):not(.poa-quiz--step-transition):not(.poa-quiz--lead-motion) {
  justify-content: flex-start;
}

/* :not(.step-bridge) — during Next/Back the flow runs WAAPI exit/re-enter; !important would kill that motion.
   :not(.poa-quiz--lead-motion on ancestor) — lead capture also drives WAAPI on .poa-quiz-flow (see .poa-quiz--lead-motion). */
.poa-quiz-pack .poa-quiz:not(.poa-quiz--lead-motion) .poa-quiz-flow.poa-quiz-flow--live:not(.poa-quiz-flow--step-bridge) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* --- Landing → quiz ("Let's Go") handoff --- */
.poa-quiz-pack .poa-quiz.poa-quiz--start-transition {
  position: relative;
  /* Must stay visible: overflow:hidden clips the flow’s translateY entry (sheet looks cut off). */
  overflow: visible;
}

.poa-quiz-pack .poa-quiz.poa-quiz--start-transition > .poa-landing,
.poa-quiz-pack .poa-quiz.poa-quiz--start-transition > .poa-quiz-flow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
}

/*
 * Slide handoff (crossfade-rise): transform is driven by JS (Web Animations API), not CSS transition — themes often
 * add short transitions on wrappers and clip overflow on .entry-content, which caused mid-flight snaps. During
 * entering, the flow is fixed to the viewport so it is not clipped by article/main overflow.
 */
.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition:not([data-poa-start-style='fade'])
  > .poa-quiz-flow:is(.poa-quiz-flow--entering, .poa-quiz-flow--entering-active) {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  /* Opacity is driven by JS (WAAPI) with transform — avoid opacity:1 here or the sheet flashes one frame centered before the slide. */
  will-change: transform, opacity;
  transition: none !important;
}

/* Hidden until entering-active + WAAPI first frame (slide + fade-in). */
.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition:not([data-poa-start-style='fade'])
  > .poa-quiz-flow.poa-quiz-flow--entering:not(.poa-quiz-flow--entering-active) {
  opacity: 0;
}

.poa-quiz-pack .poa-landing.poa-landing--exiting {
  opacity: 0;
  transition: opacity var(--poa-landing-start-duration, 0.88s) var(--poa-landing-start-ease-out, ease-out);
}

/* fade-only: whole flow column fades in (no slide). */
.poa-quiz-pack .poa-quiz.poa-quiz--start-transition[data-poa-start-style='fade'] > .poa-quiz-flow.poa-quiz-flow--entering {
  opacity: 0;
  transform: none;
  will-change: opacity;
  transition-property: opacity !important;
  transition-duration: var(--poa-landing-start-duration, 0.88s) !important;
  transition-delay: var(--poa-landing-start-sheet-delay, 0.14s) !important;
  transition-timing-function: var(--poa-sheet-enter-ease, ease-out) !important;
}

.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition[data-poa-start-style='fade']
  > .poa-quiz-flow.poa-quiz-flow--entering.poa-quiz-flow--entering-active {
  opacity: 1;
  transform: none;
  will-change: opacity;
}

/* Kill any theme / block animations on sheet content during the handoff — only .poa-quiz-flow may move. */
.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition
  .poa-quiz-flow:is(.poa-quiz-flow--entering, .poa-quiz-flow--entering-active)
  .poa-quiz-sheet,
.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition
  .poa-quiz-flow:is(.poa-quiz-flow--entering, .poa-quiz-flow--entering-active)
  .poa-quiz-sheet
  *,
.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition
  .poa-quiz-flow:is(.poa-quiz-flow--entering, .poa-quiz-flow--entering-active)
  .poa-quiz-sheet
  *::before,
.poa-quiz-pack
  .poa-quiz.poa-quiz--start-transition
  .poa-quiz-flow:is(.poa-quiz-flow--entering, .poa-quiz-flow--entering-active)
  .poa-quiz-sheet
  *::after {
  animation: none !important;
  transition: none !important;
}

/* --- Question → question (Next): same fixed viewport escape + no inner motion as landing handoff --- */
.poa-quiz-pack .poa-quiz.poa-quiz--step-transition {
  position: relative;
  overflow: visible;
}

.poa-quiz-pack .poa-quiz.poa-quiz--step-transition > .poa-quiz-flow.poa-quiz-flow--step-bridge {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  opacity: 1;
  will-change: transform;
  transition: none !important;
}

/* Result step only: last bridge frame must match steady-state (top of sheet), not a centered slice. */
.poa-quiz-pack
  .poa-quiz.poa-quiz--step-transition
  > .poa-quiz-flow.poa-quiz-flow--step-bridge:has([data-poa-quiz-panel][data-poa-sheet-mode='result']) {
  align-items: flex-start !important;
  /* Row flex: justify = horizontal; keep sheet centered while top-aligned (flex-start on both was left + top). */
  justify-content: center !important;
  padding-top: max(env(safe-area-inset-top, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  padding-right: max(env(safe-area-inset-right, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  padding-left: max(env(safe-area-inset-left, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.poa-quiz-pack
  .poa-quiz.poa-quiz--step-transition
  .poa-quiz-flow.poa-quiz-flow--step-bridge
  .poa-quiz-sheet,
.poa-quiz-pack
  .poa-quiz.poa-quiz--step-transition
  .poa-quiz-flow.poa-quiz-flow--step-bridge
  .poa-quiz-sheet
  *,
.poa-quiz-pack
  .poa-quiz.poa-quiz--step-transition
  .poa-quiz-flow.poa-quiz-flow--step-bridge
  .poa-quiz-sheet
  *::before,
.poa-quiz-pack
  .poa-quiz.poa-quiz--step-transition
  .poa-quiz-flow.poa-quiz-flow--step-bridge
  .poa-quiz-sheet
  *::after {
  animation: none !important;
  transition: none !important;
}

/* Results → lead email: same viewport-fixed column as question Next/Back (WAAPI on .poa-quiz-flow in quiz-wizard). */
.poa-quiz-pack .poa-quiz.poa-quiz--lead-motion {
  position: relative;
  overflow: visible;
}

.poa-quiz-pack .poa-quiz.poa-quiz--lead-motion > .poa-quiz-flow {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: max(env(safe-area-inset-top, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  padding-right: max(env(safe-area-inset-right, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  padding-left: max(env(safe-area-inset-left, 0px), clamp(0.75rem, 3vw, 2rem)) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  transition: none !important;
  will-change: transform, opacity;
}

.poa-quiz-pack .poa-quiz.poa-quiz--lead-motion .poa-quiz-sheet,
.poa-quiz-pack .poa-quiz.poa-quiz--lead-motion .poa-quiz-sheet *,
.poa-quiz-pack .poa-quiz.poa-quiz--lead-motion .poa-quiz-sheet *::before,
.poa-quiz-pack .poa-quiz.poa-quiz--lead-motion .poa-quiz-sheet *::after {
  animation: none !important;
  transition: none !important;
}

.poa-quiz-pack .poa-quiz-sheet {
  width: 100%;
  max-width: var(--poa-quiz-sheet-max);
  background: var(--poa-cream);
  border: 1px solid var(--poa-sheet-border);
  border-radius: clamp(18px, 4vw, 28px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  padding: clamp(16px, 2.8vw, 28px);
  box-sizing: border-box;
}

.poa-quiz-pack .poa-quiz-sheet__frame {
  position: relative;
  border: 1px solid var(--poa-sheet-frame-border);
  border-radius: clamp(12px, 3vw, 20px);
  overflow: hidden;
  min-height: 0;
}

.poa-quiz-pack .poa-sheet-section {
  padding: 0.95rem clamp(1rem, 3vw, 1.35rem);
  border-bottom: 1px solid var(--poa-sheet-rule);
}

.poa-quiz-pack .poa-sheet-section:last-child {
  border-bottom: none;
}

.poa-quiz-pack .poa-sheet-section--meta {
  padding-top: 1.1rem;
  padding-bottom: 1rem;
}

.poa-quiz-pack .poa-step-meta {
  margin: 0;
  text-align: center;
  font-family: var(--poa-font-mono-label);
  /* Mid uses px slope (16→23.68) so calc stays valid; ends stay rem for zoom/accessibility. */
  font-size: clamp(
    1rem,
    calc(16px + (100vw - var(--poa-viewport-min)) * 7.68 / var(--poa-vw-interp-den)),
    1.48rem
  );
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-step-meta:empty {
  display: none;
}

.poa-quiz-pack .poa-sheet-section--meta:has(.poa-step-meta:empty) {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.poa-quiz-pack .poa-sheet-section--headline {
  padding-top: 0.35rem;
  padding-bottom: 1.05rem;
}

.poa-quiz-pack .poa-headline {
  margin: 0;
  text-align: center;
  white-space: pre-line;
  font-family: var(--poa-font-headline);
  /* ~64px at 1366px viewport; scales down toward 360px. */
  font-size: clamp(
    28px,
    calc(28px + (100vw - var(--poa-viewport-min)) * 36 / var(--poa-vw-interp-den)),
    64px
  );
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-sub {
  margin: 0.55rem 0 0;
  text-align: center;
  font-family: var(--poa-font-mono-regular);
  font-size: clamp(
    0.7rem,
    calc(11.2px + (100vw - var(--poa-viewport-min)) * 2.88 / var(--poa-vw-interp-den)),
    0.88rem
  );
  font-weight: 400;
  line-height: 1.45;
  color: rgba(29, 61, 47, 0.72);
  white-space: pre-line;
}

.poa-quiz-pack .poa-sub:empty {
  display: none;
}

.poa-quiz-pack .poa-sheet-section--choices {
  padding: clamp(1.1rem, 3.2vw, 1.55rem) clamp(1.35rem, 4.5vw, 2.1rem);
}

.poa-quiz-pack .poa-choices {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.poa-quiz-pack .poa-choices:empty {
  display: none;
}

.poa-quiz-pack .poa-sheet-section--choices:has(.poa-choices:empty) {
  display: none;
}

.poa-quiz-pack .poa-option {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 0.95rem;
  margin: 0;
  padding: 0.95rem 0 0.8rem;
  border: none;
  background: transparent;
  color: var(--poa-forest);
  /* Bold OTF reads thicker on-screen than faux-600 on the Regular face. */
  font-family: var(--poa-font-mono-label);
  font-size: clamp(
    0.9rem,
    calc(14.4px + (100vw - var(--poa-viewport-min)) * 3.52 / var(--poa-vw-interp-den)),
    1.12rem
  );
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.poa-quiz-pack .poa-option:hover {
  background: rgba(29, 61, 47, 0.04);
}

.poa-quiz-pack .poa-option:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: -2px;
  z-index: 1;
}

.poa-quiz-pack .poa-option-indicator {
  position: relative;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  align-self: center;
  box-sizing: border-box;
  border: 1px solid rgba(29, 61, 47, 0.32);
  background: transparent;
}

.poa-quiz-pack .poa-option.is-selected .poa-option-indicator {
  border: 1px solid var(--poa-forest);
}

/* Selected mark: design SVG (Asset 2). */
.poa-quiz-pack .poa-option.is-selected .poa-option-indicator::after {
  content: '';
  position: absolute;
  inset: -4px;
  background-image: var(--poa-checkbox-x-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.poa-quiz-pack .poa-option-label {
  flex: 1;
  min-width: 0;
  font-family: var(--poa-font-mono-label);
  font-weight: 700;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--poa-sheet-rule);
}

.poa-quiz-pack .poa-option-with-spotify--no-audio {
  display: contents;
}

/*
 * Audio-preview row: checkbox sits outside the band; one rule only under song title + play control.
 */
.poa-quiz-pack .poa-option-with-spotify:not(.poa-option-with-spotify--no-audio) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.95rem;
  width: 100%;
}

.poa-quiz-pack .poa-option--spotify-check {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: 1.5rem;
  margin: 0;
  padding: 0.95rem 0 0;
  border: none;
  background: transparent;
  color: var(--poa-forest);
  cursor: pointer;
  transition: background 0.12s ease;
}

.poa-quiz-pack .poa-option--spotify-check .poa-option-indicator {
  margin-top: 0.28em;
  transition: background-color 0.12s ease;
}

/*
 * Hover on the whole button would paint the top padding (used to align with the title row),
 * producing a tall slab above the small square — keep the button clear and tint the indicator only.
 */
.poa-quiz-pack .poa-option.poa-option--spotify-check:hover {
  background: transparent;
}

.poa-quiz-pack .poa-option.poa-option--spotify-check:hover .poa-option-indicator {
  background-color: transparent;
}

.poa-quiz-pack .poa-option--spotify-check:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: 2px;
  z-index: 1;
}

.poa-quiz-pack .poa-option-with-spotify__band {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.95rem;
  border-bottom: 1px solid var(--poa-sheet-rule);
  /* Space after the rule lives outside padding so the line sits flush under title + play. */
  margin-bottom: 0.8rem;
}

.poa-quiz-pack .poa-option--spotify-label {
  flex: 1;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--poa-forest);
  font-family: var(--poa-font-mono-label);
  font-size: clamp(
    0.9rem,
    calc(14.4px + (100vw - var(--poa-viewport-min)) * 3.52 / var(--poa-vw-interp-den)),
    1.12rem
  );
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.poa-quiz-pack .poa-option--spotify-label:hover {
  background: rgba(29, 61, 47, 0.04);
}

.poa-quiz-pack .poa-option--spotify-label:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: -2px;
  z-index: 1;
}

.poa-quiz-pack .poa-option--spotify-label .poa-option-label {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
}

.poa-quiz-pack .poa-option-with-spotify:not(.poa-option-with-spotify--no-audio) .poa-option-spotify {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.15rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--poa-forest);
  border-radius: 999px;
  transition: background 0.12s ease;
}

.poa-quiz-pack .poa-option-spotify:hover {
  background: rgba(29, 61, 47, 0.06);
}

.poa-quiz-pack .poa-option-spotify:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: 2px;
  z-index: 1;
}

.poa-quiz-pack .poa-option-spotify:disabled {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
}

.poa-quiz-pack .poa-option-spotify__icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.poa-quiz-pack .poa-sheet-section--actions {
  padding: 1rem clamp(0.85rem, 2.5vw, 1.15rem) 1.15rem;
}

.poa-quiz-pack .poa-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 2vw, 1.1rem);
}

.poa-quiz-pack .poa-ribbon {
  appearance: none;
  position: relative;
  display: inline-grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--poa-forest);
  line-height: 1;
  width: clamp(
    var(--poa-ribbon-width-min),
    calc(
      var(--poa-ribbon-width-min) +
        (100vw - var(--poa-viewport-min)) * 56 / var(--poa-vw-interp-den)
    ),
    var(--poa-ribbon-width-max)
  );
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
  transition: filter 0.2s ease, opacity 0.15s ease, transform 0.2s ease;
}

.poa-quiz-pack .poa-ribbon--back {
  aspect-ratio: var(--poa-sheet-ribbon-aspect-back);
}

.poa-quiz-pack .poa-ribbon--next {
  aspect-ratio: var(--poa-sheet-ribbon-aspect-next);
}

.poa-quiz-pack .poa-ribbon__shape {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}

.poa-quiz-pack .poa-ribbon__shape > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Inlined ribbon: one SVG text node per label — native kerning (per-letter tspans skewed X, N). */
.poa-quiz-pack .poa-ribbon__shape svg text,
.poa-quiz-pack .poa-ribbon__shape svg tspan {
  font-family: var(--poa-font-headline) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

.poa-quiz-pack .poa-ribbon__shape svg text {
  text-rendering: optimizeLegibility;
}

/* Copy for screen readers only; nav art is in the SVG (Castaway). */
.poa-quiz-pack .poa-ribbon__label {
  grid-area: 1 / 1;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.poa-quiz-pack .poa-ribbon:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.poa-quiz-pack .poa-ribbon:not(:disabled):hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 5px 14px rgba(29, 61, 47, 0.2)) brightness(1.06);
}

.poa-quiz-pack .poa-ribbon:not(:disabled):active {
  transform: translateY(0) scale(0.97);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)) brightness(0.98);
  transition-duration: 0.08s;
}

.poa-quiz-pack .poa-ribbon:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: 3px;
  border-radius: 2px;
  z-index: 1;
}

/* --- Result step (Artboard-16 backdrop driven in JS) --- */
.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] {
  padding: clamp(20px, 3.2vw, 32px);
}

.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-quiz-sheet__frame {
  border-color: var(--poa-result-tab-border);
  overflow: visible;
}

.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-sheet-section {
  padding-left: clamp(1.35rem, 4.2vw, 2.15rem);
  padding-right: clamp(1.35rem, 4.2vw, 2.15rem);
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}

.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-sheet-section--headline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Overrides result .poa-sheet-section vertical padding for a tighter lockup */
  padding-top: 0.45rem;
  padding-bottom: 0.5rem;
  border-bottom: none;
}

.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-sheet-section--headline > .poa-result-arch,
.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-sheet-section--headline > .poa-result-topic-lockup {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
}

.poa-quiz-pack .poa-result-arch {
  width: 100%;
  max-width: min(92vw, 34rem);
  margin: 0 auto 0.02rem;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}

.poa-quiz-pack .poa-result-arch__mood-svg {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  line-height: 0;
}

/* Cap height so the arch stays near “The” scale; width follows viewBox aspect ratio */
.poa-quiz-pack .poa-result-arch__mood-svg > svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(2.2rem, 5.4vw, 3.35rem);
  margin: 0 auto;
}

.poa-quiz-pack .poa-result-arch__mood-svg svg text,
.poa-quiz-pack .poa-result-arch__mood-svg svg tspan {
  fill: #314536;
  font-family: var(--poa-font-castaway), var(--poa-font-headline), system-ui, sans-serif;
  /* Matches source art; overall size is capped via .poa-result-arch__mood-svg > svg max-height */
  font-size: 29.98px;
}

.poa-quiz-pack .poa-result-topic-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 2;
  margin: 0.12rem auto 0.1rem;
  max-width: min(96vw, 38rem);
  text-align: center;
}

.poa-quiz-pack .poa-result-topic-lockup[hidden] {
  display: none !important;
}

.poa-quiz-pack .poa-result-topic-lockup__the-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.poa-quiz-pack .poa-result-topic-lockup__the-wrap[hidden] {
  display: none !important;
}

.poa-quiz-pack .poa-result-topic-lockup__the-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.poa-quiz-pack .poa-result-topic-lockup__the-svg > svg {
  display: block;
  width: auto;
  max-width: min(55vw, 12.5rem);
  height: auto;
  max-height: clamp(2.65rem, 7.8vw, 4.1rem);
}

/* Filled "The" paths (embedded SVG styles stripped to avoid .cls-1 collisions across icons). */
.poa-quiz-pack .poa-result-topic-lockup__the-svg svg path {
  fill: #314536;
  stroke: none;
}

.poa-quiz-pack .poa-result-topic-lockup__spotify {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.poa-quiz-pack .poa-result-topic-lockup__spotify:hover,
.poa-quiz-pack .poa-result-topic-lockup__spotify:visited,
.poa-quiz-pack .poa-result-topic-lockup__spotify:active,
.poa-quiz-pack .poa-result-topic-lockup__spotify:focus {
  color: inherit;
  text-decoration: none;
}

.poa-quiz-pack .poa-result-topic-lockup__spotify:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: 3px;
}

.poa-quiz-pack .poa-result-topic-lockup__spotify:not([href]) {
  pointer-events: none;
  cursor: default;
}

.poa-quiz-pack .poa-result-topic-lockup__topic-area {
  display: block;
  width: 100%;
  max-width: min(92vw, 20rem);
  min-height: clamp(3.25rem, 12vw, 5.25rem);
  margin: 0.08rem auto 0;
  padding: 0 0.35rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* History/Dining wordmarks: painted on the area (avoids flex + <img> collapse). */
.poa-quiz-pack .poa-result-topic-lockup__topic-area--wordmark {
  width: min(92vw, 20rem);
  min-height: clamp(3.5rem, 12vw + 1.25rem, 9.125rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.poa-quiz-pack .poa-result-topic-lockup__topic-svg {
  display: block;
  width: 100%;
  max-width: min(92vw, 18.75rem);
  margin: 0 auto;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
}

.poa-quiz-pack .poa-result-topic-lockup__topic-svg[hidden] {
  display: none !important;
}

.poa-quiz-pack .poa-result-topic-lockup__topic-svg > svg {
  display: block;
  width: min(92vw, 18.75rem);
  height: auto;
  max-height: clamp(3rem, 14vw, 7.5rem);
  margin: 0 auto;
  overflow: visible;
  aspect-ratio: 173.89 / 72.08;
}

.poa-quiz-pack .poa-result-topic-lockup__topic-svg svg path {
  fill: #314536;
  stroke: none;
}

.poa-quiz-pack .poa-result-topic-lockup__topic-img {
  display: block;
  width: min(92vw, 20rem);
  height: auto;
  max-width: 100%;
  max-height: clamp(3.5rem, 12vw + 1.25rem, 9.125rem);
  margin: 0 auto;
  flex-shrink: 0;
}

.poa-quiz-pack .poa-result-topic-lockup__topic[hidden] {
  display: none !important;
}

.poa-quiz-pack .poa-result-topic-lockup__topic {
  margin: 0;
  padding: 0;
  font-family: var(--poa-font-script);
  /* Desktop cap 146px; scales down on narrow viewports */
  font-size: clamp(2.85rem, 12vw + 1.25rem, 146px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-headline--sr-only,
.poa-quiz-pack .poa-result-topic-lockup__topic--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.poa-quiz-pack .poa-result-blurb {
  margin: clamp(0.12rem, 0.6vw, 0.22rem) auto clamp(0.4rem, 1.2vw, 0.55rem);
  max-width: 32rem;
  text-align: center;
  font-family: var(--poa-font-mono-regular);
  font-size: clamp(1rem, 0.88rem + 0.42vw, 1.18rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--poa-forest);
  white-space: pre-line;
}

/* display:flex would override the HTML hidden attribute; keep hidden = not shown on question steps */
.poa-quiz-pack .poa-sheet-section--result-playlist[hidden] {
  display: none !important;
}

.poa-quiz-pack .poa-sheet-section--result-playlist:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 clamp(0.75rem, 2.8vw, 1.1rem);
  border-bottom: none;
}

.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-sheet-section--result-playlist {
  border-bottom: none;
}

.poa-quiz-pack .poa-quiz-sheet[data-poa-sheet-mode='result'] .poa-sheet-section--results-actions {
  border-top: none;
}

.poa-quiz-pack .poa-playlist-tab {
  display: block;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.45rem clamp(0.65rem, 2.2vw, 1rem) 0.4rem;
  text-align: center;
  font-family: var(--poa-font-headline);
  /* Desktop cap 38px; scales down on narrow viewports */
  font-size: clamp(1.15rem, 0.65rem + 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--poa-forest);
  background: none;
  border: 1px solid var(--poa-result-tab-border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}

/* Full-width rule (same inset as row dividers); extends past the narrower tab sides */
.poa-quiz-pack .poa-playlist::before {
  content: '';
  display: block;
  margin: 0 clamp(0.85rem, 4.5vw, 1.35rem);
  border-top: 1px solid var(--poa-result-rule);
}

.poa-quiz-pack .poa-playlist {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.poa-quiz-pack .poa-playlist__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.85rem clamp(0.5rem, 2vw, 0.75rem);
  border-top: none;
}

.poa-quiz-pack .poa-playlist__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(0.85rem, 4.5vw, 1.35rem);
  right: clamp(0.85rem, 4.5vw, 1.35rem);
  height: 0;
  border-top: 1px solid var(--poa-result-rule);
}

.poa-quiz-pack .poa-playlist__item:first-child::before {
  display: none;
}

.poa-quiz-pack .poa-playlist__item:last-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: clamp(0.85rem, 4.5vw, 1.35rem);
  right: clamp(0.85rem, 4.5vw, 1.35rem);
  height: 0;
  border-top: 1px solid var(--poa-result-rule);
}

.poa-quiz-pack .poa-playlist__icon {
  flex: 0 0 clamp(1.2rem, 1.05rem + 0.55vw, 1.42rem);
  width: clamp(1.2rem, 1.05rem + 0.55vw, 1.42rem);
  height: clamp(1.2rem, 1.05rem + 0.55vw, 1.42rem);
  border-radius: 50%;
  border: 1px solid rgba(29, 61, 47, 0.42);
  background: rgba(29, 61, 47, 0.05);
  box-sizing: border-box;
  overflow: hidden;
}

.poa-quiz-pack .poa-playlist__icon:has(.poa-playlist__icon-svg) {
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.poa-quiz-pack .poa-playlist__icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.poa-quiz-pack .poa-playlist__icon-svg > svg {
  display: block;
  width: 88%;
  height: 88%;
  max-width: 100%;
  max-height: 100%;
}

/*
 * Playlist icons: asset-6..9 use stroke-only paths (embedded <style> stripped in JS).
 * Imported filled icons add class poa-playlist-icon--fill on the root <svg>.
 */
.poa-quiz-pack .poa-playlist__icon-svg > svg:not(.poa-playlist-icon--fill) path,
.poa-quiz-pack .poa-playlist__icon-svg > svg:not(.poa-playlist-icon--fill) circle {
  fill: none;
  stroke: var(--poa-forest);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill path,
.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill circle,
.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill polygon,
.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill polyline,
.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill rect,
.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill line,
.poa-quiz-pack .poa-playlist__icon-svg > svg.poa-playlist-icon--fill ellipse {
  fill: var(--poa-forest);
  stroke: none;
}

.poa-quiz-pack .poa-playlist__label {
  font-family: var(--poa-font-mono-regular);
  font-size: clamp(1.02rem, 0.92rem + 0.45vw, 1.22rem);
  font-weight: 700;
  color: var(--poa-forest);
  text-decoration: underline;
  text-decoration-color: var(--poa-result-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.poa-quiz-pack .poa-playlist__link,
.poa-quiz-pack .poa-playlist__link:visited {
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-playlist__link:hover {
  color: var(--poa-forest);
  text-decoration-color: var(--poa-forest);
}

.poa-quiz-pack .poa-sheet-section--results-actions {
  padding: 1.15rem clamp(1rem, 3vw, 1.5rem) 1.35rem;
  border-bottom: none;
}

.poa-quiz-pack .poa-results-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.poa-quiz-pack .poa-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 22rem;
  margin: 0;
  padding: 0.58rem 0.95rem;
  min-height: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--poa-font-mono-label);
  font-size: clamp(0.88rem, 0.78rem + 0.38vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.poa-quiz-pack .poa-btn-pill--primary .poa-btn-pill__label {
  white-space: nowrap;
}

/* Result CTA: narrow phones — smaller caps + allow wrap so label never spills past the pill. */
@media (max-width: 520px) {
  .poa-quiz-pack .poa-btn-pill--primary[data-poa-wizard='itinerary'] {
    font-size: clamp(0.65rem, 2.1vw + 0.52rem, 0.8rem);
    padding: 0.48rem 0.65rem;
    letter-spacing: 0.025em;
    line-height: 1.25;
  }

  .poa-quiz-pack .poa-btn-pill--primary[data-poa-wizard='itinerary'] .poa-btn-pill__label {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

.poa-quiz-pack .poa-btn-pill--primary {
  max-width: min(28rem, 100%);
  background: var(--poa-landing-cta);
  color: #fdfcfa;
  box-shadow: 0 4px 14px rgba(45, 71, 57, 0.28);
}

.poa-quiz-pack .poa-btn-pill--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Itinerary plane: stroke-only asset — white on primary pill (embedded SVG styles stripped). */
.poa-quiz-pack .poa-btn-pill--primary .poa-btn-pill__icon-svg svg path {
  fill: none !important;
  stroke: #fdfcfa !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.poa-quiz-pack .poa-btn-pill__icon-svg {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 0;
}

.poa-quiz-pack .poa-btn-pill__icon-svg > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.poa-quiz-pack .poa-btn-retake {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--poa-font-mono-label);
  font-size: clamp(0.88rem, 0.8rem + 0.3vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--poa-result-retake);
}

.poa-quiz-pack .poa-btn-retake:hover {
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-btn-retake__icon-svg {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  line-height: 0;
}

.poa-quiz-pack .poa-btn-retake__icon-svg > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.poa-quiz-pack .poa-btn-retake__icon-svg svg path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

/*
 * Keep the result body in the layout flow (invisible) so the sheet height does not collapse while
 * the lead panel slides in from below, centered over the same frame.
 */
.poa-quiz-pack .poa-quiz-sheet[data-poa-lead-open='1'] [data-poa-quiz-body] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* A bit more room around the card when the lead form is open (stacks with result padding) */
.poa-quiz-pack .poa-quiz-sheet[data-poa-lead-open='1'] {
  padding: clamp(22px, 3.4vw, 36px);
}

/*
 * Lead panel sits inside .poa-quiz-sheet__frame, which also has a border in quiz/result modes.
 * That frame stroke was still visible after toggling the panel border in devtools — one ring only here.
 */
.poa-quiz-pack .poa-quiz-sheet[data-poa-lead-open='1'] .poa-quiz-sheet__frame {
  border: none;
}

.poa-quiz-pack .poa-lead-form-panel[hidden] {
  display: none !important;
}

.poa-quiz-pack .poa-lead-form-panel {
  box-sizing: border-box;
  text-transform: uppercase;
}

/* Visual card + padding on __slide; sheet ↔ lead motion is WAAPI on .poa-quiz-flow (see .poa-quiz--lead-motion). */
.poa-quiz-pack .poa-lead-form-panel__slide {
  box-sizing: border-box;
  width: 100%;
  border-radius: clamp(12px, 3vw, 18px);
  background: var(--poa-cream);
  border: 1px solid var(--poa-sheet-rule);
  padding: 32px clamp(1.55rem, 3.8vw, 2.35rem) 32px;
}

/*
 * Ram the lead capture panel far off-screen whenever it is not the active overlay.
 * (Some engines still paint [hidden] subtrees or flash layout before open — this guarantees no viewport bleed.)
 */
.poa-quiz-pack .poa-quiz-sheet:not([data-poa-lead-open='1']) .poa-lead-form-panel {
  position: fixed !important;
  top: -32000px !important;
  left: -32000px !important;
  right: auto !important;
  bottom: auto !important;
  width: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
}

/* Outer: clip rect + flex center; inner __slide moves (transform on full-height flex was snapping). */
.poa-quiz-pack .poa-quiz-sheet[data-poa-lead-open='1'] .poa-lead-form-panel {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  clip: auto !important;
  clip-path: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Inner card fills the panel; scroll only if content exceeds viewport (original behavior). */
.poa-quiz-pack .poa-quiz-sheet[data-poa-lead-open='1'] .poa-lead-form-panel .poa-lead-form-panel__slide {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lead slide in/out is driven by JS (Web Animations API) — CSS transitions were not reliably running. */

.poa-quiz-pack .poa-lead-form__title {
  margin: 0 0 clamp(0.4rem, 1.1vw, 0.65rem);
  text-align: center;
  font-family: var(--poa-font-signpainter);
  font-size: clamp(1.45rem, 1rem + 1.85vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-lead-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.35rem, 3.2vw, 2rem);
  padding: clamp(0.35rem, 1.1vw, 0.55rem) clamp(0.2rem, 1.2vw, 0.65rem) 0;
}

.poa-quiz-pack .poa-lead-form__status {
  margin: 0;
  font-family: 'LMMonoPropLt10-Regular', var(--poa-font-mono-regular);
  font-size: clamp(0.78rem, 0.7rem + 0.35vw, 0.95rem);
  line-height: 1.35;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-lead-form__status--error {
  color: #b00020;
}

/* Admin-only: compact HTML visitor mail checklist (poa-app.js); appended to body, corner card, does not block Let's Go. */
.poa-visitor-mail-preview-dock {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  z-index: 100000;
  box-sizing: border-box;
  width: min(19.5rem, calc(100vw - 1.5rem));
  max-height: min(52vh, 22rem);
  overflow: auto;
  padding: 0.65rem 0.75rem 0.7rem;
  border-radius: 12px;
  background: rgba(247, 242, 234, 0.97);
  border: 1px solid #d9d4ca;
  box-shadow: 0 6px 28px rgba(29, 61, 47, 0.2);
  color: #1d3d2f;
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.poa-visitor-mail-preview-dock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0 1.75rem 0.35rem 0;
  position: relative;
}

.poa-visitor-mail-preview-dock__title {
  font-size: clamp(0.82rem, 0.76rem + 0.35vw, 0.95rem);
  font-weight: 700;
}

.poa-visitor-mail-preview-dock__subtitle {
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  font-weight: 600;
  color: #7a756c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.poa-visitor-mail-preview-dock__close {
  position: absolute;
  top: -0.15rem;
  right: -0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #7a756c;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.poa-visitor-mail-preview-dock__close:hover {
  color: #1d3d2f;
  background: rgba(29, 61, 47, 0.06);
}

.poa-visitor-mail-preview-dock__note {
  margin: 0 0 0.45rem;
  font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.76rem);
  line-height: 1.35;
  color: #7a756c;
}

.poa-visitor-mail-preview-dock__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.poa-visitor-mail-preview-dock__row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
  line-height: 1.35;
}

.poa-visitor-mail-preview-dock__row:last-child {
  margin-bottom: 0;
}

.poa-visitor-mail-preview-dock__mark {
  flex: 0 0 1rem;
  width: 1rem;
  text-align: center;
  font-weight: 700;
  color: #9a958c;
}

.poa-visitor-mail-preview-dock__mark[data-ok='0'] {
  color: #b00020;
}

.poa-visitor-mail-preview-dock__mark[data-ok='1'] {
  color: #1d7a4a;
}

.poa-visitor-mail-preview-dock__label {
  flex: 1 1 auto;
}

.poa-visitor-mail-preview-dock__all {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: rgba(29, 122, 74, 0.1);
  border: 1px solid rgba(29, 122, 74, 0.28);
  font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.76rem);
  font-weight: 600;
  line-height: 1.3;
  color: #145a38;
}

.poa-quiz-pack .poa-lead-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Screen-reader only; text fields use placeholders only */
.poa-quiz-pack .poa-lead-label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.poa-quiz-pack .poa-lead-legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-family: 'LMMonoPropLt10-Regular', var(--poa-font-mono-regular);
  font-size: clamp(0.82rem, 0.72rem + 0.45vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-lead-legend--long {
  font-size: clamp(0.78rem, 0.68rem + 0.42vw, 0.95rem);
  line-height: 1.35;
  font-weight: 700;
}

.poa-quiz-pack .poa-lead-req {
  font-weight: 800;
}

.poa-quiz-pack .poa-lead-legend .poa-lead-req {
  white-space: nowrap;
}

.poa-quiz-pack .poa-lead-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.28rem 0 0.22rem;
  border: none;
  border-bottom: 1px solid var(--poa-sheet-rule);
  border-radius: 0;
  background: transparent;
  /* LM Mono Prop bold (700) — matches legends/radios; Regular has no 700 master */
  font-family: var(--poa-font-mono-label);
  font-size: clamp(0.92rem, 0.82rem + 0.4vw, 1.12rem);
  font-weight: 700;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-lead-input::placeholder {
  font-family: var(--poa-font-mono-label);
  font-weight: 700;
  color: var(--poa-forest);
  opacity: 1;
}

.poa-quiz-pack .poa-lead-input:focus {
  outline: none;
  border-bottom-color: var(--poa-forest);
  border-bottom-width: 2px;
}

.poa-quiz-pack .poa-lead-fieldset {
  margin: 0;
  padding: 0.15rem 0 0;
  border: none;
}

.poa-quiz-pack .poa-lead-fieldset:has(.poa-lead-help) .poa-lead-legend {
  margin-bottom: 0;
}

.poa-quiz-pack .poa-lead-help {
  margin: 0.08rem 0 0.45rem;
  font-family: var(--poa-font-mono-label);
  font-size: clamp(0.7rem, 0.62rem + 0.22vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--poa-forest);
}

.poa-quiz-pack .poa-lead-radios {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.85rem, 2.5vw, 1.35rem);
}

.poa-quiz-pack .poa-lead-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'LMMonoPropLt10-Regular', var(--poa-font-mono-regular);
  font-size: clamp(0.88rem, 0.78rem + 0.35vw, 1.05rem);
  font-weight: 700;
  color: var(--poa-forest);
  cursor: pointer;
}

.poa-quiz-pack .poa-lead-radio input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.12rem;
  height: 1.12rem;
  margin: 0;
  border: 2px solid var(--poa-forest);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.poa-quiz-pack .poa-lead-radio input[type='radio']:checked {
  background: transparent;
  box-shadow: inset 0 0 0 5px var(--poa-forest);
}

.poa-quiz-pack .poa-lead-radio input[type='radio']:focus-visible {
  outline: 2px solid var(--poa-forest);
  outline-offset: 3px;
}

.poa-quiz-pack .poa-lead-submit {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.52rem 1.35rem;
  border: none;
  border-radius: 4px;
  background: var(--poa-landing-cta);
  color: #fdfcfa;
  cursor: pointer;
  font-family: var(--poa-font-mono-label);
  font-size: clamp(1.06rem, 0.95rem + 0.38vw, 1.24rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.poa-quiz-pack .poa-lead-submit:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .poa-quiz-pack .poa-ribbon {
    transition: opacity 0.12s ease;
  }

  .poa-quiz-pack .poa-ribbon:not(:disabled):hover,
  .poa-quiz-pack .poa-ribbon:not(:disabled):active {
    transform: none;
  }

  .poa-quiz-pack .poa-landing-title img.poa-landing-logo,
  .poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] #poa-landing-g56,
  .poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] .poa-title-wobble--top,
  .poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] .poa-title-wobble--bottom,
  .poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] #poa-landing-g45,
  .poa-quiz-pack .poa-landing-title svg[data-poa-landing-logo] #poa-landing-g45 .poa-playlist-breathe-layer,
  .poa-quiz-pack .poa-landing-tagline,
  .poa-quiz-pack .poa-btn-lets-go,
  .poa-quiz-pack .poa-landing-partner-logo-link {
    animation: none;
    opacity: 1;
  }

  .poa-quiz-pack .poa-landing.poa-landing--exiting,
  .poa-quiz-pack .poa-quiz.poa-quiz--start-transition > .poa-quiz-flow.poa-quiz-flow--entering,
  .poa-quiz-pack .poa-quiz.poa-quiz--start-transition > .poa-quiz-flow.poa-quiz-flow--entering.poa-quiz-flow--entering-active {
    transition-duration: 0.001ms !important;
  }

  .poa-quiz-pack .poa-quiz-sheet[data-poa-lead-open='1'] .poa-lead-form-panel .poa-lead-form-panel__slide {
    transform: none !important;
  }
}