@charset "utf-8";
/* ===========================================================
   page-home.css
   -----------------------------------------------------------
   Page wrapper: .page-home
   Loaded by the CMS via getVersionedFile('css/page-home.css').

   This replaces the legacy inline-CSS home page. Shared module
   styling (site-menu, site-image-to-video, site-faqs,
   site-card-scroller, site-icons) is loaded site-wide by the
   CMS chrome -- do NOT re-declare any of it here.

   FRAME WIDTHS (no Figma for this page -- matched to the other
   redesigned pages)
     Desktop: 1280px (content 1200 + 40px gutter each side)
     Mobile:  400px  (content 380  + 10px gutter each side)

   PAGE FONT-SIZE BASE
     font-size: 22px on .page-home. This matches the legacy
     home.css html base and the dominant body copy on the page.
     (The other redesigned pages use 18px; conforming this page
     to 18px is a pending designer discussion. When that happens,
     only the base + clamp endpoints change; the em-anchored
     values below stay correct relative to the base.)

     Every non-clamp size below is in em, anchored to this 22px
     base, so 22px Figma-equivalent -> 1em, 11px -> 0.5em, etc.

   CLAMP CONVENTION
     Fluid values use a single clamp() with PX endpoints (never
     em/rem) and a unitless line-height. Endpoints are on the
     intended visual scale (e.g. section titles 50px desktop ->
     30px phone), NOT the legacy rem-against-16px values, which
     undershot the design intent.

     slope_vw     = (desktop_px - mobile_px) / (1280 - 400) * 100
     intercept_px = mobile_px - slope_vw/100 * 400

   INHERITED FROM CMS-LOADED CSS (do not re-declare unless overriding):
     - font-family: 'Roboto', sans-serif
     - color-scheme: light only

   ASCII rule: this file MUST stay ASCII-clean. The SmarterASP.NET
   upload filter can mangle non-ASCII bytes. Use HTML entities or
   ASCII equivalents (e.g. -- for em-dash).
=========================================================== */

/* Script accent font. The CMS preloads the file (preloadFont:
   "fonts/cream_cake.woff2"); this @font-face makes it usable. Page-unique
   declaration -- the only permitted unscoped rule in a page CSS file (see
   COMPONENTS.md lint note). Path is site-root-relative to match the CMS. */
@font-face {
  font-family: "Cream Cake";
  src: url("../fonts/cream_cake.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -- TOKENS ---------------------------------------------- */
.page-home {
  /* Root font-size: dominant body-copy size on this page. */
  font-size: 22px;

  /* Explicit assertion (matches the CMS body family) so standalone
     previews and any font-load hiccup still render correctly. */
  font-family: 'Roboto', sans-serif;

  /* Typography scale -- px-endpoint clamps on the intended scale. */
  --text-heading:    clamp(30px, 2.27vw + 20.91px, 50px); /* 50 / 30 -- section titles */
  --text-subheading: clamp(20px, 0.57vw + 17.73px, 25px); /* 25 / 20 -- section intro subhead */
  --text-body:       clamp(16px, 0.68vw + 13.27px, 22px); /* 22 / 16 -- body copy */
  --text-subtitle:   clamp(14px, 0.45vw + 12.18px, 18px); /* 18 / 14 -- uppercase eyebrow */
  --text-card-title: clamp(22px, 0.91vw + 18.36px, 30px); /* 30 / 22 -- product card names */
  --text-btn:        0.818em;  /* 18px -- button label */
  --text-small:      0.636em;  /* 14px fixed */

  /* Spacing */
  --space-section-y: clamp(40px, 4.55vw + 21.82px, 80px); /* 80 / 40 */
  --space-container: clamp(10px, 2.27vw + 0.91px, 30px);  /* 30 / 10 gutter */
  --space-gap-md:    clamp(10px, 1.14vw + 5.45px, 20px);  /* 20 / 10 */
  --space-gap-lg:    clamp(20px, 3.41vw + 6.36px, 50px);  /* 50 / 20 */

  /* Radius */
  --radius-btn:   0.5em;    /* 11px -- non-pill buttons */
  --radius-pill:  9999px;
  --radius-card:  0.909em;  /* 20px -- product card images */
  --radius-panel: clamp(24px, 2.95vw + 12.18px, 50px); /* 50 / 24 -- big cream panels */

  /* Brand colours -- product-named convention. This is a
     multi-product page; the blue (Water Ozonator) is the site
     primary and the default heading/CTA colour. */
  --color-silver-pulser:   #92ca6a;  /* green */
  --color-magnetic-pulser: #59afb2;  /* teal */
  --color-water-ozonator:  #4792bc;  /* blue -- site primary */
  --color-bio-tuner:       #a194c7;  /* purple */

  /* Product pastel backgrounds (lighter tints) */
  --color-silver-pulser-tint:   #d9e8d8;
  --color-magnetic-pulser-tint: #cae4e6;
  --color-water-ozonator-tint:  #bbddf0;
  --color-bio-tuner-tint:       #d5d1e6;
  --color-slate-tint:           #d1dde6; /* neutral slate-blue, used by one testimonial slide */

  /* Neutrals */
  --color-dark:       #555555; /* body text on this page */
  --color-white:      #ffffff;
  --color-cream-bg:   #f8f4f2;
  --color-light-blue: #eff9fd;

  /* Button hover: flat swap to grey (shared CTA hover behaviour). */
  --color-btn-hover:  #555555;

  /* Wrapper layout */
  color: var(--color-dark);
  width: 100%;
}

/* -- RESET (scoped to this page) ------------------------- */
.page-home *,
.page-home *::before,
.page-home *::after {
  box-sizing: border-box;
  margin: 0;
}
.page-home a      { text-decoration: none; color: inherit; }
.page-home ul     { list-style: none; padding: 0; }
.page-home img    { display: block; max-width: 100%; height: auto; }
.page-home button {
  cursor: pointer; border: none; background: none;
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit;
}
/* CMS site stylesheet sets a font-size on the bare <header>; re-anchor
   so any semantic section <header> here does not inflate its ems. */
.page-home header { font: inherit; }

/* -- LAYOUT UTILITIES ------------------------------------ */
.page-home .section {
  padding: var(--space-section-y) 0;
  width: 100%;
}
.page-home .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* Side gutter so content never touches the screen edge as the viewport
     narrows. Sits on .container (not .page-home) so full-bleed section
     background bands stay edge-to-edge. */
  padding: 0 10px;
}

/* Section background variants */
.page-home .section--white       { background: var(--color-white); }
.page-home .section--cream        { background: var(--color-cream-bg); }
.page-home .section--light        { background: var(--color-light-blue); }
.page-home .section--green-tint   { background: var(--color-silver-pulser-tint); }
.page-home .section--teal-tint    { background: var(--color-magnetic-pulser-tint); }
.page-home .section--blue-tint    { background: var(--color-water-ozonator-tint); }
.page-home .section--purple-tint  { background: var(--color-bio-tuner-tint); }
.page-home .section--blue  { background: var(--color-water-ozonator); color: var(--color-white); }

/* -- COLOUR UTILITIES ------------------------------------ */
.page-home .text-green  { color: var(--color-silver-pulser); }
.page-home .text-blue   { color: var(--color-water-ozonator); }
.page-home .text-teal   { color: var(--color-magnetic-pulser); }
.page-home .text-purple { color: var(--color-bio-tuner); }
.page-home .text-white  { color: var(--color-white); }
.page-home .text-dark   { color: var(--color-dark); }
.page-home .text-center { text-align: center; }

/* Brand subscript -- the "3" in "Water O3zonator". */
.page-home .brand-sub {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: -0.15em;
}

/* -- TYPOGRAPHY UTILITIES -------------------------------- */
.page-home .section-title {
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1.2;
}
.page-home .text-subheading {
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.5;
}
.page-home .text-subtitle {
  font-size: var(--text-subtitle);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-home .text-body {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
}
.page-home .text-card-title {
  font-size: var(--text-card-title);
  font-weight: 900;
  line-height: 1.3;
}

/* -- BUTTONS --------------------------------------------- */
.page-home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.556em + 0.056em) 1.111em calc(0.556em - 0.056em);
  border-radius: var(--radius-btn);
  font-size: var(--text-btn);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.page-home .btn--blue   { background: var(--color-water-ozonator);  color: var(--color-white); }
.page-home .btn--green  { background: var(--color-silver-pulser);   color: var(--color-white); }
.page-home .btn--teal   { background: var(--color-magnetic-pulser); color: var(--color-white); }
.page-home .btn--purple { background: var(--color-bio-tuner);       color: var(--color-white); }
.page-home .btn--dark   { background: var(--color-dark);            color: var(--color-white); }
.page-home .btn:hover   { background: var(--color-btn-hover); }
.page-home .btn--pill   { border-radius: var(--radius-pill); }

/* Phone: allow buttons to wrap to a second line rather than forcing a single
   nowrap line that overflows the container gutter on narrow viewports.
   Mirrors the reference kit's phone .btn rule (page-silver-pulser). */
@media (max-width: 767px) {
  .page-home .btn {
    white-space: normal;
    text-align: center;
  }
}

.page-home .btn-center {
  display: flex;
  justify-content: center;
  margin-top: var(--space-gap-lg);
}


/* ===========================================================
   SECTION STYLES
   Added top-down as each section is converted from inline CSS.
=========================================================== */

/* -- BANNER ---------------------------------------------- */
.page-home .home-banner {
  text-align: center;
}
.page-home .home-banner__img {
  width: 100%;
  min-width: 600px;      /* legacy behaviour: banner never shrinks below 600px */
  object-fit: cover;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  /* Below 1024px: crop the decorative blue sides of the flat banner image
     and show only its centred content (title, tagline, product units). The
     image keeps its natural width at a fixed height and is centred inside
     an overflow-clipped flex container, so both sides trim evenly. Adjust
     the width % to control how much of the sides is hidden (wider = tighter
     crop). */
  .page-home .home-banner {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .page-home .home-banner__img {
    width: 160%;
    min-width: 0;
    max-width: none;
    height: auto;
    flex: 0 0 auto;
    margin: 0;
  }
}

/* -- SP8 SLIDER ------------------------------------------ */
.page-home .sp8-slider__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-md);
  align-items: flex-start;
}

/* Image gallery: left 35% column */
.page-home .sp8-slider__gallery {
  flex: 0 0 35%;
  max-width: 35%;
  position: relative;
}
.page-home .sp8-slider__track {
  display: flex;
  align-items: center;
}
.page-home .sp8-slider__slide {
  min-width: 100%;
  padding: 0 15px;
  /* Stable height across slides so the vertically-centred arrows never jump
     between the tall (front) and short (back) product images. */
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* One slide visible at a time: hide inactive, show active. */
.page-home .sp8-slider__slide { display: none; }
.page-home .sp8-slider__slide.is-active { display: flex; }
.page-home .sp8-slider__slide img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  margin: 0 auto;
}
.page-home .sp8-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Coloured circle button with a CSS-drawn white chevron (see .product__arrow).
     Defaults to Silver Pulser green when no --accent is inherited. */
  background: var(--accent, #92ca6a);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}
.page-home .sp8-slider__arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;
  transform: translateX(2px) rotate(45deg);
}
.page-home .sp8-slider__arrow--next::before {
  transform: translateX(-2px) rotate(225deg);
}
.page-home .sp8-slider__arrow:hover { transform: translateY(-50%) scale(1.1); }
.page-home .sp8-slider__arrow--prev { left: 10px; }
.page-home .sp8-slider__arrow--next { right: 10px; }
.page-home .sp8-slider__arrow.is-disabled { opacity: 0.35; pointer-events: none; }

/* Promo content: right column */
.page-home .sp8-slider__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  text-align: left;
  min-width: 0;
}
.page-home .sp8-slider__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-home .sp8-slider__badge { width: 100%; max-width: 463px; }
/* "Now Available" rendered as text in the Cream Cake script (green), replacing
   text_now_available.png. */
.page-home .sp8-slider__badge--script {
  width: auto;
  max-width: none;
  margin: 0;
  font-family: "Cream Cake", cursive;
  font-weight: 400;
  line-height: 1;
  color: var(--color-silver-pulser);
  font-size: clamp(40px, 9.09vw + 3.64px, 120px);
}
.page-home .sp8-slider__title {
  font-size: clamp(28px, 5vw, 50px);
  font-weight: 900;
  line-height: 1.2;
}
.page-home .sp8-slider__rule { width: 100%; max-width: 470px; height: 5px; object-fit: cover; }
.page-home .sp8-slider__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-lg);
}
.page-home .sp8-slider__lead {
  font-size: var(--text-body);
  font-weight: 900;
  line-height: 1.4;
}
.page-home .sp8-slider__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-md);
}
.page-home .sp8-slider__feature {
  display: flex;
  align-items: center;
  gap: var(--space-gap-md);
  min-width: 250px;
  flex: 1;
  font-size: var(--text-body);
  font-weight: 900;
}
.page-home .sp8-slider__feature img { width: 3.636em; flex: 0 0 auto; } /* 80px */

@media (max-width: 1024px) {
  /* Stacked: carousel sits on top as a tidy capped block; the section below
     it centres against the full available width. Content is NOT width-capped
     so the title and feature rows stay on one line until the viewport itself
     forces a wrap. */
  .page-home .sp8-slider__inner {
    flex-direction: column;
    align-items: center;
  }
  .page-home .sp8-slider__content {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    align-items: center;
  }
  .page-home .sp8-slider__head { align-items: center; }
  .page-home .sp8-slider__pitch { align-items: center; }
  /* Features stay a centred horizontal row, wrapping only when forced. */
  .page-home .sp8-slider__features { justify-content: center; }
  .page-home .sp8-slider__feature { flex: 0 0 auto; }
  /* Carousel: separate tidy centred block above the content. */
  .page-home .sp8-slider__gallery {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
  }
}

/* Phone: the two SP8 feature rows (rechargeable battery, USB-C) read better
   as a compact left-aligned block with smaller icons, rather than centred
   with large 80px icons. */
@media (max-width: 767px) {
  .page-home .sp8-slider__features { justify-content: flex-start; align-self: stretch; }
  .page-home .sp8-slider__feature { justify-content: flex-start; text-align: left; }
  .page-home .sp8-slider__feature img { width: 2.182em; } /* 48px (was 80px) */
}

/* -- WELCOME --------------------------------------------- */
.page-home .home-welcome { padding-top: 0; }
.page-home .home-welcome__inner {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
}
.page-home .home-welcome .section-title { text-align: center; }
.page-home .home-welcome__body {
  font-size: var(--text-body);
  line-height: 1.6;
}
@media (max-width: 767px) {
  /* Trim the large stacked gap between the welcome copy and the Russ &
     Lesley photo below it (welcome bottom padding + rl top padding). */
  .page-home .home-welcome { padding-bottom: var(--space-gap-md); }
}

/* -- DECORATIVE WAVE SEPARATORS (full-bleed <img>) ------- */
.page-home .home-wave { width: 100%; display: block; }

/* Grey rule between Testimonials and FAQs. Full-bleed (spans the viewport
   edges) and slightly thicker so it reads as a clear section separator. The
   calc(50% - 50vw) breakout is scrollbar-safe (no horizontal scrollbar),
   matching the wave dividers' technique. */
.page-home .home-divider {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border: 0;
  border-top: 2px solid #d3d3d3;
}

/* -- RUSS & LESLEY --------------------------------------- */
.page-home .rl {
  padding-bottom: 0;   /* photo sits flush to the bottom edge */
  background: url('../images/page/home_russ_lesley_background_landscape.jpg') #d3d3d3 50% / cover no-repeat;
  text-align: left;
}
.page-home .rl__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-gap-lg);
}
.page-home .rl__media { flex: 0 0 463px; max-width: 100%; }
.page-home .rl__media img { width: 100%; max-width: 463px; max-height: 467px; object-fit: cover; }
.page-home .rl__text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  padding-bottom: var(--space-gap-lg);
}
.page-home .rl__lead { line-height: 1.6; }
.page-home .rl__names {
  font-size: var(--text-subheading);
  display: inline;
}
.page-home .rl__body { line-height: 1.6; font-size: var(--text-body); }

@media (max-width: 1024px) {
  .page-home .rl__media { flex-basis: 100%; }
  .page-home .rl__media img { margin: 0 auto; }
}

/* -- MISSION --------------------------------------------- */
.page-home .mission { text-align: left; }
.page-home .mission__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-gap-lg);
}
.page-home .mission__icon { width: 4.864em; margin: 0 auto; } /* 107px */
.page-home .mission__text {
  flex: 1 1 480px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-home .mission__heading {
  font-size: var(--text-card-title);
  font-weight: 900;
  line-height: 1.5;
}
.page-home .mission__heading-accent {
  font-size: 1.167em;  /* ~35px against the 30px heading */
  font-weight: 900;
  line-height: 1.3;
}
.page-home .mission__tagline { line-height: 1.3; font-size: var(--text-body); }
.page-home .mission__body { line-height: 1.3; font-size: var(--text-body); }

@media (max-width: 767px) {
  /* Stack the rocket above the text at the phone breakpoint. Above 767px
     the row is held together (no early natural wrap around ~660px). */
  .page-home .mission__inner { flex-direction: column; }
  .page-home .mission__text { flex-basis: auto; }
}

/* -- WELLNESS JOURNEY ------------------------------------ */
.page-home .wellness {
  background: url('../images/family/sp_bt_older_ladies_picnicking_bg_home.png') top / cover no-repeat;
  text-align: center;
  padding: 0;
}
.page-home .wellness__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-home .wellness__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-home .wellness__text .section-title,
.page-home .wellness__subhead {
  text-align: center;
}
.page-home .wellness__subhead {
  font-size: var(--text-card-title);
  line-height: 1.2;
}
.page-home .wellness__body {
  font-size: var(--text-body);
  line-height: 1.6;
}
.page-home .wellness__photo { width: 100%; }

/* -- HELP ------------------------------------------------ */
.page-home .help__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  text-align: center;
}
.page-home .help__heading {
  font-size: var(--text-card-title);
  line-height: 1.5;
  font-weight: 900;
  text-align: center;
}
.page-home .help__body {
  font-size: var(--text-body);
  line-height: 1.6;
}
.page-home .help__accent {
  font-size: var(--text-subheading);
}

/* -- PRODUCT OVERVIEW ------------------------------------ */
.page-home .overview__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-lg);
  /* Flat gutter (not vw-scaled). Once .container caps at 1200px and
     centres, a vw gutter keeps growing with the viewport and eats into
     the fixed container width -- dropping the 4-across row to 2 on wide
     screens. A fixed 20px gutter keeps the grid a constant ~1160px wide
     above the cap, leaving 4-across a safe margin, and still holds the
     cream panel off the screen edge below the cap. */
  padding: 0 20px;
}
.page-home .overview__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  text-align: center;
}
.page-home .overview__subhead {
  font-size: var(--text-body);
  line-height: 1.6;
}
.page-home .overview__grid {
  background: var(--color-cream-bg);
  border-radius: var(--radius-panel);
  /* Flex-wrap so pairs stay intact and wrap 4->2->1 as a tight, centred
     block of fixed-width cards. The cream padding frame stays uniform at
     every width because the cards never resize -- extra room becomes cream
     margin rather than squeezing the panel. width:100% keeps the panel
     spanning the full padded container. */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-gap-lg) var(--space-gap-md);
  padding: clamp(16px, 1.22vw + 8.73px, 26px);
}
.page-home .overview__pair {
  display: flex;
  gap: var(--space-gap-md);
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  /* Phone: each pair becomes a full-width column so all four cards stack
     one per row in reading order (pair 1 above pair 2). */
  .page-home .overview__pair {
    flex-direction: column;
    flex: 0 0 100%;
    width: 100%;
    align-items: center;
  }
}
.page-home .overview__card {
  flex: 0 0 256px;
  width: 256px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);
}
@media (max-width: 767px) {
  .page-home .overview__card { flex: 0 0 auto; width: 100%; max-width: 320px; }
}
.page-home .overview__img {
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--color-white);
  transition: background-color 0.3s ease;
}
.page-home .overview__label {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-home .overview__name {
  font-size: var(--text-card-title);
  line-height: 1.3;
  font-weight: 900;
  display: inline-block;      /* so transform:scale has a box */
  transition: transform 0.3s ease;
}
.page-home .overview__price {
  font-size: var(--text-body);
  line-height: 1.3;
  font-weight: 900;
  color: var(--color-dark);
  margin-top: 4px;            /* tighter gap between the name and the price */
  padding-bottom: 20px;       /* more breathing room below the price */
}

/* Per-product accent: name colour + hover image tint. */
.page-home .overview__card[data-product="silver-pulser"]   .overview__name { color: var(--color-silver-pulser); }
.page-home .overview__card[data-product="magnetic-pulser"] .overview__name { color: var(--color-magnetic-pulser); }
.page-home .overview__card[data-product="water-ozonator"]  .overview__name { color: var(--color-water-ozonator); }
.page-home .overview__card[data-product="bio-tuner"]       .overview__name { color: var(--color-bio-tuner); }

.page-home .overview__card:hover .overview__name { transform: scale(1.0667); }
.page-home .overview__card[data-product="silver-pulser"]:hover   .overview__img { background: var(--color-silver-pulser); }
.page-home .overview__card[data-product="magnetic-pulser"]:hover .overview__img { background: var(--color-magnetic-pulser); }
.page-home .overview__card[data-product="water-ozonator"]:hover  .overview__img { background: var(--color-water-ozonator); }
.page-home .overview__card[data-product="bio-tuner"]:hover        .overview__img { background: var(--color-bio-tuner); }

/* -- PRODUCT BLOCK (reusable; themed via data-product) --- */
/* Per-product accent + tinted section background. */
.page-home .product { --accent: var(--color-water-ozonator); }
.page-home .product--silver-pulser   { --accent: var(--color-silver-pulser);   background: var(--color-silver-pulser-tint); }
.page-home .product--magnetic-pulser { --accent: var(--color-magnetic-pulser); background: var(--color-magnetic-pulser-tint); }
.page-home .product--water-ozonator  { --accent: var(--color-water-ozonator);  background: var(--color-water-ozonator-tint); }
.page-home .product--bio-tuner       { --accent: var(--color-bio-tuner);       background: var(--color-bio-tuner-tint); }

.page-home .product {
  text-align: left;
  padding-left: var(--space-container);
  padding-right: var(--space-container);
}

/* Top row: number | intro | unit image, centred and capped wider (1400). */
.page-home .product__top {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  /* Original rows used gap:0 between the unit image and the text column (a
     non-zero column gap steals horizontal space and shrinks the unit column
     below the original ~438px, scaling the image down). Keep a row-gap only
     for when the columns wrap onto separate lines. */
  row-gap: var(--space-gap-lg);
  column-gap: 0;
}
.page-home .product__number {
  flex: 1 1 240px;
  min-width: 120px;
  max-width: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches the original inline styling: normal weight (narrow glyph),
     224px cap, and the 211px -> 400px fluid clamp on 24.39vw. No scaleY --
     the tall/narrow look comes from the normal weight, not a stretch. */
  font-size: clamp(211px, 24.39vw, 400px);
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.63);
}
.page-home .product__intro {
  flex: 1 1 40%;
  min-width: 240px;
  max-width: 670px;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  padding-bottom: clamp(15px, 1.83vw + 7.73px, 30px);
}
.page-home .product__name { color: var(--accent); }
.page-home .product__body {
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 500;
}
.page-home .product__learn-more { color: var(--accent); }
.page-home .product__price {
  font-size: 22px;
  line-height: 1.7;
  font-weight: 900;
}

/* Add to Cart -- styling only; form mechanics preserved verbatim.
   (Legacy .add-to-cart class kept so the CMS 'Added to Cart' popup and
   any global hooks that target it still match.) */
.page-home .product__cart { width: 100%; }
.page-home .product__cart-table { border-collapse: collapse; }
.page-home .product__qty {
  display: inline-block;
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  padding: 0.5em 1em;
  box-sizing: border-box;
}
.page-home .product__qty-input {
  width: 3em;
  text-align: center;
  font-size: 0.909em;   /* 20px */
  font-weight: 700;
  border: none;
  background: transparent;
  appearance: none;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  outline: none;
  color: var(--color-dark);
}
.page-home .product__qty-input::-webkit-inner-spin-button,
.page-home .product__qty-input::-webkit-outer-spin-button { display: none; }

.page-home .product__atc {
  display: inline-block;
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--accent, var(--color-water-ozonator));
  padding: 0.5em 1em;
  transition: background-color 0.3s ease;
}
.page-home .product__atc:hover { background: var(--color-btn-hover); }
.page-home .product__atc-label {
  font-weight: 900;
  color: var(--color-white);
  cursor: pointer;
  line-height: 1.1;
}
.page-home .product__atc--sm { font-size: 0.909em; }

.page-home .product__prev-model {
  font-size: 0.909em;   /* 20px */
  line-height: 1.6;
  font-weight: 500;
}
.page-home .product__prev-model-text {
  display: block;
}
/* Previous-model price on its own line at a fixed 18px. */
.page-home .product__prev-model-price {
  display: block;
  font-size: 18px;
  font-weight: 900;
}
/* Space above the "Learn more" button, separating it from the price line. */
.page-home .product__prev-model .product__atc--sm { margin-top: 12px; }

.page-home .product__unit {
  flex: 1 1 320px;
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.page-home .product__unit img { width: 100%; max-width: 436px; max-height: 407px; object-fit: cover; }

@media (max-width: 767px) {
  /* Phone: stack the product top, image first, and centre everything.
     The large decorative number is dropped. */
  .page-home .product__top {
    flex-direction: column;
    align-items: center;
  }
  .page-home .product__number { display: none; }
  .page-home .product__unit { order: -1; }
  /* Pull the top of the product section in tighter on phones (the empty band
     the designer flagged above the unit image was section top padding). The
     image keeps the original cover/407px fitting. */
  .page-home .product { padding-top: var(--space-gap-lg); }
  /* Much of the remaining gap above the image is whitespace baked into the
     image itself. Clip the top ~40px in place: the unit column hides overflow
     and the image is pulled up inside it, so the whitespace is cut off and the
     unit sits higher -- without the image overflowing onto the section above. */
  .page-home .product__unit { overflow: hidden; }
  .page-home .product__unit img { margin-top: -40px; }
  /* Fit the whole image within the screen width instead of cover-cropping to
     the 407px height cap. Wide units (Magnetic Pulser) were being scaled up to
     fill the height, pushing their left/right edges off-screen. contain + no
     height cap keeps the full unit visible within the column. The per-product
     503px caps (MP/WOZ) are more specific, so they're reset here too. */
  .page-home .product__unit img,
  .page-home .product--magnetic-pulser .product__unit img,
  .page-home .product--water-ozonator .product__unit img {
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
  }
  .page-home .product__intro {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
  /* Centre the price, prev-model note, and cart within the stacked column. */
  .page-home .product__prev-model { text-align: center; }
  .page-home .lite-card .product__cart-table td,
  .page-home .product__cart-table td { text-align: center; }
  /* Add vertical breathing room around the cart and prev-model blocks.
     The qty input and ADD TO CART stay on one line (their default
     inline-block flow), wrapping only when the width forces it. */
  .page-home .product__cart { margin-top: 10px; }
  .page-home .product__cart-table { margin-left: auto; margin-right: auto; }
  .page-home .product__prev-model { margin-top: var(--space-gap-md); }
  .page-home .product__prev-model-text { margin-bottom: 10px; }
  .page-home .product__prev-model .product__atc--sm { margin: 12px auto 0; }
}

/* Feature panels below the top row. */
.page-home .product__features {
  width: 100%;
  max-width: 1200px;
  margin: var(--space-gap-lg) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-section-y);
}
/* Magnetic Pulser only: drop the features top margin so the taller unit image
   reaches down flush to the feature panel, as in the original layout. Other
   units keep the default spacing above. */
.page-home .product--magnetic-pulser .product__features { margin-top: 0; }
/* The row is as tall as the big "2" / text column, so a top-aligned image
   leaves empty space beneath it. Bottom-aligning the unit column drops the
   image to the foot of the row so it meets the feature panel. */
.page-home .product--magnetic-pulser .product__unit { align-self: flex-end; }
/* Match the original's wider unit image (503px). At this width the 1500x1216
   source renders taller (~407px, hitting the height cap), making the top row
   taller so the big "2" and text gain bottom room. The image stays
   bottom-aligned so it still meets the feature panel. */
.page-home .product--magnetic-pulser .product__unit img { max-width: 503px; }
/* Water Ozonator used a wider 503px unit image in the original (the 436px
   base applies to Silver Pulser and Bio Tuner only). */
.page-home .product--water-ozonator .product__unit img { max-width: 503px; }
/* A little extra breathing room below the Add to Cart before the panel. */
.page-home .product--magnetic-pulser .product__intro { padding-bottom: clamp(30px, 3.66vw + 15.45px, 60px); }
.page-home .product__panel {
  background: var(--color-cream-bg);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 2.44vw + 10.09px, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-gap-lg);
}
.page-home .product__panel-media {
  /* Fixed 535px carousel: the media never shrinks with the viewport, so the
     vertically-centred slider arrows never shift up/down as the panel resizes.
     Only the text column absorbs the narrowing. max-width:100% lets it cap
     safely once the viewport is narrower than 535px + padding. */
  flex: 0 0 535px;
  max-width: 100%;
  min-width: 0;
}
.page-home .product__panel-text {
  flex: 1 1 280px;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-home .product__panel-heading {
  flex-shrink: 0;
  align-self: flex-start;
  width: auto;
  margin: 0;
}
/* Script wordmark rendered as text in the preloaded Cream Cake font, replacing
   the former text_*.png images. Colour follows the section accent so each
   product's wordmark matches its brand colour (green for Silver Pulser). */
.page-home .product__panel-script {
  font-family: "Cream Cake", cursive;
  font-weight: 400;
  line-height: 1;
  color: var(--accent, var(--color-silver-pulser));
  font-size: clamp(50px, 5.23vw + 13.09px, 80px);
}
.page-home .product__panel-body {
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 500;
}

/* Feature carousel (shared site-carousels.js). */
.page-home .product__panel-media { position: relative; }
/* All feature carousels use a grid stack: every slide occupies the same
   grid cell (grid-area 1/1), so the track is always as tall as the TALLEST
   slide regardless of which one is active. The active slide is visible; the
   others stay in flow (hidden) to hold that height. This keeps the panel
   height stable across slide changes, so the vertically-centred arrows never
   jump -- important once panels stack (<=1024px) and the carousel height is no
   longer governed by a taller text column beside it. */
.page-home .product__carousel-track {
  display: grid;
  /* Center each slide vertically within the tallest-slide height, so shorter
     slides get equal white space above and below rather than sitting at top. */
  align-items: center;
}
.page-home .product__slide {
  min-width: 100%;
  display: block;
  grid-area: 1 / 1;
  visibility: hidden;
}
.page-home .product__slide.is-active { visibility: visible; }
.page-home .product__slide img { width: 100%; border-radius: var(--radius-card); }
.page-home .product__video { position: relative; display: block; cursor: pointer; }
.page-home .product__video .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.545em;   /* 100px */
  height: 4.545em;
  color: #333; /* play circle grey (currentColor sprite); symbol carries 55% opacity */
  transition: transform 0.2s ease;
}
.page-home .product__video:hover .play-button { transform: translate(-50%, -50%) scale(1.08); }
.page-home .product__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The button itself is the coloured circle; its fill follows the section's
     --accent so it matches Add to Cart automatically. The white arrow is drawn
     purely in CSS by the ::before chevron below -- no image asset. */
  background: var(--accent, #92ca6a);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}
/* White chevron: a square with two borders, rotated 45deg. Points LEFT for
   prev; mirrored for next below. */
.page-home .product__arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;
  transform: translateX(2px) rotate(45deg);
}
.page-home .product__arrow--next::before {
  transform: translateX(-2px) rotate(225deg);
}
.page-home .product__arrow:hover { transform: translateY(-50%) scale(1.1); }
.page-home .product__arrow--prev { left: 8px; }
.page-home .product__arrow--next { right: 8px; }
.page-home .product__arrow.is-disabled { opacity: 0.35; pointer-events: none; }

/* Pagination dots for the product feature carousels (synced by
   site-carousels.js via [data-slide]). Sit centred below the carousel media;
   8px dots with the active one in the water-ozonator blue, matching the kit
   reference (page-silver-pulser gallery mobile dots). */
.page-home .product__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.556em;   /* 10px */
  margin-top: var(--space-gap-md);
}
.page-home .product__dots .product__dot {
  flex: none;
  width: 8px;
  height: 8px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s ease;
}
/* Active/hover dot follows the section's unit colour via --accent (green for
   Silver Pulser, teal for Magnetic Pulser, blue for Water Ozonator, purple for
   Bio Tuner), matching the arrows and Add-to-Cart in each section. */
.page-home .product__dots .product__dot.is-active,
.page-home .product__dots .product__dot:hover { background: var(--accent, var(--color-water-ozonator)); }

@media (max-width: 1024px) {
  /* Stack both feature panels. Non-reverse panels stack media-first (natural
     DOM order); reverse panels stack text-first (their DOM order), matching
     the intended reading order in each. */
  .page-home .product__panel { flex-direction: column; }
  /* When stacked, flex-direction:column would stretch the media to the full
     panel width. Pin it to 535px (capped to 100% on narrow phones) and centre
     it so the carousel stays the same size as on desktop and the vertically
     centred arrows never shift. */
  .page-home .product__panel-media {
    flex: 0 0 auto;
    width: 535px;
    max-width: 100%;
    align-self: center;
  }
  /* Stacked panels: the text column must size to its content, not grow to
     match the tall media carousel above it. Without this, flex-grow stretches
     the text box and leaves a large empty band below the copy (most visible on
     the single-panel Bio Tuner section). */
  .page-home .product__panel-text {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* -- PROGRAM GUIDE (swpg) -------------------------------- */
.page-home .swpg__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-lg);
}
.page-home .swpg__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);
  text-align: center;
}
.page-home .swpg__title {
  font-size: clamp(28px, 3.35vw + 14.59px, 53.5px);
  font-weight: 900;
  line-height: 1.1;
}
.page-home .swpg__intro {
  font-size: var(--text-body);
  line-height: 1.6;
}
.page-home .swpg__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-gap-lg);
  text-align: left;
}
.page-home .swpg__video {
  position: relative;
  display: block;
  /* Shrinkable so the video + list pair stays side-by-side across the
     desktop range instead of the fixed-width video forcing the list to wrap
     below it. */
  flex: 1 1 440px;
  min-width: 300px;
  max-width: 637px;
  cursor: pointer;
}
.page-home .swpg__video-thumb { width: 100%; max-width: 637px; }
.page-home .swpg__video .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.545em;   /* 100px */
  height: 4.545em;
  color: #333; /* play circle grey (currentColor sprite) */
  opacity: 0.75;   /* this video starts more faded; symbol already carries 55% fill */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.page-home .swpg__video:hover .play-button { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }

.page-home .swpg__list-col {
  flex: 1 1 360px;
  min-width: 280px;
  max-width: 497px;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-home .swpg__list-heading { line-height: 1.6; font-size: var(--text-body); }
.page-home .swpg__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-home .swpg__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(15px, 1.83vw + 7.73px, 30px);
  line-height: 1.6;
  font-weight: 500;
  /* Match the body-copy size used elsewhere on the page (without this the
     list inherits the larger 22px page base and reads oversized). */
  font-size: var(--text-body);
}
.page-home .swpg__check {
  /* Sized relative to the list item's font-size, so it tracks the text and
     stays proportionally smaller than before. */
  width: 30px;  /* fixed px, device-consistent (was 1.1em, resolving small) */
  height: 30px;
  flex-shrink: 0;
  margin-top: 0.15em;   /* nudge onto the first text line */
  color: var(--color-water-ozonator, #4792bc); /* brand blue check (currentColor sprite) */
}
.page-home .swpg__cta-col {
  /* Always its own full-width row below the video + list pair. */
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-lg);
  text-align: center;
  max-width: 100%;
  min-width: 0;
}
.page-home .swpg__closing {
  line-height: 1.6;
  font-weight: 900;
  font-size: var(--text-body);
  text-align: left;
  align-self: stretch;
}
.page-home .swpg__download { font-size: var(--text-subheading); }

/* Bordered quantity box variant (used in the kit pricing options). */
.page-home .product__qty--bordered { border: 1px solid #c6c6c6; }

/* -- KITS ------------------------------------------------ */
.page-home .kits { background: #edecec; }
.page-home .kits__header {
  text-align: center;
  margin-bottom: var(--space-gap-lg);
}
.page-home .kits__title {
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: var(--space-gap-md);
}
.page-home .kits__subhead {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.5;
}
.page-home .kits__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-lg);
  justify-content: center;
}
.page-home .kits .product-card {
  background: var(--color-white);
  border-radius: var(--radius-panel);
  padding: 0.909em 0.909em 1.818em;   /* 20 / 20 / 40 */
  box-shadow: 1px 0 11.4px 0 #c6c6c6;
  flex: 1 0 400px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
}
.page-home .kits .product-image {
  width: 100%;
  border-radius: var(--radius-panel);
  object-fit: cover;
  margin-bottom: var(--space-gap-md);
}
.page-home .kits .product-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  align-items: flex-start;
}
.page-home .kits .product-title {
  font-size: var(--text-card-title);
  font-weight: 900;
  color: var(--color-water-ozonator);
  line-height: 1.17;
}
.page-home .kits .product-title .highlight { color: var(--color-silver-pulser); }
.page-home .kits .features-list {
  display: flex;
  flex-direction: column;
  gap: 0.25em;              /* halved from 0.5em -- tighter between-line spacing */
}
.page-home .kits .feature-item {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.83vw + 7.73px, 30px);
  min-height: 1.4em;        /* reduced from 1.773em to tighten the rows */
}
/* Empty spacer row below the last item: it represents the missing 4th row so
   the 3-item Wellness Kit list matches the 4-item kit's height (cards align
   side-by-side on desktop). Matches a full feature-item height. */
.page-home .kits .feature-item-spacer {
  display: flex;
  align-items: center;
  gap: clamp(15px, 1.83vw + 7.73px, 30px);
  min-height: 1.4em;
}
.page-home .kits .kit-card__check {
  /* Anchor to the body-copy size so the tick stays proportional to the
     feature text rather than the larger 22px page base. */
  width: 25px;  /* fixed px, device-consistent (was 1.222em, resolving small) */
  height: 25px;
  flex-shrink: 0;
  color: var(--color-water-ozonator, #4792bc); /* brand blue check (currentColor sprite) */
  font-size: var(--text-body);
}
.page-home .kits .feature-text {
  font-size: var(--text-body);
  font-weight: 700;
}
.page-home .kits .feature-text .subscript {
  font-size: 0.7em;
  vertical-align: sub;
}
.page-home .kits .pricing-option {
  border: 1px solid #c6c6c6;
  border-radius: var(--radius-card);
  padding: 0.909em;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  width: 100%;
  align-items: flex-start;
}
.page-home .kits .pricing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  min-height: 1.455em;
  align-self: stretch;
}
.page-home .kits .pricing-label {
  font-size: var(--text-body);
  font-weight: 700;
  text-align: left;
}
.page-home .kits .pricing-amount {
  font-size: var(--text-subheading);
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .page-home .kits__grid { flex-direction: column; align-items: center; }
  .page-home .kits .product-card { max-width: 100%; }
  /* Cards are stacked here, so the alignment spacer below the last feature is
     no longer needed. Collapse it entirely so the space below Water Ozonator
     matches the space below Bio Tuner in the 4-item card. */
  .page-home .kits .feature-item-spacer { display: none; }
}

/* -- LITE PRODUCTS --------------------------------------- */
.page-home .lite__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Scoped gap (smaller than the section default --space-gap-lg, which tops
     out at 50px) so two fixed 300px cards plus the shrinking text column fit
     within 1024px and the three-column row survives down to the 1024px stack
     breakpoint before the @media rule wraps it. */
  gap: clamp(20px, 3.41vw + 0.64px, 40px);
}
.page-home .lite-card {
  /* Fixed at 300px regardless of viewport; never shrinks. At this width the
     two cards plus the shrinking text column fit within 1024px, so the
     three-column row holds down to the 1024px stack breakpoint. Caps to 100%
     only if the viewport itself is narrower than 300px. */
  flex: 0 0 300px;
  max-width: 100%;
  width: 300px;
  border-radius: clamp(30px, 3.66vw + 15.36px, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);
  padding: var(--space-gap-md) 0;
}
.page-home .lite-card--green  { background: #b8d99d; }   /* lighter Silver-Pulser tint */
.page-home .lite-card--purple { background: #bcb4d4; }   /* lighter Bio-Tuner tint */
/* Center the qty box and Add to Cart within the card. The cell holds two
   blocks (the qty pill in a form, and the ATC pill); lay them out as a
   centered flex column so both align on the card's centre axis regardless of
   the form's default block behaviour. */
.page-home .lite-card .product__cart-table td {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-home .lite-card .product__qty { display: inline-block; }
.page-home .lite-card .product__qty form { display: inline-block; margin: 0; }
.page-home .lite-card .lite__atc { margin-left: auto; margin-right: auto; }
.page-home .lite-card__img-link { width: 100%; display: block; }
.page-home .lite-card__img {
  width: 100%;
  max-width: 375px;
  max-height: 455px;
  object-fit: cover;
  border-radius: clamp(30px, 3.66vw + 15.36px, 60px);
}
.page-home .lite-card__price {
  align-self: stretch;
  text-align: center;
  line-height: 1.4;
  font-weight: 900;
  font-size: var(--text-subheading);
}

/* Lite Add-to-Cart: grey pill (distinct from the brand-coloured product CTAs).
   Legacy .lite_add-to-cart class kept for any CMS popup hooks. */
.page-home .lite__atc {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-white);
  padding: 0.5em 1em;
  margin-top: var(--space-gap-md);
  transition: background-color 0.2s ease;
}
.page-home .lite__atc:hover { background: #3b3b3b; }
.page-home .lite__atc-label {
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--color-white);
  font-size: var(--text-subheading);
  cursor: pointer;
}

.page-home .lite__text {
  /* Flexible middle column: shrinks as the viewport narrows while the two
     cards hold their fixed 375px width. */
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);
  text-align: center;
}
.page-home .lite__leaf { width: 5.455em; height: auto; object-fit: contain; } /* 120px */
.page-home .lite__intro-line {
  align-self: stretch;
  line-height: 1.2;
  font-weight: 900;
  font-size: var(--text-heading);
}
/* "Lite Line" rendered as text in the Cream Cake script (blue), replacing
   text_lite_line.png. Larger than the "Introducing Our" line above it. */
.page-home .lite__wordmark--script {
  margin: 0;
  font-family: "Cream Cake", cursive;
  font-weight: 400;
  line-height: 1;
  color: var(--color-water-ozonator);
  font-size: clamp(52px, 11.14vw + 7.45px, 150px);
}
.page-home .lite__body {
  align-self: stretch;
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 1em;
  text-align: center;
}
.page-home .lite__body-strong { font-weight: 900; }
/* Underline the two product links; text-decoration-color defaults to the
   link's own colour (.text-green / .text-purple), so each underline matches
   its text. */
.page-home .lite__body-strong a { font-weight: 900; text-decoration: underline; text-decoration-color: currentColor; }

/* Lite Line responsive layout.
   Desktop (>=1025px): card - text - card in one row (source order); the two
   375px cards stay fixed while the text column shrinks.
   <=1024px: text moves to the top (full width) and BOTH cards wrap below it,
   sitting side-by-side as a centred pair as long as two 375px cards fit.
   <=767px: the pair can no longer fit, so the cards stack (Silver Pulser
   above Bio Tuner) -- which happens naturally once two 375px cards plus the
   gap exceed the viewport. */
@media (max-width: 1024px) {
  .page-home .lite__text {
    order: -1;              /* text first (above the cards) */
    flex-basis: 100%;       /* full width so the cards wrap beneath it */
  }
}
@media (max-width: 767px) {
  /* Phone: force the two cards to stack (Silver Pulser above Bio Tuner)
     rather than sitting side-by-side. Two 310px cards would otherwise still
     fit side-by-side down to ~684px; the kit's 767 breakpoint takes over
     here so the stack happens at the standard phone threshold. */
  .page-home .lite__inner { flex-direction: column; }
}

/* Wavy line separators (full-bleed decorative img). Let the image keep its
   own aspect ratio so the full wave curve shows -- a fixed height with
   object-fit:cover was cropping the top of the curve. */
.page-home .home-wave--wavy { width: 100%; height: auto; display: block; }

/* -- LIFETIME PRODUCTS ----------------------------------- */
.page-home .lifetime { padding-top: 0; text-align: left; }
.page-home .lifetime__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-gap-lg);
  padding-top: var(--space-section-y);
}
.page-home .lifetime__text {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-home .lifetime__subhead {
  font-size: var(--text-card-title);
  line-height: 1.2;
}
.page-home .lifetime__body {
  font-size: var(--text-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-weight: 500;
}
.page-home .lifetime__body-emphasis { font-weight: 900; }
.page-home .lifetime__media {
  flex: 1 1 auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.page-home .lifetime__media img { width: 100%; max-width: 500px; max-height: 450px; object-fit: cover; }

/* -- UPGRADE PROGRAM ------------------------------------- */
.page-home .upgrade__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);
  text-align: center;
}
.page-home .upgrade__icon { width: 5.455em; height: auto; object-fit: contain; } /* 120px */
.page-home .upgrade__rule { width: 11.273em; height: auto; object-fit: contain; } /* 248px */
.page-home .upgrade__body {
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.page-home .upgrade__emphasis { font-size: var(--text-subheading); font-weight: 900; }
.page-home .upgrade__cta { font-size: var(--text-subheading); letter-spacing: 0.114em; }

/* -- PAY IT FORWARD -------------------------------------- */
.page-home .pif { text-align: left; }
.page-home .pif__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-gap-lg);
}
.page-home .pif__text {
  flex: 1 1 54%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);
  text-align: center;
}
.page-home .pif__icon { width: 5.455em; height: 5.455em; object-fit: contain; } /* 120px */
.page-home .pif__body {
  align-self: stretch;
  font-size: var(--text-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.page-home .pif__emphasis { font-size: var(--text-subheading); font-weight: 700; }
.page-home .pif__body-emphasis { font-size: var(--text-subheading); font-weight: 900; }
.page-home .pif__media {
  flex: 1 1 auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.page-home .pif__media img { width: 100%; max-width: 500px; max-height: 489px; object-fit: cover; border-radius: 4.091em; } /* 90px */

/* Hover-rotate animation (from legacy .image-animation-2). */
.page-home .image-animation-2 img { transition: transform 0.6s ease; }
.page-home .image-animation-2:hover img { transform: rotate(360deg); }

/* -- TESTIMONIALS ---------------------------------------- */
.page-home .testimonials { background: var(--color-white); text-align: center; }
.page-home .testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-home .testimonials__content { width: 100%; }
.page-home .testimonials__header {
  text-align: center;
  margin-bottom: var(--space-gap-lg);
}
.page-home .testimonials__eyebrow {
  font-size: var(--text-heading);
  line-height: 1.2;
  font-weight: 900;
  color: var(--color-water-ozonator);
  /* ~34px gap to the subtitle, matching the target screenshot (was ~15px). */
  margin-bottom: 15px;
}
.page-home .testimonials__subtitle {
  font-size: var(--text-body);
  line-height: 1.4;
  font-weight: 700;
}

/* Carousel viewport */
.page-home .testimonials__carousel {
  position: relative;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  /* Reserve room for the arrows inside the carousel's own box (they sit in
     this padding via left/right:0). This keeps them always within the
     viewport at every width -- no negative offsets that clip as the container
     narrows, and no breakpoint needed to reposition them. */
  padding: 0 56px;
  /* Reserve room for the absolutely-positioned dots (which sit at top:100% and
     no longer contribute to this wrapper's height): dot height (~12px) plus
     their --space-gap-md top gap, so the CTA below keeps its spacing. */
  margin-bottom: calc(0.545em + var(--space-gap-md));
}
.page-home .testimonials__carousel .carousel { overflow: hidden; }
.page-home .testimonials__carousel .carousel-track {
  /* Stack all slides in one grid cell so the carousel is always as tall as the
     TALLEST testimonial; the active slide shows, the rest stay in flow (hidden)
     to hold that height. Keeps the vertically-centred arrows from jumping as
     quote length changes between slides. */
  display: grid;
  align-items: center;
}
.page-home .testimonials__slide {
  min-width: 100%;
  grid-area: 1 / 1;
  background: var(--t-bg, var(--color-cream-bg));
  border-radius: var(--radius-card);
  padding: var(--space-gap-md);
  box-sizing: border-box;
  visibility: hidden;
}
.page-home .testimonials__slide.is-active { visibility: visible; }

/* Slide content: portrait + stars (left) / quote + author (right). */
.page-home .testimonials__slide-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-gap-md);
  text-align: left;
}
.page-home .slide-image-container {
  flex: 0 0 auto;
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.page-home .slide-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}
.page-home .slide-stars { width: 150px; height: auto; object-fit: contain; }
.page-home .slide-text-container { flex: 1; min-width: 0; }
.page-home .slide-text {
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 500;
}
.page-home .slide-author {
  font-size: var(--text-body);
  font-weight: 900;
  margin-top: 0.5em;
  text-align: right;
}

/* Arrows (shared carousel controls) -- grey circles just outside the card. */
.page-home .testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 1.273em;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Sit in the carousel's reserved side padding, just outside the card. */
.page-home .testimonials__arrow--prev { left: 0; }
.page-home .testimonials__arrow--next { right: 0; }
.page-home .testimonials__arrow:hover { background: var(--color-magnetic-pulser-tint); }
.page-home .testimonials__arrow.is-disabled { opacity: 0.5; pointer-events: none; }

/* Pagination dots. Positioned absolutely just below the panel so they are NOT
   part of .testimonials__carousel's height -- otherwise the arrows (top:50% of
   the wrapper) would center on the panel+dots combined and sit below the panel
   midpoint. The wrapper reserves their space via margin-bottom so the CTA below
   doesn't ride up under them. */
.page-home .testimonials__dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  justify-content: center;
  gap: 0.909em;
  margin-top: var(--space-gap-md);
}
.page-home .testimonials__dots .testimonials__dot {
  width: 0.545em;    /* 12px */
  height: 0.545em;
  background: #bbb;
  border-radius: 50%;
  transition: background 0.3s ease;
}
.page-home .testimonials__dots .testimonials__dot.is-active,
.page-home .testimonials__dots .testimonials__dot:hover { background: var(--color-water-ozonator); }

.page-home .testimonials__cta { margin-top: var(--space-gap-lg); }
.page-home .testimonials__cta-btn { font-size: var(--text-subheading); }

@media (max-width: 767px) {
  .page-home .slide-image-container { width: 100%; align-items: center; }
  .page-home .testimonials__slide-inner { justify-content: center; }
  .page-home .slide-text-container { flex-basis: 100%; }
}

/* -- FAQs ------------------------------------------------ */
.page-home .section-faqs { padding-bottom: 0; } /* wave is the last child */
.page-home .faqs { text-align: left; }
.page-home .faq__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-gap-lg);
}
.page-home .faq__header {
  flex: 1 1 35%;
  max-width: 429px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-gap-md);
  /* Stay visible while the accordion list is opened and scrolled: the intro
     panel is shorter than the list, so pinning it near the top keeps it on
     screen as you page through (matches the micropulsing FAQ). align-self
     releases it from the row's center-alignment so sticky can engage. */
  align-self: flex-start;
  position: sticky;
  top: 120px;
}
.page-home .faq__subhead {
  line-height: 1.4;
  font-weight: 500;
  font-size: var(--text-body);
}
.page-home .faq__cta { font-size: var(--text-subheading); }

.page-home .faq__list {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}

/* Accordion item (driven by site-reveal.js; answers fetched by site-faqs.js).
   Per-item pastel background comes from an inline --faq-bg variable hook. */
.page-home .faq__item {
  background: var(--faq-bg, var(--color-cream-bg));
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-home .faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap-md);
  padding: 0.909em 1.136em;   /* 20 / 25 */
  text-align: left;
  font-size: var(--text-subheading);
  font-weight: 700;
  color: var(--color-dark);
}
.page-home .faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}
.page-home .faq__icon::before,
.page-home .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-dark);
  transform: translate(-50%, -50%);
}
.page-home .faq__icon::before { width: 1em; height: 2px; }   /* horizontal bar */
.page-home .faq__icon::after  { width: 2px; height: 1em; }   /* vertical bar   */
/* Expanded: hide the vertical bar so "+" becomes "-". */
.page-home .faq__trigger[aria-expanded="true"] .faq__icon::after { opacity: 0; }

.page-home .faq__answer {
  padding: 0 1.136em;
  font-size: var(--text-body);
  color: var(--color-dark);
}
.page-home .faq__answer[hidden] { display: none; }
/* Give the fetched answer content some breathing room when open. */
.page-home .faq__answer:not([hidden]) { padding-bottom: 0.909em; }

@media (max-width: 767px) {
  /* Phone: stack the questions below the left intro panel. The two columns
     otherwise stay side-by-side (both are flex:1 1 % and just keep shrinking),
     so force the column direction here. Release the header's sticky/pinned
     positioning so it sits normally above the list rather than overlapping. */
  .page-home .faq__container { flex-direction: column; }
  .page-home .faq__header {
    position: static;
    top: auto;
    max-width: none;
    align-self: stretch;
  }
  .page-home .faq__list { align-self: stretch; }
}

/* -- PAGE-BOTTOM WAVE ------------------------------------
   The .page-wave wrapper (full-bleed, tuck-to-footer) is owned by the
   site-wide site-footer.css, including the seam-bridge fix. Only the
   top margin is set per page. */
.page-home .page-wave { margin-top: var(--space-section-y); }
.page-home .page-wave__img { display: block; width: 100%; height: auto; }

/* -- MOBILE: CENTRE PROSE SECTIONS ----------------------
   Designer request (mobile view): centre-align the running copy in the
   sections that stay left-aligned on desktop. The product intro/price/cart
   blocks are already centred in their own 767px rules; this covers the
   remaining prose (Russ & Lesley, Mission, feature-panel bodies, Program
   Guide closing, Lifetime, Pay-It-Forward). */
@media (max-width: 767px) {
  .page-home .rl,
  .page-home .rl__text,
  .page-home .mission,
  .page-home .mission__text,
  .page-home .lifetime,
  .page-home .lifetime__text,
  .page-home .pif,
  .page-home .pif__text,
  .page-home .product__panel-text,
  .page-home .product__panel-body,
  .page-home .swpg__closing {
    text-align: center;
  }
  /* Left-aligned flex children need their cross-axis alignment centred too,
     or the text-align change won't visually centre a narrower column. */
  .page-home .rl__text,
  .page-home .mission__text,
  .page-home .lifetime__text,
  .page-home .pif__text,
  .page-home .product__panel-text {
    align-items: center;
  }
  /* The panel wordmark heading pins to flex-start on desktop; centre it on
     phones so it lines up with the now-centred panel body. */
  .page-home .product__panel-heading { align-self: center; }
}