/* ===========================================================
   page-ozone.css
   -----------------------------------------------------------
   Page wrapper: .page-ozone
   Loaded by the CMS via getVersionedFile('css/page-ozone.css').

   FRAME WIDTHS (per Figma desktop frame 8932:1934)
     Desktop: 1200px content area (full-bleed backgrounds)
     Mobile:  400px  (matching page-micropulsing breakpoints)
     Section backgrounds are full-bleed at any viewport width.

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-ozone. Every non-clamp size
     below is em, calibrated to this base, so a 18px Figma value
     == 1em. Clamp endpoints are PX (see note).

   CLAMP FORMULA (px endpoints, single declaration, no fallback)
     slope_vw     = (desktop_px - mobile_px) / (1200 - 400) * 100
                  = (desktop_px - mobile_px) / 8
     intercept_px = mobile_px - slope_vw/100 * 400
     value        = clamp(mobile_px, slope_vw vw + intercept_px, desktop_px)
     Pair every clamp font-size with a unitless line-height.

   Why px endpoints (not em): an em inside clamp() resolves against
   the consuming element's own font-size, mis-reports in DevTools,
   and is vulnerable to inherited font-size leaks (the CMS bare
   <header> rule). px renders identically and reads honestly.

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

   FONTS
     Roboto is loaded by the CMS chrome. "Cream Cake" is a display
     script face used for the blue accent words in headings; it is
     NOT a CMS font, so it is self-hosted via @font-face below. Upload
     the web-font files to /fonts/ (see the @font-face block) or the
     accent words fall back to a generic cursive.

   ASCII rule: this file MUST stay ASCII-clean. Use HTML entities or
   ASCII equivalents. (Scan: see PRE_LAUNCH.md.)

   SECTION INDEX
     1. Hero
     2. Nature's Freshener
     3. What is Ozonated Water
     4. What to Expect
     5. Benefits (+ consistency)
     6. Sample Routine
     7. Misconceptions
     8. Other Practices
     9. How to Make
    10. Build Schedule (tabs)
    11. Need to Know / FAQs
    12. The Unit (WOZ)
    13. Companion / SWPG
=========================================================== */

/* -- Cream Cake display script (self-hosted) --------------- */
@font-face {
  font-family: 'Cream Cake';
  src: url('../fonts/cream_cake.woff2') format('woff2'),
       url('../fonts/cream_cake.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -- TOKENS ------------------------------------------------ */
.page-ozone {
  /* Root font-size: dominant Figma paragraph size for this page. */
  font-size: 18px;

  /* Explicit assertion of the CMS body family (no override). */
  font-family: 'Roboto', sans-serif;
  color: var(--color-dark);

  /* Typography scale -- seeded; refined per section as built.
     Endpoints are mobile/desktop px from Figma.
     Clamp slope = (desk - mob) / (1200 - 400) * 100 = diff / 8
     Clamp intercept = mob - slope/100 * 400 */
  --text-heading:     clamp(30px, 3vw + 18px, 54px);       /* Hero H1 Roboto lines 30 -> 54 */
  --text-script:      clamp(50px, 3.75vw + 35px, 80px);    /* Hero "bubbled gently" 50 -> 80 */
  --text-sec-title:   clamp(30px, 2.5vw + 20px, 50px);     /* Section headings 30 -> 50 */
  --text-subheading:  clamp(18px, 0.5vw + 16px, 22px);     /* Section intro / card title */
  --text-body:        clamp(16px, 0.25vw + 15px, 18px);     /* Body text */
  --text-lead:        1.111em;  /* 20px hero/section lead paragraph */
  --text-subtitle:    clamp(14px, 0.25vw + 13px, 16px);    /* Uppercase eyebrow */
  --text-btn:         1.222em;  /* 22px CTA label */
  --text-small:       0.778em;  /* 14px */

  /* Spacing -- seeded; refined per section. */
  --space-section-y:  clamp(50px, 3.75vw + 35px, 80px);    /* 80 / 50 */
  --space-container:  clamp(10px, 2.5vw, 30px);      /* 30 / 10 gutter */
  --space-gap-md:     clamp(10px, 1.25vw + 5px, 20px);     /* 20 / 10 */
  --space-gap-lg:     clamp(20px, 2.5vw + 10px, 40px);     /* 40 / 20 */

  /* Radius */
  --radius-pill:   9999px;
  --radius-card:   0.889em;  /* 16px -- hero chips */
  --radius-panel:  20px; /* px not em: feeds corner-arc matching math; em resolves per-element (bug found Aug 2026) */

  /* Brand colours -- product-named convention.
     Ozone is the Water Ozonator technology, so the blue
     --color-water-ozonator is THIS PAGE's accent. */
  --color-silver-pulser:      #92ca6a; /* green */
  --color-magnetic-pulser:    #59afb2; /* teal */
  --color-water-ozonator:     #4792bc; /* blue -- THIS PAGE's accent */
  --color-bio-tuner:          #a194c7; /* purple */
  --color-water-ozonator-dark:#34799f; /* darker blue -- chip subtext */

  /* Page-accent aliases consumed by shared CSS (site-faqs.css colors
     FAQ answer links with var(--color-accent) / var(--color-accent-dark),
     falling back to site blues only for pages without the alias). */
  --color-accent:      var(--color-water-ozonator);
  --color-accent-dark: var(--color-water-ozonator-dark);
  --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent);

  /* Neutrals */
  --color-dark:      #3b3b3b;
  --color-white:     #ffffff;

  /* Hero gradient stops (Figma: light blue-green tint) */
  --hero-grad-1: #f5faf8;
  --hero-grad-2: #eef6f4;
  --hero-grad-3: #e6f4f8;

  /* Hero chip icon tints (both blue for WOZ) */
  --chip-tint-blue:  rgba(71, 146, 188, 0.3);

  /* Soft card fills */
  --card-blue-20: rgba(71, 146, 188, 0.2);  /* Nature's Freshener cards (S2) */
  --tint-accent-soft: rgba(71, 146, 188, 0.1); /* soft accent tint: badges, pills, active tab/level, reality panels (was willow green on SP page) */
  --border-card:      #d4d4d4;               /* bordered white cards (S3) */
  --color-rule:       #d4d4d4;               /* inter-section hairline */
  --color-gray-nurse: #e2e8e3;               /* slider track (S4) */
  --bg-expect:        rgba(71, 146, 188, 0.1);   /* S4 background: #4792bc 10% (designer, Jul 31) */
  --bg-cream:         #f8f4f2;                   /* warm background: S9 how-to + adjoining wave */
  --color-deep-green: #2c3e2d;               /* emoji glyph colour in icon tiles */

  /* Shared soft drop shadow (Figma: 0 12 20 rgba(26,43,28,0.09)) */
  --shadow-card: 0 12px 20px rgba(26, 43, 28, 0.09);
}

/* -- SCOPED RESETS ----------------------------------------- */
.page-ozone a { color: inherit; text-decoration: none; }
.page-ozone ul { margin: 0; padding: 0; list-style: none; }
.page-ozone img { display: block; max-width: 100%; }

/* Inline icons come from the shared symbol sprite (icons-sprite.svg)
   injected once by the CMS chrome, referenced as
       <svg class="icon" aria-hidden="true"><use href="#ico-NAME"/></svg>
   .icon mechanics (1em, inline-block, vertical-align) live in
   css/site-icons.css site-wide; per-page colour and size are set on
   each icon's container via `color:` (currentColor) and `font-size:`. */

/* CMS site CSS sets font-size on the bare <header>; neutralise it
   wherever this page uses semantic <header> so em values stay anchored
   to the page base. */
.page-ozone header { font: inherit; }

/* Full button reset -- all five inherits required (see COMPONENTS.md). */
.page-ozone button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* -- LAYOUT UTILITIES -------------------------------------- */
.page-ozone .section {
  width: 100%;                       /* full-bleed background */
  padding-block: var(--space-section-y);
}
.page-ozone .container {
  /* Standardized Aug 2026 (designer): a true 1200px content column with
     the gutters OUTSIDE it at all widths (replaces the zero-gutter +
     <=1264px safety-inset pair). border-box is REQUIRED here: this page
     has no universal box-sizing reset, and on a content-box container
     the calc() max-width caps the CONTENT at 1260 with the padding
     pushed outside (shipped briefly; caught by Brad, Aug 2026). */
  box-sizing: border-box;
  max-width: calc(1200px + 2 * var(--space-container));
  margin-inline: auto;
  padding-inline: var(--space-container);
}

/* Thin inter-section divider (Figma line 7073:2349 / mobile "Line 8").
   Sits at container width between two stacked sections; the vertical
   breathing room comes from the adjacent sections' own padding. */
.page-ozone .rule {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--color-rule);
}

/* Reusable script-accent helper (Cream Cake, green). */
.page-ozone .text-script {
  font-family: 'Cream Cake', 'Brush Script MT', cursive;
  color: var(--color-water-ozonator);
  font-weight: 400;
}

/* ===========================================================
   SECTION 1: HERO   (Figma desktop 7073:2290 / mobile 7302:9832)
   Two-column: text left, device photo right (bleeds to edge) with
   two floating info chips over the photo. Full-bleed gradient bg.
   Stacks to a single column at <=767; chips hide on phone (the
   mobile design shows the photo without them).
=========================================================== */
.page-ozone .hero {
  /* Full-bleed gradient; section padding handled here (hero has its
     own rhythm, tighter top because it sits under the nav). */
  background-image: linear-gradient(
    167deg,
    var(--hero-grad-1) 0%,
    var(--hero-grad-2) 40%,
    var(--hero-grad-3) 100%
  );
  padding-block: 0;                  /* media bleeds full height */
  overflow: hidden;
}
.page-ozone .hero__inner {
  max-width: 1200px;                 /* match .container (designer eval) */
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: 0;                            /* Figma has no column gap; the photo's own left whitespace separates the two columns */
  min-height: clamp(420px, 38vw, 653px); /* PROPORTIONAL (38% of viewport), deliberately NOT the 1200-basis fluid formula -- do not rebase */
}
@media (max-width: 1264px) {
  .page-ozone .hero__inner { padding-inline: var(--space-container); }
}
.page-ozone .hero__text {
  flex: 1 1 48.89%;                  /* Figma 586.66 / 1200 */
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  padding-block: var(--space-gap-lg);
  max-width: 38em;                   /* ~ 587px / 18px text column cap */
}

/* Heading: Roboto lines + Cream Cake script accent line. */
.page-ozone .hero__title {
  margin: 0;
  font-weight: 400;
  color: var(--color-dark);
}
.page-ozone .hero__title-line {
  display: block;
  font-size: var(--text-heading);
  line-height: 1.08;
}
.page-ozone .hero__title-script {
  display: block;
  font-family: 'Cream Cake', 'Brush Script MT', cursive;
  color: var(--color-water-ozonator);
  font-size: var(--text-script);
  line-height: 0.7;                  /* Figma 8932:1964: 56px at 80px -- the script face
                                        carries huge built-in metrics; 0.95 left ~20px of
                                        extra title height (designer feedback #1, Jul 31) */
}

.page-ozone .hero__lead {
  margin: 0;
  font-size: var(--text-lead);      /* 20px */
  line-height: 1.53;
  color: var(--color-dark);
}
.page-ozone .hero__lead strong { font-weight: 700; }

/* CTA: label + circular arrow button (anchor for smooth-scroll). */
.page-ozone .hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.556em;                      /* 10px */
  margin-top: 0.444em;               /* 8px */
}
.page-ozone .hero__cta-label {
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .hero__cta-arrow {
  flex-shrink: 0;
  width: 2.333em;                    /* 42px */
  height: 2.333em;
  border-radius: 50%;
  background: var(--color-water-ozonator);
  color: var(--color-white);         /* sprite chevron strokes currentColor */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.page-ozone .hero__cta-arrow svg {
  width: 0.889em;                    /* 16px icon */
  height: 0.889em;
  display: block;
}
.page-ozone .hero__cta:hover .hero__cta-arrow {
  transform: translateY(3px);
  background: var(--color-water-ozonator-dark);
}

/* Media column: photo fills the height and bleeds toward the right edge
   (clipped at the window like the Figma frame); chips overlay. The window
   is aspect-locked so its height tracks the capped width -- the hero holds
   ~653 tall consistently from 1200 up, instead of growing with the viewport. */
.page-ozone .hero__media {
  flex: 1 1 51.11%;                  /* Figma 613.34 / 1200 */
  position: relative;
  align-self: flex-end;              /* keep the photo on the section floor even when the text column is taller */
  aspect-ratio: 613.34 / 655;        /* matches Figma's visible window; height tracks the capped width */
}
.page-ozone .hero__media-img {
  position: absolute;
  bottom: 0;                         /* sits on the floor; small gap at the top (Figma ~7.65%) */
  left: 0;                           /* anchored flush-left; the photo bleeds off to the right */
  height: 92.35%;                    /* fills the height */
  width: auto;
  max-width: none;
}

/* Floating info chips (desktop). */
.page-ozone .hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.556em;                      /* 10px */
  background: var(--color-white);
  border-radius: var(--radius-card); /* 16px */
  padding: 0.778em 1em;              /* 14px 18px */
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.page-ozone .hero__chip-icon {
  flex-shrink: 0;
  width: 1.889em;                    /* 34px */
  height: 1.889em;
  border-radius: 0.556em;            /* 10px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.889em;                /* 16px emoji */
  line-height: 1;
}
.page-ozone .hero__chip-icon--green { background: var(--chip-tint-blue); }
.page-ozone .hero__chip-icon--blue  { background: var(--chip-tint-blue); }
.page-ozone .hero__chip-text {
  display: flex;
  flex-direction: column;
  gap: 0.089em;                      /* ~1.6px (Figma item-spacing) */
}
.page-ozone .hero__chip-title {
  font-size: 0.667em;                /* 12px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-dark);
}
.page-ozone .hero__chip-sub {
  font-size: 0.611em;                /* 11px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-water-ozonator-dark);
}
/* Positions mirror Figma, as fractions of the visible image window
   (Figma block 613.34 wide x 655 tall): pulse x105.34/y169, contacts
   x415.34/y480. Fractions hold as the window scales, so no per-breakpoint
   chip overrides are needed down to the mobile stack. */
/* Chips anchored to the RIGHT edge of the window (Figma right offsets) so
   they track the right side and stay on-screen as the window narrows --
   no per-breakpoint repositioning needed down to the mobile stack.
   pulse: Figma right 331/613.34; contacts: 15/613.34, nudged out to open
   the gap with the cord. */
.page-ozone .hero__chip--fresh  { top: 23%;  right: 5%;  left: auto; }
.page-ozone .hero__chip--output { top: 73.5%; right: 55%; left: auto; }

/* ---- Hero: phone (stack; photo full width; chips hidden) ---- */
@media (max-width: 767px) {
  .page-ozone .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-gap-md);
    padding-top: 50px;               /* clears the sticky nav rhythm */
  }
  .page-ozone .hero__text {
    flex: 1 1 auto;
    max-width: none;
    padding-block: 0;
  }
  .page-ozone .hero__media {
    flex: 1 1 auto;
    align-self: stretch;             /* override desktop centring; full width when stacked */
    min-height: 0;
    aspect-ratio: 382 / 328;
  }
  .page-ozone .hero__media-img {
    inset: 0;
    left: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
  .page-ozone .hero__chip { display: none; }
}

/* ===========================================================
   REUSABLE: centered section heading + lead, and the vertical
   stack (heading block -> content, 30px). Used by S2, S3, ...
   The two-tone title colours its parts with .text-ink / .text-accent
   (role names per STANDARDS.md; renamed from the grandfathered
   .text-ink / .text-accent / .text-dark, Sep 3).
=========================================================== */
.page-ozone .sec-stack {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                      /* 30px: heading block -> content */
}
.page-ozone .sec-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.778em;                      /* ~14px (Figma 10 desktop / 20 mobile) */
}
.page-ozone .sec-title {
  margin: 0;
  font-weight: 900;                  /* Roboto Black */
  font-size: clamp(30px, 2.5vw + 20px, 50px); /* 30 -> 50 */
  line-height: 1.2;                  /* desktop: 60/50 (Figma 7073:2353) */
}
/* Mobile titles use a looser ratio (Figma mobile: 40/30 = 1.333, vs
   desktop 60/50 = 1.2). Single unitless value can't serve both ends,
   so the phone tier gets its own. Applies to every section title. */
@media (max-width: 767px) {
  .page-ozone .sec-title { line-height: 1.333; }
}
.page-ozone .sec-title .text-ink  { color: var(--color-water-ozonator); }
.page-ozone .sec-title .text-accent { color: var(--color-water-ozonator); }
.page-ozone .sec-title .text-dark  { color: var(--color-dark); }
.page-ozone .sec-lead {
  margin: 0;
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;                  /* section leads are bold in Figma (Roboto Bold) */
  line-height: 1.364;
  color: var(--color-dark);
}

/* ===========================================================
   SECTION 2: BODY ELECTRIC   (Figma 7073:2317 / 7302:9846)
   Uses .sec-stack/.sec-head + a 2x2 grid of soft-green cards
   (left-aligned text). Grid collapses to one column at <=767.
=========================================================== */
.page-ozone #body-electric {
  scroll-margin-top: 120px;           /* clears the fixed nav on anchor jump */
}
.page-ozone .freshener__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.111em;                      /* 20px, both axes */
}
.page-ozone .freshener__card {
  background: var(--card-blue-20);
  border-radius: 1.667em;            /* 30px */
  padding: clamp(20px, 2.5vw + 10px, 40px); /* 40 / 20 */
  display: flex;
  flex-direction: column;
  gap: 0.556em;                      /* 10px: title -> body */
}
.page-ozone .freshener__card-title {
  margin: 0;
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .freshener__card-body {
  margin: 0;
  font-size: 1em;                    /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

@media (max-width: 767px) {
  .page-ozone .freshener__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 3: WHAT IS MICROPULSING   (Figma 7073:2350 / 7302:9879)
   Uses .sec-stack/.sec-head + a 3-up row of white bordered cards,
   each with a gradient icon tile. Cards collapse to one column at
   <=767 (equal height via grid stretch).
=========================================================== */
.page-ozone .wim__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.111em;                      /* 20px */
}
.page-ozone .wim__card {
  background: var(--color-white);
  border: 1px solid var(--border-card);
  border-radius: 1.333em;            /* 24px */
  padding: clamp(21px, 1.975vw + 13.1px, 36.8px)   /* block 36.8 / 21 */
           clamp(21px, 0.975vw + 17.1px, 28.8px);  /* inline 28.8 / 21 */
  display: flex;
  flex-direction: column;
  gap: 0.5em;                        /* ~9px between children */
  transition: box-shadow 0.2s ease;
}
.page-ozone .wim__card:hover {
  box-shadow: var(--shadow-card);    /* Figma hover: 0 12px 20px rgba(26,43,28,0.09) */
}
.page-ozone .wim__icon {
  flex-shrink: 0;
  width: 2.889em;                    /* 52px (fixed both views) */
  height: 2.889em;
  border-radius: 0.778em;            /* 14px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-btn);        /* 22px emoji */
  line-height: 1;
  color: var(--color-deep-green);
}
.page-ozone .wim__icon--green {
  background-image: linear-gradient(135deg, #eaf4e7 0%, #d4edcc 100%);
}
.page-ozone .wim__icon--azure {
  background-image: linear-gradient(135deg, #e6f4f8 0%, #c4e4f2 100%);
}
.page-ozone .wim__icon--orange {
  background-image: linear-gradient(135deg, #f5faf0 0%, #ffe8c4 100%);
}
.page-ozone .wim__card-title {
  margin: 0;
  padding-top: 0.611em;              /* 11px lift above title (Figma) */
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .wim__card-body {
  margin: 0;
  font-size: 1em;                    /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

@media (max-width: 767px) {
  .page-ozone .wim__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 4: HOW DOES IT FEEL   (Figma 7073:2359 / 7302:9888)
   Interactive (driven by js/page-ozone.js):
     - draggable intensity slider (0-3) -> highlights the matching
       level card AND deepens the hand-circle green.
     - "Start Pulse" button (and the hand itself) toggle emanating
       pulse rings; label swaps to "Stop Pulse". Pulse tempo scales
       with intensity. Forced on for all visitors (no reduced-motion
       guard -- see note at the reduced-motion section below).
   Two columns on desktop; stacks to one at <=767.
=========================================================== */
.page-ozone .section-expect { background: var(--bg-expect); }

/* bold lead variant (this section's intro is bold, not regular) */
.page-ozone .sec-lead--bold { font-weight: 700; }

.page-ozone .expect__layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(30px, 4.25vw + 13px, 64px);     /* 64 / 30 */
  padding-top: clamp(0px, 2.25vw - 9px, 18px); /* ~Figma row offset, desktop only */
}

/* ---- Left: interactive panel ---- */
.page-ozone .expect__panel {
  flex: 1 1 0;
  min-width: 0;
  align-self: flex-start;                       /* allow sticky to release from top */
  position: sticky;
  top: 120px;                                   /* clear the fixed CMS nav */
  background: var(--color-white);
  border-radius: 1.778em;                       /* 32px */
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3.5vw + 6px, 48px);  /* 48 / 20 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-md);                     /* 20 / 10 */
}

/* ---- Animated glass (adapted from the designer's demo) ----
   States on .expect__svg, driven by page-ozone.js:
     (none)   = Pour: still water, no gear
     .gear    = Bubble: tube + airstone visible, foam bobs, flow dashes,
                HTML bubbles rise from the stone
     .lifting = transition: the gear assembly lifts out of the glass
     .ready   = Drink: sparkles twinkle around the finished glass       */
.page-ozone .expect__glass {
  position: relative;
  width: 190px;
  height: 230px;
  flex-shrink: 0;
}
.page-ozone .expect__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* HTML bubble overlay: spans spawned by JS, risen by CSS. */
.page-ozone .expect__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.page-ozone .expect__bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #7fc3d2;
  opacity: 0;
  animation: oz-bubble-rise linear infinite;
}
@keyframes oz-bubble-rise {
  0%   { transform: translate(0, 0) scale(0.7);              opacity: 0; }
  12%  {                                                     opacity: 0.95; }
  85%  {                                                     opacity: 0.85; }
  100% { transform: translate(var(--dx, 0px), -112px) scale(1.2); opacity: 0; }
}

/* Gear (tube + airstone): hidden until bubbling. */
.page-ozone .expect__gear-el { opacity: 0; transition: opacity 0.35s; }
.page-ozone .expect__svg.gear .expect__gear-el { opacity: 1; }

/* Surface foam shimmer while bubbling (opacity-only). */
.page-ozone .expect__foam { opacity: 0; transition: opacity 0.4s; }
.page-ozone .expect__svg.gear .expect__foam { opacity: 1; }
.page-ozone .expect__svg.gear .expect__foam ellipse {
  animation: oz-foam-bob 1.5s ease-in-out infinite alternate;
}
.page-ozone .expect__svg.gear .expect__foam ellipse:nth-child(2) { animation-delay: 0.3s; }
.page-ozone .expect__svg.gear .expect__foam ellipse:nth-child(3) { animation-delay: 0.6s; }
.page-ozone .expect__svg.gear .expect__foam ellipse:nth-child(4) { animation-delay: 0.9s; }
@keyframes oz-foam-bob { from { opacity: 0.45; } to { opacity: 1; } }

/* Air flowing through the tube. */
.page-ozone .expect__flow {
  stroke-dasharray: 3 9;
  animation: oz-flow-dash 1s linear infinite;
  opacity: 0;
  transition: opacity 0.3s;
}
.page-ozone .expect__svg.gear .expect__flow { opacity: 0.9; }
@keyframes oz-flow-dash { to { stroke-dashoffset: -24; } }

/* Stone + tube lift out of the glass when bubbling stops. */
.page-ozone .expect__svg.lifting .expect__gear-assembly {
  animation: oz-lift-out 1s ease-in forwards;
}
@keyframes oz-lift-out {
  0%   { transform: translateY(0);      opacity: 1; }
  60%  {                                opacity: 1; }
  100% { transform: translateY(-170px); opacity: 0; }
}

/* Sparkles twinkle around the finished glass. */
.page-ozone .expect__sparkle { opacity: 0; transition: opacity 0.5s; }
.page-ozone .expect__svg.ready .expect__sparkle {
  animation: oz-twinkle 1.3s ease-in-out infinite alternate;
}
.page-ozone .expect__svg.ready .expect__sparkle--2 { animation-delay: 0.45s; }
.page-ozone .expect__svg.ready .expect__sparkle--3 { animation-delay: 0.85s; }
@keyframes oz-twinkle { from { opacity: 0.15; } to { opacity: 1; } }

/* Slider */
.page-ozone .expect__slider-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.044em;                                 /* ~18.8px */
}
.page-ozone .expect__slider-label {
  font-size: var(--text-btn);                   /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
  text-align: center;
}
.page-ozone .expect__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;                                 /* room for the 22px thumb */
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.page-ozone .expect__slider:focus-visible {
  outline: 2px solid var(--color-water-ozonator-dark);
  outline-offset: 6px;
  border-radius: 3px;
}
.page-ozone .expect__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-gray-nurse);
}
.page-ozone .expect__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-gray-nurse);
}
.page-ozone .expect__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;                             /* centre on 6px track */
  border: none;
  border-radius: 50%;
  background: var(--color-water-ozonator);
  box-shadow: 0 2px 8px rgba(71, 146, 188, 0.3);
  cursor: pointer;
}
.page-ozone .expect__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--color-water-ozonator);
  box-shadow: 0 2px 8px rgba(71, 146, 188, 0.3);
  cursor: pointer;
}
.page-ozone .expect__slider-labels {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1em;                               /* 18px (Figma 8991:3249) */
  font-weight: 400;                             /* Regular, not bold (Figma) */
  line-height: 1.667;                           /* 30px */
  color: var(--color-dark);
}
.page-ozone .expect__slider-label.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.page-ozone .expect__cta {
  background: var(--color-water-ozonator);
  border: 0;
  border-radius: 100px;
  padding: 0.389em 1.111em 0.278em;             /* 7 / 20 / 5 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1em;                               /* 18px */
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;                        /* ~1.8px */
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.page-ozone .expect__cta:hover { background: var(--color-water-ozonator-dark); }
.page-ozone .expect__cta:focus-visible {
  outline: 2px solid var(--color-water-ozonator-dark);
  outline-offset: 3px;
}

.page-ozone .expect__hint {
  margin: 0;
  font-size: 0.833em;                           /* 15px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  text-align: center;
}

/* ---- Right: level description cards ---- */
.page-ozone .expect__levels {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.111em;                                 /* 20px */
}
.page-ozone .expect__level {
  background: var(--color-white);
  border: 1px solid var(--color-gray-nurse);
  border-radius: 0.889em;                       /* 16px */
  padding: 1.167em clamp(21px, 0.475vw + 19.1px, 24.8px); /* ~21 / 24.8 */
  display: flex;
  flex-direction: column;
  gap: 0.222em;                                 /* 4px */
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-ozone .expect__level.is-active {
  background: var(--tint-accent-soft);
  border-color: var(--color-water-ozonator-dark);
  box-shadow: 0 1px 1.5px rgba(26, 43, 28, 0.05);
}
.page-ozone .expect__level-eyebrow {
  margin: 0;
  font-size: 0.833em;                           /* 15px */
  font-weight: 700;
  line-height: 1.667;
  letter-spacing: 0.1em;                        /* ~1.5px */
  text-transform: uppercase;
  color: var(--color-water-ozonator-dark);
}
.page-ozone .expect__level-title {
  margin: 0;
  padding-top: 0.111em;                         /* 2px */
  font-size: var(--text-btn);                   /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .expect__level-body {
  margin: 0;
  font-size: 1em;                               /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

@media (max-width: 767px) {
  .page-ozone .expect__layout {
    flex-direction: column;
    align-items: stretch;              /* fill width (was flex-start -> panel/levels too narrow) */
  }
  /* The panel is a rounded card with side gaps that scrolls away
     normally with the page -- designer feedback (Jul 31): the step
     text must NOT scroll underneath it, so it is deliberately NOT
     position: sticky (unlike the micropulsing feel panel). */
  .page-ozone .expect__panel {
    position: static;                  /* reset the desktop sticky (top: 120px) */
    top: auto;
    align-self: stretch;
  }
}
/* NOTE: deliberately NO prefers-reduced-motion guard here (same policy
   as the micropulsing feel section). The bubbling/sparkle animation is
   intentionally forced on for all visitors -- it is a small, gentle,
   contained animation a user can simply scroll past, and many machines
   (notably Windows) report reduce-motion by default rather than by
   explicit user choice. Do not add an
   @media (prefers-reduced-motion: reduce) { ... animation: none } block
   for the .expect__* animations; that would hide the effect on those
   machines. */

/* ===========================================================
   SECTION 5: BENEFITS
   Structure + behaviour now live in the shared, page-agnostic
   component: css/site-card-scroller.css + js/site-card-scroller.js.
   Register BOTH via getVersionedFile and upload to /css/ and /js/.
   This page customises the component only by setting its CSS
   variable hooks below; the section heading uses the shared
   .sec-head. Heading + lead now match Figma 7073:2412; the "secret
   is consistency" stats band (7073:2422) is built as page CSS below.
   (Defaults in the component already match this page's palette,
   so the override is intentionally tiny.)
=========================================================== */
.page-ozone .card-scroller {
  --cs-accent:      var(--color-water-ozonator-dark); /* #34799f bar/dot/desc */
  --cs-active-tint: #eff6fa;                          /* leading-card pale-blue tint */
  --cs-card-width:  320px;
}
/* Click-to-select scrollers: leave a sliver of the previous card showing
   on the left after a snap, so there is always a partial panel to click
   to navigate LEFT (mirroring the partial panel on the right). Without
   this the clicked card sits flush to the leading edge and nothing is
   clickable to go back. */
.page-ozone [data-card-scroller-select] [data-card-scroller-track] {
  scroll-padding-inline-start: 64px;
}

/* ===========================================================
   SECTION 5 (cont.): "Secret is consistency" stats band
   (Figma 7073:2422). Page-specific: a green-tinted rounded panel
   with a heading, two lines of body copy, and three frosted stat
   chips. (The stat-chip row is a candidate to genericise into a
   shared component if it recurs -- see COMPONENT_CSS_REFACTOR.md.)
=========================================================== */
.page-ozone .consistency {
  margin-top: 4.444em;                       /* 80px gap from the benefits scroller (Figma 7073:2411) */
  background: var(--card-blue-20);          /* rgba(146,202,106,0.3) */
  border-radius: 1.778em;                    /* 32px */
  padding: 2.778em 4em;                      /* 50px 72px */
  display: flex;
  flex-direction: column;
  gap: 0.967em;                              /* ~17.4px */
}
.page-ozone .consistency__text {
  display: flex;
  flex-direction: column;
  gap: 0.967em;                              /* ~17.4px */
}
.page-ozone .consistency__title {
  margin: 0;
  font-weight: 900;                          /* Roboto Black */
  font-size: 2.222em;                        /* 40px */
  line-height: 1.5;                          /* 60/40 */
  color: var(--color-dark);
}
.page-ozone .consistency__body {
  font-size: 1em;                            /* 18px */
  line-height: 1.667;                        /* 30/18 */
  color: var(--color-dark);
}
.page-ozone .consistency__body p { margin: 0; }

.page-ozone .consistency__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.667em;                              /* 30px */
  margin-top: 0.811em;                       /* ~14.6px */
}
.page-ozone .consistency__stat {
  background: rgba(255, 255, 255, 0.63);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.889em;                    /* 16px */
  padding: 0.611em 1.167em;                  /* 11px 21px */
  display: flex;
  flex-direction: column;
  gap: 0.222em;                              /* 4px */
}
.page-ozone .consistency__stat-value {
  font-weight: 700;
  font-size: 1.222em;                        /* 22px */
  line-height: 1.364;                        /* 30/22 */
  color: var(--color-dark);
}
.page-ozone .consistency__stat-label {
  font-weight: 400;
  font-size: 1.111em;                        /* 20px */
  line-height: 1.2;
  color: var(--color-dark);
}
/* The infinity glyph reads too small/thin at 22px; bump just this
   value to 30px. line-height:1 keeps the chip level with the text
   values (whose 22px x 1.364 line box is also ~30px). */
.page-ozone .consistency__stat-value--symbol {
  font-size: 1.667em;                        /* 30px */
  line-height: 1;
}

@media (max-width: 767px) {
  .page-ozone .consistency { padding: 1.667em 1.333em; } /* 30/24 */
  /* Centre the heading + body when the band stacks (designer, Jul 31). */
  .page-ozone .consistency__text { text-align: center; }
  .page-ozone .consistency__title { font-size: 1.667em; line-height: 1.3; } /* 30px */
  /* Stack all three chips on their own full-width line (Figma 7302:9951:
     vertical flex, 10px gap, each chip w-full). */
  .page-ozone .consistency__stats {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.556em;                                /* 10px */
  }
  .page-ozone .consistency__stat { width: 100%; box-sizing: border-box; }
}

/* ===========================================================
   SECTION 6: ROUTINE  -- "A sample routine. Not a rule."
   (Figma desktop 8932:2146; mobile mirrors page-micropulsing.)

   THIS SECTION BREAKS THE 1200 CONTENT CAP (confirmed vs Figma; frame
   numbers corrected via Figma MCP, Aug 2026): the design is a flex row
   across the FULL section frame -- 1620px wide with two 735px columns,
   a 50px gap and a 100px right inset. The text column runs x785-x1520,
   100px past the 1200 content area's right edge. The wrapper
   (.container override below) is capped at 1640 (the page design-limit
   frame; the section frame measures 1620, and the shipped percentages
   land within 1px of the section spec) and the columns are % of it.
   NOTE: this geometry is IDENTICAL to micropulsing's routine frame
   (7073:2445) -- this block is the canonical implementation, ported
   to page-micropulsing and page-technology (Aug 2026).

   The woman (woman_drinking_water.png) sits on the LEFT, bleeding to
   the viewport's left edge, her column ending at 45.4% of the wrapper.
   The text panel starts at 48.5% (the 50px Figma gap lies between);
   the two never overlap.

   The blurred background (background_sample_routine.jpg) is a SEPARATE
   full-bleed layer at the BACK (z0): it spans both viewport edges and
   shows behind the woman AND bleeds through behind the right text panel.

   Stacking inside .routine:  blurred bg (z0)  <  woman (z1)  <  text (z3)

   MOBILE (<=1024): woman hidden; blurred layer full width, text centred.

   TUNING KNOBS:
     .routine__media right .......... her column's right edge (54.6% = ends at 45.4%)
     .routine__img object-position .. which slice of her shows (TOP protects the head;
                                      cover crops the BOTTOM at wide/short panels)
     .routine__text margin-left ..... where the panel starts (48.5% of the 1640 wrapper)
     .routine__text max-width ....... column cap ~Figma 735px col (ultrawide stop)
=========================================================== */
.page-ozone .section-routine {
  position: relative;
  padding-block: 0;                          /* height driven by the text */
  background-color: #ffffff;                 /* base; the blurred bg covers it */
  overflow: hidden;
}
/* Figma 8932:2146 breaks the 1200 content cap: the section is a flex row
   across the full 1620px section frame -- two 735px columns with a 50px
   gap and a 100px right inset; the text column runs x785-x1520, 100px
   PAST the 1200 content area's right edge. The wrapper is capped at 1640
   (the page design-limit frame; shipped percentages land within 1px of
   the 1620 section spec) and the columns are percentages of it. */
.page-ozone .section-routine .container {
  max-width: 1640px;
  padding-inline: 0;
}
.page-ozone .routine {
  position: relative;
}

/* Woman cutout: left-bleed column ending at 45.4% of the wrapper. */
.page-ozone .routine__media {
  position: absolute;
  top: 0;                                     /* fill the full section height */
  bottom: 0;
  left: max(calc(50% - 50vw), -140px);        /* full-bleed to the viewport's left edge,
                                                 CAPPED at the 1920-viewport position: the
                                                 section height is constant (text-driven),
                                                 so past 1920 a wider box only zooms the
                                                 cover-cropped photo. 50% of the 1640
                                                 wrapper (820px) - 50vw at 1920 (960px)
                                                 = -140px; beyond 1920 the box freezes
                                                 there and the blurred bg fills the rest */
  right: 54.6%;                               /* col ends at 45.4% of the wrapper (735/1620);
                                                 the 50px Figma gap sits between here and the
                                                 text column at 48.5% */
  z-index: 1;                                /* ABOVE the blurred background */
}
.page-ozone .routine__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* fill the box */
  object-position: right top;                /* keep her head (Figma shows full height,
                                                cropping the LEFT side); bottom crop is
                                                safe -- the sweater just continues */
}

/* Blurred background: full-bleed to BOTH viewport edges and sitting at
   the back (z0), so it shows behind the woman AND bleeds through behind
   the right text panel. No mask -- uniform across the whole section. */
.page-ozone .routine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);                    /* bleed to the viewport's LEFT edge */
  right: 50%;
  margin-right: -50vw;                       /* ...and to the viewport's RIGHT edge */
  background-image: url('../images/elements/background_sample_routine__ozone.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;                                /* behind the woman AND the text panel */
}

/* Text: right half, above the blurred layer. */
.page-ozone .routine__text {
  position: relative;
  z-index: 3;
  margin-left: 48.5%;                        /* Figma: text col starts at x785 */
  margin-right: 6.098%;                      /* Figma pr-[100px] as % of the 1640 frame
                                                (100/1640): identical 100px at the full
                                                frame, scales down continuously below it
                                                instead of eating a fixed 100px at 1100px */
  max-width: 745px;                          /* Figma: flex-1 col width at the 1640 frame;
                                                 capping keeps the measure readable on
                                                 ultrawide screens */
  display: flex;
  flex-direction: column;
  gap: 1.667em;                              /* 30px: heading -> timeline */
  justify-content: center;
  padding-block: 2.778em;                    /* 50px */
  padding-inline: 0;                         /* the column IS the content box (Figma) */
}

/* Timeline */
.page-ozone .routine__timeline {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                              /* 30px between steps */
}
.page-ozone .routine__step {
  display: flex;
  gap: 1.667em;                              /* 30px: when-group -> body */
  align-items: flex-start;
}
.page-ozone .routine__when {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.667em;                              /* 30px: time -> badge (Figma) */
  flex: 0 0 auto;
  width: 10.167em;                           /* 183px fixed when-column (Figma) */
}
.page-ozone .routine__time {
  min-width: 3.9em;
  text-align: right;
  font-weight: 700;
  font-size: 1.111em;                        /* 20px */
  line-height: 1.2;
  color: var(--color-dark);
}
.page-ozone .routine__badge {
  flex-shrink: 0;
  width: 2.444em;                            /* 44px */
  height: 2.444em;
  border-radius: 50%;
  border: 2px solid var(--color-water-ozonator);
  background: var(--tint-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.889em;
  line-height: 1;
}
.page-ozone .routine__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                              /* 10px */
}
.page-ozone .routine__tag {
  align-self: stretch;                       /* Figma: pill bg spans the body column */
  margin: 0;
  background: var(--tint-accent-soft);
  border-radius: 100px;
  padding: 0.167em 0.556em;
  font-weight: 700;
  font-size: 0.833em;                        /* 15px */
  line-height: 1.667;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.page-ozone .routine__step-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.222em;                        /* 22px */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .routine__step-text {
  margin: 0;
  font-weight: 400;
  font-size: 1em;                            /* 18px */
  line-height: 1.667;
  color: var(--color-dark);
}

/* Mid tier (1025-1440): the woman is still shown but the frame is well
   below the 1640 Figma canvas, so the FIXED desktop chrome (183px
   when-column + 30px gaps) crushes the step bodies to ~220px (designer
   screenshots, Aug 2026 -- micropulsing at the same width keeps ~290px).
   Relax to micropulsing's compact when-rhythm: content-sized when-group,
   20px gaps, and a time min-width wide enough for the widest label
   ("10:30 AM") so every body still shares one left edge. The exact
   Figma geometry resumes above 1440px, where there is room for it. */
@media (min-width: 1025px) and (max-width: 1440px) {
  .page-ozone .routine__when {
    width: auto;
    justify-content: flex-start;
    gap: 1.111em;                    /* 20px time -> badge */
  }
  .page-ozone .routine__time { min-width: 4.5em; }
  .page-ozone .routine__step { gap: 1.111em; }   /* 20px when -> body */
}

/* Mobile (Figma 7302:9973): no woman -- blurred layer full width + solid,
   text centred over it. */
@media (max-width: 1024px) {
  .page-ozone .routine__media { display: none; }
  .page-ozone .routine::before {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-right: 0;
    transform: translateX(-50%);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .page-ozone .routine__text {
    margin-left: 0;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-container);
  }
  .page-ozone .routine__time       { font-size: 1em; }      /* 18px */
  .page-ozone .routine__step-title { font-size: 1.111em; }  /* 20px */
  /* Time rows: left-aligned with a small gutter (drop the <ol> default
     indent and the desktop right-align). */
  .page-ozone .routine__timeline { padding-left: 0; }
  .page-ozone .routine__time     { text-align: left; }
  /* Release the desktop 183px when-column: on mobile it left a large
     void between the time and the text (designer feedback Jul 31);
     the compact micropulsing rhythm applies instead. The time keeps a
     min-width wide enough for the WIDEST label ("12:30 PM" ~79px at
     18px bold) so every step's body shares one left edge -- 3.9em let
     the wider times outgrow the min and stagger the bodies. */
  .page-ozone .routine__time { min-width: 4.5em; }
  .page-ozone .routine__when {
    width: auto;
    justify-content: flex-start;
    gap: 1.111em;                    /* 20px */
  }
}

/* ===========================================================
   SECTION 7: MISCONCEPTIONS   (Figma 7073:2505 / 7302:10032)
   Uses .sec-stack/.sec-head + a 2-up grid of "myth / reality"
   cards. Each card is a white, bordered, 24px-radius container
   (overflow:hidden so the two zones meet the rounded corners):
     .misc__myth    -- top zone, pale blue gradient, blue "MYTH"
                       eyebrow + the myth in bold.
     .misc__reality -- bottom zone, willow fill, "REALITY" eyebrow
                       + the plain-language answer. flex:1 so it
                       grows to equalise card heights across a row.
   Grid collapses to one column at <=767 (same breakpoint as S2).
=========================================================== */
.page-ozone .misc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.056em;                      /* 19px, both axes (Figma) */
  align-items: stretch;              /* cards in a row match height */
}
.page-ozone .misc__card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--border-card);
  border-radius: 1.333em;            /* 24px (matches S3 cards) */
  overflow: hidden;                  /* clip zone fills to the radius */
}

/* Myth zone: pale grey -> 20% blue gradient (Figma grey/97 -> blue 0.2). */
.page-ozone .misc__myth {
  display: flex;
  flex-direction: column;
  gap: 0.333em;                      /* 6px: eyebrow -> myth */
  padding: 1.333em 1.556em 1.378em;  /* 24 / 28 / 24.8 */
  background-image: linear-gradient(
    134.4deg,
    var(--hero-grad-1) 0%,           /* #f9fbf6 */
    rgba(71, 146, 188, 0.3) 100%     /* --color-water-ozonator: tuned to match
                                        the visible Figma (codegen reported 0.2
                                        but renders stronger). Lower for a more
                                        subtle wash, raise for more blue. */
  );
}

/* Reality zone: willow fill; grows to fill the card height. */
.page-ozone .misc__reality {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.333em;                      /* 6px: eyebrow -> answer */
  padding: 1.333em 1.556em;          /* 24 / 28 */
  background: var(--tint-accent-soft);
}

/* Shared eyebrow (MYTH blue, REALITY dark). */
.page-ozone .misc__label {
  margin: 0;
  font-weight: 700;
  font-size: 0.833em;                /* 15px */
  line-height: 1.667;                /* ~25px */
  letter-spacing: 0.1em;             /* 1.5px at 15px */
  text-transform: uppercase;
}
.page-ozone .misc__label--myth    { color: var(--color-water-ozonator); }
/* REALITY eyebrow is intentionally larger + darker than MYTH (Figma):
   18px / line-height 25px / dark #3b3b3b. The base .misc__label keeps
   the em-relative 0.1em letter-spacing, which resolves to 1.8px here
   (vs 1.5px on the 15px MYTH eyebrow). */
.page-ozone .misc__label--reality {
  color: var(--color-dark);
  font-size: 1em;                    /* 18px */
  line-height: 1.389;                /* 25px */
}

.page-ozone .misc__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-btn);        /* 22px */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .misc__text {
  margin: 0;
  font-weight: 400;
  font-size: 1em;                    /* 18px */
  line-height: 1.667;                /* 30px */
  color: var(--color-dark);
}

/* Inline link (overrides the scoped a{} reset). */
.page-ozone .misc__link {
  color: var(--color-water-ozonator);
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .page-ozone .misc__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 8: OTHER PRACTICES   (Figma 7073:2522 / 7302:10047)
   Full-bleed pale-blue section. A wave divider (7073:2521) sits at
   the very top edge to edge: its white top blends with the white
   section above; its pale-blue bottom matches this section's bg, so
   the seam is invisible. Heading (all-blue) + bold lead, then a
   5-up row of "practice" cards. The Micropulsing card is highlighted
   (willow fill, green border, soft shadow) with a floating "THIS ONE"
   badge. Cards are equal height (grid stretch).

   RESPONSIVE: at <=767 the grid becomes 2-up and the featured
   Micropulsing card spans the full width (its own middle row),
   matching the mobile design.
=========================================================== */
.page-ozone .section-practices {
  /* Background is intentionally NOT painted on the whole section: the wave
     divider has a transparent top, so a section-wide fill would show this
     pale blue ABOVE the wave crest (a blue band over the previous section).
     Instead the fill is applied below the wave via .practices__body::before,
     letting the wave's transparent top read straight through to S7. */
  background-color: transparent;
  position: relative;
  /* No vertical padding here; the body owns the colour band incl. its
     bottom space (Figma 120). The wave occupies the top. */
  padding-block: 0;
  overflow: hidden;                   /* contain the full-bleed wave + fill */
}

/* Wave divider: spans the full section (= viewport) width on every
   device; height scales with width to keep the wave's proportions.
   Sits above the colour band so its transparent top shows the section
   above (S7), not this section's blue. */
.page-ozone .practices__wave {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Content block below the wave. Custom gaps: a little air under the
   wave, then 50px (desktop) from heading to the card row. The pale-blue
   section fill is a full-bleed layer behind this block only, so it meets
   the wave's blue bottom seamlessly and never bleeds above the crest. */
.page-ozone .practices__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 2.5vw + 20px, 50px);  /* heading -> cards: 30 / 50 */
  padding-top: clamp(24px, 3.75vw + 9px, 54px); /* wave -> heading (knob) */
  padding-bottom: clamp(60px, 7.5vw + 30px, 120px); /* section bottom (moved off .section) */
}
.page-ozone .practices__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: #eff9fd;           /* pale blue, full-bleed, below wave only */
}

/* Card row. */
.page-ozone .practices__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.889em;                       /* 16px */
  align-items: stretch;               /* equal-height cards */
}
.page-ozone .practices__card {
  display: flex;
  flex-direction: column;
  align-items: center;                /* centre icon / title / meta */
  gap: 0.333em;                       /* 6px between children */
  padding: 1.6em 1.156em;             /* 28.8 / 20.8 */
  background: var(--color-white);
  border: 1px solid var(--border-card);
  border-radius: 1.333em;             /* 24px */
  text-align: center;
}

/* Highlighted "this one" card. */
.page-ozone .practices__card--featured {
  position: relative;                 /* anchor the badge */
  background: var(--tint-accent-soft);
  border-color: var(--color-water-ozonator);
  box-shadow: 0 4px 10px rgba(26, 43, 28, 0.07);
}
.page-ozone .practices__badge {
  position: absolute;
  top: -0.833em;                      /* -12.5px (relative to this 15px element) */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2em 0.8em;               /* 3 / 12 */
  background: var(--color-water-ozonator);
  border-radius: 100px;
  font-size: 0.833em;                 /* 15px */
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.033em;            /* 0.5px */
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

/* Icon = an emoji glyph rendered monochrome, per the Figma spec:
   Segoe UI Emoji at #3b3b3b, 32px. Setting an emoji *font* + colour
   makes the glyph use its text (single-colour) form on platforms that
   provide one (e.g. Windows/Segoe UI Emoji -- the design's target).
   On color-emoji platforms (macOS/iOS/Android) the system emoji font
   may still render in colour; ask if you want a forced-monochrome
   fallback (text-presentation selector). */
.page-ozone .practices__icon {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1.778em;                 /* 32px */
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--color-dark);           /* #3b3b3b */
}
.page-ozone .practices__title {
  margin: 0;
  padding-top: 0.444em;               /* 8px lift (Figma) */
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .practices__meta {
  margin: 0;
  font-size: 0.833em;                 /* 15px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-water-ozonator-dark); /* fern green #4a8b3f */
}

/* Check list. */
.page-ozone .practices__checks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.333em;                       /* 6px */
  padding-top: 0.444em;               /* 8px lift (Figma) */
}
.page-ozone .practices__check {
  margin: 0;
  display: flex;
  align-items: flex-start;            /* mark rides the FIRST line of a wrapped
                                         label (was center = mark floats between
                                         lines); the margin-top below re-centres
                                         it within that line, so single-line rows
                                         render pixel-identical (from page-silver,
                                         Aug 2026) */
  justify-content: center;            /* centred on desktop (Figma) */
  gap: 0.333em;                       /* 6px: mark -> text */
}
.page-ozone .practices__check-mark {
  flex-shrink: 0;
  margin-top: 0.229em;                /* 2.75px: measured so the mark's position vs the
                                         first text line is IDENTICAL to the old
                                         align-center rendering on this page (0.8px,
                                         render-verified at 360) */
  font-size: 0.667em;                 /* 12px */
  line-height: 1;
  color: var(--color-water-ozonator-dark);
}
.page-ozone .practices__check-text {
  font-size: 0.833em;                 /* 15px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-dark);
}

@media (max-width: 1024px) {
  .page-ozone .practices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Featured card takes its own full-width row in the middle. */
  .page-ozone .practices__card--featured { grid-column: 1 / -1; }
}

/* ===========================================================
   SECTION 9: HOW TO USE MICROPULSING   (Figma 7073:2552 / 7302:10079)
   Warm background (--bg-expect). Centered two-tone heading, then four
   white rounded "step" rows. DESKTOP: square photo (250px) on the
   left, step title + body on the right, row >=200px tall. MOBILE
   (<=767): the row stacks -- photo on top (full width), text below.
   The card clips the photo to its 32px radius (overflow:hidden).
=========================================================== */
/* Heading -> steps gap is 50px here (Figma), not the default 30px. */
.page-ozone .section-howto { background: var(--bg-cream); }
.page-ozone .section-howto .sec-stack {
  gap: clamp(30px, 2.5vw + 20px, 50px);  /* 30 / 50 */
}

.page-ozone .howto__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                       /* 10px between rows */
}
.page-ozone .howto__row {
  display: flex;
  align-items: stretch;               /* photo fills the row height */
  min-height: 11.111em;               /* 200px */
  background: var(--color-white);
  border-radius: 1.778em;             /* 32px */
  overflow: hidden;                   /* clip the photo to the radius */
  box-shadow: 0 4px 20px rgba(26, 43, 28, 0.07);
}
.page-ozone .howto__media {
  flex: 0 0 13.889em;                 /* 250px */
  width: 13.889em;
}
.page-ozone .howto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* fill, no distortion */
}
.page-ozone .howto__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.556em;                       /* 10px: title -> body */
  padding: 1.111em;                   /* 20px */
}
.page-ozone .howto__step-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-ozone .howto__step-text {
  margin: 0;
  font-size: 1em;                     /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

@media (max-width: 767px) {
  .page-ozone .howto__row {
    flex-direction: column;
    min-height: 0;
  }
  .page-ozone .howto__media {
    flex: 0 0 auto;
    width: 100%;
    height: 11.111em;                 /* 200px photo on top */
  }
}

/* ===========================================================
   Wave dividers between sections (full-bleed). The image carries the
   colour transition; the panel background fills the area below the
   wave so it meets the next section seamlessly. Used between S8
   (pale blue) and S9 (warm). Figma 7073:2551.
=========================================================== */
.page-ozone .wave-divider { line-height: 0; }
.page-ozone .wave-divider__img { display: block; width: 100%; height: auto; }
.page-ozone .wave-divider--blue-to-cream { background: var(--bg-cream); } /* #f8f4f2 */

/* ===========================================================
   SECTION 10: SCHEDULE  (Figma 7073:2584 / Weeks 7073:2591 / 7302:10112)
   Pale-green section (--hero-grad-1). Heading + bold lead, then a white
   rounded card with a 6-tab bar (site-tabs.js) over a two-column panel
   per week: left = "Micropulsing" schedule bullets + an "Important"
   callout; right = "Tips this week" (Week 6 = "What's next?" links).
   DESKTOP: tabs share the width equally; columns side by side.
   MOBILE (<=767): the tab bar scrolls horizontally; columns stack.
   Bullets use a small green rounded-square marker; rows are divided by
   hairlines (last in each list has none).
=========================================================== */
.page-ozone .section-schedule { background: rgba(71, 146, 188, 0.05); } /* #4792bc 5% (designer, Jul 31) */
.page-ozone .section-schedule .sec-stack {
  gap: clamp(32px, 1.5vw + 26px, 44px);   /* heading block -> card (Figma ~44) */
}

/* Card */
.page-ozone .schedule__weeks {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--border-card);
  border-radius: 1.778em;             /* 32px */
  box-shadow: 0 4px 20px rgba(26, 43, 28, 0.07);
  overflow: hidden;
}

/* Mobile: the week tab bar sticks below the fixed menu while a week panel
   scrolls (designer feedback #8 on page-silver, Aug 24 -- wanted on ALL
   technology pages). The card's overflow:hidden would defeat
   position:sticky, so at <=767 the clip is released and the corner
   children are rounded instead (COMPONENTS.md: "round the corner
   children"). The overflow override carries an extra ancestor class so it
   outranks the base overflow:hidden regardless of source order. */
@media (max-width: 767px) {
  .page-ozone .section-schedule .schedule__weeks { overflow: visible; }
  .page-ozone .schedule__tablist {
    position: sticky;
    top: 70px;                        /* fixed .menu-topnav height on phones */
    z-index: 10;                      /* above panel content; menu is z 1000 */
    background: var(--color-white);   /* panel text scrolls under, not through */
    border-top-left-radius: 1.778em;  /* card's 32px corners, now on the child */
    border-top-right-radius: 1.778em;
  }
  .page-ozone .schedule__panel {
    border-bottom-left-radius: 1.778em;
    border-bottom-right-radius: 1.778em;
  }
}

/* Tab bar */
.page-ozone .schedule__tablist {
  display: flex;
  border-bottom: 1px solid var(--border-card);
}
.page-ozone .schedule__tab {
  flex: 1 0 0;
  min-width: 0;
  margin-bottom: -1px;                /* let the active underline sit on the divider */
  padding: 0.889em 0.889em 1.022em;   /* 16 / 16 / 18.4 */
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: 1.111em;                 /* 20px */
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-dark);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.page-ozone .schedule__tab.is-active {
  background: var(--card-blue-20);        /* Figma 9113:3498: 0.2 tint on the active tab */
  border-bottom-color: var(--color-water-ozonator-dark);  /* WOZ dark blue */
}

/* Panel */
.page-ozone .schedule__panel {
  padding: 2.222em clamp(20px, 5vw, 4.444em) 2.267em;  /* 40 / ~80 / 40.8 */
}
.page-ozone .schedule__panel[hidden] { display: none; }
.page-ozone .schedule__cols {
  display: flex;
  gap: 1.556em;                       /* 28px */
  align-items: stretch;
}
.page-ozone .schedule__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-card);
  border-radius: 0.889em;             /* 16px */
  padding: 1.378em;                   /* 24.8px */
}

/* Column heading (+ optional "Start here" pill) */
.page-ozone .schedule__col-head {
  display: flex;
  align-items: center;
  gap: 0.444em;                       /* 8px */
  padding-bottom: 0.778em;            /* 14px */
}
.page-ozone .schedule__col-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.591;                 /* 35px */
  color: var(--color-dark);
}
.page-ozone .schedule__pill {
  display: inline-flex;
  padding: 0.3em 1em;                 /* 3 / 10 (relative to 10px) */
  background: var(--card-blue-20);    /* designer feedback (Jul 31): Figma light-blue pill */
  border-radius: 100px;
  font-size: 0.556em;                 /* 10px */
  font-weight: 700;
  letter-spacing: 0.05em;             /* 0.5px */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-water-ozonator-dark); /* was Everglade green (micropulsing leftover) */
}

/* Bullet lists */
.page-ozone .schedule__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-ozone .schedule__item {
  display: flex;
  gap: 0.556em;                       /* 10px */
  padding-block: 0.556em;             /* ~10px */
  border-bottom: 1px solid var(--color-gray-nurse);  /* #e2e8e3 */
}
.page-ozone .schedule__item:last-child { border-bottom: 0; }
.page-ozone .schedule__bullet {
  flex: 0 0 auto;
  width: 0.444em;                     /* 8px */
  height: 0.444em;
  margin-top: 0.5em;                  /* align with first text line */
  background: var(--color-water-ozonator-dark);
  border-radius: 2.5px;
}
.page-ozone .schedule__item-text {
  font-size: 1em;                     /* 18px */
  line-height: 1.667;                 /* 30px */
  color: var(--color-dark);
}
.page-ozone .schedule__item-text strong { font-weight: 700; }
.page-ozone .schedule__link {
  color: var(--color-water-ozonator-dark);
  font-weight: 700;
  text-decoration: underline;
}

/* "Important" callout (left column) */
.page-ozone .schedule__callout {
  margin-top: 1.667em;                /* 30px gap from the list */
  padding: 1em 1.222em 1em 1.444em;   /* 18 / 22 / 18 / 26 */
  background: #eff6fa;                /* pale blue */
  border-left: 4px solid var(--color-water-ozonator); /* blue */
  border-radius: 0.889em;             /* 16px */
}
.page-ozone .schedule__callout-title {
  margin: 0 0 0.1em;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.591;
  color: var(--color-dark);
}
.page-ozone .schedule__callout-text {
  margin: 0;
  font-size: 1em;                     /* 18px */
  line-height: 1.667;
  color: var(--color-dark);
}

/* Wave-divider panel backgrounds. Each panel must match the section
   BELOW it: the wave PNG carries the upper section's colour at its top
   edge and fades to transparent, so the panel shows through below the
   wave. Beige sits above S10 (#f9fbf6); green sits above S11 (white). */
.page-ozone .wave-divider--beige { background: rgba(71, 146, 188, 0.05); }      /* above S10; matches the schedule bg */
.page-ozone .wave-divider--blue-white { background: rgba(71, 146, 188, 0.05); } /* below S10: matches the schedule bg; the blue wave PNG carries the white for the FAQ side */

@media (max-width: 767px) {
  /* Fit all six week tabs across the bar (equal width) rather than letting
     them overflow and clip with no scroll affordance. Smaller type + tight
     horizontal padding keep "Week 1".."Week 6" on one line each. */
  .page-ozone .schedule__tab {
    font-size: 0.722em;               /* 13px */
    padding-inline: 0.3em;            /* tight; flex:1 keeps equal widths */
  }
  .page-ozone .schedule__cols { flex-direction: column; }
}

/* ===========================================================
   SECTION 11: FAQs  (Figma 7073:2620 / 7302:10171)
   Two columns: SP8 photo + (all-blue heading, FAQ accordion,
   "More FAQs" button). Laid out with grid named areas so it can
   REFLOW on mobile to heading -> photo -> accordion -> button
   (the photo sits above the heading on desktop's left column but
   below it on mobile).

   Accordion rows are accent-tinted pills (alternating 0.3 / 0.2).
   Toggle + height animation come from site-reveal.js; the answer
   region is .faq__answer (its inner content -- p/ul/a -- is styled
   by the shared site-faqs.css). The +/- icon is drawn in CSS and
   flips to a minus when the row's toggle is aria-expanded.
=========================================================== */
.page-ozone .faq__container {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                       /* ~30px between header and body */
}
.page-ozone .faq__title {
  margin: 0;
  text-align: left;
}
.page-ozone .faq__subhead {
  margin: 0;
  font-size: 1em;                     /* 18px */
  line-height: 1.5;
  color: var(--color-dark);
}

/* Grid on the container itself (designer feedback Jul 31: on mobile the
   HEADING must sit above the picture, so title/media/list are siblings
   the grid can reorder; desktop keeps the image spanning both rows). */
.page-ozone .faq__container {
  display: grid;
  align-items: center;
  column-gap: 2.778em;                /* 50px */
  row-gap: 1.111em;                   /* 20px: title -> pills (Figma) */
  grid-template-columns: minmax(0, 506px) minmax(320px, 1fr);
  grid-template-areas:
    "media title"
    "media list";
}
.page-ozone .faq__title { grid-area: title; align-self: end; }
.page-ozone .faq__media { grid-area: media; }
.page-ozone .faq__list  { grid-area: list; align-self: start; }

.page-ozone .faq__media {
  align-self: start;                  /* release from top so it can stick */
  position: sticky;
  top: 120px;                         /* clear the fixed CMS nav */
  width: 100%;
  max-width: 506px;
  aspect-ratio: 506 / 493;
  border-radius: 1.111em;             /* 20px */
  overflow: hidden;
}
.page-ozone .faq__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.page-ozone .faq__list {
  display: flex;
  flex-direction: column;
  align-items: center;                /* centres the "View all FAQs" pill */
  gap: 1.111em;                       /* 20px */
}

/* FAQ row */
.page-ozone .faq__item {
  width: 100%;
  border-radius: 1.778em;             /* 32px */
  box-shadow: 0 4px 20px rgba(26, 43, 28, 0.07);
  overflow: hidden;
}
.page-ozone .faq__item--tint-30 { background: var(--color-accent-a30); }
.page-ozone .faq__item--tint-20 { background: var(--color-accent-a20); }

/* Toggle button (the whole question row is clickable). */
.page-ozone .faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.111em;                       /* 20px */
  width: 100%;
  min-height: 3.056em;                /* 55px */
  padding: 0.556em 1.111em;           /* 10px 20px */
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.page-ozone .faq__question {
  flex: 1;
  min-width: 0;
  font-size: 1.111em;                 /* 20px */
  font-weight: 700;
  line-height: 1.75;                  /* 35px */
  color: var(--color-dark);
}

/* Plus icon that rotates to a minus when expanded (drawn in CSS) */
.page-ozone .faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.667em;                     /* 30px */
  height: 1.667em;
}
.page-ozone .faq__icon::before,
.page-ozone .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-water-ozonator-dark);
  border-radius: 1px;
  transition: transform 0.2s;
}
.page-ozone .faq__icon::before {
  width: 0.889em;                     /* 16px horizontal bar */
  height: 0.139em;                    /* ~2.5px */
  transform: translate(-50%, -50%);
}
.page-ozone .faq__icon::after {
  width: 0.139em;
  height: 0.889em;                    /* vertical bar -> makes a plus */
  transform: translate(-50%, -50%);
}
/* When expanded: hide the vertical bar so a plus becomes a minus */
.page-ozone .faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Answer panel (HTML injected by site-faqs.js) */
.page-ozone .faq__answer {
  padding: 0 1.111em 1.111em;         /* 20px sides + bottom; flush under question */
  font-size: 1em;                     /* 18px */
  font-weight: 400;
  line-height: 1.667;                 /* 30px */
  color: var(--color-dark);
}
.page-ozone .faq__answer[hidden] { display: none; }
.page-ozone .faq__answer p { margin-bottom: 0.667em; }
.page-ozone .faq__answer p:last-child { margin-bottom: 0; }
/* Lists and links inside fetched answer fragments are styled SITE-WIDE by
   css/site-faqs.css (specificity-doubled selectors that beat the page
   resets above) -- no page-level rules needed here. */
/* Loading / error states set by site-faqs.js */
.page-ozone .faq__answer.is-loading { opacity: 0.6; }
.page-ozone .faq__answer.is-error { color: #b00020; }

/* "View all FAQs" pill. The wrapper
   centres the pill within the list flow; the pill itself follows the
   project's blue-pill convention (.btn.btn--blue.btn--pill are placeholder
   utility classes from silver-pulser's HTML pattern -- they're not defined
   on this page, but .faq__cta carries the styling so they render correctly
   here). */
.page-ozone .faq__cta-wrap { display: flex; justify-content: center; }
.page-ozone .faq__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.389em 1.111em 0.167em;   /* 7 / 20 / 3 -- nudge text down 2px */
  background: var(--color-water-ozonator);
  border-radius: 50px;
  font-size: 1em;                     /* 18px */
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;              /* 1.8px */
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page-ozone .faq__cta:hover { background: #555; }

@media (max-width: 767px) {
  /* Single column on phone: heading above the picture above the list
     (ozone layout, designer feedback Jul 31). */
  .page-ozone .faq__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "media"
      "list";
    row-gap: 1.667em;                 /* ~30px between the stacked blocks */
    justify-items: center;
  }
  .page-ozone .faq__title { text-align: center; }
  .page-ozone .faq__media {
    top: auto;
    /* iOS Safari collapses a grid row whose height comes only from an
       aspect-ratio box, so the question pills painted OVER the photo
       (designer feedback round two, Aug 26; Chrome computes the track
       correctly, which is why desktop and the harness never showed it).
       The padding-top ratio box sizes the row explicitly everywhere. */
    aspect-ratio: auto;
    height: 0;
    padding-top: 97.43%;               /* 493 / 506 */
    position: relative;                /* anchor for the abs img; also ends sticky */
  }
  .page-ozone .faq__media img {
    position: absolute;
    inset: 0;
  }
}


/* ===========================================================
   SECTION 12: SILVER PULSER UNIT  (Figma 7073:2647 / mobile 7302:10198)
   Full-bleed card-green-30 panel. Desktop = two columns: a tight
   flex stack of text (left) + product shot (right), vertically
   centred against the image. Mobile collapses .unit__content to
   display:contents so its children reorder around the image via
   `order`: heading, image, lead, chips, CTA.
=========================================================== */
.page-ozone .section-unit { background: var(--card-blue-20); }

.page-ozone .unit__wrap {
  display: grid;
  align-items: center;
  column-gap: 2.778em;                /* 50px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 506px);
}

/* Left column: tight text stack (independent of the image height) */
.page-ozone .unit__content {
  display: flex;
  flex-direction: column;
  gap: 0.967em;                       /* ~17.4px (Figma left-column gap) */
}
.page-ozone .unit__title { margin: 0; }

.page-ozone .unit__lead {
  margin: 0;
  font-size: var(--text-lead);        /* 20px */
  font-weight: 400;
  line-height: 1.75;                  /* Figma 35/20 */
  color: var(--color-dark);
}
.page-ozone .unit__lead strong { font-weight: 700; }

/* Feature chips */
.page-ozone .unit__chips {
  display: flex;
  gap: 0.778em;                       /* 14px */
  padding-block: 0.333em;             /* small breathing room (Figma py-20 incl. gap) */
}
.page-ozone .unit__chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.778em;                       /* 14px */
  padding: 1px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.889em;             /* 16px */
}
.page-ozone .unit__chip-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.222em;                     /* 40px */
  height: 2.222em;
  background: var(--color-white);
  border-radius: 0.556em;             /* 10px */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  color: var(--color-water-ozonator);  /* tints the inline SVG icons */
}
.page-ozone .unit__chip-icon .icon {
  font-size: 1.222em;                 /* 22px -- icon size; was hardcoded on the inline svg */
  display: block;
}
.page-ozone .unit__chip-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
  text-align: left;
}

/* Blue pill CTA (same treatment as S11 .faq__cta) */
.page-ozone .unit__cta {
  align-self: flex-start;             /* pill hugs its text, left-aligned */
  display: inline-flex;
  align-items: center;
  margin-top: 0.333em;                /* a touch more space above the button */
  padding: 0.389em 1.111em 0.167em;   /* 7 / 20 / 3 -- nudge text down 2px */
  background: var(--color-water-ozonator);
  border-radius: 50px;
  font-size: 1em;                     /* 18px */
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;              /* 1.8px */
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page-ozone .unit__cta:hover { background: #555; }

/* Product shot -- sits on the green panel (transparent PNG) */
.page-ozone .unit__media { align-self: center; }
.page-ozone .unit__img {
  display: block;
  width: 100%;
  max-width: 506px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .page-ozone .unit__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.111em;                     /* ~20px */
    text-align: center;
  }
  /* flatten the content group so its children reorder around the image */
  .page-ozone .unit__content { display: contents; }
  .page-ozone .unit__title { order: 1; }
  .page-ozone .unit__media { order: 2; align-self: auto; }
  .page-ozone .unit__lead  { order: 3; }
  .page-ozone .unit__chips { order: 4; flex-direction: column; width: 100%; }
  .page-ozone .unit__cta   { order: 5; align-self: center; margin-top: 0; }
}

/* ===========================================================
   SECTION 13: WELLNESS GUIDE / SWPG  (Figma 7073:2672 / mobile 7302:10220)
   Centered blue/green heading + bold lead, then a two-column body:
   checklist + download pill (left) and a framed video preview that
   opens the SWPG promo in a modal (site-image-to-video.js). Adapted
   from the Silver Pulser page's SWPG section. Sits on white.
=========================================================== */
.page-ozone .swpg__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.778em;                       /* 50px (heading block -> body) */
}
.page-ozone .swpg__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.667em;                       /* 30px (title -> lead) */
  text-align: center;
  width: 100%;
}
.page-ozone .swpg__title { margin: 0; }
.page-ozone .swpg__subhead {
  max-width: 50em;                    /* keep the lead to a readable measure */
  margin-inline: auto;
}

/* Two-column body */
.page-ozone .swpg__body {
  display: grid;
  align-items: center;
  column-gap: 2.778em;                /* 50px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 653px);
  width: 100%;
}
.page-ozone .swpg__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.222em;                       /* 40px (list block -> CTA) */
}

/* Label + checklist grouped tightly (the 40px gap above is block -> CTA). */
.page-ozone .swpg__list-block {
  display: flex;
  flex-direction: column;
  gap: 0.778em;                       /* 14px (title -> list) */
  width: 100%;
}
.page-ozone .swpg__list-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.591;                 /* 35/22 (Figma 7302:10230) */
  color: var(--color-dark);
}

/* Blue circle-check checklist */
.page-ozone .check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                       /* 10px */
  width: 100%;
}
.page-ozone .check-list__item {
  display: flex;
  align-items: center;
  gap: 1.667em;                       /* 30px (icon -> label) */
}
.page-ozone .check-list__icon {
  flex: 0 0 auto;
  width: 30px;  /* fixed px: em was resolving small against parent font-size */
  height: 30px;
  color: var(--color-water-ozonator); /* brand blue check (currentColor sprite) */
}
.page-ozone .check-list__item span {
  font-size: var(--text-lead);        /* 20px (Figma desktop 7073:2683) */
  font-weight: 500;                   /* Roboto Medium */
  line-height: 1.75;                  /* Figma desktop 35/20 */
  color: var(--color-dark);
}

/* Download pill (same treatment as S11 .faq__cta / S12 .unit__cta) */
.page-ozone .swpg__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;                 /* label centres when it wraps to two lines on mobile */
  padding: 0.389em 1.111em 0.167em;   /* 7 / 20 / 3 -- nudge text down 2px */
  background: var(--color-water-ozonator);
  border-radius: 50px;
  font-size: 1em;                     /* 18px */
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;              /* 1.8px */
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page-ozone .swpg__cta:hover { background: #555; }

/* Framed video preview */
.page-ozone .swpg__preview {
  display: block;
  width: 100%;
  max-width: 653px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  /* The shared framed variant (site-image-to-video.css) adds
     padding: var(--vpf-pad) (8px via the instance style) to THIS element.
     page-ozone.css has no border-box reset, so width:100% + 16px padding
     overflowed the viewport by 6px on mobile (360 -> 366). That widened
     the layout viewport, and every position:fixed element (bottom nav,
     sheets, pinned bar) sized/anchored to the expanded viewport -- the
     nav then "bobbed" as Chrome re-synced the visual viewport on scroll.
     border-box keeps the frame padding inside the 100%. (Same fix as
     .consistency__stat above.) */
  box-sizing: border-box;
}
/* Video preview rendering now handled by the shared .video-preview
   component (framed variant) in site-image-to-video.css. Frame look
   (grey, shadow) and aspect set via instance vars on the <a>.
   .swpg__preview keeps its layout above. */

@media (max-width: 1024px) {
  .page-ozone .swpg__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.222em;                     /* 40px */
  }
  /* flatten the left group so the CTA can move below the video */
  .page-ozone .swpg__left { display: contents; }
  .page-ozone .swpg__list-block { order: 1; width: 100%; }
  .page-ozone .swpg__preview { order: 2; }
  .page-ozone .swpg__cta     { order: 3; }
}

/* Phone tier: Figma mobile shows the checklist items at 18px (vs 20px
   desktop), line-height held at 35px (Figma 7302:10234). */
@media (max-width: 767px) {
  .page-ozone .check-list__item span {
    font-size: 1em;                   /* 18px */
    line-height: 1.944;               /* 35/18 */
  }
}

/* ===========================================================
   DESIGNER FEEDBACK (round 2): card hover shadow.
   Same lift as the S3 ".wim__card" hover, applied to every card the
   designer listed: body-electric, feel levels, misconceptions,
   practices, how-to rows, and schedule columns/callouts.
   (--shadow-card = 0 12px 20px rgba(26,43,28,0.09).)
=========================================================== */
.page-ozone .freshener__card,
.page-ozone .misc__card,
.page-ozone .practices__card,
.page-ozone .howto__row,
.page-ozone .schedule__col,
.page-ozone .schedule__callout {
  transition: box-shadow 0.2s ease;
}
.page-ozone .freshener__card:hover,
.page-ozone .expect__level:hover,
.page-ozone .misc__card:hover,
.page-ozone .practices__card:hover,
.page-ozone .howto__row:hover,
.page-ozone .schedule__col:hover,
.page-ozone .schedule__callout:hover {
  box-shadow: var(--shadow-card);
}

/* ===========================================================
   PAGE-BOTTOM WAVE.
   The wrapper (.page-wave: full-bleed margins, margin-bottom:-1px to
   tuck against the footer, line-height:0, pointer-events:none) is owned
   by the shared css/site-footer.css, since every page ends with this
   image. We only add what site-footer.css is missing: the SVG must be
   width:100% or it falls back to its intrinsic 300px and the wave looks
   "not full bleed". (Ideally this __svg rule moves into site-footer.css
   so all pages get it.) A little air above the wave, page-specific.
=========================================================== */
.page-ozone .page-wave { margin-top: var(--space-section-y); }
.page-ozone .page-wave__svg {
  display: block;
  width: 100%;
  height: auto;
}
/* The wave is the last child of the final section, so remove that
   section's bottom padding -- otherwise ~80px of white sits between the
   wave and the footer (site-footer.css only overlaps 1px). */
.page-ozone .section-swpg { padding-bottom: 0; }

/* ===========================================================
   VIDEO MODAL
   Not styled here on purpose. site-image-to-video.js builds the
   #video-modal dialog (injecting no CSS), and the new-page template
   loads its matching shared stylesheet css/site-image-to-video.css
   alongside the script. That shared file is the single source of
   truth (full-viewport centering + CSS-drawn close button); a copy
   here would only collide with it via load order.
=========================================================== */