/* JJAI flow. Cinematic black, poster headlines, one job: get the person to a decision and through the door. */
:root{--bg:#070707;--ink:#f6f4ee;--muted:#9c9a92;--line:rgba(246,244,238,.28);--card:rgba(246,244,238,.04);--btn:#f6f4ee;--btn-ink:#070707}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.5 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
.display{font-family:"Bebas Neue","Archivo Black",Impact,sans-serif;font-weight:400;letter-spacing:.02em}
.stage{position:fixed;inset:0;perspective:1100px;perspective-origin:50% 45%;overflow:hidden;background:var(--bg)}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,rgba(246,244,238,.10) 0%,rgba(246,244,238,.03) 40%,transparent 70%);pointer-events:none}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 40px rgba(0,0,0,.85);opacity:.9}
.bg{position:absolute;inset:-25%;background-image:radial-gradient(rgba(246,244,238,.22) 1px,transparent 1.6px);background-size:44px 44px;opacity:.22;transform:translateZ(-300px) scale(1.2);transition:transform .9s cubic-bezier(.2,.8,.2,1);animation:breathe 14s ease-in-out infinite alternate}
.stage.zoom .bg{transform:translateZ(-300px) scale(1.6)}
@keyframes breathe{from{opacity:.16}to{opacity:.28}}
.card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:safe center;padding:78px 22px 96px;max-width:660px;margin:0 auto;
  transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .55s ease;opacity:0;transform:translateZ(-900px) scale(.92);pointer-events:none;overflow:auto}
.card::before{content:'';flex:0 0 0}
.card.active{opacity:1;transform:translateZ(0) scale(1);pointer-events:auto}
.card.leaving{opacity:0;transform:translateZ(750px) scale(1.18)}
.card h1{font-family:"Bebas Neue","Archivo Black",Impact,sans-serif;font-weight:400;font-size:4.6rem;line-height:.92;margin:0 0 .25em;letter-spacing:.01em;text-wrap:balance}
.card h2{font-family:"Bebas Neue","Archivo Black",Impact,sans-serif;font-weight:400;font-size:2.9rem;line-height:.95;margin:0 0 .35em;letter-spacing:.01em;text-wrap:balance}
.lead{color:var(--muted);font-size:1.15rem;line-height:1.45;margin:0 0 1.1em;max-width:34ch}
.step{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.05rem;letter-spacing:.18em;color:var(--muted);margin-bottom:14px}
.step b{color:var(--ink);font-weight:400}
.push{color:var(--muted);font-size:1rem;margin:-4px 0 18px;max-width:36ch}
.opts{display:grid;gap:10px}
.opt{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:17px 18px;font-size:1.15rem;line-height:1.3;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s,transform .15s}
.opt:hover,.opt:active{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);transform:translateX(3px)}
.opt.selected{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.btn{display:inline-block;width:100%;text-align:center;background:var(--btn);color:var(--btn-ink);font-family:"Bebas Neue",Impact,sans-serif;font-size:1.5rem;letter-spacing:.08em;padding:16px 20px;border-radius:6px;border:1px solid var(--btn);cursor:pointer;text-decoration:none;margin-top:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.box{border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--card)}
.box label.field{margin-top:0}
.dots{position:fixed;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:7px;z-index:3}
.dots i{width:22px;height:2px;background:rgba(246,244,238,.22)}
.dots i.on{background:var(--ink)}
.brand{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:20px;z-index:3;font-family:"Bebas Neue",Impact,sans-serif;font-size:1.5rem;letter-spacing:.16em;color:var(--ink);text-decoration:none}
.topright{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:20px;z-index:3;font-size:.95rem}
.topright a{color:var(--ink);text-decoration:none;margin-left:14px;font-family:"Bebas Neue",Impact,sans-serif;font-size:1.3rem;letter-spacing:.14em}
input,select{width:100%;padding:14px;border:1px solid var(--line);border-radius:6px;font-size:1.05rem;background:rgba(246,244,238,.05);color:var(--ink);font-family:inherit}
input::placeholder{color:#6d6b64}
label.field{display:block;margin:14px 0 6px;font-weight:600;font-size:1rem}
.muted{color:var(--muted);font-size:.95rem}
.result{border:1px solid var(--line);border-radius:10px;padding:22px;background:var(--card)}
.result h2{font-size:3.4rem}
.result .price{color:var(--ink);font-weight:700}
.why{margin:12px 0 12px 20px;padding:0;font-size:1.05rem}
.why li{margin:6px 0}
.runners{display:grid;gap:10px;margin-top:14px}
.runner{display:block;border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--ink);text-decoration:none;background:var(--card)}
.runner b{display:block;font-size:1.1rem}
.runner span{color:var(--muted);font-size:.9rem}
.deal{border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin:6px 0 12px;background:var(--card)}
.deal .dl{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.1rem;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.deal ul{margin:0;padding-left:20px;font-size:1.02rem}
.deal li{margin:4px 0}
.err{color:#ffb4a8;font-size:.95rem;margin:8px 0 0;display:none}
.err.show{display:block}
.hidden{display:none!important}
@media (min-width:700px){.card{padding:90px 24px 110px}.card h1{font-size:6rem}.card h2{font-size:3.6rem}}
@media (prefers-reduced-motion: reduce){.card,.bg{transition:none;animation:none}}

/* landing: stretch across the screen, headline up top, the box down low */
.card[data-q=intro]{justify-content:flex-start;padding-top:calc(18vh + env(safe-area-inset-top,0px))}
.card[data-q=intro]::before{display:none}
.card[data-q=intro] h1{font-size:clamp(2.6rem,11.5vw,5.2rem);white-space:nowrap;letter-spacing:.01em}
.card[data-q=intro] .lead{font-size:1.3rem;max-width:22ch}
.card[data-q=intro] .box{margin-top:auto;margin-bottom:6vh}
.card[data-q=intro] .box label.field{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.6rem;letter-spacing:.06em;font-weight:400}
@media (min-width:700px){.card[data-q=intro] h1{font-size:6.4rem}}

.other-btn{color:var(--muted);border-style:dashed}
.other{margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.other input{margin:0}
.other .btn{width:auto;margin:0;padding:0 18px;font-size:1.2rem}

.card[data-q=intro] .maplink{margin-top:12px;margin-bottom:4vh;font-size:1.15rem;letter-spacing:.06em}
.card[data-q=intro] .box{margin-bottom:6vh}