/* Investor Alarms — site styles */

/* Colors from the original investoralarms.com: #1c1c1c, #f9f9f9, #ff9900 (orange), #3c78d8 (blue), #6aa84f (green).
   Orange is too light for text on white, so text and icons use the darker --signal; fills use --signal-bright. */
:root {
  --ink: #1c1c1c;
  --ink-2: #262626;
  --ink-line: rgba(255, 255, 255, 0.13);
  --paper: #f9f9f9;
  --paper-2: #efefef;
  --surface: #ffffff;
  --line: #e3e3e3;
  --line-strong: #c8c8c8;
  --text: #1c1c1c;
  --muted: #555555;
  --on-ink: #f3f3f3;
  --on-ink-muted: #b8b8b8;
  --signal: #a65500;
  --signal-hover: #844300;
  --signal-bright: #ff9900;
  --signal-bright-hover: #e68a00;
  --signal-soft: #fff1dc;
  --signal-on-ink: #ff9900;
  --signal-price: #c25e00; /* big prices only: 4:1 on white, enough for large text */
  --focus: #3c78d8;
  --todo-bg: #ffe14d;
  --todo-ink: #161616;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(28, 28, 28, 0.06), 0 14px 34px -18px rgba(28, 28, 28, 0.25);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 76px;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
a { color: inherit; }
p a, li a, dd a, td a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
p a:hover, li a:hover, dd a:hover { color: var(--signal-hover); }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.cta-band :focus-visible, .site-footer :focus-visible, .mobile-bar :focus-visible, .strip :focus-visible { outline-color: #8db8ff; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 880px; }
.spaced { margin-top: 24px; }

/* ---------- TODO placeholders (must be impossible to miss) ---------- */
.todo {
  display: inline;
  background: var(--todo-bg);
  color: var(--todo-ink);
  border: 2px dashed var(--todo-ink);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.8;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.todo-box {
  background: var(--todo-bg);
  color: var(--todo-ink);
  border: 3px dashed var(--todo-ink);
  border-radius: 12px;
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.55;
}
.todo-box__text { font-weight: 800; }
.todo-box p + p { margin-top: 8px; }
.todo-note { font-size: 0.95rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.7rem 1.2rem;
  border: 2px solid transparent; border-radius: 12px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.15;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn .icon { width: 20px; height: 20px; }
.btn .todo { font-size: 0.72rem; }
.btn--primary { background: var(--signal-bright); color: var(--ink); }
.btn--primary:hover { background: var(--signal-bright-hover); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--todo { background: var(--todo-bg); color: var(--todo-ink); border: 2px dashed var(--todo-ink); }
.btn--todo:hover { background: #ffd51a; }

/* One main button, then the other options as a line of text links. */
.cta-row { display: grid; gap: 12px; justify-items: start; }
.cta-row .btn { min-height: 54px; padding-inline: 1.5rem; font-size: 1.05rem; }
.cta-alt { font-size: 0.95rem; color: var(--muted); }
.cta-alt a { font-weight: 700; white-space: nowrap; }
.cta-row--dark .cta-alt { color: var(--on-ink-muted); }
.cta-row--dark .cta-alt a { color: var(--signal-on-ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 249, 249, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { width: auto; height: 50px; }
@media (max-width: 480px) { .brand__logo { height: 40px; } }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2px; list-style: none; padding: 0; }
.site-nav a {
  display: block; padding: 0.5rem 0.7rem; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600; color: #3a3a3a; text-decoration: none; white-space: nowrap;
}
.site-nav a:hover { background: var(--paper-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal-bright); border-radius: 8px 8px 0 0; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.header-phone .todo { font-size: 0.72rem; }
.header-actions .btn { min-height: 42px; padding: 0.5rem 1rem; }
.menu-toggle {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  min-height: 44px; padding: 0.4rem 0.8rem;
  background: transparent; border: 2px solid var(--ink); border-radius: 10px;
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
}
.menu-toggle .icon { width: 20px; height: 20px; }
.menu-toggle .icon--close { display: none; }
.nav-open .menu-toggle .icon--open { display: none; }
.nav-open .menu-toggle .icon--close { display: block; }

@media (max-width: 1140px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .site-nav ul { flex-direction: column; padding: 8px var(--gutter) 16px; max-width: var(--wrap); margin-inline: auto; }
  .site-nav a { padding: 0.85rem 0.5rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--signal-bright); padding-left: 0.9rem; }
  .nav-open .site-nav { display: block; }
  html:not(.js) .site-nav { display: block; position: static; box-shadow: none; border: 0; }
}
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .header-actions { display: none; }
}

/* ---------- Sections ---------- */
.grid-bg {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(28, 28, 28, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 28, 28, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
}
.section { padding-block: clamp(40px, 6vw, 80px); }
.section--tight { padding-top: clamp(20px, 3vw, 32px); }
.section--white { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 10px; max-width: 720px; }
.lede { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--muted); max-width: 60ch; }
.more-link { margin-top: 20px; font-weight: 700; }

/* ---------- Heroes ---------- */
/* The home hero offers three direct paths to package pages. */
.hero--home h1 { max-width: 23ch; font-size: clamp(2.25rem, 1.55rem + 2vw, 3.25rem); }
.hero--home .lede { margin-top: 14px; }
.hero--photo { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px); background: #0d0d0d; color: #fff; border-bottom: 0; }
.hero--photo .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13, 13, 13, 0.94) 0%, rgba(13, 13, 13, 0.8) 42%, rgba(13, 13, 13, 0) 78%); }
.hero__copy { position: relative; z-index: 2; }
.hero--photo h1 { color: #fff; }
.hero--photo .lede { max-width: 46ch; color: rgba(255, 255, 255, 0.82); }

.choices__label { margin-top: clamp(22px, 3vw, 34px); font-weight: 700; font-size: 1.05rem; }
.choices { display: grid; gap: 10px; margin-top: 12px; max-width: 280px; }
/* Clear on the photo until hover or keyboard focus, then the orange button fill. */
.btn--hero {
  width: 100%;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--hero:hover,
.btn--hero:focus-visible {
  background: var(--signal-bright);
  border-color: var(--signal-bright);
  color: var(--ink);
}
/* With the situation cards in their own section (Nov 5, 2026), the header keeps some height so the video shows. */
.hero--home { display: flex; align-items: center; min-height: clamp(300px, 36vw, 480px); }
.hero--home .hero__copy { width: 100%; }

/* Package chooser pop-up (Nov 5, 2026): the header's Start Here opens it. One question at a time, ending on the
   package that fits with its price, Book and one matching review. Centered card on desktop, full screen on phones. */
.hero__start { display: grid; gap: 10px; justify-items: start; margin-top: 24px; }
.hero__start .btn { min-height: 58px; padding-inline: 1.8rem; font-size: 1.15rem; box-shadow: 0 12px 30px -12px rgba(255, 153, 0, 0.55); }
.hero__start .btn .icon { transition: transform 0.15s; }
.hero__start .btn:hover .icon { transform: translateX(3px); }

.chooser, .pop {
  width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 0; border-radius: 20px; background: var(--surface); color: var(--text);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); overscroll-behavior: contain;
}
.chooser::backdrop, .pop::backdrop { background: rgba(13, 13, 13, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.chooser[open], .pop[open] { animation: chooser-in 0.18s ease-out; }
@keyframes chooser-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
html:has(.chooser[open], .pop[open]) { overflow: hidden; }
.chooser__inner { position: relative; padding: clamp(24px, 4vw, 44px); }
.chooser__close, .pop__close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); cursor: pointer;
}
.chooser__close:hover, .pop__close:hover { background: var(--ink); color: #fff; }
.chooser__close .icon, .pop__close .icon { width: 22px; height: 22px; }
.chooser__step { display: grid; gap: 22px; max-width: 760px; padding-right: 40px; }
.chooser__head { display: grid; gap: 6px; align-content: start; }
.chooser h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.chooser h2:focus { outline: none; }
.chooser__progress { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.chooser__hint { color: var(--muted); font-size: 1rem; }
.chooser__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.chooser__options .btn { min-height: 64px; font-size: 1.12rem; }
.chooser__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 0.95rem; }
.chooser__links a { color: var(--signal); font-weight: 700; }
.chooser__back { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.chooser__back:hover { color: var(--signal); }
/* Desktop: why and the review on the left, the package card on the right. Phones: why, card (price, Book), review. */
.chooser__result {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); grid-template-areas: "head card" "proof card";
  grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 44px); row-gap: 14px; align-items: start; padding-right: 36px;
}
.chooser__result > .chooser__head { grid-area: head; }
.chooser__result > .chooser__card { grid-area: card; }
.chooser__result > .chooser__proof { grid-area: proof; }
.chooser__why { color: var(--muted); max-width: 52ch; }
.chooser__proof { max-width: 560px; }
.chooser__proof .review { background: var(--paper); padding: 18px; }
.chooser__proof .reviews__source { margin-top: 8px; }
.chooser__result .chooser__links { margin-top: 8px; }
.chooser__card { width: 100%; }
.chooser__card > .chooser__media { margin: -24px -24px 6px; aspect-ratio: 5 / 2; border-bottom: 1px solid var(--line); }
.chooser__card .plan__cta .btn { width: 100%; min-height: 56px; font-size: 1.08rem; }
@media (max-width: 860px) {
  .chooser__result { grid-template-columns: 1fr; grid-template-areas: "head" "card" "proof"; grid-template-rows: auto; padding-right: 0; }
  .chooser__result > .chooser__head { padding-right: 44px; }
}
@media (max-width: 640px) {
  .chooser, .pop { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .chooser__inner { padding: 64px 16px 24px; }
  .chooser__close, .pop__close { top: 10px; right: 10px; }
  .chooser__step { padding-right: 0; gap: 18px; }
  .chooser__options { grid-template-columns: 1fr; }
  .chooser__options .btn { min-height: 58px; }
  .chooser__result > .chooser__head { padding-right: 0; }
  .chooser__card > .chooser__media { margin: -16px -16px 4px; }
  .hero__start .btn { width: 100%; max-width: 340px; }
}

/* Header video (Nov 5, 2026): the panel flashing ALARM sits on the left of the frame, so the fade is lighter than the
   photo's and the text gets a soft shadow to stay readable over it. */
.hero--video::before { background: linear-gradient(90deg, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0.62) 36%, rgba(13, 13, 13, 0.2) 62%, rgba(13, 13, 13, 0) 80%); }
.hero--video .hero__copy h1, .hero--video .hero__copy .lede, .hero--video .choices__label { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6); }
.hero--video .btn--hero:not(:hover):not(:focus-visible) { background: rgba(13, 13, 13, 0.45); }
@media (max-width: 640px) {
  .hero--photo { padding-block: 28px 32px; }
  .hero--photo .hero__bg { object-position: 68% center; opacity: 0.34; }
  .hero--photo::before { background: linear-gradient(90deg, rgba(13, 13, 13, 0.97), rgba(13, 13, 13, 0.7)); }
  .hero--home h1 { font-size: clamp(1.85rem, 7.4vw, 2.35rem); }
  .hero--home .lede { margin-top: 8px; font-size: 0.95rem; line-height: 1.4; }
  .choices__label { margin-top: 16px; font-size: 0.98rem; }
  .choices { gap: 8px; }
  .btn--hero { min-height: 44px; padding-block: 0.45rem; }
}
/* Phones: the text covers the whole header, so the video gets an even fade, and the crop keeps the panel in view. */
@media (max-width: 640px) {
  /* Brighter on phones so the motion reads (it was 62% under a 58-72% shade). Luis's "not playing" on Nov 5, 2026 was Reduce Motion. */
  .hero--video .hero__bg { object-position: 55% center; opacity: 0.92; }
  .hero--video::before { background: linear-gradient(180deg, rgba(13, 13, 13, 0.62) 0%, rgba(13, 13, 13, 0.46) 55%, rgba(13, 13, 13, 0.3) 100%); }
}

.page-hero { padding-block: clamp(24px, 4.5vw, 56px) clamp(20px, 3.5vw, 40px); border-bottom: 1px solid var(--line); }
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-hero__inner--single { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { max-width: 22ch; }
.page-hero .lede { margin-top: 12px; }
.page-hero .cta-row { margin-top: 24px; }
@media (max-width: 860px) { .page-hero__inner { grid-template-columns: 1fr; } }

/* ---------- Strip ---------- */
.strip { background: var(--ink); color: var(--on-ink); }
.strip__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; list-style: none; padding-block: 16px; }
.strip__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
.strip .icon { width: 20px; height: 20px; color: var(--signal-on-ink); }
@media (max-width: 560px) {
  .strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .strip__list li { align-items: flex-start; font-size: 0.86rem; line-height: 1.35; }
}
/* Home strip has three points (Nov 5, 2026): spread evenly, and on phones three columns with the icon on top. */
.strip__list--three { justify-content: space-around; }
@media (max-width: 560px) {
  .strip__list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .strip__list--three li { flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.8rem; }
}

/* ---------- Plan cards ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; margin-top: 24px; }
.plans--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); max-width: 900px; }
.plans--one { max-width: 440px; }
.plans__note { margin-top: 18px; color: var(--muted); }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-h) + 16px);
}
.section--white .plan { background: var(--paper); }
.plan--featured { border: 2px solid var(--ink); }
.section--white .plan--featured { background: var(--surface); }
.plan:target { box-shadow: 0 0 0 3px var(--signal-bright), var(--shadow); }
.plan__info { display: flex; flex-direction: column; gap: 10px; }
.plan__info > .plan__media { margin: -24px -24px 6px; aspect-ratio: 5 / 2; border-bottom: 1px solid var(--line); }
/* The kicker names what sets a package apart (motion sensors, door/window sensors, smart lock), so it reads in ink, not muted. */
.plan__kicker { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.best-for { color: var(--signal); }
.plan__name { font-size: 1.45rem; }
/* The name opens the package's own page (costs and terms). */
.plan__name a { color: inherit; text-decoration: none; }
.plan__name a:hover { text-decoration: underline; }
.plan__name a .icon { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 6px; vertical-align: -0.04em; color: var(--signal); }
.checklist { display: grid; gap: 8px; list-style: none; padding: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--signal); }
.checklist--big { gap: 16px; font-size: 1.06rem; }
.checklist--big .icon { width: 24px; height: 24px; margin-top: 1px; }
.plan__includes { margin-top: 4px; font-size: 0.98rem; }
/* Price and compact cost preview, then the button. In a .plans grid each card spans three shared rows
   (included, price, button), so prices and buttons line up across the row however long each part is. */
.plan__price { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.cost-preview { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.cost-preview strong { color: var(--ink); font-weight: 800; }
.plans > .plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; }
.plans > .plan > .plan__price { margin-top: 0; }
.price__label { margin-bottom: -8px; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.price__amount { font-size: 3.4rem; font-weight: 800; font-stretch: 80%; letter-spacing: -0.03em; line-height: 1; color: var(--signal-price); }
.price__amount--text { font-size: 2.1rem; color: var(--ink); }
.price__per { margin-left: -6px; font-size: 1.4rem; font-weight: 800; font-stretch: 80%; color: var(--signal-price); }
.price__rest { color: var(--muted); font-weight: 600; line-height: 1.35; }
.plan__cta { display: grid; gap: 10px; align-content: start; }
.plan__cta .btn { width: 100%; min-height: 56px; font-size: 1.08rem; }

/* Phones: photo as a thumbnail beside the name, what's included as one run of text,
   so the price and Book button of the first choice sit on the first screen. */
@media (max-width: 640px) {
  .plans { gap: 14px; }
  .plan { padding: 16px; gap: 12px; }
  .plans > .plan { row-gap: 12px; }
  .plan__info--media { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
  .plan__info--media .plan__media { grid-row: 1 / span 2; margin: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; }
  .plan__info--media .plan__kicker { grid-column: 2; align-self: end; }
  .plan__info--media .plan__name { grid-column: 2; align-self: start; }
  .plan__media.media--contain img { padding: 4px; }
  .plan__name { font-size: 1.3rem; }
  .plan__includes { grid-column: 1 / -1; display: block; margin-top: 6px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
  .plan__includes li { display: inline; }
  .plan__includes .icon { display: none; }
  .plan__includes li + li::before { content: " · "; }
  .plan__price { padding-top: 10px; gap: 8px; }
  .price__amount { font-size: 2.7rem; }
  .price__per { font-size: 1.3rem; }
  .plan__cta .btn { min-height: 52px; }
}

/* Package pages: the price sits in the page header, above the Book button. */
.hero-fit {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--signal-soft); color: var(--signal);
  font-size: 0.9rem; font-weight: 700; line-height: 1.3;
}
.hero-fit .icon { width: 16px; height: 16px; }
.hero-fit--best { background: var(--ink); color: #fff; }
.hero-fit--best + .hero-fit { margin-left: 6px; }
@media (max-width: 640px) { .hero-fit--best + .hero-fit { margin-left: 0; } }
.hero-price { display: grid; gap: 10px; margin-top: 16px; }
.page-hero .hero-price + .cta-row { margin-top: 16px; }
h2 + .checklist { margin-top: 16px; }

/* One cost treatment on package pages and immediately above the booking calendar. */
.cost-summary { margin-top: 18px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.cost-summary__top { display: grid; grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.6fr); }
.cost-summary__total { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(22px, 3vw, 34px); background: var(--ink); color: #fff; }
.cost-summary__label { font-family: var(--mono); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; }
.cost-summary__total .cost-summary__label { color: var(--on-ink-muted); }
.cost-summary__amount { margin-top: 4px; font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.055em; line-height: 1; color: var(--signal-on-ink); }
.cost-summary__qualifier { margin-top: 9px; font-size: 0.87rem; color: var(--on-ink-muted); }
.cost-summary__renew { margin-top: 8px; font-size: 0.82rem; font-weight: 600; line-height: 1.35; color: var(--on-ink-muted); }
.cost-summary__items { padding: 22px clamp(22px, 3vw, 32px); }
.cost-summary__items h3 { font-size: 1.12rem; }
.cost-summary__items dl { display: grid; gap: 10px; margin: 13px 0 0; }
.cost-summary__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding-top: 9px; border-top: 1px solid var(--line); }
.cost-summary__row dt { font-weight: 700; line-height: 1.3; }
.cost-summary__row dt span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.83rem; font-weight: 400; line-height: 1.35; }
.cost-summary__row dd { margin: 0; font-weight: 800; line-height: 1.3; white-space: nowrap; }
/* Package headers: what the upfront amount covers, on one quiet line under it. */
.cost-preview__items { display: block; margin-top: 2px; font-size: 0.8rem; }
.price__term { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.price__term .icon { width: 18px; height: 18px; color: var(--signal); }

/* Wide product shots (alarm kit + lock, two cameras) and the tall tower photo keep their shape in the header. */
.hero-media.hero-media--wide { aspect-ratio: auto; max-width: 500px; }
.hero-media--wide img { height: auto; }
.hero-media.hero-media--wide.media--cover img { object-position: 70% center; }
.hero-media.hero-media--tall { aspect-ratio: 4 / 5; max-width: 380px; }
.media__caption { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.hero-media:has(.media__caption) { display: flex; flex-direction: column; }
.hero-media:has(.media__caption) > img, .hero-media:has(.media__caption) > .todo-box { flex: 1; min-height: 0; }
.media--todo { display: grid; align-content: center; padding: 14px; background: var(--paper-2); }
.media--todo .todo-box { margin: 0; }
@media (max-width: 860px) { .hero-media.hero-media--wide { max-width: 420px; } .hero-media.hero-media--tall { max-width: 260px; aspect-ratio: 1; } }
@media (max-width: 640px) { .hero-media.hero-media--wide { max-width: 100%; } }

/* Job-Site Cameras header stage (Luis, Nov 7, 2026): a Small sites / Large sites switch over either a stack of real
   install photos (rounded cards piled like a group of photos in iMessage, the next ones peeking out underneath) or the
   Virtual Guard solar trailer. Without JavaScript both show, one under the other, and the switch stays hidden. */
.stage { display: grid; justify-items: center; gap: 16px; width: 100%; }
.stage__switch { display: none; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.js .stage__switch { display: inline-flex; }
.stage__tab { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.stage__tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.stage__view { display: grid; justify-items: center; width: 100%; }
.js .stage:not(.is-large) [data-stage-view="large"], .js .stage.is-large [data-stage-view="small"] { display: none; }
.js .stage__view { animation: stage-in 0.35s ease both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.stage__tower { display: flex; flex-direction: column; width: min(calc(100% - 64px), 300px); aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.stage__tower img { flex: 1; min-height: 0; padding: 14px; object-fit: contain; }
.option[data-stage-for] { cursor: pointer; }

.stack-wrap { display: grid; justify-items: center; gap: 12px; width: 100%; }
.stack { position: relative; width: min(calc(100% - 64px), 300px); aspect-ratio: 3 / 4; margin-block: 6px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.stack__cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.stack__card { position: absolute; inset: 0; z-index: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper-2); box-shadow: var(--shadow); opacity: 0; transform-origin: 50% 90%; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; }
.stack__card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.stack__card[data-pos="0"] { z-index: 4; opacity: 1; transform: none; }
.stack__card[data-pos="1"] { z-index: 3; opacity: 1; transform: translate(14px, 4px) rotate(5deg); }
.stack__card[data-pos="2"] { z-index: 2; opacity: 1; transform: translate(-12px, 6px) rotate(-5deg); }
.stack__card[data-pos="3"] { z-index: 1; opacity: 1; transform: translate(4px, 8px) rotate(2deg); }
.stack__card.is-leaving { z-index: 5; opacity: 0; transform: translate(-80%, -3%) rotate(-14deg); }
.stack__card.is-snap { transition: none; }
.stack__hit { position: absolute; inset: 0; z-index: 6; border: 0; border-radius: 22px; background: transparent; cursor: pointer; }
.stack__hit:focus-visible { outline: 3px solid var(--signal); outline-offset: 6px; }
.stack__caption { display: grid; justify-items: center; gap: 2px; color: var(--muted); font-size: 0.85rem; text-align: center; }
.stack__caption strong { color: var(--ink); font-size: 0.92rem; }
.stack__hint { display: none; }
.js .stack__hint { display: inline; }
@media (prefers-reduced-motion: reduce) { .stack__card, .js .stage__view { transition: none; animation: none; } }

/* New Construction header: the two ways to buy, small site first. */
.options { display: grid; gap: 12px; margin-top: 18px; max-width: 620px; }
.option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.option--main { grid-template-columns: 108px minmax(0, 1fr) auto; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.option__media { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); }
.option__media.media--contain img { padding: 4px; }
.option__tag { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.option__name { margin-top: 2px; font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.option__name a { color: inherit; text-decoration: none; white-space: nowrap; }
.option__name a:hover { text-decoration: underline; }
.option__name .icon { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 5px; vertical-align: -0.04em; color: var(--signal); }
.option__text { margin-top: 4px; font-size: 0.93rem; color: var(--muted); line-height: 1.45; }
.option .price { margin-top: 6px; }
.option .price__amount { font-size: 2.4rem; }
.option .cost-preview { margin-top: 6px; padding-top: 6px; }
.option__cta .btn { min-height: 52px; white-space: nowrap; }
.options + .cta-alt { margin-top: 12px; }
@media (max-width: 640px) {
  .option, .option--main { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; }
  .option:not(.option--main) { grid-template-columns: minmax(0, 1fr); }
  .option__cta { grid-column: 1 / -1; }
  .option__cta .btn { width: 100%; }
  .option .price__amount { font-size: 2.1rem; }
}

/* Proof under the ask: a real install photo beside the reviews. */
.proof { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.proof__photo { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.proof__photo img { aspect-ratio: 4 / 3; }
.reviews--stack { grid-template-columns: 1fr; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } .proof__photo { max-width: 520px; } }

/* Add-on tiles: photo or icon, name, one-time price. */
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-top: 24px; padding: 0; list-style: none; }
.addon { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.section--white .addon { background: var(--paper); }
.addon__media { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.addon__icon { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--paper-2); color: var(--signal); }
.addon__icon .icon { width: 44px; height: 44px; }
.addon__body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.addon__name { font-size: 1.08rem; }
.addon__price { font-size: 1.3rem; font-weight: 800; color: var(--signal-price); }
.addon__price span { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.addon__price--text { font-size: 1rem; font-weight: 700; }
.addon__note { font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 640px) {
  .addon { flex-direction: row; align-items: center; }
  .addon__media, .addon__icon { flex: none; width: 92px; aspect-ratio: 1; border-bottom: 0; border-right: 1px solid var(--line); }
  .addon__media.media--contain img { padding: 6px; }
  .addon__icon .icon { width: 32px; height: 32px; }
  .addon__body { padding: 12px 14px; }
}

/* The lock in the Rental Ready Alarm + Lock. */
.lock-media { aspect-ratio: 1; max-width: 360px; justify-self: center; width: 100%; border: 1px solid var(--line); border-radius: 22px; }
@media (max-width: 860px) { .lock-media { max-width: 200px; justify-self: start; } }

/* Camera upgrades, from the store listing. */
.upgrades__title { margin-top: 28px; font-size: 1.15rem; }
.upgrades { display: grid; margin-top: 10px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.upgrades li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.upgrades small { display: block; font-size: 0.84rem; color: var(--muted); }
.upgrades strong { white-space: nowrap; }
.upgrades__note { margin-top: 10px; font-size: 0.92rem; color: var(--muted); }
/* Quote-only items: one Get a Quote and one Call button under the list. */
.quote-actions { display: grid; gap: 10px; margin-top: 18px; }
.quote-actions p { color: var(--muted); font-size: 0.95rem; }
.quote-actions p a { font-weight: 700; }
.quote-actions__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.quote-actions__btns .btn { min-height: 48px; }

/* Lead magnet: checklist cover + Download. */
/* The cover is the whole one-page checklist, big enough to read as a preview (Luis, Nov 5, 2026). */
.lead { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 1080px; }
.lead__cover { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transform: rotate(-1.5deg); background: #fff; }
.lead__cover img { display: block; width: 100%; height: auto; }
.lead__cover--hero { max-width: 400px; justify-self: center; width: 100%; }
.lead__tag { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.lead__body h2 { margin-top: 6px; }
.lead__body .lede { margin-top: 10px; }
.lead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.lead__actions > a:not(.btn) { font-weight: 700; }
.lead__actions--hero { margin-top: 22px; }
.lead-gate { width: 100%; max-width: 460px; }
.lead-form__label { display: block; margin-bottom: 8px; font-weight: 700; }
.lead-form__field { display: flex; align-items: stretch; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); overflow: hidden; }
.lead-form__field:focus-within { outline: 3px solid var(--signal-bright); outline-offset: 2px; }
.lead-form__field input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); }
.lead-form__field input:focus { outline: none; }
.lead-form__submit { flex: none; display: grid; place-items: center; width: 56px; border: 0; background: var(--signal-bright); color: var(--ink); cursor: pointer; }
.lead-form__submit:hover { background: var(--signal-bright-hover); }
.lead-form__submit:disabled { opacity: 0.6; cursor: progress; }
.lead-form__submit .icon { width: 22px; height: 22px; }
.lead-form__status { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.prose h2 { margin-top: 32px; font-size: 1.3rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 8px; }
.consent { margin-top: 8px; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.consent a { color: inherit; font-weight: 700; }
.lead-form__field[hidden] ~ .consent, .lead-form__status.is-done ~ .consent { display: none; }
.lead-form__status.is-error { color: #b3261e; font-weight: 700; }
.lead-form__status.is-done { color: var(--ink); font-weight: 700; font-size: 1rem; }
.lead-form .todo { display: inline-block; margin-top: 6px; }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .lead { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
@media (max-width: 640px) { .lead { grid-template-columns: 1fr; gap: 26px; } .lead > .lead__cover, .lead__cover--hero { width: min(100%, 320px); max-width: none; justify-self: center; } }

/* The checklist page. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.check-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.check-card h2 { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; }
.check-card__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--signal-bright); font-size: 1.05rem; }
.check-list { display: grid; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.check-list label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.check-list input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--signal); }
.check-list input:checked + span { color: var(--muted); text-decoration: line-through; }
.fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-top: 22px; padding: 0; list-style: none; }
.fits li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.fits .icon { flex: none; width: 24px; height: 24px; color: var(--signal); }
.fits strong { display: block; }
.fits span { color: var(--muted); }
.fits strong { color: var(--ink); }
.table-title { margin-top: 36px; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
/* Three steps: three columns, one column on phones. Two classes so it wins over .steps' four columns further down. */
.steps.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .steps.steps--three { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .cost-summary__top { grid-template-columns: 1fr; }
  .cost-summary__total { padding: 20px; }
  .cost-summary__amount { font-size: 3.2rem; }
  .cost-summary__items { padding: 20px; }
}

/* ---------- Short icon lists ---------- */
.facts { display: grid; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.facts li { display: flex; gap: 10px; align-items: flex-start; }
.facts .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--signal); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin-top: 24px; padding: 0; list-style: none; }
.step { display: grid; gap: 4px; align-content: start; padding-top: 14px; border-top: 3px solid var(--signal-bright); }
.step__num { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--signal); }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted); font-size: 0.96rem; line-height: 1.5; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--top { align-items: start; }
.split h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Questions (collapsed) ---------- */
.faqs { margin-top: 16px; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 2px solid var(--ink); border-radius: 50%; font-weight: 800; line-height: 1;
}
.faq[open] > summary::after { content: "\2212"; background: var(--ink); color: #fff; }
.faq__q { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-stretch: 90%; letter-spacing: -0.01em; line-height: 1.3; }
.faq__a { display: grid; gap: 8px; padding-bottom: 18px; color: var(--muted); max-width: 68ch; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-layout > .faqs { margin-top: 0; }
.faq-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.faq-aside__title { font-size: 1.35rem; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

/* ---------- Tables ---------- */
.table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; min-width: 480px; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table thead th { background: var(--paper); font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.table tbody th { font-weight: 700; }
.table td { color: var(--muted); }
.table .table__price { color: var(--ink); font-weight: 800; white-space: nowrap; }

/* ---------- Reviews ---------- */
.reviews__source { margin-top: 8px; font-size: 0.92rem; color: var(--muted); }
.reviews__source a { font-weight: 700; }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 20px; }
.review {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.section--white .review { background: var(--paper); }
.review::before { content: "\201C"; height: 0.45em; font-size: 3.6rem; font-weight: 800; line-height: 0.85; color: var(--signal-bright); }
.review blockquote { font-size: 1.04rem; line-height: 1.5; }
.review figcaption { margin-top: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }

/* Reviews pop-up (the star-rating links): every review in columns, Book pinned under them. Same shell as the chooser. */
.pop__inner { position: relative; padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) 0; }
.pop__head { display: grid; gap: 4px; padding-right: 52px; }
.pop h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.pop h2:focus { outline: none; }
.reviews--pop { display: block; columns: 3 260px; column-gap: 16px; }
.reviews--pop .review { break-inside: avoid; margin-bottom: 16px; background: var(--paper); padding: 20px; }
.pop__foot {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin: 4px calc(-1 * clamp(24px, 4vw, 44px)) 0; padding: 16px clamp(24px, 4vw, 44px);
  background: var(--surface); border-top: 1px solid var(--line);
}
.pop__foot .btn { min-width: 180px; }
.pop__out { font-weight: 700; color: var(--signal); }
@media (max-width: 640px) {
  .pop__inner { padding: 64px 16px 0; }
  .pop__head { padding-right: 0; }
  .pop__foot { margin-inline: -16px; padding: 12px 16px; }
  .pop__foot .btn { flex: 1 1 100%; }
}

/* ---------- About ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.compare__card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s;
}
.compare__card--link:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.compare__card p { color: var(--muted); }
.usecase__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--signal); }
.usecase__link .icon { width: 18px; height: 18px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.appearances { display: grid; gap: 14px; margin-top: 24px; padding: 0; list-style: none; }
.appearance { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.appearance h3 a { color: var(--ink); text-decoration-color: var(--signal); }
.appearance__date { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.appearance p:last-child { margin-top: 6px; color: var(--muted); }
.feature__icon {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border-radius: 12px; background: var(--signal-soft); color: var(--signal);
}
.feature__icon .icon { width: 24px; height: 24px; }

/* ---------- Video and photos ---------- */
.video-slot { display: grid; gap: 16px; justify-items: start; margin-top: 20px; }
.video-slot > .icon { width: 48px; height: 48px; color: var(--muted); }
.video, .video__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.2s; }
.video:hover img { opacity: 1; }
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  background: var(--signal-bright); color: var(--ink); font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.video__play .icon { width: 26px; height: 26px; }
.media { margin: 0; overflow: hidden; background: var(--surface); }
.media img { width: 100%; height: 100%; }
.media--contain { background: var(--paper-2); }
.media--contain img { object-fit: contain; padding: 14px; }
.media--cover img { object-fit: cover; }
.hero-media { aspect-ratio: 1; max-width: 360px; justify-self: center; width: 100%; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
@media (max-width: 860px) { .hero-media { max-width: 220px; justify-self: start; } }
@media (max-width: 640px) { .hero-media { max-width: 160px; } }

/* ---------- Booking ---------- */
/* Arriving from a Book button, the plan tiles fold into a selected plan and itemized cost summary. */
.book { padding-block: clamp(20px, 3.5vw, 40px) clamp(40px, 6vw, 72px); }
.book h1 { font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.6rem); }
.booking { display: grid; gap: 12px; margin-top: 16px; }
.picker__label { font-weight: 800; font-stretch: 90%; font-size: 1.15rem; }
.picker__intro { margin-top: 3px; color: var(--muted); font-size: 0.92rem; }
.picker__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.picker__other-label { margin-top: 18px; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.picker__other { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.pick {
  display: grid; gap: 6px; align-content: start; min-height: 104px;
  padding: 16px; text-align: left; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px;
  font: inherit; color: inherit;
}
.pick:hover { border-color: var(--signal); background: #fffaf2; }
.pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick__context { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); }
.pick__name { font-weight: 800; font-stretch: 90%; font-size: 1.12rem; line-height: 1.25; }
.pick__fit { font-size: 0.84rem; line-height: 1.3; color: var(--muted); }
.pick__meta { margin-top: auto; padding-top: 5px; font-size: 0.9rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.picker__other .pick { min-height: 72px; }
.pick--call, .pick--todo { border-style: dashed; background: transparent; }
.booking__chosen {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface);
}
.booking__chosen-label { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.booking__chosen h2 { margin-top: 3px; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.55rem); }
.booking__costs .cost-summary { margin-top: 0; }
.booking__change {
  min-height: 40px; padding: 0.3rem 0.9rem; cursor: pointer;
  background: transparent; border: 2px solid var(--ink); border-radius: 10px;
  font: inherit; font-weight: 700; color: var(--ink);
}
.booking__change:hover { background: var(--ink); color: #fff; }
.booking__note { font-size: 0.92rem; color: var(--muted); }
.calendar { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
/* HighLevel takes a few seconds to draw; main.js sets .is-loading until the calendar has loaded. */
.calendar.is-loading::before { content: "Loading calendar…"; position: absolute; top: 48px; left: 0; right: 0; text-align: center; font-weight: 600; color: var(--muted); }
.calendar iframe { position: relative; width: 100%; border: 0; min-height: 640px; }
.calendar-todo { display: grid; gap: 16px; justify-items: start; }
.calendar__fallback { font-size: 0.9rem; color: var(--muted); }
html:not(.js) .picker, html:not(.js) .booking__chosen { display: none; }
@media (max-width: 760px) { .picker__list { grid-template-columns: 1fr; } .picker__other { grid-template-columns: 1fr; } .pick { min-height: 0; } }

.book-more { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.book-more h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); scroll-margin-top: calc(var(--header-h) + 16px); }
.book-more > div > p { margin-top: 6px; color: var(--muted); }
.quote-slot { margin-top: 16px; min-width: 0; }
.partner-register .quote-slot { margin-top: 24px; }
.partner-register .cta-alt { margin-top: 16px; }
.quote-alternative { display: grid; gap: 14px; justify-items: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.quote-alternative p { color: var(--muted); }
.contact-list { display: grid; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.contact-list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--signal); }
.contact-list a { font-weight: 700; color: var(--ink); }
@media (max-width: 860px) { .book-more { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { padding-block: clamp(36px, 5vw, 64px); background: var(--ink); color: #fff; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.cta-band h2 { max-width: 18ch; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 56px 28px; background: var(--ink); color: var(--on-ink-muted); font-size: 0.95rem; border-top: 1px solid var(--ink-line); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.4fr; gap: 40px; }
.footer-brand p { margin-top: 14px; max-width: 36ch; }
.brand--footer .brand__logo { height: 56px; filter: invert(1); }
.site-footer h2 { margin-bottom: 14px; font-family: var(--mono); font-size: 0.76rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.site-footer ul { display: grid; gap: 9px; padding: 0; list-style: none; }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-phone { display: inline-flex; align-items: center; gap: 6px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Sticky mobile bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  /* The Book page has its own picker. The home page shows the bar again since its header has no buttons (Nov 5, 2026). */
  body[data-page="book"] .mobile-bar { display: none; }
  body[data-page="book"] { padding-bottom: 0; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(28, 28, 28, 0.97); border-top: 1px solid var(--ink-line);
  }
  .mobile-bar a {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
    min-height: 50px; padding: 6px 10px; border-radius: 12px;
    font-weight: 800; font-size: 1rem; text-decoration: none; text-align: center;
  }
  .mobile-bar .icon { width: 20px; height: 20px; }
  .mobile-bar .todo { font-size: 0.7rem; line-height: 1.5; }
  .mobile-bar__call { color: #fff; border: 2px solid rgba(255, 255, 255, 0.4); }
  .mobile-bar__book { background: var(--signal-bright); color: var(--ink); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Pages whose hero has its own button: the bar slides up once the hero has scrolled off, and tucks away again back at
     the top (Luis, Nov 11, 2026). Hidden bars are out of the tab order too. Without JavaScript it always shows. */
  .mobile-bar { transition: transform 0.25s ease, visibility 0s linear 0s; }
  .js .mobile-bar[data-after-hero]:not(.is-shown) {
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Support Center (support.investoralarms.com) ---------- */
/* Same order as SuperHome's support page: dark welcome header with video, knowledge base, AI chat, call, FAQs, ticket. */
.eyebrow { font-family: var(--mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.eyebrow--dark { color: var(--signal-on-ink); }
.support-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.support-badge .icon { width: 16px; height: 16px; color: var(--signal-on-ink); }
.support-header__actions { margin-left: auto; }

.support-hero {
  padding-block: clamp(36px, 6vw, 88px);
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
  color: #fff;
}
.support-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.support-hero h1 { margin-top: 12px; max-width: 14ch; color: #fff; }
.support-hero .lede { margin-top: 14px; color: rgba(255, 255, 255, 0.82); }
.support-hero__list { margin-top: 20px; gap: 10px; color: var(--on-ink); }
.support-hero__list .icon { color: var(--signal-on-ink); }
.support-hero__list a { color: #fff; text-decoration-color: var(--signal-on-ink); text-underline-offset: 0.2em; }
.support-hero .cta-row { margin-top: 28px; }
.support-video { display: grid; gap: 10px; }
.support-video__label {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px;
  border-radius: 12px 12px 0 0; margin-bottom: -10px; background: var(--signal-bright); color: var(--ink);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.support-video__label .icon { width: 18px; height: 18px; }
.support-video .video { border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); }
.support-video__todo { display: grid; place-items: center; padding: clamp(14px, 3vw, 28px); background: var(--ink-2); border: 1px solid var(--ink-line); }
.support-video__caption { text-align: center; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-muted); }
@media (max-width: 860px) { .support-hero__inner { grid-template-columns: 1fr; } }

.support-copy { display: grid; gap: 12px; justify-items: start; }
.support-copy .checklist { margin-top: 4px; }
.support-copy__note { color: var(--muted); }
.support-copy__cta { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }
.support-copy__cta .btn { min-height: 54px; padding-inline: 1.5rem; font-size: 1.05rem; }
.support-media { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.support-media img { aspect-ratio: 16 / 10; }
.support-split--flip > .support-art { order: -1; }
@media (max-width: 860px) { .support-split--flip > .support-art { order: 0; } }
.support-art {
  display: grid; place-items: center; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(28, 28, 28, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 28, 28, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.support-art__ring {
  display: grid; place-items: center; width: clamp(120px, 18vw, 180px); aspect-ratio: 1;
  border-radius: 50%; background: var(--signal-bright); color: var(--ink);
  box-shadow: 0 0 0 14px var(--signal-soft), var(--shadow);
}
.support-art__ring .icon { width: 46%; height: 46%; }
@media (max-width: 860px) { .support-art { aspect-ratio: 5 / 2; } .support-art__ring { width: 96px; box-shadow: 0 0 0 10px var(--signal-soft); } }

.support-call { padding-block: clamp(48px, 7vw, 96px); background: var(--ink); color: #fff; text-align: center; }
.support-call__inner { display: grid; justify-items: center; gap: 14px; }
.support-call__ring {
  display: grid; place-items: center; width: clamp(120px, 16vw, 168px); aspect-ratio: 1; margin-block: 8px 4px;
  border: 6px solid #fff; border-radius: 50%; color: #fff;
}
.support-call__ring .icon { width: 58%; height: 58%; stroke-width: 1.5; }
.support-call .lede { color: rgba(255, 255, 255, 0.82); }
.support-call__hours { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--on-ink); }
.support-call__hours .icon { width: 20px; height: 20px; color: var(--signal-on-ink); }
.support-call__btn { min-height: 56px; margin-top: 8px; padding-inline: 1.6rem; font-size: 1.1rem; }

.support-ticket {
  padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); text-align: center;
}
.support-ticket .lede { margin: 10px auto 0; }
.support-ticket__form { margin-top: 24px; text-align: left; }
.support-ticket__form .todo-box p:not(.todo-box__text) { font-weight: 400; }
.ticket-frame { min-height: 600px; }
.support-ticket__alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; }
.support-ticket__alt a { color: var(--signal); }

.footer-grid--support { grid-template-columns: 1.6fr 1fr 1.2fr; }
@media (max-width: 960px) { .footer-grid--support { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid--support { grid-template-columns: 1fr; } }