/* /how-it-works: the life of one task, held on one map. Loaded only by how-it-works.html, on top of site.css.
   Seven moments, three of them yours (they carry the numerals 1, 2, 3). Tokens, eases and components come from site.css. */

/* ---------- inner-page type (spec 4: inner H1 128 / 48, inner H2 72 / 36) ---------- */
.life .h1 { font-size: clamp(48px, min(8.9vw, 14.2vh), 128px); letter-spacing: -.04em; }

/* ---------- the held map ---------- */
.life { height: 350vh; height: 350svh; --halo: var(--map); --tk-fs: clamp(44px, min(4.6vw, 7.4vh), 68px); --tok: clamp(96px, 15vh, 140px); }
.life .frame { background: var(--map); }
.life .cam { transition: transform 1.1s var(--inout); }
.life[data-beat="2"] .cam { transform: scale(1.05); }
.life[data-beat="3"] .cam { transform: scale(1.1); }
.life[data-beat="5"] .cam, .life[data-beat="6"] .cam { transform: scale(1.08); }
.life[data-beat="7"] .cam { transform: scale(1.03); }
/* yellow on the moments that are yours to decide on: hands, pick, approve, paid */
.life[data-beat="2"] .plate-y, .life[data-beat="3"] .plate-y, .life[data-beat="6"] .plate-y, .life[data-beat="7"] .plate-y { opacity: 1; }
.life[data-beat="2"], .life[data-beat="3"], .life[data-beat="6"], .life[data-beat="7"] { --halo: var(--y); }
.life .mark, .life .mark::before { transition: color .8s var(--inout), background-color .8s var(--inout); }
.life[data-beat="2"] .mark, .life[data-beat="3"] .mark, .life[data-beat="6"] .mark, .life[data-beat="7"] .mark { color: #fff; }
.life[data-beat="2"] .mark::before, .life[data-beat="3"] .mark::before, .life[data-beat="6"] .mark::before, .life[data-beat="7"] .mark::before { background: var(--ink); top: -.03em; bottom: -.03em; }

/* the street the picked person takes (plate units, sized like the plate by how-it-works.js) */
.route { 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; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .4s var(--out); }
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-edge { stroke: rgba(18,18,18,.42); }
.route-in { stroke: rgba(18,18,18,.72); }
.life[data-beat="4"] .route { opacity: 1; }

/* the 24 h check: a timer beside the held pill whose ring closes once they mark it done */
.clock { position: absolute; z-index: 3; left: calc(var(--px) - var(--pin-w, 200px) / 2 - var(--cd) * .45); top: calc(var(--py) - var(--pin-h, 80px) * .55); width: var(--cd); height: var(--cd); margin: calc(var(--cd) / -2) 0 0 calc(var(--cd) / -2); --cd: clamp(96px, 14vh, 132px); display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--ink), 0 16px 30px -16px rgba(18,18,18,.45); opacity: 0; transform: scale(.6) rotate(-12deg); transition: opacity .25s var(--out), transform .45s var(--out); }
.life[data-beat="5"] .clock { opacity: 1; transform: rotate(-6deg); }
.life[data-beat="5"] .clock-in { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--inout) .3s; }

/* the pill on the pin: asked (yellow), held (ink), released (yellow again) */
.mk-life { z-index: 3; }
.mk-life .tk { display: grid; justify-items: center; }
.mk-life .tk-p { grid-area: 1 / 1; transition: opacity .3s var(--out), transform .45s var(--out); }
.mk-life .tk-held { background: var(--ink); color: var(--y); }
.mk-life .tk-held small { font: 600 .2em/1 var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--y); color: var(--ink); border-radius: 999px; padding: .55em .8em .45em; }
.mk-life .tk-held, .mk-life .tk-free { opacity: 0; transform: scale(.7); }
.life[data-beat="0"] .mk-life .tk { opacity: 0; }
html.motion .life:not([data-beat="0"]) .mk-life .tk { animation: pin-drop .55s var(--out) both; }
.life[data-beat="3"] .tk-ask, .life[data-beat="4"] .tk-ask, .life[data-beat="5"] .tk-ask, .life[data-beat="6"] .tk-ask, .life[data-beat="7"] .tk-ask { opacity: 0; transform: scale(.7); }
.life[data-beat="3"] .tk-held, .life[data-beat="4"] .tk-held, .life[data-beat="5"] .tk-held { opacity: 1; transform: rotate(-3deg); }
.life[data-beat="6"] .tk-free { opacity: 1; transform: rotate(-3deg); }
.life[data-beat="7"] .mk-life .tk { opacity: 0; transition: opacity .2s var(--in); }
.mk-life .tk-b { text-transform: uppercase; letter-spacing: .08em; transition: opacity .25s var(--out); }
.life[data-beat="2"] .mk-life .tk-b, .life[data-beat="7"] .mk-life .tk-b { opacity: 0; }

/* people: the shared .person token; positioned by how-it-works.js at real junctions. In the opener they idle, small, before anything is posted */
.life .people { z-index: 2; }
.life .person { --d: var(--tok); }
.life[data-beat="0"] .person { opacity: 1; transform: scale(.42); transition-delay: calc(.5s + var(--k) * .12s); }
.life[data-beat="0"] .person:nth-child(2) { opacity: 0; } /* P stands under the opener's headline */
.person .st, .person .earn { position: absolute; left: 50%; white-space: nowrap; opacity: 0; transition: transform .4s var(--out), opacity .2s var(--out); }
.person .st { bottom: 100%; font: 600 clamp(13px, calc(var(--d) * .1), 17px)/1 var(--text); padding: .6em .9em .5em; border-radius: 999px; transform: translate(-50%, 40%) scale(.3); }
.st-pick { background: var(--ink); color: #fff; }
/* the app's own status chips: ON THE WAY in blue, DONE in green (app-task.png, app-work.png) */
.st-way, .st-done { background: #fff; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(12px, calc(var(--d) * .09), 15px) !important; }
.st-way { color: #1F55D6; box-shadow: inset 0 0 0 2px #1F55D6; }
.st-done { color: #17663A; box-shadow: inset 0 0 0 2px #17663A; }
.life[data-beat="3"] .p-a .up, .life[data-beat="4"] .p-a .up, .life[data-beat="5"] .p-a .up, .life[data-beat="6"] .p-a .up, .life[data-beat="7"] .p-a .up,
.life[data-beat="4"] .p-a .dist, .life[data-beat="5"] .p-a .dist, .life[data-beat="6"] .p-a .dist, .life[data-beat="7"] .p-a .dist { opacity: 0 !important; transition-delay: 0s !important; }
.life[data-beat="3"] .p-a .st-pick, .life[data-beat="4"] .p-a .st-way, .life[data-beat="5"] .p-a .st-done, .life[data-beat="6"] .p-a .st-done { opacity: 1; transform: translate(-50%, -12px); }
.life .p-a { transition: transform .7s var(--out), opacity .3s var(--out), box-shadow .4s var(--out); }
.life[data-beat="3"] .p-a, .life[data-beat="4"] .p-a, .life[data-beat="5"] .p-a, .life[data-beat="6"] .p-a, .life[data-beat="7"] .p-a { box-shadow: 0 0 0 calc(var(--d) * .04) var(--ink), 0 0 0 calc(var(--d) * .1) #fff, 0 calc(var(--d) * .1) calc(var(--d) * .2) rgba(18,18,18,.28); }
.person .earn { top: 100%; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -30%) scale(.4); }
.person .earn .pill { font-size: clamp(30px, calc(var(--d) * .3), 46px); transform: rotate(-4deg); }
.earn-chip { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--text); background: var(--ink); color: #fff; border-radius: 10px; padding: 5px 6px 5px 10px; }
.earn-chip .ex { background: #fff; color: var(--ink); font-size: 11px; padding: 5px 6px 4px; }
.life[data-beat="7"] .p-a .earn { opacity: 1; transform: translate(-50%, 10px); transition-delay: .25s; }

/* the stage (outside the camera): bubble, clay object, hands up, approve, Ho gaya; --px --py --pin-h from how-it-works.js */
.stage { position: absolute; z-index: 3; inset: 0; pointer-events: none; --bw: min(400px, 30vw); }
.say-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;  transform-origin: 64px 100%; opacity: 0; transform: scale(.86); transition: transform .5s var(--out), opacity .3s var(--out); }
.say-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); }
.say-bubble .label { color: var(--mute); letter-spacing: .14em; }
.say-bubble .typed { display: block; min-height: 2.1em; margin: 8px 0 16px; font: 800 clamp(24px, 2.4vw, 36px)/1.04 var(--display); letter-spacing: -.015em; }
.say-bubble .typed::after { content: ""; display: inline-block; width: 3px; height: .85em; margin-left: 4px; vertical-align: -.06em; background: var(--ink); }
html.motion .say-bubble .typed::after { animation: caret 1s steps(1) infinite; }
.say-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); }
.life[data-beat="1"] .say-bubble { opacity: 1; transform: none; }
.obj { position: absolute; width: clamp(140px, 22vh, 220px); aspect-ratio: 1; left: calc(var(--px) + var(--pin-h) * 1.7); top: calc(var(--py) - var(--pin-h) * .2); opacity: 0; transform: scale(.7); 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; }
.life[data-beat="1"] .obj { opacity: 1; transform: none; }
.hands-up, .approve-btn { position: absolute; left: var(--px); display: flex; align-items: center; gap: 10px; opacity: 0; transition: transform .45s var(--out), opacity .25s var(--out); }
.hands-up { top: calc(var(--py) + var(--pin-h) * .5 + 24px); transform: translate(-50%, -20px) scale(.6); transform-origin: 50% 0; }
.hands-up .pill { font-size: clamp(28px, 2.9vw, 44px); }
.life[data-beat="2"] .hands-up { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); transition-delay: .9s; }
.approve-btn { bottom: calc(100% - var(--py) + var(--pin-h) * .5 + 18px); transform: translate(-50%, 16px); }
.approve-btn .approve { transition: transform .1s var(--out), background-color .2s var(--out); }
.life[data-beat="6"] .approve-btn { opacity: 1; transform: translate(-50%, 0); }
html.motion .life[data-beat="6"] .approve-btn .approve { animation: press .9s var(--out) .5s both; }
@keyframes press { 0%, 40% { transform: none; background: #fff; } 52% { transform: scale(.94); background: var(--y); } 100% { transform: none; background: var(--y); } }
/* paid: the round badge the home wears, landing on the pin */
.life-gaya { --sd: min(34vh, 28vw, 330px); position: absolute; left: calc(var(--px) - var(--sd) * .3); top: calc(var(--py) - var(--sd) * .25); width: var(--sd); height: var(--sd); margin: calc(var(--sd) / -2) 0 0 calc(var(--sd) / -2); opacity: 0; transform: rotate(-28deg) scale(1.6); transition: transform .34s var(--in), opacity .15s var(--in); }
.life[data-beat="7"] .life-gaya { opacity: 1; transform: rotate(-8deg); transition: transform .5s var(--out) .1s, opacity .2s var(--out) .1s; }
html.motion .life[data-beat="7"] .life-gaya .settle { animation: settle-in 1.2s var(--inout) .2s both; }

/* the app beside the map: a phone frame whose screen follows the moment */
.device { position: absolute; z-index: 4; right: calc(var(--gutter) + 8px); top: calc(var(--nav-h) + (100% - var(--nav-h)) / 2); width: clamp(210px, 19vw, 286px); aspect-ratio: 780 / 1688; margin: 0; background: var(--ink); border-radius: 44px; box-shadow: 0 46px 80px -34px rgba(18,18,18,.5), inset 0 0 0 1px rgba(255,255,255,.08); transform: translateY(-50%) rotate(3deg); }
.device img { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; border-radius: 37px; object-fit: cover; object-position: top; opacity: 0; transition: opacity .45s var(--out); }
.device img.is-on { opacity: 1; }

/* copy: the H1 opens the scene, then steps back to a title; each moment's words sit bottom left */
.life-in { position: relative; z-index: 5; height: 100%; padding-top: calc(var(--nav-h) + clamp(16px, 3.4vh, 32px)); pointer-events: none; }
.life-head { transform-origin: 0 0; transition: transform .9s var(--inout); }
.life:not([data-beat="0"]) .life-head { transform: scale(.5); }
.life-lead { max-width: 36ch; margin-top: clamp(16px, 2.6vh, 28px); font-size: var(--fs-lead); line-height: 1.45; transition: opacity .3s var(--out), visibility 0s .3s; font-weight: 600; text-shadow: 0 0 .2em #fff, 0 0 .4em #fff, 0 0 .7em #fff; }
.life:not([data-beat="0"]) .life-lead { opacity: 0; visibility: hidden; }
.life .beats { position: absolute; left: 0; right: 0; bottom: 0; }
.life .beat { gap: clamp(10px, 1.4vw, 24px); }
.life .beat-copy { max-width: 34ch; gap: 10px; }
.idx { justify-self: start; font: 800 17px/1 var(--display); letter-spacing: -.01em; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: .32em .7em .14em; font-variant-numeric: tabular-nums; }
.life .beat .idx { opacity: 0; transition: opacity .3s var(--out); }
.life .beat.is-on .idx { opacity: 1; }

/* ---------- phone: one portrait map, the screens below it ---------- */
.screens { display: none; }
@media (max-width: 959px) {
  .life { height: 240vh; height: 240svh; --tk-fs: 38px; --tok: min(84px, 10.5svh); --fs-num: clamp(150px, 42vw, 196px); }
  .life .h1 { font-size: 48px; }
  .life:not([data-beat="0"]) .life-head { transform: scale(.72); }
  .life-lead { font-size: 16px;  }
  .stage { --bw: min(290px, 76vw); }
  .say-bubble { left: 50%; margin-left: calc(var(--bw) / -2); padding: 12px 16px 16px; border-radius: 20px; transform-origin: 50% 100%; }
  .say-bubble::after { left: 50%; margin-left: -10px; }
  .say-bubble .typed { font-size: 22px; margin: 4px 0 10px; }
  .say-bubble .fake-btn { min-height: 38px; font-size: 14px; }
  .obj { width: 104px; left: calc(var(--px) + var(--pin-h) * .6); top: calc(var(--py) + var(--pin-h) * .6); }
  .hands-up .pill { font-size: 26px; }
  .life-gaya { --sd: min(62vw, 28svh); left: calc(var(--px) + 12px); top: calc(var(--py) - var(--sd) * .4); }
  .clock { --cd: 84px; left: var(--px); top: calc(var(--py) - var(--pin-h) * .5 - var(--cd) * .62); }
  .hands-up { flex-direction: column; gap: 8px; }
  .life[data-beat="2"] .cam { transform: scale(1.03); }
  .life[data-beat="3"] .cam { transform: scale(1.05); }
  .approve { min-height: 44px; font-size: 16px; padding: 0 16px 0 14px; }
  .device { display: none; }
  .life .beat-copy { max-width: 24ch; padding-bottom: 22px; }
  .life .beat-copy .h3 { font-size: 26px; }
  .life .beat-copy p { font-size: 15px; line-height: 1.35; }
  .idx { font-size: 14px; }
  .person .earn .pill { font-size: 26px; }
  .earn-chip { font-size: 12px; }

  .screens { display: block; padding: 44px 0 4px; }
  .screens-row { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 14px; scrollbar-width: none; }
  .screens-row::-webkit-scrollbar { display: none; }
  .screens-row li { flex: 0 0 60vw; scroll-snap-align: center; display: grid; gap: 12px; justify-items: center; }
  .screens-row img { width: 100%; height: auto; border: 7px solid var(--ink); border-radius: 30px; background: var(--ink); }
}

/* ---------- day and night: the live median by day, the quiet line by night ---------- */
.clock-sec { padding: clamp(72px, 9vw, 140px) 0 clamp(40px, 5vw, 72px); }
.dn { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0; margin-top: clamp(28px, 4vw, 56px); border-radius: var(--r-card); overflow: hidden; overflow: clip; }
.dn > div { display: grid; align-content: space-between; gap: 22px; min-height: clamp(300px, 34vw, 460px); padding: clamp(24px, 3vw, 44px); }
.dn-day { position: relative; background: var(--y); }
.dn-day > :not(.map-bg) { position: relative; }
.dn-day .label { justify-self: start; background: var(--ink); color: #fff; border-radius: 8px; padding: 7px 10px 6px; }
.dn-night .label { color: rgba(255,255,255,.7); }
.dn-night { background: var(--ink); color: #fff; }
.near-live { display: grid; justify-items: start; gap: 12px; }
.near-live[hidden] { display: none; }
.near-live .pill { font-size: clamp(72px, 11.1vw, 160px); padding: .12em .34em .02em; border-width: .03em; background: #fff; transform: rotate(-3deg); transform-origin: 0 100%; }
.near-cap { font: 800 clamp(20px, 1.8vw, 28px)/1.05 var(--display); letter-spacing: -.01em; }
.dn-big { font: 800 clamp(44px, 5vw, 76px)/.95 var(--display); letter-spacing: -.03em; color: var(--y); }
.dn-cap { max-width: 40ch; font-size: var(--fs-lead); line-height: 1.45; }
.dn-day .dn-cap { justify-self: start; background: var(--y); border-radius: 14px; padding: 10px 14px 11px; margin: -10px -14px -11px; }
.dn-night .dn-cap { color: rgba(255,255,255,.8); }
@media (max-width: 959px) { .dn { grid-template-columns: 1fr; } .dn > div { min-height: 0; } }

/* ---------- held, not taken: the money paragraph and the four what-ifs as hairline rows ---------- */
.held-sec { padding: clamp(56px, 7vw, 110px) 0; }
.held-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(32px, 6vw, 100px); align-items: start; }
.held-head { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 20px; justify-items: start; }
.held-head .lead { max-width: 36ch; }
.ifs { border-top: 2.5px solid var(--ink); }
.if { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.if-q { font: 800 clamp(24px, 2.4vw, 36px)/1.02 var(--display); letter-spacing: -.02em; }
.if .pill { grid-row: span 2; font-size: clamp(30px, 3.9vw, 56px); transform: rotate(-3deg); }
.if p { max-width: 44ch; color: #333; font-size: 17px; line-height: 1.5; }
@media (max-width: 959px) {
  .held-in { grid-template-columns: 1fr; }
  .held-head { position: static; }
  .if { grid-template-columns: 1fr; }
  .if .pill { grid-row: auto; justify-self: start; font-size: 32px; }
}

/* ---------- FAQ: the shared .faq/.qs, with the inner H2 ---------- */
.faq .pg-h2 { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 959px) { .faq .pg-h2 { position: static; } }

@media (prefers-reduced-motion: reduce) {
  .life .cam, .life-head { transition: none !important; }
  .person, .person .st, .person .earn, .say-bubble, .obj, .obj img, .hands-up, .approve-btn, .life-gaya, .clock, .mk-life .tk-p, .route { transition-duration: .2s !important; transition-delay: 0s !important; }
  .life[data-beat="5"] .clock-in { transition-duration: .2s; }
}
@media (prefers-contrast: more) { .say-bubble { box-shadow: 0 0 0 2px var(--ink); } }

/* round 7: the screenshots are a real app session, not this page's story: they say so */
.device-ex { position: absolute; z-index: 2; top: -14px; left: -10px; rotate: -5deg; }
.screens-row li .ex { justify-self: center; }
/* the numeral belongs to the tap: the moments after a tap keep it still instead of sliding it in again */
.beat .num-keep.ln > span { transform: none; transition: none; }