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

   FRAME WIDTHS (per Figma desktop frame 7488:1024)
     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-pulsing. 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 teal accent line in the hero heading;
     self-hosted via @font-face below (already uploaded to /fonts/
     for the Ozone and Silver pages -- no new upload needed).

   HEADING TONES (role names per STANDARDS.md)
     .text-ink    = #4792bc (site blue -- first part of two-tone titles)
     .text-accent = #59afb2 (magnetic pulser teal -- second part)

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

   SECTION INDEX
     1. hero      -- Hero
     2. electric  -- Your Body is Already Magnetic
     3. wim       -- What is Magnetic Pulsing
     4. pulse     -- What to Expect (interactive panel + chart card)
     5. card-scroller / consistency -- Benefits (+ consistency band)
     6. routine   -- Sample Routine
     7. misc      -- Misconceptions
     8. practices -- Other Practices
     9. howto     -- How to Use Magnetic Pulsing
    10. schedule  -- Build Schedule (tabs)
    11. faq       -- FAQs
    12. unit      -- The Unit (MP7)
    13. swpg      -- Tips / Wellness Guide
=========================================================== */

/* -- 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-pulsing {
  /* 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.
     Magnetic Pulsing is the Magnetic Pulser technology, so the teal
     --color-magnetic-pulser is THIS PAGE's accent; the site blue
     --color-water-ozonator remains the heading ink tone. */
  --color-silver-pulser:      #92ca6a; /* green */
  --color-magnetic-pulser:    #59afb2; /* teal -- THIS PAGE's accent */
  --color-water-ozonator:     #4792bc; /* blue -- heading ink tone on this page */
  --color-bio-tuner:          #a194c7; /* purple */
  --color-magnetic-pulser-dark:#268e92; /* darker teal -- chip subtext, selected states */

  /* 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-magnetic-pulser);
  --color-accent-dark: var(--color-magnetic-pulser-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;
  --color-led-pulse: #ff6a30; /* orange Pulse light (Figma 7836:2173) */
  --color-led-fast:  #f5c542; /* yellow Fast-mode charge lights (Brad, Sep 10) */
  --color-btn-stop:  #8c9292; /* Stop Pulsing pill while running (demo MP_animation.html, Oct 2026) */
  --bg-mode-toggle:  #f3eee9; /* in-panel Regular/Fast toggle track (demo) */
  --color-toggle-off:#777777; /* inactive toggle label (demo) */

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

  /* Hero chip icon tints (both blue for WOZ) */
  --chip-tint-accent: rgba(89, 175, 178, 0.3);

  /* Soft card fills */
  --tint-accent-20: rgba(89, 175, 178, 0.2);  /* Nature's Freshener cards (S2) */
  --tint-accent-05: rgba(89, 175, 178, 0.05); /* benefits leading card + strip hairlines (Figma 7623:1438) */
  --tint-accent-soft: rgba(89, 175, 178, 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-pulse:         #f8f4f2;   /* S4 background: warm cream (designer demo) */
  --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);

  /* Section colours promoted to tokens (consistency audit, Oct 2026):
     no inline hex in section rules. */
  --tint-green-light:        #eaf4e7;  /* icon-tile gradient start / feel level 0 */
  --tint-green:              #d4edcc;  /* icon-tile gradient end */
  --tint-azure:              #c4e4f2;  /* icon-tile gradient end */
  --tint-warm:               #ffe8c4;  /* icon-tile gradient end */
  --color-btn-hover:         #555555;  /* site-wide blue-button hover (confirmed by designer) */
  --tint-azure-pale:         #eff9fd;  /* practices body wash */
  --bg-schedule:             #f6fafb;  /* schedule section band */
  --color-error:             #b00020;  /* FAQ load-error text */
}

/* -- SCOPED RESETS ----------------------------------------- */
.page-pulsing a { color: inherit; text-decoration: none; }
.page-pulsing ul { margin: 0; padding: 0; list-style: none; }
.page-pulsing 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-pulsing header { font: inherit; }
/* Standard keyboard focus ring (STANDARDS.md section 3). Component rules
   further down may add their own hover-style cues on top of this. */
.page-pulsing a:focus-visible,
.page-pulsing button:focus-visible,
.page-pulsing input:focus-visible,
.page-pulsing [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

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

/* -- LAYOUT UTILITIES -------------------------------------- */
.page-pulsing .section {
  width: 100%;                       /* full-bleed background */
  padding-block: var(--space-section-y);
}
.page-pulsing .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-pulsing .rule {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--color-rule);
}

/* Reusable script-accent helper (Cream Cake, accent teal). */
.page-pulsing .text-script {
  font-family: 'Cream Cake', 'Brush Script MT', cursive;
  color: var(--color-accent);
  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-pulsing .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-pulsing .hero__inner {
  /* Standard gutters-outside container form (STANDARDS.md section 5): a
     true 1200px column that only loses width once the viewport is
     narrower than 1200 + gutters. Replaces the earlier max-width:1200 +
     (max-width:1264px) gutter switch -- identical geometry at every width
     (headless-Chrome measured, Oct 2026), one fewer breakpoint. */
  box-sizing: border-box;
  max-width: calc(1200px + 2 * var(--space-container));
  margin-inline: auto;
  padding-inline: var(--space-container);
  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 */
}
.page-pulsing .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-pulsing .hero__title {
  margin: 0;
  font-weight: 400;
  color: var(--color-dark);
}
.page-pulsing .hero__title-line {
  display: block;
  font-size: var(--text-heading);
  line-height: 1.08;
}
.page-pulsing .hero__title-script {
  display: block;
  font-family: 'Cream Cake', 'Brush Script MT', cursive;
  color: var(--color-accent);        /* Figma 7488:1054: teal script line */
  font-size: var(--text-script);
  line-height: 0.95;                 /* matched to page-micropulsing (designer feedback,
                                        Sep 2026): a little more air between the lines */
  margin-block: 0.02em;
  position: relative;
  top: -0.075em;                     /* -6px at 80px: the browser's half-leading seats the
                                        script glyphs lower in the 56px box than Figma does,
                                        so the descender tails touched the line below while
                                        extra space sat above (designer, Sep 1). Shifting
                                        the ink up rebalances without changing the heading's
                                        Figma-matched line boxes. */
}

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

/* CTA: label + circular arrow button (anchor for smooth-scroll). */
.page-pulsing .hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.556em;                      /* 10px */
  margin-top: 0.444em;               /* 8px */
}
.page-pulsing .hero__cta-label {
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-pulsing .hero__cta-arrow {
  flex-shrink: 0;
  width: 2.333em;                    /* 42px */
  height: 2.333em;
  border-radius: 50%;
  background: var(--color-accent);   /* MP brand teal (designer, Sep 1) */
  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-pulsing .hero__cta-arrow svg {
  width: 0.889em;                    /* 16px icon */
  height: 0.889em;
  display: block;
}
.page-pulsing .hero__cta:hover .hero__cta-arrow {
  transform: translateY(3px);
  background: var(--color-accent-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-pulsing .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-pulsing .hero__media-img {
  position: absolute;
  top: 15.6%;                        /* MP Figma 7488:1062 inner image: top 15.6%, height
                                        100% of the container -- the photo seats LOW with
                                        clear space above and its bottom 15.6% cropped by
                                        the section edge (designer feedback #1, Sep 3) */
  left: 3.8%;                        /* image container at x23.34 of the 613.34 window */
  height: 100%;
  clip-path: inset(0 0 15.6% 0);     /* clips the photo's own bottom overhang (the box
                                        cannot use overflow:hidden -- the field chip
                                        legitimately overflows the window per Figma) */
  width: auto;
  max-width: none;                   /* natural aspect; bleeds off to the right */
}

/* Floating info chips (desktop). */
.page-pulsing .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-pulsing .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-pulsing .hero__chip-icon--accent { background: var(--chip-tint-accent); } /* Figma 7488:1064 rgba(89,175,178,.3) */
.page-pulsing .hero__chip-icon--azure  { background: var(--hero-grad-3); }                /* Figma 7488:1071 */
.page-pulsing .hero__chip-text {
  display: flex;
  flex-direction: column;
  gap: 0.089em;                      /* ~1.6px (Figma item-spacing) */
}
.page-pulsing .hero__chip-title {
  font-size: 0.667em;                /* 12px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-dark);
}
.page-pulsing .hero__chip-sub {
  font-size: 0.611em;                /* 11px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-accent-dark);
}
/* CALIBRATED AGAINST THE LIVE PHOTO (COMPONENTS.md hotspot rule: the
   deployed mp7_unit_only__hero__pulsing.png is 1661x1252, aspect 1.327,
   vs the Figma-placed 809x655 -- Figma-derived fractions landed the
   chips ON the unit). Feature positions measured on the real file
   (10%-grid overlay, Sep 1): paddle-head right edge x47%, head bottom
   y22%; unit lower-left corner (x6%, y60%). Mapped through the render
   geometry: img left 3.8% of the box, img width = 1.327 x 655 / 613.34
   = 141.7% of the box. LEFT-anchored (the feature-touching edge is the
   chip's left, so the near-touch holds as the window scales).
     field chip: left 3.8% + 47.5% x 141.7% ~ 71%; top = head bottom
                 22% - half chip height ~ 17.5%
     reach chip: left 3.8% + 5% x 141.7% ~ 11%; top ~ 58% (unit corner)
   ANY hero photo re-crop or swap means re-anchoring these. Designer to
   confirm on the live dev page. */
.page-pulsing .hero__chip--fresh  { top: 20.9%; left: 69.7%; right: auto; } /* Figma 7488:1063: y137, x427.34
   of the 655x613.34 window -- valid again now that the photo seats per the
   Figma container (feedback #1); supersedes the 6%/66% tuned against the
   old mis-seated photo */
/* Viewport guard (audit Oct 2026): the chip is ~227px wide (12.611em,
   nowrap) and left-anchored, so between 768 and ~1300 it ran past the
   window edge and was clipped. Cap `left` so its right edge stays 20px
   inside the viewport: 100% (media box) + the space between the media box
   and the viewport edge (the gutter, or the centring margin above 1200)
   - chip width - 20px. Above ~1300 the Figma 69.7% wins unchanged. */
.page-pulsing .hero__chip--fresh {
  left: min(69.7%, calc(100% + max(var(--space-container), (100vw - 1200px) / 2) - 12.611em - 20px));
}
.page-pulsing .hero__chip--output { top: 72.4%; left: 15.9%; right: auto; } /* Figma 7488:1070: y474, x97.34 */

/* ---- Hero: phone (stack; photo full width; chips hidden) ---- */
@media (max-width: 767px) {
  .page-pulsing .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-gap-md);
    padding-top: 50px;               /* clears the sticky nav rhythm */
  }
  .page-pulsing .hero__text {
    flex: 1 1 auto;
    max-width: none;
    padding-block: 0;
  }
  .page-pulsing .hero__media {
    flex: 1 1 auto;
    align-self: stretch;             /* override desktop centring; full width when stacked */
    min-height: 0;
    aspect-ratio: 382 / 328;
  }
  .page-pulsing .hero__media-img {
    inset: 0;
    left: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
  .page-pulsing .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-accent / .c-green.
=========================================================== */
.page-pulsing .sec-stack {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                      /* 30px: heading block -> content */
}
.page-pulsing .sec-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.778em;                      /* ~14px (Figma 10 desktop / 20 mobile) */
}
.page-pulsing .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-pulsing .sec-title { line-height: 1.333; }
}
.page-pulsing .sec-title .text-accent  { color: var(--color-accent); }
.page-pulsing .sec-title .c-green { color: var(--color-water-ozonator); }
.page-pulsing .sec-title .text-ink  { color: var(--color-water-ozonator); }
.page-pulsing .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 MAGNETIC   (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-pulsing .electric__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.111em;                      /* 20px, both axes */
}
.page-pulsing .electric__card {
  background: var(--tint-accent-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-pulsing .electric__card-title {
  margin: 0;
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-pulsing .electric__card-body {
  margin: 0;
  font-size: 1em;                    /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

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

/* ===========================================================
   SECTION 3: WHAT IS MAGNETIC PULSING   (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-pulsing .wim__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.111em;                      /* 20px */
}
.page-pulsing .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-pulsing .wim__card:hover {
  box-shadow: var(--shadow-card);    /* Figma hover: 0 12px 20px rgba(26,43,28,0.09) */
}
.page-pulsing .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-pulsing .wim__icon--green {
  background-image: linear-gradient(135deg, var(--tint-green-light) 0%, var(--tint-green) 100%);
}
.page-pulsing .wim__icon--azure {
  background-image: linear-gradient(135deg, var(--hero-grad-3) 0%, var(--tint-azure) 100%);
}
.page-pulsing .wim__icon--orange {
  background-image: linear-gradient(135deg, var(--hero-grad-2) 0%, var(--tint-warm) 100%);
}
.page-pulsing .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-pulsing .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-pulsing .wim__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 4: WHAT TO EXPECT -- the pulse panel
   (Figma desktop 7488:1118 / panel 7836:1965 / chart 8545:1456)
   Interactive (driven by js/page-pulsing.js, [data-pulse] root):
     - Left sticky card: Hand Paddle photo with a <canvas> ripple
       overlay, an LED strip (green On light + L1-L4 charge lights +
       orange Pulse light with bolt), a status line, an in-panel
       Regular/Fast toggle and a Start/Stop pill (grey while running).
       Updated to the designer demo MP_animation.html (Oct 2026). Engine ported from the designer's demo
       (page-pulsing-animation.html): Regular = one deep pulse every
       3.5 s (big ripples, long flash), Fast = one light tap
       per second (smaller ripples).
     - Right column: two clickable mode cards (Regular / Fast).
       Selecting a card themes it (.is-active) and sets the engine
       mode. Specs and copy are per-card static content.
     - Below both: hairline rule + the Pulse Point Chart card.
   Desktop: two columns, left panel sticky (top 120px). <=1024:
   single column, sticky released. Reduced motion: deliberately not
   consulted -- the animation is user-initiated (see page-pulsing.js).
=========================================================== */
.page-pulsing .section-pulse { background: var(--bg-pulse); }

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

.page-pulsing .pulse__layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 5vw + 4px, 64px);            /* Figma 64 desktop */
}

/* -- Left column: sticky paddle panel ---------------------- */
.page-pulsing .pulse__left {
  flex: 0 0 auto;
  width: 47.33%;                                /* Figma 568 / 1200 */
  max-width: 568px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.25vw + 11px, 50px);        /* Figma 50 below-card gap */
  align-self: flex-start;                       /* allow sticky to release from top */
  position: sticky;
  top: 120px;                                   /* fixed-menu clearance */
}
.page-pulsing .pulse__panel {
  background: var(--color-white);
  border-radius: 32px;
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw + 12px, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.111em;                                 /* 20px */
}

/* Stage: the paddle photo + canvas ripple overlay. Full panel width
   (demo) so the Regular ripples spread across the card; the canvas
   is sized to the stage in JS. Ripples radiate from the paddle-head
   centre: x = stage centre, y = CY in the JS (83px = photo top 20 +
   head centre 63 at the 140px photo width below). */
.page-pulsing .pulse__stage {
  position: relative;
  width: 100%;
  height: 340px;
}
.page-pulsing .pulse__stage-inner {
  position: absolute;
  inset: 0;
  /* (the demo's JS "thump" translateY was removed -- Brad, Oct 9 2026 --
     so no will-change hint is needed; the stage stays still) */
}
.page-pulsing .pulse__paddle {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 140px;                                 /* demo; px: pairs with CY in the JS */
  height: auto;                                 /* raster photo (not SVG) */
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.page-pulsing .pulse__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* -- LED strip ---------------------------------------------- */
.page-pulsing .pulse__leds {
  display: flex;
  gap: 1.111em;                                 /* 20px */
  align-items: flex-start;
  justify-content: center;
  background: var(--bg-pulse);
  border-radius: var(--radius-pill);
  padding: 0.556em 1.111em;                     /* 10px 20px */
}
.page-pulsing .pulse__led {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-pulsing .pulse__led-dot {
  width: 20px;                                  /* px: matched pair with glow radii */
  height: 20px;
  border-radius: 50%;
  background: var(--color-gray-nurse);          /* off state */
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.page-pulsing .pulse__led.is-on .pulse__led-dot {
  background: var(--color-silver-pulser);       /* charge-light green (Figma #92ca6a) */
  box-shadow: 0 0 10px rgba(146, 202, 106, 0.75);
}
/* Fast mode: CHARGE lights are YELLOW (Brad, Sep 10); the Pulse light
   stays orange (:not() keeps this rule from out-ranking it). The class
   is set by page-pulsing.js on the [data-pulse] root when Fast is
   selected. */
.page-pulsing .is-fast-mode .pulse__led.is-on:not(.pulse__led--pulse):not(.pulse__led--on) .pulse__led-dot {
  background: var(--color-led-fast);
  box-shadow: 0 0 10px rgba(245, 197, 66, 0.8);
}
.page-pulsing .pulse__led--pulse.is-on .pulse__led-dot {
  background: var(--color-led-pulse);
  box-shadow: 0 0 12px rgba(255, 106, 48, 0.8);
}
/* Bolt under the Pulse light (demo; replaces the "Pulse" label).
   Box height matches the label line (30px) so the dots stay level. */
.page-pulsing .pulse__led-bolt {
  font-size: 1.667em;                           /* 30px box */
  height: 1em;
  padding: 0.233em 0;                           /* 7px: ~16px glyph in the 30px line */
  box-sizing: border-box;
  color: var(--color-dark);
}
.page-pulsing .pulse__led-label {
  font-size: 1em;                               /* 18px */
  line-height: 1.667;                           /* 30px */
  color: var(--color-dark);
}

/* -- Status + Start ----------------------------------------- */
.page-pulsing .pulse__status {
  margin: 0;
  font-size: 0.833em;                           /* 15px */
  line-height: 1.2;
  text-align: center;
  color: var(--color-dark);
  min-height: 1.2em;                            /* keep height while text swaps */
}
.page-pulsing .pulse__cta {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 1em;                               /* 18px */
  font-weight: 900;
  line-height: 1.5;                             /* 27px */
  letter-spacing: 0.1em;                        /* 1.8px */
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.333em 1.111em 0.222em;             /* 6 / 20 / 4: centres the CAP ink (uppercase, no descenders). Measured: symmetric 5/5 rendered ink 11px above / 13 below; 6/4 lands 12/12 (feedback #2 round two, Sep 3) */
  transition: background-color 0.2s ease;
}
.page-pulsing .pulse__cta:hover { background: var(--color-btn-hover); }
.page-pulsing .pulse__cta.is-running { background: var(--color-btn-stop); }
.page-pulsing .pulse__cta.is-running:hover { background: var(--color-btn-hover); }

/* -- In-panel Regular/Fast toggle (demo, Oct 2026) ----------- */
.page-pulsing .pulse__toggle-label {
  margin: 0 0 -0.5em;                           /* -6px: 14px to the toggle (demo) */
  font-size: 0.667em;                           /* 12px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.page-pulsing .pulse__toggle {
  display: flex;
  gap: 0.333em;                                 /* 6px */
  padding: 0.333em;                             /* 6px */
  background: var(--bg-mode-toggle);
  border-radius: var(--radius-pill);
}
.page-pulsing .pulse__toggle-btn {
  font-size: 0.778em;                           /* 14px -- own em anchor below */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.071em;                      /* 1px */
  text-transform: uppercase;
  color: var(--color-toggle-off);
  border-radius: var(--radius-pill);
  padding: 0.686em 1.571em 0.457em;             /* 9.6 / 22 / 6.4: 60/40 cap-optical split of 8+8 */
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-pulsing .pulse__toggle-btn.is-active {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

/* Reassurance note under the card */
.page-pulsing .pulse__note {
  margin: 0;
  font-size: 1em;                               /* 18px */
  line-height: 1.667;                           /* 30px */
  text-align: center;
  color: var(--color-dark);
}

/* -- Right column: mode cards -------------------------------- */
.page-pulsing .pulse__modes {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.111em;                                 /* 20px */
}
.page-pulsing .pulse__mode {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: 0 1px 1.5px rgba(26, 43, 28, 0.05);
  padding: 1.156em 1.378em;                     /* 20.8px 24.8px */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.page-pulsing .pulse__mode.is-active {
  background: var(--tint-accent-soft);
  border-color: var(--color-accent-dark);
  box-shadow: none;
}
.page-pulsing .pulse__mode-head {
  display: flex;
  flex-direction: column;
  gap: 0.556em;                                 /* 10px */
}
.page-pulsing .pulse__mode-badge {
  align-self: flex-start;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 1em;                               /* 18px */
  font-weight: 700;
  line-height: 1.389;                           /* 25px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.333em 1.111em 0.222em;             /* 6 / 20 / 4: uppercase-only pill, so the
                                                   bottom padding gives back part of the
                                                   line box's descender reservation and the
                                                   CAP ink centres (Brad, Sep 9). Matches
                                                   the accepted Start Pulsing treatment.
                                                   Platform note: Linux headless scans this
                                                   ~1px low; Windows rendering (the
                                                   acceptance surface) seats glyphs higher
                                                   -- do not "fix" from a Linux scan. */
}
.page-pulsing .pulse__mode.is-active .pulse__mode-badge {
  background: var(--color-accent-dark);
}
.page-pulsing .pulse__mode-title {
  margin: 0;
  font-size: var(--text-subheading);            /* 22px */
  line-height: 1.364;                           /* 30px */
  font-weight: 700;
  color: var(--color-dark);
}
.page-pulsing .pulse__mode-sub {
  margin: -0.556em 0 0;                         /* cancels the column gap above: Figma
                                                   (7836:2118) sets title+sub as one tight
                                                   block (0 gap), then 10px to the specs */
  font-size: 1em;                               /* 18px */
  line-height: 1.667;
  color: var(--color-dark);
}
.page-pulsing .pulse__specs {
  display: flex;
  flex-direction: column;
  gap: 0.278em;                                 /* 5px between pills (Figma) */
}
.page-pulsing .pulse__spec {
  margin: 0;                                    /* <p> pills: the UA's 1em block margins
                                                   added 36px per pill on top of the flex
                                                   gap -- +216px of card height */
  display: flex;
  gap: 0.556em;
  align-items: center;
  background: var(--tint-accent-soft);
  border-radius: 20px;
  padding: 0.278em 1.111em;                     /* 5px 20px */
  font-size: 1em;
  line-height: 1.667;                           /* 30px */
  color: var(--color-dark);
}
.page-pulsing .pulse__mode.is-active .pulse__spec {
  background: rgba(255, 255, 255, 0.7);         /* Figma selected-state chips */
}
.page-pulsing .pulse__spec-label { flex: 1 1 0; min-width: 0; }
.page-pulsing .pulse__spec-value {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  font-weight: 700;
}
.page-pulsing .pulse__spec-value--accent { color: var(--color-accent-dark); }

/* "What to expect:" chip -- block variant of the spec pill */
.page-pulsing .pulse__spec--block {
  display: block;
}
.page-pulsing .pulse__spec-strong {
  display: block;
  font-weight: 700;
}

/* -- Divider + Pulse Point Chart card ------------------------ */
.page-pulsing .pulse__chart {
  /* Figma 8545:1569: the outer card is INVISIBLE -- no fill, no shadow;
     the 40px inset is just spacing on the section background. The white
     rounded tile belongs to the THUMBNAIL (the rx14 white rect in the
     Figma icon asset -- reproduced in CSS below, not in the sprite). */
  padding-block: clamp(20px, 2.5vw + 10px, 40px);
  display: flex;
  align-items: center;
  gap: 1.111em;                                 /* 20px (Figma text col at x130 = 110 + 20) */
}
.page-pulsing .pulse__chart-thumb {
  /* Two-tone sprite symbol (ico-mp-chart): body silhouette =
     currentColor (set here), pulse points = fixed brand teal.
     Explicit both-dimensions override .icon's 1em square. The white
     rounded tile from the Figma asset (rect rx14) is drawn here so the
     symbol stays surface-agnostic. */
  flex: 0 0 auto;
  width: 110px;                                 /* Figma 110x140 */
  height: 140px;
  color: var(--border-card);                    /* #d4d4d4 silhouette */
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.page-pulsing .pulse__chart-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.444em;                                 /* 8px */
  align-items: flex-start;
}
.page-pulsing .pulse__chart-title {
  margin: 0;
  font-size: clamp(22px, 1vw + 18px, 30px);     /* 30 -> 22 */
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-dark);
}
.page-pulsing .pulse__chart-copy {
  margin: 0;
  font-size: 1em;                               /* 18px -- was 16 per the Figma card,
                                                   but reviewers flagged it as smaller
                                                   than the body text elsewhere (Sep 24) */
  line-height: 1.667;                           /* 30px */
  color: var(--color-dark);
}
.page-pulsing .pulse__chart-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 0.333em;
  padding: 0.333em 1.111em 0.222em;             /* 6 / 20 / 4 cap-optical centring (see pulse__cta note) */
  background: var(--color-water-ozonator);      /* Figma 8545:1599: #4792bc */
  border-radius: var(--radius-pill);
  font-size: 1em;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: background-color 0.2s ease;
}
.page-pulsing .pulse__chart-cta:hover { background: var(--color-btn-hover); }

/* -- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  /* single column; the panel scrolls away normally (sticky released) */
  .page-pulsing .pulse__layout { flex-direction: column; }
  .page-pulsing .pulse__left {
    position: static;
    width: 100%;
    max-width: none;
    align-items: center;
  }
  .page-pulsing .pulse__panel { width: 100%; box-sizing: border-box; }
  .page-pulsing .pulse__modes { width: 100%; }
}
@media (max-width: 767px) {
  .page-pulsing .pulse__chart { flex-direction: column; text-align: center; }
  .page-pulsing .pulse__chart-text { align-items: center; }
  .page-pulsing .pulse__chart-copy { text-align: center; }
  .page-pulsing .pulse__spec {
    font-size: 0.889em;                         /* keep label + value on one line on phones */
  }
}


/* ===========================================================
   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-pulsing .card-scroller {
  --cs-accent:      var(--color-accent-dark); /* #268e92 bar/dot/desc (Figma 7623:1444) */
  --cs-active-tint: var(--tint-accent-05);    /* leading card: rgba(89,175,178,.05)
                                                 (Figma 7623:1438; the pale-blue #eff6fa
                                                 was the ozone value -- feedback #4) */
  --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-pulsing [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-pulsing .consistency {
  margin-top: 4.444em;                       /* 80px gap from the benefits scroller (Figma 7073:2411) */
  background: var(--tint-accent-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-pulsing .consistency__text {
  display: flex;
  flex-direction: column;
  gap: 0.967em;                              /* ~17.4px */
}
.page-pulsing .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-pulsing .consistency__body {
  font-size: 1em;                            /* 18px */
  line-height: 1.667;                        /* 30/18 */
  color: var(--color-dark);
}
.page-pulsing .consistency__body p { margin: 0; }

.page-pulsing .consistency__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.667em;                              /* 30px */
  margin-top: 0.811em;                       /* ~14.6px */
}
.page-pulsing .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-pulsing .consistency__stat-value {
  font-weight: 700;
  font-size: 1.222em;                        /* 22px */
  line-height: 1.364;                        /* 30/22 */
  color: var(--color-dark);
}
.page-pulsing .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-pulsing .consistency__stat-value--symbol {
  font-size: 1.667em;                        /* 30px */
  line-height: 1;
}

@media (max-width: 767px) {
  .page-pulsing .consistency { padding: 1.667em 1.333em; } /* 30/24 */
  /* Centre the heading + body when the band stacks (designer, Jul 31). */
  .page-pulsing .consistency__text { text-align: center; }
  .page-pulsing .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-pulsing .consistency__stats {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.556em;                                /* 10px */
  }
  .page-pulsing .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-pulsing .section-routine {
  position: relative;
  padding-block: 0;                          /* height driven by the text */
  background-color: var(--color-white);                 /* 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-pulsing .section-routine .container {
  max-width: 1640px;
  padding-inline: 0;
}
.page-pulsing .routine {
  position: relative;
}

/* Woman cutout: left-bleed column ending at 45.4% of the wrapper
   (54.6%, as on the other technology pages; was 55.2%). */
.page-pulsing .routine__media {
  position: absolute;
  top: 0;                                     /* fill the full section height */
  bottom: 0;
  left: calc(50% - 50vw);                     /* ALWAYS full-bleed to the viewport's left
                                                 edge, at every width (designer, Oct 2026 --
                                                 page-tuning approach): the photo is pinned to
                                                 that edge and moves left, relative to the
                                                 text, as the page widens */
  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 */
  container-type: size;                      /* cqw for the photo below */
  overflow: hidden;                          /* clip at the column edge; nothing runs under
                                                the text */
}
/* Photo geometry (designer, Oct 2026; same method as page-tuning). Base =
   Figma 7488:1212's crop: the source photo is 1263px wide at frame scale
   (171.79% of the 735px column) with its left 14.7% (185.7px) off-screen;
   the column edge sits at 72.9% of the photo, hiding her legs on the right.
   The photo is a transparent cutout seated on the section FLOOR.
     - FULL SIZE (1263px) whenever the section is tall enough for it
       (1263px wide = 1084px tall, the Figma section height).
     - Otherwise the photo shrinks WITH THE SECTION HEIGHT (cqh), so she
       always fills the column top to bottom as the cover-crop did; the
       narrowing column then trims her right side (the paddle arm first,
       legs are already off-frame). Width/height = 1920/1648 = 1.165, so
           width = 116.5cqh  -> min(1263px, 116.5cqh).
       The left crop stays a constant 14.7% at every size. */
.page-pulsing .routine__img {
  --routine-photo-w: min(1263px, 116.5cqh);
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(var(--routine-photo-w) * -0.147);
  width: var(--routine-photo-w);
  height: auto;
  max-width: none;
}

/* 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-pulsing .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__pulsing.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-pulsing .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-pulsing .routine__timeline {
  list-style: none;                          /* it's an <ol>; the page reset only
                                                covers ul -- without this the UA's
                                                40px padding-left pushed the whole
                                                timeline off the Figma column edge */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.667em;                              /* 30px between steps */
}
.page-pulsing .routine__step {
  display: flex;
  gap: 1.667em;                              /* 30px: when-group -> body */
  align-items: flex-start;
}
.page-pulsing .routine__when {
  display: flex;
  align-items: center;
  justify-content: space-between;            /* MP Figma 7488:1221: time text at the
                                                COLUMN'S LEFT EDGE (x0, 50px from the
                                                photo), badge at the fixed right end
                                                (x182). NOT the ozone right-packed
                                                cluster -- that left a ~120px visual
                                                gap between photo and first text. */
  gap: 1.667em;                              /* 30px minimum time -> badge */
  flex: 0 0 auto;
  width: 10.167em;                           /* 183px fixed when-column (Figma) */
}
.page-pulsing .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-pulsing .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-pulsing .routine__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                              /* 10px */
}
.page-pulsing .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-pulsing .routine__step-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.222em;                        /* 22px */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-pulsing .routine__step-text {
  margin: 0;
  font-weight: 400;
  font-size: 1em;                            /* 18px */
  line-height: 1.667;
  color: var(--color-dark);
}


/* Mobile (Figma 7302:9973): no woman -- blurred layer full width + solid,
   text centred over it. */
@media (max-width: 1024px) {
  .page-pulsing .routine__media { display: none; }
  .page-pulsing .routine::before {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-right: 0;
    transform: translateX(-50%);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .page-pulsing .routine__text {
    margin-left: 0;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-container);
  }
  .page-pulsing .routine__time       { font-size: 1em; }      /* 18px */
  .page-pulsing .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-pulsing .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-pulsing .routine__time { min-width: 4.5em; }
  .page-pulsing .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-pulsing .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-pulsing .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-pulsing .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-pulsing .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-20);      /* Figma 7488:1278 reality: rgba(89,175,178,.2) */
}

/* Shared eyebrow (MYTH blue, REALITY dark). */
.page-pulsing .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-pulsing .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-pulsing .misc__label--reality {
  color: var(--color-dark);
  font-size: 1em;                    /* 18px */
  line-height: 1.389;                /* 25px */
}

.page-pulsing .misc__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-btn);        /* 22px */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-pulsing .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-pulsing .misc__link {
  color: var(--color-water-ozonator);
  font-weight: 700;
  text-decoration: underline;
}

/* Underlined bold in-copy links (routine step 3 + how-to step 3
   "Pulse Point(s) Charts" -- Figma renders them as underlined body
   text, currentColor). */
.page-pulsing .routine__link,
.page-pulsing .howto__link {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .page-pulsing .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-pulsing .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-pulsing .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-pulsing .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-pulsing .practices__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: var(--tint-azure-pale);           /* pale blue, full-bleed, below wave only */
}

/* Card row. */
.page-pulsing .practices__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.889em;                       /* 16px */
  align-items: stretch;               /* equal-height cards */
}
.page-pulsing .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-pulsing .practices__card--featured {
  position: relative;                 /* anchor the badge */
  background: var(--tint-accent-soft);
  border-color: var(--color-accent);          /* Figma 7488:1296: #59afb2 */
  box-shadow: 0 4px 10px rgba(26, 43, 28, 0.07);
}
.page-pulsing .practices__badge {
  position: absolute;
  top: -0.833em;                      /* -12.5px (relative to this 15px element) */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.24em 0.8em 0.16em;       /* 3.6 / 12 / 2.4: uppercase pill -- vertical
                                         padding split 60/40 top/bottom, the same
                                         cap-optical rule as the CTA/badge pills
                                         (6/4 at 18px); scales with this 15px font */
  background: var(--color-accent);   /* Figma 7488:1312: #59afb2 "This one" pill */
  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-pulsing .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-pulsing .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-pulsing .practices__meta {
  margin: 0;
  font-size: 0.833em;                 /* 15px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-accent-dark); /* fern green #4a8b3f */
}

/* Check list. */
.page-pulsing .practices__checks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.333em;                       /* 6px */
  padding-top: 0.444em;               /* 8px lift (Figma) */
}
.page-pulsing .practices__check {
  margin: 0;
  margin-inline: -1.1em;              /* Figma 7488:1304/1308: the check rows are
                                         nowrap text layers that SPILL over the card's
                                         20.8px side padding (Figma does not clip or
                                         wrap hug-width text). This widens the row by
                                         ~33px to reproduce that one-line look at the
                                         design width -- but unlike Figma's nowrap, a
                                         longer label still wraps safely (page-silver
                                         convention) instead of overflowing the card. */
  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-pulsing .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-accent-dark);
}
.page-pulsing .practices__check-text {
  font-size: 0.833em;                 /* 15px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-dark);
}

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

/* ===========================================================
   SECTION 9: HOW TO USE MAGNETIC PULSING   (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-pulsing .section-howto { background: var(--bg-cream); }
.page-pulsing .section-howto .sec-stack {
  gap: clamp(30px, 2.5vw + 20px, 50px);  /* 30 / 50 */
}

.page-pulsing .howto__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                       /* 10px between rows */
}
.page-pulsing .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-pulsing .howto__media {
  flex: 0 0 13.889em;                 /* 250px */
  width: 13.889em;
}
.page-pulsing .howto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* fill, no distortion */
}
.page-pulsing .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-pulsing .howto__step-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-pulsing .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-pulsing .howto__row {
    flex-direction: column;
    min-height: 0;
  }
  .page-pulsing .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-pulsing .wave-divider { line-height: 0; }
.page-pulsing .wave-divider__img { display: block; width: 100%; height: auto; }
.page-pulsing .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-pulsing .section-schedule { background: var(--bg-schedule); } /* The teal divider PNG
   (divider_wave_teal_white_bottom.png) is a TRANSPARENT-TOP asset built
   to sit on WHITE: above its crest it carries a faint teal wash --
   rgba(80,158,177) at alpha 13/255 (sampled from the real PNG bytes,
   Sep 1) -- which over white renders #F6FAFB, i.e. the wash IS the
   section tint. So: the schedule section and the beige divider's panel
   use the literal composited value #F6FAFB, and the teal divider's own
   panel stays WHITE (its below-crest "white" is only 89% alpha, so a
   tinted panel would also seam against the white FAQ section below).
   The blue-5% rgba it replaces differed by 1/255 -- kept literal so the
   three sites can never drift apart. */
.page-pulsing .section-schedule .sec-stack {
  gap: clamp(32px, 1.5vw + 26px, 44px);   /* heading block -> card (Figma ~44) */
}

/* Card */
.page-pulsing .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-pulsing .section-schedule .schedule__weeks { overflow: visible; }
  .page-pulsing .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: 31px;     /* card inner corner: 32px outer - 1px border;
                                         px so the arc matches the border exactly */
    border-top-right-radius: 31px;
  }
  /* Round the CORNER TABS directly: with the wrapper's overflow visible
     here, the first/last tab's active tint paints square over the
     tablist's rounded corners (Week 1 / Week 6 feedback, Sep 2026). */
  /* px, not em: the tab's own 20px font-size made 1.778em resolve to
     35.6px and the tint arc poked past the card's border curve. The
     card corner is 32px with a 1px border, so the inner arc is 31px. */
  .page-pulsing .schedule__tab:first-child { border-top-left-radius: 31px; }
  .page-pulsing .schedule__tab:last-child { border-top-right-radius: 31px; }
  .page-pulsing .schedule__panel {
    border-bottom-left-radius: 1.778em;
    border-bottom-right-radius: 1.778em;
  }
}

/* Tab bar */
.page-pulsing .schedule__tablist {
  display: flex;
  border-bottom: 1px solid var(--border-card);
}
.page-pulsing .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-pulsing .schedule__tab.is-active {
  background: var(--tint-accent-20);        /* Figma 9113:3498: 0.2 tint on the active tab */
  border-bottom-color: var(--color-accent-dark);  /* WOZ dark blue */
}

/* Panel */
.page-pulsing .schedule__panel {
  padding: 2.222em clamp(20px, 5vw, 80px) 2.267em;  /* 40 / ~80 / 40.8 */
}
.page-pulsing .schedule__panel[hidden] { display: none; }
.page-pulsing .schedule__cols {
  display: flex;
  gap: 1.556em;                       /* 28px */
  align-items: stretch;
}
.page-pulsing .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-pulsing .schedule__col-head {
  display: flex;
  align-items: center;
  gap: 0.444em;                       /* 8px */
  padding-bottom: 0.778em;            /* 14px */
}
.page-pulsing .schedule__col-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.591;                 /* 35px */
  color: var(--color-dark);
}
.page-pulsing .schedule__pill {
  display: inline-flex;
  padding: 0.36em 1em 0.24em;         /* 3.6 / 10 / 2.4: uppercase pill -- 60/40
                                         vertical split (cap-optical rule, see
                                         pulse__cta note); relative to 10px */
  background: var(--tint-accent-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-accent-dark); /* was Everglade green (micropulsing leftover) */
}

/* Bullet lists */
.page-pulsing .schedule__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-pulsing .schedule__item {
  display: flex;
  gap: 0.556em;                       /* 10px */
  padding-block: 0.556em;             /* ~10px */
  border-bottom: 1px solid var(--color-gray-nurse);  /* #e2e8e3 */
}
.page-pulsing .schedule__item:last-child { border-bottom: 0; }
.page-pulsing .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-accent-dark);
  border-radius: 2.5px;
}
.page-pulsing .schedule__item-text {
  font-size: 1em;                     /* 18px */
  line-height: 1.667;                 /* 30px */
  color: var(--color-dark);
}
.page-pulsing .schedule__item-text strong { font-weight: 700; }
.page-pulsing .schedule__link {
  color: inherit;                     /* Figma 7589:1458: callout links underline in the
                                         body dark, not the accent; bold comes from the
                                         surrounding <strong> where the design bolds it */
  text-decoration: underline;
}

/* "Important" callout (left column) */
.page-pulsing .schedule__callout {
  margin-top: 1.667em;                /* 30px gap from the list */
  padding: 1em 1.222em 1em 1.444em;   /* 18 / 22 / 18 / 26 */
  background: var(--tint-accent-soft); /* rgba(89,175,178,.1) -- Figma 7589:1455 (feedback #6) */
  border-left: 4px solid var(--color-accent);         /* #59afb2 (Figma 7589:1455) */
  border-radius: 0.889em;             /* 16px */
}
.page-pulsing .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-pulsing .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-pulsing .wave-divider--beige { background: var(--bg-schedule); }      /* above S10; beige PNG bottom is alpha-0 -> panel shows through; matches the schedule bg (see section-schedule) */
.page-pulsing .wave-divider--blue-white { background: var(--bg-schedule); } /* below S10: matches the schedule bg; the blue wave PNG carries the white for the FAQ side */
.page-pulsing .wave-divider--teal-white { background: var(--color-white); } /* above S11 (Figma 7488:1358
   "Green wave"): WHITE, not the schedule tint -- the PNG's own 5%-alpha
   teal wash over white reproduces the schedule colour above the crest
   (#F6FAFB), and its below-crest white is 89% alpha so white must show
   through toward the white FAQ section (see section-schedule note). */

@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-pulsing .schedule__tab {
    font-size: 0.722em;               /* 13px */
    padding-inline: 0.3em;            /* tight; flex:1 keeps equal widths */
  }
  .page-pulsing .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-pulsing .faq__container {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                       /* ~30px between header and body */
}
.page-pulsing .faq__title {
  margin: 0;
  text-align: left;
}
.page-pulsing .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-pulsing .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-pulsing .faq__title { grid-area: title; align-self: end; }
.page-pulsing .faq__media { grid-area: media; }
.page-pulsing .faq__list  { grid-area: list; align-self: start; }

.page-pulsing .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-pulsing .faq__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

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

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

/* Toggle button (the whole question row is clickable). */
.page-pulsing .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-pulsing .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-pulsing .faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.667em;                     /* 30px */
  height: 1.667em;
}
.page-pulsing .faq__icon::before,
.page-pulsing .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-accent-dark);
  border-radius: 1px;
  transition: transform 0.2s;
}
.page-pulsing .faq__icon::before {
  width: 0.889em;                     /* 16px horizontal bar */
  height: 0.139em;                    /* ~2.5px */
  transform: translate(-50%, -50%);
}
.page-pulsing .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-pulsing .faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Answer panel (HTML injected by site-faqs.js) */
.page-pulsing .faq__answer {
  /* Sides only -- NO bottom padding. site-reveal.js animates the
     region's height (content-box), and padding sits OUTSIDE that
     animation: a padding-bottom left a ~20px strip of the first line
     visible after the close animation finished, until [hidden]
     flipped at transitionend -- the "pauses at the last line, then
     snaps" close (designer feedback, Sep 2026; first fixed on the
     product pages). The bottom spacing is supplied by the ::after
     spacer below, which lives INSIDE the content box and therefore
     collapses with the animation. */
  padding: 0 1.111em;                 /* 20px sides; flush under question */
  font-size: 1em;                     /* 18px */
  font-weight: 400;
  line-height: 1.667;                 /* 30px */
  color: var(--color-dark);
}
.page-pulsing .faq__answer[hidden] { display: none; }
/* In-flow bottom spacer replacing the old padding-bottom (see the
   comment on .faq__answer). A block ::after is inside the region's
   content box, so scrollHeight measures it and the height animation
   clips it -- unlike padding, and unlike a last-child margin, which
   would collapse out of the region at rest and be missed by the
   collapse measurement. */
.page-pulsing .faq__answer::after {
  content: '';
  display: block;
  height: 1.111em; /* 20px */
}
.page-pulsing .faq__answer p { margin-bottom: 0.667em; }
.page-pulsing .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-pulsing .faq__answer.is-loading { opacity: 0.6; }
.page-pulsing .faq__answer.is-error { color: var(--color-error); }

/* "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--primary.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-pulsing .faq__cta-wrap { display: flex; justify-content: center; }
.page-pulsing .faq__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.333em 1.111em 0.222em;   /* 6 / 20 / 4 cap-optical centring (see pulse__cta note) */
  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-pulsing .faq__cta:hover { background: var(--color-btn-hover); }

@media (max-width: 767px) {
  /* Single column on phone: heading above the picture above the list
     (ozone layout, designer feedback Jul 31). */
  .page-pulsing .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-pulsing .faq__title { text-align: center; }
  .page-pulsing .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-pulsing .faq__media img {
    position: absolute;
    inset: 0;
  }
}


/* ===========================================================
   SECTION 12: THE MP7 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-pulsing .section-unit {
  background: var(--tint-accent-20);
  overflow: hidden;                   /* the unit photo spills right past the container
                                         (Figma 998px against the 600 half); clip at the
                                         section like the hero does */
}

.page-pulsing .unit__wrap {
  display: grid;
  align-items: center;
  column-gap: 2.778em;                /* 50px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Figma 7488:1415: equal 600/600
                                                           halves (the 506 cap shrank the
                                                           media half -- feedback #7) */
}

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

.page-pulsing .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-pulsing .unit__lead strong { font-weight: 700; }

/* Feature chips */
.page-pulsing .unit__chips {
  display: flex;
  gap: 0.778em;                       /* 14px */
  padding-block: 0.333em;             /* small breathing room (Figma py-20 incl. gap) */
}
.page-pulsing .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-pulsing .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-pulsing .unit__chip-icon .icon {
  font-size: 1.222em;                 /* 22px -- icon size; was hardcoded on the inline svg */
  display: block;
}
.page-pulsing .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-pulsing .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.333em 1.111em 0.222em;   /* 6 / 20 / 4 cap-optical centring (see pulse__cta note) */
  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-pulsing .unit__cta:hover { background: var(--color-btn-hover); }

/* Product shot -- sits on the green panel (transparent PNG) */
.page-pulsing .unit__media {
  align-self: center;
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 617;            /* Figma 7488:1434: media half 600x617; the abs photo
                                         (166% wide, centered) then crops only ~8px top and
                                         bottom, like the Figma window */
}
.page-pulsing .unit__img {
  /* Figma 7488:1436: the photo renders 998x633 against the 600px right
     half (x609, y-8) -- 166% of the half's width, spilling right toward
     the viewport edge (the section clips). The previous 506px cap made
     the unit look half-size (designer feedback #7, Sep 3). */
  display: block;
  position: absolute;
  left: 1.5%;                         /* Figma x9 of the 600 half */
  top: 50%;
  transform: translateY(-50%);
  width: 166%;                        /* 998 / 600 */
  max-width: none;
  height: auto;
}

@media (max-width: 1024px) {
  .page-pulsing .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-pulsing .unit__content { display: contents; }
  .page-pulsing .unit__title { order: 1; }
  .page-pulsing .unit__media { order: 2; align-self: auto; }
  .page-pulsing .unit__lead  { order: 3; }
  .page-pulsing .unit__chips { order: 4; flex-direction: column; width: 100%; }
  .page-pulsing .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-pulsing .swpg__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.778em;                       /* 50px (heading block -> body) */
}
.page-pulsing .swpg__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.667em;                       /* 30px (title -> lead) */
  text-align: center;
  width: 100%;
}
.page-pulsing .swpg__title { margin: 0; }
.page-pulsing .swpg__subhead {
  max-width: 50em;                    /* keep the lead to a readable measure */
  margin-inline: auto;
}

/* Two-column body */
.page-pulsing .swpg__body {
  display: grid;
  align-items: center;
  column-gap: 2.778em;                /* 50px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 653px);
  width: 100%;
}
.page-pulsing .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-pulsing .swpg__list-block {
  display: flex;
  flex-direction: column;
  gap: 0.778em;                       /* 14px (title -> list) */
  width: 100%;
}

/* Blue circle-check checklist */
.page-pulsing .check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                       /* 10px */
  width: 100%;
}
.page-pulsing .check-list__item {
  display: flex;
  align-items: center;
  gap: 1.667em;                       /* 30px (icon -> label) */
}
.page-pulsing .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-pulsing .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-pulsing .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.333em 1.111em 0.222em;   /* 6 / 20 / 4 cap-optical centring (see pulse__cta note) */
  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-pulsing .swpg__cta:hover { background: var(--color-btn-hover); }

/* Framed video preview */
.page-pulsing .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-pulsing.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-pulsing .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-pulsing .swpg__left { display: contents; }
  .page-pulsing .swpg__list-block { order: 1; width: 100%; }
  .page-pulsing .swpg__preview { order: 2; }
  .page-pulsing .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-pulsing .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-pulsing .electric__card,
.page-pulsing .misc__card,
.page-pulsing .practices__card,
.page-pulsing .howto__row,
.page-pulsing .schedule__col,
.page-pulsing .schedule__callout {
  transition: box-shadow 0.2s ease;
}
.page-pulsing .electric__card:hover,
.page-pulsing .pulse__level:hover,
.page-pulsing .misc__card:hover,
.page-pulsing .practices__card:hover,
.page-pulsing .howto__row:hover,
.page-pulsing .schedule__col:hover,
.page-pulsing .schedule__callout:hover {
  box-shadow: var(--shadow-card);
}

/* ===========================================================
   PAGE-BOTTOM WAVE.
   The wrapper (.page-wave) and the image rule (.page-wave__img) are owned
   by the shared css/site-footer.css. This page only adds a little air
   above the wave, page-specific.
=========================================================== */
.page-pulsing .page-wave { margin-top: var(--space-section-y); }
/* 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-pulsing .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.
=========================================================== */