/*
 * Unified responsive typography.
 *
 * The captured Bricks CSS sets fixed pixel sizes per page (body 18px,
 * h1 48px, h2 42px, h3 36px) plus a single mobile @media block at <=767px.
 * That gives an awkward jump between mobile and desktop and inconsistent
 * sizing across pages. Replace with a continuous fluid scale via clamp().
 *
 * Scope via `body.brx-body` (specificity 0,0,1,1) to win over the per-page
 * `h1 {}` element rules (0,0,1) without !important. The .brx-body class
 * exists on every page in this rebuild.
 *
 * Pa-menu offcanvas elements have their own explicit font-size declarations
 * that load after this file, so the menu is not affected.
 */

/* ---------- body ---------- */
/* 18px on mobile, scales fluidly to 20px on desktop.
   1.55 line-height for senior readability. */
body.brx-body {
  font-size: clamp(18px, 0.25vw + 16.8px, 20px);
  line-height: 1.55;
}

/* ---------- headings ---------- */
/* 1.15-1.30 line-heights — Bricks defaulted to 1.2. */

body.brx-body h1 {
  font-size: clamp(30px, 3.0vw + 12px, 52px);
  line-height: 1.15;
}

body.brx-body h2 {
  font-size: clamp(26px, 2.4vw + 10px, 44px);
  line-height: 1.18;
}

body.brx-body h3 {
  font-size: clamp(22px, 1.6vw + 10px, 34px);
  line-height: 1.22;
}

body.brx-body h4 {
  font-size: clamp(19px, 0.9vw + 10px, 26px);
  line-height: 1.30;
}

body.brx-body h5 {
  font-size: clamp(17px, 0.6vw + 10px, 22px);
  line-height: 1.35;
}

body.brx-body h6 {
  font-size: clamp(15px, 0.35vw + 10px, 18px);
  line-height: 1.40;
}

/* ---------- paragraph spacing ---------- */
/* Tighten Bricks default paragraph margins for cleaner mobile flow. */
body.brx-body .brxe-text p,
body.brx-body .brxe-text-basic p {
  margin: 0 0 0.85em;
}
body.brx-body .brxe-text p:last-child,
body.brx-body .brxe-text-basic p:last-child {
  margin-bottom: 0;
}

/* ---------- in-home page: Additional Features 2-col ---------- */
/* Original Bricks layout was a 3-col grid using justify-content:space-between.
   The Automatic Fall Detection card was removed; without an override the two
   survivors stick to the container edges. Re-center as a tight 2-col row. */
body.brx-body #brxe-rtipah {
  justify-content: center;
  /* Column-gap only — row-gap stays 0 because the heading and divider
     siblings already carry their own vertical margins. */
  column-gap: clamp(48px, 6vw, 120px);
  row-gap: 0;
}
body.brx-body #brxe-kpntto,
body.brx-body #brxe-donyuh {
  width: 40%;
}
@media (max-width: 991px) {
  body.brx-body #brxe-kpntto,
  body.brx-body #brxe-donyuh {
    width: 80%;
  }
}
/* Tighten the transition into Additional Features. The section above
   (#brxe-oyoblr, holding the alternating feature splits) ends with 100px
   padding-bottom and Additional Features opens with 100px padding-top —
   200px of stacked section padding produces a ~320px visual gap above the
   heading. Trim both. */
body.brx-body #brxe-oyoblr { padding-bottom: 0; }
body.brx-body #brxe-ssdmzj { padding-top: 40px; }

/* In-home page hero slider (#brxe-dmvnpc):
   - Round slide images to match other content images on the page (20px).
   - Put the prev/next arrows on white circles with a subtle shadow so they
     read against any slide background; brand-red on hover. */
body.brx-body #brxe-dmvnpc .splide__slide img {
  border-radius: 20px;
}
body.brx-body #brxe-dmvnpc .splide__arrow {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  opacity: 1;
  color: var(--bricks-color-wxyqpy); /* slate; Splide arrow svg uses currentColor */
  transition: background-color 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
body.brx-body #brxe-dmvnpc .splide__arrow svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
body.brx-body #brxe-dmvnpc .splide__arrow:hover {
  background-color: var(--bricks-color-rbwell); /* brand red */
  color: #fff;
  box-shadow: 0 4px 16px rgba(171, 0, 51, 0.32);
  transform: translateY(-50%) scale(1.06); /* preserve Splide's vertical centering */
}

/* Smartwatch page hero slider (#brxe-rtpdxm) — same conventions as in-home. */
body.brx-body #brxe-rtpdxm .splide__slide img {
  border-radius: 20px;
}
body.brx-body #brxe-rtpdxm .splide__arrow {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  opacity: 1;
  color: var(--bricks-color-wxyqpy);
  transition: background-color 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
body.brx-body #brxe-rtpdxm .splide__arrow svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
body.brx-body #brxe-rtpdxm .splide__arrow:hover {
  background-color: var(--bricks-color-rbwell);
  color: #fff;
  box-shadow: 0 4px 16px rgba(171, 0, 51, 0.32);
  transform: translateY(-50%) scale(1.06);
}

/* ---------- testimonial cards (home page) ---------- */
/* The 4-card review grid below "Join Thousands of Canadians" runs in narrow
   columns; the global body bump to 18-20px makes the quotes wrap awkwardly
   (Donna's card especially). Override scoped to that grid only. */
body.brx-body #brxe-vqrexr .brxe-text-basic {
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- callback drawer CTA (#brxe-bddscs) ---------- */
/* The right-side "Speak With One of Our Experts" offcanvas drawer is rendered
   into every page via the captured Bricks markup with identical IDs. The
   captured pageStyles give it 100px padding on the inner block, 50px on the
   CTA wrapper, and a 22px paragraph that wraps to 3 lines — way too much
   vertical and the paragraph exceeds 2 lines. Tighten globally here so the
   form sits closer to the top and the supporting copy fits on 2 lines. */
body.brx-body #brxe-dzuhxt {
  padding-top: 40px;
  padding-bottom: 40px;
}
body.brx-body #brxe-hbtcre {
  padding-top: 20px;
  padding-bottom: 20px;
}
body.brx-body #brxe-nkvfct {
  margin-bottom: 14px;
}
body.brx-body #brxe-kexmsb {
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 16px;
}
@media (max-width: 991px) {
  body.brx-body #brxe-hbtcre {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ---------- bottom-of-page CTA section (smartwatch + in-home) ---------- */
/* Same "Speak With One of Our Experts" CTA also lives as a static section near
   the bottom of the smartwatch and in-home pages: 50% image-left, 50%
   form-right. The right column has 100px padding all sides on desktop and the
   paragraph is 22px → wraps to 3 lines. Mirror the drawer fix.
   IDs differ between the two pages, so each gets its own selector list. */
body.brx-body #brxe-lfjinu,   /* smartwatch right column */
body.brx-body #brxe-hqlknq {  /* in-home right column   */
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 991px) {
  body.brx-body #brxe-lfjinu,
  body.brx-body #brxe-hqlknq {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}
@media (max-width: 767px) {
  body.brx-body #brxe-lfjinu,
  body.brx-body #brxe-hqlknq {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
body.brx-body #brxe-ejxemi,  /* smartwatch h3 */
body.brx-body #brxe-nspuav { /* in-home h3   */
  margin-bottom: 14px;
}
body.brx-body #brxe-flfcbg,  /* smartwatch paragraph */
body.brx-body #brxe-cwztpk { /* in-home paragraph    */
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* ---------- container responsive padding ---------- */
/* Bricks sets .brxe-section { padding: 100px 40px } and a single @media
   <=767px halving it. Smooth this out. */
@media (max-width: 1023px) {
  body.brx-body .brxe-section {
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 600px) {
  body.brx-body .brxe-section {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ---------- Font/layout fingerprinting probe clamp ----------
   Microsoft Clarity (likely) injects orphan elements as direct children of
   <body> at runtime to measure rendered font widths and word-wrap behavior:
   - <span style="white-space:nowrap; font-family: ..."> with the test string
     `mmMwWLliI0fiflO&1` per font family
   - <div>word word word ... (×N)</div> for paragraph/wrapping metrics
   - stray <br> separators

   These probes are supposed to be hidden off-screen via the library's own
   inline style, but in our static rebuild they leak into normal flow. The
   long "word word..." div renders at ~4000px wide, which stretches <body>
   to 4000px, which cascades to <main> (100% of body) and every section.
   Most visibly this slides the homepage hero text card off-screen.

   Match orphans only (no class, no id). All legitimate page elements live
   inside .brxe-* containers with IDs, so this is safe. */
body > span,
body > br,
body > div:not([class]):not([id]) {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Final safety net: clip any horizontal overflow we missed.
   Vertical scroll is unaffected. */
html, body {
  overflow-x: clip;
}

/* ---------- Background video cover-fit ----------
   Bricks' frontend.css applies `object-fit: cover` only to <video> elements
   that have a `poster` attribute. Our captured hero video has no poster,
   so by default Chrome plays it at intrinsic 16:9 aspect inside the
   wrapper box (which is wider than 16:9 on most desktop viewports), giving
   pillarbox bars on the left and right.

   Force cover-fit on every bg video so it fills the section edge-to-edge.
   Some height crop on the top/bottom is acceptable for ambient bg footage. */
body.brx-body .bricks-background-video-wrapper video {
  object-fit: cover;
}