/* ===========================================================
   page-compare-silver-pulsers.css
   SOTA "Compare Silver Pulsers" page (?page=compare-silver-pulsers)
   Wrapper: .page-compare-silver-pulsers
   Figma: 11493:16865 (page frame, 1440w default)
     - Hero:  11505:18699  (gradient layer 11505:18698)
     - Which: 11493:17169  (reveal component 11493:17777)

   Conventions (see PROJECT.md / COMPONENTS.md):
   - Root font-size 18px on the wrapper; every size in em except
     clamp() endpoints (px) paired with unitless line-heights.
   - Clamp slopes computed against 1200 desktop / 400 mobile.
     1200 is the site default desktop width (designer, Aug 2026 --
     supersedes the earlier 1280 basis); this page's Figma frame
     ("1440w default") provides no mobile frame, so mobile endpoints
     are stated assumptions.
   - All rules scoped under .page-compare-silver-pulsers.
   - ASCII-clean.
=========================================================== */

/* Cream Cake -- script accent for the hero heading only.
   Licensed webfont supplied by SOTA at /fonts/cream_cake.woff2. */
@font-face {
  font-family: 'Cream Cake';
  src: url('/fonts/cream_cake.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -- TOKENS ---------------------------------------------- */
.page-compare-silver-pulsers {
  /* Root font-size: dominant Figma paragraph size (18px body in the
     which-model section; hero body is 20px = 1.111em). */
  font-size: 18px;

  /* Explicit family assertion (matches CMS chrome) so standalone
     previews render correctly. */
  font-family: 'Roboto', sans-serif;

  /* Typography scale */
  --text-heading: clamp(30px, 2.5vw + 20px, 50px); /* section titles 50/30, 1200/400 basis (rebased from the SP page's 1280 slope per the new default) */
  --text-btn:     1em;   /* 18px button labels */

  /* Hero heading pair -- 1200/400 slope, mobile endpoints assumed
     (no mobile Figma frame yet; flag for designer sign-off) */
  --text-hero:        clamp(32px, 2.75vw + 21px, 54px);  /* Roboto part 54 -> 32 */
  --text-hero-script: clamp(48px, 4vw + 32px, 80px);     /* Cream Cake part 80 -> 48 */

  /* Spacing */
  --space-section-y: clamp(40px, 5vw + 20px, 80px);
  --space-container: clamp(10px, 2.5vw, 30px); /* restored per designer, Aug 2026 (was briefly removed) */
  --space-gap-lg:    clamp(20px, 2.5vw + 10px, 40px);

  /* Radius */
  --radius-pill:  9999px;
  /* Panel radius is PX, not em: it feeds calc(radius - 1px) corner
     arcs on elements with different font sizes (18/20/22px), and an
     em value resolves per-element -- the table corners ended up with
     mismatched arcs (found on the Lite header cell, Aug 2026). */
  --radius-panel: 20px; /* product cards, compare card */
  --radius-btn:   0.625em; /* 11px -- non-pill fallback */

  /* ============================================================
     BRAND ACCENT CONFIG -- the only colour lines a new page edits.
     THIS PAGE (Silver Pulser family) -> green.
     ============================================================ */
  --color-accent:      #92ca6a;
  --color-accent-dark: #4a8b3f;
  --color-accent-tint: #d9e8d8;
  /* Derived alpha tints (compare-table column ramp etc.) */
  --color-accent-a60: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --color-accent-a40: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-accent-a12: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-a10: color-mix(in srgb, var(--color-accent) 10%, transparent);
  /* Opaque equivalents (mixed over white) for the STICKY table header --
     alpha tints would let scrolled rows show through the pinned cells. */
  --color-accent-t60: color-mix(in srgb, var(--color-accent) 60%, var(--color-white));
  --color-accent-t40: color-mix(in srgb, var(--color-accent) 40%, var(--color-white));
  --color-accent-t30: color-mix(in srgb, var(--color-accent) 30%, var(--color-white));

  /* Full product palette (cross-product references) */
  --color-silver-pulser:   #92ca6a;
  --color-magnetic-pulser: #59afb2;
  --color-water-ozonator:  #4792bc; /* blue -- also the site primary */
  --color-bio-tuner:       #a194c7;

  /* Neutrals */
  --color-dark:         #3b3b3b;
  --color-grey-text:    #555555; /* secondary text: compare-table values, reveal toggle */
  --color-table-border: #cdcdcd; /* compare-table hairlines + card border */
  --color-card-border:  #d4d4d4; /* product-card border */
  --color-white:        #ffffff;
  --color-cream-bg:     #f8f4f2;
  --color-light-blue:   #eff9fd;

  /* Button hover dark (site-wide "Variant3" hover) */
  --color-btn-hover: #555555;

  /* Hero gradient stops (Figma 11505:18698) */
  --hero-grad-1: #f9fbf6;
  --hero-grad-2: #f5faf0;
  --hero-grad-3: #e6f4f8;

  /* Sticky site masthead height: the pinned chart header offsets by
     this so it is not hidden beneath the menu (70px on mobile per
     dev testing, Aug 2026). If the desktop menu height differs or is
     not sticky, adjust here in one place. */
  --masthead-h: 70px;

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

/* -- RESET (scoped to this page) ------------------------- */
.page-compare-silver-pulsers *,
.page-compare-silver-pulsers *::before,
.page-compare-silver-pulsers *::after {
  box-sizing: border-box;
  margin: 0;
}
.page-compare-silver-pulsers a      { text-decoration: none; color: inherit; }
.page-compare-silver-pulsers ul     { list-style: none; padding: 0; }
.page-compare-silver-pulsers img    { display: block; max-width: 100%; height: auto; }
.page-compare-silver-pulsers button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
/* CMS masthead sets a font-size on bare <header>; re-anchor ours. */
.page-compare-silver-pulsers header { font: inherit; }

/* -- LAYOUT UTILITIES ------------------------------------ */
.page-compare-silver-pulsers .section {
  padding: var(--space-section-y) 0;
  width: 100%;
}
.page-compare-silver-pulsers .container {
  width: 100%;
  /* Gutters sit OUTSIDE the content column (designer, Aug 2026): the
     column is a true 1200px at desktop, and the padding only bites
     into content once the viewport is narrower than 1200 + gutters. */
  max-width: calc(1200px + 2 * var(--space-container));
  margin: 0 auto;
  padding: 0 var(--space-container);
}

/* Section background variants */
.page-compare-silver-pulsers .section--white { background: var(--color-white); }
.page-compare-silver-pulsers .section--cream { background: var(--color-cream-bg); }
.page-compare-silver-pulsers .section--light { background: var(--color-light-blue); }

/* -- COLOUR UTILITIES ------------------------------------
   Role-named two-tone heading helpers: .text-ink = primary heading
   tone (site blue on this page), .text-accent = brand green. */
.page-compare-silver-pulsers .text-accent { color: var(--color-accent); }
.page-compare-silver-pulsers .text-ink    { color: var(--color-water-ozonator); }
.page-compare-silver-pulsers .text-white  { color: var(--color-white); }
.page-compare-silver-pulsers .text-dark   { color: var(--color-dark); }
.page-compare-silver-pulsers .text-center { text-align: center; }

/* -- BUTTONS --------------------------------------------- */
.page-compare-silver-pulsers .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Asymmetric vertical padding: top 1px larger than bottom to
     optically centre uppercase Roboto Black (site convention). */
  padding: calc(0.625em + 0.056em) 1.25em calc(0.625em - 0.056em);
  border-radius: var(--radius-btn);
  font-size: var(--text-btn);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.page-compare-silver-pulsers .btn--blue {
  background: var(--color-water-ozonator);
  color: var(--color-white);
}
.page-compare-silver-pulsers .btn--blue:hover {
  background: var(--color-btn-hover);
}
/* Outlined pill (the card "View" CTA -- Figma 11623:7654: white bg,
   2px blue stroke, blue label). Hover follows the site-wide flat
   #555 swap; no hover variant exists in the Figma (MCP returns
   resting states only) -- designer to confirm. */
.page-compare-silver-pulsers .btn--outline {
  background: var(--color-white);
  color: var(--color-water-ozonator);
  border: 2px solid var(--color-water-ozonator);
}
.page-compare-silver-pulsers .btn--outline:hover {
  background: var(--color-btn-hover);
  border-color: var(--color-btn-hover);
  color: var(--color-white);
}
.page-compare-silver-pulsers .btn--pill { border-radius: var(--radius-pill); }

/* -----------------------------------------------------------
   SECTION 1: HERO  (Figma 11505:18699)
   Full-bleed gradient; text left, product photo right with
   floating model chips.
----------------------------------------------------------- */
.page-compare-silver-pulsers .section-hero {
  /* Gradient layer 11505:18698: ~178deg, pale green -> pale blue */
  background: linear-gradient(178deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 40%, var(--hero-grad-3) 100%);
  padding: 2.778em 0; /* 50px both ends, per Figma container */
}
.page-compare-silver-pulsers .hero__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0; /* columns 586.66 + 613 fill the 1200 container exactly */
}
.page-compare-silver-pulsers .hero__text {
  flex: 0 1 32.593em; /* 586.66px */
  display: flex;
  flex-direction: column;
  gap: 1.222em; /* 22px */
}
.page-compare-silver-pulsers .hero__title {
  font-size: var(--text-hero); /* 54 -> 32px */
  font-weight: 400;
  line-height: 1.08; /* 58.32px at 54 */
  color: var(--color-dark);
}
.page-compare-silver-pulsers .hero__script {
  font-family: 'Cream Cake', cursive;
  font-size: var(--text-hero-script); /* own clamp, NOT calc(clampA / clampB): Firefox cannot divide by a length in calc() and collapsed the size */
  font-weight: 400;
  line-height: 0.7; /* 56px at 80 -- script sits tight to the Roboto baseline */
  color: var(--color-accent);
}
.page-compare-silver-pulsers .hero__subhead {
  font-size: 1.111em; /* 20px */
  font-weight: 400;
  line-height: 1.53; /* 30.6px */
  color: var(--color-dark);
}
.page-compare-silver-pulsers .hero__functions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.111em; /* 20px */
  padding: 1.111em 0; /* 20px block, per Figma */
}
.page-compare-silver-pulsers .hero__function {
  display: flex;
  align-items: center;
  gap: 0.778em; /* 14px */
}
/* 40px white badge; icon pinned to 18px INSIDE the em-sized badge
   (font-size on the icon, not the wrapper -- COMPONENTS.md pattern). */
.page-compare-silver-pulsers .hero__function-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.222em;  /* 40px */
  height: 2.222em;
  border-radius: 0.556em; /* 10px */
  background: var(--color-white);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  color: var(--color-accent); /* sprite icons paint currentColor */
}
.page-compare-silver-pulsers .hero__function-badge .icon {
  font-size: 1em; /* 18px icon inside the 40px badge */
}
.page-compare-silver-pulsers .hero__function-label {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
}

/* Product photo + floating chips */
.page-compare-silver-pulsers .hero__media {
  position: relative;
  flex: 0 0 34.056em; /* 613px */
  max-width: 100%;
  aspect-ratio: 613 / 463;
}
.page-compare-silver-pulsers .hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Chips: positions in % of the media box (from the Figma px offsets
   against the 613x463 image) so they track the photo as it scales. */
.page-compare-silver-pulsers .hero__chip {
  position: absolute;
  font-size: 0.667em; /* 12px -- em anchor for the paddings below */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark);
  background: var(--color-white);
  border-radius: 1.333em;  /* 16px at the 12px anchor */
  padding: 1.167em 1.5em;  /* 14px 18px */
  box-shadow: 0 12px 20px rgba(26, 43, 28, 0.09);
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.page-compare-silver-pulsers .hero__chip:hover,
.page-compare-silver-pulsers .hero__chip:focus-visible {
  background: var(--color-accent); /* silver-pulser green on hover (designer, Aug 2026) */
  color: var(--color-white);
}
.page-compare-silver-pulsers .hero__chip--sp8  { right: 34.91%; top: 0; }
.page-compare-silver-pulsers .hero__chip--sp7  { right: 84.93%; top: 70.63%; }
.page-compare-silver-pulsers .hero__chip--lite { right: 36.65%; top: 75.16%; }

/* Hero responsive: stack at tablet (layout tier), phone-only trims at 767 */
@media (max-width: 1024px) {
  .page-compare-silver-pulsers .hero__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.222em; /* 40px between stacked text and photo */
  }
  /* Stacked hero text stays LEFT aligned (designer reverted the
     earlier centering request, Aug 2026). */
  .page-compare-silver-pulsers .hero__text { flex: 0 1 auto; }
  .page-compare-silver-pulsers .hero__media {
    flex: 0 1 auto;
    width: 100%;
    max-width: 34.056em;
    align-self: center;
  }
}
@media (max-width: 767px) {
  .page-compare-silver-pulsers .hero__functions { gap: 0.778em; }
  /* The chip's own width doesn't scale with the photo; at phone width
     the % offset pushes SP7's left edge past the image. Pin it. */
  .page-compare-silver-pulsers .hero__chip--sp7 { right: auto; left: 0; }
  /* SP8 chip: hugs the middle unit's top-right shoulder (designer,
     Aug 2026 -- "closer to the unit"; calibrated against the real
     photo, nudge this % if the crop changes). */
  .page-compare-silver-pulsers .hero__chip--sp8 { right: 23%; }
}

/* -----------------------------------------------------------
   SECTION 2: WHICH MODEL  (Figma 11493:17169)
   White section. Three equal product cards (View + Add to Cart),
   "Not sure?" note, table heading, compare table in a rounded
   bordered card with the reveal toggle inside.
----------------------------------------------------------- */
.page-compare-silver-pulsers .which__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px between header / cards / note / table block */
}
.page-compare-silver-pulsers .which__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px -- standardized heading/subheading gap */
  text-align: center;
}
.page-compare-silver-pulsers .which__title {
  font-size: var(--text-heading); /* 50 / 30px */
  font-weight: 900;
  line-height: 1.2; /* 60px at 50 */
}
.page-compare-silver-pulsers .which__subhead {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
}

/* Three product cards */
.page-compare-silver-pulsers .which__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.556em; /* 10px */
  align-items: stretch;
}
.page-compare-silver-pulsers .which-card {
  display: flex;
  flex-direction: column;
  gap: 0.778em; /* 14px */
  padding-top: 1.111em; /* 20px */
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-panel); /* 20px */
  overflow: hidden;
}
.page-compare-silver-pulsers .which-card__media {
  width: 100%;
  height: 12.944em; /* 233px */
}
.page-compare-silver-pulsers .which-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-compare-silver-pulsers .which-card__name {
  font-size: 1.667em; /* 30px */
  font-weight: 700;
  line-height: 1.167; /* 35px */
  color: var(--color-dark);
  text-align: center;
}
.page-compare-silver-pulsers .which-card__price {
  text-align: center;
  margin: 0;
}
.page-compare-silver-pulsers .which-card__amount {
  font-size: 1.389em; /* 25px */
  font-weight: 900;
  line-height: 1.4; /* 35px */
  color: var(--color-water-ozonator);
}
.page-compare-silver-pulsers .which-card__currency {
  font-size: 1.111em; /* 20px */
  font-weight: 400;
  color: var(--color-dark);
}
/* Cream footer panel fills remaining height; actions pinned to bottom */
.page-compare-silver-pulsers .which-card__foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.111em; /* 20px */
  background: var(--color-cream-bg);
  padding: 1.111em 0.556em; /* 20px 10px */
}
.page-compare-silver-pulsers .which-card__desc {
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
/* View + Add-to-Cart side by side, centred (Figma 11620:7627) */
.page-compare-silver-pulsers .which-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.556em; /* 10px */
}
/* Neutralize the legacy table wrapper around each add-to-cart form */
.page-compare-silver-pulsers .which-card__buy-table,
.page-compare-silver-pulsers .which-card__buy-table > tbody,
.page-compare-silver-pulsers .which-card__buy-table > tbody > tr,
.page-compare-silver-pulsers .which-card__buy-table > tbody > tr > td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
}
.page-compare-silver-pulsers .which-card__buy {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* "Not sure?" reassurance note (Figma 11616:5397) */
.page-compare-silver-pulsers .which__note {
  font-size: 1.222em; /* 22px */
  font-weight: 400;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
  text-align: center;
}
.page-compare-silver-pulsers .which__note strong { font-weight: 700; }

/* Table heading + card (Figma 11493:17199) */
.page-compare-silver-pulsers .which__compare-block {
  display: flex;
  flex-direction: column;
  gap: 1.667em; /* 30px heading-to-table */
}
.page-compare-silver-pulsers .which__compare-heading {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
  text-align: center;
}

/* Compare table: rounded bordered card; the reveal toggle lives
   INSIDE the card (Figma 11493:17777). */
.page-compare-silver-pulsers .which-compare {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-panel); /* 20px */
  /* NO overflow:hidden here -- it would create a clip box that breaks
     the sticky header (sticky pins to the nearest scroll container).
     The corner cells carry their own radii instead. */
}
/* Row wrapper. Becomes a horizontal-scroll container ONLY at the phone
   tier -- an overflow container here at desktop would also swallow the
   sticky header (sticky pins to the nearest scrollport, which would be
   this box instead of the page). */
.page-compare-silver-pulsers .which-compare__scroll {
  min-width: 0;
}
/* Shared row template: feature label (flexible, capped) + 3 fixed cols */
.page-compare-silver-pulsers .which-compare__head,
.page-compare-silver-pulsers .which-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13em 13em 13em; /* ~233px cols */
  align-items: stretch;
  border-bottom: 1px solid var(--color-table-border);
}
.page-compare-silver-pulsers .which-compare__feature-head,
.page-compare-silver-pulsers .which-compare__feature {
  display: flex;
  align-items: center;
  padding: 0.278em 1.667em; /* 5px 30px */
  color: var(--color-dark);
}
.page-compare-silver-pulsers .which-compare__feature-head {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.136; /* 25px */
  padding-top: 0.455em;    /* 10px at 22px -- header row is taller */
  padding-bottom: 0.455em;
}
.page-compare-silver-pulsers .which-compare__feature {
  padding-left: 3.647em; /* 65.65px indent, matching Figma rows */
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px */
}
.page-compare-silver-pulsers .which-compare__link {
  text-decoration: underline;
}
.page-compare-silver-pulsers .which-compare__col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.278em;
  font-size: 1.111em; /* 20px -- check/cross glyphs and column heads */
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
}
/* Header row: sticky at ALL widths (desktop restored per Brad,
   Aug 2026), pinned just below the sticky site masthead via
   --masthead-h, with the green accent rule beneath it. Cells use
   the OPAQUE tint tokens so rows cannot show through while pinned. */
.page-compare-silver-pulsers .which-compare__head {
  position: sticky;
  top: var(--masthead-h);
  z-index: 2;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-accent);
  /* The row's own (opaque, sticky-needed) background is a square box;
     without matching radii it juts past the card's rounded border and
     the top corners look cut off. */
  border-top-left-radius: calc(var(--radius-panel) - 1px);
  border-top-right-radius: calc(var(--radius-panel) - 1px);
}
.page-compare-silver-pulsers .which-compare__head .which-compare__col--sp8  { background: var(--color-accent-t60); }
.page-compare-silver-pulsers .which-compare__head .which-compare__col--sp7  { background: var(--color-accent-t40); }
.page-compare-silver-pulsers .which-compare__head .which-compare__col--lite { background: var(--color-accent-t30); }

/* Header row cells are taller (10px block padding per Figma) */
.page-compare-silver-pulsers .which-compare__head .which-compare__col {
  padding-top: 0.5em;    /* 10px at 20px */
  padding-bottom: 0.5em;
}
/* Round the top corner CHILDREN directly -- the container's own
   rounded border is otherwise painted over by the flush cell fills
   (COMPONENTS.md accordion-corner anti-pattern). */
.page-compare-silver-pulsers .which-compare__head .which-compare__feature-head {
  border-top-left-radius: calc(var(--radius-panel) - 1px);
}
.page-compare-silver-pulsers .which-compare__head .which-compare__col--lite {
  border-top-right-radius: calc(var(--radius-panel) - 1px);
}
/* Column tint ramp from the Figma: SP8 darkest, Lite lightest */
.page-compare-silver-pulsers .which-compare__col--sp8  { background: var(--color-accent-a60); }
.page-compare-silver-pulsers .which-compare__col--sp7  { background: var(--color-accent-a40); }
.page-compare-silver-pulsers .which-compare__col--lite { background: var(--color-accent-a30); }
/* In-cell feature labels: mobile-only (Figma 13587:23305). At desktop
   the Features column carries the labels and these stay hidden. */
.page-compare-silver-pulsers .which-compare__cell-label { display: none; }

/* Text value cells (e.g. "3 years", "6 pairs"): 18px bold, grey */
.page-compare-silver-pulsers .which-compare__col--val {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-grey-text);
}
/* X-mark cells are de-emphasised per Figma: same dark tone as the
   checks but at 40% alpha. */
.page-compare-silver-pulsers .which-compare__col--no {
  color: rgba(58, 58, 58, 0.40);
}

/* Last row closes the card: no trailing hairline (the card border does
   that job) and bottom corners rounded on the corner cells directly. */
.page-compare-silver-pulsers .which-compare__row:last-child { border-bottom: 0; }
.page-compare-silver-pulsers .which-compare__row:last-child .which-compare__feature {
  border-bottom-left-radius: calc(var(--radius-panel) - 1px);
}
.page-compare-silver-pulsers .which-compare__row:last-child .which-compare__col--lite {
  border-bottom-right-radius: calc(var(--radius-panel) - 1px);
}

/* Accessories sub-header row: bold label, no checkmarks */
.page-compare-silver-pulsers .which-compare__row--subhead .which-compare__feature {
  font-weight: 700;
  font-size: 1.222em; /* 22px, matches "Features" head weight */
  line-height: 1.136;
  color: var(--color-grey-text);
  padding-left: 1.364em; /* 30px at 22px -- aligns with the Features head */
}
.page-compare-silver-pulsers .which-compare__row--subhead .which-compare__col {
  min-height: 2.333em; /* 42px, per Figma */
}

/* Which-model responsive. Cards hold 3-across and the table holds its
   fluid no-scroll grid through the tablet tier; both flip at the
   standard 767 phone tier (cards stack, table scrolls with a frozen
   Features column). */
@media (max-width: 1024px) {
  /* Squeeze the table fluidly -- columns share the width; NO
     horizontal scroll at this tier (that starts at the 767 phone tier). */
  .page-compare-silver-pulsers .which-compare__head,
  .page-compare-silver-pulsers .which-compare__row {
    grid-template-columns: minmax(0, 1.5fr) 1fr 1fr 1fr;
  }
  .page-compare-silver-pulsers .which-compare__feature {
    padding-left: 1.111em;  /* 20px -- reduce big indent on small screens */
    padding-right: 0.556em; /* 10px */
  }
  .page-compare-silver-pulsers .which-compare__row--subhead .which-compare__feature {
    padding-left: 0.909em; /* 20px at 22px */
  }
}

@media (max-width: 767px) {
  .page-compare-silver-pulsers .which__cards {
    grid-template-columns: 1fr;
    gap: 1.111em;
  }
  /* Mobile chart (Figma 13587:23305): NO horizontal scrolling -- the
     chart shrinks with the screen. The Features column disappears;
     three fluid columns fill the width and every cell stacks its own
     label (15px regular) above its value. Since nothing scrolls, the
     sticky header keeps working at this tier too. (The scrollbar pill
     drawn in the Figma is a relic of the scrolled design -- omitted.) */
  .page-compare-silver-pulsers .which-compare__head,
  .page-compare-silver-pulsers .which-compare__row {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .page-compare-silver-pulsers .which-compare__feature-head,
  .page-compare-silver-pulsers .which-compare__feature,
  .page-compare-silver-pulsers .which-compare__row--subhead {
    display: none; /* labels move into the cells; no Accessories divider on mobile */
  }
  .page-compare-silver-pulsers .which-compare__col {
    flex-direction: column;
    font-size: 1em; /* 18px anchor so label/value ems below are exact */
    padding: 0.278em; /* 5px */
  }
  .page-compare-silver-pulsers .which-compare__cell-label {
    display: block;
    font-size: 0.833em; /* 15px */
    font-weight: 400;
    line-height: 1.333; /* 20px */
    text-align: center;
    color: var(--color-dark);
  }
  .page-compare-silver-pulsers .which-compare__cell-value {
    font-size: 1.111em; /* 20px check/cross glyphs */
    line-height: 1.6;   /* 32px */
  }
  .page-compare-silver-pulsers .which-compare__col--val .which-compare__cell-value {
    font-size: 0.833em; /* 15px bold text values */
    font-weight: 700;
    line-height: 1.333; /* 20px */
  }
  /* Header cells: 22px bold per the mobile Figma */
  .page-compare-silver-pulsers .which-compare__head .which-compare__col {
    font-size: 1.222em;
  }
  /* With the white Features cells gone, the SP8 column owns the left
     corners -- round the corner cells directly (anti-pattern rule). */
  .page-compare-silver-pulsers .which-compare__head .which-compare__col--sp8 {
    border-top-left-radius: calc(var(--radius-panel) - 1px);
  }
  .page-compare-silver-pulsers .which-compare__row:last-child .which-compare__col--sp8 {
    border-bottom-left-radius: calc(var(--radius-panel) - 1px);
  }
}

/* Phone-only */
@media (max-width: 767px) {
  .page-compare-silver-pulsers .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ===========================================================
   PAGE-BOTTOM WAVE.
   The wrapper (.page-wave) is owned by the shared css/site-footer.css.
   Page adds: full-width img + air above + zero bottom padding on the
   final section so the wave tucks against the footer's blue band.
=========================================================== */
.page-compare-silver-pulsers .page-wave { margin-top: var(--space-section-y); }
.page-compare-silver-pulsers .page-wave__img {
  display: block;
  width: 100%;
  height: auto;
}
.page-compare-silver-pulsers .section-which-model { padding-bottom: 0; }