/* Jigwalk, direction C: "Cinematic city". Dragon yellow, committed. */
@font-face { font-family: "Archivo"; src: url(fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-vietnamese.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Atkinson Next"; src: url(fonts/atkinson-next-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Next"; src: url(fonts/atkinson-next-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Dragon yellow: sampled from the bridge's scales at noon. */
  --sun: oklch(0.87 0.17 95);
  --sun-hi: oklch(0.93 0.13 97);
  --sun-deep: oklch(0.74 0.15 84);
  /* Neutrals tinted toward the yellow. */
  --ink: oklch(0.21 0.03 95);
  --ink-2: oklch(0.29 0.035 95);
  --ink-soft: oklch(0.4 0.035 95);
  --paper: oklch(0.975 0.014 95);
  --paper-2: oklch(0.94 0.03 95);
  --paper-dim: oklch(0.82 0.03 95);
  --flame: oklch(0.5 0.19 32);

  --display: "Archivo", "Arial Narrow", sans-serif;
  --text: "Atkinson Next", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: 16px;
}
@media (min-width: 700px) { :root { --gutter: clamp(24px, 4.4vw, 72px); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.55 var(--text); font-kerning: normal; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .free :focus-visible, .band :focus-visible { outline-color: var(--sun); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--sun); padding: 12px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.nb { white-space: nowrap; }

/* Display type: Vietnamese shopfront signboard, compressed black caps. */
h1, h2, .display { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; line-height: 0.86; letter-spacing: 0; }
h2 { font-size: clamp(3rem, 12.5vw, 7.5rem); }
h3 { font-family: var(--text); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.kicker { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.kicker.on-dark { color: var(--sun); }
.sun { color: var(--sun); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px; border-radius: 12px; border: 0;
  font: 700 1.0625rem/1.1 var(--text); text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--sun); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-text { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 8px; }
.btn-sm { min-height: 52px; padding: 0 18px; }
@media (hover: hover) {
  .btn-ink:hover { background: var(--ink-2); }
  .btn-sun:hover { background: var(--sun-hi); }
  .btn-line:hover { background: var(--paper-2); }
}
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ HERO */
.hero { position: relative; background: var(--sun); }
.hero { height: calc(100svh + var(--pin-run, 150svh)); }
.hero-pin { position: sticky; top: 0; height: 100svh; min-height: 520px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.nav { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); pointer-events: none; }
.nav a { pointer-events: auto; }
.mark { font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 1.75rem; line-height: 1; letter-spacing: 0.01em;
  background: var(--sun); color: var(--ink); padding: 8px 12px 6px; border-radius: 8px; text-decoration: none; box-shadow: 0 0 0 2px var(--ink); }
.nav-play { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 0.9375rem; }
.nav-play b { color: var(--sun); margin-left: 4px; }

.stage { position: relative; background: var(--ink); isolation: isolate; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 2; transition: opacity 500ms ease; }
.stage:not(.live) .pieces { visibility: hidden; }
.stage.live .stage-photo { opacity: 0; transition-duration: 0ms; }
.stage.live.whole .stage-photo { opacity: 1; z-index: 3; transition-duration: 700ms; }
.seams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: var(--sun); stroke-width: 1.5; stroke-opacity: 0.4; stroke-dasharray: 3 5; }
.stage.cutting .seams { z-index: 3; stroke: var(--paper); stroke-opacity: 0.95; stroke-dasharray: none; stroke-width: 2; animation: cut 520ms var(--ease-out) both; }
@keyframes cut { from { stroke-opacity: 0; } }
.stage.still .seams { z-index: 3; stroke: var(--paper); stroke-opacity: 0.6; stroke-dasharray: none; }
.pieces { position: absolute; inset: 0; z-index: 2; }
.pc { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
.pc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc .sh { opacity: 0; }
/* The signature: colour comes up. Loose pieces wait as black-and-white prints (baked in site.js); each one develops into the full golden
   grade as it lands (site.js fades .col over the last fifth of its flight). Film grain sits over the frame while pieces
   are loose, and an anamorphic flare crosses the picture when it is whole. */
@property --fx { syntax: "<number>"; inherits: false; initial-value: 0; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px;
  opacity: calc(var(--loose, 0) * 0.55); transition: opacity 500ms ease; animation: grain 480ms steps(1) infinite; }
@keyframes grain { 25% { background-position: -37px 61px; } 50% { background-position: 83px -29px; } 75% { background-position: -71px -97px; } }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  --x: calc(-15% + 130% * var(--fx)); --y: calc(26% + 22% * var(--fx));
  background:
    radial-gradient(circle at var(--x) var(--y), oklch(1 0.02 95) 0, oklch(0.96 0.09 92 / 0.9) 1.5%, oklch(0.87 0.17 95 / 0.35) 8%, transparent 22%),
    radial-gradient(ellipse 130% 0.7% at var(--x) var(--y), oklch(1 0.03 95), oklch(0.93 0.13 97 / 0.8) 45%, transparent),
    radial-gradient(ellipse 110% 4% at var(--x) var(--y), oklch(0.87 0.17 95 / 0.5), transparent 70%),
    linear-gradient(100deg, transparent 30%, oklch(0.93 0.13 97 / 0.18) calc(20% + 60% * var(--fx)), transparent 90%); }
.stage.whole::before { animation: flare 1600ms cubic-bezier(0.45, 0, 0.3, 1) 250ms both; }
@keyframes flare { 0% { --fx: 0; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { --fx: 1; opacity: 0; } }
.count { position: absolute; z-index: 5; left: var(--gutter); bottom: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; font: 700 0.9375rem/1 var(--text); cursor: pointer;
  box-shadow: 0 0 0 2px var(--sun); transition: transform 160ms var(--ease-out), opacity 300ms ease; }
.count:active { transform: scale(0.97); }
.count-n { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 8px 10px 7px; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.count.bump .count-n { animation: bump 260ms var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* Mobile: the pinned screen is the puzzle plus the headline and one button. Nothing scrolls over it. */
.slab { container-type: inline-size; background: var(--sun); padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.slab .kicker, .slab .lede { display: none; }
h1 { font-size: 13.9cqi; line-height: 0.88; margin-bottom: 12px; }
h1 .l1 { display: block; white-space: nowrap; }
.lede { max-width: 38ch; font-size: 1.0625rem; line-height: 1.5; margin-bottom: 16px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.ctas .btn { flex: 1 1 100%; }
.ctas .link { display: none; }
.hero-more { background: var(--sun); padding: 30px var(--gutter) 40px; box-shadow: 0 -2px 0 var(--ink) inset; }
.hero-more .kicker { margin-bottom: 12px; }
.lede-m { max-width: 38ch; font-size: 1.1875rem; line-height: 1.5; margin-bottom: 8px; }

@media (min-width: 900px) {
  .hero-pin { grid-template-rows: 1fr; grid-template-columns: minmax(440px, 44%) 1fr; }
  .stage { grid-column: 2; grid-row: 1; }
  .slab { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gutter) 56px; }
  .slab .kicker, .slab .lede { display: block; }
  .hero-more { display: none; }
  .hero { height: calc(100svh + var(--pin-run, 110svh)); }
  h1 { font-size: clamp(4.5rem, 28.5cqi, 10rem); line-height: 0.86; margin-bottom: 28px; }
  h1 .l1 { display: inline; white-space: normal; }
  .ctas .link { display: inline-flex; }
  .lede { font-size: 1.1875rem; margin-bottom: 26px; }
  .ctas .btn { flex: 0 0 auto; }
  .nav { right: auto; width: 100%; }
  .count { left: auto; right: var(--gutter); bottom: 22px; }
}

/* ------------------------------------------------------------------ BANDS (full-bleed photos) */
.band { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.band > img { width: 100%; height: 100%; object-fit: cover; }
.band-copy { position: absolute; inset: auto 0 0 0; padding: 120px var(--gutter) 36px; color: var(--paper);
  background: linear-gradient(to top, oklch(0.17 0.03 95 / 0.94) 0%, oklch(0.17 0.03 95 / 0.8) 38%, oklch(0.17 0.03 95 / 0) 100%); }
.band-copy h2 { font-size: clamp(3.5rem, 17vw, 10rem); max-width: 12ch; }

/* ------------------------------------------------------------------ HOW */
.band-street { height: 92svh; min-height: 560px; }
.band-street > img { object-position: 50% 45%; }
.beats { list-style: none; margin: 0; padding: 56px var(--gutter) 80px; display: grid; gap: 0; background: var(--paper); counter-reset: none; }
.beats li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 22px 0 24px; border-top: 2px solid var(--ink); }
.beats li:last-child { border-bottom: 2px solid var(--ink); }
.beats p { color: var(--ink-soft); max-width: 44ch; margin-top: 6px; }
.beat-n { width: 72px; height: 72px; display: grid; place-items: center; margin-top: -8px; background: var(--sun);
  font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 2.5rem; line-height: 1; padding-top: 2px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 900px) {
  .band-street { height: 96vh; }
  .band-street > img { object-position: 50% 58%; }
  .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); padding-top: 96px; padding-bottom: 120px; }
  .beats li:nth-last-child(2) { border-bottom: 2px solid var(--ink); }
  .beats li { padding: 30px 0 34px; grid-template-columns: 92px 1fr; }
  .beat-n { width: 84px; height: 84px; font-size: 2.9rem; }
  .beats h3 { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ DEMO */
.demo { background: var(--sun); padding: 72px var(--gutter) 88px; display: grid; gap: 36px; }
.demo-intro h2 { margin-bottom: 20px; }
.demo-intro p { max-width: 52ch; }
.demo-note { margin-top: 14px; font-weight: 700; }
.ticket { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); padding: 18px 18px 20px; max-width: 560px; width: 100%; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px dashed var(--ink); }
.ticket-stop { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; }
.ticket-stop b { font-weight: 900; }
.ticket-stop i { font-style: normal; color: var(--ink-soft); }
.ladder { display: flex; gap: 5px; }
.ladder b { width: 20px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color 200ms ease; }
.ladder b.on { background: var(--ink); }
.clues { list-style: none; margin: 0; padding: 4px 0 0; }
.clues li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--paper-dim); }
.clues li::before { content: attr(data-n); font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 1.5rem; line-height: 1.05; }
.clues li p { font-size: 1.0625rem; }
.clues li.old p, .clues li.spare p { color: var(--ink-soft); font-size: 1rem; }
.clues li.old::before, .clues li.spare::before { color: var(--ink-soft); }
.clues li.new { animation: rise 420ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.odds { margin: 14px 0 16px; }
.odds-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9375rem; }
.odds-row strong { font-weight: 700; }
.odds-track { height: 12px; margin: 8px 0 10px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
.odds-fill { height: 100%; background: var(--ink); transform-origin: left; transition: transform 420ms var(--ease-out); }
.par { display: inline-block; margin-left: 6px; background: var(--ink); color: var(--sun); border-radius: 6px; padding: 3px 7px 2px; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.guess { display: flex; gap: 8px; }
.guess input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font: 400 1.0625rem var(--text); }
.guess input::placeholder { color: var(--ink-soft); opacity: 1; }
.guess-msg { min-height: 1.5em; margin: 10px 0 6px; font-weight: 700; font-size: 1rem; }
.guess-msg.bad { color: var(--flame); }
.clue-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clue-actions .btn-line { flex: 1 1 auto; }
.answer { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--ink); animation: rise 500ms var(--ease-out) both; }
.answer img { width: 100%; border-radius: 10px; margin-bottom: 14px; aspect-ratio: 640 / 485; object-fit: cover; }
.answer-k { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.answer-name { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.25rem; line-height: 0.95; margin: 4px 0 2px; }
.answer-vi { font-family: var(--display); font-stretch: 100%; font-weight: 600; font-size: 1.0625rem; margin-bottom: 10px; }
.answer-fact { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(40px, 6vw, 120px); align-items: start; padding-top: 120px; padding-bottom: 130px; }
  .demo-intro { position: sticky; top: 96px; }
  .ticket { padding: 24px 26px 26px; }
}

/* ------------------------------------------------------------------ WALK */
/* Film: a dark house, the screen framed in dragon yellow. */
.film { background: var(--ink); color: var(--paper); padding: 72px var(--gutter) 88px; display: grid; gap: 36px; }
.film-copy h2 { margin-bottom: 20px; font-size: clamp(3rem, 12.5vw, 5.6rem); }
.film-copy p:not(.kicker) { max-width: 44ch; color: var(--paper-2); }
.film-frame { position: relative; width: min(100%, 78svh * 9 / 16); margin: 0 auto; background: #000; box-shadow: 0 0 0 3px var(--sun), 0 30px 60px -30px #000; border-radius: 4px; overflow: hidden; }
.film-frame.wide { width: 100%; }
.film-frame video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.film-frame.wide video { aspect-ratio: 16 / 9; }
.film-play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sun); color: var(--ink); box-shadow: 0 0 0 6px oklch(0.21 0.03 95 / 0.5); transition: transform 160ms var(--ease-out); }
.film-play:hover { transform: scale(1.05); }
.film-play:active { transform: scale(0.96); }
.film-play svg { width: 38px; height: 38px; margin-left: 5px; fill: currentColor; }
.film :focus-visible { outline-color: var(--sun); }
.film-frame.playing .film-play { display: none; }
@media (min-width: 900px) {
  .film { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; padding: 112px var(--gutter) 128px; }
}
.walk { background: var(--paper); }
.band-river { height: 64svh; min-height: 420px; }
.band-river > img { object-position: 50% 60%; }
.walk-grid { display: grid; gap: 36px; padding: 56px var(--gutter) 88px; }
.band-top { position: absolute; inset: 0 0 auto 0; padding: 26px var(--gutter) 90px; color: var(--ink);
  background: linear-gradient(to bottom, oklch(0.975 0.014 95 / 0.72) 0%, oklch(0.975 0.014 95 / 0.45) 55%, oklch(0.975 0.014 95 / 0) 100%); }
.band-top h2 { font-size: clamp(3rem, 13vw, 9rem); max-width: 14ch; }
.hl { box-shadow: inset 0 -0.34em 0 var(--sun); }
.walk-lede { max-width: 50ch; font-size: 1.1875rem; }
.walk-facts { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.walk-facts div { padding: 14px 0 16px; border-bottom: 2px solid var(--ink); }
.walk-facts div:nth-child(odd) { padding-right: 14px; border-right: 2px solid var(--ink); }
.walk-facts div:nth-child(even) { padding-left: 14px; }
.walk-facts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.walk-facts dd { margin: 4px 0 0; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.5rem; line-height: 1.05; }
.walk-note { margin-top: 18px; font-size: 1rem; }
.fog { position: relative; margin: 0; }
.fog-frame { position: relative; aspect-ratio: 2100 / 2070; border: 2.5px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--sun); }
.fog svg, .fog canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fog-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.9375rem; line-height: 1.4; }
.fog-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 5px var(--sun), 0 0 0 2px var(--ink); }
.coffee { margin: 0; display: grid; grid-template-columns: 1fr 58%; align-items: end; gap: 14px; }
.coffee img { grid-column: 2; grid-row: 1; border-radius: 14px; aspect-ratio: 3 / 4; object-fit: cover; }
.coffee figcaption { grid-column: 1; grid-row: 1; font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.5rem; line-height: 0.9; text-align: right; }
.map-lbl { font-family: var(--display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-soft); }
.map-start { font-family: var(--display); font-stretch: 75%; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.fog .reveal { opacity: 0; transition: opacity 500ms ease 700ms; }
.fog.open .reveal { opacity: 1; }
@media (min-width: 900px) {
  .band-river { height: 84vh; }
  .band-river > img { object-position: 50% 8%; }
  .band-top { padding-top: 56px; }
  .band-top h2 { font-size: clamp(4rem, 8.4vw, 8.5rem); max-width: none; }
  .walk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 112px); row-gap: 40px; padding-top: 110px; padding-bottom: 130px; }
  .fog { grid-column: 2; grid-row: 1 / span 2; }
  .coffee { grid-column: 1; grid-row: 2; align-self: end; grid-template-columns: 1fr 64%; }
}

/* ------------------------------------------------------------------ MODES */
.modes { background: var(--sun); padding: 72px var(--gutter) 84px; }
.modes-grid { display: grid; gap: 36px; }
.modes-copy h2 { margin-bottom: 24px; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; box-shadow: inset 0 0 0 2.5px var(--ink); background: var(--paper); margin-bottom: 22px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-width: 92px; min-height: 48px; padding: 0 16px; border-radius: 10px; font-weight: 700; transition: background-color 160ms ease, color 160ms ease; }
.seg input:checked + span { background: var(--ink); color: var(--sun); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.mode-text h3 { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.25rem; line-height: 1; margin-bottom: 6px; }
.mode-text p { max-width: 44ch; min-height: 4.65em; }
.mode-help { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.mode-help li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--ink); font-weight: 700; transition: opacity 200ms ease; }
.mh-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); position: relative; }
.mh-mark::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 12px; border: solid var(--sun); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.mode-help li.off { opacity: 0.62; }
.mode-help li.off span:not(.mh-mark) { text-decoration: line-through; text-decoration-thickness: 2px; }
.mode-help li.off .mh-mark { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ink); }
.mode-help li.off .mh-mark::after { left: 5px; top: 11px; width: 16px; height: 0; border-width: 0 0 2.5px 0; border-color: var(--ink); transform: none; }
.radar { margin: 0; }
.radar svg { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 2.5px var(--ink), 6px 6px 0 var(--ink); }
.radar figcaption { margin-top: 18px; font-weight: 700; }
.rg-pill { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 16px; letter-spacing: 0.1em; }
.rg-q { font-family: var(--display); font-weight: 900; }
#region { transition: transform 600ms var(--ease-out); }
#arrow { transition: transform 500ms var(--ease-out), opacity 250ms ease; }
#dist { transition: opacity 250ms ease; }
@media (min-width: 900px) {
  .modes { padding: 120px var(--gutter) 130px; }
  .modes-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
}

/* ------------------------------------------------------------------ WAYS TO PLAY: credits roll + film strip */
.ways { background: var(--ink); color: var(--paper); padding: 72px var(--gutter) 88px; }
.ways-grid { display: grid; gap: 44px; max-width: 1400px; margin: 0 auto; }
.ways-head h2 { margin-bottom: 22px; max-width: 7ch; }
.ways-head > p:not(.kicker) { max-width: 46ch; color: var(--paper-dim); }
.credits { list-style: none; margin: 0; padding: 0; border-top: 2px solid oklch(0.975 0.014 95 / 0.25); }
.credits li { padding: 24px 0 26px; border-bottom: 2px solid oklch(0.975 0.014 95 / 0.25); }
.credits .role { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); }
.credits h3 { font-stretch: 62%; font-weight: 850; font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 0.9; margin: 6px 0 12px; color: var(--paper); }
.credits li > p:not(.role) { max-width: 46ch; color: var(--paper-dim); font-size: 1.0625rem; }
.lifelines { margin: 18px 0 0; display: grid; gap: 10px; }
.lifelines div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: baseline; }
.lifelines dt { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sun); }
.lifelines dd { margin: 0; color: var(--paper-dim); font-size: 1rem; line-height: 1.4; }
.strip { --hole: oklch(0.975 0.014 95 / 0.85); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 30px 14px; background: #0c0b07; border-radius: 6px; width: 100%; max-width: 560px; margin: 0 auto;
  background-image: repeating-linear-gradient(90deg, var(--hole) 0 12px, transparent 12px 26px), repeating-linear-gradient(90deg, var(--hole) 0 12px, transparent 12px 26px);
  background-size: 100% 10px, 100% 10px; background-position: 8px 10px, 8px calc(100% - 10px); background-repeat: no-repeat; }
.frame { margin: 0; }
.frame img { width: 100%; height: auto; border-radius: 4px; }
.frame figcaption { margin-top: 12px; font-size: 0.9375rem; line-height: 1.35; color: var(--paper-dim); }
.frame figcaption b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.billing { font-weight: 700; max-width: 52ch; margin: 28px auto 0; }
.ways-side .billing { max-width: 560px; }
.billing span { display: block; margin-bottom: 4px; font-family: var(--display); font-stretch: 100%; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); }
@media (min-width: 900px) {
  .ways { padding: 120px var(--gutter) 130px; }
  .ways-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 7vw, 130px); row-gap: 56px; align-items: start; }
  .ways-head { grid-column: 1; grid-row: 1; }
  .credits { grid-column: 1; grid-row: 2; }
  .ways-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 32px; }
  .credits li { display: grid; grid-template-columns: 11rem 1fr; column-gap: 28px; }
  .credits li > * { grid-column: 2; }
  .credits .role { grid-column: 1; grid-row: 1 / span 2; padding-top: 14px; text-align: right; }
}

/* ------------------------------------------------------------------ SCORING */
.score { background: var(--paper); padding: 72px var(--gutter) 88px; }
.score-grid { display: grid; gap: 40px; }
.score-copy h2 { margin-bottom: 20px; }
.score-copy > p { max-width: 52ch; color: var(--ink-soft); }
.keys { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-weight: 700; font-size: 1rem; }
.keys li { display: flex; align-items: center; gap: 10px; }
.k { flex: none; width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 0.9375rem; }
.k-under, .c-under { background: var(--sun); color: var(--ink); }
.k-par, .c-par { background: oklch(0.72 0.14 150); color: var(--ink); }
.k-p1, .c-p1 { background: oklch(0.72 0.11 240); color: var(--ink); }
.k-p2, .c-p2 { background: oklch(0.5 0.15 310); color: var(--paper); }
.k-p3, .c-p3 { background: oklch(0.74 0.15 55); color: var(--ink); }
.k-walk, .c-walk { background: oklch(0.5 0.19 30); color: var(--paper); }
.k-help, .c-help { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.share { display: grid; justify-items: center; gap: 12px; }
.share-card { width: min(100%, 360px); background: var(--ink); color: var(--paper); border-radius: 18px; padding: 18px; box-shadow: 6px 6px 0 var(--sun), 6px 6px 0 2.5px var(--ink); }
.share-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.share-mark { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 1.75rem; letter-spacing: 0.01em; color: var(--sun); }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.grid i { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 0.9375rem; }
.grid i.pre { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.grid i.pop { animation: pop 260ms var(--ease-out) both; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
.share-score { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.share-score .big { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 3.5rem; line-height: 0.8; font-variant-numeric: tabular-nums; min-width: 1.6ch; }
.share-of { font-size: 0.875rem; line-height: 1.25; color: var(--paper-dim); }
.par-tag { margin-left: auto; background: var(--sun); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 0.9375rem; opacity: 0; transition: opacity 300ms ease; }
.par-tag.on { opacity: 1; }
.share-foot { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--paper-dim); border-top: 1.5px dashed var(--ink-soft); padding-top: 10px; }
.share-cap { font-size: 0.9375rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  .score { padding: 120px var(--gutter) 130px; }
  .score-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
  .keys { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 26px; }
}

/* ------------------------------------------------------------------ GROUPS */
.groups { background: var(--sun); padding: 72px var(--gutter) 84px; overflow: hidden; }
.groups-grid { display: grid; gap: 40px; }
.groups-copy h2 { margin-bottom: 20px; }
.groups-copy p { max-width: 48ch; }
.groups-copy p + p { margin-top: 12px; }
.phones { display: flex; align-items: center; justify-content: center; gap: 10px; }
.phone { position: relative; width: min(42vw, 190px); padding: 16px 12px 14px; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 var(--ink); }
.phone[data-p="1"] { transform: translateY(26px); }
.phone-who { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; margin-bottom: 10px; }
.phone .mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; border-radius: 6px; overflow: hidden; }
.phone .mini i { aspect-ratio: 1; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-dim); }
.phone .mini i.got { background-image: var(--poster); background-size: 500% 500%; box-shadow: none; }
.phone .mini i.flash { animation: flash 700ms var(--ease-out); }
@keyframes flash { 0% { filter: brightness(1.8); transform: scale(1.25); } }
.phone-toast { position: absolute; left: 50%; top: 46%; translate: -50% 0; background: var(--ink); color: var(--sun); font-weight: 700; font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.phone-toast.show { opacity: 1; transform: none; }
.phone-team { margin-top: 10px; font-size: 0.8125rem; font-weight: 700; }
.phone-team b { font-family: var(--display); font-stretch: 75%; font-size: 1.25rem; }
.sync { display: flex; gap: 4px; }
.sync span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.25; }
.sync.go span { animation: dot 520ms ease both; }
.sync.go span:nth-child(2) { animation-delay: 120ms; } .sync.go span:nth-child(3) { animation-delay: 240ms; }
@keyframes dot { 50% { opacity: 1; transform: scale(1.4); } }
@media (min-width: 900px) {
  .groups { padding: 120px var(--gutter) 150px; }
  .groups-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
  .groups-copy { order: 2; }
  .phones { gap: 22px; }
  .phone { width: 220px; }
}

/* ------------------------------------------------------------------ REWARD */
.reward { background: var(--paper-2); padding: 72px var(--gutter) 88px; }
.reward-grid { display: grid; gap: 40px; }
.board-demo { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; border-radius: 6px; box-shadow: 0 0 0 2.5px var(--ink), 6px 6px 0 var(--ink); touch-action: none; }
.board-demo img { width: 100%; height: 100%; border-radius: 6px; }
.bd-seams { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-seams path { fill: none; stroke: oklch(0.99 0.01 95 / 0.5); stroke-width: 2; }
.bd-seams .hole { fill: var(--paper-2); stroke: var(--ink); stroke-width: 4; stroke-dasharray: 10 8; transition: opacity 400ms ease; }
.board-demo.done .hole { opacity: 0; }
.board-demo.done .bd-seams path { stroke-opacity: 0; transition: stroke-opacity 600ms ease 200ms; }
.bd-piece { position: absolute; width: 32.4%; height: 32.4%; cursor: grab; touch-action: none;
  filter: grayscale(1) sepia(0.28) contrast(1.25) brightness(0.9) drop-shadow(0 10px 12px oklch(0.21 0.03 95 / 0.45)); transition: filter 300ms ease; }
.bd-piece.held { cursor: grabbing; }
/* like the hero: the loose piece is a black-and-white print and develops as it lands */
.board-demo.done .bd-piece { filter: grayscale(0) sepia(0) contrast(1) brightness(1) drop-shadow(0 0 0 transparent); cursor: default; }
.bd-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin-top: 22px; font-weight: 700; text-align: center; }
.reward-copy h2 { margin-bottom: 22px; }
.rewards { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: r; border-top: 2px solid var(--ink); }
.rewards li { counter-increment: r; display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; border-bottom: 2px solid var(--ink); max-width: 52ch; }
.rewards li::before { content: counter(r); font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 2rem; line-height: 1; }
.reward-where { font-weight: 700; }
@media (min-width: 900px) {
  .reward { padding: 120px var(--gutter) 130px; }
  .reward-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
}

/* ------------------------------------------------------------------ FAQ */
.faq { background: var(--paper); padding: 72px var(--gutter) 88px; }
.faq-grid { display: grid; gap: 28px; }
.qs { border-top: 2px solid var(--ink); }
.qs details { border-bottom: 2px solid var(--ink); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; font-weight: 700; font-size: 1.1875rem; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; transition: transform 200ms var(--ease-out); }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs details p { max-width: 62ch; padding: 0 0 18px; color: var(--ink-soft); }
@media (min-width: 900px) {
  .faq { padding: 120px var(--gutter) 130px; }
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 130px); align-items: start; }
  .faq h2 { position: sticky; top: 40px; }
}

/* ------------------------------------------------------------------ FINAL */
.final .band-beach { height: 92svh; min-height: 560px; }
.final .band-beach > img { object-position: 50% 62%; }
.final h2 { margin-bottom: 26px; }
.final-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.final-ctas .btn { flex: 1 1 100%; max-width: 420px; }
.link.on-dark { color: var(--paper); }
@media (min-width: 900px) { .final .band-beach { height: 90vh; } .final-ctas .btn { flex: 0 0 auto; } }

/* ------------------------------------------------------------------ FREE FOR TESTERS */
.free { background: var(--ink); color: var(--paper); }
.free-grid { display: grid; gap: 44px; padding: 56px var(--gutter) 80px; }
.free-main h2 { margin-bottom: 20px; }
.free-lede { max-width: 48ch; line-height: 1.6; letter-spacing: 0.01em; }
.calc { margin: 28px 0 22px; border: 2px solid var(--ink-soft); border-radius: 16px; max-width: 520px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.calc-row + .calc-row { border-top: 2px solid var(--ink-soft); }
.calc-row > span:first-child { font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--paper); background: transparent; color: var(--paper); font: 700 1.5rem/1 var(--text); cursor: pointer; transition: transform 160ms var(--ease-out); }
.stepper button:active { transform: scale(0.94); }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper output { min-width: 2ch; text-align: center; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.calc-price span { color: var(--paper-dim); }
.calc-price s { text-decoration-thickness: 2px; margin-left: 4px; }
.calc-price strong { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.calc-price b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 3rem; line-height: 0.8; color: var(--sun); }
.free .btn-sun { width: 100%; max-width: 520px; }
.free .fine { margin-top: 16px; max-width: 52ch; font-size: 0.9375rem; color: var(--paper-dim); }
.free-side h3 { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.25rem; line-height: 1; margin-bottom: 8px; }
.incl { list-style: none; margin: 0; padding: 0; }
.incl li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ink-soft); }
.incl li::before { content: ""; width: 22px; height: 22px; background: var(--sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 900px) {
  .free-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 7vw, 140px); padding-top: 110px; padding-bottom: 130px; align-items: start; }
  .free-side { padding-top: 34px; }
}

/* ------------------------------------------------------------------ FOOTER */
.foot { background: var(--sun); padding: 40px var(--gutter) calc(96px + env(safe-area-inset-bottom)); }
.foot-mark { font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 27.5cqi; line-height: 0.78; margin: 0 0 22px -0.03em; }
.foot { container-type: inline-size; }
.foot-line { font-weight: 700; max-width: 40ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 14px 0 18px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot .fine { font-size: 0.875rem; color: var(--ink-2); max-width: 90ch; }
@media (min-width: 900px) { .foot { padding-bottom: 48px; } }

/* ------------------------------------------------------------------ DOCK (mobile) */
.dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--sun); box-shadow: 0 -2px 0 var(--ink);
  transform: translateY(110%); transition: transform 320ms var(--ease-out); }
.dock .btn { width: 100%; }
.dock.show { transform: none; }
@media (min-width: 900px) { .dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto !important; }
  .stage::after { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}