/* The viewport owns the background and chrome; the workspace owns content units. */
html,body{min-height:100%;width:100%;background:#010006}
.stage{width:100%;min-height:100dvh;aspect-ratio:auto;background-size:cover}
.ambient-background{position:fixed;inset:0}
@media(min-aspect-ratio:1/1){
 body{display:block;overflow:hidden}
 .stage{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(18px,2.29vw,44px) 0 clamp(16px,2vw,38px);overflow:hidden}
 header{position:relative;inset:auto;margin:0 clamp(24px,5.833vw,112px);height:clamp(48px,3.958vw,76px)}
 footer,.stage[data-screen=about] footer{display:block;position:relative;inset:auto;margin:0 auto;width:min(88%,1410px);font-size:clamp(12px,1.146vw,22px);line-height:1.28;padding-top:16px}
 footer p+p{margin-top:clamp(8px,.833vw,16px)}
 #main{position:relative;inset:auto;align-self:stretch;justify-self:center;width:min(100%,calc((100dvh - clamp(190px,14vw,280px))*1.85));container-type:inline-size;min-height:0}
 #main>section{top:50%;translate:0 -50%}
 .instruction-measure{inset:0 auto auto 50%;translate:-50% 0;width:min(100%,calc((100dvh - clamp(190px,14vw,280px))*1.85));container-type:inline-size}
}
@media(max-aspect-ratio:1/1){
 .stage{display:flex;min-height:100dvh}
 #main{display:flex;flex-direction:column;justify-content:center}
 #main>section{flex:none}
 footer{margin-top:auto}
}
@media(max-aspect-ratio:1/1){
 body{overflow:hidden}
 .stage{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding-bottom:16px}
 #main{min-height:0;overflow:auto;justify-content:safe center;width:100%}
 footer,.stage[data-screen=about] footer{display:block;position:relative;inset:auto;margin:0;padding-top:16px}
}

.access-screen{left:50%!important;right:auto!important;width:min(520px,90%);translate:-50% -50%!important}
#access-form{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:36px;border:1px solid rgba(209,184,255,.3);border-radius:28px;background:linear-gradient(140deg,rgba(55,39,79,.65),rgba(12,10,25,.82));box-shadow:0 24px 80px #0005;text-align:left}
.access-mark{width:44px;height:44px;display:grid;place-items:center;border:1px solid #bd93ed66;border-radius:14px;color:#d9beff;font-size:28px}
.access-kicker{font-size:12px;letter-spacing:.18em;color:#c7b0e6}
#access-form h1{font-size:32px;line-height:1.15}
.access-hint{font-size:16px;line-height:1.4;color:#ccc6dc}
.access-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#access-password{width:100%;min-height:58px;padding:16px 18px;border:1px solid #c9b0ed66;border-radius:14px;background:#05040b66;color:white;font:inherit;font-size:20px;text-align:left}
#access-password::placeholder{color:#aaa6b7}
#access-password:focus-visible{outline:2px solid #ba88fa;outline-offset:3px}
#access-error{min-height:1.4em;font-size:14px;color:#ffb9ce}
.access-submit{width:100%;min-height:56px;border-radius:14px;background:#fff;color:#151020;font-size:18px;letter-spacing:.06em;display:flex;justify-content:space-between;padding:14px 20px}
.access-submit>span{font-size:24px}
@media(max-aspect-ratio:1/1){.access-screen{position:relative;left:auto!important;right:auto!important;translate:none!important;width:100%;margin:20px auto}#access-form{padding:24px;gap:14px}#access-form h1{font-size:28px}}

/* Minimal access form: field and action; feedback occupies space only on error. */
#access-form{padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:18px}
#access-error:empty{display:none}
@media(max-aspect-ratio:1/1){#access-form{padding:0;gap:16px}}
.access-submit{justify-content:center}

button.brand{padding:0;border:0;background:transparent;color:inherit}
button.brand:disabled{opacity:1}

/* Press feedback must never move the centered header logo into flex flow. */
button.brand.touch-reactive{position:absolute;scale:1}

/* Programs: Figma copy 6, frame 404:998. Keep viewport chrome and workspace centering. */
@media(min-aspect-ratio:1/1){
 .stage[data-screen=programs] #main{width:min(100%,calc((100dvh - clamp(190px,14vw,280px))*2.4))}
 .stage[data-screen=programs] .programs{left:0;right:0;height:30.208333cqw;margin-top:1.09375cqw}
 .programs .offer-composition{height:100%;margin:0}
 .programs .offer-copy{left:20.78125cqw;top:3.072917cqw;width:36.041667cqw}
 .programs .offer-condition{font-size:1.25cqw;line-height:1.5625cqw}
 .programs .offer-copy h1{font-size:2.916667cqw;line-height:3.333333cqw;font-weight:700;margin-top:0;letter-spacing:normal}
 .programs .kit-description{font-size:1.458333cqw;line-height:1.875cqw;margin-top:.833333cqw;white-space:normal}
 .programs .offer-purchase{position:absolute;top:15.416667cqw;left:0;width:100%}
 .programs .offer-purchase .offer-condition{margin-top:.833333cqw;white-space:normal}
 .programs .offer-price{margin:0;font-size:3.75cqw;line-height:4.583333cqw}
 .programs .offer-art{left:58.072917cqw;top:0;width:28.645833cqw;height:30.208333cqw}
 .programs .offer-art img,.programs .offer-art::after{left:1.927083cqw;top:.625cqw;width:25.15625cqw;height:31.302083cqw;object-fit:cover}
}
@media(max-aspect-ratio:1/1){
 .programs .offer-copy h1{font-size:32px;line-height:36px;margin-top:8px;font-weight:700}
 .programs .offer-art img,.programs .offer-art::after{left:6.181818%;top:1.724138%;width:87.818182%;height:103.62069%}
}

/* Technology film: Figma 309:1975, 1440×810 at x240/y200 on 1920×1080. */
.stage[data-screen=about] footer{display:none}
.technology-play-icon{display:block;width:100%;height:100%}
@media(min-aspect-ratio:1/1){
 .stage[data-screen=about] #main{width:100%}
 .stage[data-screen=about] #main>.about{left:50%;right:auto;translate:-50% -50%;margin-top:1.25vw;width:min(75vw,calc((100dvh - clamp(48px,3.958vw,76px) - clamp(18px,2.29vw,44px) - clamp(16px,2vw,38px) - 3.75vw)*16/9))}
 .about .technology-play{width:8.75vw;height:8.75vw;min-width:0;min-height:0;padding:0}
}
@media(max-aspect-ratio:1/1){
 .stage[data-screen=about] .about{width:100%;margin:0}
 .about .technology-play{width:64px;height:64px;min-width:0;min-height:0;padding:0}
}

/* All flavour questions share the tallest localized panel and heading. */
.question-panel{min-height:var(--question-panel-height,0px)}
.question-panel h1{min-height:var(--question-title-height,0px)}
.question-measure{position:fixed;left:0;top:0;visibility:hidden;pointer-events:none;container-type:inline-size}
.question-measure .question-panel{position:relative;inset:auto;translate:none;min-height:0}

/* Flavour result, Figma 342:2555: pack and specifications on one row. */
.result .result-card{width:100%;background:none;border:0;box-shadow:none;padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:1.25cqw}
.result .result-card:hover{background:none;box-shadow:none}
.result .result-card .pack-image{position:relative;width:100%;height:15.416667cqw;margin:0;display:grid;place-items:center;overflow:hidden}
.result .result-card .pack-image img{display:block;width:18.645833cqw;height:12.395833cqw;margin:0;object-fit:contain}
.result .result-info h2{text-align:left;font-size:1.979167cqw;line-height:2.291667cqw;margin:0 0 1.666667cqw;min-height:0}
.result .result-info .product-stats{gap:.520833cqw}
.result .result-info .product-stats dt{font-size:.9375cqw;line-height:1.25cqw}
.result .result-info .product-stats dd{height:1.25cqw}
.result .result-restart{gap:.625cqw}
.result .restart-icon{display:block;width:1.666667cqw;height:1.666667cqw}
@media(min-aspect-ratio:1/1){
 .stage[data-screen=result] #main{width:min(100%,calc((100dvh - clamp(190px,14vw,280px))*2.5))}
 .stage[data-screen=result] #main>.result{left:0;right:0;height:36.041667cqw;margin-top:1.210938cqw}
 .result>h1{font-size:4.166667cqw;line-height:4.583333cqw;white-space:nowrap}
 .result>.subtitle{position:absolute;top:5.833333cqw;left:0;right:0;margin:0;font-size:1.666667cqw;line-height:2.083333cqw}
 .result .results-grid{position:absolute;top:10.833333cqw;left:50%;translate:-50% 0;width:43.541667cqw;display:block;margin:0}
 .result>.actions{position:absolute;top:28.541667cqw;left:0;right:0;margin:0;display:flex;flex-direction:column;gap:1.25cqw}
}
@media(max-aspect-ratio:1/1){
 .result .results-grid{width:100%;margin:20px auto}
 .result .result-card{grid-template-columns:1fr;gap:16px;width:100%}
 .result .result-card .pack-image{height:210px}
 .result .result-card .pack-image img{width:285px;height:190px;max-width:100%}
 .result .result-info{width:min(100%,360px);margin:auto}
 .result .result-info h2{font-size:24px;line-height:30px;margin-bottom:20px}
 .result .result-info .product-stats{gap:10px}
 .result .result-info .product-stats dt{font-size:14px;line-height:20px}
 .result .result-info .product-stats dd{height:24px;width:48px}
 .result .result-info .capsule{width:20px;height:20px}
 .result .result-info .meter img{width:20px;height:48px;margin-right:14px}
 .result>.actions{display:flex;flex-direction:column;gap:16px}
 .result .result-restart{gap:12px}
 .result .restart-icon{width:28px;height:28px}
}

/* Catalogue specification rows: Figma 421:1505, 342×92 in design units. */
.catalog:not(.result) .product-stats{gap:.520833cqw}
.catalog:not(.result) .product-stats>div{gap:.833333cqw;min-height:1.25cqw}
.catalog:not(.result) .product-stats dt{font-size:.9375cqw;line-height:1.25cqw;font-weight:500}
.catalog:not(.result) .product-stats dd{width:2.5cqw;height:1.25cqw}
.catalog:not(.result) .product-stats dd:not(.meter){width:1.25cqw;padding:.104167cqw}
.catalog:not(.result) .product-stats .capsule{width:1.041667cqw;height:1.041667cqw}
.catalog:not(.result) .product-stats .capsule-empty{width:.9375cqw;height:.9375cqw}
.catalog:not(.result) .meter img{width:1.041667cqw;height:2.5cqw;margin-right:.729167cqw}
@media(max-aspect-ratio:1/1){
 .catalog:not(.result) .product-stats{gap:10px}
 .catalog:not(.result) .product-stats>div{gap:6px;min-height:20px}
 .catalog:not(.result) .product-stats dt{font-size:10px;line-height:14px}
 .catalog:not(.result) .product-stats dd{width:36px;height:20px;flex-shrink:0}
 .catalog:not(.result) .product-stats dd:not(.meter){width:20px;padding:2px}
 .catalog:not(.result) .product-stats .capsule{width:16px;height:16px}
 .catalog:not(.result) .product-stats .capsule-empty{width:14px;height:14px}
 .catalog:not(.result) .meter img{width:15px;height:36px;margin-right:10.5px}
}

/* The first instruction has one visible action, aligned with its copy. */
.howto[data-step="0"] .step-placeholder{display:none}
.howto[data-step="0"] .instruction-copy .actions>.primary{grid-column:1}

/* No citrus match: compact copy and inline actions, without a product slot. */
.stage[data-screen=result] #main>.result-empty{height:auto;margin-top:0;left:5.833cqw;right:5.833cqw}
.result-empty>h1{font-size:3.333333cqw;line-height:3.75cqw;white-space:normal}
.result-empty>.subtitle{position:static;margin:1.25cqw 0 0;font-size:1.458333cqw;line-height:1.875cqw}
.result-empty>.actions{position:static;margin:2.5cqw 0 0;display:flex;flex-direction:row;justify-content:center;gap:1.25cqw}
@media(max-aspect-ratio:1/1){
 .stage[data-screen=result] #main>.result-empty{left:auto;right:auto}
 .result-empty>h1{font-size:32px;line-height:38px}
 .result-empty>.subtitle{font-size:18px;line-height:26px;margin-top:20px}
 .result-empty>.actions{margin-top:28px;gap:12px;align-items:center}
 .result-empty>.actions .button{font-size:15px;line-height:20px;padding:12px 10px;min-width:0}
}

.result-card .rank{left:auto;right:0;top:0;width:21.145833cqw;text-align:left}
@media(max-aspect-ratio:1/1){.result-card .rank{position:static;grid-row:1;width:auto;text-align:center;font-size:12px;line-height:18px}.result-card:has(.rank){row-gap:12px}}

/* Original updated starter-kit image, including its matching highlight mask. */
.programs .offer-art::after{mask-image:url(assets/starter-kit-copy6.png)}
@media(max-aspect-ratio:1/1){.programs .offer-purchase{margin-top:28px}.programs .offer-condition{margin-top:16px}.programs .offer-art img,.programs .offer-art::after{left:6.727273%;top:2.068966%}}

/* Catalog pack slots: Copy6 404:655, 252×172 with artwork at 4/5, 243×161. */
.stage[data-screen=catalog] .pack-image{position:relative;display:block}
.stage[data-screen=catalog] .pack-image img{position:absolute;left:1.587302%;top:2.906977%;width:96.428571%;height:93.604651%;margin:0;object-fit:cover}
.stage[data-screen=catalog] .product-card[data-value=skygreen] .pack-image img{left:1.984127%;width:96.031746%}
@media(max-aspect-ratio:1/1){.stage[data-screen=catalog] .pack-image{width:min(100%,252px);height:auto;aspect-ratio:252/172}}

/* End-of-film actions: Copy6 482:502, y530 / y618 inside the y200 player. */
.about .technology-ended{position:absolute;top:40.740741%;left:50%;translate:-50% 0;gap:1.458333cqw;width:max-content;max-width:96%}
.about .technology-ended .button,.about .technology-replay{font-size:1.666667cqw;line-height:2.083333cqw;font-weight:500;padding:.520833cqw 2.083333cqw;min-height:3.125cqw;white-space:nowrap}
.about .technology-replay{display:flex;align-items:center;justify-content:center;gap:.625cqw}
.technology-replay-icon{display:block;flex:none;width:1.666667cqw;height:1.666667cqw}
@media(max-aspect-ratio:1/1){.about .technology-ended{gap:10px}.about .technology-ended .button,.about .technology-replay{font-size:clamp(12px,3.5vw,18px);line-height:1.25;padding:8px 12px;min-height:36px}.technology-replay-icon{width:20px;height:20px}.about .technology-replay{gap:7px}}

/* Catalog uses the complete Copy6 workspace, not the narrower quiz workspace. */
@media(min-aspect-ratio:1/1){
 .stage[data-screen=catalog] #main{width:min(100%,calc((100dvh - clamp(190px,14vw,280px))*2.4))}
 .stage[data-screen=catalog] .catalog>.actions{gap:1.25cqw}
 .stage[data-screen=catalog] .catalog>.actions .button{width:22.708333cqw;justify-content:center;white-space:nowrap;flex:none}
 .stage[data-screen=catalog] .catalog>.actions .primary{width:auto;min-width:22.708333cqw}
}

/* Spread pack composition: Copy6 component 404:515, back to front. */
.pack-fan>div{bottom:auto;left:var(--fan-left);top:var(--fan-top);width:var(--fan-width)}
.pack-fan>div:nth-child(1){--fan-left:40.115163%;--fan-top:3.409468%;--fan-width:56.020729%}
.pack-fan>div:nth-child(2){--fan-left:26.871401%;--fan-top:13.978816%;--fan-width:55.924568%}
.pack-fan>div:nth-child(3){--fan-left:14.779271%;--fan-top:23.525320%;--fan-width:56.020729%}
.pack-fan>div:nth-child(4){--fan-left:0%;--fan-top:34.018295%;--fan-width:56.020729%}
@media(max-aspect-ratio:1/1){.pack-fan{height:auto;aspect-ratio:521/293.301}}

/* Keep oversized, rotated meter images centered in the actual row height. */
.product-stats dd{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}

/* Workbook Kazakh age confirmation is longer than the original placeholder. */
html[lang=kk] .stage[data-screen=start] .intro .button.large{white-space:normal}