/* Figma 1920 × 1080 geometry audit after TT Norms Pro connection.
   1cqw = 19.2 design pixels. Keep the portrait layout fluid. */

h1, h2 {
  letter-spacing: normal;
}
.intro > p, .instruction-copy > p {
  white-space: pre-line;
}
@media (min-aspect-ratio: 1/1) {
.button {
  padding: 0.46875000cqw 2.08333333cqw;
  min-height: 3.12500000cqw;
}
.button.large {
  padding: 0.88541667cqw 3.75000000cqw;
  width: 27.65625000cqw;
  min-height: 4.37500000cqw;
  line-height: 2.50000000cqw;
  font-size: 2.08333333cqw;
}
.intro .vertical-actions {
  margin-top: 2.08333333cqw;
}
.header-actions {
  align-self: flex-start;
  margin-top: 0.31250000cqw;
}
header .languages {
  position: absolute;
  top: 0.20833333cqw;
  right: 0;
  width: 11.66666667cqw;
  height: 3.54166667cqw;
  padding: 0.52083333cqw 0.41666667cqw;
  gap: 0.41666667cqw;
  border: 0;
}
header .languages button {
  flex: 0 0 3.33333333cqw;
  min-width: 0;
  height: 2.50000000cqw;
  padding: 0.41666667cqw 0.52083333cqw;
  font-size: 1.45833333cqw;
  line-height: 1.66666667cqw;
}
.menu-grid {
  right: 6.04166667cqw;
}
.menu-card {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(186,136,250,.65);
}
.menu-card > span {
  margin-top: 0.72916667cqw;
}
.question-panel h1 {
  letter-spacing: normal;
}
.option {
  border: 0;
  border-radius: 0.93750000cqw;
  font-size: 1.97916667cqw;
  line-height: 2.29166667cqw;
  padding: 1.04166667cqw 2.81250000cqw;
  min-height: 4.37500000cqw;
}
.catalog {
  top: 9.16666667cqw;
}
.catalog > h1 {
  font-size: 4.16666667cqw;
  line-height: 4.58333333cqw;
}
.catalog .subtitle {
  margin-top: 1.25000000cqw;
  margin-bottom: 2.29166667cqw;
  font-size: 1.66666667cqw;
  line-height: 2.08333333cqw;
}
.product-card {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.product-card h2 {
  letter-spacing: normal;
}
.product-card:hover {
  box-shadow: inset 0 0 0 1px var(--violet);
}
.result {
  top: 10.41666667cqw;
}
.result .subtitle {
  margin-top: 1.25000000cqw;
  margin-bottom: 1.66666667cqw;
}
.result > .actions {
  margin-top: 1.66666667cqw;
}
.flavour-intro {
  top: 14.16666667cqw;
  left: 36.17187500cqw;
  right: auto;
  width: 27.65625000cqw;
}
.pack-fan {
  height: 15.26041667cqw;
  width: 27.13541667cqw;
  margin-bottom: 3.38541667cqw;
}
.pack-fan > div {
  width: 17.18750000cqw;
  bottom: calc(1.25000000cqw * (3 - var(--i)));
  left: calc(3.33333333cqw * (3 - var(--i)));
}
.howto[data-step="7"] {
  grid-template-columns: 40.41666667cqw 41.82291667cqw;
  right: auto;
}
.instruction-copy h1 {
  letter-spacing: normal;
}
.instruction-copy > p:not(.step-counter) {
  max-width: 36.09375000cqw;
}
.instruction-copy > p.instruction-note {
  max-width: 100%;
  margin-top: 0.83333333cqw;
}
.instruction-copy .actions {
  max-width: 100%;
}
.programs > h1 {
  letter-spacing: normal;
}
.offer-composition {
  margin-top: 0;
}
.offer-card {
  top: 0.05208333cqw;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  padding: 0.83333333cqw 1.66666667cqw;
}
.offer-card > p:first-child {
  line-height: 1.56250000cqw;
}
.offer-card h2 {
  margin-top: 0.41666667cqw;
  line-height: 3.33333333cqw;
  letter-spacing: normal;
}
.offer-card .kit-description {
  margin-top: 0.83333333cqw;
  text-transform: uppercase;
}
.offer-divider {
  height: 0;
  position: relative;
  margin: 1.66666667cqw 0;
}
.offer-divider img {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
}
.offer-card strong {
  line-height: 4.58333333cqw;
  letter-spacing: normal;
}
.offer-card s {
  margin-top: 0.10416667cqw;
}
.offer-device {
  left: 40.62500000cqw;
  right: auto;
}
.offer-packs {
  left: 24.89583333cqw;
  top: 17.65625000cqw;
}
.offer-packs > div {
  width: 11.71875000cqw;
}
.offer-packs > div:nth-child(1) {
  left: 5.05208333cqw;
  top: -3.48958333cqw;
}
.offer-packs > div:nth-child(2) {
  left: 3.22916667cqw;
  top: -2.39583333cqw;
}
.offer-packs > div:nth-child(3) {
  left: 1.61458333cqw;
  top: -1.19791667cqw;
}
.offer-packs > div:nth-child(4) {
  left: 0.00000000cqw;
  top: 0.00000000cqw;
}
}
dialog h2 {
  letter-spacing: normal;
}
@media (max-aspect-ratio: 1/1) {
.intro h1, .question-panel h1, .instruction-copy h1, .programs > h1, .product-card h2 {
  letter-spacing: normal;
}
.offer-divider {
  height: 1px;
  margin: 20px 0;
  position: relative;
}
.offer-divider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}
.intro > p, .instruction-copy > p {
  white-space: normal;
}
}

/* Keep translated and long Russian labels on the same baseline as the
   531×84 Figma controls. Less internal padding does not move centered text. */
@media (min-aspect-ratio: 1/1) {
  .button.large { padding-inline: 1.66666667cqw; white-space: nowrap; }
  html[lang="kk"] .offer-card h2 { font-size: 2.5cqw; }
}

/* Stable instruction controls, independent of the amount of copy. */
.instruction-copy { position: relative; height: var(--step-copy-height); min-height: 0; padding-bottom: 0; }
.instruction-copy .actions {
  position: absolute; top: var(--step-actions-top); left: 0;
  margin-top: 0; display: grid; grid-template-columns: max-content max-content;
  width: max-content;
}
.instruction-copy .actions > .primary { grid-column: 2; }
.step-placeholder { visibility: hidden !important; pointer-events: none; }
@media(max-aspect-ratio:1/1) {
  .instruction-copy { min-height: 0; padding-bottom: 0; }
  .instruction-copy .actions { top: var(--step-actions-top); bottom: auto; width: 100%; max-width: 100%; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .instruction-copy .actions .button { white-space: normal; padding: 12px 8px; }
}

.instruction-measure { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.instruction-measure .instruction-copy { height: auto; min-height: 0; padding: 0; }
.instruction-measure .instruction-copy .actions { top: 0; }
.instruction-measure-gap { height: 1.875cqw; }
@media(max-aspect-ratio:1/1) {
  .instruction-measure .howto { position: absolute; top: 0; left: 5vw; right: 5vw; }
  .instruction-measure-gap { height: 36px; }
}

.instruction-progress .step-dot { position: relative; width: .729cqw; height: .729cqw; display: inline-flex; flex: none; }
.instruction-progress .step-dot img { width: 100%; height: 100%; }
.instruction-progress .dot-fill { position: absolute; inset: 0; border-radius: 50%; background: white; }
.step-number { display: inline-grid; vertical-align: bottom; overflow: hidden; min-width: 1ch; }
.step-digit { grid-area: 1 / 1; display: block; text-align: center; }
@media(max-aspect-ratio:1/1) { .instruction-progress .step-dot { width: 10px; height: 10px; } }

.instruction-title-mask { overflow: hidden; }
.instruction-title-text { display: block; }

/* Flavour popup: Figma 1394×583, content 1122px wide. */
#details{position:fixed;inset:auto;left:var(--popup-left);top:var(--popup-top);margin:0;width:calc(1394*var(--popup-unit));height:calc(583*var(--popup-unit));max-width:none;max-height:none;padding:calc(56*var(--popup-unit)) calc(136*var(--popup-unit)) calc(56*var(--popup-unit));border:0;border-radius:calc(20*var(--popup-unit));background:rgba(217,217,217,.1);backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);overflow:auto}
#details::backdrop{background:transparent;backdrop-filter:none}
body:has(#details[open]) #main{visibility:hidden}
#details h2{font-size:calc(80*var(--popup-unit));line-height:calc(88*var(--popup-unit));font-weight:700;margin:0 0 calc(56*var(--popup-unit));white-space:nowrap;text-transform:uppercase}
#details .close-button{position:absolute;right:calc(27*var(--popup-unit));top:calc(28*var(--popup-unit));width:calc(56*var(--popup-unit));height:calc(56*var(--popup-unit));padding:0;display:grid;place-items:center}
#details .close-button img{display:block;width:100%;height:100%}
#details .modal-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(24*var(--popup-unit));align-items:center}
#details .modal-pack{position:relative;display:block;width:100%;height:calc(327*var(--popup-unit));overflow:hidden}
#details .modal-pack img{position:absolute;max-width:none;max-height:none;object-fit:cover}
#details .modal-pack-back{left:36.0656%;top:2.4465%;width:59.1985%;height:65.75%}
#details .modal-pack-front{left:4.7359%;top:32.1101%;width:56.2842%;height:65.1376%}
#details .modal-info{display:flex;flex-direction:column;gap:calc(32*var(--popup-unit))}
#details[data-flavour=yellow] .modal-info{gap:calc(24*var(--popup-unit))}
#details .flavour-description{font-size:calc(28*var(--popup-unit));line-height:calc(34*var(--popup-unit));margin:0}
#details .product-stats{gap:calc(10*var(--popup-unit));width:100%}
#details .product-stats>div{height:calc(24*var(--popup-unit))}
#details .product-stats dt{font-size:calc(18*var(--popup-unit));line-height:calc(24*var(--popup-unit));font-weight:500}
#details .product-stats dd{width:calc(48*var(--popup-unit));height:calc(24*var(--popup-unit));margin:0}
#details .product-stats .capsule{width:calc(20*var(--popup-unit));height:calc(20*var(--popup-unit))}
#details .meter img{width:calc(20*var(--popup-unit));height:calc(48*var(--popup-unit));margin-right:calc(14*var(--popup-unit))}
@media(max-aspect-ratio:1/1){
 #details{left:3vw;top:4svh;width:94vw;height:auto;max-height:92svh;padding:56px 20px 28px;border-radius:16px}
 #details h2{font-size:28px;line-height:34px;white-space:normal;margin:0 0 24px}
 #details .close-button{width:40px;height:40px;top:8px;right:8px}
 #details .modal-body{grid-template-columns:1fr;gap:20px}
 #details .modal-pack{height:auto;aspect-ratio:549/327}
 #details .modal-info,#details[data-flavour=yellow] .modal-info{gap:24px}
 #details .flavour-description{font-size:18px;line-height:25px}
 #details .product-stats{gap:10px}
 #details .product-stats>div{height:24px}
 #details .product-stats dt{font-size:13px;line-height:24px}
 #details .product-stats dd{width:48px;height:24px}
 #details .product-stats .capsule{width:20px;height:20px}
 #details .meter img{width:20px;height:48px;margin-right:14px}
}
#details[data-flavour=yellow] .modal-pack-back,#details[data-flavour=skygreen] .modal-pack-back{height:65.9%}
@media(max-aspect-ratio:1/1){#details{background:rgba(22,18,31,.98)}#details::backdrop{background:rgba(1,0,6,.4)}}

/* Independent translate keeps the Figma slots and GSAP entry unchanged. */
#details[open].popup-packs-idle .modal-pack img{animation:popup-pack-wave 6.5s ease-in-out infinite}
#details[open].popup-packs-idle .modal-pack img.modal-pack-front{animation-delay:.5s}
@keyframes popup-pack-wave{0%,100%{translate:0 0}25%{translate:0 -3px}75%{translate:0 3px}}
.ambient-paused #details[open].popup-packs-idle .modal-pack img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#details[open].popup-packs-idle .modal-pack img{animation:none}}

/* Keep the full film, including its own captions, inside the technology frame. */
.about .video-poster{aspect-ratio:16/9;height:auto;background:#000}
.about .technology-video{display:block;position:static;width:100%;height:100%;object-fit:contain}
.technology-actions{justify-content:center;margin-top:1cqw}

.technology-film{width:100%;aspect-ratio:16/9}
.technology-overlay{position:absolute;inset:0;display:grid;place-items:center}
.technology-overlay[hidden]{display:none}
.technology-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.technology-shade{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.technology-play{position:relative;background:transparent;border:0;color:white;font-size:4cqw;min-width:64px;min-height:64px;cursor:pointer}
.technology-ended{display:none;position:relative;flex-direction:column;align-items:center;gap:1cqw}
.video-poster[data-playback=ended] .technology-ended{display:flex}
.video-poster[data-playback=ended] .technology-play{display:none}
.video-poster[data-playback=ended] .technology-shade{background:rgba(0,0,0,.82)}
.technology-replay{background:transparent;border:0;color:white;font-size:1.458cqw;padding:.5cqw;cursor:pointer}
@media(max-aspect-ratio:1/1){.technology-play{font-size:38px}.technology-ended{gap:10px}.technology-replay{font-size:14px}.technology-ended .button{font-size:14px;padding:10px 16px}}

/* Copy 3: original 341×501 artwork slots; five CSS slices share one source. */
.programs-art{overflow:hidden}
.programs-art .programs-device{position:absolute;left:10.26393%;top:20.95808%;width:26.97947%;height:63.87226%;z-index:2;object-fit:cover}
.programs-pack-stack{clip-path:inset(-10% -10% -10% 0);position:absolute;left:37.2434%;top:43.31337%;width:52.78592%;height:36.12774%;z-index:1}
.programs-pack{position:absolute;left:0;top:calc(var(--pack-index)*20%);width:100%;height:20%;overflow:hidden}
.programs-pack img{position:absolute;left:0;top:calc(var(--pack-index)*-100%);width:100%;height:500%;max-width:none;display:block}
.programs-idle .programs-device,.programs-idle .programs-pack-stack{animation:menu-programs-float 8s ease-in-out infinite}
.programs-idle .programs-pack-stack{animation-delay:.5s}
@keyframes menu-programs-float{0%,100%{translate:0 0}25%{translate:0 -2px}75%{translate:0 2px}}
.ambient-paused .programs-idle .programs-device,.ambient-paused .programs-idle .programs-pack-stack{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.programs-idle .programs-device,.programs-idle .programs-pack-stack{animation:none}}

.programs-device>img{display:block;width:100%;height:100%;object-fit:cover}
.programs-device::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mask-image:url('assets/programs-device.png');mask-size:100% 100%;mask-repeat:no-repeat;background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.42) 47%,transparent 66%)}
.programs-idle .programs-device::after{animation:pack-light 10s ease-in-out infinite;animation-delay:2s}
.ambient-paused .programs-idle .programs-device::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.programs-idle .programs-device::after{animation:none}}

.instruction-artwork{position:absolute;inset:0;overflow:hidden;background:#000}
.instruction-artwork>img{position:absolute;max-width:none;object-fit:cover;display:block}