/* ============================================================
   V2H-NAVY — Illustrated Scene on Reference Deep Navy (#1d3a44)
   Most sophisticated / least Pettable-looking variation:
   - Backdrop is Reference navy-deep -> near-black gradient.
   - Characters use cream + mint + coral so they read as a coherent
     editorial illustration against the navy.
   - Coral CTA pops harder against navy than against teal or cream.
   ============================================================ */

/* ---------- HERO BACKDROP (Reference navy) ---------- */
.wag-hero--illustrated {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1d3a44 0%, #16303a 70%, #0d2027 100%);
  padding: 4rem 0 6rem;
  min-height: 540px;
  color: #b4e0d8;  /* mint — used by pawtrail's currentColor */
  display: flex;
  align-items: center;
}

/* Scattered paw print layer */
.wag-hero__paws {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.wag-paw {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.wag-paw--mobile { display: none; }
@media (max-width: 720px) {
  .wag-paw { transform-origin: center; }
  .wag-paw--desktop { display: none; }
  .wag-paw--mobile  { display: block; }
  /* Hide top-of-hero paws on mobile so they don't collide with the headline */
  .wag-paw--mobile[style*="top:"] { display: none; }
}

.wag-hero__ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.45) 100%);
  border-bottom: 2px solid rgba(0,0,0,0.45);
}

.wag-hero__char {
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 320px;
  z-index: 1;
  /* When rendered as <img>, preserve aspect ratio and anchor to the ground */
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}
.wag-hero__char--left  { left: 0; }
.wag-hero__char--right { right: 0; }

.wag-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ============================================================
   HERO STAR RATING + CUSTOMER COUNT
   Sits below money-back microcopy; coral stars on navy backdrop.
   ============================================================ */
.wag-hero__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.wag-hero__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #ff5c39;
}
.wag-hero__stars svg {
  width: 18px;
  height: 18px;
  display: block;
}
.wag-hero__rating-text {
  font-family: var(--wag-font-ui);
  font-size: 14px;
  color: rgba(246, 244, 238, 0.92);
  letter-spacing: 0.01em;
}
.wag-hero__rating-text strong {
  color: #f6f4ee;
  font-weight: 700;
}

/* ---------- HERO TYPOGRAPHY (cream on navy) ---------- */
.wag-hero--illustrated h1 {
  font-size: 2.25rem;
  color: #f6f4ee;
}
.wag-hero__br-desktop { display: none; }
@media (min-width: 768px) {
  .wag-hero__br-desktop { display: inline; }
}
.wag-hero--illustrated h1 .headline-underline-coral {
  text-decoration-color: #ff5c39;
}
.wag-hero--illustrated .wag-hero__subhead {
  color: rgba(246, 244, 238, 0.82);
}
.wag-hero--illustrated .wag-hero__microcopy {
  color: rgba(180, 224, 216, 0.92);
  margin-top: 1rem;
}

/* ---------- CHARACTER PALETTE (navy variant) ---------- */
/* Person clothing — editorial cream/mint/coral on navy */
.char-coat        { fill: #b4e0d8; }            /* mint coat — pops on navy */
.char-coat-stroke { stroke: #b4e0d8; }
.char-pants       { fill: #2e3644; }            /* charcoal — subtle on navy */
.char-jacket      { fill: #ff5c39; }            /* Reference coral — focal point */
.char-jacket-stroke { stroke: #ff5c39; }
.char-jeans       { fill: #f6f4ee; }            /* cream — flip dark/light */
.char-skin        { fill: #f3c79f; }            /* warm skin */
.char-hair        { fill: #2e2118; }            /* near black */
.char-hair-dark   { fill: #14100b; }            /* black */
/* Pets */
.char-dog         { fill: #f0c787; }            /* light golden — pops on navy */
.char-dog-small   { fill: #f6f4ee; }            /* cream terrier */
/* Foliage */
.char-leaf        { fill: #6cc1b6; }            /* mint leaves */
.char-tree        { fill: #799f2d; }            /* olive-green (Reference success green) */

/* ---------- RESPONSIVE ---------- */
@media (min-width: 768px) {
  .wag-hero--illustrated {
    padding: 6rem 0 7rem;
    min-height: clamp(640px, 78vh, 820px);
  }
  .wag-hero--illustrated h1 { font-size: 4rem; }
  .wag-hero__char {
    width: 320px;
    height: 440px;
  }
}

@media (min-width: 1100px) {
  .wag-hero__char {
    width: 480px;
    height: 640px;
  }
  .wag-hero__char--left { left: 20px; }
  .wag-hero__char--right { right: 20px; }
}

@media (max-width: 767px) {
  .wag-hero--illustrated {
    padding: 4rem 0 240px;
    min-height: 580px;
  }
  /* Both characters: matched sizes for visual balance */
  .wag-hero__char--left {
    width: 200px;
    height: 260px;
    left: 0;
    bottom: 0;
    opacity: 0.95;
  }
  .wag-hero__char--right {
    display: block;
    width: 200px;
    height: 260px;
    right: 0;
    bottom: 0;
    opacity: 0.95;
  }
  .wag-footer { padding-bottom: 5rem; }
}

/* On smaller phones (≤390px), shrink both characters */
@media (max-width: 390px) {
  .wag-hero__char--left  { width: 170px; height: 220px; left: 0; }
  .wag-hero__char--right { width: 170px; height: 220px; right: 0; }
}

/* On ultra-narrow phones (≤340px), keep both visible but smaller */
@media (max-width: 340px) {
  .wag-hero__char--left  { width: 145px; height: 190px; }
  .wag-hero__char--right { width: 145px; height: 190px; display: block; }
}


/* ============================================================
   THERAPIST CARDS — centered 3-up grid on desktop
   The shared component uses a horizontal-scroll snap layout for
   mobile carousels; on desktop we want a centered 3-up grid so
   the row reads as a balanced credibility shelf rather than a
   left-aligned scroll-rail.
   ============================================================ */
@media (min-width: 768px) {
  .wag-therapists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 260px));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    justify-content: center;
    gap: 1.5rem;
    overflow: visible;
    margin: 0 auto;
    padding: 0.5rem 0 1rem;
    max-width: 100%;
  }
  .wag-therapist {
    scroll-snap-align: none;
  }
}

/* ============================================================
   ALTERNATING SECTION RHYTHM (V2H-Navy only)
   Hero (navy) -> Trust bar (cool gray) -> Timeline (cream) ->
   Why EPC (navy) -> Therapists (cream) -> Testimonial (navy) ->
   Guarantee (cream) -> FAQ (navy) -> Footer (already navy).
   We target sections by id so no HTML changes are needed.
   ============================================================ */

/* ---------- TRUST BAR — cool clinical gray ---------- */
.wag-trust-bar {
  background: #f1f3f5;
  border-top: 1px solid #e4e7eb;
  border-bottom: 1px solid #e4e7eb;
}
.wag-trust-bar__label {
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.wag-trust-logo {
  font-family: var(--wag-font-ui);   /* Inter, not Source Serif — reads as a label, not a title */
  color: #1d3a44;
  background: #fff;
  border: 1px solid #e4e7eb;
  font-weight: 600;
  font-size: 0.8125rem;
  opacity: 1;
  letter-spacing: 0.01em;
}

/* ============================================================
   DARK SECTIONS — Why EPC, Verified Customer, FAQ
   ============================================================ */

/* Base dark-section treatment shared by #why, #reviews, #faq */
#why, #reviews, #faq {
  background: linear-gradient(180deg, #1d3a44 0%, #16303a 100%);
  color: #f6f4ee;
}

/* ---------- Headlines + body on dark ---------- */
#why h2, #reviews h2, #faq h2,
#why h3, #reviews h3, #faq h3,
#why h4, #reviews h4, #faq h4 {
  color: #f6f4ee;
}
#why .section-title-block p,
#reviews .section-title-block p,
#faq .section-title-block p {
  color: rgba(246, 244, 238, 0.78);
}
#why .section-eyebrow,
#compare .section-eyebrow,
#reviews .section-eyebrow,
#faq .section-eyebrow {
  color: #6cc1b6;  /* mint — pops on navy */
}

/* Underline-coral on dark — keep coral but a touch brighter for contrast */
#why .headline-underline-coral,
#compare .headline-underline-coral,
#reviews .headline-underline-coral,
#faq .headline-underline-coral {
  text-decoration-color: #ff7a5c;
}

/* Compare section h2 — cream on navy, match other navy sections */
#compare .section-title-block h2 { color: #f6f4ee; }
#compare .section-title-block p { color: rgba(246, 244, 238, 0.74); }

/* ============================================================
   WHY EPC on navy
   ============================================================ */

/* Hero stat cards re-skinned for navy */
#why .wag-why-hero {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
}
#why .wag-why-hero::before {
  background: #ff5c39;
  opacity: 0.95;
}
#why .wag-why-hero__icon-stack {
  background: rgba(108, 193, 182, 0.18);
  color: #b4e0d8;
}
#why .wag-why-hero__stat,
#why .wag-why-hero__stat-suffix {
  color: #ff7a5c;
}
#why .wag-why-hero__title {
  color: #f6f4ee;
}
#why .wag-why-hero__desc {
  color: rgba(246, 244, 238, 0.78);
}

/* Secondary cards re-skinned for navy */
#why .wag-why-row {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#why .wag-why-row__icon {
  background: rgba(255, 255, 255, 0.08);
  color: #ff7a5c;
}
#why .wag-why-row__title {
  color: #f6f4ee;
}
#why .wag-why-row__desc {
  color: rgba(246, 244, 238, 0.72);
}

/* ============================================================
   VERIFIED CUSTOMER (testimonial) on navy
   ============================================================ */
#reviews .wag-testimonial-feature {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#reviews .wag-testimonial-feature__quote .wag-testimonial__quote {
  color: #f6f4ee;
}
#reviews .wag-testimonial-feature__attribution {
  color: rgba(246, 244, 238, 0.78);
}
#reviews .wag-testimonial-feature__attribution strong {
  color: #f6f4ee;
}
#reviews .wag-testimonial-feature__attribution .wag-testimonial__verified {
  background: rgba(108, 193, 182, 0.18);
  color: #b4e0d8;
}

/* ============================================================
   FAQ on navy
   ============================================================ */
#faq .wag-faq__item {
  border-bottom: 1px solid rgba(246, 244, 238, 0.15);
}
#faq .wag-faq__q {
  color: #f6f4ee;
  background: transparent;
}
#faq .wag-faq__q:hover {
  color: #ff7a5c;
}
#faq .wag-faq__plus {
  color: #ff7a5c;
}
#faq .wag-faq__a {
  color: rgba(246, 244, 238, 0.78);
}
#faq .wag-faq__a p {
  color: rgba(246, 244, 238, 0.78);
}

/* ============================================================
   STEPS — 3-tile "What comes next" (Pettable-style 3-up)
   Cream section, coral accents, peach-blob icon illustrations.
   ============================================================ */
.wag-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0 auto;
  max-width: 1120px;
}

.wag-step-tile {
  background: #ffffff;
  border: 1px solid rgba(29, 58, 68, 0.08);
  border-radius: 20px;
  padding: 32px 28px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 0 rgba(29, 58, 68, 0.04), 0 8px 24px -16px rgba(29, 58, 68, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wag-step-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(29, 58, 68, 0.04), 0 16px 36px -18px rgba(29, 58, 68, 0.28);
}

.wag-step-tile__num {
  font-family: var(--wag-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5c39;
  margin-bottom: 14px;
}

.wag-step-tile__icon {
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.wag-step-tile__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wag-step-tile__title {
  font-family: var(--wag-font-heading);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: #1d3a44;
  margin: 0 0 10px;
  max-width: 280px;
}

.wag-step-tile__desc {
  font-family: var(--wag-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(29, 58, 68, 0.78);
  margin: 0;
  max-width: 300px;
}

.wag-steps-reassurance {
  margin-top: 16px;
  font-family: var(--wag-font-ui);
  font-size: 13px;
  color: rgba(29, 58, 68, 0.62);
}

/* Tablet — 3-up stays but tighten */
@media (max-width: 980px) {
  .wag-steps-grid { gap: 18px; }
  .wag-step-tile { padding: 26px 20px 28px; }
  .wag-step-tile__icon { width: 144px; height: 144px; }
  .wag-step-tile__title { font-size: 20px; }
}

/* Mobile — stack */
@media (max-width: 720px) {
  .wag-steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 440px;
  }
  .wag-step-tile {
    padding: 28px 24px;
    border-radius: 18px;
  }
  .wag-step-tile__icon { width: 156px; height: 156px; margin-bottom: 14px; }
  .wag-step-tile__title { font-size: 21px; }
  .wag-step-tile__desc  { font-size: 15px; }
}

/* ============================================================
   COMPARE — "Us vs. Them" section (4 variants × 2 themes)
   Namespaces:
     .wag-cmp-table   — Variant A (3-column classic)
     .wag-cmp-split   — Variant B (Them vs. Us split-screen)
     .wag-cmp-stats   — Variant C (4 hero stat callouts)
     .wag-cmp-hybrid  — Variant D (stats + compact table)
   Theme modifiers (apply to the section itself):
     .wag-cmp--cream  — light/cream background
     .wag-cmp--navy   — dark navy background
   ============================================================ */

/* ---------- Section shell + theme ---------- */
.wag-cmp {
  --wag-coral: #ff5c39;
  --wag-coral-soft: #ffe6df;
  --wag-mint: #b4e0d8;
  --wag-navy: #1d3a44;
  --wag-cream: #f6f4ee;
  position: relative;
  padding: 80px 0;
}
.wag-cmp--cream {
  background: #f6f4ee;
  color: var(--wag-navy);
}
.wag-cmp--navy {
  background: linear-gradient(180deg, #1d3a44 0%, #16303a 100%);
  color: rgba(246, 244, 238, 0.92);
}
.wag-cmp .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.wag-cmp__eyebrow {
  display: inline-block;
  font-family: var(--wag-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.wag-cmp--cream .wag-cmp__eyebrow {
  background: var(--wag-coral-soft);
  color: var(--wag-coral);
}
.wag-cmp--navy .wag-cmp__eyebrow {
  background: rgba(255, 92, 57, 0.18);
  color: #ff8a6c;
}

.wag-cmp__title {
  font-family: var(--wag-font-heading);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.wag-cmp--cream .wag-cmp__title { color: var(--wag-navy); }
.wag-cmp--navy  .wag-cmp__title { color: #f6f4ee; }

.wag-cmp__subtitle {
  font-family: var(--wag-font-body);
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 0 40px;
}
.wag-cmp--cream .wag-cmp__subtitle { color: rgba(29, 58, 68, 0.72); }
.wag-cmp--navy  .wag-cmp__subtitle { color: rgba(246, 244, 238, 0.74); }

.wag-cmp__header { text-align: center; margin-bottom: 36px; }
.wag-cmp__header .wag-cmp__subtitle { margin-left: auto; margin-right: auto; }

.wag-cmp__cta-wrap {
  margin-top: 36px;
  text-align: center;
}
.wag-cmp__reassurance {
  margin-top: 14px;
  font-family: var(--wag-font-ui);
  font-size: 13px;
}
.wag-cmp--cream .wag-cmp__reassurance { color: rgba(29, 58, 68, 0.6); }
.wag-cmp--navy  .wag-cmp__reassurance { color: rgba(246, 244, 238, 0.6); }

.wag-cmp__disclaimer {
  margin-top: 28px;
  font-family: var(--wag-font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.wag-cmp--cream .wag-cmp__disclaimer { color: rgba(29, 58, 68, 0.48); }
.wag-cmp--navy  .wag-cmp__disclaimer { color: rgba(246, 244, 238, 0.42); }

.wag-cmp__headline-accent {
  background-image: linear-gradient(180deg, transparent 62%, rgba(255, 92, 57, 0.32) 62%, rgba(255, 92, 57, 0.32) 92%, transparent 92%);
  padding: 0 2px;
}

/* ============================================================
   VARIANT A — Classic 3-column comparison table
   ============================================================ */
.wag-cmp-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(29, 58, 68, 0.06), 0 24px 60px -38px rgba(29, 58, 68, 0.35);
  background: #ffffff;
}
.wag-cmp--navy .wag-cmp-table {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -28px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.wag-cmp-table__col {
  display: contents;
}
.wag-cmp-table__cell {
  padding: 18px 20px;
  font-family: var(--wag-font-ui);
  font-size: 14.5px;
  line-height: 1.45;
  border-bottom: 1px solid rgba(29, 58, 68, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Feature-label column stays left-aligned for readability */
.wag-cmp-table__cell.wag-cmp-table__rowlabel {
  justify-content: flex-start;
  text-align: left;
}
.wag-cmp--navy .wag-cmp-table__cell {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.wag-cmp-table__cell:nth-last-child(-n+4) { border-bottom: 0; }

.wag-cmp-table__rowlabel {
  font-weight: 600;
  color: var(--wag-navy);
  font-size: 15px;
}
.wag-cmp--navy .wag-cmp-table__rowlabel { color: #f6f4ee; }

/* Column header row */
.wag-cmp-table__head {
  padding: 22px 20px 18px;
  font-family: var(--wag-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(29, 58, 68, 0.6);
  border-bottom: 1px solid rgba(29, 58, 68, 0.08);
  background: rgba(29, 58, 68, 0.025);
  justify-content: center;
  text-align: center;
}
.wag-cmp--navy .wag-cmp-table__head {
  color: #f6f4ee;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

/* EPC column emphasis */
.wag-cmp-table__cell--epc {
  background: rgba(255, 92, 57, 0.05);
  color: var(--wag-navy);
  font-weight: 600;
  position: relative;
}
.wag-cmp--navy .wag-cmp-table__cell--epc {
  background: rgba(255, 92, 57, 0.12);
  color: #f6f4ee;
}
.wag-cmp-table__head--epc,
.wag-cmp--cream .wag-cmp-table__head--epc,
.wag-cmp--navy  .wag-cmp-table__head--epc {
  background: var(--wag-coral);
  color: #ffffff;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  padding: 18px 20px;
  position: relative;
  border-bottom-color: rgba(255, 92, 57, 0.4);
}
/* "Most chosen" ribbon removed per design feedback */

.wag-cmp-table__head--brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wag-cmp-table__head--brand strong {
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.wag-cmp-table__head--brand span {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.85;
}

/* Check/X/dash icons */
.wag-icon-check, .wag-icon-x, .wag-icon-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Inside the EPC "us" panel (variant B), keep right margin so check sits before text */
.wag-cmp-split__item .wag-icon-check,
.wag-cmp-split__item .wag-icon-x { margin-right: 0; }
/* Stats strip checks */
.wag-cmp-stats-strip__item .wag-icon-check { margin-right: 0; }
.wag-icon-check { background: var(--wag-coral); color: #fff; font-size: 13px; }
.wag-icon-x { background: transparent; border: 1.5px solid rgba(29, 58, 68, 0.25); color: rgba(29, 58, 68, 0.4); font-size: 13px; }
.wag-icon-dash { background: transparent; color: rgba(29, 58, 68, 0.35); font-size: 18px; }
.wag-cmp--navy .wag-icon-x { border-color: rgba(246, 244, 238, 0.85); color: #f6f4ee; }
.wag-cmp--navy .wag-icon-dash { color: #f6f4ee; }

.wag-cmp-table__value {
  font-weight: 600;
}
.wag-cmp-table__value--muted {
  color: rgba(29, 58, 68, 0.55);
  font-weight: 500;
}
.wag-cmp--navy .wag-cmp-table__value--muted { color: #f6f4ee; font-weight: 600; }

/* Tablet */
@media (max-width: 980px) {
  .wag-cmp-table { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .wag-cmp-table__cell { padding: 14px 12px; font-size: 13px; }
  .wag-cmp-table__rowlabel { font-size: 13.5px; }
}

/* Mobile-card list is hidden by default; revealed in the @media block below */
.wag-cmp-table-mobile { display: none; }

/* Mobile — stack as feature-card list */
@media (max-width: 720px) {
  .wag-cmp-table {
    display: block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .wag-cmp-table__head { display: none; }
  .wag-cmp-table__cell { display: none; }
  .wag-cmp-table-mobile { display: block; }
}

/* Mobile card — two side-by-side columns (EPC vs. one competitor) */
.wag-cmp-mobile-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 16px 18px;
  margin-bottom: 10px;
  border: 1px solid rgba(29, 58, 68, 0.06);
  box-shadow: 0 1px 0 rgba(29, 58, 68, 0.04);
}
.wag-cmp--navy .wag-cmp-mobile-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
.wag-cmp-mobile-card__label {
  font-family: var(--wag-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wag-navy);
  margin-bottom: 12px;
}
.wag-cmp--navy .wag-cmp-mobile-card__label { color: #f6f4ee; }

.wag-cmp-mobile-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wag-cmp-mobile-card__col {
  border-radius: 10px;
  padding: 10px 10px 12px;
  font-family: var(--wag-font-ui);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 78px;
}
.wag-cmp-mobile-card__col--epc {
  background: rgba(255, 92, 57, 0.08);
  border: 1px solid rgba(255, 92, 57, 0.25);
}
.wag-cmp--navy .wag-cmp-mobile-card__col--epc {
  background: rgba(255, 92, 57, 0.18);
  border-color: rgba(255, 92, 57, 0.4);
}
.wag-cmp-mobile-card__col--them {
  background: rgba(29, 58, 68, 0.03);
  border: 1px solid rgba(29, 58, 68, 0.08);
}
.wag-cmp--navy .wag-cmp-mobile-card__col--them {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.wag-cmp-mobile-card__brand {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wag-cmp-mobile-card__col--epc .wag-cmp-mobile-card__brand {
  color: var(--wag-coral);
}
.wag-cmp-mobile-card__col--them .wag-cmp-mobile-card__brand {
  color: rgba(29, 58, 68, 0.55);
}
.wag-cmp--navy .wag-cmp-mobile-card__col--them .wag-cmp-mobile-card__brand {
  color: rgba(246, 244, 238, 0.55);
}
.wag-cmp-mobile-card__value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wag-navy);
}
.wag-cmp-mobile-card__col--them .wag-cmp-mobile-card__value {
  color: rgba(29, 58, 68, 0.6);
  font-weight: 500;
}
.wag-cmp--navy .wag-cmp-mobile-card__value { color: #f6f4ee; }
.wag-cmp--navy .wag-cmp-mobile-card__col--them .wag-cmp-mobile-card__value {
  color: rgba(246, 244, 238, 0.6);
}
.wag-cmp-mobile-card__value .wag-icon-check,
.wag-cmp-mobile-card__value .wag-icon-x,
.wag-cmp-mobile-card__value .wag-icon-dash { margin: 0; }

/* ============================================================
   VARIANT B — Split-screen "Them vs. Us"
   ============================================================ */
.wag-cmp-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.wag-cmp-split__panel {
  border-radius: 22px;
  padding: 36px 32px 32px;
}
.wag-cmp-split__panel--them {
  background: rgba(29, 58, 68, 0.04);
  border: 1px solid rgba(29, 58, 68, 0.08);
}
.wag-cmp--navy .wag-cmp-split__panel--them {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.wag-cmp-split__panel--us {
  background: #ffffff;
  border: 2px solid var(--wag-coral);
  box-shadow: 0 24px 60px -32px rgba(255, 92, 57, 0.45);
  position: relative;
}
.wag-cmp--navy .wag-cmp-split__panel--us {
  background: linear-gradient(180deg, rgba(255, 92, 57, 0.12) 0%, rgba(29, 58, 68, 0.0) 100%);
  border-color: var(--wag-coral);
  box-shadow: 0 24px 60px -28px rgba(255, 92, 57, 0.5);
}

.wag-cmp-split__panel--us::before {
  content: "Waggy";
  position: absolute;
  top: -14px; left: 24px;
  background: var(--wag-coral);
  color: #fff;
  font-family: var(--wag-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(255, 92, 57, 0.5);
}

.wag-cmp-split__panel-eyebrow {
  font-family: var(--wag-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wag-cmp-split__panel--them .wag-cmp-split__panel-eyebrow { color: rgba(29, 58, 68, 0.5); }
.wag-cmp--navy .wag-cmp-split__panel--them .wag-cmp-split__panel-eyebrow { color: rgba(246, 244, 238, 0.5); }
.wag-cmp-split__panel--us .wag-cmp-split__panel-eyebrow { color: var(--wag-coral); }

.wag-cmp-split__panel-title {
  font-family: var(--wag-font-heading);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 24px;
  line-height: 1.2;
}
.wag-cmp-split__panel--them .wag-cmp-split__panel-title { color: rgba(29, 58, 68, 0.7); }
.wag-cmp--navy .wag-cmp-split__panel--them .wag-cmp-split__panel-title { color: rgba(246, 244, 238, 0.7); }
.wag-cmp-split__panel--us .wag-cmp-split__panel-title { color: var(--wag-navy); }
.wag-cmp--navy .wag-cmp-split__panel--us .wag-cmp-split__panel-title { color: #f6f4ee; }

.wag-cmp-split__list { list-style: none; padding: 0; margin: 0; }
.wag-cmp-split__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-family: var(--wag-font-ui);
  font-size: 15px;
  line-height: 1.4;
}
.wag-cmp-split__item + .wag-cmp-split__item {
  border-top: 1px solid rgba(29, 58, 68, 0.06);
}
.wag-cmp--navy .wag-cmp-split__item + .wag-cmp-split__item {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.wag-cmp-split__panel--them .wag-cmp-split__item { color: rgba(29, 58, 68, 0.62); }
.wag-cmp--navy .wag-cmp-split__panel--them .wag-cmp-split__item { color: rgba(246, 244, 238, 0.62); }
.wag-cmp-split__panel--us .wag-cmp-split__item { color: var(--wag-navy); }
.wag-cmp--navy .wag-cmp-split__panel--us .wag-cmp-split__item { color: #f6f4ee; }

.wag-cmp-split__item .wag-icon-check,
.wag-cmp-split__item .wag-icon-x {
  margin-top: 1px;
  margin-right: 0;
}

.wag-cmp-split__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  position: relative;
}
.wag-cmp-split__vs::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 92, 57, 0.25) 30%, rgba(255, 92, 57, 0.25) 70%, transparent 100%);
}
.wag-cmp-split__vs-chip {
  position: relative;
  background: var(--wag-coral);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wag-font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px -6px rgba(255, 92, 57, 0.55);
}

@media (max-width: 980px) {
  .wag-cmp-split { grid-template-columns: 1fr; }
  .wag-cmp-split__vs { width: 100%; height: 56px; flex-direction: row; }
  .wag-cmp-split__vs::before {
    top: 50%; left: 0; right: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,92,57,.25) 30%, rgba(255,92,57,.25) 70%, transparent);
  }
  .wag-cmp-split__panel { padding: 28px 22px; }
  .wag-cmp-split__panel--us::before { top: -12px; left: 18px; }
}

/* ============================================================
   VARIANT C — Hero stat-callout battlecard (4 big numbers)
   ============================================================ */
.wag-cmp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.wag-cmp-stat {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px 26px;
  border: 1px solid rgba(29, 58, 68, 0.06);
  box-shadow: 0 1px 0 rgba(29, 58, 68, 0.04), 0 16px 36px -22px rgba(29, 58, 68, 0.22);
  position: relative;
  overflow: hidden;
}
.wag-cmp--navy .wag-cmp-stat {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.wag-cmp-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--wag-coral);
}
.wag-cmp-stat__label {
  font-family: var(--wag-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wag-cmp--cream .wag-cmp-stat__label { color: rgba(29, 58, 68, 0.55); }
.wag-cmp--navy  .wag-cmp-stat__label { color: rgba(246, 244, 238, 0.6); }

.wag-cmp-stat__number {
  font-family: var(--wag-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--wag-coral);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.wag-cmp-stat__number-unit {
  font-size: 22px;
  font-weight: 600;
  color: var(--wag-coral);
  opacity: 0.85;
}
.wag-cmp-stat__claim {
  font-family: var(--wag-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 89999px 0 6px;
}
.wag-cmp--cream .wag-cmp-stat__claim { color: var(--wag-navy); }
.wag-cmp--navy  .wag-cmp-stat__claim { color: #f6f4ee; }

.wag-cmp-stat__contrast {
  font-family: var(--wag-font-ui);
  font-size: 12.5px;
  line-height: 1.4;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px dashed rgba(29, 58, 68, 0.18);
}
.wag-cmp--cream .wag-cmp-stat__contrast { color: rgba(29, 58, 68, 0.58); }
.wag-cmp--navy  .wag-cmp-stat__contrast {
  color: rgba(246, 244, 238, 0.58);
  border-top-color: rgba(255, 255, 255, 0.16);
}
.wag-cmp-stat__contrast strong {
  color: rgba(29, 58, 68, 0.85);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 92, 57, 0.6);
  text-decoration-thickness: 1.5px;
  font-weight: 600;
}
.wag-cmp--navy .wag-cmp-stat__contrast strong { color: rgba(246, 244, 238, 0.85); }

/* "What you don't get elsewhere" strip below stats */
.wag-cmp-stats-strip {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 22px 26px;
  border-radius: 16px;
  background: rgba(255, 92, 57, 0.06);
  border: 1px solid rgba(255, 92, 57, 0.18);
}
.wag-cmp--navy .wag-cmp-stats-strip {
  background: rgba(255, 92, 57, 0.1);
  border-color: rgba(255, 92, 57, 0.28);
}
.wag-cmp-stats-strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wag-font-ui);
  font-size: 13.5px;
  font-weight: 600;
}
.wag-cmp--cream .wag-cmp-stats-strip__item { color: var(--wag-navy); }
.wag-cmp--navy  .wag-cmp-stats-strip__item { color: #f6f4ee; }
.wag-cmp-stats-strip__item .wag-icon-check {
  background: var(--wag-coral);
  width: 20px; height: 20px;
  font-size: 11px;
  margin: 0;
}
.wag-cmp-stats-strip__label {
  font-family: var(--wag-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wag-coral);
  grid-column: 1 / -1;
  margin: -6px 0 -2px;
}

@media (max-width: 980px) {
  .wag-cmp-stats { grid-template-columns: repeat(2, 1fr); }
  .wag-cmp-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .wag-cmp-stat__number { font-size: 44px; }
}
@media (max-width: 480px) {
  .wag-cmp-stats { grid-template-columns: 1fr; }
  .wag-cmp-stats-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   VARIANT D — Hybrid: stats (top) + compact table (bottom)
   ============================================================ */
.wag-cmp-hybrid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.wag-cmp-hybrid .wag-cmp-stats {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .wag-cmp-hybrid .wag-cmp-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .wag-cmp-hybrid .wag-cmp-stats { grid-template-columns: 1fr; }
}
.wag-cmp-hybrid .wag-cmp-table {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.wag-cmp-hybrid__divider {
  text-align: center;
  font-family: var(--wag-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  margin: -6px 0;
}
.wag-cmp--cream .wag-cmp-hybrid__divider { color: rgba(29, 58, 68, 0.45); }
.wag-cmp--navy  .wag-cmp-hybrid__divider { color: rgba(246, 244, 238, 0.45); }
.wag-cmp-hybrid__divider::before,
.wag-cmp-hybrid__divider::after {
  content: "";
  display: inline-block;
  width: 80px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 14px;
  opacity: 0.4;
}

@media (max-width: 720px) {
  .wag-cmp-hybrid .wag-cmp-table { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE PATTERN VARIATIONS for Variant A (comparison table)
   These are independent layouts — each preview page opts into one.
   - .wag-cmp-mobile-h     : horizontal-scroll table with sticky left col
   - .wag-cmp-mobile-2col  : compact 2-col EPC-only table with contrast line
   - .wag-cmp-mobile-stack : stacked provider cards (EPC expanded coral)
   ============================================================ */

/* ----- Shared: a thin "swipe to compare" hint over horizontal-scroll variant ----- */
.wag-cmp-mobile-h__hint {
  display: none;
  font-family: var(--wag-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(29, 58, 68, 0.5);
  text-align: center;
  margin-bottom: 8px;
}
.wag-cmp--navy .wag-cmp-mobile-h__hint { color: rgba(246, 244, 238, 0.5); }

/* =================================================================
   Hide all mobile patterns by default; reveal one inside @media below.
   ================================================================= */
.wag-cmp-mobile-h,
.wag-cmp-mobile-2col,
.wag-cmp-mobile-stack,
.wag-cmp-mobile-h__hint { display: none; }

/* =================================================================
   PATTERN 1 — Horizontal-scroll table (sticky feature column)
   ================================================================= */

@media (max-width: 720px) {
  /* hide the desktop grid and the other mobile variants */
  .wag-cmp-mobile-h-active .wag-cmp-table { display: none; }
  .wag-cmp-mobile-h-active .wag-cmp-mobile-2col { display: none; }
  .wag-cmp-mobile-h-active .wag-cmp-mobile-stack { display: none; }
  .wag-cmp-mobile-h-active .wag-cmp-mobile-h { display: block; }
  .wag-cmp-mobile-h-active .wag-cmp-mobile-h__hint { display: block; }
}

.wag-cmp-mobile-h__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(29,58,68,0.05), 0 16px 36px -22px rgba(29,58,68,0.25);
  scroll-snap-type: x mandatory;
  position: relative;
}
.wag-cmp--navy .wag-cmp-mobile-h__scroll {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 16px 36px -16px rgba(0,0,0,0.45);
}

.wag-cmp-mobile-h__table {
  display: grid;
  grid-template-columns: 120px 100px 100px 100px;
  min-width: 420px;
}
.wag-cmp-mobile-h__cell { padding: 12px 8px; font-size: 12px; }
.wag-cmp-mobile-h__cell--label { padding-left: 12px; padding-right: 8px; font-size: 11.5px; line-height: 1.3; }
.wag-cmp-mobile-h__head { font-size: 10px; padding: 12px 6px; }
.wag-cmp-mobile-h__head--epc { font-size: 11px; }

.wag-cmp-mobile-h__cell {
  padding: 12px 12px;
  font-family: var(--wag-font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(29,58,68,0.06);
  background: #fff;
}
.wag-cmp--navy .wag-cmp-mobile-h__cell {
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.07);
}

/* Sticky feature label column */
.wag-cmp-mobile-h__cell--label {
  position: sticky;
  left: 0;
  z-index: 2;
  justify-content: flex-start;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: var(--wag-navy);
  background: #fff;
  box-shadow: 4px 0 8px -6px rgba(29,58,68,0.18);
  padding-left: 14px;
  padding-right: 10px;
}
.wag-cmp--navy .wag-cmp-mobile-h__cell--label {
  color: #f6f4ee;
  background: #1d3a44;
  box-shadow: 4px 0 8px -6px rgba(0,0,0,0.45);
}

/* EPC column emphasis */
.wag-cmp-mobile-h__cell--epc {
  background: rgba(255,92,57,0.06);
  font-weight: 600;
  color: var(--wag-navy);
}
.wag-cmp--navy .wag-cmp-mobile-h__cell--epc {
  background: rgba(255,92,57,0.16);
  color: #f6f4ee;
}

/* Header row */
.wag-cmp-mobile-h__head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 8px;
  color: rgba(29,58,68,0.6);
  background: rgba(29,58,68,0.025);
  border-bottom: 1px solid rgba(29,58,68,0.08);
}
.wag-cmp--navy .wag-cmp-mobile-h__head {
  color: #f6f4ee;
  background: rgba(255,255,255,0.03);
}
.wag-cmp-mobile-h__head--label { background: rgba(29,58,68,0.025); }
.wag-cmp--navy .wag-cmp-mobile-h__head--label { background: #1d3a44; }
.wag-cmp-mobile-h__head--epc {
  background: var(--wag-coral) !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.wag-cmp-mobile-h__value--muted {
  color: rgba(29,58,68,0.55);
  font-weight: 500;
}
.wag-cmp--navy .wag-cmp-mobile-h__value--muted { color: #f6f4ee; font-weight: 600; }

/* =================================================================
   PATTERN 2 — Compact 2-col EPC-only table w/ contrast line
   ================================================================= */
.wag-cmp-mobile-2col { display: none; }

@media (max-width: 720px) {
  .wag-cmp-mobile-2col-active .wag-cmp-table { display: none; }
  .wag-cmp-mobile-2col-active .wag-cmp-mobile-h { display: none; }
  .wag-cmp-mobile-2col-active .wag-cmp-mobile-stack { display: none; }
  .wag-cmp-mobile-2col-active .wag-cmp-mobile-2col { display: block; }
}

.wag-cmp-mobile-2col {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(29,58,68,0.08);
  box-shadow: 0 1px 0 rgba(29,58,68,0.04), 0 16px 36px -22px rgba(29,58,68,0.22);
}
.wag-cmp--navy .wag-cmp-mobile-2col {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.wag-cmp-mobile-2col__head {
  display: grid;
  grid-template-columns: 1fr 110px;
  padding: 14px 16px;
  background: var(--wag-coral);
  color: #fff;
  font-family: var(--wag-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: center;
}
.wag-cmp-mobile-2col__head-right {
  text-align: center;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.wag-cmp-mobile-2col__row {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid rgba(29,58,68,0.06);
}
.wag-cmp--navy .wag-cmp-mobile-2col__row {
  border-top-color: rgba(255,255,255,0.07);
}
.wag-cmp-mobile-2col__row:first-of-type { border-top: 0; }

.wag-cmp-mobile-2col__label {
  font-family: var(--wag-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wag-navy);
}
.wag-cmp--navy .wag-cmp-mobile-2col__label { color: #f6f4ee; }

.wag-cmp-mobile-2col__contrast {
  display: block;
  font-family: var(--wag-font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(29,58,68,0.55);
  margin-top: 3px;
}
.wag-cmp--navy .wag-cmp-mobile-2col__contrast { color: rgba(246,244,238,0.55); }
.wag-cmp-mobile-2col__contrast s { text-decoration-color: rgba(255,92,57,0.5); text-decoration-thickness: 1.5px; }

.wag-cmp-mobile-2col__val {
  text-align: center;
  font-family: var(--wag-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--wag-navy);
  background: rgba(255,92,57,0.08);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,92,57,0.2);
}
.wag-cmp--navy .wag-cmp-mobile-2col__val {
  color: #f6f4ee;
  background: rgba(255,92,57,0.18);
  border-color: rgba(255,92,57,0.4);
}
.wag-cmp-mobile-2col__val .wag-icon-check {
  background: var(--wag-coral);
  width: 22px; height: 22px;
}

/* =================================================================
   PATTERN 3 — Stacked provider cards (EPC expanded coral, others muted)
   ================================================================= */
.wag-cmp-mobile-stack { display: none; }

@media (max-width: 720px) {
  .wag-cmp-mobile-stack-active .wag-cmp-table { display: none; }
  .wag-cmp-mobile-stack-active .wag-cmp-mobile-h { display: none; }
  .wag-cmp-mobile-stack-active .wag-cmp-mobile-2col { display: none; }
  .wag-cmp-mobile-stack-active .wag-cmp-mobile-stack { display: flex; }
}

.wag-cmp-mobile-stack-active .wag-cmp-mobile-stack {
  flex-direction: column;
  gap: 14px;
}

.wag-cmp-provider {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(29,58,68,0.08);
  position: relative;
}
.wag-cmp--navy .wag-cmp-provider {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.wag-cmp-provider--epc {
  background: #ffffff;
  border: 2px solid var(--wag-coral);
  box-shadow: 0 24px 60px -32px rgba(255,92,57,0.45);
}
.wag-cmp--navy .wag-cmp-provider--epc {
  background: linear-gradient(180deg, rgba(255,92,57,0.14), rgba(255,92,57,0.02));
  border-color: var(--wag-coral);
  box-shadow: 0 24px 60px -28px rgba(255,92,57,0.5);
}
.wag-cmp-provider--epc::before {
  content: "Waggy";
  position: absolute;
  top: -12px; left: 20px;
  background: var(--wag-coral);
  color: #fff;
  font-family: var(--wag-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(255,92,57,0.5);
}

.wag-cmp-provider__name {
  font-family: var(--wag-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(29,58,68,0.55);
  margin: 0 0 4px;
}
.wag-cmp--navy .wag-cmp-provider__name { color: rgba(246,244,238,0.55); }
.wag-cmp-provider--epc .wag-cmp-provider__name {
  color: var(--wag-coral);
  margin-top: 4px;
}
.wag-cmp--navy .wag-cmp-provider--epc .wag-cmp-provider__name { color: #ff9a7a; }

.wag-cmp-provider__tag {
  font-family: var(--wag-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--wag-navy);
}
.wag-cmp--navy .wag-cmp-provider__tag { color: #f6f4ee; }
.wag-cmp-provider--them .wag-cmp-provider__tag {
  color: rgba(29,58,68,0.68);
  font-weight: 500;
}
.wag-cmp--navy .wag-cmp-provider--them .wag-cmp-provider__tag {
  color: rgba(246,244,238,0.68);
}

.wag-cmp-provider__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wag-cmp-provider__item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-family: var(--wag-font-ui);
  font-size: 13px;
}
.wag-cmp-provider__item + .wag-cmp-provider__item {
  border-top: 1px solid rgba(29,58,68,0.06);
}
.wag-cmp--navy .wag-cmp-provider__item + .wag-cmp-provider__item {
  border-top-color: rgba(255,255,255,0.07);
}
.wag-cmp-provider__item-label {
  color: var(--wag-navy);
  line-height: 1.3;
  font-weight: 600;
}
.wag-cmp--navy .wag-cmp-provider__item-label { color: #f6f4ee; }
.wag-cmp-provider--them .wag-cmp-provider__item-label {
  color: rgba(29,58,68,0.65);
  font-weight: 500;
}
.wag-cmp--navy .wag-cmp-provider--them .wag-cmp-provider__item-label {
  color: rgba(246,244,238,0.65);
}
.wag-cmp-provider__item-value {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--wag-navy);
  text-align: right;
}
.wag-cmp-provider--them .wag-cmp-provider__item-value {
  color: rgba(29,58,68,0.5);
  font-weight: 500;
}
.wag-cmp--navy .wag-cmp-provider__item-value { color: #f6f4ee; }
.wag-cmp--navy .wag-cmp-provider--them .wag-cmp-provider__item-value {
  color: rgba(246,244,238,0.5);
}

/* ==========================================================================
   CLINICAL TEAM SECTION — rich cards + stat strip (cream-themed)
   ========================================================================== */

.wag-clin-section .section-title-block { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.wag-clin-section .section-title-block .section-eyebrow { display: block; text-align: center; }
.wag-clin-section .section-title-block h2 { letter-spacing: -0.02em; text-align: center; }
.wag-clin-section .section-title-block p { font-size: 17px; line-height: 1.55; color: #4a5358; text-align: center; }

/* Trust stat strip */
.wag-clin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 32px auto 40px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid rgba(29, 58, 68, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 28px -18px rgba(29, 58, 68, 0.18);
}
.wag-clin-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 8px;
  border-right: 1px solid rgba(29, 58, 68, 0.08);
}
.wag-clin-stat:last-child { border-right: 0; }
.wag-clin-stat__num {
  font-family: var(--wag-font-heading);
  font-size: 30px;
  font-weight: 600;
  color: var(--wag-teal-dark);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.wag-clin-stat:nth-child(4) .wag-clin-stat__num { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.wag-clin-stat__label {
  margin-top: 8px;
  font-family: var(--wag-font-ui);
  font-size: 13px;
  line-height: 1.35;
  color: #5b6770;
  max-width: 200px;
}

/* Rich clinician cards */
.wag-clin-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.wag-clin-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(29, 58, 68, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 36px -22px rgba(29, 58, 68, 0.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wag-clin-card:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -20px rgba(29, 58, 68, 0.36); }

.wag-clin-card__media {
  position: relative;
  background: linear-gradient(180deg, #d7ebe4 0%, #c5dfd5 100%);
  padding: 28px 20px 22px;
  display: flex;
  justify-content: center;
}
.wag-clin-card__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 6px 18px rgba(29, 58, 68, 0.18);
}
.wag-clin-card__badge {
  position: absolute;
  bottom: 14px;
  right: 16px;
  background: var(--wag-teal-dark);
  color: #ffffff;
  font-family: var(--wag-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}

.wag-clin-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.wag-clin-card__name {
  font-family: var(--wag-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--wag-teal-dark);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.wag-clin-card__name span { color: var(--wag-coral); font-weight: 600; }
.wag-clin-card__credential {
  font-family: var(--wag-font-ui);
  font-size: 13px;
  color: #5b6770;
  margin: 0 0 16px;
}

.wag-clin-card__meta { margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wag-clin-card__meta > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: baseline;
  font-family: var(--wag-font-ui);
  font-size: 14px;
  line-height: 1.4;
}
.wag-clin-card__meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a949a;
  margin: 0;
}
.wag-clin-card__meta dd { margin: 0; color: #2a3338; }

.wag-clin-card__quote {
  margin: auto 0 0;
  padding: 18px 20px;
  background: var(--wag-cream);
  border-left: 3px solid var(--wag-coral);
  border-radius: 10px;
  font-family: var(--wag-font-body, var(--wag-font-heading));
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: #2a3338;
  min-height: 142px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.wag-clin-footnote {
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--wag-font-ui);
  font-size: 13px;
  color: #5b6770;
  letter-spacing: 0.01em;
}

/* Tablet */
@media (max-width: 1024px) {
  .wag-clin-stats { grid-template-columns: repeat(2, 1fr); }
  .wag-clin-stat:nth-child(2) { border-right: 0; }
  .wag-clin-stat:nth-child(1), .wag-clin-stat:nth-child(2) { border-bottom: 1px solid rgba(29, 58, 68, 0.08); padding-bottom: 14px; }
  .wag-clin-stat:nth-child(3), .wag-clin-stat:nth-child(4) { padding-top: 14px; }
  .wag-clin-cards { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Mobile */
@media (max-width: 720px) {
  .wag-clin-section .section-title-block p { font-size: 15.5px; }
  .wag-clin-stats {
    grid-template-columns: 1fr 1fr;
    padding: 16px 14px;
    gap: 6px;
    margin: 24px 0 28px;
    border-radius: 14px;
  }
  .wag-clin-stat { padding: 10px 6px; }
  .wag-clin-stat__num { font-size: 24px; }
  .wag-clin-stat:nth-child(4) .wag-clin-stat__num { font-size: 13px; }
  .wag-clin-stat__label { font-size: 12px; margin-top: 6px; }

  .wag-clin-cards { gap: 16px; }
  .wag-clin-card__media { padding: 22px 16px 18px; }
  .wag-clin-card__photo { width: 120px; height: 120px; }
  .wag-clin-card__body { padding: 18px 18px 20px; }
  .wag-clin-card__name { font-size: 20px; }
  .wag-clin-card__quote { font-size: 14px; padding: 14px 14px; min-height: 0; }
}

/* ==========================================================================
   MONEY-BACK GUARANTEE — premium seal + pillars
   ========================================================================== */

.wag-gtee-section { padding-top: 88px; padding-bottom: 88px; }

.wag-gtee {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255, 92, 57, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f2 100%);
  border: 1px solid rgba(29, 58, 68, 0.08);
  border-radius: 28px;
  padding: 56px 56px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 48px -32px rgba(29, 58, 68, 0.25),
    0 6px 18px -14px rgba(29, 58, 68, 0.16);
  overflow: hidden;
}

/* Decorative dotted background */
.wag-gtee__bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(29, 58, 68, 0.06) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: 0 0;
  mask-image: radial-gradient(closest-side at 50% 100%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 100%, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Illustrated guarantee badge */
.wag-gtee__seal {
  position: relative;
  width: 280px;
  height: 280px;
/*  margin: 8345px auto 0; */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wag-gtee__seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wag-gtee__eyebrow {
  display: inline-block;
  font-family: var(--wag-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wag-coral);
  margin: 0;
  position: relative;
  z-index: 1;
}
.wag-gtee__title {
  font-family: var(--wag-font-heading);
  font-size: 38px;
  font-weight: 600;
  color: var(--wag-teal-dark);
  margin: 6px 0 4px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.wag-gtee__lead {
  font-family: var(--wag-font-ui);
  font-size: 16.5px;
  line-height: 1.6;
  color: #3a464c;
  margin: 0;
  max-width: 580px;
  position: relative;
  z-index: 1;
}
.wag-gtee__lead strong { color: var(--wag-teal-dark); }

/* Tablet */
@media (max-width: 960px) {
  .wag-gtee { padding: 48px 36px 52px; gap: 22px; }
}

/* Mobile */
@media (max-width: 600px) {
  .wag-gtee-section { padding-top: 56px; padding-bottom: 56px; }
  .wag-gtee { padding: 36px 22px 32px; border-radius: 20px; gap: 22px; }
  .wag-gtee__seal { width: 240px; height: 240px; }
  .wag-gtee__title { font-size: 28px; }
  .wag-gtee__lead { font-size: 15.5px; }
}

/* ============================================================
   SMALL MOBILE (iPhone SE / iPhone 4-5 / ≤480px)
   Scale hero typography + step cards down so the page feels
   proportional, not blown-up. Placed at END of file to win the
   cascade over the base/720 mobile rules above.
   ============================================================ */
@media (max-width: 480px) {
  /* Hero: Pettable-style headline (35px) + subhead (18px) */
  .wag-hero--illustrated h1 {
    font-size: 2.1875rem; /* 35px */
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .wag-hero--illustrated .wag-hero__subhead {
    font-size: 1.125rem; /* 18px */
    line-height: 1.45;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .wag-hero--illustrated .wag-btn-primary { font-size: 1.125rem; padding: 16px 24px; }
  .wag-hero--illustrated .wag-hero__microcopy { font-size: 0.85rem; }

  /* Step tiles: vertical stack matching desktop (icon → num → title → desc, centered) */
  .wag-step-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px 30px;
    border-radius: 18px;
  }
  .wag-step-tile__num {
    font-size: 12px;
    margin-bottom: 14px;
    text-align: center;
  }
  .wag-step-tile__icon {
    width: 156px;
    height: 156px;
    margin: 0 0 18px;
    align-self: center;
  }
  .wag-step-tile__title {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 10px;
    text-align: center;
    max-width: 280px;
  }
  .wag-step-tile__desc {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    max-width: 300px;
  }
}

/* Ultra-small (iPhone 4 / 320px) */
@media (max-width: 360px) {
  .wag-hero--illustrated h1 { font-size: 1.875rem; /* 30px */ }
  .wag-hero--illustrated .wag-hero__subhead { font-size: 1rem; /* 16px */ max-width: 300px; }
  .wag-step-tile {
    padding: 24px 18px 26px;
  }
  .wag-step-tile__icon { width: 132px; height: 132px; }
  .wag-step-tile__title { font-size: 20px; }
  .wag-step-tile__desc  { font-size: 15px; }
}

/* ============================================================
   MOBILE SECTION TYPOGRAPHY (Pettable parity)
   - Section h2 headlines: 32px
   - Section subheads/body intro: 16px
   Applies to all .section-title-block on mobile (How it works,
   Compare, Clinical team, Verified customer, Guarantee, FAQ).
   ============================================================ */
@media (max-width: 767px) {
  .section-title-block h2 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .section-title-block p {
    font-size: 16px;
    line-height: 1.55;
  }
  /* Guarantee block uses its own .wag-gtee__title h3, keep aligned */
  .wag-gtee__title { font-size: 28px; }

  /* Testimonial: tighten gap between photo and quote, bump quote size */
  .wag-testimonial-feature { gap: 0; }
  .wag-testimonial-feature__quote { padding: 20px 22px 24px; }
  #reviews .wag-testimonial-feature__quote .wag-testimonial__quote,
  .wag-testimonial-feature__quote .wag-testimonial__quote {
    font-size: 19px;
    line-height: 1.5;
    margin: 0 0 14px;
  }
  .wag-testimonial-feature__attribution { font-size: 14px; }
}

/* Recolor the Waggy wordmark in the nav to match the hero background.
   We keep the existing PNG and just use it as an alpha mask filled with
   the hero's dark navy/teal. Change --wag-nav-logo-color to retint. */
.wag-nav__wordmark--mask {
    display: inline-block;
    width: 120px;
    height: 32px;
    background-color: var(--wag-nav-logo-color, #1d3a44);
    -webkit-mask: url("/assets/root/mockups/shared/img/waggy-logo.png") left center / contain no-repeat;
    mask: url("/assets/root/mockups/shared/img/waggy-logo.png") left center / contain no-repeat;
}

/* Mobile sticky CTA: drop the supporting copy, let the button stretch
   the full width so it reads as a single dominant action. */
.wag-sticky-cta {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 -8px 24px rgba(13, 32, 39, 0.08);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  gap: 0;
  border-top: 1px solid rgba(13, 32, 39, 0.06);
}
.wag-sticky-cta__btn {
  flex: 1;
  display: block;
  text-align: center;
  background: var(--wag-coral);
  color: #fff;
  padding: 0.95rem 1.25rem;
  font-size: 1rem;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(238, 97, 78, 0.35);
}