@layer funnel {
  :root {
    --funnel-panel-max: 31.5rem;
    --funnel-gutter: clamp(1rem, 4vw, 2rem);
  }

  html {
    scroll-behavior: smooth;
  }

  body.funnel-page {
    min-block-size: 100svh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 84% 12%, rgb(98 93 245 / 23%), transparent 32rem),
      radial-gradient(circle at 8% 92%, rgb(100 147 254 / 11%), transparent 32rem),
      var(--of-color-page);
    color: var(--of-color-text);
    font-family: var(--of-font-sans);
  }

  .funnel-page [hidden] {
    display: none !important;
  }

  .funnel-skip-link,
  .funnel-skip {
    position: fixed;
    z-index: 100;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    border-radius: var(--of-radius-pill);
    padding: 0.75rem 1rem;
    background: var(--of-paper);
    color: var(--of-color-text-on-bright);
    font-weight: 800;
    opacity: 0;
    transform: translateY(-150%);
  }

  .funnel-skip-link:focus,
  .funnel-skip:focus {
    opacity: 1;
    transform: translateY(0);
  }

  .funnel-header {
    position: relative;
    z-index: 30;
    border-block-end: 1px solid var(--of-color-border-subtle);
    background: rgb(15 12 19 / 84%);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
  }

  .funnel-header__inner {
    display: grid;
    min-block-size: 4.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    inline-size: min(100%, 84rem);
    margin-inline: auto;
    padding:
      max(0.75rem, env(safe-area-inset-top))
      var(--funnel-gutter)
      0.75rem;
  }

  .funnel-brand {
    display: inline-flex;
    justify-self: start;
    inline-size: clamp(7.25rem, 20vw, 10.5rem);
  }

  .funnel-brand img {
    inline-size: 100%;
    block-size: auto;
  }

  #quizBack,
  .funnel-back {
    display: inline-grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    border: 1px solid var(--of-color-border-subtle);
    border-radius: 50%;
    padding: 0;
    background: rgb(255 255 255 / 5%);
    color: var(--of-color-text);
    cursor: pointer;
  }

  #quizBack svg,
  .funnel-back svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .funnel-header .of-language-switcher {
    justify-self: end;
  }

  .funnel-header__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
  }

  .funnel-tracking-settings {
    display: inline-grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    place-items: center;
    border: 1px solid var(--of-color-border-subtle);
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: var(--of-color-text-muted);
    cursor: pointer;
  }

  .funnel-tracking-settings svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
  }

  .funnel-tracking-settings:focus-visible {
    outline: 2px solid var(--of-color-focus);
    outline-offset: 2px;
  }

  .funnel-account-notice {
    position: sticky;
    inset-block-start: 4.75rem;
    z-index: 29;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.75rem var(--funnel-gutter);
    border-block-end: 1px solid var(--of-color-border-subtle);
    background: rgb(var(--quiz-mint-rgb) / 10%);
    color: var(--of-color-text);
    text-align: center;
  }

  .funnel-account-notice__text {
    margin: 0;
    line-height: 1.45;
  }

  .funnel-account-notice__text strong {
    margin-inline-end: 0.35rem;
    overflow-wrap: anywhere;
  }

  .funnel-account-notice__switch {
    border: 0;
    padding: 0.25rem 0;
    background: transparent;
    color: var(--of-mint-400);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

  .funnel-account-notice__switch:disabled {
    opacity: 0.5;
    cursor: wait;
  }

  .funnel-account-notice__switch:focus-visible {
    outline: 2px solid var(--of-mint-400);
    outline-offset: 0.25rem;
  }

  .funnel-main,
  #main-content {
    min-block-size: calc(100svh - 4.75rem);
  }

  #quizApp {
    min-block-size: calc(100svh - 4.75rem);
  }

  .funnel-shell {
    min-block-size: calc(100svh - 4.75rem);
    inline-size: min(100%, 84rem);
    margin-inline: auto;
  }

  .funnel-shell__topbar {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 2.4vh, 1.5rem) var(--funnel-gutter) 0;
  }

  #quizBack[hidden] + #quizProgress {
    grid-column: 1 / -1;
  }

  .funnel-shell__grid {
    display: grid;
    min-block-size: calc(100svh - 8rem);
    grid-template-columns: minmax(0, 35rem) minmax(24rem, 1fr);
  }

  .funnel-panel {
    position: relative;
    z-index: 2;
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    padding: clamp(1.25rem, 4vh, 2.5rem) var(--funnel-gutter) max(1.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgb(15 12 19 / 98%), rgb(15 12 19 / 91%));
  }

  .funnel-panel__inner,
  .funnel-quiz,
  .funnel-form {
    inline-size: min(100%, var(--funnel-panel-max));
    margin-inline: auto;
  }

  .funnel-local-note {
    inline-size: min(100%, var(--funnel-panel-max));
    margin: 1rem auto 0;
    color: var(--of-color-text-subtle);
    font-family: var(--of-font-tech);
    font-size: 0.69rem;
    letter-spacing: 0.02em;
    line-height: 1.45;
    text-align: center;
  }

  .funnel-art,
  .funnel-artwork {
    position: sticky;
    inset-block-start: 4.75rem;
    display: grid;
    block-size: calc(100svh - 4.75rem);
    min-block-size: 34rem;
    place-items: center;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 4rem);
    background:
      radial-gradient(circle at center, rgb(100 147 254 / 32%), transparent 38%),
      linear-gradient(145deg, #161128 0%, #241952 52%, #0f0c13 100%);
  }

  .funnel-art::before,
  .funnel-artwork::before {
    position: absolute;
    inline-size: min(72%, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--of-gradient-brand);
    content: "";
    filter: saturate(1.1);
    opacity: 0.75;
  }

  .funnel-art::after,
  .funnel-artwork::after {
    position: absolute;
    inline-size: 74%;
    block-size: 5rem;
    border-radius: 50%;
    background: rgb(7 5 9 / 50%);
    content: "";
    filter: blur(2rem);
    inset-block-end: 6%;
  }

  .funnel-artwork__halo {
    position: absolute;
    inline-size: min(72%, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--of-gradient-brand);
    opacity: 0.78;
  }

  .funnel-art__media,
  .funnel-artwork__frame {
    position: relative;
    position: relative;
    z-index: 1;
    inline-size: min(100%, 34rem);
    max-block-size: calc(100svh - 8.5rem);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: clamp(1.5rem, 3vw, 3rem);
    background: #110d17;
    box-shadow: 0 2.4rem 6rem rgb(7 5 9 / 52%), var(--of-highlight-inset);
  }

  .funnel-artwork picture,
  .funnel-artwork #quizArtworkImage,
  .funnel-art__media picture,
  .funnel-art__media img {
    inline-size: 100%;
    block-size: 100%;
  }

  #quizArtworkImage,
  .funnel-art__media img {
    max-block-size: calc(100svh - 8.5rem);
    object-fit: cover;
    object-position: center;
  }

  .funnel-artwork__caption {
    position: absolute;
    z-index: 2;
    inset-block-end: clamp(1.75rem, 5vh, 3.5rem);
    inset-inline-start: clamp(1.5rem, 4vw, 4rem);
    display: grid;
    gap: 0.2rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--of-radius-pill);
    padding: 0.75rem 1rem;
    background: rgb(15 12 19 / 72%);
    box-shadow: var(--of-shadow-panel);
    -webkit-backdrop-filter: blur(0.8rem);
    backdrop-filter: blur(0.8rem);
  }

  .funnel-artwork__caption span {
    color: var(--of-color-focus);
    font-family: var(--of-font-tech);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .funnel-artwork__caption strong {
    font-size: 0.85rem;
  }

  #quizProgress,
  .funnel-progress {
    display: grid;
    gap: 0.55rem;
    margin-block-end: clamp(1.75rem, 5vh, 3rem);
  }

  .funnel-shell__topbar #quizProgress {
    margin-block-end: 0;
  }

  .funnel-progress__meta,
  #quizProgressText {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    color: var(--of-color-text-muted);
    font-family: var(--of-font-tech);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .funnel-progress__track,
  #quizProgressTrack {
    block-size: 0.42rem;
    overflow: hidden;
    border-radius: var(--of-radius-pill);
    background: rgb(255 255 255 / 10%);
  }

  #quizForm {
    display: flex;
    min-block-size: 0;
    flex: 1;
    flex-direction: column;
  }

  #quizContent {
    animation: funnel-enter 300ms var(--of-ease-out) both;
  }

  .quiz-question,
  .quiz-step,
  .quiz-info,
  .quiz-processing,
  .quiz-result {
    display: grid;
    gap: 1.35rem;
  }

  .quiz-question__header,
  .quiz-step__header,
  .quiz-header {
    display: grid;
    gap: 0.65rem;
  }

  .quiz-kicker,
  .quiz-step__eyebrow,
  .quiz-eyebrow {
    color: var(--of-color-focus);
    font-family: var(--of-font-tech);
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .quiz-title,
  .quiz-step__title,
  .quiz-question__title {
    max-inline-size: 18ch;
    font-family: var(--of-font-display);
    font-size: clamp(2rem, 7vw, 3.25rem);
    font-stretch: condensed;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.96;
    text-wrap: balance;
    text-transform: uppercase;
  }

  .quiz-question__title:focus,
  #quiz-result-title:focus,
  #quiz-processing-title:focus {
    outline: 0;
    box-shadow: none;
  }

  .quiz-body,
  .quiz-step__body,
  .quiz-question__body {
    max-inline-size: 39rem;
    color: var(--of-color-text-muted);
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 600;
    line-height: 1.45;
  }

  .quiz-options {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 0.25rem;
  }

  .quiz-options--grid,
  .quiz-options[data-layout="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quiz-option {
    position: relative;
    display: grid;
    min-block-size: 4.25rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--of-radius-lg);
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgb(67 61 75 / 88%), rgb(52 46 60 / 88%));
    box-shadow: var(--of-highlight-inset);
    cursor: pointer;
    transition:
      border-color 150ms ease,
      background 180ms ease,
      transform 150ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .quiz-option:hover {
      transform: translateY(-1px);
    }
  }

  .quiz-option:has(.quiz-option__input:checked),
  .quiz-option.is-selected,
  .quiz-option[data-state="checked"] {
    border-color: var(--of-color-focus);
    background: linear-gradient(135deg, rgb(78 102 117 / 96%), rgb(60 58 127 / 96%));
  }

  .quiz-option:has(.quiz-option__input:focus-visible) {
    outline: 3px solid var(--of-color-focus);
    outline-offset: 3px;
  }

  .quiz-option__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .quiz-option__marker,
  .quiz-option__icon {
    display: grid;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    place-items: center;
    border-radius: 0.85rem;
    background: rgb(15 12 19 / 55%);
    color: var(--of-color-focus);
    font-size: 1.25rem;
    font-weight: 900;
  }

  .quiz-option__marker {
    grid-column: 3;
    grid-row: 1;
    inline-size: 1.55rem;
    block-size: 1.55rem;
    border: 2px solid var(--of-color-border);
    border-radius: 50%;
    background: rgb(15 12 19 / 35%);
  }

  .quiz-option__marker::after {
    inline-size: 0.55rem;
    block-size: 0.3rem;
    border-block-end: 0.16rem solid currentColor;
    border-inline-start: 0.16rem solid currentColor;
    color: var(--of-color-text-on-bright);
    content: "";
    opacity: 0;
    transform: rotate(-45deg) translateY(-0.05rem);
  }

  .quiz-option:has(.quiz-option__input:checked) .quiz-option__marker {
    border-color: var(--of-color-focus);
    background: var(--of-color-focus);
  }

  .quiz-option:has(.quiz-option__input:checked) .quiz-option__marker::after {
    opacity: 1;
  }

  .quiz-option__icon,
  .quiz-option__image {
    grid-column: 1;
    grid-row: 1;
  }

  .quiz-option__image {
    inline-size: 2.65rem;
    block-size: 2.65rem;
    border-radius: 0.85rem;
    object-fit: cover;
  }

  .quiz-option__content,
  .quiz-option__copy {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 0;
  }

  .quiz-option__title,
  .quiz-option__label {
    display: block;
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.2;
  }

  .quiz-option__description {
    display: block;
    margin-block-start: 0.25rem;
    color: var(--of-color-text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .quiz-option--visual {
    min-block-size: 7.25rem;
    align-content: end;
    background:
      linear-gradient(180deg, rgb(98 93 245 / 12%), rgb(52 46 60 / 94%)),
      var(--of-color-surface);
  }

  .quiz-option--exclusive {
    border-style: dashed;
    background: rgb(255 255 255 / 4%);
  }

  .quiz-fields,
  .quiz-field {
    display: grid;
    gap: 0.65rem;
  }

  .quiz-fields {
    gap: 1rem;
  }

  .quiz-label,
  .quiz-field__label {
    color: var(--of-color-text-muted);
    font-size: 0.85rem;
    font-weight: 800;
  }

  .quiz-input,
  .quiz-field__input,
  .quiz-field input,
  .quiz-field select {
    inline-size: 100%;
    min-block-size: 4rem;
    border: 2px solid var(--of-color-border);
    border-radius: var(--of-radius-md);
    padding-inline: 1rem;
    appearance: none;
    background: rgb(34 30 42 / 90%);
    color: var(--of-color-text);
    font-size: 1.05rem;
    font-weight: 750;
    outline: none;
  }

  .quiz-input:focus,
  .quiz-field__input:focus,
  .quiz-field input:focus,
  .quiz-field select:focus {
    border-color: var(--of-color-focus);
    box-shadow: var(--of-shadow-focus);
  }

  .quiz-unit-toggle,
  .quiz-unit-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    border: 1px solid var(--of-color-border-subtle);
    border-radius: var(--of-radius-pill);
    padding: 0.25rem;
    background: rgb(255 255 255 / 4%);
  }

  .quiz-unit {
    position: relative;
    min-block-size: 2.8rem;
    border: 0;
    border-radius: var(--of-radius-pill);
    background: transparent;
    color: var(--of-color-text-muted);
    cursor: pointer;
    font-weight: 850;
  }

  .quiz-unit.is-active,
  .quiz-unit[aria-pressed="true"] {
    background: var(--of-paper);
    color: var(--of-color-text-on-bright);
  }

  .quiz-range {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--of-color-border-subtle);
    border-radius: var(--of-radius-xl);
    padding: clamp(1.25rem, 5vw, 2rem);
    background: rgb(52 46 60 / 72%);
  }

  .quiz-range__value,
  .quiz-range-value {
    color: var(--of-color-focus);
    font-family: var(--of-font-display);
    font-size: clamp(2.5rem, 9vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-align: center;
  }

  .quiz-range input[type="range"] {
    inline-size: 100%;
    accent-color: var(--of-color-focus);
  }

  .quiz-range__input {
    block-size: 0.55rem;
    border-radius: var(--of-radius-pill);
    appearance: none;
    background:
      linear-gradient(
        to right,
        var(--of-color-focus) 0 var(--quiz-range-progress, 50%),
        rgb(255 255 255 / 14%) var(--quiz-range-progress, 50%) 100%
      );
  }

  .quiz-range__input::-webkit-slider-thumb {
    inline-size: 1.55rem;
    block-size: 1.55rem;
    border: 0.3rem solid var(--of-color-page);
    border-radius: 50%;
    appearance: none;
    background: var(--of-color-focus);
    box-shadow: 0 0 0 0.2rem rgb(var(--quiz-mint-rgb) / 30%);
  }

  .quiz-range__input::-moz-range-thumb {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border: 0.3rem solid var(--of-color-page);
    border-radius: 50%;
    background: var(--of-color-focus);
    box-shadow: 0 0 0 0.2rem rgb(var(--quiz-mint-rgb) / 30%);
  }

  .quiz-range__labels,
  .quiz-range__extremes {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--of-color-text-muted);
    font-size: 0.78rem;
  }

  .quiz-consent,
  .quiz-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    color: var(--of-color-text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .quiz-consent input,
  .quiz-check input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.1rem;
    accent-color: var(--of-color-focus);
  }

  .quiz-field__control {
    position: relative;
  }

  .quiz-field__suffix {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1rem;
    color: var(--of-color-text-muted);
    font-size: 0.85rem;
    font-weight: 800;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .quiz-field__control:has(.quiz-field__suffix) .quiz-field__input {
    padding-inline-end: 3.5rem;
  }

  .quiz-info,
  .quiz-question--info,
  .quiz-result {
    border: 1px solid var(--of-color-border-subtle);
    border-radius: var(--of-radius-2xl);
    padding: clamp(1.35rem, 5vw, 2.25rem);
    background:
      radial-gradient(circle at 100% 0%, rgb(98 93 245 / 30%), transparent 15rem),
      rgb(52 46 60 / 76%);
    box-shadow: var(--of-highlight-inset);
  }

  .quiz-info__badge,
  .quiz-result__badge {
    display: inline-flex;
    justify-self: start;
    border-radius: var(--of-radius-pill);
    padding: 0.45rem 0.75rem;
    background: rgb(var(--quiz-mint-rgb) / 13%);
    color: var(--of-color-focus);
    font-family: var(--of-font-tech);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .quiz-info__visual {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--of-radius-lg);
    background: var(--of-gradient-brand);
  }

  .quiz-info__visual img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .quiz-info__bullets,
  .quiz-bullets {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .quiz-info__bullets li,
  .quiz-bullets li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    color: var(--of-color-text-muted);
    line-height: 1.4;
  }

  .quiz-info__bullets li::before,
  .quiz-bullets li::before {
    display: grid;
    inline-size: 1.55rem;
    block-size: 1.55rem;
    place-items: center;
    border-radius: 50%;
    background: var(--of-color-focus);
    color: var(--of-color-text-on-bright);
    content: "✓";
    font-size: 0.76rem;
    font-weight: 950;
  }

  #quizError,
  .quiz-error,
  .funnel-error {
    min-block-size: 1.35rem;
    margin-block-start: 0.8rem;
    color: var(--of-color-error);
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.3;
  }

  #quizActions,
  .quiz-actions,
  .funnel-actions {
    display: grid;
    gap: 0.75rem;
    margin-block-start: auto;
    padding-block-start: clamp(1.5rem, 5vh, 3rem);
  }

  #quizContinue,
  .quiz-primary,
  .quiz-restart {
    display: inline-flex;
    min-block-size: 4.15rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    inline-size: 100%;
    border: 0;
    border-radius: var(--of-radius-pill);
    padding-inline: 1.5rem;
    background: var(--of-gradient-cta);
    box-shadow: var(--of-shadow-action), var(--of-highlight-inset);
    color: var(--of-color-text-on-bright);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.015em;
    text-transform: uppercase;
  }

  #quizContinue:disabled {
    cursor: not-allowed;
    filter: grayscale(0.4);
    opacity: 0.48;
  }

  .quiz-skip,
  [data-quiz-skip] {
    min-block-size: 2.75rem;
    border: 0;
    padding: 0.5rem;
    background: transparent;
    color: var(--of-color-text-muted);
    cursor: pointer;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.22rem;
  }

  .quiz-processing {
    align-content: center;
    min-block-size: min(34rem, 68svh);
    text-align: center;
  }

  .quiz-processing__spinner,
  .quiz-spinner {
    inline-size: 6rem;
    aspect-ratio: 1;
    justify-self: center;
    border: 0.5rem solid rgb(255 255 255 / 9%);
    border-block-start-color: var(--of-color-focus);
    border-inline-end-color: rgb(var(--quiz-mint-rgb) / 40%);
    border-radius: 50%;
    animation: funnel-spin 1s linear infinite;
  }

  .quiz-processing__stages,
  .quiz-stages {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
  }

  .quiz-processing__stage,
  .quiz-stage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--of-color-text-subtle);
    font-size: 0.88rem;
  }

  .quiz-processing__stage::before,
  .quiz-stage::before {
    inline-size: 0.65rem;
    block-size: 0.65rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .quiz-processing__stage.is-active,
  .quiz-stage.is-active {
    color: var(--of-color-focus);
  }

  .quiz-processing__stage.is-complete,
  .quiz-stage.is-complete {
    color: var(--of-color-success);
  }

  .quiz-result__summary,
  .quiz-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
    border-block: 1px solid var(--of-color-border-subtle);
    padding-block: 1rem;
  }

  .quiz-result__summary dt,
  .quiz-summary dt {
    color: var(--of-color-text-muted);
  }

  .quiz-result__summary dd,
  .quiz-summary dd {
    margin: 0;
    font-weight: 850;
    text-align: end;
  }

  #quizLive {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @keyframes funnel-enter {
    from {
      opacity: 0;
      transform: translateY(0.6rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes funnel-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @media (max-width: 59.99rem) {
    .funnel-shell__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .funnel-panel {
      min-block-size: calc(100svh - 4.75rem);
    }

    .funnel-art,
    .funnel-artwork {
      position: relative;
      inset-block-start: auto;
      order: -1;
      inline-size: calc(100% - (2 * var(--funnel-gutter)));
      block-size: clamp(9rem, 28vw, 12rem);
      min-block-size: 0;
      overflow: hidden;
      clip: auto;
      clip-path: none;
      margin: 1rem auto 0;
      border: 1px solid var(--of-color-border-subtle);
      border-radius: var(--of-radius-xl);
      padding: 0;
      background: var(--of-color-surface-soft);
    }

    .funnel-artwork::before,
    .funnel-artwork::after,
    .funnel-artwork__halo,
    .funnel-artwork__caption {
      display: none;
    }

    .funnel-artwork__frame {
      inline-size: 100%;
      block-size: 100%;
      max-block-size: none;
      border: 0;
      border-radius: inherit;
      box-shadow: none;
    }

    .funnel-artwork #quizArtworkImage {
      inline-size: 100%;
      block-size: 100%;
      max-block-size: none;
      object-fit: cover;
      object-position: center 34%;
    }

    .funnel-panel::before {
      position: fixed;
      z-index: -1;
      pointer-events: none;
      inline-size: min(90vw, 28rem);
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--of-gradient-brand);
      content: "";
      filter: blur(5rem);
      inset: 28% -32% auto auto;
      opacity: 0.14;
    }
  }

  @media (max-width: 36rem) {
    .funnel-header__inner {
      min-block-size: 4.25rem;
      grid-template-columns: minmax(0, 1fr) auto;
      padding-block: max(0.55rem, env(safe-area-inset-top)) 0.55rem;
    }

    .funnel-panel {
      padding-block-start: 1.15rem;
    }

    #quizProgress {
      margin-block-end: 1.65rem;
    }

    .quiz-title,
    .quiz-step__title,
    .quiz-question__title {
      font-size: clamp(1.85rem, 10vw, 2.65rem);
    }

    .quiz-options--grid,
    .quiz-options[data-layout="grid"] {
      grid-template-columns: 1fr;
    }

    .quiz-option {
      min-block-size: 3.85rem;
      padding: 0.72rem 0.85rem;
    }

    #quizActions,
    .quiz-actions,
    .funnel-actions {
      position: sticky;
      z-index: 12;
      inset-block-end: 0;
      margin-inline: calc(-1 * var(--funnel-gutter));
      padding:
        1.75rem
        var(--funnel-gutter)
        max(0.9rem, env(safe-area-inset-bottom));
      background: transparent;
    }

    .quiz-info,
    .quiz-result {
      border-radius: var(--of-radius-xl);
    }
  }

  @media (min-width: 60rem) {
    .funnel-header__inner {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .funnel-panel {
      min-block-size: calc(100svh - 4.75rem);
    }

    .quiz-options[data-count="4"],
    .quiz-options[data-count="5"],
    .quiz-options[data-count="6"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    #quizContent,
    .funnel-progress__segment-fill,
    .quiz-option,
    .quiz-processing__spinner,
    .quiz-spinner {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }

  :where(
    #quizBack,
    #quizContinue,
    #quizSelectAll,
    .quiz-option,
    .quiz-unit,
    .quiz-skip,
    .quiz-restart
  ):focus-visible {
    outline: 3px solid var(--of-color-focus);
    outline-offset: 3px;
  }
}

/*
 * Focused quiz application layout.
 * The first implementation treated every step like a landing-page split hero.
 * This layer deliberately keeps ordinary questions compact and only introduces
 * large artwork when it explains a choice, an interstitial, or the offer.
 */
@layer funnel-redesign {
  body.funnel-page {
    /* Share the result-page accents across the web quiz without changing app tokens. */
    --of-mint-400: #99f4d4;
    --quiz-mint-rgb: 153 244 212;
    --of-color-focus: var(--of-mint-400);
    --of-color-selected: var(--of-mint-400);
    --of-color-success: var(--of-mint-400);
    --of-shadow-focus: 0 0 0 0.25rem rgb(var(--quiz-mint-rgb) / 28%);
    --quiz-selected-surface: linear-gradient(115deg, #24222e, #292432);
    --quiz-answer-text: #d0ccd3;
    background: #111012;
  }

  .funnel-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    border-block-end: 1px solid #303033;
    background: rgb(17 16 18 / 94%);
  }

  .funnel-header__inner {
    min-block-size: 4.5rem;
    inline-size: min(100% - 2rem, 72rem);
    padding-block: max(0.75rem, env(safe-area-inset-top)) 0.75rem;
    padding-inline: 0;
    padding-left: max(0rem, calc(env(safe-area-inset-left) - 1rem));
    padding-right: max(0rem, calc(env(safe-area-inset-right) - 1rem));
  }

  .funnel-brand {
    inline-size: clamp(7.5rem, 13vw, 9.25rem);
  }

  .funnel-main {
    min-block-size: calc(100svh - 4.5rem);
  }

  .funnel-shell {
    inline-size: min(100% - 2rem, 72rem);
    min-block-size: calc(100svh - 4.5rem);
    margin-inline: auto;
    padding-block: 1rem 3rem;
    padding-left: max(0rem, calc(env(safe-area-inset-left) - 1rem));
    padding-right: max(0rem, calc(env(safe-area-inset-right) - 1rem));
  }

  .funnel-shell__topbar {
    grid-template-columns: 2rem minmax(0, 29.375rem) 2rem;
    justify-content: center;
    min-block-size: 2.5rem;
    margin-block-end: 1.25rem;
  }

  #quizBack {
    grid-column: 1;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    background: transparent;
  }

  .funnel-progress {
    grid-column: 2;
    inline-size: 100%;
  }

  .funnel-progress__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 0.5rem;
    block-size: 0.625rem;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  .funnel-progress__segment {
    block-size: 0.375rem;
    overflow: hidden;
    border-radius: 999px;
    background: #302e32;
  }

  .funnel-progress__segment-fill {
    display: block;
    inline-size: 0%;
    block-size: 100%;
    border-radius: inherit;
    background: #aaa7ad;
    transition: inline-size 280ms var(--of-ease-out);
  }

  .funnel-shell__grid {
    display: grid;
    grid-template-columns: minmax(0, 29.375rem);
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    min-block-size: auto;
  }

  .funnel-panel {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    min-block-size: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .funnel-form,
  .funnel-stage {
    min-block-size: 0;
  }

  #quizContent {
    animation: focused-step-in 260ms var(--of-ease-out) both;
  }

  @keyframes focused-step-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }

  .funnel-artwork {
    display: none;
    min-inline-size: 0;
    min-block-size: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .funnel-artwork__frame {
    position: relative;
    display: grid;
    place-items: end center;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  .funnel-artwork__frame img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    max-block-size: 100%;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
    filter: drop-shadow(0 1.5rem 2rem rgb(0 0 0 / 32%));
  }

  .quiz-question,
  .quiz-processing,
  .quiz-result,
  .quiz-plans {
    inline-size: 100%;
  }

  .quiz-question__header {
    margin-block-end: 1.35rem;
    text-align: center;
  }

  .quiz-kicker,
  .quiz-step__eyebrow,
  .quiz-result__eyebrow {
    margin-block-end: 0.7rem;
    color: var(--of-mint-400);
    font: 800 0.75rem/1.2 var(--of-font-tech);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .quiz-question__title,
  .quiz-processing .quiz-question__title,
  .quiz-result .quiz-question__title,
  .quiz-plans .quiz-question__title {
    max-inline-size: none;
    margin: 0;
    color: #fff;
    font-family: var(--of-font-sans);
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    font-stretch: normal;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-transform: none;
  }

  .quiz-question__body {
    max-inline-size: 34rem;
    margin: 0.9rem auto 0;
    color: #aaa7ad;
    font-size: clamp(0.98rem, 1.6vw, 1.08rem);
    line-height: 1.48;
  }

  .quiz-question__hint,
  .quiz-question__feedback,
  .quiz-question__note,
  .quiz-field__hint,
  .quiz-info__note {
    margin-block-start: 1rem;
    color: #aaa7ad;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .quiz-answer-context {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 0.55rem;
    margin: -0.25rem auto 0;
    border: 1px solid rgb(var(--quiz-mint-rgb) / 32%);
    border-radius: 999px;
    padding: 0.42rem 0.7rem 0.42rem 0.8rem;
    background: rgb(var(--quiz-mint-rgb) / 7%);
  }

  .quiz-answer-context__label {
    color: #aaa7ad;
    font: 800 0.65rem/1.15 var(--of-font-tech);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .quiz-answer-context__value {
    color: var(--of-mint-400);
    font: 850 0.75rem/1.15 var(--of-font-tech);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .quiz-question__note--alert {
    color: #ffb18d;
  }

  .quiz-disclosure {
    display: grid;
    gap: 0.45rem;
    max-inline-size: 42rem;
    margin: 1.15rem auto 0;
    border: 1px solid rgb(255 178 90 / 42%);
    border-inline-start: 0.28rem solid var(--of-orange-500);
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    background: rgb(255 118 20 / 8%);
    color: #d8d3d9;
    text-align: start;
  }

  .quiz-disclosure__title {
    margin: 0;
    color: #fff;
    font-size: 0.94rem;
    line-height: 1.25;
  }

  .quiz-disclosure__body {
    margin: 0;
    color: #c4bec6;
    font-size: 0.84rem;
    line-height: 1.48;
  }

  .quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .quiz-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-block-size: 4rem;
    padding: 0.9rem 1rem;
    border: 2px solid transparent;
    border-radius: 0.65rem;
    background: #28272a;
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    transition:
      border-color 120ms ease,
      background-color 120ms ease,
      transform 120ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .quiz-option:hover {
      border-color: #5b585f;
      background: #2e2d31;
      transform: none;
    }
  }

  .quiz-option:has(.quiz-option__input:checked) {
    border-color: var(--of-mint-400);
    background: var(--quiz-selected-surface);
  }

  .quiz-option__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .quiz-option__content {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 0.22rem;
    min-inline-size: 0;
    text-align: start;
  }

  .quiz-option__title,
  .quiz-option__label {
    color: var(--quiz-answer-text);
  }

  .quiz-option__title {
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.2;
  }

  .quiz-option__description {
    color: #aaa7ad;
    font-size: 0.87rem;
    line-height: 1.35;
  }

  .quiz-option__marker,
  .quiz-option__icon:not(.quiz-option__icon--image) {
    grid-column: 2;
    grid-row: 1;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 2px solid #716d76;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 0;
  }

  .quiz-option:has(.quiz-option__input:checked) .quiz-option__marker,
  .quiz-option:has(.quiz-option__input:checked) .quiz-option__icon:not(.quiz-option__icon--image) {
    border-color: var(--of-mint-400);
    box-shadow: inset 0 0 0 0.24rem #28272a;
    background: var(--of-mint-400);
  }

  #quizApp[data-view="age"] .quiz-options--age {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .quiz-options--age .quiz-option {
    min-block-size: clamp(4.5rem, 12svh, 6rem);
    grid-template-columns: minmax(0, 1fr) 1.75rem;
    align-content: center;
    column-gap: 0.6rem;
    padding-inline: 1.35rem;
  }

  .quiz-options--age .quiz-option::before,
  .quiz-options--age .quiz-option::after {
    grid-column: 2;
    grid-row: 1;
    place-self: center;
    content: "";
  }

  .quiz-options--age .quiz-option::before {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 1px solid #68646e;
    border-radius: 50%;
    background: rgb(255 255 255 / 5%);
  }

  .quiz-options--age .quiz-option::after {
    inline-size: 0.42rem;
    block-size: 0.42rem;
    border-block-start: 2px solid #e4dfe7;
    border-inline-end: 2px solid #e4dfe7;
    transform: translateX(-0.08rem) rotate(45deg);
  }

  .quiz-options--age .quiz-option:has(.quiz-option__input:checked)::before {
    border-color: var(--of-mint-400);
    background: var(--of-mint-400);
  }

  .quiz-options--age .quiz-option:has(.quiz-option__input:checked)::after {
    border-color: #173126;
  }

  [dir="rtl"] .quiz-options--age .quiz-option::after {
    border-block-start: 0;
    border-inline-end: 0;
    border-block-end: 2px solid #e4dfe7;
    border-inline-start: 2px solid #e4dfe7;
    transform: translateX(0.08rem) rotate(45deg);
  }

  .quiz-options--age .quiz-option__title {
    font-size: clamp(1.125rem, 5.5vw, 1.375rem);
    line-height: 1.15;
  }

  .quiz-options--age .quiz-option__marker,
  .quiz-options--age .quiz-option__icon {
    display: none;
  }

  .quiz-options[data-layout="visual-list"] {
    gap: 1rem;
  }

  .quiz-options[data-layout="visual-list"] .quiz-option--visual {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 11rem;
    padding: 1.5rem;
    overflow: hidden;
    background: #211f23;
  }

  .quiz-options[data-layout="visual-list"] .quiz-option__content {
    position: relative;
    z-index: 2;
    align-self: center;
    max-inline-size: 48%;
  }

  .quiz-options[data-layout="visual-list"] .quiz-option__title {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
  }

  .quiz-options[data-layout="visual-list"] .quiz-option__icon--image {
    position: absolute;
    z-index: 1;
    inset-block: 0;
    inset-inline-end: -1rem;
    display: grid;
    place-items: end center;
    grid-column: auto;
    grid-row: auto;
    inline-size: 58%;
    block-size: auto;
    border-radius: 0;
    background: transparent;
  }

  .quiz-options[data-layout="visual-list"] .quiz-option__image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
  }

  #quizApp[data-step="profile"] .quiz-options[data-layout="visual-list"] .quiz-option__image {
    transform: scale(0.95);
    transform-origin: center;
  }

  /* Use the same compact portrait choices on phones, tablets, and desktops. */
  .quiz-options[data-layout="visual-grid"] {
    --quiz-portrait-row-height: clamp(4rem, 12svh, 6.625rem);

    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.5rem, 1.3svh, 0.7rem);
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 1.75rem;
    grid-template-rows: minmax(0, 1fr);
    align-content: center;
    column-gap: 1rem;
    block-size: var(--quiz-portrait-row-height);
    min-block-size: var(--quiz-portrait-row-height);
    padding-block: 0;
    padding-inline: 0 1rem;
    border-color: #333036;
    border-radius: 1rem;
    background: #29272c;
    overflow: hidden;
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual:has(.quiz-option__input:checked) {
    border-color: var(--of-mint-400);
    background: var(--quiz-selected-surface);
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual::before,
  .quiz-options[data-layout="visual-grid"] .quiz-option--visual::after {
    grid-column: 3;
    grid-row: 1;
    place-self: center;
    content: "";
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual::before {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 1px solid #74707b;
    border-radius: 50%;
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual::after {
    inline-size: 0.42rem;
    block-size: 0.42rem;
    border-block-start: 2px solid #ddd9e3;
    border-inline-end: 2px solid #ddd9e3;
    transform: translateX(-0.08rem) rotate(45deg);
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual:has(.quiz-option__input:checked)::before {
    border-color: var(--of-mint-400);
    background: var(--of-mint-400);
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option--visual:has(.quiz-option__input:checked)::after {
    border-color: #173126;
  }

  [dir="rtl"] .quiz-options[data-layout="visual-grid"] .quiz-option--visual::after {
    border-block-start: 0;
    border-inline-end: 0;
    border-block-end: 2px solid #ddd9e3;
    border-inline-start: 2px solid #ddd9e3;
    transform: translateX(0.08rem) rotate(45deg);
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option__icon--image {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: block;
    inline-size: 6.5rem;
    block-size: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #18171b;
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option__image {
    position: absolute;
    inset-block-start: 0.5rem;
    left: 50%;
    inline-size: auto;
    max-inline-size: none;
    block-size: calc(var(--quiz-portrait-row-height) * 2.45);
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option__content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-inline-size: 0;
    padding: 0;
    background: transparent;
    text-align: start;
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option__title {
    font-size: clamp(1.125rem, 5.5vw, 1.375rem);
    line-height: 1.15;
    white-space: normal;
  }

  .quiz-options[data-layout="visual-grid"] .quiz-option__marker {
    display: none;
  }

  .funnel-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1.75rem;
    padding: 0;
    background: transparent;
  }

  #quizApp[data-step="food_preferences"] .funnel-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #quizSelectAll {
    min-block-size: 3.75rem;
    border-color: rgb(var(--quiz-mint-rgb) / 45%);
    background: #242329;
    box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 30%);
    color: var(--of-mint-400);
    font-size: 1rem;
    font-weight: 850;
  }

  #quizSelectAll[hidden] {
    display: none;
  }

  #quizSelectAll:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
  }

  #quizContinue,
  .quiz-result__cta,
  .quiz-plans__continue {
    min-block-size: 3.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--of-gradient-cta);
    color: #110e12;
    font-size: 1rem;
    font-weight: 850;
    box-shadow: none;
  }

  .quiz-skip,
  .quiz-plans__back {
    border: 0;
    background: transparent;
    color: #b8b5ba;
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  .funnel-local-note {
    margin-block-start: 1.4rem;
    color: #7f7b82;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
  }

  .quiz-fields,
  .quiz-measurement,
  .quiz-range {
    display: grid;
    gap: 1rem;
  }

  .quiz-unit-toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    inline-size: min(15rem, 100%);
    margin-inline: auto;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: #2a292c;
  }

  .quiz-unit {
    min-block-size: 2.75rem;
    border: 2px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--quiz-answer-text);
    font-weight: 750;
  }

  .quiz-unit.is-active {
    border-color: var(--of-mint-400);
    background: var(--quiz-selected-surface);
  }

  .quiz-field__label {
    color: #d0cdd2;
    font-size: 0.86rem;
    font-weight: 700;
  }

  .quiz-field__control {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .quiz-field__input {
    min-block-size: 4.25rem;
    border: 2px solid #77737a;
    border-radius: var(--of-radius-md);
    background: transparent;
    color: #fff;
    font-size: clamp(1.65rem, 5vw, 2.35rem);
    text-align: center;
  }

  .quiz-field__input:focus {
    border-color: var(--of-color-focus);
    outline: none;
  }

  /* Keep number fields visually stable across pointer and touch browsers.
     Chromium otherwise reveals its native spinner only while hovering. */
  .quiz-field__input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .quiz-field__input[type="number"]::-webkit-inner-spin-button,
  .quiz-field__input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .quiz-field__suffix {
    color: #aaa7ad;
    font-size: 1rem;
  }

  .quiz-number-picker {
    --quiz-picker-row-size: 52px;
    --quiz-picker-columns: 1;
    --quiz-picker-width: 198px;
    --quiz-picker-highlight-width: 140px;
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .quiz-number-picker[data-kind="height"][data-unit="imperial"] {
    --quiz-picker-columns: 2;
    --quiz-picker-width: 260px;
    --quiz-picker-highlight-width: 118px;
  }

  .quiz-number-picker[data-kind="age"] {
    --quiz-picker-highlight-width: 118px;
  }

  .quiz-number-picker__value {
    display: block;
    margin: 0 0 1.125rem;
    color: #fff;
    font-family: var(--of-font-sans);
    font-size: clamp(2.25rem, 11vw, 2.75rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .quiz-number-picker__suffix {
    margin-inline: 0.2em;
    color: #aaa7ad;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: normal;
    white-space: nowrap;
  }

  .quiz-number-picker__labels,
  .quiz-number-picker__selection,
  .quiz-number-picker__wheels {
    display: grid;
    grid-template-columns: repeat(var(--quiz-picker-columns), minmax(0, 1fr));
    gap: 12px;
    inline-size: min(var(--quiz-picker-width), 100%);
    margin-inline: auto;
  }

  .quiz-number-picker__labels {
    margin-block-end: 0.5rem;
    color: #d0cdd2;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .quiz-number-picker__stage {
    position: relative;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: calc(var(--quiz-picker-row-size) * 5);
  }

  .quiz-number-picker__selection {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--quiz-picker-row-size) * 2);
    block-size: var(--quiz-picker-row-size);
    pointer-events: none;
  }

  .quiz-number-picker__selection > span {
    justify-self: center;
    inline-size: min(var(--quiz-picker-highlight-width), 100%);
    block-size: 100%;
    border: 1.5px solid rgb(var(--quiz-mint-rgb) / 50%);
    border-radius: var(--of-radius-md);
    background: linear-gradient(115deg, #203d36, #213d39);
  }

  .quiz-number-picker__wheels {
    position: relative;
    block-size: 100%;
  }

  .quiz-number-picker__wheel {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    block-size: 100%;
    padding-block: calc(var(--quiz-picker-row-size) * 2);
    padding-inline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    user-select: none;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
    mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  }

  .quiz-number-picker__wheel::-webkit-scrollbar {
    display: none;
  }

  .quiz-number-picker__wheel:focus-visible {
    border-radius: var(--of-radius-md);
    outline: 2px solid var(--of-color-focus);
    outline-offset: 2px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .quiz-number-picker__item {
    display: block;
    flex: 0 0 var(--quiz-picker-row-size);
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--quiz-picker-row-size);
    min-block-size: var(--quiz-picker-row-size);
    margin: 0;
    border: 0;
    border-radius: var(--of-radius-sm);
    padding: 0;
    background: transparent;
    color: #aaa7ad;
    font-family: var(--of-font-sans);
    font-size: 1.8125rem;
    font-weight: 600;
    line-height: var(--quiz-picker-row-size);
    font-variant-numeric: tabular-nums;
    text-align: center;
    scroll-snap-align: center;
    touch-action: pan-y;
    cursor: pointer;
    transition: font-size 180ms ease-out, color 180ms ease-out, letter-spacing 180ms ease-out;
  }

  .quiz-number-picker__item.is-selected,
  .quiz-number-picker__item[aria-pressed="true"] {
    color: var(--of-mint-400);
    font-size: 2.125rem;
    font-weight: 800;
  }

  @media (prefers-reduced-motion: reduce) {
    .quiz-number-picker__wheel {
      scroll-behavior: auto !important;
    }
    .quiz-number-picker__item {
      transition: none;
    }
  }

  .quiz-consent {
    margin-block-start: 0.75rem;
    color: #aaa7ad;
    font-size: 0.85rem;
    line-height: 1.45;
  }

  .quiz-goal-warning {
    display: grid;
    gap: 0.7rem;
    margin-block-start: 1.25rem;
    padding: 1.25rem;
    border: 1px solid rgb(100 147 254 / 38%);
    border-radius: 1rem;
    background: #123f83;
    color: #fff;
  }

  .quiz-goal-warning[hidden] {
    display: none;
  }

  .quiz-goal-warning__title {
    font-size: 1rem;
    line-height: 1.3;
  }

  .quiz-goal-warning__body {
    color: #eef4ff;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .quiz-info__bullets {
    display: grid;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
  }

  .quiz-info__bullet {
    padding: 1rem;
    border-inline-start: 3px solid var(--of-mint-400);
    background: #232225;
    color: #d7d4d9;
    line-height: 1.45;
  }

  #quizApp[data-view="result"] .funnel-shell__topbar,
  #quizApp[data-view="plans"] .funnel-shell__topbar {
    display: none;
  }

  #quizApp[data-view="plans"] .funnel-local-note {
    display: none;
  }

  #quizApp[data-layout="entry"] .funnel-shell__grid,
  #quizApp[data-layout="story"] .funnel-shell__grid,
  #quizApp[data-layout="plans"] .funnel-shell__grid {
    grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 0.82fr);
    align-items: center;
    min-block-size: calc(100svh - 7rem);
  }

  #quizApp[data-layout="entry"] .funnel-artwork,
  #quizApp[data-layout="story"] .funnel-artwork,
  #quizApp[data-layout="plans"] .funnel-artwork {
    grid-column: 1;
    grid-row: 1;
    display: block;
    block-size: min(72svh, 43rem);
  }

  #quizApp[data-layout="plans"] .funnel-artwork::before {
    display: none;
  }

  #quizApp[data-step="nutrition_intro"] .funnel-artwork::before {
    display: none;
  }

  #quizApp[data-layout="entry"] .funnel-panel,
  #quizApp[data-layout="story"] .funnel-panel,
  #quizApp[data-layout="plans"] .funnel-panel {
    grid-column: 2;
    grid-row: 1;
  }

  #quizApp[data-layout="entry"] .quiz-question__header,
  #quizApp[data-layout="plans"] .quiz-question__header,
  #quizApp[data-layout="plans"] .quiz-plans > .quiz-question__header,
  #quizApp[data-layout="story"] .quiz-question__header {
    text-align: start;
  }

  #quizApp[data-layout="entry"] .quiz-question__title {
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-transform: uppercase;
  }

  #quizApp[data-layout="entry"] .quiz-question__body {
    margin-inline: 0;
    color: var(--of-orange-400);
    font-weight: 800;
    text-transform: uppercase;
  }

  #quizApp[data-view="age"] .funnel-shell__grid {
    grid-template-columns: minmax(0, 29.375rem);
    justify-content: center;
    align-items: start;
    min-block-size: 0;
  }

  #quizApp[data-view="age"] .funnel-artwork {
    display: none;
  }

  #quizApp[data-view="age"] .funnel-panel {
    grid-column: 1;
  }

  #quizApp[data-view="age"] .quiz-question__header {
    text-align: center;
  }

  #quizApp[data-view="age"] .quiz-question__title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-transform: none;
  }

  #quizApp[data-step="halfway"] .funnel-shell__grid {
    inline-size: min(100%, 29.375rem);
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    margin-inline: auto;
  }

  #quizApp[data-step="halfway"] .funnel-panel {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
  }

  #quizApp[data-step="halfway"] .funnel-form {
    inline-size: 100%;
  }

  #quizApp[data-step="halfway"] .funnel-artwork {
    display: none;
  }

  #quizApp[data-layout="visual-list"] .funnel-shell__grid,
  #quizApp[data-layout="visual-grid"] .funnel-shell__grid {
    grid-template-columns: minmax(0, 48rem);
  }

  #quizApp[data-layout="visual-list"] .funnel-panel,
  #quizApp[data-layout="visual-grid"] .funnel-panel {
    grid-column: 1;
    inline-size: 100%;
  }

  .quiz-result {
    inline-size: min(100%, 62rem);
    margin-inline: auto;
  }

  #quizApp[data-view="result"] .funnel-shell__grid {
    grid-template-columns: minmax(0, 62rem);
  }

  #quizApp[data-view="result"] .funnel-panel {
    inline-size: 100%;
  }

  #quizApp[data-view="result"] .funnel-form {
    inline-size: 100%;
  }

  .quiz-result > .quiz-question__header,
  .quiz-result__eyebrow {
    text-align: center;
  }

  .quiz-transformation {
    display: grid;
    gap: 1rem;
    margin-block: 2rem;
  }

  .quiz-transformation__title,
  .quiz-result__section-title {
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.15;
    text-align: center;
  }

  .quiz-transformation__visuals {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0;
    overflow: hidden;
    border: 1px solid #363439;
    border-radius: 1rem 1rem 0 0;
    background: #19181a;
  }

  .quiz-transformation__figure {
    display: grid;
    grid-template-rows: 22rem auto;
    min-inline-size: 0;
    margin: 0;
  }

  .quiz-transformation__figure:last-child {
    border-inline-start: 1px solid #363439;
  }

  .quiz-transformation__figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(0.95);
    transform-origin: center bottom;
  }

  .quiz-transformation__caption {
    display: grid;
    gap: 0.15rem;
    min-block-size: 4.25rem;
    padding: 0.85rem 1rem;
    background: #252427;
    text-align: center;
  }

  .quiz-transformation__label {
    font-size: 1.05rem;
  }

  .quiz-transformation__detail {
    color: #aaa7ad;
    font-size: 0.85rem;
  }

  .quiz-transformation__arrow {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% - 2.125rem);
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid #363439;
    border-radius: 50%;
    background: #19181a;
    color: #5a575e;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .quiz-transformation__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -1rem 0 0;
    border: 1px solid #363439;
    border-radius: 0 0 1rem 1rem;
    overflow: hidden;
  }

  .quiz-transformation__stat {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
  }

  .quiz-transformation__stat + .quiz-transformation__stat {
    border-inline-start: 1px solid #363439;
  }

  .quiz-transformation__stat-column {
    color: #77737a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .quiz-transformation__stat-label {
    color: #aaa7ad;
    font-size: 0.8rem;
  }

  .quiz-transformation__stat-value {
    margin: 0;
    color: var(--of-orange-400);
    font-size: 1.15rem;
    font-weight: 850;
  }

  .quiz-result__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-block: 1rem 2rem;
    border: 0;
    padding: 0;
  }

  .quiz-result__summary-item {
    display: grid;
    min-inline-size: 0;
    min-block-size: 7rem;
    align-content: start;
    gap: 0.55rem;
    border: 1px solid #3b383f;
    border-radius: 0.85rem;
    padding: 1rem;
    background: #1d1c1f;
  }

  .quiz-result__summary dt,
  .quiz-result__summary dd {
    padding: 0;
    background: transparent;
    overflow-wrap: anywhere;
  }

  .quiz-result__summary dt {
    color: var(--of-mint-400);
    font: 750 0.72rem/1.3 var(--of-font-tech);
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .quiz-result__summary dd {
    margin: 0;
    color: #fff;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-weight: 800;
    line-height: 1.3;
    text-align: start;
  }

  .quiz-result__actions,
  .quiz-plans__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1.5rem;
  }

  .quiz-result__cta {
    min-inline-size: min(100%, 22rem);
  }

  .quiz-result__restart {
    border-color: #4a474e;
    background: #232225;
    box-shadow: none;
  }

  .quiz-result__disclaimer,
  .quiz-plans__disclosure {
    margin-block-start: 1.25rem;
    color: #8d8990;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
  }

  .quiz-plans > .quiz-question__header {
    margin-block-end: 1.5rem;
  }

  .quiz-plans__list {
    display: grid;
    gap: 0.75rem;
  }

  .quiz-plan-card {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 2px solid #414044;
    border-radius: 0.9rem;
    background: #212023;
    cursor: pointer;
  }

  .quiz-plan-card:has(input:checked) {
    border-color: var(--of-orange-500);
    background: #321d17;
  }

  .quiz-plan-card__badge {
    padding: 0.34rem 0.75rem;
    background: var(--of-orange-500);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

  .quiz-plan-card__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-block-size: 6.3rem;
    padding: 1rem;
  }

  .quiz-plan-card__input {
    position: absolute;
    opacity: 0;
  }

  .quiz-plan-card__marker {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 2px solid #77737a;
    border-radius: 50%;
  }

  .quiz-plan-card:has(input:checked) .quiz-plan-card__marker {
    border-color: var(--of-orange-400);
    box-shadow: inset 0 0 0 0.23rem #321d17;
    background: var(--of-orange-400);
  }

  .quiz-plan-card__copy,
  .quiz-plan-card__daily {
    display: grid;
    gap: 0.2rem;
  }

  .quiz-plan-card__name {
    font-size: 1rem;
    text-transform: uppercase;
  }

  .quiz-plan-card__per-day {
    color: #aaa7ad;
    font-size: 0.84rem;
  }

  .quiz-plan-card__daily {
    text-align: end;
  }

  .quiz-plan-card__daily-amount {
    font-size: 1.75rem;
    line-height: 1;
  }

  .quiz-plan-card__currency {
    font-size: 0.72rem;
    font-weight: 500;
  }

  .quiz-plan-card__included {
    padding: 0.55rem 1rem;
    border-block-start: 1px solid #414044;
    color: #d8d5da;
    font-size: 0.8rem;
    text-align: center;
  }

  .quiz-plan-card__included::before {
    content: "✦ ";
    color: var(--of-mint-400);
  }

  .quiz-plans__disclosure {
    text-align: start;
  }

  .quiz-plans__disclosure a {
    color: #fff;
    text-underline-offset: 0.2em;
  }

  .quiz-plans__actions {
    flex-direction: column;
    align-items: center;
  }

  .quiz-plans__continue {
    inline-size: min(100%, 22rem);
  }

  .quiz-plans__checkout-status {
    margin-block-start: 0.75rem;
    color: var(--of-mint-400);
    font-size: 0.82rem;
    text-align: center;
  }

  .of-purchase-modal__status .funnel-error__link {
    color: inherit;
  }

  .quiz-plans[aria-busy="true"] {
    cursor: progress;
  }

  .funnel-error {
    margin-block-start: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.65rem;
    background: rgb(255 101 119 / 12%);
    color: #ff9aaa;
    font-size: 0.9rem;
  }

  .funnel-error__link {
    color: #fff;
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
  }

  .funnel-error__link:focus-visible {
    border-radius: 0.2rem;
    outline: 3px solid var(--of-mint-400);
    outline-offset: 3px;
  }

  /* Interactive assessment patterns */
  #quizApp[data-step="movement_style"] .quiz-question {
    gap: 1.25rem;
  }

  #quizApp[data-step="movement_style"] .quiz-question__header {
    margin-block-end: 0;
  }

  #quizApp[data-step="movement_style"] .quiz-question__title {
    max-inline-size: 18ch;
    margin-inline: auto;
    font-size: clamp(1.75rem, 7.5vw, 1.875rem);
  }

  .quiz-rating-deck {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }

  .quiz-rating-card {
    display: grid;
    grid-template-columns: 23% minmax(0, 1fr);
    min-inline-size: 0;
    margin: 0;
    border: 1px solid #3a383d;
    border-radius: 0.9rem;
    padding: 0;
    background: #1f1e21;
    overflow: hidden;
  }

  .quiz-rating-card__content {
    display: grid;
    align-content: center;
    gap: 0.625rem;
    min-inline-size: 0;
    min-block-size: 6.875rem;
    padding: 0.875rem 0.6875rem;
  }

  .quiz-rating-card__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.25;
  }

  .quiz-rating-card__media {
    position: relative;
    display: grid;
    min-inline-size: 0;
    place-items: center;
    border-inline-end: 1px solid #353238;
    background: radial-gradient(ellipse at 50% 42%, #f4eee5 0%, #ded5c8 58%, #b8ad9d 100%);
  }

  .quiz-rating-card__image {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 0.25rem;
    object-fit: contain;
    object-position: center;
  }

  .quiz-rating-card__icon {
    display: grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    border: 1px solid rgb(var(--quiz-mint-rgb) / 22%);
    border-radius: 50%;
    background: rgb(var(--quiz-mint-rgb) / 8%);
    color: var(--of-mint-400);
    font-size: 1.35rem;
  }

  .quiz-rating-card__choices {
    display: grid;
    min-inline-size: 0;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    border: 1px solid #434147;
    border-radius: 0.65rem;
    background: #29282b;
  }

  .quiz-rating-choice {
    --quiz-rating-color: #bdbdbd;

    position: relative;
    display: flex;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    padding: 0.375rem 0.25rem;
    background: transparent;
    color: var(--quiz-answer-text);
    cursor: pointer;
    text-align: center;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
  }

  .quiz-rating-choice[data-rating="dislike"] {
    --quiz-rating-color: #d99179;
  }

  .quiz-rating-choice[data-rating="like"] {
    --quiz-rating-color: #8ccd9d;
  }

  .quiz-rating-choice__check {
    display: none;
    flex: 0 0 auto;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    place-items: center;
    border-radius: 50%;
    background: #151617;
    color: var(--quiz-rating-color);
  }

  .quiz-rating-choice__check::before {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.225rem;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.0625rem) rotate(-45deg);
  }

  .quiz-rating-choice[data-rating="dislike"] .quiz-rating-choice__check {
    position: relative;
  }

  .quiz-rating-choice[data-rating="dislike"] .quiz-rating-choice__check::before,
  .quiz-rating-choice[data-rating="dislike"] .quiz-rating-choice__check::after {
    position: absolute;
    left: 50%;
    top: 50%;
    inline-size: 0.5rem;
    block-size: 0.125rem;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .quiz-rating-choice[data-rating="dislike"] .quiz-rating-choice__check::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .quiz-rating-choice:hover {
    background: #353338;
    color: #fff;
  }

  .quiz-rating-choice input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
  }

  .quiz-rating-choice:has(input:checked) {
    border-color: var(--quiz-rating-color);
    background: var(--quiz-rating-color);
    color: #151617;
  }

  .quiz-rating-choice:has(input:checked) .quiz-rating-choice__check {
    display: grid;
  }

  .quiz-rating-choice:has(input:focus-visible) {
    z-index: 1;
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .quiz-dialog-choice:has(input:focus-visible),
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:focus-visible) {
    outline: 3px solid var(--of-mint-400);
    outline-offset: 2px;
  }

  .quiz-rating-choice__icon {
    flex: 0 0 auto;
    color: currentColor;
    font-size: 1rem;
    line-height: 1;
  }

  .quiz-rating-choice__label {
    flex: 0 0 auto;
    min-inline-size: 0;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.25;
  }

  #quizApp[data-step="focus_areas"] .quiz-question {
    gap: 0.75rem;
  }

  #quizApp[data-step="focus_areas"] .quiz-question__header {
    margin-block-end: 0;
  }

  #quizApp[data-layout="body-map"] .funnel-form {
    padding-block-end: 6rem;
  }

  #quizApp[data-layout="body-map"] .funnel-actions {
    position: fixed;
    z-index: 40;
    inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
    left: 50%;
    inline-size: min(calc(100vw - 2rem), 29.375rem);
    margin: 0;
    padding: 0;
    background: transparent;
    transform: translateX(-50%);
  }

  #quizApp[data-layout="body-map"] #quizContinue {
    box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 55%);
  }

  #quizApp[data-layout="body-map"] #quizError:not([hidden]) {
    position: fixed;
    z-index: 41;
    inset-block-end: calc(max(0.75rem, env(safe-area-inset-bottom)) + 4.5rem);
    left: 50%;
    inline-size: min(calc(100vw - 2rem), 29.375rem);
    margin: 0;
    border: 1px solid #674048;
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: #291f24;
    box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 45%);
    transform: translateX(-50%);
  }

  .quiz-options--body-map {
    position: relative;
    display: block;
    min-block-size: 35rem;
    overflow: hidden;
    border: 1px solid #363439;
    border-radius: 1.15rem;
    background:
      radial-gradient(circle at 50% 48%, rgb(98 93 245 / 18%), transparent 52%),
      #171619;
  }

  .quiz-body-map__visual {
    position: absolute;
    inset: 1rem;
    display: grid;
    place-items: end center;
    pointer-events: none;
  }

  .quiz-body-map__figure {
    position: relative;
    inline-size: min(70%, 23rem);
    aspect-ratio: 2 / 3;
    isolation: isolate;
  }

  .quiz-body-map__image,
  .quiz-body-map__highlight {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .quiz-body-map__image {
    filter: drop-shadow(0 1.4rem 1.8rem rgb(0 0 0 / 42%));
  }

  .quiz-body-map__highlight {
    --body-zone-opacity: 0.23;
    --body-zone-mask: linear-gradient(#000, #000);
    z-index: 1;
    opacity: 0;
    mix-blend-mode: screen;
    -webkit-mask-image: var(--body-zone-mask);
    mask-image: var(--body-zone-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    filter:
      brightness(0)
      saturate(100%)
      invert(89%)
      sepia(40%)
      saturate(695%)
      hue-rotate(91deg)
      brightness(103%)
      contrast(102%)
      drop-shadow(0 0 0.08rem rgb(var(--quiz-mint-rgb) / 85%))
      drop-shadow(0 0 0.5rem rgb(var(--quiz-mint-rgb) / 50%))
      drop-shadow(0 0 1rem rgb(var(--quiz-mint-rgb) / 28%));
    transition: opacity 210ms ease;
  }

  .quiz-body-map__highlight[data-region="full_body"] {
    --body-zone-opacity: 0.16;
    --body-zone-mask: linear-gradient(#000, #000);
  }

  .quiz-body-map__highlight[data-region="upper_body"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 22% 13% at 49.5% 27%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 7.5% 22% at 31.5% 36%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 7.5% 22% at 68.5% 36%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__highlight[data-region="core"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 14% 12.5% at 49.5% 36%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 11.5% 8% at 49.5% 42%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__highlight[data-region="lower_body"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 18% 11% at 49.5% 51%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 10.5% 35% at 40.5% 68%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 10.5% 35% at 58.5% 68%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__highlight[data-region="posture"] {
    --body-zone-opacity: 0.25;
    --body-zone-mask:
      radial-gradient(
        ellipse 22% 7% at 49.5% 22.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 8% 10% at 41% 28%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 8% 10% at 58% 28%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 4.5% 15% at 49.5% 34%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-profile="woman"]
    .quiz-body-map__highlight[data-region="upper_body"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 21% 13% at 49% 27%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 7.5% 22% at 30% 37%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 7.5% 22% at 68.5% 37%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-profile="woman"]
    .quiz-body-map__highlight[data-region="core"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 13.5% 12% at 49.5% 36%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 11% 8% at 49.5% 42%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-profile="woman"]
    .quiz-body-map__highlight[data-region="lower_body"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 18.5% 12% at 50% 50.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 10.5% 35% at 41.5% 68%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 10.5% 35% at 59% 68%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-profile="woman"]
    .quiz-body-map__highlight[data-region="posture"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 21% 7% at 49% 23%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 7.5% 10% at 41% 28.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 7.5% 10% at 57.5% 28.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 4.5% 15% at 49.5% 34.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-variant="broad"]
    .quiz-body-map__highlight[data-region="core"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 16% 12.5% at 49.5% 36%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 13% 8% at 49.5% 42%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-variant="broad"]
    .quiz-body-map__highlight[data-region="lower_body"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 21% 12% at 50% 50.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 12% 35% at 41% 68%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 12% 35% at 59% 68%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-body-map__figure[data-variant="broad"]
    .quiz-body-map__highlight[data-region="posture"] {
    --body-zone-mask:
      radial-gradient(
        ellipse 24% 7% at 49.5% 23%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 8.5% 10% at 40.5% 28.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 8.5% 10% at 58.5% 28.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      ),
      radial-gradient(
        ellipse 5% 15% at 49.5% 34.5%,
        #000 0 48%, rgb(0 0 0 / 82%) 66%, rgb(0 0 0 / 35%) 82%, transparent 100%
      );
  }

  .quiz-options--body-map:has(input[value="full_body"]:checked)
    .quiz-body-map__highlight[data-region="full_body"],
  .quiz-options--body-map:has(input[value="upper_body"]:checked)
    .quiz-body-map__highlight[data-region="upper_body"],
  .quiz-options--body-map:has(input[value="core"]:checked)
    .quiz-body-map__highlight[data-region="core"],
  .quiz-options--body-map:has(input[value="lower_body"]:checked)
    .quiz-body-map__highlight[data-region="lower_body"],
  .quiz-options--body-map:has(input[value="posture"]:checked)
    .quiz-body-map__highlight[data-region="posture"] {
    opacity: var(--body-zone-opacity);
  }

  .quiz-options--body-map .quiz-body-map__hotspot {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--hotspot-y, 50%);
    inset-inline-start: var(--hotspot-x, 50%);
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 0.4rem;
    inline-size: clamp(7.4rem, 32%, 11rem);
    min-block-size: 3rem;
    padding: 0.55rem 0.65rem;
    border-color: rgb(255 255 255 / 22%);
    border-radius: 999px;
    background: rgb(20 19 22 / 84%);
    box-shadow: 0 0.5rem 1.3rem rgb(0 0 0 / 25%);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    transform: translate(-50%, -50%);
  }

  @media (hover: hover) and (pointer: fine) {
    .quiz-options--body-map .quiz-body-map__hotspot:hover {
      border-color: var(--of-mint-400);
      background: rgb(27 26 30 / 92%);
      transform: translate(-50%, -50%);
    }
  }

  .quiz-options--body-map .quiz-body-map__hotspot:active {
    border-color: var(--of-mint-400);
  }

  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) {
    border-color: var(--of-mint-400);
    background: rgb(var(--quiz-mint-rgb) / 14%);
    box-shadow: 0 0 0 1px rgb(var(--quiz-mint-rgb) / 12%), 0 0.7rem 1.5rem rgb(0 0 0 / 28%);
  }

  .quiz-options--body-map .quiz-option__title {
    font-size: clamp(0.7rem, 1.7vw, 0.84rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .quiz-options--body-map .quiz-option__content {
    grid-column: 2;
    align-self: center;
  }

  .quiz-options--body-map .quiz-option__icon:not(.quiz-option__icon--image) {
    display: grid;
    grid-column: 1;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 1px solid #716d76;
    background: rgb(255 255 255 / 5%);
    color: #e8e4ec;
  }

  .quiz-options--body-map .quiz-option__icon svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked)
    .quiz-option__icon:not(.quiz-option__icon--image) {
    border-color: var(--of-mint-400);
    background: rgb(var(--quiz-mint-rgb) / 12%);
    color: var(--of-mint-400);
    box-shadow: none;
  }

  .quiz-options:has(> .quiz-option-group) {
    gap: 0.8rem;
  }

  .quiz-option-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    min-inline-size: 0;
    border: 1px solid #343238;
    border-radius: 0.9rem;
    padding: 0.8rem;
    background: #1a191c;
  }

  .quiz-option-group__title {
    grid-column: 1 / -1;
    margin: 0 0 0.15rem;
    color: var(--of-mint-400);
    font: 800 0.7rem/1.2 var(--of-font-tech);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .quiz-option-group .quiz-option {
    min-inline-size: 0;
    min-block-size: 3.4rem;
    padding: 0.7rem 0.75rem;
    background: #262528;
  }

  .quiz-option-group .quiz-option__title {
    font-size: 0.87rem;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--with-marker {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    column-gap: 0.65rem;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__icon--food {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    overflow: hidden;
    border: 1px solid rgb(var(--quiz-mint-rgb) / 28%);
    border-radius: 0.7rem;
    background: radial-gradient(circle at 45% 32%, #fff 0%, #f7f5ef 72%, #e9e4d9 100%);
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__icon--food .quiz-option__image {
    inline-size: 100%;
    block-size: 100%;
    padding: 0.1rem;
    object-fit: contain;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option:has(.quiz-option__input:checked) .quiz-option__icon--food {
    border-color: var(--of-mint-400);
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__icon:not(.quiz-option__icon--image) {
    grid-column: 1;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid rgb(var(--quiz-mint-rgb) / 20%);
    border-radius: 0.6rem;
    background: rgb(var(--quiz-mint-rgb) / 8%);
    box-shadow: none;
    color: inherit;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.2rem;
    line-height: 1;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__icon--image {
    grid-column: 1;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    overflow: hidden;
    border: 1px solid rgb(var(--quiz-mint-rgb) / 20%);
    border-radius: 0.6rem;
    background: rgb(var(--quiz-mint-rgb) / 8%);
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__image {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 0;
    object-fit: contain;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option:has(.quiz-option__input:checked) .quiz-option__icon:not(.quiz-option__icon--image) {
    border-color: rgb(var(--quiz-mint-rgb) / 45%);
    background: rgb(var(--quiz-mint-rgb) / 15%);
    box-shadow: none;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option:has(.quiz-option__input:checked) .quiz-option__icon--image {
    border-color: rgb(var(--quiz-mint-rgb) / 45%);
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__content {
    grid-column: 2;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option__marker {
    grid-column: 3;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) {
    border-color: #d99179;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) .quiz-option__title {
    text-decoration: line-through;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker {
    position: relative;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::before,
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::after {
    position: absolute;
    left: 50%;
    top: 50%;
    inline-size: 0.65rem;
    block-size: 0.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--of-color-text-on-bright);
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) .quiz-option__marker::before,
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) .quiz-option__marker::after {
    opacity: 1;
  }

  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) .quiz-option__marker {
    border-color: #d99179;
    background: #d99179;
    box-shadow: none;
  }

  .quiz-post-feedback {
    display: grid;
    gap: 0.65rem;
    inline-size: min(100%, 31rem);
    margin-inline: auto;
    border: 1px solid rgb(var(--quiz-mint-rgb) / 34%);
    border-radius: 1rem;
    padding: clamp(1.25rem, 4vw, 1.75rem);
    background:
      linear-gradient(140deg, rgb(var(--quiz-mint-rgb) / 10%), transparent 56%),
      #1c1b1e;
    text-align: center;
  }

  .quiz-post-feedback::before {
    display: grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: var(--of-mint-400);
    color: #101113;
    content: "✓";
    font-size: 1.1rem;
    font-weight: 900;
  }

  .quiz-post-feedback__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 3vw, 1.55rem);
    line-height: 1.2;
  }

  .quiz-post-feedback__body {
    margin: 0;
    color: #aaa7ad;
    line-height: 1.55;
  }

  /* Modal decisions and consent */
  .quiz-dialog-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding:
      max(1rem, env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
    background: rgb(8 7 10 / 84%);
    -webkit-backdrop-filter: blur(0.65rem);
    backdrop-filter: blur(0.65rem);
    animation: quiz-dialog-fade-in 160ms ease-out both;
  }

  .quiz-dialog {
    position: relative;
    display: grid;
    inline-size: min(100%, 34rem);
    max-block-size: min(46rem, calc(100svh - 2rem));
    gap: 0.9rem;
    overflow-y: auto;
    border: 1px solid #49464e;
    border-radius: 1.1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    background:
      radial-gradient(circle at 100% 0, rgb(98 93 245 / 18%), transparent 18rem),
      #171619;
    box-shadow: 0 1.7rem 4.5rem rgb(0 0 0 / 58%);
    animation: quiz-dialog-rise-in 180ms ease-out both;
  }

  .quiz-dialog__close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    display: grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid #444149;
    border-radius: 50%;
    padding: 0;
    background: #252428;
    color: transparent;
    cursor: pointer;
    font-size: 0;
  }

  .quiz-dialog__close::before,
  .quiz-dialog__close::after {
    position: absolute;
    inline-size: 0.95rem;
    block-size: 2px;
    border-radius: 2px;
    background: #fff;
    content: "";
  }

  .quiz-dialog__close::before {
    transform: rotate(45deg);
  }

  .quiz-dialog__close::after {
    transform: rotate(-45deg);
  }

  .quiz-dialog__close:hover {
    border-color: var(--of-mint-400);
  }

  .quiz-dialog__close:focus-visible,
  .quiz-dialog__accept:focus-visible,
  .quiz-dialog__decline:focus-visible {
    outline: 3px solid var(--of-mint-400);
    outline-offset: 3px;
  }

  .quiz-dialog__title {
    max-inline-size: calc(100% - 2.5rem);
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1.12;
  }

  .quiz-dialog__body {
    display: grid;
    gap: 0.65rem;
  }

  .quiz-dialog__paragraph,
  .quiz-dialog__privacy,
  .quiz-dialog__withdraw-note {
    margin: 0;
    color: #aaa7ad;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .quiz-dialog__privacy a {
    color: var(--of-mint-400);
    text-underline-offset: 0.2em;
  }

  .quiz-dialog__withdraw-note {
    border-inline-start: 2px solid var(--of-mint-400);
    padding-inline-start: 0.8rem;
    color: #8f8b93;
    font-size: 0.78rem;
  }

  .quiz-dialog__choices {
    display: grid;
    gap: 0.55rem;
    min-inline-size: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .quiz-dialog__choices-legend {
    margin-block-end: 0.2rem;
    padding: 0;
    color: #d6d3d8;
    font-size: 0.82rem;
    font-weight: 750;
  }

  .quiz-dialog-choice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    min-inline-size: 0;
    border: 1px solid #3f3d42;
    border-radius: 0.75rem;
    padding: 0.8rem;
    background: #242326;
    cursor: pointer;
  }

  .quiz-dialog-choice:has(input:checked) {
    border-color: var(--of-mint-400);
    background: var(--quiz-selected-surface);
  }

  .quiz-dialog-choice__input {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-block-start: 0.12rem;
    accent-color: var(--of-mint-400);
  }

  .quiz-dialog-choice__copy {
    display: grid;
    gap: 0.2rem;
    min-inline-size: 0;
  }

  .quiz-dialog-choice__title {
    color: var(--quiz-answer-text);
    font-size: 0.92rem;
  }

  .quiz-dialog-choice__description {
    color: #a29ea6;
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .quiz-dialog__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-block-start: 0.25rem;
  }

  .quiz-dialog__accept,
  .quiz-dialog__decline {
    display: inline-flex;
    inline-size: min(100%, 30rem);
    min-block-size: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding-inline: 1.2rem;
    font-weight: 800;
    text-align: center;
  }

  .quiz-dialog__accept:disabled {
    cursor: not-allowed;
    filter: grayscale(0.55);
    opacity: 0.5;
  }

  .quiz-dialog__decline:disabled,
  .quiz-dialog__close:disabled {
    cursor: wait;
    opacity: 0.55;
  }

  .quiz-dialog__error {
    margin: 0;
    border-radius: 0.65rem;
    padding: 0.75rem 0.85rem;
    background: rgb(255 101 119 / 12%);
    color: #ff9aaa;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.4;
  }

  @keyframes quiz-dialog-fade-in {
    from { opacity: 0; }
  }

  @keyframes quiz-dialog-rise-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem) scale(0.985);
    }
  }

  /* Processing */
  .quiz-processing__progress {
    position: relative;
    display: grid;
    inline-size: min(100%, 28rem);
    min-block-size: 3rem;
    place-items: center;
    justify-self: center;
    margin-block: 1.35rem 1rem;
    overflow: hidden;
    border: 1px solid #403e44;
    border-radius: 999px;
    background: #222125;
  }

  .quiz-processing__progress-bar {
    position: absolute;
    z-index: 0;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background: linear-gradient(90deg, rgb(var(--quiz-mint-rgb) / 20%), rgb(var(--quiz-mint-rgb) / 40%));
    transition: width 520ms var(--of-ease-out);
  }

  .quiz-processing__progress-text {
    position: relative;
    z-index: 1;
    color: #fff;
    font: 850 0.78rem/1 var(--of-font-tech);
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgb(0 0 0 / 45%);
  }

  .quiz-processing__stages {
    inline-size: min(100%, 28rem);
    justify-self: center;
    border: 1px solid #333137;
    border-radius: 0.9rem;
    padding: 0.85rem;
    background: #1b1a1d;
  }

  .quiz-processing__stage {
    min-block-size: 1.7rem;
  }

  .quiz-processing__save-error {
    display: grid;
    inline-size: min(100%, 28rem);
    justify-items: center;
    gap: 0.85rem;
    justify-self: center;
    margin-block-start: 1rem;
    border: 1px solid rgb(255 101 119 / 45%);
    border-radius: 0.9rem;
    padding: 1rem;
    background: rgb(255 101 119 / 10%);
    color: #ffafba;
    line-height: 1.45;
  }

  .quiz-processing__save-error[hidden] {
    display: none;
  }

  .quiz-processing__save-error .of-button {
    min-block-size: 2.75rem;
  }

  .quiz-processing__save-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
  }

  /* Result details */
  .quiz-muscle-bar {
    display: inline-grid;
    grid-template-columns: repeat(5, minmax(1.25rem, 1fr));
    gap: 0.3rem;
    inline-size: min(100%, 11rem);
    vertical-align: middle;
  }

  .quiz-muscle-bar__segment {
    block-size: 0.42rem;
    border-radius: 999px;
    background: #42342f;
  }

  .quiz-muscle-bar__segment.is-active {
    background: linear-gradient(90deg, var(--of-orange-500), var(--of-orange-400));
    box-shadow: 0 0 0.65rem rgb(255 102 40 / 18%);
  }

  .quiz-result-metrics,
  .quiz-result__what-you-get,
  .quiz-result__roadmap,
  .quiz-result__evidence,
  .quiz-result__target-estimates {
    margin-block: clamp(2rem, 6vw, 3.5rem);
  }

  .quiz-result-metrics__cards,
  .quiz-result__target-estimates-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.1rem 0 0;
  }

  .quiz-result-metric,
  .quiz-result__target-estimate {
    position: relative;
    min-inline-size: 0;
    border: 1px solid #3a383e;
    border-radius: 1.15rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: linear-gradient(145deg, #232226, #1c1b1e);
  }

  .quiz-result-metric--bmi {
    margin-block-start: 1.1rem;
  }

  .quiz-result-metric__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
  }

  .quiz-result-metric__heading-copy {
    min-inline-size: 0;
  }

  .quiz-result-metric__icon {
    display: grid;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    place-items: center;
    border: 1px solid #454249;
    border-radius: 0.85rem;
    background: #29282b;
    color: var(--of-mint-400);
  }

  .quiz-result-metric__icon svg {
    inline-size: 1.6rem;
    block-size: 1.6rem;
  }

  .quiz-result-metric__badge {
    align-self: start;
    border: 1px solid var(--of-orange-500);
    border-radius: 0.45rem;
    padding: 0.3rem 0.5rem;
    color: #ff7c43;
    font: 750 0.65rem/1.1 var(--of-font-tech);
    letter-spacing: 0.025em;
    text-align: center;
  }

  .quiz-result-metric__label,
  .quiz-result__target-estimate-label {
    margin: 0;
    color: #959199;
    font: 750 0.72rem/1.3 var(--of-font-tech);
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .quiz-result-metric__value,
  .quiz-result__target-estimate-value {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 2.65rem);
    font-weight: 900;
    line-height: 1.05;
  }

  .quiz-result-metric__value--bmi {
    margin-block-start: 0.65rem;
  }

  .quiz-result-metric__unit {
    font-size: 0.48em;
    font-weight: 750;
    letter-spacing: 0.02em;
  }

  .quiz-bmi-gauge {
    position: relative;
    block-size: 0.65rem;
    margin-block-start: 1.2rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #5b63f6 0%, #65baf4 24%, #8bd7b3 46%, #f4dd87 68%, #ff956a 84%, #ef3e5e 100%);
  }

  .quiz-bmi-gauge__marker {
    position: absolute;
    inset-block-start: 50%;
    inline-size: 1rem;
    block-size: 1rem;
    border: 0.18rem solid #fff;
    border-radius: 50%;
    background: #171619;
    box-shadow: 0 0 0 2px rgb(0 0 0 / 35%);
    transform: translate(-50%, -50%);
  }

  .quiz-bmi-gauge__labels {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 0.45rem;
    color: #9d99a1;
    font-size: 0.72rem;
  }

  .quiz-result-metric__status {
    display: block;
    margin-block-start: 1rem;
    color: var(--of-mint-400);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    line-height: 1.3;
  }

  .quiz-result-metric__description,
  .quiz-result-metric__detail,
  .quiz-result-metric__details,
  .quiz-result-metric__timeline-note {
    margin: 0.35rem 0 0;
    color: #aaa6ae;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .quiz-result-metric__detail {
    color: #d2ced5;
  }

  .quiz-result-metric__details {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 0.9rem;
    border-block-start: 1px solid #3b393f;
    padding-block-start: 0.8rem;
  }

  .quiz-result-metric__details p {
    margin: 0;
  }

  .quiz-water-cups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
    gap: 0.35rem;
    max-inline-size: 19rem;
    margin-block-start: 1.2rem;
  }

  .quiz-water-cups__cup {
    position: relative;
    block-size: 2.2rem;
    border: 1px solid #d9d8dc;
    border-block-start-width: 2px;
    border-radius: 0.18rem 0.18rem 0.4rem 0.4rem;
    overflow: hidden;
    transform: perspective(2rem) rotateX(-4deg);
  }

  .quiz-water-cups__cup::after {
    position: absolute;
    inset: 34% 0.15rem 0.15rem;
    border-radius: 0.1rem 0.1rem 0.28rem 0.28rem;
    background: linear-gradient(180deg, #77c7ff, #4b8eea);
    content: "";
  }

  .quiz-result-metric--timeline {
    display: grid;
    grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1.45fr);
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-block-start: 1rem;
    border-color: rgb(var(--quiz-mint-rgb) / 28%);
    background: rgb(var(--quiz-mint-rgb) / 5%);
  }

  .quiz-result-metric__timeline-value {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .quiz-result-metric__timeline-note {
    grid-column: 2;
    margin: 0;
  }

  .quiz-result-metric__timeline-note.is-feasible {
    color: var(--of-mint-400);
  }

  .quiz-result-metric__timeline-note.is-tight {
    color: #ff986e;
  }

  .quiz-result-metrics__warnings {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0 0;
    border-inline-start: 3px solid var(--of-orange-400);
    padding: 0.8rem 1rem 0.8rem 2rem;
    background: rgb(255 102 40 / 7%);
    color: #c7c3ca;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .quiz-result-metrics__unavailable {
    margin: 1rem 0 0;
    border: 1px solid #4c3940;
    border-radius: 0.85rem;
    padding: 1rem;
    background: rgb(255 102 40 / 7%);
    color: #d2ced5;
    text-align: center;
  }

  .quiz-result-metrics__method,
  .quiz-result-metrics__safety,
  .quiz-result__section-body {
    max-inline-size: 48rem;
    margin: 0.9rem auto 0;
    color: #8f8b93;
    font-size: 0.78rem;
    line-height: 1.55;
    text-align: center;
  }

  .quiz-result-metrics__safety {
    color: #b6b2b9;
  }

  .quiz-result__content-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
  }

  .quiz-result__content-item {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-inline-size: 0;
    min-block-size: 9rem;
    border: 1px solid #37353a;
    border-radius: 0.9rem;
    padding: 1.1rem;
    background: #1d1c1f;
  }

  .quiz-result__content-title {
    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
  }

  .quiz-result__content-body {
    color: #9d99a1;
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .quiz-result__what-you-get .quiz-result__content-item::before {
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    place-items: center;
    margin-block-end: 0.2rem;
    border-radius: 50%;
    background: rgb(var(--quiz-mint-rgb) / 12%);
    color: var(--of-mint-400);
    content: "✓";
    font-weight: 900;
  }

  .quiz-result__roadmap .quiz-result__content-list {
    counter-reset: onlyfit-roadmap;
  }

  .quiz-result__roadmap .quiz-result__content-item {
    counter-increment: onlyfit-roadmap;
    border-color: rgb(98 93 245 / 34%);
    background: linear-gradient(145deg, rgb(98 93 245 / 10%), #1d1c1f 62%);
  }

  .quiz-result__roadmap .quiz-result__content-item::before {
    color: var(--of-violet-300, #9c98ff);
    content: "0" counter(onlyfit-roadmap);
    font: 850 0.78rem/1 var(--of-font-tech);
    letter-spacing: 0.08em;
  }

  .quiz-result__evidence .quiz-result__content-item {
    min-block-size: 6rem;
    border-inline-start: 3px solid var(--of-mint-400);
    background: #211f23;
  }

  .quiz-result__target-estimates {
    --target-plan-surface: #242128;
    display: grid;
    grid-template-areas:
      "title visual"
      "list visual";
    grid-template-columns: minmax(0, 0.92fr) minmax(19rem, 1.08fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid #363439;
    border-radius: 1rem;
    padding: clamp(1.35rem, 3.4vw, 2.4rem);
    background: var(--target-plan-surface);
    box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 10%);
  }

  .quiz-result__target-estimates > .quiz-result__section-title {
    grid-area: title;
    align-self: start;
    max-inline-size: 18ch;
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
    text-align: start;
    text-wrap: balance;
  }

  .quiz-result__target-estimates > .quiz-result__section-title::after {
    display: block;
    inline-size: 3.25rem;
    block-size: 2px;
    margin-block-start: 1rem;
    background: #829b90;
    content: "";
  }

  .quiz-result__target-estimates-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
    margin-block-start: 1rem;
  }

  .quiz-result__target-estimates-layout.has-visual {
    display: contents;
  }

  .quiz-result__target-estimates-list {
    position: relative;
    grid-area: list;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    margin: 1.5rem 0 0 0.8rem;
    border: 0;
    border-inline-start: 1px solid #48454a;
    border-radius: 0;
    padding: 0.15rem 0;
    background: transparent;
    counter-reset: target-estimate;
    list-style: none;
  }

  .quiz-result__target-estimate {
    position: relative;
    display: grid;
    min-block-size: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    align-content: center;
    border: 0;
    border-radius: 0;
    padding-block: 0.85rem;
    padding-inline: 2.25rem 0;
    background: transparent;
    counter-increment: target-estimate;
  }

  .quiz-result__target-estimate + .quiz-result__target-estimate {
    margin-block-start: 0.7rem;
    border-block-start: 0;
  }

  .quiz-result__target-estimate::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -0.82rem;
    display: grid;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    place-items: center;
    border: 1px solid #777279;
    border-radius: 50%;
    background: var(--target-plan-surface);
    color: #c8c4ca;
    content: "0" counter(target-estimate);
    font: 750 0.58rem/1 var(--of-font-tech);
    letter-spacing: 0.03em;
    transform: translateY(-50%);
  }

  .quiz-result__target-estimate-label,
  .quiz-result__target-estimate-value {
    grid-column: 1;
  }

  .quiz-result__target-estimate-label {
    color: #f4f2f5;
    font-family: var(--of-font-sans);
    font-size: clamp(1.02rem, 1.55vw, 1.22rem);
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.25;
    text-transform: none;
  }

  .quiz-result__target-estimate-value {
    color: #aaa6af;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .quiz-result__target-estimates-visual {
    position: relative;
    grid-area: visual;
    display: grid;
    min-block-size: 31rem;
    min-inline-size: 0;
    place-items: center;
    isolation: isolate;
  }

  .quiz-result__target-estimates-halo {
    position: absolute;
    inline-size: min(32rem, 100%);
    aspect-ratio: 1;
    border-radius: 42% 58% 65% 35% / 36% 38% 62% 64%;
    background: var(--of-gradient-brand);
    box-shadow: 0 3rem 6rem rgb(56 35 189 / 38%);
    transform: rotate(-7deg);
  }

  .quiz-result__target-estimates-phone {
    position: relative;
    z-index: 1;
    display: grid;
    inline-size: min(22rem, 68vw, 100%);
    justify-self: center;
    overflow: hidden;
    margin: 0;
    border: 0.45rem solid var(--of-color-page-deep);
    border-radius: clamp(2.25rem, 8vw, 3.5rem);
    background: var(--of-color-page);
    box-shadow:
      0 2.5rem 5rem rgb(7 5 9 / 52%),
      0 0 0 1px rgb(255 255 255 / 10%);
  }

  .quiz-result__target-estimates-slide {
    display: block;
    grid-area: 1 / 1;
    min-inline-size: 0;
    inline-size: 100%;
    background: #080d12;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  .quiz-result__target-estimates-slide.is-active {
    z-index: 1;
    opacity: 1;
  }

  .quiz-result__target-estimates-slide img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .quiz-pdf-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-block-start: 1.5rem;
    border: 1px solid #46414e;
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
    background: #242128;
    box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 12%);
  }

  .quiz-pdf-preview::before {
    position: absolute;
    z-index: -1;
    inset: 15% -20% auto auto;
    inline-size: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(108 91 240 / 18%), transparent 70%);
    content: "";
    pointer-events: none;
  }

  .quiz-pdf-preview__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--of-mint-400);
    font: 800 0.78rem/1.3 var(--of-font-tech);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .quiz-pdf-preview__eyebrow svg,
  .quiz-pdf-gallery__brand svg {
    flex: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  .quiz-pdf-preview__eyebrow-dot {
    color: #918a98;
  }

  .quiz-pdf-preview__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.1;
    text-wrap: balance;
    white-space: nowrap;
  }

  .quiz-pdf-preview__intro {
    max-inline-size: 54ch;
    margin: 0.85rem 0 1.7rem;
    color: #bbb5c3;
    font-size: 0.94rem;
    line-height: 1.6;
  }

  .quiz-pdf-preview__pages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.55rem, 1.7vw, 1.1rem);
  }

  .quiz-pdf-preview__page {
    min-inline-size: 0;
    margin: 0;
  }

  .quiz-pdf-preview__page-button {
    display: block;
    inline-size: 100%;
    overflow: hidden;
    border: 1px solid #77707e;
    border-radius: 0.5rem;
    padding: 0;
    background: #f0edf5;
    box-shadow: 0 0.9rem 1.6rem rgb(0 0 0 / 25%);
    cursor: zoom-in;
    transition: transform 180ms ease, border-color 180ms ease;
  }

  .quiz-pdf-preview__page-button:hover,
  .quiz-pdf-preview__page-button:focus-visible {
    border-color: var(--of-mint-400);
    transform: translateY(-0.35rem);
  }

  .quiz-pdf-preview__page-button:focus-visible,
  .quiz-pdf-gallery button:focus-visible {
    outline: 3px solid var(--of-mint-400);
    outline-offset: 3px;
  }

  .quiz-pdf-preview__page-button img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 595 / 842;
    object-fit: cover;
  }

  .quiz-pdf-preview__caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.8rem;
    color: #e9e6ed;
    font-size: 0.83rem;
    font-weight: 700;
  }

  .quiz-pdf-preview__caption-number {
    display: grid;
    flex: none;
    inline-size: 1.45rem;
    block-size: 1.45rem;
    place-items: center;
    border-radius: 50%;
    background: #6660ed;
    color: #fff;
    font: 800 0.7rem/1 var(--of-font-tech);
  }

  .quiz-pdf-preview__delivery {
    margin-block-start: 1.75rem;
  }

  .quiz-pdf-preview__delivery-title {
    margin: 0;
    color: var(--of-mint-400);
    font: 800 0.8rem/1.5 var(--of-font-tech);
    letter-spacing: 0.065em;
  }

  .quiz-pdf-preview__delivery-copy {
    max-inline-size: 66ch;
    margin: 0.65rem 0 1rem;
    color: #d3ced8;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .quiz-pdf-preview__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .quiz-pdf-preview__channel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #544d5b;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    color: #f3f0f5;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .quiz-pdf-preview__channel svg {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--of-mint-400);
  }

  .quiz-pdf-gallery {
    position: fixed;
    z-index: 1000;
    inset: 0;
    inline-size: min(72rem, calc(100vw - 2rem));
    block-size: calc(100vh - 2rem);
    block-size: calc(100dvh - 2rem);
    max-inline-size: none;
    max-block-size: none;
    margin: auto;
    border: 1px solid #514b5b;
    border-radius: 1rem;
    padding: 0;
    overflow: hidden;
    background: #2d2934;
    box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 45%);
    color: #fff;
  }

  .quiz-pdf-gallery::backdrop {
    background: rgb(5 4 10 / 78%);
  }

  .quiz-pdf-gallery__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    inline-size: 100%;
    block-size: 100%;
    padding: max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }

  .quiz-pdf-gallery__header,
  .quiz-pdf-gallery__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .quiz-pdf-gallery__footer {
    inline-size: 100%;
    max-inline-size: 42rem;
    margin-inline: auto;
  }

  .quiz-pdf-gallery__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--of-mint-400);
    font: 800 0.78rem/1.3 var(--of-font-tech);
    letter-spacing: 0.12em;
  }

  .quiz-pdf-gallery__close,
  .quiz-pdf-gallery__nav {
    flex: none;
    border: 1px solid #5c5765;
    border-radius: 999px;
    padding: 0.65rem 0.9rem;
    background: #26222d;
    color: #fff;
    font: 700 0.85rem/1.1 var(--of-font-sans);
    cursor: pointer;
  }

  .quiz-pdf-gallery__close {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
  }

  .quiz-pdf-gallery__close svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
  }

  .quiz-pdf-gallery__close:hover,
  .quiz-pdf-gallery__nav:hover {
    border-color: var(--of-mint-400);
  }

  .quiz-pdf-gallery__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-inline-size: 0;
    min-block-size: 0;
    place-items: center;
    overflow: hidden;
  }

  .quiz-pdf-gallery__stage img {
    display: block;
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .quiz-pdf-gallery__location {
    display: grid;
    min-inline-size: 0;
    gap: 0.2rem;
    text-align: center;
  }

  .quiz-pdf-gallery__location strong {
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quiz-pdf-gallery__location span {
    color: #aaa5b2;
    font-size: 0.75rem;
  }

  .quiz-result__safety {
    margin-block: 1.5rem;
    border-inline-start: 3px solid var(--of-orange-400);
    padding: 0.9rem 1rem;
    background: #242326;
  }

  .quiz-result__safety-copy {
    margin: 0;
    color: #aaa7ad;
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .quiz-transformation__stat:nth-child(4n + 1),
  .quiz-transformation__stat:nth-child(4n + 2) {
    background: rgb(255 255 255 / 2%);
  }

  .quiz-transformation__stat:nth-child(2n + 1) {
    border-inline-start: 0;
  }

  .quiz-transformation__stat:nth-child(n + 3) {
    border-block-start: 1px solid #363439;
  }

  @media (hover: hover) {
    .quiz-result__content-item,
    .quiz-result-metric {
      transition: border-color 150ms ease, transform 150ms ease;
    }

    .quiz-result__content-item:hover,
    .quiz-result-metric:hover {
      border-color: #58545d;
      transform: translateY(-2px);
    }
  }

  [dir="rtl"] #quizBack svg {
    transform: scaleX(-1);
  }

  [dir="rtl"] .quiz-options--body-map .quiz-body-map__hotspot,
  [dir="rtl"] .quiz-options--body-map .quiz-body-map__hotspot:hover {
    transform: translate(50%, -50%);
  }

  [dir="rtl"] .quiz-transformation__arrow {
    transform: translate(-50%, -50%) scaleX(-1);
  }

  @media (max-width: 47.99rem) {
    .quiz-pdf-preview__title {
      white-space: normal;
    }

    .funnel-header__inner,
    .funnel-shell {
      inline-size: min(100% - 2rem, 32rem);
    }

    .funnel-header__inner {
      min-block-size: 3.75rem;
    }

    .funnel-shell {
      min-block-size: calc(100svh - 3.75rem);
      padding-block: 0.8rem 2rem;
    }

    .funnel-shell__topbar {
      grid-template-columns: 2rem minmax(0, 1fr);
      gap: 0.6rem;
      margin-block-end: 1.25rem;
    }

    .funnel-progress {
      grid-column: 2;
    }

    #quizApp[data-layout="entry"] .funnel-shell__grid,
    #quizApp[data-layout="story"] .funnel-shell__grid,
    #quizApp[data-layout="plans"] .funnel-shell__grid {
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      gap: 1rem;
      min-block-size: 0;
    }

    #quizApp[data-layout="entry"] .funnel-artwork,
    #quizApp[data-layout="story"] .funnel-artwork,
    #quizApp[data-layout="plans"] .funnel-artwork {
      grid-column: 1;
      grid-row: 1;
      block-size: clamp(13rem, 38svh, 20rem);
    }

    #quizApp[data-layout="plans"] .funnel-artwork {
      display: none;
    }

    #quizApp[data-layout="entry"] .funnel-panel,
    #quizApp[data-layout="story"] .funnel-panel,
    #quizApp[data-layout="plans"] .funnel-panel {
      grid-column: 1;
      grid-row: 2;
    }

    #quizApp[data-layout="plans"] .funnel-panel {
      grid-row: 1;
    }

    #quizApp[data-layout="entry"] .quiz-question__title {
      font-size: clamp(2.25rem, 12vw, 3.35rem);
    }

    /* Keep the age choices in the reduced viewport of social in-app browsers. */
    #quizApp[data-view="age"].funnel-shell {
      min-block-size: 0;
      padding-block: 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    }

    #quizApp[data-view="age"] .funnel-shell__grid {
      display: block;
      min-block-size: 0;
    }

    #quizApp[data-view="age"] .funnel-panel {
      min-block-size: 0;
      padding-block: 0 0.5rem;
    }

    #quizApp[data-view="age"] .quiz-question__header {
      margin-block-end: 0.75rem;
    }

    #quizApp[data-view="age"] .quiz-step__eyebrow {
      margin-block-end: 0.4rem;
    }

    #quizApp[data-view="age"] .quiz-question__title {
      font-size: clamp(1.75rem, 8vw, 2.25rem);
      line-height: 1.12;
      letter-spacing: -0.035em;
      text-transform: none;
    }

    #quizApp[data-view="age"] .quiz-question__body {
      margin-block-start: 0.5rem;
      font-size: 0.95rem;
    }

    #quizApp[data-view="age"] .quiz-options--age {
      gap: 0.55rem;
    }

    #quizApp[data-view="age"] .quiz-options--age .quiz-option {
      min-block-size: 6rem;
      grid-template-columns: minmax(0, 1fr) 1.75rem;
      padding: 0.5rem 0.7rem;
    }

    #quizApp[data-view="age"] .quiz-options--age .quiz-option::before {
      inline-size: 1.75rem;
      block-size: 1.75rem;
    }

    #quizApp[data-view="age"] .quiz-options--age .quiz-option__title {
      font-size: clamp(1.125rem, 5.5vw, 1.375rem);
      line-height: 1.15;
    }

    .quiz-question__title,
    .quiz-processing .quiz-question__title,
    .quiz-result .quiz-question__title,
    .quiz-plans .quiz-question__title {
      font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .quiz-question__header {
      margin-block-end: 1.35rem;
    }

    #quizApp[data-step="food_preferences"] .quiz-option-group {
      grid-template-columns: minmax(0, 1fr);
    }

    .quiz-options--body-map {
      min-block-size: clamp(28rem, 132vw, 33rem);
    }

    .quiz-body-map__visual {
      inset: 0.75rem;
    }

    .quiz-body-map__figure {
      inline-size: min(84%, 20rem);
    }

    .quiz-options--body-map .quiz-body-map__hotspot {
      inline-size: clamp(7.2rem, 37%, 9.5rem);
      min-block-size: 3rem;
      padding: 0.45rem 0.55rem;
    }

    .quiz-options--body-map .quiz-body-map__hotspot[data-position="full-body"] {
      inline-size: clamp(8.4rem, 39%, 9.5rem);
    }

    .quiz-options--body-map .quiz-option__title {
      font-size: 0.75rem;
    }

    .quiz-dialog-backdrop {
      align-items: center;
      padding-inline: 0.75rem;
    }

    .quiz-dialog {
      max-block-size: calc(
        100svh
        - max(1rem, env(safe-area-inset-top))
        - max(1rem, env(safe-area-inset-bottom))
      );
      border-end-start-radius: 1.1rem;
      border-end-end-radius: 1.1rem;
      padding: 1.15rem;
      padding-block-end: max(1.15rem, env(safe-area-inset-bottom));
    }

    .quiz-dialog__actions {
      flex-direction: column;
    }

    .quiz-dialog__accept,
    .quiz-dialog__decline {
      inline-size: 100%;
    }

    .quiz-result-metrics__cards,
    .quiz-result__target-estimates-list,
    .quiz-result__content-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .quiz-result__target-estimates {
      grid-template-areas:
        "title"
        "list"
        "visual";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      row-gap: 0;
      padding: 1rem;
    }

    .quiz-result__target-estimates > .quiz-result__section-title {
      max-inline-size: 20ch;
      font-size: clamp(1.45rem, 7.5vw, 2rem);
    }

    .quiz-result__target-estimates-layout,
    .quiz-result__target-estimates-layout.has-visual {
      display: contents;
    }

    .quiz-result__target-estimates-visual {
      grid-area: visual;
      min-block-size: 0;
      margin-block-start: 1.25rem;
    }

    .quiz-result__target-estimates-list {
      grid-area: list;
      grid-template-rows: repeat(4, auto);
      margin-block-start: 1.5rem;
    }

    .quiz-pdf-preview__pages {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.1rem;
    }

    .quiz-result__target-estimate {
      padding-block: 0.75rem;
    }

    .quiz-result-metric,
    .quiz-result__target-estimate,
    .quiz-result__content-item {
      min-block-size: 0;
      text-align: start;
    }

    .quiz-result-metric__heading {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .quiz-result-metric__badge {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .quiz-result-metric--timeline {
      grid-template-columns: minmax(0, 1fr);
    }

    .quiz-result-metric__timeline-note {
      grid-column: 1;
    }

    .quiz-transformation__stat {
      padding: 0.8rem;
    }

    .quiz-muscle-bar {
      grid-template-columns: repeat(5, minmax(0.8rem, 1fr));
      gap: 0.22rem;
    }

    .quiz-options[data-layout="visual-list"] .quiz-option--visual {
      min-block-size: 9rem;
    }

    .quiz-transformation__figure {
      grid-template-rows: 14rem auto;
    }

    .quiz-transformation__visuals {
      gap: 0;
    }

    .quiz-transformation__arrow {
      font-size: 2rem;
    }

    .quiz-result__summary {
      grid-template-columns: 1fr;
    }

    .quiz-result__summary-item {
      min-block-size: 0;
      padding: 0.85rem;
    }

    .quiz-result__actions {
      flex-direction: column;
    }

    .quiz-plan-card__main {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 0.65rem;
      padding: 0.85rem;
    }

    .quiz-plan-card__daily-amount {
      font-size: 1.45rem;
    }

    .quiz-plan-card__name {
      font-size: 0.9rem;
    }

    .funnel-actions {
      position: sticky;
      inset-block-end: 0;
      z-index: 10;
      margin-inline: -1rem;
      padding: 1rem;
      padding-block-end: max(1rem, env(safe-area-inset-bottom));
      background: transparent;
    }

    .funnel-local-note {
      font-size: 0.75rem;
    }
  }

  /* Editorial result groups: quiet structure instead of synthetic card chrome. */
  .quiz-result {
    --result-rule: rgb(255 255 255 / 12%);
    --result-rule-soft: rgb(255 255 255 / 8%);
    --result-surface-quiet: rgb(12 10 14 / 54%);
    --result-copy: #cfccd2;
    --result-muted: #a39ea7;
  }

  .quiz-result .quiz-result__summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    margin-block: 1.25rem clamp(3rem, 7vw, 4.75rem);
    border: 1px solid var(--result-rule);
    border-radius: 0.75rem;
    padding: 0;
    background: var(--result-surface-quiet);
  }

  .quiz-result .quiz-result__summary-item {
    position: relative;
    min-block-size: 7.7rem;
    align-content: start;
    gap: 0.5rem;
    border: 0;
    border-radius: 0;
    padding: 1.2rem clamp(0.9rem, 1.6vw, 1.2rem);
    background: transparent;
    box-shadow: none;
  }

  .quiz-result .quiz-result__summary-item + .quiz-result__summary-item {
    border-inline-start: 1px solid var(--result-rule-soft);
  }

  .quiz-result .quiz-result__summary-item::before {
    inline-size: 1.5rem;
    block-size: 2px;
    margin-block-end: 0.15rem;
    background: #9c98ff;
    content: "";
  }

  .quiz-result .quiz-result__summary dt {
    color: var(--result-muted);
    font: 700 0.73rem/1.35 var(--of-font-sans);
    letter-spacing: 0.01em;
    text-transform: none;
  }

  .quiz-result .quiz-result__summary dd {
    color: #f7f4f8;
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    font-weight: 780;
    line-height: 1.32;
  }

  .quiz-result__what-you-get .quiz-result__content-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-block-start: 1.3rem;
    border-block: 1px solid var(--result-rule);
    counter-reset: included-item;
  }

  .quiz-result__what-you-get .quiz-result__content-item {
    min-block-size: 0;
    gap: 0.6rem;
    border: 0;
    border-radius: 0;
    padding: 1.45rem clamp(1rem, 2.2vw, 1.55rem) 1.6rem;
    background: transparent;
    box-shadow: none;
    counter-increment: included-item;
    transition: none;
  }

  .quiz-result__what-you-get .quiz-result__content-item + .quiz-result__content-item {
    border-inline-start: 1px solid var(--result-rule-soft);
  }

  .quiz-result__what-you-get .quiz-result__content-item::before {
    display: block;
    inline-size: auto;
    block-size: auto;
    margin-block-end: 0.4rem;
    border-radius: 0;
    background: transparent;
    color: var(--of-orange-400);
    content: "0" counter(included-item);
    font: 800 0.72rem/1 var(--of-font-tech);
    letter-spacing: 0.08em;
  }

  .quiz-result__what-you-get .quiz-result__content-title {
    font-size: clamp(1.02rem, 1.7vw, 1.16rem);
    line-height: 1.3;
  }

  .quiz-result__what-you-get .quiz-result__content-body {
    color: var(--result-muted);
    font-size: 0.86rem;
    line-height: 1.62;
  }

  .quiz-result__what-you-get .quiz-result__content-item:hover {
    border-color: transparent;
    transform: none;
  }

  @media (max-width: 56rem) and (min-width: 48rem) {
    .quiz-result__what-you-get .quiz-result__content-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-result__what-you-get .quiz-result__content-item + .quiz-result__content-item {
      border-inline-start: 0;
    }

    .quiz-result__what-you-get .quiz-result__content-item:nth-child(even) {
      border-inline-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result__what-you-get .quiz-result__content-item:nth-child(n + 3) {
      border-block-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result .quiz-result__summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-result .quiz-result__summary-item {
      border-inline-start: 0;
    }

    .quiz-result .quiz-result__summary-item:nth-child(even) {
      border-inline-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result .quiz-result__summary-item:nth-child(n + 3) {
      border-block-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result .quiz-result__summary-item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 47.99rem) {
    .quiz-result .quiz-result__summary,
    .quiz-result__what-you-get .quiz-result__content-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .quiz-result .quiz-result__summary-item + .quiz-result__summary-item,
    .quiz-result__what-you-get .quiz-result__content-item + .quiz-result__content-item {
      border-inline-start: 0;
      border-block-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result .quiz-result__summary-item:last-child:nth-child(odd) {
      grid-column: auto;
    }

    .quiz-result .quiz-result__summary-item {
      min-block-size: 0;
    }
  }

  /* Keep the purchase path near the summary; detailed estimates stay optional. */
  .quiz-result > .quiz-question__header {
    margin-block-end: 0;
  }

  .quiz-result__overview {
    margin-block-start: 0;
  }

  .quiz-result__overview > h2,
  .quiz-result__faq > h2 {
    margin-block: 0 1rem;
    color: #fff;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    text-align: start;
    text-wrap: balance;
  }

  .quiz-result .quiz-result__overview .quiz-result__summary {
    margin-block: 0;
  }

  .quiz-result .quiz-result__overview .quiz-result__summary-item {
    min-block-size: 0;
  }

  .quiz-result__actions--primary {
    margin-block: 0.5rem 1rem;
  }

  .quiz-result > #quizInlinePlans {
    max-inline-size: 29.375rem;
    margin: 0 auto 3rem;
    scroll-margin-block-start: 1.5rem;
    scroll-margin-block-end: 1.5rem;
  }

  .quiz-result__details {
    margin-block: 2rem 3rem;
    border-block: 1px solid var(--result-rule);
    padding-block: 1.25rem;
    scroll-margin-block-start: 1.5rem;
  }

  .quiz-result__details > summary,
  .quiz-result__faq details > summary {
    min-block-size: 2.75rem;
    padding-block: 0.55rem;
    color: #f7f4f8;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .quiz-result__details > summary::marker,
  .quiz-result__faq details > summary::marker {
    color: var(--of-mint-400);
  }

  .quiz-result__details[open] > summary {
    margin-block-end: 1rem;
  }

  .quiz-result__faq {
    max-inline-size: 44rem;
    margin: 3rem auto 2rem;
    scroll-margin-block-start: 1.5rem;
  }

  .quiz-result__faq details {
    border-block-end: 1px solid var(--result-rule);
    padding-block: 0.5rem;
  }

  .quiz-result__faq details:first-of-type {
    border-block-start: 1px solid var(--result-rule);
  }

  .quiz-result__faq details > p {
    margin: 0.25rem 0 1rem;
    color: var(--result-copy);
    font-size: 0.95rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .quiz-result__details > summary:focus-visible,
  .quiz-result__faq details > summary:focus-visible,
  .quiz-result__actions--primary > button:focus-visible,
  .quiz-result__sticky-cta:focus-visible,
  #quizInlinePlans:focus-visible {
    outline: 2px solid var(--of-mint-400);
    outline-offset: 0.3rem;
  }

  .quiz-result__sticky-cta {
    display: none;
  }

  @media (max-width: 47.99rem) {
    #quizApp[data-view="result"] {
      padding-block-end: calc(6.5rem + env(safe-area-inset-bottom));
    }

    .quiz-result > #quizInlinePlans {
      scroll-margin-block-start: 5.5rem;
    }

    /* A transformed ancestor would anchor a fixed CTA to the content. */
    #quizApp[data-view="result"] #quizContent {
      animation: none;
      transform: none;
    }

    .quiz-result .quiz-result__overview .quiz-result__summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-result .quiz-result__overview .quiz-result__summary-item {
      gap: 0.35rem;
      border-block-start: 0;
      border-inline-start: 0;
      padding: 0.75rem 0.8rem;
    }

    .quiz-result .quiz-result__overview .quiz-result__summary-item:nth-child(even) {
      border-inline-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result .quiz-result__overview .quiz-result__summary-item:nth-child(n + 3) {
      border-block-start: 1px solid var(--result-rule-soft);
    }

    .quiz-result .quiz-result__overview .quiz-result__summary-item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .quiz-result .quiz-result__overview .quiz-result__summary dd {
      font-size: 0.96rem;
      line-height: 1.4;
    }

    .quiz-result__sticky-cta {
      position: fixed;
      z-index: 40;
      inset-inline-start: max(1rem, env(safe-area-inset-left));
      inset-inline-end: max(1rem, env(safe-area-inset-right));
      inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: auto;
      max-inline-size: 29.375rem;
      min-inline-size: 0;
      min-block-size: 3.5rem;
      margin-inline: auto;
      border: 0;
      border-radius: var(--of-radius-pill);
      padding: 0.8rem 1.25rem;
      background: var(--of-gradient-cta);
      color: #110e12;
      font: 800 0.95rem/1.35 var(--of-font-sans);
      text-align: center;
      white-space: normal;
      box-shadow: 0 0 0 0.5rem #111012, 0 0.6rem 2rem rgb(0 0 0 / 35%);
      cursor: pointer;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quiz-result__target-estimates-slide {
      transition: none;
    }

    .quiz-pdf-preview__page-button {
      transition: none;
    }

    #quizContent,
    .quiz-dialog-backdrop,
    .quiz-dialog {
      animation: none !important;
    }

    .quiz-rating-choice,
    .quiz-body-map__highlight,
    .quiz-processing__progress-bar,
    .quiz-result__content-item,
    .quiz-result-metric,
    .quiz-result__target-estimate {
      transition: none !important;
    }

    .quiz-result__content-item:hover,
    .quiz-result-metric:hover,
    .quiz-result__target-estimate:hover {
      transform: none;
    }
  }

  @media (max-width: 47.99rem) and (max-height: 40rem) and (orientation: portrait) {
    #quizApp[data-view="age"] .funnel-shell__topbar,
    #quizApp[data-layout="visual-grid"] .funnel-shell__topbar {
      margin-block-end: 0.75rem;
    }

    #quizApp[data-layout="visual-grid"] .quiz-question__header {
      margin-block-end: 0.9rem;
    }

    #quizApp[data-layout="visual-grid"] .quiz-question__title {
      font-size: clamp(1.5rem, 7vw, 2rem);
    }
  }

  @media (max-width: 23.99rem) {
    .quiz-options[data-layout="visual-grid"] {
      --quiz-portrait-row-height: clamp(4rem, 11.5svh, 6.125rem);

      gap: 0.5rem;
    }

    .quiz-options[data-layout="visual-grid"] .quiz-option--visual {
      grid-template-columns: 6rem minmax(0, 1fr) 1.75rem;
      column-gap: 0.75rem;
      padding-inline-end: 0.75rem;
    }

    .quiz-options[data-layout="visual-grid"] .quiz-option__icon--image {
      inline-size: 6rem;
    }

    .quiz-option-group {
      grid-template-columns: minmax(0, 1fr);
    }

    .quiz-rating-choice {
      min-block-size: 3.25rem;
      gap: 0.1875rem;
      padding-inline: 0.125rem;
    }

    .quiz-rating-choice__check {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }

    .quiz-rating-card {
      grid-template-columns: 21% minmax(0, 1fr);
    }

    .quiz-rating-card__content {
      padding: 0.75rem 0.25rem;
    }

    .quiz-rating-choice__label {
      font-size: 0.6875rem;
    }

    .quiz-options--body-map .quiz-body-map__hotspot {
      inline-size: 7rem;
    }
  }
}

/* Approved result-page design. Scoped to the web result, never quiz/native screens. */
@layer funnel-result-page {
  body[data-funnel-view="result"] { background: #100d15; }
  body[data-funnel-view="result"] .funnel-header { position: relative; border: 0; background: #100d15; }
  body[data-funnel-view="result"] .funnel-header__inner { inline-size: min(calc(100% - 40px), 390px); min-block-size: 70px; }
  body[data-funnel-view="result"] .funnel-brand { inline-size: 118px; }
  #quizApp[data-view="result"] { inline-size: min(calc(100% - 40px), 390px); padding-block: 0 24px; }
  #quizApp[data-view="result"] .funnel-shell__grid { grid-template-columns: minmax(0, 1fr); }
  #quizApp[data-view="result"] .funnel-stage { padding: 0; }
  #quizApp[data-view="result"] #quizError { margin: 0; }
  .quiz-result--redesign { --quiz-report-section-gap: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--quiz-report-section-gap); inline-size: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; font: 14px/1.5 var(--of-font-sans); }
  .quiz-result--redesign svg { inline-size: 22px; block-size: 22px; flex-shrink: 0; }
  .quiz-report__title, .quiz-report__heading, .quiz-report__plans .quiz-question__title, .quiz-result--redesign .quiz-pdf-preview__title {
    color: #fff; font: 750 28px/1.13 var(--of-font-sans); letter-spacing: -1.1px; text-transform: none; text-align: center;
  }
  .quiz-report__title { font-size: 30px; max-inline-size: 340px; margin-inline: auto; }
  .quiz-report__heading, .quiz-result--redesign .quiz-pdf-preview__title { max-inline-size: 310px; margin-inline: auto; }
  .quiz-report__eyebrow, .quiz-report__plans .quiz-kicker {
    margin: 0 0 12px; color: var(--of-mint-400); font: 700 10px/1.5 var(--of-font-tech); letter-spacing: 1.8px; text-transform: uppercase; text-align: center;
  }
  .quiz-report__body, .quiz-result--redesign .quiz-pdf-preview__intro { margin: 12px auto 0; max-inline-size: 290px; color: #ada7b6; font-size: 13px; line-height: 1.55; text-align: center; }
  .quiz-report__comparison { border: 1px solid #443746; border-radius: 24px; overflow: hidden; background: #211b27; }
  .quiz-report__comparison-labels { display: grid; grid-template-columns: 1fr 1fr; padding-block: 12px; background: #19141d; font-size: 11px; font-weight: 750; letter-spacing: 1.6px; text-transform: uppercase; text-align: center; }
  .quiz-report__comparison-labels span + span { border-inline-start: 1px solid #544252; color: var(--of-mint-400); }
  .quiz-report__portraits { position: relative; display: flex; block-size: 265px; isolation: isolate; background: radial-gradient(ellipse at 18% 30%, #6a454340, transparent 65%), radial-gradient(ellipse at 95% 70%, #7268ef4d, transparent 68%), #2b2231; }
  .quiz-report__portraits::before, .quiz-report__portraits::after { content: ""; position: absolute; z-index: -1; inset: 0 26% 0 25%; background: #ffffff08; clip-path: polygon(0 0,52% 0,100% 50%,52% 100%,0 100%,47% 50%); }
  .quiz-report__portraits::after { transform: translateX(43px); }
  .quiz-report__portrait { position: relative; flex: 1; overflow: hidden; }
  .quiz-report__portrait img { position: absolute; block-size: 290px; inline-size: auto; max-inline-size: none; bottom: -20px; left: 50%; transform: translateX(-50%); }
  .quiz-report__direction { position: absolute; top: 46%; left: calc(50% - 17px); display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 1px solid #ffffff27; border-radius: 50%; background: #221b2ac9; color: var(--of-mint-400); }
  .quiz-report__direction svg { inline-size: 18px; block-size: 18px; }
  .quiz-report__weights { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
  .quiz-report__weights > div { padding: 14px 17px 16px; }
  .quiz-report__weights > div + div { border-inline-start: 1px solid #443746; }
  .quiz-report__weights dt { color: #c1b6c8; font-size: 11px; }
  .quiz-report__weights dd { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: -1px; }
  .quiz-report__weights > div:last-child dd { color: var(--of-mint-400); }
  .quiz-report__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 20px 0 0; background: #211d28; border: 1px solid #38323f; border-radius: 20px; overflow: hidden; }
  .quiz-report__fact { display: flex; align-items: flex-start; gap: 10px; min-block-size: 83px; padding: 17px 14px; }
  .quiz-report__fact:nth-child(odd) { border-inline-end: 1px solid #38323f; }
  .quiz-report__fact:nth-child(-n+2) { border-block-end: 1px solid #38323f; }
  .quiz-report__fact > svg { color: var(--of-mint-400); inline-size: 21px; margin-block-start: 4px; }
  .quiz-report__fact dt { color: #ada7b6; font-size: 11px; }
  .quiz-report__fact dd { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.3px; overflow-wrap: anywhere; }
  .quiz-report__fact-note { color: #aaa3b3; font-size: 9px; margin: 0; }
  .quiz-result--redesign .quiz-report__plans { display: block; padding: 0; margin: 0; border: 0; background: none; }
  .quiz-report__plans .quiz-question__header { margin-block-end: 20px; }
  .quiz-report__plans .quiz-question__title { font-size: 27px; max-inline-size: 300px; margin-inline: auto; }
  .quiz-report__plans .quiz-question__body { font-size: 12px; color: #ada7b6; margin-block-start: 9px; }
  .quiz-report__plans .quiz-plans__list { gap: 10px; }
  .quiz-report__plans .quiz-plan-card { border: 1px solid #49414f; border-radius: 17px; background: #201b25; }
  .quiz-report__plans .quiz-plan-card.is-selected { border: 2px solid var(--of-mint-400); background: var(--quiz-selected-surface); }
  .quiz-report__plans .quiz-plan-card__badge { display: none; background: var(--of-mint-400); color: #11231e; font-size: 9px; letter-spacing: 1.4px; font-weight: 800; padding: 6px; }
  .quiz-report__plans .is-selected .quiz-plan-card__badge { display: block; }
  .quiz-report__plans .quiz-plan-card__main { min-block-size: 79px; gap: 12px; padding: 17px 16px; }
  .quiz-report__plans .quiz-plan-card__marker { display: grid; place-items: center; inline-size: 21px; block-size: 21px; border: 1.5px solid #8b8395; box-shadow: none; background: none; }
  .quiz-report__plans .quiz-plan-card__marker svg { display: none; inline-size: 14px; block-size: 14px; stroke-width: 2.5; }
  .quiz-report__plans .is-selected .quiz-plan-card__marker { border-color: var(--of-mint-400); background: var(--of-mint-400); color: #173126; }
  .quiz-report__plans .is-selected .quiz-plan-card__marker svg { display: block; }
  .quiz-report__plans .quiz-plan-card__name { font-size: 15px; font-weight: 700; text-transform: none; }
  .quiz-report__plans .quiz-plan-card__term, .quiz-report__plans .quiz-plan-card__per-day { font-size: 10px; color: #aaa4b5; }
  .quiz-report__plans .quiz-plan-card__daily-amount { font-size: 26px; line-height: 1.1; letter-spacing: -.8px; }
  .quiz-report__plans .quiz-plan-card:has(input:focus-visible) { outline: 3px solid var(--of-mint-400); outline-offset: 3px; }
  .quiz-report__plans .quiz-plans__actions { display: block; margin: 20px 0 0; padding: 0; }
  /* Same styles and SVG as the existing quiz Continue button. */
  .quiz-report__plans .quiz-plans__continue { display: inline-flex; inline-size: 100%; min-block-size: 60px; gap: 12px; padding: 8px 24px; border: 0; border-radius: 999px; background: var(--of-gradient-cta); color: #110e12; font: 850 16px/1 var(--of-font-sans); letter-spacing: -.015em; text-transform: uppercase; box-shadow: none; }
  .quiz-report__plans .quiz-plans__continue .of-button__icon { inline-size: 40px; block-size: 40px; background: #0f0c13; color: #fff; }
  .quiz-report__plans .quiz-plans__continue .of-button__icon svg { inline-size: 20px; block-size: 20px; }
  .quiz-report__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 10px; color: #a9a2b4; }
  .quiz-report__secure svg { inline-size: 13px; block-size: 13px; color: var(--of-mint-400); }
  .quiz-report__routine-rows { margin-block-start: 23px; border: 1px solid #38323f; border-radius: 20px; overflow: hidden; background: #1b1721; }
  .quiz-report__routine-row { display: flex; align-items: center; gap: 18px; padding: 18px; }
  .quiz-report__routine-row + .quiz-report__routine-row { border-block-start: 1px solid #38323f; }
  .quiz-report__routine-value { flex: 0 0 105px; min-inline-size: 0; color: var(--of-mint-400); font-size: 24px; letter-spacing: -.7px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
  .quiz-report__routine-row:first-child .quiz-report__routine-value { font-size: 32px; }
  .quiz-report__routine-row > div > strong { font-size: 13px; }
  .quiz-report__routine-row p { color: #ada7b6; font-size: 11px; margin: 2px 0 0; }
  .quiz-report__app { overflow: hidden; }
  .quiz-report__app > .quiz-report__body { white-space: pre-line; }
  .quiz-report__app-tabs { display: flex; gap: 2px; padding: 4px; margin-block-start: 20px; border: 1px solid #38323f; border-radius: 30px; background: #1c1722; }
  .quiz-report__app-tabs button { flex: 1; min-inline-size: 0; padding: 8px 2px; border: 0; border-radius: 24px; background: none; color: #a9a1b5; font: 11px/1.5 var(--of-font-sans); cursor: pointer; }
  .quiz-report__app-tabs button.is-active { background: #38313f; color: var(--of-mint-400); }
  .quiz-report__phones { position: relative; isolation: isolate; block-size: 430px; margin-block-start: 23px; }
  .quiz-report__phones::before { content: ""; position: absolute; inset: 28% -25% 10%; z-index: -2; background: radial-gradient(ellipse,#6d55cf42,transparent 65%); }
  .quiz-report__phone { position: absolute; overflow: hidden; border: 3px solid #65606e; border-radius: 26px; background: #0e0c13; box-shadow: 0 25px 40px #0006; }
  .quiz-report__phone img { display: block; inline-size: 100%; block-size: auto; }
  .quiz-report__phone--center { z-index: 3; inline-size: 190px; block-size: 422px; top: 0; left: calc(50% - 95px); border-color: #a19ca8; box-shadow: 0 0 0 3px #29242f,0 25px 40px #0008; }
  .quiz-report__phone--center::before { content: ""; position: absolute; top: 5px; left: calc(50% - 26px); inline-size: 52px; block-size: 10px; background: #07060a; border-radius: 10px; }
  .quiz-report__phone--side { z-index: 1; inline-size: 146px; block-size: 324px; top: 58px; opacity: .6; }
  .quiz-report__phone--left { left: -13px; transform: rotate(-7deg); }
  .quiz-report__phone--right { right: -13px; transform: rotate(7deg); }
  .quiz-report__app-caption { margin: 15px 0 10px; font-size: 12px; font-weight: 600; text-align: center; }
  .quiz-report__carousel-nav { display: flex; align-items: center; justify-content: space-between; padding-inline: 42px; }
  .quiz-report__carousel-nav button { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border: 1px solid #403748; border-radius: 50%; background: #211c29; color: #fff; cursor: pointer; }
  .quiz-report__carousel-nav svg { inline-size: 15px; block-size: 15px; }
  .quiz-report__carousel-previous svg { transform: rotate(180deg); }
  .quiz-report__dots { display: flex; gap: 6px; }
  .quiz-report__dots i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: #584f64; }
  .quiz-report__dots i.is-active { inline-size: 17px; border-radius: 4px; background: var(--of-mint-400); }
  /* Keep the divider inside the clipped PDF frame without changing the content gap. */
  .quiz-result--redesign .quiz-pdf-preview { display: block; margin: calc(var(--quiz-report-section-gap) / -2) 0 0; padding: calc(var(--quiz-report-section-gap) / 2) 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .quiz-result--redesign .quiz-pdf-preview__pages { display: block; position: relative; block-size: 240px; margin: 24px 0 0; padding: 0; overflow: visible; }
  .quiz-result--redesign .quiz-pdf-preview__page { position: absolute; top: 12px; inline-size: 145px; padding: 0; margin: 0; border: 1px solid #a59aae33; border-radius: 6px; overflow: hidden; box-shadow: 0 15px 22px #0006; }
  .quiz-result--redesign .quiz-pdf-preview__page:nth-child(1) { left: 1px; transform: rotate(-8deg); }
  .quiz-result--redesign .quiz-pdf-preview__page:nth-child(2) { top: 0; left: calc(50% - 75px); inline-size: 150px; z-index: 2; transform: none; }
  .quiz-result--redesign .quiz-pdf-preview__page:nth-child(3) { right: 1px; transform: rotate(8deg); }
  .quiz-result--redesign .quiz-pdf-preview__page-button { display: block; padding: 0; border: 0; background: none; border-radius: 0; inline-size: 100%; transform: none; }
  .quiz-result--redesign .quiz-pdf-preview__page img { display: block; inline-size: 100%; block-size: auto; border-radius: 0; }
  .quiz-report__pdf-note { max-inline-size: 290px; margin: 0 auto; color: #a9a0b7; font-size: 10px; text-align: center; }
  .quiz-report__pdf-account { display: flex; align-items: center; justify-content: center; gap: 6px; margin-block-start: 13px; color: var(--of-mint-400); font-size: 11px; text-decoration: none; }
  .quiz-report__pdf-account svg { inline-size: 13px; block-size: 13px; }
  .quiz-result--redesign .quiz-pdf-preview,
  .quiz-result--redesign .quiz-pdf-preview + .quiz-report__plans { position: relative; }
  .quiz-result--redesign .quiz-pdf-preview::after,
  .quiz-result--redesign .quiz-pdf-preview + .quiz-report__plans::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(var(--quiz-report-section-gap) / -2); border-block-start: 1px solid #38323f; pointer-events: none; }
  .quiz-result--redesign .quiz-pdf-preview::after { inset-block-start: 0; border-color: #251f2d; }
  .quiz-report__footer { padding-block: 0 28px; color: #8e839c; font-size: 9px; text-align: center; }
  .quiz-report__footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-block-end: 13px; }
  .quiz-report__footer p { margin: 0; }
  .quiz-report__footer .quiz-report__disclaimer { margin-block-start: 12px; font-size: 9px; line-height: 1.5; }
  @media (max-width: 359px) {
    .quiz-report__fact { gap: 7px; padding-inline: 10px; }
    .quiz-report__fact dd { font-size: 14px; }
    .quiz-report__plans .quiz-plan-card__main { padding-inline: 12px; gap: 9px; }
    .quiz-report__plans .quiz-plan-card__daily-amount { font-size: 23px; }
    .quiz-report__routine-value { flex-basis: 88px; font-size: 21px; }
    .quiz-report__routine-row { gap: 12px; padding: 15px; }
    .quiz-result--redesign .quiz-pdf-preview__page { inline-size: 125px; }
    .quiz-result--redesign .quiz-pdf-preview__page:nth-child(2) { inline-size: 140px; left: calc(50% - 70px); }
  }
}

/* Legal navigation stays below the quiz without overlaying its controls. */
@layer funnel-footer {
  .funnel-footer { padding: 24px var(--funnel-gutter) max(28px, env(safe-area-inset-bottom)); color: #a9a0b7; font: 12px/1.5 var(--of-font-sans); text-align: center; }
  .funnel-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; max-inline-size: 600px; margin-inline: auto; }
  .funnel-footer a { color: inherit; text-underline-offset: 3px; white-space: nowrap; }
  .funnel-footer a:hover { color: var(--of-mint-400); }
  .funnel-footer a:focus-visible { outline: 2px solid var(--of-mint-400); outline-offset: 4px; border-radius: 2px; }
  .funnel-footer p { margin: 16px 0 0; font-size: 11px; }
  .funnel-footer .quiz-health-consent { max-inline-size: 34rem; margin: 20px auto 0; color: #aaa7ad; font-size: 0.82rem; }
  .funnel-footer .quiz-health-consent__link { color: var(--of-mint-400); text-decoration: underline; text-underline-offset: 0.15em; white-space: normal; }
  /* The body-map CTA stays fixed after the quiz scrolls out of view. */
  body[data-funnel-layout="body-map"] .funnel-footer {
    padding-block-end: calc(6rem + env(safe-area-inset-bottom));
  }
  body[data-funnel-layout="body-map"]:has(#quizError:not([hidden])) .funnel-footer {
    padding-block-end: calc(12rem + env(safe-area-inset-bottom));
  }
  @media (max-width: 47.99rem) {
    body[data-funnel-view="age"] #main-content { min-block-size: calc(100svh - 4.5rem - 8rem); }
  }
  /* The result screen already renders these links inside its approved footer. */
  body[data-funnel-view="result"] .funnel-footer { display: none; }
}

/* Server-rendered startup/recovery content is visible before quiz JavaScript. */
/* Web welcome screen, before the age gateway. */
@layer funnel-welcome {
  body[data-funnel-view="welcome"] { background: #111012; }
  body[data-funnel-view="welcome"] .funnel-header { background: #111012; }
  body[data-funnel-view="welcome"] .funnel-main { min-block-size: 0; }
  #quizApp[data-view="welcome"] {
    inline-size: min(calc(100% - 40px), 860px);
    min-block-size: 0;
    padding-block: 24px 28px;
  }
  #quizApp[data-view="welcome"] .funnel-shell__topbar,
  #quizApp[data-view="welcome"] .funnel-artwork { display: none; }
  #quizApp[data-view="welcome"] .funnel-shell__grid { display: block; min-block-size: 0; }
  #quizApp[data-view="welcome"] .funnel-form { inline-size: 100%; }
  #quizApp[data-view="welcome"] .funnel-stage { padding: 0; }
  .quiz-welcome__hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; }
  .quiz-welcome__introduction { position: relative; z-index: 1; padding-block: 8px 24px; }
  .quiz-welcome__title { margin: 0; color: #fff; font: 800 clamp(32px, 4.2vw, 52px)/1.06 var(--of-font-sans); letter-spacing: -.045em; }
  .quiz-welcome__accent { display: block; color: var(--of-mint-400); }
  .quiz-welcome__body { margin: 20px 0 0; color: #b4b0b9; font-size: 18px; line-height: 1.5; }
  .quiz-welcome__body span { display: block; }
  .quiz-welcome__portrait { align-self: stretch; position: relative; block-size: 300px; overflow: hidden; }
  .quiz-welcome__people { display: block; inline-size: 100%; block-size: auto; max-inline-size: 330px; margin-inline: auto; mask-image: linear-gradient(#000 80%, transparent 100%); }
  .quiz-welcome__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 8px 0 0; list-style: none; }
  .quiz-welcome__feature { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 14px; border: 1px solid #37333d; border-radius: 18px; background: #242126; }
  .quiz-welcome__feature-image { display: block; inline-size: 68px; block-size: 68px; object-fit: contain; }
  .quiz-welcome__feature-title { margin: 0; color: #ddd9e0; font-size: 16px; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
  .quiz-welcome__feature-body { margin: 6px 0 0; color: #b2adb9; font-size: 13px; line-height: 1.45; }
  #quizApp[data-view="welcome"] .funnel-actions { display: grid; grid-template-columns: minmax(0, 1fr); position: static; inline-size: min(100%, 470px); margin: 26px auto 0; padding: 0; gap: 10px; background: none; box-shadow: none; }
  #quizApp[data-view="welcome"] #quizContinue { min-block-size: 60px; text-transform: none; font-size: 20px; }
  .quiz-welcome__note { margin: 0; color: #aaa4b2; font-size: 12px; line-height: 1.4; text-align: center; }
  @media (min-width: 48rem) and (max-height: 800px) {
    .quiz-welcome__portrait { block-size: 240px; }
  }
  @media (max-width: 47.99rem) {
    #quizApp[data-view="welcome"] { inline-size: min(calc(100% - 32px), 470px); padding-block: 12px 20px; }
    .quiz-welcome__hero { gap: 0; grid-template-columns: 1fr 1.05fr; }
    .quiz-welcome__introduction { padding-block: 0 18px; }
    .quiz-welcome__title { font-size: clamp(26px, 7.9vw, 37px); line-height: 1.08; }
    .quiz-welcome__body { margin-block-start: 15px; font-size: clamp(13px, 3.8vw, 16px); }
    .quiz-welcome__portrait { block-size: clamp(195px, 28svh, 250px); }
    .quiz-welcome__people { max-inline-size: none; mask-image: linear-gradient(#000 72%, transparent 92%); }
    .quiz-welcome__features { grid-template-columns: minmax(0, 1fr); gap: 9px; margin-block-start: 0; }
    .quiz-welcome__feature { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 16px; }
    .quiz-welcome__feature--desktop-only { display: none; }
    .quiz-welcome__feature-image { inline-size: 62px; block-size: 62px; }
    .quiz-welcome__feature-title { font-size: 16px; }
    .quiz-welcome__feature-body { margin-block-start: 4px; font-size: 13px; line-height: 1.4; }
    #quizApp[data-view="welcome"] .funnel-actions { margin-block-start: 22px; gap: 8px; }
    #quizApp[data-view="welcome"] #quizContinue { min-block-size: 56px; font-size: 18px; }
  }
  @media (max-width: 47.99rem) and (max-height: 730px) {
    #quizApp[data-view="welcome"] { padding-block-start: 8px; }
    .quiz-welcome__portrait { block-size: 175px; }
    .quiz-welcome__introduction { padding-block-end: 0; }
    .quiz-welcome__title { font-size: clamp(25px, 7.6vw, 32px); }
    .quiz-welcome__body { margin-block-start: 12px; }
    .quiz-welcome__features { gap: 6px; }
    .quiz-welcome__feature { grid-template-columns: 52px minmax(0, 1fr); padding: 8px 10px; gap: 10px; }
    .quiz-welcome__feature-image { inline-size: 52px; block-size: 52px; }
    .quiz-welcome__feature-title { font-size: 15px; }
    .quiz-welcome__feature-body { font-size: 12px; }
    #quizApp[data-view="welcome"] .funnel-actions { margin-block-start: 18px; }
  }
}

@layer funnel-boot {
  .funnel-boot { max-inline-size: 390px; margin: 0 auto; padding-block: 24px; color: #fff; text-align: center; }
  .funnel-boot h1 { margin: 0; font: 750 28px/1.15 var(--of-font-sans); letter-spacing: -.8px; }
  .funnel-boot p { margin: 16px 0 0; color: #ada7b6; font-size: 15px; line-height: 1.5; }
  .funnel-boot__retry { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; margin-block-start: 24px; padding: 12px 24px; border: 1px solid #99f4d4; border-radius: 999px; color: #99f4d4; font-weight: 700; text-decoration: none; }
  .funnel-boot__retry:focus-visible { outline: 3px solid #99f4d4; outline-offset: 4px; }
  .funnel-boot[hidden], .funnel-boot__retry[hidden], #quizForm[hidden], #quizActions[hidden] { display: none; }
}

@layer funnel-campaign {
  .quiz-campaign-opt-in { max-inline-size: 34rem; margin: 1rem auto 0; padding: 1rem; border: 1px solid #645c70; border-radius: 0.85rem; background: #221e2a; color: #fff; text-align: start; }
  .quiz-campaign-opt-in input { flex: none; }
  .quiz-email-verification { display: grid; gap: 0.85rem; padding: 1.2rem; border: 1px solid #645c70; border-radius: 1rem; background: #221e2a; }
  .quiz-email-verification__title { margin: 0; color: #fff; font-size: 1.2rem; line-height: 1.3; }
  .quiz-email-verification__body, .quiz-email-verification__status { margin: 0; color: #d8dedb; font-size: 0.9rem; line-height: 1.5; }
  .quiz-email-verification__form { display: grid; gap: 0.65rem; }
  .quiz-email-verification__form[hidden], .quiz-email-verification__send[hidden] { display: none; }
  .quiz-email-verification__label { color: #fff; font-weight: 700; }
  .quiz-email-verification__input { inline-size: 100%; min-block-size: 3rem; padding: 0.7rem 0.85rem; border: 1px solid #8a8195; border-radius: 0.65rem; background: #15111a; color: #fff; font: inherit; }
  .quiz-email-verification__input:focus-visible { outline: 3px solid #8effd8; outline-offset: 2px; }
  .quiz-email-verification__status:not(:empty) { padding-block-start: 0.25rem; }
}

/* Website quiz: Leaf/Sage theme. Product screenshots, PDF pages and native
   payment buttons keep their own artwork and colors. Flow and state selectors
   remain shared with the existing quiz implementation. */
@layer funnel-light {
  [data-theme="onlyfit-light"] body.funnel-page {
    --of-mint-400: var(--of-deep, #355d20);
    --quiz-mint-rgb: 76 124 36;
    --of-color-focus: var(--of-ink, #173025);
    --of-color-selected: var(--of-leaf, #4c7c24);
    --of-color-success: var(--of-deep, #355d20);
    --of-shadow-focus: 0 0 0 2px #fff, 0 0 0 5px var(--of-ink, #173025);
    --quiz-selected-surface: var(--of-sage, #eef4e8);
    --quiz-answer-surface: #f6f4f1;
    --quiz-answer-text: var(--of-color-text);
    --funnel-gutter: 20px;
    background: var(--of-color-page);
    color: var(--of-color-text);
    font-size: 18px;
    line-height: 1.5;
  }

  .funnel-header,
  body[data-funnel-view="welcome"] .funnel-header,
  body[data-funnel-view="result"] .funnel-header {
    position: relative;
    border: 0;
    background: var(--of-leaf, #4c7c24);
    color: #fff;
    backdrop-filter: none;
  }
  .funnel-header__inner,
  body[data-funnel-view="result"] .funnel-header__inner {
    inline-size: min(calc(100% - 40px), 1160px);
    min-block-size: 72px;
    padding-inline: 0;
    padding-block: max(12px, env(safe-area-inset-top)) 12px;
  }
  .funnel-brand,
  body[data-funnel-view="result"] .funnel-brand { inline-size: 136px; }
  .funnel-header .of-language-switcher__trigger { color: #fff; border-color: #ffffff80; }
  .funnel-shell { inline-size: min(calc(100% - 40px), 1160px); padding-block: 24px 32px; }
  .funnel-shell__topbar { grid-template-columns: 48px minmax(0, 470px) 48px; min-block-size: 48px; gap: 12px; margin-block-end: 24px; }
  #quizBack { inline-size: 48px; block-size: 48px; color: var(--of-color-text); }
  .funnel-progress__segment { background: var(--of-color-border-subtle); }
  .funnel-progress__segment-fill { background: var(--of-leaf, #4c7c24); }
  .funnel-account-notice { position: static; background: var(--of-sage, #eef4e8); font-size: 16px; }
  .funnel-artwork__frame img, .quiz-body-map__image { filter: none; }
  .funnel-panel::before { display: none; }
  .funnel-actions { position: static; margin-inline: 0; padding: 0; background: none; }

  .quiz-question__header,
  #quizApp[data-view="age"] .quiz-question__header { text-align: start; margin-block-end: 24px; }
  .quiz-question__title,
  .quiz-processing .quiz-question__title,
  #quizApp[data-view="age"] .quiz-question__title,
  #quizApp[data-layout="entry"] .quiz-question__title {
    color: var(--of-color-text); font: 700 clamp(28px, 4vw, 36px)/1.2 var(--of-font-sans);
    letter-spacing: -.025em; text-transform: none;
  }
  .quiz-question__body, .quiz-welcome__body, .quiz-info__bullet, .quiz-dialog__paragraph,
  .quiz-post-feedback__body { color: var(--of-color-text-muted); font-size: 18px; line-height: 1.5; font-weight: 400; }
  #quizApp[data-layout="entry"] .quiz-question__body { color: var(--of-color-text-muted); font-weight: 400; text-transform: none; }
  .quiz-kicker, .quiz-step__eyebrow, .quiz-result__eyebrow,
  .quiz-answer-context__label, .quiz-answer-context__value, .quiz-option-group__title {
    color: var(--of-deep, #355d20); font: 600 16px/1.5 var(--of-font-sans); letter-spacing: 0; text-transform: none;
  }
  .quiz-question__hint, .quiz-question__feedback, .quiz-question__note, .quiz-field__hint,
  .quiz-info__note, .quiz-consent, .quiz-option__description, .quiz-field__suffix,
  .quiz-number-picker__suffix, .quiz-number-picker__labels, .quiz-local-note,
  .funnel-local-note, .quiz-welcome__note, .quiz-dialog__privacy, .quiz-dialog__withdraw-note,
  .quiz-dialog-choice__description, .quiz-dialog__choices-legend, .quiz-range__labels,
  .quiz-range__extremes, .quiz-email-verification__body, .quiz-email-verification__status {
    color: var(--of-color-text-muted); font-size: 16px; line-height: 1.5;
  }
  .quiz-answer-context { border-color: var(--of-color-border-subtle); border-radius: 8px; background: var(--of-sage, #eef4e8); }
  .quiz-question__note--alert { color: var(--of-color-error); }
  .quiz-disclosure, .quiz-goal-warning, .quiz-post-feedback, .quiz-info__bullet {
    border-color: var(--of-color-border-subtle); border-radius: 16px;
    background: var(--of-sage, #eef4e8); color: var(--of-color-text); box-shadow: none;
  }
  .quiz-disclosure { border-inline-start-color: var(--of-leaf, #4c7c24); padding: 20px; }
  .quiz-disclosure__title, .quiz-goal-warning__title, .quiz-post-feedback__title { color: var(--of-color-text); font-size: 18px; line-height: 1.35; }
  .quiz-disclosure__body, .quiz-goal-warning__body { color: var(--of-color-text-muted); font-size: 16px; line-height: 1.5; }
  .quiz-post-feedback::before { background: var(--of-leaf, #4c7c24); color: #fff; }
  .quiz-info__bullets li::before, .quiz-bullets li::before { background: var(--of-leaf, #4c7c24); color: #fff; }

  .quiz-option, .quiz-options[data-layout="visual-list"] .quiz-option--visual,
  .quiz-options[data-layout="visual-grid"] .quiz-option--visual, .quiz-option-group .quiz-option {
    --quiz-answer-icon: #70685e;
    border: 1px solid var(--of-color-border); border-radius: 16px;
    background: var(--quiz-answer-surface); color: var(--of-color-text); box-shadow: none;
  }
  .quiz-option { min-block-size: 64px; padding: 20px; }
  .quiz-option__title, .quiz-option__label, .quiz-options--age .quiz-option__title,
  .quiz-options[data-layout="visual-grid"] .quiz-option__title { color: var(--of-color-text); font-size: 18px; line-height: 1.35; font-weight: 600; }
  .quiz-option:has(.quiz-option__input:checked), .quiz-option.is-selected,
  .quiz-options[data-layout="visual-grid"] .quiz-option--visual:has(.quiz-option__input:checked) {
    --quiz-answer-icon: #536346;
    border-color: var(--of-leaf, #4c7c24); background: var(--of-sage, #eef4e8);
    /* Keep one continuous stroke; photos can cover a parent's inset shadow. */
    box-shadow: none;
  }
  .quiz-option__marker, .quiz-option__icon:not(.quiz-option__icon--image) { border-color: var(--of-color-border); }
  .quiz-option:has(.quiz-option__input:checked) .quiz-option__marker,
  .quiz-option:has(.quiz-option__input:checked) .quiz-option__icon:not(.quiz-option__icon--image) {
    border-color: var(--of-leaf, #4c7c24); background: var(--of-leaf, #4c7c24); box-shadow: none; color: #fff;
  }
  .quiz-option__marker::after { color: #fff; }
  .quiz-options--age .quiz-option::before, .quiz-options[data-layout="visual-grid"] .quiz-option--visual::before { border-color: var(--of-color-border); background: #fff; }
  .quiz-options--age .quiz-option::after, .quiz-options[data-layout="visual-grid"] .quiz-option--visual::after { border-color: var(--of-deep, #355d20); }
  .quiz-options--age .quiz-option:has(.quiz-option__input:checked)::before,
  .quiz-options[data-layout="visual-grid"] .quiz-option--visual:has(.quiz-option__input:checked)::before { background: var(--of-leaf, #4c7c24); border-color: var(--of-leaf, #4c7c24); }
  .quiz-options--age .quiz-option:has(.quiz-option__input:checked)::after,
  .quiz-options[data-layout="visual-grid"] .quiz-option--visual:has(.quiz-option__input:checked)::after { border-color: #fff; }
  .quiz-options[data-layout="visual-grid"] .quiz-option__icon--image { background: var(--of-sage, #eef4e8); }
  .quiz-options[data-layout="visual-grid"] .quiz-option--visual { min-block-size: 104px; block-size: auto; }
  .quiz-options[data-layout="visual-grid"] .quiz-option__content { padding-block: 16px; }

  #quizContinue, .quiz-result__cta, .quiz-plans__continue,
  .quiz-report__plans .quiz-plans__continue, #quizApp[data-view="welcome"] #quizContinue,
  .quiz-dialog__accept {
    min-block-size: 56px; border-radius: 10px; border: 1px solid transparent;
    padding: 16px 20px; background: var(--of-leaf, #4c7c24); color: #fff;
    font: 600 18px/24px var(--of-font-sans); text-transform: none; letter-spacing: 0; box-shadow: none;
  }
  #quizSelectAll, .quiz-dialog__decline, .quiz-unit, .funnel-boot__retry {
    min-block-size: 56px; border: 1px solid var(--of-color-border); border-radius: 10px;
    background: var(--of-color-page); color: var(--of-deep, #355d20);
    font-size: 18px; font-weight: 600; line-height: 1.35; box-shadow: none;
  }
  .quiz-skip, .quiz-plans__back { min-block-size: 48px; color: var(--of-deep, #355d20); font-size: 16px; }
  #quizContinue:disabled, #quizSelectAll:disabled, .quiz-plans__continue:disabled, .quiz-dialog__accept:disabled {
    background: #e7ebe4; color: var(--of-color-text-muted); opacity: 1; filter: none; box-shadow: none;
  }
  .quiz-unit-toggle, .quiz-unit-switch, .quiz-range { border-color: var(--of-color-border-subtle); background: var(--of-sage, #eef4e8); border-radius: 16px; }
  .quiz-unit { min-block-size: 48px; border-color: transparent; background: transparent; }
  .quiz-unit.is-active, .quiz-unit[aria-pressed="true"] { border-color: var(--of-leaf, #4c7c24); background: var(--of-leaf, #4c7c24); color: #fff; }
  .quiz-field__label, .quiz-email-verification__label { color: var(--of-color-text); font-size: 16px; line-height: 1.5; font-weight: 600; }
  .quiz-input, .quiz-field__input, .quiz-field input, .quiz-field select, .quiz-email-verification__input {
    min-block-size: 56px; border: 1px solid var(--of-color-border); border-radius: 10px;
    background: #fff; color: var(--of-color-text); font-size: 18px; font-weight: 400;
  }
  .quiz-number-picker__value { color: var(--of-color-text); }
  .quiz-number-picker__selection > span { border-color: var(--of-leaf, #4c7c24); border-radius: 10px; background: var(--of-sage, #eef4e8); }
  .quiz-number-picker__item { color: var(--of-color-text-muted); }
  .quiz-number-picker__item.is-selected, .quiz-number-picker__item[aria-pressed="true"] { color: var(--of-deep, #355d20); }
  .quiz-range__input { background: linear-gradient(to right, var(--of-leaf, #4c7c24) 0 var(--quiz-range-progress, 50%), var(--of-color-border-subtle) var(--quiz-range-progress, 50%) 100%); }

  .quiz-rating-card { border-color: var(--of-color-border-subtle); border-radius: 16px; background: #fff; }
  .quiz-rating-card__title { color: var(--of-color-text); font-size: 18px; line-height: 1.35; }
  .quiz-rating-card__media { border-color: var(--of-color-border-subtle); background: var(--of-sage, #eef4e8); }
  .quiz-rating-card__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); border-color: var(--of-color-border); border-radius: 10px; background: #fff; }
  .quiz-rating-choice { --quiz-rating-color: #d6e0d1; min-block-size: 56px; padding: 8px 4px; flex-wrap: wrap; border-radius: 8px; }
  .quiz-rating-choice[data-rating="like"] { --quiz-rating-color: #cde0bd; }
  .quiz-rating-choice[data-rating="dislike"] { --quiz-rating-color: #f4d5ce; }
  .quiz-rating-choice__label { flex-shrink: 1; white-space: normal; font-size: 16px; line-height: 1.3; }
  .quiz-rating-choice:has(input:checked) { color: var(--of-color-text); border-color: var(--of-color-border); }
  .quiz-rating-choice__check { background: var(--of-color-text); color: #fff; }
  .quiz-rating-choice:has(input:focus-visible) { outline-color: var(--of-color-focus); }

  .quiz-option-group { border-color: var(--of-color-border-subtle); border-radius: 16px; padding: 16px; background: var(--of-sage, #eef4e8); }
  #quizApp[data-step="food_preferences"] .quiz-option-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quiz-option-group__title { margin-block-end: 8px; }
  .quiz-options[data-layout="food-grid"] .quiz-option { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; min-block-size: 140px; }
  .quiz-options[data-layout="food-grid"] .quiz-option__content { text-align: center; }
  .quiz-options[data-layout="food-grid"] .quiz-option__title { font-size: 16px; }
  .quiz-options[data-layout="food-grid"] .quiz-option__icon--food { inline-size: 64px; block-size: 64px; border: 0; background: transparent; }
  .quiz-options[data-layout="food-grid"] .quiz-option__marker { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 20px; block-size: 20px; }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) { border-color: var(--of-color-error); background: #fff8f6; box-shadow: none; }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(.quiz-option__input:checked) .quiz-option__marker { background: var(--of-color-error); border-color: var(--of-color-error); }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::before,
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::after { background: #fff; }

  /* Keep focus choices below the illustration so large text cannot cover it. */
  .quiz-options--body-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-block-size: 0; padding: 350px 12px 12px; border-color: var(--of-color-border-subtle); border-radius: 16px; background: var(--of-sage, #eef4e8); }
  .quiz-body-map__visual { inset: 16px 16px auto; block-size: 320px; }
  .quiz-body-map__figure { inline-size: auto; block-size: 100%; }
  .quiz-options--body-map .quiz-body-map__hotspot,
  .quiz-options--body-map .quiz-body-map__hotspot:hover,
  [dir="rtl"] .quiz-options--body-map .quiz-body-map__hotspot,
  [dir="rtl"] .quiz-options--body-map .quiz-body-map__hotspot:hover {
    position: relative; inset: auto; inline-size: auto; min-block-size: 64px; transform: none;
    border-color: var(--of-color-border); border-radius: 10px; padding: 12px 8px;
    background: var(--quiz-answer-surface); box-shadow: none; backdrop-filter: none;
  }
  .quiz-options--body-map .quiz-option__title { font-size: 16px; line-height: 1.3; }
  .quiz-options--body-map .quiz-option__icon:not(.quiz-option__icon--image) { border-color: var(--of-color-border); background: #fff; color: var(--of-deep, #355d20); }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) { border-color: var(--of-leaf, #4c7c24); background: #fff; box-shadow: none; }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) .quiz-option__icon { background: var(--of-leaf, #4c7c24); color: #fff; }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) .quiz-option__icon svg { display: none; }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) .quiz-option__icon::after { content: "✓"; font-size: 16px; }
  #quizApp[data-layout="body-map"] .funnel-actions,
  #quizApp[data-layout="body-map"] #quizError:not([hidden]) { position: static; inline-size: 100%; transform: none; margin-block-start: 24px; box-shadow: none; }
  #quizApp[data-layout="body-map"] .funnel-form { padding-block-end: 0; }
  #quizApp[data-layout="body-map"] #quizContinue { box-shadow: none; }
  body[data-funnel-layout="body-map"] .funnel-footer,
  body[data-funnel-layout="body-map"]:has(#quizError:not([hidden])) .funnel-footer { padding-block-end: max(28px, env(safe-area-inset-bottom)); }

  .quiz-dialog-backdrop { background: rgb(23 48 37 / 48%); }
  .quiz-dialog, .quiz-campaign-opt-in, .quiz-email-verification { border-color: var(--of-color-border-subtle); border-radius: 16px; background: #fff; color: var(--of-color-text); box-shadow: 0 16px 48px rgb(23 48 37 / 12%); }
  .quiz-dialog__title, .quiz-email-verification__title { color: var(--of-color-text); }
  .quiz-dialog__close { inline-size: 48px; block-size: 48px; border-color: var(--of-color-border); background: var(--of-sage, #eef4e8); }
  .quiz-dialog__close::before, .quiz-dialog__close::after { background: var(--of-color-text); }
  .quiz-dialog-choice { border-color: var(--of-color-border); border-radius: 10px; background: #fff; }
  .quiz-dialog-choice__title { color: var(--of-color-text); font-size: 18px; }
  .quiz-processing__progress, .quiz-processing__stages { border-color: var(--of-color-border-subtle); border-radius: 16px; background: var(--of-sage, #eef4e8); }
  .quiz-processing__progress { min-block-size: 56px; }
  .quiz-processing__progress-bar { background: #cde0bd; }
  .quiz-processing__progress-text { color: var(--of-color-text); font: 600 18px/1.5 var(--of-font-sans); letter-spacing: 0; text-shadow: none; }
  .quiz-processing__stage { color: var(--of-color-text-muted); font-size: 16px; }
  .funnel-error, #quizApp[data-layout="body-map"] #quizError:not([hidden]), .quiz-dialog__error, .quiz-processing__save-error { border: 1px solid var(--of-color-error); background: #fff4f2; color: var(--of-color-error); font-size: 16px; line-height: 1.5; }
  .funnel-error__link { color: inherit; }
  .funnel-boot, .funnel-boot h1 { color: var(--of-color-text); }
  .funnel-boot p { color: var(--of-color-text-muted); font-size: 18px; }

  body[data-funnel-view="welcome"] { background: var(--of-color-page); }
  #quizApp[data-view="welcome"] { inline-size: min(calc(100% - 40px), 960px); padding-block: 32px; }
  .quiz-welcome__title { color: var(--of-color-text); font-size: clamp(36px, 4vw, 52px); line-height: 1.12; font-weight: 700; }
  .quiz-welcome__accent { color: var(--of-deep, #355d20); }
  .quiz-welcome__feature { padding: 20px; border: 1px solid var(--of-color-border-subtle); border-radius: 16px; background: var(--of-sage, #eef4e8); }
  .quiz-welcome__feature-title { color: var(--of-color-text); font-size: 18px; line-height: 1.35; font-weight: 600; }
  .quiz-welcome__feature-body { color: var(--of-color-text-muted); font-size: 16px; line-height: 1.5; }

  /* Complete result page, retaining its source order and synchronized plans. */
  body[data-funnel-view="result"] { background: var(--of-color-page); }
  #quizApp[data-view="result"] { inline-size: min(calc(100% - 40px), 560px); padding-block: 24px 32px; }
  .quiz-result--redesign { color: var(--of-color-text); font-size: 18px; line-height: 1.5; gap: 48px; }
  .quiz-report__title, .quiz-report__heading, .quiz-report__plans .quiz-question__title,
  .quiz-result--redesign .quiz-pdf-preview__title {
    max-inline-size: none; margin: 0; color: var(--of-color-text); font: 700 28px/34px var(--of-font-sans);
    letter-spacing: -.025em; text-transform: none; text-align: start; white-space: normal;
  }
  .quiz-report__title { font-size: 36px; line-height: 40px; text-align: center; }
  .quiz-report__body, .quiz-report__fact dt, .quiz-report__fact-note,
  .quiz-report__weights dt, .quiz-report__secure, .quiz-report__pdf-note,
  .quiz-report__app-caption, .quiz-report__pdf-account, .quiz-report__footer,
  .quiz-plans__checkout-status { color: var(--of-color-text-muted); font-size: 16px; line-height: 24px; }
  .quiz-report__body { max-inline-size: none; margin: 8px 0 0; text-align: start; }
  .quiz-report__comparison { border-color: var(--of-color-border-subtle); border-radius: 16px; background: var(--of-sage, #eef4e8); }
  .quiz-report__comparison-labels { padding-block: 16px; background: var(--of-sage, #eef4e8); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .04em; }
  .quiz-report__comparison-labels span + span { border-color: var(--of-color-border-subtle); color: var(--of-deep, #355d20); }
  .quiz-report__portraits { block-size: 300px; background: linear-gradient(120deg, #fff, var(--of-sage, #eef4e8)); }
  .quiz-report__portraits::before, .quiz-report__portraits::after { background: #d6e0d14d; }
  .quiz-report__portrait img { block-size: 300px; bottom: 0; }
  .quiz-report__direction { inline-size: 44px; block-size: 44px; left: calc(50% - 22px); border: 0; background: var(--of-leaf, #4c7c24); color: #fff; }
  .quiz-report__direction svg { inline-size: 24px; block-size: 24px; }
  .quiz-report__weights { border-block-start: 1px solid var(--of-color-border-subtle); }
  .quiz-report__weights > div { padding: 16px; }
  .quiz-report__weights > div + div { border-color: var(--of-color-border-subtle); }
  .quiz-report__weights dd { font-size: 32px; line-height: 40px; font-weight: 600; }
  .quiz-report__weights > div:last-child dd { color: var(--of-color-text); }
  .quiz-report__facts { gap: 12px; margin-block-start: 24px; border: 0; border-radius: 0; background: none; overflow: visible; }
  .quiz-report__fact { min-inline-size: 0; min-block-size: 112px; padding: 16px 12px; border: 0; border-radius: 16px; background: var(--of-sage, #eef4e8); gap: 10px; }
  .quiz-report__fact:nth-child(odd), .quiz-report__fact:nth-child(-n+2) { border: 0; }
  .quiz-report__fact > svg { inline-size: 28px; block-size: 28px; margin-block-start: 2px; color: var(--of-deep, #355d20); }
  .quiz-report__fact dd { color: var(--of-color-text); font-size: 18px; line-height: 24px; font-weight: 600; }
  .quiz-report__fact-note { margin-block-start: 4px; }
  .quiz-result > #quizInlinePlans { max-inline-size: none; margin: 0; }
  .quiz-report__plans .quiz-plans__list { gap: 16px; }
  .quiz-report__plans .quiz-plan-card { border: 1px solid var(--of-color-border); border-radius: 16px; background: #fff; }
  .quiz-report__plans .quiz-plan-card.is-selected { border: 1px solid var(--of-leaf, #4c7c24); background: var(--of-sage, #eef4e8); box-shadow: none; }
  .quiz-report__plans .quiz-plan-card__badge { padding: 8px 12px; background: #dce9d0; color: var(--of-deep, #355d20); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .quiz-report__plans .quiz-plan-card__main { min-block-size: 96px; gap: 12px; padding: 20px 16px; }
  .quiz-report__plans .quiz-plan-card__marker { inline-size: 28px; block-size: 28px; border-color: var(--of-color-border); }
  .quiz-report__plans .is-selected .quiz-plan-card__marker { background: var(--of-leaf, #4c7c24); border-color: var(--of-leaf, #4c7c24); color: #fff; box-shadow: none; }
  .quiz-report__plans .quiz-plan-card__name { color: var(--of-color-text); font-size: 18px; line-height: 24px; font-weight: 600; }
  .quiz-report__plans .quiz-plan-card__term, .quiz-report__plans .quiz-plan-card__per-day { color: var(--of-color-text-muted); font-size: 16px; line-height: 24px; }
  .quiz-report__plans .quiz-plan-card__daily-amount { color: var(--of-color-text); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.025em; }
  .quiz-report__plans .is-selected .quiz-plan-card__daily-amount { color: var(--of-deep, #355d20); }
  .quiz-report__plans .quiz-plans__continue .of-button__icon { inline-size: 24px; block-size: 24px; background: none; color: #fff; }
  .quiz-report__plans .quiz-plans__continue .of-button__label { flex: 0 1 auto; }
  .quiz-report__secure { gap: 8px; margin-block-start: 16px; }
  .quiz-report__secure svg { inline-size: 18px; block-size: 18px; color: var(--of-color-text-muted); }
  .quiz-report__routine { padding-block-start: 48px; border-block-start: 1px solid var(--of-color-border-subtle); }
  .quiz-report__routine-rows { margin-block-start: 24px; border: 0; border-radius: 16px; padding-inline: 16px; background: var(--of-sage, #eef4e8); }
  .quiz-report__routine-row { display: grid; grid-template-columns: 32px minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .quiz-report__routine-row + .quiz-report__routine-row { border-color: var(--of-color-border-subtle); }
  .quiz-report__routine-row > svg { inline-size: 28px; block-size: 28px; color: var(--of-deep, #355d20); }
  .quiz-report__routine-copy { min-inline-size: 0; }
  .quiz-report__routine-row > .quiz-report__routine-copy > .quiz-report__routine-value { display: block; color: var(--of-color-text); font-size: 24px; line-height: 30px; text-align: start; letter-spacing: -.025em; }
  .quiz-report__routine-label, .quiz-report__routine-row .quiz-report__routine-note { color: var(--of-color-text-muted); font-size: 16px; line-height: 24px; }
  .quiz-report__routine-note { border-inline-start: 1px solid var(--of-color-border-subtle); padding-inline-start: 12px; margin: 0; }
  .quiz-report__app-tabs { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
  .quiz-report__app-tabs button { min-block-size: 48px; padding: 10px 8px; border: 1px solid var(--of-color-border-subtle); border-radius: 10px; background: var(--of-sage, #eef4e8); color: var(--of-color-text); font-size: 16px; line-height: 24px; }
  .quiz-report__app-tabs button.is-active { background: var(--of-leaf, #4c7c24); border-color: var(--of-leaf, #4c7c24); color: #fff; }
  .quiz-report__phones::before, .quiz-pdf-preview::before { display: none; }
  .quiz-report__app { display: flex; flex-direction: column; }
  .quiz-report__app-caption { order: 2; margin-block: 12px 0; }
  .quiz-report__phone { box-shadow: 0 8px 24px rgb(23 48 37 / 14%); }
  .quiz-report__phone--side { opacity: 1; }
  .quiz-report__carousel-nav { padding-inline: 0; }
  .quiz-report__carousel-nav button { inline-size: 48px; block-size: 48px; border: 0; background: var(--of-sage, #eef4e8); color: var(--of-color-text); }
  .quiz-report__dots i { inline-size: 8px; block-size: 8px; background: #c0c8bc; }
  .quiz-report__dots i.is-active { inline-size: 8px; background: var(--of-leaf, #4c7c24); }
  .quiz-report__pdf-note { max-inline-size: none; }
  .quiz-report__pdf-account { align-items: flex-start; color: var(--of-deep, #355d20); }
  .quiz-report__pdf-account svg { inline-size: 20px; block-size: 20px; margin-block-start: 2px; }
  .quiz-result--redesign .quiz-pdf-preview__page { border-color: var(--of-color-border-subtle); box-shadow: 0 8px 20px rgb(23 48 37 / 12%); }
  .quiz-result--redesign .quiz-pdf-preview__page:nth-child(1) { top: 0; left: calc(50% - 75px); inline-size: 150px; z-index: 2; transform: none; }
  .quiz-result--redesign .quiz-pdf-preview__page:nth-child(2) { top: 12px; left: 1px; inline-size: 145px; z-index: 1; transform: rotate(-8deg); }
  .quiz-result--redesign .quiz-pdf-preview::after,
  .quiz-result--redesign .quiz-pdf-preview + .quiz-report__plans::after { border-color: var(--of-color-border-subtle); }
  .quiz-report__footer { border-block-start: 1px solid var(--of-color-border-subtle); padding-block: 24px; text-align: start; }
  .quiz-report__footer nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-end: 32px; }
  .quiz-report__footer a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 56px; padding-block: 12px; border-block-end: 1px solid var(--of-color-border-subtle); color: var(--of-color-text-muted); text-decoration: none; }
  .quiz-report__footer a svg { inline-size: 18px; block-size: 18px; }
  .quiz-report__footer p { font-size: 16px; line-height: 24px; }
  .funnel-footer { color: var(--of-color-text-muted); font-size: 16px; line-height: 24px; }
  .funnel-footer nav { gap: 8px 20px; }
  .funnel-footer a { display: inline-flex; align-items: center; min-block-size: 48px; white-space: normal; }
  .funnel-footer p, .funnel-footer .quiz-health-consent { color: var(--of-color-text-muted); font-size: 16px; line-height: 24px; }

  .quiz-pdf-gallery { border-color: var(--of-color-border-subtle); background: #fff; color: var(--of-color-text); }
  .quiz-pdf-gallery__close, .quiz-pdf-gallery__nav { min-block-size: 48px; border-color: var(--of-color-border); border-radius: 10px; background: var(--of-sage, #eef4e8); color: var(--of-color-text); font-size: 16px; line-height: 24px; }
  .quiz-pdf-gallery__close { inline-size: 48px; }
  .quiz-pdf-gallery__brand, .quiz-pdf-gallery__location strong, .quiz-pdf-gallery__location span { color: var(--of-color-text); font-size: 16px; line-height: 24px; }

  .funnel-page :is(button, a, input, select):focus-visible,
  .quiz-option:has(input:focus-visible), .quiz-dialog-choice:has(input:focus-visible),
  .quiz-report__plans .quiz-plan-card:has(input:focus-visible) {
    outline: 3px solid var(--of-ink, #173025); outline-offset: 3px; box-shadow: 0 0 0 2px #fff;
  }
  @media (hover: hover) and (pointer: fine) {
    #quizContinue:not(:disabled):hover, .quiz-plans__continue:not(:disabled):hover, .quiz-dialog__accept:not(:disabled):hover { background: var(--of-deep, #355d20); }
  }
  @media (min-width: 64rem) {
    #quizApp[data-view="result"] { inline-size: min(calc(100% - 80px), 1040px); padding-block-start: 48px; }
    .quiz-result--redesign { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; align-items: start; grid-template-areas: "comparison summary" "plans routine" "app pdf" "repeat repeat" "footer footer"; }
    .quiz-report__comparison { grid-area: comparison; }
    .quiz-report__ready { grid-area: summary; align-self: center; }
    #quizInlinePlans { grid-area: plans; }
    .quiz-report__routine { grid-area: routine; padding-block-start: 0; border: 0; }
    .quiz-report__app { grid-area: app; }
    .quiz-result--redesign .quiz-pdf-preview { grid-area: pdf; padding: 0; margin: 0; }
    .quiz-result--redesign .quiz-pdf-preview::after { display: none; }
    .quiz-result--redesign .quiz-pdf-preview + .quiz-report__plans { grid-area: repeat; inline-size: min(100%, 480px); justify-self: center; }
    .quiz-report__footer { grid-area: footer; }
    .quiz-report__footer nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
    .quiz-report__phones { max-inline-size: 390px; margin-inline: auto; }
    .quiz-result--redesign .quiz-pdf-preview__pages { max-inline-size: 390px; margin-inline: auto; }
  }
  @media (max-width: 47.99rem) {
    .funnel-shell__topbar { grid-template-columns: 48px minmax(0, 1fr); }
    .funnel-header__inner { min-block-size: 64px; }
    #quizApp[data-view="welcome"] { padding-block: 24px; }
    .quiz-welcome__hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .quiz-welcome__introduction { padding: 0; }
    .quiz-welcome__title { font-size: 36px; line-height: 40px; }
    .quiz-welcome__body { font-size: 18px; line-height: 27px; }
    .quiz-welcome__portrait { block-size: 240px; }
    .quiz-welcome__people { max-inline-size: 300px; }
    .quiz-welcome__features { gap: 12px; margin-block-start: 24px; }
    .quiz-welcome__feature { grid-template-columns: 52px minmax(0, 1fr); padding: 20px; }
    .quiz-welcome__feature-title { font-size: 18px; }
    .quiz-welcome__feature-body { font-size: 16px; }
    .quiz-rating-card { grid-template-columns: 25% minmax(0, 1fr); }
    .quiz-rating-card__content { padding: 16px 12px; }
    .quiz-rating-card__choices { grid-column: 1 / -1; }
    .quiz-rating-choice { flex-direction: column; }
    .quiz-report__phones { block-size: 430px; }
    .quiz-pdf-gallery__footer { gap: 8px; flex-wrap: wrap; }
    .quiz-pdf-gallery__location { order: -1; flex-basis: 100%; }
  }
  @media (max-width: 359px) {
    [data-theme="onlyfit-light"] body.funnel-page { --funnel-gutter: 16px; }
    .funnel-header__inner, body[data-funnel-view="result"] .funnel-header__inner,
    .funnel-shell, #quizApp[data-view="result"], #quizApp[data-view="welcome"] { inline-size: calc(100% - 32px); }
    .quiz-report__fact { display: block; padding: 16px; }
    .quiz-report__fact > svg { margin-block-end: 8px; }
    .quiz-report__plans .quiz-plan-card__main { gap: 8px; padding: 16px 12px; }
    .quiz-report__plans .quiz-plan-card__marker { inline-size: 24px; block-size: 24px; }
    .quiz-report__plans .quiz-plan-card__daily-amount { font-size: 24px; }
    .quiz-report__routine-row { grid-template-columns: 28px minmax(0, 1fr); }
    .quiz-report__routine-note { grid-column: 2; padding: 0; border: 0; }
    .quiz-report__app-tabs { gap: 4px; }
    .quiz-report__app-tabs button { padding-inline: 4px; }
    .quiz-result--redesign .quiz-pdf-preview__page:nth-child(2) { inline-size: 125px; }
    #quizApp[data-step="food_preferences"] .quiz-option-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* PDF screen layouts. Input semantics and step data stay owned by the quiz. */
@layer funnel-pdf {
  .funnel-header__inner { min-block-size: 64px; padding-block: max(8px, env(safe-area-inset-top)) 8px; }
  .funnel-brand { inline-size: 160px; }
  .funnel-header .of-language-switcher__trigger { border-color: transparent; background: transparent; }
  .funnel-shell { padding-block-start: 12px; }
  .funnel-shell:not([data-view="result"]):not([data-view="welcome"]) { max-inline-size: 560px; }
  #quizApp[data-view="result"] { padding-block-start: 24px; }
  .funnel-shell__topbar { padding: 0; margin-block-end: 20px; }
  #quizApp[data-step="processing"] .funnel-shell__topbar { display: none; }
  #quizApp[data-step="processing"] { padding-block-start: 32px; }
  #quizContinue .of-button__icon { display: none; }
  .quiz-question { gap: 0; }
  .quiz-question__header { margin-block-end: 24px; }
  .quiz-question__title { max-inline-size: none; margin-inline: 0; font-size: 28px; line-height: 1.2; text-align: center; text-wrap: pretty; }
  .quiz-options { gap: 12px; margin: 0; }
  .quiz-option { min-block-size: 72px; padding: 20px; border-radius: 16px; }
  .quiz-option__title { font-size: 18px; font-weight: 600; line-height: 1.35; }
  .quiz-option__description { margin-block-start: 4px; font-size: 16px; line-height: 1.4; }
  .quiz-option__marker { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-width: 1.5px; border-radius: 50%; }
  .quiz-option:has(input:checked) .quiz-option__marker { background: var(--of-leaf); border-color: var(--of-leaf); color: #fff; }
  .quiz-option__marker::after { position: static; display: block; inset: auto; inline-size: 10px; block-size: 6px; border-inline-start: 2px solid #fff; border-block-end: 2px solid #fff; border-block-start: 0; border-inline-end: 0; transform: rotate(-45deg); }
  .quiz-option[data-input-type="checkbox"] .quiz-option__marker { border-radius: 5px; }
  .quiz-option--exclusive { border-style: solid; }
  #quizApp:is([data-step="daily_activity"], [data-step="secondary_goals"], [data-step="equipment"], [data-step="weekly_commitment"], [data-step="workout_length"]) .quiz-option { grid-template-columns: 26px minmax(0, 1fr); gap: 16px; }
  #quizApp:is([data-step="daily_activity"], [data-step="secondary_goals"], [data-step="equipment"], [data-step="weekly_commitment"], [data-step="workout_length"]) .quiz-option__marker { grid-column: 1; }
  #quizApp:is([data-step="daily_activity"], [data-step="secondary_goals"], [data-step="equipment"], [data-step="weekly_commitment"], [data-step="workout_length"]) .quiz-option__content { grid-column: 2; }
  #quizApp[data-step="daily_activity"] .quiz-option { min-block-size: 104px; }
  #quizApp[data-step="fitness_level"] .quiz-option { min-block-size: 104px; }
  #quizApp:is([data-step="pushups"], [data-step="pullups"]) .quiz-option { min-block-size: 80px; }

  /* All photo choices use the age cards' compact, right-image banner layout. */
  #quizApp[data-view="age"] .quiz-options--age,
  .quiz-options[data-layout="visual-grid"] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .quiz-options--age .quiz-option,
  .quiz-options[data-layout="visual-grid"] .quiz-option--photo {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    align-items: center; align-content: center; gap: 0;
    block-size: auto; min-block-size: 140px; padding: 24px; border-radius: 16px; overflow: hidden;
  }
  .quiz-options--age .quiz-option { min-block-size: 66px; padding-block: 8px; }
  .quiz-options--age .quiz-option::before, .quiz-options--age .quiz-option::after,
  .quiz-options[data-layout="visual-grid"] .quiz-option::before, .quiz-options[data-layout="visual-grid"] .quiz-option::after { display: none; }
  .quiz-options--age .quiz-option__icon--image,
  .quiz-options[data-layout="visual-grid"] .quiz-option__icon--image {
    position: absolute; inset: 0 0 0 auto; grid-area: auto; display: block;
    inline-size: 67%; block-size: 100%; aspect-ratio: auto; border: 0; border-radius: 0;
    background: var(--of-sage) var(--quiz-photo-backdrop, none) center / cover;
    /* Reveal the actual card surface in every state, including hover. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 10%) 12%, rgb(0 0 0 / 50%) 28%, rgb(0 0 0 / 90%) 44%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 10%) 12%, rgb(0 0 0 / 50%) 28%, rgb(0 0 0 / 90%) 44%, #000 56%);
  }
  .quiz-options[data-layout="visual-grid"] .quiz-option__image { position: absolute; inset: 0; display: block; inline-size: 100%; max-inline-size: none; block-size: 100%; padding: 0; border-radius: 0; object-fit: cover; object-position: center top; transform: none; }
  .quiz-options--age .quiz-option__image { position: absolute; inset: 0; display: block; inline-size: 100%; max-inline-size: none; block-size: 100%; padding: 0; border-radius: 0; object-fit: cover; object-position: right top; transform: none; }
  .quiz-options[data-layout="visual-grid"] .quiz-option--portrait .quiz-option__image { position: absolute; inset: 4px auto auto 60%; inline-size: auto; max-inline-size: none; block-size: 270%; border-radius: 0; object-fit: contain; object-position: center top; transform: translateX(-50%); }
  .quiz-options--age .quiz-option__content,
  .quiz-options[data-layout="visual-grid"] .quiz-option__content { position: relative; z-index: 1; grid-area: 1 / 1; }
  .quiz-options[data-layout="visual-grid"] .quiz-option__content { display: flex; align-items: center; max-inline-size: 48%; min-block-size: 0; padding: 0; text-align: start; }
  .quiz-options[data-layout="visual-grid"] .quiz-option__title { font-size: 18px; line-height: 1.35; }
  .quiz-options--age .quiz-option__title,
  #quizApp:is([data-step="profile"], [data-step="body_build"], [data-step="primary_goal"], [data-step="target_shape"]) .quiz-option__title { font-size: 25.6px; line-height: 1.2; overflow-wrap: anywhere; }
  /* Age and photo choices indicate selection with the card background and border. */
  .quiz-options--age .quiz-option__marker,
  .quiz-options[data-layout="visual-grid"] .quiz-option__marker { position: absolute; grid-area: auto; z-index: 2; inset: 12px 12px auto auto; display: none; background: #fff; }

  /* Full-body focus illustration, followed by independent full-width rows. */
  .quiz-options--body-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; border: 0; background: transparent; overflow: visible; }
  .quiz-body-map__visual { position: relative; inset: auto; grid-column: 1; grid-template-rows: minmax(0, 1fr); place-items: center; block-size: 240px; margin-block-end: 12px; border: 0; background: radial-gradient(circle 110px at 50% 53%, var(--of-sage) 99%, transparent 100%); }
  .quiz-body-map__figure { position: relative; inset: auto; inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: 240px; aspect-ratio: auto; margin: 0; transform: none; }
  .quiz-body-map__image { position: static; display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: contain; object-position: center; transform: none; filter: none; }
  .quiz-body-map__highlight { display: none; }
  .quiz-options--body-map .quiz-body-map__hotspot,
  .quiz-options--body-map .quiz-body-map__hotspot:hover,
  [dir="rtl"] .quiz-options--body-map .quiz-body-map__hotspot,
  [dir="rtl"] .quiz-options--body-map .quiz-body-map__hotspot:hover { display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; gap: 16px; min-block-size: 64px; padding: 8px 12px; border-radius: 16px; }
  .quiz-options--body-map .quiz-option__content { grid-column: 2; }
  .quiz-options--body-map .quiz-option__title { font-size: 18px; }
  .quiz-options--body-map .quiz-option__marker { display: grid; grid-column: 3; }
  .quiz-options--body-map .quiz-option__icon:not(.quiz-option__icon--image),
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) .quiz-option__icon { display: grid; grid-column: 1; place-items: center; inline-size: 44px; block-size: 44px; padding: 9px; border: 0; border-radius: 0; background: transparent; color: var(--quiz-answer-icon); }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) .quiz-option__icon svg { display: block; }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) .quiz-option__icon::after { display: none; }
  .quiz-options--body-map .quiz-option__icon svg { inline-size: 26px; block-size: 26px; }
  .quiz-options--body-map .quiz-body-map__hotspot:has(input:checked) { border-color: var(--of-leaf); background: var(--of-sage); }

  /* Tonal outline icons share the card surface in default and selected states. */
  .quiz-option--illustrated { grid-template-columns: 48px minmax(0, 1fr) 26px; gap: 16px; padding: 16px; }
  .quiz-option--illustrated .quiz-option__content { grid-column: 2; }
  .quiz-option--illustrated .quiz-option__marker { grid-column: 3; }
  .quiz-option--illustrated .quiz-option__icon:not(.quiz-option__icon--image),
  .quiz-option--illustrated:has(input:checked) .quiz-option__icon:not(.quiz-option__icon--image) { grid-column: 1; display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 10px; border: 0; border-radius: 0; background: transparent; color: var(--quiz-answer-icon); box-shadow: none; }
  .quiz-option--illustrated .quiz-option__icon svg { inline-size: 28px; block-size: 28px; }
  #quizApp[data-step="meal_prep"] .quiz-option__marker { visibility: hidden; }
  #quizApp[data-step="meal_prep"] .quiz-option:has(input:checked) .quiz-option__marker { visibility: visible; }

  /* Full-width unit tabs and large, tactile wheels reuse the tested picker. */
  .quiz-unit-toggle { inline-size: 100%; max-inline-size: none; margin: 0 0 28px; padding: 0; gap: 0; border: 1px solid var(--of-color-border); border-radius: 10px; background: var(--quiz-answer-surface); overflow: hidden; }
  .quiz-unit { min-block-size: 56px; padding: 12px 8px; border: 0; border-radius: 9px; color: var(--of-color-text); font-size: 16px; }
  .quiz-unit.is-active, .quiz-unit[aria-pressed="true"] { border: 1px solid var(--of-leaf); background: var(--of-sage); color: var(--of-color-text); }
  .quiz-number-picker { --quiz-picker-row-size: 88px; --quiz-picker-width: 100%; --quiz-picker-highlight-width: 100%; margin-block: 16px; }
  .quiz-number-picker__stage { block-size: calc(var(--quiz-picker-row-size) * 3); }
  .quiz-number-picker__selection { inset-block-start: var(--quiz-picker-row-size); }
  .quiz-number-picker__wheel { padding-block: var(--quiz-picker-row-size); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
  .quiz-number-picker__selection > span { inline-size: 100%; border: 0; border-block: 1px solid var(--of-color-border-subtle); border-radius: 0; background: transparent; }
  .quiz-number-picker__item { font-size: 32px; font-weight: 500; color: #8d998e; }
  .quiz-number-picker__item.is-selected, .quiz-number-picker__item[aria-pressed="true"] { font-size: 80px; font-weight: 600; color: var(--of-color-text); letter-spacing: -.04em; }
  .quiz-number-picker .quiz-number-picker__item.is-selected::after { content: none; }
  .quiz-number-picker .quiz-number-picker__value { display: none; }
  .quiz-number-picker__labels { font-size: 16px; }
  #quizHealthConsent { margin-block-start: 24px; }
  #quizHealthConsent .quiz-health-consent { margin: 0; font-size: 16px; line-height: 1.5; text-align: start; }
  #quizHealthConsent .quiz-health-consent__link { color: var(--of-deep); }

  /* Each activity has a thumbnail/title row and full-width rating controls. */
  .quiz-rating-deck { gap: 16px; }
  .quiz-rating-card { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 16px; }
  .quiz-rating-card__media { inline-size: 104px; block-size: 80px; border: 0; border-radius: 10px; overflow: hidden; }
  .quiz-rating-card__image { padding: 0; object-fit: cover; object-position: center top; }
  .quiz-rating-card__content { display: flex; align-items: center; min-block-size: 0; padding: 0; }
  .quiz-rating-card__title { font-size: 18px; line-height: 1.35; }
  .quiz-rating-card__choices { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; background: none; }
  .quiz-rating-choice { flex-direction: row; flex-wrap: wrap; min-block-size: 48px; gap: 5px; padding: 10px 4px; border: 1px solid var(--of-color-border); border-radius: 8px; background: var(--quiz-answer-surface); color: var(--of-color-text); }
  .quiz-rating-choice__icon { display: none; }
  .quiz-rating-choice__label { font-size: 16px; font-weight: 500; }
  .quiz-rating-choice:has(input:checked) { background: var(--of-sage); border-color: var(--of-leaf); color: var(--of-color-text); }
  .quiz-rating-choice__check { inline-size: 16px; block-size: 16px; background: var(--of-leaf); color: #fff; }

  /* Food cards communicate exclusions only; disclosure stays available inline. */
  #quizApp[data-step="food_preferences"] .quiz-option-group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .quiz-options[data-layout="food-grid"] .quiz-option__title { font-size: 16px; font-weight: 500; }
  .quiz-option-group__title { margin: 8px 0 4px; color: var(--of-color-text); font-size: 18px; }
  .quiz-options[data-layout="food-grid"] .quiz-option { min-block-size: 132px; padding: 12px 6px; gap: 8px; border-radius: 12px; }
  .quiz-options[data-layout="food-grid"] .quiz-option__marker { display: none; }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(input:checked) .quiz-option__marker { display: grid; border-color: var(--of-color-error); background: var(--of-color-error); }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::before,
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::after { position: absolute; left: 50%; top: 50%; inline-size: 11px; block-size: 2px; border: 0; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__marker::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(input:checked) .quiz-option__title { text-decoration: none; color: var(--of-color-text); }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion .quiz-option__icon--food {
    position: relative;
  }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(input:checked) .quiz-option__icon--food::before,
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(input:checked) .quiz-option__icon--food::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    inline-size: 120%;
    block-size: 3px;
    border-radius: 999px;
    background: var(--of-color-error);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .quiz-options[data-layout="food-grid"] .quiz-option--exclusion:has(input:checked) .quiz-option__icon--food::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .quiz-disclosure { inline-size: 100%; max-inline-size: none; margin-block-start: 24px; padding: 0; border: 1px solid var(--of-color-border); border-radius: 12px; background: #fff; }
  .quiz-disclosure__title { display: flex; align-items: center; min-block-size: 64px; margin: 0; padding: 16px; font-size: 16px; font-weight: 500; }
  .quiz-disclosure__body { padding: 0 16px 16px; margin: 0; }

  /* Personal details use quiet inputs, an optional opt-in, and a plan illustration. */
  #quizApp:is([data-step="name"], [data-step="email"]) .quiz-field__input { min-block-size: 64px; text-align: start; font-size: 18px; padding-inline: 20px; }
  .quiz-campaign-opt-in { align-items: start; gap: 12px; margin-block-start: 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .quiz-campaign-opt-in input { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin-block-start: 2px; accent-color: var(--of-leaf); }
  .quiz-campaign-opt-in .quiz-consent__label { font-size: 16px; line-height: 1.5; }
  #quizApp[data-step="email"] .funnel-actions { margin-block-start: 80px; }
  .quiz-name-art { inline-size: min(100%, 360px); margin: 32px auto 0; }
  .quiz-name-art > img { inline-size: 100%; block-size: auto; }

  /* The processing state is a ring with completed/current/pending stages. */
  .quiz-processing__spinner { display: none; }
  .quiz-processing__progress { position: relative; display: grid; place-items: center; inline-size: 220px; block-size: 220px; min-block-size: 0; margin: 32px auto; border: 0; border-radius: 50%; background: conic-gradient(var(--of-leaf) var(--quiz-processing-progress, 0%), var(--of-sage) 0); overflow: visible; }
  .quiz-processing__progress::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
  .quiz-processing__progress-bar { display: none; }
  .quiz-processing__progress-text { position: relative; z-index: 1; font-size: 48px; line-height: 1; font-weight: 600; }
  .quiz-processing__stages { gap: 20px; padding: 0; border: 0; border-radius: 0; background: none; }
  .quiz-processing__stage { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 16px; color: var(--of-color-text-muted); font-size: 18px; }
  .quiz-processing__stage::before { content: ""; position: relative; inset: auto; inline-size: 28px; block-size: 28px; border: 2px solid var(--of-color-border); border-radius: 50%; background: transparent; }
  .quiz-processing__stage.is-active { color: var(--of-color-text); }
  .quiz-processing__stage.is-active::before { border-color: var(--of-sage); border-block-start-color: var(--of-leaf); border-inline-end-color: var(--of-leaf); animation: quiz-pdf-spin 1s linear infinite; }
  .quiz-processing__stage.is-complete { color: var(--of-color-text); }
  .quiz-processing__stage.is-complete::before { content: "✓"; display: grid; place-items: center; border-color: var(--of-leaf); background: var(--of-leaf); color: #fff; font-size: 18px; }
  @keyframes quiz-pdf-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .quiz-processing__stage.is-active::before { animation: none; } }

  /* Welcome uses a real room photograph and plain benefit rows. */
  #quizApp[data-view="welcome"] { max-inline-size: 560px; padding-block-start: 24px; }
  .quiz-welcome__hero { display: flex; flex-direction: column; gap: 24px; }
  .quiz-welcome__title { max-inline-size: none; font-size: 36px; line-height: 1.13; }
  .quiz-welcome__accent { color: var(--of-color-text); }
  .quiz-welcome__portrait { position: relative; inline-size: 100%; block-size: auto; aspect-ratio: 1.48; border-radius: 16px; overflow: hidden; }
  .quiz-welcome__people { position: static; display: block; inline-size: 100%; max-inline-size: none; block-size: 100%; max-block-size: none; margin: 0; object-fit: cover; object-position: center; transform: none; mask-image: none; -webkit-mask-image: none; }
  .quiz-welcome__features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block-start: 24px; }
  .quiz-welcome__feature { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0; border: 0; border-radius: 0; background: none; }
  .quiz-welcome__feature--desktop-only { display: none; }
  .quiz-welcome__feature-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 11px; border-radius: 50%; background: var(--of-sage); color: var(--of-deep); }
  .quiz-welcome__feature-icon svg { inline-size: 26px; block-size: 26px; }
  .quiz-welcome__feature-title { font-size: 18px; line-height: 1.35; }
  .quiz-welcome__feature-body { margin-block-start: 4px; font-size: 16px; line-height: 1.5; }
  .quiz-report__portrait img { object-fit: contain; object-position: center bottom; }
  @media (min-width: 64rem) {
    #quizApp[data-view="result"] { padding-block-start: 48px; }
    #quizApp[data-view="welcome"] { max-inline-size: 1040px; }
    .quiz-welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
    .quiz-welcome__hero { display: contents; }
    .quiz-welcome__introduction { grid-column: 1; grid-row: 1; padding: 0; }
    .quiz-welcome__portrait { grid-column: 2; grid-row: 1 / 3; block-size: 100%; min-block-size: 400px; }
    .quiz-welcome__features { grid-column: 1; grid-row: 2; }
    .quiz-welcome__title { font-size: 44px; }
    .quiz-welcome__feature--desktop-only { display: grid; }
    #quizApp[data-view="welcome"] .funnel-actions { max-inline-size: calc(50% - 24px); }
  }
  @media (max-width: 359px) {
    .quiz-options[data-layout="visual-grid"] { gap: 12px; }
    .quiz-options[data-layout="visual-grid"] .quiz-option__title { font-size: 16px; }
    .quiz-option--illustrated, .quiz-options--body-map .quiz-body-map__hotspot { gap: 12px; padding: 12px; }
    .quiz-rating-card { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .quiz-rating-card__media { inline-size: 88px; block-size: 72px; }
    .quiz-rating-card__choices { gap: 6px; }
    .quiz-rating-choice { flex-direction: column; }
    #quizApp[data-step="food_preferences"] .quiz-option-group { gap: 8px; }
    .quiz-options[data-layout="food-grid"] .quiz-option__title { font-size: 16px; overflow-wrap: anywhere; }
    .quiz-welcome__title { font-size: 32px; }
  }
}

/* A single viewport action bar for every manual quiz step and the result. */
@layer funnel-dock {
  html:has(.funnel-page) {
    scroll-padding-block-end: calc(var(--quiz-dock-space, 0px) + var(--quiz-keyboard-inset, 0px) + 16px);
  }
  body.funnel-page { padding-block-end: var(--quiz-dock-space, 0px); }
  #quizDock { display: none; }
  #quizDock[data-active] { display: grid; }
  #quizDock:has(#quizActions:not([hidden])) { display: grid; }
  #quizDock,
  #quizInlinePlans > .quiz-plans__actions {
    position: fixed; z-index: 45;
    inset: auto 0 var(--quiz-keyboard-inset, 0px);
    inline-size: 100%; max-inline-size: none; margin: 0;
    padding: 24px max(var(--funnel-gutter, 20px), calc((100vw - 560px) / 2)) max(16px, env(safe-area-inset-bottom, 0px));
    gap: 12px; transform: none; transition-property: none;
    background: linear-gradient(180deg, rgb(255 255 255 / 0%), #fff 24px);
  }
  #quizDock #quizActions {
    position: static; display: flex; flex-direction: column; align-items: stretch;
    inline-size: 100%; max-inline-size: none; margin: 0; padding: 0;
    gap: 8px; transform: none; background: none; box-shadow: none;
  }
  #quizDock #quizActions[hidden] { display: none; }
  #quizDock #quizContinue { order: 1; inline-size: 100%; margin: 0; }
  #quizDock .quiz-welcome__note { order: -1; }
  #quizDock #quizHealthConsent { margin: 0; }
  #quizDock .quiz-health-consent { margin: 0; }
  /* The repeated plan selector shares the primary section's floating action. */
  .quiz-report__plans:not(#quizInlinePlans) > .quiz-plans__actions { display: none; }
  #quizApp[data-view="result"] #quizContent { animation: none; transform: none; }
}