/* HSTLE site v4: one stylesheet for every page. Device: the app's own map at the second you post.
   Tokens first; nothing below hardcodes a country. Hard ink outlines belong to the app's own objects only:
   the price pill on the map, the search bar, the active tab and the Ho gaya badge. Everything else is flat. */

@font-face { font-family: 'Baloo 2'; src: url(/site-assets/fonts/baloo2-800-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+20AC, U+20B9, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Baloo 2'; src: url(/site-assets/fonts/baloo2-800-devanagari.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mukta'; src: url(/site-assets/fonts/mukta-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mukta'; src: url(/site-assets/fonts/mukta-600-latin.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }
/* Devanagari (the language menu, Hindi lines): declared after the Latin faces, so they answer first for these letters */
@font-face { font-family: 'Mukta'; src: url(/site-assets/fonts/mukta-400-deva.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mukta'; src: url(/site-assets/fonts/mukta-600-deva.woff2) format('woff2'); font-weight: 600 700; font-display: swap; unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
@font-face { font-family: 'Baloo fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight: 800; size-adjust: 95%; ascent-override: 113%; descent-override: 55%; line-gap-override: 0%; }
@font-face { font-family: 'Mukta fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 93%; ascent-override: 121%; descent-override: 57%; line-gap-override: 0%; }

:root {
  --ground: #FFFFFF;
  --map: #FFFFFF;                 /* the map's white ground, baked into every street-*.svg white plate */
  --paper: #F3F2EE;               /* a tinted surface for chrome that is not the map (nav tabs, tool chips, cards) */
  --ink: #121212;
  --y: #FFC600;
  --mute: #555555;
  --rule: rgba(18,18,18,.14);
  --ghost: rgba(18,18,18,.05);
  --c-errands: #FFC600; --c-line: #2F6BFF; --c-home: #C9F04A; --c-food: #FFE0B5;
  --c-care: #FFD7CF; --c-events: #BFE3FF; --c-field: #CFF5DD; --c-desk: #7A5CFF;
  --c-content: #141414; --c-learning: #FFF1C2; --c-else: #FFC600;

  --out: cubic-bezier(.25, 1, .5, 1);
  --in: cubic-bezier(.5, 0, .75, 0);
  --inout: cubic-bezier(.76, 0, .24, 1);

  --display: 'Baloo 2', 'Baloo fallback', system-ui, sans-serif;
  --text: 'Mukta', 'Mukta fallback', system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(min(64px, 16.4vw), min(10.4vw, 15.6vh), 152px);
  --tk-hero: clamp(48px, min(5.4vw, 9vh), 88px);   /* the hero's price pill on the map (and the loader's copy of it) */
  --fs-statement: clamp(46px, min(8.34vw, 13.4vh), 120px);
  --fs-value: clamp(88px, min(15.3vw, 25vh), 224px);
  --fs-closer: clamp(64px, min(19.4vw, 30vh), 290px);   /* "Ho jayega." runs edge to edge at 1440 */
  --fs-num: clamp(240px, min(36vw, 52vh), 470px);
  --fs-h3: clamp(26px, 3.4vw, 52px);
  --fs-lead: clamp(17px, 1.39vw, 20px);
  --gutter: clamp(16px, 3.34vw, 48px);
  --nav-h: 72px;
  --r-btn: 14px; --r-card: 28px;
  --outline: 3px solid var(--ink);
  --focus-ring: var(--ink); --focus-gap: #fff;
}
@media (max-width: 959px) { :root { --nav-h: 60px; --tk-hero: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; overflow-x: clip; background: var(--ground); color: var(--ink); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-gap); border-radius: 6px; }
.on-dark { --focus-ring: var(--y); --focus-gap: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 300; background: var(--y); color: var(--ink); border-radius: var(--r-btn); padding: 12px 18px; font-weight: 600; transform: translateY(-200%); visibility: hidden; transition: transform .25s var(--out), visibility 0s .25s; }
.skip:focus-visible { transform: none; visibility: visible; transition: transform .25s var(--out); }
.wrap { width: 100%; max-width: 1536px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- type ---------- */
.h1 { font-family: var(--display); font-weight: 800; font-size: var(--fs-h1); line-height: .92; letter-spacing: -.035em; }
.statement { font-family: var(--display); font-weight: 800; font-size: var(--fs-statement); line-height: .92; letter-spacing: -.03em; }
.h3 { font-family: var(--display); font-weight: 800; font-size: var(--fs-h3); line-height: .98; letter-spacing: -.025em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; text-wrap: balance; }
.label { font: 600 13px/1.2 var(--text); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 699px) { .label { font-size: 12px; } }
/* the marker word: one per headline, a taxi-yellow swipe under it */
.mark { position: relative; z-index: 0; display: inline-block; line-height: .92; font-style: normal; white-space: nowrap; color: inherit; padding: 0 .06em; }
.mark::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; top: .26em; bottom: .07em; background: var(--y); transform: rotate(-2deg); border-radius: .06em; }
.on-y .mark { color: #fff; }
.on-y .mark::before { background: var(--ink); top: -.03em; bottom: -.03em; }
/* masked line: primitive 1 */
.ln { display: block; overflow: hidden; overflow: clip; padding: .02em .12em .14em; margin: -.02em -.12em -.14em; }
.ln > span { display: inline-block; }
html.motion [data-reveal] .ln > span { transform: translateY(110%); transition: transform .5s var(--out); transition-delay: calc(var(--i, 0) * .1s); }
html.motion [data-reveal].is-in .ln > span { transform: none; }
html.motion [data-fade] { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--out), transform 1s var(--out); transition-delay: calc(var(--i, 0) * .1s); }
html.motion [data-fade].is-in { opacity: 1; transform: none; }

/* ---------- components ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-btn); font: 600 16px/1 var(--text); white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--out), background-color .25s var(--out); }
.btn-y { background: var(--y); color: var(--ink); }
.btn-k { background: var(--ink); color: #fff; }
.btn-w { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn .arr { font-family: var(--display); font-weight: 800; transition: transform .25s var(--out); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn-y:hover { background: #FFD233; } .btn-k:hover { background: #2a2a2a; } .btn:hover .arr { transform: translateX(3px); } }
.btn:active, .press:active { transform: scale(.97); transition-duration: .1s; }
.btn-lg { min-height: 60px; padding: 0 28px; font-size: 18px; border-radius: 16px; }
/* the price pill: the app's own object, so it keeps the hard outline */
.pill { display: inline-flex; align-items: center; justify-content: center; background: var(--y); color: var(--ink); border: var(--outline); border-radius: 999px; font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; padding: .16em .4em .06em; white-space: nowrap; }
/* "Example" sits on every illustrative number */
.ex { display: inline-block; font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 6px; padding: 6px 8px 5px; white-space: nowrap; }
.dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--y); }
html.motion .dot.pulse { animation: dotpulse 2.4s var(--out) infinite; }
@keyframes dotpulse { 0% { box-shadow: 0 0 0 0 rgba(255,198,0,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255,198,0,0); } }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1.3 var(--text); padding: 10px 0; touch-action: manipulation; }
.arrow-link svg { width: 18px; height: 18px; flex: none; }
.arrow-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--out); padding-bottom: 2px; }
@media (hover: hover) { .arrow-link:hover span { background-size: 100% 2px; } }
.arrow-link:active { transform: scale(.97); }
.mk *, .stage * { max-width: none; }

/* ---------- nav: the app's own chrome. Wordmark with its dot, a live chip, the tab rail, the outlined yellow button ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); background: var(--ground); border-bottom: 1px solid transparent; transition: border-color .25s var(--out); }
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 14px; }
.wm { display: block; width: auto; height: 30px; color: var(--ink); }
/* the LED H logo: lit dots on 2x screens, the solid H on 1x (see brand-logo.cjs); hovering the home link swaps the
   H for the happy eyes */
@property --led-eyes { syntax: '<number>'; inherits: true; initial-value: 0; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { :root { --led-solid: 0; } }
@media (hover: hover) { .home:hover { --led-eyes: 1; } }
@media (prefers-reduced-motion: no-preference) { .home { transition: --led-eyes .2s ease-out; } }
.nav .home { display: flex; align-items: center; min-height: 48px; }
.wm-dot { flex: none; width: 10px; height: 10px; margin-left: -1px; border-radius: 50%; background: var(--y); transform: translateY(10px); }
.nav-links { display: flex; gap: 2px; margin-left: auto; padding: 4px; background: var(--paper); border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 15px/1 var(--text); }
.nav-links a { padding: 11px 14px 10px; border-radius: 999px; transition: background-color .25s var(--out), box-shadow .25s var(--out); touch-action: manipulation; }
@media (hover: hover) { .nav-links a:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); } }
.nav-links a:active { background: var(--y); box-shadow: inset 0 0 0 2.5px var(--ink); transform: scale(.97); transition-duration: .1s; }
.nav-acts { display: flex; gap: 8px; }
.nav-acts .btn { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 999px; }
.nav-acts .btn-y { box-shadow: inset 0 0 0 2.5px var(--ink); }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; place-items: center; touch-action: manipulation; }
.menu-btn i { display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; box-shadow: 0 -7px 0 var(--ink), 0 7px 0 var(--ink); }
.menu-btn:active { transform: scale(.94); }
@media (max-width: 1099px) { .nav-links { font-size: 14px; } .nav-links a { padding: 10px 10px 9px; } .nav-in { gap: 10px; } }
@media (max-width: 959px) { .nav-links, .nav-acts { display: none; } .menu-btn { display: grid; margin: 0 -10px 0 auto; } .wm { height: 26px; } .wm-dot { width: 9px; height: 9px; transform: translateY(8px); } }

/* ---------- language: a globe pill in the bar (in the menu on a phone); English and हिंदी behind it.
   The same block as assets/site.css (the v5 home), with its own tokens, so both systems look alike; the script is
   lang() in v4/site.js and in site.js ---------- */
.lang { --l-ink: #141414; --l-rule: rgba(18,18,18,.16); --l-hover: rgba(0,0,0,.05); --l-surface: #f5f5f2; --l-ease: cubic-bezier(.4,0,.6,1); --l-out: cubic-bezier(0,0,.2,1); --l-font: 'Mukta', system-ui, sans-serif;
  position: relative; flex: none; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px 0 9px; border: 0; border-radius: 980px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--l-rule); font: 600 14px/1 var(--l-font); color: var(--l-ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .24s var(--l-ease), color .24s var(--l-ease); }
.lang-btn:hover { background: var(--l-hover); }
.lang-btn:active { transform: scale(.96); }
.lang-btn[aria-expanded="true"] { background: var(--l-ink); color: #fff; box-shadow: none; }
.lang-btn svg { flex: none; }
.lang-globe { width: 18px; height: 18px; }
.lang-chev { width: 9px; height: 9px; margin-left: 1px; transition: transform .24s var(--l-ease); }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-code { min-width: 2.2ch; text-align: center; padding-top: 1px; }
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; min-width: 184px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 18px 40px -14px rgba(0,0,0,.35); }
.lang-menu[hidden] { display: none; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; padding: 2px 12px 0; border-radius: 11px; font: 600 16px/1 var(--l-font); color: var(--l-ink); text-decoration: none; letter-spacing: 0; }
.lang-menu a:hover { background: var(--l-surface); }
.lang-menu a:focus-visible { background: var(--l-surface); outline: 3px solid var(--l-ink); outline-offset: -3px; box-shadow: none; }
.lang-menu a[aria-current]::after { content: ""; flex: none; width: 13px; height: 7px; margin-top: -4px; border: solid var(--l-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.motion .lang-menu:not([hidden]) { animation: lang-in .18s var(--l-out); }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } }
/* no script: the list opens while the button holds focus */
html:not(.js) .lang:focus-within .lang-menu { display: block; }
.nav-in > .lang .lang-btn { height: 44px; padding: 0 13px 0 11px; font-size: 15px; }
.sheet-top .lang { margin-left: auto; margin-right: 14px; }
.sheet-top .lang-btn { height: 44px; padding: 0 13px 0 11px; font-size: 15px; }
@media (max-width: 959px) { .nav-in > .lang { display: none; } }

/* menu sheet: a circle that opens from its button and closes back into it */
.sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ground); color: var(--ink); overflow: auto; clip-path: circle(0 at var(--mx, 100%) var(--my, 0)); transition: clip-path .5s var(--inout); }
.sheet.is-open { clip-path: circle(150vmax at var(--mx, 100%) var(--my, 0)); }
.sheet::backdrop { background: transparent; }
.sheet:focus, .sheet:focus-visible { outline: none; box-shadow: none; }
.sheet-top { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.sheet-x { width: 48px; height: 48px; margin-right: -10px; border-radius: 50%; display: grid; place-items: center; touch-action: manipulation; }
.sheet-x i { position: relative; width: 24px; height: 2.5px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.sheet-x i::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); }
.sheet-x:active { transform: scale(.94); }
.sheet-links { padding: 18px 0 10px; display: grid; }
.sheet-links a { font: 800 40px/1.12 var(--display); letter-spacing: -.02em; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.sheet-links a:active { transform: scale(.98); transform-origin: left; }
.sheet-more { display: grid; gap: 2px; padding: 18px 0; font: 600 18px/1.3 var(--text); }
.sheet-more a { padding: 10px 0; }
.sheet .btn { width: 100%; margin-bottom: 28px; }
html.menu-open { overflow: hidden; }

/* phone pill bar: only between held scenes, never over one */
.pillbar { display: none; }
@media (max-width: 959px) {
  /* hidden as well as moved while it is down, so its links never take keyboard focus off screen */
  .pillbar { display: flex; gap: 8px; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px; background: var(--ink); border-radius: 18px; transform: translateY(calc(100% + 28px)); visibility: hidden; transition: transform .4s var(--in), visibility 0s .4s; }
  .pillbar .btn { flex: 1; min-height: 48px; padding: 0 12px; }
  .pillbar .btn-w { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
  .pillbar.is-up { transform: none; visibility: visible; transition: transform .4s var(--out), visibility 0s; }
}

/* ---------- the map: one 1440 x 900 plate, sized in layout (never upscaled by a transform) ---------- */
.frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ground); }
.hold { position: relative; }
.cam { position: absolute; inset: 0; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.plate { position: absolute; left: var(--tx, 0px); top: var(--ty, 0px); width: calc(1440px * var(--s, 1)); height: calc(900px * var(--s, 1)); }
html:not(.js) .plate { left: 0; top: 0; width: 100%; height: 100%; }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.plate .plate-y { opacity: 0; transition: opacity .8s var(--inout); }
/* text over the map wears a ground-coloured halo, so the hairlines never cut a letter */
.halo .ln > span { text-shadow: 0 0 .04em var(--halo, #fff), 0 0 .1em var(--halo, #fff), 0 0 .18em var(--halo, #fff); }
.halo .mark { text-shadow: none; }

/* markers: a zero-size anchor at a street junction (--px --py set by site.js). On it sits the app's own price pill,
   the way the app draws a task on its map: yellow, a hard ink outline, Baloo digits, a small ink tag under it */
.mk { position: absolute; z-index: 2; left: var(--px, 70%); top: var(--py, 50%); width: 0; height: 0; }
.tk { position: absolute; left: 0; top: 0; translate: -50% -50%; display: block; font: 800 var(--tk-fs, 64px)/1 var(--display); }
.tk-p { display: flex; align-items: center; gap: .2em; background: var(--y); color: var(--ink); border: max(3px, .05em) solid var(--ink); border-radius: 999px; padding: .17em .44em .05em; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; box-shadow: 0 .12em .26em -.06em rgba(18,18,18,.38); }
.tk-l { flex: none; max-width: 4.6em; margin: -.1em 0 0 -.06em; font: 600 .2em/1.05 var(--text); letter-spacing: .08em; text-transform: uppercase; white-space: normal; text-align: left; }
.tk-b:empty { display: none; }
.tk-b { position: absolute; left: 50%; top: 100%; translate: -50% 0; rotate: 3deg; margin-top: 10px; font: 600 clamp(12px, calc(var(--tk-fs, 64px) * .21), 16px)/1 var(--text); background: var(--ink); color: #fff; border-radius: 8px; padding: .55em .8em .48em; white-space: nowrap; }
.ring { position: absolute; inset: 0; border-radius: 999px; border: 3px solid var(--ink); opacity: 0; pointer-events: none; }

/* ---------- loader (home, first visit, scene 0): streets draw in, the pin drops, the map opens from it ---------- */
.loader { display: none; }
html.is-loading .loader { display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; background: var(--map); --r: 0px; -webkit-mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r), #000 calc(var(--r) + 1px)); mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent var(--r), #000 calc(var(--r) + 1px)); }
html.is-loading { overflow: hidden; }
.loader-roads { position: absolute; left: var(--tx, 0px); top: var(--ty, 0px); width: calc(1440px * var(--s, 1)); height: calc(900px * var(--s, 1)); max-width: none; }
.loader-roads path { fill: none; stroke: #D3D3CE; stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader.is-drawing .loader-roads path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--inout); }
.loader-mk { --tk-fs: var(--tk-hero); }
.loader-mk .tk { opacity: 0; }

/* ---------- 1 hero: the app's map. Its search bar is the ask box, its price pill is the answer ---------- */
.hero { height: 150vh; height: 150svh; --tk-fs: var(--tk-hero); --fs-tag: clamp(56px, min(6.8vw, 11vh), 104px); --halo: var(--map); }
.hero .frame, .taps .frame { background: var(--map); }
.mk-hero { z-index: 3; }
.ph-br { display: none; }
/* the cycler: its own line of the type block, an app pill that says "Ho jayega" in ten scripts */
.say { display: grid; justify-items: start; align-items: center; margin-top: clamp(14px, 2.6vh, 28px); font: 800 var(--fs-tag)/1 var(--display); }
.tag { display: inline-flex; align-items: center; height: 1.32em; background: var(--y); color: var(--ink); border: .05em solid var(--ink); border-radius: 999px; letter-spacing: -.025em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; box-shadow: 0 .06em .16em rgba(18,18,18,.18); transform: rotate(-3deg); transform-origin: 0 50%; }
.tag-w { position: relative; display: block; height: 100%; width: var(--w, 5.4em); overflow: hidden; clip-path: inset(0 round 999px); border-radius: 999px; transition: width .5s var(--out); }
.tag-w > span { position: absolute; left: .34em; top: 0; line-height: 1.32em; padding-top: .04em; white-space: nowrap; transform-origin: 0 50%; scale: var(--fit, 1); translate: 0 110%; }
.tag-w > span.is-on { translate: none; transition: translate .5s var(--out) .4s; }
.tag-w > span.is-out { translate: 0 -110%; transition: translate .4s var(--in); }
html:not(.motion) .tag-w > span.is-on { transition: none; }
.l-ta { font-family: 'Baloo Thambi 2', var(--display) !important; } .l-te { font-family: 'Baloo Tammudu 2', var(--display) !important; } .l-kn { font-family: 'Baloo Tamma 2', var(--display) !important; } .l-bn { font-family: 'Baloo Da 2', var(--display) !important; } .l-gu { font-family: 'Baloo Bhai 2', var(--display) !important; } .l-pa { font-family: 'Baloo Paaji 2', var(--display) !important; } .l-ml { font-family: 'Baloo Chettan 2', var(--display) !important; }

.hero-in { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(14px, 2.6vh, 28px)); padding-bottom: clamp(24px, 4.4vh, 44px); pointer-events: none; }
.hero-in > * { pointer-events: auto; }
.pin-slot { flex: 1 1 auto; align-self: stretch; pointer-events: none !important; }
/* the map's own chrome, drawn the way the app draws it over its tile: the NEARBY card (live median to a first hand),
   the "● 3 live" chip (counts the example crowd, labelled Example) and the city chip (its words come from the market block) */
.chrome { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.near { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + clamp(16px, 2.6vh, 28px)); display: grid; justify-items: center; gap: 6px; min-width: 150px; padding: 14px 18px 12px; background: #EFE9DC; border-radius: 20px; box-shadow: inset 0 0 0 1.5px rgba(18,18,18,.16); }
.near[hidden] { display: none; }
.near b { font: 800 46px/.9 var(--display); color: #8A6400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.near span { font: 600 12px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #6b5a3a; white-space: nowrap; }
.chip { position: absolute; bottom: clamp(20px, 4vh, 40px); display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 18px 4px 14px; border-radius: 999px; background: rgba(84,96,94,.46); box-shadow: inset 0 0 0 1.5px rgba(18,18,18,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font: 600 17px/1.2 var(--text); white-space: nowrap; }
.chip b { font: 800 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.chip .dot { box-shadow: 0 0 0 1.5px var(--ink); }
.chip .ex { margin-left: 4px; }
.chip svg { flex: none; }
.chip-live { left: var(--gutter); }
.chip-city { right: var(--gutter); }
html.js .chip-live { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--out), transform .4s var(--out); }
html.js .chip-live.is-on { opacity: 1; transform: none; }
/* the example crowd: desktop at frame fractions, phone around the pill (--px --py set by site.js) */
.hero-people .person { --d: clamp(84px, 12.6vh, 124px); }
.hero-people { z-index: 1; }
/* the ask box is the map's search bar: wide, 64 px, at the top of the map */
.ask { order: -1; width: min(940px, 66vw); margin-bottom: clamp(20px, 4.2vh, 44px); background: #fff; border: 3px solid var(--ink); border-radius: 24px; padding: 7px; box-shadow: 0 22px 48px -22px rgba(18,18,18,.42); }
.ask-bar { display: flex; align-items: center; gap: 8px; }
.ask-ic { flex: none; width: 24px; height: 24px; margin-left: 14px; color: var(--ink); }
.ask-bar label { flex: 1; min-width: 0; }
.ask input { width: 100%; min-width: 0; height: 64px; padding: 0 10px; border: 0; border-radius: 16px; background: transparent; font: 400 21px/1.2 var(--text); color: var(--ink); }
.ask input::placeholder { color: #6b6b6b; opacity: 1; }
.ask input:focus-visible { outline: none; box-shadow: none; }
.ask:has(:focus-visible) { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 22px 48px -22px rgba(18,18,18,.42); }
.ask .btn { min-height: 64px; padding: 0 26px; border-radius: 17px; font-size: 17px; }
.ask-out:empty { display: none; }
/* the typed placeholder is an example: a tag on the bar's top edge says so while one is showing */
.ask-bar { position: relative; }
.ask-ex { position: absolute; z-index: 1; left: 48px; top: -10px; transform: translateY(-50%); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.ask.ask-ex-on .ask-ex { opacity: 1; }
.fare { padding: 14px 16px 16px; display: grid; gap: 12px; }
html.motion .fare { animation: fadeup .5s var(--out); }
@keyframes fadeup { from { opacity: 0; transform: translateY(12px); } }
.fare-t { font: 800 26px/1.02 var(--display); letter-spacing: -.015em; }
.fare-r { margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--mute); }
.fare-p { display: none; }
.fare-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fare-acts .btn { min-height: 46px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.fare-note { flex-basis: 100%; font-size: 13px; color: var(--mute); }
.fare.is-loading .fare-t { color: var(--mute); }
.fare.is-plain .fare-p { display: flex; align-items: center; gap: 10px; }
.fare.is-plain .fare-p .pill { font-size: 28px; }
/* desktop: the answer is a callout under the price pill on the map (--cx --cy set by site.js) */
@media (min-width: 960px) {
  .ask-out { position: absolute; z-index: 5; --cw: min(440px, 34vw); width: var(--cw); left: clamp(var(--gutter), calc(var(--cx, 70%) - var(--cw) / 2), calc(100% - var(--cw) - var(--gutter))); top: calc(var(--cy, 50%) + var(--tk-hero) * 1.42); background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 22px 48px -22px rgba(18,18,18,.42); }
}

@media (max-width: 959px) {
  .hero { height: auto; --fs-tag: clamp(40px, min(13.6vw, 7svh), 58px); }
  .hero .frame { position: relative; height: auto; min-height: 100svh; }
  .hero-in { min-height: 100svh; padding-bottom: 76px; }
  .hero .h1 { letter-spacing: -.04em; }
  .ph-br { display: block; }
  .ask { order: 0; width: 100%; margin: clamp(16px, 2.6svh, 24px) 0 0; padding: 6px; border-radius: 22px; }
  .ask-ic { display: none; }
  .ask-bar { flex-wrap: wrap; gap: 6px; }
  .ask-bar label { flex: 1 1 100%; }
  .ask input { height: 54px; font-size: 17px; padding: 0 12px; }
  .ask-bar .btn { width: 100%; min-height: 54px; }
  .ask-out { border-top: 1px solid var(--rule); margin-top: 8px; }
  .fare { padding: 10px 10px 8px; }
  .fare-t { font-size: 21px; }
  .fare-acts .btn-y { flex-basis: 100%; }
  .fare-acts .btn-w, .fare-note { display: none; }
  .pin-slot { flex: 1 0 auto; min-height: 24svh; }
  .chip { bottom: 16px; min-height: 38px; padding: 3px 13px 3px 11px; gap: 7px; font-size: 15px; }
  .chip b { font-size: 18px; }
  .chip .ex { font-size: 10px; padding: 5px 6px 4px; }
  /* phone: the NEARBY card sits beside the short second line of the headline ("it is.") */
  .near { top: calc(var(--nav-h) + clamp(14px, 2.6vh, 28px) + var(--fs-h1) * .96); right: var(--gutter); min-width: 0; gap: 4px; padding: 8px 12px 7px; border-radius: 14px; }
  .near b { font-size: 26px; }
  .near span { font-size: 9px; letter-spacing: .12em; }
  .hero-people .person { --d: min(72px, 9svh); left: calc(var(--px) + var(--ox, 0px)); top: calc(var(--py) + var(--oy, 0px)); }
  .hero-people .ph-off { display: none; }
}

/* ---------- 2 what people post: the rainbow drives past ---------- */
.what { height: 260vh; } /* round 8: one beat shorter, the drive runs a little faster */
.what .frame { background: var(--ground); }
.what-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; }
.cats { display: contents; }
.what-intro { flex: none; width: min(66vw, 980px); height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; }
.what-intro .lead { max-width: 28ch; color: var(--mute); }
.cat { --fg: var(--ink); position: relative; flex: none; width: clamp(340px, 26vw, 420px); height: 100%; background: var(--c); color: var(--fg); display: flex; flex-direction: column; padding: calc(var(--nav-h) + 32px) clamp(24px, 2.6vw, 40px) 40px; overflow: hidden; overflow: clip; touch-action: manipulation; }
.cat.fg-w { --fg: #fff; }
.cat .cat-tag { align-self: flex-start; font: 600 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px 7px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px currentColor; }
.cat h3 { margin-top: auto; font: 800 clamp(40px, 3.6vw, 56px)/.92 var(--display); letter-spacing: -.03em; position: relative; z-index: 1; }
.cat p { margin-top: 12px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.35; max-width: 22ch; position: relative; z-index: 1; }
.cat .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; position: relative; z-index: 1; }
.cat .chips span { font: 600 14px/1 var(--text); padding: 9px 12px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.cat img { position: absolute; right: -3%; top: calc(var(--nav-h) + 3vh); width: min(var(--clay, 200px), 30vw); height: auto; aspect-ratio: 1; transition: transform .5s var(--out); }
@media (hover: hover) { .cat:hover img { transform: translateY(-10px) rotate(-3deg); } }
.cat:active { transform: scale(.985); }
/* scale contrast: Errands and Stand in line own a viewport each, Desk work is a tall middle, the rest come in pairs */
.cat-xl { width: 62vw; --clay: min(440px, 50vh); padding-left: clamp(32px, 4vw, 64px); }
.cat-xl img { right: 4%; top: calc(var(--nav-h) + 6vh); }
.cat-xl h3 { font-size: clamp(96px, 11vw, 200px); line-height: .86; letter-spacing: -.045em; }
.cat-xl p { font-size: clamp(19px, 1.7vw, 26px); max-width: 26ch; margin-top: 18px; }
.cat-l { width: 44vw; --clay: min(380px, 42vh); }
.cat-l h3 { font-size: clamp(72px, 7.4vw, 136px); line-height: .88; letter-spacing: -.04em; }
.cat-l p { font-size: clamp(18px, 1.5vw, 22px); }
.cat-m { width: 32vw; --clay: min(300px, 34vh); }
.cat-m h3 { font-size: clamp(56px, 5.2vw, 88px); }
.cat-col { flex: none; display: flex; flex-direction: column; width: clamp(300px, 23vw, 380px); height: 100%; }
.cat-s { width: 100%; height: calc(50% - var(--nav-h) / 2); padding-top: 22px; padding-bottom: 26px; --clay: min(150px, 17vh); }
.cat-s:first-child { height: calc(50% + var(--nav-h) / 2); padding-top: calc(var(--nav-h) + 22px); }
.cat-s img { top: 14px; right: 6px; }
.cat-s:first-child img { top: calc(var(--nav-h) + 10px); }
.cat-s .chips { display: none; }
.cat-s p { max-width: 19ch; }
.what-after { padding: clamp(28px, 4vw, 56px) 0 0; }
.all { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.all summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font: 800 clamp(26px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.02em; touch-action: manipulation; }
.all summary::-webkit-details-marker { display: none; }
.all summary i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--y); display: grid; place-items: center; font: 800 28px/1 var(--display); font-style: normal; transition: transform .3s var(--out); }
.all[open] summary i { transform: rotate(45deg); }
.all-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; padding: 8px 0 32px; }
html.motion .all[open] .all-grid { animation: fadein .25s linear; }
.all-grid h4 { font: 600 13px/1.2 var(--text); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.all-grid h4::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px var(--rule); }
.all-grid li { font-size: 16px; line-height: 1.6; }
.all .arrow-link { margin-bottom: 18px; }
/* the destination board */
.board { margin-top: clamp(36px, 4vw, 56px); background: var(--ink); color: var(--y); overflow: hidden; overflow: clip; padding: 18px 0; }
.board-row { display: flex; width: max-content; gap: 0; }
.board-row span { font: 800 clamp(26px, 2.6vw, 38px)/1.1 var(--display); letter-spacing: -.01em; white-space: nowrap; padding: 0 26px; position: relative; }
.board-row span::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; opacity: .5; }
html.motion .board-row { animation: board 32s linear infinite; }
.board:hover .board-row, .board:focus-within .board-row { animation-play-state: paused; }
@keyframes board { to { transform: translateX(-50%); } }
/* the lines on the board are examples: a fixed yellow tag on its left edge, over the rolling row */
.board { position: relative; }
.board-ex { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; display: flex; align-items: center; border-radius: 0; padding: 0 14px; background: var(--y); color: var(--ink); }
.board-ex ~ .board-row { margin-left: 104px; }
@media (max-width: 959px) {
  /* phone: one full-bleed colour block per category, the clay big, side by side on native scroll-snap */
  .what { height: auto; }
  .what .frame { position: relative; height: auto; overflow: visible; }
  .what-track { position: relative; display: block; transform: none !important; }
  .what-intro { width: 100%; height: auto; padding: calc(var(--nav-h) + 36px) var(--gutter) 22px; gap: 14px; }
  .cats { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cats::-webkit-scrollbar { display: none; }
  .cat-col { display: contents; }
  .cat, .cat-xl, .cat-l, .cat-m, .cat-s, .cat-s:first-child { flex: 0 0 88vw; width: 88vw; height: min(78svh, 640px); min-height: 520px; padding: 22px 22px 26px; border-radius: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .cat .chips, .cat-s .chips { display: flex; }
  .cat img, .cat-xl img, .cat-l img, .cat-m img, .cat-s img, .cat-s:first-child img { width: min(72vw, 300px); top: 64px; right: 50%; margin-right: calc(min(72vw, 300px) / -2); }
  .cat h3, .cat-xl h3, .cat-l h3, .cat-m h3, .cat-s h3 { margin-top: auto; font-size: min(15.4vw, 64px); line-height: .9; letter-spacing: -.035em; }
  .cat p, .cat-xl p, .cat-l p, .cat-m p, .cat-s p { max-width: 24ch; font-size: 17px; margin-top: 10px; }
  .cat .cat-tag, .cat-s .cat-tag { font-size: 12px; padding: 7px 10px 6px; }
  .cat:active { transform: none; }
  .all-grid { grid-template-columns: 1fr 1fr; }
  .board { padding: 14px 0; }
  html.motion .board-row { animation-duration: 24s; }
}

/* ---------- 3 three taps: one map, three beats. The task is the app's price pill on the map ---------- */
.taps { height: 300vh; height: 300svh; --tk-fs: clamp(44px, min(4.6vw, 7.4vh), 72px); --halo: var(--map); }
.taps .cam { transition: transform 1s var(--inout); }
.taps[data-beat="2"] .cam { transform: scale(1.12); }
.taps[data-beat="3"] .cam { transform: scale(.94); }
.taps[data-done] .cam { transform: scale(1.06); }
.taps[data-beat="2"] .plate-y, .taps[data-beat="3"]:not([data-done]) .plate-y { opacity: 1; }
.taps .frame { transition: background-color .8s var(--inout); }
.taps[data-beat="2"], .taps[data-beat="3"]:not([data-done]) { --halo: var(--y); }
.mk-taps .tk { transition: transform .45s var(--out), opacity .3s var(--out); }
.mk-taps .tk-b { text-transform: uppercase; letter-spacing: .08em; transition: opacity .25s var(--out); }
.taps[data-beat="2"] .mk-taps .tk-b { opacity: 0; }
.taps[data-beat="3"] .mk-taps .tk { opacity: 0; transform: scale(.6); }
/* the stage sits outside the camera; --pin-h is the pill's own height, measured by site.js */
.stage { position: absolute; z-index: 3; inset: 0; pointer-events: none; --bw: min(420px, 30vw); }
.bubble { position: absolute; left: clamp(var(--gutter), calc(var(--px) - 64px), calc(100% - var(--bw) - var(--gutter))); bottom: calc(100% - var(--py) + var(--pin-h) * .5 + 22px); width: var(--bw); background: #fff; border: 3px solid var(--ink); border-radius: 26px; padding: 16px 22px 20px; box-shadow: 0 26px 50px -20px rgba(18,18,18,.36); transform-origin: 64px 100%; transition: transform .5s var(--out), opacity .3s var(--out); }
.bubble::after { content: ""; position: absolute; left: 52px; bottom: -12px; width: 20px; height: 20px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.bubble .typed { display: block; min-height: 2.1em; margin: 8px 0 16px; font: 800 clamp(26px, 2.6vw, 38px)/1.04 var(--display); letter-spacing: -.015em; }
.bubble .typed::after { content: ""; display: inline-block; width: 3px; height: .85em; margin-left: 4px; vertical-align: -.06em; background: var(--ink); }
html.motion .bubble .typed::after { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.bubble .fake-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--y); border-radius: 12px; box-shadow: inset 0 0 0 2.5px var(--ink); font: 600 16px/1 var(--text); }
.bubble .label { font: 600 13px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.obj { position: absolute; width: clamp(150px, 24vh, 240px); aspect-ratio: 1; left: calc(var(--px) + var(--pin-w, 200px) * .5 + 56px); top: calc(var(--py) - var(--pin-h) * .2); /* clear of the pill and its Example tag, measured */ transition: transform .5s var(--out), opacity .3s var(--out); }
.obj img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.7) rotate(-8deg); transition: opacity .25s var(--out), transform .45s var(--out); }
.obj img.is-on { opacity: 1; transform: none; }
.taps:not([data-beat="1"]) .bubble { opacity: 0; transform: scale(.86); }
.taps:not([data-beat="1"]) .obj { opacity: 0; transform: scale(.7); }
/* beat 2: three neighbours raise a hand. A category-colour token with their initial, "Hand up" over it, how far under it */
.people { position: absolute; inset: 0; }
.person { --k: 0; --d: 17vh; position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--c); color: var(--fg, var(--ink)); box-shadow: 0 0 0 calc(var(--d) * .04) var(--ink), 0 calc(var(--d) * .08) calc(var(--d) * .16) rgba(18,18,18,.24); opacity: 0; transform: translate(calc(var(--dx, 0) * 60%), calc(var(--dy, 0) * 60%)) scale(.6); transition: transform .7s var(--out), opacity .3s var(--out); transition-delay: calc(var(--k) * .08s); }
.person b { position: absolute; inset: 0; display: grid; place-items: center; padding-top: calc(var(--d) * .06); font: 800 calc(var(--d) * .46)/1 var(--display); }
.person .up, .person .dist { position: absolute; left: 50%; white-space: nowrap; border-radius: 999px; font: 600 clamp(13px, calc(var(--d) * .1), 17px)/1 var(--text); padding: .6em .9em .5em; transition: transform .4s var(--out), opacity .2s var(--out); transition-delay: calc(.6s + var(--k) * .1s); opacity: 0; }
.person .up { bottom: 100%; background: var(--ink); color: #fff; transform: translate(-50%, 40%) scale(.3); }
.person .dist { top: 100%; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-variant-numeric: tabular-nums; transform: translate(-50%, -40%) scale(.3); }
.taps[data-beat="2"] .person, .person.is-up { opacity: 1; transform: none; }
.taps[data-beat="2"] .person .up, .person.is-up .up { opacity: 1; transform: translate(-50%, -12px); }
.taps[data-beat="2"] .person .dist, .person.is-up .dist { opacity: 1; transform: translate(-50%, 12px); }
.hands { position: absolute; left: var(--px); top: calc(var(--py) + var(--pin-h) * .5 + 22px); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translate(-50%, -20px) scale(.6); transform-origin: 50% 0; transition: transform .45s var(--out), opacity .25s var(--out); }
.hands .pill { font-size: clamp(30px, 3vw, 46px); }
.taps[data-beat="2"] .hands { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); transition-delay: 1s; }
/* beat 3: the same pill, held. It goes black on the yellow map: the money is with HSTLE, not with anyone yet */
.held { position: absolute; left: var(--px); top: var(--py); display: grid; justify-items: center; gap: 14px; opacity: 0; transform: translate(-50%, -62%) rotate(-4deg) scale(1.5); transition: transform .38s var(--in), opacity .2s var(--in); }
.held .pill { font-size: clamp(76px, min(8.6vw, 14vh), 128px); background: var(--ink); color: var(--y); border-color: var(--ink); border-width: .03em; padding: .14em .36em .04em; gap: .16em; box-shadow: 0 .08em .2em -.04em rgba(18,18,18,.4); }
.held .pill small { font: 600 .17em/1 var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--y); color: var(--ink); border-radius: 999px; padding: .55em .8em .45em; }
.held-top { display: flex; gap: 10px; align-items: center; }
.approve { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px; background: #fff; color: var(--ink); border-radius: 999px; box-shadow: inset 0 0 0 3px var(--ink); font: 600 18px/1 var(--text); }
.approve svg { width: 20px; height: 20px; color: var(--ink); }
.taps[data-beat="3"] .held { opacity: 1; transform: translate(-50%, -62%) rotate(-4deg); transition-delay: .2s; }
.taps[data-done] .held { opacity: 0; transform: translate(-50%, -62%) rotate(-14deg) scale(.4); transition-delay: 0s; }
/* then the held pill is released into the round Ho gaya badge, the same badge the closer wears */
.gaya { --sd: 300px; border-radius: 50%; background: var(--y); border: max(3px, calc(var(--sd) * .012)) solid var(--ink); box-shadow: 0 calc(var(--sd) * .03) calc(var(--sd) * .07) rgba(18,18,18,.22); display: grid; place-items: center; }
.gaya::after { content: ""; position: absolute; inset: calc(var(--sd) * .045); border: max(1.5px, calc(var(--sd) * .005)) dashed var(--ink); border-radius: 50%; opacity: .5; pointer-events: none; }
.gaya-in { display: grid; justify-items: center; gap: calc(var(--sd) * .02); }
.gaya svg { width: calc(var(--sd) * .13); height: calc(var(--sd) * .13); }
.gaya .settle { display: block; font: 800 calc(var(--sd) * .2)/.9 var(--display); letter-spacing: -.035em; white-space: nowrap; }
@keyframes settle-in { 0% { word-spacing: .16em; letter-spacing: 0; filter: blur(3px); } 28% { filter: blur(0); } 100% { word-spacing: normal; letter-spacing: -.035em; filter: blur(0); } }
.stamp { --sd: min(72vh, 56vw, 700px); position: absolute; left: calc(var(--px) + var(--sd) * .12); top: var(--py); width: var(--sd); height: var(--sd); margin: calc(var(--sd) / -2) 0 0 calc(var(--sd) / -2); opacity: 0; transform: rotate(-28deg) scale(1.8); transition: transform .34s var(--in), opacity .15s var(--in); }
.paid { display: flex; align-items: center; gap: .45em; font: 600 max(14px, calc(var(--sd) * .032))/1 var(--text); }
.paid .pill { font-size: 1.5em; border-width: 2.5px; }
.taps[data-done] .stamp { opacity: 1; transform: rotate(-8deg); }
html.motion .taps[data-done] .stamp .settle { animation: settle-in 1.2s var(--inout) both; }
@keyframes settle { from { word-spacing: .5em; letter-spacing: .06em; filter: blur(8px); } to { word-spacing: normal; letter-spacing: -.035em; filter: blur(0); } }
/* copy: the statement on the map, one huge numeral per beat */
.taps-in { position: relative; z-index: 4; height: 100%; padding-top: calc(var(--nav-h) + clamp(16px, 3.4vh, 32px)); pointer-events: none; }
.taps-in a { pointer-events: auto; }
.taps .mark, .taps .mark::before { transition: color .8s var(--inout), background-color .8s var(--inout); }
.taps[data-beat="2"] .mark, .taps[data-beat="3"]:not([data-done]) .mark { color: #fff; }
.taps[data-beat="2"] .mark::before, .taps[data-beat="3"]:not([data-done]) .mark::before { background: var(--ink); top: -.03em; bottom: -.03em; }
.beats { position: absolute; left: 0; right: 0; bottom: 0; }
.beat { position: absolute; left: var(--gutter); bottom: 0; display: flex; align-items: flex-end; gap: clamp(8px, 1.6vw, 28px); visibility: hidden; }
.beat.is-on { visibility: visible; }
.num { font: 800 var(--fs-num)/.74 var(--display); letter-spacing: -.06em; margin-bottom: -.06em; margin-left: -.04em; }
.num.ln { padding-top: .04em; padding-bottom: 0; }
.beat-copy { display: grid; gap: 8px; padding-bottom: clamp(28px, 6vh, 64px); max-width: 32ch; }
.beat-copy .h3 { white-space: nowrap; }
.beat-copy p { font-size: var(--fs-lead); line-height: 1.4; }
.beat .ln > span { transform: translateY(110%); transition: transform .5s var(--out), visibility 0s .5s; }
.beat.is-on .ln > span { transform: none; transition-delay: calc(var(--i, 0) * .1s); }
html:not(.motion) .beat .ln > span { transform: none; transition: none; }
html:not(.motion) .beat.is-on { animation: fadein .2s linear; }
@keyframes fadein { from { opacity: 0; } }
.beat .arrow-link { justify-self: start; padding-bottom: 0; }

@media (max-width: 959px) {
  .taps { height: 220vh; height: 220svh; --tk-fs: 40px; --fs-num: clamp(170px, 50vw, 230px); }
  .taps .statement { font-size: 46px; }
  .stage { --bw: min(300px, 78vw); }
  .bubble { left: 50%; bottom: auto; top: calc(var(--nav-h) + 128px); margin-left: calc(var(--bw) / -2); padding: 12px 16px 16px; border-radius: 20px; transform-origin: 50% 100%; }
  .bubble::after { left: 50%; margin-left: -10px; }
  .bubble .typed { font-size: 24px; margin: 4px 0 10px; }
  .bubble .fake-btn { min-height: 38px; font-size: 14px; }
  .obj { width: 118px; left: calc(var(--px) + 30px); top: calc(var(--py) + var(--pin-h) * .5 + 40px); }
  .person { --d: 11svh !important; left: calc(var(--fxp, var(--fx)) * 100%); top: calc(var(--fyp, var(--fy)) * 100%); }
  .person .up, .person .dist { font-size: 12px; }
  .hands { left: calc(var(--px) - 20px); }
  .hands .pill { font-size: 30px; }
  .held .pill { font-size: 64px; }
  .approve { min-height: 44px; font-size: 16px; padding: 0 16px 0 14px; }
  .stamp { --sd: min(92vw, 50svh); left: var(--px); }
  .beat { gap: 6px; }
  .beat-copy { padding-bottom: 22px; max-width: 24ch; }
  .beat-copy .h3 { font-size: 26px; }
  .beat-copy p { font-size: 15px; line-height: 1.35; }
}

/* ---------- 6 money: the one black scene ---------- */
.money { height: 250vh; height: 250svh; }
.money .frame { background: var(--ink); color: #fff; }
html.motion .money .frame { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--out); }
html.motion .money.is-in .frame { clip-path: inset(0); }
/* the lock is re-framed for every state and every rule: scale, crop, side and tilt change; captions sit in the free side */
.lock-wrap { position: absolute; left: 50%; bottom: -7vh; height: 92vh; aspect-ratio: 1; transform-origin: 50% 100%; transform: translateX(-50%) translate(var(--lx, 0px), var(--ly, 0px)) rotate(var(--lr, 0deg)) scale(var(--ls, 1)); transition: transform 1s var(--inout), filter .8s var(--inout); }
.money[data-m="0"] { --lx: 23vw; }
.money[data-m="2"] { --lx: 27vw; --ly: 22vh; --ls: 1.3; --lr: 6deg; }
.money[data-m="1"][data-r="0"] { --lx: 30vw; --ly: 0px; --ls: .55; --lr: 0deg; }
.money[data-m="1"][data-r="1"] { --lx: -24vw; --ly: 60vh; --ls: 1.3; --lr: 0deg; }
.money[data-m="1"][data-r="2"] { --lx: -31vw; --ly: 6vh; --ls: .8; --lr: -10deg; }
.money[data-m="1"][data-r="3"] { --lx: 0px; --ly: 62vh; --ls: 1.1; --lr: 0deg; }
.money[data-m="1"][data-r="4"] { --lx: 29vw; --ly: -2vh; --ls: .7; --lr: 8deg; }
.money[data-m="1"][data-r="4"] .lock-wrap { filter: saturate(.12) brightness(1.18); }
.money[data-m="1"][data-r="5"] { --lx: 26vw; --ly: 24vh; --ls: 1.25; --lr: -6deg; }
.lock-wrap::before { content: ""; position: absolute; inset: 6% 6% 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,198,0,.24), rgba(255,198,0,0)); }
.lock { position: relative; width: 100%; height: 100%; }
html.motion .money .lock { transform: scale(1.1) translateY(5%); transition: transform 1.4s var(--out); }
html.motion .money.is-in .lock { transform: none; }
.money-in { position: relative; z-index: 2; height: 100%; padding-top: calc(var(--nav-h) + clamp(18px, 4vh, 40px)); padding-bottom: clamp(24px, 5vh, 48px); }
.mstate { position: absolute; inset: calc(var(--nav-h) + clamp(18px, 4vh, 40px)) var(--gutter) clamp(24px, 5vh, 48px); display: grid; align-content: start; justify-items: start; gap: 18px; visibility: hidden; }
.mstate.is-on { visibility: visible; }
.mstate .ln > span { transform: translateY(110%); transition: transform .5s var(--out); }
.mstate.is-on .ln > span { transform: none; transition-delay: calc(var(--i, 0) * .1s); }
html:not(.motion) .mstate .ln > span { transform: none; transition: none; }
html:not(.motion) .mstate.is-on { animation: fadein .2s linear; }
.mstate[data-m="0"] { align-content: center; }
.money .statement { max-width: 9ch; }
.money .lead { max-width: 38ch; color: rgba(255,255,255,.86); }
.money .mark { color: var(--ink); }
.money .mark::before { top: -.02em; bottom: -.03em; } /* the whole word sits on yellow: ink on ink would lose its tops */
.m-kicker { font: 800 clamp(30px, 3.4vw, 52px)/1 var(--display); letter-spacing: -.02em; }
.m-sub { color: rgba(255,255,255,.78); font-size: var(--fs-lead); max-width: 34ch; }
/* the one service fee, stated once on the home, as its own pill under "So is the fee." */
.m-fee .ln { padding: 8px 6px 6px 2px; margin: -8px 0 0 -2px; }
.m-fee .ln > span { display: flex; align-items: center; gap: 16px; }
.m-fee .pill { flex: none; font-size: clamp(30px, 2.8vw, 42px); padding: .12em .4em .02em; transform: rotate(-3deg); }
.m-fee-l { color: #fff; font: 600 17px/1.35 var(--text); max-width: 30ch; }
.rules { position: absolute; inset: 0; pointer-events: none; }
.rule { position: absolute; left: calc(var(--rx, .5) * 100%); top: calc(var(--ry, .56) * 100%); display: grid; justify-items: center; gap: 22px; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); transform: translate(-50%, -50%); visibility: hidden; }
.mstate.is-on .rule.is-on { visibility: visible; }
.rule .pill { font-size: var(--fs-value); padding: .1em .32em 0; border-width: .03em; box-shadow: 0 .06em .2em rgba(0,0,0,.45); }
.rule .pill { opacity: 0; transform: scale(1.7) rotate(-10deg); transition: transform .32s var(--in), opacity .14s var(--in); }
.mstate.is-on .rule.is-on .pill { opacity: 1; transform: rotate(-3deg); }
.rule-line, .money .cap { display: inline-block; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; max-width: 32ch; text-align: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 18px; }
.rule-line .ln > span { transition-delay: .18s; }
html:not(.motion) .rule .pill { transition: none; }
.mstate[data-m="2"] { align-content: center; }
.urgent { font: 800 clamp(30px, 3.4vw, 52px)/1 var(--display); letter-spacing: -.02em; display: grid; justify-items: start; gap: 16px; }
.urgent .pill { font-size: clamp(72px, 9vw, 140px); padding: .1em .32em 0; border-width: .03em; transform: rotate(-3deg); box-shadow: 0 .06em .2em rgba(0,0,0,.45); }
.mstate[data-m="2"] .rule-line { text-align: left; background: none; padding: 0; }
.money .arrow-link { color: var(--y); }
@media (max-width: 959px) {
  /* phone: the lock is big and owns the lower half (cropped by the frame edges); it moves, tilts and rescales per rule, the copy owns the top */
  .money { height: 240vh; height: 240svh; --lk: min(84vw, 42svh); }
  .lock-wrap { width: var(--lk); height: var(--lk); left: 50%; top: 76svh; bottom: auto; margin: calc(var(--lk) / -2) 0 0 calc(var(--lk) / -2); transform: translate(var(--lx, 0px), var(--ly, 0px)) rotate(var(--lr, 0deg)) scale(var(--ls, 1)); transform-origin: 50% 50%; }
  .money[data-m="0"] { --lx: 22vw; --ly: 2svh; --ls: 1.25; --lr: 8deg; }
  .money[data-m="2"] { --lx: -20vw; --ly: 4svh; --ls: 1.1; --lr: -6deg; }
  .money[data-m="1"][data-r="0"] { --lx: 0px; --ly: 0px; --ls: .8; --lr: 0deg; }
  .money[data-m="1"][data-r="1"] { --lx: -22vw; --ly: 3svh; --ls: 1.2; --lr: -8deg; }
  .money[data-m="1"][data-r="2"] { --lx: 24vw; --ly: -1svh; --ls: .9; --lr: 10deg; }
  .money[data-m="1"][data-r="3"] { --lx: 0px; --ly: 12svh; --ls: 1.25; --lr: 0deg; }
  .money[data-m="1"][data-r="4"] { --lx: -18vw; --ly: 0px; --ls: .85; --lr: -4deg; }
  .money[data-m="1"][data-r="5"] { --lx: 20vw; --ly: 4svh; --ls: 1.2; --lr: 6deg; }
  .mstate[data-m="0"], .mstate[data-m="2"] { align-content: start; }
  .rule { left: 50%; top: 41%; gap: 14px; }
  .rule .pill { font-size: min(23vw, 96px); }
  .urgent .pill { font-size: min(11vw, 60px); }
  .money .lead, .m-sub { font-size: 16px; }
  .m-sub { display: none; } /* phone: the fee pill answers it, and the rules need the room */
  .m-fee .pill { font-size: 28px; }
  .m-fee-l { font-size: 15px; }
  .rule-line { font-size: 16px; padding: 10px 14px; }
}

/* ---------- 13 closer: the camera pulls back, the streets show; three finished things and one Ho gaya badge ---------- */
.closer { height: 120vh; height: 120svh; --halo: var(--y); }
.closer .frame { display: flex; align-items: center; background: var(--y); }
.burst { position: absolute; inset: 0; }
.badge { --d: 120px; position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--c, #fff); box-shadow: 0 calc(var(--d) * .06) calc(var(--d) * .14) rgba(18,18,18,.22); display: grid; place-items: center; opacity: 0; transform: rotate(calc(var(--r, 0deg) - 30deg)) scale(.3); transition: transform .5s var(--out), opacity .2s var(--out); }
.badge img { width: 74%; height: 74%; }
.badge.gaya { --sd: var(--d); background: #fff; }
.badge.is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.badge.is-under { display: none; }
html.motion .closer.is-in .badge.gaya .settle { animation: settle-in 1.2s var(--inout) .3s both; }
.closer-in { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; padding-top: var(--nav-h); }
.closer-h { font: 800 var(--fs-closer)/.92 var(--display); letter-spacing: -.035em; }
.closer-h .ln { padding-right: .3em; }
.closer-h .settle { white-space: nowrap; }
.closer-h .ln:first-child { font-size: .42em; padding-left: .04em; }
.closer .mark { color: #fff; }
.closer .mark::before { background: var(--ink); top: -.03em; bottom: -.03em; }
html.motion .closer.is-in .closer-h .settle { animation: settle 1.6s var(--inout) both; }
.closer-in p { font-size: var(--fs-lead); max-width: 40ch; font-weight: 600; }
.closer-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.closer-acts .btn-w { box-shadow: none; }
.qr { display: flex; align-items: center; gap: 14px; font: 600 15px/1.25 var(--text); }
.qr img { width: 92px; height: 92px; background: #fff; border-radius: 14px; padding: 8px; }
@media (max-width: 959px) {
  .closer { height: auto; }
  .closer .frame { position: relative; height: auto; min-height: 100svh; align-items: flex-end; padding: calc(var(--nav-h) + 24px) 0 36px; }
  .closer-in { gap: 18px; padding-top: 0; }
  .closer-h { font-size: clamp(56px, 19.4vw, 96px); }
  .closer-h .ln:first-child { font-size: .66em; }
  .closer-acts { flex-direction: column; align-items: stretch; width: 100%; }
  .closer-acts .btn { width: 100%; }
  .qr { display: none; }
  .badge { left: calc(var(--fxp, var(--fx)) * 100%); top: calc(var(--fyp, var(--fy)) * 100%); width: var(--dp, var(--d)); height: var(--dp, var(--d)); margin: calc(var(--dp, var(--d)) / -2) 0 0 calc(var(--dp, var(--d)) / -2); transform: translateY(-110svh) rotate(var(--r, 0deg)); transition: transform .9s var(--in), opacity .1s linear; }
  .badge.gaya { --sd: var(--dp); }
  .badge.is-in { transform: rotate(var(--r, 0deg)); }
}

/* ---------- shared: a map plate as a section ground (one cached SVG), and the drop every pin makes ---------- */
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-48px); } 55% { opacity: 1; transform: none; } 66% { transform: scale(1.05, .9); } 100% { opacity: 1; transform: none; } }
@keyframes ring-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
/* the app's pin drop (site.js dropPin): the pill falls, squashes and a ring leaves it */
html.motion .mk.is-dropping .tk { animation: pin-drop .55s var(--out) both; }
html.motion .mk.is-dropping .ring { animation: ring-out .6s var(--out) .3s both; }

/* ---------- 4 handled, so far: the live numbers are pins on the map. The median to a first hand leads; counts sit quieter ---------- */
.sofar { position: relative; min-height: clamp(760px, 104vh, 1040px); overflow: hidden; overflow: clip; background: var(--map); --halo: var(--map); }
.sofar-in { position: relative; z-index: 2; padding-top: clamp(84px, 9vw, 140px); }
.sofar .lead { margin-top: 18px; max-width: 32ch; font-weight: 600; }
.stats { position: absolute; inset: 0 0 clamp(120px, 15vh, 170px) 0; z-index: 1; } /* the bottom margin is the room each pin's card needs under it */
.stats li[hidden] { display: none; }
.stat { position: absolute; left: calc(var(--fx, .5) * 100%); top: calc(var(--fy, .5) * 100%); display: grid; justify-items: center; gap: 12px; width: max-content; max-width: 30ch; transform: translate(-50%, -24px); }
.stat .pill { position: relative; font-size: clamp(38px, 3.6vw, 58px); padding: .16em .4em .06em; box-shadow: 0 .12em .26em -.06em rgba(18,18,18,.38); }
.stat-card { display: grid; gap: 4px; justify-items: center; text-align: center; text-shadow: 0 0 .2em #fff, 0 0 .4em #fff, 0 0 .7em #fff; }
.stat-card b { font: 800 clamp(18px, 1.5vw, 22px)/1.05 var(--display); letter-spacing: -.01em; }
.stat-card span { font-size: 14px; line-height: 1.35; color: #3a3a3a; max-width: 26ch; }
.stat-lead { gap: 18px; transform: translate(-50%, -40%); }
.stat-lead .pill { font-size: clamp(96px, 11vw, 168px); padding: .14em .34em .04em; border-width: .03em; transform: rotate(-3deg); }
.stat-lead .stat-card b { font-size: clamp(24px, 2.2vw, 34px); }
.stat-lead .stat-card span { font-size: 16px; }
html.motion .sofar .stat .pill { opacity: 0; }
html.motion .sofar .stat .stat-card { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--out), transform .5s var(--out); transition-delay: calc(.35s + var(--k, 0) * .14s); }
html.motion .sofar.is-in .stat .pill { animation: pin-drop .55s var(--out) both; animation-delay: calc(var(--k, 0) * .14s); }
html.motion .sofar.is-in .stat-lead .pill { animation-name: pin-drop-tilt; }
@keyframes pin-drop-tilt { 0% { opacity: 0; transform: translateY(-48px) rotate(-3deg); } 55% { opacity: 1; transform: rotate(-3deg); } 66% { transform: rotate(-3deg) scale(1.04, .92); } 100% { opacity: 1; transform: rotate(-3deg); } }
html.motion .sofar.is-in .stat .stat-card { opacity: 1; transform: none; }
.stats-wait { position: relative; z-index: 2; margin-top: 28px; padding: 0 var(--gutter); max-width: 1536px; margin-left: auto; margin-right: auto; font: 600 18px/1.4 var(--text); }
.stats-wait[hidden] { display: none; }
@media (max-width: 959px) {
  .sofar { min-height: 0; padding-bottom: 56px; }
  .sofar-in { padding-top: 72px; }
  .stats { position: relative; inset: auto; display: grid; gap: 30px; padding: 40px var(--gutter) 0; }
  .stat { position: static; transform: none; justify-items: start; max-width: none; }
  .stat:nth-child(odd):not(.stat-lead) { justify-self: end; justify-items: end; }
  .stat .stat-card { justify-items: start; text-align: left; }
  .stat:nth-child(odd):not(.stat-lead) .stat-card { justify-items: end; text-align: right; }
  .stat .pill { font-size: 40px; }
  .stat-lead { gap: 14px; }
  .stat-lead .pill { font-size: min(26vw, 104px); }
}

/* ---------- 5 what things cost: each band's price pill drops onto a strip of the map ---------- */
.cost { padding: clamp(40px, 4.4vw, 64px) 0 clamp(20px, 2vw, 28px); }
.cost-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(28px, 4vw, 56px); }
.cost-head .lead { max-width: 30ch; color: var(--mute); }
.strip { position: relative; height: clamp(560px, 74vh, 720px); background: var(--map); overflow: hidden; overflow: clip; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
.spots { position: absolute; inset: 0; }
.spot { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); transform: translate(-50%, -50%); }
.spot[open] { z-index: 3; }
.spot summary { list-style: none; cursor: pointer; display: grid; justify-items: center; gap: 10px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.spot summary::-webkit-details-marker { display: none; }
.spot .pill { font-size: clamp(30px, 2.7vw, 44px); padding: .16em .42em .06em; box-shadow: 0 .12em .26em -.06em rgba(18,18,18,.38); transition: transform .25s var(--out), background-color .25s var(--out); }
.spot-n { font: 600 15px/1.15 var(--text); background: var(--ink); color: #fff; border-radius: 8px; padding: 7px 10px 6px; white-space: nowrap; rotate: 2deg; }
.spot:nth-child(even) .spot-n { rotate: -2deg; }
.spot[open] .pill { background: var(--ink); color: var(--y); transform: rotate(-3deg); }
@media (hover: hover) { .spot summary:hover .pill { transform: translateY(-3px); } .spot[open] summary:hover .pill { transform: rotate(-3deg) translateY(-3px); } }
.spot summary:active .pill { transform: scale(.97); transition-duration: .1s; }
.spot p { position: absolute; left: 50%; top: calc(100% + 12px); width: min(300px, 80vw); transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 6px 18px 18px 18px; padding: 12px 16px 13px; font-size: 16px; line-height: 1.45; }
html.motion .spot[open] p { animation: fadein .25s linear; }
html.motion .strip .spot summary { opacity: 0; }
html.motion .strip.is-in .spot summary { animation: pin-drop .55s var(--out) both; animation-delay: calc(var(--k) * .12s); }
html.motion .strip:focus-within .spot summary { opacity: 1; animation: none; } /* keyboard focus never waits for a drop */
.cost .arrow-link { margin-top: 14px; }
@media (max-width: 959px) {
  .strip { height: auto; padding: 28px var(--gutter) 36px; }
  .spots { position: relative; inset: auto; display: grid; gap: 22px; }
  .spot { position: static; transform: none; justify-self: start; max-width: 100%; }
  .spot:nth-child(even) { justify-self: end; }
  .spot summary { justify-items: start; }
  .spot:nth-child(even) summary { justify-items: end; }
  .spot .pill { font-size: 34px; }
  .spot-n { font-size: 14px; white-space: normal; max-width: 70vw; }
  .spot p { position: static; transform: none; margin-top: 10px; width: auto; max-width: 78vw; }
}

/* ---------- 7 real people: the live verified count as a crowd of dots behind the statement; none without a live number ---------- */
.trust { position: relative; overflow: hidden; overflow: clip; padding: clamp(72px, 9vw, 140px) 0 clamp(32px, 3vw, 48px); --halo: #fff; }
.dots { position: absolute; top: clamp(72px, 9vw, 140px); right: var(--gutter); width: min(46%, 680px); display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 14px 12px; pointer-events: none; }
.dots li { --d: clamp(18px, 1.7vw, 24px); width: var(--d); height: var(--d); border-radius: 50%; background: var(--c, var(--y)); box-shadow: inset 0 0 0 2px var(--ink); transform: translate(var(--jx, 0), var(--jy, 0)); }
html.motion .dots li { opacity: 0; transform: translate(var(--jx, 0), calc(var(--jy, 0px) + 14px)) scale(.4); transition: opacity .3s var(--out), transform .5s var(--out); transition-delay: calc(var(--k, 0) * 7ms); }
html.motion .dots.is-in li { opacity: 1; transform: translate(var(--jx, 0), var(--jy, 0)); }
.trust-in { position: relative; z-index: 1; }
.trust-lead { margin-top: clamp(18px, 2.4vw, 30px); max-width: 22ch; font: 800 clamp(26px, 2.8vw, 40px)/1.06 var(--display); letter-spacing: -.02em; }
.trust-lead { text-shadow: 0 0 .1em #fff, 0 0 .2em #fff; }
.dots-cap { display: flex; align-items: center; gap: 10px; margin-top: 16px; max-width: 46ch; font-size: 15px; color: var(--mute); }
.dots-cap[hidden] { display: none; }
.dots-cap .dot { width: 14px; height: 14px; box-shadow: inset 0 0 0 2px var(--ink); }
/* three rules, three weights: the ID check is the statement, zero tolerance is the black slab with its number,
   help is one line under them. No cards, no shadows */
.trust-rules { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "id zero" "help zero"; gap: clamp(24px, 3vw, 44px) clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(40px, 4.4vw, 68px); }
.tr-id { grid-area: id; display: grid; gap: 16px; padding-top: 22px; border-top: 2.5px solid var(--ink); background: #fff; }
.tr-id h3 { font: 800 clamp(36px, 4.2vw, 64px)/.98 var(--display); letter-spacing: -.03em; max-width: 13ch; }
.tr-id p { font-size: var(--fs-lead); line-height: 1.45; color: #333; max-width: 40ch; }
.tr-zero { grid-area: zero; display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 2.6vw, 36px); background: var(--ink); color: #fff; border-radius: 30px 30px 30px 8px; rotate: 1.5deg; margin-top: calc(-1 * clamp(40px, 11vw, 170px)); position: relative; z-index: 1; }
.tr-k { font: 600 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.tr-big .pill { font-size: clamp(56px, 6.4vw, 96px); padding: .1em .34em 0; border-width: .03em; rotate: -4deg; }
.tr-zero > p:last-child { font-size: 17px; line-height: 1.45; max-width: 30ch; color: rgba(255,255,255,.88); }
.tr-help { grid-area: help; font-size: 17px; line-height: 1.45; color: #333; max-width: 52ch; }
.tr-help b { color: var(--ink); font: 800 19px/1 var(--display); }
.trust-where { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(36px, 4vw, 56px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.trust-where .pill { font-size: clamp(24px, 2.2vw, 32px); padding: .26em .6em .12em; transform: rotate(-2deg); }
@media (max-width: 959px) {
  .dots { position: relative; top: auto; right: auto; width: auto; margin: 0 var(--gutter) 22px; justify-content: flex-start; gap: 9px 8px; }
  .dots li { --d: 16px; }
  .trust-rules { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "zero" "help"; }
  .tr-zero { rotate: 1deg; margin: 6px 4px 0; }
}

/* ---------- 8 and 9 on the home: the /business pool and the /earn dot, unheld, one screen each ---------- */
.pool.is-home, .earn.is-home { height: auto; }
.pool.is-home .frame, .earn.is-home .frame { position: relative; height: 100vh; height: 100svh; min-height: 680px; max-height: 1000px; }
.pool.is-home .pool-in, .earn.is-home .earn-in { padding-top: clamp(56px, 9vh, 110px); }
.pool.is-home .pool-h, .earn.is-home .earn-h { font-size: var(--fs-statement); }
.pool-acts, .earn.is-home .earn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.earn-no { margin-top: 10px; font: 800 clamp(20px, 1.8vw, 26px)/1.1 var(--display); letter-spacing: -.01em; }
.earn.is-home .earn-steps { display: none; }
@media (max-width: 959px) {
  .pool.is-home .frame, .earn.is-home .frame { height: auto; min-height: 0; max-height: none; }
  .pool.is-home .pool-in, .earn.is-home .earn-in { padding-top: 56px; }
  .earn.is-home .earn-map { margin-bottom: 0; }
  .pool.is-home .pool-map { margin-bottom: 0; }
}

/* ---------- 12 before you post ---------- */
.faq { padding: clamp(64px, 8vw, 130px) 0; border-top: 1px solid var(--rule); }
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.faq .statement { position: sticky; top: calc(var(--nav-h) + 32px); }
.qs details { border-bottom: 1px solid var(--rule); }
.qs details:first-child { border-top: 2.5px solid var(--ink); }
.qs summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font: 800 clamp(21px, 1.9vw, 28px)/1.15 var(--display); letter-spacing: -.012em; touch-action: manipulation; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary > i { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--y); box-shadow: inset 0 0 0 2.5px var(--ink); transition: transform .3s var(--out); }
.qs summary > i::before, .qs summary > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; background: var(--ink); border-radius: 2px; }
.qs summary > i::after { transform: rotate(90deg); }
.qs details[open] summary > i { transform: rotate(45deg); }
.qs summary:active { transform: scale(.99); transform-origin: left; }
.qs p { padding: 0 0 22px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: #333; }
html.motion .qs details[open] p { animation: fadein .25s linear; }
@media (max-width: 959px) {
  .faq-in { grid-template-columns: 1fr; }
  .faq .statement { position: static; }
  .qs summary > i { width: 40px; height: 40px; }
}

/* ---------- footer ---------- */
.foot { position: relative; padding-top: clamp(56px, 6vw, 96px); overflow: hidden; overflow: clip; }
.foot-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.foot h2 { margin-bottom: 10px; color: var(--mute); }
.foot ul { display: grid; gap: 0; font-size: 15px; }
.foot ul a { display: inline-flex; min-height: 30px; align-items: center; }
@media (hover: hover) { .foot ul a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: clamp(32px, 4vw, 56px); padding: 14px 0; border-top: 1px solid var(--rule); font-size: 13px; color: var(--mute); }
.foot-wm { display: block; width: calc(100% - 2 * var(--gutter)); max-width: 1440px; height: auto; margin: clamp(20px, 3vw, 44px) auto var(--gutter); color: var(--ink); } /* the whole LED H lockup, chin guard included, inside the page margins */
@media (max-width: 959px) {
  .foot { padding-top: 48px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .foot-col2 { display: grid; gap: 24px; }
  .foot ul a { min-height: 32px; }
  .foot-base { margin-top: 28px; }
}
@media (min-width: 960px) { .foot-col2 { display: contents; } }

/* ---------- inner pages: the parts every inner page shares (page CSS builds its device on top) ---------- */
:root { --fs-inner: clamp(48px, min(8.9vw, 14.2vh), 128px); --fs-h2: clamp(36px, 5vw, 72px); }
/* the page's own tab in the nav, drawn as the app's active tab */
.nav-links a[aria-current="page"] { background: var(--y); box-shadow: inset 0 0 0 2.5px var(--ink); }
.sheet-links a[aria-current="page"] { text-decoration: underline 6px var(--y); text-underline-offset: 8px; }
.pg-h1 { font: 800 clamp(48px, 8.9vw, 128px)/.92 var(--display); letter-spacing: -.035em; }
.pg-h2 { font: 800 var(--fs-h2)/.95 var(--display); letter-spacing: -.03em; }
/* keyboard focus never lands inside a fade that has not played yet */
html.motion [data-fade]:focus-within { opacity: 1; transform: none; transition: none; }
/* the opener on the map, the breadcrumb chip, inner type and the registry rows (/ai, /about, /contact) */
:root { --fs-ih1: clamp(min(64px, 15vw), 8.9vw, 128px); --fs-ih2: clamp(36px, 5vw, 72px); --fs-ih3: clamp(26px, 2.78vw, 40px); }
.open { position: relative; min-height: 100vh; min-height: 100svh; background: var(--map); --halo: var(--map); overflow: hidden; overflow: clip; padding: calc(var(--nav-h) + clamp(24px, 4.4vh, 48px)) 0 clamp(40px, 7vh, 80px); }
.open > .wrap { position: relative; z-index: 1; }
.crumb ol { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.crumb li { display: flex; align-items: center; gap: 8px; }
.crumb li + li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 1.5px var(--ink); }
.crumb a { display: inline-flex; align-items: center; min-height: 36px; }
@media (hover: hover) { .crumb a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } }
.ih1 { margin-top: clamp(18px, 3vh, 32px); font: 800 var(--fs-ih1)/.92 var(--display); letter-spacing: -.035em; }
.ih2 { font: 800 var(--fs-ih2)/.94 var(--display); letter-spacing: -.03em; }
.ih3 { font: 800 var(--fs-ih3)/1 var(--display); letter-spacing: -.02em; }
.ih-lead { max-width: 34ch; margin-top: clamp(18px, 3vh, 30px); font: 600 var(--fs-lead)/1.42 var(--text); text-shadow: 0 0 .2em #fff, 0 0 .4em #fff, 0 0 .7em #fff; }
.tool { display: inline-block; font: 600 14px/1 var(--text); letter-spacing: .02em; padding: 7px 10px 6px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); white-space: nowrap; }
@media (max-width: 959px) {
  .crumb ol { font-size: 12px; min-height: 34px; }
  .ih-lead { font-size: 17px; }
    }

/* registry rows: a label, then the values in pills (numbers yellow, words white) */
.reg-sec { padding: clamp(80px, 10vw, 150px) 0 clamp(64px, 8vw, 120px); }
.reg-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.reg-intro { font-size: var(--fs-lead); line-height: 1.45; max-width: 44ch; color: var(--mute); }
.reg { margin: 0; border-top: 2.5px solid var(--ink); }
.reg-row { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr); gap: 12px clamp(24px, 4vw, 64px); padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.reg-row dt { color: var(--mute); padding-top: .9em; }
.reg-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reg .pill { font-size: clamp(22px, 2.2vw, 34px); max-width: 100%; white-space: normal; text-align: left; }
.pill-w { background: #fff; }
.pill-a { touch-action: manipulation; transition: transform .25s var(--out), background-color .25s var(--out); }
@media (hover: hover) { .pill-a:hover { transform: translateY(-2px); background: var(--y); } }
.pill-a:active { transform: scale(.97); transition-duration: .1s; }
.reg dd p { font-size: 17px; line-height: 1.75; max-width: 62ch; color: #333; }
.reg dd p a, .reg-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--y); }
.reg .pill-in { font-size: 1.06em; padding: .1em .42em 0; border-width: 2px; vertical-align: baseline; }
.reg-note { margin-top: 26px; font-size: var(--fs-lead); }
@media (max-width: 959px) {
  .reg-head { grid-template-columns: 1fr; }
  .reg-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .reg-row dt { padding-top: 0; }
  .reg .pill { font-size: 20px; }
  .reg dd { gap: 8px; }
}
/* the app's 24 h timer (each page places it on its own map) */
.clock svg { position: absolute; inset: 9%; width: 82%; height: 82%; transform: rotate(-90deg); overflow: visible; }
.clock circle { fill: none; }
.clock-bg { stroke: rgba(18,18,18,.12); stroke-width: 8; }
.clock-in { stroke: var(--y); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.clock span { position: relative; font: 800 calc(var(--cd) * .3)/1 var(--display); letter-spacing: -.02em; padding-top: .08em; }
/* the closing strip (tools/endband.mjs writes the same markup into every inner page): yellow, the street plate under it,
   the brand line, Post a task, two sibling pages and home. Never held */
.end-band { position: relative; overflow: hidden; overflow: clip; background: var(--y); --halo: var(--y); padding: clamp(72px, 9vw, 140px) 0 clamp(64px, 8vw, 120px); }
.end-band .map-bg { opacity: .9; }
.end-in { position: relative; z-index: 1; display: grid; justify-items: start; gap: clamp(24px, 3vw, 40px); }
.end-h { font: 800 clamp(56px, min(11vw, 17vh), 160px)/.92 var(--display); letter-spacing: -.035em; }
.end-h .ln { padding-right: .3em; }
.end-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.end-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
@media (max-width: 959px) {
  .end-in { justify-items: stretch; }
  .end-acts { flex-direction: column; align-items: stretch; gap: 8px; }
  .end-acts .btn { width: 100%; }
  .end-links { flex-direction: column; }
}

/* ---------- reduced motion, contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .dot { animation: none !important; }
  .taps .cam, .lock-wrap { transition: none !important; }
  .person, .person .up, .person .km, .hands, .held, .stamp, .rule .pill, .badge, .bubble, .obj, .obj img, .plate-y, .mk-taps .tk { transition-duration: .2s !important; transition-delay: 0s !important; }
  .board-row { flex-wrap: wrap; width: auto; row-gap: 8px; }
}
@media (prefers-contrast: more) {
  :root { --rule: rgba(18,18,18,.4); }
  .ask, .bubble { box-shadow: 0 0 0 2px var(--ink); }
  .halo .ln > span { text-shadow: none; background: #fff; }
}