/* Unlock BLEU Closing Essentials (/unlock/, tools/unlock.py + home/unlock.js): the buyer intake as an experience in four
   short chapters, over the same sky and house as the intake pages (intake.css is loaded first; this adds to it). */

/* ---------- the chapter rail: four labeled segments that fill as they go ---------- */
.rail{position:fixed;z-index:5;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 70px);width:min(480px,calc(100% - 40px));
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;transition:opacity .6s var(--ease)}
.rail[hidden]{display:grid;opacity:0;pointer-events:none}
.rail li{list-style:none;display:flex;flex-direction:column;gap:6px;min-width:0}
.rail .bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.rail .bar i{display:block;height:100%;width:var(--fill,0%);background:var(--em);border-radius:3px;transition:width .7s var(--ease)}
.rail .lbl{font:700 11px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.rail li.on .lbl{color:var(--fg)}
.rail li.past .lbl{color:var(--fg-soft)}
.rail .short{display:none}
@media (max-width:520px){.rail .long{display:none}.rail .short{display:inline}}
.stage.ul{padding-top:calc(env(safe-area-inset-top,0px) + 140px)}

/* ---------- the home they unlocked ---------- */
.homecard{display:flex;align-items:center;gap:14px;text-align:left;border-radius:20px;padding:10px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);color:var(--fg)}
.homecard img,.homecard .ph{flex:none;width:92px;height:72px;border-radius:13px;object-fit:cover;background:var(--glass-hi)}
.homecard .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.homecard .pr{font:800 18px/1.2 var(--display)}
.homecard .ad{font-size:14px;color:var(--fg-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.homecard .ml{font-size:11.5px;color:var(--fg-faint)}
.homecard .em{display:inline-flex;align-self:flex-start;gap:6px;align-items:center;margin-bottom:3px;padding:3px 9px;border-radius:999px;font:800 10.5px/1.3 var(--display);
  letter-spacing:.1em;text-transform:uppercase;color:#3a2a08;background:linear-gradient(120deg,#b98a35,#f1d695 45%,#c79b47 70%,#f6e2ac)}
/* pinned: a small card that stays with them, bottom left (or under the rail on phones) */
.pin{position:fixed;z-index:4;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:290px;opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.pin.on{opacity:1;transform:none}
.pin .homecard{padding:8px}
.pin .homecard img,.pin .homecard .ph{width:64px;height:50px;border-radius:10px}
.pin .homecard .pr{font-size:15px}
.pin .homecard .em{white-space:nowrap;font-size:9px;letter-spacing:.07em;padding:2px 8px}
@media (max-width:820px){.pin{display:none}}

/* ---------- welcome ---------- */
.welcome .homecard{max-width:440px;margin:0 auto 28px;padding:12px}
.welcome .homecard img,.welcome .homecard .ph{width:132px;height:100px}
.welcome .q{font-size:clamp(32px,4.4vw,52px)}
.time{display:inline-flex;align-items:center;gap:10px;margin:22px auto 0;padding:9px 16px;border-radius:999px;font:700 14px var(--display);color:var(--fg);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.time .clock{width:16px;height:16px;border-radius:50%;border:2px solid var(--em);position:relative}
.time .clock::after{content:"";position:absolute;left:5px;top:2px;width:2px;height:5px;background:var(--em);border-radius:2px;box-shadow:2px 4px 0 -0.5px var(--em)}
.chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:640px;margin:22px auto 0;padding:0}
.chapters li{list-style:none;padding:14px 12px;border-radius:16px;text-align:left;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chapters b{display:block;font:500 italic 26px/1 var(--accent);color:var(--em)}
.chapters span{display:block;margin-top:8px;font:700 14px/1.25 var(--display)}
.chapters small{display:block;margin-top:3px;font-size:12px;color:var(--fg-faint)}
@media (max-width:620px){
  .chapters{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
  .chapters li{padding:9px 11px;display:flex;align-items:baseline;gap:8px}
  .chapters b{font-size:19px}.chapters span{margin:0;font-size:13px}.chapters small{display:none}
  .welcome .homecard{margin-bottom:20px}.welcome .homecard img,.welcome .homecard .ph{width:104px;height:80px}
  .welcome .homecard .em{white-space:nowrap;font-size:9px;letter-spacing:.06em}
  .welcome .sub{font-size:16px}.time{margin-top:16px}
}
.fine.lead{margin-top:18px}

/* ---------- a chapter's opening and closing ---------- */
.chapter .num{display:block;font:500 italic clamp(88px,12vw,140px)/.9 var(--accent);color:var(--em);margin-bottom:6px}
.chapter .time{margin-top:18px}
.finish .seal,.final .seal,.saved .seal{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:var(--em);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--em) 18%,transparent)}
.finish .seal svg,.final .seal svg,.saved .seal svg{width:38px;height:38px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.step.on.finish .seal,.step.on.saved .seal{animation:pop .7s var(--ease) both}
.step.on.finish .seal svg,.step.on.saved .seal svg{animation:tick .6s .35s var(--ease) forwards}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes tick{to{stroke-dashoffset:0}}
.look-night .finish .seal svg,.look-dusk .finish .seal svg,.look-night .final .seal svg,.look-dusk .final .seal svg{stroke:var(--navy)}
.recap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px;margin:20px auto 0}
.recap span{padding:7px 13px;border-radius:999px;font:600 13.5px var(--display);color:var(--fg-soft);background:var(--glass);border:1px solid var(--line)}

/* a known answer: confirm it with one tap, or change it */
.known .big{border-bottom-style:dashed}
.alt{display:block;margin:10px auto 0;background:none;border:0;color:var(--fg-faint);font:700 13.5px var(--display);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.alt:hover{color:var(--fg)}
.alt[hidden]{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;max-width:460px;margin:0 auto}
.two .field{margin-top:14px}

@media (prefers-reduced-motion:reduce){.step.on.finish .seal,.step.on.finish .seal svg{animation:none;stroke-dashoffset:0}}

/* ---------- chapters 2 to 4 ---------- */
.grp{margin:18px 0 10px;font:800 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.grp:first-child{margin-top:0}
.opts.multi .opt{flex-basis:auto;min-width:150px;padding:0 18px}
.opts.multi .opt:has(input:checked)::before{content:"✓";margin-right:7px;font-weight:800}
@media (max-width:480px){.opts.multi .opt{min-width:0;flex:0 0 calc(50% - 5px);padding:0 10px;font-size:14px}}
.big.small{font-size:17px}
.big.code{letter-spacing:.5em;font-size:clamp(28px,4vw,38px);text-align:center;max-width:300px;margin:0 auto;display:block;padding-left:.5em}
.check.err{border-color:var(--bad-line)}
.summary{max-width:620px;margin:0 auto 16px;padding:18px 22px;border-radius:20px;text-align:left;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:15px;line-height:1.55;max-height:46vh;overflow:auto}
.summary ul{margin:0;padding-left:18px;display:grid;gap:7px}
.summary b{color:var(--fg)}
.summary .small{margin-top:12px;font-size:12.5px;color:var(--fg-faint)}
.summary .links{margin-top:8px;font-size:14px;font-weight:700}
.summary .links a{color:var(--em)}
.sigwrap{max-width:500px;margin:16px auto 0}
.sigwrap .grp{margin:0 0 8px;text-align:center}
canvas.sig{display:block;width:100%;height:150px;border-radius:16px;background:#fff;border:1.5px dashed var(--gold);touch-action:none;cursor:crosshair}
.next{max-width:520px;margin:22px auto 0;padding:0;list-style:none;display:grid;gap:10px;text-align:left}
.next li{padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:15px;color:var(--fg-soft)}
.next li b{color:var(--fg)}
.final .seal.big{width:104px;height:104px}
.step.on.final .seal{animation:pop .8s var(--ease) both}
.step.on.final .seal svg{animation:tick .7s .45s var(--ease) forwards}
a.go{text-decoration:none}
/* signed: the warm light opens behind the welcome */
.unlocked .wash{transition:background 1.6s;background:radial-gradient(60% 55% at 50% 42%,rgba(255,244,222,.55),rgba(255,244,222,0) 70%),var(--wash)}

/* ---------- tidy (2026-11-08): calmer chips, compact checks ---------- */
.ul .opts{max-width:600px}
.ul .opt{height:48px;font-size:15px}
.opts.multi .opt{min-width:0;flex:0 0 auto;padding:0 18px}
.opts.multi.mini .opt{height:40px;font-size:13.5px;padding:0 14px}
.more{margin-top:14px;animation:rise .5s var(--ease) both}
.more[hidden]{display:none}
.more .grp{margin:6px 0 10px}
.ul .sub{max-width:40ch}
.checks{display:grid;gap:8px;max-width:560px;margin:0 auto}
.checks .check{margin:0;padding:11px 14px;font-size:13.5px}
.summary{font-size:14.5px;padding:16px 20px}
.summary .grp{margin:0 0 10px;text-align:left}
.sigwrap{margin-top:14px}
.sigbox{position:relative}
canvas.sig{height:140px;border:1px solid var(--line);background:rgba(255,255,255,.96)}
.sighint{position:absolute;left:18px;bottom:42px;font:500 italic 15px var(--accent);color:#9aa5b1;pointer-events:none;transition:opacity .3s}
.sigline{position:absolute;left:16px;right:16px;bottom:34px;height:1px;background:#c9ced5;pointer-events:none}
.sigbox.inked .sighint{opacity:0}
@media (max-width:480px){.opts.multi .opt{flex:0 0 calc(50% - 5px)}.opts.multi.mini .opt{flex:0 0 calc(50% - 5px)}}

/* ---------- motion ---------- */
/* a chosen chip gives a small, satisfying pop */
.opt:has(input:checked){animation:pick .32s var(--ease)}
@keyframes pick{40%{transform:scale(1.06)}100%{transform:none}}
/* the chapter number rises in with a gold sheen moving across it */
.chapter .num{background:linear-gradient(110deg,var(--em) 35%,#fff3cf 50%,var(--em) 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:num-in .9s var(--ease) both, sheen 2.6s .5s ease-in-out}
@keyframes num-in{from{opacity:0;transform:translateY(18px) scale(.86)}to{opacity:1;transform:none}}
@keyframes sheen{from{background-position:100% 0}to{background-position:-50% 0}}
/* the emblem on the home card glints now and then */
.homecard .em{position:relative;overflow:hidden}
.homecard .em::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:glint 5s 1.2s ease-in-out infinite}
@keyframes glint{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.welcome .homecard{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
/* the welcome's chapter cards arrive one after another */
.step.on .chapters li{animation:rise .6s var(--ease) both;animation-delay:calc(.25s + var(--i) * .07s)}
/* the active chapter's bar glows softly */
.rail li.on .bar{box-shadow:0 0 0 1px color-mix(in srgb,var(--em) 25%,transparent),0 0 12px color-mix(in srgb,var(--em) 35%,transparent)}
/* gold sparks burst from a finished chapter's seal and the unlock */
.seal,.lock{position:relative}
.sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.sparks i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--em);opacity:0;transform:rotate(var(--a)) translateY(0)}
.step.on .sparks i{animation:spark .9s .45s var(--ease) both}
@keyframes spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-62px) scale(.3)}}
/* the unlock: a padlock that opens, then the light */
.lock{width:104px;height:104px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--em);box-shadow:0 0 0 12px color-mix(in srgb,var(--em) 16%,transparent)}
.lock svg{width:52px;height:52px;overflow:visible}
.lock .shackle{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;transform-origin:33px 21px}
.lock .body{fill:#fff}
.lock .hole{fill:var(--em)}
.look-night .lock .shackle,.look-dusk .lock .shackle{stroke:var(--navy)}.look-night .lock .body,.look-dusk .lock .body{fill:var(--navy)}
.step.on .lock{animation:pop .7s var(--ease) both}
.step.on .lock .shackle{animation:open .7s .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes open{to{transform:translateY(-6px) rotate(28deg)}}
.step.on .lock .sparks i{animation-delay:.95s}
.next li{animation:rise .6s var(--ease) both;animation-delay:calc(1s + var(--i) * .12s)}

@media (prefers-reduced-motion:reduce){
  .opt:has(input:checked),.chapter .num,.homecard .em::after,.welcome .homecard,.step.on .chapters li,.step.on .sparks i,.step.on .lock,.next li,.more{animation:none}
  .chapter .num{color:var(--em);background:none}
  .step.on .lock .shackle{animation:none;transform:translateY(-6px) rotate(28deg)}
}
/* a soft frosted band behind the logo and the rail, so scrolled questions never run under them */
body.unlock::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 150px);z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,var(--glass-hi),transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.next a{color:var(--fg);font-weight:700;white-space:nowrap}

/* ---------- quick start (2026-11-08) ---------- */
.hint.warn{color:var(--fg);background:var(--glass-hi);border:1px solid var(--em);border-radius:14px;padding:10px 14px;max-width:440px}
.pitch{max-width:520px;margin:18px auto 0;padding:16px 18px;border-radius:18px;text-align:left;font-size:14px;line-height:1.5;color:var(--fg-soft);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rise .6s .2s var(--ease) both}
.pitch p+p{margin-top:8px}
.pitch b{color:var(--fg)}
.nav-row .alt{margin-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;max-width:460px;margin:0 auto}
@media (prefers-reduced-motion:reduce){.pitch{animation:none}}