/* Layout: night-asphalt ground from the Knock Map. The hero sets a stack of monthly software bills against one app; the builder is a two-column worksheet with the live phone and running total pinned on the right. */
:root{
  --night:#0C1114; --asphalt:#151D22; --asphalt-2:#1A242A; --curb:#25313A; --line:#2F3D47;
  --chalk:#ECE6DA; --dust:#9BA6AC; --flare:#FF7A1A; --gold:#F2B53C; --fresh:#3DBEA0;
  --paper:#EFE9DD; --paper-ink:#23201B; --paper-rule:#CFC6B5;
  --on-flare:#1B0E04;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--chalk);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.92;margin:0;text-wrap:balance}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lede{color:var(--dust);font-size:19px;max-width:58ch}
.num{font-variant-numeric:tabular-nums}
svg.lucide{width:20px;height:20px;stroke-width:2;flex:none}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--night) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--curb)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:.02em;text-transform:uppercase}
.brand svg{width:22px;height:29px;flex:none}
.brand b{color:var(--flare);font-weight:900}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:15px}
.nav-links a{text-decoration:none;color:var(--dust)}
.nav-links a:hover{color:var(--chalk)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:4px;font-family:var(--f-body);font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.btn-primary{background:var(--flare);color:var(--on-flare)}
.btn-primary:hover{background:var(--gold)}
.btn-ghost{border-color:var(--line);color:var(--chalk);background:transparent}
.btn-ghost:hover{border-color:var(--dust)}
.nav .btn{min-height:40px;padding:0 16px;font-size:15px}
@media (max-width:860px){.nav-links{display:none}.nav .btn{margin-left:auto}}

/* hero */
.hero{border-bottom:1px solid var(--curb);background:radial-gradient(1200px 500px at 85% 10%,color-mix(in srgb,var(--flare) 9%,transparent),transparent 60%),var(--night)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,90px);align-items:center;padding-block:clamp(56px,8vw,104px)}
.hero-copy{display:grid;gap:26px;min-width:0}
.hero h1{font-size:clamp(54px,7.2vw,112px);font-weight:900}
.hero h1 em{font-style:normal;color:var(--flare)}
.hero .lede{color:var(--chalk);opacity:.88;font-size:20px;max-width:44ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:var(--dust);margin:0;padding:0;list-style:none}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points svg{color:var(--fresh);width:18px;height:18px}

/* receipt */
.receipt-col{display:grid;gap:18px;justify-items:center;min-width:0}
.receipt{position:relative;width:100%;max-width:380px;background:var(--paper);color:var(--paper-ink);font-family:var(--f-mono);font-size:13.5px;padding:24px 24px 30px;transform:rotate(-2deg);box-shadow:0 24px 60px rgba(0,0,0,.5);
  -webkit-mask:radial-gradient(circle 6px at 8px 100%,transparent 6px,#000 6.5px) 0 0/16px 100% repeat-x;
          mask:radial-gradient(circle 6px at 8px 100%,transparent 6px,#000 6.5px) 0 0/16px 100% repeat-x}
.receipt h4{margin:0 0 2px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.receipt .meta{font-size:11.5px;opacity:.65;margin-bottom:14px}
.rline{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-variant-numeric:tabular-nums}
.rline span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrule{border-top:1.5px dashed var(--paper-rule);margin:10px 0}
.rtotal{font-weight:600;font-size:15px}
.rfoot{font-size:11.5px;opacity:.65;margin-top:8px}
.stamp{position:absolute;left:30%;top:46%;transform:rotate(-14deg);border:3px solid var(--flare);color:var(--flare);font-family:var(--f-display);font-weight:900;font-size:38px;letter-spacing:.06em;padding:2px 12px;border-radius:6px;opacity:.9;pointer-events:none}
.one-app{width:100%;max-width:380px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--asphalt);border:1.5px solid var(--flare);border-radius:6px;padding:16px 20px}
.one-app > span{font-weight:600;font-size:15px}
.one-app small{display:block;color:var(--dust);font-weight:400;font-size:13px}
.one-app b{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1;font-variant-numeric:tabular-nums;color:var(--flare)}
.one-app b small{display:inline;font-family:var(--f-body);font-size:14px;color:var(--dust);font-weight:500}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.receipt{transform:rotate(-1deg)}}

/* three facts */
.facts{border-bottom:1px solid var(--curb);background:var(--asphalt)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding-block:26px;padding-inline:0 24px;display:grid;gap:4px;border-right:1px solid var(--curb)}
.fact + .fact{padding-left:24px}
.fact:last-child{border-right:0}
.fact b{font-family:var(--f-display);font-weight:800;font-size:38px;line-height:1}
.fact span{color:var(--dust);font-size:15px}
@media (max-width:700px){.facts .wrap{grid-template-columns:1fr}.fact{border-right:0;border-bottom:1px solid var(--curb);padding-inline:0!important}.fact:last-child{border-bottom:0}}

section.block{padding-block:clamp(64px,9vw,108px);border-bottom:1px solid var(--curb)}
.sec-head{display:grid;gap:16px;max-width:820px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head h2{font-size:clamp(40px,5.4vw,68px)}

/* calculator */
.calc{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.calc-table{border:1px solid var(--curb);border-radius:6px;overflow:hidden}
.crow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--curb)}
.crow:last-child{border-bottom:0}
.crow.off .cname{color:var(--dust);text-decoration:line-through}
.cname{font-weight:600;font-size:15.5px;min-width:0}
.cname small{display:block;font-weight:400;color:var(--dust);font-size:13px}
.money{display:flex;align-items:center;gap:4px;font-family:var(--f-mono);color:var(--dust)}
.money input[type=number]{width:88px;min-height:40px;text-align:right;font-family:var(--f-mono);font-size:15px;padding:0 10px}
.calc-head{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:10px 16px;background:var(--asphalt);border-bottom:1px solid var(--curb);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.calc-out{position:sticky;top:88px;display:grid;gap:18px}
.bigline{display:grid;gap:4px;border-top:2px solid var(--curb);padding-top:14px}
.bigline span{color:var(--dust);font-size:14.5px}
.bigline b{font-family:var(--f-display);font-weight:900;font-size:56px;line-height:.95;font-variant-numeric:tabular-nums}
.bigline.save{border-top-color:var(--fresh)}
.bigline.save b{color:var(--fresh)}
.bigline.us{border-top-color:var(--flare)}
.bigline.us b{color:var(--flare)}
.note{color:var(--dust);font-size:14px}
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc-out{position:static}}
@media (max-width:480px){.crow{gap:10px;padding:12px}.calc-head{gap:10px;padding:10px 12px}.cname small{display:none}}

input[type=text],input[type=email],input[type=tel],input[type=number],select{min-height:48px;padding:0 14px;border-radius:4px;border:1px solid var(--line);background:var(--asphalt);color:var(--chalk);font:500 16px var(--f-body);width:100%}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chk{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:4px;border:2px solid var(--line);background:var(--night);display:grid;place-items:center;cursor:pointer;margin:0;flex:none}
.chk::after{content:"";width:6px;height:11px;border:solid var(--on-flare);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.chk:checked{background:var(--flare);border-color:var(--flare)}
.chk:checked::after{opacity:1}

/* builder */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4vw,56px);align-items:start}
.steps-col{display:grid;gap:48px;min-width:0}
.step-h{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.step-h .n{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1;color:var(--gold)}
.step-h h3{font-size:clamp(28px,3.2vw,38px)}
.group{display:grid;gap:12px;margin-bottom:28px}
.group-t{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust);display:flex;justify-content:space-between;gap:12px}
.mods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mod{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:16px 16px 16px 16px;border:1px solid var(--curb);border-radius:6px;background:var(--night);cursor:pointer;transition:border-color .15s,background .15s;min-width:0}
.mod:hover{border-color:var(--line)}
.mod.on{border-color:var(--flare);background:var(--asphalt)}
.mod .chk{grid-row:1/3;margin-top:2px}
.mod-top{display:flex;align-items:center;gap:10px;min-width:0}
.mod-top svg{color:var(--flare)}
.mod-name{font-weight:700;font-size:16px;line-height:1.25;min-width:0}
.mod-price{margin-left:auto;font-family:var(--f-mono);font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mod-price small{color:var(--dust);font-weight:400}
.mod-desc{color:var(--dust);font-size:14.5px;line-height:1.5}
.mod-extra{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:6px;font-size:14px}
.mod-extra a{color:var(--gold);font-weight:600;text-underline-offset:3px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stepper button{width:34px;height:34px;border:0;background:var(--asphalt-2);color:var(--chalk);font-size:18px;cursor:pointer}
.stepper output{min-width:34px;text-align:center;font-family:var(--f-mono);font-size:14px}
.included{border:1px dashed var(--line);border-radius:6px;padding:18px 20px;display:grid;gap:12px}
.inc-list{display:flex;flex-wrap:wrap;gap:8px}
.inc-list span{display:inline-flex;align-items:center;gap:7px;font-size:14px;background:var(--asphalt);border:1px solid var(--curb);border-radius:99px;padding:5px 12px 5px 10px}
.inc-list svg{width:16px;height:16px;color:var(--fresh)}
@media (max-width:640px){.mods{grid-template-columns:1fr}}

.brand-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;min-width:0}
.field label,.field .lbl{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{position:relative}
.swatch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.swatch span{display:block;width:40px;height:40px;border-radius:50%;border:3px solid var(--night);box-shadow:0 0 0 1px var(--line)}
.swatch input:checked + span{box-shadow:0 0 0 2px var(--chalk)}
.swatch input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
.field .upload{font-family:var(--f-body);letter-spacing:0;text-transform:none;font-size:14.5px}
.upload{display:flex;align-items:center;gap:12px;min-height:48px;border:1px dashed var(--line);border-radius:4px;padding:6px 12px;cursor:pointer;font-size:14.5px;color:var(--dust)}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.team{display:grid;gap:14px}
.team-row{display:flex;align-items:center;gap:18px}
.team-row input[type=range]{flex:1;accent-color:var(--flare);min-width:0}
.team-row output{font-family:var(--f-display);font-weight:900;font-size:44px;line-height:1;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.brand-fields{grid-template-columns:1fr}}

/* sticky summary */
.side{position:sticky;top:84px;display:grid;gap:18px}
.phone{--brand:#FF7A1A;--brand-ink:#1B0E04;width:100%;max-width:300px;margin-inline:auto;aspect-ratio:300/560;border-radius:38px;background:#05080A;padding:11px;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.5)}
.screen{height:100%;border-radius:28px;overflow:hidden;background:var(--night);display:grid;grid-template-rows:auto 1fr}
.app-bar{background:var(--brand);color:var(--brand-ink);padding:30px 14px 12px;display:flex;align-items:center;gap:10px;transition:background .2s}
.app-logo{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:17px;background:color-mix(in srgb,var(--brand-ink) 16%,transparent);overflow:hidden;flex:none}
.app-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.app-name{font-weight:700;font-size:15px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-sub{font-size:11px;opacity:.75}
.app-home{padding:12px;overflow:hidden;display:grid;align-content:start;gap:10px}
.app-sec{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tile{background:var(--asphalt);border:1px solid var(--curb);border-radius:10px;padding:9px 6px 8px;display:grid;justify-items:center;gap:5px;text-align:center;font-size:10.5px;font-weight:600;line-height:1.2;min-width:0}
.tile svg{width:18px;height:18px;color:var(--brand)}
.tile.base svg{color:var(--dust)}
.tile.new{animation:pop .35s ease}
@keyframes pop{from{transform:scale(.85);opacity:.4}to{transform:none;opacity:1}}
.summary{background:var(--asphalt);border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:grid;gap:8px;font-size:15px}
.sline{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.sline span:first-child{color:var(--dust)}
.sline.disc span:last-child{color:var(--fresh)}
.stotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--curb);padding-top:12px;margin-top:4px}
.stotal b{font-family:var(--f-display);font-weight:900;font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
.stotal b small{font-family:var(--f-body);font-size:14px;color:var(--dust);font-weight:500}
.ssave{font-size:14px;color:var(--fresh)}
.nudge{font-size:13.5px;color:var(--gold)}
@media (max-width:1020px){.builder{grid-template-columns:1fr}.side{position:static;grid-template-columns:minmax(0,300px) 1fr;align-items:start}}
@media (max-width:640px){.side{grid-template-columns:1fr}}

/* mobile total bar */
.mbar{display:none}
@media (max-width:1020px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--asphalt) 96%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .mbar b{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
  .mbar small{display:block;font-size:12.5px;color:var(--dust)}
  .mbar .btn{min-height:44px}
  body{padding-bottom:76px}
}

/* how */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.how div{display:grid;gap:10px;align-content:start;border-top:2px solid var(--curb);padding-top:18px;min-width:0}
.how div:first-child{border-top-color:var(--flare)}
.how .n{font-family:var(--f-display);font-weight:900;font-size:42px;line-height:1;color:var(--gold)}
.how h3{font-size:25px}
.how p{color:var(--dust);font-size:16px}
@media (max-width:960px){.how{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.how{grid-template-columns:1fr}}

/* feature page teaser */
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--curb);border-radius:6px;overflow:hidden;text-decoration:none}
.teaser-img{min-height:280px;background:var(--night);position:relative}
.teaser-img canvas{position:absolute;inset:0;width:100%;height:100%}
.teaser-copy{padding:clamp(24px,4vw,44px);display:grid;gap:14px;align-content:center;background:var(--asphalt)}
.teaser-copy h3{font-size:clamp(30px,3.6vw,44px)}
.teaser-copy p{color:var(--dust)}
.teaser-copy .go{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.teaser:hover .go{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.teaser{grid-template-columns:1fr}}

/* checkout */
.checkout{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.co-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.co-form .full{grid-column:1/-1}
.cycle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cycle label{position:relative;display:grid;gap:2px;border:1px solid var(--line);border-radius:6px;padding:12px 14px;cursor:pointer}
.cycle input{position:absolute;opacity:0}
.cycle label:has(input:checked){border-color:var(--flare);background:var(--asphalt)}
.cycle label:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.cycle label{font-family:var(--f-body);letter-spacing:0;text-transform:none;color:var(--chalk)}
.cycle b{font-size:15.5px}
.cycle span{font-size:13.5px;color:var(--dust)}
.terms{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--dust)}
.order{background:var(--asphalt);border:1px solid var(--line);border-radius:6px;padding:22px 24px;display:grid;gap:10px}
.order h3{font-size:28px;margin-bottom:4px}
.order-items{display:grid;gap:6px;font-size:14.5px;max-height:320px;overflow:auto;padding-right:4px}
.oline{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.oline span:first-child{min-width:0}
.oline.muted{color:var(--dust)}
.oline.disc span:last-child{color:var(--fresh)}
.orule{border-top:1px solid var(--curb);margin:6px 0}
.odue{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.odue b{font-family:var(--f-display);font-weight:900;font-size:44px;line-height:1;font-variant-numeric:tabular-nums;color:var(--flare)}
.secure{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dust)}
.secure svg{width:16px;height:16px}
.done{border:1px solid var(--fresh);background:color-mix(in srgb,var(--fresh) 12%,transparent);padding:14px 16px;border-radius:4px;font-size:15px}
.err{border-color:var(--flare);background:color-mix(in srgb,var(--flare) 12%,transparent)}
@media (max-width:900px){.checkout{grid-template-columns:1fr}}
@media (max-width:520px){.co-form{grid-template-columns:1fr}}

/* faq */
.faq{border-top:1px solid var(--curb);max-width:880px}
.faq details{border-bottom:1px solid var(--curb)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--f-display);font-size:30px;font-weight:800;color:var(--flare)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--dust);max-width:68ch}

footer{padding-block:40px 56px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;color:var(--dust);font-size:14px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* no per-user band */
.seatless{background:var(--asphalt)}
.seat-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.seat-copy{display:grid;gap:20px;min-width:0}
.seat-copy h2{font-size:clamp(42px,5.8vw,76px)}
.seat-copy h2 em{font-style:normal;color:var(--flare)}
.seat-copy .lede{color:var(--chalk);opacity:.85}
.seat-table{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--night);min-width:0}
.st-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;padding:16px 18px;border-bottom:1px solid var(--curb);font-size:15px;align-items:center}
.st-row:last-child{border-bottom:0}
.st-head{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);padding-block:12px}
.st-row .bad{color:var(--dust)}
.st-row .good{color:var(--fresh);font-weight:700}
.crew{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;border:1px solid var(--fresh);background:color-mix(in srgb,var(--fresh) 8%,transparent);border-radius:6px;padding:20px 22px}
.crew svg{width:28px;height:28px;color:var(--fresh)}
.crew b{font-size:17px}
.crew p{color:var(--dust);font-size:15.5px;margin-top:4px;max-width:60ch}
@media (max-width:900px){.seat-grid{grid-template-columns:1fr}}
@media (max-width:520px){.st-row{grid-template-columns:1fr 1fr;gap:6px 12px}.st-row > span:first-child{grid-column:1/-1;font-weight:600}.st-head > span:first-child{display:none}}

/* connections */
.mod-req{grid-column:2;display:flex;align-items:flex-start;gap:7px;font-family:var(--f-mono);font-size:12.5px;line-height:1.45;color:var(--gold);margin-top:2px}
.mod-req svg{width:15px;height:15px;flex:none;margin-top:1px}
.conn.req{cursor:default}
.conn.req .chk{opacity:1;cursor:not-allowed}
.conn select{margin-top:8px;min-height:40px;max-width:360px;font-size:14.5px}
#oSetupLines{display:grid;gap:6px;font-size:14.5px}
.needs{border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 9%,transparent);border-radius:6px;padding:14px 16px;font-size:14.5px;color:var(--chalk)}
.needs ul{margin:8px 0 8px;padding-left:18px;display:grid;gap:6px;color:var(--chalk)}
.needs li b{color:var(--gold)}
.conns{display:grid;gap:10px;margin-bottom:10px}
.conn{display:grid;grid-template-columns:auto auto 1fr auto;gap:14px;align-items:center;border:1px solid var(--curb);border-radius:6px;padding:14px 16px;background:var(--night);cursor:pointer;min-width:0}
.conn.on{border-color:var(--flare);background:var(--asphalt)}
.conn.other{grid-template-columns:auto 1fr auto;cursor:default}
.conn > svg{color:var(--flare);width:22px;height:22px}
.conn-main{display:grid;gap:2px;min-width:0}
.conn-main b{font-size:16px}
.conn-main span{color:var(--dust);font-size:14px;line-height:1.45}
.conn-use{font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--gold)}
.conn-use:empty{display:none}
.conn-price{font-family:var(--f-mono);font-weight:600;font-size:14px;text-align:right;white-space:nowrap}
.conn-price small{display:block;font-weight:400;color:var(--dust);font-size:11.5px}
.sline.setup{border-top:1px dashed var(--curb);padding-top:8px}
@media (max-width:560px){.conn{grid-template-columns:auto 1fr auto}.conn > svg{display:none}}

/* ===== multi-page additions ===== */
:root{--r0:#3DBEA0;--r1:#5B8EAD;--r2:#D8B24A;--r3:#FF8A2A;--r4:#EE4E2C;--muted-tile:#1C262D}
.nav-links a[aria-current="page"]{color:var(--chalk);box-shadow:0 2px 0 var(--flare)}
.mnav{display:none;position:relative;margin-left:auto}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-weight:600;font-size:15px}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:48px;min-width:220px;background:var(--asphalt);border:1px solid var(--line);border-radius:6px;padding:8px;display:grid;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mnav nav a{padding:10px 12px;text-decoration:none;border-radius:4px}
.mnav nav a:hover,.mnav nav a[aria-current="page"]{background:var(--asphalt-2)}
@media (max-width:860px){.mnav{display:block}.nav .btn{margin-left:0}}
@media (max-width:420px){.nav .btn{display:none}}

.page-head{border-bottom:1px solid var(--curb);background:radial-gradient(900px 380px at 90% 0%,color-mix(in srgb,var(--flare) 8%,transparent),transparent 60%),var(--night)}
.page-head .wrap{padding-block:clamp(48px,7vw,88px);display:grid;gap:18px}
.page-head h1{font-size:clamp(46px,6.4vw,92px);font-weight:900}
.page-head h1 em{font-style:normal;color:var(--flare)}

.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.02em;padding:4px 9px;border-radius:99px;border:1px solid var(--curb);line-height:1.35}
.badge svg{width:13px;height:13px;flex:none}
.badge.all{color:var(--fresh);border-color:color-mix(in srgb,var(--fresh) 40%,transparent)}
.badge.fl{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.badge.soon{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.badge.no{color:var(--dust)}
.badge.req{color:var(--chalk);border-color:var(--line)}

.state-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:15px;color:var(--dust)}
.state-pick select{width:auto;min-width:220px}

/* module overview grid (home) */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mcard{display:grid;gap:10px;align-content:start;border:1px solid var(--curb);border-radius:6px;padding:18px;background:var(--night);min-width:0}
.mcard-top{display:flex;align-items:center;gap:10px}
.mcard-top svg{color:var(--flare)}
.mcard b{font-size:16.5px;line-height:1.25}
.mcard p{color:var(--dust);font-size:14.5px;line-height:1.5}
.mcard .price{margin-left:auto;font-family:var(--f-mono);font-size:13.5px;font-weight:600;white-space:nowrap}
.mcard .price small{color:var(--dust);font-weight:400}
.mcard.dim{opacity:.62}
.mcard a.more{color:var(--gold);font-weight:600;font-size:14px;text-underline-offset:3px}
@media (max-width:980px){.mgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mgrid{grid-template-columns:1fr}}
.more-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}

/* florida band */
.flband{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.flband h2{font-size:clamp(38px,5vw,64px)}
.flband-copy{display:grid;gap:18px;min-width:0}
.fllist{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.fllist li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--curb);border-radius:6px;padding:14px 16px;background:var(--asphalt)}
.fllist svg{color:var(--gold);margin-top:3px}
.fllist b{display:block}
.fllist span{color:var(--dust);font-size:14.5px}
@media (max-width:860px){.flband{grid-template-columns:1fr}}

/* coverage page */
.cov2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cov2 > div{border:1px solid var(--curb);border-radius:6px;padding:24px;display:grid;gap:14px;align-content:start;min-width:0}
.cov2 h3{font-size:30px}
.cov2 ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.cov2 li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15.5px}
.cov2 li svg{width:18px;height:18px;margin-top:3px;color:var(--fresh)}
.cov2 .flcol li svg{color:var(--gold)}
.cov2 li small{display:block;color:var(--dust);font-size:14px}
@media (max-width:820px){.cov2{grid-template-columns:1fr}}
.tilemap-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,48px);align-items:start}
.tilemap{display:grid;grid-template-columns:repeat(11,1fr);gap:5px;max-width:720px}
.tile-st{aspect-ratio:1;border-radius:5px;background:var(--muted-tile);border:1px solid var(--curb);display:grid;place-items:center;font-family:var(--f-mono);font-size:clamp(9px,1.3vw,13px);font-weight:600;color:var(--dust);cursor:pointer;padding:0}
.tile-st.live{background:var(--flare);border-color:var(--flare);color:var(--on-flare)}
.tile-st.soon{background:color-mix(in srgb,var(--gold) 22%,var(--night));border-color:var(--gold);color:var(--gold)}
.tile-st[aria-pressed="true"]{outline:2px solid var(--chalk);outline-offset:2px}
.tm-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:14px;color:var(--dust)}
.tm-legend span{display:inline-flex;align-items:center;gap:8px}
.tm-legend i{width:16px;height:16px;border-radius:4px;display:inline-block;border:1px solid var(--curb);background:var(--muted-tile)}
.tm-legend i.live{background:var(--flare);border-color:var(--flare)}
.tm-legend i.soon{background:color-mix(in srgb,var(--gold) 22%,var(--night));border-color:var(--gold)}
.tm-info{border:1px solid var(--line);border-radius:6px;background:var(--asphalt);padding:20px;display:grid;gap:12px}
.tm-info h3{font-size:34px}
.tm-info ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px}
.tm-info li{display:flex;justify-content:space-between;gap:10px}
.tm-info li span:last-child{font-family:var(--f-mono);font-size:12.5px;white-space:nowrap}
.tm-info .ok{color:var(--fresh)} .tm-info .soon{color:var(--gold)} .tm-info .no{color:var(--dust)}
@media (max-width:900px){.tilemap-wrap{grid-template-columns:1fr}}
.cov-wrap{overflow-x:auto;border:1px solid var(--curb);border-radius:6px}
table.cov{width:100%;border-collapse:collapse;min-width:620px;font-size:15.5px}
.cov th{text-align:left;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);padding:14px 18px;border-bottom:1px solid var(--curb);background:var(--asphalt)}
.cov td{padding:15px 18px;border-bottom:1px solid var(--curb);vertical-align:top}
.cov tr:last-child td{border-bottom:0}
.cov td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.cov th.num{text-align:right}
.cov td.county{font-weight:700}
.cov td.src{color:var(--dust)}
.pill{display:inline-block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pill.live{background:color-mix(in srgb,var(--fresh) 18%,transparent);color:var(--fresh)}
.pill.next{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.inline-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;max-width:820px}
@media (max-width:700px){.inline-form{grid-template-columns:1fr}}

/* pricing page */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pbox{border:1px solid var(--curb);border-radius:6px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.pbox.main{border-color:var(--flare);background:var(--asphalt)}
.pbox .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.pbox .v{font-family:var(--f-display);font-weight:900;font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
.pbox .v small{font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--dust)}
.pbox p{color:var(--dust);font-size:14.5px}
@media (max-width:980px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}}
table.ptab{width:100%;border-collapse:collapse;min-width:700px;font-size:15px}
.ptab th{text-align:left;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);padding:12px 16px;border-bottom:1px solid var(--curb);background:var(--asphalt)}
.ptab td{padding:13px 16px;border-bottom:1px solid var(--curb);vertical-align:top}
.ptab td.num,.ptab th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptab tr.grp td{background:var(--night);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding-block:10px}
.ptab .mname{font-weight:600}
.notice{border:1px solid var(--gold);background:color-mix(in srgb,var(--gold) 9%,transparent);border-radius:6px;padding:18px 20px;display:grid;gap:8px;font-size:15.5px}
.notice b{color:var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.quote-card{border:1px solid var(--line);border-radius:6px;background:var(--asphalt);padding:22px 24px;display:grid;gap:8px}
.qline{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;font-size:15px}
.qline span:first-child{color:var(--dust)}
.qline.big{border-top:1px solid var(--curb);padding-top:10px;margin-top:4px;align-items:baseline}
.qline.big b{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1}

/* cta band */
.ctaband .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.ctaband h2{font-size:clamp(36px,5vw,60px)}

/* build: unavailable modules */
.mod.unavail{cursor:not-allowed;opacity:.6}
.mod.unavail:hover{border-color:var(--curb)}
.mod .badges{grid-column:2;margin-top:4px}
.statebox{display:grid;gap:12px;border:1px solid var(--line);border-radius:6px;background:var(--asphalt);padding:18px 20px;margin-bottom:28px}
.statebox .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.statebox select{width:auto;min-width:240px}
.statebox p{color:var(--dust);font-size:14.5px}
.statebox p b{color:var(--gold);font-weight:600}

/* footer links */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{color:var(--dust);text-decoration:none}
.foot-links a:hover{color:var(--chalk)}
.mod{align-content:start}
.badges:empty{display:none}
.mod{align-content:start}
.badges:empty{display:none}

/* ===== RoofRule: screenshots and feature pages ===== */
.hero-sub{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,3.6vw,52px);line-height:1;color:var(--gold);margin-top:-8px}
.shot{display:block;width:100%;max-width:290px;border-radius:34px;padding:9px;background:#05080A;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.5);margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:26px;aspect-ratio:390/844;object-fit:cover;background:var(--asphalt)}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,250px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;margin-inline:-4px}
.gallery figure{margin:0;scroll-snap-align:start;display:grid;gap:12px;align-content:start}
.gallery figcaption{display:grid;gap:2px;font-size:14.5px}
.gallery figcaption a{font-weight:700;color:var(--chalk);text-decoration:none}
.gallery figcaption a:hover{color:var(--gold)}
.gallery figcaption span{color:var(--dust);font-size:13.5px}
.statement .wrap{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,90px);align-items:center}
.statement blockquote{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,5.6vw,78px);line-height:.95;text-wrap:balance}
.statement blockquote em{font-style:normal;color:var(--flare)}
.statement p{color:var(--dust);font-size:18px;max-width:52ch;margin-top:20px}
@media (max-width:820px){.statement .wrap{grid-template-columns:1fr}.statement .shot{justify-self:center}}

.fhead .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,80px);align-items:center;padding-block:clamp(44px,6vw,80px)}
.fhead-copy{display:grid;gap:18px;min-width:0}
.fhead h1{font-size:clamp(42px,5.6vw,80px);font-weight:900}
.fhead .price-tag{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1}
.fhead .price-tag small{font-family:var(--f-body);font-size:15px;font-weight:500;color:var(--dust)}
.crumb{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.crumb a{color:var(--gold);text-decoration:none}
.fshots{display:flex;gap:18px;align-items:flex-start}
.fshots figure{margin:0;display:grid;gap:10px;justify-items:center;width:min(270px,70vw)}
.fshots figure:nth-child(2){margin-top:48px}
.fshots figcaption{font-size:13.5px;color:var(--dust);text-align:center;max-width:26ch}
@media (max-width:900px){.fhead .wrap{grid-template-columns:1fr}.fshots{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.fshots figure{flex:none;scroll-snap-align:start}.fshots figure:nth-child(2){margin-top:0}}
.flist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--curb)}
.flist > div{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:22px 20px 22px 0;border-bottom:1px solid var(--curb);min-width:0}
.flist > div:nth-child(odd){padding-right:28px}
.flist svg{color:var(--flare);margin-top:3px}
.flist b{display:block;font-size:17px;margin-bottom:4px}
.flist p{color:var(--dust);font-size:15.5px}
@media (max-width:760px){.flist{grid-template-columns:1fr}}
.gtk{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.gtk li{display:grid;grid-template-columns:auto 1fr;gap:12px;border:1px solid var(--curb);border-radius:6px;padding:14px 16px;background:var(--asphalt);font-size:15.5px}
.gtk svg{color:var(--gold);margin-top:2px}
.pn{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pn a{display:grid;gap:2px;text-decoration:none;border:1px solid var(--curb);border-radius:6px;padding:14px 18px;min-width:220px;flex:1}
.pn a:hover{border-color:var(--line)}
.pn a span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.pn a b{font-size:16.5px}
.pn a.next{text-align:right}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rel a{text-decoration:none}
@media (max-width:760px){.rel{grid-template-columns:1fr}}
.mod-head-shot{justify-self:end}
a.mcard{text-decoration:none;color:inherit}a.mcard:hover{border-color:var(--line)}

/* most popular */
.badge.pop{color:var(--on-flare);background:var(--flare);border-color:var(--flare);font-weight:600}
.spot{display:grid;grid-template-columns:minmax(0,1.05fr) auto;gap:clamp(28px,5vw,72px);align-items:center;border:1px solid var(--flare);border-radius:8px;background:radial-gradient(700px 300px at 100% 0%,color-mix(in srgb,var(--flare) 12%,transparent),transparent 70%),var(--asphalt);padding:clamp(22px,4vw,48px)}
.spot-copy{display:grid;gap:18px;min-width:0}
.spot h3{font-size:clamp(40px,5vw,66px)}
.spot-lede{font-size:19px;color:var(--chalk);opacity:.9;max-width:50ch}
.spot-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.spot-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:16px;color:var(--dust)}
.spot-list b{color:var(--chalk)}
.spot-list svg{color:var(--gold);margin-top:2px}
.spot-shots{display:flex;gap:16px;align-items:flex-start}
.spot-shots .shot{width:min(240px,40vw)}
.spot-shots .shot:nth-child(2){margin-top:44px}
@media (max-width:900px){.spot{grid-template-columns:1fr}.spot-shots{justify-content:center}}
.pop-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.pop-card{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;border:1px solid var(--curb);border-radius:8px;padding:16px;text-decoration:none;color:inherit;background:var(--night);min-width:0}
.pop-card:hover{border-color:var(--flare)}
.pop-card .shot{padding:5px;border-radius:18px}
.pop-card .shot img{border-radius:14px}
.pop-card h3{font-size:24px;margin:8px 0 6px}
.pop-card p{color:var(--dust);font-size:14.5px}
.pop-card .go{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:600;font-size:14px;margin-top:10px}
.pop-card .go svg{width:16px;height:16px}
@media (max-width:1060px){.pop-row{grid-template-columns:1fr}.pop-card{grid-template-columns:110px 1fr}}