/* Cameras — native interior page (concept 2026-08). Namespace: .cx- */

.cx { --cx-navy: #0D1B33; --cx-navy-2: #122342; --cx-line: rgba(255,255,255,.1); }
.cx h1, .cx h2, .cx h3 { font-family: var(--sans); margin: 0; }
.cx-eyebrow {
  font: 800 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 14px;
}
.cx-eyebrow.center { text-align: center; }
.cx-center { text-align: center; }
.cx svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */
.cx-hero { position: relative; background: var(--cx-navy); color: #fff; overflow: hidden; }
.cx-hero-photo {
  position: absolute; inset: 0 0 0 34%;
  background-size: cover; background-position: 72% center;
}
.cx-hero-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cx-navy) 0%, rgba(13,27,51,.86) 22%, rgba(13,27,51,.25) 55%, rgba(13,27,51,0) 75%);
}
.cx-hero-grid { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 90px; }
.cx-hero-copy { max-width: 590px; }
.cx-hero h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }
.cx-hero h1 em { font-style: normal; color: var(--brand); }
.cx-sub { font-size: 17px; line-height: 1.6; color: #C9D6EA; margin: 18px 0 30px; max-width: 440px; }
.cx-hero-actions { display: flex; gap: 14px; align-items: center; margin-bottom: 34px; }
.cx-btn-ghost {
  display: inline-flex; align-items: center; font: 700 15px/1 var(--sans); color: #fff;
  text-decoration: none; padding: 16px 28px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.45); transition: border-color .25s, background .25s;
}
.cx-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* ---------- solutions ---------- */
.cx-solutions { padding: 90px 0; background: #fff; }
.cx-sol-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; margin-bottom: 56px; }
.cx-solutions h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; font-weight: 800; color: var(--navy); }
.cx-sol-copy > p:last-child { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 16px 0 0; max-width: 420px; }
.cx-sol-photo { margin: 0; }
.cx-sol-photo img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(13,27,51,.18); }

.cx-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cx-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 30px 24px 26px;
  text-align: center; background: #fff; transition: box-shadow .25s, transform .25s;
}
.cx-card:hover { box-shadow: 0 16px 40px rgba(13,27,51,.1); transform: translateY(-3px); }
.cx-card-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; color: var(--brand); margin-bottom: 14px; }
.cx-card-ico svg { width: 40px; height: 40px; stroke-width: 1.4; }
.cx-card h3 { font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.cx-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ---------- hardwired / cloud detail ---------- */
.cx-detail { padding: 20px 0 40px; background: #fff; }
.cx-det-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; padding: 40px 0; }
.cx-det-row figure { margin: 0; }
.cx-det-row img { width: 100%; height: auto; border-radius: 16px; }
.cx-det-flip figure { order: 2; }
.cx-det-row h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; color: var(--navy); margin-bottom: 16px; }
.cx-det-row p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.cx-det-lead { font-size: 16px; }
.cx-det-list { list-style: none; margin: 6px 0 0; padding: 0; }
.cx-det-list li { position: relative; padding: 7px 0 7px 32px; font-size: 15px; line-height: 1.55; color: var(--navy); }
.cx-det-list li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand);
}
.cx-det-list li::after {
  content: ''; position: absolute; left: 4.5px; top: 14.5px; width: 10px; height: 6.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

/* ---------- why ---------- */
.cx-why { background: linear-gradient(140deg, var(--cx-navy) 0%, var(--cx-navy-2) 100%); color: #fff; padding: 90px 0; }
.cx-why-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
.cx-why h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; font-weight: 800; }
.cx-why-copy > p { font-size: 16px; line-height: 1.65; color: #C9D6EA; margin: 16px 0 26px; max-width: 470px; }
.cx-checks { list-style: none; margin: 0; padding: 0; }
.cx-checks li {
  position: relative; padding: 7px 0 7px 32px; font-size: 15px; color: #E5EDF9;
}
.cx-checks li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cx-checks li::after {
  content: ''; position: absolute; left: 4.5px; top: 13.5px; width: 10px; height: 6.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cx-stat {
  border: 1px solid var(--cx-line); border-radius: 14px; padding: 26px 18px 22px; text-align: center;
  background: rgba(255,255,255,.03);
}
.cx-stat svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 12px; }
.cx-stat strong { display: block; font-size: 24px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.cx-stat span { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-top: 4px; }
.cx-stat small { display: block; font-size: 12px; color: #9FB1CC; line-height: 1.5; margin-top: 9px; }

/* ---------- process ---------- */
.cx-process { padding: 90px 0; background: #fff; }
.cx-process .cx-eyebrow { margin-bottom: 8px; }
.cx-process h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; color: var(--navy); margin-bottom: 52px; }
.cx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cx-step { position: relative; text-align: center; padding: 0 8px; }
.cx-step:not(:last-child)::after {
  content: '\2192'; position: absolute; right: -20px; top: 34px;
  color: #C9D3E4; font-size: 22px;
}
.cx-step-ico {
  display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: #EDF4FD; color: var(--brand); margin-bottom: 16px;
}
.cx-step-ico svg { width: 34px; height: 34px; stroke-width: 1.5; }
.cx-step-n {
  position: absolute; left: calc(50% - 52px); top: 48px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff;
  font: 800 13px/26px var(--sans); text-align: center;
}
.cx-step h3 { font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.cx-step p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ---------- brands ---------- */
.cx-brands { background: #F4F6FA; padding: 74px 0 80px; }
.cx-brands h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; color: var(--navy); }
.cx-brands-sub { text-align: center; font-size: 14.5px; color: var(--ink-soft); margin: 10px 0 40px; }
/* Flex, not a 6-col grid: pages carry 5 or 6 brand cards, and a part-filled
   grid row rides left. Grow-to-max reproduces the exact 6-up sizing. */
.cx-brand-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cx-brand-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 108px; padding: 20px 18px;
  flex: 1 1 150px; max-width: 200px;
  box-shadow: 0 6px 20px rgba(13,27,51,.05);
  transition: box-shadow .25s, transform .25s;
}
.cx-brand-card:hover { box-shadow: 0 14px 34px rgba(13,27,51,.11); transform: translateY(-2px); }
.cx-brand-card img { max-height: 44px; max-width: 84%; width: auto; height: auto; object-fit: contain; }
/* stacked/vertical lockups need more height to match the wide wordmarks' presence */
.cx-brand-card img[alt="Alarm.com"], .cx-brand-card img[alt="Verkada"], .cx-brand-card img[alt="Cisco Meraki"] { max-height: 66px; }

.cx-more-wrap { text-align: center; margin-top: 26px; }
/* .cx prefix beats Elementor's kit-wide `.elementor-kit-6 button` reset */
.cx .cx-more-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 14px/1 var(--sans); color: var(--navy); cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 14px 26px;
  transition: border-color .25s, box-shadow .25s;
}
.cx .cx-more-btn:hover { border-color: var(--brand); background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(13,27,51,.08); }
.cx-more-caret {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .25s;
}
.cx-more-btn.open .cx-more-caret { transform: rotate(225deg) translateY(-2px); }
.cx-more-panel { max-width: 980px; margin: 30px auto 0; }
/* closing CTA inside the brands band needs its own air below the More pill/panel */
.cx-brands .cx-hero-actions { justify-content: center; margin-top: 48px; margin-bottom: 0; }
.cx-more-note { font-size: 14.5px; color: var(--ink-soft); text-align: center; margin: 0 0 18px; }
.cx-more-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.cx-more-list li {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 13.5px/1 var(--sans); color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px 9px 12px;
  min-height: 40px;
}
.cx-more-list li img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex: none; }
.cx-more-list li img.cx-wm { width: auto; height: 15px; border-radius: 0; margin: 2px 4px; }
.cx-more-foot { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin: 20px 0 0; }
.cx-more-foot a { color: var(--brand); font-weight: 700; }

/* ---------- cta ---------- */
.cx-cta { background: var(--cx-navy); color: #fff; padding: 74px 0; }
.cx-cta-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 50px; align-items: center; }
.cx-cta h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; font-weight: 800; }
.cx-cta h2 em { font-style: normal; color: var(--brand); }
.cx-cta p { font-size: 15.5px; line-height: 1.6; color: #C9D6EA; margin: 0; max-width: 320px; }
.cx-cta-act { text-align: center; }
.cx-cta-act small { display: block; font-size: 12.5px; color: #9FB1CC; margin-top: 10px; }

/* ============ PLATFORM PAGES (/unifi/, /alarm-com/) ============ */
.px { --pxa: var(--brand); --pxa-d: var(--brand-deep); }
.px .cx-eyebrow { color: var(--pxa); }
.px .cx-det-list li::before { background: var(--pxa); }
.px .btn-blue { background: var(--pxa); }
.px .btn-blue:hover { background: var(--pxa-d); }
.px .cx-cta h2 em { color: var(--pxa); }

/* Static by request: the section nav is a table of contents, not a follower. */
.px-subnav { position: static; z-index: 150; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 14px rgba(13,27,51,.05); }
.px-subnav-row { display: flex; gap: 6px; overflow-x: auto; }
.px-subnav a {
  font: 700 13.5px/1 var(--sans); color: var(--ink-soft); text-decoration: none;
  padding: 17px 15px; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.px-subnav a:hover { color: var(--pxa); border-color: var(--pxa); }

.px .cx-detail { padding: 26px 0; }
.px .cx-detail.px-sec-alt { background: #F6F7FA; }

/* UniFi — ui.com's light, minimal look */
.px-unifi { --pxa: #006FFF; --pxa-d: #0057CC; }
.px-unifi .cx-hero { background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F7 100%); color: #06090F; }
.px-unifi .cx-hero h1 { color: #06090F; }
.px-unifi .cx-sub { color: #5B6572; }
.px-unifi .cx-btn-ghost { color: #06090F; border-color: #C9D1DC; }
.px-unifi .cx-btn-ghost:hover { border-color: #06090F; background: rgba(9,15,26,.04); }
.px-unifi .cx-cta { background: #06090F; }
.px-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.px-hero-visual { margin: 0; }
.px-hero-visual img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 70px rgba(9,15,26,.18); }

/* Alarm.com — their white + orange, photo band over title block */
.px-adc { --pxa: #E8650F; --pxa-d: #C55106; }
.px-adc-photo { height: min(52vh, 520px); background-size: cover; background-position: center top; position: relative; }
/* Scrim under the floating nav: camera-footage heroes are bright and busy,
   so the white nav links get a consistent dark ground to sit on. */
.px-adc-photo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 130px; background: linear-gradient(180deg, rgba(8,14,26,.62) 0%, rgba(8,14,26,.28) 60%, rgba(8,14,26,0) 100%); pointer-events: none; }
.px-adc-title { background: #fff; padding: 52px 0 26px; }
.px-underline { position: relative; padding-bottom: 10px; text-transform: uppercase; }
.px-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--pxa); }
/* The commercial panel's heading is an h2 so the page ships one h1, but it is
   the top heading of that view and is sized as one. */
.px-adc-title h1,
.px-adc-title .adc-com h2 { font-size: clamp(34px, 4vw, 48px); color: #101820; font-weight: 800; line-height: 1.12; margin: 6px 0 0; }
.px-adc-title h1 em,
.px-adc-title .adc-com h2 em { font-style: normal; color: var(--pxa); }
.px-adc-title .cx-sub { color: #5B6572; max-width: 560px; }
.px-adc .cx-btn-ghost { color: #101820; border-color: #C9D1DC; }
.px-adc .cx-btn-ghost:hover { border-color: #101820; background: rgba(16,24,32,.04); }
.px-adc .cx-cta { background: #101820; }

/* Josh.ai — their near-black, serif, minimal luxury look */
@font-face {
  font-family: 'Marcellus';
  src: url('../fonts/marcellus.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.px-josh { --pxa: #008CFF; --pxa-d: #0070CC; --serif: 'Marcellus', 'Palatino', 'Georgia', serif; background: #0B0C0E; }
.px-josh-hero { position: relative; color: #fff; overflow: hidden; }
.px-josh-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.px-josh-hero-bg::before { content: ''; position: absolute; inset: 0; background: rgba(8,9,11,.58); }
.px-josh-hero-inner { position: relative; z-index: 2; text-align: center; padding: 130px 0 140px; max-width: 760px; }
.px-josh-hero .cx-eyebrow { letter-spacing: .22em; font-size: 12px; color: #9FB4CC; }
.px-josh-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5.4vw, 68px); line-height: 1.1; letter-spacing: .01em; }
.px-josh-hero .cx-sub { color: #C3CBD8; margin-inline: auto; max-width: 520px; }

/* The Josh page is near-black; the shared FAQ styles assume white. Re-ink
   the accordion for the dark ground so questions and answers stay legible. */
main.px-josh .bh-faqs .cx-eyebrow { color: #9FB4CC; }
main.px-josh .bh-h2c { color: #fff; }
main.px-josh .al-faq details { border-bottom-color: rgba(255,255,255,.16); }
main.px-josh .al-faq summary { color: #ECF1F7; }
main.px-josh .al-faq summary::after { border-color: #9FB4CC; }
main.px-josh .al-faq .al-a p { color: #B9C2CE; }
main.px-josh .al-faq .al-a a { color: #7FB5EC; }
.px-josh-hero .cx-hero-actions { justify-content: center; margin-bottom: 0; }
.px-josh .px-subnav { background: #0B0C0E; border-bottom: 1px solid rgba(255,255,255,.09); box-shadow: none; }
.px-josh .px-subnav a { color: #8792A3; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.px-josh .px-subnav a:hover { color: #fff; border-color: var(--pxa); }
.px-josh .cx-detail { background: #0B0C0E; }
.px-josh .cx-detail.px-sec-alt { background: #121317; }
.px-josh .cx-det-row h2 { font-family: var(--serif); font-weight: 400; color: #fff; }
.px-josh .cx-det-row p { color: #A9B2C0; }
.px-josh .cx-det-lead { color: #C3CBD8; }
.px-josh .cx-det-list li { color: #E6EBF3; }
.px-josh .cx-det-list a { color: var(--pxa); font-weight: 700; }
.px-josh .cx-det-row img { box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.px-josh .cx-btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.px-josh .cx-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.px-josh .cx-cta { background: #060708; }
.px-josh .cx-cta h2 { font-family: var(--serif); font-weight: 400; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cx-cards, .cx-steps { grid-template-columns: repeat(2, 1fr); }
  .cx-step:not(:last-child)::after { display: none; }
  .cx-why-grid { grid-template-columns: 1fr; gap: 44px; }
  .cx-cta-grid { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .cx-cta-act { text-align: left; }
}
@media (max-width: 860px) {
  .cx-hero-photo { inset: auto 0 0 0; height: 46%; opacity: .5; }
  .cx-hero-photo::before { background: linear-gradient(180deg, var(--cx-navy) 0%, rgba(13,27,51,.5) 60%, rgba(13,27,51,.25) 100%); }  .cx-sol-grid, .cx-det-row { grid-template-columns: 1fr; gap: 30px; }
  .cx-det-flip figure { order: 0; }
  .cx-brand-card { flex-basis: calc(33.333% - 11px); max-width: calc(33.333% - 11px); }
  .px-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .px-adc-photo { height: 40vh; }
}
@media (max-width: 560px) {
  .cx-cards, .cx-steps { grid-template-columns: 1fr; }
  .cx-hero-actions { flex-direction: column; align-items: stretch; }
  .cx-hero-actions .btn-blue, .cx-hero-actions .cx-btn-ghost { justify-content: center; text-align: center; }  .cx-stats { grid-template-columns: 1fr; }
}

/* ============ MONITORED ALARMS (.al) ============ */
.al-h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; color: var(--navy); }
.al-sub { text-align: center; font-size: 15.5px; color: var(--ink-soft); margin: 12px auto 44px; max-width: 560px; }
.al-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.al-panel {
  border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.al-panel:hover { box-shadow: 0 18px 44px rgba(13,27,51,.12); transform: translateY(-3px); }
.al-panel figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: #F4F5F8; }
.al-panel figure img { width: 100%; height: 100%; object-fit: cover; }
.al-panel h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 20px 22px 2px; }
.al-fit { font: 700 12.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 4px 22px 10px; }
.al-panel .cx-det-list { margin: 0 22px 24px; }
.al-panel .cx-det-list li { font-size: 14px; padding: 5px 0 5px 30px; }
.al-panel .cx-det-list li::before { top: 8px; width: 17px; height: 17px; }
.al-panel .cx-det-list li::after { left: 4px; top: 12px; width: 9px; height: 5.5px; }

.al-insure { background: linear-gradient(140deg, #0D1B33 0%, #122342 100%); color: #fff; padding: 80px 0; }
.al-insure-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.al-insure h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.18; font-weight: 800; margin-bottom: 18px; }
.al-insure p { font-size: 15.5px; line-height: 1.7; color: #C9D6EA; margin: 0 0 14px; max-width: 560px; }
.al-insure p strong { color: #fff; }
.al-insure-points { display: grid; gap: 14px; }
.al-ip {
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px 22px;
  background: rgba(255,255,255,.04);
}
.al-ip strong { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.al-ip span { font-size: 14px; line-height: 1.55; color: #DCE5F2; }

@media (max-width: 1024px) {
  .al-panels { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .al-insure-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* Verkada — their white, near-black, azure-accent minimalism; dark hero */
.px-vk { --pxa: #14A2FF; --pxa-d: #0B7FD1; }
.px-vk-hero { position: relative; color: #fff; overflow: hidden; background: #0B1B26; }.px-vk-hero h1 { font-size: clamp(40px, 4.8vw, 58px); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }
.px-vk-hero h1 em { font-style: normal; color: var(--pxa); }
.px-vk-hero .cx-sub { color: #BFD2DE; }
.px-vk .btn-blue { background: #101215; }
.px-vk .btn-blue:hover { background: #000; }
.px-vk .cx-eyebrow { color: var(--pxa); }
.px-vk .cx-det-list li::before { background: var(--pxa); }
.px-vk .cx-cta { background: #101215; }
.px-vk .cx-cta h2 em { color: var(--pxa); }

/* Verkada v2: light marketing hero + AI search mock */
.px-vk-hero-light { background: linear-gradient(180deg, #FFFFFF 0%, #EDF2F6 100%); color: #0E0F11; }
.px-vk-hero-light h1 { color: #0E0F11; font-size: clamp(40px, 4.8vw, 58px); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }
.px-vk-hero-light h1 em { font-style: normal; color: var(--pxa); }
.px-vk-hero-light .cx-sub { color: #5B6572; }
.px-vk-hero-light .cx-btn-ghost { color: #0E0F11; border-color: #C9D1DC; }
.px-vk-hero-light .cx-btn-ghost:hover { border-color: #0E0F11; background: rgba(14,15,17,.04); }
.vk-search {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 14px 20px; margin: 4px 0 16px; max-width: 440px;
  box-shadow: 0 10px 26px rgba(13,27,51,.08);
}
.vk-search svg { width: 19px; height: 19px; flex: none; color: var(--pxa); }
.vk-search-text { font: 600 14.5px/1 var(--sans); color: var(--navy); position: relative; }
.vk-search-text::after {
  content: ''; display: inline-block; width: 2px; height: 15px; background: var(--pxa);
  margin-left: 3px; vertical-align: text-bottom; animation: vk-caret 1.1s steps(1) infinite;
}
@keyframes vk-caret { 50% { opacity: 0; } }

/* ============ WHOLE-HOME NETWORK (.nw) ============ */
.nw-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--navy); margin: 0; }
.nw-sub { text-align: center; font-size: 16px; color: var(--ink-soft); margin: 14px auto 46px; max-width: 620px; }
.nw-lead { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 20px; }

/* router vs system */
.nw-compare { background: #fff; padding: 80px 0 70px; }
.nw-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nw-col { border-radius: 18px; padding: 32px 30px; border: 1px solid var(--line); }
.nw-col-bad { background: #FAFAFB; }
.nw-col-good { background: linear-gradient(160deg, #F2F8FF 0%, #E9F2FC 100%); border-color: #CFE3F7; }
.nw-col-label { font: 800 11.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.nw-col-good .nw-col-label { color: var(--brand); }
.nw-col h3 { font-size: 21px; font-weight: 800; color: var(--navy); margin: 0 0 18px; }
.nw-list { list-style: none; margin: 0; padding: 0; }
.nw-list li { position: relative; padding: 8px 0 8px 32px; font-size: 15px; line-height: 1.55; color: var(--navy); }
.nw-list-x li::before {
  content: ''; position: absolute; left: 2px; top: 13px; width: 15px; height: 15px; border-radius: 50%;
  background: #D8DCE3;
}
.nw-list-x li::after {
  content: ''; position: absolute; left: 6.3px; top: 17px; width: 7px; height: 7px;
  background: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
              linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
}
.nw-list-check li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 19px; height: 19px; border-radius: 50%; background: var(--brand);
}
.nw-list-check li::after {
  content: ''; position: absolute; left: 4.5px; top: 15.5px; width: 10px; height: 6.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.nw-note {
  margin-top: 26px; background: #0D1B33; color: #DDE7F5; border-radius: 16px; padding: 24px 28px;
  font-size: 15.5px; line-height: 1.7;
}
.nw-note strong { color: #fff; }

/* stop renting */
.nw-rent { background: #F6F8FB; padding: 78px 0; }
.nw-rent-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.nw-rent h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--navy); margin: 0 0 16px; }
.nw-rent .cx-det-list li { color: var(--navy); }
.nw-fine { font-size: 13.5px; color: var(--ink-soft); margin: 20px 0 0; }
.nw-calc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; box-shadow: 0 16px 40px rgba(13,27,51,.07); }
.nw-calc-label { font: 800 11.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--brand); margin: 0 0 18px; }
.nw-calc-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.nw-calc-rows > div:last-child { border-bottom: 0; }
.nw-calc-rows span { font-size: 14px; color: var(--ink-soft); }
.nw-calc-rows strong { font: 800 18px/1 var(--sans); color: var(--navy); }
.nw-calc-hi strong { color: var(--brand); font-size: 22px; }
.nw-calc-foot { font-size: 13px; color: var(--ink-soft); margin: 16px 0 0; }

/* backup */
.nw-backup { background: #fff; padding: 78px 0 70px; }
.nw-back-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nw-back-card { border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px 28px; background: #fff; }
.nw-back-card figure { margin: 0 0 18px; background: #F5F7FA; border-radius: 12px; height: 340px; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; }
/* white hardware disappears on a light panel — give product shots a dark stage */
.nw-back-card figure:not(.nw-back-fig-alt) { background: radial-gradient(120% 90% at 50% 15%, #24334D 0%, #0D1B33 70%); }
/* the figure needs a DEFINITE height for max-height:100% to resolve —
   an aspect-ratio box left the image auto-sized and overflowing */
.nw-back-card figure img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.nw-back-fig-alt { padding: 0 !important; }
/* must outrank `.nw-back-card figure img`, which would letterbox the photo */
.nw-back-card figure.nw-back-fig-alt img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 12px; }
.nw-back-card h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.nw-back-card > p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }

/* brands */
.nw-brands { background: #F4F6FA; padding: 74px 0 80px; }
.nw-brand-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.nw-brand-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  min-height: 108px; padding: 20px 18px;
  flex: 1 1 150px; max-width: 200px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(13,27,51,.05); transition: box-shadow .25s, transform .25s;
}
.nw-brand-card:hover { box-shadow: 0 14px 34px rgba(13,27,51,.11); transform: translateY(-2px); }
.nw-brand-card img { max-height: 40px; max-width: 82%; width: auto; object-fit: contain; }
/* Starlink's mark sits inside a lot of empty canvas — give it more room */
.nw-brand-card img[alt="Starlink"] { max-height: 74px; max-width: 92%; }

@media (max-width: 1024px) {
  .nw-vs, .nw-rent-grid, .nw-back-grid { grid-template-columns: 1fr; gap: 20px; }
  .nw-brand-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .nw-brand-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ============ WHOLE-HOME CONTROL (.wh) ============ */
.wh-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--navy); margin: 0; }
.wh-sub { text-align: center; font-size: 16px; color: var(--ink-soft); margin: 14px auto 44px; max-width: 600px; }

/* scenes */
.wh-scenes { background: #fff; padding: 80px 0 70px; }
.wh-scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wh-scene { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .25s, transform .25s; }
.wh-scene:hover { box-shadow: 0 18px 44px rgba(13,27,51,.12); transform: translateY(-3px); }
.wh-scene figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; }
.wh-scene figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-scene-body { padding: 20px 22px 24px; }
.wh-scene-time { display: inline-block; font: 800 11px/1 var(--sans); letter-spacing: .1em; color: var(--brand); background: #EAF3FD; border-radius: 999px; padding: 7px 11px; margin-bottom: 10px; }
.wh-scene h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.wh-scene p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ways to control */
.wh-ways { background: #F6F8FB; padding: 78px 0; }
.wh-way-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wh-way { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px 26px; }
.wh-way-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #EDF4FD; color: var(--brand); margin-bottom: 15px; }
.wh-way-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wh-way h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.wh-way p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.wh-way a { color: var(--brand); font-weight: 700; }

/* works with */
.wh-works { background: #fff; padding: 80px 0 84px; }
.wh-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wh-work {
  display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 26px 24px; background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s;
}
.wh-work:hover { box-shadow: 0 16px 40px rgba(13,27,51,.1); transform: translateY(-3px); border-color: #D8E4F2; }
.wh-work h3 { font-size: 17.5px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.wh-work p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

@media (max-width: 1024px) {
  .wh-scene-grid, .wh-way-grid { grid-template-columns: repeat(2, 1fr); }
  .wh-works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .wh-scene-grid, .wh-way-grid, .wh-works-grid { grid-template-columns: 1fr; }
}

/* clearer click affordance on the "ties together" cards */
.wh-work { position: relative; padding-bottom: 52px; }
.wh-work-go {
  position: absolute; left: 26px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 7px;
  font: 800 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
.wh-work-go em { font-style: normal; transition: transform .2s; }
.wh-work:hover { border-color: var(--brand); }
.wh-work:hover h3 { color: var(--brand); }
.wh-work:hover .wh-work-go em { transform: translateX(4px); }
.wh-work h3 { transition: color .2s; }

/* systems we install */
.wh-brands { background: #F4F6FA; padding: 74px 0 80px; }
.wh-brand-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wh-brand-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  min-height: 112px; padding: 22px 20px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(13,27,51,.05); transition: box-shadow .25s, transform .25s;
}
.wh-brand-card:hover { box-shadow: 0 14px 34px rgba(13,27,51,.11); transform: translateY(-2px); }
.wh-brand-card img { max-height: 40px; max-width: 78%; width: auto; object-fit: contain; }
.wh-brand-card img[alt="Josh.ai"] { max-height: 54px; }
.wh-brand-card img[alt="Alarm.com"] { max-height: 62px; }
@media (max-width: 1024px) { .wh-brand-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wh-brand-cards { grid-template-columns: repeat(2, 1fr); } }

/* control hardware showcase */
.wh-hw { background: #fff; padding: 78px 0 74px; }
.wh-hw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wh-hw-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.wh-hw-card figure { margin: 0; aspect-ratio: 3/2; overflow: hidden; background: #F2F5F9; }
.wh-hw-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.wh-hw-card:hover figure img { transform: scale(1.04); }
.wh-hw-body { padding: 24px 26px 28px; }
.wh-hw-body h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.wh-hw-body > p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.wh-hw-body .cx-det-list li { font-size: 14.5px; padding: 6px 0 6px 30px; }
.wh-hw-body .cx-det-list li::before { top: 9px; width: 17px; height: 17px; }
.wh-hw-body .cx-det-list li::after { left: 4px; top: 13px; width: 9px; height: 5.5px; }
@media (max-width: 1024px) { .wh-hw-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ============ LIGHTING & SHADES (.lt) ============ */
.lt-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--navy); margin: 0; }
.lt-sub { text-align: center; font-size: 16px; color: var(--ink-soft); margin: 14px auto 48px; max-width: 640px; }
.lt-lead { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }

.lt-levels { background: #fff; padding: 80px 0 76px; }
.lt-level { border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px 32px; margin-bottom: 22px; background: #fff; }
.lt-level-hl { border-color: #BFDCF7; background: linear-gradient(170deg, #F6FBFF 0%, #FFFFFF 55%); box-shadow: 0 16px 44px rgba(13,27,51,.07); }
.lt-level-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.lt-num {
  flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font: 800 18px/1 var(--sans);
}
.lt-level-hl .lt-num { background: var(--brand); }
.lt-tier { font: 800 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 7px; }
.lt-level-head h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; color: var(--navy); margin: 0; }
.lt-badge {
  margin-left: auto; flex: none; font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: #F1F4F8; border-radius: 999px; padding: 9px 14px;
}
.lt-level-hl .lt-badge { color: var(--brand); background: #E7F2FD; }
.lt-level-body { display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: center; }.lt-note { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.lt-note strong { color: var(--navy); }
.lt-product { margin: 0; background: #F5F7FA; border-radius: 16px; height: 260px; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; }
.lt-product img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.lt-product-photo { padding: 0; }
.lt-product-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

.lt-brands { background: #F4F6FA; padding: 74px 0 80px; }
.lt-brand-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.lt-brand-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  min-height: 112px; padding: 22px 20px;
  box-shadow: 0 6px 20px rgba(13,27,51,.05); transition: box-shadow .25s, transform .25s;
}
.lt-brand-card:hover { box-shadow: 0 14px 34px rgba(13,27,51,.11); transform: translateY(-2px); }
.lt-brand-card img { max-height: 38px; max-width: 80%; width: auto; object-fit: contain; }
.lt-brand-card img[alt="Brilliant"] { max-height: 52px; }

@media (max-width: 1024px) {
  .lt-level-body { grid-template-columns: 1fr; gap: 24px; }
  .lt-product { height: 220px; order: -1; }
  .lt-brand-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .lt-level { padding: 24px 22px 26px; }
  .lt-level-head { flex-wrap: wrap; gap: 14px; }
  .lt-badge { margin-left: 0; }
  .lt-brand-cards { grid-template-columns: repeat(2, 1fr); }
}

/* shade material grid */
.lt-shades { background: #F6F8FB; padding: 78px 0 76px; }
.lt-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lt-mat { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.lt-mat:hover { box-shadow: 0 16px 40px rgba(13,27,51,.1); transform: translateY(-3px); }
.lt-mat img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lt-mat figcaption { padding: 18px 20px 20px; }
.lt-mat figcaption strong { display: block; font-size: 16.5px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.lt-mat figcaption span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.lt-shade-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.lt-shade-notes > div { border-top: 2px solid var(--brand); padding-top: 16px; }
.lt-shade-notes strong { display: block; font: 800 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 9px; }
.lt-shade-notes p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 1024px) { .lt-mat-grid, .lt-shade-notes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .lt-mat-grid, .lt-shade-notes { grid-template-columns: 1fr; } }

/* in-context shade photo below the material grid */
.lt-context { margin: 30px 0 0; }
.lt-context img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 20px 50px rgba(13,27,51,.14); }
.lt-context figcaption { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 14px; max-width: 780px; }

/* day / night lighting comparison */
.lt-daynight { background: #fff; padding: 74px 0 40px; }
.lt-dn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lt-dn { margin: 0; }
.lt-dn img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 18px 46px rgba(13,27,51,.14); }
.lt-dn figcaption { padding: 16px 4px 0; }
.lt-dn figcaption strong { display: block; font: 800 12.5px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.lt-dn figcaption span { display: block; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) { .lt-dn-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Lutron brand page — lutron.com's own look: a #F8F8F8 neutral
   field, light-weight display type, "Bold lead-in. Regular
   sentence." headings, pill CTAs and big square-cornered imagery.
   ============================================================ */
.lu {
  --pxa: #2E6BC5; --pxa-d: #23539C;
  --lu-ink: #262626; --lu-soft: #666666; --lu-field: #F8F8F8; --lu-line: #E2E2E2;
  background: var(--lu-field);
}

/* hero — full-bleed photo, copy anchored bottom-left like their campaign pages */
.lu-hero { position: relative; color: #fff; overflow: hidden; }
.lu-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.lu-hero-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,12,14,.74) 0%, rgba(12,12,14,.44) 46%, rgba(12,12,14,.12) 100%);
}
.lu-hero-inner {
  position: relative; z-index: 2; max-width: 744px;
  /* keep .wrap's 24px side padding — a padding shorthand here would zero it
     and run the copy flush to the viewport edge on mobile */
  padding-top: 152px; padding-bottom: 104px;
}
.lu-hero-mark { display: block; height: 26px; width: auto; margin-bottom: 30px; opacity: .95; }
.lu-hero h1 {
  font-weight: 300; font-size: clamp(40px, 5.6vw, 70px); line-height: 1.06;
  letter-spacing: -.015em; color: #fff; margin: 0 0 22px;
}
.lu-hero h1 em { font-style: normal; font-weight: 500; }
.lu-hero-sub { font-size: 17.5px; line-height: 1.7; color: rgba(255,255,255,.86); max-width: 560px; margin: 0 0 32px; }
.lu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* pill CTA — their rounded solid button */
.lu-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 14.5px/1 var(--sans); text-decoration: none;
  background: var(--pxa); color: #fff; border-radius: 999px; padding: 15px 26px;
  transition: background .2s, transform .2s;
}
.lu-pill:hover { background: var(--pxa-d); transform: translateY(-1px); }
.lu-pill span { transition: transform .2s; }
.lu-pill:hover span { transform: translateX(3px); }
.lu-pill-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.lu-pill-ghost:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px #fff; }

/* opening statement — oversized light type, their signature */
.lu-statement { background: #fff; padding: 96px 0 92px; }
.lu-statement h2 {
  font-weight: 300; font-size: clamp(27px, 3.5vw, 44px); line-height: 1.22;
  letter-spacing: -.012em; color: var(--lu-ink); margin: 0 0 24px; max-width: 900px;
}
.lu-statement p { font-size: 17px; line-height: 1.8; color: var(--lu-soft); max-width: 760px; margin: 0; }

.lu .px-subnav { background: #fff; border-bottom: 1px solid var(--lu-line); box-shadow: none; }
.lu .px-subnav a { color: var(--lu-soft); font-weight: 600; }
.lu .px-subnav a:hover { color: var(--lu-ink); border-color: var(--pxa); }

.lu-sec { padding: 86px 0; background: var(--lu-field); }
.lu-sec-alt { background: #fff; }
.lu-h2 {
  font-weight: 300; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15;
  letter-spacing: -.012em; color: var(--lu-ink); margin: 0 0 14px;
}
.lu-sub { font-size: 17px; line-height: 1.75; color: var(--lu-soft); max-width: 640px; margin: 0 0 46px; }

/* three-up cards with the circular arrow they put on image corners */
.lu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lu-card { text-decoration: none; display: block; }
.lu-card figure { position: relative; margin: 0 0 20px; border-radius: 6px; overflow: hidden; }
.lu-card figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s ease; }
.lu-card:hover figure img { transform: scale(1.035); }
.lu-card-go {
  position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: var(--lu-ink); display: grid; place-items: center;
  font-size: 17px; transition: background .2s, color .2s;
}
.lu-card:hover .lu-card-go { background: var(--pxa); color: #fff; }
.lu-card h3 { font-weight: 500; font-size: 22px; color: var(--lu-ink); margin: 0 0 9px; }
.lu-card p { font-size: 15.5px; line-height: 1.7; color: var(--lu-soft); margin: 0; }

/* alternating image / copy rows */
.lu-row { display: grid; grid-template-columns: 1.02fr .98fr; gap: 62px; align-items: center; }
.lu-row-flip .lu-row-fig { order: 2; }
.lu-row-fig { margin: 0; border-radius: 6px; overflow: hidden; }
.lu-row-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lu-row-copy h2 {
  font-weight: 300; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.42;
  color: var(--lu-soft); margin: 0 0 26px; letter-spacing: -.005em;
}
.lu-row-copy h2 strong { font-weight: 500; color: var(--lu-ink); }
.lu-list { list-style: none; margin: 0 0 30px; padding: 0; }
.lu-list li {
  position: relative; padding-left: 22px; font-size: 16px; line-height: 1.7;
  color: var(--lu-soft); margin-bottom: 13px;
}
.lu-list li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pxa);
}
.lu-list em { font-style: normal; color: var(--lu-ink); font-weight: 500; }

/* full-bleed image with copy beneath, on white */
.lu-bleed { background: #fff; padding: 0 0 92px; }
.lu-bleed > img { width: 100%; height: clamp(300px, 42vw, 560px); object-fit: cover; display: block; }
.lu-bleed-copy { padding-top: 62px; }
.lu-bleed-copy h2 {
  font-weight: 300; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.2;
  color: var(--lu-ink); margin: 0 0 20px; letter-spacing: -.012em;
}
.lu-bleed-copy p { font-size: 17px; line-height: 1.8; color: var(--lu-soft); max-width: 780px; margin: 0; }

/* what Shield handles */
.lu-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 12px; }
.lu-step { border-top: 1px solid var(--lu-line); padding-top: 22px; }
.lu-step-n { display: block; font: 500 13px/1 var(--sans); letter-spacing: .14em; color: var(--pxa); margin-bottom: 14px; }
.lu-step h3 { font-weight: 500; font-size: 19px; color: var(--lu-ink); margin: 0 0 9px; }
.lu-step p { font-size: 15px; line-height: 1.7; color: var(--lu-soft); margin: 0; }

.lu .cx-cta { background: #1B1B1B; }
.lu .cx-cta h2 em { color: #8FB4E8; }
.lu .btn-blue { background: var(--pxa); }
.lu .btn-blue:hover { background: var(--pxa-d); }

@media (max-width: 980px) {
  .lu-cards { grid-template-columns: 1fr; gap: 34px; }
  .lu-row { grid-template-columns: 1fr; gap: 30px; }
  .lu-row-flip .lu-row-fig { order: 0; }
  .lu-steps { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .lu-hero-inner { padding-top: 116px; padding-bottom: 76px; }
  .lu-sec { padding: 60px 0; }
  .lu-statement { padding: 64px 0 60px; }
  /* the 100deg wash runs out of darkness on a narrow viewport — go vertical */
  .lu-hero-photo::before {
    background: linear-gradient(180deg, rgba(12,12,14,.62) 0%, rgba(12,12,14,.5) 45%, rgba(12,12,14,.72) 100%);
  }
}
@media (max-width: 560px) {
  .lu-steps { grid-template-columns: 1fr; }
}

/* Lutron mentions link through to the brand page — keep them legible as
   links without breaking the heading colour. */
.lt-level-head h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid #C9DEF6; transition: border-color .2s, color .2s; }
.lt-level-head h3 a:hover { color: var(--brand); border-color: var(--brand); }
.lt-sub a { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(53,104,244,.35); }
.lt-sub a:hover { border-color: var(--brand); }

/* Lutron keypad families — Palladiom / Alisse / Aviena */
.lu-fam-wrap { margin-top: 78px; padding-top: 62px; border-top: 1px solid var(--lu-line); }
.lu-fam-h { font-weight: 300; font-size: clamp(24px, 2.8vw, 34px); color: var(--lu-ink); margin: 0 0 12px; letter-spacing: -.01em; }
.lu-fam-sub { font-size: 16.5px; line-height: 1.75; color: var(--lu-soft); max-width: 620px; margin: 0 0 40px; }
.lu-fam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lu-fam-card figure { margin: 0 0 18px; border-radius: 6px; overflow: hidden; background: #EFEDEA; }
.lu-fam-card figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lu-fam-card h4 { font-weight: 500; font-size: 20px; color: var(--lu-ink); margin: 0 0 6px; }
.lu-fam-tag {
  font: 600 11.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--pxa); margin: 0 0 11px;
}
.lu-fam-card p:last-child { font-size: 15.5px; line-height: 1.7; color: var(--lu-soft); margin: 0; }
@media (max-width: 980px) {
  .lu-fam { grid-template-columns: 1fr; gap: 34px; }
  .lu-fam-wrap { margin-top: 50px; padding-top: 44px; }
}

/* the finishes lineup is a 16:9 plate — cover-fitting it into the 4:3 row
   figure lops the end keypads off, so let it keep its own aspect */
.lu-row-fig-wide img { aspect-ratio: 16/9; }

/* ============================================================
   Alarm.com — residential / commercial audience switch.
   Both panels ship in the DOM; only the data-mode attribute
   decides which is painted, so the hidden side stays crawlable.
   ============================================================ */
.adc[data-mode="res"] .adc-com,
.adc[data-mode="com"] .adc-res { display: none; }
/* the two hero photos are absolutely positioned siblings */
.adc .px-adc-photo.adc-res,
.adc .px-adc-photo.adc-com { display: block; }
.adc[data-mode="res"] .px-adc-photo.adc-com,
.adc[data-mode="com"] .px-adc-photo.adc-res { display: none; }

.adc-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 26px;
  border-radius: 999px; background: rgba(16,24,32,.06);
}
/* .adc prefix is load-bearing: .elementor-kit-6 button has the same
   specificity and loads later, so it wins the background otherwise */
.adc .adc-switch button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font: 700 13.5px/1 var(--sans); letter-spacing: .04em;
  color: var(--ink-soft); padding: 11px 22px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.adc .adc-switch button.on { color: #fff; background: var(--pxa); }
.adc .adc-switch button:not(.on):hover { color: var(--navy); background: rgba(16,24,32,.05); }

/* shared platform band */
.adc-platform { background: #F6F7FA; padding: 84px 0; }
.adc-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--navy); margin: 0 0 14px; }
.adc-sub {
  font-size: 16.5px; line-height: 1.7; color: var(--ink-soft);
  max-width: 620px; margin: 0 auto 46px; text-align: center;
}
.adc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.adc-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.adc-item h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.adc-item p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

@media (max-width: 980px) {
  .adc-grid { grid-template-columns: repeat(2, 1fr); }
  .adc-platform { padding: 58px 0; }
}
@media (max-width: 560px) {
  .adc-grid { grid-template-columns: 1fr; }
  .adc .adc-switch button { padding: 10px 16px; font-size: 12.5px; }
}

/* ============================================================
   Smart Locks & Garage Control — namespace .ax-
   ============================================================ */
.ax-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--navy); margin: 0 0 14px; }
.ax-sub {
  font-size: 16.5px; line-height: 1.75; color: var(--ink-soft);
  max-width: 660px; margin: 0 auto 46px; text-align: center;
}.ax-note {
  margin-top: 26px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0; padding: 20px 24px; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft);
}
.ax-note strong { color: var(--navy); }
.ax-callout {
  margin: 18px 0 0; padding: 15px 18px; background: #F4F8FE; border-radius: 10px;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}

/* garage */
.ax-garage { background: #fff; padding: 84px 0; }
.ax-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ax-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.ax-card figure { margin: 0; }
.ax-card figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ax-card-body { padding: 26px 26px 28px; }
.ax-card-body h3 { font-size: 21px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.ax-tag {
  font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 14px;
}
.ax-card-body > p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.ax-card-body strong { color: var(--navy); }

/* brands */
.ax-brands { background: #F6F7FA; padding: 78px 0; }
.ax-brand-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ax-brand-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  height: 104px; display: grid; place-items: center; padding: 18px;
  transition: box-shadow .25s, transform .25s;
}
.ax-brand-card:hover { box-shadow: 0 14px 34px rgba(13,27,51,.11); transform: translateY(-2px); }
.ax-brand-card img { max-height: 38px; max-width: 80%; width: auto; object-fit: contain; }
.ax-brand-card img[alt="Yale"] { max-height: 46px; }.ax-fine { margin: 26px 0 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); }

@media (max-width: 900px) { .ax-cards { grid-template-columns: 1fr; }
  .ax-brand-cards { grid-template-columns: repeat(2, 1fr); } .ax-garage, .ax-brands { padding: 58px 0; }
}
.ax-sub-h {
  font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; margin: 44px 0 18px;
}
.ax-brand-cards-3 { grid-template-columns: repeat(3, 1fr); }
.ax-brand-card img[alt="Yale"] { max-height: 60px; }
.ax-brand-card img[alt="Schlage"] { max-height: 42px; }
.ax-brand-card img[alt="myQ"], .ax-brand-card img[alt="Genie Aladdin Connect"] { max-height: 44px; }@media (max-width: 900px) { .ax-brand-cards-3 { grid-template-columns: repeat(2, 1fr); } }
.ax-brand-card img[alt="Konnected"] { max-height: 30px; max-width: 84%; }
.ax-brands .ax-sub-h:first-of-type { margin-top: 0; }
/* Kwikset ships as a solid red tile, like Yale's roundel — give both room */
.ax-brand-card img[alt="Kwikset"] { max-height: 40px; max-width: 82%; }
/* four levels of access — same ladder pattern as the lighting page */
.ax-levels { background: #F6F7FA; padding: 84px 0; }
.ax-level { border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px 32px; margin-bottom: 22px; background: #fff; }
.ax-level-hl { border-color: #BFDCF7; background: linear-gradient(170deg, #F6FBFF 0%, #FFFFFF 55%); box-shadow: 0 16px 44px rgba(13,27,51,.07); }
.ax-level-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ax-num {
  flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font: 800 18px/1 var(--sans);
}
.ax-level-hl .ax-num { background: var(--brand); }
.ax-tier { font: 800 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 7px; }
.ax-level-head h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; color: var(--navy); margin: 0; }
.ax-badge {
  margin-left: auto; flex: none; font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: #F1F4F8; border-radius: 999px; padding: 9px 14px;
}
.ax-level-hl .ax-badge { color: var(--brand); background: #E7F2FD; }
.ax-lead { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.ax-stop { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ax-stop strong { color: var(--navy); }
.ax-level-body { display: grid; grid-template-columns: 1.18fr .82fr; gap: 38px; align-items: start; }
.ax-level-fig { margin: 0; border-radius: 14px; overflow: hidden; }
.ax-level-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ax-aside-wide { margin-top: 24px; }
.ax-aside { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.ax-aside h4 {
  font: 800 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px;
}
.ax-aside p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 11px; }
.ax-aside strong { color: var(--navy); }
.ax-aside-note { padding-top: 11px; border-top: 1px solid var(--line); margin-bottom: 0 !important; }.ax-brand-card img[alt="UniFi"] { max-height: 30px; }
.ax-brand-card img[alt="Alarm.com"] { max-height: 54px; }
@media (max-width: 900px) {
  .ax-level-body { grid-template-columns: 1fr; gap: 22px; }
  .ax-level-fig { order: -1; }
  .ax-level { padding: 24px 22px 26px; }
  .ax-level-head { flex-wrap: wrap; gap: 14px; }
  .ax-badge { margin-left: 0; }
  .ax-levels { padding: 58px 0; }
}

.ax-brand-card img[alt="DoorBird"] { max-height: 30px; }

.px-note { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); font-style: italic; }
.ax-brand-card img[alt="Carrier"] { max-height: 46px; }
.ax-brand-card img[alt="Honeywell"] { max-height: 26px; }
.ax-brand-cards-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .ax-brand-cards-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .ax-brand-cards-5 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Climate: advantages grid + thermostat families ---------- */
.cl-adv { background: #fff; padding: 84px 0; }
.cl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* three-up variant for platform/comparison trios; was referenced but never defined */
.cl-grid.sv-plat3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .cl-grid.sv-plat3 { grid-template-columns: 1fr; } }
.cl-item { border: 1px solid var(--line); border-radius: 16px; padding: 28px 28px 30px; background: #fff; }
.cl-item h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.cl-item p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; }

.cl-fam { background: #F6F7FA; padding: 84px 0; }
.cl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cl-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cl-card figure { margin: 0; }
.cl-card figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.cl-card h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 24px 24px 6px; }
.cl-tag {
  font: 700 11.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); margin: 0 24px 12px;
}
.cl-card > p:last-child { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 24px 26px; }
@media (max-width: 980px) {
  .cl-grid, .cl-cards { grid-template-columns: 1fr; }
  .cl-adv, .cl-fam { padding: 58px 0; }
}

.cx-det-body { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 16px; }
.cx-det-body:last-of-type { margin-bottom: 20px; }

/* Seven spokes in a 3-col grid leaves one card stranded on its own row.
   Four across at desktop widths gives a clean 4 + 3. Ranges below are
   mutually exclusive with the max-width rules above, so order is safe. */
@media (min-width: 1100px) {
  .wh-works-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Seven brand marks: four up top, three centred beneath. An 8-column track
   with every card spanning 2 lets the second row start half a card in —
   nth-child(5) offset by one column puts an equal c+g gutter either side,
   so the three centre exactly against the four above. */
.ax-brand-cards-7 { grid-template-columns: repeat(8, 1fr); }
.ax-brand-cards-7 > * { grid-column: span 2; }
.ax-brand-cards-7 > *:nth-child(5) { grid-column: 2 / span 2; }
@media (max-width: 900px) {
  .ax-brand-cards-7 { grid-template-columns: repeat(2, 1fr); }
  .ax-brand-cards-7 > *,
  .ax-brand-cards-7 > *:nth-child(5) { grid-column: auto; }
  /* two-up leaves the seventh alone on its row — centre it there too.
     8px is half the 16px grid gap, so it matches a column exactly. */
  .ax-brand-cards-7 > *:nth-child(7) {
    grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center;
  }
}

/* pre-wire: the "what this becomes" links under each rough-in card */
.pw-link { margin: 14px 0 0 !important; font-size: 13.5px; }
.pw-link a { color: var(--brand); font-weight: 700; text-decoration: none; }
.pw-link a:hover { text-decoration: underline; }

/* One pre-wire photo is portrait (a panel rough-in shot from a real job).
   At width:100%/height:auto it would run ~1.2x taller than the copy beside
   it and unbalance the row, so cap it and let object-fit do the cropping. */
.pw-tall { max-height: 560px; object-fit: cover; object-position: 50% 42%; }

/* pre-wire: the marked-up plan runs alongside the scope cards rather than
   sitting over them. The scan is only 756px wide, so a ~400px column
   downsamples it about 1.9x and the linework stays sharp; matted in the same
   white tile the cards use, it reads as one of the set rather than a banner. */
.pw-scope {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 22px; align-items: center;
}
.pw-plan {
  margin: 0; padding: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(13,27,51,.06);
}
.pw-plan img { width: 100%; height: auto; display: block; border-radius: 6px; }
@media (max-width: 1040px) {
  .pw-scope { grid-template-columns: 1fr; }
  .pw-plan { max-width: 460px; margin: 0 auto; }
}

/* ---- commercial surveillance (.sv-) ---- */
.sv-honest { font: 400 14.5px/1.7 var(--sans); color: var(--ink-soft); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.sv-honest a { color: var(--brand); font-weight: 700; text-decoration: none; }
.sv-honest a:hover { text-decoration: underline; }

.sv-ent { background: var(--navy); color: #fff; padding: 96px 0; }
.sv-ent .cx-eyebrow { color: #7FB5EC; }
.sv-ent h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 800; margin: 0 0 18px; }
.sv-ent-lead { font: 400 16.5px/1.8 var(--sans); color: #B9C4D6; max-width: 62ch; margin: 0 0 22px; }
.sv-ent .cx-det-list li { color: #D5DCE8; }
.sv-ent .cx-det-list li strong { color: #fff; }
.sv-ent-note {
  border-left: 3px solid var(--brand); background: rgba(38,141,238,.08);
  border-radius: 0 14px 14px 0; padding: 22px 26px; margin: 28px 0 34px; max-width: 74ch;
}
.sv-ent-note p { font: 400 15.5px/1.8 var(--sans); color: #D5DCE8; margin: 0; }
.sv-ent-note strong { color: #fff; }@media (max-width: 640px) { .sv-ent { padding: 64px 0; }}

/* ---- Sunflower Labs (.px-sf) — slate teal #4C6971 sampled from their renders ---- */
.px-sf { --pxa: #3F6570; --pxa-d: #2E4F58; }
.px-sf .cx-eyebrow { color: var(--pxa); }
.px-sf-hero { background: #4C6971; color: #fff; overflow: hidden; }
.px-sf-hero .cx-eyebrow { color: #C9DDE2; }
.px-sf-hero-grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 40px; align-items: center; padding-top: 40px; }
.px-sf-hero-copy h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.08; font-weight: 800; margin: 0 0 18px; }
.px-sf-hero-copy h1 em { font-style: normal; color: #BFE3D9; }
.px-sf-hero .cx-sub { color: #D6E2E5; }
.px-sf-hero-visual { margin: 0; }
.px-sf-hero-visual img { width: 100%; height: auto; display: block; }
.px-sf-btn { background: #1E3A41; }
.px-sf-btn:hover { background: #162C32; }
.px-sf-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 42px; }
.px-sf-specs div { border-top: 1px solid rgba(255,255,255,.28); padding-top: 14px; }
.px-sf-specs strong { display: block; font: 800 26px/1.1 var(--sans); }
.px-sf-specs span { font: 500 13px/1.5 var(--sans); color: #C9DDE2; }

.px-sf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.px-sf-step { border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 26px; background: #fff; }
.px-sf-step strong { display: block; font: 800 16px/1.3 var(--sans); color: var(--navy); margin-bottom: 8px; }
.px-sf-step p { font: 400 14.5px/1.7 var(--sans); color: var(--ink-soft); margin: 0; }

.px-sf-fig img { background: #4C6971; border-radius: 16px; }
.px-sf .px-subnav a:hover { color: var(--pxa); }
.px-sf-ghost { color: var(--pxa); border-color: currentColor; }

@media (max-width: 900px) {
  .px-sf-hero-grid { grid-template-columns: 1fr; padding-top: 26px; }
  .px-sf-specs { grid-template-columns: repeat(2, 1fr); }
  .px-sf-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) { .px-sf-steps { grid-template-columns: 1fr; } }

/* Sunflower engineering band — the parts render is on pure black */
.px-sf-eng { background: #000; color: #fff; padding: 84px 0; }
.px-sf-eng .cx-eyebrow { color: #9FC5CE; }
.px-sf-eng-grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 48px; align-items: center; }
.px-sf-eng h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: 800; margin: 0 0 16px; }
.px-sf-eng p { font: 400 16px/1.8 var(--sans); color: #B9C2CC; margin: 0; max-width: 48ch; }
.px-sf-eng figure { margin: 0; }
.px-sf-eng img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .px-sf-eng-grid { grid-template-columns: 1fr; gap: 26px; } .px-sf-eng { padding: 56px 0; } }

/* CTA rows inside content sections were hugging the line above them */
.px-sec .cx-hero-actions { margin-top: 30px; }

/* Ghost buttons sit over hero photographs — give them their own ground so a
   bright patch of image can't wash them out */
.cx-hero .cx-btn-ghost { background: rgba(10,16,28,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.65); }
.cx-hero .cx-btn-ghost:hover { background: rgba(10,16,28,.5); }

/* Content figures reserve their space before the image arrives — lazy loads
   were shifting the layout under anchored scrolling. Our generated imagery is
   16:9; the known 4:3 set overrides below. */
.cx-det-row figure img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.px-sf-fig img, .px-sf-fig-flight img { aspect-ratio: 4 / 3; }

/* Ghost buttons in light closing CTAs were white-on-light — dark variant when
   they sit inside content sections rather than over a hero photograph */
.px-sec .cx-hero-actions .cx-btn-ghost, .cx-brands .cx-hero-actions .cx-btn-ghost, .wp-walk .cx-btn-ghost {
  color: var(--navy); border-color: rgba(22,36,62,.35); background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.px-sec .cx-hero-actions .cx-btn-ghost:hover, .cx-brands .cx-hero-actions .cx-btn-ghost:hover, .wp-walk .cx-btn-ghost:hover { color: var(--brand); border-color: currentColor; background: none; }

/* ============================================================
   Sonos page (sns) — sonos.com's black/white rhythm, house accents
   ============================================================ */
.sns { background: #fff; }
.sns-hero {
  background-color: #000; background-size: cover; background-position: 50% 60%;
  color: #fff; padding: 170px 0 110px; text-align: center;
}
.sns-eyebrow {
  font: 800 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: #D9A441; margin: 0 0 26px;
}
.sns-hero h1 {
  font: 800 clamp(38px, 5.4vw, 68px)/1.06 var(--sans); letter-spacing: -.015em;
  color: #fff; margin: 0 0 20px;
}
.sns-hero h1 em { font-style: normal; color: #8FA3C2; }
.sns-sub { font: 500 17px/1.6 var(--sans); color: #C9D3E2; margin: 0 auto 34px; max-width: 46ch; }
.sns-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sns .sns-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: 16px 30px; border: 1.5px solid transparent;
  background: #fff; color: #000; transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.sns-hero .sns-pill:hover { background: var(--brand); color: #fff; }
.sns .sns-pill-ghost { background: none; color: #fff; border-color: rgba(255,255,255,.4); }
.sns-hero .sns-pill-ghost:hover { border-color: #fff; background: none; color: #fff; }
.sns-light .sns-pill { background: #000; color: #fff; }
.sns-light .sns-pill:hover { background: var(--brand); }
.sns-light .sns-pill-ghost { background: none; color: #000; border-color: rgba(0,0,0,.3); }
.sns-light .sns-pill-ghost:hover { border-color: #000; }
.sns .sns-pill-light { background: #fff; color: #000; }.sns-light { background: #fff; padding: 92px 0; }
.sns-dark { background-color: #000; background-size: cover; background-position: 50% 50%; color: #fff; padding: 92px 0; }
.sns-h2 { font: 800 clamp(30px, 3.6vw, 46px)/1.1 var(--sans); letter-spacing: -.015em; margin: 0 0 14px; text-align: center; }
.sns-light .sns-h2 { color: #000; }
.sns-lead { font: 500 16.5px/1.65 var(--sans); color: #5B6B84; text-align: center; max-width: 62ch; margin: 0 auto 48px; }
.sns-lead a { color: var(--brand); }
.sns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sns-card {
  background: #F6F6F4; border-radius: 18px; padding: 18px 22px 24px;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.sns-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.sns-card img { width: 100%; border-radius: 12px; margin-bottom: 14px; mix-blend-mode: multiply; }
.sns-card strong { font: 800 16.5px/1.2 var(--sans); color: #000; margin-bottom: 6px; }
.sns-card span { font: 500 13.5px/1.5 var(--sans); color: #5B6B84; }
.sns-card-cta { background: var(--navy); justify-content: center; }
.sns-card-cta strong { color: #fff; }
.sns-card-cta span { color: #B9C7DD; margin-bottom: 14px; }
.sns-card-cta em { font: 700 14px/1 var(--sans); font-style: normal; color: #7CBBFF; }
.sns-vign { max-width: 880px; margin: 44px auto 10px; display: flex; flex-direction: column; gap: 44px; }
.sns-v { max-width: 30em; }
.sns-v-right { align-self: flex-end; text-align: right; }
.sns-v h3 { font: 800 22px/1.25 var(--sans); color: #fff; margin: 0 0 10px; }
.sns-v p { font: 500 15px/1.7 var(--sans); color: #A9B6CB; margin: 0; }
.sns-v a { color: #7CBBFF; text-decoration: none; }
.sns-v a:hover { text-decoration: underline; }
.sns-center { text-align: center; }
.sns-actions.sns-center { justify-content: center; margin-top: 34px; }
@media (max-width: 1024px) { .sns-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .sns-hero { padding-top: 120px; }
  .sns-grid { grid-template-columns: 1fr; }
  .sns-v, .sns-v-right { align-self: stretch; text-align: left; max-width: none; }
}

/* Sonos exploded-view section */
.sns-inside { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; margin-top: 34px; }
.sns-inside-copy h3 { font: 800 clamp(24px, 2.6vw, 34px)/1.15 var(--sans); letter-spacing: -.01em; color: #000; margin: 0 0 16px; }
.sns-inside-copy p { font: 500 15.5px/1.7 var(--sans); color: #5B6B84; margin: 0 0 24px; max-width: 44ch; }
.sns-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.sns-chip {
  border: 1px solid rgba(0,0,0,.16); border-radius: 12px; padding: 14px 18px;
  font: 500 13.5px/1.3 var(--sans); color: #5B6B84;
}
.sns-chip strong { display: block; font: 800 22px/1.1 var(--sans); color: #000; margin-bottom: 3px; }
.sns-inside-fig { margin: 0; }
.sns-inside-fig img { width: 100%; height: auto; }
@media (max-width: 860px) { .sns-inside { grid-template-columns: 1fr; gap: 20px; } }

/* ============================================================
   Control4 page (c4) — control4.com's grammar: cinematic hero,
   uppercase headings, crimson actions, works-with logo wall
   ============================================================ */
.c4 { --c4-red: #A32833; --c4-red-deep: #8A1F29; background: #fff; }
.c4-hero {
  background-color: #0A0E14; background-size: cover; background-position: 50% 62%;
  color: #fff; text-align: center; padding: 178px 0 116px;
}
.c4-eyebrow {
  font: 800 11.5px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: #E8A9AF; margin: 0 0 24px;
}
.c4-hero h1 {
  font: 800 clamp(31px, 4.4vw, 58px)/1.1 var(--sans); letter-spacing: .005em;
  color: #fff; margin: 0 0 22px; text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.c4-sub {
  font: 500 16.5px/1.65 var(--sans); color: #D6DCE6; margin: 0 auto 32px; max-width: 60ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.c4-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.c4 .c4-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14.5px/1 var(--sans); text-decoration: none; cursor: pointer;
  background: var(--c4-red); color: #fff; border: 1.5px solid var(--c4-red);
  border-radius: 5px; padding: 16px 30px; transition: background .2s, border-color .2s, color .2s;
}
.c4 .c4-btn:hover { background: var(--c4-red-deep); border-color: var(--c4-red-deep); }
.c4 .c4-btn-ghost { background: none; border-color: rgba(255,255,255,.45); }
.c4 .c4-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.c4 .c4-btn-dark { background: none; color: var(--navy); border-color: rgba(22,36,62,.3); }
.c4 .c4-btn-dark:hover { background: none; color: var(--c4-red); border-color: var(--c4-red); }

.c4-sec { padding: 84px 0; }
.c4-sec-alt { background: #F5F6F8; }
.c4-dark { background: #16181D; color: #fff; padding: 84px 0; }
.c4-h2 {
  font: 800 clamp(23px, 2.5vw, 33px)/1.22 var(--sans); letter-spacing: .01em;
  color: var(--navy); margin: 0 0 18px;
}
.c4-dark .c4-h2, .c4-hero .c4-h2 { color: #fff; }
.c4-h2::after {
  content: ''; display: block; width: 54px; height: 3px; background: var(--c4-red); margin-top: 16px;
}
.c4-center .c4-h2::after, .c4-h2.c4-center::after { margin-left: auto; margin-right: auto; }
.c4-lead { font: 500 15.5px/1.75 var(--sans); color: #56637A; margin: 0 0 18px; }
.c4-dark .c4-lead { color: #A9B4C6; }
.c4-lead a { color: var(--c4-red); }
.c4-dark .c4-lead a, .c4-note a { color: #E8848F; }
.c4-center { text-align: center; }
.c4-narrow { max-width: 66ch; margin-left: auto; margin-right: auto; }
.c4-split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.c4-fig { margin: 0; }
.c4-fig img { width: 100%; height: auto; border-radius: 10px; display: block; }
.c4-list { list-style: none; margin: 22px 0 0; padding: 0; }
.c4-list li {
  position: relative; padding-left: 22px; margin-bottom: 13px;
  font: 500 15px/1.6 var(--sans); color: #A9B4C6;
}
.c4-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--c4-red); border-radius: 2px; }
.c4-list strong { color: #fff; font-weight: 700; }

.c4-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.c4-zone {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 22px 12px 18px; text-align: center;
}
.c4-zone svg {
  width: 26px; height: 26px; fill: none; stroke: var(--c4-red); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px;
}
.c4-zone span { display: block; font: 700 12.5px/1.3 var(--sans); color: var(--navy); }

.c4-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.c4-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 28px; }
.c4-card h3 { font: 800 16.5px/1.3 var(--sans); color: var(--navy); margin: 0 0 10px; }
.c4-card p { font: 500 14.5px/1.7 var(--sans); color: #56637A; margin: 0; }
.c4-card a { color: var(--c4-red); }

.c4-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 18px; margin-top: 40px; align-items: center; }
.c4-logo { display: flex; align-items: center; justify-content: center; padding: 10px; }
.c4-logo img { max-width: 100%; max-height: 42px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.c4-logo:hover img { filter: none; opacity: 1; }

.c4-note {
  border-left: 3px solid var(--c4-red); background: #FBF6F6; border-radius: 0 8px 8px 0;
  padding: 16px 20px; font: 500 14.5px/1.7 var(--sans); color: #56637A; margin: 22px 0 0;
}
.c4-note strong { color: var(--navy); }
.c4-cta { background: #F5F6F8; padding: 78px 0; }
.c4-cta .c4-actions { margin-top: 26px; }
@media (max-width: 900px) {
  .c4-split, .c4-split-flip { grid-template-columns: 1fr; gap: 30px; }
  .c4-split-flip .c4-fig { order: 2; }
  .c4-zones { grid-template-columns: repeat(2, 1fr); }
  .c4-cards { grid-template-columns: 1fr; }
  .c4-logos { grid-template-columns: repeat(3, 1fr); }
  .c4-hero { padding: 140px 0 84px; }
}
/* light-background variant of the crimson-bullet list */
.c4-list-light li { color: #56637A; }
.c4-list-light strong { color: var(--navy); }
.c4-list-light a { color: var(--c4-red); }

/* ============================================================
   WiFi Coverage Planner (wp)
   ============================================================ */
.wp-hero { background: var(--navy); color: #fff; padding: 132px 0 62px; }
.wp-hero .cx-eyebrow { color: #E9C989; }
.wp-hero h1 { font: 800 clamp(32px, 4.4vw, 54px)/1.08 var(--sans); color: #fff; margin: 0 0 18px; }
.wp-hero h1 em { font-style: normal; color: #7CBBFF; }
.wp-hero .cx-sub { color: #C4D2E8; max-width: 66ch; margin: 0; }

.wp-tool { background: #F4F6FA; padding: 44px 0 74px; }
.wp-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 30px; align-items: start; }

.wp-form { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
.wp-fs {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 20px 22px 22px; margin: 0;
}
.wp-fs legend {
  font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); padding: 0 8px; margin-left: -8px;
}
.wp-field { display: block; margin-top: 15px; }
/* display:block beats the hidden attribute — restore it */
.wp-field[hidden], .wp-notes-wrap[hidden] { display: none; }
.wp-fs .wp-field:first-of-type { margin-top: 6px; }
.wp-label { display: block; font: 700 12.5px/1.4 var(--sans); color: var(--navy); margin-bottom: 7px; }
.wp-label b { color: var(--brand); font-variant-numeric: tabular-nums; }
.wp-field select, .wp-field input[type="number"] {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: 500 14px/1.3 var(--sans); color: var(--navy); padding: 11px 12px;
}
.wp-field select:focus, .wp-field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.wp-field input[type="range"] { width: 100%; accent-color: var(--brand); }
.wp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wp-pair .wp-field { margin-top: 15px; }

.wp-out { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px 30px; }
.wp-viz { background: linear-gradient(180deg, #0F1A2E 0%, #16243E 100%); border-radius: 12px; padding: 4px 4px 2px; }
.wp-viz svg { display: block; width: 100%; height: auto; }
.wp-viz-key { display: flex; gap: 16px; justify-content: center; margin: 0; padding: 4px 0 10px; }
.wp-k { font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8FA3C2; display: flex; align-items: center; gap: 6px; }
.wp-k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.wp-k-in::before { background: #7CBBFF; }
.wp-k-out::before { background: #4ED8A0; }
.wp-k-det::before { background: #E9C989; }
.wp-k-zone::before { background: none; border: 2px solid #E9C989; width: 9px; height: 9px; }
.wp-k-rack::before { background: #4ED8A0; border-radius: 2px; }

.wp-slab { fill: rgba(124,187,255,.05); stroke: rgba(124,187,255,.52); stroke-width: 1.3; }
.wp-slab-det { fill: rgba(233,201,137,.07); stroke: rgba(233,201,137,.4); }
.wp-link { stroke: rgba(233,201,137,.5); stroke-width: 1.4; stroke-dasharray: 5 4; }
.wp-cov { fill: rgba(124,187,255,.10); stroke: rgba(124,187,255,.26); stroke-width: 1; }
.wp-cov-out { fill: rgba(78,216,160,.12); stroke: rgba(78,216,160,.32); }
.wp-cov-det { fill: rgba(233,201,137,.12); stroke: rgba(233,201,137,.32); }
.wp-ap { fill: #7CBBFF; opacity: .35; }
.wp-ap-out { fill: #4ED8A0; }
.wp-ap-det { fill: #E9C989; }
.wp-ap-core { fill: #fff; }
.wp-storey { fill: #9FB2CC; font: 800 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; paint-order: stroke; stroke: rgba(10,18,34,.85); stroke-width: 3px; }

.wp-headline { font: 800 clamp(26px, 3vw, 34px)/1.1 var(--sans); color: var(--navy); margin: 24px 0 6px; }
.wp-headline b { color: var(--brand); font-size: 1.3em; }
.wp-rule { font: 500 14px/1.65 var(--sans); color: var(--ink-soft); margin: 0 0 24px; max-width: 62ch; }
.wp-rule b { color: var(--navy); font-weight: 800; font-variant-numeric: tabular-nums; }
.wp-h2 { font: 800 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 12px; }

.wp-kit { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wp-kit-row { display: flex; gap: 14px; align-items: baseline; background: #F7F9FC; border-radius: 10px; padding: 13px 16px; }
.wp-qty { font: 800 15px/1.3 var(--sans); color: var(--brand); flex: none; min-width: 30px; font-variant-numeric: tabular-nums; }
.wp-kit-body strong { display: block; font: 700 15px/1.3 var(--sans); color: var(--navy); }
.wp-kit-body em { display: block; font: 500 13px/1.5 var(--sans); font-style: normal; color: var(--ink-soft); margin-top: 2px; }
.wp-why {
  display: block; margin-top: 8px; padding-left: 11px;
  border-left: 2px solid rgba(38,141,238,.35);
  font: 500 12.5px/1.6 var(--sans); color: #6B7A91;
}

.wp-notes { list-style: none; margin: 0 0 26px; padding: 0; }
.wp-notes li {
  position: relative; padding-left: 20px; margin-bottom: 11px;
  font: 500 14px/1.65 var(--sans); color: var(--ink-soft);
}
.wp-notes li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: #E9C989; }

.wp-cta { border-top: 1px solid var(--line); padding-top: 22px; }
.wp-summary { font: 600 14px/1.6 var(--sans); color: var(--navy); background: #F1F6FC; border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
.wp-cta .cx-hero-actions { margin: 0 0 14px; }
.cx .wp-copy { cursor: pointer; font: 700 14px/1 var(--sans); }
.wp-fine { font: 500 13px/1.6 var(--sans); color: var(--ink-soft); margin: 0; max-width: 58ch; }

@media (max-width: 980px) {
  .wp-grid { grid-template-columns: 1fr; }
  .wp-form { position: static; }
  .wp-out { padding: 20px 18px 24px; }
}
.wp-hint { font: 500 12.5px/1.55 var(--sans); color: var(--ink-soft); margin: 6px 0 12px; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wp .wp-chip, .cx .wp-chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 14px; cursor: pointer;
  font: 700 12.5px/1 var(--sans); color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.cx .wp-chip:hover { border-color: var(--brand); color: var(--brand); }
.cx .wp-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cx .wp-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wp-levels { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wp-lv { display: flex; align-items: center; gap: 10px; }
.wp-lv span { flex: 1; font: 600 12.5px/1.3 var(--sans); color: var(--navy); }
.wp-lv select { flex: none; width: 120px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: 500 12.5px/1 var(--sans); color: var(--navy); background: #fff; }
.wp-zone { fill: none; stroke: #E9C989; stroke-width: 1.6; }
.wp-zone-label { fill: #F0DCB4; font: 800 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; paint-order: stroke; stroke: rgba(10,18,34,.9); stroke-width: 3px; }
.wp-rack { fill: #4ED8A0; }
.wp-rack-ring { fill: none; stroke: #4ED8A0; stroke-width: 1.6; }
.wp-rack-label { fill: #9FE8C6; font: 800 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; paint-order: stroke; stroke: rgba(10,18,34,.9); stroke-width: 3px; }
.wp-spine { stroke: rgba(78,216,160,.55); stroke-width: 1.5; stroke-dasharray: 4 4; }

/* ---------- walk test ---------- */
.wp-walk { background: #fff; padding: 78px 0; }
.wt-panel { max-width: 720px; margin: 34px auto 0; }
.wt-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.wt-controls .wp-field { margin: 0; flex: 1 1 180px; }
.cx .wt-go { flex: none; cursor: pointer; border: 0; }
.wt-live { margin-top: 20px; }
.wt-bar { height: 6px; border-radius: 99px; background: #E9EDF3; overflow: hidden; }
.wt-bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 99px; transition: width .3s ease; }
.wt-live-text { font: 600 13.5px/1.5 var(--sans); color: var(--ink-soft); margin: 9px 0 0; font-variant-numeric: tabular-nums; }
.wt-results { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.wt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.wt-head h3 { font: 800 15px/1.3 var(--sans); color: var(--navy); margin: 0 0 14px; }
.cx .wt-clear { border: 0; background: none; cursor: pointer; font: 700 12.5px/1 var(--sans); color: var(--ink-faint, #8B96A6); text-decoration: underline; padding: 0; }
.cx .wt-clear:hover { color: var(--brand); }
.wt-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wt-row { display: grid; grid-template-columns: 1fr 96px 62px; gap: 12px; align-items: center; }
.wt-name { font: 700 14px/1.3 var(--sans); color: var(--navy); }
.wt-name small { display: block; font: 500 12px/1.3 var(--sans); color: var(--ink-soft); }
.wt-meter { height: 8px; border-radius: 99px; background: #EDF0F5; overflow: hidden; }
.wt-meter i { display: block; height: 100%; border-radius: 99px; }
.wt-pct { font: 800 13px/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums; }
.wt-g i { background: #2FA36B; } .wt-g .wt-pct, .wt-row.wt-g .wt-pct { color: #2FA36B; }
.wt-y i { background: #D9A441; } .wt-row.wt-y .wt-pct { color: #B98A46; }
.wt-r i { background: #D2492F; } .wt-row.wt-r .wt-pct { color: #C1402A; }
.wt-verdict { font: 600 15px/1.65 var(--sans); color: var(--navy); background: #F4F7FB; border-left: 3px solid var(--brand); border-radius: 0 9px 9px 0; padding: 14px 18px; margin: 0 0 18px; }
.wt-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cx .wt-toggle { cursor: pointer; font: 700 14px/1 var(--sans); }
.wt-fine { font: 500 12.5px/1.65 var(--sans); color: var(--ink-soft); margin: 0; }
.wp-cov-now-g { fill: rgba(47,163,107,.20); stroke: rgba(47,163,107,.5); }
.wp-cov-now-y { fill: rgba(217,164,65,.20); stroke: rgba(217,164,65,.55); }
.wp-cov-now-r { fill: rgba(210,73,47,.20); stroke: rgba(210,73,47,.55); }
.wp-ap-now-g { fill: #2FA36B; } .wp-ap-now-y { fill: #D9A441; } .wp-ap-now-r { fill: #D2492F; }
.wp-k-now-g::before { background: #2FA36B; } .wp-k-now-y::before { background: #D9A441; } .wp-k-now-r::before { background: #D2492F; }
@media (max-width: 560px) { .wt-row { grid-template-columns: 1fr 60px 50px; } }
.wp-viz-cap { margin: 0; padding: 10px 12px 4px; font: 800 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #7CBBFF; }
.wp-viz-cap-now { color: #E9C989; }

/* ---------- planner teaser ---------- */
.wpt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; margin: 34px 0 30px; }
.wpt-shot { margin: 0; background: linear-gradient(180deg, #0F1A2E 0%, #16243E 100%); border-radius: 14px; padding: 10px 10px 4px; }
.wpt-shot svg { display: block; width: 100%; height: auto; }
.wpt-shot figcaption { font: 600 11.5px/1.5 var(--sans); color: #8FA3C2; text-align: center; padding: 4px 10px 10px; }
.wpt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.wpt-list li { position: relative; padding-left: 26px; }
.wpt-list li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid var(--brand);
}
.wpt-list strong { display: block; font: 800 14.5px/1.35 var(--sans); color: var(--navy); }
.wpt-list span { display: block; font: 500 13.5px/1.6 var(--sans); color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 860px) { .wpt-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============ Surveillance Storage Calculator ============ */
.sc-hero h1 em { color: #4ED8A0; }

.sc-hint { font: 500 12.5px/1.6 var(--sans); color: var(--ink-soft); margin: 0 0 14px; }

.sc-grp { border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px 15px; margin-bottom: 11px; background: #FBFCFE; }
.sc-grp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sc-grp-head strong { font: 800 11.5px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--brand); }
.sc-del {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font: 700 11.5px/1 var(--sans); color: #9AA7B8; text-decoration: underline; text-underline-offset: 2px;
}
.sc-del:hover { color: #C2453C; }

.sc-grp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-grp-grid label { display: block; grid-column: span 2; }
.sc-grp-grid label:nth-child(1), .sc-grp-grid label:nth-child(2) { grid-column: span 1; }
.sc-grp-grid label:nth-child(3), .sc-grp-grid label:nth-child(4) { grid-column: span 1; }
.sc-grp-grid span { display: block; font: 700 11.5px/1.4 var(--sans); color: var(--navy); margin-bottom: 5px; }
.sc-grp-grid select, .sc-grp-grid input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: 500 13px/1.3 var(--sans); color: var(--navy); padding: 9px 10px;
}
.sc-grp-grid select:focus, .sc-grp-grid input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.sc-add {
  width: 100%; margin-top: 4px; font-size: 13px; padding: 10px 14px;
  color: var(--brand); border-color: rgba(38,141,238,.4); background: none;
}
.sc-add:hover { color: var(--brand); border-color: var(--brand); background: rgba(38,141,238,.06); }

.sc-rev { margin-top: 13px; background: #F0FAF5; border: 1px solid rgba(30,150,100,.22); border-radius: 10px; padding: 12px 14px; }
.sc-rev[hidden] { display: none; }
.sc-rev strong { display: block; font: 800 21px/1.1 var(--sans); color: #17805A; font-variant-numeric: tabular-nums; }
.sc-rev span { display: block; font: 500 12.5px/1.6 var(--sans); color: var(--ink-soft); margin-top: 3px; }

/* ---- output ---- */
.sc-cap { font: 800 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 10px; }

.sc-headline {
  background: linear-gradient(180deg, #0F1A2E 0%, #16243E 100%);
  border-radius: 13px; padding: 24px 26px 22px; text-align: center;
}
.sc-headline .sc-cap { color: #8FA3C2; }
.sc-big { margin: 0; font: 800 clamp(52px, 8vw, 84px)/1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.sc-big em { font-style: normal; font-size: .32em; color: #4ED8A0; margin-left: 8px; letter-spacing: .04em; }
.sc-sub { margin: 9px 0 0; font: 600 13.5px/1.6 var(--sans); color: #C4D2E8; font-variant-numeric: tabular-nums; }

.sc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 11px; overflow: hidden; margin: 18px 0 20px;
}
.sc-stats div { background: #fff; padding: 13px 10px; text-align: center; }
.sc-stats strong { display: block; font: 800 20px/1.1 var(--sans); color: var(--navy); font-variant-numeric: tabular-nums; }
.sc-stats span { display: block; font: 600 11px/1.3 var(--sans); color: var(--ink-soft); margin-top: 4px; }

.sc-nvr {
  background: #F7F9FC; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin-bottom: 22px;
}
.sc-nvr strong { display: block; font: 800 16px/1.3 var(--sans); color: var(--navy); }
.sc-nvr em { display: block; font: 500 13px/1.55 var(--sans); font-style: normal; color: var(--ink-soft); margin-top: 3px; }

.sc-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sc-notes li {
  position: relative; padding-left: 17px;
  font: 500 13.5px/1.68 var(--sans); color: var(--ink-soft);
}
.sc-notes li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(38,141,238,.45);
}

.sc-summary {
  margin: 22px 0 18px; padding: 14px 16px; border-radius: 10px;
  background: #F4F6FA; font: 600 13.5px/1.7 var(--sans); color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sc-actions { justify-content: flex-start; margin: 0; }

.sc-why .cl-card h3 { color: var(--navy); }

@media (max-width: 900px) {
  .sc-grp-grid { grid-template-columns: 1fr; }
  .sc-grp-grid label, .sc-grp-grid label:nth-child(1), .sc-grp-grid label:nth-child(2),
  .sc-grp-grid label:nth-child(3), .sc-grp-grid label:nth-child(4) { grid-column: span 1; }
  .sc-actions { justify-content: center; }
}

/* ---- storage calculator teaser band ---- */
.sct-band { background: var(--navy); color: #fff; padding: 62px 0; }
.sct-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.sct-band .cx-eyebrow { color: #4ED8A0; }
.sct-copy h2 { font: 800 clamp(26px, 3.2vw, 38px)/1.12 var(--sans); color: #fff; margin: 0 0 14px; }
.sct-copy p { font-size: 15.5px; line-height: 1.72; color: #C4D2E8; margin: 0 0 22px; max-width: 60ch; }
.sct-band .cx-hero-actions { margin: 0; }

.sct-fig {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center;
  background: linear-gradient(180deg, rgba(78,216,160,.09) 0%, rgba(124,187,255,.05) 100%);
  border: 1px solid rgba(255,255,255,.13); border-radius: 15px; padding: 34px 26px;
}
.sct-n { font: 800 clamp(46px, 6vw, 68px)/1 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.sct-n em { font-style: normal; font-size: .33em; color: #4ED8A0; margin-left: 7px; letter-spacing: .04em; }
.sct-l { font: 700 12.5px/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: #8FA3C2; margin-top: 6px; }
.sct-d { font: 600 13px/1.5 var(--sans); color: #C4D2E8; }

.foot-sub { margin-top: 20px !important; }

@media (max-width: 860px) {
  .sct-inner { grid-template-columns: 1fr; gap: 30px; }
  .sct-fig { order: -1; }
  .sct-band .cx-hero-actions { justify-content: flex-start; }
}

/* walk-test row: download and upload are the numbers people read */
.wt-name small b { color: var(--navy); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ================= Internet Speed Test ================= */
.st-hero {
  background:
    radial-gradient(90% 120% at 78% 0%, rgba(78,216,160,.10) 0%, rgba(78,216,160,0) 60%),
    linear-gradient(160deg, #0F1A2E 0%, #16243E 58%, #1A2C4C 100%);
  color: #fff; padding: 128px 0 66px;
}
.st-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 52px; align-items: center; }
.st-hero .cx-eyebrow { color: #4ED8A0; }
.st-hero h1 { font: 800 clamp(32px, 4.4vw, 54px)/1.08 var(--sans); color: #fff; margin: 0 0 18px; }
.st-hero h1 em { font-style: normal; color: #4ED8A0; }
.st-hero .cx-sub { color: #C4D2E8; max-width: 60ch; margin: 0 0 24px; }

.st-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.st-why li {
  position: relative; padding-left: 26px;
  font: 600 14.5px/1.6 var(--sans); color: #A9BCD6;
}
.st-why li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2px solid #4ED8A0; border-bottom: 2px solid #4ED8A0;
  transform: rotate(-45deg);
}

/* ---- the dial ---- */
.st-dial { text-align: center; }
.st-dial-in { position: relative; }
#st-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.st-track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 13; stroke-linecap: round; }
.st-fill {
  fill: none; stroke: url(#none); stroke: #4ED8A0; stroke-width: 13; stroke-linecap: round;
  transition: d .16s linear;
  filter: drop-shadow(0 0 9px rgba(78,216,160,.5));
}
.st-tick { stroke: rgba(255,255,255,.3); stroke-width: 1.6; }
.st-tick-l { fill: #7E93B2; font: 700 10px var(--sans); }
.st-mark {
  fill: #fff; stroke: #4ED8A0; stroke-width: 3;
  transition: cx .16s linear, cy .16s linear;
  filter: drop-shadow(0 0 7px rgba(78,216,160,.75));
}

.st-read {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-30%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.st-mode { font: 800 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8FA3C2; }
.st-big {
  font: 800 clamp(44px, 6vw, 60px)/1 var(--sans); color: #fff; margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.st-big-unit { font: 700 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #4ED8A0; margin-top: 6px; }

.st-phase { font: 500 13.5px/1.6 var(--sans); color: #A9BCD6; margin: 6px 0 16px; min-height: 22px; }
.st-go { min-width: 210px; }
.st-go[disabled] { opacity: .62; cursor: progress; }

/* ---- results ---- */
.st-body { background: #F4F6FA; padding: 44px 0 74px; }
.st-body > .wrap > *:first-child { margin-top: 0; }

.st-stats {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
}
.st-stats[hidden] { display: none; }
.st-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px 18px; text-align: left;
}
.st-stat-down { border-left: 3px solid #268DEE; }
.st-stat-up { border-left: 3px solid #4ED8A0; }
.st-s-lbl { display: block; font: 800 10.5px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.st-stat strong { font: 800 34px/1 var(--sans); color: var(--navy); font-variant-numeric: tabular-nums; }
.st-stat em { font: 700 13px/1 var(--sans); font-style: normal; color: var(--ink-soft); margin-left: 5px; }

.st-h2 { font: 800 clamp(21px, 2.4vw, 27px)/1.2 var(--sans); color: var(--navy); margin: 0 0 18px; }
.st-caps-wrap[hidden], .st-after[hidden] { display: none; }
.st-caps {
  list-style: none; margin: 0 0 36px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
.st-caps li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.st-caps strong { display: block; font: 800 30px/1 var(--sans); color: var(--brand); font-variant-numeric: tabular-nums; }
.st-caps span { display: block; font: 800 13.5px/1.35 var(--sans); color: var(--navy); margin: 7px 0 8px; }
.st-caps em { display: block; font: 500 13px/1.62 var(--sans); font-style: normal; color: var(--ink-soft); }

.st-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.st-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px 28px; }
.st-card h3 { font: 800 18px/1.3 var(--sans); color: var(--navy); margin: 0 0 10px; }
.st-card p { font: 500 14.5px/1.7 var(--sans); color: var(--ink-soft); margin: 0 0 16px; }
.st-field { display: block; }
.st-field span { display: block; font: 700 12.5px/1.4 var(--sans); color: var(--navy); margin-bottom: 7px; }
.st-field input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: 500 14px/1.3 var(--sans); color: var(--navy); padding: 11px 12px;
}
.st-field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.st-save-row { display: flex; }
.st-save-btn { color: var(--brand); border-color: rgba(38,141,238,.4); background: none; }
.st-save-btn:hover { color: var(--brand); border-color: var(--brand); background: rgba(38,141,238,.06); }
.st-save-note { font: 600 13px/1.65 var(--sans); color: var(--navy); margin: 14px 0 0; }
.st-save-note[hidden] { display: none; }

.st-plan-out, .st-cmp-out { margin-top: 16px; border-radius: 11px; padding: 15px 17px; border: 1px solid; }
.st-plan-out[hidden], .st-cmp-out[hidden] { display: none; }
.st-plan-out strong, .st-cmp-out strong {
  display: block; font: 800 26px/1 var(--sans); font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.st-plan-out span, .st-cmp-out span { display: block; font: 500 13.5px/1.68 var(--sans); color: var(--ink-soft); }
.st-plan-out.ok, .st-cmp-out.ok { background: #F0FAF5; border-color: rgba(30,150,100,.24); }
.st-plan-out.ok strong, .st-cmp-out.ok strong { color: #17805A; }
.st-plan-out.mid, .st-cmp-out.mid { background: #FDF7EC; border-color: rgba(190,140,40,.26); }
.st-plan-out.mid strong, .st-cmp-out.mid strong { color: #A5761B; }
.st-plan-out.low, .st-cmp-out.low { background: #FDF1F0; border-color: rgba(190,60,50,.22); }
.st-plan-out.low strong, .st-cmp-out.low strong { color: #B4392F; }

@media (max-width: 900px) {
  .st-hero { padding: 112px 0 52px; }
  .st-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .st-dial { order: -1; }
  .st-why { display: none; }
}
.st-window { font: 500 12.5px/1.7 var(--sans); color: var(--ink-soft); margin: -18px 0 30px; }
.st-window[hidden] { display: none; }
.st-why li b { color: #fff; font-weight: 800; }
.st-cap-note {
  display: block; margin-top: 7px;
  font: 600 11px/1.45 var(--sans); color: #A5761B;
}
.st-cap-note[hidden] { display: none; }

/* ============ Alarm.com how-to ============
   Instructions people follow with a phone in one hand, so the steps want to
   be large and countable rather than dense. Two cards side by side, because
   the whole point of the section is that a code and a login are different
   things and you can see both at once. */
.adc-how-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px; margin-top: 38px; text-align: left;
}
.adc-how-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 30px 30px;
}
.adc-how-tag {
  display: inline-block; font: 800 10.5px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--pxa, var(--brand));
  background: rgba(38,141,238,.08); border-radius: 999px; padding: 7px 12px;
  margin-bottom: 14px;
}
.adc-how-card h3 {
  font: 800 21px/1.25 var(--sans); color: var(--navy); margin: 0 0 8px;
}
.adc-how-card > p {
  font: 500 15px/1.7 var(--sans); color: var(--ink-soft); margin: 0 0 20px;
}
.adc-how-card h4 {
  font: 800 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 22px 0 12px;
}
.adc-how-card ol {
  counter-reset: step; list-style: none; margin: 0; padding: 0;
}
.adc-how-card ol li {
  counter-increment: step; position: relative; padding-left: 34px;
  margin-bottom: 11px; font: 500 15px/1.6 var(--sans); color: var(--navy);
}
.adc-how-card ol li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--pxa, var(--brand)); color: #fff;
  font: 700 12px/23px var(--sans); text-align: center;
}
.adc-how-levels { list-style: none; margin: 0; padding: 0; }
.adc-how-levels li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
  font: 500 14.5px/1.6 var(--sans); color: var(--ink-soft);
}
.adc-how-levels li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(38,141,238,.45);
}
.adc-how-levels strong { color: var(--navy); font-weight: 700; }
.adc-how-note {
  margin: 24px 0 0; padding: 15px 17px; border-radius: 10px;
  background: #FDF7EC; border-left: 3px solid #C99A3B;
  font: 500 14px/1.68 var(--sans); color: var(--ink-soft);
}
.adc-how-note strong { color: #8A6318; }
.adc-how-foot {
  text-align: center; margin: 32px 0 0;
  font: 500 15px/1.7 var(--sans); color: var(--ink-soft);
}
.adc-how-foot a { color: var(--brand); font-weight: 700; }

@media (max-width: 760px) {
  .adc-how-card { padding: 24px 22px 26px; }
}

/* The embed arrives as a fixed 640x360 iframe, which overflows the card on a
   phone. Sized by ratio instead, and lazy so the Vimeo player is not fetched
   for the many people who never scroll this far. */
.adc-how-vid { margin: 0 0 24px; }
/* Alarm.com shot this one on a phone — 240x426, so 9:16. A 16:9 frame
   letterboxes it with dead bars either side; at phone proportions the video
   fills its own frame. Held to a phone's width so a portrait clip does not
   tower over the steps beside it. */
.adc-how-vid-frame {
  position: relative; aspect-ratio: 9 / 16;
  width: 100%; max-width: 258px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; background: #0E1620;
}
.adc-how-vid-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.adc-how-vid figcaption {
  font: 500 13px/1.6 var(--sans); color: var(--ink-soft);
  margin-top: 12px; text-align: center; max-width: 42ch;
  margin-left: auto; margin-right: auto;
}

/* The login walkthrough is a landscape screen capture, not a phone clip, so
   it wants the full width of the card and its own 1280x740 ratio — people
   need to read the screen. preload="none" means nothing but the poster is
   fetched until someone presses play. */
.adc-how-vid-wide .adc-how-vid-frame {
  aspect-ratio: 1280 / 740;
  max-width: 100%;
}
.adc-how-vid-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #0E1620;
}

/* ============================================================
   UniFi brand page — machined
   ============================================================
   The storefront was rebuilt in cool silver because that is what
   Ubiquiti build things out of: anodised aluminium and matte
   polycarbonate with machined edges. This is the other half of
   the same room, so it is built from the same metal — the
   --m-* palette in site.css, shared by both.

   The rule the storefront settled on carries over: the accent is
   spent once, in the headline, and the controls are metal. That
   is why the section labels come down to steel here. On the dark
   closing band the arrangement inverts and the accent goes on the
   button, which is the only thing to press.
   ============================================================ */

/* --- the ground, and the alternation as two plates rather than
       white against off-white --- */
.px-unifi .cx-detail { background: var(--m-ground); }
.px-unifi .cx-detail.px-sec-alt {
  background: linear-gradient(180deg, #F4F6F9 0%, #EDF0F4 100%);
}

/* --- hero: the storefront's silver, grain and machined edge --- */
.px-unifi .cx-hero.px-hero {
  position: relative;
  background: linear-gradient(180deg, #F7F9FB 0%, #DFE4EB 100%);
}
/* a 160px tile, rasterised once and repeated — it is what stops a
   large flat field of silver reading as a blank area */
.px-unifi .cx-hero.px-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--m-grain); background-size: 160px 160px;
  opacity: .05; mix-blend-mode: multiply;
}
/* a hairline that fades at both ends reads as a milled edge; a flat
   rule across the full width reads as a table border */
.px-unifi .cx-hero.px-hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-edge) 12%, #FFFFFF 50%, var(--m-edge) 88%, transparent);
  z-index: 2;
}
.px-unifi .cx-hero.px-hero > * { position: relative; z-index: 1; }
.px-unifi .cx-hero h1 { color: var(--m-ink); }
.px-unifi .cx-sub { color: var(--m-steel); }
.px-unifi .px-hero-visual img {
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 0 0 1px rgba(11,16,23,.08),
    0 30px 64px -30px rgba(11,16,23,.5);
}

/* --- the section nav is this page's category strip --- */
.px-unifi .px-subnav {
  background: linear-gradient(180deg, #FBFCFD 0%, #EFF2F6 100%);
  border-bottom: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 18px -12px rgba(11,16,23,.35);
}
.px-unifi .px-subnav a { color: var(--m-steel); }
.px-unifi .px-subnav a:hover { color: var(--m-ink); border-color: var(--m-ink); }

/* --- each photograph on a lit plate, as the product tiles sit --- */
.px-unifi .cx-det-row img {
  border: 1px solid var(--m-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 2px rgba(11,16,23,.05),
    0 18px 34px -22px rgba(11,16,23,.4);
}

/* --- type --- */
.px-unifi .cx-eyebrow { color: var(--m-steel); font-weight: 700; letter-spacing: .13em; }
.px-unifi .cx-det-row h2 { color: var(--m-ink); }
.px-unifi .cx-det-row p,
.px-unifi .cx-det-lead { color: var(--m-steel); }
.px-unifi .cx-det-list li { color: var(--m-ink); }
.px-unifi .px-note { color: var(--m-steel); }

/* --- controls in metal, on the light half of the page --- */
.px-unifi .cx-hero-actions .btn-blue {
  background: linear-gradient(180deg, #22303F 0%, #0B1017 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 12px 26px -16px rgba(11,16,23,.75);
}
.px-unifi .cx-hero-actions .btn-blue:hover {
  background: linear-gradient(180deg, #2C3C4E 0%, #141B24 100%);
}
/* The shared rule gives ghost buttons a dark translucent ground so they
   survive a hero photograph. This hero is silver, and dark ink on that
   ground was reading as a murky grey pill — it gets a chrome face here
   instead, matching the storefront's own secondary controls. */
.px-unifi .cx-hero .cx-btn-ghost {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F5F8 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--m-edge); color: var(--m-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.px-unifi .cx-hero .cx-btn-ghost:hover {
  border-color: #A9B3C0; background: #FFFFFF;
}

/* --- the closing band: graphite, and here the accent goes on the
       button because it is the only thing to press --- */
.px-unifi .cx-cta {
  position: relative;
  background: linear-gradient(180deg, #161D25 0%, #0B1017 100%);
}
.px-unifi .cx-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--m-grain); background-size: 160px 160px;
  opacity: .1; mix-blend-mode: screen;
}
.px-unifi .cx-cta > * { position: relative; z-index: 1; }
.px-unifi .cx-cta h2 em { color: var(--pxa); }

/* ============================================================
   Utah service-area page
   ============================================================ */
.px-ut .ut-lead { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; margin: 0 0 26px; }
.px-ut .cx-detail h2 { font-size: clamp(26px, 2.9vw, 35px); font-weight: 800; color: var(--navy); margin: 0 0 14px; letter-spacing: -.015em; }
.px-ut .cx-detail h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }

/* the cited figures — the one place on the page that argues with numbers */
.ut-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0 14px; }
.ut-stat {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px -18px rgba(13,27,51,.4);
}
.ut-stat strong {
  display: block; font: 800 clamp(30px, 3.4vw, 42px)/1 var(--sans);
  color: var(--brand); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ut-stat span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.ut-src { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 26px; }
.ut-src a { color: var(--brand); }

/* two link columns */
.ut-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; }
.ut-links { list-style: none; margin: 0; padding: 0; }
.ut-links li { padding: 6px 0; }
.ut-links a { font-size: 15.5px; color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; }
.ut-links a:hover { color: var(--brand); border-color: currentColor; }

/* coverage */
.ut-counties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 8px 0 20px; }
.ut-county {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
}
.ut-county p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.ut-note { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 70ch; }

/* tools */
.ut-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.ut-tool {
  display: block; text-decoration: none; padding: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ut-tool:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgba(13,27,51,.4); }
.ut-tool p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* questions — native details/summary, so it works without script */
.ut-faq { max-width: 78ch; }
.ut-faq details { border-bottom: 1px solid var(--line); }
.ut-faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font: 700 16px/1.45 var(--sans); color: var(--navy);
}
.ut-faq summary::-webkit-details-marker { display: none; }
.ut-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 25px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .2s;
}
.ut-faq details[open] summary::after { transform: rotate(225deg); top: 28px; }
.ut-faq details p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 18px; padding-right: 34px; }

@media (max-width: 900px) {
  .ut-stats, .ut-tools { grid-template-columns: 1fr; }
  .ut-cols, .ut-counties { grid-template-columns: 1fr; gap: 22px; }
}

/* This page's hero and closing band are light, not the dark photo hero the
   .cx- components default to, so they take the interior treatment the other
   platform pages use rather than white text on an unset background. */
.px-ut .cx-hero { background: linear-gradient(180deg, #FFFFFF 0%, #EDF1F7 100%); color: #06090F; }
.px-ut .cx-hero h1 { color: var(--navy); }
.px-ut .cx-hero h1 em { font-style: normal; color: var(--brand); }
.px-ut .cx-sub { color: var(--ink-soft); }
.px-ut .cx-hero .cx-btn-ghost {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line); color: var(--navy);
}
.px-ut .cx-hero .cx-btn-ghost:hover { border-color: var(--navy); }

/* The commercial plan is a drawing rather than a photograph, so it gets a
   little more room to breathe and a caption — the point of it is that a GC
   can read the symbols, which needs width. */
.cnc-plan { margin: 26px 0 22px; max-width: 900px; }
.cnc-plan img { background: #fff; }
.cnc-plan figcaption {
  margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  padding-left: 14px; border-left: 3px solid var(--brand);
}

/* ============================================================
   Loxone page (lx) — loxone.com's white calm and signature green,
   held to the house's luxury restraint: green as hairline, not paint
   ============================================================ */
.lx { background: #fff; }
.lx-hero {
  background-color: #0E1512; background-size: cover; background-position: 50% 55%;
  color: #fff; padding: 165px 0 105px;
}
.lx-hero .wrap { max-width: 1080px; }
.lx-eyebrow {
  font: 800 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: #69C350; margin: 0 0 24px;
}
.lx-hero h1 { font: 700 clamp(38px, 5.2vw, 64px)/1.07 var(--sans); letter-spacing: -.02em; margin: 0 0 18px; max-width: 15em; }
.lx-hero h1 em { font-style: normal; color: #8FD97A; }
.lx-sub { font: 500 17px/1.65 var(--sans); color: #C6D2CB; margin: 0 0 34px; max-width: 52ch; }
.lx-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lx-domains { padding: 92px 0; }
.lx-h2 { font: 700 clamp(30px, 3.4vw, 44px)/1.12 var(--sans); letter-spacing: -.015em; color: #101613; margin: 0 0 14px; text-align: center; }
.lx-lead { font: 500 16.5px/1.65 var(--sans); color: #5C6B62; text-align: center; max-width: 64ch; margin: 0 auto 46px; }
.lx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lx-cell {
  border: 1px solid #E4EAE5; border-radius: 16px; padding: 24px 22px 22px;
  transition: border-color .2s, transform .18s;
}
.lx-cell:hover { border-color: #69C350; transform: translateY(-2px); }
.lx-cell strong { display: block; font: 800 16px/1.25 var(--sans); color: #101613; margin: 0 0 7px; }
.lx-cell strong::before { content: ''; display: block; width: 22px; height: 3px; border-radius: 2px; background: #69C350; margin-bottom: 12px; }
.lx-cell span { font: 500 13.5px/1.55 var(--sans); color: #5C6B62; }
.lx-dark { background-color: #0E1512; background-size: cover; background-position: 50% 50%; color: #fff; padding: 96px 0; }
.lx-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.lx-split figure { margin: 0; }
.lx-split img { width: 100%; height: auto; border-radius: 16px; }
.lx-dark .lx-h2 { color: #fff; text-align: left; }
.lx-dark p { font: 500 15.5px/1.72 var(--sans); color: #AABBB0; margin: 0 0 16px; max-width: 48ch; }
.lx-dark strong { color: #fff; }
.lx-ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.lx-ticks li { position: relative; padding: 0 0 12px 26px; font: 500 15px/1.55 var(--sans); color: #C6D2CB; }
.lx-ticks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid #69C350; border-bottom: 2.5px solid #69C350; transform: rotate(-45deg); }
.lx-light { padding: 96px 0; }
.lx-light .lx-h2 { text-align: left; }
.lx-light .lx-split p { font: 500 15.5px/1.72 var(--sans); color: #5C6B62; margin: 0 0 16px; max-width: 48ch; }
.lx-honest { background: #F4F8F4; padding: 76px 0; }
.lx-honest .wrap { max-width: 880px; }
.lx-honest h2 { font: 700 clamp(26px, 3vw, 36px)/1.15 var(--sans); color: #101613; margin: 0 0 18px; }
.lx-honest p { font: 500 16px/1.75 var(--sans); color: #46554B; margin: 0 0 14px; }
.lx-honest a { color: #2E7D32; font-weight: 700; }
.lx-cta { background: #0E1512; color: #fff; padding: 84px 0; text-align: center; }
.lx-cta h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.12 var(--sans); margin: 0 0 12px; }
.lx-cta p { font: 500 16px/1.6 var(--sans); color: #AABBB0; margin: 0 auto 30px; max-width: 50ch; }
.lx-cta .lx-actions { justify-content: center; }
@media (max-width: 1024px) { .lx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .lx-split { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 560px) { .lx-hero { padding-top: 120px; } .lx-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Brilliant page (bri) — brilliant.tech's bright product warmth,
   orange reserved for the moments the screen would glow
   ============================================================ */
.bri { background: #fff; }
.bri-hero {
  background-color: #17130E; background-size: cover; background-position: 62% 50%;
  color: #fff; padding: 165px 0 105px;
}
.bri-hero .wrap { max-width: 1080px; }
.bri-eyebrow {
  font: 800 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: #F6921E; margin: 0 0 24px;
}
.bri-hero h1 { font: 700 clamp(38px, 5.2vw, 64px)/1.07 var(--sans); letter-spacing: -.02em; margin: 0 0 18px; max-width: 15em; }
.bri-hero h1 em { font-style: normal; color: #FFC073; }
.bri-sub { font: 500 17px/1.65 var(--sans); color: #D8CFC4; margin: 0 0 34px; max-width: 52ch; }
.bri-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bri-light { padding: 94px 0; }
.bri-h2 { font: 700 clamp(30px, 3.4vw, 44px)/1.12 var(--sans); letter-spacing: -.015em; color: #171310; margin: 0 0 14px; text-align: center; }
.bri-lead { font: 500 16.5px/1.65 var(--sans); color: #6B6259; text-align: center; max-width: 64ch; margin: 0 auto 46px; }
.bri-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.bri-row figure { margin: 0; }
.bri-row img { width: 100%; height: auto; border-radius: 16px; }
.bri-row .bri-h2 { text-align: left; }
.bri-row p { font: 500 15.5px/1.72 var(--sans); color: #6B6259; margin: 0 0 16px; max-width: 48ch; }
.bri-row-flip figure { order: 2; }
.bri-hardware { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.bri-hw {
  border: 1px solid #EDE7DF; border-radius: 16px; padding: 24px 22px 22px;
  transition: border-color .2s, transform .18s;
}
.bri-hw:hover { border-color: #F6921E; transform: translateY(-2px); }
.bri-hw strong { display: block; font: 800 16px/1.25 var(--sans); color: #171310; margin: 0 0 7px; }
.bri-hw strong::before { content: ''; display: block; width: 22px; height: 3px; border-radius: 2px; background: #F6921E; margin-bottom: 12px; }
.bri-hw span { font: 500 13.5px/1.55 var(--sans); color: #6B6259; }
.bri-honest { background: #FBF7F1; padding: 76px 0; }
.bri-honest .wrap { max-width: 880px; }
.bri-honest h2 { font: 700 clamp(26px, 3vw, 36px)/1.15 var(--sans); color: #171310; margin: 0 0 18px; }
.bri-honest p { font: 500 16px/1.75 var(--sans); color: #57504A; margin: 0 0 14px; }
.bri-honest a { color: #C66A00; font-weight: 700; }
.bri-cta { background: #17130E; color: #fff; padding: 84px 0; text-align: center; }
.bri-cta h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.12 var(--sans); margin: 0 0 12px; }
.bri-cta p { font: 500 16px/1.6 var(--sans); color: #D8CFC4; margin: 0 auto 30px; max-width: 50ch; }
.bri-cta .bri-actions { justify-content: center; }
@media (max-width: 1024px) { .bri-hardware { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .bri-row { grid-template-columns: 1fr; gap: 26px; } .bri-row-flip figure { order: 0; } }
@media (max-width: 560px) { .bri-hero { padding-top: 120px; } }

/* Brand name in the hero badge wears the brand's color */
.lx .inst-by-brand { color: #69C350; }

/* ============================================================
   Camera brand pages — each page wears its brand's design
   grammar (palette + accents), applied over the shared cx bones.
   Original CSS throughout; inspiration only, nothing copied.
   ============================================================ */

/* Axis (.bh-axis) — Scandinavian restraint: ivory, deep navy, the
   warm yellow used as a thin signature line, never as paint */
.bh-axis .cx-eyebrow { color: #B78B00; letter-spacing: .18em; }
.bh-axis .cx-hero { background: #0A1A33; }
.bh-axis .cx-hero h1 em { color: #FFCC33; font-style: normal; }
.bh-axis .cx-detail h2, .bh-axis .sv-ent h2 { color: #00205B; }
.bh-axis .cx-detail h2::after, .bh-axis .sv-ent h2::after {
  content: ''; display: block; width: 44px; height: 4px; background: #FFCC33; margin-top: 14px;
}
.bh-axis .cx-center::after { margin-left: auto; margin-right: auto; }
.bh-axis .btn-blue { background: #00205B; }
.bh-axis .btn-blue:hover { background: #FFCC33; color: #00205B; }
.bh-axis .sv-ent { background: #F7F5EF; }
.bh-axis .sv-ent-note { border-left: 3px solid #FFCC33; }

/* Avigilon (.bh-avigilon) — Motorola-family enterprise: deep navy
   grounds, azure as the single vivid voice */
.bh-avigilon .cx-eyebrow { color: #0073E6; }
.bh-avigilon .cx-hero { background: #071426; }
.bh-avigilon .cx-hero h1 em { color: #4DA3FF; font-style: normal; }
.bh-avigilon .cx-detail h2, .bh-avigilon .sv-ent h2 { color: #0B1F3A; }
.bh-avigilon .btn-blue { background: #0073E6; }
.bh-avigilon .btn-blue:hover { background: #005BB8; }
.bh-avigilon .sv-ent { background: #0B1F3A; }
.bh-avigilon .sv-ent h2, .bh-avigilon .sv-ent-lead, .bh-avigilon .sv-ent .cx-det-list li { color: #E8F0FA; }
.bh-avigilon .sv-ent .cx-det-list li strong { color: #fff; }
.bh-avigilon .sv-ent .cx-eyebrow { color: #4DA3FF; }
.bh-avigilon .sv-ent-note { background: rgba(77,163,255,.08); border-left: 3px solid #0073E6; }
.bh-avigilon .sv-ent-note p, .bh-avigilon .sv-ent-note a { color: #C9DCF2; }
.bh-avigilon .sv-ent-note a { text-decoration: underline; }

/* Genetec (.bh-genetec) — unified-platform ink: near-black blocks,
   electric blue primary, a disciplined orange secondary, square edges */
.bh-genetec .cx-eyebrow { color: #0072CE; letter-spacing: .16em; }
.bh-genetec .cx-hero { background: #0D1117; }
.bh-genetec .cx-hero h1 em { color: #FF8A3D; font-style: normal; }
.bh-genetec .cx-detail h2, .bh-genetec .sv-ent h2 { color: #101820; }
.bh-genetec .btn-blue { background: #0072CE; border-radius: 4px; }
.bh-genetec .btn-blue:hover { background: #005CA8; }
.bh-genetec .cx-btn-ghost { border-radius: 4px; }
.bh-genetec .sv-ent { background: #101820; }
.bh-genetec .sv-ent h2, .bh-genetec .sv-ent-lead, .bh-genetec .sv-ent .cx-det-list li { color: #E6EAEE; }
.bh-genetec .sv-ent .cx-det-list li strong { color: #fff; }
.bh-genetec .sv-ent .cx-eyebrow { color: #FF8A3D; }
.bh-genetec .sv-ent-note { background: rgba(255,138,61,.07); border-left: 3px solid #FF8A3D; border-radius: 0; }
.bh-genetec .sv-ent-note p, .bh-genetec .sv-ent-note a { color: #D9DEE4; }
.bh-genetec .sv-ent-note a { text-decoration: underline; }

/* Milestone (.bh-milestone) — open Scandinavian enterprise: light,
   friendly, the purple worn confidently but sparingly */
.bh-milestone .cx-eyebrow { color: #6C3FA0; }
.bh-milestone .cx-hero { background: #1D1230; }
.bh-milestone .cx-hero h1 em { color: #C9A6F0; font-style: normal; }
.bh-milestone .cx-detail h2, .bh-milestone .sv-ent h2 { color: #2C1B4D; }
.bh-milestone .btn-blue { background: #6C3FA0; border-radius: 999px; }
.bh-milestone .btn-blue:hover { background: #55317E; }
.bh-milestone .cx-btn-ghost { border-radius: 999px; }
.bh-milestone .sv-ent { background: #F5F1FA; }
.bh-milestone .sv-ent-note { border-left: 3px solid #6C3FA0; background: #fff; }

/* Digital Watchdog (.bh-dw) — charcoal and signal orange, workmanlike
   confidence, product-forward energy */
.bh-dw .cx-eyebrow { color: #F26A21; letter-spacing: .16em; }
.bh-dw .cx-hero { background: #131313; }
.bh-dw .cx-hero h1 em { color: #FF8A4D; font-style: normal; }
.bh-dw .cx-detail h2, .bh-dw .sv-ent h2 { color: #1A1A1A; }
.bh-dw .btn-blue { background: #F26A21; }
.bh-dw .btn-blue:hover { background: #D5540F; }
.bh-dw .sv-ent { background: #1A1A1A; }
.bh-dw .sv-ent h2, .bh-dw .sv-ent-lead, .bh-dw .sv-ent .cx-det-list li { color: #ECECEC; }
.bh-dw .sv-ent .cx-det-list li strong { color: #fff; }
.bh-dw .sv-ent .cx-eyebrow { color: #FF8A4D; }
.bh-dw .sv-ent-note { background: rgba(242,106,33,.08); border-left: 3px solid #F26A21; }
.bh-dw .sv-ent-note p, .bh-dw .sv-ent-note a { color: #DDD; }
.bh-dw .sv-ent-note a { text-decoration: underline; }

/* Axis and Milestone takeover bands are light — the base .sv-ent text
   colors assume navy and vanish on them. Ink them properly. */
.bh-axis .sv-ent-lead, .bh-milestone .sv-ent-lead { color: #46505E; }
.bh-axis .sv-ent .cx-det-list li, .bh-milestone .sv-ent .cx-det-list li { color: #3A4450; }
.bh-axis .sv-ent .cx-det-list li strong, .bh-milestone .sv-ent .cx-det-list li strong { color: #101820; }
.bh-axis .sv-ent-note p, .bh-milestone .sv-ent-note p { color: #3A4450; }
.bh-axis .sv-ent-note a, .bh-milestone .sv-ent-note a { color: inherit; text-decoration: underline; font-weight: 700; }
.bh-axis .sv-ent-note { background: #fff; }
/* Linked chips in the "& More" roster keep the chip look, gain affordance */
.cx-more-list li a {
  display: inline-flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none;
}
.cx-more-list li:has(a):hover { border-color: var(--brand); }
.cx-more-list li a:hover { color: var(--brand); }

/* ============================================================
   Brand-page expansion components: platform grid, fact chips,
   vertical band, FAQ. Accent colors keyed off each .bh-* skin.
   ============================================================ */
.bh-plat { padding: 92px 0; }
.bh-plat .cx-eyebrow { text-align: center; }
.bh-h2c { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; font-weight: 800; color: var(--navy); text-align: center; margin: 0 0 14px; }
.bh-lead { font: 400 16.5px/1.75 var(--sans); color: var(--ink-soft); text-align: center; max-width: 66ch; margin: 0 auto 44px; }
.bh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bh-cell { border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px 22px; background: #fff; transition: border-color .2s, transform .18s; }
.bh-cell:hover { transform: translateY(-2px); }
.bh-cell strong { display: block; font: 800 16px/1.3 var(--sans); color: var(--navy); margin: 0 0 7px; }
.bh-cell strong::before { content: ''; display: block; width: 22px; height: 3px; border-radius: 2px; margin-bottom: 12px; background: var(--brand); }
.bh-cell span { font: 500 13.5px/1.6 var(--sans); color: var(--ink-soft); }
.bh-axis .bh-cell strong::before, .bh-axis .bh-cell:hover { border-color: #E5B800; }
.bh-axis .bh-cell strong::before { background: #FFCC33; }
.bh-avigilon .bh-cell strong::before { background: #0073E6; }
.bh-avigilon .bh-cell:hover { border-color: #0073E6; }
.bh-genetec .bh-cell { border-radius: 4px; }
.bh-genetec .bh-cell strong::before { background: #0072CE; }
.bh-genetec .bh-cell:hover { border-color: #FF8A3D; }
.bh-milestone .bh-cell { border-radius: 18px; }
.bh-milestone .bh-cell strong::before { background: #6C3FA0; }
.bh-milestone .bh-cell:hover { border-color: #6C3FA0; }
.bh-dw .bh-cell strong::before { background: #F26A21; }
.bh-dw .bh-cell:hover { border-color: #F26A21; }

/* fact chips — one true public fact each, worn like credentials */
.bh-facts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 40px 0 0; }
.bh-fact { border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; background: #FAFBFD; font: 500 13.5px/1.5 var(--sans); color: var(--ink-soft); max-width: 240px; }
.bh-fact strong { display: block; font: 800 15px/1.3 var(--sans); color: var(--navy); margin-bottom: 3px; }

/* Utah fit band */
.bh-fit { background: #F5F7FA; padding: 76px 0; }
.bh-fit .wrap { max-width: 900px; }
.bh-fit h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--navy); margin: 0 0 16px; }
.bh-fit p { font: 400 16px/1.8 var(--sans); color: var(--ink-soft); margin: 0 0 14px; }
.bh-fit p strong { color: var(--navy); }
.bh-fit a { color: var(--brand-deep); font-weight: 700; }

/* FAQ on brand pages (shield_faq renders .al-faq; these pages don't load
   alarms.css, so the accordion gets its rules here too) */
.bh-faqs { padding: 84px 0 96px; }
.cx .al-faq { max-width: 860px; margin: 30px auto 0; }
.cx .al-faq details { border-bottom: 1px solid var(--line); }
.cx .al-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 17px/1.4 var(--sans); color: var(--navy); }
.cx .al-faq summary::-webkit-details-marker { display: none; }
.cx .al-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .22s;
}
.cx .al-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cx .al-faq .al-a { padding: 0 30px 22px 0; }
.cx .al-faq .al-a p { margin: 0 0 12px; font: 400 15.5px/1.75 var(--sans); color: var(--ink-soft); }

@media (max-width: 900px) { .bh-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bh-grid { grid-template-columns: 1fr; } }

/* Brand hero skins recolor .cx-hero, so each fade gradient must blend to
   the same brand color — otherwise the photo's left edge shows a seam. */
.bh-axis .cx-hero-photo::before {
  background: linear-gradient(90deg, #0A1A33 0%, rgba(10,26,51,.86) 22%, rgba(10,26,51,.25) 55%, rgba(10,26,51,0) 75%);
}
.bh-avigilon .cx-hero-photo::before {
  background: linear-gradient(90deg, #071426 0%, rgba(7,20,38,.86) 22%, rgba(7,20,38,.25) 55%, rgba(7,20,38,0) 75%);
}
.bh-genetec .cx-hero-photo::before {
  background: linear-gradient(90deg, #0D1117 0%, rgba(13,17,23,.86) 22%, rgba(13,17,23,.25) 55%, rgba(13,17,23,0) 75%);
}
.bh-milestone .cx-hero-photo::before {
  background: linear-gradient(90deg, #1D1230 0%, rgba(29,18,48,.86) 22%, rgba(29,18,48,.25) 55%, rgba(29,18,48,0) 75%);
}
.bh-dw .cx-hero-photo::before {
  background: linear-gradient(90deg, #131313 0%, rgba(19,19,19,.86) 22%, rgba(19,19,19,.25) 55%, rgba(19,19,19,0) 75%);
}

/* ButterflyMX (.bh-bmx) — clean white multifamily-tech grammar: deep navy
   grounds with the coral accent worn sparingly */
.bh-bmx .cx-eyebrow { color: #6600FF; letter-spacing: .16em; }
.bh-bmx .cx-hero { background: #17102B; }
.bh-bmx .cx-hero-photo::before {
  background: linear-gradient(90deg, #17102B 0%, rgba(23,16,43,.86) 22%, rgba(23,16,43,.25) 55%, rgba(23,16,43,0) 75%);
}
.bh-bmx .cx-hero h1 em { color: #B98CFF; font-style: normal; }
.bh-bmx .cx-detail h2, .bh-bmx .sv-ent h2 { color: #1B1235; }
.bh-bmx .btn-blue { background: #6600FF; border-radius: 10px; }
.bh-bmx .btn-blue:hover { background: #4E00C2; }
.bh-bmx .cx-btn-ghost { border-radius: 10px; }
.bh-bmx .sv-ent { background: #F6F3FE; }
.bh-bmx .sv-ent-lead, .bh-bmx .sv-ent .cx-det-list li { color: #3A4450; }
.bh-bmx .sv-ent .cx-det-list li strong { color: #1B1235; }
.bh-bmx .sv-ent-note { background: #fff; border-left: 3px solid #6600FF; }
.bh-bmx .sv-ent-note p { color: #3A4450; }
.bh-bmx .sv-ent-note a { color: inherit; text-decoration: underline; font-weight: 700; }
.bh-bmx .bh-cell strong::before { background: #6600FF; }
.bh-bmx .bh-cell:hover { border-color: #6600FF; }

/* ButterflyMX wing colors: purple stays primary, the cells and fact chips
   cycle all four wings like the logo */
.bh-bmx .bh-grid .bh-cell:nth-child(4n+2) strong::before { background: #2B9ADE; }
.bh-bmx .bh-grid .bh-cell:nth-child(4n+3) strong::before { background: #FFD22F; }
.bh-bmx .bh-grid .bh-cell:nth-child(4n+4) strong::before { background: #E24456; }
.bh-bmx .bh-grid .bh-cell:nth-child(4n+2):hover { border-color: #2B9ADE; }
.bh-bmx .bh-grid .bh-cell:nth-child(4n+3):hover { border-color: #FFD22F; }
.bh-bmx .bh-grid .bh-cell:nth-child(4n+4):hover { border-color: #E24456; }
.bh-bmx .bh-facts .bh-fact:nth-child(1) { border-top: 3px solid #6600FF; }
.bh-bmx .bh-facts .bh-fact:nth-child(2) { border-top: 3px solid #2B9ADE; }
.bh-bmx .bh-facts .bh-fact:nth-child(3) { border-top: 3px solid #FFD22F; }
/* the manufacturer family shot floats on white; no crop box */
.bh-bmx .bmx-family img { object-fit: contain; background: #fff; border-radius: 14px; padding: 18px; border: 1px solid var(--line); }

/* Deep Sentinel (.bh-ds) — their unapologetic alarm red on clean light
   grounds; the hero goes near-black so the red reads as a siren */
.bh-ds .cx-eyebrow { color: #EE2D2F; letter-spacing: .16em; }
.bh-ds .cx-hero { background: #161213; }
.bh-ds .cx-hero-photo::before {
  background: linear-gradient(90deg, #161213 0%, rgba(22,18,19,.86) 22%, rgba(22,18,19,.25) 55%, rgba(22,18,19,0) 75%);
}
.bh-ds .cx-hero h1 em { color: #FF6B6C; font-style: normal; }
.bh-ds .cx-detail h2, .bh-ds .sv-ent h2 { color: #1C1517; }
.bh-ds .btn-blue { background: #EE2D2F; }
.bh-ds .btn-blue:hover { background: #C21B1D; }
.bh-ds .sv-ent { background: #FBF6F6; }
.bh-ds .sv-ent-lead, .bh-ds .sv-ent .cx-det-list li { color: #3F393A; }
.bh-ds .sv-ent .cx-det-list li strong { color: #1C1517; }
.bh-ds .sv-ent-note { background: #fff; border-left: 3px solid #EE2D2F; }
.bh-ds .sv-ent-note p { color: #3F393A; }
.bh-ds .sv-ent-note a { color: inherit; text-decoration: underline; font-weight: 700; }
.bh-ds .bh-cell strong::before { background: #EE2D2F; }
.bh-ds .bh-cell:hover { border-color: #EE2D2F; }
.bh-ds .bh-facts .bh-fact strong { color: #C21B1D; }
.bh-ds .ds-center img { border-radius: 16px; box-shadow: 0 24px 60px rgba(22,18,19,.28); border: 1px solid rgba(238,45,47,.18); }
.bh-ds #guards h2 { color: #1C1517; }
.bh-ds #guards .cx-det-list li strong { color: #C21B1D; }

/* Hub hero art (tutorials + product updates): brand lockup over a row of
   content chips, in the hero's right column. */
.hub-art { display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: center; }
.hub-art-logo { max-width: 400px; width: 88%; height: auto; opacity: .96; }
.hub-chips { display: flex; gap: 14px; }
.hub-chips img { width: 118px; height: 118px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
@media (max-width: 900px) { .hub-art { margin-top: 34px; } .hub-chips img { width: 96px; height: 96px; } }

/* Product-updates hub hero: black, centered, logo above everything —
   mirroring Alarm.com's own launch-email layout. */
.pu-hero { background: #000 url('https://shieldlowvoltage.com/wp-content/uploads/2026/09/hero-brushed-dark.jpg') center / cover no-repeat; text-align: center; }
.pu-hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 92px; }
.pu-hero-logo { width: min(640px, 82vw); height: auto; }
.pu-hero .cx-hero-copy { max-width: 760px; margin: 0 auto; }
.pu-hero .cx-sub { margin-left: auto; margin-right: auto; }

/* Tutorials hub hero: same centered-lockup layout as the updates hub, but
   on white with dark type. */
.tut-hero { background: #fff url('https://shieldlowvoltage.com/wp-content/uploads/2026/09/hero-brushed-light.jpg') center / cover no-repeat; }
.tut-hero .cx-eyebrow { color: var(--brand); }
.tut-hero h1 { color: var(--navy); }
.tut-hero .cx-sub { color: #5A6B85; }

/* ============ AJAX (page-ajax) ============
   Wears Ajax's own design language: white ground, near-black type, hairline
   tiles, a single black band. Type is deliberately tighter and quieter than
   the rest of the site. */
.aj { background: #fff; color: #111; }
.aj .aj-eyebrow { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8a8f98; margin: 0 0 14px; }
.aj h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.015em; line-height: 1.08; color: #111; margin: 0 0 18px; }
.aj .aj-lead { font-size: 17px; line-height: 1.65; color: #3c4046; max-width: 620px; }
.aj .aj-lead a { color: #111; text-decoration: underline; }
.aj-hero { padding: 128px 0 64px; background: #fff; }
.aj-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.aj-logo { display: block; font-size: 34px; color: #111; margin-bottom: 22px; }
.aj-logo svg { height: 1em; width: auto; }
.aj-dealer { font: 600 13px/1.4 var(--sans); color: #8a8f98; margin: 0 0 26px; }
.aj-hero h1 { font-size: clamp(44px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; color: #111; margin: 0 0 20px; }
.aj-sub { font-size: 18px; line-height: 1.6; color: #3c4046; max-width: 540px; margin: 0 0 30px; }
.aj-ghost { color: #111 !important; border-color: #d5d8dd !important; }
.aj-hero-img { margin: 0; }
.aj-hero-img img { width: 100%; height: auto; display: block; }
.aj-cats { padding: 40px 0 72px; }
.aj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid #e7e9ec; border-radius: 2px; }
.aj-tile { padding: 30px 26px 34px; border-right: 1px solid #e7e9ec; transition: background .2s; }
.aj-tile:last-child { border-right: none; }
.aj-tile:hover { background: #fafbfc; }
.aj-tile strong { display: block; font-size: 17.5px; font-weight: 800; color: #111; margin-bottom: 10px; letter-spacing: -.01em; }
.aj-tile span { font-size: 14.5px; line-height: 1.6; color: #5c626b; }
.aj-photo { padding: 40px 0 84px; }
.aj-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.aj-split figure { margin: 0; }
.aj-split img { width: 100%; height: auto; display: block; border-radius: 2px; }
.aj-list { list-style: none; padding: 0; margin: 22px 0 0; }
.aj-list li { padding: 13px 0; border-top: 1px solid #e7e9ec; font-size: 15.5px; line-height: 1.55; color: #3c4046; }
.aj-dark { background: #0c0d0f; color: #fff; padding: 92px 0; }
.aj-dark h2 { color: #fff; }
.aj-eyebrow-dark { color: #6f7680 !important; }
.aj-dark .aj-lead { color: #b9bec6; }
.aj-list-dark li { border-top-color: #24262b; color: #b9bec6; }
.aj-list-dark li strong { color: #fff; }
.aj-stats { border-bottom: 1px solid #e7e9ec; }
.aj-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.aj-stats-row > div { padding: 44px 26px; border-right: 1px solid #e7e9ec; text-align: center; }
.aj-stats-row > div:first-child { border-left: 1px solid #e7e9ec; }
.aj-stats-row strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: #111; margin-bottom: 8px; }
.aj-stats-row span { font-size: 13.5px; line-height: 1.5; color: #8a8f98; }
.aj-shield { padding: 88px 0 40px; }
.aj-faq { padding: 48px 0 80px; }
.aj-faq .al-faq summary { color: #111; }
@media (max-width: 1000px) {
  .aj-hero { padding-top: 104px; }
  .aj-hero-grid, .aj-split { grid-template-columns: 1fr; gap: 34px; }
  .aj-split-rev figure { order: -1; }
  .aj-grid { grid-template-columns: 1fr 1fr; }
  .aj-tile { border-bottom: 1px solid #e7e9ec; }
  .aj-stats-row { grid-template-columns: 1fr 1fr; }
  .aj-stats-row > div { border-left: none !important; }
}
@media (max-width: 560px) { .aj-grid, .aj-stats-row { grid-template-columns: 1fr; } }
.aj .cx-cta h2 { color: #fff; }

/* Brand-page hero logos: the brand's own mark leads the hero, Ajax-style. */
.pbl { display: block; margin: 0 0 20px; }
.pbl img { height: 58px; width: auto; max-width: 340px; display: block; }
.pbl img.pbl-sq { height: 72px; }
.px-sf .pbl { margin-top: 92px; }
.c4-hero .pbl img { margin: 0 auto; }
.uni-cert { display: inline-block; margin: -4px 0 18px; }
.uni-cert img { height: 30px; width: auto; display: block; }
/* unifi honest band: list body text must read on the dark sv-ent ground */
main.px-unifi .sv-ent .cx-det-list li { color: #C9D6EA; }
main.px-unifi .sv-ent .cx-det-list li strong { color: #fff; }
main.px-unifi .sv-ent h2 { color: #fff; }
.px-adc-title .pbl img { height: 64px; }
/* Alarm.com hero bands carry the brand mark on the imagery itself */
.px-adc-photo .adc-hero-logo {
  position: absolute; left: 5.5%; bottom: 36px;
  height: 60px; width: auto; z-index: 1;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
@media (max-width: 700px) { .px-adc-photo .adc-hero-logo { height: 38px; bottom: 22px; } }

/* Lutron tier pages: spec tables + two-column detail grids */
.lu-spec { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: 15px; }
.lu-spec th, .lu-spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid #E4E4E4; vertical-align: top; }
.lu-spec th { width: 38%; font-weight: 700; color: #1A1A1A; }
.lu-spec td { color: #4A4A4A; }
.lu-spec tr:last-child th, .lu-spec tr:last-child td { border-bottom: 0; }
.lu-spec-wrap { overflow-x: auto; }
.lu-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 46px; margin-top: 30px; }
.lu-grid2 h4 { font: 700 17px/1.3 var(--sans); color: #1A1A1A; margin: 0 0 8px; }
.lu-grid2 p { font-size: 15px; line-height: 1.65; color: #4A4A4A; margin: 0; }
.lu-note { background: #F2F2F2; border-left: 3px solid #2E6BC5; padding: 20px 24px; margin: 28px 0 0; font-size: 15.5px; line-height: 1.65; color: #3A3A3A; }
.lu-note strong { color: #1A1A1A; }
@media (max-width: 860px) { .lu-grid2 { grid-template-columns: 1fr; gap: 26px; } }
/* centred brand heroes: the logo must centre with everything else */
.px-josh-hero .pbl img, .sns-hero .pbl img { margin-inline: auto; }
.sns-hero .pbl { margin-bottom: 18px; }

/* Opted-in mobile heroes author the photo div inside .cx-hero-copy so it can
   flow between the headline and the supporting copy on phones. On desktop the
   photo is still absolutely positioned — but as a later, positioned sibling it
   would paint OVER the copy and clip the headline. Restore the stacking. */
.cx-hero-copy > .cx-hero-photo { z-index: 0; }
.cx-hero-copy > :not(.cx-hero-photo) { position: relative; z-index: 1; }

/* The Josh hero photo now lives inside .px-josh-hero-inner so it can flow
   between the logo and the copy on mobile. The inner must therefore NOT be a
   positioned ancestor, or on desktop the absolutely-positioned photo is
   confined to that 760px column instead of spanning the section. Stacking is
   handled by explicit z-index on the children instead. */
.px-josh-hero-inner { position: static; }

/* Sonos hero: the photo moves from the section's own background into a div
   inside the wrap, so it can flow between the headline and the copy on
   mobile. Desktop renders identically — absolutely positioned against the
   section, with the original scrim on its ::before. */
.sns-hero { position: relative; overflow: hidden; }
.sns-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 60%; z-index: 0; }
.sns-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.7) 100%);
}
.sns-hero .wrap > :not(.sns-hero-bg) { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .sns-hero.hero-m { padding-top: 0; padding-bottom: 40px; }
  .sns-hero.hero-m .wrap { display: flex; flex-direction: column; }
  .sns-hero.hero-m .sns-hero-bg {
    order: -1;
    position: static !important;
    inset: auto !important;
    width: 100vw;
    margin: 0 0 -16vw calc(50% - 50vw);
    height: 120vw !important;
    background-image: var(--hero-m) !important;
    background-position: center top !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.12) 92%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.62) 74%, rgba(0,0,0,.12) 92%, rgba(0,0,0,0) 100%);
  }
  .sns-hero.hero-m .sns-hero-bg::before {
    background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 16%, rgba(0,0,0,0) 32%) !important;
  }
  .sns-hero.hero-m .wrap > :not(.sns-hero-bg) { z-index: 2; }
}