@font-face{font-family:QuizRoboto;src:url('../ASSETS/fonts/Roboto-300.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:QuizRoboto;src:url('../ASSETS/fonts/Roboto-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:QuizRoboto;src:url('../ASSETS/fonts/Roboto-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:QuizRoboto;src:url('../ASSETS/fonts/Roboto-700.ttf') format('truetype');font-weight:700;font-display:swap}
/* The approved artwork has one fixed palette, including in a dark browser theme. */
:root{color-scheme:only light;--ink:#4d6c8b;--coral:#ea5769;--purple:#5958a4;--lavender:#a8a2d0;--aqua:#6bc3c7;--orange:#ec6e33;--teal:#085558;--lime:#99c21e;--blue:#1677bc;--ease-out:cubic-bezier(0.23,1,0.32,1)}
@property --percentage{syntax:'<percentage>';inherits:false;initial-value:100%}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;background:#fff}
body{font-family:QuizRoboto,Arial,sans-serif;color:var(--ink);font-weight:300}
button,input,select{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button,input,select{border:0}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid currentColor;outline-offset:5px}
button:disabled{cursor:default}
button{touch-action:manipulation}
.tl-quiz{width:100%;isolation:isolate;background:#fff;color-scheme:only light}
.quiz-stage{position:relative;width:100%;height:100vh;height:100svh;container-type:size;overflow:hidden;background:#fff}
.scene{position:absolute;inset:0;width:100%;background:#fff;overflow:hidden;container-type:size}
.scene-photo{position:absolute;inset:0;pointer-events:none}
.scene-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.brand-logo{position:absolute;top:5.28%;right:3.18%;width:14.375%;z-index:2;line-height:0}
.brand-logo img{width:100%;height:auto}
.screen-title{position:absolute;margin:0;font-weight:300;line-height:1.1;outline:none}
.screen-title strong,strong{font-weight:500}
.mobile-only,.food-grid,.details-portrait,.details-fruit{display:none}
.next-button{position:absolute;display:inline-flex;align-items:center;justify-content:center;gap:1.15cqw;color:#fff;background:var(--coral);padding:.6cqw .8cqw;font-size:1.6cqw;font-weight:300;line-height:1;white-space:nowrap;min-height:3.2cqw;transition:filter 160ms var(--ease-out),transform 160ms var(--ease-out)}
.next-button:active{transform:scale(.97)}
.white-button{color:#3c6d8c;background:#fff}
.arrow-circle{display:inline-flex;align-items:center;justify-content:center;width:2.35cqw;height:2.35cqw;border:1px solid currentColor;border-radius:50%;flex-shrink:0}
.arrow-circle svg{width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:.8}
.welcome-wedge{position:absolute;inset:0;background:var(--coral);clip-path:polygon(0 0,34.2% 0,66.67% 100%,0 100%)}
.scene-welcome .screen-title{left:2.38%;bottom:3.9%;font-size:6.25cqw;line-height:1.07;color:white}
.welcome-next{left:42.7%;bottom:5.28%;width:15.42%;height:6.3%}
.scene-welcome .brand-logo,.scene-question .brand-logo{width:13.8%}
/* Details: real form elements follow the supplied composition. */
.scene-details .screen-title{left:44.17%;top:12.85%;font-size:3.33cqw;width:51%;line-height:1.07}
.details-form{position:absolute;left:44.27%;right:3.23%;top:28.75%;height:46%}
.form-intro{margin:0;font-size:1.55cqw}
.details-form>input{position:absolute;left:0;width:67.65%;height:10.05%;border-radius:3cqw;background:#e5e1e1;color:var(--ink);padding:0 1.2cqw;font-size:1.83cqw;font-weight:300}
.details-form>input::placeholder{color:var(--ink);opacity:1}
.name-field{top:11.8%}.surname-field{top:26.95%}
.form-selects{position:absolute;top:42.1%;left:0;display:flex;gap:6cqw}
.select-wrap{position:relative;width:10.85cqw;height:2.6cqw}
.select-wrap select{width:100%;height:100%;appearance:none;border-radius:3cqw;background:#e5e1e1;color:var(--ink);padding:0 2.1cqw 0 1.2cqw;font-size:1.8cqw;font-weight:300;cursor:pointer}
.select-wrap select option{font-size:16px;color:var(--ink);background:#fff}
.select-arrow{position:absolute;right:.9cqw;top:16%;width:1.65cqw;height:1.65cqw;border:1px solid #527b95;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:Arial,sans-serif;font-size:1.4cqw;line-height:1;padding-bottom:.55cqw;pointer-events:none}
.legal-intro{position:absolute;left:1.2cqw;top:61.4%;margin:0;font-size:.86cqw;line-height:1.3}
.text-link{background:none;color:inherit;padding:0;border:0;font:inherit;text-align:inherit}
.consent{position:absolute;top:70.1%;left:1.2cqw;display:flex;align-items:baseline;gap:.22cqw;font-size:.87cqw;font-weight:500;line-height:1.25}
.consent input{appearance:none;width:.68cqw;height:.68cqw;min-width:12px;min-height:12px;border:1px solid var(--ink);margin:0;flex-shrink:0;cursor:pointer}
.consent input:checked{background:var(--ink);box-shadow:inset 0 0 0 2px white}
.form-submit{right:0;top:77.5%;width:19.85%;height:12.5%;gap:.85cqw;font-size:1.5cqw}
.form-submit .arrow-circle{width:2.1cqw;height:2.1cqw}
/* Context screens */
.scene-stats .info-next,.scene-info .info-next{left:42%;right:auto;top:auto;bottom:3%;width:16%;height:6%;z-index:3}
.scene-stats .brand-logo{display:none}
.scene-stats .screen-title{top:13.65%;left:3%;width:94%;text-align:center;font-size:3.65cqw;line-height:1.07}
.stats-grid{position:absolute;left:10%;right:5%;top:32.8%;display:grid;grid-template-columns:repeat(3,1fr);gap:3%}
.stat{text-align:center;display:flex;align-items:center;flex-direction:column}
.donut{position:relative;width:15cqw;height:15cqw;border-radius:50%;background:conic-gradient(var(--coral) 0 var(--percentage),#496d8d var(--percentage) 100%)}
.donut::before{content:'';position:absolute;inset:16.3%;background:white;border-radius:50%}
.donut img{position:absolute;left:19.5%;top:20.1%;width:61%;height:61%;border-radius:50%;object-fit:cover}
.donut-small,.donut-large{position:absolute;color:white;font-size:1.34cqw;font-weight:700}
.donut-small{left:75%;top:18%}.donut-large{left:6%;top:60%}
.stat-number{display:flex;align-items:center;justify-content:center;gap:1.35cqw;font-size:4.4cqw;font-weight:500;line-height:1;margin:3.95cqw 0 1.45cqw}
.stat-arrow{width:3cqw;height:3.3cqw;background:var(--coral);clip-path:polygon(50% 0,100% 44%,73% 44%,73% 100%,27% 100%,27% 44%,0 44%)}
.stat-arrow.down{transform:rotate(180deg)}
.stat-description{font-size:1.5cqw;line-height:1.025;margin:0;max-width:20cqw}
.context-copy{position:absolute;left:4%;right:4%;top:24.3%;text-align:center;color:#fff}
.context-intro{font-size:3.65cqw;line-height:1.08;margin:0 auto 3.55cqw;max-width:83cqw}
.context-copy .screen-title{position:static;font-size:3.65cqw;font-weight:500;line-height:1.1}
.context-options{position:absolute;top:59.15%;left:9.7%;right:10.4%;display:flex;justify-content:space-between;gap:3.4cqw}
.answer-button{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;border:0;border-radius:8cqw;background:var(--lavender);box-shadow:inset .15cqw -.32cqw 0 #0002;color:#fff;font-size:1.6cqw;font-weight:400;line-height:1.15;padding:.3cqw .5cqw;transition:background 160ms var(--ease-out),box-shadow 160ms var(--ease-out),filter 160ms var(--ease-out),transform 160ms var(--ease-out);min-width:0}
.answer-button small{display:block;font-size:.8em;line-height:1.35}
.answer-button:active{transform:scale(.97)}
.answer-button.selected{box-shadow:inset .15cqw -.3cqw 0 #0003}
.has-selection .answer-button:not(.selected){background:#878787;box-shadow:inset .15cqw -.3cqw 0 #0003}
.context-options .answer-button{flex:1;min-height:4.85cqw}
.scene-context .context-next{right:3.2%;bottom:5%;width:13.1%;height:6.5%;z-index:3}
.scene-context .context-next:disabled{opacity:.78}
.step-7 .context-copy{top:28.1%}
.step-7 .context-options{top:56.75%;left:7.25%;right:7.1%;gap:3.1cqw}
.step-7 .answer-button{font-size:1.42cqw;min-height:4.1cqw}
.step-6 .context-copy,.step-9 .context-copy{top:39.8%;left:1%;right:1%}
.step-9 .context-copy{top:37.65%}
.context-options.perception{top:51.55%;left:17.4%;right:17.4%;gap:4.1cqw}
.context-options.perception .answer-button{background:var(--aqua);min-height:4.85cqw}
.context-options.perception.has-selection .answer-button:not(.selected){background:#878787}
.step-10 .context-copy{top:24.6%}
.step-10 .context-intro{max-width:61cqw;margin-bottom:3.8cqw}
.step-10 .context-options{top:65.9%;left:9.8%;right:9.8%}
.scene-info .screen-title{text-align:center;left:8%;right:8%;top:13.7%;font-size:3.65cqw;line-height:1.07}
.orange-callout{position:absolute;left:50%;transform:translateX(-50%);top:33.8%;margin:0;background:var(--orange);color:#fff;font-size:1.65cqw;font-weight:400;text-align:center;padding:.48cqw .55cqw;line-height:1.17;white-space:nowrap}
.food-strip{position:absolute;left:0;right:0;line-height:0}
.food-strip>img{width:100%;height:100%;object-fit:fill}
.fiber-strip{top:46.5%;height:33.0%}
.strip-captions{position:absolute;inset:0;display:grid;grid-template-columns:26.5% 27% 22.5% 24%;align-items:end;color:#fff;font-size:2.08cqw;font-weight:400;line-height:1.15;padding-bottom:1.2cqw}
.strip-captions span{padding-left:3.25cqw}.strip-captions span:last-child{padding-right:3cqw}
.step-8 .screen-title{top:13.7%;left:8.8%;right:8.8%}
.desktop-strong{font-weight:500}
.info-description{position:absolute;top:45.3%;left:8%;right:8%;text-align:center;font-size:1.57cqw;font-weight:400;line-height:1.28;margin:0}
.info-description span{display:block}
.protein-strip{top:63%;height:23%}
.step-11 .screen-title{top:8.75%;left:8%;right:8%}
.step-11 .info-description{top:33.6%}
.step-11 .orange-callout{top:43.9%;padding:.6cqw 1.9cqw}
.sugar-strip{top:55.2%;height:29%}
.scene-introduction .screen-title{top:46.5%;left:7.6%;right:7.6%;font-size:3.65cqw;color:#fff;text-align:center;line-height:1.1}
.scene-introduction .next-button{right:3.2%;bottom:9.6%;width:13.1%;height:6.5%;gap:1cqw}
/* Five scored questions */
.scene-question .screen-title{left:2.15%;bottom:14.3%;font-size:6.25cqw;color:white;line-height:1.075}
.quiz-options{position:absolute;right:3.18%;top:15%;width:22.4%;height:69.05%;display:grid;grid-template-rows:repeat(8,1fr);gap:1.04cqw}
.quiz-options .answer-button{font-size:1.6cqw;width:100%}
.color-0{background:var(--coral)}.color-1{background:var(--purple)}.color-2{background:var(--blue)}.color-3{background:var(--orange)}.color-4{background:var(--teal)}.color-5{background:var(--lavender)}.color-6{background:var(--lime)}.color-7{background:var(--aqua)}
.quiz-next{right:3.18%;bottom:5.05%;width:22.4%;height:5.7%;font-size:1.48cqw;gap:1.3cqw}
.quiz-next:disabled{opacity:.78}
.quiz-next .arrow-circle{width:2cqw;height:2cqw}
.exercise-options{top:23.6%;height:60.45%;grid-template-rows:repeat(7,1fr)}
.question-progress{position:absolute;left:2.65%;bottom:4.25%;display:flex;align-items:center;width:20.85%;height:1.6cqw}
.progress-connector{flex:1;height:2px;background:#fff;pointer-events:none}
.progress-dot{position:relative;flex-shrink:0;width:1.1cqw;height:1.1cqw;background:transparent;border:3px solid #fff;border-radius:50%;padding:0;z-index:1}
.progress-dot::after{content:'';position:absolute;inset:-10px;border-radius:50%}
.progress-dot.current{background:white}
.progress-dot:disabled{opacity:1}
.answer-error{position:absolute;right:3.2%;bottom:11%;width:22.4%;margin:0;color:white;text-shadow:0 1px 5px #000;font-size:1.1cqw;text-align:center}
/* Results and ingredient stories */
.result-wedge{position:absolute;inset:0;background:var(--result-color);clip-path:polygon(33.34% 0,100% 0,100% 100%,65.78% 100%)}
.route-fiber .result-wedge{clip-path:polygon(35.7% 0,100% 0,100% 100%,68.1% 100%)}
.brand-mark{position:absolute;top:10%;left:5.85%;width:10.84%;height:auto}
.scene-result .screen-title{left:5.85%;top:22.1%;font-size:4.86cqw;font-weight:400;line-height:1.06}
.result-copy{position:absolute;left:5.85%;top:43.1%;width:36%;font-size:1.6cqw;line-height:1.21;font-weight:300}
.result-copy p{margin:0 0 1.95cqw}
.scene-result .next-button{left:5.85%;top:77.7%;width:14.5%;height:6.5%;gap:1.55cqw}
.result-drink{position:absolute;object-fit:contain;pointer-events:none}
.scene-result .result-drink{left:60.05%;top:16.6%;width:34%;height:64%}
.allergy-note{position:absolute;right:3.2%;bottom:5.2%;width:27.3%;margin:0;color:white;font-size:1.2cqw;line-height:1.25;text-align:right}
.scene-result.route-fiber .brand-mark{top:16.1%}
.scene-result.route-fiber .screen-title{top:29.0%}
.scene-result.route-fiber .result-copy{top:52.65%;width:43%}
.scene-result.route-fiber .result-drink{left:63.05%;top:12.8%;width:28.5%;height:69.3%}
.scene-result.route-fiber .allergy-note{width:22%}
.scene-result.route-hydration .screen-title{top:23.6%}
.scene-result.route-hydration .result-copy{top:44.1%;width:46%;font-size:1.88cqw;line-height:1.25}
.scene-result.route-hydration .result-copy p{margin-bottom:2.3cqw}
.scene-result.route-hydration .result-copy p:first-child{max-width:40cqw}
.scene-result.route-hydration .next-button{top:80.9%;left:6%}
.scene-result.route-hydration .result-drink{left:58.7%;top:14.4%;width:38%;height:66.9%}
.ingredients-wedge{position:absolute;inset:0;background:var(--result-color);clip-path:polygon(77.1% 0,100% 0,100% 70.5%)}
.scene-ingredients .screen-title{top:6.7%;left:4.7%;right:28%;font-size:3.4cqw;line-height:1.07}
.ingredients-list{position:absolute;top:33.75%;left:5%;width:50.6%;margin:0}
.ingredient{display:grid;grid-template-columns:19% 1fr;gap:4%;align-items:center;padding:.45cqw 0 .8cqw;border-bottom:.25cqw solid #d5e8f2;min-height:6.3cqw}
.ingredient:last-child{border-bottom:0}
.ingredient dt{font-size:1.9cqw;font-weight:700;line-height:1.13}
.ingredient dt img{max-width:91%;height:auto;display:block}
.ingredient dd{margin:0;font-weight:400;font-size:1.2cqw;line-height:1.2}
.ingredient dt small{display:block;font-size:.48em;line-height:1.3}
.mexico-note{display:block}
.mexico-note.inline-note{display:inline}
.scene-ingredients .result-drink{left:67.7%;top:16.0%;width:28.9%;height:63%}
.redeem-copy{position:absolute;left:4.7%;bottom:5.6%;font-size:2.45cqw;font-weight:500;line-height:1.1;margin:0;max-width:74%}
.scene-ingredients .next-button{right:3.2%;bottom:5.2%;width:14.85%;height:7.8%;text-align:left;gap:1.4cqw;line-height:1.05}
.scene-ingredients.route-protein .screen-title{top:4.4%}
.scene-ingredients.route-protein .ingredients-list{top:28.2%;left:5.6%;width:48.3%}
.scene-ingredients.route-protein .ingredient{min-height:6.8cqw}
.scene-ingredients.route-protein .ingredient-genu,.scene-ingredients.route-protein .ingredient-sfs{min-height:4.9cqw}
.scene-ingredients.route-protein .ingredient dd{font-size:1.15cqw}
.scene-ingredients.route-protein .ingredient dt{font-size:1.6cqw}
.scene-ingredients.route-protein .result-drink{left:60.2%;top:21.5%;width:34%;height:60.9%}
.scene-ingredients.route-hydration .screen-title{top:9.3%;left:5.4%}
.scene-ingredients.route-hydration .ingredients-list{top:39.2%;left:5.7%;width:58%}
.scene-ingredients.route-hydration .ingredient{grid-template-columns:18% 1fr;gap:4.6%;min-height:8.9cqw;padding:.5cqw 0 1.2cqw}
.scene-ingredients.route-hydration .ingredient dd{font-size:1.4cqw}
.scene-ingredients.route-hydration .ingredient dt img{max-width:95%}
.scene-ingredients.route-hydration .result-drink{left:64.2%;top:16.7%;width:36%;height:66.1%}
@media (min-width:768px) and (min-aspect-ratio:16/9){
  .scene-stats .screen-title{font-size:min(3.65cqw,7.2cqh)}
  .donut{width:min(12.5cqw,26cqh);height:min(12.5cqw,26cqh)}
  .stat-number{font-size:min(3.75cqw,7.7cqh);gap:1.1cqw;margin:min(2.5cqw,4.8cqh) 0 min(1cqw,2cqh)}
  .stat-arrow{width:min(2.4cqw,5cqh);height:min(2.7cqw,5.5cqh)}
  .stat-description{font-size:min(1.3cqw,2.7cqh);max-width:19cqw;line-height:1.08}
  .scene-info .screen-title{font-size:min(3.65cqw,6.5cqh)}
  .scene-info .info-description{font-size:min(1.57cqw,3cqh)}
  .scene-info .orange-callout{font-size:min(1.65cqw,3.4cqh)}
  .brand-mark{width:min(10.84%,19cqh)}
  .scene-result .screen-title{font-size:min(4.86cqw,8cqh)}
  .scene-result .result-copy{font-size:min(1.6cqw,3.1cqh)}
  .scene-result.route-protein .next-button{top:79.2%}
  .scene-result.route-hydration .result-copy{font-size:min(1.88cqw,3.5cqh)}
  .result-copy p,.scene-result.route-hydration .result-copy p{margin-bottom:min(1.95cqw,2.4cqh)}
  .allergy-note{font-size:min(1.2cqw,2.2cqh)}
  .scene-ingredients .screen-title{font-size:min(3.4cqw,6cqh)}
  .ingredient{min-height:min(6.3cqw,11cqh)}
  .ingredient dt{font-size:min(1.9cqw,3.5cqh)}
  .ingredient dd{font-size:min(1.2cqw,2.2cqh)}
  .scene-ingredients.route-protein .ingredient{min-height:min(6.8cqw,11cqh)}
  .scene-ingredients.route-protein .ingredient-genu,.scene-ingredients.route-protein .ingredient-sfs{min-height:min(4.9cqw,8cqh)}
  .scene-ingredients.route-protein .ingredient dt{font-size:min(1.6cqw,3cqh)}
  .scene-ingredients.route-protein .ingredient dd{font-size:min(1.15cqw,2.1cqh)}
  .scene-ingredients.route-hydration .ingredient{min-height:min(8.9cqw,13.5cqh)}
  .scene-ingredients.route-hydration .ingredient dd{font-size:min(1.4cqw,2.3cqh)}
  .redeem-copy{font-size:min(2.45cqw,4cqh)}
}
/* Keep every screen inside the viewport while using the full available width. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.legal-dialog{border:0;padding:24px;max-width:520px;width:calc(100% - 32px);max-height:calc(100svh - 32px);background:#fff;color:var(--ink);color-scheme:only light;font-size:16px;line-height:1.5;box-shadow:0 15px 70px #0003}
.legal-dialog[open]{display:flex;flex-direction:column;gap:20px}
.legal-dialog.has-document{max-width:760px;height:min(86svh,900px)}
.legal-dialog::backdrop{background:#0008}
.legal-dialog h2{font-weight:500;font-size:24px;margin:0;flex-shrink:0;line-height:1.2}
#legal-content{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding-right:8px;scrollbar-gutter:stable}
#legal-content>p{margin:0}
.legal-document{overflow-wrap:anywhere}
.legal-document h1{font-size:22px;font-weight:500;line-height:1.25}
.legal-document p{margin:0 0 16px}
.legal-document .source{font-size:14px}
.legal-document a{color:var(--ink);text-decoration:underline}
.legal-document ul{padding-left:24px}
.dialog-close{align-self:flex-start;flex-shrink:0;min-height:44px;background:var(--coral);color:white;padding:12px 28px;font-weight:400}

/* Each scene introduces its story in short, readable groups. */
.scene.is-entering .scene-photo{animation:sceneImageIn 850ms var(--ease-out) both}
.scene.is-entering .brand-logo{animation:softFade 240ms var(--ease-out) 80ms both}
.scene.is-entering .screen-title{animation:contentIn 520ms var(--ease-out) 90ms both}
.scene.is-entering .context-intro{animation:contentIn 480ms var(--ease-out) 60ms both}
.scene.is-entering .context-copy .screen-title{animation-delay:180ms}
.scene.is-entering .next-button{animation:softFade 240ms var(--ease-out) 390ms both}
.scene.is-entering .context-next,.scene.is-entering .quiz-next{animation:none}
.scene.is-entering .context-options .answer-button,.scene.is-entering .quiz-options .answer-button{animation:softFade 260ms var(--ease-out) both}
.scene.is-entering .answer-button:nth-child(1){animation-delay:230ms}
.scene.is-entering .answer-button:nth-child(2){animation-delay:275ms}
.scene.is-entering .answer-button:nth-child(3){animation-delay:320ms}
.scene.is-entering .answer-button:nth-child(4){animation-delay:365ms}
.scene.is-entering .answer-button:nth-child(5){animation-delay:410ms}
.scene.is-entering .answer-button:nth-child(6){animation-delay:455ms}
.scene.is-entering .answer-button:nth-child(7){animation-delay:500ms}
.scene.is-entering .answer-button:nth-child(8){animation-delay:545ms}
.scene.is-entering .form-intro,.scene.is-entering .legal-intro,.scene.is-entering .consent,.scene.is-entering .info-description,.scene.is-entering .redeem-copy,.scene.is-entering .allergy-note{animation:contentIn 440ms var(--ease-out) 240ms both}
.scene.is-entering .details-form>input,.scene.is-entering .form-selects{animation:contentIn 380ms var(--ease-out) both}
.scene.is-entering .name-field{animation-delay:160ms}
.scene.is-entering .surname-field{animation-delay:210ms}
.scene.is-entering .form-selects{animation-delay:260ms}
.scene.is-entering .legal-intro{animation-delay:310ms}
.scene.is-entering .consent{animation-delay:355ms}
.scene.is-entering .details-portrait,.scene.is-entering .details-fruit,.scene.is-entering .food-strip,.scene.is-entering .food-grid figure,.scene.is-entering .result-drink,.scene.is-entering .brand-mark{animation:imageIn 620ms var(--ease-out) 150ms both}
.scene.is-entering .details-fruit{animation-delay:260ms}
.scene.is-entering .food-grid figure:nth-child(2){animation-delay:200ms}
.scene.is-entering .food-grid figure:nth-child(3){animation-delay:250ms}
.scene.is-entering .food-grid figure:nth-child(4){animation-delay:300ms}
.scene.is-entering .food-grid figure:nth-child(5){animation-delay:350ms}
.scene.is-entering .orange-callout{animation:softFade 300ms var(--ease-out) 290ms both}
.scene.is-entering .stat{animation:contentIn 440ms var(--ease-out) both;animation-delay:calc(140ms + var(--stat-delay))}
.scene.is-entering .donut{animation:donutFill 1200ms linear both;animation-delay:calc(320ms + var(--stat-delay))}
.scene.is-entering .donut img{animation:imageIn 440ms var(--ease-out) both;animation-delay:calc(210ms + var(--stat-delay))}
.scene.is-entering .result-copy p{animation:contentIn 440ms var(--ease-out) 220ms both}
.scene.is-entering .result-copy p:nth-child(2){animation-delay:280ms}
.scene.is-entering .result-copy p:nth-child(3){animation-delay:340ms}
.scene.is-entering .ingredient{animation:contentIn 360ms var(--ease-out) 160ms both}
.scene.is-entering .ingredient:nth-child(2){animation-delay:215ms}
.scene.is-entering .ingredient:nth-child(3){animation-delay:270ms}
.scene.is-entering .ingredient:nth-child(4){animation-delay:325ms}
.scene.is-entering .ingredient:nth-child(5){animation-delay:380ms}
@keyframes contentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes imageIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sceneImageIn{from{opacity:.75;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes softFade{from{opacity:0}to{opacity:1}}
@keyframes donutFill{from{--percentage:100%}}
@media (hover:hover) and (pointer:fine){
  .next-button:hover{filter:brightness(1.05)}
  .answer-button:hover{filter:brightness(1.08)}
  .text-link:hover{text-decoration:underline}
}

@media (max-width:767px),(orientation:portrait){
  .scene{width:100%}
  .desktop-only{display:none!important}.mobile-only{display:initial}
  .brand-logo{top:3.13%;right:5.35%;width:25.55%}
  .scene-welcome .brand-logo,.scene-question .brand-logo{width:25.55%}
  .next-button{font-size:3.05cqw;min-height:32px;gap:1.7cqw;padding:.6cqw 1.1cqw}
  .arrow-circle{width:4.2cqw;height:4.2cqw;min-width:16px;min-height:16px}
  .welcome-wedge{clip-path:polygon(0 26.5%,75.2% 100%,0 100%)}
  .scene-welcome .scene-background{object-position:93% center}
  .scene-welcome .screen-title{left:5.25%;bottom:11.8%;font-size:10.55cqw;line-height:1.02}
  .welcome-next{left:5.35%;bottom:5.15%;width:33.8%;height:4.5%;font-size:3.7cqw;min-height:40px}
  .welcome-next .arrow-circle{width:5.25cqw;height:5.25cqw}
  .scene-details .scene-background{display:none}
  .details-portrait{display:block;position:absolute;left:0;top:0;width:100%;height:73.75%;object-fit:fill}
  .details-fruit{display:block;position:absolute;left:0;bottom:0;width:100%;height:15.83%;object-fit:fill}
  .scene-details .brand-logo{display:none}
  .scene-details .screen-title{left:4.85%;top:34.15%;width:76%;font-size:5.92cqw;line-height:1.07}
  .scene-details .screen-title br{display:initial}
  .details-form{left:5.35%;right:5.35%;top:45.8%;height:35%}
  .form-intro{font-size:2.6cqw}
  .details-form>input{width:72.6%;height:9.5%;border-radius:10cqw;font-size:max(3.35cqw,16px);padding:0 2.6cqw;min-height:30px}
  .name-field{top:10.6%}.surname-field{top:28.4%}
  .form-selects{top:46.1%;gap:11.5cqw}
  .select-wrap{width:21.85cqw;height:5.9cqw;min-height:30px}
  .select-wrap select{border-radius:8cqw;font-size:max(3.35cqw,13px);padding:0 6cqw 0 2.6cqw}
  .select-arrow{right:3cqw;width:3.2cqw;height:3.2cqw;top:24%;font-size:3cqw;padding-bottom:1cqw}
  .legal-intro{left:0;top:64.2%;width:65%;font-size:max(1.63cqw,10px);line-height:1.22}
  .consent{left:0;top:74%;width:75%;gap:1cqw;font-size:max(1.65cqw,10px);line-height:1.3}
  .consent input{width:1.1cqw;height:1.1cqw}
  .form-submit{top:82%;width:19.5%;height:8.6%;font-size:2.55cqw;min-height:32px}
  .form-submit .arrow-circle{width:3.5cqw;height:3.5cqw}
  .scene-stats .info-next,.scene-info .info-next{left:35%;right:auto;top:auto;bottom:2.5%;width:30%;height:4.2%;font-size:2.8cqw}
  .scene-stats .brand-logo{display:block}
  .scene-stats .screen-title{left:4.4%;right:4.4%;width:auto;top:11.9%;font-size:6.25cqw;line-height:1.06}
  .stats-grid{left:6.7%;right:6.7%;top:30.45%;grid-template-columns:1fr 1fr;column-gap:9%;row-gap:8.2cqw}
  .stat-3{grid-column:1/-1}
  .donut{width:26.5cqw;height:26.5cqw}
  .donut-small,.donut-large{font-size:2.6cqw}
  .stat-number{font-size:7.9cqw;gap:2.6cqw;margin:5.7cqw 0 3.5cqw}
  .stat-arrow{width:5.6cqw;height:5.8cqw}
  .stat-description{font-size:2.7cqw;max-width:35cqw;line-height:1.03}
  .stat-3 .stat-number{margin:4.1cqw 0 3.4cqw}
  .context-copy{top:17.1%;left:8%;right:8%}
  .context-intro{font-size:5.3cqw;line-height:1.07;max-width:none;margin:0 0 8.6cqw}
  .context-copy .screen-title{font-size:7.2cqw;line-height:1.08}
  .context-options{top:43.9%;bottom:17.5%;left:31.5%;right:30.8%;display:flex;flex-direction:column;gap:0;justify-content:space-between}
  .context-options .answer-button{flex:none;min-height:0;height:15.2%;font-size:4cqw;border-radius:12cqw;padding:.6cqw 1cqw;box-shadow:inset .35cqw -.35cqw 0 #0002}
  .scene-context .context-next{left:35%;right:auto;bottom:5%;width:30%;height:3.8%;font-size:2.8cqw}
  .step-4 .scene-background{object-position:50.5% center}
  .step-7 .context-copy{top:17.15%;left:8%;right:8%}
  .step-7 .context-intro{margin-bottom:3cqw}
  .step-7 .context-copy .screen-title{font-size:7.2cqw}
  .step-7 .context-options{left:31.5%;right:30.8%;top:35.8%;bottom:14.8%;gap:0}
  .step-7 .context-options .answer-button{height:11.6%;font-size:3.9cqw}
  .step-6 .context-copy,.step-9 .context-copy{top:26.1%;left:13%;right:13%}
  .step-6 .context-copy .screen-title,.step-9 .context-copy .screen-title{font-size:7.2cqw;line-height:1.08}
  .context-options.perception{left:26.3%;right:26.3%;top:43.35%;bottom:28.6%;gap:0}
  .context-options.perception .answer-button{height:20.7%;min-height:40px;font-size:3.9cqw}
  .step-9 .scene-background{object-position:47% center}
  .step-10 .context-copy{top:15.1%;left:6%;right:6%}
  .step-10 .context-intro{max-width:none;font-size:5.2cqw;margin-bottom:8cqw}
  .step-10 .context-copy .screen-title{font-size:7.2cqw;line-height:1.06}
  .step-10 .context-options{top:43.2%;bottom:18.2%;left:31.3%;right:31%;gap:0}
  .step-10 .scene-background{object-position:50% center}
  .scene-info .screen-title{left:10.7%;right:10.7%;top:18.65%;font-size:6.4cqw;line-height:1.045}
  .orange-callout{top:32.5%;font-size:3.05cqw;padding:.65cqw 2.2cqw;line-height:1.36}
  .food-strip{display:none}
  .food-grid{position:absolute;display:grid;grid-template-columns:1fr 1fr;left:4.35%;right:4.3%;gap:2.1cqw}
  .food-grid figure{margin:0;line-height:0;min-height:0;overflow:hidden}
  .food-grid img{width:100%;height:100%;object-fit:fill}
  .fiber-grid{top:41.62%;height:34.9%}
  .step-8 .screen-title{top:9.4%;left:4.5%;right:4.5%;font-size:4.95cqw;line-height:1.045}
  .desktop-strong{font-weight:300}
  .step-8 .info-description{top:27.75%;left:8%;right:8%;font-size:2.65cqw;line-height:1.28}
  .step-8 .info-description span{margin:3.4cqw auto 0;max-width:62cqw}
  .protein-grid{top:41.6%;height:46%;grid-template-rows:repeat(3,minmax(0,1fr))}
  .step-11 .screen-title{top:8.2%;left:6.5%;right:6.5%;font-size:6.05cqw;line-height:1.07}
  .step-11 .info-description{top:24.8%;left:13%;right:13%;font-size:2.87cqw;line-height:1.2}
  .step-11 .orange-callout{top:32.5%;font-size:2.8cqw;padding:.65cqw 4cqw}
  .sugar-grid{top:38.5%;height:46%;left:24.5%;right:24.4%;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:2.2cqw}
  .scene-introduction .screen-title{top:64.9%;left:7.5%;right:7.5%;font-size:5.1cqw;line-height:1.045;text-align:center}
  .scene-introduction .next-button{left:35%;right:auto;bottom:8.5%;width:30%;height:3.6%;font-size:2.8cqw;gap:1cqw}
  .scene-introduction .next-button .arrow-circle{width:4cqw;height:4cqw}
  .scene-introduction .scene-background{object-position:42% center}
  .scene-question .screen-title{left:4.8%;right:3%;bottom:auto;top:9.1%;font-size:8.65cqw;line-height:1.08}
  .scene-question.step-14 .screen-title{top:15.3%}
  .scene-question.step-16 .screen-title{top:7.5%}
  .scene .scene-background{object-fit:fill;object-position:center}
  .quiz-options{left:6%;right:6%;top:56.1%;width:auto;height:28.7%;display:grid;grid-template-rows:repeat(4,1fr);grid-template-columns:1fr 1fr;grid-auto-flow:column;gap:1.85cqw 5.5cqw}
  .quiz-options .answer-button{font-size:max(3.4cqw,12px);box-shadow:inset .3cqw -.6cqw 0 #0002;border-radius:12cqw;padding:.4cqw .6cqw;min-height:40px}
  .has-selection .answer-button:not(.selected){background:#878787;box-shadow:inset .3cqw -.6cqw 0 #0003}
  .quiz-options.has-selection .selected{box-shadow:inset .3cqw -.6cqw 0 #0003}
  .exercise-options{left:5.4%;right:5.4%;grid-template-rows:repeat(4,1fr);column-gap:6.8cqw}
  .exercise-options .answer-button:nth-child(1){grid-column:1;grid-row:1}.exercise-options .answer-button:nth-child(2){grid-column:1;grid-row:2}.exercise-options .answer-button:nth-child(3){grid-column:1;grid-row:3}.exercise-options .answer-button:nth-child(4){grid-column:2;grid-row:1}.exercise-options .answer-button:nth-child(5){grid-column:2;grid-row:2}.exercise-options .answer-button:nth-child(6){grid-column:2;grid-row:3}.exercise-options .answer-button:nth-child(7){grid-column:1/-1;grid-row:4;width:46.2%;justify-self:center}
  .quiz-next{left:28.85%;right:auto;bottom:8.1%;width:42.3%;height:3.6%;font-size:2.6cqw;gap:1.8cqw;min-height:32px}
  .quiz-next .arrow-circle{width:4.2cqw;height:4.2cqw}
  .question-progress{left:35.1%;bottom:2.45%;width:29.8%;height:1.65cqw}
  .progress-connector{height:1px}
  .progress-dot{width:1.6cqw;height:1.6cqw;border:1px solid #fff}
  .answer-error{left:5%;right:5%;width:auto;bottom:12.7%;font-size:max(2cqw,11px);text-align:center}
  /* Portrait results retain all the original reading order. */
  .result-wedge,.route-fiber .result-wedge{clip-path:polygon(0 26.4%,75.3% 100%,0 100%)}
  .brand-mark,.scene-result.route-fiber .brand-mark{top:8.15%;left:14.6%;width:19.25%}
  .scene-result .screen-title,.scene-result.route-fiber .screen-title{top:15.25%;left:14.6%;font-size:8.9cqw;line-height:1.04;font-weight:400}
  .result-copy,.scene-result.route-fiber .result-copy{top:26.6%;left:14.6%;width:79%;font-size:3.45cqw;line-height:1.23}
  .result-copy p{margin-bottom:4.4cqw}
  .scene-result .next-button,.scene-result.route-fiber .next-button{left:38.3%;top:47.5%;width:23.7%;height:3.6%;font-size:2.85cqw;gap:1.1cqw}
  .scene-result .result-drink,.scene-result.route-fiber .result-drink{left:23%;top:54%;width:51%;height:37%}
  .allergy-note,.scene-result.route-fiber .allergy-note{left:5.3%;right:28%;bottom:3.2%;width:auto;font-size:max(2.1cqw,8px);text-align:left;line-height:1.25}
  .scene-result.route-protein .brand-mark{top:7.1%}
  .scene-result.route-protein .screen-title{top:14.7%;left:13.6%;font-size:7.4cqw}
  .scene-result.route-protein .result-copy{top:25.2%;left:14.1%;width:74%;font-size:3.4cqw}
  .scene-result.route-protein .result-copy p{margin-bottom:4.6cqw}
  .scene-result.route-protein .next-button{top:50%;left:38.3%}
  .scene-result.route-protein .result-drink{top:56.7%;left:20.5%;width:61%;height:33.4%}
  .scene-result.route-protein .result-wedge{clip-path:polygon(0 32.7%,68.8% 100%,0 100%)}
  .scene-result.route-hydration .brand-mark{top:7.9%}
  .scene-result.route-hydration .screen-title{top:15.3%;left:14.4%;font-size:8.9cqw}
  .scene-result.route-hydration .result-copy{top:29.5%;left:14.4%;width:78%;font-size:3.4cqw;line-height:1.24}
  .scene-result.route-hydration .result-copy p{margin-bottom:4.8cqw;max-width:none}
  .scene-result.route-hydration .result-copy p:first-child{max-width:none}
  .scene-result.route-hydration .next-button{top:51.7%;left:38.3%}
  .scene-result.route-hydration .result-drink{left:18%;top:58.7%;width:65%;height:36.4%}
  .scene-result.route-hydration .result-wedge{clip-path:polygon(0 36.3%,65.1% 100%,0 100%)}
  .ingredients-wedge{clip-path:polygon(0 79%,22% 100%,0 100%)}
  .scene-ingredients .screen-title,.scene-ingredients.route-protein .screen-title,.scene-ingredients.route-hydration .screen-title{top:8.2%;left:7%;right:7%;text-align:center;font-size:6.7cqw;line-height:1.07}
  .ingredients-list,.scene-ingredients.route-protein .ingredients-list,.scene-ingredients.route-hydration .ingredients-list{top:25.2%;left:5.35%;width:89.3%}
  .ingredient{grid-template-columns:19% 1fr;gap:4%;padding:1.3cqw 0 1.6cqw;min-height:0;border-bottom:.45cqw solid #d5e8f2}
  .ingredient dd{font-size:2.35cqw;line-height:1.21}
  .ingredient dt,.scene-ingredients.route-protein .ingredient dt{font-size:3.3cqw}
  .ingredient dt img{max-width:86%}
  .redeem-copy{left:10%;right:10%;top:58.3%;bottom:auto;max-width:none;text-align:center;font-size:4.55cqw;line-height:1.04}
  .scene-ingredients .result-drink{left:32%;top:65.2%;width:35.5%;height:27.35%}
  .scene-ingredients .next-button{right:5.4%;bottom:3%;width:26.5%;height:4.4%;font-size:2.9cqw;gap:1.6cqw}
  .scene-ingredients.route-protein .screen-title{top:7.5%;left:12.5%;right:12.5%;font-size:6.1cqw}
  .scene-ingredients.route-protein .ingredients-list{top:23.5%;left:10.5%;width:75%}
  .scene-ingredients.route-protein .ingredient{min-height:0;padding:1cqw 0 1.6cqw;grid-template-columns:26% 1fr;gap:4.5%}
  .scene-ingredients.route-protein .ingredient dd{font-size:1.99cqw;line-height:1.21}
  .scene-ingredients.route-protein .ingredient-genu,.scene-ingredients.route-protein .ingredient-sfs{min-height:0}
  .scene-ingredients.route-protein .ingredient dt img{max-width:77%}
  .scene-ingredients.route-protein .redeem-copy{top:59.2%;font-size:3.9cqw;left:17%;right:17%}
  .scene-ingredients.route-protein .result-drink{top:66.3%;left:24.2%;width:49.5%;height:26.5%}
  .scene-ingredients.route-protein .ingredients-wedge{clip-path:polygon(0 70.4%,30.9% 100%,0 100%)}
  .scene-ingredients.route-hydration .ingredients-list{top:27%;left:5.35%;width:89.3%}
  .scene-ingredients.route-hydration .ingredient{grid-template-columns:21% 1fr;gap:7%;min-height:0;padding:1.9cqw 0 2.7cqw}
  .scene-ingredients.route-hydration .ingredient dd{font-size:2.46cqw;line-height:1.23}
  .scene-ingredients.route-hydration .ingredient dt img{max-width:87%;margin:auto}
  .scene-ingredients.route-hydration .redeem-copy{top:58.9%;font-size:4.55cqw;left:14%;right:14%}
  .scene-ingredients.route-hydration .result-drink{top:65.3%;left:24%;width:51%;height:27.2%}
  .scene-ingredients.route-hydration .ingredients-wedge{clip-path:polygon(0 70.4%,30.9% 100%,0 100%)}
}
@media (max-width:767px) and (max-height:700px){
  .scene-stats .screen-title{top:9%;font-size:5.5cqw}
  .stats-grid{top:27%;row-gap:3.5cqw}
  .donut{width:22cqw;height:22cqw}
  .stat-number,.stat-3 .stat-number{font-size:6.8cqw;margin:2.5cqw 0 1.7cqw}
  .stat-description{font-size:2.45cqw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .scene.is-entering .screen-title,.scene.is-entering .context-intro,.scene.is-entering .info-description,.scene.is-entering .result-copy p,.scene.is-entering .scene-photo,.scene.is-entering .result-drink{animation:softFade 160ms var(--ease-out) both!important}
}
@media (max-width:480px){
  .quiz-options{gap:10px 5.5cqw}
  .scene-details .legal-intro{width:80%;top:63%}
  .scene-details .consent{top:74%;width:78%}
}
/* Stats: on shorter portrait screens (tablets, browser bars) scale the results by height so they stay clear of the button. */
@media (max-width:767px),(orientation:portrait){
  .scene-stats .stats-grid{row-gap:min(8.2cqw,4.02cqh)}
  .scene-stats .donut{width:min(26.5cqw,12.99cqh);height:min(26.5cqw,12.99cqh)}
  .scene-stats .donut-small,.scene-stats .donut-large{font-size:min(2.6cqw,1.27cqh)}
  .scene-stats .stat-number{font-size:min(7.9cqw,3.87cqh);gap:min(2.6cqw,1.27cqh);margin:min(5.7cqw,2.79cqh) 0 min(3.5cqw,1.72cqh)}
  .scene-stats .stat-3 .stat-number{margin:min(4.1cqw,2.01cqh) 0 min(3.4cqw,1.67cqh)}
  .scene-stats .stat-arrow{width:min(5.6cqw,2.74cqh);height:min(5.8cqw,2.84cqh)}
  .scene-stats .stat-description{font-size:min(2.7cqw,1.32cqh);max-width:min(35cqw,17.15cqh)}
}
@media (max-width:767px) and (max-height:700px){
  .scene-stats .stats-grid{row-gap:min(3.5cqw,2.46cqh)}
  .scene-stats .donut{width:min(22cqw,15.47cqh);height:min(22cqw,15.47cqh)}
  .scene-stats .donut-small,.scene-stats .donut-large{font-size:min(2.6cqw,1.83cqh)}
  .scene-stats .stat-number,.scene-stats .stat-3 .stat-number{font-size:min(6.8cqw,4.78cqh);gap:min(2.6cqw,1.83cqh);margin:min(2.5cqw,1.76cqh) 0 min(1.7cqw,1.2cqh)}
  .scene-stats .stat-arrow{width:min(5.6cqw,3.94cqh);height:min(5.8cqw,4.08cqh)}
  .scene-stats .stat-description{font-size:min(2.45cqw,1.72cqh);max-width:min(35cqw,24.6cqh)}
}
/* Tablets in portrait: the approved mobile composition, scaled to the screen height and without stretched photos. Phones never reach 600px wide in portrait; landscape tablets and desktop never match. */
@media (orientation:portrait) and (min-width:600px){
  .brand-logo,.scene-welcome .brand-logo,.scene-question .brand-logo{width:min(25.55%,14.37cqh)}
  .next-button{font-size:min(3.05cqw,1.72cqh);gap:min(1.7cqw,.96cqh);padding:min(.6cqw,.34cqh) min(1.1cqw,.62cqh)}
  .arrow-circle{width:min(4.2cqw,2.36cqh);height:min(4.2cqw,2.36cqh)}
  .scene .scene-background{object-fit:cover;object-position:50% 50%}
  .scene-welcome .screen-title{font-size:min(10.55cqw,5.93cqh)}
  .welcome-next{width:min(33.8%,19.01cqh);font-size:min(3.7cqw,2.08cqh)}
  .welcome-next .arrow-circle{width:min(5.25cqw,2.95cqh);height:min(5.25cqw,2.95cqh)}
  .details-portrait,.details-fruit{object-fit:cover}
  .scene-details .screen-title{font-size:min(5.92cqw,3.33cqh)}
  .form-intro{font-size:min(2.6cqw,1.46cqh)}
  .details-form>input{width:min(72.6%,36.47cqh);border-radius:min(10cqw,5.62cqh);font-size:max(min(3.35cqw,1.88cqh),16px);padding:0 min(2.6cqw,1.46cqh)}
  .form-selects{gap:min(11.5cqw,6.47cqh)}
  .select-wrap{width:min(21.85cqw,12.29cqh);height:min(5.9cqw,3.32cqh)}
  .select-wrap select{border-radius:min(8cqw,4.5cqh);font-size:max(min(3.35cqw,1.88cqh),13px);padding:0 min(6cqw,3.38cqh) 0 min(2.6cqw,1.46cqh)}
  .select-arrow{right:min(3cqw,1.69cqh);width:min(3.2cqw,1.8cqh);height:min(3.2cqw,1.8cqh);font-size:min(3cqw,1.69cqh);padding-bottom:min(1cqw,.56cqh)}
  .legal-intro{font-size:max(min(1.63cqw,.92cqh),10px)}
  .consent{gap:min(1cqw,.56cqh);font-size:max(min(1.65cqw,.93cqh),10px)}
  .consent input{width:min(1.1cqw,.62cqh);height:min(1.1cqw,.62cqh)}
  .form-submit{width:min(19.5%,9.8cqh);font-size:min(2.55cqw,1.43cqh)}
  .form-submit .arrow-circle{width:min(3.5cqw,1.97cqh);height:min(3.5cqw,1.97cqh)}
  .scene-stats .info-next,.scene-info .info-next{left:calc(50% - min(15%,8.44cqh));width:min(30%,16.88cqh);font-size:min(2.8cqw,1.57cqh)}
  .context-copy{left:calc(50% - min(42%,23.62cqh));right:calc(50% - min(42%,23.62cqh))}
  .context-intro{font-size:min(5.3cqw,2.98cqh);margin:0 0 min(8.6cqw,4.84cqh)}
  .context-copy .screen-title{font-size:min(7.2cqw,4.05cqh)}
  .context-options{left:calc(50.35% - min(18.85%,10.6cqh));right:calc(49.65% - min(18.85%,10.6cqh))}
  .context-options .answer-button{font-size:min(4cqw,2.25cqh);border-radius:min(12cqw,6.75cqh);padding:min(.6cqw,.34cqh) min(1cqw,.56cqh)}
  .scene-context .context-next{left:calc(50% - min(15%,8.44cqh));width:min(30%,16.88cqh);font-size:min(2.8cqw,1.57cqh)}
  .step-7 .context-copy{left:calc(50% - min(42%,23.62cqh));right:calc(50% - min(42%,23.62cqh))}
  .step-7 .context-intro{margin-bottom:min(3cqw,1.69cqh)}
  .step-7 .context-copy .screen-title{font-size:min(7.2cqw,4.05cqh)}
  .step-7 .context-options{left:calc(50.35% - min(18.85%,10.6cqh));right:calc(49.65% - min(18.85%,10.6cqh))}
  .step-7 .context-options .answer-button{font-size:min(3.9cqw,2.19cqh)}
  .step-6 .context-copy,.step-9 .context-copy{left:calc(50% - min(37%,20.81cqh));right:calc(50% - min(37%,20.81cqh))}
  .step-6 .context-copy .screen-title,.step-9 .context-copy .screen-title{font-size:min(7.2cqw,4.05cqh)}
  .context-options.perception{left:calc(50% - min(23.7%,13.33cqh));right:calc(50% - min(23.7%,13.33cqh))}
  .context-options.perception .answer-button{font-size:min(3.9cqw,2.19cqh)}
  .step-10 .context-copy{left:calc(50% - min(44%,24.75cqh));right:calc(50% - min(44%,24.75cqh))}
  .step-10 .context-intro{font-size:min(5.2cqw,2.93cqh);margin-bottom:min(8cqw,4.5cqh)}
  .step-10 .context-copy .screen-title{font-size:min(7.2cqw,4.05cqh)}
  .step-10 .context-options{left:calc(50.15% - min(18.85%,10.6cqh));right:calc(49.85% - min(18.85%,10.6cqh))}
  .scene-info .screen-title{left:calc(50% - min(39.3%,22.11cqh));right:calc(50% - min(39.3%,22.11cqh));font-size:min(6.4cqw,3.6cqh)}
  .orange-callout{font-size:min(3.05cqw,1.72cqh);padding:min(.65cqw,.37cqh) min(2.2cqw,1.24cqh)}
  .food-grid{left:0;right:0;height:auto;justify-content:center;grid-template-rows:none;gap:min(2.1cqw,1.18cqh)}
  .food-grid figure{aspect-ratio:3/2}
  .food-grid img{object-fit:cover}
  .fiber-grid{grid-template-columns:repeat(2,min(44.5cqw,25.29cqh))}
  .step-8 .screen-title{left:calc(50% - min(45.5%,25.59cqh));right:calc(50% - min(45.5%,25.59cqh));font-size:min(4.95cqw,2.78cqh)}
  .step-8 .info-description{left:calc(50% - min(42%,23.62cqh));right:calc(50% - min(42%,23.62cqh));font-size:min(2.65cqw,1.49cqh)}
  .step-8 .info-description span{margin:min(3.4cqw,1.91cqh) auto 0;max-width:min(62cqw,34.88cqh)}
  .protein-grid{grid-template-columns:repeat(2,min(44.5cqw,21.82cqh))}
  .step-11 .screen-title{left:calc(50% - min(43.5%,24.47cqh));right:calc(50% - min(43.5%,24.47cqh));font-size:min(6.05cqw,3.4cqh)}
  .step-11 .info-description{left:calc(50% - min(37%,20.81cqh));right:calc(50% - min(37%,20.81cqh));font-size:min(2.87cqw,1.61cqh)}
  .step-11 .orange-callout{font-size:min(2.8cqw,1.57cqh);padding:min(.65cqw,.37cqh) min(4cqw,2.25cqh)}
  .sugar-grid{grid-template-columns:min(51cqw,23.55cqh);gap:min(2.2cqw,1.24cqh)}
  .sugar-grid figure{aspect-ratio:552/340}
  .scene-introduction .screen-title{left:calc(50% - min(42.5%,23.91cqh));right:calc(50% - min(42.5%,23.91cqh));font-size:min(5.1cqw,2.87cqh)}
  .scene-introduction .next-button{left:calc(50% - min(15%,8.44cqh));width:min(30%,16.88cqh);font-size:min(2.8cqw,1.57cqh);gap:min(1cqw,.56cqh)}
  .scene-introduction .next-button .arrow-circle{width:min(4cqw,2.25cqh);height:min(4cqw,2.25cqh)}
  .scene-question .screen-title{font-size:min(8.65cqw,4.87cqh)}
  .quiz-options{left:calc(50% - min(44%,24.75cqh));right:calc(50% - min(44%,24.75cqh));gap:min(1.85cqw,1.04cqh) min(5.5cqw,3.09cqh)}
  .quiz-options .answer-button{font-size:max(min(3.4cqw,1.91cqh),12px);border-radius:min(12cqw,6.75cqh);padding:min(.4cqw,.23cqh) min(.6cqw,.34cqh)}
  .exercise-options{left:calc(50% - min(44.6%,25.09cqh));right:calc(50% - min(44.6%,25.09cqh));column-gap:min(6.8cqw,3.82cqh)}
  .quiz-next{left:calc(50% - min(21.15%,11.9cqh));width:min(42.3%,23.79cqh);font-size:min(2.6cqw,1.46cqh);gap:min(1.8cqw,1.01cqh)}
  .quiz-next .arrow-circle{width:min(4.2cqw,2.36cqh);height:min(4.2cqw,2.36cqh)}
  .question-progress{left:calc(50% - min(14.9%,8.38cqh));width:min(29.8%,16.76cqh);height:min(1.65cqw,.93cqh)}
  .progress-dot{width:min(1.6cqw,.9cqh);height:min(1.6cqw,.9cqh)}
  .answer-error{font-size:max(min(2cqw,1.12cqh),11px)}
  .brand-mark,.scene-result.route-fiber .brand-mark{width:min(19.25%,10.83cqh)}
  .scene-result .screen-title,.scene-result.route-fiber .screen-title{font-size:min(8.9cqw,5.01cqh)}
  .result-copy,.scene-result.route-fiber .result-copy{width:min(79%,44.44cqh);font-size:min(3.45cqw,1.94cqh)}
  .result-copy p{margin-bottom:min(4.4cqw,2.48cqh)}
  .scene-result .next-button,.scene-result.route-fiber .next-button{left:calc(50.15% - min(11.85%,6.67cqh));width:min(23.7%,13.33cqh);font-size:min(2.85cqw,1.6cqh);gap:min(1.1cqw,.62cqh)}
  .scene-result .result-drink,.scene-result.route-fiber .result-drink{left:calc(48.5% - min(25.5%,14.34cqh));width:min(51%,28.69cqh)}
  .allergy-note,.scene-result.route-fiber .allergy-note{font-size:max(min(2.1cqw,1.18cqh),8px)}
  .scene-result.route-protein .screen-title{font-size:min(7.4cqw,4.16cqh)}
  .scene-result.route-protein .result-copy{width:min(74%,41.62cqh);font-size:min(3.4cqw,1.91cqh)}
  .scene-result.route-protein .result-copy p{margin-bottom:min(4.6cqw,2.59cqh)}
  .scene-result.route-protein .next-button,.scene-result.route-hydration .next-button{left:calc(50.15% - min(11.85%,6.67cqh));width:min(23.7%,13.33cqh)}
  .scene-result.route-protein .result-drink{left:calc(51% - min(30.5%,17.16cqh));width:min(61%,34.31cqh)}
  .scene-result.route-hydration .screen-title{font-size:min(8.9cqw,5.01cqh)}
  .scene-result.route-hydration .result-copy{width:min(78%,43.88cqh);font-size:min(3.4cqw,1.91cqh)}
  .scene-result.route-hydration .result-copy p{margin-bottom:min(4.8cqw,2.7cqh)}
  .scene-result.route-hydration .result-drink{left:calc(50.5% - min(32.5%,18.28cqh));width:min(65%,36.56cqh)}
  .scene-ingredients .screen-title,.scene-ingredients.route-protein .screen-title,.scene-ingredients.route-hydration .screen-title{left:calc(50% - min(43%,24.19cqh));right:calc(50% - min(43%,24.19cqh));font-size:min(6.7cqw,3.77cqh)}
  .ingredients-list,.scene-ingredients.route-protein .ingredients-list,.scene-ingredients.route-hydration .ingredients-list{left:calc(50% - min(44.65%,25.12cqh));width:min(89.3%,50.23cqh)}
  .ingredient{padding:min(1.3cqw,.73cqh) 0 min(1.6cqw,.9cqh);border-bottom-width:min(.45cqw,.25cqh)}
  .ingredient dd{font-size:min(2.35cqw,1.32cqh)}
  .ingredient dt,.scene-ingredients.route-protein .ingredient dt{font-size:min(3.3cqw,1.86cqh)}
  .redeem-copy{left:calc(50% - min(40%,22.5cqh));right:calc(50% - min(40%,22.5cqh));font-size:min(4.55cqw,2.56cqh)}
  .scene-ingredients .result-drink{left:calc(49.75% - min(17.75%,9.98cqh));width:min(35.5%,19.97cqh)}
  .scene-ingredients .next-button{width:min(26.5%,14.91cqh);font-size:min(2.9cqw,1.63cqh);gap:min(1.6cqw,.9cqh)}
  .scene-ingredients.route-protein .screen-title{left:calc(50% - min(37.5%,21.09cqh));right:calc(50% - min(37.5%,21.09cqh));font-size:min(6.1cqw,3.43cqh)}
  .scene-ingredients.route-protein .ingredients-list{left:calc(48% - min(37.5%,21.09cqh));width:min(75%,42.19cqh)}
  .scene-ingredients.route-protein .ingredient{padding:min(1cqw,.56cqh) 0 min(1.6cqw,.9cqh)}
  .scene-ingredients.route-protein .ingredient dd{font-size:min(1.99cqw,1.12cqh)}
  .scene-ingredients.route-protein .redeem-copy{left:calc(50% - min(33%,18.56cqh));right:calc(50% - min(33%,18.56cqh));font-size:min(3.9cqw,2.19cqh)}
  .scene-ingredients.route-protein .result-drink{left:calc(48.95% - min(24.75%,13.92cqh));width:min(49.5%,27.84cqh)}
  .scene-ingredients.route-hydration .ingredients-list{left:calc(50% - min(44.65%,25.12cqh));width:min(89.3%,50.23cqh)}
  .scene-ingredients.route-hydration .ingredient{padding:min(1.9cqw,1.07cqh) 0 min(2.7cqw,1.52cqh)}
  .scene-ingredients.route-hydration .ingredient dd{font-size:min(2.46cqw,1.38cqh)}
  .scene-ingredients.route-hydration .redeem-copy{left:calc(50% - min(36%,20.25cqh));right:calc(50% - min(36%,20.25cqh));font-size:min(4.55cqw,2.56cqh)}
  .scene-ingredients.route-hydration .result-drink{left:calc(49.5% - min(25.5%,14.34cqh));width:min(51%,28.69cqh)}
}