/* landing.css: the scroll page. Choreography reads --sc-p (0..1) that the
   engine publishes on each act; layers move with transform/translate only. */
:root { --forest: #17663F; }
body.landing { background: var(--sc-canvas); }
.L { position: absolute; inset: 0; pointer-events: none; }
svg { overflow: visible; }

/* ================= trail (section nav + progress) ================= */
.trail { position: fixed; right: 14px; top: 50%; translate: 0 -50%; z-index: 55; height: min(46svh, 26rem); padding: 14px 10px; border-radius: 999px; background: var(--sc-surface);
  box-shadow: 0 1px 0 #fff inset, 0 10px 26px -10px hsl(var(--sc-shadow-color) / .4); }
.trail ol { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; }
.trail ol::before { content: ""; position: absolute; top: 6px; bottom: 6px; width: 2px; background: color-mix(in oklab, var(--ink) 16%, transparent); }
.trail li { position: relative; z-index: 1; }
.trail a { display: grid; place-items: center; width: 20px; height: 20px; text-decoration: none; }
.trail i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-surface); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ink) 40%, transparent); transition: transform 260ms var(--pop), background 140ms; }
.trail a:hover i, .trail a.is-on i { transform: scale(1.5); }
.trail a.is-past i { background: var(--ink); box-shadow: none; }
.trail a.is-on i { background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink); }
.trail a span { position: absolute; right: 30px; padding: .3rem .7rem; border-radius: 999px; background: var(--ink); color: var(--sc-surface); font-size: .78rem; font-weight: 700; white-space: nowrap; opacity: 0; translate: 8px 0; pointer-events: none; transition: opacity 140ms, translate 220ms var(--pop); }
.trail a:hover span, .trail a:focus-visible span { opacity: 1; translate: 0 0; }
.trail__coin { position: absolute; left: 50%; top: 10px; width: 22px; height: 22px; margin-left: -11px; z-index: 2; pointer-events: none; transform: translateY(calc(var(--tp, 0) * (min(46svh, 26rem) - 62px))) rotate(calc(var(--tp, 0) * 1440deg)); }
.trail__coin .coin { width: 100%; height: 100%; }
@media (max-width: 1100px) { .trail { display: none; } }

/* ================= 1 · hero ================= */
/* The scroll choreography for the hero, problem and ending is written straight to a few elements by
   landing.js (drive()). Nothing here reads --sc-p: an inherited variable that changes every scroll step
   re-styles every descendant, and the hero has 1,000 of them, which is what made phones lag. */
.hero {
  --u: min(.1svh, .0555vw); --bt: 60; --bx: calc(93vw - var(--u) * 520);
  --cw: calc(var(--u) * 710); --cl: calc(var(--bx) + var(--u) * 134 - var(--cw) * .605);
}
.uprobe { position: absolute; width: var(--u); height: 0; visibility: hidden; }
.hero__stage { background: #A9DDF0; }
.hero__stage::after { display: none; }
.L { will-change: transform; }
.L-sky { translate: calc((var(--sc-mx, .5) - .5) * 8px) 0; }
.sun { position: absolute; right: 20vw; top: 7svh; width: min(28svh, 34vw); }
.sun__rays { transform-origin: 100px 100px; animation: spin 80s linear infinite; }
.cloud { position: absolute; opacity: .95; animation: drift 46s ease-in-out infinite alternate; }
.cloud--a { left: 5vw; top: 58svh; width: min(24svh, 30vw); }
.cloud--b { left: 42vw; top: 34svh; width: min(16svh, 20vw); animation-duration: 62s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes drift { to { translate: 9vw 0; } }
.L-far { top: 58svh; height: 50svh; translate: calc((var(--sc-mx, .5) - .5) * -16px) 0; }
.L-far::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 260svh; background: #9AD4B4; }
.L-far svg { width: 100%; height: 100%; }
.L-world { }
.building { position: absolute; top: calc(var(--u) * var(--bt)); left: var(--bx); width: calc(var(--u) * 520); }
.street { position: absolute; left: -2vw; right: -2vw; top: calc(var(--u) * (var(--bt) + 1380)); height: calc(var(--u) * 480); }
.street__pave { position: absolute; inset: 0 0 auto; height: calc(var(--u) * 120); background: #D9DEC4; border-top: 3px solid var(--ink); }
.street__curb { position: absolute; top: calc(var(--u) * 120); left: 0; right: 0; height: calc(var(--u) * 22); background: #EEF1E4; border-block: 3px solid var(--ink); }
.street__road { position: absolute; top: calc(var(--u) * 142); bottom: 0; left: 0; right: 0; background: #43554B; }
.street__road::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: calc(var(--u) * 9); background: repeating-linear-gradient(90deg, #F6F2E4 0 calc(var(--u) * 80), transparent calc(var(--u) * 80) calc(var(--u) * 170)); }
.dog { position: absolute; left: 9vw; top: calc(var(--u) * 30); width: calc(var(--u) * 220); }
.bin { position: absolute; left: calc(var(--bx) - var(--u) * 170); top: calc(var(--u) * -76); width: calc(var(--u) * 110); }
.z { animation: zz 3s ease-in-out infinite; } .z2 { animation-delay: -1.4s; }
@keyframes zz { 0% { opacity: 0; translate: 0 8px; } 40%, 70% { opacity: 1; } 100% { opacity: 0; translate: 10px -14px; } }
.rope { position: absolute; left: calc(var(--bx) + var(--u) * 136 - 1.5px); top: calc(var(--u) * (var(--bt) + 322)); width: 3px; height: calc(var(--u) * 1200); background: #6B4A22; transform-origin: 50% 0; transform: scaleY(.043); }
.hero__baggu { position: absolute; left: calc(var(--bx) + var(--u) * 69); top: calc(var(--u) * (var(--bt) + 360)); width: calc(var(--u) * 130); padding: 0; border: 0; background: none; cursor: pointer;
  will-change: translate; }
.swing { display: block; transform-origin: 50% -30%; animation: swing 3.6s ease-in-out infinite alternate; }
@keyframes swing { from { rotate: -4deg; } to { rotate: 4deg; } }
.is-hop .swing { animation: hop .7s var(--pop); }
@keyframes hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -34px; scale: .94 1.08; } 70% { translate: 0 0; scale: 1.08 .92; } }
.cart { position: absolute; top: calc(var(--u) * (var(--bt) + 1570) - var(--cw) * .276); left: var(--cl); width: var(--cw); will-change: translate; }
.cart .wheel { transform-box: fill-box; transform-origin: center; }
.bhaiya__arm { transform-box: fill-box; transform-origin: 0 100%; animation: wave 1.4s ease-in-out infinite; }
.pans { transform-box: fill-box; transform-origin: 50% 0; animation: pans 3s ease-in-out infinite alternate; }
@keyframes pans { to { rotate: 3deg; } }
.L-near { top: auto; bottom: -5svh; width: min(40svh, 46vw); height: auto; translate: calc((var(--sc-mx, .5) - .5) * -34px) 0; }
.L-near--l { left: -6vw; right: auto; } .L-near--r { right: -7vw; left: auto; width: min(34svh, 40vw); }
.lf { transform-origin: 0 0; animation: sway 4.6s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -2.4deg; } to { rotate: 2.4deg; } }
.hero__copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: max(21svh, 108px); width: min(58rem, calc(var(--bx) - var(--sc-gutter) - 3vw)); }
.hero__copy h1 { font-size: clamp(2.7rem, .8rem + 5.4vw, 6.6rem); line-height: .92; font-stretch: 84%; }
.hero__copy p { margin: 1.3rem 0 0; max-width: 33rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.42; font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
@media (max-width: 860px) and (orientation: portrait) {
  /* balcony sits right of centre so the cart, and the kabadiwala at its left end, land fully on screen */
  .hero { --u: min(.1svh, .148vw); --bt: 720; --bx: calc(58vw - var(--u) * 134); --cw: min(94vw, var(--u) * 710); }
  .hero__copy { width: auto; right: var(--sc-gutter); top: 88px; }
  .hero { --bt: 720; }
  .hero__copy h1 { font-size: 2.65rem; }
  .hero__copy p { font-size: 1.02rem; margin-top: .9rem; }
  .hero__cta { margin-top: 1.1rem; }
  .sun { right: auto; left: 3vw; top: 47svh; width: 32vw; }
  .cloud--a { top: 34svh; left: -6vw; width: 34vw; } .cloud--b { top: 20svh; left: 60vw; width: 28vw; }
  .L-far { top: 60svh; }
  .L-near { width: 34vw; bottom: -6svh; } .L-near--l { left: -8vw; } .L-near--r { width: 30vw; right: -8vw; }
  .dog, .bin { display: none; }   /* too much for a 375px street: the cart and kabadiwala are the scene */
}

@media (max-width: 860px) and (orientation: portrait) and (max-width: 380px), (max-width: 860px) and (orientation: portrait) and (max-height: 720px) {
  .hero { --bt: 830; } .hero__copy h1 { font-size: 2.3rem; }
}

/* ================= 2 · problem ================= */
.problem__stage { background: var(--ink); color: var(--sc-canvas); --focus: #FFB81C; }
.fall { position: absolute; inset: 0; z-index: 1; }
.fi { position: absolute; left: var(--x); top: 0; width: var(--z); translate: -50% 0; will-change: transform; }
.fi__i { display: block; aspect-ratio: 1; }
.fi__tag { position: absolute; left: 50%; top: 100%; translate: -50% 2px; padding: .18rem .55rem; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 800; font-size: .8rem; white-space: nowrap; }
.pile { position: absolute; left: 0; right: 0; bottom: 0; height: 36svh; z-index: 2; will-change: transform; }
.pile svg { width: 100%; height: 100%; }
.stmts { position: absolute; z-index: 3; left: var(--sc-gutter); top: 44%; width: min(38rem, 46vw); height: 0; }
.stmt { position: absolute; left: 0; right: 0; top: 0; translate: 0 -50%; margin: 0; font: 800 clamp(2.3rem, .9rem + 3.9vw, 5rem)/.98 var(--sc-font-display); font-stretch: 86%; letter-spacing: -.035em; text-wrap: balance; }
.stmt em { font-style: normal; color: var(--sun); }
@media (max-width: 860px) and (orientation: portrait) {
  .stmts { top: 34%; width: auto; right: 34%; } .stmt { font-size: 2rem; } .pile { height: 30svh; }
  .fi__tag { font-size: .68rem; padding: .1rem .4rem; } .fi:nth-child(even) .fi__tag { display: none; }
}

/* ================= 3 · the peak ================= */
.peak { --s: min(1svh, .56vw); }
.peak__stage { background: #CFEBD3; }
.peak__blob { position: absolute; border-radius: 50%; }
.peak__blob--a { left: -12vw; top: -24svh; width: 70svh; aspect-ratio: 1; background: #BEE3C8; }
.peak__blob--b { right: -10vw; bottom: -30svh; width: 84svh; aspect-ratio: 1; background: #DDF0D6; }
.peak__cues { position: absolute; z-index: 6; left: var(--sc-gutter); top: max(15svh, 104px); width: min(30rem, 40vw); height: 12rem; }
.cue { position: absolute; inset: 0 0 auto; margin: 0; font: 800 clamp(1.7rem, .8rem + 2.3vw, 3.1rem)/1.02 var(--sc-font-display); font-stretch: 86%; letter-spacing: -.03em; text-wrap: balance; }
.cue small { display: block; margin-bottom: .7rem; font: 800 .78rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.scene > * { position: absolute; left: 0; top: 0; }
.p-bag { z-index: 3; width: calc(34 * var(--s)); margin: calc(-18.85 * var(--s)) 0 0 calc(-17 * var(--s)); translate: calc(var(--x, -27) * var(--s)) calc(var(--y, 12) * var(--s)); transform: rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1)); transform-origin: 50% 40%; }
.p-bag .baggu__scan { transform: translateY(calc(var(--scan, 0) * 62px)); opacity: var(--scanon, 0); }
.p-bag.is-dance .baggu { animation: dance .6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes dance { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(calc(var(--s) * -3)) rotate(4deg); } }
.p-item { position: absolute; left: 0; top: 0; z-index: 1; width: calc(12 * var(--s)); margin: calc(-6 * var(--s)) 0 0 calc(-6 * var(--s)); translate: calc(var(--x, 0) * var(--s)) calc(var(--y, 0) * var(--s)); rotate: var(--rot, 0deg); scale: var(--sc, 1); opacity: 0; }
.p-scale { z-index: 2; width: calc(26 * var(--s)); margin: calc(-19 * var(--s)) 0 0 calc(-13 * var(--s)); translate: calc(var(--x, 0) * var(--s)) calc(var(--y, -98) * var(--s)); }
.needle { transform-origin: 120px 172px; transform: rotate(-120deg); }
.p-bhaiya { z-index: 4; width: calc(31 * var(--s)); margin: calc(-20.5 * var(--s)) 0 0 calc(-15.5 * var(--s)); translate: calc(var(--x, 90) * var(--s)) calc(var(--y, 15) * var(--s)); }
.p-bhaiya .cone { opacity: calc(var(--cone, 0) * .42); }
.p-stamp { z-index: 6; width: calc(14 * var(--s)); aspect-ratio: 1; margin: calc(-7 * var(--s)) 0 0 calc(-7 * var(--s)); translate: calc(var(--x, 22) * var(--s)) calc(var(--y, -14) * var(--s)); scale: var(--sc, 0); rotate: -12deg;
  border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-content: center; text-align: center; outline: 3px dashed var(--ink); outline-offset: calc(var(--s) * -.9);
  box-shadow: 0 10px 22px -8px hsl(var(--sc-shadow-color) / .5); }
.p-stamp b { font: 800 calc(1.5 * var(--s))/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; }
.p-stamp span { font: 800 calc(3.6 * var(--s))/1 var(--sc-font-display); font-stretch: 85%; letter-spacing: -.03em; margin-top: calc(.4 * var(--s)); }
.p-phone { z-index: 5; width: calc(25 * var(--s)); margin: calc(-25.5 * var(--s)) 0 0 calc(-12.5 * var(--s)); translate: calc(var(--x, 14) * var(--s)) calc(var(--y, 90) * var(--s)); }
.phone { aspect-ratio: 9 / 18.4; padding: calc(1.6 * var(--s)); background: var(--ink); border-radius: calc(4 * var(--s)); display: grid; align-content: center; justify-items: center; text-align: center; gap: calc(.7 * var(--s)); position: relative;
  box-shadow: 0 30px 50px -22px hsl(var(--sc-shadow-color) / .6); }
.phone::before { content: ""; position: absolute; inset: calc(1.2 * var(--s)); border-radius: calc(3.2 * var(--s)); background: #F3F8EC; }
.phone > * { position: relative; margin: 0; }
.phone__notch { position: absolute !important; top: calc(2 * var(--s)); width: calc(6 * var(--s)); height: calc(1.3 * var(--s)); border-radius: 99px; background: var(--ink); z-index: 2; }
.phone__ok { display: grid; place-items: center; width: calc(7.4 * var(--s)); aspect-ratio: 1; border-radius: 50%; background: var(--leaf); color: #fff; margin-bottom: calc(.6 * var(--s)); }
.phone__ok svg { width: 55%; }
.phone__lbl { font: 700 calc(1.5 * var(--s))/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.phone__amt { font: 800 calc(4.2 * var(--s))/1 var(--sc-font-display); font-stretch: 85%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.phone__from { font: 600 calc(1.25 * var(--s))/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.phone__pts { margin-top: calc(1 * var(--s)) !important; padding: calc(.5 * var(--s)) calc(1.5 * var(--s)); border-radius: 99px; background: var(--sun); font: 800 calc(1.7 * var(--s))/1.2 var(--sc-font-text); }
.buzz .phone { animation: buzz .6s linear; }
@keyframes buzz { 0%, 100% { rotate: 0deg; } 10% { rotate: -5deg; } 20% { rotate: 5deg; } 30% { rotate: -4deg; } 40% { rotate: 4deg; } 55% { rotate: -2deg; } 70% { rotate: 2deg; } }
.slip { position: absolute; z-index: 4; right: var(--sc-gutter); top: 50%; width: calc(27 * var(--s)); min-width: 15rem; opacity: var(--slip, 0); translate: calc((1 - var(--slip, 0)) * 22vw) -50%; rotate: 2.2deg; filter: drop-shadow(0 14px 18px hsl(var(--sc-shadow-color) / .28)); }
.slip__in { padding: 1.1rem 1.15rem 1.9rem; font-size: .84rem;
  background: conic-gradient(from -45deg at bottom, transparent, #FBFCF6 1deg 89deg, transparent 90deg) bottom / 14px 8px repeat-x, linear-gradient(#FBFCF6, #FBFCF6) top / 100% calc(100% - 7px) no-repeat; }
.slip header { display: flex; justify-content: space-between; padding-bottom: .55rem; border-bottom: 2px dashed color-mix(in oklab, var(--ink) 30%, transparent); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--sc-ink-soft); }
.slip ul { list-style: none; margin: 0; padding: 0; min-height: 10.6rem; }
.slip li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; padding: .42rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--ink) 20%, transparent); opacity: 0; translate: 0 -10px; transition: opacity .25s, translate .4s var(--pop); font-weight: 600; }
.slip li.on { opacity: 1; translate: 0 0; }
.slip li em { font-style: normal; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; } .slip li b { font-variant-numeric: tabular-nums; }
.slip__total { display: flex; align-items: center; justify-content: space-between; margin-top: .7rem; font-weight: 700; }
.slip__total b { padding: .05em .4em; border-radius: 8px; background: var(--sun); font: 800 1.5rem/1.2 var(--sc-font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) and (orientation: portrait) {
  .peak { --s: min(1.4svh, 1.4vw); }
  .peak__cues { top: auto; bottom: 5.6rem; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; height: 8.6rem; }
  .cue { font-size: 1.5rem; } .cue small { margin-bottom: .4rem; }
  .scene { top: 42%; }
  .slip { top: auto; bottom: 1rem; right: auto; left: 50%; translate: calc(-50% + (1 - var(--slip, 0)) * 30vw) 0; width: min(88vw, 20rem); rotate: 0deg; }
  .slip ul, .slip header b { display: none; } .slip header { border: 0; padding: 0; } .slip__in { padding: .8rem 1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .slip__total { margin: 0; gap: .8rem; }
  .peak__blob--a { width: 60svh; }
}

/* ================= 4 · rate card rail ================= */
.rates__stage { background: var(--sun); display: flex; align-items: center; --focus: var(--ink); }
.rates .rail { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 1.5rem 1.7rem; width: max-content; padding: 0 var(--sc-gutter); align-items: center; }
.rail__lead { grid-row: 1 / span 2; width: clamp(18rem, 32vw, 30rem); padding-right: 2rem; }
.rail__lead h2 { font-size: clamp(2.5rem, 1rem + 3.9vw, 5rem); }
.rail__lead p { margin: 1.2rem 0 0; font-size: 1.12rem; line-height: 1.45; max-width: 26rem; font-weight: 500; }
.rail__lead .fine { font-size: .86rem; font-weight: 700; letter-spacing: .04em; }
.rcard { display: block; width: clamp(12rem, 17vw, 16.5rem); text-decoration: none; rotate: var(--rot); translate: 0 var(--dy); }
.rcard__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: .9rem .95rem 1rem; border-radius: 24px; background: var(--sc-surface);
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(var(--sc-shadow-color) / .14), 0 20px 30px -16px hsl(var(--sc-shadow-color) / .5); transition: box-shadow .2s; }
.rcard:hover .rcard__in, .rcard:focus-visible .rcard__in { box-shadow: 0 1px 0 #fff inset, 0 4px 8px hsl(var(--sc-shadow-color) / .16), 0 30px 40px -16px hsl(var(--sc-shadow-color) / .55); }
.rcard__cat { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.rcard__art { position: relative; min-width: 0; aspect-ratio: 1.45; border-radius: 16px; background: var(--tint, var(--mint)); }
.rcard__art svg { position: absolute; inset: .7rem; width: calc(100% - 1.4rem); height: calc(100% - 1.4rem); transition: transform .35s var(--pop); }
.rcard:hover .rcard__art svg { transform: rotate(-9deg) scale(1.1) translateY(-3px); }
.rcard--0 { --tint: var(--mint); } .rcard--1 { --tint: var(--sky); } .rcard--2 { --tint: #F7CFC0; } .rcard--3 { --tint: var(--paper2); }
.rcard__name { font: 800 1.28rem/1.05 var(--sc-font-display); font-stretch: 88%; letter-spacing: -.02em; }
.rcard__rate { font: 800 2rem/1 var(--sc-font-display); font-stretch: 85%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rcard__rate small { font: 700 .95rem var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); margin-left: .15rem; }
.rail__end { grid-row: 1 / span 2; width: clamp(16rem, 24vw, 22rem); display: grid; gap: 1rem; justify-items: start; padding-left: 1.5rem; }
.rail__baggu { width: 8rem; display: block; }
.rail__end h3 { font-size: clamp(2rem, 1rem + 2vw, 3rem); }
@media (max-width: 860px) { .rcard__in { box-shadow: 0 8px 14px -8px hsl(var(--sc-shadow-color) / .4); } .rcard { width: 10.6rem; } .rcard__name { font-size: 1.05rem; } .rcard__rate { font-size: 1.6rem; } .rail__lead { width: 17rem; } .rail__lead h2 { font-size: 2.3rem; } .rates .rail { gap: 1rem 1.1rem; } }

/* ================= 5 · why ================= */
.why { position: relative; z-index: 2; margin-top: -2.5rem; border-radius: 2.4rem 2.4rem 0 0; background: var(--sc-canvas); padding-block: var(--sc-section); box-shadow: 0 -20px 40px -20px hsl(var(--sc-shadow-color) / .35); }
.why__grid { width: min(82rem, 100%); margin-inline: auto; padding-inline: var(--sc-gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; align-items: start; }
.why__head { grid-column: 1 / span 5; grid-row: 1 / span 4; position: sticky; top: 22svh; padding-right: 2rem; display: grid; gap: 1.2rem; justify-items: start; }
.why__head h2 { font-size: clamp(2.6rem, 1rem + 4.4vw, 5.6rem); }
.why__head p { margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 27rem; }
.feat { position: relative; border-radius: 28px; padding: 1.5rem 1.6rem 1.7rem; display: grid; gap: .7rem; align-content: start; overflow: hidden; }
.feat h3 { font-size: clamp(1.7rem, 1rem + 1.4vw, 2.3rem); } .feat p { margin: 0; line-height: 1.5; max-width: 30rem; }
.feat__art { height: 9.5rem; display: grid; place-items: center; margin-bottom: .4rem; }
.feat.sc-in .feat__art { animation: thunk .8s var(--pop) .2s both; --r: 0deg; }
.feat--qr { grid-column: 6 / span 7; background: var(--mint); } .feat--qr .feat__art { height: 11rem; margin-bottom: 1rem; }
.qrdemo { position: relative; height: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #BFE8C9; }
.qrdemo svg { width: 100%; height: 100%; }
.qrscan { animation: scan 2.4s ease-in-out infinite alternate; }
@keyframes scan { from { translate: 0 -4px; } to { translate: 0 122px; } }
.feat--upi { grid-column: 6 / span 4; grid-row: 2; background: var(--sun); }
.coinflip { display: flex; gap: .4rem; align-items: center; } .coinflip span { width: 3.6rem; animation: flip 2.6s ease-in-out infinite; }
.coinflip span:nth-child(2) { animation-delay: .25s; width: 4.6rem; } .coinflip span:nth-child(3) { animation-delay: .5s; }
.coinflip .coin { width: 100%; height: auto; }
@keyframes flip { 0%, 55%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg) translateY(-8px); } }
.feat--rew { grid-column: 10 / span 3; grid-row: 2; background: var(--sky); margin-top: 3rem; }
.fan { position: relative; } .fan > span { position: absolute; width: 5.6rem; transition: transform .45s var(--pop); }
.fan > span:nth-child(1) { transform: translateX(-3.4rem) rotate(-14deg); } .fan > span:nth-child(2) { transform: translateY(-.6rem); z-index: 1; } .fan > span:nth-child(3) { transform: translateX(3.4rem) rotate(14deg); }
.feat--rew:hover .fan > span:nth-child(1) { transform: translateX(-4.6rem) rotate(-24deg); } .feat--rew:hover .fan > span:nth-child(3) { transform: translateX(4.6rem) rotate(24deg); } .feat--rew:hover .fan > span:nth-child(2) { transform: translateY(-1.4rem) scale(1.08); }
.feat--buy { grid-column: 6 / span 7; grid-row: 3; background: var(--ink); color: var(--sc-canvas); }
.feat--buy p { color: color-mix(in oklab, var(--sc-canvas) 82%, transparent); }
.seal { width: 9.5rem; color: var(--sun); } .seal__spin { transform-origin: 100px 100px; animation: spin 24s linear infinite; }
@media (max-width: 920px) {
  .why__grid { display: flex; flex-direction: column; } .why__head { position: static; padding: 0 0 1rem; }
  .feat--rew { margin-top: 0; }
}

/* ================= 6 · who ================= */
.who { position: relative; z-index: 3; margin-top: -2.4rem; border-radius: 2.4rem 2.4rem 0 0; background: var(--forest); color: var(--sc-canvas); padding-block: var(--sc-section) calc(var(--sc-section) * .9); --focus: #FFB81C; }
.who__wrap { width: min(82rem, 100%); margin-inline: auto; padding-inline: var(--sc-gutter); }
.who h2 { font-size: clamp(2.4rem, 1rem + 4vw, 5.2rem); max-width: 14ch; }
.rows { list-style: none; margin: 3rem 0 0; padding: 0; }
.row { display: grid; grid-template-columns: clamp(5rem, 10vw, 9rem) 1fr; grid-template-areas: "art word" "art note"; column-gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: 1.1rem 0; border-top: 2px solid color-mix(in oklab, var(--sc-canvas) 26%, transparent); transition: padding-left .35s var(--pop); }
.row:last-child { border-bottom: 2px solid color-mix(in oklab, var(--sc-canvas) 26%, transparent); }
.row:hover { padding-left: 1rem; }
.row__art { grid-area: art; } .row__art svg { width: 100%; transition: rotate .4s var(--pop), translate .4s var(--pop); } .row:hover .row__art svg { rotate: -7deg; translate: 0 -8px; }
.row__word { grid-area: word; font: 800 clamp(3rem, 1rem + 7.4vw, 8.6rem)/.92 var(--sc-font-display); font-stretch: 78%; letter-spacing: -.015em; transition: color .2s; }
.row:hover .row__word { color: var(--sun); }
.row__note { grid-area: note; max-width: 34rem; color: color-mix(in oklab, var(--sc-canvas) 90%, transparent); font-size: 1.05rem; line-height: 1.45; }
.win { transition: fill .16s calc(var(--i) * 45ms); } .row:hover .win { fill: var(--sun); }
.others { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 3.6rem; }
.others h3 { font-size: 1.9rem; color: var(--sun); } .others p { margin: .7rem 0 0; max-width: 30rem; line-height: 1.55; color: color-mix(in oklab, var(--sc-canvas) 92%, transparent); }
@media (max-width: 720px) { .others { grid-template-columns: 1fr; } .row { grid-template-columns: 4.4rem 1fr; } .row__word { font-size: 3.2rem; } }

/* ================= 7 · waitlist (the ending is an input) ================= */
.peek { font-weight: 700; text-decoration: underline; text-underline-offset: .22em; } .peek .ico { transition: transform .26s var(--pop); } .peek:hover .ico { transform: translateX(4px); }
.wl { position: relative; z-index: 3; background: var(--ink); color: var(--sc-canvas); --focus: #FFB81C; overflow: clip; }
.wl__stage { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 6.4rem var(--sc-gutter) 8rem; }
.wl__sun { position: absolute; right: 9vw; bottom: 24svh; width: min(54svh, 58vw); z-index: 1; will-change: transform; }
.wl__city { position: absolute; left: 0; right: 0; bottom: 5.4rem; height: 42svh; z-index: 2; } .wl__city svg { width: 100%; height: 100%; }
.wl__city::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5rem; background: #123326; }
.wl__baggu { position: absolute; z-index: 3; right: max(14vw, 5rem); bottom: 5.4rem; width: min(27svh, 30vw); padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; }
.wl__copy { position: relative; z-index: 4; width: min(46rem, 58vw); }
.wl__copy h2 { font-size: clamp(2.7rem, 1rem + 4.4vw, 5.6rem); line-height: .93; font-stretch: 84%; }
.wl__copy > p { margin: 1.2rem 0 0; max-width: 32rem; font-size: 1.15rem; line-height: 1.45; color: color-mix(in oklab, var(--sc-canvas) 88%, transparent); }
.wl__roles { border: 0; padding: 0; margin: 1.4rem 0 .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.wl__roles label { position: relative; }
.wl__roles input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wl__roles span { display: inline-block; padding: .55rem 1.05rem; border-radius: 99px; background: color-mix(in oklab, var(--sc-canvas) 13%, transparent); font-weight: 700; cursor: pointer; transition: transform .24s var(--pop), background .14s, color .14s; }
.wl__roles label:hover span { transform: translateY(-2px); }
.wl__roles input:checked + span { background: var(--sun); color: var(--ink); transform: rotate(-1.5deg); }
.wl__roles input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.wl__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .6rem; margin-bottom: .9rem; }
.wl__row input { width: 100%; padding: 1rem 1.2rem; border: 2px solid transparent; border-radius: 16px; background: #F3F8EC; color: var(--ink); font-weight: 600; transition: border-color .15s; }
.wl__row input::placeholder { color: #5A7062; } .wl__row input:focus { outline: none; border-color: var(--sun); }
.wl__row input[aria-invalid="true"] { border-color: var(--tomato); animation: shake .4s; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn--lg { padding: 1.15em 1.9em; font-size: 1.16rem; }
.wl__fine { margin: .8rem 0 0; font-size: .88rem; color: color-mix(in oklab, var(--sc-canvas) 78%, transparent); }
.wl__msg { min-height: 1.5em; margin: .3rem 0 0; font-weight: 700; color: var(--sun); }
.wl__done h3 { font-size: clamp(2.4rem, 1rem + 3vw, 4rem); margin-top: 1.4rem; } .wl__done p { max-width: 30rem; margin: .8rem 0 1.4rem; font-size: 1.1rem; line-height: 1.5; }
.wl__done:focus { outline: none; }
.wl__foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; background: #123326; color: color-mix(in oklab, var(--sc-canvas) 86%, transparent); }
.wl__foot .foot { padding-block: .9rem; align-items: center; grid-template-columns: 1.6fr auto auto; gap: 1.4rem; } .wl__foot .foot p { margin-top: .3rem; font-size: .82rem; color: inherit; max-width: 52ch; } .wl__foot .brand b { color: var(--sc-canvas); }
.wl__foot .foot nav { grid-auto-flow: column; gap: 1.4rem; } .wl__foot .foot nav a { white-space: nowrap; }
@media (max-width: 860px) {
  .wl__stage { align-items: start; padding-top: 6.5rem; padding-bottom: 46svh; }
  .wl__copy { width: auto; } .wl__copy h2 { font-size: 2.9rem; } .wl__copy > p { font-size: 1.02rem; }
  .wl__row { grid-template-columns: 1fr; }
  .wl__baggu { right: 4vw; width: 36vw; } .wl__sun { right: -10vw; bottom: 21svh; width: 56vw; } .wl__city { height: 30svh; bottom: 4.2rem; }
  .wl__foot .foot { grid-template-columns: 1fr; gap: .4rem; padding-block: .7rem; } .wl__foot .foot nav, .wl__foot .foot p { display: none; }
}

/* Off-screen sections do no ambient work. On phones the heavy decorative loops and the noise overlay go entirely. */
main > section:not(.is-live) * { animation-play-state: paused !important; }
@media (max-width: 860px), (pointer: coarse) {
  .sc-grain { display: none; }
  .lf, .sun__rays, .pans, .z, .bhaiya__arm, .qrscan, .seal__spin { animation: none; }
}
.p-item, .p-scale, .p-bhaiya, .p-bag, .p-phone, .p-stamp { will-change: translate, transform; }

@media (prefers-reduced-motion: reduce) {
  .sun__rays, .cloud, .z, .swing, .bhaiya__arm, .pans, .lf, .qrscan, .coinflip span, .seal__spin { animation: none; }
  .feat.sc-in .feat__art { animation: none; }
}

.rcard__rate.is-long { font-size: 1.55rem; }