@font-face {
  font-family: "Stem Regular";
  src: url("../fonts/Stem-Regular.woff2") format("woff2"),
    url("../fonts/Stem-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stem Medium";
  src: url("../fonts/Stem-Medium.woff2") format("woff2"),
    url("../fonts/Stem-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Stem Bold";
  src: url("../fonts/Stem-Bold.woff2") format("woff2"),
    url("../fonts/Stem-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #ffb71b;
  --gold-deep: #e19a00;
  --ink: #303030;
  --sand: #c1b89c;
  --cream: #fbf2d6;
  --font: "Stem Regular", sans-serif;
  --font-medium: "Stem Medium", sans-serif;
  --font-bold: "Stem Bold", sans-serif;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --wide: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-synthesis: none;
  background: #f7eac3;
}

html {
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-image: url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: translate3d(var(--bg-px, 0px), var(--bg-py, 0px), 0);
  pointer-events: none;
}

html.is-parallax body::before { will-change: transform; }

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.16) 30%,
    rgba(255, 255, 255, 0) 52%
  );
  pointer-events: none;
}

button, input { font: inherit; color: inherit; }

button { cursor: pointer; }

img { max-width: 100%; }

.preload {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(122deg, #fcf0cb 0%, #fcfbf5 69%, #f2da93 100%);
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}

.preload.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mark {
  width: 84px;
  height: 84px;
  animation: spin 2.6s linear infinite;
}

.mark svg { width: 100%; height: 100%; display: block; }

.stage {
  min-height: 100dvh;
  position: relative;
  z-index: 1;
}

.shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: stretch;
}

.rock-fade {
  display: none;
  pointer-events: none;
}

.scanner-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
}

.device {
  position: relative;
  width: calc(90dvh * 1500 / 1445);
  height: 90dvh;
  max-width: none;
  max-height: none;
  min-height: 0;
  min-width: 0;
  margin: 0;
  flex: 0 0 auto;
  transition: transform 0.8s var(--ease);
}

.stage[data-screen="result"] .device { transform: translateX(-10%); }

.scanner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
}

.scanner-horizontal { display: none; }

.chamber {
  position: absolute;
  z-index: 3;
  left: 30.5%;
  top: 22%;
  width: 39%;
  height: 45%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}

.clip {
  /* Same seat for every clip: glass-bottom tray, no translate on the video.
     Safari HEVC+alpha is sized on a FRESH <video> (landing / first init).
     Reused nodes after load() ignore object-fit and crop; JS rebuilds the node. */
  --stand: 9;
  --stand-baseline: 9.4;
  --stand-scale: 0.62;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 62%;
  max-width: none;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  opacity: 0;
  overflow: visible;
  transform: none;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}

.clip-media {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  transform: none;
}

.clip-media > video,
.clip-media > .clip-gif {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  border: 0;
  transform: none;
}

.clip-media > .clip-gif {
  display: none;
  pointer-events: none;
}

html.is-ios-safari .stage[data-screen="landing"] .clip-media > .clip-gif {
  display: block;
}

html.is-ios-safari .stage[data-screen="landing"] .clip-media > video {
  visibility: hidden;
}

video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}

.clip.is-on { opacity: 1; }

.glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: 210%;
  height: 120%;
  background: radial-gradient(ellipse at center, rgba(255, 220, 110, 0.9) 0%, rgba(255, 183, 27, 0.42) 26%, rgba(255, 183, 27, 0.14) 48%, rgba(255, 183, 27, 0) 72%);
  transform: translate(-50%, -42%) scale(0.9);
  animation: glow-pulse 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}

.beams { position: absolute; inset: 0; z-index: 0; }
.sweep { position: absolute; inset: 0; z-index: 2; }

.beams span {
  position: absolute;
  top: 8%;
  width: 8px;
  height: 78%;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35) 12%, #fff 46%, rgba(255, 255, 255, 0.85) 70%, transparent);
  opacity: 0.25;
  animation: ray-y 1.7s ease-in-out infinite;
  will-change: transform, opacity;
}

.ring {
  position: absolute;
  z-index: 5;
  top: 6%;
  left: 8%;
  right: 8%;
  height: calc(8% / 18);
  border-radius: 50%;
  border: 0;
  box-shadow:
    0 0 0 15px rgba(255, 255, 255, 0.95),
    0 0 40px 10px rgba(255, 255, 255, 0.9),
    0 0 110px 30px rgba(255, 183, 27, 0.95),
    0 0 210px 70px rgba(255, 183, 27, 0.55);
  opacity: 0;
}

.chamber.is-swap .ring {
  animation: ring-y 1.4s linear 1;
  will-change: transform, opacity;
}

.chamber.is-swap .clip {
  transition-delay: 0.63s;
}

.beams span:nth-child(1) { left: 16%; animation-delay: 0s; }
.beams span:nth-child(2) { left: 32%; animation-delay: 0.18s; }
.beams span:nth-child(3) { left: 48%; animation-delay: 0.36s; }
.beams span:nth-child(4) { left: 64%; animation-delay: 0.12s; }
.beams span:nth-child(5) { left: 80%; animation-delay: 0.28s; }

.sweep {
  left: 6%;
  right: 6%;
  top: -30%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 183, 27, 0.55) 38%, transparent 72%);
  filter: blur(1px);
  opacity: 0;
}

.burst {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 68%;
  width: 130%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 140, 1) 0%, rgba(255, 183, 27, 0.95) 24%, rgba(255, 140, 0, 0.55) 50%, rgba(255, 183, 27, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  pointer-events: none;
}

.chamber.is-swap .burst { animation: burst 1.05s ease-out 0.63s 1; }

.particles {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 68%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.particles i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #ffe27a;
  box-shadow: 0 0 8px 2px rgba(255, 183, 27, 0.95);
  opacity: 0;
}

.chamber.is-swap .particles i {
  animation: spark 1s ease-out calc(0.63s + var(--spark-delay, 0s)) 1;
}

.chamber.is-swap .sweep { animation: sweep-y 0.9s var(--ease); }

.content {
  position: relative;
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 77px 48px 28px 16px;
}

.logo {
  position: absolute;
  top: 30px;
  left: 45%;
  z-index: 2;
  width: 220px;
  height: 47px;
  margin: 0;
  transform: translateX(-50%);
}

.logo img { width: 100%; height: 100%; display: block; }

.panels {
  flex: 1;
  width: min(520px, 100%);
  min-width: 0;
  max-width: 100%;
  display: grid;
  align-items: center;
}

.panel {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
  pointer-events: none;
}

.panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.kicker,
.screen-title,
.btn,
.slider-name,
.slider-badge,
.pill,
.lid-row strong {
  font-family: var(--font-medium);
  font-weight: 500;
}

.display,
.lid-title {
  font-family: var(--font-bold);
  font-weight: 700;
}

.kicker {
  margin: 0;
  font-size: 36px;
  line-height: 1.1;
}

.display {
  margin: 8px 0 18px;
  font-size: 80px;
  line-height: 0.95;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}

.screen-title {
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 1.15;
}

.lead {
  margin: 0 0 28px;
  max-width: 100%;
  font-size: 20px;
  line-height: 28px;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(440px, 100%);
  max-width: 100%;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  padding: 0 40px;
  border: 0;
  border-radius: 100px;
  background: var(--gold);
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s var(--ease), filter 0.2s;
}

.btn:hover { filter: brightness(1.16); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .arrow:focus-visible, .slider input:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
}

.btn-ghost {
  flex-direction: column;
  gap: 4px;
  background-color: rgba(255, 255, 255, 0.82);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}

.btn-ghost:hover {
  background-color: #fff;
  filter: none;
}

.btn-ghost small {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.5;
}

.footer {
  margin-top: auto;
  padding: 4px 14px 2px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-size: 16px;
  line-height: 22px;
  opacity: 0.6;
}

.progress {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  width: min(440px, 100%);
  margin: 0 0 14px;
  padding: 12px 20px;
  border: 1px solid rgba(193, 184, 156, 0.5);
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    rgba(0, 151, 122, 0.25) 0%,
    rgba(0, 151, 122, 0.25) var(--scan, 0%),
    rgba(255, 255, 255, 0.25) calc(var(--scan, 0%) + 8%),
    rgba(193, 184, 156, 0.25) calc(var(--scan, 0%) + 18%),
    rgba(193, 184, 156, 0.25) 100%
  );
}

.bar {
  flex: 1 1 0;
  height: 35px;
  max-width: 30px;
  border: 1px solid rgba(193, 184, 156, 0.33);
  border-radius: 10px;
  background: linear-gradient(180deg, #f2ead0 0%, #fffae9 18%, #f1e9d1 39%, #c1b89c 100%);
  box-shadow: inset 0 -4px 4px rgba(255, 255, 255, 0.5);
  transition: background 0.25s linear, border-color 0.25s;
}

.bar.is-on {
  border-color: rgba(0, 151, 122, 0.33);
  background: linear-gradient(180deg, #67d0bc 0%, #e2fffa 18%, #67d0bc 39%, #00977a 100%);
  box-shadow: inset 0 -4px 4px rgba(255, 255, 255, 0.5);
}

.bar.is-edge { opacity: 0.5; }

.timeline {
  position: relative;
  width: min(388px, 100%);
  height: 20px;
  margin: 0 0 10px;
}

.timeline-track, .timeline-fill {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 7px;
  height: 5px;
  border-radius: 99px;
  background: rgba(48, 48, 48, 0.1);
}

.timeline-fill {
  right: auto;
  width: 0;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}

.timeline i {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c1b89c;
}

.timeline i:nth-child(3) { left: 0; }
.timeline i:nth-child(4) { left: calc(50% - 10px); }
.timeline i:nth-child(5) { left: auto; right: 0; }

.timeline i.is-on { background: var(--gold); }

.statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(388px, 100%);
  min-height: 45px;
  margin: 0;
}

.statuses p:nth-child(1) { text-align: left; }
.statuses p:nth-child(2) { text-align: center; }
.statuses p:nth-child(3) { text-align: right; }

.statuses p {
  margin: 0;
  color: #333;
  font-size: 13px;
  line-height: 15px;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.statuses p.is-done { opacity: 0.5; }
.statuses p.is-on { opacity: 1; }

.slider-pages {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 30px;
}

.slider-page {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}

.slider-page.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.slider { position: relative; text-align: left; }

.slider-name {
  position: relative;
  display: flex;
  align-items: center;
  height: 16px;
  margin: 0 0 36px;
  font-size: 16px;
  line-height: 16px;
}

.slider-badge {
  position: absolute;
  top: 21px;
  z-index: 2;
  padding: 4px 10px 2px;
  border-radius: 100px;
  background: #303030;
  color: var(--gold);
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  transform: none;
  transition: left 0.15s linear;
}

.slider-track {
  position: relative;
  height: 40px;
  display: block;
}

.slider-line, .slider-fill {
  position: absolute;
  left: 10px;
  top: 16px;
  height: 8px;
  border-radius: 100px;
}

.slider-line {
  right: 10px;
  background: rgba(48, 48, 48, 0.1);
}

.slider-fill {
  width: 0;
  background: var(--gold);
}

.slider-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slider-dots span {
  position: absolute;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c8c2b4;
  transform: translateX(-50%);
}

.slider-thumb {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 8px solid #fff;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 10px rgba(48, 48, 48, 0.12);
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-dots span.is-on { background: var(--gold); }

.slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 40px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: grab;
}

.slider input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
}

.slider input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
}

.slider-poles {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: #333;
  font-size: 13px;
  line-height: 20px;
  opacity: 0.5;
}

.slider-poles span:last-child { text-align: right; }

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 16px;
  touch-action: pan-y;
}

.carousel-stage {
  position: relative;
  width: 420px;
  max-width: 100%;
  min-width: 0;
  height: 180px;
  flex: 0 1 420px;
}

.carousel-stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 158px;
  height: 180px;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.66);
  opacity: 0.72;
  filter: saturate(0.9);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
  pointer-events: none;
  user-select: none;
}

.carousel-stage img.is-center {
  width: 158px;
  height: 180px;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}

.carousel-stage img.is-prev { transform: translate(calc(-50% - 128px), -50%) scale(0.66); }
.carousel-stage img.is-next { transform: translate(calc(-50% + 128px), -50%) scale(0.66); }
.carousel-stage img.is-far { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }

.arrow {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.86);
  display: grid;
  place-items: center;
  transition: background-color 0.2s var(--ease);
}

.arrow:hover { background-color: #fff; }

.arrow svg { width: 24px; height: 24px; display: block; }
.arrow-next svg { transform: scaleX(-1); }

.pill {
  margin: 0 0 10px;
  padding: 4px 10px 2px;
  border-radius: 100px;
  background: #303030;
  color: var(--gold);
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
}

.quote {
  margin: 0 0 30px;
  width: min(320px, 100%);
  color: #333;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  opacity: 0.5;
}

.lid {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 16%;
  width: 50%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: translateX(-72%);
  transition: transform 1.05s var(--ease);
  pointer-events: none;
  container-type: inline-size;
}

.lid-door {
  display: block;
  width: 100%;
  height: auto;
}

.lid-inner {
  position: absolute;
  left: 46.4%;
  right: 8%;
  top: 11%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stage[data-screen="result"] .lid {
  transform: none;
}

.lid-crown {
  width: 10.3cqw;
  height: 10.3cqw;
  margin: 0 auto 0.85cqw;
  display: block;
}

.lid-title {
  max-width: 100%;
  margin: 0 auto 3.8cqw;
  color: var(--gold-deep);
  font-size: 6cqw;
  line-height: 1.07;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.lid-row {
  display: grid;
  grid-template-columns: 8.5cqw 1fr;
  gap: 1.7cqw 2.6cqw;
  align-items: center;
  margin-bottom: 2.6cqw;
  text-align: left;
}

.lid-row img {
  width: auto;
  height: 8.1cqw;
  max-width: 8.5cqw;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
}

.lid-row small {
  display: block;
  color: #333;
  font-size: 3.2cqw;
  line-height: 1.13;
  opacity: 0.5;
}

.lid-row strong {
  display: block;
  color: #333;
  font-size: 3.5cqw;
  line-height: 1.18;
}

.result-lead {
  max-width: 440px;
  margin-bottom: 28px;
  font-size: 30px;
  line-height: 40px;
  font-family: var(--font-medium);
  font-weight: 500;
}

/*
  Compact desktop (1100–1439): type and UI icons at 75%
  so the right column fits 100dvh without a vertical scrollbar.
  Lid type tracks the door width instead of this step.
*/
@media (min-width: 1100px) and (max-width: 1439px) {
  .content { padding: 58px 36px 21px 12px; }

  .logo {
    top: 22px;
    width: 165px;
    height: 35px;
  }

  .kicker { font-size: 27px; }
  .display { margin: 6px 0 14px; font-size: 60px; }
  .screen-title { font-size: 27px; margin-bottom: 9px; }
  .lead { margin-bottom: 21px; font-size: 15px; line-height: 21px; }

  .actions { gap: 12px; }
  .btn { height: 60px; font-size: 21px; padding: 0 30px; }
  .btn-ghost small { font-size: 12px; line-height: 15px; }
  .footer { font-size: 12px; line-height: 16px; }

  .result-lead { margin-bottom: 21px; font-size: 22px; line-height: 30px; }

  .timeline { height: 15px; margin-bottom: 8px; }
  .timeline-track, .timeline-fill { top: 5px; height: 4px; }
  .timeline i { width: 15px; height: 15px; }
  .timeline i:nth-child(4) { left: calc(50% - 7.5px); }

  .statuses { min-height: 34px; gap: 8px; }
  .statuses p { font-size: 10px; line-height: 12px; }

  .slider-pages { margin-bottom: 22px; }
  .slider-page { gap: 21px; }
  .slider-name { height: 12px; margin: 0 0 27px; font-size: 12px; line-height: 12px; }
  .slider-badge { top: 16px; padding: 3px 8px 1px; font-size: 12px; line-height: 15px; }
  .slider-poles { font-size: 10px; line-height: 15px; }

  .pill { margin-bottom: 8px; padding: 3px 8px 1px; font-size: 12px; line-height: 15px; }
  .quote { margin-bottom: 22px; font-size: 12px; line-height: 15px; }

  .carousel { gap: 9px; margin-bottom: 12px; }
  .carousel-stage { width: 315px; height: 135px; flex-basis: 315px; }
  .carousel-stage img,
  .carousel-stage img.is-center { width: 118px; height: 135px; }
  .carousel-stage img.is-prev { transform: translate(calc(-50% - 96px), -50%) scale(0.66); }
  .carousel-stage img.is-next { transform: translate(calc(-50% + 96px), -50%) scale(0.66); }
  .arrow { flex: 0 0 60px; width: 60px; height: 60px; }
  .arrow svg { width: 18px; height: 18px; }
}

/*
  Compact desktop + short height (e.g. iPad Mini 6 landscape 1133×744):
  90dvh-based scanner can outrun the 1.2fr column and stick out left.
  Keep type scale; only shrink the device to the column.
*/
@media (min-width: 1100px) and (max-width: 1439px) and (max-height: 800px) {
  .device {
    width: min(100%, calc(90dvh * 1500 / 1445));
    height: auto;
    max-height: 90dvh;
    aspect-ratio: 1500 / 1445;
  }
}

@media (max-width: 1099px) {
  /*
    Top-align bg, then raise 25vh so the mountain ridge sits behind logo/scanner.
    Length Y offset — % Y is a no-op when cover fills height.
  */
  body::before {
    /* Keep Y room for 16px scroll parallax; do not extend in X. */
    left: 0;
    width: 100%;
    background-position: center -25vh;
  }

  /* Soften top wash so the raised ridge stays readable behind logo/scanner */
  body::after {
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 26%,
      rgba(255, 255, 255, 0) 48%
    );
  }

  /*
    Figma tablet stack (t2/t3/t4/t5): logo → scanner → content.
    Logo bottom 50 (top 20 + h 30); scanner top ≈ 85–89 → gap 35–39px.
    Game title overlaps lower rock (Figma t2 title 510 / cream 520, gap −10px).
    Single overlapping grid cell — auto+1fr was stacking scanner height
    on top of content min-height and forcing empty page scroll.
  */
  .shell {
    --scanner-w: min(500px, 100%);
    --scanner-h: calc(var(--scanner-w) * 1032 / 1200);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(100dvh, auto);
    align-items: start;
    min-height: 100dvh;
    position: relative;
    /* Glow / beams / rock-fade shadow can paint past the viewport; clip X only. */
    overflow-x: clip;
  }

  .scanner-col {
    grid-area: 1 / 1;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    /* Figma t2 scanner y=89; logo bottom 50 → gap 39px to image top / handle */
    padding: 89px 0 0;
    transition: padding-top 0.7s var(--ease);
  }

  .rock-fade {
    display: block;
    grid-area: 1 / 1;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    /* Figma t2 cream @520 */
    top: 450px;
    background: #f7eac3;
    box-shadow: 0 0 50px 50px #f7eac3;
    transition: top 0.7s var(--ease);
  }

  .device {
    /* Figma capsule width 500; shrink on phone so the stack stays on-canvas */
    width: var(--scanner-w);
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
  }

  .scanner {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .stage[data-screen="result"] .device { transform: none; }

  /*
    Figma t6/m6 (artboard 908): crown 70, title 128/32, door 182,
    scanner frame 285 / copy 694 / fade 710.
    PNG handle sits at the top of the image (no 500-frame padding), so the
    scanner is lowered until Проба clears it; lid.top = 182 − padding
    keeps crown/title/door on the Figma Y stack.
    Lid z-index 1 < scanner 2 / chamber 3.
  */
  .stage[data-screen="result"] .scanner-col { padding-top: 395px; }

  .stage[data-screen="result"] .rock-fade {
    top: calc(395px + var(--scanner-h) - 90px);
  }

  .stage[data-screen="result"] .content {
    /* Keep scanner clearance; inherit min-height: 100dvh + footer margin-top: auto */
    padding-top: calc(325px + var(--scanner-h) - 24px);
    padding-bottom: 12px;
  }

  /*
    Inactive panels stay in the shared grid cell (visibility/opacity only) and
    size it to the tallest screen — landing’s 300px display margin bloated load
    to ~1075px on a 844px phone. Result + load must drop them from layout.
  */
  .stage[data-screen="result"] .panel:not(.is-active),
  .stage[data-screen="load"] .panel:not(.is-active) { display: none; }

  .stage[data-screen="result"] .panels { flex: 0 0 auto; }

  .stage[data-screen="result"] .panel[data-screen="result"] {
    /* Match the gap under the copyright: content padding 12px + p margin 1em (13px). */
    padding-bottom: 25px;
  }

  .stage[data-screen="result"] .result-lead {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    font-family: var(--font);
    font-weight: 400;
  }

  .scanner-vertical { display: none; }
  .scanner-horizontal { display: block; }

  .chamber {
    left: 20%;
    top: 18%;
    width: 60%;
    height: 45%;
  }

  /*
    Base glow is 210% of the chamber, left 50% + translate(-50%), and pulses
    to scale 1.16 — wider than the phone viewport, so the layout width grows
    and the page can pan. Pin it to the glass; pulse without a -50% X shift.
  */
  .glow {
    left: 0;
    width: 100%;
    transform: translate(0, -42%) scale(0.9);
    animation-name: glow-pulse-narrow;
  }

  .clip {
    --stand-baseline: 19.4;
    --stand-scale: 0.8;
    height: 80%;
    bottom: 10%;
    transform: none;
  }

  /*
    Horizontal rays: same white system as desktop (.beams span),
    rotated to the capsule axis and scaled down to fit the chamber.
    Desktop: 8px × 78% / top 8%. Narrow: 6px × 70% / left 15%.
  */
  .beams span {
    top: auto;
    left: 15%;
    width: 70%;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35) 12%, #fff 46%, rgba(255, 255, 255, 0.85) 70%, transparent);
    animation-name: ray-x;
  }

  .ring {
    top: 18%;
    left: 8%;
    right: auto;
    width: calc(9% / 18);
    height: 64%;
  }

  .chamber.is-swap .ring { animation-name: ring-x; }

  /* Reset desktop left offsets so every ray shares the same horizontal inset */
  .beams span:nth-child(1) { top: 16%; left: 15%; }
  .beams span:nth-child(2) { top: 32%; left: 15%; }
  .beams span:nth-child(3) { top: 48%; left: 15%; }
  .beams span:nth-child(4) { top: 64%; left: 15%; }
  .beams span:nth-child(5) { top: 80%; left: 15%; }

  .sweep {
    top: 18%;
    left: -30%;
    right: auto;
    width: 22%;
    height: 64%;
  }

  .chamber.is-swap .sweep { animation-name: sweep-x; }

  .content {
    grid-area: 1 / 1;
    z-index: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    width: 100%;
    /* Figma t2/t5/m2 title @510 (overlaps lower rock / cream @520) */
    padding: 450px 16px 24px;
    transition: padding-top 0.7s var(--ease);
  }

  .logo {
    position: absolute;
    top: 20px;
    left: 48%;
    z-index: 5;
    width: 140px;
    height: 30px;
    margin: 0;
    transform: translateX(-50%);
  }

  .panels {
    flex: 1;
    width: min(400px, 100%);
    align-items: stretch;
  }

  .panel {
    justify-content: flex-start;
    padding-bottom: 36px;
  }

  /*
    Landing only (Figma t1/m1): logo → title → scanner → lead/buttons.
    Scanner image @115 overlaps title band; lead @510 overlaps lower rock.
    Other screens keep logo → scanner high → content under capsule.
  */
  .stage[data-screen="landing"] .scanner-col {
    /* Figma t1/m1 scanner y=115; logo bottom 50 → 65px to image/handle top */
    padding-top: 200px;
  }

  .stage[data-screen="landing"] .rock-fade {
    /* Figma t1 cream @539 */
    top: 539px;
  }

  .stage[data-screen="landing"] .content {
    /* Panels start at kicker (Figma top 90); title sits above handle in flow */
    padding-top: 90px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] {
    padding-bottom: 12px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .kicker {
    font-size: 24px;
    line-height: 30px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .display {
    /* Ends @175; lead @510 → margin-bottom 335 */
    margin: 5px 0 335px;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 0.05em;
  }

  .kicker, .screen-title { font-size: 28px; }
  .display { font-size: 48px; letter-spacing: 0.03em; }
  .lead { font-size: 16px; line-height: 22px; margin-bottom: 20px; }

  .btn { height: 60px; font-size: 20px; padding: 0 40px; }
  .btn-ghost small { font-size: 13px; line-height: 13px; }

  /* Figma t2/m2: no timeline; only current status, Stem Regular 24/28 #333 */
  .timeline { display: none; }

  .progress {
    width: min(368px, 100%);
    height: 50px;
    margin: 0 0 50px;
    padding: 10px 20px;
    align-items: center;
    gap: 0;
  }

  .bar {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 30px;
    max-width: 25px;
    border-radius: 6px;
  }

  .stage[data-screen="load"] .screen-title {
    font-size: 24px;
    line-height: 30px;
    margin: 0 0 60px;
  }

  .statuses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(369px, 100%);
    min-height: 56px;
    margin: 0;
  }

  .statuses p,
  .statuses p:nth-child(1),
  .statuses p:nth-child(2),
  .statuses p:nth-child(3) {
    grid-area: 1 / 1;
    display: block;
    margin: 0;
    color: #333;
    font-family: var(--font);
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }

  .statuses p.is-on {
    z-index: 1;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .statuses p.is-done {
    display: block;
    opacity: 0;
    transform: translateY(10px);
  }

  .carousel-stage { width: 250px; height: 150px; flex-basis: 250px; }
  .carousel-stage img,
  .carousel-stage img.is-center { width: 120px; height: 140px; }
  .carousel-stage img.is-prev { transform: translate(calc(-50% - 86px), -50%) scale(0.7); }
  .carousel-stage img.is-next { transform: translate(calc(-50% + 86px), -50%) scale(0.7); }
  .arrow { flex-basis: 56px; width: 56px; height: 56px; }

  .result-lead {
    font-size: 20px;
    line-height: 26px;
    font-family: var(--font);
    font-weight: 400;
  }

  /*
    Figma door 340 wide, left = scanner + 76.
    lid.top −213px = door y 182 − scanner padding 395.
    Crown/title vs .lid-inner: Figma −139 / −81 → 10px crown→title, 22px title→door.
    Start: translateY(120%) — fully below, then slides up.
    Desktop (≥1100) keeps left-to-right translateX(-72%) → none.
  */
  .lid {
    left: 50%;
    top: -213px;
    bottom: auto;
    z-index: 1;
    width: min(340px, calc(100% - 32px));
    margin: 0;
    padding: 0;
    transform: translate(-50%, 120%);
  }

  .stage[data-screen="result"] .lid {
    transform: translate(-50%, 0);
  }

  .lid-crown {
    position: absolute;
    top: -139px;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: 0;
    transform: translateX(-50%);
  }

  /* Figma title 368 wide — lid-inner ~265 was wrapping «КОРОЛЬ МИРА!» onto the door.
     Containing block is .lid-inner, so a fixed 368px is used (not 100%).
     Cap to the viewport so nowrap titles cannot pan the page. */
  .lid-title {
    position: absolute;
    top: -81px;
    left: 50%;
    right: auto;
    width: min(368px, 100vw);
    max-width: 100vw;
    margin: 0;
    font-size: 32px;
    line-height: 32px;
    transform: translateX(-50%);
    white-space: nowrap;
    overflow: hidden;
  }

  .lid-inner {
    left: 12%;
    right: 10%;
    top: 12%;
    bottom: auto;
    justify-content: flex-start;
  }

  .lid-row {
    grid-template-columns: 40px 1fr;
    gap: 8px 12px;
    margin-bottom: 2px;
  }
  .lid-row img {
    height: 38px;
    max-width: 40px;
  }
  .lid-row strong, .lid-row small { font-size: 13px; line-height: 16px; }
  .footer { font-size: 13px; }
}

@media (min-width: 620px) and (max-width: 1099px) {
  .device { width: 500px; max-width: 100%; height: auto; }
  .panels { width: min(440px, 100%); }
}

/*
  Short tablet / Mini landscape (e.g. 1024×768): Figma portrait landing
  spacing (display margin 335, scanner @200) overflows ~85px vertically.
  Compress scanner + title gap so landing fits 100dvh without clipping.
*/
@media (max-width: 1099px) and (max-height: 850px) {
  .shell {
    --scanner-w: min(420px, 100%);
  }

  .device {
    width: var(--scanner-w);
    max-width: 100%;
  }

  .stage[data-screen="landing"] .scanner-col {
    padding-top: 160px;
  }

  .stage[data-screen="landing"] .rock-fade {
    top: 450px;
  }

  .stage[data-screen="landing"] .content {
    padding-top: 64px;
    padding-bottom: 16px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] {
    padding-bottom: 8px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .kicker {
    font-size: 22px;
    line-height: 26px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .display {
    margin: 4px 0 290px;
    font-size: 44px;
    line-height: 44px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .lead {
    margin-bottom: 14px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .actions {
    gap: 10px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .btn {
    height: 52px;
    font-size: 18px;
  }

  /* Other stacked screens: slightly less top padding so short height clears */
  .scanner-col {
    padding-top: 72px;
  }

  .content {
    padding-top: calc(var(--scanner-h));
    padding-bottom: 16px;
  }

  .rock-fade {
    top: calc(var(--scanner-h));
  }
}

/*
  Tablet just under the 850px cut (e.g. 745×812). The block above was tuned
  for a short landscape (1024×768) and pulls the handle into the title and
  the lead onto the capsule. Restore the ≤1099 landing stack here.
*/
@media (min-width: 620px) and (max-width: 1099px) and (min-height: 800px) and (max-height: 850px) {
  /*
    Pin bg to the bottom so the sky sits behind the result crown/title
    instead of the raised mountain ridge from the ≤1099 -25vh offset.
  */
  body::before {
    background-position: center bottom;
  }

  .stage[data-screen="landing"] .scanner-col {
    padding-top: 200px;
  }

  .stage[data-screen="landing"] .rock-fade {
    top: 539px;
  }

  .stage[data-screen="landing"] .content {
    padding-top: 90px;
    padding-bottom: 24px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] {
    padding-bottom: 12px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .kicker {
    font-size: 24px;
    line-height: 30px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .display {
    /* ≤1099 uses 335px for a 500px scanner. Here the scanner is 420px
       and that margin still covers the base; 410px clears it by 24px. */
    margin: 5px 0 410px;
    font-size: 50px;
    line-height: 50px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .lead {
    margin-bottom: 20px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .actions {
    gap: 16px;
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .btn {
    height: 60px;
    font-size: 20px;
  }
}

/*
  Short tablet result (e.g. 757×773): scanner drops to 420 while the ≤1099
  lid stays 340 and outruns the opaque body (≈0.776 of the image).
  0.70 of --scanner-w sits a little inside that body. Bottom edge stays put
  (340 → 294, so top moves down 46px). Type and icons are 90% of the ≤1099 lid.
*/
@media (min-width: 620px) and (max-width: 1099px) and (max-height: 850px) {
  .lid {
    width: min(calc(var(--scanner-w) * 0.70), calc(100% - 32px));
    top: -200px;
  }

  .lid-crown {
    top: -131px;
    width: 43.2px;
    height: 43.2px;
  }

  .lid-title {
    top: -77.8px;
    font-size: 28.8px;
    line-height: 28.8px;
  }

  .lid-row { grid-template-columns: 36px 1fr; }

  .lid-row img {
    height: 34.2px;
    max-width: 36px;
  }

  .lid-row strong,
  .lid-row small {
    font-size: 11.7px;
    line-height: 14.4px;
  }
}

/* Figma m2_1: scanner @85, title 36/36, progress @620, status @700 */
@media (max-width: 619px) {
  /*
    Phone offsets track --scanner-h against each screen’s scanner-col
    padding-top (same idea as short-height: pad + scanner-h − overlap).
    Tall phone landing keeps ≤1099 pad 200; short phone overrides below.

    --scanner-w must use vw (not 100%): when --scanner-h is used in `top`,
    a bare 100% resolves against the containing-block height and overstates
    scanner height on narrow phones.
  */
  .shell {
    --scanner-w: min(500px, 100vw);
  }

  .stage[data-screen="landing"] .rock-fade {
    top: calc(120px + var(--scanner-h));
  }

  .stage[data-screen="result"] .scanner-col {
    padding-top: 330px;
  }

  .stage[data-screen="result"] .content {
    padding-top: calc(250px + var(--scanner-h));
    padding-bottom: 12px;
  }

  .stage[data-screen="result"] .rock-fade {
    top: calc(290px + var(--scanner-h));
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .display {
    margin: 5px 0 calc(var(--scanner-h) - 60px);
  }

  /* load / sliders / emotions: pad 85px in this block */
  .rock-fade {
    top: calc(85px + var(--scanner-h) - 40px);
  }

  .content {
    padding: calc(10px + var(--scanner-h)) 16px 24px;
  }

  .stage[data-screen="load"] .scanner-col,
  .stage[data-screen="sliders"] .scanner-col,
  .stage[data-screen="emotions"] .scanner-col {
    padding-top: 85px;
  }

  .stage[data-screen="load"] .screen-title {
    font-size: 36px;
    line-height: 36px;
    margin: 0 0 38px;
  }

  .stage[data-screen="load"] .progress {
    margin-bottom: 30px;
  }

  /* Phone: carousel spans content width; stage flexes, heads scale with stage */
  .carousel {
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
  }

  .carousel-stage {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 140px;
  }

  .carousel-stage img,
  .carousel-stage img.is-center {
    width: min(132px, 48%);
    height: min(150px, 100%);
  }

  .carousel-stage img.is-prev { transform: translate(calc(-50% - 55%), -50%) scale(0.68); }
  .carousel-stage img.is-next { transform: translate(calc(-50% + 55%), -50%) scale(0.68); }

  .arrow {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  .arrow svg {
    width: 16px;
    height: 16px;
  }

  /*
    Phone only: ≤1099 lid stays min(340px, …) which outruns the opaque scanner body
    once --scanner-w shrinks below ~500. Target ~10% narrower than visible body
    (opaque ≈ 0.776 of box → 0.70 of --scanner-w). Keeps Figma 340/500 tablet.
  */
  .lid {
    width: min(calc(var(--scanner-w) * 0.70), calc(100% - 48px));
  }

  .lid-crown { display: none; }
}

/*
  Short phone (≤619 × ≤850): overrides plain 619px landing stack.
  scanner-col pad 160px comes from the ≤1099 × ≤850 block.
*/
@media (max-width: 619px) and (max-height: 850px) {
  .shell {
    --scanner-w: min(420px, 100vw);
  }

  .stage[data-screen="landing"] .rock-fade {
    top: calc(120px + var(--scanner-h));
  }

  .stage[data-screen="landing"] .panel[data-screen="landing"] .display {
    margin: 9px 0 calc(var(--scanner-h) - 50px);
  }
}

@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%, -42%) scale(0.78); opacity: 0.7; }
  50% { transform: translate(-50%, -42%) scale(1.16); opacity: 1; }
}

@keyframes glow-pulse-narrow {
  0%, 100% { transform: translate(0, -42%) scale(0.78); opacity: 0.7; }
  50% { transform: translate(0, -42%) scale(1.16); opacity: 1; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes ray-y {
  0%, 100% { opacity: 0.2; transform: translateY(-10%); }
  50% { opacity: 1; transform: translateY(10%); }
}

@keyframes ray-x {
  0%, 100% { opacity: 0.2; transform: translateX(-8%); }
  50% { opacity: 1; transform: translateX(8%); }
}

@keyframes ring-y {
  0% { transform: translateY(0) scaleY(0.5); opacity: 0.3; }
  45% { transform: translateY(13906%) scaleY(0.5); opacity: 1; }
  100% { transform: translateY(20200%) scaleY(0.5); opacity: 0; }
}

@keyframes ring-x {
  0% { transform: translateX(0) scaleX(0.5); opacity: 0.3; }
  45% { transform: translateX(8350%) scaleX(0.5); opacity: 1; }
  100% { transform: translateX(15950%) scaleX(0.5); opacity: 0; }
}

@keyframes burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.15); }
}

@keyframes sweep-y {
  0% { top: -28%; opacity: 0; }
  18% { opacity: 1; }
  100% { top: 108%; opacity: 0.2; }
}

@keyframes sweep-x {
  0% { left: -28%; opacity: 0; }
  18% { opacity: 1; }
  100% { left: 108%; opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .beams span, .ring, .glow, .burst, .particles i, .chamber.is-swap .sweep { animation: none; }
  .beams span { opacity: 0.55; }
  .ring, .burst, .particles i { opacity: 0; }
  .panel, .slider-page, .device, .lid, .bar, .timeline-fill, .carousel-stage img,
  .scanner-col, .rock-fade, .content {
    transition: none;
  }

  body::before {
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .statuses p,
  .statuses p.is-on,
  .statuses p.is-done {
    transform: none;
    transition: none;
  }
}