/* AppPass homepage v2 — "The Review Desk".
   Self-contained: no CDN, no web fonts, no network. Solid warm page colour, pastel fills, navy-grey ink. */
:root {
  --page: #FAF7F5; --surface: #FFFFFF;
  --ink: #2B3350; --ink-2: #4B5370; --muted: #626985; --line: #EFE7F1; --line-2: #E1D7E8;
  --pink: #FFC9DA; --pink-50: #FFF2F6; --pink-100: #FFE1EB; --pink-ink: #B4386A;
  --blue: #C4E0FF; --blue-50: #F0F7FF; --blue-100: #DCEBFF; --blue-ink: #2D5F9E;
  --mint: #BDEFD9; --mint-50: #EEFBF5; --mint-100: #D8F5E7; --mint-ink: #1C7553;
  --peach: #FFE2C7; --lav: #E6DDFF; --lav-50: #F5F1FF;
  --high: #B83A5E; --high-tint: #FFE4EA; --high-fill: #FF9DB3;
  --med: #8F5A00;  --med-tint: #FFF1D6;  --med-fill: #FFCB7D;
  --low: #1C7553;  --low-tint: #DDF6EA;  --low-fill: #86DDB9;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
  --hand: "Bradley Hand", "Chalkboard SE", "Segoe Print", "Ink Free", "Comic Sans MS", cursive;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-smooth: cubic-bezier(.32,.72,0,1);
  --ease-pop: cubic-bezier(.2,1.5,.4,1);
  --ease-stamp: cubic-bezier(.2,.9,.25,1.15);

  --max: 1180px;
  --shadow: 0 1px 2px rgba(120,96,160,.05), 0 12px 32px rgba(150,120,190,.10);
  --doodle-r: 18px 7px 16px 9px / 9px 16px 7px 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--round); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-weight: 700; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; min-width: 0; }
.hand { font-family: var(--hand); color: var(--ink-2); font-weight: 400; }
.muted { color: var(--muted); }

/* ---------- Buttons, pills ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font-family: var(--round); font-weight: 750; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
.btn-pink { background: var(--pink); color: var(--ink); box-shadow: 0 2px 0 #F3A9C1, 0 8px 20px rgba(255,150,185,.28); }
.btn-pink:hover { background: #FFBDD1; transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 8px 20px rgba(43,51,80,.18); }
.btn-ink:hover { background: #343D5F; transform: translateY(-1px); }

.pill-soon, .tag-soon { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-family: var(--round); font-weight: 750; }
.pill-soon { padding: 6px 14px 6px 12px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); }
.pill-soon i, .tag-soon i { width: 8px; height: 8px; border-radius: 50%; background: #FF8FB6; box-shadow: 0 0 0 3px var(--pink-100); }
.tag-soon { padding: 5px 11px; background: var(--pink-100); color: var(--pink-ink); font-size: 12.5px; letter-spacing: .02em; }
.tag-soon i { box-shadow: none; background: var(--pink-ink); width: 6px; height: 6px; }
.eyebrow { font-family: var(--round); font-weight: 750; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-ink); margin-bottom: 12px; }
.h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--page); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--round); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.brand svg { width: 34px; height: 24px; filter: drop-shadow(0 2px 4px rgba(180,120,170,.25)); }
.brand em { font-style: normal; color: var(--pink-ink); }
.nav-links { display: flex; gap: 6px; margin-left: 12px; }
.nav-links a { text-decoration: none; font-family: var(--round); font-weight: 700; font-size: 15px; color: var(--ink-2); padding: 8px 12px; border-radius: 10px; transition: background-color .16s; }
.nav-links a:hover { background: var(--pink-50); color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ---------- Hero ---------- */
.hero { padding: 14px 0 40px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.h1 { margin-top: 14px; font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; max-width: 1040px; }
.h1-lead { display: block; }
.rot { position: relative; display: inline-block; white-space: nowrap; padding: .02em .32em .06em .3em; margin-top: .06em; color: var(--ink); }
.rot-bg { position: absolute; inset: 0; border-radius: 999px; background: var(--tone-bg, var(--pink-100)); transition: background-color .4s; transform-origin: 50% 50%; z-index: -1; }
.rot-dot { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--tone-dot, #FF8FB6); vertical-align: .14em; margin-right: .22em; transition: background-color .4s; }
.rot[data-tone="pink"] { --tone-bg: var(--pink-100); --tone-dot: #F07AA3; --tone-ink: var(--pink-ink); }
.rot[data-tone="blue"] { --tone-bg: var(--blue-100); --tone-dot: #5B95DE; --tone-ink: var(--blue-ink); }
.rot[data-tone="mint"] { --tone-bg: var(--mint-100); --tone-dot: #3DBD8A; --tone-ink: var(--mint-ink); }
.h1 { isolation: isolate; }
.rot-text { white-space: pre-wrap; }
.rot-text .w { display: inline-block; white-space: nowrap; }
.rot-text .c { display: inline-block; transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), color .26s; transition-delay: calc(var(--i) * 18ms); }
.rot-text.is-wiping .c { opacity: 0; transform: translateY(-.14em); color: var(--tone-ink); }
.rot-text .c.pre { opacity: 0; transform: translateY(.16em); color: var(--tone-ink); transition: none; }
.hero-copy .lead { margin-top: 14px; width: 100%; max-width: 880px; font-size: 18.5px; text-wrap: balance; }

.join { margin-top: 20px; display: flex; gap: 8px; width: 100%; max-width: 520px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow); }
.join input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; padding: 0 8px 0 16px; font-size: 16px; outline: none; border-radius: 999px; }
.join input::placeholder { color: #9AA0B6; }
.join:focus-within { border-color: #B6D3F5; box-shadow: 0 0 0 4px var(--blue-50), var(--shadow); }
.join .btn { height: 44px; }
.join.err { border-color: var(--high-fill); }
.micro { margin-top: 10px; font-size: 13.5px; color: var(--muted); min-height: 22px; }
.micro .ok-msg { display: inline-flex; align-items: center; gap: 8px; color: var(--mint-ink); background: var(--mint-100); padding: 3px 12px; border-radius: 999px; font-weight: 650; animation: msgIn .4s var(--ease-out) both; }
.micro .err-msg { color: var(--high); font-weight: 600; }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Intro stage ---------- */
.intro-wrap { margin-top: 14px; }
.intro { position: relative; }
.stage-wrap { container-type: inline-size; width: 100%; max-width: min(1120px, calc((100svh - 520px) * 1120 / 420)); min-width: min(100%, 800px); margin: 0 auto; }
.stage {
  --gw: 112; --gh: 42;
  position: relative; font-size: calc(100cqw / 112); aspect-ratio: 1120 / 420; width: 100%;
  background-color: var(--surface);
  background-image: radial-gradient(circle, #EFE7F1 1.3px, transparent 1.6px);
  background-size: 22px 22px; background-position: 11px 11px;
  border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow);
  overflow: hidden; cursor: default; user-select: none; -webkit-user-select: none;
  opacity: 0; transform: translateY(16px);
}
.intro.b0 .stage, .intro.settled .stage, .intro.instant .stage { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.intro.playing .stage { cursor: pointer; }
.stage-inner { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .3s ease-out; }
.act { position: absolute; left: calc(var(--x) * 100% / var(--gw)); top: calc(var(--y) * 100% / var(--gh)); font-size: calc(var(--s, 1) * 1em); }
.bundle { position: absolute; inset: 0; transform-origin: 32% 72%; }

/* Paper lines */
.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lines-m { display: none; }
.lines path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.lines .base { stroke-width: .25; }
.lines .base2 { stroke-width: .175; opacity: .35; }
.lines .dash { stroke-width: .175; stroke-dasharray: .6 .7; opacity: .7; }
.lines .dash + .dash { stroke-dasharray: none; }
.m-draw { fill: none; stroke: #fff; stroke-linecap: butt !important; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro.b0 .lines .base { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out) .1s; }
.intro.b2 .mA { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out) .55s; }
.intro.b3 .mA { opacity: .0; transition: opacity .4s; }
.intro.b5 .mB { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out) .05s; }

/* Caption chip */
.cap { position: absolute; left: 1.8em; top: 1.6em; z-index: 5; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--round); font-weight: 750; font-size: 14px; color: var(--ink); box-shadow: 0 2px 8px rgba(150,120,190,.08); white-space: nowrap; transition: opacity .2s; }
.cap.swap { opacity: 0; }
.cap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cap-dot, #FF8FB6); margin-right: 8px; transition: background-color .3s; }

/* Positions — desktop grid 112 x 42 (1em = 10px at 1120 wide) */
.a-mascot  { --x: .6;  --y: 21.3; }
.a-phone   { --x: 23.6; --y: 15.4; }
.a-note    { --x: 22.2; --y: 11.6; }
.a-settings{ --x: 40.5; --y: 4.6; }
.a-film    { --x: 40.5; --y: 26.4; }
.a-tags    { --x: 62.6; --y: 4.4; }
.a-fixed   { --x: 63.4; --y: 5.6; }
.a-lens    { --x: 64.8; --y: 26.75; --sweep: 20.4em; }
.a-you     { --x: 57.6; --y: 18.6; }
.a-stamp   { --x: 95.6; --y: 19; }
.a-status  { --x: 84.6; --y: 31.4; }
.bundle    { --bx: -15em; --by: 3em; }

/* Mascot — three imagegen PNG poses (624x514, same crop box, laptop centred) swapped on a hand-drawn pink desk.
   Poses: worried = idle/typing (beats 2-4), stressed = "Rejected" (beat 1), happy = "Passed" (beat 5 + settled + reduced motion). */
.a-mascot { z-index: 3; opacity: 0; transform: translateY(1.2em) scale(.9); transform-origin: 50% 100%; }
.intro.b1 .a-mascot { opacity: 1; transform: none; transition: opacity .25s, transform .45s var(--ease-pop); }
.mascot { position: relative; width: 22em; height: 16.5em; }
.mascot .desk { position: absolute; left: .15em; top: 14.62em; width: 22.5em; height: 2.1em; overflow: visible; } /* inset off the stage edge / rounded corner; right end still meets the ground line */
.hop { position: absolute; inset: 0; transform-origin: 50% 92%; }
/* Laptop bottom (row 490 of 514) lands on the desk top at ~15.2em, the same spot as the old SVG laptop. */
.mascot .m { position: absolute; left: 0; top: -2.07em; width: 22em; height: 18.12em; opacity: 0; transform: translateY(.18em) scale(.985); transform-origin: 50% 95%; z-index: 0; transition: opacity .2s ease-in, transform .5s var(--ease-pop); }
.mascot .m img { display: block; width: 100%; height: 100%; transform-origin: 50% 95%; pointer-events: none; -webkit-user-drag: none; }
.mascot .m-worried { opacity: 1; transform: none; z-index: 1; }
/* Pose swap = a flipbook-style hard cut (0s opacity, both poses on the same frame) hidden in the squash of each hop,
   so no frame ever shows two poses double-exposed. Rail jumps (.instant) still get the global .25s fade. */
/* Beat 1: pops in worried, flinches to stressed as the first Rejected slip lands. */
.intro.b1 .m-worried { opacity: 0; transform: translateY(.18em) scale(.985); z-index: 0; transition-duration: 0s, .5s; transition-delay: .72s, .6s; }
.intro.b1 .m-stressed { opacity: 1; transform: none; z-index: 1; transition-duration: 0s, .5s; transition-timing-function: linear, var(--ease-pop); transition-delay: .72s, .6s; }
/* Beat 2: calms back to worried while recording. */
.intro.b2 .m-stressed { opacity: 0; transform: translateY(.18em) scale(.985); z-index: 0; transition-duration: 0s, .5s; transition-timing-function: linear, var(--ease-pop); transition-delay: .24s, .1s; }
.intro.b2 .m-worried { opacity: 1; transform: none; z-index: 1; transition-duration: 0s, .5s; transition-timing-function: linear, var(--ease-pop); transition-delay: .24s, .1s; }
/* Beat 5: cheers. */
.intro.b5 .m-worried { opacity: 0; transform: translateY(.18em) scale(.985); z-index: 0; transition-duration: 0s, .5s; transition-timing-function: linear, var(--ease-pop); transition-delay: .44s, .3s; }
.intro.b5 .m-happy { opacity: 1; transform: none; z-index: 1; transition-duration: 0s, .5s; transition-timing-function: linear, var(--ease-pop); transition-delay: .44s, .3s; }
/* Gentle bounce on each pose change (separate keyframe names so each beat restarts it). */
.intro.b1 .hop { animation: hopFlinch .55s .6s var(--ease-out); }
.intro.b2 .hop { animation: hopSoft .55s .1s var(--ease-out); }
.intro.b5 .hop { animation: hopCheer .7s .3s var(--ease-out); }
.intro.settled .hop { animation: cheer 4.6s 1.2s ease-in-out infinite; }
.intro.instant:not(.settled) .hop { animation: none !important; }
@keyframes hopFlinch { 0%, 100% { transform: none; } 22% { transform: translateY(.15em) scale(1.03, .955); } 52% { transform: translateY(-.35em) scale(.985, 1.02); } 78% { transform: translateY(.05em); } }
@keyframes hopSoft { 0%, 100% { transform: none; } 35% { transform: translateY(-.3em); } 65% { transform: scale(1.015, .98); } }
@keyframes hopCheer { 0%, 100% { transform: none; } 20% { transform: translateY(.12em) scale(1.03, .96); } 50% { transform: translateY(-.8em) scale(.985, 1.025); } 75% { transform: translateY(.04em) scale(1.015, .985); } }
/* Typing: a tiny two-frame jiggle, like the line boil on the doodles. */
.intro.playing:is(.b1:not(.b2), .b4:not(.b5)) .m-worried img { animation: typeBoil .34s steps(1) infinite; }
@keyframes typeBoil { 0% { transform: translateY(-.08em) rotate(-.35deg); } 50% { transform: none; } }
.tap { position: absolute; left: 12.2em; top: 6.7em; font-size: 1.35em; transform: rotate(-8deg); opacity: 0; transition: opacity .2s; white-space: nowrap; } /* em here = 1.35x mascot em */
.intro.playing.b4:not(.b5) .tap { opacity: .9; transition-delay: .1s; }
@keyframes cheer { 0%, 84%, 100% { transform: none; } 88% { transform: translateY(-.5em); } 92% { transform: none; } 95% { transform: translateY(-.25em); } }

/* Wall clock: time passing while you wait */
.a-clock { --x: 6; --y: 7.4; display: flex; align-items: center; gap: .6em; opacity: 0; }
.clock { width: 6.4em; height: 6.4em; overflow: visible; }
.a-clock .hand { font-size: 1.6em; transform: rotate(-5deg); white-space: nowrap; }
.intro.b1 .a-clock { opacity: 1; transition: opacity .4s .9s; }
.mh, .hh { transform-origin: 40px 40px; }
.intro.playing.b1:not(.b4) .mh { animation: spin 1.2s linear infinite; }
.intro.playing.b1:not(.b4) .hh { animation: spin 14.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.intro.b5 .a-clock .hand { opacity: 0; transition: opacity .3s; }

/* Phone */
.phone { width: 10.5em; height: 21em; overflow: visible; }
.phone .ln { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.phone .fillk { opacity: 0; }
.ph-app { opacity: 0; transform: scale(.7); transform-origin: 45px 70px; }
.intro.b1 .phone .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out) .15s; }
.intro.b1 .phone .fillk { opacity: 1; transition: opacity .3s .7s; }
.intro.b1 .ph-app { opacity: 1; transform: none; transition: opacity .3s .95s, transform .45s var(--ease-pop) .95s; }

.a-note { display: flex; align-items: center; gap: .3em; transform: rotate(-4deg); opacity: 0; }
.a-note .hand { font-size: 1.75em; white-space: nowrap; }
.a-note .tw { width: 1.3em; height: 1.3em; }
.intro.b1 .a-note { opacity: 1; transition: opacity .4s .7s; }

/* Hand-drawn boxes (CSS wobble radius + misregistered pastel offset) */
.doodle-box { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--doodle-r); box-shadow: .32em .32em 0 var(--off, var(--lav)); }

/* Settings card */
.a-settings { perspective: 60em; }
.settings { --off: var(--mint); width: 19em; padding: 1.1em 1.2em .7em; font-family: var(--round); opacity: 0; transform: rotateX(70deg); transform-origin: 50% 0; }
.intro.b2 .settings { opacity: 1; transform: none; transition: transform .5s var(--ease-out) .3s, opacity .25s .3s; }
.set-h { white-space: nowrap; display: flex; align-items: center; gap: .55em; font-weight: 800; font-size: 1.4em; margin-bottom: .45em; padding-bottom: .5em; border-bottom: 1.5px dashed var(--line-2); }
.set-h svg { width: 1.3em; height: 1.3em; }
.row { position: relative; display: flex; align-items: center; gap: .7em; height: 2.6em; font-size: 1.3em; font-weight: 700; color: var(--ink-2); }
.row span { flex: 1; white-space: nowrap; }
.ic { width: 1.2em; height: 1.2em; border-radius: 50%; border: 1.8px solid var(--ink); flex: none; position: relative; background: var(--blue-100); }
.ic-sub { background: var(--pink-100); border-radius: .35em; }
.ic-link { background: var(--peach); }
.ic-user { background: var(--lav); }
.ic-user::after { content: ""; position: absolute; left: 50%; top: 22%; width: 34%; height: 34%; margin-left: -17%; border-radius: 50%; background: var(--ink); opacity: .55; }
.mk { position: absolute; right: 0; top: 50%; width: 1.5em; height: 1.5em; margin-top: -.75em; border-radius: 50%; display: grid; place-items: center; font-size: .85em; font-weight: 900; border: 1.6px solid var(--ink); opacity: 0; transform: scale(.4); }
.mk.ok { background: var(--mint-100); color: var(--mint-ink); }
.mk.q { background: var(--pink-100); color: var(--pink-ink); }
.mk.warn { background: var(--high-tint); color: var(--high); }
.intro.b2 .mk.ok:not(.ok2), .intro.b2 .mk.q { opacity: 1; transform: none; transition: opacity .2s, transform .38s var(--ease-pop); transition-delay: calc(.75s + var(--i) * .1s); }
.intro.b3 .mk.q { opacity: 0; transform: scale(.4); transition-delay: 1s; }
.intro.b3 .mk.warn { opacity: 1; transform: none; transition: opacity .2s 1s, transform .38s var(--ease-pop) 1s; }
.intro.b4 .mk.warn { opacity: 0; transform: scale(.4); transition-delay: .3s; }
.intro.b4 .mk.ok2 { opacity: 1; transform: none; transition: opacity .2s .3s, transform .38s var(--ease-pop) .3s; }

/* Film strip */
.film { position: relative; width: 34em; height: 9.5em; }
.film-body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: scaleX(.08); transform-origin: 0 50%; opacity: 0; }
.intro.b2 .film-body { transform: none; opacity: 1; transition: transform .55s var(--ease-out), opacity .2s; }
.rec { position: absolute; left: .6em; top: 50%; margin-top: -.75em; display: flex; flex-direction: column; align-items: center; font-family: var(--round); font-weight: 800; font-size: .85em; color: var(--high); letter-spacing: .04em; opacity: 0; }
.rec i { width: .95em; height: .95em; border-radius: 50%; background: #F0627E; margin-bottom: .2em; }
.intro.b2 .rec { opacity: 1; transition: opacity .2s .1s; }
.intro.playing.b2:not(.b4) .rec i { animation: recBlink 1s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: .2; } }
.frame { position: absolute; top: 1.85em; left: calc(3.6em + var(--i) * 10.2em); width: 9.4em; height: 5.8em; border-radius: .5em .3em .6em .35em; border: 1.8px solid var(--ink); background: var(--blue-50); overflow: visible; opacity: 0; transform: translateX(-3em); }
.f2 { background: var(--pink-50); }
.f3 { background: var(--mint-50); }
.intro.b2 .frame { opacity: 1; transform: none; transition: opacity .3s, transform .45s var(--ease-out); transition-delay: calc(.15s + var(--i) * .14s); }
.intro.settled .frame { opacity: .72; transition: opacity .6s; transition-delay: 0s; }
.scr { position: absolute; inset: .55em .8em; display: flex; flex-direction: column; gap: .35em; }
.scr i { display: block; height: .45em; border-radius: .3em; background: var(--ink); opacity: .22; }
.s-login b { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--ink); align-self: center; }
.s-login i:nth-of-type(2) { width: 70%; }
.s-login em, .s-pay em { margin-top: auto; height: .9em; border-radius: .5em; background: var(--mint); border: 1.4px solid var(--ink); }
.s-pay b { font-family: var(--round); font-weight: 900; font-size: 1.6em; line-height: 1; color: var(--pink-ink); }
.s-list i { height: .55em; opacity: .18; }
.s-list i:nth-child(2) { width: 75%; } .s-list i:nth-child(4) { width: 55%; }
.fmk { position: absolute; right: -.6em; top: -.7em; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1.6px solid var(--ink); display: grid; place-items: center; font-family: var(--round); font-weight: 900; font-size: .9em; opacity: 0; transform: scale(.3); }
.fmk.ok { background: var(--mint-100); color: var(--mint-ink); }
.fmk.warn { background: var(--high-tint); color: var(--high); }
.intro.b3 .f1 .fmk.ok { opacity: 1; transform: none; transition: opacity .15s .8s, transform .38s var(--ease-pop) .8s; }
.intro.b3 .f2 .fmk.warn { opacity: 1; transform: none; transition: opacity .15s 1.12s, transform .38s var(--ease-pop) 1.12s; }
.intro.b3 .f3 .fmk.ok { opacity: 1; transform: none; transition: opacity .15s 1.42s, transform .38s var(--ease-pop) 1.42s; }
.intro.b4 .f2 .fmk.warn { opacity: 0; transform: scale(.3); transition: opacity .15s .5s, transform .2s .5s; }
.intro.b4 .f2 .fmk.ok2 { opacity: 1; transform: none; transition: opacity .15s .5s, transform .38s var(--ease-pop) .5s; }

/* Bundle travel: the cursor drags the settings card and film to the desk centre. */
.intro.b2 .bundle { animation: bundleIn 1.5s backwards; }
@keyframes bundleIn {
  0% { transform: translate(var(--bx), var(--by)) scale(.72); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  40% { transform: translate(var(--bx), var(--by)) scale(.82); animation-timing-function: cubic-bezier(.32,.72,0,1); }
  100% { transform: none; }
}

/* Cursors */
.cur { position: relative; display: inline-block; }
.cur svg { width: 2.6em; height: 3.2em; overflow: visible; filter: drop-shadow(0 2px 3px rgba(43,51,80,.12)); }
.cur b { position: absolute; left: 2.2em; top: 2.6em; padding: .25em .7em .3em; border-radius: .35em .9em .9em .9em; font-family: var(--round); font-weight: 800; font-size: 1.25em; white-space: nowrap; border: 1.6px solid var(--ink); }
.cur-you b { background: var(--pink); color: var(--pink-ink); }
.cur-ap b { background: var(--mint); color: var(--mint-ink); }

.a-you { z-index: 6; }
.a-you { opacity: 0; transition: opacity .3s; }
.intro.b2 .a-you { opacity: 1; transition: opacity .25s; }
.intro.b3 .a-you { opacity: 0; transition: opacity .35s .1s, transform .45s var(--ease-out) .1s; transform: translate(-3em, 2em); }
.a-you { --gx: -13.4em; --gy: 3.6em; --sx: -14em; --sy: 18em; }
.intro.b2 .you-move { animation: youIn 1.5s backwards; }
@keyframes youIn {
  0% { transform: translate(var(--sx), var(--sy)); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  32% { transform: translate(var(--gx), var(--gy)); }
  40% { transform: translate(var(--gx), var(--gy)) scale(.9); animation-timing-function: cubic-bezier(.32,.72,0,1); }
  100% { transform: none; }
}

/* Lens character (AppPass) */
.a-lens { z-index: 5; opacity: 0; }
.intro.b3 .a-lens { opacity: 1; transition: opacity .3s; }
.lens-svg { width: 11em; height: 11em; overflow: visible; position: relative; }
.lens-move { position: relative; }
.intro.b3 .lens-move { animation: lensIn 1.6s backwards; }
@keyframes lensIn {
  0% { transform: translate(calc(var(--sweep) * -1 + 7em), -14em) rotate(-12deg); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  37.5% { transform: translate(calc(var(--sweep) * -1), 0) rotate(-4deg); animation-timing-function: cubic-bezier(.45,0,.35,1); }
  100% { transform: none; }
}
.scanline { position: absolute; left: 4.4em; top: -1.6em; width: .9em; height: 12em; margin-left: -.45em; border-radius: .5em; background: var(--mint); opacity: 0; z-index: -1; }
.intro.b3 .scanline { animation: scan 1.6s backwards; }
@keyframes scan { 0%, 36% { opacity: 0; } 44%, 92% { opacity: .85; } 100% { opacity: 0; } }
.cur-ap { position: absolute; left: 9.6em; top: 8.6em; }
.intro.settled .lens-float { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.intro.settled .eyes { animation: blink 4.6s 2s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.12); } }

/* Risk tags (sticky notes) */
.a-tags { z-index: 4; width: 19em; }
.slot { position: absolute; left: 0; top: calc(var(--k) * 5.6em); width: 19em; }
.slot:nth-child(2) { left: 1.2em; }
.tag { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55em; align-items: center; width: 19em; padding: .55em .9em .6em; border: 2px solid var(--ink); border-radius: 6px 14px 7px 12px / 12px 6px 14px 7px; font-family: var(--round);
  opacity: 0; transform: translateY(.8em) scale(.6) rotate(var(--tilt)); }
.tag b { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; padding: 0 .55em; border-radius: .5em; font-size: 1.05em; font-weight: 900; letter-spacing: .06em; border: 1.5px solid var(--ink); }
.tag span { font-weight: 800; font-size: 1.45em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tag em { font-family: var(--hand); font-style: normal; font-size: 1.3em; color: var(--ink-2); line-height: 1.15; white-space: nowrap; }
.t-high { background: var(--high-tint); box-shadow: .3em .3em 0 var(--high-fill); } .t-high b { background: var(--high-fill); color: var(--high); } .t-high span { color: var(--high); }
.t-med  { background: var(--med-tint);  box-shadow: .3em .3em 0 var(--med-fill); }  .t-med b  { background: var(--med-fill);  color: var(--med); }  .t-med span { color: var(--med); }
.t-low  { background: var(--low-tint);  box-shadow: .3em .3em 0 var(--low-fill); }  .t-low b  { background: var(--low-fill);  color: var(--low); }  .t-low span { color: var(--low); }
.intro.b3 .tag { opacity: 1; transform: rotate(var(--tilt)); transition: transform .45s var(--ease-pop), opacity .2s; transition-delay: calc(.95s + var(--k) * .18s); }
.scr-ck { position: absolute; right: -1.5em; top: -1.1em; width: 3.4em; height: 2.8em; overflow: visible; }
.scr-ck path { fill: none; stroke: var(--mint-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro.b4 .scr-ck path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s var(--ease-out); transition-delay: calc(.1s + var(--k) * .22s); }
.intro.b4 .tag { opacity: 0; transform: translateY(4em) rotate(calc(var(--tilt) + 12deg)); transition: none; animation: peel .5s backwards; animation-delay: calc(.55s + var(--k) * .22s); animation-timing-function: cubic-bezier(.4,0,.6,1); }
@keyframes peel {
  0% { opacity: 1; transform: rotate(var(--tilt)); }
  40% { opacity: 1; transform: translateY(-3em) rotate(calc(var(--tilt) + 7deg)); }
  100% { opacity: 0; transform: translateY(4em) rotate(calc(var(--tilt) + 12deg)); }
}
.spark-b { position: absolute; left: 6.5em; top: .2em; width: 3.4em; height: 3.4em; opacity: 0; transform: scale(0); }
.intro.b4 .spark-b { animation: sparkPop .55s backwards; animation-delay: calc(.7s + var(--k) * .22s); }
@keyframes sparkPop { 0% { opacity: 1; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(30deg); } 100% { opacity: 0; transform: scale(.6) rotate(60deg); } }

/* Rejection slips (the pain): they pile up in the empty corner, fade while AppPass works, then blow away so the stamp lands in their place. */
.a-rej { --x: 85.6; --y: 4.6; z-index: 4; transition: opacity .5s, filter .5s; }
.rej-slot { position: absolute; left: 0; top: calc(var(--k) * 7.2em); }
.rej-slot:nth-child(2) { left: 3.2em; }
.rej-slot:nth-child(3) { left: .8em; }
.rej { --off: var(--high-fill); display: flex; align-items: center; gap: .8em; width: 19.5em; padding: .75em 1em .8em; font-family: var(--round); background: var(--surface); border: 2px solid var(--ink); border-radius: var(--doodle-r); box-shadow: .32em .32em 0 var(--off);
  opacity: 0; transform: translateY(-1.2em) scale(1.3) rotate(var(--tilt)); }
.rej > i { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--high-tint); border: 1.6px solid var(--ink); color: var(--high); font-style: normal; font-weight: 900; font-size: 1.15em; }
.rej small { display: block; font-size: 1em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.rej b { display: block; font-size: 1.6em; font-weight: 900; color: var(--ink); line-height: 1.15; }
.rej em { display: block; font-family: var(--hand); font-style: normal; font-size: 1.3em; color: var(--high); line-height: 1.2; white-space: nowrap; }
.rej-why { position: absolute; left: 2.6em; top: 10.7em; font-size: 2.1em; color: var(--high); transform: rotate(-6deg); white-space: nowrap; opacity: 0; }
.rej-why svg { position: absolute; left: -.2em; right: -.2em; bottom: -.35em; width: calc(100% + .4em); height: .5em; overflow: visible; }
.rej-why path { fill: none; stroke: var(--high-fill); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.intro.b1 .rej { opacity: 1; transform: rotate(var(--tilt)); transition: opacity .12s, transform .38s var(--ease-stamp); transition-delay: calc(.5s + var(--k) * .3s); }
.intro.b1 .rej-why { opacity: 1; transition: opacity .3s 1.45s; }
.intro.playing.b1:not(.b3) .rej-slot:nth-child(3) .rej { animation: jolt .3s calc(1.1s) ease-out; }
@keyframes jolt { 30% { translate: .4em 0; } 60% { translate: -.3em 0; } }
.intro.b3 .a-rej { opacity: .42; filter: grayscale(.75); transition-delay: .2s; }
.intro.b4 .rej { opacity: 0; transform: translate(4em, 9em) rotate(calc(var(--tilt) + 28deg)) scale(.7); transition: opacity .35s ease-in, transform .55s cubic-bezier(.5,0,.75,0); transition-delay: calc(.15s + var(--k) * .12s); }
.intro.b4 .rej-why { opacity: 0; transition: opacity .25s; }

/* Fixed note (resting composition) */
.fixed { --off: var(--mint); width: 14.6em; padding: .8em 1.1em .7em; font-family: var(--round); transform: rotate(2.5deg) translateY(.6em); opacity: 0; }
.intro.settled .fixed { opacity: 1; transform: rotate(2.5deg); transition: opacity .5s .1s, transform .6s var(--ease-out) .1s; }
.fixed .hand { display: block; font-size: 1.7em; color: var(--mint-ink); transform: rotate(-4deg); margin: -.1em 0 .25em; }
.fixed p { display: flex; align-items: center; gap: .55em; font-weight: 800; font-size: 1.35em; line-height: 1.8; color: var(--ink-2); }
.fixed p i { width: .6em; height: .6em; border-radius: 50%; }
.fixed p b { margin-left: auto; color: var(--mint-ink); }
.d-high { background: var(--high-fill); } .d-med { background: var(--med-fill); } .d-low { background: var(--low-fill); }

/* Stamp (v1 .ink-stamp, re-timed for the stage) */
.a-stamp { z-index: 6; }
.stamp-zone { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ink-stamp { position: absolute; left: 0; top: 0; font-size: 1em; border-radius: 1.8em; background: rgba(246,255,251,.92); box-shadow: 0 .5em 1.6em rgba(60,150,115,.16); --rot: -9deg; transform: translate(-50%, -50%) rotate(var(--rot)); opacity: 0; }
.ink-stamp .ink { position: relative; display: flex; flex-direction: column; align-items: center; padding: .9em 2em 1em; border: .5em solid #4CC595; border-radius: 1.8em; color: #27A274;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 22em 22em;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 22em 22em; }
.ink-stamp .ink::before { content: ""; position: absolute; inset: .45em; border: .16em solid #4CC595; border-radius: 1.25em; }
.ink-stamp .big { font-family: var(--round); font-weight: 900; font-size: 4.6em; letter-spacing: .08em; line-height: 1; padding-left: .08em; }
.ink-stamp .sub { display: flex; align-items: center; gap: .55em; margin-top: .35em; font-family: var(--round); font-weight: 800; font-size: 1.12em; letter-spacing: .16em; text-transform: uppercase; color: #E2779D; white-space: nowrap; }
.ink-stamp .sub svg { width: .9em; height: .9em; }
.intro.b5 .ink-stamp { opacity: 1; animation: stampIn .7s var(--ease-stamp) backwards; }
@keyframes stampIn {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.9); }
  55% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(.93); }
  78% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.03); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
}
.intro.b5 .stage-inner { animation: nudge .14s .38s linear; }
@keyframes nudge { 50% { transform: translateY(2px); } }
.bursts i { position: absolute; left: 0; top: 0; width: 2.6em; height: .42em; margin: -.21em 0 0 -1.3em; border-radius: 1em; background: #4CC595; opacity: 0; transform: rotate(var(--a)) translateX(13em) scaleX(.4); }
.bursts i:nth-child(even) { background: #E2779D; }
.intro.b5 .bursts i { animation: burst .55s .36s var(--ease-out) backwards; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateX(12em) scaleX(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(17em) scaleX(1); } }
.twk { position: absolute; width: 2em; height: 2em; opacity: 0; }
.tk1 { left: 11.5em; top: -9em; } .tk2 { left: -15.5em; top: 3.2em; width: 1.5em; height: 1.5em; } .tk3 { left: 12.8em; top: 4.6em; width: 1.4em; height: 1.4em; }
.intro.b5 .twk { opacity: 1; transition: opacity .3s .8s; }
.intro.settled .twk { animation: twinkle 2.4s ease-in-out infinite; }
.intro.settled .tk2 { animation-delay: .8s; } .intro.settled .tk3 { animation-delay: 1.6s; }
@keyframes twinkle { 0%, 100% { opacity: .6; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
.confetti { position: absolute; left: 0; top: 0; }
.confetti span { position: absolute; left: 0; top: 0; width: var(--sz, 1.4em); height: var(--sz, 1.4em); margin: -.7em 0 0 -.7em; opacity: 0; }
.confetti svg { width: 100%; height: 100%; overflow: visible; }
.intro.b5 .confetti span { animation: conf .95s var(--ease-out) backwards; animation-delay: calc(.4s + var(--j) * 30ms); }
@keyframes conf {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  12% { opacity: 1; }
  45% { opacity: 1; transform: translate(calc(var(--dx) * .7), var(--uy)) scale(1) rotate(calc(var(--r) * .5)); animation-timing-function: cubic-bezier(.4,0,.8,.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.9) rotate(var(--r)); }
}

/* Status pill */
.status { display: inline-flex; align-items: center; gap: .6em; height: 3.2em; padding: 0 1.3em 0 1.05em; border-radius: 999px; background: var(--mint-100); border: 1.6px solid #9FE0C6; color: var(--mint-ink); font-family: var(--round); font-weight: 800; font-size: 1.35em; white-space: nowrap; opacity: 0; transform: translateY(.4em); }
.status > i { width: .62em; height: .62em; border-radius: 50%; background: #3DBD8A; box-shadow: 0 0 0 .22em #BFEBD7; }
.status .ch { opacity: 0; }
.intro.b5 .status { opacity: 1; transform: none; transition: opacity .3s .55s, transform .4s var(--ease-out) .55s; }
.intro.b5 .status .ch { opacity: 1; transition: opacity .06s; transition-delay: calc(.7s + var(--i) * 28ms); }

/* Wobble only on the props; line boil is driven by JS during the intro. */

/* Instant mode (skip / rail jump / repeat visit): same end states, 250ms. */
.intro.instant .stage *, .intro.instant .rail * { transition-duration: .25s !important; transition-delay: 0s !important; }
.intro.instant .bundle, .intro.instant .you-move, .intro.instant .lens-move, .intro.instant .scanline, .intro.instant .tag, .intro.instant .spark-b,
.intro.instant .ink-stamp, .intro.instant .bursts i, .intro.instant .confetti span, .intro.instant .stage-inner { animation-duration: .25s !important; animation-delay: 0s !important; }
.intro.instant .confetti span, .intro.instant .bursts i, .intro.instant .spark-b, .intro.instant .stage-inner, .intro.instant .scanline { animation: none !important; }

/* Rail */
.rail { display: flex; align-items: center; gap: 18px; width: 100%; max-width: min(1120px, calc((100svh - 520px) * 1120 / 420)); min-width: min(100%, 800px); margin: 14px auto 0; }
.stage-wrap + .rail { width: 100%; }
.rail-segs { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; min-width: 0; }
.seg { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px; background: none; border: 0; cursor: pointer; text-align: left; min-width: 0; border-radius: 8px; }
.seg i { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.seg i b { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.seg span { font-family: var(--round); font-weight: 750; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.seg em { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; font-size: 11px; background: var(--line); color: var(--ink-2); transition: background-color .2s, color .2s; }
.seg:hover span { color: var(--ink); }
.intro.b1 .seg[data-beat="1"] b { transform: scaleX(1); transition: transform 1.6s linear; }
.intro.b2 .seg[data-beat="2"] b { transform: scaleX(1); transition: transform 1.6s linear; }
.intro.b3 .seg[data-beat="3"] b { transform: scaleX(1); transition: transform 1.8s linear; }
.intro.b4 .seg[data-beat="4"] b { transform: scaleX(1); transition: transform 1.6s linear; }
.intro.b5 .seg[data-beat="5"] b { transform: scaleX(1); transition: transform 1.2s linear; }
.seg[data-beat="1"] b { background: #F07AA3; } .seg[data-beat="2"] b { background: #9C86E8; } .seg[data-beat="3"] b { background: #5B95DE; } .seg[data-beat="4"] b { background: #F2A649; } .seg[data-beat="5"] b { background: #3DBD8A; }
.intro.b1:not(.b2) .seg[data-beat="1"] span, .intro.b2:not(.b3) .seg[data-beat="2"] span, .intro.b3:not(.b4) .seg[data-beat="3"] span, .intro.b4:not(.b5) .seg[data-beat="4"] span, .intro.b5 .seg[data-beat="5"] span { color: var(--ink); }
.intro.b1:not(.b2) .seg[data-beat="1"] em { background: var(--pink-100); color: var(--pink-ink); }
.intro.b2:not(.b3) .seg[data-beat="2"] em { background: var(--lav); color: #5B44B8; }
.intro.b3:not(.b4) .seg[data-beat="3"] em { background: var(--blue-100); color: var(--blue-ink); }
.intro.b4:not(.b5) .seg[data-beat="4"] em { background: var(--med-tint); color: var(--med); }
.intro.b5 .seg[data-beat="5"] em { background: var(--mint-100); color: var(--mint-ink); }
.replay { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-family: var(--round); font-weight: 750; font-size: 13.5px; color: var(--ink-2); cursor: pointer; transition: background-color .16s, opacity .3s; }
.replay:hover { background: var(--pink-50); color: var(--ink); }
.replay svg { width: 15px; height: 15px; }
.replay .r-replay { display: none; align-items: center; gap: 6px; }
.intro:not(.playing) .replay .r-skip { display: none; }
.intro:not(.playing) .replay .r-replay { display: inline-flex; animation: msgIn .4s var(--ease-out); }
.intro.static-final .replay { display: none; }
.intro.static-final .seg { cursor: default; pointer-events: none; }

/* Paused (off-screen / hidden tab) */
.intro.paused * { animation-play-state: paused !important; }

/* ---------- Sections ---------- */
.sec { padding: 112px 0; }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.rv { opacity: 0; transform: translateY(12px); }
.rv.in { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--rv, 0) * 120ms); }
html:not(.js) .rv, html.rm .rv { opacity: 1; transform: none; }

/* Pain */
.pain-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pain-art { position: relative; height: 560px; background: var(--lav-50); border-radius: 28px; border: 1px solid var(--line); overflow: hidden; }
.notes { position: absolute; left: 50%; top: 40px; width: 360px; margin-left: -180px; }
.rj { --off: var(--high-fill); position: absolute; left: 0; width: 360px; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--doodle-r); box-shadow: 4px 4px 0 var(--off); font-family: var(--round); }
.rj small { display: block; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rj b { display: block; font-size: 16.5px; font-weight: 800; }
.rj p { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.rj p em { font-style: normal; color: var(--high); font-weight: 800; }
.rj-ic { flex: none; width: 34px; height: 34px; border-radius: 10px 8px 11px 8px; display: grid; place-items: center; background: var(--high-tint); color: var(--high); font-weight: 900; border: 2px solid var(--ink); }
.rj1 { top: 0; transform: rotate(-4deg) translateX(-26px); --off: var(--pink); }
.rj2 { top: 96px; transform: rotate(2.5deg) translateX(22px); --off: var(--peach); }
.rj3 { top: 192px; transform: rotate(-1.2deg); }
.rj1.rv { transform: rotate(-4deg) translate(-26px, 12px); } .rj1.rv.in { transform: rotate(-4deg) translateX(-26px); }
.rj2.rv { transform: rotate(2.5deg) translate(22px, 12px); } .rj2.rv.in { transform: rotate(2.5deg) translateX(22px); }
.rj3.rv { transform: rotate(-1.2deg) translateY(12px); } .rj3.rv.in { transform: rotate(-1.2deg); }
/* Lower-page mascot: same imagegen PNG + desk geometry as the intro (.mascot), sized by font-size (22em wide).
   Box = 18.79em tall; laptop bottom (row 490 of 514) lands on the desk top at 16.69em. */
.pmas { position: absolute; left: 50%; width: 22em; height: 18.79em; margin-left: -11em; pointer-events: none; }
.pmas img { position: absolute; left: 0; top: 0; width: 22em; height: 18.12em; display: block; -webkit-user-drag: none; user-select: none; }
.pmas .desk { position: absolute; left: -.25em; top: 16.69em; width: 22.5em; height: 2.1em; overflow: visible; }
.pain-mascot { font-size: 12.4px; bottom: -.5em; }
.att { position: absolute; right: 30px; top: 320px; font-size: 24px; color: var(--pink-ink); transform: rotate(-6deg); }
.att svg { position: absolute; left: -16px; top: -10px; width: 150px; height: 56px; overflow: visible; }
.qm { position: absolute; font-family: var(--hand); font-size: 34px; color: #A99BDB; }
.q1 { left: 44px; top: 330px; transform: rotate(-12deg); } .q2 { left: 84px; top: 296px; font-size: 24px; transform: rotate(8deg); } .q3 { right: 76px; top: 400px; font-size: 28px; transform: rotate(14deg); }
.pain-copy .h2 { margin-bottom: 28px; }
.u-pink { background: linear-gradient(transparent 62%, var(--pink-100) 62%); padding: 0 .06em; }
.pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pain-list li { display: flex; gap: 14px; align-items: center; font-size: 18px; color: var(--ink-2); }
.pi { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px 9px 13px 10px; border: 2px solid var(--ink); font-family: var(--round); font-weight: 900; font-size: 18px; }
.pi-1 { background: var(--blue-100); box-shadow: 3px 3px 0 var(--blue); } .pi-2 { background: var(--peach); box-shadow: 3px 3px 0 var(--med-fill); font-size: 16px; } .pi-3 { background: var(--pink-100); box-shadow: 3px 3px 0 var(--pink); }

/* How it works */
.how-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.how-card { position: sticky; top: 96px; height: min(500px, calc(100vh - 140px)); border-radius: 28px; border: 1px solid var(--line); background: var(--pink-50); transition: background-color .4s; overflow: hidden; }
.how-card[data-step="2"] { background: var(--blue-50); } .how-card[data-step="3"] { background: var(--lav-50); } .how-card[data-step="4"] { background: var(--mint-50); }
.hd { position: absolute; inset: 7% 6% 10%; width: 88%; height: 83%; opacity: 0; filter: blur(6px); transform: scale(.97); transition: opacity .35s var(--ease-out), filter .35s var(--ease-out), transform .35s var(--ease-out); }
.hd.on { opacity: 1; filter: none; transform: none; }
.how-tab { position: absolute; left: 24px; bottom: 18px; font-size: 19px; transform: rotate(-3deg); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .38; transition: opacity .35s; }
.step.on { opacity: 1; }
.step:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 40px; }
.step:last-child { min-height: 54vh; }
.num { position: relative; width: 60px; height: 50px; display: grid; place-items: center; margin-bottom: 14px; }
.num svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.num b { position: relative; font-family: var(--round); font-weight: 900; font-size: 22px; }
.step[data-step="1"] .num svg path { fill: var(--pink-100); } .step[data-step="2"] .num svg path { fill: var(--blue-100); } .step[data-step="3"] .num svg path { fill: var(--lav); } .step[data-step="4"] .num svg path { fill: var(--mint-100); }
.step h3 { font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 10px; }
.step p { font-size: 17.5px; color: var(--ink-2); max-width: 470px; }
.step-art { display: none; }

/* Sample report */
.report-sec .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.report-wrap { position: relative; max-width: 860px; margin: 0 auto; padding-top: 30px; }
.peek { position: absolute; right: 54px; top: -36px; width: 104px; height: 104px; transform: rotate(-12deg); z-index: 0; }
.report { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.rep-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.rep-app { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rep-app b { display: block; font-family: var(--round); font-weight: 800; font-size: 17px; }
.rep-app small { color: var(--muted); font-size: 13.5px; }
.rep-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--pink-100); border: 1px solid #F6C9D8; position: relative; }
.rep-icon::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--pink); box-shadow: inset 0 0 0 4px #FFF2F6; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-family: var(--round); font-weight: 750; font-size: 12.5px; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-sample { background: var(--lav-50); color: #5B44B8; border: 1px dashed #C9B9F5; letter-spacing: .02em; }
.c-high { background: var(--high-tint); color: var(--high); } .c-med { background: var(--med-tint); color: var(--med); } .c-low { background: var(--low-tint); color: var(--low); }
.rep-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 24px; background: #FCFAFD; border-bottom: 1px solid var(--line); }
.rep-sum-t { margin-left: auto; font-family: var(--round); font-weight: 750; font-size: 13.5px; color: var(--muted); }
.risks { list-style: none; margin: 0; padding: 0; }
.risk { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.risk:last-child { border-bottom: 0; }
.sev { display: inline-grid; place-items: center; height: 26px; border-radius: 8px; font-family: var(--round); font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }
.s-high { background: var(--high-tint); color: var(--high); } .s-med { background: var(--med-tint); color: var(--med); } .s-low { background: var(--low-tint); color: var(--low); }
.risk-t { font-weight: 700; font-size: 16.5px; line-height: 1.4; }
.gl { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 7px; background: var(--blue-50); border: 1px solid #CFE2FA; color: var(--blue-ink); font-family: var(--round); font-weight: 650; font-size: 12.5px; font-variant-numeric: tabular-nums; vertical-align: 2px; }
.risk-f { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.risk-f b { color: var(--ink); }
.ts { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--page); border: 1px solid var(--line-2); font-family: var(--round); font-weight: 700; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-note { position: absolute; left: -24px; bottom: -46px; font-size: 21px; transform: rotate(-4deg); }
.rep-note::before { content: ""; position: absolute; left: 70px; top: -36px; width: 40px; height: 34px; border-left: 2px dashed var(--ink-2); border-top: 2px dashed var(--ink-2); border-radius: 30px 0 0 0; opacity: .6; }

/* Waitlist */
.early { padding-top: 80px; }
.early-card { position: relative; max-width: 860px; margin: 165px auto 0; padding: 128px 40px 52px; text-align: center; background: var(--mint-50); border: 1px solid #D5F0E3; border-radius: 32px; display: flex; flex-direction: column; align-items: center; }
.early-mascot { font-size: 13.5px; top: -159px; }
.early-card .pill-soon { margin-bottom: 14px; }
.early-card .lead { margin-top: 12px; }
.ec-spark { position: absolute; width: 26px; height: 26px; }
.e1 { left: 18%; top: 40px; } .e2 { right: 20%; top: 60px; width: 18px; height: 18px; } .e3 { right: 12%; bottom: 60px; width: 20px; height: 20px; }

/* Footer */
.foot { padding: 34px 0 44px; border-top: 1px solid var(--line); margin-top: 96px; }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }

/* ---------- Responsive ---------- */
/* ---------- Demo video ---------- */
.demo { padding-top: 40px; }
.demo .sec-head { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 24px; }
.demo-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.demo-tab { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-family: var(--round); font-weight: 750; font-size: 14.5px; color: var(--ink-2); cursor: pointer; transition: background-color .16s, border-color .16s; }
.demo-tab span { font-weight: 600; color: var(--muted); margin-left: 4px; }
.demo-tab:hover { background: var(--pink-50); }
.demo-tab[aria-selected="true"] { background: var(--pink-100); border-color: var(--pink); color: var(--ink); }
.demo-frame { position: relative; max-width: 960px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow), 0 0 0 10px var(--pink-50); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #FDFBFC; }
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); } .demo-bar i:nth-child(2) { background: var(--peach); } .demo-bar i:nth-child(3) { background: var(--mint); }
.demo-bar span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: var(--page); font-size: 12.5px; color: var(--muted); }
.demo-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--page); }
.demo-sound { position: absolute; left: 14px; bottom: 58px; z-index: 2; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.94); font-family: var(--round); font-weight: 750; font-size: 13.5px; color: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
.demo-sound .ds-on, .demo-sound[aria-pressed="true"] .ds-off { display: none; } .demo-sound[aria-pressed="true"] .ds-on { display: inline; }
.demo-frame figcaption { position: absolute; right: 16px; top: 7px; font-size: 13px; color: var(--muted); }
.demo-note { max-width: 720px; margin: 14px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.demo-tab .soon { font-style: normal; font-family: var(--round); font-weight: 800; font-size: 11px; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--pink-50, #FFF1F5); color: var(--pink-ink, #B4446E); white-space: nowrap; }
@media (max-width: 600px) {
  .demo { padding-top: 24px; }
  .demo-frame { border-radius: 16px; box-shadow: var(--shadow); }
  .demo-bar span, .demo-frame figcaption { display: none; }
  .demo-tab { padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
  .demo-tab > span { display: none; }
  .demo-tab .soon { font-size: 10.5px; padding: 2px 6px; }
}

@media (max-width: 1100px) {
  .nav-links a { padding: 8px 9px; font-size: 14.5px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .stage-wrap { max-width: 100%; min-width: 0; }
  .stage { aspect-ratio: 1120 / 460; --gh: 46; }
  .stage .act { margin-top: 2em; }
  .rail { max-width: 100%; min-width: 0; }
  .pain-grid, .how-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .how-card { display: none; }
  .step, .step:first-child, .step:last-child { min-height: 0; opacity: 1; padding: 0; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; }
  .step-art { display: block; width: 100%; height: auto; aspect-ratio: 440 / 330; max-height: 280px; margin: 4px 0 14px; border-radius: 16px; }
  .step[data-step="1"] .step-art { background: var(--pink-50); } .step[data-step="2"] .step-art { background: var(--blue-50); } .step[data-step="3"] .step-art { background: var(--lav-50); } .step[data-step="4"] .step-art { background: var(--mint-50); }
  .num { margin-bottom: 4px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .nav-in { gap: 10px; }
  .tag-soon { display: none; }
  .brand { font-size: 18px; }
  .hero { padding-top: 18px; }
  .h1 { font-size: clamp(34px, 9.6vw, 40px); line-height: 1.1; text-wrap: balance; }
  .h1-lead { display: inline; }
  .rot { display: inline; white-space: normal; padding: .02em .22em .05em .2em; background: var(--tone-bg); border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .4s; }
  .rot-bg { display: none; }
  .hero-copy .lead { font-size: 17px; }
  .join { flex-direction: column; border-radius: 22px; padding: 6px; }
  .join input { height: 46px; }
  .join .btn { width: 100%; height: 48px; }
  .intro-wrap { margin-top: 22px; }
  .stage { --gw: 35.8; --gh: 54; aspect-ratio: 358 / 540; font-size: calc(100cqw / 35.8); border-radius: 22px; background-size: 18px 18px; }
  .stage .act { margin-top: 0; }
  .lines-d { display: none; } .lines-m { display: block; }
  .cap { left: 1.2em; top: 1.2em; height: 28px; font-size: 12.5px; padding: 0 11px; }
  .a-mascot  { --x: .3;  --y: 7.6;  --s: .7; }
  .a-phone   { --x: 17.4; --y: 6.4;  --s: .62; }
  .a-note    { --x: 24.4; --y: 9.6;  --s: .82; }
  .a-settings{ --x: 1.2; --y: 21.2; --s: .76; }
  .a-tags    { --x: 18.2; --y: 21.6; --s: .84; }
  .a-rej     { --x: 1.4; --y: 48.3; --s: .56; }
  .a-rej     { --s: .7; }
  .rej { width: 14.5em; gap: .6em; padding: .7em .8em .75em; }
  .rej small, .rej .ag, .rej .gw { display: none; }
  .rej b { font-size: 1.75em; }
  .rej em { font-size: 1.5em; }
  .rej-slot { top: 0; left: calc(var(--k) * 15.4em) !important; }
  .rej-slot:nth-child(2) { top: .7em; }
  .rej-why { display: none; }
  .a-fixed   { --x: 18.8; --y: 22.4; --s: .88; }
  .a-film    { --x: 2.6; --y: 35.6; --s: .9; }
  .a-lens    { --x: 25.35; --y: 36.8; --s: .7; --sweep: 26.2em; }
  .cur-ap { left: 1.4em; top: 10em; }
  .cur-ap b { left: auto; right: 1.6em; border-radius: .9em .35em .9em .9em; }
  .a-you     { --x: 13.6; --y: 31.2; --s: .85; }
  .a-you     { --gx: 0em; --gy: -13em; --sx: -10em; --sy: 14em; }
  .a-stamp   { --x: 17.9; --y: 49.4; --s: .64; }
  .a-status, .a-clock { display: none; }
  .bundle    { --bx: 0em; --by: -11em; transform-origin: 50% 30%; }
  .slot:nth-child(2) { left: 0; }
  .confetti span:nth-child(n+7) { display: none; }
  .bursts i { transform: rotate(var(--a)) translateX(10em) scaleX(.4); }
  .tk1 { left: 10em; top: -7em; } .tk2 { left: -13em; top: 3em; } .tk3 { display: none; }
  .rail { gap: 8px; flex-wrap: wrap; }
  .rail-segs { gap: 6px; flex-basis: 100%; }
  .seg span { font-size: 11.5px; }
  .seg em { display: none; }
  .replay { margin-left: auto; }
  .sec { padding: 76px 0; }
  .pain-art { height: 500px; }
  .notes { width: 290px; margin-left: -145px; top: 28px; }
  .rj { width: 290px; padding: 12px; gap: 10px; }
  .rj1 { transform: rotate(-4deg) translateX(-10px); } .rj1.rv.in { transform: rotate(-4deg) translateX(-10px); }
  .rj2 { top: 88px; } .rj2.rv.in { transform: rotate(2.5deg) translateX(10px); }
  .rj3 { top: 176px; }
  .att { right: 14px; top: 290px; font-size: 20px; }
  .pain-mascot { font-size: 10.4px; }
  .q1 { left: 22px; top: 320px; } .q2 { left: 52px; top: 284px; } .q3 { right: 30px; top: 380px; }
  .pain-list li { font-size: 16.5px; }
  .step { padding: 18px; }
  .step h3 { font-size: 21px; }
  .step p { font-size: 16px; }
  .rep-h { flex-wrap: wrap; padding: 16px; }
  .rep-sum { padding: 12px 16px; }
  .rep-sum-t { margin-left: 0; width: 100%; }
  .risk { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
  .sev { justify-self: start; padding: 0 10px; }
  .ts { justify-self: start; }
  .peek { right: 18px; top: -30px; width: 84px; height: 84px; }
  .rep-note { left: 8px; bottom: -42px; font-size: 19px; }
  .early-card { padding: 106px 20px 40px; margin-top: 130px; border-radius: 24px; }
  .early-mascot { font-size: 11px; top: -128px; }
  .e1 { left: 7%; top: 26px; } .e2 { right: 7%; top: 44px; } /* keep the card sparkles off the mascot desk */
  .foot { margin-top: 72px; }
}

/* Reduced motion: static final composition, no timeline/rotator/parallax. */
@media (prefers-reduced-motion: reduce) {
  .intro *, .intro { animation: none !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rj1.rv { transform: rotate(-4deg) translateX(-26px) !important; } .rj2.rv { transform: rotate(2.5deg) translateX(22px) !important; } .rj3.rv { transform: rotate(-1.2deg) !important; }
  .hd { transition: none; }
}

/* =====================================================================
   v3 additions — Try-it-free CTA, plans, fake auth pages, logged-in app.
   Same tokens as v2. Everything below is additive.
   ===================================================================== */
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Nav: log-in link + primary CTA */
.nav-login { text-decoration: none; font-family: var(--round); font-weight: 750; font-size: 15px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.nav-login:hover { background: var(--pink-50); color: var(--ink); }
.pill-free i { background: #3DBD8A; box-shadow: 0 0 0 3px var(--mint-100); }
.btn-line { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-line:hover { background: var(--pink-50); transform: translateY(-1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.cta-row { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sec-note { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 640px; }
.sec-note .tag-soon { margin-right: 6px; vertical-align: 1px; }
.sec-sub { margin-top: 12px; font-size: 17px; color: var(--ink-2); }

/* ---------- Plans ---------- */
.plans-sec { padding-top: 40px; }
.plans-sec .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--doodle-r); box-shadow: 5px 5px 0 var(--plan-off, var(--line-2)); min-width: 0; }
.plan-mint { --plan-off: var(--mint); } .plan-blue { --plan-off: var(--blue); } .plan-lav { --plan-off: var(--lav); }
.plan header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.plan-apps { margin-top: 6px; font-family: var(--round); font-weight: 750; color: var(--ink-2); font-size: 15px; }
.plan-lv { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan-lv li { display: flex; gap: 10px; align-items: flex-start; }
.plan-lv b { display: block; font-family: var(--round); font-size: 15.5px; }
.plan-lv span:not(.lv) { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.lv { flex: none; display: inline-grid; place-items: center; width: 30px; height: 24px; border-radius: 8px; font-family: var(--round); font-weight: 850; font-size: 12px; border: 1.5px solid var(--ink); }
.lv-1 { background: var(--mint-100); } .lv-2 { background: var(--blue-100); } .lv-3 { background: var(--lav); }
.plan-cta .btn { width: 100%; }
.plan-current { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; background: var(--mint-50); border: 1.5px dashed #9FE0C6; font-family: var(--round); font-weight: 750; color: var(--mint-ink); }
[data-notify] .nt-on, [data-notify][aria-pressed="true"] .nt-off { display: none; }
[data-notify][aria-pressed="true"] .nt-on { display: inline; }
[data-notify][aria-pressed="true"] { background: var(--mint-100); box-shadow: none; }
.plans-micro { text-align: center; margin-top: 18px; }
.early-card .micro { margin-top: 14px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: #fff; font-family: var(--round); font-weight: 700; font-size: 14.5px; line-height: 1.4; box-shadow: 0 12px 30px rgba(43,51,80,.25); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field > label, .f-label { font-family: var(--round); font-weight: 750; font-size: 14.5px; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.input, .select, .textarea { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.input::placeholder, .textarea::placeholder { color: #9AA0B6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: #8FB8EC; box-shadow: 0 0 0 4px var(--blue-50); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 1px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--high-fill); background: #FFFBFC; }
.hint { font-size: 13px; color: var(--muted); }
.counter { font-family: var(--round); font-weight: 700; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--high); }
.f-err { font-size: 13.5px; color: var(--high); font-weight: 600; }
.f-msg { border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; margin-bottom: 16px; }
.f-msg a { font-weight: 750; }
.f-msg.is-err { background: var(--high-tint); color: #7E2440; }
.f-msg.is-warn { background: var(--med-tint); color: #6A4300; }
.f-msg.is-ok { background: var(--mint-100); color: var(--mint-ink); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--page); font-family: var(--round); font-weight: 750; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.pw-toggle:hover { background: var(--pink-50); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); margin: 4px 0 18px; cursor: pointer; }
.check-row input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.check-row a { color: var(--ink); font-weight: 650; }

/* ---------- Auth pages ---------- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-page main { flex: 1; }
.auth { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 64px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 36px; min-width: 0; }
.auth-card h1 { font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.auth-card .sub { margin-top: 8px; margin-bottom: 24px; color: var(--ink-2); font-size: 16px; }
.btn-social { width: 100%; height: 50px; justify-content: flex-start; gap: 12px; padding: 0 18px; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 750; }
.btn-social:hover { background: var(--page); transform: translateY(-1px); }
.btn-social svg { width: 20px; height: 20px; flex: none; }
.btn-social span { flex: 1; text-align: center; margin-right: 32px; }
.social { display: grid; gap: 10px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 13.5px; font-family: var(--round); font-weight: 700; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 18px; font-size: 14px; }
.link { color: var(--blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: #B6D3F5; }
.link:hover { text-decoration-color: currentColor; }
.auth-alt { margin-top: 22px; text-align: center; font-size: 15px; color: var(--ink-2); }
.auth-art { position: relative; height: 520px; border-radius: 32px; background: var(--mint-50); border: 1px solid #D5F0E3; overflow: hidden; }
.auth-art.art-lav { background: var(--lav-50); border-color: var(--line); }
.auth-art.art-pink { background: var(--pink-50); border-color: #F6D3E0; }
.auth-art .pmas { font-size: 15px; bottom: 34px; }
.auth-art .art-note { position: absolute; left: 36px; top: 34px; right: 36px; }
.auth-art .art-note .hand { font-size: 24px; transform: rotate(-3deg); display: inline-block; }
.auth-art ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 340px; }
.auth-art li { display: flex; gap: 10px; align-items: center; font-family: var(--round); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.auth-art li b { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--ink); font-size: 12px; color: var(--mint-ink); }
.auth-art .ec-spark.e1 { left: auto; right: 14%; top: 46%; }
.verify-card { text-align: center; }
.verify-mascot { position: relative; height: 176px; margin: -8px auto 8px; width: 100%; }
.verify-mascot .pmas { font-size: 9.6px; bottom: 0; }
.verify-card .sub b { color: var(--ink); overflow-wrap: anywhere; }
.verify-actions { display: grid; gap: 10px; margin-top: 8px; }
.verify-steps { text-align: left; margin: 18px 0 0; padding: 14px 16px 14px 34px; background: var(--page); border-radius: 14px; font-size: 14px; color: var(--ink-2); }
.verify-steps li + li { margin-top: 4px; }

/* ---------- App page ---------- */
.app-nav .nav-in { gap: 14px; }
.user-box { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-email { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; min-width: 0; }
.plan-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--mint-100); color: var(--mint-ink); font-family: var(--round); font-weight: 800; font-size: 13px; white-space: nowrap; }
.plan-badge i { width: 7px; height: 7px; border-radius: 50%; background: #3DBD8A; }
.app-main { padding-top: 32px; padding-bottom: 40px; }
.welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.welcome h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.welcome p { margin-top: 8px; color: var(--ink-2); font-size: 16.5px; }
.welcome p b { color: var(--ink); overflow-wrap: anywhere; }
.app-sec { margin-top: 44px; }
.app-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.app-sec-h h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.app-sec-h p { color: var(--muted); font-size: 14.5px; }
.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aslot { position: relative; display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.aslot-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--pink-100); border: 1.5px solid var(--ink); font-family: var(--round); font-weight: 850; font-size: 20px; }
.aslot-b { flex: 1; min-width: 0; }
.aslot-b b { display: block; font-family: var(--round); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aslot-b small { display: block; color: var(--muted); font-size: 13.5px; }
.aslot-b .chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.aslot-empty { border: 2px dashed var(--line-2); box-shadow: none; background: transparent; }
.aslot-empty .aslot-ic { background: var(--page); border-style: dashed; border-color: var(--line-2); color: var(--muted); }
.aslot-locked { background: var(--page); box-shadow: none; }
.aslot-locked .aslot-ic { background: var(--surface); border-color: var(--line-2); }
.aslot-locked .aslot-ic svg { width: 22px; height: 22px; }

/* Quick check */
.qc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.qc-form { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 28px; min-width: 0; }
.qc-block + .qc-block { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.qc-block h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; margin-bottom: 16px; }
.qc-block h3 .n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; border: 1.5px solid var(--ink); background: var(--pink-100); }
.qc-block:nth-child(2) h3 .n { background: var(--blue-100); } .qc-block:nth-child(3) h3 .n { background: var(--mint-100); }
.qc-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.qc-top p { color: var(--ink-2); font-size: 15px; max-width: 520px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qq { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qq:last-child { border-bottom: 0; }
.qq > label, .qq > div:first-child { flex: 1; min-width: 0; cursor: pointer; }
.qq b { display: block; font-size: 15px; font-weight: 650; }
.qq .hint { display: block; }
.sub-q { display: none; margin: 0 0 6px 4px; padding: 2px 0 8px 16px; border-left: 3px solid var(--pink-100); }
.sub-q.show { display: block; }
.radios { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--page); border: 1px solid var(--line-2); }
.radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios label { padding: 6px 12px; border-radius: 999px; font-family: var(--round); font-weight: 750; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.radios input:checked + label { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(43,51,80,.15); }
.radios input:focus-visible + label { outline: 2px solid var(--blue-ink); outline-offset: 1px; }
.switch { position: relative; flex: none; display: inline-block; width: 48px; height: 28px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background-color .18s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(43,51,80,.25); transition: transform .2s var(--ease-out); }
.switch input:checked + i { background: #3DBD8A; }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; padding: 0; border: 0; }
.chipset legend { padding: 0; margin-bottom: 8px; font-family: var(--round); font-weight: 750; font-size: 14px; }
.chipset label { position: relative; cursor: pointer; }
.chipset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chipset span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; font-weight: 600; }
.chipset input:checked + span { background: var(--pink-100); border-color: #F6B9CD; color: var(--pink-ink); }
.chipset input:focus-visible + span { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 18px; border: 2px dashed var(--line-2); border-radius: 20px; background: var(--page); cursor: pointer; transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.over { border-color: #8FB8EC; background: var(--blue-50); }
.drop:focus-within { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.drop .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--ink); }
.drop b { font-family: var(--round); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.thumb { width: 92px; font-size: 11.5px; text-align: center; }
.thumb .img { width: 92px; height: 160px; border-radius: 12px; border: 1px solid var(--line-2); background-size: cover; background-position: center top; background-color: var(--page); }
.thumb .tg { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-family: var(--round); font-weight: 750; }
.thumb .tg.ok { background: var(--low-tint); color: var(--low); } .thumb .tg.bad { background: var(--high-tint); color: var(--high); }
.thumb .px { color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.thumb button { margin-top: 4px; border: 0; background: none; color: var(--blue-ink); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.qc-run { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qc-run 
.qc-side { position: sticky; top: 84px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; background: var(--pink-50); border-bottom: 1px solid var(--line); }
.panel-head b { font-family: var(--round); font-size: 17px; }
.panel-body { padding: 20px 22px; }
.p-view { display: none; }
.panel[data-state="idle"] .p-idle, .panel[data-state="run"] .p-run, .panel[data-state="done"] .p-done { display: block; }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { display: flex; gap: 10px; align-items: center; padding: 9px 0; font-size: 14.5px; border-bottom: 1px dashed var(--line-2); }
.rules li:last-child { border-bottom: 0; }
.rules .gl { margin: 0 0 0 auto; }
.rules .st { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.rules li.run .st { border-color: var(--line-2); border-top-color: #F28AAE; animation: spin .7s linear infinite; }
.rules li.done .st { border-color: #3DBD8A; background: var(--mint); }
.rules li.done .st::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink); transform: rotate(-45deg) translate(1px, -1px); }
@keyframes spin { to { transform: rotate(360deg); } }
.bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 16px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--blue), var(--mint)); transition: width .25s; }
.score-row { display: flex; gap: 16px; align-items: center; }
.ring { position: relative; width: 104px; height: 104px; flex: none; }
.ring svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.ring .v { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .v b { display: block; font-family: var(--round); font-size: 30px; font-weight: 850; line-height: 1; letter-spacing: -.03em; }
.ring .v span { font-size: 11px; color: var(--muted); }
.counts { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }
.counts div { border-radius: 14px; padding: 10px 4px; text-align: center; }
.counts b { display: block; font-family: var(--round); font-size: 22px; line-height: 1.1; }
.counts span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.verdict { margin-top: 14px; font-family: var(--round); font-weight: 800; font-size: 17px; }
.findings { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.finding { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--surface); animation: msgIn .35s var(--ease-out) both; }
.finding .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.finding .sev { padding: 0 9px; margin: 0; }
.finding .gl { margin: 0; }
.finding b { display: block; font-size: 14.5px; line-height: 1.4; }
.finding p { margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.upsell { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--blue-50); border: 1px solid #CFE2FA; }
.upsell b { font-family: var(--round); }
.upsell p { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); }

/* Locked levels */
.locked-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.locked { position: relative; padding: 24px; border-radius: 24px; background: var(--page); border: 1.5px dashed var(--line-2); min-width: 0; }
.locked header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.locked .lk { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink-2); }
.locked .lk svg { width: 20px; height: 20px; }
.locked h3 { font-size: 20px; font-weight: 800; }
.locked .tag-soon { margin-left: auto; }
.locked p { color: var(--ink-2); font-size: 15px; }
.locked ul { margin: 12px 0 18px; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; }
.locked ul li + li { margin-top: 4px; }
.locked-2 { --tint: var(--blue-50); } .locked-3 { --tint: var(--lav-50); }
.locked::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tint); opacity: .55; z-index: -1; }
.locked { isolation: isolate; }

@media (max-width: 1060px) {
  .qc-grid { grid-template-columns: minmax(0, 1fr); }
  .qc-side { position: static; }
}
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .auth { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 24px; }
  .auth-card { width: 100%; max-width: 480px; }
  .auth-art { display: none; }
  .apps-grid, .locked-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .nav-right { gap: 6px; }
  .nav-login { padding: 8px 6px; font-size: 14.5px; }
  .nav-right .btn-sm { padding: 0 14px; }
  .sec-note { font-size: 14.5px; }
  .plan { padding: 20px; }
  .auth-card { padding: 24px 20px; border-radius: 22px; }
  .auth-card h1 { font-size: 27px; }
  .btn-social span { margin-right: 0; }
  .user-email { max-width: 130px; font-size: 13px; }
  .app-nav .plan-badge { display: none; }
  .app-nav .btn-sm { padding: 0 12px; }
  .qc-form { padding: 20px 16px; border-radius: 22px; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qq-wrap { flex-wrap: wrap; }
  .qq-wrap > div:first-child { flex-basis: 100%; }
  .panel-body { padding: 18px 16px; }
  .panel-head { padding: 16px; }
  .aslot { padding: 16px; }
  .locked { padding: 20px 16px; }
  .locked .tag-soon { margin-left: 0; }
  .toast { bottom: 16px; }
}
@media (max-width: 360px) {
  .nav-login { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .finding, .switch i::after, .rules li.run .st { transition: none; animation: none; }
}
/* Your-apps card: keep name + chips readable on narrow screens */
.aslot-b .chips-row .chip { height: 24px; padding: 0 9px; font-size: 12px; }
@media (max-width: 600px) {
  .aslot { flex-wrap: wrap; }
  .aslot .slot-ic, .aslot .aslot-ic { width: 44px; height: 44px; }
  .aslot-b { flex: 1 1 calc(100% - 64px); }
  .aslot > .btn, .aslot > .tag-soon { margin-left: 60px; }
  .aslot-b .chips-row { flex-wrap: wrap; }
}
/* v2 hid .tag-soon on phones (nav only). In v3 it labels paid plans, so keep it visible outside the nav. */
@media (max-width: 600px) {
  .tag-soon { display: inline-flex; }
  .nav .tag-soon { display: none; }
}

/* locked-card CTA row: notify + jump to plans */
.locked-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.locked-link { font-family: var(--round); font-weight: 750; font-size: 15px; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
#plans:target .plans { animation: planPulse 1.2s ease-out 1; }
@keyframes planPulse { 0% { transform: translateY(8px); opacity: .4; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #plans:target .plans { animation: none; } }

/* Provider buttons follow Google / Apple sign-in button guidelines (white + coloured G; black + white Apple mark) */
.social { margin-top: 18px; }
.btn-google, .btn-apple { width: 100%; height: 50px; justify-content: center; gap: 10px; font-family: var(--font); font-weight: 600; font-size: 16px; }
.btn-google { background: #fff; color: #1F1F1F; border: 1px solid #747775; box-shadow: none; }
.btn-google:hover { background: #F8FAFF; }
.btn-apple { background: #000; color: #fff; border: 1px solid #000; box-shadow: none; }
.btn-apple:hover { background: #1c1c1c; }
.brand-ic { width: 20px; height: 20px; flex: none; }
.btn-apple .brand-ic { width: 17px; height: 20px; }
.plan-price { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); text-align: center; }
.plan-price b { font-family: var(--round); font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

/* ---------- Production additions ---------- */
/* Footer: legal links */
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.foot-links a:hover { text-decoration-color: currentColor; }
.foot-note { margin-top: 10px; font-size: 13px; }

/* Button that looks like a text link (resend, switch account) */
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.f-msg .link-btn { font-weight: 750; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled] { pointer-events: none; }

/* App page: hide content until the sign-in state is known */
.boot-wrap { padding-top: 28px; }
.boot-note { color: var(--muted); font-size: 15px; }
.auth-wait #main, .auth-wait .foot { visibility: hidden; }
html:not(.auth-wait) .boot-note { display: none; }
.qc-save-note { flex: 1 1 260px; margin: 0; }

/* Account / delete */
.acct-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 20px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acct-txt { flex: 1 1 260px; min-width: 0; }
.acct-txt b { font-family: var(--round); font-size: 17px; }
.acct-txt .hint { display: block; margin-top: 4px; font-size: 14px; }
.acct-confirm { margin-top: 4px; max-width: 520px; }
.acct-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-danger { color: var(--high); border-color: #F3C3D1; }
.btn-danger:hover { background: var(--high-tint); }
.btn-danger-solid { background: var(--high); color: #fff; box-shadow: 0 8px 20px rgba(184,58,94,.22); }
.btn-danger-solid:hover { background: #A2304F; transform: translateY(-1px); }

/* FAQ */
.faq-sec { padding-top: 40px; }
.faq-sec .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-50); font-family: var(--round); font-weight: 800; font-size: 18px; color: var(--pink-ink); transition: transform .2s var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.faq-item h3 { margin: 0; font-family: var(--round); font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.faq-item p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 600px) {
  .faq-item summary { padding: 16px; }
  .faq-item p { padding: 0 16px 16px; }
  .faq-item h3 { font-size: 16.5px; }
  .acct-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* Legal pages */
.legal { max-width: 760px; padding-top: 40px; padding-bottom: 24px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.legal .updated { margin-top: 8px; color: var(--muted); font-size: 14.5px; font-family: var(--round); font-weight: 700; }
.legal .intro { margin-top: 18px; font-size: 17px; color: var(--ink-2); }
.legal h2 { margin-top: 36px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.legal h3 { margin-top: 20px; font-size: 17px; font-weight: 800; font-family: var(--round); }
.legal p, .legal li { color: var(--ink-2); font-size: 16px; }
.legal p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--blue-ink); font-weight: 650; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal .toc { margin-top: 22px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.legal .toc ol { margin: 6px 0 0; padding-left: 22px; columns: 2; column-gap: 28px; }
@media (max-width: 600px) { .legal .toc ol { columns: 1; } }