/* PlansByZip. Layout: one fixed street scene behind every page; scrolling moves the
   camera down the street and turns sunset into night. Copy rides above it on glass panels. */
:root{--bg:#24143F;--fg:#FFF4E2;--muted:#F1D9CB;--accent:#FFC14D;--on-accent:#2A1238;--coral:#FF8A76;--glass:rgba(28,15,46,.8);--edge:rgba(255,244,226,.2);
--display:"Alfa Slab One","Rockwell","Georgia",serif;--body:"Karla","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;color-scheme:dark}
@font-face{font-family:"Alfa Slab One";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/alfa-slab-one.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/karla.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;padding-inline:max(1.25rem,env(safe-area-inset-left,0px)) max(1.25rem,env(safe-area-inset-right,0px));-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.wrap{position:relative;z-index:1;max-width:72rem;margin-inline:auto}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}

/* disclosure strip, header, menu */
.strip{margin-top:.6rem;padding:.5rem .8rem;font-size:.8125rem;line-height:1.45;text-align:center;color:var(--muted);background:rgba(20,10,34,.78);border:1px solid var(--edge);border-radius:8px}
.strip strong{color:var(--fg)}
.strip a{white-space:nowrap}
.top{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;justify-content:space-between;align-items:center;padding-block:.6rem}
.brand{font:400 1.35rem/1 var(--display);letter-spacing:.01em;color:var(--fg);text-decoration:none;padding-block:.7rem}
.brand b{background:var(--accent);color:var(--on-accent);padding:.05em .3em;font-weight:400}
.nav{display:flex;gap:1.5rem;font-weight:500}
.nav a{color:var(--fg);text-decoration:none;text-shadow:0 1px 8px rgba(20,8,40,.7);padding-block:.6rem}
.nav a:hover{color:var(--accent)}
.menu-btn{display:none;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .85rem;font:700 1rem/1 var(--body);color:var(--fg);background:var(--glass);border:1px solid var(--edge);border-radius:8px;cursor:pointer}
.menu-btn svg{width:1.25rem;height:1.25rem}
.menu-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
@media(max-width:60rem){
.menu-btn{display:inline-flex;order:2}
.top .call{order:1;margin-left:auto}
.nav{display:none;order:3;width:100%;flex-direction:column;gap:0;padding:.2rem 1rem;background:rgba(28,15,46,.94);border:1px solid var(--edge);border-radius:12px}
.nav.open{display:flex}
.nav a{padding:.9rem 0;font-size:1.0625rem;text-shadow:none;border-top:1px solid var(--edge)}
.nav a:first-child{border-top:0}
}
@media(max-width:46rem){.top .call{display:none}}

/* call buttons */
.call{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:400 1.35rem/1 var(--display);letter-spacing:.01em;background:var(--accent);color:var(--on-accent);padding:1rem 1.4rem;border-radius:8px;text-decoration:none;box-shadow:0 8px 26px rgba(20,8,40,.35);animation:ring 2.4s ease-out infinite}
.call svg{width:1.15em;height:1.15em;flex:none;animation:wig 2.4s ease-in-out infinite}
.call.sm{font-size:1rem;padding:.65rem .9rem;min-height:44px;animation:none}
.call.sm svg{animation:none}
.call[aria-disabled="true"]{background:var(--glass);color:var(--fg);border:1px dashed var(--edge);box-shadow:none;animation:none;cursor:default}
@keyframes ring{0%{box-shadow:0 8px 26px rgba(20,8,40,.35),0 0 0 0 rgba(255,193,77,.6)}70%,100%{box-shadow:0 8px 26px rgba(20,8,40,.35),0 0 0 18px rgba(255,193,77,0)}}
@keyframes wig{0%,55%,100%{transform:rotate(0)}8%,24%,40%{transform:rotate(-15deg)}16%,32%,48%{transform:rotate(15deg)}}

.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;align-items:center}
button.call{border:0;cursor:pointer}
.call.ghost{background:var(--glass);color:var(--fg);border:1px solid var(--edge);box-shadow:none;animation:none}
.call.ghost svg{animation:none}
.call.ghost:hover{border-color:var(--accent)}
.fine{font-size:.8125rem;line-height:1.45;color:var(--muted);max-width:31rem}
.hero .fine{background:rgba(20,10,34,.78);border:1px solid var(--edge);border-radius:8px;padding:.5rem .8rem}

/* email form */
.mailbox{width:min(31rem,calc(100% - 2rem));max-height:calc(100% - 2rem);overflow:auto;color:var(--fg);border:1px solid rgba(255,193,77,.45);border-radius:18px;padding:0 clamp(1.25rem,4vw,1.75rem) clamp(1.25rem,4vw,1.75rem);background:linear-gradient(180deg,#E3525C 0,#7A2F6C 5.2rem,#2A1644 9.5rem,#1E1033 100%);box-shadow:0 24px 70px rgba(6,3,16,.6)}
.mailbox[open]{animation:mbin .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes mbin{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.mailbox::backdrop{background:rgba(10,5,22,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.mb-wire{display:block;width:calc(100% + 2*clamp(1.25rem,4vw,1.75rem));margin-inline:calc(-1*clamp(1.25rem,4vw,1.75rem));height:auto}
.mb-pulse{filter:drop-shadow(0 0 5px #FFD36B)}
.mailbox input:focus,.mailbox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,193,77,.28)}
.mailbox textarea::placeholder{color:rgba(241,217,203,.5)}
.mb-count{justify-self:end;font:400 .75rem/1 var(--mono);color:var(--muted);margin-top:-.25rem}
.mb-done{display:grid;gap:.8rem;justify-items:center;text-align:center;padding-block:.5rem 1rem}
.mb-done svg{width:4.5rem;height:4.5rem;animation:pop .45s cubic-bezier(.2,.9,.3,1.5)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.mailbox[open],.mb-done svg{animation:none}.mb-pulse{display:none}}
.mailbox form{display:grid;gap:.6rem}
.mailbox h2{font-size:1.75rem}
.mailbox p{color:var(--muted)}
.mailbox label{font-weight:700;margin-top:.35rem}
.mailbox .opt{font-weight:400;color:var(--muted)}
.mailbox input,.mailbox textarea{width:100%;font:400 1.0625rem/1.4 var(--body);color:var(--fg);background:rgba(255,244,226,.07);border:1.5px solid var(--edge);border-radius:8px;padding:.7rem .8rem}
.mailbox textarea{resize:vertical}
.mailbox .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mb-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
#mb-status.err{color:var(--coral)}

/* hero */
.hero{min-height:calc(100vh - 4.5rem);min-height:calc(100svh - 4.5rem);display:grid;gap:1.05rem;align-content:start;justify-items:center;text-align:center;padding-top:.5rem}
.hero>*{max-width:38rem;min-width:0}
h1{font-size:clamp(2.1rem,6.6vw,3.9rem);line-height:1.06;text-shadow:0 2px 18px rgba(20,8,40,.45)}
h1 em{font-style:normal;color:var(--accent);animation:glow 3.4s ease-in-out infinite}
.eyebrow{display:block;font:700 .875rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;text-shadow:0 1px 8px rgba(20,8,40,.7)}
@keyframes glow{0%,100%{text-shadow:0 2px 18px rgba(20,8,40,.45)}50%{text-shadow:0 0 26px rgba(255,193,77,.65),0 2px 18px rgba(20,8,40,.45)}}
.lede{color:var(--muted);font-size:1.125rem;text-shadow:0 1px 10px rgba(20,8,40,.6)}
.zip{display:flex;gap:.5rem;flex-wrap:wrap;width:100%;max-width:26rem;justify-content:center}
.zip input{flex:1 1 9rem;min-width:0;font:500 1.25rem/1 var(--body);letter-spacing:.12em;padding:.85rem 1rem;color:var(--fg);background:rgba(36,20,63,.5);border:2px solid var(--fg);border-radius:8px}
.zip input::placeholder{color:var(--muted);letter-spacing:.04em}
.zip button{font:700 1.0625rem/1 var(--body);padding:.85rem 1.1rem;background:var(--fg);color:var(--bg);border:0;border-radius:8px;cursor:pointer}
.note{font-size:.9375rem;color:var(--muted);background:rgba(20,10,34,.78);border:1px solid var(--edge);border-radius:8px;padding:.45rem .8rem}
.hint{margin-top:.4rem;font:500 .8125rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--glass);border:1px solid var(--edge);padding:.55rem .85rem;border-radius:99px}

/* glass panels */
.panel{max-width:48rem;margin:42vh auto 0;background:var(--glass);border:1px solid var(--edge);border-radius:16px;padding:clamp(1.4rem,4vw,2.25rem);display:grid;gap:1.25rem;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.panel>*{min-width:0}
.hero+.panel{margin-top:14vh}
.panel h2{font-size:clamp(1.7rem,4.6vw,2.4rem);line-height:1.08}
.panel p{color:var(--muted)}
.panel p strong{color:var(--fg)}
.small{font-size:.9375rem}
.last{justify-items:center;text-align:center}
.steps,.lines,.ask{list-style:none;margin:0;padding:0;display:grid}
.steps{gap:1.1rem;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:.1rem .9rem}
.steps li::before{content:counter(s);font:400 2rem/1 var(--display);color:var(--accent);grid-row:span 2}
.steps h3,.lines b,.ask b{font:400 1.2rem/1.2 var(--display)}
.lines li{display:grid;grid-template-columns:7.5rem 1fr;gap:.25rem 1rem;padding-block:.9rem;border-top:1px solid var(--edge)}
.lines li span{color:var(--muted);grid-column:2}
.lines .spd{font:500 .875rem/1.4 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.lines b{grid-row:span 2}
.ask li{display:grid;grid-template-columns:9rem 1fr;gap:.2rem 1rem;padding-block:.85rem;border-top:1px solid var(--edge)}
.ask span{color:var(--muted)}
@media(max-width:34rem){.lines li,.ask li{grid-template-columns:1fr}.lines li span{grid-column:1}.lines b{grid-row:auto}}

/* speed estimator */
.calc{display:grid;gap:1.75rem}
.calc>*{min-width:0}
.knobs{display:grid;gap:1rem}
.knob{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center}
.knob label{font-weight:500}
.knob output{font:500 1.125rem/1 var(--mono);min-width:1.5ch;text-align:right}
.knob input{grid-column:1/-1;width:100%;accent-color:var(--accent);margin:0;height:1.75rem}
.result{background:rgba(255,244,226,.07);border:1px solid var(--edge);border-radius:12px;padding:1.25rem;display:grid;gap:1.1rem;align-content:start}
.bignum{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6rem;font:400 clamp(3.2rem,12vw,4.75rem)/.95 var(--display);color:var(--fg)!important}
.bignum small{font:500 1.0625rem/1.2 var(--body);color:var(--muted);white-space:nowrap}
.ruler{position:relative;height:4rem}
.ruler .track,.ruler .fill{position:absolute;left:0;top:1.1rem;height:12px;border-radius:2px}
.ruler .track{right:0;background:rgba(255,244,226,.16)}
.ruler .fill{background:var(--accent);transition:width .35s ease}
.ruler .need{position:absolute;top:.5rem;width:3px;height:26px;background:var(--coral);transform:translateX(-1px);transition:left .35s ease}
.ruler .tick{position:absolute;top:2.3rem;font:400 .75rem/1 var(--mono);color:var(--muted);transform:translateX(-50%);padding-top:.5rem}
.ruler .tick::before{content:"";position:absolute;left:50%;top:-.2rem;width:1px;height:.45rem;background:var(--muted)}
.ruler .tick:first-of-type{transform:none}.ruler .tick:first-of-type::before{left:0}
.ruler .tick:last-of-type{transform:translateX(-100%)}.ruler .tick:last-of-type::before{left:auto;right:0}
.key{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:.875rem;color:var(--muted)}
.key i{display:inline-block;width:.8rem;height:.8rem;margin-right:.4rem;vertical-align:-.08em}
.k-need{background:var(--coral)}.k-fill{background:var(--accent)}
@media(pointer:coarse){.knob input{height:2.75rem}}
@media(min-width:50rem){.calc{grid-template-columns:1fr 1fr;gap:2.25rem;align-items:start}}

/* FAQ */
.faq{display:grid;border-bottom:1px solid var(--edge)}
.faq details{border-top:1px solid var(--edge)}
.faq summary{cursor:pointer;padding-block:.95rem;font-weight:700;font-size:1.0625rem;margin-left:1.2rem}
.faq details p{padding:0 0 1rem 1.2rem}

/* footer, documents */
.foot{margin-top:38vh;margin-bottom:2rem;font-size:.9375rem;gap:.9rem}
.foot nav{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.foot nav a{padding-block:.65rem}
.doc{margin-top:2rem;gap:1rem}
.doc h1{font-size:clamp(2rem,6vw,3rem)}
.doc h2{font-size:1.35rem;margin-top:.75rem}
.doc+.foot,main+.foot{margin-top:2rem}
body[data-scene-p] .foot{margin-top:2rem;margin-bottom:46vh}
.call.solid{background:var(--accent);color:var(--on-accent)}

/* clock chip and mobile call dock */
.clock{position:fixed;z-index:2;max-width:calc(100% - 2rem);right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));font:700 .875rem/1 var(--body);letter-spacing:.06em;background:var(--glass);border:1px solid var(--edge);padding:.55rem .8rem;border-radius:99px;font-variant-numeric:tabular-nums}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:3;background:var(--glass);border-top:1px solid var(--edge);padding:.6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom,0px));display:flex;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dock{flex-direction:column;gap:.3rem}
.dock>span{font-size:.75rem;line-height:1.2;text-align:center;color:var(--muted)}
@media(min-width:46rem){.dock{display:none}}
@media(max-width:46rem){body.docked .clock{bottom:calc(6.8rem + env(safe-area-inset-bottom,0px))}body.docked .foot{margin-bottom:8.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.call,.call svg,h1 em{animation:none}.ruler .fill,.ruler .need{transition:none}}

/* articles, hubs */
.doc{background:rgba(28,15,46,.9)}
.art{max-width:50rem}
.crumbs{font-size:.875rem;color:var(--muted)}
.crumbs a{color:var(--muted);display:inline-block;padding-block:.6rem}
.meta{font-size:.875rem}
.lead{font-size:1.1875rem;color:var(--fg)!important}
.keypts{margin:0;padding:1rem 1.1rem 1rem 2.2rem;display:grid;gap:.45rem;background:rgba(255,193,77,.1);border:1px solid rgba(255,193,77,.4);border-radius:12px;color:var(--fg)}
.art h2{font-size:clamp(1.4rem,3.6vw,1.75rem);margin-top:.9rem}
.art h3{font-size:1.15rem;margin-top:.4rem}
.art ul,.art ol{margin:0;padding-left:1.3rem;display:grid;gap:.45rem;color:var(--muted)}
.art li strong,.art td strong{color:var(--fg)}
.art .keypts{padding-left:2.2rem;color:var(--fg)}
.scroll{overflow-x:auto;border:1px solid var(--edge);border-radius:10px}
.art table{border-collapse:collapse;width:100%;min-width:26rem;font-size:1rem}
.art th,.art td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--edge);vertical-align:top;color:var(--muted)}
.art thead th{font:700 .8125rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:rgba(255,244,226,.06)}
.art tr:last-child td{border-bottom:0}
.art td:first-child{color:var(--fg);font-weight:500}
.cta-box{margin-top:1rem;padding:1.4rem;border-radius:14px;background:linear-gradient(135deg,rgba(227,82,92,.35),rgba(255,193,77,.16));border:1px solid rgba(255,193,77,.45);display:grid;gap:.8rem;justify-items:start}
.cta-box h2{margin:0;font-size:1.5rem}
.cta-box p{color:var(--fg)}
.cta-box .cta-row{justify-content:flex-start}
.art .related,.art .glist,.glist{list-style:none;padding:0;margin:0;display:grid;gap:0}
.related li{border-top:1px solid var(--edge)}
.related a{display:block;padding-block:.75rem}
.glist li{display:grid;gap:.15rem;padding-block:.85rem;border-top:1px solid var(--edge)}
.glist a{font:400 1.2rem/1.25 var(--display);text-decoration:none;padding-block:.55rem}
.glist a:hover{text-decoration:underline}
.glist span{color:var(--muted);font-size:.9688rem}
.foot nav+nav{padding-top:.2rem}
.doc ul,.doc ol{margin:0;padding-left:1.3rem;display:grid;gap:.45rem;color:var(--muted)}
.doc li strong{color:var(--fg)}
.notice{padding:1rem 1.1rem;border-radius:12px;background:rgba(255,138,118,.13);border:1px solid rgba(255,138,118,.55);color:var(--fg)!important}
@media(max-width:46rem){
.hint{display:none}
.hero{gap:.9rem}
.lede{font-size:1.0625rem}
.call{font-size:1.2rem}
main>section.panel{margin-top:34vh}
main>.hero+.panel{margin-top:10vh}
body[data-scene-p] .foot{margin-bottom:34vh}
.clock{display:none}
}
.legal{font-size:1.0625rem;color:var(--fg)!important}
.legal a,.mb-agree a{text-decoration:underline;font-weight:700}
.mb-agree{font-size:1rem;line-height:1.4;color:var(--fg)!important}
.caps{font-size:.9375rem;line-height:1.5;font-weight:700}
.doc h3{font-size:1.1rem;margin-top:.4rem}