/* Jigwalk Auckland: the Đà Nẵng page (direction C, "Cinematic city") in the Auckland skin (app/public/brand/cities/auckland.css):
   pōhutukawa crimson where Đà Nẵng has its Dragon yellow, the Waitematā under cloud where it has the Han River, contour rings
   where it has dragon scales, C's compressed Archivo caps for headlines with Besley for the smaller display type, and the master sun (the yellow of the flower's stamens) for highlights on dark. */

@font-face { font-family: "Archivo"; src: url(/brand/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(/brand/fonts/archivo-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; 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; }
@font-face { font-family: "Atkinson Next"; src: url(/brand/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(/brand/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; }
@font-face { font-family: "Besley"; src: url(/brand/fonts/besley-800-latin.woff2) format("woff2"); font-weight: 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: "Besley"; src: url(/brand/fonts/besley-800-latin-ext.woff2) format("woff2"); font-weight: 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 {
  /* Auckland skin tokens (brand/cities/auckland.css). --sun keeps C's role names: the city's lead colour, here pōhutukawa crimson. */
  --sun: oklch(0.42 0.165 22);      /* #92071f pōhutukawa crimson (city lead); paper on it 8.8:1 */
  --sun-hi: oklch(0.47 0.17 22);
  --sun-deep: oklch(0.36 0.14 22);
  --on-sun: oklch(0.985 0.006 215);
  --hi: oklch(0.885 0.165 97);      /* the master sun (city accent): highlights and found states on dark grounds */
  --hl: oklch(0.86 0.07 18);        /* a pale pōhutukawa wash: the marker under words on light grounds */
  --ink: oklch(0.21 0.008 60);      /* #1b1715 Rangitoto basalt */
  --ink-2: oklch(0.30 0.012 60);
  --ink-soft: oklch(0.40 0.015 220);
  --paper: oklch(0.968 0.01 215);   /* #edf6f9 Waitematā light */
  --paper-2: oklch(0.92 0.02 215);  /* harbour mist */
  --paper-dim: oklch(0.80 0.02 215);
  --flame: oklch(0.50 0.19 25);
  --deep: oklch(0.36 0.05 220);     /* #1a434f the harbour under cloud; paper on it 10.2:1 */
  --map-land: oklch(0.42 0.165 22);
  --map-sea: oklch(0.36 0.05 220);
  --map-land-lbl: oklch(0.985 0.006 215 / 0.8);
  --map-sea-lbl: oklch(0.985 0.006 215 / 0.7);
  /* Contour rings: the volcanic field as a survey map draws it (the skin's motif), faint paper lines over the crimson. */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.5'%3E%3Cellipse cx='60' cy='58' rx='9' ry='7'/%3E%3Cellipse cx='59' cy='61' rx='21' ry='17'/%3E%3Cellipse cx='58' cy='64' rx='34' ry='28'/%3E%3Cellipse cx='57' cy='67' rx='48' ry='40'/%3E%3C/svg%3E");
  --head: "Besley", Georgia, serif;
  --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(--hi); }
.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(--hi); 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(--hi); }
.sun { color: var(--hi); }

/* 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(--hi); }
.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; }
/* The brand lockup (A's piece, C's wordmark), never in a box. Ink on light; the reversed lockup over the dark ground of the loose pieces. */
.mark { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.mark img { width: clamp(112px, 9vw, 132px); height: auto; transition: opacity 300ms ease; }
.mark .mark-rev { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }
@media (max-width: 899px) {
  .hero-pin:has(.stage.tl-loose) .mark-ink { opacity: 0; }
  .hero-pin:has(.stage.tl-loose) .mark-rev { opacity: 1; }
}
.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(--hi); 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(--hi); 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(--hi); 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; }
h1 { padding-top: 0.24em; } /* room for the stacked marks of ĐÀ NẴNG */
.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(--hi); 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-ph { position: relative; margin-bottom: 14px; }
.answer img { width: 100%; border-radius: 10px; 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(--hi), 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(--hi); }
.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.98 0.01 92 / 0.72) 0%, oklch(0.98 0.01 92 / 0.45) 55%, oklch(0.98 0.01 92 / 0) 100%); }
.band-top h2 { font-size: clamp(3rem, 13vw, 9rem); max-width: 14ch; }
.hl { box-shadow: inset 0 -0.34em 0 var(--hl); }
.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; }
/* The cafe photo cut into the Jigwalk piece (the brand's photo-in-a-piece), lifted off the page. */
.cafe-piece { grid-column: 2; grid-row: 1; filter: drop-shadow(0 4px 6px oklch(0.21 0.03 90 / 0.16)) drop-shadow(0 20px 26px oklch(0.21 0.03 90 / 0.3)); }
.cafe-piece img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 60%;
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; }
.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(--hi); }
.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(--hi); 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(--hi); }
.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(--hi); }
.lifelines dd { margin: 0; color: var(--paper-dim); font-size: 1rem; line-height: 1.4; }
.strip { --hole: oklch(0.98 0.01 92 / 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(--hi); }
.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(--hi); }
@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 { width: 104px; height: auto; align-self: center; }
.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(--hi); 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(--hi); }
.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 { display: block; width: 100%; height: auto; margin: 0 0 22px; }
.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; }
}

/* Photo credits: place and photographer (plus the licence where CC asks for it), small, in a bottom corner of the photo. */
.ph-credit { position: absolute; right: 8px; bottom: 8px; z-index: 6; max-width: calc(100% - 16px); margin: 0; padding: 2px 8px; border-radius: 999px;
  background: oklch(0.21 0.03 95 / 0.55); color: oklch(0.99 0.01 95); font: 400 0.6875rem/1.45 var(--text); pointer-events: none; }
.coffee .ph-credit { position: static; grid-column: 2; grid-row: 1; align-self: end; justify-self: end; margin: 0 8px 8px 0; }
.board-demo .ph-credit, .stage .ph-credit { right: auto; left: 8px; }
@media (max-width: 899px) { .stage .ph-credit { left: auto; right: 8px; bottom: 66px; } } /* above the piece counter */

/* Đà Nẵng inside body text: Atkinson has no Vietnamese stacked marks, so the name is set in Archivo, which has them. */
.vi { font-family: var(--display); font-stretch: 100%; white-space: nowrap; }
/* Phones: room under the board for the loose last piece, so it never sits on "Place it for me". */
@media (max-width: 899px) { .bd-bar { margin-top: 18vw; } }

/* ------------------------------------------------------------------ Đà Nẵng design language (Oct 2026) */
/* The scale motif, faint, over the yellow fields. */
.slab, .hero-more, .modes, .foot { background-image: var(--motif); background-size: 120px 120px; }
/* Scoring sits on a Dragon yellow card with the motif. */
.score-grid { background: var(--sun) var(--motif) 0 0 / 120px 120px; border-radius: 28px; padding: clamp(24px, 5vw, 64px); }
.score-copy > p { color: var(--ink-2); }
.score-grid .k-under { box-shadow: inset 0 0 0 2px var(--ink); } /* under-par key is yellow too */
/* The Han River: the live demo and the crew section on the deep green, paper text. */
.demo, .groups { background: var(--deep); color: var(--paper); }
.demo .kicker, .groups .kicker { color: var(--hi); }
.demo .ticket { color: var(--ink); }
.sync span { background: var(--paper); }
.groups .phone { color: var(--ink); }
.score-grid .hl { box-shadow: inset 0 -0.34em 0 var(--paper); } /* the highlight stays visible on the yellow card */

/* The headline: "Đà Nẵng's a puzzle. Step into it." (the homepage's framing). The name never splits; on phones two lines,
   sized so the first fits; on wider screens the name takes its own line, the biggest the column allows. */
.nm { white-space: nowrap; }
h1 { font-size: 12.9cqi; }
@media (min-width: 900px) {
  h1 { font-size: clamp(4.5rem, 25cqi, 10rem); }
  h1 .nm { display: block; }
}
/* The cafe piece fills the column under the walk facts: the piece's own outline (its ink box, 80.05 of the mark's 99.06
   units, from x 15.36 and y 4.58) spans the full column width. */
.coffee { grid-template-columns: minmax(0, 1fr); }
.cafe-piece, .coffee .ph-credit { grid-column: 1; }
.cafe-piece img { width: calc(100% * 99.06 / 80.05); max-width: none;
  margin: calc(-100% * 4.58 / 80.05) 0 calc(-100% * 14.43 / 80.05) calc(-100% * 15.36 / 80.05); }

/* ------------------------------------------------------------------ Auckland skin (Oct 2026) */
/* Type: the headlines keep the Đà Nẵng page's compressed Archivo caps (the brand's own face, the same treatment);
   Besley, the Auckland skin's display face, sets the smaller display type: answers, facts, mode names, numerals. */
.answer-name, .mode-text h3, .free-side h3, .beat-n, .rewards li::before, .walk-facts dd {
  font-family: var(--head); font-stretch: 100%; font-weight: 800; text-transform: none; letter-spacing: -0.015em; }
.answer-name, .mode-text h3, .free-side h3 { line-height: 1.02; }
.beat-n { padding-top: 0; }
h1 { padding-top: 0; } /* no stacked marks to make room for */
/* AUCKLAND'S is wider than ĐÀ NẴNG'S: the same layout, sized so the longest line fits its column. */
/* Four lines on every screen, as Đà Nẵng's desktop hero: AUCKLAND'S / A PUZZLE. / STEP / INTO IT. */
h1 .nm, h1 .l2 .w { display: block; }
h1 { font-size: 21.2cqi; }
@media (min-width: 900px) { h1 { font-size: clamp(4.2rem, 21.2cqi, 10rem); } }
.walk-facts dd { font-size: 1.3rem; line-height: 1.1; }

/* The hero shows the WHOLE puzzle picture, uncropped (Kyle 7 Oct): the stage is a square. Desktop: the square fills the
   pin's height on the right and the headline fills the other half; phones: the square on top, the headline under it,
   as on Đà Nẵng. The crimson field shows round the square when the screen is not wide enough for it. */
.hero-pin { background: var(--sun) var(--motif) 0 0 / 120px 120px; }
.stage-photo { object-position: 50% 50%; }
@media (max-width: 899px) {
  .hero-pin { grid-template-rows: auto minmax(0, 1fr); }
  .stage { width: min(100%, 100svh - 380px); aspect-ratio: 1; justify-self: center; }
  .slab { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 900px) {
  .hero-pin { grid-template-columns: minmax(440px, 1fr) min(100svh, 56vw); }
  .stage { aspect-ratio: 1; height: auto; align-self: center; }
}

/* The crimson fields (hero, modes, scoring card, footer, dock) carry paper text. */
.hero, .slab, .hero-more, .modes, .score-grid, .foot, .dock { color: var(--on-sun); }
.btn-sun { background: var(--hi); color: var(--ink); }
@media (hover: hover) { .btn-sun:hover { background: oklch(0.92 0.13 97); } }
.btn-ink { color: var(--hi); }
.count-n { color: var(--on-sun); }
.beat-n { color: var(--on-sun); }
.par-tag { background: var(--hi); color: var(--ink); }
.film-play { background: var(--hi); color: var(--ink); }
.fog-dot { box-shadow: inset 0 0 0 5px var(--hi), 0 0 0 2px var(--ink); }
.incl li::before { background: var(--hi); }
.qs summary::after { background: var(--sun); color: var(--on-sun); box-shadow: none; }
.k-under, .c-under { background: var(--hi); color: var(--ink); }
.score-grid .k-under { box-shadow: none; }
.score-copy > p { color: var(--on-sun); }
.score-grid .hl { box-shadow: inset 0 -0.34em 0 var(--sun-deep); }
.slab .hl, .modes .hl { box-shadow: inset 0 -0.34em 0 var(--sun-deep); }
/* The lockup: the reversed one on the crimson fields (the hero nav and the footer). */
.mark .mark-ink { opacity: 0; }
.mark .mark-rev { opacity: 1; }
.hero-more { box-shadow: 0 -2px 0 var(--ink) inset; }
/* Modes on crimson: the controls stay paper cards, lines and marks in paper. */
.modes .seg { box-shadow: inset 0 0 0 2.5px var(--ink); color: var(--ink); }
.modes .mode-help { border-top-color: var(--on-sun); }
.modes .mode-help li { border-bottom-color: var(--on-sun); }
.modes .mh-mark { background: var(--ink); }
.modes .mode-help li.off .mh-mark { box-shadow: inset 0 0 0 2.5px var(--on-sun); }
.modes .mode-help li.off .mh-mark::after { border-color: var(--on-sun); }
.radar text.rg-pill { fill: var(--hi); }
.radar .region circle { fill: var(--sun); }
.radar #arrow path { fill: var(--hi); }
/* The footer on crimson: paper text, the reversed lockup. */
.foot .fine { color: oklch(0.985 0.006 215 / 0.8); }
/* Credit pills: basalt glass. */
.ph-credit { background: oklch(0.21 0.008 60 / 0.58); color: oklch(0.985 0.006 215); }
.answer-vi { font-weight: 700; }
.map-start { font-family: var(--display); }
.fog-frame { background: var(--map-land); }
/* No sideways scroll at 320 to 430 px (inherited from C): the demo grid may shrink below the ticket's widest row, and the
   walk section clips the photo piece's few px of bleed. */
.demo > * { min-width: 0; }
.ticket .odds-row { flex-wrap: wrap; }
.walk { overflow-x: clip; }