*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
  background: var(--snow);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d-slow) var(--ease-io);
}
body.is-dark { background: var(--ink); }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
a:hover { opacity: .85; }

#app { max-width: 480px; margin: 0 auto; min-height: 100svh; position: relative; }

/* ── Screens ─────────────────────────────────────────── */
.screen {
  display: none;
  min-height: 100svh;
  padding: calc(var(--s-6) + env(safe-area-inset-top)) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
  flex-direction: column;
  gap: var(--s-5);
}
.screen.is-active { display: flex; animation: enter var(--d-slow) var(--ease-out) both; }
.screen.is-back.is-active { animation-name: enter-back; }
@keyframes enter { from { opacity: 0; transform: translateX(24px); } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-24px); } }
.screen--dark { color: var(--chalk); background: var(--ink); }
#form .screen { padding-top: calc(var(--s-9) + env(safe-area-inset-top)); }

/* ── Type ────────────────────────────────────────────── */
.logo {
  width: 150px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: url(logo.svg) no-repeat left center / contain;
          mask: url(logo.svg) no-repeat left center / contain;
}
.eyebrow {
  margin: 0; font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--slate);
}
.display {
  margin: var(--s-3) 0 0; font-weight: 500;
  font-size: clamp(44px, 13vw, var(--t-3xl)); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.editorial {
  margin: var(--s-4) 0 0;
  font-family: var(--font-editorial); font-style: italic; font-weight: 300;
  font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--mist);
}
.headline {
  margin: 0; font-weight: 500; font-size: var(--t-2xl);
  line-height: var(--lh-snug); letter-spacing: var(--ls-snug);
}
.lead { margin: calc(-1 * var(--s-3)) 0 0; color: var(--graphite); font-size: var(--t-md); }
.fine { margin: 0; font-size: var(--t-xs); line-height: var(--lh-normal); color: var(--slate); }
.fine--center { text-align: center; }

/* ── Welcome ─────────────────────────────────────────── */
.welcome { margin-top: auto; }
.welcome__foot { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-7); }
.teaser { list-style: none; margin: 0 0 var(--s-2); padding: 0; border-top: var(--bw-thin) solid var(--ink-soft); }
.teaser li {
  display: flex; gap: var(--s-4); padding: var(--s-3) 0;
  border-bottom: var(--bw-thin) solid var(--ink-soft);
  font-size: var(--t-sm); color: var(--mist);
  animation: enter var(--d-slow) var(--ease-out) both;
}
.teaser li:nth-child(2) { animation-delay: 80ms; }
.teaser li:nth-child(3) { animation-delay: 160ms; }
.teaser span { color: var(--graphite); font-variant-numeric: tabular-nums; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 56px; padding: 0 var(--s-5);
  border: var(--bw-thin) solid var(--ink); border-radius: var(--r-md);
  background: var(--ink); color: var(--chalk);
  font-weight: 500; font-size: var(--t-body); cursor: pointer;
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.btn:active { transform: scale(.985); }
.btn--light { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.btn .arrow { transition: transform var(--d-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.is-loading .arrow { animation: nudge 700ms var(--ease-io) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
#form .btn { margin-top: auto; }

/* ── Progress ────────────────────────────────────────── */
.progress {
  position: fixed; z-index: 5; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  display: flex; align-items: center; gap: var(--s-4);
  padding: calc(var(--s-5) + env(safe-area-inset-top)) var(--s-5) var(--s-4);
  background: var(--snow);
}
.progress__back { border: 0; background: none; padding: var(--s-1); font-size: var(--t-lg); cursor: pointer; line-height: 1; }
.progress__track { flex: 1; display: flex; gap: var(--s-1); }
.progress__track i { flex: 1; height: 2px; background: var(--fog); position: relative; overflow: hidden; }
.progress__track i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-slow) var(--ease-out);
}
.progress__track i.is-done::after { transform: scaleX(1); }
.progress__bag svg { width: 24px; height: 24px; display: block; fill: none; stroke: var(--ink); stroke-width: 1.25; }
.progress__bag .fill {
  fill: var(--ink); stroke: none;
  transform-origin: 50% 100%; transform-box: fill-box;
  transform: scaleY(var(--fill, 0)); transition: transform var(--d-slow) var(--ease-out);
}
.progress__bag.is-bump { animation: bump 400ms var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.25) rotate(-6deg); } }

/* ── Fields ──────────────────────────────────────────── */
.fields { display: flex; flex-direction: column; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend {
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--graphite); padding: 0; margin-bottom: var(--s-2);
}
.field > span { margin-bottom: 0; }
.field input {
  width: 100%; min-height: 48px; padding: var(--s-2) 0;
  border: 0; border-bottom: var(--bw-thin) solid var(--mist); border-radius: 0;
  background: transparent; font-size: var(--t-md); outline: none;
  transition: border-color var(--d-base) var(--ease-out);
}
.field input:focus { border-bottom-color: var(--ink); }
.field.is-invalid input { border-bottom-color: var(--negative); }
.field.is-invalid > span, .field.is-invalid legend { color: var(--negative); }
.field.is-invalid { animation: shake 360ms var(--ease-io); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* ── Chips ───────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4);
  border: var(--bw-thin) solid var(--mist); border-radius: var(--r-md);
  background: var(--snow); font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
}
.chip:hover { background: var(--chalk); }
.chip.is-on { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.chip.is-on { animation: pop 260ms var(--ease-out); }
@keyframes pop { 50% { transform: scale(1.06); } }
.chips--brands .chip { min-height: 52px; font-size: var(--t-body); }
.chip__tag {
  margin-left: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-sm);
  background: var(--bone); color: var(--graphite);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-label);
}
.chip.is-on .chip__tag { background: var(--graphite); color: var(--chalk); }
.chips.is-invalid .chip { border-color: var(--negative); }

/* ── Checkbox ────────────────────────────────────────── */
.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--graphite); cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: var(--bw-thin) solid var(--ink); border-radius: var(--r-sm); position: relative;
}
.check input:checked + .check__box { background: var(--ink); }
.check input:checked + .check__box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--chalk); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Reward ──────────────────────────────────────────── */
.screen--reward { align-items: stretch; background: var(--chalk); }
.counter {
  margin: calc(-1 * var(--s-3)) 0 0; font-weight: 500;
  font-size: var(--t-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug);
}
.counter__no { font-family: var(--font-editorial); font-style: italic; font-weight: 300; }
.counter b { font-weight: 300; font-variant-numeric: tabular-nums; }

.card-wrap { position: relative; aspect-ratio: 4 / 5; width: 100%; }
.voucher {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: var(--s-5); background: var(--snow); border: var(--bw-thin) solid var(--ink);
  text-align: center;
}
.voucher__top { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.voucher__prize { margin: 0; font-size: var(--t-xl); font-weight: 500; letter-spacing: var(--ls-snug); }
.voucher__qr { width: 58%; aspect-ratio: 1; }
.voucher__qr svg, .wifi__qr svg { width: 100%; height: 100%; display: block; }
.voucher__code { margin: 0; font-size: var(--t-lg); font-weight: 500; letter-spacing: var(--ls-label); font-variant-numeric: tabular-nums; }
.voucher__hint { margin: 0; font-size: var(--t-xs); color: var(--slate); }
.voucher__stamp {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  margin: 0; padding: var(--s-2) var(--s-4); border: var(--bw-thick) solid var(--negative);
  color: var(--negative); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
  background: rgba(255,255,255,.9);
}
/* Golden ticket: brushed gold with a light sweep once revealed */
.voucher.is-golden {
  --gold-deep: #7A5A12; --gold: #C9A043; --gold-light: #F3E3AE;
  overflow: hidden; color: #2B1F05; border-color: var(--gold-deep);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 22%, var(--gold-light) 45%, var(--gold) 62%, #A77F25 80%, var(--gold-deep) 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.18), inset 0 0 0 7px rgba(122,90,18,.5);
}
.voucher.is-golden::after {
  content: ""; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.65) 50%, transparent 58%);
  transform: translateX(-60%); opacity: 0;
}
.card-wrap.is-revealed .voucher.is-golden::after { animation: gold-sweep 3.2s var(--ease-io) .2s infinite; }
@keyframes gold-sweep { 0% { transform: translateX(-60%); opacity: 1; } 55%, 100% { transform: translateX(60%); opacity: 1; } }
.card-wrap.is-revealed:has(.is-golden) { animation: gold-glow 1.6s var(--ease-out) both; }
@keyframes gold-glow {
  0% { box-shadow: 0 0 0 0 rgba(201,160,67,.0); transform: scale(1); }
  30% { box-shadow: 0 0 48px 12px rgba(201,160,67,.55); transform: scale(1.03); }
  100% { box-shadow: 0 0 28px 4px rgba(201,160,67,.35); transform: scale(1); }
}
.voucher.is-golden .voucher__qr { background: var(--snow); padding: var(--s-2); box-shadow: 0 2px 10px rgba(74,52,6,.25); }
.voucher.is-golden .voucher__prize {
  font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: var(--t-2xl);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.voucher.is-golden .eyebrow, .voucher.is-golden .voucher__hint { color: #4A3406; }

.scratch { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity var(--d-slow) var(--ease-out); }
.scratch.is-done { opacity: 0; pointer-events: none; }
.scratch-hint {
  position: absolute; left: 0; right: 0; bottom: var(--s-5); margin: 0; text-align: center; pointer-events: none;
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--slate);
  animation: breathe 1.8s var(--ease-io) infinite;
}
@keyframes breathe { 50% { opacity: .35; } }
.scratch.is-done + .scratch-hint { display: none; }

.wifi { padding: var(--s-5); background: var(--snow); border: var(--bw-thin) solid var(--fog); animation: enter var(--d-slow) var(--ease-out) both; }
.wifi dl { margin: var(--s-3) 0 0; }
.wifi dl div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--bw-thin) solid var(--fog); }
.wifi dt { font-size: var(--t-sm); color: var(--graphite); }
.wifi dd { margin: 0; font-weight: 500; font-size: var(--t-md); display: flex; align-items: center; gap: var(--s-3); word-break: break-all; text-align: right; }
.copy {
  border: var(--bw-thin) solid var(--ink); border-radius: var(--r-md); background: none;
  padding: var(--s-1) var(--s-3); font-size: var(--t-xs); font-weight: 500; cursor: pointer; flex: none;
}
.copy:hover { background: var(--ink); color: var(--chalk); }
.wifi__join { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-4); align-items: center; margin-top: var(--s-3); }
.wifi__qr img { width: 100%; display: block; -webkit-touch-callout: default; }
.wifi__join p { margin: 0; font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--graphite); }
.wifi__join b { font-weight: 500; color: var(--ink); }

/* ── Showroom picker ─────────────────────────────────── */
.pick { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-6); }

/* ── Toast + confetti ────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); z-index: 20;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: var(--s-3) var(--s-5); background: var(--ink); color: var(--chalk);
  font-size: var(--t-sm); border-radius: var(--r-md); max-width: calc(100% - 2 * var(--s-5));
  transition: all var(--d-base) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}