/* ───────── $DOMINO · section layouts, fall/flow modes, responsive ───────── */

.tile__content {
  position: relative; z-index: 1; height: 100%;
  padding: clamp(26px, 4.4vh, 56px) clamp(24px, 4vw, 64px);
}
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(56px, 8vw, 130px); align-items: center; }
.half { min-width: 0; }

/* ───────── 1 · Hero ───────── */
.tile--hero .groove { display: none; } /* the strip divider carries the groove on the hero */
.pips--corner-a, .pips--corner-b { position: absolute; top: 6%; --s: clamp(14px, 2.2vh, 24px); --gap: clamp(6px, 1vh, 10px); opacity: .9; }
.pips--corner-a { left: 3.6%; }
.pips--corner-b { right: 3.6%; }
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 2.1vh, 22px); text-align: center;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.chip {
  display: inline-block; padding: 6px 13px; border-radius: 99px;
  border: 2px solid rgba(18, 16, 16, .75); font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .35);
}
.chip .dot { margin-right: 7px; }
.ember-word { font-style: normal; background: linear-gradient(95deg, #e8a21a, var(--ember-hot)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.hero__title {
  margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(54px, min(8.2vw, 12.4vh), 150px); line-height: .84; letter-spacing: .005em;
}
.hero__title .line { display: block; }
.hero__sub { margin: 0; max-width: 34em; font-size: clamp(15px, 2vh, 19px); color: #3b3129; }
.hero .ca { margin: clamp(6px, 1.2vh, 14px) 0; }
.hero__strip { display: grid; grid-template-columns: 1fr 1fr; width: min(640px, 100%); margin: clamp(4px, 1.5vh, 18px) 0 0; }
.hero__strip > div { padding: 4px 18px; }
.hero__strip > div + div { border-left: 3px solid rgba(18, 16, 16, .2); }
.hero__strip dt { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-bone); }
.hero__strip dd { margin: 2px 0 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(28px, 4.4vh, 44px); line-height: 1; }
.hero__strip small { display: block; font-family: var(--f-body); font-weight: 600; font-size: 12.5px; color: var(--muted-bone); margin-top: 3px; }
.hero__mascot {
  position: absolute; z-index: 2; right: 1.5%; bottom: 3%;
  width: clamp(200px, 25%, 400px); max-height: 66%; object-fit: contain; object-position: bottom;
  transform: rotate(5deg); transform-origin: 50% 100%;
  filter: drop-shadow(8px 10px 0 rgba(18, 16, 16, .12));
}
.scribble {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  font-family: var(--f-sketch); font-size: clamp(30px, 4.6vh, 50px); line-height: 1; color: var(--ink);
}
.scribble--hero { right: 5%; bottom: 62%; transform: rotate(-9deg); }
.hero > * { position: relative; z-index: 4; }

/* ───────── 2 · The pot ───────── */
.pot__big {
  margin: 0; font-family: var(--f-display); font-weight: 900; color: var(--chalk);
  font-size: clamp(76px, 15vh, 180px); line-height: .82; letter-spacing: -.005em;
}
.pot__unit { margin-left: .16em; font-size: .3em; letter-spacing: .02em; color: var(--ember); }
.pot__ember { margin: .5em 0 0; font-size: clamp(15px, 2vh, 19px); color: var(--muted-ink); }
.pot__ember span { color: var(--chalk); font-weight: 800; }
.pot__next {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 26px);
  margin: clamp(16px, 3.6vh, 38px) 0 clamp(12px, 2vh, 22px);
  padding: clamp(14px, 2vh, 22px); border-radius: 22px;
  border: 2px dashed rgba(246, 241, 231, .2);
}
.pot__next > div:last-child { flex: 1; min-width: 0; }
.pot__next .eyebrow { margin-bottom: 2px; }
.clock { position: relative; flex: none; width: clamp(84px, 12vh, 116px); aspect-ratio: 1; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock circle { fill: none; stroke-width: 9; }
.clock__track { stroke: rgba(246, 241, 231, .1); }
.clock__fill { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: var(--p, 0) 100; transition: stroke-dasharray 1s linear; }
.clock__pips { /* a mini domino that leans further as the hour runs out */
  position: absolute; left: 50%; top: 50%; width: 22%; height: 40%; margin: -20% 0 0 -11%;
  border-radius: 4px; background: var(--bone); box-shadow: 2px 0 0 var(--bone-edge);
  transform-origin: 100% 100%; transform: rotate(calc(var(--p, 0) * .75deg));
  transition: transform 1s linear;
}
.pot__count { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(44px, 7vh, 72px); line-height: .9; font-variant-numeric: tabular-nums; }
.pot__note { margin: 4px 0 8px; font-size: 13.5px; color: var(--muted-ink); }
.pot__note span { color: var(--chalk); font-weight: 700; }
.pot__last { margin: 0; font-size: 14px; color: var(--muted-ink); }
.pot__last b { color: var(--chalk); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vh, 14px); margin: 0; }
.stat {
  position: relative; min-width: 0;
  padding: clamp(12px, 1.8vh, 18px) clamp(12px, 1.2vw, 18px);
  border-radius: 16px; background: rgba(246, 241, 231, .045); border: 1.5px solid rgba(246, 241, 231, .12);
}
.stat dt { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-ink); }
.stat dd { margin: 6px 0 4px; font-family: var(--f-display); font-weight: 900; font-size: clamp(28px, 4.6vh, 46px); line-height: 1; white-space: nowrap; }
.stat dd sub { font-size: .5em; vertical-align: -.05em; }
.stat__sub { display: block; font-size: 12.5px; color: var(--muted-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__sub.up { color: #57d98f; }
.stat__sub.down { color: #ff7a66; }
.spark { position: absolute; right: 12px; top: 12px; width: 38%; height: 22px; overflow: visible; }
.spark path { fill: none; stroke: var(--ember); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curve { margin-top: clamp(14px, 2.6vh, 26px); }
.curve__head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; color: var(--muted-ink); }
.curve__head b { color: var(--chalk); }
.bar--dominoes { height: 24px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(246, 241, 231, .1) 0 11px, transparent 11px 16px); }
.bar--dominoes span { border-radius: 0; background: repeating-linear-gradient(90deg, var(--bone) 0 11px, transparent 11px 16px); }
.bar--ember { height: 8px; }
.live-note { margin: clamp(12px, 2.2vh, 22px) 0 0; font-size: 13px; color: var(--muted-ink); }
.live-note a { color: var(--chalk); text-underline-offset: 3px; white-space: nowrap; }

.peek { position: absolute; z-index: 3; pointer-events: none; }
.peek--pot { left: 50%; bottom: -5%; width: clamp(110px, 11%, 170px); transform: translateX(-50%) rotate(-4deg); }

/* ───────── 3 · The machine (chalkboard) ───────── */
.machine { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.4vh, 28px); }
.machine__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.board-title { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 6.4vh, 82px); line-height: .88; }
.board-sub { margin: .3em 0 0; font-family: var(--f-display); font-size: clamp(19px, 2.8vh, 30px); color: #d8ccbb; }
.chalk-box {
  margin: 0; padding: .45em .9em;
  border: 2.5px solid var(--ember);
  border-radius: 255px 16px 225px 16px / 16px 225px 16px 255px;
  font-family: var(--f-display); font-size: clamp(17px, 2.4vh, 26px); line-height: 1.08; text-align: center;
  color: var(--chalk); background: rgba(0, 0, 0, .14);
}
.chalk-box b { display: block; font-weight: 900; font-size: 1.22em; }
.chalk-box small { display: block; font-size: .78em; color: #cbbca9; }
.chalk-box--tag { flex: none; max-width: 300px; font-size: clamp(16px, 2.2vh, 23px); }
.chalk-box--small { padding: .2em 1em; }
.chalk-box--hot { background: var(--ember); color: var(--ink); border-color: var(--ember); transform: rotate(-1.5deg); }
.chalk-box--hot small { color: rgba(18, 16, 16, .72); }
/* not ".flow": that's the page-mode class on <html> */
.fee-flow { display: grid; grid-template-columns: 1fr auto 1fr minmax(110px, .55fr); align-items: center; gap: clamp(16px, 3vw, 48px); }
.flow__mascot { width: 100%; max-width: 220px; justify-self: end; transform: rotate(6deg); }
.js .is-active .flow__mascot[data-step] { transform: rotate(6deg); }
.flow__and {
  margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(44px, 8vh, 92px); line-height: 1;
  transform: rotate(-9deg); text-decoration: underline double var(--chalk); text-decoration-thickness: 3px; text-underline-offset: 10px;
}
.flow__col { display: flex; flex-direction: column; align-items: center; }
.chalk-arrow { width: 26px; height: clamp(26px, 4vh, 40px); fill: none; stroke: var(--ember); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.flow__fork { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; width: min(100%, 420px); }
.flow__fork .chalk-box { display: flex; flex-direction: column; justify-content: center; }
.chalk-arrow--fork { grid-column: 1 / -1; width: 100%; height: clamp(28px, 4.4vh, 46px); }
.lock-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 44px); }
.lock-chain li { position: relative; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 2.2vh, 23px); }
.lock-chain li + li::before {
  content: "→"; position: absolute; left: calc(-1 * clamp(26px, 3vw, 44px)); width: clamp(26px, 3vw, 44px); text-align: center;
  font-family: var(--f-display); font-weight: 900; font-size: 30px; color: var(--ember);
}
.board-foot {
  margin: 0; padding-top: clamp(10px, 1.6vh, 18px); border-top: 2.5px solid rgba(240, 122, 42, .75);
  font-family: var(--f-display); font-size: clamp(19px, 3vh, 32px); line-height: 1.1; text-align: center;
}

/* chalk steps appear in order once the board is in front of you */
.js [data-step] { opacity: 0; transform: translateY(12px) rotate(-2deg); transition: opacity .45s ease, transform .6s var(--ease-back); }
.js .is-active [data-step] { opacity: 1; transform: none; }
.js .is-active .chalk-box--hot[data-step] { transform: rotate(-1.5deg); }
.js .is-active [data-step="2"] { transition-delay: .18s; }
.js .is-active [data-step="3"] { transition-delay: .36s; }
.js .is-active [data-step="4"] { transition-delay: .6s; }
.js .is-active [data-step="5"] { transition-delay: .78s; }
.js .is-active [data-step="6"] { transition-delay: .96s; }
.js .is-active [data-step="7"] { transition-delay: 1.14s; }

/* ───────── 4 · Payout rules + calculator ───────── */
.pip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, 1.5vh, 16px); }
.pip-list li { position: relative; padding-left: 32px; font-size: clamp(15px, 2vh, 18.5px); color: #3b3129; }
.pip-list li::before {
  content: ""; position: absolute; left: 2px; top: .28em; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3a3532, var(--ink) 60%);
}
.pip-list b { color: var(--ink); }
.calc {
  position: relative; padding: clamp(18px, 3vh, 32px); border-radius: 26px;
  border: 3px solid var(--ink); background: #fbf6ec; box-shadow: 7px 8px 0 var(--ink);
}
.calc .eyebrow { color: var(--muted-bone); }
.calc__field { display: flex; align-items: baseline; gap: 6px; padding-bottom: 6px; border-bottom: 3px solid var(--ink); }
.calc__currency, .calc__field input { font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 8vh, 84px); line-height: 1; color: var(--ink); }
.calc__field input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; outline: none; }
.calc__field:focus-within { border-bottom-color: var(--ember); }
.calc__unit { flex: none; font-size: 13px; font-weight: 600; color: var(--muted-bone); }
.calc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.calc__chips button {
  padding: 7px 14px; border-radius: 99px; border: 2px solid var(--ink); background: transparent;
  font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; transition: background .2s, color .2s;
}
.calc__chips button:hover { background: rgba(18, 16, 16, .08); }
.calc__chips button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; margin: 0; }
.calc__out > div { padding: clamp(8px, 1.4vh, 14px) 0 0; margin-top: clamp(8px, 1.4vh, 14px); border-top: 2px dashed rgba(18, 16, 16, .22); }
.calc__out dt { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-bone); }
.calc__out dd { margin: 4px 0 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(24px, 3.6vh, 36px); line-height: 1; color: var(--ink); }
.calc__out dd small { display: block; margin-top: 3px; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: var(--muted-bone); }
.calc__day { grid-column: 1 / -1; }
.calc__day dd { font-size: clamp(48px, 9vh, 96px); line-height: .88; }
.calc__day dd small { margin-top: 10px; }
.calc__day dd span { background: linear-gradient(transparent 60%, var(--ember) 60% 92%, transparent 92%); }
.calc .fineprint { padding-right: clamp(70px, 8vw, 120px); }
.calc__sticker { position: absolute; right: -34px; bottom: -30px; width: clamp(110px, 12vw, 170px); transform: rotate(9deg); pointer-events: none; }

/* ───────── 5 · How to buy ───────── */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2.4vh, 24px); }
.step-list li { display: flex; gap: 18px; align-items: flex-start; }
.step-list .pips { --s: 9px; --gap: 4px; padding: 9px; border-radius: 12px; background: rgba(246, 241, 231, .06); border: 2px solid rgba(246, 241, 231, .22); }
.step-list b { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(24px, 3.4vh, 34px); line-height: 1; }
.step-list p { margin: 4px 0 0; font-size: clamp(14px, 1.8vh, 16px); color: var(--muted-ink); }
.step-list code { color: var(--chalk); }
.buy-card { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.6vh, 26px); }
.buy-card__art { margin: 0; width: 100%; aspect-ratio: 16 / 9; max-height: 38vh; border-radius: 22px; overflow: hidden; border: 3px solid #37302c; }
.buy-card__art img { width: 100%; height: 100%; object-fit: cover; }
.buy-card .ca { width: 100%; justify-content: space-between; }

/* ───────── 6 · Stickers ───────── */
.moods { display: flex; flex-direction: column; justify-content: center; }
.moods__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(8px, 2vh, 22px); }
.moods__head .title { margin: 0; }
.moods__head p { margin: 0; font-size: 16px; color: var(--muted-bone); }
.mood-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 1.6vh, 18px) clamp(8px, 1.4vw, 22px); }
.mood-grid a { display: flex; flex-direction: column; align-items: center; text-decoration: none; cursor: pointer; }
.mood-grid img { width: 100%; max-height: 25vh; aspect-ratio: 1; object-fit: contain; transform-origin: 50% 92%; transition: transform .4s var(--ease-back); }
.mood-grid a:hover img, .mood-grid a:focus-visible img { transform: rotate(-9deg) scale(1.07); }
.mood-grid li:nth-child(even) a:hover img { transform: rotate(9deg) scale(1.07); }
.mood-grid span {
  margin-top: -6px; padding: 3px 10px; border-radius: 8px; background: var(--ink); color: var(--bone);
  font-family: var(--f-display); font-size: clamp(16px, 2.2vh, 22px); line-height: 1.1; text-align: center; transform: rotate(-2deg);
}
.mood-grid li:nth-child(even) span { transform: rotate(2deg); }

/* ───────── 7 · Finale ───────── */
.tile--finale .tile__face { background: #0b0a09; }
.finale__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.tile--finale .tile__face::before { z-index: 1; opacity: 1; background: linear-gradient(90deg, rgba(11, 10, 9, .92) 0%, rgba(11, 10, 9, .75) 38%, transparent 62%); }
.finale { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.6vh, 26px); max-width: min(52%, 640px); }
.finale__title { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 11vh, 132px); line-height: .84; }
.finale__sub { margin: 0; font-size: clamp(16px, 2.1vh, 20px); color: var(--muted-ink); }
.finale .ca { max-width: 100%; }
.finale .cta-row { justify-content: flex-start; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.links a { font-weight: 600; font-size: 15px; color: var(--muted-ink); text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.links a:hover { color: var(--chalk); }

/* ───────── Cinematic mode: tiles stand in a line and fall toward you ───────── */
/* Scenes overlap each other (negative margins), so only the tiles themselves may take clicks. */
html.fx .scene { z-index: var(--z, 1); pointer-events: none; }
html.fx .stage { position: sticky; top: 0; height: 100vh; padding: var(--topbar-h) 0 10vh; pointer-events: none; }
html.fx .tile { height: calc(100vh - var(--topbar-h) - 12vh); pointer-events: auto; }
html.fx .stage.is-hit { animation: hit .38s ease-out; }
@keyframes hit {
  20% { transform: translate(-5px, 4px) rotate(-.25deg); }
  45% { transform: translate(4px, -3px) rotate(.2deg); }
  70% { transform: translate(-2px, 1px); }
}

/* first paint: the hero tile stands up off the table */
html.intro .tile--hero .tile__face { animation: stand-up 1.05s var(--ease-back) both; transform-origin: 50% 100%; }
html.intro .hero__mascot { animation: pop-in .8s .55s var(--ease-back) both; }
@keyframes stand-up { from { transform: perspective(1400px) rotateX(62deg) translateY(40px); opacity: 0; } 40% { opacity: 1; } }
@keyframes pop-in { from { transform: translateY(40%) rotate(-10deg) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.intro .tile--hero .tile__face, html.intro .hero__mascot { animation: none; }
}

/* ───────── Flow mode: normal scroll, each tile stands up as it arrives ───────── */
html:not(.fx) .scene { padding: 4vh 0; }
html:not(.fx) .scene:first-child { padding-top: calc(var(--topbar-h) + 2vh); }
html:not(.fx) .tile { min-height: min(84vh, 820px); }
html:not(.fx) .tile__face { min-height: inherit; display: flex; flex-direction: column; }
html:not(.fx) .tile__content { flex: 1; height: auto; }
html.flow .tile { opacity: 0; transform: perspective(1400px) rotateX(34deg) translateY(50px); transition: opacity .6s ease, transform 1s var(--ease-back); }
html.flow .tile.is-in { opacity: 1; transform: none; }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .topnav { display: none; }
  .topbar { justify-content: space-between; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .mood-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 900px) {
  :root { --tile-w: calc(100vw - 32px); --topbar-h: 58px; }
  .chain { display: none; }
  html:not(.fx) .tile { min-height: 0; }
  .tile__content { padding: 34px 20px 30px; }
  .groove { display: none; }
  .split { grid-template-columns: 1fr; }
  .split > .half + .half { position: relative; margin-top: 34px; padding-top: 38px; border-top: 3px solid var(--groove); }
  .split > .half + .half::before {
    content: ""; position: absolute; left: 50%; top: -9.5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe3a3, #c68a2f 55%, #6e4513); box-shadow: 0 0 0 2px var(--ink);
  }
  .pips--corner-a, .pips--corner-b { top: 18px; --s: 11px; --gap: 5px; }
  .pips--corner-a { left: 18px; } .pips--corner-b { right: 18px; }
  .hero { padding-top: 44px; }
  .hero__mascot { position: relative; order: -1; right: auto; bottom: auto; width: min(62vw, 300px); margin: -6px auto -10px; transform: rotate(4deg); }
  .tile--hero .tile__face { display: flex; flex-direction: column; }
  .scribble--hero { display: none; }
  .hero__title { font-size: clamp(46px, 13.5vw, 84px); }
  .hero .ca { width: 100%; justify-content: space-between; }
  .hero__strip > div { padding: 4px 10px; }
  .cta-row { width: 100%; }
  .cta-row .btn { flex: 1 1 220px; }
  .pot__big { font-size: clamp(60px, 19vw, 130px); }
  .peek--pot { display: none; }
  .machine__head { flex-direction: column; }
  .chalk-box--tag { max-width: none; }
  .fee-flow { grid-template-columns: 1fr; justify-items: center; }
  .flow__col { width: 100%; }
  .flow__mascot { display: none; }
  .lock-chain { grid-template-columns: 1fr; gap: 30px; }
  .lock-chain li + li::before { content: "↓"; left: 0; right: 0; top: -32px; width: auto; }
  .calc__sticker { right: -12px; bottom: -22px; width: 96px; }
  .mood-grid { grid-template-columns: repeat(3, 1fr); }
  .mood-grid img { max-height: none; }
  .tile--finale .tile__face { display: flex; flex-direction: column; }
  .finale__art { position: relative; height: auto; aspect-ratio: 16 / 10; object-position: 75% 50%; }
  .tile--finale .tile__face::before { background: linear-gradient(180deg, transparent 0 20%, rgba(11, 10, 9, .95) 42%); }
  .finale { max-width: none; margin-top: -18%; }
  .finale .cta-row { justify-content: stretch; }
}

@media (max-width: 520px) {
  .btn { font-size: 20px; min-height: 50px; padding: 0 18px; }
  .brand { font-size: 24px; }
  .chips .chip:nth-child(2) { display: none; }
  .ca { gap: 10px; padding-left: 14px; }
  .ca__value { font-size: 11px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat dd { font-size: 30px; }
  .spark { display: none; }
  .mood-grid { grid-template-columns: repeat(2, 1fr); }
  .pot__next { gap: 14px; }
  .clock { width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.flow .tile { transform: none; transition: opacity .3s ease; }
  .js [data-step] { transform: none; transition: opacity .3s ease; }
  .dot--live { animation: none; }
  .chain i { transition: none; }
}