/* /safety: the hold drawn as a route on the map, forking at the lock into released or frozen.
   Loaded only by safety.html, on top of site.css. No GSAP here (spec 6 rule 9): safety.js scrubs on native scroll. */

/* ---------- inner-page type (spec 4: inner H1 128 / 48, inner H2 72 / 36, H3 40 / 28) ---------- */
.hold-route .h1 { font-size: clamp(48px, min(8.9vw, 14.2vh), 128px); letter-spacing: -.04em; }
.h3-in { font: 800 clamp(28px, 2.8vw, 40px)/1 var(--display); letter-spacing: -.02em; }

/* ---------- the held map ---------- */
.hold-route { height: 350vh; height: 350svh; --halo: var(--map); --tk-fs: clamp(34px, min(3.6vw, 5.8vh), 52px); --lk: clamp(170px, 34vh, 300px); }
.hold-route .frame { background: var(--map); }
.hold-route[data-beat="5"] .plate-y { opacity: 1; }
.hold-route[data-beat="5"] { --halo: var(--y); }
.hold-route .mark, .hold-route .mark::before { transition: color .8s var(--inout), background-color .8s var(--inout); }
.hold-route[data-beat="5"] .mark { color: #fff; }
.hold-route[data-beat="5"] .mark::before { background: var(--ink); top: -.03em; bottom: -.03em; }
/* frozen: the map goes cold */
.ice { position: absolute; inset: 0; background: rgba(168, 198, 222, .42); opacity: 0; transition: opacity .8s var(--inout); pointer-events: none; }
.hold-route[data-beat="6"] .ice { opacity: 1; }

/* the streets the money takes (plate units, sized like the plate by safety.js); stroke widths are set in screen px by safety.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; }
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.net path { stroke: rgba(18,18,18,.5); }
.net { opacity: 0; transition: opacity .5s var(--out); }
.hold-route:not([data-beat="0"]) .net { opacity: 1; }
.drawn path { stroke: var(--ink); }
.drawn .leg-frozen { stroke: #2F5D7C; }
.drawn .leg-paid { transition: opacity .5s var(--out); }
.hold-route[data-beat="6"] .drawn .leg-paid { opacity: .3; }

/* the lock sits where the route forks: big in the opener, then the size of a stop; grey when frozen */
.lock-at { position: absolute; z-index: 2; left: var(--px); top: var(--py); width: var(--lk); height: var(--lk); margin: calc(var(--lk) / -2) 0 0 calc(var(--lk) / -2); transition: transform 1s var(--inout), filter .8s var(--inout); }
.lock-at::before { content: ""; position: absolute; inset: 14% 14% 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,198,0,.38), rgba(255,198,0,0)); }
.lock-at img { position: relative; width: 100%; height: 100%; }
.hold-route:not([data-beat="0"]) .lock-at { transform: scale(.66); }
.hold-route[data-beat="6"] .lock-at { filter: saturate(.12) brightness(1.15); transform: scale(.66) rotate(-6deg); }
html.motion .hold-route[data-beat="0"] .lock-at img { animation: lock-in 1.4s var(--out) both; }
@keyframes lock-in { from { opacity: 0; transform: scale(1.12) translateY(5%); } }

/* the 24 h check: the same timer /how-it-works uses, beside the lock */
.clock { position: absolute; z-index: 3; left: calc(var(--px) + var(--lk) * .34 + var(--cd) * .5); top: calc(var(--py) - var(--lk) * .12); width: var(--cd); height: var(--cd); margin: calc(var(--cd) / -2) 0 0 calc(var(--cd) / -2); --cd: clamp(88px, 13vh, 124px); 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); }
.hold-route[data-beat="4"] .clock { opacity: 1; transform: rotate(-6deg); }
.hold-route[data-beat="4"] .clock-in { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--inout) .3s; }

/* a stop on the way: the app's own blue status chip */
.stop { position: absolute; z-index: 3; left: var(--px); top: var(--py); translate: -50% calc(var(--tk-fs) * .62 + 12px); font: 600 14px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #1F55D6; background: #fff; border-radius: 999px; padding: 8px 12px 7px; box-shadow: inset 0 0 0 2px #1F55D6; opacity: 0; transform: scale(.6); transition: opacity .25s var(--out), transform .4s var(--out); }
.hold-route[data-beat="3"] .stop, .hold-route[data-beat="4"] .stop, .hold-route[data-beat="5"] .stop, .hold-route[data-beat="6"] .stop { opacity: 1; transform: none; }

/* what travels is the money: a zero-size anchor moved by safety.js (translate), the app's pill on it */
.mover { position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0; font: 800 var(--tk-fs)/1 var(--display); opacity: 0; transition: opacity .3s var(--out); }
.mover .tk-p { position: absolute; left: 0; top: 0; translate: -50% -50%; box-shadow: 0 .12em .26em -.06em rgba(18,18,18,.38); transition: opacity .3s var(--out), transform .45s var(--out); }
.mover small { font: 600 .26em/1 var(--text); letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: .55em .8em .45em; }
.mover .ex { position: absolute; left: 0; top: 0; translate: calc(var(--tk-fs) * 1.3) calc(var(--tk-fs) * -1.15); rotate: 4deg; }
.m-hold { background: var(--ink); color: var(--y); opacity: 0; transform: scale(.7); }
.m-hold small { background: var(--y); color: var(--ink); }
.hold-route:not([data-beat="0"]) .m-held { opacity: 1; }
.hold-route[data-beat="5"] .m-held, .hold-route[data-beat="6"] .m-held { opacity: 0; }
.hold-route[data-beat="1"] .m-held .ex { opacity: 0; }
.hold-route:not([data-beat="0"]):not([data-beat="1"]) .m-post { opacity: 0; transform: scale(.7); }
.hold-route:not([data-beat="0"]):not([data-beat="1"]) .m-hold { opacity: 1; transform: rotate(-3deg); }
html.motion .hold-route[data-beat="1"] .m-post { animation: pin-drop .55s var(--out) both; }
.m-paid .tk-p small { background: var(--ink); color: #fff; }
.m-paid .tk-p { transform: rotate(-3deg); }
.hold-route[data-beat="5"] .m-paid { opacity: 1; }
.hold-route[data-beat="6"] .m-paid { opacity: .35; }
.m-frozen .tk-p { background: #DDEAF3; color: #173B53; border-color: #173B53; transform: rotate(3deg); }
.hold-route[data-beat="6"] .m-frozen { opacity: 1; }
/* desktop: each branch's pill hangs off the far side of its stop, away from the lock */
@media (min-width: 960px) { .m-paid .tk-p { translate: -20% -50%; } .m-frozen .tk-p { translate: -80% -50%; } }

/* copy: the H1 opens the scene, then steps back to a title; the six rules are the route's legend */
.route-in { position: relative; z-index: 5; height: 100%; padding-top: calc(var(--nav-h) + clamp(16px, 3.4vh, 32px)); pointer-events: none; }
.route-head { transform-origin: 0 0; transition: transform .9s var(--inout); }
.hold-route:not([data-beat="0"]) .route-head { transform: scale(.5); }
.route-lead { max-width: 38ch; 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; }
.hold-route:not([data-beat="0"]) .route-lead { opacity: 0; visibility: hidden; }
.line { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + clamp(16px, 3.4vh, 32px) + var(--fs-h1-in, 128px) * .96 + 36px); width: min(560px, 42vw); display: grid; gap: clamp(6px, 1.4vh, 16px); opacity: 0; transition: opacity .4s var(--out); --fs-h1-in: clamp(48px, min(8.9vw, 14.2vh), 128px); }
.hold-route:not([data-beat="0"]) .line { opacity: 1; transition-delay: .3s; }
.line::before { content: ""; position: absolute; left: 62px; top: 30px; bottom: 30px; width: 4px; margin-left: -2px; background: var(--ink); border-radius: 2px; }
.stn { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 18px; min-height: clamp(56px, 9vh, 84px); }
.stn .pill { position: relative; justify-self: center; font-size: clamp(24px, 2.4vw, 34px); background: #fff; color: rgba(18,18,18,.42); border-color: rgba(18,18,18,.3); transition: transform .45s var(--out), background-color .3s var(--out), color .3s var(--out), border-color .3s var(--out); }
.stn.is-past .pill { background: var(--ink); color: var(--y); border-color: var(--ink); }
.stn.is-on .pill { background: var(--y); color: var(--ink); border-color: var(--ink); transform: rotate(-3deg) scale(1.14); }
.stn p { justify-self: start; max-width: 28ch; background: #fff; border-radius: 14px; padding: 10px 14px 11px; font-size: 16px; line-height: 1.4; opacity: 0; transform: translateX(-10px); transition: opacity .25s var(--out), transform .4s var(--out); }
.stn.is-on p { opacity: 1; transform: none; }

/* ---------- phone: one portrait map; the open rule sits as a card at the bottom ---------- */
@media (max-width: 959px) {
  .hold-route { height: 260vh; height: 260svh; --tk-fs: 30px; --lk: 170px; }
  .hold-route .h1 { font-size: 48px; }
  .hold-route:not([data-beat="0"]) .route-head { transform: scale(.72); }
  .route-lead { font-size: 16px;  }
  .hold-route:not([data-beat="0"]) .lock-at { transform: scale(.7); }
  .hold-route[data-beat="6"] .lock-at { transform: scale(.7) rotate(-6deg); }
  .clock { --cd: 80px; left: calc(var(--px) + var(--lk) * .3 + var(--cd) * .3); top: calc(var(--py) - var(--lk) * .32); }
  .stop { font-size: 12px; padding: 7px 10px 6px; }
  .m-paid .tk-p small { display: none; }
  .line { top: auto; bottom: 18px; left: var(--gutter); right: var(--gutter); width: auto; display: block; }
  .line::before { display: none; }
  .stn { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 10px; min-height: 0; opacity: 0; transition: opacity .25s var(--out); }
  .stn.is-on { opacity: 1; }
  .stn .pill { justify-self: start; font-size: 40px; }
  .stn p { max-width: none; font-size: 16px; box-shadow: inset 0 0 0 1.5px rgba(18,18,18,.14); }
}

/* ---------- held, not taken ---------- */
.held-sec { padding: clamp(72px, 9vw, 140px) 0 clamp(48px, 6vw, 90px); }
.held-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 6vw, 100px); align-items: end; }
.held-copy { display: grid; gap: 18px; justify-items: start; }
.held-copy .lead { font-size: clamp(19px, 1.7vw, 24px); max-width: 38ch; }
@media (max-width: 959px) { .held-in { grid-template-columns: 1fr; } }

/* ---------- real people ---------- */
.real { padding: clamp(56px, 7vw, 110px) 0 clamp(56px, 7vw, 110px); border-top: 1px solid var(--rule); }
.real-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "head scan" "id scan"; gap: clamp(32px, 4vw, 56px) clamp(32px, 6vw, 100px); align-items: start; }
.real-head { grid-area: head; display: grid; gap: 20px; justify-items: start; }
.real-head .lead { max-width: 30ch; font-weight: 600; }
.real-live li { display: grid; justify-items: start; gap: 12px; }
.real-live li[hidden] { display: none; }
.real-live .pill { font-size: clamp(72px, 11.1vw, 160px); padding: .12em .34em .02em; border-width: .03em; transform: rotate(-3deg); transform-origin: 0 100%; box-shadow: 0 .06em .16em rgba(18,18,18,.18); }
.real-cap { font: 800 clamp(20px, 1.8vw, 28px)/1.05 var(--display); letter-spacing: -.01em; }
.real-wait { font: 600 17px/1.4 var(--text); color: var(--mute); }
.real-wait[hidden] { display: none; }
.real-id { grid-area: id; display: grid; gap: 14px; max-width: 46ch; padding-top: 22px; border-top: 2.5px solid var(--ink); }
.real-id p { font-size: var(--fs-lead); line-height: 1.5; }
/* the check every person passes: a face in a scan frame, then ID and Face ticked */
.scan { grid-area: scan; display: grid; justify-items: center; gap: 22px; margin: 0; padding: clamp(28px, 4vw, 56px) 0; position: relative; }
.scan::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); background: var(--map) url(/site-assets/map/street-1440.svg) 50% 50% / cover no-repeat; }
.scan > * { position: relative; }
.scan-frame { position: relative; display: grid; place-items: center; width: clamp(200px, 22vw, 300px); aspect-ratio: 1; }
.scan-frame i { position: absolute; width: 22%; height: 22%; border: 0 solid var(--ink); }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-width: 6px 0 0 6px; border-radius: 18px 0 0 0; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-width: 6px 6px 0 0; border-radius: 0 18px 0 0; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 6px 6px; border-radius: 0 0 0 18px; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 6px 6px 0; border-radius: 0 0 18px 0; }
.scan-tok { display: grid; place-items: center; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--c-line); color: #fff; font: 800 clamp(64px, 7vw, 104px)/1 var(--display); padding-top: .08em; box-shadow: 0 0 0 6px var(--ink), 0 18px 36px -14px rgba(18,18,18,.4); }
html.motion .real.is-in .scan-frame i { animation: scan-pulse 2.6s var(--inout) 2; }
@keyframes scan-pulse { 50% { transform: scale(.9); } }
.scan-checks { display: flex; gap: 10px; }
.scan-checks .pill { gap: .3em; font-size: clamp(26px, 2.4vw, 36px); }
.scan-checks .pill:nth-child(1) { transform: rotate(-4deg); }
.scan-checks .pill:nth-child(2) { transform: rotate(3deg); }
.scan-checks svg { width: .7em; height: .7em; }
@media (max-width: 959px) {
  .real-top { grid-template-columns: 1fr; grid-template-areas: "head" "scan" "id"; }
  .real-live .pill { font-size: min(26vw, 104px); }
}

/* ---------- zero tolerance: the one ink band ---------- */
.zero { background: var(--ink); color: #fff; padding: clamp(72px, 9vw, 140px) 0; }
.zero-label { color: var(--y); margin-bottom: 22px; }
.zero-line { font: 800 clamp(34px, 5vw, 76px)/.98 var(--display); letter-spacing: -.03em; max-width: 20ch; }
.zero-line .mark { color: var(--ink); }
.zero-line .mark::before { top: .04em; bottom: -.02em; }

/* ---------- help that answers + adults only ---------- */
.help { padding: clamp(56px, 7vw, 110px) 0; }
.help-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px clamp(32px, 6vw, 100px); align-items: start; }
.help-a, .help-b { display: grid; gap: 14px; padding-top: 22px; border-top: 2.5px solid var(--ink); }
.help-a p, .help-b p { font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; }
.help-a p { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; font-weight: 600; max-width: 26ch; }
.inline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--y); }
@media (hover: hover) { .inline:hover { text-decoration-color: var(--ink); } }
.adult .pill { font-size: clamp(48px, 5vw, 72px); transform: rotate(-4deg); }
.help-b { position: relative; }
.help-b .adult { position: absolute; right: 0; top: -36px; }
@media (max-width: 959px) { .help-in { grid-template-columns: 1fr; } .help-b .adult { top: -30px; } }

/* ---------- the plain-English version, in a yellow card ---------- */
.plain { padding: 0 0 clamp(56px, 7vw, 110px); }
.plain-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px clamp(32px, 5vw, 80px); background: var(--y); border-radius: var(--r-card); padding: clamp(28px, 4vw, 64px); }
.plain-side { display: grid; align-content: start; justify-items: start; gap: 18px; }
.plain-links { display: grid; justify-items: start; margin-top: 8px; }
.plain-list li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid rgba(18,18,18,.2); font-size: 17px; line-height: 1.5; }
.plain-list li:first-child { border-top: 2.5px solid var(--ink); }
.plain-list li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.plain .mark::before { background: #fff; }
@media (max-width: 959px) { .plain-card { grid-template-columns: 1fr; } }

/* ---------- 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) {
  .route-head, .lock-at { transition: none !important; }
  .mover, .mover .tk-p, .stop, .clock, .stn .pill, .stn p, .ice, .net, .line { transition-duration: .2s !important; transition-delay: 0s !important; }
  .hold-route[data-beat="4"] .clock-in { transition-duration: .2s; }
}
@media (prefers-contrast: more) { .stn p { box-shadow: 0 0 0 2px var(--ink); } }