/* Unified mobile pass for the complete quiz flow. */
@media (min-width: 0px) {
  html,
  body,
  #root,
  .app-shell {
    width: 100%;
    min-height: 100%;
  }

  html,
  body {
    overflow-x: hidden;
    background: #f7f7f8;
  }

  .app-shell {
    min-height: 100svh;
    overflow-x: clip;
    background: #f7f7f8;
  }

  /* Cookie analytics are intentionally disabled for this funnel. */
  .consent-banner {
    display: none !important;
  }

  /* Stable mobile header — do not let short screens shrink it into tiny UI. */
  .quiz-header,
  .quiz-header.quiz-header--minimal {
    min-height: 112px;
    padding: 14px 18px 12px;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #dedfe0;
  }

  .quiz-header__top {
    grid-template-columns: 44px 1fr 44px;
    min-height: 44px;
    margin-bottom: 10px;
  }

  .quiz-header .icon-button {
    width: 44px;
    height: 44px;
  }

  .quiz-header .brand--compact {
    font-size: 14px;
  }

  .quiz-header .brand--compact .brand__mark {
    width: 25px;
    height: 25px;
  }

  .phase-progress {
    margin-top: 0;
  }

  .phase-progress__step {
    font-size: 14px;
  }

  .phase-progress__step > span {
    width: 30px;
    height: 30px;
  }

  .phase-progress__step > i {
    margin-inline: 6px;
  }

  /* Shared question geometry and readable type scale. */
  .quiz-screen {
    width: 100%;
    min-height: calc(100svh - 106px);
    padding: 28px 20px max(28px, env(safe-area-inset-bottom));
  }

  .screen-heading {
    margin-bottom: 24px;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.35;
  }

  .quiz-screen h1,
  .question-screen--goal h1,
  .question-screen--face-map h1,
  .question-screen--portrait h1 {
    margin-bottom: 10px;
    font-size: clamp(27px, 7.4vw, 32px);
    line-height: 1.08;
  }

  .screen-subtitle {
    font-size: 14px;
    line-height: 1.45;
  }

  .answer-list {
    gap: 11px;
  }

  .answer-card {
    min-height: 70px;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .answer-card__glyph {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .answer-card__copy {
    gap: 3px;
  }

  .answer-card__copy strong {
    font-size: 15px;
    line-height: 1.3;
  }

  .answer-card__copy small {
    font-size: 11px;
    line-height: 1.35;
  }

  .answer-card__status {
    width: 28px;
    height: 28px;
  }

  .screen-cta,
  .email-form .primary-button {
    min-height: 56px;
    margin-top: 18px;
    padding-block: 13px;
    border-radius: 999px;
    font-size: 16px;
  }

  .question-screen:has(.screen-cta) {
    display: flex;
    flex-direction: column;
  }

  .question-screen:has(.screen-cta) > .screen-cta {
    margin-top: auto;
  }

  .terms-note {
    margin-top: 13px;
    font-size: 9px;
  }

  /* Age */
  .question-screen--portrait {
    padding-top: 26px;
  }

  .question-screen--portrait .screen-heading {
    margin-bottom: 18px;
  }

  .answer-list--portrait {
    gap: 10px;
  }

  .answer-card--image {
    aspect-ratio: 0.9;
    min-height: 0;
    padding: 0;
  }

  .answer-card--image .answer-card__copy {
    padding: 10px 11px;
    border-radius: 14px;
    inset-inline: 8px;
    bottom: 8px;
  }

  .answer-card--image .answer-card__copy strong {
    font-size: 13px;
  }

  /* Main goal */
  .question-screen--goal {
    width: 100%;
    padding-top: 38px;
  }

  .question-screen--goal .screen-heading {
    margin-bottom: 30px;
  }

  .question-screen--goal .answer-list {
    gap: 14px;
  }

  .question-screen--goal .answer-card {
    min-height: 90px;
    padding: 17px 22px;
    border-radius: 23px;
  }

  .question-screen--goal .answer-card__emoji {
    width: 48px;
    font-size: 28px;
  }

  .question-screen--goal .answer-card__copy strong {
    font-size: 18px;
    line-height: 1.35;
  }

  /* Dense multi-select pages. */
  .answer-list--tags {
    gap: 9px;
  }

  .answer-list--tags .answer-card {
    min-height: 62px;
    padding: 10px 39px 10px 11px;
    border-radius: 17px;
  }

  .answer-list--tags .answer-card__glyph {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .answer-list--tags .answer-card__copy strong {
    font-size: 12.5px;
    line-height: 1.25;
  }

  .answer-list--tags .answer-card__status {
    right: 9px;
    width: 24px;
    height: 24px;
  }

  /* Two-column skin cards. */
  .answer-list--grid .answer-card {
    min-height: 108px;
    padding: 12px;
  }

  .answer-list--grid .answer-card__copy strong {
    font-size: 14px;
  }

  /* Face shape visual grid. */
  .question-screen--shape {
    width: 100%;
    padding-top: 24px;
  }

  .answer-list--shape {
    gap: 9px;
  }

  .answer-card--shape {
    grid-template-rows: 108px 28px;
    min-height: 148px;
    padding: 7px 5px;
    border-radius: 17px;
  }

  .shape-visual {
    width: 92px;
    height: 109px;
  }

  .answer-card--shape .answer-card__status {
    width: 28px;
    height: 28px;
  }

  /* Face map: keep the complete head visible while the choices remain tappable. */
  .question-screen--face-map {
    width: 100%;
    padding-top: 22px;
    padding-bottom: 26px;
  }

  .question-screen--face-map .screen-heading {
    margin-bottom: 16px;
  }

  .focus-practice-stage {
    min-height: clamp(398px, calc(100svh - 309px), 535px);
  }

  .focus-practice-illustration {
    width: 62%;
    height: clamp(350px, calc(100svh - 394px), 450px);
    left: -8px;
  }

  .focus-practice-options {
    grid-template-rows: repeat(6, clamp(58px, 8.5svh, 78px));
    grid-template-columns: repeat(2, minmax(0, 150px));
    gap: 7px;
  }

  .focus-option {
    gap: 7px;
    padding: 10px;
    border-radius: 17px;
  }

  .focus-option strong {
    font-size: 13px;
  }

  .focus-option > span {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }

  /* Information screens use the approved full-height, header-free mobile system. */
  html:has(.story-screen),
  body:has(.story-screen),
  .app-shell:has(.story-screen) {
    background: #fff;
  }

  .app-shell:has(.story-screen) .quiz-header {
    display: none;
  }

  .story-screen:not(.story-screen--reference-benefits) {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100svh;
    padding: 28px 16px max(28px, env(safe-area-inset-bottom));
    border-top: 1px solid #d8d8d8;
    background: #fff;
  }

  .story-screen:not(.story-screen--reference-benefits) > h1 {
    max-width: 380px;
    margin-bottom: 12px;
    font-size: clamp(27px, 7.4vw, 32px);
    line-height: 1.12;
  }

  .story-screen:not(.story-screen--reference-benefits) > .screen-subtitle {
    max-width: 370px;
    font-size: 14.5px;
    line-height: 1.48;
  }

  .story-screen:not(.story-screen--reference-benefits) .screen-cta {
    margin-top: auto;
  }

  /* Method / education */
  .story-screen--education {
    padding-top: 28px;
  }

  .method-stack {
    gap: 10px;
    margin: 26px 0 14px;
  }

  .method-stack article {
    min-height: 78px;
    grid-template-columns: 44px 1fr;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 19px;
  }

  .method-stack article > span {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .method-stack strong {
    font-size: 14px;
  }

  .method-stack p {
    font-size: 11.5px;
    line-height: 1.4;
  }

  .evidence-note {
    margin-top: 9px;
    font-size: 8.5px;
  }

  /* Safety */
  .mechanism-card {
    margin: 22px 0 12px;
    border-radius: 25px;
  }

  .mechanism-card > img {
    height: clamp(190px, 27svh, 238px);
  }

  .mechanism-card__steps article {
    min-height: 64px;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }

  .mechanism-card__steps article > span {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .mechanism-card__steps strong {
    font-size: 12px;
  }

  .mechanism-card__steps p {
    font-size: 9px;
    line-height: 1.38;
  }

  .safety-note {
    padding: 12px 13px;
    border-radius: 16px;
    font-size: 10px;
    line-height: 1.45;
  }

  /* Skin insight */
  .insight-orbit {
    width: 62px;
    height: 62px;
    margin: 4px auto 16px;
    border-radius: 22px;
  }

  .comparison-card {
    margin: 22px 0 14px;
    padding: 17px;
    border-radius: 22px;
  }

  .comparison-card > strong {
    font-size: 14px;
  }

  .comparison-chart {
    height: clamp(165px, 23svh, 205px);
    margin: 14px 0 9px;
    padding: 12px 26px 0;
  }

  .comparison-card > small {
    font-size: 7.5px;
  }

  /* Personal plan */
  .story-screen--trust {
    min-height: 100svh;
  }

  .personal-plan-visual {
    margin: 24px 0 18px;
    border-radius: 24px;
  }

  .personal-plan-visual > svg {
    width: 100%;
    max-height: min(390px, 47svh);
  }

  .personal-plan-visual > div {
    padding: 12px 15px;
  }

  .personal-plan-visual strong {
    font-size: 16px;
  }

  .personal-plan-visual span {
    font-size: 9.5px;
  }

  /* Course preview */
  .benefit-stack {
    gap: 10px;
    margin: 24px 0 16px;
  }

  .benefit-stack article {
    min-height: 112px;
    grid-template-columns: 104px 1fr;
    border-radius: 20px;
  }

  .benefit-stack article > div {
    padding: 12px;
  }

  .benefit-stack span {
    margin-bottom: 4px;
    font-size: 8.5px;
  }

  .benefit-stack strong {
    margin-bottom: 4px;
    font-size: 13.5px;
  }

  .benefit-stack p {
    font-size: 9.5px;
    line-height: 1.4;
  }

  /* Research */
  .research-curve {
    height: clamp(175px, 26svh, 225px);
    margin: 22px 0 17px;
    border-radius: 23px;
  }

  .research-copy {
    gap: 10px;
    margin-bottom: 13px;
  }

  .research-copy p {
    font-size: 10.5px;
    line-height: 1.5;
  }

  .research-copy a {
    font-size: 9.5px;
  }

  /* Analysis */
  .analysis-screen {
    padding-top: 25px;
    overflow: visible;
  }

  .analysis-glow {
    width: 72px;
    height: 72px;
    margin: 8px auto 15px;
    border-radius: 25px;
  }

  .analysis-number {
    margin: 20px 0 8px;
    font-size: 38px;
  }

  .analysis-bar {
    height: 9px;
  }

  .analysis-profile {
    grid-template-columns: 66px 1fr;
    gap: 11px;
    margin-top: 16px;
    padding: 9px;
    border-radius: 18px;
  }

  .analysis-profile img {
    width: 66px;
    height: 68px;
    border-radius: 13px;
  }

  .analysis-profile small {
    font-size: 8px;
  }

  .analysis-profile strong {
    font-size: 13px;
  }

  .analysis-profile p {
    font-size: 9px;
  }

  .analysis-tasks {
    gap: 8px;
    margin-top: 18px;
  }

  .analysis-tasks > div {
    min-height: 48px;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 11px;
  }

  .analysis-tasks span {
    width: 24px;
    height: 24px;
  }

  .micro-question {
    position: static;
    width: 100%;
    max-width: none;
    margin: 14px 0 0;
    padding: 14px;
    border-radius: 18px;
    backdrop-filter: none;
    box-shadow: 0 10px 28px rgba(31, 36, 43, 0.08);
  }

  /* Email capture */
  .email-screen {
    padding-top: 30px;
  }

  .email-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 17px;
    border-radius: 21px;
  }

  .email-result-preview {
    margin: 21px 0 0;
    padding: 11px;
    border-radius: 18px;
  }

  .email-form {
    gap: 13px;
    margin-top: 23px;
  }

  .email-form label > span:first-child {
    font-size: 12px;
  }

  .email-form input[type="email"] {
    height: 56px;
    border-radius: 17px;
    font-size: 16px;
  }

  .consent-check {
    font-size: 9px;
    line-height: 1.45;
  }

  .privacy-row {
    margin-top: 15px;
    font-size: 9px;
  }
}

@media (max-width: 370px) {
  .quiz-header,
  .quiz-header.quiz-header--minimal {
    padding-inline: 14px;
  }

  .quiz-screen {
    padding-inline: 15px;
  }

  .answer-card__copy strong {
    font-size: 14px;
  }

  .answer-list--tags .answer-card__copy strong {
    font-size: 11.5px;
  }

  .question-screen--goal .answer-card__copy strong {
    font-size: 17px;
  }

  .focus-practice-options {
    grid-template-columns: repeat(2, minmax(0, 142px));
  }

  .focus-option strong {
    font-size: 12px;
  }

  .story-screen:not(.story-screen--reference-benefits) {
    padding-inline: 13px;
  }
}