:root{
  /* Accurate Security's own accent. Burgundy, deliberately NOT First Alert red —
     see the .fa and .adc overrides at the foot of this file. */
  --red:#7A1F2E; --red-dark:#5C1522; --red-tint:#F6EDEF; --accent-lite:#E9A7B1;
  --ink:#0E1B24; --ink-soft:#33454F; --muted:#5C6E78;
  --steel:#1C5C7A; --steel-tint:#EAF2F6;
  --paper:#F6F8F9; --white:#FFFFFF; --line:#DFE7EB;
  --lcd-bg:#131F1A; --lcd:#8CE8A0;
  --radius:14px; --radius-sm:9px;
  --shadow:0 10px 30px rgba(14,27,36,.10);
  --wrap:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* The strip a browser can show above or below the page — overscroll, a zoom rounding gap, an extension's
   injected bar — takes the html background, not the body's. Dark here so it reads as the top bar above and
   the footer below, instead of a white band over the header. */
html{background:var(--ink)}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.08;letter-spacing:-0.015em}
.eyebrow{font-family:'Archivo',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--red);border-radius:2px}
section{padding:78px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;padding:15px 28px;border-radius:var(--radius-sm);text-decoration:none;border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(210,35,42,.32)}
.btn-red:hover{background:var(--red-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:#fff}

/* ---------- top utility bar ---------- */
.topbar{background:var(--ink);color:#cfe0e9;font-size:.86rem;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar strong{color:#fff}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-shield{width:44px;height:44px;background:var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;flex:none}
.brand-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.22rem;letter-spacing:-.01em;line-height:1.05}
.brand-sub{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links > a,.nav-links summary{white-space:nowrap}   /* "Alarm Response" is one label */
.nav-links a{text-decoration:none;font-weight:600;font-size:.98rem;color:var(--ink-soft)}
.nav-links a:hover{color:var(--red)}
.fa-chip{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;border-left:1px solid var(--line);padding-left:20px}
.fa-wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-style:italic;letter-spacing:.04em;color:var(--red);font-size:1.05rem}
.fa-tier{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.nav .btn{padding:11px 20px;font-size:.92rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:8px;padding:6px 12px;font-family:'Archivo',sans-serif;font-weight:700;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);padding:70px 0 64px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.55rem);font-weight:900;margin:18px 0 20px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lede{font-size:1.16rem;color:var(--ink-soft);max-width:34em;margin-bottom:28px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.lcd{display:inline-flex;align-items:center;gap:12px;background:var(--lcd-bg);color:var(--lcd);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.84rem;letter-spacing:.06em;padding:12px 18px;border-radius:8px;border:1px solid #24352d;box-shadow:inset 0 2px 8px rgba(0,0,0,.5)}
.lcd .led{width:9px;height:9px;border-radius:50%;background:var(--lcd);box-shadow:0 0 8px var(--lcd);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.lcd .led{animation:none}.btn:hover{transform:none}}
.hero-visual{position:relative}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;position:relative}
.panel-card .img-slot{aspect-ratio:3/2}
.panel-card .img-slot img{object-fit:cover;padding:0}
.hero-badge{position:absolute;top:-22px;right:-14px;background:#fff;padding:12px 18px;border-radius:10px;border:1px solid var(--line);box-shadow:0 10px 26px rgba(14,27,36,.18);transform:rotate(2deg);z-index:2}
.img-slot{background:var(--paper);border:1px dashed #c3d0d7;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-slot img{width:100%;height:100%;object-fit:contain;padding:10px;background:#fff}
.img-slot .ph{color:var(--muted);font-size:.85rem;font-weight:600;text-align:center;padding:18px;line-height:1.4}
.img-slot .ph b{display:block;color:var(--ink);font-family:'Archivo',sans-serif;font-size:.95rem;margin-bottom:4px}

/* ---------- trust bar ---------- */
.trust{background:var(--ink);color:#fff;padding:0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust .cell{padding:26px 18px;text-align:center;border-left:1px solid rgba(255,255,255,.09)}
.trust .cell:first-child{border-left:none}
.trust .num{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.85rem;line-height:1}
.trust .lbl{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:#9db4c0;margin-top:6px;font-weight:600}

/* ---------- partner band ---------- */
.partner-band{background:linear-gradient(120deg,var(--red) 0%,#b31b22 100%);color:#fff;padding:58px 0}
.partner-band .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.partner-band h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;margin-bottom:14px}
.partner-band p{color:#ffd9db;max-width:36em}
.partner-logo-card{background:#fff;border-radius:var(--radius);padding:30px;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.partner-logo-card .img-slot{aspect-ratio:5/2;border:none;background:#fff}
.partner-logo-card .cap{font-size:.8rem;color:var(--muted);margin-top:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}

/* ---------- solutions ---------- */
.solutions{background:#fff}
.sec-head{max-width:44em;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:900;margin:14px 0 12px}
.sec-head p{color:var(--muted);font-size:1.08rem}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sol-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease;background:#fff}
.sol-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.sol-card .img-slot{aspect-ratio:16/11;border:none;border-bottom:1px solid var(--line);border-radius:0}
.sol-card .img-slot img.photo{object-fit:cover;padding:0}
.sol-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.sol-tag{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--steel)}
.sol-body h3{font-size:1.28rem;font-weight:800}
.sol-body p{color:var(--muted);font-size:.97rem;flex:1}
.sol-body .go{font-family:'Archivo',sans-serif;font-weight:700;color:var(--red);text-decoration:none;font-size:.95rem}
.sol-body .go:hover{text-decoration:underline}
.sol-body .go.doc{color:var(--steel);font-size:.85rem;font-weight:600}
.sol-note{margin-top:28px;background:var(--steel-tint);border:1px solid #cfe1ea;border-radius:var(--radius-sm);padding:16px 22px;color:var(--steel);font-weight:600;font-size:.95rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* was inline on the img, where flex:none could not be relaxed at a breakpoint */
.sol-note-mark{height:46px;width:auto;flex:none}
@media (max-width:560px){ .sol-note{gap:14px} .sol-note-mark{height:38px} }

/* ---------- total connect ---------- */
.tc{background:#fff;padding:0 0 78px}
.tc .inner{display:grid;grid-template-columns:.55fr 1.45fr;gap:48px;align-items:center;background:var(--steel-tint);border:1px solid #cfe1ea;border-radius:var(--radius);padding:40px 44px}
.tc .phone{max-width:230px;margin:0 auto}
.tc .phone img{width:100%;height:auto;border-radius:18px;box-shadow:0 16px 36px rgba(14,27,36,.18)}
.tc h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:900;margin:12px 0 12px;color:var(--ink)}
.tc p{color:var(--ink-soft);max-width:42em}
@media (max-width:960px){.tc .inner{grid-template-columns:1fr;padding:30px 24px}.tc .phone{max-width:190px}}

/* ---------- about ---------- */
.about{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.about h2{font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:900;margin:14px 0 16px}
.about p{color:var(--ink-soft);margin-bottom:16px;max-width:36em}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.cred-stack{display:flex;flex-direction:column;gap:16px}
.cred{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;display:flex;gap:16px;align-items:flex-start;box-shadow:0 4px 14px rgba(14,27,36,.05)}
.cred .ic{width:42px;height:42px;flex:none;border-radius:9px;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:20px}
.cred b{font-family:'Archivo',sans-serif;font-size:1.02rem;display:block;margin-bottom:2px}
.cred span{color:var(--muted);font-size:.93rem;line-height:1.45}

/* ---------- why / pricing ---------- */
.why .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin-top:26px}
.why-item{padding:16px 0;border-bottom:1px solid var(--line)}
.why-item b{font-family:'Archivo',sans-serif;font-size:1rem;display:block;margin-bottom:3px}
.why-item span{color:var(--muted);font-size:.92rem;line-height:1.45}
.price-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:34px 32px;box-shadow:var(--shadow);position:sticky;top:96px}
.price-card .from{font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:#9db4c0;font-weight:700}
.price-card .amt{font-family:'Archivo',sans-serif;font-weight:900;font-size:3.3rem;line-height:1;margin:10px 0 4px}
.price-card .amt small{font-size:1.15rem;font-weight:700;color:#9db4c0}
.price-card .fine{color:#9db4c0;font-size:.88rem;margin-bottom:20px}
.price-card ul{list-style:none;margin:0 0 24px}
.price-card li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.96rem;display:flex;gap:10px}
.price-card li::before{content:"✓";color:var(--lcd);font-weight:700}
.price-card .btn{width:100%}

/* ---------- protocol ---------- */
.protocol{background:var(--paper);border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:36px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px}
.step .n{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--red);font-size:.85rem;letter-spacing:.08em;display:block;margin-bottom:8px}
.step p{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.protocol .more{margin-top:26px}

/* ---------- resources ---------- */
.resources{background:var(--paper);border-top:1px solid var(--line);padding:70px 0}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.res-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:24px}
.res-col h3{font-size:1.05rem;font-weight:800;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--red)}
.res-col a{display:flex;gap:9px;align-items:baseline;padding:8px 0;text-decoration:none;color:var(--ink-soft);font-size:.93rem;border-bottom:1px solid var(--paper)}
.res-col a::before{content:"⤓";color:var(--red);font-weight:700;flex:none}
.res-col a:hover{color:var(--red)}
@media (max-width:960px){.res-grid{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gallery{background:#fff;padding:78px 0 60px}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.g-item{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:#fff}
.g-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.g-item .cap{padding:14px 18px;font-size:.9rem;color:var(--muted);border-top:1px solid var(--line)}
.g-item .cap b{display:block;font-family:'Archivo',sans-serif;color:var(--ink);font-size:.98rem;margin-bottom:2px}
@media (max-width:960px){.g-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.c-lines{display:flex;flex-direction:column;gap:14px;margin:24px 0}
/* min-width:0 lets the text column shrink; overflow-wrap:anywhere makes it REFLOW into the
   smaller box instead of overhanging it. The email address is a single unbreakable token
   259px wide, which set the whole column's min-content at 320px and pushed the section
   sideways. Shrinking without wrapping would only have hidden the overflow from the ruler. */
/* min-width:0 lets the text column shrink; overflow-wrap:anywhere makes it REFLOW into the
   smaller box instead of overhanging it. The email address is a single unbreakable token
   259px wide, which set the whole column's min-content at 320px and pushed the section
   sideways. Shrinking without wrapping would only have hidden the overflow from the ruler. */
.c-line{display:flex;gap:14px;align-items:flex-start}
.c-line>div{min-width:0}
.c-line a{overflow-wrap:anywhere}
.c-line>div{min-width:0}
.c-line a{overflow-wrap:anywhere}
.c-line .ic{width:40px;height:40px;flex:none;border-radius:9px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px}
.c-line b{display:block;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.c-line a{font-weight:700;text-decoration:none;font-size:1.06rem}
.c-line a:hover{color:var(--red)}
.hours{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 22px;font-size:.94rem}
.hours div{display:flex;justify-content:space-between;padding:5px 0}
.hours b{color:var(--ink)}
.qform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.qform h3{font-size:1.4rem;font-weight:800;margin-bottom:6px}
.qform .sub{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.f-full{margin-bottom:14px}
label{font-weight:600;font-size:.85rem;display:block;margin-bottom:5px;color:var(--ink-soft)}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.98rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(28,92,122,.14)}
textarea{resize:vertical;min-height:96px}
.qform .btn{width:100%;margin-top:6px}
.qform .alt{text-align:center;color:var(--muted);font-size:.9rem;margin-top:14px}
.qform .alt a{font-weight:700;color:var(--red);text-decoration:none}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9db4c0;padding:56px 0 30px;font-size:.94rem}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-grid h4{font-family:'Archivo',sans-serif;color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.f-grid a{display:block;color:#9db4c0;text-decoration:none;padding:4px 0}
.f-grid a:hover{color:#fff}
.f-brand p{margin:12px 0 18px;max-width:26em}
.f-fa{display:inline-flex;flex-direction:column;background:#fff;border-radius:8px;padding:10px 16px;line-height:1.15}
.f-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.85rem;color:#6d838f}

@media (max-width:960px){
  .hero-grid,.partner-band .wrap,.about .wrap,.why .wrap,.contact .wrap{grid-template-columns:1fr;gap:38px}
  .sol-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .cell{border-left:none;border-top:1px solid rgba(255,255,255,.09)}
  /* minmax(0,1fr) rather than 1fr: a bare 1fr floors at min-content, so the longest
     link in a column ("Alarm Response Protocol") pushed the grid 25px wider than its
     own container at 360px and the page scrolled sideways by the 1.5px that showed. */
  .f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 24px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--paper)}
  .menu-toggle{display:block}
  .hcred-chip{display:none}
  .nav .btn{display:none}
  .price-card{position:static}
}
@media (max-width:560px){
  section{padding:56px 0}
  .steps,.why-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
}

/* ---------- subpage shell ---------- */
.page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.page-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.page-hero .wrap{position:relative;padding:110px 24px 90px;max-width:var(--wrap);margin:0 auto}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:900;max-width:16em;margin:16px 0 18px}
.page-hero p.lede{font-size:1.14rem;color:#d7e2e9;max-width:36em}
/* The eyebrow on a dark hero. The accent itself cannot be used here -- burgundy #7A1F2E
   against the near-black hero is about 1.5:1, unreadable -- so each brand gets a lightened
   form of its OWN colour rather than one shared pink left over from the red era. This was the
   last place a First Alert red still leaked onto Accurate Security's pages. */
.page-hero .eyebrow{color:var(--accent-lite)}
.page-hero .eyebrow::before{background:var(--accent-lite)}
.prose{max-width:46em}
.prose p{color:var(--ink-soft);margin-bottom:16px}
.prose h3{font-size:1.35rem;font-weight:800;margin:34px 0 10px}
.prose ul{margin:0 0 16px 1.2em;color:var(--ink-soft)}
.prose li{margin-bottom:8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.note-card{background:var(--steel-tint);border:1px solid #cfe1ea;border-radius:var(--radius-sm);padding:20px 24px;color:var(--steel);font-weight:600;margin:26px 0}
.proto-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.proto-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.proto-card h3{font-size:1.3rem;font-weight:800;margin-bottom:4px}
.proto-card .sub{font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.proto-card p{color:var(--ink-soft);font-size:.96rem;margin-bottom:12px}
.proto-card ul{margin:0 0 12px 1.2em;color:var(--ink-soft);font-size:.96rem}
.proto-card li{margin-bottom:6px}
.proto-card .fine{font-size:.85rem;color:var(--muted);font-style:italic}
.tip{border-left:4px solid var(--red);background:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 26px;margin-bottom:20px}
.tip h3{font-size:1.15rem;font-weight:800;margin:0 0 8px}
.tip p,.tip ul{color:var(--ink-soft);font-size:.97rem;margin-bottom:10px}
.tip ul{margin-left:1.2em}
.f-hsg{display:flex;align-items:center;gap:12px;margin-top:16px}
.f-hsg img{height:40px;width:auto;background:#fff;border-radius:6px;padding:5px 8px}
@media (max-width:960px){.split,.proto-grid{grid-template-columns:1fr}.page-hero .wrap{padding:80px 24px 64px}}

/* ---- Brand logo (owl-eyes wordmark) ---- */
.brand-logo{height:46px;width:auto;display:block}
@media(max-width:640px){.brand-logo{height:38px}}
.f-logo{height:64px;width:auto;display:block;margin-bottom:4px}

/* ---- Quote form v2: quick-answer chips ---- */
.req{color:var(--red);font-weight:800}
.f-lbl{display:block;font-weight:600;font-size:.92rem;margin:0 0 8px;color:var(--ink)}
.f-full label small,.f-full .f-lbl small,.f-row label small{font-weight:400;opacity:.65}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer;margin:0}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{display:inline-block;padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem;font-weight:600;color:var(--ink-soft);line-height:1.2;transition:all .15s}
.chips label:hover span{border-color:var(--muted)}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.f-note{border-radius:8px;padding:10px 14px;font-size:.9rem;margin-top:10px;font-weight:600}
.f-note-warn{background:var(--red-tint);border:1px solid #f3c2c5;color:#8a1218}
.f-more{border:1.5px solid var(--line);border-radius:12px;padding:0 16px;margin:4px 0 16px;background:var(--paper)}
.f-more summary{cursor:pointer;padding:14px 0;font-weight:700;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f-more summary::-webkit-details-marker{display:none}
.f-more summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;flex:none}
.f-more[open] summary::before{content:"\2212"}
.f-more summary small{font-weight:500;color:var(--muted);font-size:.8rem}
.f-more[open] summary{border-bottom:1px solid var(--line);margin-bottom:14px}
.f-h5{font-family:'Archivo',sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:18px 0 10px}
.f-h5:first-of-type{margin-top:4px}
input[type=file]{padding:9px;font-size:.88rem}
/* ---- Visitor counter ---- */
.f-counter{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#9db4c0;letter-spacing:.06em}
.f-counter b{background:#131F1A;color:#8CE8A0;padding:3px 8px;border-radius:5px;font-weight:600;letter-spacing:.12em}

/* ---- FAQ ---- */
.faq{padding:72px 0;background:var(--paper);border-top:1px solid var(--line)}
.faq-list{max-width:820px;margin-top:22px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0 18px}
.faq-list summary{cursor:pointer;padding:16px 0;font-weight:700;font-family:'Archivo',sans-serif;font-size:1.02rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--red);font-weight:800;font-size:1.3rem;flex:none}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list p{margin:0 0 16px;color:var(--ink-soft);line-height:1.6}

/* ---- Google review CTA ---- */
.reviews{padding:64px 0;background:#fff;border-top:1px solid var(--line)}
.rev-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.rev-lead{color:var(--ink-soft);font-size:1.05rem;max-width:34em;margin:10px 0 22px}
.rev-btns{display:flex;flex-wrap:wrap;gap:12px}
.rev-btn{display:inline-flex;align-items:center;gap:10px}
.rev-stars{color:#FFC107;letter-spacing:1px;font-size:1.05em}
.rev-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 28px;text-align:center}
.rev-card-stars{color:#FFC107;font-size:2rem;letter-spacing:4px;line-height:1;margin-bottom:8px}
.rev-card p{margin:6px 0}
.rev-small{color:var(--muted);font-size:.92rem}
@media(max-width:760px){.rev-grid{grid-template-columns:1fr}}

/* ---- Lifestyle video tiles + service-area lines ---- */
.g-item video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.card-vid{width:100%;border-radius:10px;margin:10px 0 12px;display:block}
.serve-line{color:var(--muted);font-size:.95rem;margin-top:10px}
.serve-line strong{color:var(--ink-soft);font-weight:600}
.f-addr{color:#9db4c0;font-size:.85rem;margin:10px 0 6px;line-height:1.5}

/* ---- Areas dropdown in nav ---- */
.nav-drop{position:relative;display:inline-block}
.nav-drop summary{cursor:pointer;list-style:none;font:inherit;color:inherit;padding:0}
.nav-drop summary::-webkit-details-marker{display:none}
.nav-drop summary::after{content:" \25BE";font-size:.75em;color:var(--red)}
.nav-drop[open] summary{color:var(--red)}
.nav-drop-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(14,27,36,.12);padding:10px;min-width:200px;z-index:60;display:grid}
.nav-drop-menu a{display:block;padding:8px 14px;border-radius:8px;white-space:nowrap;font-weight:600;color:var(--ink-soft)}
.nav-drop-menu a:hover{background:var(--red-tint);color:var(--red)}
@media(max-width:960px){
  .nav-drop{display:block}
  .nav-drop-menu{position:static;transform:none;border:none;box-shadow:none;padding:0 0 0 14px;min-width:0}
}

/* ---- Social buttons (topbar + footer bottom) ---- */
.topbar-social,.soc-wrap{display:inline-flex;gap:8px;vertical-align:middle;margin-left:14px}
.soc-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff !important;transition:background .15s}
.soc-btn:hover{background:var(--red)}
.fb-social{display:inline-flex;align-items:center;color:#9db4c0;font-size:.85rem;gap:4px}
.fb-social .soc-wrap{margin-left:8px}
@media(max-width:760px){.topbar-social{margin-left:8px}}

/* ------------------------------------------------ merged area pages
   Both sites used to carry a Nepean page targeting the same words. On one domain they competed, so
   they are now one page per area covering both platforms. These are the blocks that carry the half
   the main site did not have: the choice between a new system and keeping the panel already there,
   the local specifics, and the neighbourhood list. Built on the shared classes, so no second
   stylesheet is needed. */
.ar-doors{padding:44px 0;background:var(--paper);border-top:1px solid var(--line)}
.ar-doors h2{font-size:1.45rem;margin:4px 0 8px}
.ar-lede{max-width:62em;color:var(--ink-soft);line-height:1.65;margin:0 0 22px}
.ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){ .ar-grid{grid-template-columns:1fr} }
.ar-card{background:#fff;border:1.5px solid var(--line);border-top:4px solid var(--line);
  border-radius:12px;padding:20px 22px}
.ar-fa{border-top-color:var(--red)}
.ar-adc{border-top-color:#F25E0F}
.ar-tag{display:inline-block;font:700 .68rem/1 'Archivo',sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:5px;margin-bottom:10px}
.ar-fa .ar-tag{background:var(--red)}
.ar-adc .ar-tag{background:#F25E0F}
.ar-card h3{font-family:'Archivo',sans-serif;font-size:1.18rem;margin:0 0 7px}
.ar-card p{color:var(--ink-soft);line-height:1.6;margin:0 0 10px}
.ar-go{margin:0!important;font-weight:700}
.ar-fa .ar-go a{color:var(--red);text-decoration:none}
.ar-adc .ar-go a{color:#F25E0F;text-decoration:none}
.ar-go a:hover,.ar-go a:focus{text-decoration:underline}

.ar-localsec{padding:44px 0}
.ar-localsec h2{font-size:1.45rem;margin:4px 0 18px}
.ar-locals{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.ar-local h3{font-family:'Archivo',sans-serif;font-size:1.05rem;margin:0 0 6px}
.ar-local p{color:var(--ink-soft);line-height:1.6;margin:0}
.ar-local a{color:#F25E0F;font-weight:600}

.ar-hoods{padding:0 0 44px}
.ar-hoods h2{font-size:1.2rem;margin:0 0 8px}
.ar-hoodlist{color:var(--muted);line-height:1.8;max-width:70em;margin:0 0 10px}
.ar-drive{color:var(--ink-soft);font-weight:600;margin:0}

/* ------------------------------------------------ hub header: both credentials, neither leading
   The header used to carry the First Alert lockup alone, which told every visitor which platform
   this company is before offering them a choice between two. Both sit here now, at the same weight.
   Certified on both is a stronger claim than either one: it is the reason we have no stake in the
   answer. The full-size First Alert lockup still appears inside the First Alert material. */
.hcred-chip{display:flex;flex-direction:column;justify-content:center;gap:3px;
  border-left:1px solid var(--line);padding-left:16px}
.hcred{display:flex;align-items:baseline;gap:6px;line-height:1.15;white-space:nowrap}
.hcred b{font-family:'Archivo',sans-serif;font-weight:800;font-size:.8rem;color:var(--red);letter-spacing:.01em}
.hcred i{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.hcred-adc b{color:#F25E0F}

/* ------------------------------------------------ the two doors on the hub
   Everything true of both platforms is stated once above, then the visitor picks a line. Lifted
   from the standalone block so the styles live with the rest of the site. */
.as-doors{max-width:var(--wrap);margin:0 auto;padding:54px 20px;line-height:1.6}
.as-doors h2{font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.15;margin:0 0 10px}
.as-doors .d-sub{margin:0 0 22px;color:var(--ink-soft);max-width:68ch}
.as-doors .d-same{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 26px}
.as-doors .d-cell{background:#fff;padding:15px 18px}
.as-doors .d-cell b{display:block;font-size:1.22rem;line-height:1.2}
.as-doors .d-cell > span{display:block;font-size:.85rem;color:var(--muted);margin-top:3px}
.as-doors .d-pick{font-weight:700;margin:0 0 14px}
.as-doors .d-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:720px){ .as-doors .d-grid{grid-template-columns:1fr} .as-doors{padding:34px 16px} }
.as-doors .d-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);
  border-top:5px solid var(--line);border-radius:12px;padding:20px 22px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.as-doors .d-fa{border-top-color:var(--red)}
.as-doors .d-adc{border-top-color:#F25E0F}
.as-doors .d-fa:hover,.as-doors .d-fa:focus{border-color:var(--red);box-shadow:0 10px 30px rgba(210,35,42,.13);transform:translateY(-2px)}
.as-doors .d-adc:hover,.as-doors .d-adc:focus{border-color:#F25E0F;box-shadow:0 10px 30px rgba(242,94,15,.13);transform:translateY(-2px)}
.as-doors .d-tag{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:5px;margin-bottom:10px}
.as-doors .d-fa .d-tag{background:var(--red)}
.as-doors .d-adc .d-tag{background:#F25E0F}
.as-doors .d-card h3{font-size:1.25rem;margin:0 0 6px;line-height:1.2}
.as-doors .d-for{margin:0 0 14px;color:var(--ink-soft);font-size:.95rem}
.as-doors .d-list{margin:0 0 16px;padding:0;list-style:none;font-size:.92rem}
.as-doors .d-list li{padding:7px 0 7px 22px;border-top:1px solid var(--line);position:relative;color:var(--ink-soft)}
.as-doors .d-list li:first-child{border-top:0}
.as-doors .d-list li::before{content:'';position:absolute;left:4px;top:15px;width:7px;height:7px;border-radius:50%}
.as-doors .d-fa .d-list li::before{background:var(--red)}
.as-doors .d-adc .d-list li::before{background:#F25E0F}
.as-doors .d-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
/* `> b`, not `b`. The price rule was unscoped, so a <b> used for emphasis inside the fine-print
   line underneath inherited 1.4rem and came out bigger than the sentence it was emphasising. The
   sibling rule below has always used `> span`; this one should have matched it. */
.as-doors .d-price > b{font-size:1.4rem;display:block;line-height:1.1}
.as-doors .d-price > span b{font-size:inherit;font-weight:700;color:var(--ink-soft,#33454F)}
.as-doors .d-price > span{font-size:.82rem;color:var(--muted);display:block;margin-top:2px}
.as-doors .d-go{margin-top:14px;font-weight:700;font-size:.97rem}
.as-doors .d-fa .d-go{color:var(--red)}
.as-doors .d-adc .d-go{color:#F25E0F}
.as-doors .d-foot{margin:22px 0 0;padding:14px 16px;background:var(--paper);border-radius:10px;
  font-size:.9rem;color:var(--muted)}
.as-doors .d-foot b{color:var(--ink)} .as-doors .d-foot a{color:var(--red);font-weight:600}

/* ------------------------------------------------ header fit between phone and full desktop
   The nav gained an Alarm.com link and the header gained a second credential, and between 961px
   (where the mobile menu takes over) and about 1400px the row no longer fits: at 1280 the children
   measured 1224px against a 1160px wrap, so the page scrolled sideways. Tightened in steps, and the
   credentials chip — the least load-bearing thing in the row — is the first to go. */
@media (max-width:1560px){ .nav-links{gap:20px} .nav-links a{font-size:.95rem} }
@media (max-width:1400px){ .nav-links{gap:18px} .nav-links a{font-size:.94rem} }
@media (max-width:1320px){ .nav-links{gap:14px} .nav-links a{font-size:.89rem}
  header.site .btn-red{padding:9px 14px;font-size:.9rem} }
@media (max-width:1240px){ .hcred-chip{display:none} .nav-links{gap:16px} .nav-links a{font-size:.92rem} }
@media (max-width:1080px){ .nav-links{gap:12px} .nav-links a{font-size:.86rem}
  header.site .btn-red{padding:8px 11px;font-size:.84rem} }

/* ------------------------------------------------ the First Alert door
   Its landing page carries the same job the Alarm.com index does: say what this platform is for,
   point at the two panels, and be honest that the other door is often cheaper when there is already
   a panel on the wall. Built on the shared classes, red rather than orange. */
/* The card overhangs the band above by exactly (its -74px margin minus the band's 44px
   bottom padding) = 30px, at every width and every length of headline. This clears it. */
.fa-entry{padding:66px 0 56px}
@media (max-width:860px){ .fa-entry{padding-top:40px} }
.fa-entry .sec-head{margin-bottom:28px}
.sol-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0}
.sol-links .go{white-space:nowrap}
.fa-lede{max-width:64em;font-size:1.06rem;color:var(--ink-soft);line-height:1.65;margin:0 0 26px}
.fa-lede a{color:#F25E0F;font-weight:600}
.fa-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:720px){ .fa-two{grid-template-columns:1fr} }
.fa-pick{background:#fff;border:1.5px solid var(--line);border-top:4px solid var(--red);
  border-radius:12px;padding:22px 24px;display:flex;flex-direction:column}
.fa-tag{align-self:flex-start;font:700 .68rem/1 'Archivo',sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:5px 9px;border-radius:5px;margin-bottom:11px}
.fa-pick h2{font-family:'Archivo',sans-serif;font-size:1.35rem;margin:0 0 8px}
.fa-pick p{color:var(--ink-soft);line-height:1.6;margin:0 0 12px}
.fa-go{margin-top:auto!important;font-weight:700}
.fa-go a{color:var(--red);text-decoration:none}
.fa-go a:hover,.fa-go a:focus{text-decoration:underline}

.fa-shared{padding:44px 0 54px;background:var(--paper);border-top:1px solid var(--line)}
.fa-shared h2{font-size:1.45rem;margin:0 0 10px}
.fa-shared > .wrap > p{max-width:66em;color:var(--ink-soft);line-height:1.65}
.fa-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px!important}
.fa-links a{color:var(--red);font-weight:600;text-decoration:none}
.fa-links a:hover,.fa-links a:focus{text-decoration:underline}

/* .serve-line was written for the area pages, where it sits on white. On the dark .page-hero used
   by a door's landing page it was grey-on-near-black and barely readable. */
.page-hero .serve-line{color:#d7e2e9;font-size:1.02rem}
.page-hero .serve-line strong{color:#fff;font-weight:700}
.page-hero .serve-line a{color:#fff}
/* .fa-hero is described in one block, at the foot of this file. */


/* ------------------------------------------------ one colour per identity
   The hub and the shared pages are Accurate's own burgundy. A door swaps the accent to its
   platform's colour, so nobody's livery appears where it should not. The logo does not change:
   it is the company's mark, not a platform's. */
body.fa{ --red:#D2232A; --red-dark:#A81B21; --red-tint:#FBEDEE; --accent-lite:#FF8D92 }
body.adc{ --accent-lite:#FFB183 }   /* the Alarm.com door's own lightened orange */

/* Where a colour SIGNALS a platform rather than decorating a page, it is written literally, so it
   stays correct on the hub (burgundy), inside a door (red or orange) and on an area page alike. */
.hcred b{color:#D2232A}
.hcred-adc b{color:#F25E0F}
.as-doors .d-fa{border-top-color:#D2232A}
.as-doors .d-fa .d-tag{background:#D2232A}
.as-doors .d-fa .d-list li::before{background:#D2232A}
.as-doors .d-fa .d-go{color:#D2232A}
.as-doors .d-fa:hover,.as-doors .d-fa:focus{border-color:#D2232A;box-shadow:0 10px 30px rgba(210,35,42,.13)}
.ar-fa{border-top-color:#D2232A}
.ar-fa .ar-tag{background:#D2232A}
.ar-fa .ar-list li::before,.ar-fa .ar-go a{color:#D2232A}
.fa-pick{border-top-color:#D2232A}
.fa-tag{background:#D2232A}

/* ------------------------------------------------ credentials, shown in pairs
   A single manufacturer's logo in a shared footer put one brand's mark on the other's door. Both
   are named here instead, at matched weight — which is also simply what is true, and reads as a
   stronger claim than either alone. The full First Alert lockup still appears at size inside
   /first-alert/, where it belongs. */
.f-creds{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.f-cred{font-size:.86rem;color:#9db4c0;line-height:1.3}
.f-cred b{display:block;font-family:'Archivo',sans-serif;font-weight:700;color:#fff;font-size:.95rem}

.cred-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media (max-width:480px){ .cred-pair{grid-template-columns:1fr} }
.cred-one{background:#fff;padding:16px 18px;text-align:center}
.cred-one b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.06rem;line-height:1.2}
.cred-one span{display:block;font-size:.76rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.cred-fa b{color:#D2232A}
.cred-ac b{color:#F25E0F}

/* the "other platform" note at the foot of each door's business page */
.ac-other{padding:40px 0 50px;background:var(--paper);border-top:1px solid var(--line)}
.ac-other h2{font-size:1.35rem;margin:0 0 10px}
.ac-other p{max-width:66em;color:var(--ink-soft);line-height:1.65}
.ac-links{margin-top:14px!important;font-weight:700}
.ac-links a{color:#F25E0F;text-decoration:none}
.ac-links a:hover,.ac-links a:focus{text-decoration:underline}

/* --- the way out of a door -------------------------------------------------
   Present in both doors' headers. Not a section of the door: a door is a
   decision already made, and this is how you un-make it. Quiet by default,
   accented on hover, and it survives the narrow breakpoints because it is the
   item somebody who is lost actually needs. */
header.site .nav-links .nav-home{
  color:var(--muted,#5C6E78); font-weight:600;
  border-left:1px solid var(--line,#E3E9ED);
  margin-left:6px; padding-left:12px;
}
header.site .nav-links .nav-home:hover,
header.site .nav-links .nav-home:focus-visible{ color:var(--red) }
@media (max-width:980px){
  header.site .nav-links .nav-home{ border-left:0; margin-left:0; padding-left:0 }
}

/* --- the door band ---------------------------------------------------------
   Above the header, full width, in the door's own colour. Says which door you
   are in and gives the way back out. Not sticky: the header already is, and two
   stacked bars cost a phone a third of the fold. */
.door-bar{background:var(--db);color:#fff}
/* padding-block only: setting `padding:7px 0` here would wipe out .wrap's own side
   gutter, which is invisible at desktop (the wrap is centred and narrower than the
   viewport anyway) but puts the text flush against the screen edge on a phone. */
.door-bar .wrap{display:flex;align-items:center;gap:10px;padding-top:7px;padding-bottom:7px;
  font-size:.82rem;line-height:1.3;letter-spacing:.01em}
/* nowrap on both halves: without it the band breaks mid-phrase on a phone
   ("<- Accurate / Security  /  Alarm.com / systems") and the separator ends up
   floating between two stacked fragments. */
.door-bar a.db-back{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  padding:2px 0;border-bottom:1px solid rgba(255,255,255,.45)}
.door-bar a.db-back:hover,.door-bar a.db-back:focus-visible{border-bottom-color:#fff}
.door-bar .db-sep{opacity:.5;font-weight:400}
.door-bar .db-here{font-weight:600;opacity:.95;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.db-fa{--db:#D2232A}
.db-adc{--db:#F25E0F}
@media (max-width:520px){
  .door-bar .wrap{font-size:.74rem;gap:6px;padding-top:6px;padding-bottom:6px}
}

/* The logo is never the thing that gives way. `.brand` is a flex item and the
   mark is height-constrained with width:auto, so an overfull nav row was
   shrinking it -- to literally 0px on the First Alert door. */
header.site .brand{flex:0 0 auto}

/* --- the First Alert door's header ------------------------------------------
   Its nav carries two items the hub's does not -- Home systems and Business
   systems, which on the hub were the top-level "Residential" and "Commercial"
   -- so the row runs out of room a breakpoint sooner than the ladder above
   allows for. Tighten the door's own gaps first; only drop the credential when
   that is no longer enough. */
body.fa header.site .nav{gap:20px}
body.fa header.site .nav-links{gap:13px}
body.fa header.site .nav-links a{font-size:.9rem}
body.fa header.site .btn{padding:9px 13px;font-size:.88rem}
@media (max-width:1560px){
  body.fa header.site .nav{gap:20px}
  body.fa header.site .nav-links{gap:13px}
  body.fa header.site .nav-links a{font-size:.9rem}
  body.fa header.site .btn{padding:9px 13px;font-size:.88rem}
}
@media (max-width:1360px){
  body.fa header.site .nav{gap:16px}
  body.fa header.site .nav-links{gap:11px}
}
@media (max-width:1270px){ body.fa .hcred-chip{display:none} }

/* --- the Alarm.com door's header --------------------------------------------
   Ten nav items in a 1,400px wrap: the row measured 1,583px, so it had always
   overflowed its own container. It only showed as a sideways-scrolling page
   between about 1,560 and 1,780px, where the viewport margins stopped being
   wide enough to swallow the spill -- which is why it survived testing at 1280
   and at 1920. Tightened at every width rather than at a breakpoint, because
   the wrap is capped and the row is the same size whatever the viewport is. */
.adc-chip{flex:0 0 auto}
@media (min-width:1081px){ body.adc header.site .nav-links{gap:14px} }

/* ohs.css tightens this header at 1,200 and at 1,080 but leaves 1,200-1,400 alone, and the
   wrap is capped at 1,400 -- so a 1,280 or 1,366 laptop, which is most of the traffic, fell
   in the untouched band and scrolled sideways. */
@media (max-width:1400px){
  body.adc header.site .nav{gap:16px}
  body.adc header.site .nav-links{gap:11px}
  body.adc header.site .nav-links a{font-size:.86rem}
  body.adc .brand-logo{height:46px}
  body.adc header.site .btn-adc{padding:9px 12px;font-size:.86rem}
}

/* The band between ohs.css's 1,080 step and the point the nav collapses at 960 had nothing in it,
   and the row overflowed through all of it — 1px at 1,020, 51px at 970. A 1024 tablet held sideways
   lands there, so does a window dragged to half of a 1920 screen. Gaps and type first; the chip
   goes last, the same order the First Alert door's header uses. */
@media (max-width:1080px){
  body.adc header.site .nav{gap:11px}
  body.adc header.site .nav-links{gap:8px}
  body.adc header.site .nav-links a{font-size:.8rem}
  body.adc .brand-logo{height:38px}
  body.adc header.site .btn-adc{padding:8px 10px;font-size:.79rem}
}
@media (max-width:1030px){ body.adc .adc-chip{display:none} }

/* --- narrow footer ---------------------------------------------------------- */
@media (max-width:420px){ .f-grid{gap:22px} }

/* the credential, at the right of the band. Small, quiet, and out of the nav's way. */
.door-bar .db-cred{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;opacity:.92;white-space:nowrap}
@media (max-width:640px){ .door-bar .db-cred{display:none} }

/* --- the two door links in the hub's nav ------------------------------------
   They are the only two items in that row that are a choice rather than a page,
   so they carry their platform's colour, the same signal the credential chip on
   the right of the header gives. Colour is never the only cue: same weight as
   their neighbours, same underline on hover and focus, and the words are the
   brand names. The Alarm.com orange is taken a step darker here than the door's
   own #F25E0F -- 4.6:1 against the white header instead of 3.5:1 -- because
   this is small text on white. The door keeps the true orange, where it is
   large or reversed out of dark. */
header.site .nav-links a.nd-fa{color:#D2232A}
header.site .nav-links a.nd-adc{color:#D8500A}
header.site .nav-links a.nd-fa:hover,header.site .nav-links a.nd-fa:focus-visible{color:#A81B21}
header.site .nav-links a.nd-adc:hover,header.site .nav-links a.nd-adc:focus-visible{color:#B34206}

/* --- the First Alert door's hero: their banner, not ours -------------------
   Still a real two-column grid rather than an absolutely positioned image. The
   first attempt at this hero pinned the logo to the right and capped the text
   at 62ch to keep them apart; 62ch is wider than the column actually is, so the
   headline ran straight under the logo. An overlap that depends on a character
   count matching a pixel width is a coin flip at every viewport -- a grid track
   cannot overlap by construction.

   CONTRAST IS BY CONSTRUCTION, NOT BY SPOT CHECK. White on #D2232A is 5.22:1.
   The gradient therefore only ever goes DARKER than #D2232A -- #B71E24 in the
   far corner is 6.51:1 -- so every pixel of the field is at least 5.22:1 and no
   viewport, no zoom level and no future copy change can land the text on a spot
   that fails. A white sheen or highlight, which is the obvious way to give a
   flat red some depth, would have taken the lightest region to about 4.28:1 and
   put the serve-line under AA. That is why there is no highlight. */
.fa-hero{
  /* .page-hero sets overflow:hidden to clip its background photograph. This hero has no
     photograph and does need to let the card through its bottom edge. */
  overflow:visible;
  background:#CC2228;
  background-image:radial-gradient(140% 130% at 4% -14%,
                   #CC2228 0%, #CC2228 40%, #96161C 100%);
  color:#fff;
  /* section{padding:78px 0} was never zeroed on .page-hero, so it stacked on
     .wrap's own padding: the hero was 504px tall around 224px of content. The
     wrap owns the spacing here; the section owns none. */
  padding:0;
}
.fa-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:52px;align-items:center;padding:46px 24px 44px}

/* White, because --accent-lite (#FF8D92) on this red measures 2.36:1. The words
   changed as well: the eyebrow used to read PREMIER PRO PARTNER, which is the
   same claim the badge 300px to its right makes in much larger type. */
.fa-hero .eyebrow{color:#fff}
.fa-hero .eyebrow::before{background:rgba(255,255,255,.8)}
.fa-hero .serve-line{color:rgba(255,255,255,.95)}
.fa-hero .serve-line strong,.fa-hero .serve-line a{color:#fff}
.fa-hero .serve-line a{text-decoration-color:rgba(255,255,255,.55)}
/* A phone number is one token. Between about 880 and 1100 the column is narrow
   enough that it broke as "613-233- / 1115", which reads as two numbers. */
.fa-hero .serve-line a[href^="tel:"]{white-space:nowrap}

/* The white box. This is First Alert's actual mark -- the red wordmark with
   "Premier Pro Partner" under it in black -- which needs white behind it. The
   knocked-out white version only ever existed because the old hero was dark;
   it is still in /images if a dark treatment is ever wanted again. */
/* The card hangs out of the bottom of the band. This is the whole trick for "make it bigger
   and calm the red down", which pull in opposite directions if the card stays inside: a taller
   card inside a band makes the BAND taller, which is more red, not less. Hanging it over the
   edge lets the box grow while the red shrinks.

   A negative margin on a grid item, not absolute positioning -- the two columns are still
   separate tracks, so the text and the card cannot overlap however the copy changes. This hero
   has already been through the other version: the lockup pinned to the right with a 62ch cap on
   the headline meant to keep them apart, which failed the moment the column was narrower than
   62 characters. */
.fa-badge{background:#fff;border-radius:16px;padding:22px 22px 18px;
  width:min(400px,31vw);box-shadow:0 22px 52px rgba(55,5,8,.34);
  display:grid;gap:13px;align-self:end;margin-bottom:-74px}
.fa-badge-mark{width:66%;max-width:224px;height:auto}
.fa-badge-kit{width:100%;height:auto;border-top:1px solid var(--line);padding-top:13px}
.fa-badge-cap{font-size:.76rem;line-height:1.35;color:var(--muted);letter-spacing:.005em}

.fa-hero .btn-fa{background:#fff;color:#B71E24;border-color:#fff;margin-top:22px}
.fa-hero .btn-fa:hover,.fa-hero .btn-fa:focus-visible{background:#FFF1F1;color:#8E1519}
.fa-hero .btn-fa:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:1100px){
  .fa-badge{width:300px;padding:18px 18px 15px}
  .fa-hero .wrap{gap:34px}
}
@media (max-width:860px){
  /* Stacked, and KEPT. The old rule hid the logo on a phone because the eyebrow
     directly above already said Premier Pro Partner. The eyebrow no longer says
     it, so this box is the only place the credential appears at all.
     The overhang goes here: with one column the card is above the text, so
     hanging it downward would drop it straight onto the headline. */
  .fa-hero .wrap{grid-template-columns:1fr;gap:24px;padding:38px 24px 40px}
  /* The card goes BELOW the text on a phone. It used to go above, back when it was a small
     logo strip -- a brand mark ahead of the headline is fine. Now that it is a 300px-tall
     product card, putting it first meant you landed on a logo and a photograph and had to
     scroll to find out what the page was. Headline, price, button, then the card. */
  .fa-badge{width:min(330px,100%);padding:16px 16px 14px;
            align-self:start;margin-bottom:0}
}

/* --- phone-line-monitoring.html --------------------------------------------
   The one page on the site that sells the absence of equipment, so it is plain
   prose in a single narrow column rather than cards. `.narrow` and the tick
   lists are defined here because this is the first root page to need them. */
.wrap.narrow{max-width:760px}
.wrap.narrow h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:34px 0 12px;line-height:1.2}
.wrap.narrow p{margin:0 0 14px}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding:8px 0 8px 30px;border-top:1px solid var(--line)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:'✓';position:absolute;left:4px;top:8px;color:#2F8F5B;font-weight:700}
.ticks-no li::before{content:'✕';color:var(--muted)}
.note-warn{border-left:4px solid var(--red);background:var(--red-tint)}
.wrap.narrow details{border-top:1px solid var(--line);padding:12px 0}
.wrap.narrow details summary{cursor:pointer;font-weight:700}
.wrap.narrow details p{margin:10px 0 0;color:var(--ink-soft,#33454F)}

/* --- the third card --------------------------------------------------------
   Three across above 1000px, two at tablet, one on a phone. The monitoring-only
   card is deliberately the quietest of the three: slate rather than a platform
   colour, because it is the absence of a platform. */
.as-doors .d-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Three across down to 760, then straight to one. There is no two-column step, because three cards
   in two columns always leaves one alone on its own row — and the three are a comparison, so the
   row is the point. Tightened across the band instead: at 760 each card is about 230px, which a
   four-bullet list reads fine at. */
@media (max-width:1000px){
  .as-doors .d-grid-3{gap:12px}
  .as-doors .d-grid-3 .d-card{padding:16px 15px}
  .as-doors .d-grid-3 .d-card h3{font-size:1.1rem}
  .as-doors .d-grid-3 .d-for{font-size:.88rem;margin-bottom:11px}
  .as-doors .d-grid-3 .d-list{font-size:.85rem}
  .as-doors .d-grid-3 .d-list li{padding:6px 0 6px 19px}
  .as-doors .d-grid-3 .d-list li::before{top:13px;width:6px;height:6px}
  .as-doors .d-grid-3 .d-price > b{font-size:1.2rem}
  .as-doors .d-grid-3 .d-price > span{font-size:.76rem}
  .as-doors .d-grid-3 .d-go{font-size:.88rem;margin-top:11px}
}
@media (max-width:860px){
  .as-doors .d-grid-3{gap:10px}
  .as-doors .d-grid-3 .d-card{padding:14px 12px}
  .as-doors .d-grid-3 .d-card h3{font-size:1.02rem}
  /* The Alarm.com tag is the longest of the three and wrapped to two lines here, which pushed
     that card's heading down a line and broke the row the three headings read as. */
  .as-doors .d-grid-3 .d-tag{font-size:.57rem;letter-spacing:.02em;padding:3px 7px}
  .as-doors .d-grid-3 .d-for{font-size:.84rem}
  .as-doors .d-grid-3 .d-list{font-size:.82rem}
  .as-doors .d-grid-3 .d-go{font-size:.84rem}
}
@media (max-width:760px){ .as-doors .d-grid-3{grid-template-columns:1fr} }
.as-doors .d-std{border-top-color:#5C6E78}
.as-doors .d-std .d-tag{background:#5C6E78}
.as-doors .d-std .d-list li::before{background:#5C6E78}
.as-doors .d-std .d-go{color:#33454F}
.as-doors .d-std:hover,.as-doors .d-std:focus{border-color:#5C6E78;
  box-shadow:0 10px 30px rgba(92,110,120,.18);transform:translateY(-2px)}

/* The First Alert door's nav gained a Packages item when the configurator went in, which put the
   row over between 961 and 1140px — the band between the last tightening step and the point the
   nav collapses to the Menu button at 960. Tightened rather than hiding the item: a link to the
   thing that prices the system is not what should disappear first on a laptop. */
@media (max-width:1140px){
  body.fa header.site .nav{gap:12px}
  body.fa header.site .nav-links{gap:8px}
  body.fa header.site .nav-links a{font-size:.83rem}
  body.fa header.site .btn{padding:8px 10px;font-size:.82rem}
  body.fa .brand-logo{height:38px}
}

/* --- the area pages' three ways ---------------------------------------------
   Three across above 1000px, two at tablet, one on a phone. A bare two-column
   grid left the third card orphaned on its own row. */
.ar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Same as the hub's three doors, and for the same reason — a two-column step orphans the third
   card, and these three are read across rather than down. */
@media (max-width:1000px){
  .ar-grid{gap:12px}
  .ar-grid > *{padding:16px 15px}
  .ar-grid h3{font-size:1.05rem}
}
@media (max-width:860px){
  .ar-grid{gap:10px}
  .ar-grid > *{padding:14px 12px}
}
@media (max-width:760px){ .ar-grid{grid-template-columns:1fr} }
/* Monitoring only is the absence of a platform, so it is the one card without a
   platform colour. Same treatment as the third card on the hub. */
.ar-std{border-top-color:#5C6E78}
.ar-std .ar-tag{background:#5C6E78}
.ar-std .ar-go a{color:#33454F;text-decoration:none}

/* --- the way back into a door, on a shared page (js/door.js) ----------------
   The same strip a door draws at its own top, so it reads as the section the
   visitor is still in rather than as a new piece of furniture. It sits inside
   the sticky header, which is why it has a top border instead of sitting flush. */
header.site .door-back{border-top:1px solid rgba(255,255,255,.25)}
header.site .door-back .wrap{padding-top:6px;padding-bottom:6px}
header.site .door-back .db-back{font-size:.84rem}

/* --- the camera guide's comparison tables ------------------------------------
   Two columns of facts side by side, which is the only honest way to answer "what is the difference
   between these". Wrapped in a scroller because a three-column table of sentences does not fit a
   phone and squeezing it until it does makes it unreadable instead of just narrow. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 8px;
  border:1px solid var(--line);border-radius:10px;background:#fff}
table.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
table.cmp th,table.cmp td{padding:11px 14px;text-align:left;border-top:1px solid var(--line);
  vertical-align:top;line-height:1.5}
table.cmp thead th{border-top:0;border-bottom:2px solid var(--line);font-size:.78rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
table.cmp tbody th{width:9.5rem;font-weight:700;color:var(--ink-soft,#33454F);font-size:.88rem}
table.cmp tbody tr:first-child td,table.cmp tbody tr:first-child th{border-top:0}
table.cmp .num{font-family:'IBM Plex Mono',monospace;text-align:right;white-space:nowrap}
@media (max-width:640px){ table.cmp{min-width:480px;font-size:.9rem} table.cmp tbody th{width:7rem} }

/* --- the First Alert nav, one item wider ------------------------------------
   The door's nav gained a Cameras item with the camera guide and the row went over between its
   1,140 tightening step and the 960 collapse — 9px at 1,020, 49px at 970.

   THIS HAS TO BE LAST IN THE FILE. The 1,140 block sits far below the 1,270 one, so a rule placed
   beside its siblings matched at 1,000px and then lost to the later 1,140 block on position alone —
   same specificity, so the cascade decides, and nothing moved. */
@media (max-width:1070px){
  body.fa header.site .nav{gap:10px}
  body.fa header.site .nav-links{gap:7px}
  body.fa header.site .nav-links a{font-size:.78rem}
  body.fa header.site .btn{padding:7px 9px;font-size:.77rem}
  body.fa .brand-logo{height:34px}
}

/* --- the camera guide's spec cards ------------------------------------------
   Picture, price, part number and the real specification, one card each. Two up on a laptop and one
   on a phone: a four-across grid of spec lists is unreadable at any width worth having. */
.cam-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 8px}
@media (max-width:820px){ .cam-cards{grid-template-columns:1fr} }
.cam{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.cam>img{display:block;width:100%;height:190px;object-fit:contain;background:var(--wash,#f7f9fb);
  padding:14px}
.cam-b{padding:16px 18px 18px}
.cam-b h3{margin:0;font-size:1.15rem}
.cam-p{margin:4px 0 2px;font-family:'IBM Plex Mono',monospace;font-size:1.15rem;font-weight:600;
  color:var(--red)}
.cam-p span{font-family:'Barlow',sans-serif;font-size:.8rem;font-weight:500;color:var(--muted)}
.cam-t{margin:6px 0 10px;color:var(--ink-soft,#33454F);font-size:.95rem;line-height:1.5}
.cam-b ul{margin:0;padding-left:18px;font-size:.92rem;line-height:1.5}
.cam-b li{margin:5px 0}

/* A two-column costs table does not need 560px, and at two columns it fits a 320px screen whole —
   which is the point: the row that read as a duplicate only did so because the column telling them
   apart had scrolled away. */
table.cmp.cmp-costs{min-width:0}
table.cmp.cmp-costs td:first-child{line-height:1.5}
.keeps{display:inline-block;font-style:normal;font-weight:600;font-size:.72rem;white-space:nowrap;
  color:var(--muted);background:var(--wash,#f7f9fb);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:1px}
@media (max-width:640px){ table.cmp.cmp-costs{font-size:.88rem}
  table.cmp.cmp-costs th,table.cmp.cmp-costs td{padding:10px 9px} }

/* The tables that CANNOT fold — four columns of real content — used to cut off silently. A fade
   appears at whichever edge still has content past it and goes when you reach that end: the two
   fixed layers are painted against the scrollport, the two gradients scroll with the content and
   cover them up. No script. */
.scroll-x{
  background:
    linear-gradient(to right, var(--white,#fff) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--white,#fff) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(14,27,36,.16), rgba(14,27,36,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(14,27,36,.16), rgba(14,27,36,0)) right center;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* .num is mono + nowrap + right-aligned, and the right-align earns its place in the two-column
   costs table where the prices face a column of text. In the four-column comparison every other row
   starts at the left of its cell, so right-aligned prices were the one row the eye had to chase. */
table.cmp.cmp-specs .num{text-align:left}

/* The "already have a system" lookup on the First Alert door. Its own classes rather than the
   Alarm.com door's — those live in ohs.css, which this door does not load, and the two want
   different accents anyway. */
.ys-look{margin:18px 0 10px;padding:18px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper,#F6F8F9)}
.ys-l{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
#ysModel{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  font:500 1rem 'Barlow',sans-serif;background:#fff;color:var(--ink,#0E1B24)}
#ysModel:focus{outline:2px solid var(--red);outline-offset:1px}
.ys-brands{margin-top:12px}
.ys-brands>summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--red);
  text-decoration:underline;text-underline-offset:3px}
.ys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px;margin-top:12px}
.ys-b{cursor:pointer;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font:600 .93rem/1.3 'Barlow',sans-serif;color:var(--ink,#0E1B24)}
.ys-b small{display:block;margin-top:3px;font-weight:500;font-size:.76rem;line-height:1.4;
  color:var(--muted)}
.ys-b:hover{border-color:var(--red)}
.ys-ans{margin-top:14px;padding:14px 16px;border-radius:10px;border:1px solid var(--line);
  border-left-width:4px;background:#fff}
.ys-ans[hidden]{display:none}
.ys-ans h3{margin:0 0 6px;font-size:1.08rem}
.ys-ans p{margin:0;line-height:1.55}
.ys-good{border-left-color:#1C7C45;background:#F2FAF5}
.ys-ok{border-left-color:var(--red)}
.ys-warn{border-left-color:#B3261E;background:#FDF3F2}

/* The last 10px. With Help folded in, the First Alert row fits everywhere above 1,000px; between
   there and the 961 handover to the burger it was still 2-10px over. Gaps only — the type is
   already at 12.48px and anything smaller stops being a nav. */
@media (max-width:1000px){
  body.fa header.site .nav{gap:9px}
  body.fa header.site .nav-links{gap:6px}
  body.fa header.site .btn{padding:7px 10px;font-size:.82rem}
}

/* "Get a Quote" was breaking across two lines in the First Alert header — the door's nav squeezes
   the button harder than the hub's does, and nothing told it not to wrap. The Alarm.com header has
   carried nowrap on its own button all along; this is the same line on this door. */
body.fa header.site .btn{white-space:nowrap}

/* The burger takes over at 960 for the whole site, which was right for a seven-item nav. The First
   Alert door now carries nine plus two dropdowns, and the last pixel before the handover — 961 —
   was still 16px over however hard the gaps were squeezed. Rather than shrink the type below
   12.48px to win one pixel column, this door hands over 20px earlier. 961-980 becomes the mobile
   menu, which on a nav this long is the better of the two anyway. */
@media (max-width:980px){
  body.fa header.site .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;flex-direction:column;gap:0;padding:10px 24px 18px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  body.fa header.site .nav-links.open{display:flex}
  body.fa header.site .nav-links a{padding:12px 0;border-bottom:1px solid var(--paper)}
  body.fa header.site .menu-toggle{display:block}
}

/* The "already have a system" band, above the packages on the First Alert index — the point where
   the page stops describing and starts asking for a decision, which is exactly when somebody who
   already owns a panel needs catching. */
.ys-band{background:var(--paper,#F6F8F9);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:46px 0}
.ys-band-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;
  align-items:start}
@media (max-width:860px){ .ys-band-in{grid-template-columns:1fr;gap:22px} .ys-band{padding:34px 0} }
.ys-band h2{margin:6px 0 12px;font-size:1.8rem;line-height:1.2}
@media (max-width:620px){ .ys-band h2{font-size:1.45rem} }
.ys-band p{margin:0 0 12px;line-height:1.6;color:var(--ink-soft,#33454F)}
.ys-band-p{font-size:.96rem}
.ys-band .btn{margin-top:4px}
.ys-band-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ys-band-l li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  border-left:4px solid var(--red)}
.ys-band-l b{display:block;font-size:.97rem}
.ys-band-l span{display:block;margin-top:2px;font-size:.85rem;color:var(--muted);line-height:1.45}

/* A card with no price yet. It reads as deliberate rather than broken, and it disappears the moment
   a cost goes in the console, because the card then prints a real figure like the other four. */
.cam-p-tbd{font-family:'Barlow',sans-serif;font-size:1rem;color:var(--muted)}
.cam-p-tbd span{display:block;font-size:.8rem}

/* The accuracy notice. Quiet on purpose — it is a thing somebody should be able to find and read,
   not a wall between them and the prices. */
.accuracy{padding:40px 0 10px}
.accuracy h2{margin:6px 0 14px}
.acc-note a{display:block;margin-top:8px;font-weight:600}
.f-acc{opacity:.85;max-width:64em}
.f-acc a{text-decoration:underline;text-underline-offset:2px}

/* The escape hatch. It existed once, on the Alarm.com door, styled only in that door's sheet — so
   the hub and the First Alert door could not carry one. These are the same rules against this
   side's accent. Dashed on purpose: it reads as an aside rather than another thing to do. */
.bail{margin:14px 0 0;padding:13px 15px;border:1px dashed var(--red);border-radius:10px;
  background:#FDF6F6;font-size:.94rem;line-height:1.55;color:var(--ink-soft,#33454F)}
.bail b{display:block;font-family:'Archivo',sans-serif;font-size:.97rem;color:var(--ink);
  margin-bottom:3px}
.bail p{margin:0 0 12px}
.bail a:not(.btn){font-weight:700;color:var(--red)}
.bail-big{padding:18px 20px;border-width:1.5px;text-align:center;margin:26px 0}
.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}

/* In the quote dialog it is one line and a button: a modal with a paragraph of reassurance in it is
   a modal nobody reads, and the point is to be seen on the way past, not studied. */
.bail-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 13px}
.bail-mini b{margin:0;font-size:.9rem;flex:1 1 15rem}
.btn-sm{padding:7px 13px;font-size:.85rem;white-space:nowrap}

/* The contact page's two columns were an INLINE STYLE — grid-template-columns:.9fr 1.1fr with no
   media query anywhere, because an inline style cannot carry one. So it stayed two columns at every
   width and the page scrolled sideways below about 420px: 447px of content in a 375px window, with
   the quote form pushed half off the right edge. It has been doing that since the page was written;
   it surfaced in the sweep after the call-me block went in, which sits inside the same container. */
.ct-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;padding:0}
@media (max-width:860px){ .ct-grid{grid-template-columns:1fr;gap:30px} }

/* "Starting from" leads the price rather than sharing its size. The <b> is the 1.4rem price line,
   so anything inside it inherits that unless it is told otherwise — which is the same trap that
   made the fine print's emphasis bigger than the sentence around it. Scoped hard enough that a
   plain `i` rule cannot reach it. */
.as-doors .d-price b i.dfrom{display:block;font-style:normal;font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}