@font-face {
  font-family: "Poppins Local";
  src: url('./assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins Local";
  src: url('./assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins Local";
  src: url('./assets/fonts/poppins/Poppins-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins Local";
  src: url('./assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins Local";
  src: url('./assets/fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --orange: #fb681f;
  --peach: #ffdbbb;
  --panel-fill: rgb(255 219 187 / 50%);
  --ink: #333333;
  font-family: "Arial", "Helvetica", sans-serif;
  color: var(--ink);
  background: white;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body { margin: 0; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; }
h1, h2, p { margin: 0; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #333; outline-offset: 5px; }
.mobile-copy { display: none; }
.orange { color: var(--orange); }

/* The supplied 1920 × 1080 composition remains proportional on desktop. */
.landing, .signup, .question-slide, .results-slide, .information-slide { position: relative; width: 100%; max-width: 1920px; aspect-ratio: 16 / 9; margin-inline: auto; overflow: hidden; }

/* Fit the entire desktop slide inside the available browser viewport. */
@media (min-width: 721px) {
  body { height: 100vh; height: 100dvh; display: grid; place-items: center; }
  .landing, .signup, .question-slide, .results-slide, .information-slide {
    width: min(100%, calc(100vh * 16 / 9), 1920px);
    width: min(100%, calc(100dvh * 16 / 9), 1920px);
  }
  /* Continue the landing bar through the space around the centered slide.
     Its top is half the viewport height plus one sixth of the fitted slide height. */
  body:has(#landing-slide:not([hidden])) {
    background: linear-gradient(to bottom, #fff calc(50vh + min(9.375vw, 16.666667vh, 180px)), var(--peach) 0);
    background: linear-gradient(to bottom, #fff calc(50dvh + min(9.375vw, 16.666667dvh, 180px)), var(--peach) 0);
  }
}

.brand { position: absolute; z-index: 3; top: 3.425926%; left: 90.78125%; width: 7.395833%; }
.welcome { position: absolute; inset: 0 0 auto; height: 66.666667%; }
.hero-art { position: absolute; inset: 0; overflow: hidden; }
.hero-photo { position: absolute; width: 81.510417%; max-width: none; left: 18.489583%; top: 0; }
.food, .dot { position: absolute; }
.food-avocado { left: 50.885417%; top: 19.444444%; width: 3.072917%; }
.food-broccoli { left: 94.791667%; top: 22.5%; width: 3.072917%; }
.food-milk { left: 51.40625%; top: 84.722222%; width: 3.541667%; }
.food-cheese { left: 93.333333%; top: 79.027778%; width: 3.072917%; }
.dot-large { left: 53.489583%; top: 39.722222%; width: .885417%; }
.dot-small { left: 89.895833%; top: 91.805556%; width: .46875%; }
.dot-medium { left: 83.4375%; top: 6.944444%; width: .677083%; }
.headline { position: absolute; left: 6.041667%; top: 16.805556%; width: 38.4375%; }
.headline-rules { position: absolute; left: 5.9375%; top: 54.027778%; width: 21.041667%; gap: 3.712871%; }
.rules { display: flex; align-items: center; }
.headline-rules img:first-child { width: 78.712871%; }
.headline-rules img:last-child { width: 17.821782%; }
.screener-title { position: absolute; left: 5.9375%; top: 58.472222%; width: 33.854167%; }
.screener-title p { position: absolute; left: 5.230769%; top: 31.932773%; width: 86.615385%; }
.introduction { position: absolute; left: 6.041667%; top: 76.25%; width: 37.8125%; }
.quick-assessment { position: absolute; left: 6.041667%; top: 92.916667%; width: 14.84375%; }

.how-it-works { position: absolute; left: 0; right: 0; bottom: 0; height: 33.333333%; background: var(--peach); }
.process-intro h2 { position: absolute; left: 6.71875%; top: 13.333333%; width: 18.229167%; }
.process-rules { position: absolute; left: 6.354167%; top: 30.833333%; width: 20.572917%; gap: 2.78481%; }
.process-rules img:first-child { width: 79.746835%; }
.process-rules img:last-child { width: 17.468354%; }
.process-description { position: absolute; left: 6.770833%; top: 35.555556%; width: 23.90625%; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: absolute; top: 8.055556%; width: 8.177083%; }
.step-one { left: 46.458333%; }
.step-two { left: 63.072917%; }
.step-three { left: 79.166667%; }
.step-label { position: absolute; top: 114.59854%; }
.step-one .step-label { left: 23.566879%; width: 57.324841%; }
.step-two .step-label { left: -33.121019%; width: 170.700637%; }
.step-three .step-label { left: 14.012739%; width: 84.713376%; }
.process-arrow { position: absolute; top: 25.833333%; width: 1.041667%; }
.arrow-one { left: 58.697917%; }
.arrow-two { left: 75.104167%; }
.start-button { position: absolute; left: 39.53125%; top: 65.833333%; width: 21.71875%; padding: 0; border: 0; border-radius: 24px; background: transparent; transition: transform 160ms ease, filter 160ms ease; }
.start-button:hover { filter: brightness(.96); transform: translateY(-2px); }
.start-button:active { transform: translateY(1px); }

/* Slide 2 follows the same 1920 × 1080 coordinate system as Slide 1. */
.signup { container-type: inline-size; color: #090909; font-family: "Poppins", Arial, sans-serif; }
.signup-panel h1, .signup .field-label, .gender-control label, .number-unit, .signup-submit { font-family: "Poppins Local", Arial, sans-serif; }
.signup-progress { position: absolute; top: 6.666667%; left: 21.25%; width: 57.5%; height: 3.425926%; display: flex; justify-content: space-between; align-items: center; list-style: none; padding: 0; margin: 0; }
.signup-progress::before { content: ""; position: absolute; left: 1.675725%; right: 1.675725%; top: 50%; height: 2px; background: #e8e8e8; z-index: -1; }
.signup-progress li { width: 3.351449%; aspect-ratio: 1; border-radius: 50%; background: var(--peach); }
.signup-progress li[aria-current] { background: var(--orange); }
.signup-panel { position: absolute; left: 12.239583%; top: 14.814815%; width: 75.572917%; height: 76.851852%; border-radius: 2.864583cqw; background: var(--panel-fill); box-shadow: .208333cqw .3125cqw .46875cqw #fb681f33; }
.signup-panel-art, .signup-header-art { position: absolute; max-width: none; pointer-events: none; }
.signup-panel-art { display: none; }
.signup-header-art { left: 0; top: 0; width: 100%; }
.signup-panel h1 { position: absolute; left: 6.202619%; top: 3.855422%; color: white; font-size: 2.1875cqw; font-weight: 700; line-height: 1.4; outline: none; }
.signup-fields { position: absolute; left: 6.202619%; top: 16.626506%; width: 87.456926%; height: 73.253012%; display: flex; flex-direction: column; justify-content: space-between; }
.signup-row { display: flex; align-items: center; width: 100%; height: 14.802632%; }
.field-label { flex: 0 0 13.55398%; font-size: 1.5625cqw; line-height: 1.2; font-weight: 700; }
.field-control { position: relative; min-width: 0; height: 100%; background: white; }
.full-row .field-control { flex: 1; }
.measure-row .field-control, .city-control { flex: 0 0 35.145784%; }
.secondary-label { flex-basis: 16.154452%; padding-left: 3.861308%; }
.location-row .secondary-label { flex-basis: 12.608353%; }
.state-control { flex: 1; }
.field-control > input, .field-control > select { width: 100%; height: 100%; min-width: 0; border: 0; border-radius: 0; padding: .625cqw 1.041667cqw; font: inherit; font-size: 1.5625cqw; background: transparent; color: var(--ink); }
.field-control > input:focus-visible, .field-control > select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.field-control > input[type="number"] { appearance: textfield; -moz-appearance: textfield; padding-right: 3.333333cqw; }
.field-control > input::-webkit-inner-spin-button, .field-control > input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.number-buttons { position: absolute; top: 8.888889%; right: .625cqw; width: 1.666667cqw; height: 83.333333%; display: flex; flex-direction: column; justify-content: space-between; }
.number-buttons button { border: 0; padding: 0; width: 100%; height: 48%; background: var(--peach); }
.number-buttons img { width: 100%; height: 100%; object-fit: fill; }
.measurement::after { content: ""; position: absolute; height: 2px; background: #e8e8e8; bottom: 27.777778%; left: 1.041667cqw; right: 5.729167cqw; pointer-events: none; }
.measurement > input { padding-right: 5.989583cqw !important; }
.number-unit { position: absolute; right: 2.760417cqw; bottom: 16.666667%; font-size: 1.5625cqw; font-weight: 500; color: #929292; pointer-events: none; }
.gender-control { display: flex; align-items: center; gap: 3.541667cqw; padding-left: 6.71875cqw; }
.gender-control label { display: flex; align-items: center; gap: 1.458333cqw; font-size: 1.5625cqw; font-weight: 500; color: #777; cursor: pointer; }
.gender-control input { appearance: none; flex: 0 0 1.875cqw; width: 1.875cqw; height: 1.875cqw; margin: 0; border: 0; border-radius: 50%; background: url('./assets/slide-02/07-radio-outline.png') center / 100% 100% no-repeat; }
.gender-control input:checked { background-image: url('./assets/slide-02/03-radio-selected-dot.png'), url('./assets/slide-02/07-radio-outline.png'); background-size: 38.888889% 38.888889%, 100% 100%; }
.gender-control input:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.state-control > select { appearance: none; padding-right: 4.895833cqw; font-size: 1.25cqw; background: url('./assets/slide-02/06-dropdown-arrow.png') right center / 4.166667cqw 100% no-repeat; cursor: pointer; }
.state-control select, .state-control optgroup, .state-control option { font-family: "Poppins Local", Arial, sans-serif; font-weight: 500; }
.signup-submit { position: absolute; top: 94.819277%; left: 43.555479%; width: 13.71468%; aspect-ratio: 199 / 97; border: 0; padding: 0; background: url('./assets/slide-02/05-submit-button-background.png') center / 100% 100% no-repeat; color: white; font-size: 1.666667cqw; font-weight: 700; }
.signup-submit span { display: block; padding-right: 8%; padding-bottom: 14%; }
.signup-submit:hover { filter: brightness(.96); }

/* Questions use the supplied 1706 × 726 panel at (107, 161) on the reference. */
.question-slide { container-type: inline-size; font-family: "Poppins", Arial, sans-serif; }
.question-section, .question-heading, .question-helper, .question-option { font-family: "Poppins Local", Arial, sans-serif; }
.question-panel { position: absolute; left: 5.572917%; top: 14.907407%; width: 88.854167%; height: 67.222222%; display: flex; flex-direction: column; padding: 8.90625cqw 2.65625cqw 5.729167cqw 3.90625cqw; border-radius: 2.864583cqw; background: var(--panel-fill); box-shadow: .208333cqw .3125cqw .46875cqw #fb681f33; }
.question-header-art { position: absolute; inset: 0; width: 100%; pointer-events: none; }
.question-section { position: absolute; left: 5.158265%; top: 2.203857%; margin: 0; color: white; font-size: 3.333333cqw; font-weight: 700; line-height: 1.25; }
/* Desktop titles fit on one line; helper copy can wrap above the answers. */
.question-heading { flex-shrink: 0; display: flex; align-items: baseline; gap: .625cqw; margin: 0 0 0 .416667cqw; font-size: var(--question-heading-size, 2.291667cqw); font-weight: 700; line-height: 1.25; white-space: nowrap; color: #222; outline: none; }
.question-heading > span:last-child { min-width: 0; }
.question-number { flex-shrink: 0; color: var(--orange); }
.question-helper { flex-shrink: 0; margin: 1.041667cqw .885417cqw 0 .677083cqw; font-size: 1.666667cqw; font-weight: 400; line-height: 1.4; font-style: italic; color: #808080; }
#question-form { flex: 1; min-height: 0; margin-top: 1.666667cqw; }
.question-options { height: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
#question-choices { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: .416667cqw; }
.question-option { display: flex; flex-shrink: 0; align-items: center; gap: 2.239583cqw; min-height: 2.96875cqw; font-size: 2.291667cqw; font-weight: 500; line-height: 1.295455; color: #000; cursor: pointer; }
.question-option input { appearance: none; flex: 0 0 2.96875cqw; width: 2.96875cqw; height: 2.96875cqw; border: 0; border-radius: 50%; margin: 0; background: url('./assets/questions/02-radio-outline.png') center / 100% 100% no-repeat; cursor: pointer; }
.question-option input:checked { background-image: url('./assets/questions/03-radio-selected-dot.png'), url('./assets/questions/02-radio-outline.png'); background-size: 49.122807% 49.122807%, 100% 100%; }
.question-option input:focus-visible { outline: 2px solid #333; outline-offset: 5px; }
.question-next { position: absolute; left: 88.80422%; top: 85.950413%; width: 9.378664%; border: 0; border-radius: 1.041667cqw; padding: 0; background: transparent; }
.question-next:hover { filter: brightness(.96); }
.question-next:active { transform: scale(.88); filter: brightness(.8); }
.question-next:disabled { cursor: wait; }
.question-next img { width: 100%; }
.question-error { position: absolute; left: 4.396249%; top: 88.15427%; right: 20%; font-size: 1.145833cqw; line-height: 1.4; color: #a32e06; }
.question-progress { isolation: isolate; }
.question-progress li { display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5625cqw; font-weight: 700; line-height: 1; cursor: default; }

/* Results follow the supplied 1920 × 1080 composition and original table art. */
.results-slide { container-type: inline-size; font-family: "Poppins", Arial, sans-serif; --risk-color: #ed1725; }
.results-heading, .results-total, .results-risk, .results-description { font-family: "Poppins Local", Arial, sans-serif; }
.results-slide[data-risk="low"] { --risk-color: #32b34a; }
.results-slide[data-risk="moderate"] { --risk-color: #ffda00; }
.results-panel { position: absolute; left: 8.802083%; top: 15.555556%; width: 82.395833%; height: 68.888889%; border-radius: 2.708333cqw; background: var(--panel-fill); box-shadow: .208333cqw .3125cqw .46875cqw #fb681f33; }
.results-heading { position: absolute; inset: 0 0 auto; height: 5.3125cqw; display: flex; align-items: center; padding: 0 3.59375cqw; border-radius: 2.708333cqw 2.708333cqw 0 0; background: var(--orange); color: #fff; font-size: 2.291667cqw; font-weight: 600; line-height: 1.25; outline: none; }
.results-summary { position: absolute; top: 6.927083cqw; left: 3.333333cqw; right: 3.333333cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.239583cqw; }
.results-outcome { display: flex; align-items: center; gap: 2.395833cqw; min-width: 0; }
.results-total { flex-shrink: 0; color: #000; font-size: 3.333333cqw; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.results-risk { min-width: 0; font-size: 1.354167cqw; font-weight: 700; line-height: 1.3; }
.results-risk > p:first-child { margin: 0 0 .416667cqw .9375cqw; }
.results-risk-badge { padding: .520833cqw .9375cqw; border-radius: .625cqw; background: var(--peach); font-size: var(--result-badge-size, 1.458333cqw); font-weight: 700; white-space: nowrap; }
.results-risk-badge strong { color: var(--risk-color); font-weight: inherit; }
.results-description { font-size: 1.354167cqw; font-weight: 500; font-style: italic; line-height: 1.2; }
.results-description p + p { margin-top: .729167cqw; }
.results-score-bar { position: absolute; top: 55.376344%; left: 4.045512%; width: 91.972187%; }
.score-interpretation { position: absolute; inset: 0; pointer-events: none; }
.score-interpretation h2 { position: absolute; top: 64.516129%; left: 0; width: 100%; margin: 0; color: #000; text-align: center; font-size: 1.875cqw; font-weight: 800; line-height: 1.25; }
.score-table { position: absolute; top: 63.709677%; left: 10.366625%; width: 79.898862%; aspect-ratio: 1264 / 240; }
.score-table-art { position: absolute; inset: 0; width: 100%; }
.score-band { position: absolute; top: 0; width: 22.943038%; height: 100%; color: #000; }
.score-band-low { left: 0; --band-color: #32b34a; }
.score-band-moderate { left: 38.765823%; --band-color: #ffda00; }
.score-band-high { left: 76.344937%; --band-color: #ed1725; }
.band-range { position: absolute; top: 28.333333%; left: 50%; width: 50%; height: 20.833333%; display: flex; align-items: center; justify-content: center; font-size: 2.291667cqw; line-height: 1; }
.band-result-label { position: absolute; top: 56.666667%; left: 0; width: 100%; margin: 0; font-size: 1.5625cqw; font-weight: 800; text-align: center; line-height: 1.2; }
.band-description { position: absolute; top: 75%; left: 20%; width: 83%; font-size: 1.041667cqw; line-height: 1.25; }
.restart-assessment, .close-information { position: absolute; right: 1.666667%; bottom: 3.796296%; display: grid; place-items: center; width: 4.583333%; aspect-ratio: 1; padding: .625cqw; border: 0; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: .208333cqw .3125cqw .46875cqw #fb681f55; }
.restart-assessment svg { display: block; width: 100%; height: 100%; }
.restart-assessment:hover, .assessment-information:hover, .close-information:hover { filter: brightness(.96); }
.assessment-information { position: absolute; left: 1.666667%; bottom: 3.796296%; width: 4.583333%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; }
/* The supplied 107px artwork includes the shadow around its 88px button face. */
.assessment-information img, .close-information img { position: absolute; top: -1.136364%; left: -1.136364%; width: 121.590909%; max-width: none; }
.information-slide { container-type: inline-size; background: #fff; font-family: "Poppins Local", Arial, sans-serif; }
.information-art { position: absolute; top: 7.777778%; left: 7.630208%; width: 84.739583%; }
.close-information { padding: 0; background: transparent; box-shadow: none; }
.information-copy h1 { outline: none; font-weight: 700; }

/* The original table asset already includes its black text and score ranges. */
@media (min-width: 721px) {
  .information-copy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .score-interpretation h2, .score-band { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Phones reflow the slide and use live, readable text. */
@media (max-width: 720px) {
  .desktop-copy { display: none; }
  .mobile-copy { display: block; }
  .landing { aspect-ratio: auto; overflow: visible; }
  .brand { position: relative; top: auto; left: auto; width: 128px; margin: 24px 6% 22px auto; }
  .welcome { position: relative; inset: auto; height: auto; display: flex; flex-direction: column; padding: 0 6%; }
  .headline, .headline-rules, .screener-title, .introduction, .quick-assessment { position: relative; left: auto; top: auto; width: auto; }
  .headline { order: 0; max-width: 650px; font-size: clamp(2.2rem, 6.5vw, 4.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; }
  .headline-rules { order: 1; width: 55%; max-width: 350px; margin: 20px 0 24px; }
  .screener-title { order: 2; align-self: flex-start; max-width: 630px; padding: 18px 24px; background: var(--peach); border-radius: 50px; box-shadow: 4px 6px 8px #fb681f55; }
  .pill-art { display: none; }
  .screener-title p { position: static; width: auto; font-size: clamp(1.125rem, 2.5vw, 1.6rem); font-weight: 800; line-height: 1.3; }
  .introduction { order: 3; margin-top: 30px; max-width: 620px; font-weight: 700; font-size: 1.0625rem; line-height: 1.5; }
  .quick-assessment { order: 4; margin-top: 22px; font-size: 1.0625rem; font-weight: 700; }
  .hero-art { order: 5; position: relative; inset: auto; width: min(100%, 660px); height: auto; aspect-ratio: 1.2; align-self: center; margin-top: 18px; }
  .hero-photo { width: 185%; left: -77%; top: -2%; }
  .food-avocado { width: 8%; left: 2%; top: 9%; }
  .food-broccoli { width: 8%; left: 91%; top: 12%; }
  .food-milk { width: 9%; left: 0; top: 77%; }
  .food-cheese { width: 8%; left: 91%; top: 79%; }
  .dot-large { width: 2%; left: 4%; top: 40%; }
  .dot-small { width: 1.2%; left: 96%; top: 67%; }
  .dot-medium { width: 1.5%; left: 76%; top: 3%; }
  .how-it-works { position: relative; inset: auto; height: auto; padding: 32px 6% 30px; }
  .process-intro h2 { position: static; width: auto; font-size: clamp(2rem, 5vw, 3rem); color: var(--orange); font-weight: 800; line-height: 1.15; }
  .process-rules { position: static; width: 80%; max-width: 350px; margin: 12px 0; }
  .process-description { position: static; width: auto; max-width: 500px; font-size: 1.0625rem; line-height: 1.5; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; margin: 30px 0; }
  .step { position: relative; inset: auto; width: auto; display: flex; flex-direction: column; align-items: center; }
  .step-icon { width: 130px; }
  .step .step-label { position: static; width: auto; margin-top: 12px; text-align: center; font-size: 1rem; font-weight: 600; line-height: 1.4; }
  .process-arrow { display: none; }
  .start-button { position: static; display: block; width: min(100%, 360px); margin: 0 auto; padding: 18px 20px; border-radius: 16px; background: var(--orange); color: white; box-shadow: 4px 6px 8px #fb681f66; font-size: 1.25rem; font-weight: 800; min-height: 56px; }
  .signup { aspect-ratio: auto; overflow: visible; padding-bottom: 32px; }
  .signup-progress { position: relative; top: auto; left: auto; width: 88%; height: auto; margin: 0 auto 24px; }
  .signup-progress li { width: 5%; }
  .signup-panel { position: relative; left: auto; top: auto; width: 92%; height: auto; margin: 0 auto; border-radius: 24px; background: var(--panel-fill); box-shadow: 3px 5px 9px #fb681f26; }
  .signup-panel-art, .signup-header-art { display: none; }
  .signup-panel h1 { position: static; padding: 22px 24px; border-radius: 24px 24px 0 0; background: var(--orange); font-size: 1.75rem; line-height: 1.2; }
  #signup-form { padding: 26px 20px; }
  .signup-fields { position: static; width: auto; height: auto; gap: 24px; }
  .signup-row { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .field-label { padding: 0; font-size: 1rem; }
  .field-control { height: 56px; min-width: 0; }
  .field-control > input, .field-control > select { font-size: 1rem; padding: 12px 14px; }
  .number-control { height: 96px; }
  .field-control > input[type="number"] { padding-right: 65px; }
  .number-buttons { top: 2px; right: 4px; width: 44px; height: 92px; }
  .number-buttons button { height: 44px; }
  .number-buttons img { object-fit: contain; }
  .measurement > input { padding-right: 102px !important; }
  .measurement::after { left: 14px; right: 100px; bottom: 25px; }
  .number-unit { right: 60px; bottom: 24px; font-size: 1rem; }
  .secondary-label { margin-top: 14px; }
  .gender-control { height: 60px; padding: 0 14px; gap: 24px; }
  .gender-control label { min-height: 44px; gap: 10px; font-size: 1rem; }
  .gender-control input { flex-basis: 28px; width: 28px; height: 28px; }
  .state-control > select { padding-right: 60px; font-size: 1rem; background-size: 50px 100%; }
  .signup-submit { position: static; display: block; width: 199px; max-width: 100%; margin: 26px auto -12px; font-size: 1.5rem; }
  .question-slide { aspect-ratio: auto; overflow: visible; padding-bottom: 32px; }
  .question-panel { position: relative; left: auto; top: auto; width: 92%; height: auto; display: block; margin: 0 auto; padding: 0 0 22px; border-radius: 24px; box-shadow: 3px 5px 9px #fb681f26; }
  .question-header-art { display: none; }
  .question-section { position: static; padding: 22px 24px; border-radius: 24px 24px 0 0; background: var(--orange); font-size: 1.75rem; line-height: 1.2; }
  .question-heading { position: static; display: block; margin: 28px 22px 0; font-size: 1.375rem; line-height: 1.4; white-space: normal; }
  .question-number { margin-right: 8px; }
  .question-helper { position: static; margin: 16px 22px 0; font-size: 1rem; line-height: 1.6; color: #686868; }
  #question-form { margin-top: 0; }
  .question-options { height: auto; margin: 24px 22px 0; }
  #question-choices { height: auto; gap: 20px; }
  .question-option { gap: 16px; min-height: 48px; font-size: 1.125rem; line-height: 1.5; }
  .question-option input { flex-basis: 34px; width: 34px; height: 34px; }
  .question-next { position: static; display: block; width: 160px; margin: 24px 14px 0 auto; border-radius: 14px; }
  .question-error { position: static; margin: 18px 22px 0; font-size: 1rem; }
  .question-progress { height: 32px; margin-bottom: 24px; }
  .question-progress li { position: relative; flex: 0 0 24px; width: 24px; font-size: 1rem; }
  .results-slide { aspect-ratio: auto; overflow: visible; padding-bottom: 28px; }
  .results-panel { position: relative; inset: auto; width: 92%; height: auto; margin: 0 auto; padding-bottom: 26px; border-radius: 24px; }
  .results-heading { position: static; height: auto; padding: 22px 24px; border-radius: 24px 24px 0 0; font-size: 1.75rem; }
  .results-summary { position: static; display: flex; flex-direction: column; gap: 24px; padding: 26px 22px; }
  .results-outcome { flex-direction: column; align-items: flex-start; gap: 18px; }
  .results-total { font-size: 3rem; }
  .results-risk { font-size: 1.0625rem; }
  .results-risk > p:first-child { margin: 0 0 8px; }
  .results-risk-badge { padding: 10px 12px; border-radius: 10px; font-size: 1.125rem; white-space: normal; }
  .results-description { font-size: 1rem; line-height: 1.5; }
  .results-description p + p { margin-top: 16px; }
  .results-score-bar { position: static; width: calc(100% - 44px); height: 8px; margin: 0 22px; }
  .score-interpretation { position: static; }
  .score-interpretation h2 { position: static; width: auto; margin: 26px 22px 20px; font-size: 1.375rem; }
  .score-table { position: static; display: grid; gap: 16px; width: auto; margin: 0 22px; aspect-ratio: auto; }
  .score-table-art { display: none; }
  .score-band { position: static; width: auto; height: auto; padding: 18px; border: 1px solid var(--band-color); border-radius: 14px; }
  .band-range { position: static; justify-content: space-between; gap: 12px; width: auto; height: auto; font-size: 1.75rem; }
  .band-range .mobile-copy { display: inline; padding: 10px; border-radius: 8px; background: var(--band-color); color: #fff; font-size: 1rem; font-weight: 700; }
  .score-band-moderate .mobile-copy { color: #000; }
  .band-result-label { position: static; width: auto; margin: 20px 0 10px; text-align: left; font-size: 1.125rem; }
  .band-description { position: static; width: auto; font-size: 1rem; line-height: 1.5; }
  .restart-assessment, .close-information { position: static; width: 56px; margin: 22px 4% 0 auto; padding: 10px; }
  .assessment-information { left: 4%; bottom: 28px; width: 56px; }
  .information-slide { aspect-ratio: auto; overflow: visible; padding-bottom: 28px; }
  .information-art { display: none; }
  .information-copy { padding: 0 6%; font-size: 1rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
  .information-copy h1 { font-size: 1.75rem; }
  .information-copy ol { padding-left: 1.5em; }
  .information-copy li + li { margin-top: 1em; }
  .information-disclaimer { margin-top: 2em; }
  .information-disclaimer p + p { margin-top: 1em; }
  .close-information { position: relative; right: auto; bottom: auto; padding: 0; }
}

@media (max-width: 380px) {
  .steps { gap: 10px; }
  .step .step-label { font-size: .9375rem; }
  .headline { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .start-button { transition: none; }
}