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

   FRAME WIDTHS (per FIGMA_HANDOFF.md, confirmed with the user)
     Desktop: 1280px  (content 1220 + 30px gutter each side)
     Mobile:  400px   (content 380  + 10px gutter each side)
     Section backgrounds are full-bleed at any viewport width.

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-silver. 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 green accent words in headings; it is
     NOT a CMS font, so it is self-hosted via @font-face below. Upload
     the web-font files to /fonts/ (see the @font-face block) or the
     accent words fall back to a generic cursive.

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

   SECTION INDEX
     1. Hero
     2. Centuries (bodyel block)
     3. What is Ionic~Colloidal Silver
     4. What to Expect When You Brew It
     5. Benefits (+ consistency)
     6. Routine
     7. Misconceptions
     8. Other Practices
     9. How to Make Ionic~Colloidal Silver
    10. Schedule (tabs)
    11. FAQs
    12. Silver Pulser unit
    13. 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-silver {
  /* 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. */
  --text-heading:     clamp(30px, 3vw + 18px, 54px); /* Hero H1 Roboto lines 30 -> 54 */
  --text-script:      clamp(50px, 3.75vw + 35px, 80px); /* Hero "working quietly" 50 -> 80 */
  --text-subheading:  clamp(20px, 0.5vw + 18px, 24px); /* TBD: section intro; refine per section */
  --text-body:        clamp(16px, 0.25vw + 15px, 18px); /* TBD */
  --text-lead:        1.111em;  /* 20px hero/section lead paragraph */
  --text-subtitle:    clamp(14px, 0.25vw + 13px, 16px); /* TBD 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 (confirmed S2) */
  --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.
     Ionic~Colloidal Silver is the Silver Pulser technology, so the green
     --color-silver-pulser is this page's accent. */
  --color-silver-pulser:      #92ca6a; /* green -- THIS PAGE's accent */
  --color-magnetic-pulser:    #59afb2; /* teal */
  --color-water-ozonator:     #4792bc; /* blue -- site primary */
  --color-bio-tuner:          #a194c7; /* purple */
  --color-silver-pulser-dark: #4a8b3f; /* darker green -- chip subtext */

  /* Page-accent aliases consumed by shared CSS (site-faqs.css colors
     FAQ answer links with var(--color-accent) / var(--color-accent-dark),
     falling back to site blues only for pages without the alias). */
  --color-accent:      var(--color-silver-pulser);
  --color-accent-dark: var(--color-silver-pulser-dark);
  /* Accent alphas derived via color-mix -- consumed by the FAQ row tints
     (the water-ozonator standard adopted site-wide, Aug 2026). */
  --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent);

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

  /* Hero gradient stops (Figma grey/97 -> grey/96 -> grey/94) */
  --hero-grad-1: #f9fbf6;
  --hero-grad-2: #f5faf0;
  --hero-grad-3: #e6f4f8;

  /* Hero chip icon tints */
  --chip-tint-green: #eaf4e7;
  --chip-tint-blue:  #e6f4f8;

  /* Soft card fills */
  --card-green-30: rgba(146, 202, 106, 0.3); /* Body-Electric cards */
  --border-card:      #d4d4d4;               /* bordered white cards (S3) */
  --color-rule:       #d4d4d4;               /* inter-section hairline (S2/S3) */
  --color-gray-nurse: #e2e8e3;               /* slider track + inactive level border (S4) */
  --color-willow:     #eaf4e7;               /* active level card / hand circle base (S4) */
  --bg-feel:          #f8f4f2;               /* Section 4 warm background */
  --color-deep-green: #2c3e2d;               /* emoji glyph colour in icon tiles */

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

/* -- SCOPED RESETS ----------------------------------------- */
.page-silver a { color: inherit; text-decoration: none; }
.page-silver ul { margin: 0; padding: 0; list-style: none; }
.page-silver 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-silver header { font: inherit; }

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

/* -- LAYOUT UTILITIES -------------------------------------- */
.page-silver .section {
  width: 100%;                       /* full-bleed background */
  padding-block: var(--space-section-y);
}
.page-silver .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 7498:1961 / mobile "Line 8").
   Sits at container width between two stacked sections; the vertical
   breathing room comes from the adjacent sections' own padding. */
.page-silver .rule {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--color-rule);
}

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

/* ===========================================================
   SECTION 1: HERO   (Figma desktop 7099:4833 / mobile 7099:4833)
   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-silver .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-silver .hero__inner {
  max-width: 1200px;                 /* match .container (designer eval) */
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: 0;                            /* Figma has no column gap; the photo's own left whitespace separates the two columns */
  min-height: clamp(420px, 38vw, 653px); /* PROPORTIONAL (38% of viewport), deliberately NOT the 1200-basis fluid formula -- do not rebase */
}
@media (max-width: 1264px) {
  .page-silver .hero__inner { padding-inline: var(--space-container); }
}
.page-silver .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-silver .hero__title {
  margin: 0;
  font-weight: 400;
  color: var(--color-dark);
}
.page-silver .hero__title-line {
  display: block;
  font-size: var(--text-heading);
  line-height: 1.08;
}
.page-silver .hero__title-script {
  display: block;
  font-family: 'Cream Cake', 'Brush Script MT', cursive;
  color: var(--color-silver-pulser);
  font-size: var(--text-script);
  line-height: 0.95;
  margin-block: 0.02em;
}

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

/* CTA: label + circular arrow button (anchor for smooth-scroll). */
.page-silver .hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.556em;                      /* 10px */
  margin-top: 0.444em;               /* 8px */
}
.page-silver .hero__cta-label {
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-silver .hero__cta-arrow {
  flex-shrink: 0;
  width: 2.333em;                    /* 42px */
  height: 2.333em;
  border-radius: 50%;
  background: var(--color-silver-pulser);
  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-silver .hero__cta-arrow svg {
  width: 0.889em;                    /* 16px icon */
  height: 0.889em;
  display: block;
}
.page-silver .hero__cta:hover .hero__cta-arrow {
  transform: translateY(3px);
  background: var(--color-silver-pulser-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-silver .hero__media {
  flex: 0 0 51.11%;                  /* Figma 613.34 / 1200. NO shrink: with 1 1, a text
                                        column whose font metrics gave it a larger
                                        min-content SQUEEZED this box, sliding the
                                        %-anchored chips left while the viewport-anchored
                                        photo stayed put (designer report, Aug 26 -- the
                                        misregistration was font/environment dependent,
                                        invisible in the harness). Fixed basis keeps
                                        media width, aspect height, photo size and chip
                                        anchors deterministic per viewport. */
  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-silver .hero__media-img {
  position: absolute;
  bottom: 0;                         /* sits on the floor; small gap at the top (Figma ~7.65%) */
  left: auto;
  right: calc(-1 * max(var(--space-container), 50vw - 600px));
                                     /* anchored to the VIEWPORT's right edge (designer #1,
                                        Aug 24): the offset is the distance from the media
                                        box (= container right) to the viewport edge --
                                        gutter width below the 1200px cap, (50vw - 600px)
                                        above it. Left-anchoring left an 80px+ gap at wide
                                        viewports where the photo's natural width ran out.
                                        The stacked tier's inset:0 overrides this. */
  height: 92.35%;                    /* fills the height */
  width: auto;
  max-width: none;
}

/* Floating info chips (desktop). */
.page-silver .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-silver .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-silver .hero__chip-icon--green { background: var(--chip-tint-green); }
.page-silver .hero__chip-icon--blue  { background: var(--chip-tint-blue); }
.page-silver .hero__chip-text {
  display: flex;
  flex-direction: column;
  gap: 0.089em;                      /* ~1.6px (Figma item-spacing) */
}
.page-silver .hero__chip-title {
  font-size: 0.667em;                /* 12px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-dark);
}
.page-silver .hero__chip-sub {
  font-size: 0.611em;                /* 11px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-silver-pulser-dark);
}
/* Positions mirror Figma, as fractions of the visible image window
   (Figma block 613.34 wide x 655 tall): pulse x105.34/y169, contacts
   x415.34/y480. Fractions hold as the window scales, so no per-breakpoint
   chip overrides are needed down to the mobile stack. */
/* Chips anchored to the RIGHT edge of the window (Figma right offsets) so
   they track the right side and stay on-screen as the window narrows --
   no per-breakpoint repositioning needed down to the mobile stack.
   pulse: Figma right 331/613.34; contacts: 15/613.34, nudged out to open
   the gap with the cord. */
/* Chip nudged 30px below the Figma spot so it clears the Silver Wire
   Holder in the new hero photo (user feedback, Aug 21). */
/* Chips anchor to the VIEWPORT right edge with the same formula as the
   photo (which is right-anchored), so their horizontal registration with
   photo features holds at every width -- media-% anchors drifted because
   the photo slides relative to the media box as the bleed changes
   (designer report, Aug 26). Offsets are photo-space px at the capped
   747px render: holder tip sits 521px from the photo's right edge, the
   jar spans 202-467px. Vertical %s are stable (photo height tracks media
   height) and stay as-is. */
.page-silver .hero__chip--pulse    { top: calc(25.8% + 30px); right: calc(491px - max(var(--space-container), 50vw - 600px)); left: auto; }
.page-silver .hero__chip--contacts { top: 73.3%; right: calc(300px - max(var(--space-container), 50vw - 600px)); left: auto; }

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

/* ===========================================================
   REUSABLE: centered section heading + lead, and the vertical
   stack (heading block -> content, 30px). Used by S2, S3, ...
   The two-tone title colours its parts with .text-ink / .text-accent
   (role names per STANDARDS.md; renamed from the grandfathered
   .text-ink / .text-accent / .text-dark, Sep 3).
=========================================================== */
.page-silver .sec-stack {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                      /* 30px: heading block -> content */
}
.page-silver .sec-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.778em;                      /* ~14px (Figma 10 desktop / 20 mobile) */
}
.page-silver .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 7099:4896) */
}
/* 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-silver .sec-title { line-height: 1.333; }
}
.page-silver .sec-title .text-ink  { color: var(--color-water-ozonator); }
.page-silver .sec-title .text-accent { color: var(--color-silver-pulser); }
.page-silver .sec-lead {
  margin: 0;
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;                  /* section leads are bold in Figma (Roboto Bold) */
  line-height: 1.364;
  color: var(--color-dark);
}

/* ===========================================================
   SECTION 2: BODY ELECTRIC   (Figma 7099:4860 / 7099:4860)
   Uses .sec-stack/.sec-head + a 2x2 grid of soft-green cards
   (left-aligned text). Grid collapses to one column at <=767.
=========================================================== */
.page-silver #body-electric {
  scroll-margin-top: 120px;           /* clears the fixed nav on anchor jump */
}
.page-silver .bodyel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.111em;                      /* 20px, both axes */
}
.page-silver .bodyel__card {
  background: var(--card-green-30);
  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-silver .bodyel__card-title {
  margin: 0;
  font-size: var(--text-btn);        /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-silver .bodyel__card-body {
  margin: 0;
  font-size: 1em;                    /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

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

/* ===========================================================
   SECTION 3: WHAT IS IONIC~COLLOIDAL SILVER   (Figma 7099:4893)
   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-silver .wim__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.111em;                      /* 20px */
}
.page-silver .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-silver .wim__card:hover {
  box-shadow: var(--shadow-card);    /* Figma hover: 0 12px 20px rgba(26,43,28,0.09) */
}
.page-silver .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-silver .wim__icon--green {
  background-image: linear-gradient(135deg, #eaf4e7 0%, #d4edcc 100%);
}
.page-silver .wim__icon--azure {
  background-image: linear-gradient(135deg, #e6f4f8 0%, #c4e4f2 100%);
}
.page-silver .wim__icon--orange {
  background-image: linear-gradient(135deg, #f5faf0 0%, #ffe8c4 100%);
}
.page-silver .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-silver .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-silver .wim__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 4: WHAT TO EXPECT WHEN YOU BREW IT   (Figma 7099:4902)
   Interactive (driven by js/page-silver.js):
     - draggable color slider (0-3: Clear / Pale Gold / Yellow /
       Dark-Cloudy) -> highlights the matching color card AND
       animates the canvas water tint.
     - "Start Brewing" button toggles the "Ag" ion particles; label
       swaps to "Stop - Reset" (.is-brewing turns the button red).
       Forced on for all visitors (no reduced-motion guard -- see
       note below).
   Canvas jar animation ported from the designer's demo (ics-brew.html,
   Aug 2026) -- js/page-silver.js owns the water tint + "Ag" particles;
   this file only sizes the canvas and styles the panel/button/cards.
   Two columns on desktop; stacks to one at <=767.
=========================================================== */
.page-silver .section-brew { background: var(--bg-feel); }

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

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

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

.page-silver .brew__jar {
  flex-shrink: 0;
  width: 320px;                                 /* display size; backing canvas is
                                                   520x614 (Sep 2026 demo art with
                                                   the SWH resting on the jar), so
                                                   it renders crisp at ~1.6x DPR */
  max-width: 100%;
}
.page-silver .brew__jar-canvas {
  display: block;
  width: 100%;                                  /* scales down on small phones */
  height: auto;
  aspect-ratio: 520 / 614;
}

/* Slider */
.page-silver .brew__slider-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.044em;                                 /* ~18.8px */
}
.page-silver .brew__slider-label {
  font-size: var(--text-btn);                   /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
  text-align: center;
}
.page-silver .brew__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;                                 /* room for the 22px thumb */
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.page-silver .brew__slider:focus-visible {
  outline: 2px solid var(--color-silver-pulser-dark);
  outline-offset: 6px;
  border-radius: 3px;
}
.page-silver .brew__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-gray-nurse);
}
.page-silver .brew__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-gray-nurse);
}
.page-silver .brew__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;                             /* centre on 6px track */
  border: none;
  border-radius: 50%;
  background: var(--color-silver-pulser);
  box-shadow: 0 2px 8px rgba(74, 139, 63, 0.3);
  cursor: pointer;
}
.page-silver .brew__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--color-silver-pulser);
  box-shadow: 0 2px 8px rgba(74, 139, 63, 0.3);
  cursor: pointer;
}

/* Color stop labels under the track (Figma 7441:927: Clear / Pale
   Gold / Yellow / Dark aligned to the slider's 4 stops). space-between
   with edge-aligned end labels approximates the Figma x positions. */
.page-silver .brew__ticks {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: -0.278em;                         /* tuck under the track (~-5px) */
}
.page-silver .brew__tick {
  font-size: 1em;                               /* 18px */
  font-weight: 400;
  line-height: 1.667;
  color: var(--color-dark);
}

.page-silver .brew__hint {
  margin: 0;
  font-size: 0.833em;                           /* 15px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-dark);
  text-align: center;
}
.page-silver .brew__start-btn {
  background: var(--color-silver-pulser);
  border-radius: var(--radius-pill);
  padding: 0.389em 1.111em 0.167em;           /* 7 / 20 / 3 -- nudge text down 2px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.page-silver .brew__start-btn:hover { background: #555; }
/* Brewing state turns the button GREY (designer feedback #3, Aug 24 --
   supersedes the demo's red) */
.page-silver .brew__panel.is-brewing .brew__start-btn { background: #555; }
.page-silver .brew__panel.is-brewing .brew__start-btn:hover { background: var(--color-dark); }
.page-silver .brew__start-label {
  font-size: 1em;                               /* 18px */
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;                        /* ~1.8px */
}

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

@media (max-width: 767px) {
  .page-silver .brew__layout {
    flex-direction: column;
    align-items: stretch;              /* fill width (was flex-start -> panel/levels too narrow) */
  }
  /* The panel is a rounded card with side gaps that scrolls away
     normally with the page -- designer feedback (Jul 31, via the ozone
     page): the color text must NOT scroll underneath it, so it is no
     longer position: sticky on mobile. Desktop keeps its sticky. */
  .page-silver .brew__panel {
    position: static;                  /* reset the desktop sticky (top: 120px) */
    top: auto;
    align-self: stretch;
  }
}
/* NOTE: deliberately NO prefers-reduced-motion guard on the canvas
   particles. The animation is intentionally forced on for all visitors
   -- it is a small, gentle, contained effect that a user can simply
   scroll past, and many machines (notably Windows) report reduce-motion
   by default rather than by explicit user choice. (Same decision as the
   donor's pulse rings.) */

/* ===========================================================
   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 7099:4954; the "secret
   is consistency" stats band (7099:4965) is built as page CSS below.
   (Defaults in the component already match this page's palette,
   so the override is intentionally tiny.)
=========================================================== */
.page-silver .card-scroller {
  --cs-accent:      var(--color-silver-pulser-dark); /* #4a8b3f bar/dot/desc */
  --cs-active-tint: #f4f9f1;                          /* leading-card tint */
  --cs-card-width:  320px;
}
/* Click-to-select scrollers: leave a sliver of the previous card showing
   on the left after a snap, so there is always a partial panel to click
   to navigate LEFT (mirroring the partial panel on the right). Without
   this the clicked card sits flush to the leading edge and nothing is
   clickable to go back. */
.page-silver [data-card-scroller-select] [data-card-scroller-track] {
  scroll-padding-inline-start: 64px;
}

/* ===========================================================
   SECTION 5 (cont.): "Secret is consistency" stats band
   (Figma 7099:4965). 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-silver .consistency {
  margin-top: 4.444em;                       /* 80px gap from the benefits scroller (Figma 7099:4954) */
  background: var(--card-green-30);          /* 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-silver .consistency__text {
  display: flex;
  flex-direction: column;
  gap: 0.967em;                              /* ~17.4px */
}
.page-silver .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-silver .consistency__body {
  font-size: 1em;                            /* 18px */
  line-height: 1.667;                        /* 30/18 */
  color: var(--color-dark);
}
.page-silver .consistency__body p { margin: 0; }

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

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

/* ===========================================================
   SECTION 6: ROUTINE  -- "A sample routine. Not a rule."
   (Figma desktop 7099:4987 / mobile 7099:4987.)

   CANONICAL GEOMETRY -- IDENTICAL TO PAGE-OZONE (verified via Figma
   MCP, Aug 2026): both product pages' routine frames (7099:4987 and
   8932:2146) measure EXACTLY the same -- 1620px section frame, two
   735px columns, 50px gap, 100px right inset, text column x785-x1520,
   183px when-column, 44px badge, step body at x213 (522px wide). The
   section BREAKS THE 1200 CONTENT CAP: the text column runs 100px past
   the content area's right edge. This block is a port of page-ozone's
   live, designer-approved implementation (its shipped constants --
   48.5% / 6.098% / 745px cap against a 1640 wrapper -- sit within 1px
   of the section-frame percentages; kept identical for zero drift).

   The woman (woman_using_sp_arm.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.
   MID TIER (1025-1440): fixed desktop chrome (183px when-column, 30px
   gaps) crushes the step bodies to ~220px; released to the compact
   rhythm (verified by headless-Chrome geometry measurement on ozone).

   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
     .routine__text margin-left ..... where the panel starts (48.5% of the wrapper)
     .routine__text max-width ....... 745px cap (ultrawide growth stop)
=========================================================== */
.page-silver .section-routine {
  position: relative;
  padding-block: 0;                          /* height driven by the text */
  background-color: #ffffff;                 /* base; the blurred bg covers it */
  overflow: hidden;
}
/* This section breaks the 1200 content cap (see header note): its
   wrapper is capped at the page design-limit frame and the columns
   reproduce the Figma flex geometry as percentages of it. */
.page-silver .section-routine .container {
  max-width: 1640px;
  padding-inline: 0;
}
.page-silver .routine {
  position: relative;
}

/* Woman cutout: left-bleed column ending at 45.4% of the wrapper. */
.page-silver .routine__media {
  position: absolute;
  top: 0;                                     /* fill the full section height */
  bottom: 0;
  left: max(calc(50% - 50vw), -140px);        /* full-bleed to the viewport's left edge,
                                                 CAPPED at the 1920-viewport position: the
                                                 section height is constant (text-driven),
                                                 so past 1920 a wider box only zooms the
                                                 cover-cropped photo. 50% of the 1640
                                                 wrapper (820px) - 50vw at 1920 (960px)
                                                 = -140px; beyond 1920 the box freezes
                                                 there and the blurred bg fills the rest */
  right: 54.6%;                               /* col ends at 45.4% of the wrapper (735/1620);
                                                 the 50px Figma gap sits between here and the
                                                 text column at 48.5% */
  z-index: 1;                                /* ABOVE the blurred background */
}
.page-silver .routine__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* fill the box (crops the SIDES at these widths) */
  object-position: right top;                /* keep her RIGHT side; trim the LEFT (the source
                                                photo is wider than the 735px Figma window --
                                                the crop window IS the design). TOP anchor:
                                                past ~1580px the box outgrows the photo's
                                                aspect and cover starts cropping VERTICALLY --
                                                anchoring top sacrifices sweater at the bottom
                                                instead of her head (user feedback, Aug 22) */
}

/* 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-silver .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__silver.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-silver .routine__text {
  position: relative;
  z-index: 3;
  margin-left: 48.5%;                        /* Figma: text col starts at x785 */
  margin-right: 6.098%;                      /* Figma 100px right inset as % of the
                                                wrapper: identical 100px at the full
                                                frame, scales down continuously below
                                                it instead of eating a fixed 100px */
  max-width: 745px;                          /* column cap: stops ultrawide growth */
  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-silver .routine__timeline {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                              /* 30px between steps */
}
.page-silver .routine__step {
  display: flex;
  gap: 1.667em;                              /* 30px: when-group -> body */
  align-items: flex-start;
}
.page-silver .routine__when {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.667em;                              /* 30px: time -> badge (Figma) */
  flex: 0 0 auto;
  width: 10.167em;                           /* 183px fixed when-column (Figma);
                                                released in the 1025-1440 mid tier
                                                and the <=1024 mobile stack below */
}
.page-silver .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-silver .routine__badge {
  flex-shrink: 0;
  width: 2.444em;                            /* 44px */
  height: 2.444em;
  border-radius: 50%;
  border: 2px solid var(--color-silver-pulser);
  background: var(--color-willow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.889em;
  line-height: 1;
}
.page-silver .routine__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                              /* 10px */
}
.page-silver .routine__tag {
  align-self: stretch;                       /* Figma: pill bg spans the body column
                                                (Background frame = full 522px in BOTH
                                                product frames; verified Aug 2026) */
  margin: 0;
  background: var(--color-willow);
  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-silver .routine__step-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.222em;                        /* 22px */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-silver .routine__step-text {
  margin: 0;
  font-weight: 400;
  font-size: 1em;                            /* 18px */
  line-height: 1.667;
  color: var(--color-dark);
}

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

/* Mobile (Figma 7099:4987): no woman -- blurred layer full width + solid,
   text centred over it. */
@media (max-width: 1024px) {
  .page-silver .routine__media { display: none; }
  .page-silver .routine::before {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-right: 0;
    transform: translateX(-50%);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .page-silver .routine__text {
    margin-left: 0;
    margin-right: 0;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-container);
  }
  .page-silver .routine__time       { font-size: 1em; }      /* 18px */
  .page-silver .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-silver .routine__timeline { padding-left: 0; }
  .page-silver .routine__time     { text-align: left; }
  /* Release the desktop 183px when-column: on mobile it leaves a large
     void between the time and the text; the compact rhythm applies
     instead. The time keeps a min-width wide enough for the widest
     label so every step's body shares one left edge. */
  .page-silver .routine__time { min-width: 4.5em; }
  .page-silver .routine__when {
    width: auto;
    justify-content: flex-start;
    gap: 1.111em;                    /* 20px */
  }
}

/* ===========================================================
   SECTION 7: MISCONCEPTIONS   (Figma 7099:5048 / 7099:5048)
   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-silver .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-silver .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-silver .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-silver .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(--color-willow);
}

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

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

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

/* ===========================================================
   SECTION 8: OTHER PRACTICES   (Figma 7099:5065 / 7099:5065)
   Full-bleed pale-blue section. A wave divider (7099:5064) 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 Ionic~Colloidal Silver 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
   featured card spans the full width (its own middle row),
   matching the mobile design.
=========================================================== */
.page-silver .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-silver .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-silver .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-silver .practices__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: #eff9fd;           /* pale blue, full-bleed, below wave only */
}

/* Card row. */
.page-silver .practices__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.889em;                       /* 16px */
  align-items: stretch;               /* equal-height cards */
}
.page-silver .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-silver .practices__card--featured {
  position: relative;                 /* anchor the badge */
  background: var(--color-willow);
  border-color: var(--color-silver-pulser);
  box-shadow: 0 4px 10px rgba(26, 43, 28, 0.07);
}
.page-silver .practices__badge {
  position: absolute;
  top: -0.833em;                      /* -12.5px (relative to this 15px element) */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2em 0.8em;               /* 3 / 12 */
  background: var(--color-silver-pulser);
  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-silver .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-silver .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-silver .practices__meta {
  margin: 0;
  font-size: 0.833em;                 /* 15px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-silver-pulser-dark); /* fern green #4a8b3f */
}

/* Check list. */
.page-silver .practices__checks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.333em;                       /* 6px */
  padding-top: 0.444em;               /* 8px lift (Figma) */
}
.page-silver .practices__check {
  margin: 0;
  display: flex;
  align-items: flex-start;            /* mark rides the FIRST line of a wrapped
                                         label (was center = mark floats between
                                         lines); the margin-top below re-centres
                                         it within that line, so single-line rows
                                         render pixel-identical (Aug 22) */
  justify-content: center;            /* centred on desktop (Figma) */
  gap: 0.333em;                       /* 6px: mark -> text */
}
.page-silver .practices__check-mark {
  flex-shrink: 0;
  margin-top: 0.313em;                /* (19.5px line box - 12px mark) / 2 = 3.75px */
  font-size: 0.667em;                 /* 12px */
  line-height: 1;
  color: var(--color-silver-pulser-dark);
}
.page-silver .practices__check-text {
  font-size: 0.833em;                 /* 15px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-dark);
}

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

/* ===========================================================
   SECTION 9: HOW TO MAKE IONIC~COLLOIDAL SILVER   (Figma 7099:5095)
   Warm background (--bg-feel). 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-silver .section-howto { background: var(--bg-feel); }
.page-silver .section-howto .sec-stack {
  gap: clamp(30px, 2.5vw + 20px, 50px);  /* 30 / 50 */
}

.page-silver .howto__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                       /* 10px between rows */
}
.page-silver .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-silver .howto__media {
  flex: 0 0 13.889em;                 /* 250px */
  width: 13.889em;
}
.page-silver .howto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* fill, no distortion */
  object-position: center top;        /* keep the photo's TOP visible in both
                                         the desktop square and the mobile
                                         banner crop (user feedback, Aug 22) */
}
.page-silver .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-silver .howto__step-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-dark);
}
.page-silver .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-silver .howto__row {
    flex-direction: column;
    min-height: 0;
  }
  .page-silver .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 7099:5094.
=========================================================== */
.page-silver .wave-divider { line-height: 0; }
.page-silver .wave-divider__img { display: block; width: 100%; height: auto; }
.page-silver .wave-divider--blue-to-cream { background: var(--bg-feel); } /* #f8f4f2 */

/* ===========================================================
   SECTION 10: SCHEDULE  (Figma 7099:5128 / Weeks 7476:2966 / 7099:5128)
   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 = "Your Silver routine" 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-silver .section-schedule { background: var(--hero-grad-1); } /* #f9fbf6 */

/* Mobile: the week tab bar sticks below the fixed menu while a week panel
   scrolls (designer feedback #8, Aug 24 -- wanted on ALL technology pages;
   propagate to micropulsing/ozone/template on next touch). 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"). */
@media (max-width: 767px) {
  .page-silver .section-schedule .schedule__weeks { overflow: visible; }
  /* ^ extra class outranks the base overflow:hidden, which appears LATER
       in the file than this block (equal specificity would lose on order) */
  .page-silver .schedule__tablist {
    position: sticky;
    top: 70px;                        /* fixed .menu-topnav height on phones */
    z-index: 10;                      /* above panel content; menu is z 1000 */
    background: var(--color-white);   /* panel text scrolls under, not through */
    border-top-left-radius: 1.778em;  /* card's 32px corners, now on the child */
    border-top-right-radius: 1.778em;
  }
  .page-silver .schedule__panel {
    border-bottom-left-radius: 1.778em;
    border-bottom-right-radius: 1.778em;
  }
}
.page-silver .section-schedule .sec-stack {
  gap: clamp(32px, 1.5vw + 26px, 44px);   /* heading block -> card (Figma ~44) */
}

/* Card */
.page-silver .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;
}

/* Tab bar */
.page-silver .schedule__tablist {
  display: flex;
  border-bottom: 1px solid var(--border-card);
}
.page-silver .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-silver .schedule__tab.is-active {
  background: var(--color-willow);
  border-bottom-color: var(--color-silver-pulser-dark);  /* #4a8b3f */
}

/* Panel */
.page-silver .schedule__panel {
  padding: 2.222em clamp(20px, 5vw, 4.444em) 2.267em;  /* 40 / ~80 / 40.8 */
}
.page-silver .schedule__panel[hidden] { display: none; }
.page-silver .schedule__cols {
  display: flex;
  gap: 1.556em;                       /* 28px */
  align-items: stretch;
}
.page-silver .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-silver .schedule__col-head {
  display: flex;
  align-items: center;
  gap: 0.444em;                       /* 8px */
  padding-bottom: 0.778em;            /* 14px */
}
.page-silver .schedule__col-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.591;                 /* 35px */
  color: var(--color-dark);
}
.page-silver .schedule__pill {
  display: inline-flex;
  padding: 0.3em 1em;                 /* 3 / 10 (relative to 10px) */
  background: var(--color-willow);
  border-radius: 100px;
  font-size: 0.556em;                 /* 10px */
  font-weight: 700;
  letter-spacing: 0.05em;             /* 0.5px */
  text-transform: uppercase;
  white-space: nowrap;
  color: #2d5e25;                     /* Everglade */
}

/* Bullet lists */
.page-silver .schedule__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-silver .schedule__item {
  display: flex;
  gap: 0.556em;                       /* 10px */
  padding-block: 0.556em;             /* ~10px */
  border-bottom: 1px solid var(--color-gray-nurse);  /* #e2e8e3 */
}
.page-silver .schedule__item:last-child { border-bottom: 0; }
.page-silver .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-silver-pulser-dark);
  border-radius: 2.5px;
}
.page-silver .schedule__item-text {
  font-size: 1em;                     /* 18px */
  line-height: 1.667;                 /* 30px */
  color: var(--color-dark);
}
.page-silver .schedule__item-text strong { font-weight: 700; }
.page-silver .schedule__link {
  color: var(--color-silver-pulser-dark);
  font-weight: 700;
  text-decoration: underline;
}

/* "Important" callout (left column) */
.page-silver .schedule__callout {
  margin-top: 1.667em;                /* 30px gap from the list */
  padding: 1em 1.222em 1em 1.444em;   /* 18 / 22 / 18 / 26 */
  background: #f5faf0;                /* Serenade */
  border-left: 4px solid #8bc34a;     /* light green */
  border-radius: 0.889em;             /* 16px */
}
.page-silver .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-silver .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-silver .wave-divider--beige { background: var(--hero-grad-1); } /* above S10 #f9fbf6 */
.page-silver .wave-divider--green { background: var(--hero-grad-1); } /* matches section above (S10 #f9fbf6); PNG is transparent on the bottom */

@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-silver .schedule__tab {
    font-size: 0.722em;               /* 13px */
    padding-inline: 0.3em;            /* tight; flex:1 keeps equal widths */
  }
  .page-silver .schedule__cols { flex-direction: column; }
}

/* ===========================================================
   SECTION 11: FAQs  (Figma 7099:5164 / 7099:5164)
   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 green-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-silver .faq__container {
  display: flex;
  flex-direction: column;
  gap: 1.667em;                       /* ~30px between header and body */
}
.page-silver .faq__title {
  margin: 0;
  text-align: left;
}
.page-silver .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-silver .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-silver .faq__title { grid-area: title; align-self: end; }
.page-silver .faq__media { grid-area: media; }
.page-silver .faq__list  { grid-area: list; align-self: start; }

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

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

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

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

/* Answer panel (HTML injected by site-faqs.js) */
.page-silver .faq__answer {
  padding: 0 1.111em 1.111em;         /* 20px sides + bottom; flush under question */
  font-size: 1em;                     /* 18px */
  font-weight: 400;
  line-height: 1.667;                 /* 30px */
  color: var(--color-dark);
}
.page-silver .faq__answer[hidden] { display: none; }
.page-silver .faq__answer p { margin-bottom: 0.667em; }
.page-silver .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-silver .faq__answer.is-loading { opacity: 0.6; }
.page-silver .faq__answer.is-error { color: #b00020; }

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

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



/* ===========================================================
   SECTION 12: SILVER PULSER UNIT  (Figma 7099:5191 / mobile 7099:5191)
   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-silver .section-unit { background: var(--card-green-30); }

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

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

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

/* Feature chips */
.page-silver .unit__chips {
  display: flex;
  gap: 0.778em;                       /* 14px */
  padding-block: 0.333em;             /* small breathing room (Figma py-20 incl. gap) */
}
.page-silver .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-silver .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-silver-pulser);  /* tints the inline SVG icons */
}
.page-silver .unit__chip-icon .icon {
  font-size: 1.222em;                 /* 22px -- icon size; was hardcoded on the inline svg */
  display: block;
}
.page-silver .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-silver .unit__cta {
  align-self: flex-start;             /* pill hugs its text, left-aligned */
  display: inline-flex;
  align-items: center;
  margin-top: 0.333em;                /* a touch more space above the button */
  padding: 0.389em 1.111em 0.167em;   /* 7 / 20 / 3 -- nudge text down 2px */
  background: var(--color-water-ozonator);
  border-radius: 50px;
  font-size: 1em;                     /* 18px */
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;              /* 1.8px */
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page-silver .unit__cta:hover { background: #555; }

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

@media (max-width: 1024px) {
  .page-silver .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-silver .unit__content { display: contents; }
  .page-silver .unit__title { order: 1; }
  .page-silver .unit__media { order: 2; align-self: auto; }
  .page-silver .unit__lead  { order: 3; }
  .page-silver .unit__chips { order: 4; flex-direction: column; width: 100%; }
  .page-silver .unit__cta   { order: 5; align-self: center; margin-top: 0; }
}

/* ===========================================================
   SECTION 13: WELLNESS GUIDE / SWPG  (Figma 7099:5215 / mobile 7099:5215)
   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-silver .swpg__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.778em;                       /* 50px (heading block -> body) */
}
.page-silver .swpg__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.667em;                       /* 30px (title -> lead) */
  text-align: center;
  width: 100%;
}
.page-silver .swpg__title { margin: 0; }
.page-silver .swpg__subhead {
  max-width: 50em;                    /* keep the lead to a readable measure */
  margin-inline: auto;
}

/* Two-column body */
.page-silver .swpg__body {
  display: grid;
  align-items: center;
  column-gap: 2.778em;                /* 50px */
  grid-template-columns: minmax(0, 1fr) minmax(0, 653px);
  width: 100%;
}
.page-silver .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-silver .swpg__list-block {
  display: flex;
  flex-direction: column;
  gap: 0.778em;                       /* 14px (title -> list) */
  width: 100%;
}
.page-silver .swpg__list-title {
  margin: 0;
  font-size: var(--text-btn);         /* 22px */
  font-weight: 700;
  line-height: 1.591;                 /* 35/22 (Figma 7099:5215) */
  color: var(--color-dark);
}

/* Blue circle-check checklist */
.page-silver .check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em;                       /* 10px */
  width: 100%;
}
.page-silver .check-list__item {
  display: flex;
  align-items: center;
  gap: 1.667em;                       /* 30px (icon -> label) */
}
.page-silver .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-silver .check-list__item span {
  font-size: var(--text-lead);        /* 20px (Figma desktop 7099:5221) */
  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-silver .swpg__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.389em 1.111em 0.167em;   /* 7 / 20 / 3 -- nudge text down 2px */
  background: var(--color-water-ozonator);
  border-radius: 50px;
  font-size: 1em;                     /* 18px */
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1em;              /* 1.8px */
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page-silver .swpg__cta:hover { background: #555; }

/* Framed video preview */
.page-silver .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.
     No border-box reset here, so width:100% + 16px padding overflowed the
     viewport by 6px on mobile (360 -> 366), expanding the layout viewport
     and making all position:fixed elements (bottom nav, sheets, pinned
     bar) "bob" 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-silver .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-silver .swpg__left { display: contents; }
  .page-silver .swpg__list-block { order: 1; width: 100%; }
  .page-silver .swpg__preview { order: 2; }
  .page-silver .swpg__cta     { order: 3; }
}

/* Phone tier: Figma mobile shows the checklist items at 18px (vs 20px
   desktop), line-height held at 35px (Figma 7099:5215). */
@media (max-width: 767px) {
  .page-silver .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, schedule columns/callouts, and FAQ rows.
   (--shadow-card = 0 12px 20px rgba(26,43,28,0.09).)
=========================================================== */
.page-silver .bodyel__card,
.page-silver .misc__card,
.page-silver .practices__card,
.page-silver .howto__row,
.page-silver .schedule__col,
.page-silver .schedule__callout {
  transition: box-shadow 0.2s ease;
}
.page-silver .bodyel__card:hover,
.page-silver .feel__level:hover,
.page-silver .misc__card:hover,
.page-silver .practices__card:hover,
.page-silver .howto__row:hover,
.page-silver .schedule__col:hover,
.page-silver .schedule__callout:hover {
  box-shadow: var(--shadow-card);
}

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