/* accuratesecurity.ca/alarm-com — overrides on top of accuratesecurity.ca's site.css
   Accent for this page is Alarm.com orange (sampled from Alarm.com collateral); First Alert stays red on the main site. */
:root{
  --adc:#F25E0F; --adc-dark:#D24E08; --adc-tint:#FEF0E7;
  --gold:#C9A227; --green:#2F8F5B;
}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.eyebrow{color:var(--adc)}
.eyebrow::before{background:var(--adc)}
.hero h1 em{color:var(--adc)}
.btn{white-space:nowrap}
.btn-adc{background:var(--adc);color:#fff;box-shadow:0 6px 18px rgba(242,94,15,.30)}
.btn-adc:hover{background:var(--adc-dark)}
.btn:focus-visible,a:focus-visible{outline-color:var(--adc)}
.soc-btn:hover{background:var(--adc)}
.faq-list summary::after{color:var(--adc)}
.nav-links a:hover{color:var(--adc)}
.nav-links{gap:20px}
/* the nav carries nine links plus two buttons — tighten it before it can overflow */
/* Compare quotes joined the row, so the squeeze starts a step earlier and 'Shops & offices'
   gives up its long name before anything wraps out of the header. */
@media (max-width:1620px){ .nav-links{gap:16px} .nav-links a{font-size:.94rem} }
@media (max-width:1520px){ .nav-links{gap:13px} .nav-links a{font-size:.9rem} }
@media (max-width:1400px){ .nav-links{gap:13px} .nav-links a{font-size:.9rem} }
@media (max-width:1300px){ .nav-links{gap:11px} .nav-links a{font-size:.86rem} }
@media (max-width:1200px){ .nav-links{gap:10px} .nav-links a{font-size:.84rem} .nav-links a.nav-main{padding:5px 9px} header.site .btn-adc{padding:9px 14px;font-size:.9rem} }
@media (max-width:1150px) and (min-width:961px){ .nav-links a.nav-main{display:none} }
.nav-links a{white-space:nowrap}
.nav-links a.nav-main{border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--ink)}

.adc-chip{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;border-left:1px solid var(--line);padding-left:20px}
@media (max-width:1620px){ .adc-chip{display:none} }
.adc-wordmark{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:.06em;color:var(--adc);font-size:1.02rem}
.adc-tier{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.hero-badge.adc-badge{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:.06em;color:var(--adc);background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}
.f-legal{margin-top:14px;font-size:.78rem;color:#6d838f}

/* section furniture */
/* a section-level h1 is the page's own topic line and looks the same as the h2 it replaced; the hero
   rules (.hero h1, .sup-hero h1, .ab-hero h1) are more specific and still win where they apply */
section h1,section h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:800;margin:10px 0 8px}
section h3{font-weight:700}
.sub{color:var(--muted);margin:0 0 26px;max-width:70ch;font-size:1.05rem}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fine{color:var(--muted);font-size:.92rem;margin-top:18px;max-width:90ch}
.subh{font-size:1.25rem;margin:30px 0 12px}
.k{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;color:#fff;background:var(--steel);margin-bottom:8px}
.k.adc,.f-copy .k.cam{background:var(--adc)}

/* announcement */
.announce{background:var(--adc-tint);border-bottom:1px solid var(--line)}
.announce .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;padding-top:36px;padding-bottom:36px}
.announce h2{margin-top:0}
.announce p{margin:8px 0 0;color:var(--ink-soft);max-width:62ch}
.choice{display:grid;gap:12px}
.choice a{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;border:2px solid var(--ink);border-radius:var(--radius-sm);padding:14px 18px;color:var(--ink);font-family:'Archivo',sans-serif;font-weight:700;background:#fff}
.choice a small{display:block;font-family:'Barlow',sans-serif;font-weight:500;color:var(--muted);font-size:.85rem;margin-top:2px}
.choice a.adc{border-color:var(--adc);background:var(--adc);color:#fff}
.choice a.adc small{color:#FDE3D3}
.choice a.fa{border-color:var(--red);color:var(--red)}
.choice a span.arrow{font-family:'IBM Plex Mono',monospace;font-size:1.3rem}

/* plans + base */
.base{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--line);padding:18px 22px;border-radius:var(--radius);margin-bottom:18px}
.base h3{font-size:1.15rem}
.base p{margin:4px 0 0;color:var(--ink-soft);font-size:.98rem;max-width:70ch}
.base .price{font-family:'IBM Plex Mono',monospace;font-size:1.9rem;font-weight:600;line-height:1;text-align:right;color:var(--ink)}
.base .price small{display:block;font-family:'Barlow',sans-serif;font-size:.85rem;font-weight:600;color:var(--adc);margin-top:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{border:1px solid var(--line);border-top:5px solid var(--steel);border-radius:var(--radius);padding:22px 22px 22px;background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan.best{border-top-color:var(--adc)}
.plan.gold{border-top-color:var(--gold)}
.plan.rvm{border-top-color:var(--ink)}
.plan.uc{border-top-color:var(--green)}
.plans.four{grid-template-columns:repeat(4,1fr);gap:14px}
.plans.four .plan{padding:18px 16px}
.plans.four .plan h3{font-size:1.15rem}
.plans.four .amt{font-size:1.9rem}
.plans.four ul{font-size:.92rem}
@media (max-width:1150px){.plans.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.plans.four{grid-template-columns:1fr}}
.plan h3{font-size:1.3rem}
.plan .tag{color:var(--muted);font-size:.92rem;margin:4px 0 12px;min-height:2.6em}
.plan .price{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.plan .amt{font-family:'IBM Plex Mono',monospace;font-size:2.1rem;font-weight:600;line-height:1}
.plan .amt.quote{font-family:'Archivo',sans-serif;font-size:1.5rem;font-weight:800}
.plan .amt sup{font-size:.95rem;font-weight:500;vertical-align:top;top:.35em;position:relative}
/* "/ month first year" has to hold its two lines at any card width, or the slash and the words break
   apart down the column */
.plan .per{color:var(--muted);font-size:.86rem;line-height:1.2;white-space:nowrap}
.plan .promo{margin-left:auto;text-align:right;color:var(--adc);font-weight:700;font-size:.85rem;line-height:1.2}
.plan .promo b{font-family:'IBM Plex Mono',monospace}
.plan .adds{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--adc);margin-bottom:6px}
.plan ul{margin:0 0 6px;padding-left:18px;font-size:.98rem;line-height:1.45}
.plan li{margin:5px 0}
.plan li b{font-weight:600}
.plan .choose{margin-top:auto;width:100%;font-size:.95rem;padding:12px 16px}
.plan.selected{box-shadow:0 0 0 3px var(--green),var(--shadow)}
.plan.selected .choose{background:var(--green);box-shadow:none}
.plan.selected .choose::after{content:" \2713"}
.plan:hover{box-shadow:0 10px 26px rgba(14,27,36,.13)}
.plan .choose{transition:background .15s}

/* builder */
.builder{margin-top:30px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:clip;box-shadow:var(--shadow)}
.b-head{background:var(--adc-tint);border-bottom:1px solid var(--line);padding:20px 24px;border-radius:var(--radius) var(--radius) 0 0}
.b-head h3{font-size:1.35rem}
.b-head p{margin:6px 0 0;color:var(--ink-soft);font-size:.98rem;max-width:80ch}
.b-grid{display:grid;grid-template-columns:1.15fr 1fr}
.b-opts{padding:20px 24px;border-right:1px solid var(--line)}
.b-opts fieldset{border:0;padding:0;margin:0 0 20px}
.b-opts legend{font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;margin-bottom:10px;color:var(--ink)}
.opt-h{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;background:#fff}
.opt:hover{border-color:var(--adc)}
.opt input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--adc)}
.opt span b{display:block;font-weight:700;font-size:.98rem;color:var(--ink)}
.opt span small{display:block;color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:2px}
.opt em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap;font-size:.98rem}
.opt.sub{margin-left:22px}
.opt.on{border-color:var(--adc);background:var(--adc-tint)}
.opt.off{opacity:.45;cursor:not-allowed}
.b-sum{padding:20px 24px;background:var(--paper);position:sticky;top:96px;align-self:start;max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain}
.b-sum::-webkit-scrollbar{width:8px}
.b-sum::-webkit-scrollbar-thumb{background:#C9D2D8;border-radius:4px}
/* the money block stays put while the feature list scrolls under it */
.b-total{position:sticky;top:0;z-index:2}
.b-total{background:var(--ink);color:#fff;border-radius:var(--radius-sm);padding:18px 20px}
.b-total .lbl{font-size:.8rem;color:#9db4c0;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.b-total .amt{font-family:'IBM Plex Mono',monospace;font-size:2.6rem;font-weight:600;line-height:1.1;margin:4px 0 8px}
.b-total .amt sup{font-size:1.1rem;vertical-align:top;top:.4em;position:relative}
.b-total .amt .per{font-family:'Barlow',sans-serif;font-size:.9rem;color:#9db4c0;margin-left:8px;font-weight:500}
.b-total .rows div{display:flex;justify-content:space-between;font-size:.9rem;color:#cfe0e9;padding:6px 0;border-top:1px solid rgba(255,255,255,.12)}
.b-total .rows b{color:#fff;font-family:'IBM Plex Mono',monospace;font-weight:600}
.b-lines{margin:14px 0 6px;font-size:.92rem}
.b-lines div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dotted var(--line)}
.b-lines div span:last-child{font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap}
.b-sum h4{font-family:'Archivo',sans-serif;font-size:1rem;margin:14px 0 6px}
.b-inc{margin:0;padding-left:18px;font-size:.92rem;line-height:1.4}
.b-inc li{margin:3px 0}
.b-inc li.h{list-style:none;margin:8px 0 2px -18px;font-weight:700;color:var(--adc);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.b-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.b-cta .btn{padding:11px 14px;font-size:.9rem}
.b-fine{font-size:.8rem;color:var(--muted);margin:10px 0 0}

/* two-column lists */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.box{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:#fff}
.box h3{font-size:1.2rem;margin-bottom:2px}
.box p.s{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-top:1px dotted var(--line);font-size:.98rem}
.lines li:first-child{border-top:0}
.lines li b{font-weight:600}
.lines li span{color:var(--muted)}
.lines li em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap}
.lines li em:before{content:"+"}

/* feature blocks */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.feature.ind{align-items:stretch}
.f-media{background:var(--paper);display:flex;flex-direction:column}
.feature.ind .f-media{display:block}
.f-media video{display:block;width:100%;height:auto;background:#000;aspect-ratio:16/9}
.feature.ind .f-media img{display:block;width:100%;height:100%;object-fit:cover;min-height:360px}
.f-under{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:14px 16px}
.f-under.rvm-under{grid-template-columns:1fr 1fr}
.f-under.cam-under{grid-template-columns:120px 1fr;background:#fff}
.f-under.cam-under .f-hero img{max-height:200px;width:auto;margin:0 auto}
.f-under.rvm-under img{width:100%;height:auto;border-radius:var(--radius-sm)}
.f-hero img{width:100%;height:auto;display:block}
.f-life{width:100%;height:auto;border-radius:var(--radius-sm);display:block}
.f-copy{padding:24px 24px 20px}
.f-copy h3{font-size:1.4rem}
.f-copy h3 small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.85rem;color:var(--muted);margin-top:4px}
.f-copy p{margin:10px 0 12px;font-size:.98rem;color:var(--ink-soft);max-width:52ch}
.specs{list-style:none;margin:0;padding:0;font-size:.95rem}
.specs li{padding:7px 0;border-top:1px dotted var(--line)}
.specs li b{display:inline-block;min-width:92px;font-weight:700;color:var(--ink)}
.finishes{display:grid;grid-template-columns:repeat(3,64px) 1fr;gap:14px;align-items:end;margin-top:16px;padding-top:14px;border-top:1px dotted var(--line)}
.finishes figure{margin:0;text-align:center}
.finishes img{width:100%;height:auto}
.finishes figcaption{font-size:.75rem;color:var(--muted);margin-top:4px;font-weight:600}
.tripwire{position:relative;border-radius:var(--radius-sm);overflow:hidden;max-width:180px;justify-self:end}
.tripwire video{display:block;width:100%;height:auto}
.tripwire span{position:absolute;left:0;right:0;bottom:0;background:rgba(14,27,36,.78);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 6px;text-align:center}
.lineup{margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.winter{margin-top:16px;padding:14px 18px;background:var(--paper);border-left:4px solid var(--gold);border-radius:6px;font-size:.95rem;color:var(--ink-soft)}
.cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-row p{margin:0;color:var(--muted);font-size:.95rem}

/* comparison tables */
.cmp{width:100%;border-collapse:collapse;font-size:.95rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.cmp th,.cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp th{background:var(--paper);font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem}
.cmp th:first-child,.cmp td:first-child{width:18%;color:var(--muted);font-weight:600}
.cmp tr:last-child td{border-bottom:0}
.cmp td a{font-weight:700;color:var(--adc)}
.cmp.db th small{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--muted);font-size:.78rem}
.cmp.db td,.cmp.db th{padding:10px 12px;font-size:.9rem}
.cmp.db th:first-child,.cmp.db td:first-child{width:14%}

/* cards */
.sys,.who{display:grid;gap:16px}
.sys{grid-template-columns:repeat(2,1fr)}
.who{grid-template-columns:repeat(3,1fr);margin-top:22px}
.sys .card,.who .card{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff;box-shadow:var(--shadow)}
.sys .card{border-left:5px solid var(--steel)}
.sys .card.yes{border-left-color:var(--green)}
.sys .card.maybe{border-left-color:var(--gold)}
.sys .card.no{border-left-color:var(--muted)}
.sys h3{font-size:1.08rem;margin-bottom:4px}
.sys p,.who p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.sys .yes .k{background:var(--green)}.sys .maybe .k{background:var(--gold);color:var(--ink)}.sys .no .k{background:var(--muted)}
.who .card{padding:0;overflow:hidden}
.who .card img{display:block;width:100%;height:190px;object-fit:cover}
.who h3{font-size:1.08rem;margin:14px 18px 4px}
.who p{margin:0 18px 18px}

/* why + contact */
.whyus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.whyus-grid div{padding:18px 20px;background:var(--paper);border-radius:var(--radius);border:1px solid var(--line)}
.whyus-grid h3{font-size:1.02rem;margin-bottom:6px}
.whyus-grid p{margin:0;font-size:.93rem;color:var(--ink-soft)}
.serve-line{margin-top:22px;font-size:.93rem;color:var(--muted)}
.serve-line b{color:var(--ink);font-weight:600}
.reach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.reach-grid div{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;font-size:.95rem;background:#fff}
.reach-grid b{display:block;font-family:'Archivo',sans-serif;font-size:.9rem;margin-bottom:4px}
.reach-grid a{text-decoration:none;font-weight:600;color:var(--ink)}

/* business */
.biz{background:var(--paper);border-top:1px solid var(--line)}
.biz .plan{background:#fff}
.rvm-feat{margin-top:28px}

@media (max-width:960px){
  .announce .wrap,.b-grid,.two,.sys,.feature,.plans,.who,.whyus-grid,.reach-grid{grid-template-columns:1fr}
  .b-opts{border-right:0;border-bottom:1px solid var(--line)}
  .b-sum{position:static}
  .cmp.db{min-width:760px}
  .cmp th:first-child,.cmp td:first-child{width:auto}
  .base{grid-template-columns:1fr}
  .base .price{text-align:left}
  .adc-chip{display:none}
}

/* equipment picker */
.b-opts fieldset.eq legend span{font-family:'Barlow',sans-serif;font-weight:500;font-size:.85rem;color:var(--muted);text-transform:none;letter-spacing:0}
.eq-note{font-size:.87rem;color:var(--muted);margin:0 0 12px;max-width:60ch}
.eq-g{margin-bottom:14px}
.eq-g h5{font-family:'Archivo',sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--adc);margin:0 0 6px}
.eq-row{display:grid;grid-template-columns:1fr auto 64px;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:6px;background:#fff}
.eq-row:hover{border-color:var(--adc)}
.eq-row b{display:block;font-weight:600;font-size:.94rem}
.eq-row small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.eq-row em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--muted)}
.eq-row input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-family:'IBM Plex Mono',monospace;font-weight:600;text-align:center}
.b-equip h4{margin-top:16px}
.eq-tot{font-weight:700;border-bottom:0!important;border-top:1px solid var(--line);padding-top:8px!important;margin-top:2px}

/* do the math */
.math{margin-top:30px;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:#fff}
.math-head{padding:22px 24px 18px;background:var(--ink);color:#fff}
.math-head .eyebrow{color:#FF8A4C}.math-head .eyebrow::before{background:#FF8A4C}
.math-head h3{font-size:1.5rem;margin:8px 0 8px;color:#fff}
.math-head p{margin:0;color:#cfe0e9;max-width:78ch;font-size:1rem}
.math-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0}
.math-in{padding:20px 22px;border-right:1px solid var(--line);background:var(--paper)}
.math-side{margin-bottom:16px}
.math-side h4{font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;margin:0 0 8px;padding-bottom:5px;border-bottom:2px solid var(--line)}
.math-side.them h4{color:var(--muted)}
.math-side.us h4{color:var(--adc);border-bottom-color:var(--adc)}
.math-in label{display:block;margin-bottom:12px;font-weight:600;font-size:.95rem}
.math-in label span{display:flex;align-items:center;gap:6px;margin-top:5px;font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--muted)}
.math-in input,.math-in select{flex:1;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1rem;color:var(--ink);background:#fff}
.math-note{font-size:.82rem;color:var(--muted);margin:10px 0 0}
.math-out{padding:22px 24px}
.mtable{width:100%;border-collapse:collapse;font-size:1rem}
.mtable th,.mtable td{padding:11px 10px;text-align:right;border-bottom:1px solid var(--line)}
.mtable th:first-child,.mtable td:first-child{text-align:left;color:var(--muted);font-weight:600}
.mtable th{font-family:'Archivo',sans-serif;font-size:.9rem;color:var(--ink)}
.mtable th:last-child{color:var(--adc)}
.mtable td:last-child{font-family:'IBM Plex Mono',monospace;font-weight:600}
.mtable td:nth-child(2){font-family:'IBM Plex Mono',monospace;color:var(--ink-soft)}
.mtable tr.tot td{border-top:2px solid var(--ink);font-size:1.1rem;font-weight:700}
.mtable tr.sep td{background:var(--ink);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.04em;text-align:left;padding:8px 10px}
.mtable tr.save td{background:#EAF6EE;color:var(--green);font-family:'Archivo',sans-serif;font-weight:800;text-align:center;border-bottom:0}
.mtable tr.save.even td{background:var(--paper);color:var(--ink-soft);font-family:'Barlow',sans-serif;font-weight:600;font-size:.92rem;text-align:left}
.math-after{margin:14px 0 0;font-size:.95rem;color:var(--ink-soft)}
.math-why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.math-why div{padding:18px 20px;border-left:1px solid var(--line)}
.math-why div:first-child{border-left:0}
.math-why b{display:block;font-family:'Archivo',sans-serif;font-size:1rem;margin-bottom:5px}
.math-why span{font-size:.9rem;color:var(--ink-soft)}
@media (max-width:960px){.math-grid,.math-why{grid-template-columns:1fr}.math-in{border-right:0;border-bottom:1px solid var(--line)}.math-why div{border-left:0;border-top:1px solid var(--line)}.eq-row{grid-template-columns:1fr auto 58px}}
@media (max-width:620px){
  .math-out{padding:16px 12px}
  .mtable{font-size:.86rem}
  .mtable th,.mtable td{padding:9px 5px}
  .mtable tr.tot td{font-size:.95rem}
  .math-in{padding:16px 14px}
  .eq-row{grid-template-columns:1fr 54px;row-gap:2px}
  .eq-row em{grid-column:1;justify-self:start;font-size:.8rem}
  .eq-row input{grid-row:1 / span 2;grid-column:2;align-self:center}
}

.b-auto{margin:14px 0 0;padding:12px 14px;background:var(--adc-tint);border:1px solid var(--adc);border-radius:var(--radius-sm);font-size:.9rem}
.b-auto b{font-family:'Archivo',sans-serif;font-size:.9rem}
.b-auto ul{margin:6px 0 0;padding-left:18px}
.b-auto li{margin:3px 0}
.b-auto span{display:block;margin-top:8px;color:var(--muted);font-size:.82rem}

/* app section */
.appsec{background:var(--paper);border-top:1px solid var(--line)}
.appgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:26px}
.appgrid figure{margin:0;background:linear-gradient(180deg,#EEF3F6 0%,#fff 60%);border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px 12px;text-align:center}
.appgrid img{width:100%;height:auto;max-width:150px;margin:0 auto;border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:0 6px 18px rgba(14,27,36,.10)}
.appgrid figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:10px;line-height:1.3}
.appgrid figcaption b{display:block;font-family:'Archivo',sans-serif;font-size:.88rem;color:var(--ink);margin-bottom:3px}
.appgrid .watch img{max-width:118px;margin-top:16px;border-radius:20px}
.app-feat .f-media{align-items:center;justify-content:center}
@media (max-width:960px){.appgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.appgrid{grid-template-columns:repeat(2,1fr)}}

/* coverage */
#coverage{background:#fff}
.cov{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}
.cov-steps{display:grid;gap:12px}
.cs{display:grid;grid-template-columns:38px 1fr;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.cs .num{width:34px;height:34px;border-radius:50%;background:var(--adc-tint);color:var(--adc);font-family:'Archivo',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem}
.cs > div > b{display:block;font-family:'Archivo',sans-serif;font-size:1.05rem;margin-bottom:3px}
.cs p b{font-weight:700}
.cs p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.cs p.links{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.cs p.links a{display:inline-block;border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:.85rem;font-weight:600;text-decoration:none;color:var(--ink)}
.cs p.links a:hover{border-color:var(--adc);color:var(--adc)}
.cov-side{border:1px solid var(--line);border-top:5px solid var(--adc);border-radius:var(--radius);padding:20px 22px;background:var(--paper);position:sticky;top:90px}
.cov-side h3{font-size:1.15rem;margin-bottom:8px}
.cov-side ul{margin:0;padding-left:18px;font-size:.95rem;line-height:1.45}
.cov-side li{margin:7px 0;color:var(--ink-soft)}
.cov-side li b{color:var(--ink)}
.cov-note{font-size:.9rem;color:var(--muted);margin:12px 0 14px;padding-top:12px;border-top:1px dotted var(--line)}
@media (max-width:960px){.cov{grid-template-columns:1fr}.cov-side{position:static}}

.k.soon-k{background:var(--gold);color:var(--ink)}
.soon{background:var(--adc-tint);border-left:3px solid var(--adc);padding:10px 14px;border-radius:6px;margin-top:12px!important;font-weight:500!important}

/* quote modal */
.qmodal{position:fixed;inset:0;background:rgba(14,27,36,.6);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;z-index:200;overflow:auto}
.qmodal[hidden]{display:none}
.qbox{background:#fff;border-radius:var(--radius);max-width:620px;width:100%;padding:26px 26px 22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:auto}
.qclose{position:absolute;right:14px;top:10px;background:none;border:0;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.qclose:hover{color:var(--ink)}
.qbox h3{font-size:1.4rem;margin-bottom:4px}
.qsub{color:var(--muted);font-size:.95rem;margin:0 0 16px;max-width:52ch}
#qform label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:12px}
#qform input,#qform select,#qform textarea{width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font:400 1rem/1.3 'Barlow',sans-serif;color:var(--ink);background:#fff}
#qform input:focus,#qform select:focus,#qform textarea:focus{outline:2px solid var(--adc);outline-offset:1px;border-color:var(--adc)}
#qform input.bad{border-color:var(--red);background:#FFF6F6}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#qhp{position:absolute;left:-9999px;width:1px;height:1px}
.qbuild{background:var(--adc-tint);border-radius:var(--radius-sm);padding:10px 14px;font-size:.88rem;margin-bottom:14px}
.qbuild b{display:block;font-family:'Archivo',sans-serif;font-size:.9rem;margin-bottom:2px}
.qbuild span{color:var(--ink-soft);white-space:pre-line}
.qactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.qactions .btn{padding:12px 20px}
.qnote{font-size:.8rem;color:var(--muted);margin:12px 0 0}
.qmsg{margin:12px 0 0;padding:11px 14px;border-radius:var(--radius-sm);font-weight:600;font-size:.95rem}
.qmsg.ok{background:#EAF6EE;color:var(--green)}
.qmsg.err{background:#FDECEC;color:var(--red)}
@media (max-width:620px){.qrow{grid-template-columns:1fr}.qbox{padding:22px 18px 18px}}

/* NOTE: never put overflow-x:hidden on body — it silently disables position:sticky.
   Wide blocks clip themselves instead (see .lineup, .cmp). */
.lineup,.cmp-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:700px){
  footer .f-grid{grid-template-columns:1fr;gap:22px}
  footer a,footer p{word-break:break-word;overflow-wrap:anywhere}
  .f-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* do-the-math attention band */
.mathband{background:var(--ink);color:#fff;border-top:4px solid var(--adc)}
.mathband .wrap{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding-top:30px;padding-bottom:30px}
.mb-kicker{display:inline-block;background:var(--adc);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:10px}
.mathband h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 8px}
.mathband p{margin:0;color:#C9D6DE;font-size:1rem;max-width:74ch}
.mb-cta{text-align:center}
.mb-cta .btn{font-size:1.05rem;padding:15px 26px}
.mb-sub{display:block;margin-top:8px;font-size:.82rem;color:#8FA3B0}
@media (max-width:820px){.mathband .wrap{grid-template-columns:1fr;gap:16px}.mb-cta{text-align:left}}

.eq-row.locked{opacity:.55;background:var(--paper)}
.eq-row.locked input{background:var(--paper);cursor:not-allowed}
.eq-lock{display:block;color:var(--red)!important;font-weight:600;margin-top:3px}

/* already on Alarm.com — switching */
.switchsec{background:var(--paper);border-top:1px solid var(--line)}
.sw-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
.sw-steps{display:grid;gap:12px}
.sw{display:grid;grid-template-columns:38px 1fr;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.sw .n{width:34px;height:34px;border-radius:50%;background:var(--adc-tint);color:var(--adc);font-family:'Archivo',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center}
.sw > div > b{display:block;font-family:'Archivo',sans-serif;font-size:1.05rem;margin-bottom:3px}
.sw p b{font-weight:700}
.sw p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.sw-side{border:1px solid var(--line);border-top:5px solid var(--red);border-radius:var(--radius);padding:20px 22px;background:#fff}
.sw-side h3{font-size:1.15rem;margin-bottom:8px}
.sw-side p{font-size:.95rem;color:var(--ink-soft);margin:0 0 10px}
.sw-warn{font-family:'Archivo',sans-serif;color:var(--ink)!important;margin-bottom:4px!important}
.sw-side ul{margin:0 0 12px;padding-left:18px;font-size:.93rem;line-height:1.45}
.sw-side li{margin:6px 0;color:var(--ink-soft)}
.sw-note{padding-top:10px;border-top:1px dotted var(--line);font-size:.9rem;color:var(--muted)!important}
.sw-cost{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.sw-cost div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.sw-cost b{display:block;font-family:'Archivo',sans-serif;font-size:1rem;margin-bottom:5px;color:var(--adc)}
.sw-cost span{font-size:.93rem;color:var(--ink-soft)}
@media (max-width:960px){.sw-grid,.sw-cost{grid-template-columns:1fr}}

/* the wordmark was getting lost beside a long nav */
header.site .brand{flex:none}
.brand-logo{height:56px}
@media (max-width:1200px){ .brand-logo{height:46px} }
@media (max-width:1080px){ .brand-logo{height:40px} .nav-links{gap:8px} .nav-links a{font-size:.8rem} header.site .btn-adc{padding:8px 11px;font-size:.84rem} }
@media (max-width:1120px) and (min-width:961px){ .nav-links a[href*='your-system'],.nav-links a[href*='manuals']{display:none} }
@media (max-width:960px){ .brand-logo{height:44px} }

.qmore{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:14px;background:var(--paper)}
.qmore summary{cursor:pointer;font-weight:700;font-size:.92rem;font-family:'Archivo',sans-serif}
.qmore summary span{font-family:'Barlow',sans-serif;font-weight:500;color:var(--muted);font-size:.84rem}
.qmore-in{padding-top:12px}
.qmore-in label{font-size:.82rem}
.qtip{margin:2px 0 4px;font-size:.82rem;color:var(--muted)}
.qquebec{background:#FDECEC;color:var(--red);border-radius:var(--radius-sm);padding:9px 12px;font-size:.88rem;font-weight:600;margin:-4px 0 12px}

/* anchor links were landing under the sticky header */
section[id], div[id]{scroll-margin-top:96px}
#build,#math,#switch,#plans,#cameras,#app,#indigo,#coverage,#business,#systems,#faq,#contact,#new{scroll-margin-top:100px}
@media (max-width:960px){ section[id],div[id]{scroll-margin-top:88px} }
.b-switch{margin:10px 0 0!important;padding:9px 13px;background:#fff;border-left:3px solid var(--adc);border-radius:var(--radius-sm);font-size:.92rem}
.b-switch a{font-weight:700;color:var(--adc)}
.b-opts legend #planHint{font-family:'Barlow',sans-serif;font-weight:500;color:var(--muted);font-size:.85rem}

.vid-silent{margin:6px 0 0;font-size:.82rem;color:var(--muted);text-align:right}

.cs p + p,.sw p + p{margin-top:8px}

.xlinks{background:var(--paper);border-top:1px solid var(--line);padding:26px 0}
.xlink{margin:0;font-size:1rem;color:var(--ink-soft);max-width:80ch}
.xlink a{color:var(--adc);font-weight:600}
.nav-links a[aria-current=page]{color:var(--adc)}

/* manuals */
.man-g{font-family:'Archivo',sans-serif;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--adc);margin:24px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.man-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.man{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:#fff}
.man b{display:block;font-family:'Archivo',sans-serif;font-size:1rem}
.man span{font-size:.9rem;color:var(--muted)}
.man .btn{padding:9px 14px;font-size:.88rem;white-space:nowrap}
.man-help{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center;margin-top:26px;background:var(--adc-tint);border-radius:var(--radius);padding:20px 22px}
.man-help b{font-family:'Archivo',sans-serif;font-size:1.15rem}
.man-help p{margin:5px 0 0;font-size:.95rem;color:var(--ink-soft)}
.man-cta{display:flex;flex-direction:column;gap:9px}
.man-legal{margin-top:18px;font-size:.82rem;color:var(--muted)}
@media (max-width:820px){.man-grid,.man-help{grid-template-columns:1fr}}

/* running total on phones, where the summary sits below the picker */
.b-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:#fff;display:none;align-items:center;gap:14px;padding:11px 16px;box-shadow:0 -6px 20px rgba(0,0,0,.22)}
.b-bar.show{display:flex}
.b-bar .amt{font-family:'IBM Plex Mono',monospace;font-size:1.3rem;font-weight:600;line-height:1}
.b-bar .lbl{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#9FB1BD;display:block;margin-bottom:2px}
.b-bar .btn{margin-left:auto;padding:11px 16px;font-size:.92rem;white-space:nowrap}
@media (min-width:961px){ .b-bar{display:none!important} }

/* ============ mobile builder wizard ============ */
.wz-head,.wz-foot,.wz-review,.wz-restored{display:none}
@media (max-width:960px){
  .builder.wizard .b-grid{display:block}
  .builder.wizard .b-sum{display:none}          /* the review step replaces it */
  .builder.wizard .b-head p{display:none}
  .builder.wizard .b-head .b-switch{display:block}
  .builder.wizard .b-opts{padding-bottom:96px}
  .builder.wizard fieldset{border:0;padding:0;margin:0}
  .builder.wizard legend{font-size:1.15rem;margin-bottom:12px}

  .wz-head{display:block;position:sticky;top:64px;z-index:30;background:#fff;padding:12px 18px 10px;border-bottom:1px solid var(--line)}
  .wz-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
  .wz-bar i{display:block;height:100%;width:20%;background:var(--adc);border-radius:3px;transition:width .28s ease}
  .wz-meta{display:flex;align-items:center;gap:12px;margin-top:9px}
  .wz-back{background:none;border:0;font:600 .92rem 'Barlow',sans-serif;color:var(--adc);padding:4px 0;cursor:pointer}
  .wz-label{font:700 .82rem/1 'Archivo',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-left:auto}
  .wz-done{display:flex;gap:7px;overflow-x:auto;margin-top:9px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .wz-chip{flex:none;max-width:62vw;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer}
  .wz-chip span{display:block;font:700 .68rem/1 'Archivo',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--adc)}
  .wz-chip em{display:block;font-style:normal;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .wz-foot{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;z-index:30;background:var(--ink);padding:11px 16px}
  .wz-tot-l{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#9FB1BD}
  .wz-tot-v{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;color:#fff}
  .wz-next{margin-left:auto;padding:13px 20px;font-size:1rem}
  .wz-next[disabled]{opacity:.45}
  .b-bar{display:none!important}                 /* the wizard footer replaces the old bar */

  .wz-review{display:block;padding-top:4px}
  .wz-h{font-family:'Archivo',sans-serif;font-size:1rem;margin:18px 0 8px}
  .wz-money{background:var(--ink);color:#fff;border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
  .wz-money .l{display:block;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:#9FB1BD}
  .wz-money .v{display:block;font-family:'IBM Plex Mono',monospace;font-size:2.2rem;line-height:1.1;margin:2px 0 4px}
  .wz-money .s{display:block;font-size:.82rem;color:#C4D0D8}
  .wz-lines div{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;padding:7px 0;border-bottom:1px dotted var(--line)}
  .wz-eq,.wz-inc{margin:0;padding-left:18px;font-size:.93rem;line-height:1.45}
  .wz-inc li.h{list-style:none;margin-left:-18px;font:700 .72rem/1 'Archivo',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--adc);margin-top:12px}
  .wz-note{font-size:.82rem;color:var(--muted)}
  .wz-acts{display:grid;gap:9px;margin-top:18px}
  .wz-acts .btn{width:100%;padding:14px}
  .wz-restored{display:block;background:var(--adc-tint);border-left:3px solid var(--adc);margin:0;padding:10px 16px;font-size:.9rem}
  .wz-restored button{background:none;border:0;color:var(--adc);font-weight:700;text-decoration:underline;cursor:pointer;font-size:.9rem}
}

/* manuals — brand lists with a filter */
.man-find{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.man-find label{font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem}
.man-find input{flex:1;min-width:240px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;font:400 1rem 'Barlow',sans-serif}
.man-find input:focus{outline:2px solid var(--adc);outline-offset:1px;border-color:var(--adc)}
.man-count{font-size:.86rem;color:var(--muted)}
.man-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.man-jump a{font-size:.82rem;font-weight:600;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 11px;text-decoration:none}
.man-jump a:hover{border-color:var(--adc);color:var(--adc)}
.man-brand{margin-top:26px}
.man-brand h3{font-family:'Archivo',sans-serif;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);padding-bottom:7px;border-bottom:2px solid var(--line)}
.man-brand h3 em{font-style:normal;font-size:.78rem;color:var(--muted);margin-left:8px}
.man-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.man-list li{margin:0}
.man-list a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.95rem;line-height:1.3}
.man-list a:hover{border-color:var(--adc);background:var(--adc-tint)}
.pdf{flex:none;background:var(--red);color:#fff;font:700 .62rem/1 'Archivo',sans-serif;letter-spacing:.06em;padding:4px 6px;border-radius:3px}
.man-none{background:var(--adc-tint);border-left:4px solid var(--adc);padding:14px 18px;border-radius:var(--radius-sm);font-weight:600}
@media (max-width:820px){.man-list{grid-template-columns:1fr}}


/* ===== conversion pack additions ===== */
/* accuratesecurity.ca/alarm-com — additions for the entry router, the local block and the mobile CTA bar.
   Append to css/ohs.css, or link after it. Uses existing tokens only: --adc, --red, --ink,
   --muted, --line, --paper, --radius, --shadow. No overflow-x on any ancestor: sticky lives here. */

/* ---------------------------------------------------------------- hero strap */
.hero-strap{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.02rem,1.9vw,1.24rem);line-height:1.3;
  color:var(--ink);margin:4px 0 12px;max-width:34ch;
}
.hero-strap::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--adc);margin-top:10px;
}

/* ------------------------------------------------------- entry price router */
.entry{padding:52px 0 46px;background:#fff;border-bottom:1px solid var(--line)}
.entry h2 em{color:var(--adc);font-style:normal}
.entry-sub{color:var(--muted);font-size:1.05rem;max-width:74ch;margin:0 0 26px}

.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
@media (max-width:860px){ .entry-grid{grid-template-columns:1fr} }

.entry-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 22px;background:#fff;position:relative;
}
.entry-card.entry-adc{border-color:var(--adc);box-shadow:0 10px 30px rgba(242,94,15,.10)}
.entry-card.entry-fa{background:var(--paper)}

.entry-tag{
  display:inline-block;align-self:flex-start;
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:4px;margin-bottom:12px;
}
.entry-fa .entry-tag{background:var(--red);color:#fff}
.entry-adc .entry-tag{background:var(--adc);color:#fff}

.entry-card h3{font-size:1.24rem;margin:0 0 14px;line-height:1.25}

.entry-price{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.entry-price b{
  font-family:'Archivo',sans-serif;font-weight:800;line-height:1;
  font-size:clamp(2.3rem,5vw,3rem);letter-spacing:-.02em;
}
.entry-fa .entry-price b{color:var(--red)}
.entry-adc .entry-price b{color:var(--adc)}
.entry-price span{font-weight:600;color:var(--muted);font-size:.98rem}
.entry-then{margin:0 0 16px;font-size:.92rem;color:var(--muted)}

.entry-list{list-style:none;margin:0 0 20px;padding:0;flex:1}
.entry-list li{
  position:relative;padding-left:22px;margin:0 0 8px;
  font-size:.95rem;line-height:1.45;
}
.entry-list li::before{
  content:"✓";position:absolute;left:0;top:0;font-weight:800;font-size:.86rem;
}
.entry-fa .entry-list li::before{color:var(--red)}
.entry-adc .entry-list li::before{color:var(--adc)}

.entry-card .btn{align-self:flex-start}
.entry-note{margin:10px 0 0;font-size:.84rem;color:var(--muted)}

.entry-rule{
  margin:24px 0 0;padding:16px 18px;border-left:4px solid var(--ink);
  background:var(--paper);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem;line-height:1.55;max-width:none;
}
.entry-rule b{display:block;margin-bottom:4px}

/* ------------------------------------------------------------- local block */
.localsec{padding:56px 0;background:var(--ink);color:#fff}
.localsec .eyebrow{color:var(--adc)}
.localsec h2{color:#fff;max-width:20ch}
.localsec .sub{color:#C3D0D8;max-width:74ch;margin-bottom:28px}

.local-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px 26px;margin:0 0 26px;
}
.local-facts div{border-top:2px solid rgba(255,255,255,.16);padding-top:12px}
.local-facts b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:1.4rem;color:var(--adc);letter-spacing:-.01em;margin-bottom:5px;
}
.local-facts span{display:block;font-size:.92rem;line-height:1.5;color:#C3D0D8}

.local-close{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.05rem,2.1vw,1.3rem);line-height:1.38;
  color:#fff;max-width:52ch;margin:0 0 22px;
}
.localsec .btn-ghost{color:#fff;border-color:#fff}
.localsec .btn-ghost:hover{background:#fff;color:var(--ink)}

/* --------------------------------------------- sticky mobile call/quote bar */
.mcta{display:none}
@media (max-width:760px){
  .mcta{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(14,27,36,.14);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mcta a{
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:14px 8px;font-family:'Archivo',sans-serif;font-weight:800;
    font-size:.96rem;text-decoration:none;
  }
  .mcta a.m-call{color:var(--ink)}
  .mcta a.m-quote{background:var(--adc);color:#fff}
  body{padding-bottom:58px}
  /* The builder brings its own sticky bottom bar on mobile. One bar at a time. */
  body.in-builder .mcta{display:none}
  body.in-builder{padding-bottom:0}
}

/* --------------------------------------------------- guard response section */
.guard{padding:52px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.guard .sub{max-width:76ch}

.guard-math{display:grid;grid-template-columns:1fr 54px 1fr;gap:12px;align-items:stretch;margin:6px 0 22px}
@media (max-width:820px){ .guard-math{grid-template-columns:1fr;gap:10px} }

.g-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px}
.g-card.g-us{border-color:var(--adc);box-shadow:0 10px 28px rgba(242,94,15,.10)}
.g-tag{display:inline-block;font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:4px;margin-bottom:12px}
.g-us .g-tag{background:var(--adc);color:#fff}
.g-them .g-tag{background:var(--ink);color:#fff}
.g-num{font-family:'Archivo',sans-serif;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.6rem,6vw,3.4rem)}
.g-us .g-num{color:var(--adc)}
.g-them .g-num{color:var(--ink)}
.g-lbl{margin:6px 0 14px;font-size:.92rem;color:var(--muted)}
.g-card ul{list-style:none;margin:0;padding:0}
.g-card li{position:relative;padding-left:18px;margin:0 0 8px;font-size:.94rem;line-height:1.45}
.g-card li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%}
.g-us li::before{background:var(--adc)}
.g-them li::before{background:#9FB0BA}

.g-vs{display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;
  font-weight:800;font-size:1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:820px){ .g-vs{padding:2px 0} }

.g-real{background:#fff;border-left:4px solid var(--ink);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 18px;margin:0 0 16px}
.g-real h3{font-size:1.06rem;margin:0 0 5px}
.g-real p{margin:0;font-size:.96rem;line-height:1.55}

.g-fine{font-size:.88rem;line-height:1.6;color:var(--muted);max-width:none;
  border-top:1px solid var(--line);padding-top:14px;margin:0 0 18px}
.g-fine b{color:var(--ink)}

/* dispatch ladder inside the guard section */
.d-steps{counter-reset:d;list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.d-steps li{counter-increment:d;position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 16px 14px 16px;font-size:.94rem;line-height:1.45}
.d-steps li::before{content:counter(d);display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--adc);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.82rem;margin-bottom:9px}
/* All four steps are the same weight. The last one used to carry an orange border, which read as a
   mistake rather than as emphasis — the bold sentence inside it does that job on its own. */
.d-h3{font-size:1.14rem;margin:0 0 12px}

/* ------------------------------------------------ "come and see us" in local */
.local-door{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 22px}
.local-door h3{color:#fff;font-size:1.1rem;margin:0 0 8px}
.local-door p{color:#D5DEE4;font-size:.95rem;line-height:1.6;margin:0 0 10px}
.local-door p:last-child{margin-bottom:0}

/* ------------------------------------------------------ before-you-sign traps */
.traps{padding:52px 0;background:#fff}
.traps .sub{max-width:76ch;margin-bottom:24px}
.trap-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.trap{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:var(--paper)}
.trap h3{font-size:1.06rem;margin:0 0 8px;line-height:1.3}
.trap p{font-size:.93rem;line-height:1.55;margin:0 0 9px}
.trap p:last-child{margin-bottom:0}
.t-ask{color:var(--muted);font-weight:600}
.t-ask em{color:var(--ink);font-style:italic}
.t-us{border-left:3px solid var(--adc);background:#fff;border-radius:0 6px 6px 0;padding:9px 12px}
.t-close{margin-top:26px;border-top:2px solid var(--ink);padding-top:20px}
.t-close h3{font-size:1.2rem;margin:0 0 6px}
.t-close p{max-width:74ch;margin:0 0 16px}

/* --------------------------------------------------- "have you tried reaching them" */
.askreach{padding:54px 0;background:var(--paper);border-top:1px solid var(--line)}
.askreach h2{max-width:24ch;margin-bottom:14px}
.askreach .rq{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.08rem;margin:0 0 10px}
.askreach .rbody{font-size:1rem;line-height:1.65;max-width:72ch;margin:0 0 14px}
.askreach .rstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:14px;margin:22px 0}
.askreach .rstrip div{background:#fff;border:1px solid var(--line);border-left:4px solid var(--adc);
  border-radius:0 var(--radius) var(--radius) 0;padding:15px 17px}
.askreach .rstrip b{display:block;font-family:'Archivo',sans-serif;font-size:1rem;margin-bottom:6px}
.askreach .rstrip span{display:block;font-size:.92rem;line-height:1.5;color:#33454F}
.askreach .rclose{font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2.3vw,1.42rem);line-height:1.35;max-width:46ch;margin:0 0 20px}

/* ======================================================= support hub (support.php) */
.sup-hero{padding:44px 0 34px;background:var(--ink);color:#fff}
.sup-hero .eyebrow{color:var(--adc)}
.sup-hero h1{color:#fff;font-size:clamp(1.9rem,5vw,2.7rem);margin:0 0 10px}
.sup-hero .lede{color:#C3D0D8;max-width:74ch;margin:0}
.sup-hero a{color:#fff;text-decoration:underline}

.sup-tiles{padding:26px 0;background:#fff;border-bottom:1px solid var(--line)}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px}
.tile{display:block;border:1px solid var(--line);border-left:4px solid var(--adc);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;background:var(--paper);
  text-decoration:none;color:var(--ink);transition:background .15s,transform .15s}
.tile:hover{background:#fff;transform:translateY(-2px)}
.tile b{display:block;font-family:'Archivo',sans-serif;font-size:1rem;margin-bottom:4px}
.tile span{display:block;font-size:.87rem;line-height:1.45;color:var(--muted)}

.sup-form{padding:44px 0;background:var(--paper)}
.sup-form .sub{max-width:74ch}
.sup-form .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media (max-width:700px){.sup-form .fgrid{grid-template-columns:1fr}}
.sup-form .full{grid-column:1/-1}
.sup-form label{display:block;font-weight:600;font-size:.88rem;margin-bottom:4px}
.sup-form input[type=text],.sup-form input[type=email],.sup-form input[type=tel],
.sup-form select,.sup-form textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:7px;font:400 .96rem 'Barlow',system-ui,sans-serif;background:#fff;color:var(--ink)}
.sup-form textarea{min-height:110px;resize:vertical}
.sup-form .hint{font-size:.83rem;color:var(--muted);margin:5px 0 0}
.sup-form .hp{position:absolute;left:-9999px}
.extras{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:12px 16px}
.extras summary{font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer}
.extras[open] summary{margin-bottom:8px}
.sup-ok{border-left:4px solid var(--green);background:#F1F8F4;border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px}
.sup-ok h3{margin:0 0 6px;font-size:1.2rem}
.sup-err{border-left:4px solid var(--red);background:#FDF1F1;border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px;margin-bottom:16px}
.sup-err ul{margin:6px 0 0;padding-left:20px;font-size:.92rem}

.sup-block{padding:46px 0;background:#fff}
.sup-block.alt{background:var(--paper)}
.sup-block .sub{max-width:76ch}
.sup-block .plain{list-style:none;margin:14px 0 18px;padding:0;max-width:76ch}
.sup-block .plain li{position:relative;padding-left:20px;margin:0 0 10px;font-size:.96rem;line-height:1.55}
.sup-block .plain li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--adc)}

.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media (max-width:820px){.app-grid{grid-template-columns:1fr}}
.app-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:var(--paper)}
.app-card.app-adc{border-color:var(--adc)}
.app-card.app-fa{border-color:var(--red)}
.app-tag{display:inline-block;font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:4px;margin-bottom:10px;color:#fff}
.app-adc .app-tag{background:var(--adc)}
.app-fa .app-tag{background:var(--red)}
.app-for{font-weight:600;font-size:.95rem;margin:0 0 10px}
.app-card ul{list-style:none;margin:0 0 16px;padding:0}
.app-card li{position:relative;padding-left:18px;margin:0 0 6px;font-size:.93rem}
.app-card li::before{content:"✓";position:absolute;left:0;font-weight:800;font-size:.84rem}
.app-adc li::before{color:var(--adc)}
.app-fa li::before{color:var(--red)}
.app-links{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.app-note{font-size:.85rem;color:var(--muted);margin:0;line-height:1.5}

.callout-hard{border-left:4px solid var(--red);background:#FDF1F1;
  border-radius:0 var(--radius) var(--radius) 0;padding:15px 18px;margin:0 0 20px}
.callout-hard b{display:block;font-family:'Archivo',sans-serif;font-size:1.05rem;margin-bottom:5px}
.callout-hard p{margin:0;font-size:.95rem;line-height:1.55}

.steps-num{counter-reset:s;list-style:none;margin:0 0 18px;padding:0;max-width:78ch}
.steps-num li{counter-increment:s;position:relative;padding-left:40px;margin:0 0 13px;
  font-size:.97rem;line-height:1.55}
.steps-num li::before{content:counter(s);position:absolute;left:0;top:0;width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--adc);
  color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:.85rem}

.voip-risks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px;margin:18px 0}
.voip-risks div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.sup-block.alt .voip-risks div{background:#fff}
.voip-risks b{display:block;font-family:'Archivo',sans-serif;font-size:1rem;margin-bottom:5px;color:var(--red)}
.voip-risks span{display:block;font-size:.91rem;line-height:1.5;color:#33454F}

/* ------------------------------------ urgent routing strip, top of support.php */
.sup-urgent{padding:26px 0 24px;background:#FDF1F1;border-bottom:3px solid var(--red)}
.sup-urgent h2{font-size:1.32rem;margin:0 0 14px;color:var(--red)}
.urgent-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:780px){.urgent-grid{grid-template-columns:1fr}}
.urg{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.urg.urg-now{border-color:var(--red);border-left:5px solid var(--red)}
.urg.urg-tech{border-left:5px solid var(--adc)}
.urg b{display:block;font-family:'Archivo',sans-serif;font-size:.97rem;line-height:1.35;margin-bottom:9px}
.urg-tel{display:inline-block;font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.28rem,3.1vw,1.62rem);text-decoration:none;margin:0 14px 7px 0}
.urg-now .urg-tel{color:var(--red)}
.urg-tech .urg-tel{color:var(--adc)}
.urg-tel.alt{font-size:1.06rem;opacity:.85}
.urg-tel:hover{text-decoration:underline}
.urg p{margin:6px 0 0;font-size:.9rem;line-height:1.5;color:#33454F}
.urg-note{margin:14px 0 0;font-size:.89rem;line-height:1.55;color:#6B4145;max-width:80ch}

/* ================================================================== about page */
.ab-hero{padding:46px 0 36px;background:var(--ink);color:#fff}
.ab-hero .eyebrow{color:var(--adc)}
.ab-hero h1{color:#fff;font-size:clamp(1.9rem,5vw,2.8rem);max-width:18ch;margin:0 0 12px}
.ab-hero .lede{color:#C3D0D8;max-width:74ch;margin:0}

.ab-answer{padding:30px 0;background:var(--paper)}
.ab-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--adc);
  border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px}
.ab-card h2{font-size:1.5rem;margin:0 0 12px}
.ab-card p{font-size:1rem;line-height:1.65;margin:0 0 12px;max-width:78ch}
.ab-check{border-top:1px solid var(--line);padding-top:14px;margin-bottom:0!important}

.ab-story{padding:44px 0;background:#fff}
.ab-story h2{max-width:22ch;margin-bottom:14px}
.ab-story p{font-size:1rem;line-height:1.7;max-width:74ch;margin:0 0 14px}

.ab-facts{padding:44px 0;background:var(--paper);border-top:1px solid var(--line)}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.fact-grid div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.fact-grid b{display:block;font-family:'Archivo',sans-serif;font-size:1.06rem;color:var(--adc);
  margin-bottom:6px;letter-spacing:-.01em}
.fact-grid span{display:block;font-size:.92rem;line-height:1.55;color:#33454F}

.ab-family{padding:44px 0;background:#fff}
.ab-family .sub{max-width:76ch}
.fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px;margin:18px 0}
.fam-grid div{border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;background:var(--paper)}
.fam-grid b{display:block;font-family:'Archivo',sans-serif;font-size:.98rem;margin-bottom:4px}
.fam-grid span{display:block;font-size:.88rem;line-height:1.5;color:var(--muted)}
.ab-family p:last-child{max-width:76ch;font-size:.98rem;line-height:1.65}

.ab-people{padding:44px 0;background:var(--paper);border-top:1px solid var(--line)}
.ppl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:18px}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.person b{display:block;font-family:'Archivo',sans-serif;font-size:1.14rem;margin-bottom:2px}
.person .role{display:block;font-size:.86rem;font-weight:600;color:var(--adc);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.person p{margin:0;font-size:.94rem;line-height:1.6}

.ab-promises{padding:44px 0;background:#fff}
.ab-promises .plain{list-style:none;margin:16px 0 0;padding:0;max-width:80ch}
.ab-promises .plain li{position:relative;padding-left:24px;margin:0 0 13px;font-size:.98rem;line-height:1.6}
.ab-promises .plain li::before{content:"✕";position:absolute;left:0;top:0;color:var(--red);
  font-weight:800;font-size:.92rem}

.ab-cta{padding:44px 0;background:var(--ink);color:#fff}
.ab-cta h2{color:#fff;max-width:24ch;margin-bottom:10px}
.ab-cta p{color:#C3D0D8;max-width:70ch;margin:0 0 20px;line-height:1.65}
.ab-cta .btn-ghost{color:#fff;border-color:#fff}
.ab-cta .btn-ghost:hover{background:#fff;color:var(--ink)}

/* building photo on the about page */
.ab-photo{margin:20px 0 0;display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:18px;
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px}
@media (max-width:720px){.ab-photo{grid-template-columns:1fr}}
.ab-photo img{width:100%;height:auto;max-width:100%;display:block;border-radius:6px;
  border:1px solid var(--line)}
.ab-photo figcaption{font-size:.93rem;line-height:1.6;color:#33454F;margin:0}
.ab-photo figcaption b{display:block;font-family:'Archivo',sans-serif;font-size:1rem;color:var(--ink);
  margin-bottom:5px}

/* step-up line inside the entry router's Alarm.com card */
.entry-step{font-size:.9rem;line-height:1.55;margin:0 0 18px;padding:11px 13px;
  background:var(--paper);border-radius:6px;border-left:3px solid var(--adc)}

/* ============================================== existing-system panel picker */
.picker{padding:48px 0 44px;background:#fff;border-bottom:1px solid var(--line)}
.picker .sub{max-width:76ch;margin-bottom:20px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:11px}
.pk{display:block;width:100%;text-align:left;cursor:pointer;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:0 var(--radius) var(--radius) 0;padding:13px 15px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink);
  line-height:1.3;transition:border-color .15s,background .15s,transform .15s}
.pk:hover{background:#fff;border-left-color:var(--adc);transform:translateY(-2px)}
.pk.on{background:#fff;border-color:var(--adc);border-left-color:var(--adc);
  box-shadow:0 8px 22px rgba(242,94,15,.14)}
.pk small{display:block;margin-top:5px;font-family:'Barlow',system-ui,sans-serif;font-weight:400;
  font-size:.82rem;line-height:1.45;color:var(--muted)}
.pk-other{border-left-style:dashed}

.pick-out{margin-top:18px;background:var(--paper);border:1px solid var(--adc);
  border-radius:var(--radius);padding:22px 24px}
.po-tag{display:inline-block;background:var(--adc);color:#fff;font-family:'Archivo',sans-serif;
  font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:4px;margin-bottom:11px}
.pick-out h3{font-size:1.22rem;margin:0 0 8px}
.pick-out p{font-size:.97rem;line-height:1.6;margin:0 0 12px;max-width:78ch}
.po-price{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink)}
.po-price b{color:var(--adc);font-size:1.3rem}
.po-fine{font-size:.85rem;color:var(--muted);margin:12px 0 0!important}

.pick-note{margin:22px 0 0;padding:14px 17px;background:var(--paper);
  border-left:4px solid var(--ink);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.93rem;line-height:1.6;max-width:none}

/* ===================== "what do you already have" lookup, inside the builder */
.haveit{background:#fff;border:1px solid var(--adc);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 22px}
.hv-tag{display:inline-block;background:var(--adc);color:#fff;font-family:'Archivo',sans-serif;
  font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:4px;margin-bottom:10px}
.haveit h4{font-family:'Archivo',sans-serif;font-size:1.12rem;margin:0 0 6px;line-height:1.3}
.hv-head p{font-size:.93rem;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:74ch}
.hv-row{margin:0 0 13px}
.hv-row label{display:block;font-weight:600;font-size:.86rem;margin-bottom:5px}
.hv-row input[type=text],.hv-row select{width:100%;max-width:440px;padding:10px 12px;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);
  font:400 .98rem 'Barlow',system-ui,sans-serif}
.hv-row input[type=text]:focus,.hv-row select:focus{outline:2px solid var(--adc);outline-offset:1px}

.hv-out{margin:16px 0 0;background:var(--paper);border-left:4px solid var(--adc);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 18px}
.hv-o-tag{display:inline-block;font-family:'Archivo',sans-serif;font-size:.62rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--adc);margin-bottom:7px}
.hv-out h5{font-family:'Archivo',sans-serif;font-size:1.06rem;margin:0 0 6px;line-height:1.3}
.hv-out p{font-size:.93rem;line-height:1.55;margin:0 0 9px;max-width:76ch}
.hv-out p:last-child{margin-bottom:0}
.hv-prov{background:#fff;border-radius:6px;padding:10px 12px;border:1px solid var(--line)}
.hv-set{font-weight:600;color:var(--ink)}
.hv-fine{font-size:.85rem;line-height:1.55;color:var(--muted);margin:14px 0 0}
@media (max-width:620px){ .haveit{padding:17px 16px} }

/* a plan that cannot apply to the panel the customer told us about */
/* A plan the panel cannot run is dropped from the list (index.html gatePlans) — "Show them anyway"
   puts it back, greyed, with the reason. */
.b-opts fieldset:not(.show-na) label.opt.opt-na{display:none}
.na-note{display:none;font-size:.86rem;color:var(--muted);margin:-2px 0 10px;line-height:1.45}
.b-opts fieldset[data-seg] .na-note.on{display:block}
.b-opts fieldset[data-seg="biz"] .na-note[data-grp="home"],
.b-opts fieldset[data-seg="home"] .na-note[data-grp="biz"],
.b-opts fieldset[data-seg="small"] .na-note[data-grp="biz"],
.b-opts fieldset[data-seg=""] .na-note,
.b-opts fieldset.plan-picked .na-note{display:none}
.na-toggle{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--adc);cursor:pointer;text-decoration:underline}
.opt.opt-na{opacity:.5}
.opt.opt-na:hover{opacity:.5;cursor:not-allowed}
.opt-na-why{display:block;margin-top:4px;font-family:'Barlow',system-ui,sans-serif;
  font-size:.8rem;font-style:italic;color:var(--red)}

/* ===== 19 Sep: dispatch as three bordered cards (guard / police / notify only) ===== */
.guard-math{grid-template-columns:1fr 40px 1fr 40px 1fr;gap:10px}
@media (max-width:1040px){ .guard-math{grid-template-columns:1fr;gap:8px} .g-vs{padding:2px 0} }
.g-card{border-width:2px;border-style:solid}
.g-card.g-us{border-color:var(--adc)}
.g-card.g-them{border-color:var(--ink)}
.g-card.g-none{border-color:var(--green);background:#fff}
.g-none .g-tag{background:var(--green);color:#fff}
.g-none .g-num{color:var(--green)}
.g-none li::before{background:var(--green)}

/* ===== 19 Sep: builder — steps 2–4 open once a plan is chosen (desktop; mobile has the wizard) ===== */
.b-unlock{display:none}
@media (min-width:961px){
  .builder.b-locked .b-opts > fieldset ~ fieldset{display:none}
  /* a plain line, not a boxed notice: it sits directly above the call-me box and two outlined panels
     stacked on each other was exactly the clutter this pass is meant to remove */
  .builder.b-locked .b-unlock{display:block;margin:10px 0 2px;font-size:.93rem;color:var(--muted)}
  .builder:not(.b-locked) .b-opts > fieldset ~ fieldset{animation:bOpen .35s ease}
}
@keyframes bOpen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== 19 Sep: summary card must not trap the page scroll ===== */
.b-sum{overscroll-behavior:auto}

/* 19 Sep: long CTA in the entry cards wrapped past 390px */
.entry-card .btn{white-space:normal;max-width:100%;text-align:center}

/* 19 Sep: cameras page — monthly pricing folds away until asked for */
.pricefold{margin-top:6px}
.pricefold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:2px solid var(--adc);border-radius:var(--radius);padding:15px 20px}
.pricefold > summary::-webkit-details-marker{display:none}
.pricefold > summary span{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;color:var(--ink)}
.pricefold > summary small{font-size:.9rem;color:var(--muted)}
.pricefold > summary::after{content:'+';margin-left:auto;font:800 1.5rem/1 'Archivo',sans-serif;color:var(--adc)}
.pricefold[open] > summary::after{content:'−'}
.pricefold[open] > summary{margin-bottom:18px}
.pricefold > summary:hover{background:var(--paper)}

/* unified "already have a system" answer */
.hv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;max-width:900px}
.hv-grid .hv-row input[type=text],.hv-grid .hv-row select{max-width:none}
.hv-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin:12px 0 6px}
.hv-cols.one{grid-template-columns:1fr;max-width:560px}
.hv-col{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.hv-adc{border-top:3px solid var(--adc)}
.hv-std{border-top:3px solid #c8102e}
.hv-ct{display:block;font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.hv-prices{list-style:none;margin:0 0 8px;padding:0}
.hv-prices li{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.hv-prices li:last-child{border-bottom:0}
.hv-prices li span{font-weight:600;font-size:.92rem}
.hv-prices li b{font-family:'Archivo',sans-serif;font-size:1.08rem;text-align:right}
.hv-prices li small{grid-column:1/-1;font-size:.8rem;color:var(--muted)}
.hv-out p.hv-mini{font-size:.85rem;line-height:1.5;color:var(--muted);margin:0 0 6px}
.hv-out p.hv-set{color:var(--ink)}
.hv-switch{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 14px;margin:10px 0}
.hv-switch p{margin:0;font-size:.92rem}
.hv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.hv-cta .btn{white-space:normal}
.hv-link{font-weight:600;font-size:.9rem;color:var(--adc)}
@media (max-width:760px){ .hv-grid,.hv-cols{grid-template-columns:1fr} }
.hv-cta .btn-ghost{background:transparent;border:1.5px solid var(--adc);color:var(--adc)}

/* ---- builder flow (js/flow.js) ---- */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 6px}
.seg-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;font:inherit;color:var(--ink)}
.seg-b b{font-family:'Archivo',sans-serif;font-size:1.02rem}
.seg-b small{font-size:.8rem;color:var(--muted)}
.seg-b:hover{border-color:var(--adc)}
.seg-b.on{border-color:var(--adc);background:#fff6f0;box-shadow:inset 0 0 0 1px var(--adc)}
/* no side chosen yet: just the two buttons */
.b-opts fieldset[data-seg=""] label[data-grp],
.b-opts fieldset[data-seg] .opt-h{display:none}
.b-opts fieldset[data-seg="home"] label[data-grp="biz"],
.b-opts fieldset[data-seg="small"] label[data-grp="biz"],
.b-opts fieldset[data-seg="biz"] label[data-grp="home"]{display:none}
/* one side chosen: the other two tiles fold away and the chosen one becomes a slim line with a way back */
.seg-back{display:none;background:none;border:0;padding:0 2px;font:600 .85rem 'Barlow',sans-serif;
  color:var(--adc);text-decoration:underline;cursor:pointer;justify-self:end;align-self:center}
.b-opts fieldset.seg-picked .seg{grid-template-columns:1fr auto;gap:12px;align-items:center}
.b-opts fieldset.seg-picked .seg-b:not(.on){display:none}
.b-opts fieldset.seg-picked .seg-b.on{flex-direction:row;align-items:baseline;gap:8px;padding:9px 13px}
.b-opts fieldset.seg-picked .seg-b.on small{font-size:.78rem}
.b-opts fieldset.seg-picked .seg-back{display:inline-block}
.seg-note{display:none;font-size:.88rem;color:var(--ink-soft);background:#fff6f0;border-radius:8px;padding:9px 12px;margin:0 0 8px}
.b-opts fieldset[data-seg="small"]:not(.plan-picked) .seg-note{display:block}
/* plan picked: fold to the one chosen */
/* the home-or-business / several-locations choice stays visible, so a pre-picked plan never hides it */
/* One chosen plan on screen instead of four. The others are one tap away and the button that brings them
   back sits directly underneath, so nothing is buried: this is folding, not hiding. */
.b-opts fieldset.plan-picked label[data-grp]:not(:has(input:checked)){display:none}
.plan-more{display:block;width:100%;margin:8px 0 2px;background:#fff;border:1px dashed var(--line);
  border-radius:9px;padding:9px 12px;font:600 .88rem 'Barlow',sans-serif;color:var(--adc);cursor:pointer;
  text-align:left;letter-spacing:0;text-transform:none}
.plan-more:hover{border-color:var(--adc);background:#fff6f0}
.plan-more[hidden]{display:none}
.b-opts fieldset.plan-picked .seg{margin-bottom:10px}
.b-opts fieldset.plan-picked .seg-b{padding-top:8px;padding-bottom:8px}
.plan-change,.acc-tog{margin-left:10px;background:none;border:0;padding:0;font:600 .85rem 'Barlow',sans-serif;
  color:var(--adc);text-decoration:underline;cursor:pointer;text-transform:none;letter-spacing:0}
.plan-change[hidden]{display:none}
/* desktop accordion */
.acc-tog,.acc-sum,.acc-next{display:none}
.builder.accordion .b-opts fieldset.acc{border:1px solid var(--line);border-radius:10px;padding:0 16px;margin:0 0 10px;background:#fff}
.builder.accordion .b-opts fieldset.acc > legend{float:left;width:100%;padding:14px 0;margin:0;cursor:pointer;display:flex;
  flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.builder.accordion .b-opts fieldset.acc > legend + *{clear:both}
.builder.accordion .b-opts fieldset.acc:not(.acc-open) > :not(legend){display:none}
.builder.accordion .b-opts fieldset.acc:not(.acc-open) .acc-tog{display:inline;margin-left:auto}
.builder.accordion .b-opts fieldset.acc:not(.acc-open) .acc-sum{display:inline;font:500 .88rem 'Barlow',sans-serif;
  color:var(--muted);text-transform:none;letter-spacing:0}
.builder.accordion .b-opts fieldset.acc.acc-open{border-color:var(--adc);padding-bottom:16px}
.builder.accordion .acc-open .acc-next{display:flex;justify-content:flex-end;margin-top:12px}
/* equipment groups fold */
.eq-grid .eq-g h5[role=button]{cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.eq-grid .eq-g h5[role=button]::after{content:'▾';margin-left:auto;font-size:.9rem;transition:transform .2s}
.eq-grid .eq-g.eq-shut h5[role=button]::after{transform:rotate(-90deg)}
.eq-grid .eq-g.eq-shut > :not(h5){display:none}
.eq-cnt{font:600 .75rem 'Barlow',sans-serif;color:var(--adc);text-transform:none;letter-spacing:0}
/* pop-up page */
.peek{position:fixed;inset:0;z-index:190;background:rgba(14,27,36,.62);overflow:auto;padding:24px 16px}
.peek[hidden]{display:none}
html.peek-lock,html.peek-lock body{overflow:hidden}
.peek-box{max-width:1040px;margin:0 auto;background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.peek-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;
  background:#fff;border-bottom:1px solid var(--line);padding:10px 14px}
.peek-back{background:none;border:0;font:600 .95rem 'Barlow',sans-serif;color:var(--adc);cursor:pointer;padding:6px 4px}
.peek-x{background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink);padding:0 6px}
.peek-body{padding:22px 24px}
.peek-body h2{margin-top:6px}
.peek-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:0 24px 24px}
/* .peek-back zeroes the background for the plain text link in the top bar; the footer one is a real
   button and has to get its fill back, or it is white text on white */
.peek-foot .btn.peek-back{color:#fff;background:var(--adc);box-shadow:0 6px 18px rgba(242,94,15,.30)}
.peek-full{font-weight:600;color:var(--muted)}
@media (max-width:620px){ .seg{grid-template-columns:1fr} .peek{padding:0} .peek-box{border-radius:0;min-height:100%} .peek-body{padding:18px 16px} .peek-foot{padding:0 16px 24px} }

/* locked extras: dim the row, not the upgrade offer */
.opt.off{opacity:1}
.opt.off > input,.opt.off > span:not(.opt-up),.opt.off > em{opacity:.45}
.opt-up{grid-column:2 / -1;margin-top:-2px}
.opt-up button{background:var(--adc-tint);border:1px solid var(--adc);color:var(--adc);border-radius:999px;
  padding:6px 12px;font:600 .84rem 'Barlow',sans-serif;cursor:pointer;text-align:left;line-height:1.3}
.opt-up button:hover{background:var(--adc);color:#fff}
.opt-up i{font-style:normal;font-size:.82rem;color:var(--muted)}

/* "What you get": lower tiers fold to one line */
.b-inc li.fold{list-style:none;margin:4px 0 4px -18px}
.b-inc .fold-b{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:600 .88rem 'Barlow',sans-serif;color:var(--ink);cursor:pointer}
.b-inc .fold-b:hover{border-color:var(--adc)}
.b-inc .tick{color:#1f8a4c;font-weight:800}
.b-inc .fold-t{flex:1}
.b-inc .fold-see{font-weight:600;font-size:.8rem;color:var(--adc);text-decoration:underline;white-space:nowrap}
.b-inc li.fold > ul{display:none;margin:6px 0 4px;padding-left:36px}
.b-inc li.fold.open > ul{display:block}
.b-inc li.fold > ul li{margin:3px 0;color:var(--muted)}

.wz-inc li.fold{list-style:none;margin:4px 0 4px -18px}
.wz-inc .fold-b{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:600 .88rem 'Barlow',sans-serif;color:var(--ink);cursor:pointer}
.wz-inc .fold-b:hover{border-color:var(--adc)}
.wz-inc .tick{color:#1f8a4c;font-weight:800}
.wz-inc .fold-t{flex:1}
.wz-inc .fold-see{font-weight:600;font-size:.8rem;color:var(--adc);text-decoration:underline;white-space:nowrap}
.wz-inc li.fold > ul{display:none;margin:6px 0 4px;padding-left:36px}
.wz-inc li.fold.open > ul{display:block}
.wz-inc li.fold > ul li{margin:3px 0;color:var(--muted)}

.m-nc{display:block;font:500 .75rem 'Barlow',sans-serif;color:var(--muted);letter-spacing:0}

/* between step 1 and 2: the "we can help / you know what you want" fork */
.b-help{display:none}
.builder:not(.wizard) .b-help{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
/* before a plan is chosen there is nothing to "already know", so only the way out shows */
.builder.b-locked:not(.wizard) .b-help{grid-template-columns:1fr}
.builder.b-locked:not(.wizard) .bh-b{display:none}
.bh-a,.bh-b{border-radius:10px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.bh-a{background:#fff6f0;border:1px solid var(--adc)}
.bh-b{background:#fff;border:1px dashed var(--line)}
.bh-a b,.bh-b b{display:block;font-family:'Archivo',sans-serif;font-size:.98rem;margin-bottom:4px;color:var(--ink)}
.bh-a p,.bh-b p{margin:0 0 10px;color:var(--muted)}
.bh-b p{margin:0}
.bh-b a{color:var(--adc);font-weight:600}
.bh-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.bh-btns .btn{white-space:normal;padding:10px 16px}
.bh-call{font-weight:600;color:var(--ink)}
@media (max-width:1180px){ .builder:not(.wizard) .b-help{grid-template-columns:1fr} }
/* panel rows: lighter */
#eqGrid .eq-g:first-child .eq-row small{font-size:.8rem}

/* plans: short tiles by default; the full feature lists open on request (still in the page for search) */
/* the device note explains the list, so it folds with the list */
.plans-more{display:block;margin:16px auto 0;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font:600 .92rem 'Barlow',sans-serif;color:var(--ink);cursor:pointer}
.plans-more:hover{border-color:var(--adc);color:var(--adc)}
#plans.plans-open .plans-more span{display:inline-block;transform:rotate(180deg)}

/* brand tiles now live inside the "Already have a system?" box */
/* eleven brand tiles are the right answer for someone who cannot read the label and pure noise for everyone
   else, so they fold away until asked for */
.hv-brands{margin:4px 0 6px}
.hv-or{display:block;font-weight:600;font-size:.86rem;margin:0 0 7px}
summary.hv-or{cursor:pointer;color:var(--adc);text-decoration:underline;list-style:none;padding:4px 0}
summary.hv-or::-webkit-details-marker{display:none}
summary.hv-or::after{content:' ▾';text-decoration:none;display:inline-block}
details[open] > summary.hv-or::after{content:' ▴'}
.pick-grid.pick-mini{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0}
.pick-grid.pick-mini .pk{padding:8px 10px;font-size:.86rem;min-height:0;text-align:left}
.pick-grid.pick-mini .pk small{font-size:.72rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anchor-alias{display:block;position:relative;top:-100px;height:0}

/* quote form address suggestions */
.addr-host{position:relative}
.addr-list{position:absolute;left:0;right:0;top:100%;z-index:30;list-style:none;margin:4px 0 0;padding:4px 0;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(14,27,36,.18);max-height:300px;overflow:auto}
.addr-list[hidden]{display:none}
.addr-list li{padding:8px 12px;cursor:pointer;font-size:.9rem;line-height:1.3}
.addr-list li b{display:block;font-weight:600;color:var(--ink)}
.addr-list li span{display:block;font-size:.8rem;color:var(--muted)}
.addr-list li.on,.addr-list li:hover{background:#fff6f0}
.addr-list li.addr-attr{cursor:default;font-size:.7rem;color:var(--muted);border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
.addr-list li.addr-attr:hover{background:none}
.addr-list li,.addr-list li span,.addr-list li.addr-attr{font-weight:400}.addr-list li b{font-weight:600}

.ab-social{margin:22px 0 0;background:#fff6f0;border:1px solid var(--adc);border-radius:12px;padding:18px 20px}
.ab-social > b{display:block;font-family:'Archivo',sans-serif;font-size:1.08rem;margin-bottom:4px}
.ab-social p{margin:0 0 12px;color:var(--muted)}
.ab-soc-btns{display:flex;flex-wrap:wrap;gap:10px}
.ab-soc-btns .btn{white-space:normal}
.ab-soc-btns .btn-ghost{background:#fff;border:1.5px solid var(--adc);color:var(--adc)}

/* panel lookup: plan rows open to show what is in each plan */
.hv-start{font-size:.86rem;line-height:1.45;background:#fff6f0;border-radius:6px;padding:8px 10px;margin:0 0 8px;color:var(--ink)}
.hv-prices li.hv-pl{display:block;padding:0}
.hv-pl-b{display:grid;grid-template-columns:1fr auto;gap:0 10px;width:100%;background:none;border:0;padding:7px 0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.hv-pl-b[disabled]{cursor:default}
.hv-pl-b span{font-weight:600;font-size:.92rem}
.hv-pl-b span i{font-style:normal;font-weight:600;font-size:.76rem;color:var(--adc);margin-left:6px;white-space:nowrap}
.hv-pl-b b{font-family:'Archivo',sans-serif;font-size:1.08rem;text-align:right}
.hv-pl-b small{grid-column:1/-1;font-size:.8rem;color:var(--muted)}
.hv-pl-b:hover span{color:var(--adc)}
.hv-pl-f{padding:2px 0 10px}
.hv-pl-f p{margin:0 0 4px;font-size:.82rem;font-weight:600;color:var(--muted)}
.hv-pl-f ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.45}
.hv-prices .hv-pl-f ul li{display:list-item;padding:1px 0;border:0}
.math-renew{margin:14px 0 0;border-left:4px solid var(--adc);background:#fff6f0;border-radius:0 10px 10px 0;padding:14px 16px;font-size:.93rem;line-height:1.55}
.math-renew > b{display:block;font-family:"Archivo",sans-serif;font-size:1rem;margin-bottom:4px}
.math-renew p{margin:0 0 8px}.math-renew p:last-child{margin:0}.math-renew a{color:var(--adc);font-weight:600}

.peek-loading{color:var(--muted);padding:30px 0;text-align:center}

.req-extra{border:1px solid var(--adc);background:#fff6f0;border-radius:10px;padding:14px 16px;margin:14px 0 0}
.req-extra[hidden],#detailsBox[hidden]{display:none}
.req-h{font-family:"Archivo",sans-serif;font-weight:700;margin:0 0 10px}

.test-ways{margin:6px 0 0;padding-left:18px}
.test-ways li{margin:3px 0}
.reno-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 18px}
.reno-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.reno-card h3{font-size:1.05rem;margin:0 0 8px}
.reno-card ul.plain li{font-size:.92rem;line-height:1.5}
@media (max-width:860px){.reno-grid{grid-template-columns:1fr}}

.mv-offers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mv-offer{background:#fff6f0;border:1px solid var(--adc);border-radius:12px;padding:16px 18px}
.mv-offer b{display:block;font-family:"Archivo",sans-serif;font-size:1.05rem;margin-bottom:4px}
.mv-offer p{margin:0;font-size:.93rem;line-height:1.5}
.mv-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.mv-part{margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}
.mv-part[hidden]{display:none}
.mv-part h3{margin:0 0 10px}
.mv-owner{background:#f6f7f8;border-radius:10px;padding:12px 14px;margin:12px 0 0}
.mv-ack{white-space:normal;align-items:flex-start;background:#fff8e6;border:1px solid #e9c46a;border-radius:8px;padding:10px 12px;margin:16px 0 0;font-weight:600;line-height:1.45}
#mvForm .rcard{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 7px;cursor:pointer;background:#fff}
#mvForm .rcard:has(input:checked){border-color:var(--adc);background:#fff6f0}
#mvForm .rcard b{display:block;font-size:.93rem}
#mvForm .rcard small{display:block;color:var(--muted);font-size:.82rem;font-weight:400;margin-top:2px}
#mvForm .rq{font-weight:700;font-size:.92rem;margin:12px 0 8px}
#mvForm .full{grid-column:1/-1}
#mvForm textarea{width:100%;min-height:90px}
@media (max-width:700px){.mv-offers,.mv-modes{grid-template-columns:1fr}}

#mvForm label.chk{display:flex;align-items:flex-start;gap:10px;font-weight:600}
#mvForm label.chk input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--adc)}
#mvForm .rcard input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--adc)}

/* brand tiles fold once a system is picked */
.hv-folded .pk:not(.on){display:none}
.hv-folded .pick-grid.pick-mini{grid-template-columns:minmax(0,340px)}
.hv-notile .pick-grid{display:none}
.hv-chg{background:none;border:0;padding:6px 0 0;color:var(--adc);font:600 .86rem 'Barlow',system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.hv-chg[hidden]{display:none}
/* "not heard back? follow up" note */
.follow-up{background:#FFF8EC;border:1px solid #F3D9A8;border-radius:8px;padding:10px 14px;font-size:.92rem;line-height:1.5;margin:12px 0 0;max-width:760px}
.sup-ok .follow-up{background:#fff}
.ok-ask{margin:14px 0 0;font-size:.92rem;line-height:2}
.ok-ask .btn{padding:8px 14px;font-size:.9rem;margin:0 8px 0 4px}
.ok-ask a:not(.btn){font-weight:600}

/* step 2 narrowed to the panel found by the lookup */
/* Which takeover rows are on screen. The two replacement panels (panel, hub) are never hidden — swapping
   the panel is an option whatever is on the wall, which is the point of the "Or replace it" divider. */
.only-adc .eq-g:first-child .eq-row:not([data-row="switch"]):not([data-row="panel"]):not([data-row="hub"]),
.only-vista .eq-g:first-child .eq-row:not([data-row="switch"]):not([data-row="tk_vista"]):not([data-row="panel"]):not([data-row="hub"]),
.only-dsc .eq-g:first-child .eq-row:not([data-row="switch"]):not([data-row="tk_dsc"]):not([data-row="panel"]):not([data-row="hub"]),
.only-dialer .eq-g:first-child .eq-row:not([data-row="switch"]):not([data-row="tk_dialer"]):not([data-row="panel"]):not([data-row="hub"]){display:none}
/* Nothing entered in the lookup yet: every takeover row is a guess, so none of them show. */
.eq-grid.no-route .eq-g:first-child .eq-row[data-row="switch"],
.eq-grid.no-route .eq-g:first-child .eq-row[data-row^="tk_"]{display:none}
.eq-grid.no-route .eq-g:first-child .eq-lead{display:none}
.eq-pick-first{display:none;margin:0 0 10px;padding:10px 13px;border:1px dashed var(--adc);border-radius:9px;
  background:#fff8f4;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}
.eq-grid.no-route .eq-pick-first{display:block}
.eq-pick-first a{font-weight:600;color:var(--adc)}
.eq-lead{margin:14px 0 6px;font:700 .76rem/1 'Archivo',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--adc)}
.panel-match{background:#FFF6EF;border:1px solid #F6C9A6;border-left:4px solid var(--adc);border-radius:8px;padding:10px 14px;margin:0 0 12px;font-size:.92rem;line-height:1.55}
.panel-match[hidden]{display:none}
.pm-acts{display:block;margin-top:10px}
.pm-acts .btn{font-size:.9rem;padding:9px 14px}
.pm-all{background:none;border:0;padding:0;margin-left:4px;color:var(--adc);font:600 .88rem 'Barlow',system-ui,sans-serif;text-decoration:underline;cursor:pointer}

.hv-have{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1.5px solid var(--adc);border-radius:8px;padding:10px 12px;margin:10px 0 4px;font-size:.92rem;font-weight:600;line-height:1.45;cursor:pointer;white-space:normal}
.hv-have input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--adc)}
.hv-have:has(input:checked){background:#FFF6EF}

.biz-fork{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--adc);border-radius:10px;padding:12px 16px;margin:0 0 22px;max-width:760px;font-size:.95rem}
.biz-fork .btn{padding:9px 16px;font-size:.92rem}

/* quote form: questions already answered by the lookup fold into one line */
#qform.q-known .qknown{display:none}
.qknown-box{background:#F1F8F4;border:1px solid #CBE6D5;border-radius:8px;padding:9px 12px;font-size:.88rem;line-height:1.55;margin:4px 0 12px}
.qknown-box[hidden]{display:none}
.qk-t{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.qk-edit{background:none;border:0;padding:0;margin-left:6px;color:var(--adc);font:600 .85rem 'Barlow',system-ui,sans-serif;text-decoration:underline;cursor:pointer}
/* comparison table fits a phone */
@media (max-width:620px){table.cmp{table-layout:fixed;width:100%}table.cmp th,table.cmp td{overflow-wrap:anywhere;word-break:normal;font-size:.84rem;padding:8px 6px}}

/* ---- photo / video box on the quote, support and moving forms (js/attach.js) ---- */
.att{margin:4px 0 14px}
.att-drop{position:relative;display:flex;gap:12px;align-items:flex-start;border:2px dashed #C9D3D9;border-radius:var(--radius-sm);padding:14px 16px;background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s;font-weight:400}
.att-drop:hover,.att.over .att-drop{border-color:var(--adc);background:var(--adc-tint)}
.att-drop:focus-within{outline:2px solid var(--adc);outline-offset:2px}
.att-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0}
.att-ico{font-size:1.5rem;line-height:1}
.att-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.att-txt b{font-family:'Archivo',sans-serif;color:var(--ink)}
.att-txt b+small{color:var(--muted);font-weight:500;margin-left:4px}
.att-txt{display:block}
.att-hint,.att-lim{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:3px}
.att-lim{font-size:.78rem}
.att-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.att-list li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:.88rem}
.att-th{width:44px;height:44px;flex:0 0 44px;border-radius:6px;object-fit:cover;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.att-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.att-x{border:0;background:none;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:6px}
.att-x:hover{background:var(--adc-tint);color:var(--adc)}
.att-msg{margin:8px 0 0;font-size:.86rem;color:#B3261E;background:#FDF1F1;border-left:3px solid #B3261E;padding:8px 10px;border-radius:4px}
.att-msg[hidden]{display:none}
#qform .att .att-drop,.att .att-drop{display:flex;font-weight:400}
#qform .att .att-hint,#qform .att .att-lim,.att .att-hint,.att .att-lim{font-weight:400}
#qform .att .att-txt b{font-weight:700}

/* ---- first-and-last-name and phone checks (js/fields.js) ---- */
.f-err{margin:4px 0 0;font-size:.84rem;color:#B3261E;font-weight:500}
input.bad{border-color:#B3261E !important;background:#FFF6F6}
#qform input.bad{border-color:var(--red);background:#FFF6F6}
#qform .f-err{margin-bottom:2px}

.bnote{margin:2px 0 10px;padding:9px 11px;border-left:3px solid var(--amber,#E8A33D);background:#FFF8EC;
  border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.45;color:#3C4A52}
.bnote b{color:#0E1B24}

/* A plan the lookup suggested but the customer has not chosen yet: priced, outlined, not lit up. */
.opt.sugg{border-style:dashed;background:transparent}
.opt.sugg input[type=radio]{accent-color:#AEBCC4}
.opt.sugg > span > b::after{content:'suggested';margin-left:8px;padding:1px 7px;border:1px solid var(--line,#DFE7EB);
  border-radius:999px;font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft,#5C6E78);vertical-align:2px}

/* A line in a plan's feature list that is NOT in the plan price — the station charges for it. */
.b-inc li.feat-extra,.fold li.feat-extra{list-style:none;margin:8px 0 2px;padding:7px 10px;border-left:3px solid var(--gold,#E8A33D);
  background:#FFF8EC;border-radius:0 6px 6px 0;font-size:.88rem;color:var(--ink-soft,#3C4A52)}

.svr-row{grid-template-columns:1fr auto;align-items:center;margin-left:0}
.opt-head{margin:14px 0 6px;font:600 .78rem 'Barlow',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5C6E78)}
.svr-row .qgap{display:none}
.svr-row .qwrap{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.svr-row .qsel{min-width:112px;padding:7px 8px;border:1px solid var(--line,#DFE7EB);border-radius:8px;
  background:#fff;font:inherit;font-size:.92rem;color:var(--ink,#0E1B24);cursor:pointer}
@media(max-width:560px){.svr-row{grid-template-columns:1fr}.svr-row .qwrap{justify-content:flex-start;margin-top:8px}}
.opt .qsel:focus-visible{outline:2px solid var(--adc,#F25E0F);outline-offset:1px}
.opt.off .qsel{opacity:.5;cursor:not-allowed}

/* ---- small phones: nothing may be wider than the screen ----------------------------------
   Found by sweeping every page at 320 px (iPhone SE): auto-fit grids with a 250–310 px minimum
   cannot shrink inside a 24 px-padded wrap, so cards, buttons and video blocks were running 10–27 px
   past the right edge and taking the page into a horizontal scroll. */
@media (max-width:400px){
  .wrap{padding-left:16px;padding-right:16px}
}
@media (max-width:620px){
  .trap-list,.ppl-grid,.fact-grid,.pick-grid,.askreach .rstrip,.math-grid{grid-template-columns:1fr}
  .cta-row{display:grid;grid-template-columns:1fr;gap:10px}
  .cta-row .btn,.man-cta .btn,.man-cta button,.m-quote{width:100%;max-width:100%;text-align:center}
  .btn,.m-quote{overflow-wrap:anywhere}
  .f-media,.f-media video,.f-media img{max-width:100%;height:auto}
  /* grid and flex children default to min-width:auto, so a long word, a nowrap button or a video's
     intrinsic width stops them shrinking and they push past the screen edge. */
  .wrap *{min-width:0}
  /* thumb-sized tap targets for the links that matter on a phone */
  .topbar a,.crumbs a,footer a,.ar-facts a{display:inline-block;padding:6px 0;min-height:32px}
  .topbar .wrap{gap:6px 14px}
  /* the doorbell comparison is wider than a phone by design — say so rather than leaving it to chance */
  .lineup{position:relative}
  .lineup::before{content:'Swipe the table sideways to compare \2192';display:block;margin:0 0 8px;
    font-size:.82rem;font-weight:600;color:var(--muted,#5C6E78)}
  .btn{white-space:normal}
  video,img,iframe{max-width:100%;height:auto}
  label.chk span,.chk span{overflow-wrap:anywhere;min-width:0}
  .hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
}

/* Older panel (dialer takeover or unrecognised): photos first, then a no-charge site visit. */
.hv-old{margin:14px 0 12px;padding:13px 15px;border:1px solid var(--gold,#E8A33D);border-left:4px solid var(--gold,#E8A33D);
  border-radius:0 10px 10px 0;background:#FFF8EC}
.hv-old .hv-ct{display:block;font:700 .74rem 'Barlow',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:#9A6512;margin-bottom:6px}
.hv-old p{margin:0 0 10px;font-size:.94rem;line-height:1.55;color:var(--ink-soft,#33454F)}
.hv-old-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hv-old-note{margin:10px 0 0!important;font-size:.84rem;color:var(--muted,#5C6E78)}
.hv-voip{display:block;margin-top:8px;color:#9A3412}
.keepnote{margin:12px 0 0;padding:10px 12px;background:#FFF8EC;border-left:3px solid var(--gold,#E8A33D);
  border-radius:0 8px 8px 0;font-size:.88rem;line-height:1.5;color:var(--ink-soft,#33454F)}
.hrs-note{border-left:3px solid var(--line);padding-left:11px}
.hv-old-warn{margin:0 0 10px!important;padding:10px 12px;background:#fff;border:1px solid #EBCB9A;border-radius:8px;font-size:.92rem}
@media(max-width:620px){.hv-old-cta{display:grid;grid-template-columns:1fr;gap:8px}.hv-old-cta .btn{width:100%;text-align:center}}

/* hours.php — the weekly grid a commercial customer fills in when their hours change */
.hrs-grid{margin:10px 0 4px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hrs-head,.hrs-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 64px;gap:10px;align-items:center;padding:8px 12px}
.hrs-head{background:var(--ink);color:#fff;font:600 .78rem 'Barlow',sans-serif;letter-spacing:.05em;text-transform:uppercase}
.hrs-head span:last-child,.hrs-row .hrs-c{text-align:center}
.hrs-row+.hrs-row,.hrs-head+.hrs-row{border-top:1px solid var(--paper)}
.hrs-row:nth-child(even){background:#FAFCFD}
.hrs-day{font-weight:600}
.hrs-t{margin:0}
.hrs-t input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.hrs-c input{width:20px;height:20px;accent-color:var(--adc)}
.hrs-graces{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:620px){.hrs-graces{grid-template-columns:1fr;gap:12px}}
.hrs-gin{display:flex;align-items:center;gap:8px;margin-top:5px;font-weight:600}
.hrs-gin input{width:86px;margin:0}
.hrs-grace{display:block;font-weight:600}
.hrs-grace input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit}
.hrs-grace small{display:block;margin-top:5px;font-weight:400;color:var(--muted);font-size:.86rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:620px){
  .hrs-head{display:none}
  .hrs-row{grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px}
  .hrs-day{grid-column:1 / -1}
  .hrs-c{justify-self:start;display:flex;align-items:center;gap:8px}
  .hrs-c::after{content:'Closed';font-size:.9rem;color:var(--ink-soft)}
}

/* ---- area pages (areas_build.py) ---- */
.nav-links .nav-drop{font-size:.98rem}
/* header row needs more than --wrap once the Alarm.com chip shows (>=1621px); fixes a pre-existing overflow too */
@media (min-width:1621px){ header.site .wrap.nav{max-width:1400px} }
.nav-links .nav-drop>summary{font-weight:600;color:var(--ink-soft);white-space:nowrap}
.nav-links .nav-drop>summary::after{color:var(--adc)}
.nav-links .nav-drop>summary:hover,.nav-links .nav-drop[open]>summary,.nav-links .nav-drop.cur>summary{color:var(--adc)}
.nav-links .nav-drop-menu{min-width:220px}
.nav-links .nav-drop-menu a{font-size:.95rem}
.nav-links .nav-drop-menu a:hover,.nav-links .nav-drop-menu a[aria-current=page]{background:var(--adc-tint);color:var(--adc)}
.nav-links .nav-drop-menu a.nd-all{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px}
@media (max-width:1460px){ .nav-links .nav-drop{font-size:.94rem} }
@media (max-width:1400px){ .nav-links .nav-drop{font-size:.9rem} }
@media (max-width:1300px){ .nav-links .nav-drop{font-size:.86rem} }
@media (max-width:1200px){ .nav-links .nav-drop{font-size:.84rem} }
@media (max-width:1080px){ .nav-links .nav-drop{font-size:.8rem} }
@media (max-width:960px){
  .nav-links .nav-drop{font-size:1rem}
  .nav-links .nav-drop>summary{padding:12px 0;border-bottom:1px solid var(--paper)}
  .nav-links .nav-drop-menu a{font-size:.95rem;padding:10px 0}
}
.f-serve a{color:inherit;text-decoration:none}
.f-serve a:hover{color:#fff;text-decoration:underline}
.crumbs{background:var(--ink);color:#8FA3AF;font-size:.85rem;padding:12px 0 0}
.crumbs a{color:#C3D0D8;text-decoration:none}
.crumbs a:hover{color:#fff}
.ar-hero{padding-top:18px}
.ar-hero h1{max-width:22ch}
.ar-hero .cta-row{margin-top:24px}
.ar-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.ar-hero .btn-ghost:hover{background:#fff;color:var(--ink)}
.ar-facts{background:var(--adc-tint);border-bottom:1px solid var(--line);padding:0}
.ar-facts ul{list-style:none;margin:0;padding:16px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ar-facts li{display:flex;flex-direction:column;gap:2px}
.ar-facts b{font-family:'Archivo',sans-serif;font-size:1.05rem;color:var(--ink)}
.ar-facts span{color:var(--muted);font-size:.88rem}
.ar-local{padding:44px 0}
.ar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.ar-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--adc);border-radius:var(--radius);padding:20px 22px}
.ar-card h3{margin:0 0 8px;font-size:1.12rem}
.ar-card p{margin:0;color:var(--ink-soft)}
.ar-where{padding:40px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ar-where-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.ar-where h2{margin-top:0}
.ar-hoods{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ar-hoods li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.92rem;font-weight:600;color:var(--ink-soft)}
.ar-drive{color:var(--muted);margin:18px 0 0;font-size:.95rem}
.ar-police{background:#fff;border:1px solid var(--line);border-left:5px solid var(--adc);border-radius:var(--radius);padding:18px 20px;font-size:.93rem}
.ar-police b{font-family:'Archivo',sans-serif;font-size:1.05rem}
.ar-police p{margin:8px 0 0;color:var(--ink-soft)}
.ar-faq-more{margin-top:14px;color:var(--muted)}
.ar-more{padding:36px 0}
.ar-more h2{font-size:1.4rem;margin-top:0}
.ar-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ar-links a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;font-weight:600;color:var(--ink-soft);font-size:.93rem}
.ar-links a:hover,.ar-links a.ar-all{border-color:var(--adc);color:var(--adc)}
.ar-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ar-tile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.ar-tile b{font-family:'Archivo',sans-serif;font-size:1.15rem}
.ar-tile b::after{content:" →";color:var(--adc)}
.ar-tile span{color:var(--muted);font-size:.9rem}
.ar-tile:hover{border-color:var(--adc)}
@media (max-width:960px){ .ar-cards,.ar-where-grid{grid-template-columns:1fr} .ar-tiles{grid-template-columns:repeat(2,1fr)} .ar-facts ul{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .ar-tiles,.ar-facts ul{grid-template-columns:1fr} .ar-hero .cta-row .btn{width:100%} }

/* ---- callme.php — the escape hatch out of the builder ---- */
.cm-hero h1{max-width:18ch}
.cm-form fieldset legend{font-size:.95rem}
.cm-when{display:block;max-width:340px;margin:10px 0 0}
.cm-when select{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
.cm-notes textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:9px;font:inherit;
  line-height:1.5;background:#fff;color:var(--ink);resize:vertical}
.cm-send{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:18px 0 0}
.cm-send .btn{white-space:normal}
.cm-or{font-size:.92rem;color:var(--muted)}
.cm-or a{font-weight:700;color:var(--ink)}
.cm-promise{margin:12px 0 0;font-size:.86rem;color:var(--muted);max-width:60ch}

/* the prompt that offers it, wherever the questions are piling up */
.bail{margin:14px 0 0;padding:13px 15px;border:1px dashed var(--adc);border-radius:10px;background:#fff8f4;
  font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.bail b{display:block;font-family:'Archivo',sans-serif;font-size:.97rem;color:var(--ink);margin-bottom:3px}
.bail a:not(.btn){font-weight:700;color:var(--adc)}
.bail-in{margin-top:16px}

/* Desktop: the closing "you do not have to finish this" only makes sense once there is something to finish,
   and the call-me box above already covers the unpicked state. On phones that box is not rendered at all,
   so this one stays put under every step of the wizard — the escape hatch is never more than a scroll away. */
@media (min-width:961px){ .b-opts:not(:has(input[name=plan]:checked)) .bail-in{display:none} }

/* ---- "What you get for it" — one button opens and shuts the whole list ---- */
.b-inc li.fold-all > ul,
.wz-inc li.fold-all > ul{padding-left:18px;margin-top:8px}
/* the plan's own features are the point of the list, so they keep full contrast; only the nested
   "everything in the lower plan" sub-list stays muted */
.b-inc li.fold-all > ul > li,
.wz-inc li.fold-all > ul > li{color:var(--ink)}
.b-inc li.fold-all > ul > li.h,
.wz-inc li.fold-all > ul > li.h{margin-left:-18px;color:var(--adc)}
.b-inc li.fold-all > ul > li.fold,
.wz-inc li.fold-all > ul > li.fold{margin-left:-18px}

/* the one under the plan cards is the loudest of the three: it is the moment people decide the whole thing
   is more work than it is worth, so it gets a heading, a sentence and a button rather than a line of text */
.bail-big{padding:18px 20px;border-width:1.5px;text-align:center}
.bail-big b{font-size:1.18rem;margin-bottom:6px}
.bail-big p{margin:0 auto 14px;max-width:52ch}
.bail-big .btn{white-space:normal}

/* the office route to a system test: kept, but plainly the slower of the two */
/* the office route: not a lesser option, a privacy decision — so it reads as an explanation, not fine print */
.steps-num .test-alt{margin:8px 0 0;padding:10px 13px;font-size:.89rem;line-height:1.55;font-weight:400;
  color:var(--ink-soft);background:var(--paper);border-radius:8px}
.steps-num .test-alt b{color:var(--ink)}

/* moving.php — the one rule that governs both paths, stated before the choice is made */
.mv-confirm{margin:0 0 14px;padding:12px 15px;border-left:3px solid var(--adc);background:#fff8f4;
  border-radius:0 8px 8px 0;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.mv-confirm b{color:var(--ink)}

/* ---- starting packages (index.html #packs, js/packs.js) ---- */
.packs{margin:26px 0 0}
.packs h3{font-family:'Archivo',sans-serif;font-size:1.5rem;margin:0 0 6px}
.packs-sub{margin:0 0 18px;color:var(--muted);font-size:.94rem;line-height:1.6;max-width:74ch}
.packs-sub b{color:var(--ink)}
.packs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
.pack{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:18px}
.pack-best{border-color:var(--adc);box-shadow:0 8px 26px rgba(242,94,15,.14)}
.pack-tag{display:inline-block;background:var(--adc);color:#fff;font:700 .68rem/1 'Archivo',sans-serif;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:5px;margin-bottom:8px;align-self:flex-start}
.pack h4{font-family:'Archivo',sans-serif;font-size:1.14rem;margin:0 0 4px}
.pack-for{margin:0 0 12px;color:var(--muted);font-size:.9rem;line-height:1.45}

/* one line per item: − n + · name · price */
.pack-list{margin:0;padding:0;list-style:none;font-size:.9rem}
.pack-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:4px 10px;
  padding:7px 0;border-top:1px solid var(--line);line-height:1.4;min-width:0}
.pack-list li:first-child{border-top:0}
.pk-name{min-width:0}
.pack-list li i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:1px}
.pack-list li.off{opacity:.45}
.pack-list li.off .pk-line{font-style:italic}
.pk-qty{display:inline-flex;align-items:center;gap:2px}
.pk-b{width:26px;height:26px;flex:none;border:1px solid var(--line);background:#fff;border-radius:6px;
  font:700 1rem/1 'Barlow',sans-serif;color:var(--adc);cursor:pointer;padding:0}
.pk-b:hover:not([disabled]){border-color:var(--adc);background:#fff6f0}
.pk-b[disabled]{opacity:.32;cursor:default}
.pk-n{min-width:16px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.9rem}
.pk-line{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--muted);white-space:nowrap}

.pack-note{margin:12px 0 0;padding:10px 12px;background:var(--paper);border-radius:8px;
  font-size:.83rem;line-height:1.5;color:var(--ink-soft)}
.pack-note b{color:var(--ink)}
.pack-foot{margin-top:auto;padding-top:12px}
.pack-price{padding-top:10px;border-top:1px solid var(--line)}
.pack-price b{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-weight:600;display:block;line-height:1.1}
.pack-price span{display:block;font-size:.8rem;color:var(--muted)}
.pack-mo{margin:9px 0 13px;font-size:.82rem;color:var(--muted);line-height:1.45}
.pack-mo b{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--ink);margin-right:5px}
.pack .btn{white-space:normal;text-align:center;display:block}
.packs-fine{margin:12px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}

/* the life-safety card is the one people skip, so in a grid of white cards it is the dark one */
@media (max-width:820px){ .packs-grid{grid-template-columns:1fr} }
@media (max-width:420px){ .pack-list li{grid-template-columns:auto 1fr;gap:3px 8px}
  .pk-line{grid-column:2;text-align:left} }

/* ---- plan cards: two on show, the other two folded (index.html #plans) ---- */
.plans.two{grid-template-columns:repeat(2,1fr);gap:18px;max-width:840px}
.plans.two .plan{padding:20px 18px}
@media (max-width:760px){ .plans.two{grid-template-columns:1fr} }
/* One plan on show. Interactive is what we put people on; the other three live in the fold under it,
   so this card is alone and can run its feature list in two columns instead of one tall stack. */
.plans.one{grid-template-columns:1fr;max-width:620px}
.plans.one .plan{padding:22px 22px 20px}
@media (min-width:700px){ .plans.one ul{columns:2;column-gap:26px} .plans.one ul li{break-inside:avoid} }
.plans.three{grid-template-columns:repeat(3,1fr);gap:16px}
.plans.three .plan{padding:18px 16px}
.plans.three .plan h3{font-size:1.12rem}
.plans.three .amt{font-size:1.85rem}
.plans.three ul{font-size:.9rem}
/* Three to a row is narrow: let the "after that" line drop under the price instead of breaking
   into three ragged lines beside it. */
.plans.three .price{flex-wrap:wrap;row-gap:4px}
.plans.three .promo{margin-left:0;width:100%;text-align:left;white-space:nowrap;font-size:.82rem}
.plans.three .promo b{margin-right:4px}
.plans.three .promo br{display:none}
@media (max-width:980px){ .plans.three{grid-template-columns:1fr;max-width:560px} }

/* Universal Communicator and Gold: still on the page, still crawlable, out of the way. The summary keeps
   both prices visible so the $14.99 in the hero still has something on the page to match. */
.plans-rare{margin:16px 0 0;max-width:840px}
.plans-rare > summary{list-style:none;cursor:pointer;padding:12px 15px;border:1px dashed var(--line);
  border-radius:10px;background:#fff;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px}
.plans-rare > summary::-webkit-details-marker{display:none}
.plans-rare > summary::after{content:'▾';margin-left:auto;color:var(--adc);font-weight:700}
.plans-rare[open] > summary::after{content:'▴'}
.plans-rare > summary:hover{border-color:var(--adc);background:#fff8f4}
.plans-rare > summary b{font-family:'Archivo',sans-serif;font-size:.98rem;color:var(--ink)}
.plans-rare > summary span{font-size:.88rem;color:var(--muted)}
.pr-note{margin:14px 0;font-size:.9rem;line-height:1.6;color:var(--ink-soft);max-width:74ch}
.pr-note a{color:var(--adc);font-weight:600}
.plans-rare .plans{margin-bottom:6px}

/* the monthly, itemised: monitoring, then video, then the two totals */
.pm-split{display:flex;align-items:baseline;gap:10px;font-size:.82rem;line-height:1.5}
.pm-split span{color:var(--muted)}
.pm-split b{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.86rem;color:var(--ink-soft);white-space:nowrap}
.pm-tot{margin-top:3px;padding-top:5px;border-top:1px solid var(--line)}
.pm-tot span{color:var(--ink)}
.pm-tot b{color:var(--ink)}
.pm-first{margin-top:7px}
.pm-first b{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;color:var(--ink);line-height:1.1}
.pm-first span{display:block;font-size:.79rem;color:var(--muted);line-height:1.45;margin-top:1px}
.pk-one{display:inline-block;width:56px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:.9rem;color:var(--muted)}

/* business.html — the two station services, now that they are not tied to a commercial plan */
.biz-hours{margin:22px 0 26px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.biz-hours h3{font-family:'Archivo',sans-serif;font-size:1.15rem;margin:0 0 6px}
.biz-hours p{margin:0 0 12px;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.bh-list{margin:0 0 12px;padding-left:18px;font-size:.92rem;line-height:1.55}
.bh-list li{margin:7px 0}
.bh-list b{color:var(--ink)}
.bh-foot{margin:0!important;font-size:.88rem}
.bh-foot a{color:var(--adc);font-weight:600}
/* one card left in that row, so it should not stretch across the page */
.plans.bplans{grid-template-columns:repeat(auto-fit,minmax(300px,380px))}

/* the comparison calculator, now a fold on switch.html */
.mathfold{border:1.5px solid var(--ink);border-radius:12px;background:var(--ink);overflow:hidden}
.mathfold > summary{list-style:none;cursor:pointer;padding:18px 20px;display:block;color:#E8EEF3}
.mathfold > summary::-webkit-details-marker{display:none}
.mathfold > summary b{display:block;font-family:'Archivo',sans-serif;font-size:1.22rem;color:#fff;margin-bottom:5px}
.mathfold > summary span{display:block;font-size:.92rem;line-height:1.6;color:#C7D3DC;max-width:78ch}
.mathfold > summary::after{content:'Open the calculator \25be';display:inline-block;margin-top:10px;
  font:700 .85rem 'Barlow',sans-serif;color:var(--adc)}
.mathfold[open] > summary::after{content:'Close it \25b4'}
.mathfold > summary:hover::after{text-decoration:underline}
.mathfold .math{margin:0;border-radius:0}
.mathfold .math-head{display:none}   /* the summary above already says all of this */

/* the builder's way into it */
.b-math{display:block;white-space:normal;text-align:center;margin:10px 0 0}
.b-math-note{margin:8px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.b-math-note b{color:var(--ink)}

/* Remote Video Monitoring is one block now, not a card beside an empty half-row */
.rvm-lede{margin:0 0 14px;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.rvm-lede b{color:var(--ink)}
.rvm-feat .f-copy h3{font-family:'Archivo',sans-serif;font-size:1.5rem;margin:0 0 8px}

/* a plan feature that needs hardware: said once under the list, not tacked onto every line */
.plan-dev{margin:10px 0 0;padding:9px 11px;background:var(--paper);border-radius:8px;
  font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.plan-dev b{color:var(--ink)}

/* ---- the video block on the summary (js/build.js paintVideo) ---- */
.b-video{margin:12px 0 0;padding:13px 14px;background:var(--paper);border-radius:10px}
.b-video[hidden]{display:none}
.b-video h4{font-family:'Archivo',sans-serif;font-size:.98rem;margin:0 0 5px}
.bv-why{margin:0 0 10px;font-size:.84rem;line-height:1.55;color:var(--ink-soft)}
.bv-why b{color:var(--ink)}
.bv-opts{display:grid;gap:6px;margin:0 0 9px}
.bv-opt{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.85rem;min-width:0}
.bv-opt:hover{border-color:var(--adc)}
.bv-opt.on{border-color:var(--adc);background:#fff6f0}
.bv-opt input{margin-top:2px}
.bv-opt b{display:block;font-weight:700}
.bv-opt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4;margin-top:1px}
.bv-opt em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.82rem;white-space:nowrap}
.bv-svr,.bv-img{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:6px;font-size:.85rem;cursor:pointer;min-width:0}
.bv-img{grid-template-columns:18px 1fr auto}
.bv-svr b,.bv-img b{display:block;font-weight:700}
.bv-svr small,.bv-img small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4;margin-top:1px}
.bv-svr .qsel{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff;max-width:130px}
.bv-img em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.82rem}

/* Step 2 is a choice, not a count: the control is a radio and the whole row is the target */
.eq-row.eq-pick{cursor:pointer}
.eq-row.eq-pick input[type=radio]{width:22px;height:22px;justify-self:center;cursor:pointer;accent-color:var(--adc)}
.eq-row.eq-pick:hover{border-color:var(--adc)}
.eq-row.eq-pick:has(input:checked){border-color:var(--adc);background:#fff6f0;box-shadow:inset 0 0 0 1px var(--adc)}
.eq-row.eq-pick.locked:has(input:checked){box-shadow:none}

/* about.html — the two "how we charge" cards carried over from the home page */
.ab-how{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 0}
.ab-how > div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.ab-how h3{font-family:'Archivo',sans-serif;font-size:1.02rem;margin:0 0 5px}
.ab-how p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
@media (max-width:700px){ .ab-how{grid-template-columns:1fr} }
.ab-lead{margin:0 0 14px;font-size:.95rem;line-height:1.6;color:var(--ink-soft);max-width:72ch}

/* ---- the panel lookup now lives in the entry grid, where the Alarm.com plans card used to be ---- */
.entry-look{padding:0;overflow:hidden;display:flex;flex-direction:column}
.entry-look .haveit{border:0;border-radius:0;margin:0;height:100%;display:flex;flex-direction:column}
.entry-look .hv-grid{grid-template-columns:1fr}          /* one column inside a half-width card */
.entry-look .hv-out{margin-top:auto}
.entry-look .hv-cols{grid-template-columns:1fr}
/* minmax(0,…): the model list inside each tile is nowrap, and an auto track would size to it
   and push the tiles out through the card's clipped edge instead of letting them ellipsis. */
.hv-other{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.hv-other a{color:var(--adc);font-weight:600}
.entry-look .pick-grid.pick-mini{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.entry-look .pick-grid.pick-mini .pk{min-width:0;overflow:hidden}
@media (max-width:1100px){ .entry-look .pick-grid.pick-mini{grid-template-columns:minmax(0,1fr)} }
/* the lookup answer is the tall one, so the standard-monitoring card should not stretch to match it */
.entry-grid{align-items:stretch}   /* both cards the same height; the shorter one fills */

/* ---------- Phone: get to the prices ----------
   On a phone the page opened with three screens of hero — eyebrow, headline, strap, paragraph, two
   buttons, the LCD strip and a photo — before the first price card. The sticky bar at the bottom already
   carries Call us and Get my price, and the social links are in the footer, so on small screens these come
   off and the two entry cards arrive about a screen and a half sooner. Desktop is untouched. */
@media (max-width:700px){
  .topbar .topbar-social{display:none}
  .hero .lcd{display:none}
  .hero .hero-visual{display:none}
  .hero .hero-ctas .btn-ghost{display:none}
  .hero{padding-bottom:18px}
}

/* ---------- Packages: details pop-up, add drawer ----------
   The builder is gone; a package card is now the whole configurator, so the two things the builder did
   that a card could not — explain a part, and add something that is not in the kit — live here. */
.pk-i{margin-left:8px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;background:none;
  font:600 .72rem/1.6 'Barlow',sans-serif;color:var(--adc);cursor:pointer;vertical-align:1px;white-space:nowrap}
.pk-i:hover{border-color:var(--adc);background:var(--adc-tint)}
.pk-modal{position:fixed;inset:0;z-index:70;background:rgba(14,27,36,.55);display:flex;align-items:center;
  justify-content:center;padding:18px}
/* display:flex beats the hidden attribute, and a shut dialog that still catches clicks swallows the page */
.pk-modal[hidden]{display:none}
.pk-box{position:relative;background:#fff;border-radius:14px;max-width:460px;width:100%;padding:26px 24px 22px;
  box-shadow:0 20px 60px rgba(14,27,36,.3)}
.pk-box h4{margin:0 0 6px;font-size:1.15rem}
.pk-box .pk-price{margin:0 0 12px;font-weight:700;color:var(--adc)}
.pk-box .pk-note{margin:0 0 14px;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.pk-box .pk-fine{margin:0;font-size:.8rem;color:var(--muted)}
.pk-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.6rem;line-height:1;
  color:var(--muted);cursor:pointer}
.pk-x:hover{color:var(--ink)}
.pk-add{margin:14px 0 0;border:1px dashed var(--line);border-radius:10px;background:var(--wash,#f7f9fb)}
.pk-add>summary{cursor:pointer;padding:11px 14px;list-style:none;font-size:.93rem}
.pk-add>summary::-webkit-details-marker{display:none}
.pk-add>summary::after{content:'+';float:right;color:var(--adc);font-weight:700}
.pk-add[open]>summary::after{content:'–'}
.pk-add>summary b{color:var(--adc)}
.pk-add>summary span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.pk-ag{padding:0 12px 10px}
.pk-ag h5{margin:10px 0 6px;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* A drawer row is a row, not one big button: the name, the price, "Details" (what the part is, with a
   photo where we have one) and "Add". Tapping the name by accident used to put an item in the kit. */
.pk-adds{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 5px;padding:6px 8px 6px 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;
  font:500 .88rem/1.35 'Barlow',sans-serif;color:var(--ink)}
.pk-adds .pk-an{flex:1;min-width:0}
.pk-adds b{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--muted);white-space:nowrap}
.pk-adds:hover{border-color:var(--adc)}
.pk-i-add{margin-left:0}
.pk-addb{border:1px solid var(--adc);border-radius:999px;background:var(--adc);color:#fff;cursor:pointer;
  padding:4px 12px;font:700 .78rem/1.5 'Barlow',sans-serif;white-space:nowrap}
.pk-addb:hover{filter:brightness(1.06)}
.pk-img{display:block;width:100%;max-height:220px;object-fit:contain;margin:0 0 14px;
  background:var(--wash,#f7f9fb);border-radius:10px;padding:10px}
.pk-img[hidden]{display:none}   /* display:block beats the hidden attribute — same trap as the dialog */
@media (max-width:520px){
  .pk-adds{flex-wrap:wrap;row-gap:6px}
  .pk-adds .pk-an{flex:1 0 100%}
  .pk-adds b{flex:1}
}
.pack-list li.pk-new{animation:pkNew 900ms ease-out}
@keyframes pkNew{0%{background:var(--adc-tint)}100%{background:transparent}}
.pk-after{margin:8px 0 0;font-size:.78rem;color:var(--muted);text-align:center}

/* Once the lookup knows what is on the wall, the standard-monitoring card is answering a question
   nobody asked any more — it folds away and the answer takes the full width. The line under it puts
   the card back, so the cheaper option is never something we quietly removed. */
#entry .entry-showfa-line{display:none;order:2;grid-column:1/-1;margin:2px 0 0;font-size:.88rem;color:var(--muted)}
#entry.has-panel .entry-showfa-line{display:block}
#entry.has-panel .entry-fa{display:none}
#entry.has-panel .entry-grid{grid-template-columns:minmax(0,1fr)}
#entry.has-panel .entry-look{max-width:760px}
.entry-showfa{border:0;background:none;padding:0;font:600 .88rem/1.4 'Barlow',sans-serif;color:var(--adc);
  cursor:pointer;text-decoration:underline}
.packs-plan{margin:0 0 12px;padding:9px 14px;border-left:3px solid var(--adc);background:var(--adc-tint);
  border-radius:0 8px 8px 0;font-size:.92rem}
.packs-reset{border:0;background:none;padding:0;font:600 .92rem/1.4 'Barlow',sans-serif;color:var(--adc);
  cursor:pointer;text-decoration:underline}

/* The four plans, folded under the packages. They were a section of their own until the packages took
   over the pricing; kept because people do look up what each plan includes, out of the way because
   almost nobody needs to before they have picked a kit. */
.plans-fold{margin:22px 0 0;border:1px solid var(--line);border-radius:12px;background:#fff}
.plans-fold>summary{cursor:pointer;list-style:none;padding:14px 18px;font-size:1rem}
.plans-fold>summary::-webkit-details-marker{display:none}
.plans-fold>summary::after{content:'▾';float:right;color:var(--adc)}
.plans-fold[open]>summary::after{content:'▴'}
.plans-fold>summary span{display:block;margin-top:3px;font-size:.84rem;color:var(--muted)}
.plans-fold>.sub,.plans-fold>.pr-note{margin:0 18px 14px;font-size:.92rem}
.plans-fold>.plans{margin:0 18px 18px}
@media (max-width:1150px){ .plans.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){ .plans.four{grid-template-columns:1fr} }

/* ---------- Packages: home or business ----------
   A shop is the same kit as a house. What changes is what the station does with it, so the question is
   asked once above the cards and the three per-account services appear under it. */
.packs-seg{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.packs-seg .pks-q{font-weight:700;font-size:.92rem;margin-right:4px}
.pkseg{border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
  padding:7px 16px;font:600 .9rem/1.4 'Barlow',sans-serif;color:var(--ink-soft)}
.pkseg:hover{border-color:var(--adc);color:var(--adc)}
.pkseg.on{background:var(--adc);border-color:var(--adc);color:#fff}
.packs-biz{margin:0 0 16px;padding:14px 16px;border:1px solid var(--adc);border-radius:12px;
  background:var(--adc-tint)}
.packs-biz[hidden]{display:none}
.packs-biz h4{margin:0 0 4px;font-size:1rem}
.packs-biz .pb-sub{margin:0 0 10px;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.pb-row{display:flex;align-items:center;gap:9px;margin:0 0 6px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;cursor:pointer;font-size:.9rem}
.pb-row:hover{border-color:var(--adc)}
.pb-row input{width:17px;height:17px;accent-color:var(--adc);flex:none}
.pb-row .pb-n{flex:1;min-width:0;font-weight:600}
.pb-row .pb-p{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--adc);white-space:nowrap}
@media (max-width:520px){ .pb-row{flex-wrap:wrap;row-gap:6px} .pb-row .pb-n{flex:1 0 70%} }

/* ---------- "Odds are we already know somebody you know" ----------
   The one part of the page that is not about prices. It sits between the hero and the rates because the
   argument only lands before someone has started shopping: same station, same dispatch, same app, less
   money, no contract — and a door in Nepean you can walk into. */
.local{background:var(--ink);color:#E7EEF2;padding:48px 0 52px}
.local .eyebrow{color:var(--adc)}
.local h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);margin:6px 0 20px;max-width:22ch}
.lc-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:30px;align-items:start}
.lc-copy p{margin:0 0 14px;color:#C6D4DC;line-height:1.65;max-width:62ch}
.lc-copy b{color:#fff}
.lc-punch{border-left:3px solid var(--adc);padding-left:14px}
.lc-side{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 20px}
.lc-q{margin:0 0 6px;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.15rem;color:#fff}
.lc-a{margin:0 0 16px;font-size:.95rem;color:#C6D4DC;line-height:1.55}
.lc-side .btn{display:block;text-align:center;margin:0 0 10px}
.lc-ghost{border:1px solid rgba(255,255,255,.35);color:#fff;background:none}
.lc-ghost:hover{border-color:var(--adc);color:var(--adc)}
.lc-fine{margin:12px 0 0;font-size:.82rem;color:#93A7B2;line-height:1.5}
@media (max-width:900px){
  .local{padding:34px 0 36px}
  .lc-grid{grid-template-columns:1fr;gap:20px}
  .local h2{max-width:none}
}
.lc-fold{margin:0 0 14px}
.lc-fold>summary{cursor:pointer;list-style:none;font-weight:700;color:#fff;padding:2px 0}
.lc-fold>summary::-webkit-details-marker{display:none}
.lc-fold>summary::after{content:' ▾';color:var(--adc)}
.lc-fold[open]>summary::after{content:''}
.lc-fold[open]>summary{cursor:default}
.lc-fold>.lc-more{padding-top:10px}
@media (max-width:900px){ .lc-fold>summary{padding:10px 0;border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15)} }
/* The area-page version is shorter and has no fold — three paragraphs at most, so it stays open
   everywhere rather than hiding two sentences behind a summary. */
.local-area{padding:40px 0 42px}
.local-area h2{font-size:clamp(1.35rem,3vw,1.9rem)}
@media (max-width:900px){ .local-area{padding:30px 0 32px} }

/* The two entry cards are one row: same height, each one's call to action on the same line as the other's. */
.entry-grid>.entry-card{height:100%}
.entry-fa{display:flex;flex-direction:column}
.entry-fa .entry-list{margin-bottom:auto}
.entry-fa .btn-red{margin-top:18px}
/* The line that carries somebody with no system from the two boxes down to the packages. */
.entry-next{grid-column:1/-1;order:3;margin:2px 0 0;padding:12px 16px;border:1px dashed var(--line);
  border-radius:10px;background:var(--wash,#f7f9fb);font-size:.95rem;text-align:center}
.entry-next a{color:var(--adc);font-weight:700}

/* ---------- Package cards: a light wash and a line drawing instead of the dark block ----------
   The life-safety card was navy, which on a page of white cards read as "advert" rather than "the one
   people skip". It is a warm wash now, with fire, smoke and water drawn faintly in the corner. The two
   camera kits get the same treatment: somebody at the door seen through a camera, and a camera watching
   the pool. All three are inline SVG line art at low opacity, never text, and they sit behind everything. */
.pack{position:relative;overflow:hidden}
.pack>*{position:relative;z-index:1}
/* Top right: the bottom of a card is the orange button, which swallowed the drawing entirely. Up here it
   sits in the white beside the title, where there is room and nothing to read through. */
.pack::after{content:'';position:absolute;right:6px;top:8px;width:140px;height:140px;z-index:0;
  background-repeat:no-repeat;background-size:contain;background-position:right top;opacity:.13;pointer-events:none}
.pack[data-pack="life"]{background:linear-gradient(170deg,#FFF3E9 0%,#FFF9F5 45%,#fff 100%);border-color:#F6C6A3}
/* Generated here, not photographed: nothing in the library shows fire, and the only hosts this machine
   can reach are the package registries and GitHub. A rendered flame is ours outright, with no licence
   question hanging over a commercial page. Swap in a real photo the day one turns up. */
.pack[data-pack="life"]::after{background-image:url(../images/card-life.webp);
  width:170px;height:190px;right:0;top:0;opacity:.42;background-size:cover;background-position:center bottom;
  border-radius:0 12px 0 0;
  -webkit-mask-image:linear-gradient(200deg,#000 8%,rgba(0,0,0,.4) 50%,transparent 80%);
  mask-image:linear-gradient(200deg,#000 8%,rgba(0,0,0,.4) 50%,transparent 80%)}
/* The two camera kits get the real Alarm.com photography rather than a drawing: somebody at the door,
   and a camera watching the house after dark. They are masked so the picture dissolves into the card
   instead of sitting on it as a rectangle. */
.pack[data-pack="doorbell"]::after,.pack[data-pack="camera"]::after{
  width:186px;height:150px;right:0;top:0;opacity:.42;background-size:cover;background-position:center top;
  border-radius:0 12px 0 0;
  -webkit-mask-image:linear-gradient(205deg,#000 10%,rgba(0,0,0,.4) 52%,transparent 82%);
  mask-image:linear-gradient(205deg,#000 10%,rgba(0,0,0,.4) 52%,transparent 82%)}
.pack[data-pack="doorbell"]::after{background-image:url(../images/card-door.webp)}
.pack[data-pack="camera"]::after{background-image:url(../images/card-outside.webp)}
@media (max-width:520px){ .pack[data-pack="doorbell"]::after,.pack[data-pack="camera"]::after{width:150px;height:120px;opacity:.45} }
.pack[data-pack="life"] .pack-note{background:#FFF1E4;border-left:3px solid var(--adc)}
@media (max-width:520px){ .pack::after{width:104px;height:104px;opacity:.09} }

/* The packages lead: copy on the left, the panel itself on the right. The space beside that heading was
   empty, and the one thing every kit has in common is the panel. */
.packs-top{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:center;margin:0 0 6px}
.packs-panel{margin:0;text-align:center}
/* The product shot is white on white, so it needs a tint under it or it simply disappears. */
.packs-panel img{width:100%;max-width:190px;height:auto;display:block;margin:0 auto;
  background:#F2F6F9;border:1px solid var(--line);border-radius:12px;padding:8px}
.packs-panel figcaption{margin-top:4px;font-size:.8rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){
  .packs-top{grid-template-columns:1fr;gap:10px}
  .packs-panel{display:flex;align-items:center;gap:12px;text-align:left;
    border:1px solid var(--line);border-radius:10px;padding:8px 12px}
  .packs-panel img{width:74px;margin:0;flex:none;padding:5px}
  .packs-panel figcaption{margin:0}
}

/* ------------------------------------------------ package tiers
   Before this, two of the four cards had a coloured border and two did not, which looked accidental.
   Now every card carries a band across its top, and the colour says what kind of card it is:
   slate = the starting point, orange = the popular one, gold = the most coverage, red = life safety.
   The band is on ::before because ::after is already carrying the card artwork. */
.pack{--tier:#7C8E9B;border-color:#D7DFE5}
.pack::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--tier);z-index:2}
.pack[data-pack="basics"]{--tier:#7C8E9B;border-color:#CFD9E0}
.pack[data-pack="doorbell"]{--tier:var(--adc);border-color:#F6C6A3}
.pack[data-pack="camera"]{--tier:var(--gold);border-color:#E7D89B}
.pack[data-pack="life"]{--tier:#C9372B;border-color:#F0BAB3}
.pack-best{border-color:#F6C6A3;box-shadow:0 8px 26px rgba(242,94,15,.14)}
.pack-tag{background:var(--tier)}
.pack[data-pack="camera"] .pack-tag{color:#2E2408}

/* ------------------------------------------------ back bar
   Injected by site.js when the visitor arrived here from another page of this site. It lives inside
   the header — which is already sticky — so the way back is still there three screens down and the
   two can never paint over each other. The click runs history.back(), which returns them to the
   exact spot they left, not the top of the page they came from. */
.backbar{background:var(--paper);border-top:1px solid var(--line)}
.backbar .wrap{padding-top:0;padding-bottom:0}
.bb-link{display:inline-block;padding:10px 2px;text-decoration:none;color:var(--muted);
  font:600 .86rem/1.2 'Archivo',sans-serif}
.bb-link:hover,.bb-link:focus{color:var(--adc)}
@media (max-width:960px){ .bb-link{font-size:.82rem;padding:9px 2px} }
@media print{ .backbar{display:none} }

/* ------------------------------------------------ "who are you with now?" on switch.html
   Three entry points for the searches nobody else answers — a Bell account sold to a.p.i., a Telus
   rate rise, an alarm gone quiet on 3G. Each card carries the date, because the date is the reason
   the page exists. */
.who-now{margin:34px 0 10px;padding-top:26px;border-top:1px solid var(--line)}
.who-now h2{font-family:'Archivo',sans-serif;font-size:1.32rem;margin:0 0 6px}
.who-now>p{margin:0 0 18px;color:var(--muted);max-width:74ch}
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.who-card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1.5px solid var(--line);
  border-top:4px solid var(--adc);border-radius:11px;padding:16px 17px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s}
.who-card:hover,.who-card:focus{border-color:var(--adc);box-shadow:0 8px 24px rgba(242,94,15,.13)}
.who-card b{font-family:'Archivo',sans-serif;font-size:1.02rem;color:var(--ink)}
.who-card span{font-size:.9rem;line-height:1.5;color:var(--muted)}
.who-card em{margin-top:auto;font-style:normal;font-weight:700;font-size:.88rem;color:var(--adc)}

/* ------------------------------------------------ promoted pages wear the main site's colours
   support, subscriber, moving, callme, hours, manuals, about and before-you-sign came from the
   Alarm.com site and kept its component styles, but they now sit at the root of accuratesecurity.ca
   as company pages. Marking the body .as-root reverts the accent from Alarm.com orange to the main
   site's red, so a visitor does not feel they have crossed onto a different website. The pages
   still inside /alarm-com/ are untouched and stay orange, which is correct — there they are the
   Alarm.com section. */
body.as-root{--adc:#7A1F2E; --adc-dark:#5C1522; --adc-tint:#F6EDEF}

/* ohs.css loads after site.css on the promoted pages, so its own nav tightening applies and is
   already tighter than the main site's — leave it alone. The one thing that did not carry over was
   the header button, which kept its full padding and pushed the row 32px past the gutter at 1280. */
@media (max-width:1400px){ body.as-root header.site .btn{padding:9px 13px;font-size:.88rem} }
@media (max-width:1080px){ body.as-root header.site .btn{padding:8px 10px;font-size:.82rem} }
/* ohs.css also sizes the wordmark for the Alarm.com header, where it ran larger — 176px wide on
   these pages against 76px everywhere else, which is most of the 29px the row was over by. */
body.as-root .brand-logo{height:46px;width:auto}
@media (max-width:640px){ body.as-root .brand-logo{height:38px} }