/* HSTLE site v5.1 (21 Oct 2026): the shared system. Product-led, built on the Apple system measured in
   design/site-v5/APPLE-SYSTEM.md (type scale, rhythm, section templates, the phone that holds still),
   in HSTLE's own look: Baloo 2 + Mukta, near-black #141414, taxi yellow used as whole fields (hero, Earn, the AI
   panel, the band), the clay objects, people as map pins, the Ho gaya stamp and the HSTLE cat (the chosen
   mascot: a live 3D figure in the hero from mascot3d.js, clean renders of the same model everywhere else). The logo is drawn once, as <symbol id="logo"> in the page.
   Templates: .hero (T1) · .head (T3 statement + grey paragraph) · .stage (T4 phone holds, screen changes)
   · .rail (T5 card gallery: task cards, earn phones) · .answers and .tiles (T6 grey label + black line)
   · .panel (a real screen cut by its panel's edge) · .seg (T7 segmented screen switch) · .bento (T8 one fact per tile)
   · .qs (T9) · .band (T10 closing band) · .phone (the one device frame, used everywhere). */

@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 Hindi pages, the language menu): 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; }

:root {
  /* colour: white ground, black type, taxi yellow the only brand colour (a surface, never text on white) */
  --ground: #fff;
  --ink: #141414;
  --ink-2: #6b6b70;                 /* the grey of the explaining paragraph: 5.3:1 on white, 4.9:1 on the tile surface */
  --surface: #f5f5f2;               /* tile surface, warm grey */
  --rule: rgba(18, 18, 18, .12);
  --y: #FFC600;
  --on-y: rgba(20, 20, 20, .74);        /* the explaining grey, on yellow: 7.6:1 */
  --dark: #141414; --dark-2: #a1a1a6; --dark-surface: #1f1f1f;
  /* rainbow category colours: categories only, as chips */
  --c-errands: #FFC600; --c-line: #2F6BFF; --c-home: #9BD32C; --c-food: #FF9F43;
  --c-shop: #FF6B5B; --c-desk: #7A5CFF; --c-content: #141414; --c-field: #22B07D;

  /* type */
  --display: 'Baloo 2', 'Mukta', system-ui, sans-serif;
  --text: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-chapter: clamp(38px, 1.6rem + 4.6vw, 88px);   /* chapter openers: How, Money, Earn, Zone, the band */
  --t-hero: clamp(44px, 1rem + 5.55vw, 100px);
  --t-section: clamp(32px, 1.45rem + 2.1vw, 56px);   /* supporting headers */
  --t-step: clamp(30px, 1.2rem + 2.3vw, 52px);
  --t-stat: clamp(40px, 1.6rem + 2.6vw, 72px);
  --t-tile: clamp(24px, 1.1rem + 1vw, 34px);
  --t-eyebrow: clamp(17px, 1rem + .25vw, 20px);
  --t-intro: clamp(18px, 1.05rem + .2vw, 21px);
  --t-body: 17px;
  --t-caption: clamp(15px, .9rem + .15vw, 17px);
  --t-label: 14px;
  --t-micro: 12px;

  /* space: Apple's rhythm, measured */
  --content: min(87.5%, 1180px);
  --s-section: clamp(96px, 6vw + 60px, 160px);
  --s-proof: clamp(44px, 5vw, 88px);
  --s-lockup: 8px;
  --s-head-intro: clamp(14px, 1.5vw, 24px);
  --gutter: 20px;
  --r-card: clamp(20px, 2vw, 28px);
  --r-pill: 980px;
  --nav-h: 72px;
  --pw: 300px;                       /* phone width; set on a container or on the .phone itself */

  /* motion: Apple's standard curve and durations */
  --ease: cubic-bezier(.4, 0, .6, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --d-ui: 240ms; --d-swap: 420ms; --d-reveal: 700ms; --d-fade: 900ms;
  --reveal-y: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: clip; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.5 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--y); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: var(--content); margin-inline: auto; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 300; background: var(--y); color: var(--ink); border-radius: var(--r-pill); padding: 12px 18px; font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- type roles ---------- */
.eyebrow { font: 600 var(--t-eyebrow)/1.2 var(--text); color: var(--ink-2); }
.eyebrow-y { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-y::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--y); box-shadow: inset 0 0 0 1.5px var(--ink); }
.h-hero, .h-section, .h-step, .h-chapter, .h-tile { font-family: var(--display); font-weight: 800; text-wrap: balance; }
.h-hero { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.02em; }
.h-section { font-size: var(--t-section); line-height: 1.06; letter-spacing: -.015em; }
.h-chapter { font-size: var(--t-chapter); line-height: 1.0; letter-spacing: -.025em; }
.h-step { font-size: var(--t-step); line-height: 1.08; letter-spacing: -.01em; }
.h-tile { font-size: var(--t-tile); line-height: 1.12; letter-spacing: -.005em; }
.h-grey { color: var(--ink-2); }
/* Devanagari: the headline bar joins the letters, so no negative tracking; marks above and below need line height */
:lang(hi) * { letter-spacing: 0 !important; }
:lang(hi) :is(.h-hero, .h-section, .h-chapter, .h-step, .h-tile, .h-way) { line-height: 1.24; }
:lang(hi) :is(.intro, .cap, .qs) { line-height: 1.6; }
:lang(hi) .h-hero { font-size: clamp(40px, 1rem + 4.9vw, 88px); }   /* Devanagari sets taller than Latin at the same size */
.on-dark .h-grey { color: var(--dark-2); }
/* the explaining paragraph: semibold grey, the words that matter in ink */
.intro { font: 600 var(--t-intro)/1.45 var(--text); color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.intro b, .cap b, .tile-p b { color: var(--ink); font-weight: 600; }
.on-dark .intro, .on-dark .cap { color: var(--dark-2); }
.on-dark .intro b, .on-dark .cap b { color: #fff; }
.cap { font: 600 var(--t-caption)/1.38 var(--text); color: var(--ink-2); }
.micro { font: 500 var(--t-micro)/1.4 var(--text); color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.ex { display: inline-block; font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 7px 4px; white-space: nowrap; vertical-align: middle; }
.on-dark .ex { color: var(--dark-2); border-color: rgba(255,255,255,.2); }

/* ---------- links and buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--r-pill); font: 600 17px/1 var(--text); text-decoration: none; cursor: pointer; transition: background-color 100ms linear, transform 100ms var(--ease); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn-y { background: var(--y); color: var(--ink); }
.btn-y:hover { background: #ffd33d; }
.btn-k { background: var(--ink); color: #fff; }
.btn-k:hover { background: #2b2b2b; }
.btn-w { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-w:hover { background: var(--surface); }
.btn-sm { min-height: 36px; padding: 8px 16px; font-size: 15px; }
.more { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--t-caption)/1.3 var(--text); color: var(--ink); text-decoration: none; background: linear-gradient(var(--y), var(--y)) 0 100% / 0 2px no-repeat; transition: background-size var(--d-ui) var(--ease); padding-bottom: 2px; }
.more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 3px; }
.more:hover { background-size: 100% 2px; }
.on-dark .more { color: #fff; }

/* ---------- nav: one floating glass bar, logo in one replaceable place (.logo img) ---------- */
.nav { position: fixed; z-index: 50; top: 10px; left: 0; right: 0; pointer-events: none; transition: transform .4s var(--ease-out); }
.nav.is-hidden { transform: translateY(calc(-100% - 14px)); }
.nav-in { pointer-events: auto; width: min(calc(100% - 20px), 1080px); margin: 0 auto; height: 52px; display: flex; align-items: center; gap: 20px; padding: 0 8px 0 18px; border-radius: 18px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px -16px rgba(0,0,0,.25); }
.logo { display: inline-flex; align-items: center; flex: none; border-radius: 6px; }
.wm { display: block; width: 141px; height: 32px; } /* the LED H lockup with the custom-visor word (4.41:1) */
/* 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) { .logo:hover { --led-eyes: 1; } }
@media (prefers-reduced-motion: no-preference) { .logo { transition: --led-eyes .2s ease-out; } }
.nav-links { display: flex; gap: 2px; margin: 0 auto; }
.nav-links a { font: 600 14px/1 var(--text); text-decoration: none; padding: 10px 12px; border-radius: 10px; color: var(--ink); transition: background-color var(--d-ui) var(--ease); }
.nav-links a:hover { background: rgba(0,0,0,.05); }
.nav-links a:active { transform: scale(.97); }
.nav .btn { min-height: 36px; padding: 8px 16px; font-size: 15px; }
.menu-btn { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; position: relative; }
.menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--ink); }
.menu-btn::before { top: 15px; } .menu-btn::after { bottom: 15px; }
.menu-btn:active { transform: scale(.94); }
.menu { width: min(calc(100% - 20px), 420px); max-width: none; margin: 10px auto auto; padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 30px 60px -20px rgba(0,0,0,.35); }
.menu:focus { outline: none; }
.menu::backdrop { background: rgba(0,0,0,.28); }
.menu[open] { animation: menu-in .32s var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.menu-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px 18px; }
.menu-x { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--surface); cursor: pointer; position: relative; }
.menu-x::before, .menu-x::after { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; height: 2px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); }
.menu-x::after { transform: rotate(-45deg); }
.menu nav { display: grid; padding: 6px 10px; }
.menu nav a { font: 800 26px/1.2 var(--display); text-decoration: none; padding: 10px 8px; border-radius: 12px; }
.menu nav a:active { background: var(--surface); }
.menu .btn { margin: 6px 18px 18px; width: calc(100% - 36px); }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-in { gap: 8px; padding-left: 16px; }
  .nav .btn { margin-left: auto; }
  .menu-btn { display: block; }
}

/* ---------- language: a globe pill in the bar (in the menu on a phone); English and हिंदी behind it.
   The same block sits in assets/v4/site.css with its own tokens below, so both systems look alike; the script is
   lang() in site.js and in v4/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; }
.menu .lang { margin-left: auto; margin-right: 8px; }
@media (max-width: 900px) { .nav-in > .lang { display: none; } }

/* ---------- sections ---------- */
.sec { padding-block: var(--s-section); }
.sec-flush-top { padding-top: 0; }
.sec-tight-top { padding-top: clamp(64px, 6vw, 112px); }
.sec-grey { background: var(--surface); }
.on-dark { background: var(--dark); color: #fff; }
.on-dark .eyebrow, .on-dark .step-n { color: var(--dark-2); }
.head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-lockup); }
.head .h-section, .head .h-chapter { margin-bottom: calc(var(--s-head-intro) - var(--s-lockup)); }
.head .more { margin-top: 12px; justify-self: start; }
.head-c { justify-items: center; text-align: center; }
.head-c .intro { margin-inline: auto; }
.head-c .more { justify-self: center; }
.proof { margin-top: var(--s-proof); }

/* reveal: Apple's staggered fade-in (opacity .9s, 30 px over .7s, .15s stagger). Only with JS and motion allowed */
.motion [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--d-fade) var(--ease), transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 150ms); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- the phone: a realistic modern frame in CSS, real screens inside ---------- */
/* --pw sets the width; everything scales from it. Screen = a status bar + the app's 390x844 viewport */
.phone { position: relative; width: var(--pw); flex: none; }
.phone-body { position: relative; padding: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .165); background: linear-gradient(145deg, #2c2c2e, #0d0d0e 45%, #1c1c1e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 calc(var(--pw) * .008) #000, 0 1px 1px rgba(0,0,0,.12), 0 28px 50px -24px rgba(0,0,0,.45), 0 60px 90px -50px rgba(0,0,0,.35); }
/* the titanium edge highlight */
.phone-body::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: linear-gradient(160deg, #b9b9be, #4a4a4e 30%, #2a2a2c 60%, #8e8e93); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
/* side buttons: action + volume on the left, power on the right */
.phone-body::after { content: ""; position: absolute; left: calc(var(--pw) * -.009); top: 18%; width: calc(var(--pw) * .01); height: 8%; border-radius: 2px 0 0 2px; background: #3a3a3c; box-shadow: 0 calc(var(--pw) * .2) 0 #3a3a3c, 0 calc(var(--pw) * .34) 0 #3a3a3c, calc(var(--pw) * 1.008) calc(var(--pw) * .25) 0 #3a3a3c; }
.phone-screen { position: relative; overflow: hidden; border-radius: calc(var(--pw) * .135); background: #fff; isolation: isolate; }
.phone-status { position: relative; z-index: 2; aspect-ratio: 390 / 50; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; background: #fff; font: 600 calc(var(--pw) * .042)/1 var(--text); color: #000; }
.phone-status .island { position: absolute; left: 50%; top: 18%; width: 31%; height: 62%; translate: -50% 0; border-radius: 999px; background: #000; }
.phone-status svg { height: calc(var(--pw) * .032); width: auto; }
.phone-status .sys { display: flex; gap: calc(var(--pw) * .012); align-items: center; }
.phone-view { position: relative; aspect-ratio: 390 / 844; background: #f2f2ef; }
.phone-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* the ask box: the app's own "What needs doing?" bar; it calls the real estimate on submit */
.ask { width: min(100%, 600px); margin-top: 18px; }
.ask-bar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(18,18,18,.14), 0 12px 32px -22px rgba(0,0,0,.4); transition: box-shadow var(--d-ui) var(--ease); }
.ask-bar:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(255,198,0,.4); }
.ask-bar input { flex: 1; width: 0; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 400 18px/1 var(--text); color: var(--ink); }
.ask-bar input::placeholder { color: var(--ink-2); }
.ask-bar .btn { min-height: 44px; padding: 10px 18px; border-radius: 14px; flex: none; }
.ask-out:empty { display: none; }
.ask-out { margin-top: 14px; }
.fare { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; padding: 18px 20px; border-radius: 20px; background: #fff; }
.fare-t { font: 800 20px/1.2 var(--display); }
.fare-r { grid-column: 1 / -1; font: 400 15px/1.45 var(--text); color: var(--ink-2); }
.fare-p { font: 800 34px/1 var(--display); letter-spacing: -.02em; text-align: right; }
.fare-p small { display: block; font: 600 12px/1.3 var(--text); color: var(--ink-2); letter-spacing: 0; margin-top: 4px; }
.fare-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.fare.is-loading .fare-t::after { content: ""; display: inline-block; width: 1em; animation: dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1em; } }

/* ---------- T1 hero on a yellow field: the claim on the left, the real posting screen held still beside it ---------- */
.hero { position: relative; overflow: hidden; background: var(--y); padding-top: calc(var(--nav-h) + clamp(20px, 3vw, 48px)); padding-bottom: clamp(56px, 6vw, 96px); }
.hero-in { width: var(--content); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(56px, 9vw, 150px); align-items: center; }
.hero-copy { grid-column: 1; grid-row: 1; align-self: end; display: grid; justify-items: start; gap: 18px; }
.hero-proof { display: contents; }
.hero-scene { grid-column: 2; grid-row: 1 / span 2; position: relative; }
.hero-phone { --pw: min(360px, calc((100svh - var(--nav-h) - 72px) / 2.22)); position: relative; z-index: 2; }
.hero-sheet { display: none; }
.hero .eyebrow, .hero .tag, .sec-y .eyebrow, .sec-y .tag { color: var(--on-y); }
.hero .intro, .sec-y .intro { color: var(--on-y); }
.hero-cap { grid-column: 1; grid-row: 2; align-self: start; margin-top: clamp(28px, 3vw, 44px); max-width: 27em; padding-top: 20px; border-top: 1px solid rgba(20,20,20,.2); color: var(--on-y); }
.hero-cap b { color: var(--ink); }
.hero-line { max-width: 30em; }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.hero .more, .sec-y .more { background-image: linear-gradient(var(--ink), var(--ink)); }
/* the trust line under the hero actions: a shield with a check (never a hand), linked to the full rule in Who does it */
.trust-id { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(20,20,20,.14); font: 600 var(--t-caption)/1.2 var(--text); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-ui) var(--ease), transform 100ms var(--ease); }
.trust-id svg { width: 22px; height: 22px; flex: none; }
.trust-id:hover { background: #fff; }
.trust-id:active { transform: scale(.97); }
.tag { display: block; font: 500 var(--t-micro)/1.4 var(--text); color: var(--ink-2); }
.on-dark .tag { color: var(--dark-2); }
.hero-cap .tag { margin-top: 10px; }
/* the scene around the held phone: the cat beside it, a clay bag behind, people nearby as map pins.
   The cat is a 3:4 box: its clean render (the poster) until the live 3D figure takes over; --cw is the figure's
   width, and the box leaves room around it to turn and hop (the figure is 78% of the box's height, feet 7.5% up) */
.cat { --cw: 150px; display: block; width: calc(var(--cw) * 1.78); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cat-body { position: relative; display: block; aspect-ratio: 3 / 4; transition: scale var(--d-ui) var(--ease); }
.cat:active .cat-body { scale: .96; }
.cat img, .cat-3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity .45s var(--ease); }
/* the live canvas reaches 45% above the figure's box (mascot3d.js EXT) so the cat can drop in; its top edge fades */
.cat-3d { top: auto; height: 145%; opacity: 0; pointer-events: none; -webkit-mask-image: linear-gradient(#0000, #000 10%); mask-image: linear-gradient(#0000, #000 10%); }
.cat.is-3d .cat-3d { opacity: 1; }
.cat.is-3d img { opacity: 0; }
/* first arrival: one continuous hop. The still figure crouches and springs up (solid, no fade); at the top of the
   jump the live figure takes over at the same height (mascot3d.js DROP.from: 0.5 of the figure = 39% of the box),
   falls, lands with a squash and a bright scan sweeps its visor. is-cut drops the cross-fade for that one swap */
@media (prefers-reduced-motion: no-preference) {
  .cat.is-arriving img { transform-origin: 50% 92%; animation: cat-leap .26s both; }
  .cat.is-arriving .cat-3d, .cat.is-cut img, .cat.is-cut .cat-3d { transition: none; }
}
@keyframes cat-leap {
  0% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  32% { transform: translateY(1.5%) scale(1.05, .92); animation-timing-function: cubic-bezier(.15, .65, .35, 1); }
  100% { transform: translateY(-39%) scale(.98, 1.04); }
}
.cat.is-3d { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cat img { -webkit-user-drag: none; } /* the live figure turns by hand; vertical swipes still scroll */
.cat.is-3d:active { cursor: grabbing; }
.cat:focus-visible { outline: none; }
.cat:focus-visible .cat-body::after { content: ""; position: absolute; inset: 9% 17% 3%; border-radius: 28px; box-shadow: 0 0 0 3px var(--ink); pointer-events: none; } /* the ring hugs the figure, not the box */
.cat-hero { --cw: clamp(150px, 12.6vw, 186px); position: absolute; z-index: 4; left: calc(-55% - var(--cw) * .39); bottom: calc(var(--cw) * -.178); }
.obj { height: auto; pointer-events: none; }
/* around the phone, never behind it: the bag in front of its top left corner, the pins out in the open on both sides */
.obj-hero { --bw: clamp(124px, 11vw, 168px); position: absolute; z-index: 3; width: var(--bw); left: calc(20px - var(--bw)); top: -3%; rotate: -9deg; filter: drop-shadow(0 20px 16px rgb(90 55 0 / .3)) drop-shadow(0 3px 3px rgb(90 55 0 / .2)); }
.motion .obj-hero { animation: float 7s var(--ease) infinite; }
@keyframes float { 50% { translate: 0 -10px; rotate: -5deg; } }
.pin { position: absolute; z-index: 3; width: 60px; height: 60px; display: grid; place-items: center; padding-top: 3px; font: 800 25px/1 var(--display); color: var(--ink); }
.pin::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 7px; transform: rotate(-45deg); background: #fff; box-shadow: inset 0 0 0 3px var(--ink), 0 18px 22px -8px rgb(70 45 0 / .45), 0 3px 5px rgb(70 45 0 / .18); }
.pin-2 { color: var(--y); }
.pin-2::before { background: var(--ink); }
.pin-3::before { background: var(--y); }
/* side room: the page gutter on the right, the column gap on the left; a pin never overlaps the phone by more than its edge */
.hero-scene { --side-r: min(100px, max(6.25vw, (100vw - 1180px) / 2) - 14px); --side-l: min(98px, clamp(56px, 9vw, 150px) - 6px); }
.hero-scene .pin-1 { right: calc(-1 * var(--side-r)); top: 16%; }
.hero-scene .pin-2 { left: calc(-1 * var(--side-l)); top: 39%; }
.hero-scene .pin-3 { right: calc(-1 * var(--side-r) + 6px); top: 43%; }
.motion .pin { animation: bob 3.8s var(--ease) infinite; }
.motion .pin-2 { animation-delay: -1.2s; } .motion .pin-3 { animation-delay: -2.4s; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* ---------- four ways in: one tall black door, two grey, one wide yellow ---------- */
.sec-ways { padding-block: clamp(72px, 7vw, 128px) clamp(16px, 2vw, 32px); }
.ways-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 3vw, 44px); }
.ways { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.way-post { grid-row: 1 / span 2; }
.way-ai { grid-column: 2 / span 2; }
.way a { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; min-height: clamp(270px, 22vw, 320px); padding: clamp(24px, 2.4vw, 36px); border-radius: var(--r-card); background: var(--surface); text-decoration: none; overflow: hidden; transition: background-color var(--d-ui) var(--ease), transform var(--d-ui) var(--ease); }
.way a:hover { background: #ecece6; }
.way a:active { transform: scale(.985); }
.way-k { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.h-way { font: 800 clamp(30px, 1.2rem + 1.7vw, 50px)/1.02 var(--display); letter-spacing: -.02em; margin-top: 4px; }
.way p { font: 600 var(--t-caption)/1.42 var(--text); color: var(--ink-2); max-width: min(22em, 60%); }
.way-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-caption)/1 var(--text); }
.way-go::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: translate var(--d-ui) var(--ease); }
.way a:hover .way-go::after { translate: 3px 0; }
.way-cat { position: absolute; z-index: -1; right: clamp(14px, 1.8vw, 28px); bottom: 12px; width: auto; height: clamp(150px, 12.4vw, 184px); transition: transform .6s var(--ease-out); }
.way a:hover .way-cat { transform: translateY(-8px) rotate(-3deg); }
.way-post a { background: radial-gradient(200px 240px at right 140px bottom 190px, rgb(255 198 0 / .15), rgb(255 198 0 / 0) 70%), var(--ink); color: #fff; } /* a display-case light behind the figure: the black helmet keeps its edge on black */
.way-post a:hover { background-color: #222; }
.way-post p, .way-post .way-k { color: var(--dark-2); }
.way-post .h-way { font-size: clamp(40px, 1.4rem + 3vw, 72px); }
.way-post .way-cat { height: clamp(230px, 22vw, 320px); right: clamp(20px, 3vw, 44px); bottom: 18px; }
.way-zone a { background: radial-gradient(130px 160px at right 85px bottom 110px, rgb(255 198 0 / .15), rgb(255 198 0 / 0) 70%), var(--ink); color: #fff; }
.way-zone a:hover { background-color: #222; }
.way-zone p, .way-zone .way-k { color: var(--dark-2); }
.way-ai a { background: var(--y); }
.way-ai a:hover { background: #ffcf26; }
.way-ai p, .way-ai .way-k { color: var(--on-y); }
.way-ai p { max-width: min(30em, 66%); }
.new { display: inline-block; font: 700 11px/1 var(--text); letter-spacing: .07em; text-transform: uppercase; background: var(--y); color: var(--ink); padding: 5px 8px 4px; border-radius: 99px; vertical-align: 2px; }
.way-ai .new { background: var(--ink); color: var(--y); }
.eyebrow .new { margin-right: 6px; }

/* ---------- T4 the stage: four steps; the phone holds still while its screen swaps ---------- */
.stage { position: relative; }
.stage-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 520px) auto; justify-content: center; column-gap: clamp(56px, 8vw, 136px); align-items: center; padding-block: 24px; width: var(--content); margin-inline: auto; }
.stage-text { display: grid; align-content: center; justify-items: start; }
.stage-caps { position: relative; display: grid; width: 100%; }
/* one caption at a time, with a short overlap so the pane is never empty: the old one leaves in 220 ms, the new one
   starts at 120 ms and is half in by the time the old one is gone */
.stage-caps > li { grid-area: 1 / 1; align-self: start; opacity: 0; }
.stage-caps > li.is-off { opacity: 0; transition: opacity 220ms var(--ease); }
.stage-caps > li.is-on { opacity: 1; transition: opacity 360ms var(--ease) 120ms; }
.motion .stage-caps > li > * { transform: translateY(16px); }
.motion .stage-caps > li.is-off > * { transform: translateY(-10px); transition: transform 220ms var(--ease); }
.motion .stage-caps > li.is-on > * { transform: none; transition: transform 600ms var(--ease-out) 120ms; }
.motion .stage-caps > li.is-on > :nth-child(2) { transition-delay: 160ms; } .motion .stage-caps > li.is-on > :nth-child(3) { transition-delay: 200ms; }
.step-n { display: flex; align-items: center; gap: 10px; font: 600 var(--t-eyebrow)/1.2 var(--text); color: var(--ink-2); margin-bottom: 12px; }
.step-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding-top: 2px; background: var(--y); color: var(--ink); font: 800 16px/1 var(--display); }
/* step four: the Ho gaya stamp lands on the phone */
.gaya { position: absolute; z-index: 3; right: -34%; top: 21%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 9px 12px; border-radius: 16px; background: var(--y); color: var(--ink); font: 800 clamp(24px, 1rem + 1vw, 34px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; box-shadow: inset 0 0 0 3px var(--ink), 0 20px 30px -14px rgba(0,0,0,.45); opacity: 0; transform: rotate(-9deg) scale(.4); transition: transform 220ms var(--ease), opacity 160ms linear; pointer-events: none; }
.gaya svg { width: 1.05em; height: 1.05em; margin-top: -3px; padding: 4px; border-radius: 50%; background: var(--ink); color: var(--y); }
[data-step="3"] .gaya { opacity: 1; transform: rotate(-9deg) scale(1); transition: transform 520ms cubic-bezier(.2, 1.6, .4, 1) 380ms, opacity 120ms linear 380ms; }
.stage-caps .h-step { margin-bottom: 18px; }
.stage-caps .intro { max-width: 25em; }
.stage-tag { margin-top: 18px; }
.stage-phone { position: relative; justify-self: center; }
.stage-phone .phone { --pw: min(370px, calc((100svh - 64px) / 2.22)); }
.dots { display: flex; gap: 10px; margin-top: 36px; }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(18,18,18,.22); cursor: pointer; transition: width .25s var(--ease), background-color .25s linear; position: relative; }
.dots button::before { content: ""; position: absolute; inset: -10px -4px; }
.dots button[aria-current="step"] { width: 32px; background: var(--ink); }
/* screens: the incoming one fades in on top and rises 12 px (an arrival, not a double exposure); the outgoing one
   stays opaque underneath, so the phone never washes through white, and is dropped once the new one is solid */
.scr { opacity: 0; z-index: 0; }
.scr.was-on { opacity: 1; z-index: 1; }
.scr.is-on { opacity: 1; z-index: 2; transition: opacity var(--d-swap) var(--ease) 60ms; }
.scr.is-new.is-on { animation: scr-arrive var(--d-swap) var(--ease-out) 60ms both; }
@keyframes scr-arrive { from { transform: translateY(12px); } }
.phone-view-w { background: #fff; }
/* the pay screen is a scrolled sheet: give it the gap under the status bar the app gives it */
.phone-view img.scr-inset { top: 3.4%; height: 100%; }
.stage-spacers { padding-bottom: 40svh; }   /* the last step lands before the sticky releases */
.stage-spacers > li { height: 80svh; }
.stage-spacers > li:first-child { margin-top: -100svh; height: 100svh; }   /* step one's middle = the moment the phone sticks */
/* without JS the stage is a plain list: every caption shows, the phone shows the first screen */
html:not(.js) .stage-sticky { position: static; height: auto; padding-block: 24px; }
html:not(.js) .stage-caps > li { grid-area: auto; opacity: 1; margin-bottom: 32px; }
html:not(.js) .scr[data-scr="08"] { opacity: 1; }
html:not(.js) .stage-spacers, html:not(.js) .dots { display: none; }

/* ---------- panels: a real screen cropped by the panel's edge (Apple's tiles) ---------- */
.panel { position: relative; border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.panel-crop { padding: clamp(52px, 5vw, 72px) 24px 0; display: flex; justify-content: center; height: clamp(440px, 40vw, 580px); }
.crop-img { width: min(420px, 100%); border-radius: 26px 26px 0 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 30px 60px -30px rgba(0,0,0,.35); align-self: flex-start; }
.crop-img img { width: 100%; }
.panel-tag { position: absolute; left: 24px; top: 20px; }
.two-pick { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

/* ---------- T5 what people post: one real task card per kind, cut by its card's edge, the band in the caption ---------- */
.post-item { width: clamp(280px, 27vw, 372px); }
.post-card { position: relative; height: clamp(206px, 18vw, 236px); border-radius: var(--r-card); background: #fff; overflow: hidden; padding: 22px; }
.post-crop { position: absolute; left: 16px; width: calc(100% - 32px); bottom: -22px; height: auto; border-radius: 18px; box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.post-item .cap { margin-top: 16px; max-width: 24em; }
.post-item .more { margin-top: 10px; }

/* ---------- T6 tiles: who does it ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tile { position: relative; height: clamp(470px, 42vw, 590px); border-radius: var(--r-card); background: var(--surface); overflow: hidden; padding: clamp(28px, 3vw, 44px) clamp(72px, 7vw, 96px) 0 clamp(28px, 3vw, 44px); }
.tile .h-tile { font-size: clamp(26px, 1.1rem + 1.4vw, 40px); line-height: 1.08; }
.tile .h-tile span { color: var(--ink-2); }
.tile-img { position: absolute; left: 50%; translate: -50% 0; top: clamp(150px, 13vw, 190px); width: min(380px, 76%); border-radius: 24px 24px 0 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 30px 60px -30px rgba(0,0,0,.35); }
.tile-img img { width: 100%; }
.tile-img-mid { top: auto; bottom: clamp(48px, 6vw, 96px); border-radius: 24px; }
.plus-top { top: 22px; bottom: auto; right: 22px; background: rgba(18,18,18,.08); color: var(--ink); }
.plus-top:hover { background: rgba(18,18,18,.14); }
.tiles-tag { margin-top: 18px; }

/* ---------- T5 earn: phones cut by their card's edge, run-in captions under ---------- */
.shot { width: clamp(280px, 27vw, 372px); }
.shot-card { height: clamp(380px, 34vw, 452px); border-radius: var(--r-card); background: #fff; overflow: hidden; display: flex; justify-content: center; padding-top: clamp(28px, 3vw, 40px); }
.shot-card .phone { --pw: clamp(230px, 21vw, 290px); }
.shot .cap { margin-top: 18px; max-width: 26em; }
.facts-line { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font: 600 var(--t-caption)/1.3 var(--text); }
.facts-line li { display: inline-flex; align-items: center; gap: 10px; }
.facts-line li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 1.5px var(--ink); }
.on-dark .facts-line li::before { box-shadow: none; }
.facts-c { justify-content: center; }
.local { font: 800 clamp(26px, 1.2rem + 1.1vw, 38px)/1.1 var(--display); letter-spacing: -.01em; margin-top: 10px; }
.sec-link { margin-top: 28px; }
.sec-link-c { text-align: center; }

/* ---------- two-up ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.phone-tag { margin-top: 14px; text-align: center; }

/* ---------- HSTLE Zone: its own chapter on black; the real screens on a yellow tile, cut by its edge ---------- */
.zone-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.zone-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 32px); height: clamp(470px, 42vw, 600px); padding-top: clamp(34px, 4vw, 56px); border-radius: var(--r-card); background: var(--y); overflow: hidden; }
.zone-phones .phone { --pw: clamp(190px, 16.5vw, 246px); }
.zone-phones .phone + .phone { margin-top: clamp(40px, 5vw, 72px); }
.zone-sides { display: grid; gap: 18px; }
.zone-side { border-radius: 22px; background: var(--dark-surface); padding: clamp(22px, 2.4vw, 30px); }
.zone-side .h-tile span { color: var(--dark-2); }
.zone-side .cap { margin-top: 10px; }
.zone-steps { counter-reset: z; display: grid; gap: 14px; margin-top: 16px; }
.zone-steps li { counter-increment: z; position: relative; padding-left: 42px; font: 600 var(--t-caption)/1.42 var(--text); color: var(--dark-2); }
.zone-steps li::before { content: counter(z); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding-top: 2px; background: var(--y); color: var(--ink); font: 800 15px/1 var(--display); }
.zone-steps b { color: #fff; font-weight: 600; }
.zone-back { margin-top: 16px; padding: 14px 18px; border-radius: 16px; background: var(--y); color: var(--ink); font: 600 var(--t-caption)/1.38 var(--text); }
.zone-back b { font-weight: 700; }
.zone .facts-line { margin-top: 2px; }

/* ---------- Ask your AI: an Example conversation and the real connect screen on one yellow panel ---------- */
.ai-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(32px, 4vw, 64px) clamp(22px, 5vw, 88px) 0; border-radius: var(--r-card); background: var(--y); overflow: hidden; }
.chat { display: grid; gap: 12px; width: 100%; max-width: 540px; justify-self: center; padding-bottom: clamp(32px, 4vw, 64px); }
.chat .ex { justify-self: start; margin-bottom: 4px; color: var(--on-y); border-color: rgba(20,20,20,.28); }
.bub { max-width: 86%; padding: 14px 18px 13px; border-radius: 22px; font: 400 17px/1.45 var(--text); }
.bub-me { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.bub-ai { justify-self: start; background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 12px 24px -18px rgba(0,0,0,.45); }
.motion .ai-stage .bub { opacity: 0; translate: 0 12px; transition: opacity 500ms var(--ease), translate 600ms var(--ease-out); }
.motion .ai-stage.is-in .bub { opacity: 1; translate: 0 0; }
.motion .ai-stage.is-in .bub:nth-of-type(2) { transition-delay: .5s; } .motion .ai-stage.is-in .bub:nth-of-type(3) { transition-delay: 1.1s; } .motion .ai-stage.is-in .bub:nth-of-type(4) { transition-delay: 1.6s; }
.ai-phone { display: flex; flex-direction: column; align-items: center; align-self: end; height: clamp(440px, 40vw, 560px); overflow: hidden; }
.ai-phone .phone { --pw: clamp(240px, 21vw, 300px); }
.ai-phone .phone-tag { order: -1; margin: 0 0 12px; color: var(--on-y); }
.ai-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--gutter); }
.ai-tiers li { display: grid; gap: 6px; align-content: start; padding: clamp(22px, 2.4vw, 30px); border-radius: 22px; background: var(--surface); }
.ai-tiers li:last-child { background: var(--ink); color: #fff; }
.ai-tiers li:last-child .cap, .ai-tiers li:last-child .ai-k { color: var(--dark-2); }
.ai-k { font: 600 12px/1.2 var(--text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.ai-how { margin: 28px auto 0; max-width: 44em; text-align: center; }
code { font: 600 .95em/1 ui-monospace, 'SF Mono', Menlo, monospace; background: var(--surface); padding: 3px 7px; border-radius: 7px; white-space: nowrap; }

/* ---------- clay objects beside the chapter heads ---------- */
.what-head, .earn-head { position: relative; }
.obj-what { position: absolute; right: 0; top: -24px; width: clamp(130px, 14vw, 210px); transform: rotate(10deg); }
.obj-earn { position: absolute; right: 0; top: -12px; width: clamp(150px, 16vw, 240px); transform: rotate(-8deg); }
.obj-money, .obj-biz { width: clamp(104px, 9vw, 140px); margin-bottom: 6px; }
.post-obj { position: absolute; right: 12px; top: 8px; width: 92px; transform: rotate(8deg); }

/* ---------- Earn on a yellow field ---------- */
.sec-y { background: var(--y); }
.sec-y .facts-line li::before { background: var(--ink); box-shadow: none; }
.sec-y .paddles button { background: rgba(20,20,20,.12); }
.sec-y .paddles button:hover { background: rgba(20,20,20,.2); }

/* ---------- T7 segmented control: one big phone, centred, its screen crossfades with the tab ---------- */
.seg-panel { border-radius: var(--r-card); background: var(--surface); padding: clamp(40px, 5vw, 72px) 20px clamp(32px, 4vw, 48px); display: grid; justify-items: center; gap: 22px; }
.seg-panel .phone { --pw: clamp(260px, 26vw, 360px); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--rule); position: relative; }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 10px 16px; border-radius: 12px; font: 600 15px/1 var(--text); cursor: pointer; transition: color .28s var(--ease-out); }
.seg button[aria-selected="true"] { color: #fff; }
.seg-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px; background: var(--ink); transition: transform .28s var(--ease-out), width .28s var(--ease-out); }
.seg button:active { transform: scale(.97); }
.seg-caps { min-height: 3.2em; text-align: center; max-width: 26em; }
.seg-caps p[hidden] { display: none; }

/* ---------- T5 rail: horizontal cards with paddles ---------- */
.rail { display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - var(--content)) / 2); padding-inline: calc((100% - var(--content)) / 2); padding-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: none; scroll-snap-align: start; }
.paddles { display: flex; justify-content: flex-end; gap: 14px; margin-top: 22px; }
.paddles button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(210,210,215,.64); cursor: pointer; display: grid; place-items: center; transition: background-color .1s linear, opacity .1s linear; }
.paddles button:hover { background: rgba(190,190,196,.8); }
.paddles button:active { transform: scale(.94); }
.paddles button:disabled { opacity: .36; cursor: default; }
.paddles button::before { content: ""; width: 9px; height: 9px; border: solid var(--ink); border-width: 2.2px 2.2px 0 0; transform: translateX(-2px) rotate(45deg); }
.paddles button[data-dir="-1"]::before { transform: translateX(2px) rotate(-135deg); }

.chip { align-self: flex-start; background: var(--surface); }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--text); padding: 7px 11px 6px 9px; border-radius: 99px; background: #fff; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--y)); }
.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 22px; }
.post-foot .cap { max-width: 40em; }
.post-foot .paddles { margin-top: 0; }
.post-foot + .wrap { margin-top: 18px; }

/* ---------- T8 bento: one fact per tile, the number big; the rule behind a + ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.fact { position: relative; border-radius: var(--r-card); background: var(--surface); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: clamp(196px, 17vw, 240px); }
.on-dark .fact { background: var(--dark-surface); }
.fact .k { font: 600 var(--t-caption)/1.3 var(--text); }
.fact .v { font: 800 var(--t-stat)/1 var(--display); letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fact .d { font: 600 var(--t-caption)/1.35 var(--text); color: var(--ink-2); }
.on-dark .fact .d { color: var(--dark-2); }
.fact-y, .on-dark .fact-y { background: var(--y); color: var(--ink); }
.on-dark .fact-y .d { color: rgba(18,18,18,.7); }
.fact-wide { grid-column: span 2; }
.fact .ex { align-self: flex-start; margin-bottom: 6px; }
/* the app's yellow price pill */
.pill { display: inline-block; padding: .2em .45em .08em; border-radius: 99px; background: var(--y); color: var(--ink); font: 800 1.15em/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; vertical-align: -.06em; }
.split { margin: 14px 0 10px; display: grid; gap: 12px; }
.split-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 3px; }
.split-bar span { display: block; height: 100%; }
.split-bar .them { background: var(--y); flex: 134.1; }
.split-bar .fee { background: var(--ink); flex: 24.9; }
.on-dark .split-bar .fee { background: #fff; }
.split dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 40px; }
.split dt { font: 600 13px/1.3 var(--text); color: var(--ink-2); }
.on-dark .split dt { color: var(--dark-2); }
.split dd { font: 800 clamp(26px, 1.2rem + 1vw, 38px)/1 var(--display); letter-spacing: -.02em; grid-row: 2; }
.split .sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.sw-y { background: var(--y); }
.sw-k { background: var(--ink); }
.on-dark .sw-k { background: #fff; }
.plus { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; transition: background-color .1s linear, transform .1s var(--ease); }
.fact-y .plus { background: rgba(18,18,18,.1); }
.plus::before, .plus::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; border-radius: 2px; background: currentColor; }
.plus::after { transform: rotate(90deg); }
.plus:hover { background: rgba(255,255,255,.24); }
.fact-y .plus:hover { background: rgba(18,18,18,.18); }
.plus:active { transform: scale(.92); }
.money-foot { margin-top: 40px; text-align: center; }
/* the + sheet: the full rule, plain, on demand */
.sheet { width: min(calc(100% - 32px), 600px); max-width: none; padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(32px, 4vw, 44px); border: 0; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.sheet::backdrop { background: rgba(0,0,0,.6); }
.sheet[open] { animation: menu-in .32s var(--ease-out); }
.sheet:focus { outline: none; }
.sheet .h-tile { margin: 0 44px 14px 0; }
.sheet p { font: 400 18px/1.55 var(--text); color: var(--ink-2); }
.sheet-x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer; }
.sheet-x::before, .sheet-x::after { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; height: 2px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); }
.sheet-x::after { transform: rotate(-45deg); }

/* ---------- T9 questions ---------- */
.qs { border-top: 1px solid var(--rule); margin-top: var(--s-proof); }
.qs details { border-bottom: 1px solid var(--rule); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; font: 800 clamp(20px, 1rem + .7vw, 28px)/1.2 var(--display); letter-spacing: -.005em; border-radius: 8px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 11px; height: 11px; border: solid var(--ink); border-width: 0 2.4px 2.4px 0; transform: translateY(-3px) rotate(45deg); transition: transform var(--d-ui) var(--ease); }
.qs details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.qs summary:active { transform: scale(.995); }
.qs details p { padding: 0 4px 28px; max-width: 46em; font: 400 18px/1.55 var(--text); color: var(--ink-2); }

/* ---------- T10 closing band: type on yellow, one primary and the two stores ---------- */
.band { background: var(--y); padding-block: clamp(64px, 7vw, 112px) clamp(96px, 10vw, 168px); }
.band-in { display: grid; justify-items: center; text-align: center; gap: 18px; }
.band .h-chapter { font-size: clamp(44px, 1rem + 7vw, 120px); }
.band .say { font: 800 clamp(24px, 1rem + 1.2vw, 36px)/1 var(--display); }
.band-cat { width: auto; height: clamp(190px, 17vw, 260px); margin-bottom: 2px; }
.band-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
/* store badges in the stores' own form: black, white type, 40:135 proportion. Swap in the official artwork
   (/site-assets/brand/badge-app-store.svg, badge-google-play.svg) when it is supplied */
.badge { display: inline-flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 7px 18px 8px; border-radius: 12px; background: #000; color: #fff; text-decoration: none; font: 600 19px/1.05 var(--text); letter-spacing: -.01em; box-shadow: inset 0 0 0 1px #a6a6a6; transition: background-color 100ms linear, transform 100ms var(--ease); }
.badge small { font: 500 11px/1.1 var(--text); letter-spacing: .01em; }
.badge:hover { background: #222; }
.badge:active { transform: scale(.97); }
.band .btn-k { min-height: 52px; padding-inline: 28px; }

/* ---------- footer ---------- */
.foot { padding: 64px 0 40px; background: var(--ground); font: 400 14px/1.5 var(--text); }
.foot-top { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.foot .wm { width: 159px; height: 36px; }
.foot-line { margin-top: 14px; font: 800 20px/1.2 var(--display); }
.foot h2 { font: 600 13px/1 var(--text); color: var(--ink-2); margin-bottom: 14px; }
.foot ul { display: grid; gap: 9px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--y); text-underline-offset: 4px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; color: var(--ink-2); font-size: 12px; }

.live-line { margin-top: 18px; max-width: 30em; font: 400 13px/1.5 var(--text); color: var(--ink-2); }
.live-line ul { margin-top: 4px; }
.live-line li { display: inline; color: var(--ink); font-weight: 600; }
.live-line li + li::before { content: " · "; color: var(--ink-2); font-weight: 400; }

/* ---------- tablet ---------- */
@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-wide { grid-column: span 2; }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way-post { grid-row: auto; grid-column: 1 / -1; }
  .way-ai { grid-column: 1 / -1; }
  .way-post .way-cat { height: clamp(200px, 26vw, 260px); }
  .zone-grid { grid-template-columns: 1fr; }
  .ai-stage { grid-template-columns: 1fr; }
  .chat { padding-bottom: 0; }
  .ai-phone { justify-self: center; }
}
@media (max-width: 900px) {
  .two, .two-pick { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .ai-tiers { grid-template-columns: 1fr; }
}

/* ---------- phone: composed for 390, not a squeezed desktop ---------- */
@media (max-width: 734px) {
  :root { --nav-h: 64px; --content: calc(100% - 40px); --gutter: 14px; }
  /* hero: the claim, then the composer sheet rising from its panel; the full phone is a desktop thing */
  .hero { padding-top: calc(var(--nav-h) + 26px); padding-bottom: 40px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-copy { gap: 12px; }
  .hero-line { font-size: 17px; }
  .hero-acts { width: 100%; gap: 12px 20px; }
  .hero-phone { display: none; }
  .hero-scene { display: none; }
  .hero-sheet { display: block; position: relative; grid-column: 1; grid-row: 2; margin-top: 24px; height: 300px; padding-top: 22px; border-radius: var(--r-card); background: rgba(255,255,255,.42); overflow: hidden; }
  .hero-sheet .sheet-img { width: min(240px, 67%); margin: 0 auto 0 12px; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 24px 50px -26px rgba(0,0,0,.4); }
  .cat-sheet { --cw: 100px; position: absolute; z-index: 4; right: calc(12px - var(--cw) * .39); bottom: calc(8px - var(--cw) * .178); }
  .hero-sheet .pin { width: 44px; height: 44px; font-size: 19px; }
  .hero-sheet .pin-1 { right: 48px; top: 10px; }
  .hero-sheet .pin-2 { right: 2px; top: 44px; }
  .hero-cap { grid-row: 3; margin-top: 16px; padding-top: 0; border-top: 0; }

  .sec-ways { padding-top: 64px; }
  .ways { grid-template-columns: 1fr; gap: 12px; }
  .way a { min-height: 0; padding: 22px 20px 24px; }
  .way p { max-width: 70%; }
  .way-post .h-way { font-size: 40px; }
  .way-cat { height: 132px; right: 14px; bottom: 10px; }
  .way-post .way-cat { height: 170px; }
  .way-post a { background-image: radial-gradient(120px 140px at right 68px bottom 100px, rgb(255 198 0 / .15), rgb(255 198 0 / 0) 70%); }
  .way-zone a { background-image: radial-gradient(100px 110px at right 56px bottom 78px, rgb(255 198 0 / .15), rgb(255 198 0 / 0) 70%); }
  .step-dot { width: 22px; height: 22px; font-size: 13px; }
  .gaya { right: -18%; top: 11%; font-size: 21px; padding: 9px 14px 7px 9px; border-radius: 12px; }
  .zone-phones { height: 420px; padding-top: 28px; }
  .ai-stage { padding: 22px 16px 0; }
  .bub { font-size: 16px; max-width: 92%; }
  .ai-phone { height: 400px; }
  .ai-phone .phone { --pw: 236px; }
  .obj-what { width: 80px; top: -60px; right: 4px; }
  .obj-earn { width: 104px; top: -40px; }
  /* Hindi lines run wider: the toolbox sits higher and the first door's title wraps clear of its cat */
  :lang(hi) .obj-earn { width: 92px; top: -84px; }
  :lang(hi) .way-post .h-way { max-width: 62%; }
  .post-obj { width: 76px; }
  .band-cat { height: 176px; }


  /* the stage: phone on top, one caption docked under it, nothing side by side */
  .stage-sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding-top: calc(var(--nav-h) + 4px); padding-bottom: 0; }
  .stage-phone { order: -1; }
  .stage-phone .phone { --pw: min(264px, calc((100svh - var(--nav-h) - 214px) / 2.22)); }
  .stage-text { justify-items: center; margin-top: 12px; }
  .stage-caps > li { text-align: center; }
  .step-n { font-size: 14px; margin-bottom: 2px; }
  .stage-caps .h-step { font-size: 25px; margin-bottom: 6px; }
  .stage-caps .intro { font-size: 15.5px; line-height: 1.4; margin-inline: auto; }
  .dots { order: -1; margin: 0 0 10px; gap: 8px; }
  .dots button[aria-current="step"] { width: 24px; }
  .stage-tag { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; margin: 0; }
  .stage-spacers > li { height: 76svh; }
  .stage-spacers > li:first-child { height: 100svh; }

  .panel-crop { height: 400px; padding-top: 48px; }
  .crop-img { width: min(310px, 100%); }
  .post-item, .shot { width: 280px; }
  .post-card { height: 196px; padding: 18px; }
  .post-crop { left: 12px; width: calc(100% - 24px); bottom: -16px; }
  .shot-card { height: 360px; }
  .shot-card .phone { --pw: 228px; }
  .tile { height: 430px; padding: 24px 64px 0 22px; }
  .tile .h-tile { font-size: 25px; }
  .tile-img { top: 128px; width: min(290px, 84%); }
  .tile-img-mid { top: auto; bottom: 64px; }
  .plus-top { top: 16px; right: 16px; }
  .bento { grid-template-columns: 1fr; }
  .fact, .fact-wide, .fact-y { grid-column: auto; min-height: 0; padding: 22px 20px 24px; }
  .fact .v { font-size: 44px; }
  .fact .d { padding-right: 44px; }
  .plus { right: 14px; bottom: 14px; width: 34px; height: 34px; }
  .plus::before, .plus::after { left: 10px; right: 10px; top: 16px; }
  .plus-top { bottom: auto; }
  .split dl { gap: 4px 18px; }
  .split dd { font-size: 24px; }
  .zone-phones .phone { --pw: 41vw; }
  .seg-panel .phone { --pw: 250px; }
  .qs summary { padding: 22px 2px; }
  .qs details p { font-size: 16px; }
  .band-acts { width: 100%; }
  .band-acts .btn-k { flex-basis: 100%; }
  .badge { flex: 1 1 calc(50% - 6px); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-in { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #3a3a3c; --rule: rgba(0,0,0,.4); }
  .tile, .fact, .way a, .post-card, .ai-row, .panel, .shot-card, .seg-panel { box-shadow: inset 0 0 0 1.5px var(--ink); }
}