/* ==========================================================================
   CoverCapy Hero Slider · Base CSS
   Homepage-only component.
   Load before hero-slider-mobile.css.
   ========================================================================== */

/* ==========================================================================
   PRODUCTION NOTE
   This hero slider is intended for the homepage only.
   Interior pages should load the mega nav, then their own page-specific intro.
   No #page-start or #cc-land-content landing helper is needed.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════
   COVERCAPY · HERO · v500 - "The Concierge Chapters, fade engine"
   ────────────────────────────────────────────────────────────────
   Diffs from your v400:
     · Hero height reduced (78vh / 70vh) so the next section peeks.
     · Scroll-snap engine replaced with absolute-stacked opacity
       crossfade. Any latency now reads as luxury dissolve.
     · `.chapter-mark` (small "I. - Relief" labels) removed from
       slide top-left for vertical breathing room. Chapter rail
       at the bottom is still the spine.
     · `.plan-card-float` wrapper adds lava-lamp idle bob +
       dock-magnification on hover for the UHC card.
     · Chapter padding tightened slightly so 5 chapters fit
       comfortably inside the reduced hero height.
     · Everything else preserved verbatim from v400.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── Typography ─────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Baskerville', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ── CoverCapy Coastal Concierge Pearl palette ──────────────── */
  --teal:      #2F6F64;
  --teal-deep: #214E48;
  --teal-night:#102F2D;
  --teal-mist: #DCEDE8;
  --teal-faint:#F2FAF7;

  /* ── Ink & warm neutrals ────────────────────────────────────── */
  --ivory:     #FBF6EC;
  --ivory-warm:#F4EBDD;
  --paper:     #FFFDF8;
  --vellum:    #EFE4D4;
  --ink:       #142421;
  --ink-soft:  #3F5B55;
  --ink-mute:  #78908A;
  --ink-faint: #AABBB6;
  --line:      rgba(20,36,33,.08);
  --line-mid:  rgba(20,36,33,.14);
  --line-strong:rgba(20,36,33,.22);

  /* ── Accent tier ────────────────────────────────────────────── */
  --gold:      #C49A5A;
  --gold-deep: #8F6833;
  --gold-soft: #F1DFC0;
  --gold-faint:#FBF2E2;
  --sage:      #BFD6C8;
  --sage-faint:#EAF3EE;
  --mist:      #DDEBEA;
  --mist-faint:#F3F9F8;
  --plum:      #8B6F72;
  --plum-faint:#F2E6E4;

  /* ── Per-chapter signature gradient (unified coastal tint) ──── */
  --ch1-ambient: radial-gradient(1100px 700px at 88% 22%, rgba(220,237,232,.68), transparent 60%),
                 radial-gradient(900px 600px at 8% 88%, rgba(241,223,192,.34), transparent 60%);
  --ch2-ambient: radial-gradient(1100px 700px at 12% 18%, rgba(234,243,238,.72), transparent 60%),
                 radial-gradient(900px 600px at 90% 82%, rgba(249,231,223,.24), transparent 60%);
  --ch3-ambient: radial-gradient(1200px 800px at 50% 50%, rgba(241,223,192,.40), transparent 65%),
                 radial-gradient(900px 600px at 12% 12%, rgba(220,237,232,.50), transparent 60%);
  --ch4-ambient: radial-gradient(1100px 700px at 20% 90%, rgba(221,235,234,.56), transparent 60%),
                 radial-gradient(900px 600px at 88% 10%, rgba(242,230,228,.26), transparent 60%);
  --ch5-ambient: radial-gradient(1200px 800px at 88% 88%, rgba(241,223,192,.44), transparent 65%),
                 radial-gradient(900px 600px at 12% 18%, rgba(220,237,232,.54), transparent 60%);

  /* ── Radii & elevations ─────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(20,36,33,.04), 0 4px 14px rgba(20,36,33,.06);
  --sh-2: 0 2px 6px rgba(20,36,33,.05), 0 14px 38px rgba(20,36,33,.10);
  --sh-3: 0 4px 12px rgba(20,36,33,.06), 0 28px 64px rgba(20,36,33,.14);
  --sh-4: 0 8px 22px rgba(20,36,33,.08), 0 42px 96px rgba(20,36,33,.18);
  --sh-glass: 0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(255,255,255,.2) inset,
              0 18px 48px rgba(20,36,33,.14);

  /* ── Easings (cinematic) ────────────────────────────────────── */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-luxe:  cubic-bezier(.77,0,.18,1);
  --e-quiet: cubic-bezier(.22,1,.36,1);
  --e-soft:  cubic-bezier(.4,0,.2,1);

  /* ── Hero size (single source of truth) ─────────────────────── */
  --hero-h:        78vh;
  --hero-h-mobile: 70vh;
  --hero-min:      640px;
  --hero-max:      880px;
}

/* ════════════════════════════════════════════════════════════════
   0 · RESET + BASE
   ════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  font-family:var(--font-body);
  font-feature-settings:"ss01","cv11";
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  max-width:100vw;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,svg{ max-width:100%; display:block; }
::selection{ background:rgba(47,111,100,.22); color:var(--teal-night); }

.grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.12  0 0 0 0 0.15  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ════════════════════════════════════════════════════════════════
   2 · HERO FRAME - reduced height so the next section peeks
   ════════════════════════════════════════════════════════════════ */
.hero-wrap{ position:relative; }

.hero{
  position:relative;
  height:var(--hero-h);
  min-height:var(--hero-min);
  max-height:var(--hero-max);
  overflow:hidden;
  background:var(--ivory);
  isolation:isolate;
}

.hero::before{
  content:""; position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 50% 0%, rgba(255,253,247,.7), transparent 60%),
    radial-gradient(900px 600px at 12% 100%, rgba(220,237,232,.35), transparent 60%);
}

/* ── Fade-engine stage ──────────────────────────────────────────
   Chapters are absolutely stacked, only opacity transitions.
   No more horizontal scroll-snap. */
.hero-stage{
  position:absolute;
  inset:0;
  z-index:2;
}

/* ════════════════════════════════════════════════════════════════
   3 · CHAPTER - absolute-positioned, opacity crossfade
   ════════════════════════════════════════════════════════════════ */
.chapter{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap:56px;
  align-items:center;
  padding:32px clamp(48px, 7vw, 128px) 92px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .9s var(--e-luxe), visibility 0s linear .9s;
}

/* ── Wide-screen content lock ─────────────────────────────────────
   On large desktops (≥1280px), the chapter pads itself inward so the
   text column and visual column sit ~1200px apart at most - instead
   of spreading to the screen edges. Keeps eye-travel comfortable on
   1440 / 1920 / ultrawide displays without changing narrower layouts. */
@media (min-width: 1280px){
  .chapter{
    padding-left:  max(96px, calc((100vw - 1200px) / 2));
    padding-right: max(96px, calc((100vw - 1200px) / 2));
    gap: 64px;
  }
}
@media (min-width: 1600px){
  .chapter{
    padding-left:  max(96px, calc((100vw - 1240px) / 2));
    padding-right: max(96px, calc((100vw - 1240px) / 2));
  }
}
.chapter.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .9s var(--e-luxe), visibility 0s linear 0s;
  z-index:3;
}

/* Per-chapter ambient tint */
.chapter::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  transition:opacity .6s var(--e-quiet);
}
.chapter[data-ch="1"]::before{ background:var(--ch1-ambient); }
.chapter[data-ch="2"]::before{ background:var(--ch2-ambient); }
.chapter[data-ch="3"]::before{ background:var(--ch3-ambient); }
.chapter[data-ch="4"]::before{ background:var(--ch4-ambient); }
.chapter[data-ch="5"]::before{ background:var(--ch5-ambient); }

/* The watermark - gigantic emotion word that ghosts behind the
   headline. Kept (it's not the same as the .chapter-mark label
   that lived at the top-left of the slide). */
.chapter-watermark{
  position:absolute;
  top:50%;
  left:clamp(48px, 7vw, 132px);
  transform:translateY(-50%);
  z-index:1;
  pointer-events:none;
  user-select:none;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
  font-size:clamp(180px, 24vw, 360px);
  line-height:.85;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(20,36,33,.05);
  white-space:nowrap;
  transition:transform 1.4s var(--e-quiet), opacity 1.4s var(--e-quiet);
}
.chapter[data-ch="1"] .chapter-watermark{ color:rgba(47,111,100,.034); -webkit-text-stroke:0; }
.chapter[data-ch="2"] .chapter-watermark{ color:rgba(139,111,114,.038); -webkit-text-stroke:0; }
.chapter[data-ch="3"] .chapter-watermark{ color:rgba(196,154,90,.052); -webkit-text-stroke:0; }
.chapter[data-ch="4"] .chapter-watermark{ color:rgba(47,111,100,.038); -webkit-text-stroke:0; }
.chapter[data-ch="5"] .chapter-watermark{ color:rgba(196,154,90,.058); -webkit-text-stroke:0; }

@media (max-width:1180px){
  .chapter-watermark{ font-size:clamp(140px, 20vw, 240px); }
}

/* ── TEXT COLUMN ────────────────────────────────────────────── */
.chapter-text{ position:relative; z-index:3; max-width:580px; }

/* Headline */
.headline{
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(42px, 5vw, 72px);
  line-height:.98;
  letter-spacing:-.032em;
  color:var(--teal-night);
}
.headline em{
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
  color:var(--teal);
}
.headline .gold{
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
  background:linear-gradient(120deg, #C49A5A 0%, #8F6833 45%, #C49A5A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.lede{
  max-width:500px;
  margin-top:24px;
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  font-weight:400;
  letter-spacing:-.005em;
}
.lede strong{
  color:var(--teal-deep);
  font-weight:600;
}

/* CTA cluster */
.cta-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 18px;
  margin-top:34px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:14.5px; font-weight:600; letter-spacing:.005em;
  cursor:pointer;
  transition:transform .3s var(--e-out), box-shadow .3s var(--e-out), background .3s var(--e-out);
  white-space:nowrap;
}
.btn .arr{ display:inline-block; transition:transform .3s var(--e-out); }
.btn:hover .arr{ transform:translateX(4px); }

.btn-primary{
  background:linear-gradient(180deg, var(--teal-deep) 0%, var(--teal-night) 100%);
  color:var(--paper);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 8px 24px rgba(8,42,48,.26),
    0 2px 6px rgba(8,42,48,.16);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.22) inset,
    0 14px 34px rgba(8,42,48,.34),
    0 2px 8px rgba(8,42,48,.20);
}

.btn-quiet{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 4px;
  color:var(--ink-soft);
  font-size:14px; font-weight:500;
  border-bottom:1px solid transparent;
  border-radius:0;
  transition:color .25s var(--e-soft), border-color .25s var(--e-soft);
}
.btn-quiet:hover{
  color:var(--teal-deep);
  border-bottom-color:var(--teal);
}

.trust-line{
  display:flex; align-items:center; gap:10px;
  margin-top:28px;
  font-size:12.5px; color:var(--ink-mute);
  letter-spacing:-.002em;
}
.trust-line .stars{
  color:var(--gold);
  letter-spacing:.08em;
  font-size:12px;
}
.trust-line .pip{
  width:3px; height:3px; border-radius:50%;
  background:var(--ink-faint);
}

/* ── VISUAL COLUMN ─────────────────────────────────────────── */
.chapter-visual{
  position:relative; z-index:2;
  min-height:380px;
  display:flex; align-items:center; justify-content:center;
}

/* ════════════════════════════════════════════════════════════════
   4 · CHAPTER I - RELIEF - UHC Primary Dental + lava-lamp wrap
   ════════════════════════════════════════════════════════════════ */
.ch1-stage{
  position:relative;
  width:100%; max-width:460px;
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:22px;
}

/* The lava-lamp wrapper:
   · Idle bob: translateY(0 → -12px → 0) over 6.4s, sinusoidal.
   · Hover pauses the bob and the inner card dock-zooms (1.045).
   · No transform on the inner card while idle, so the bob is
     applied once at the wrapper level (cleaner GPU compositing). */
.plan-card-float{
  display:inline-block;
  width:100%;
  max-width:460px;
  animation: lava-float 6.4s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform;
}
.plan-card-float:hover{
  animation-play-state: paused;
}
@keyframes lava-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* The single editorial plan card */
.primary-card{
  position:relative;
  width:100%;
  background:linear-gradient(180deg, var(--paper) 0%, #FBF6EB 100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 36px 84px rgba(20,36,33,.18);
  padding:24px 26px 22px;
  overflow:hidden;
  transition: transform .35s var(--e-out), box-shadow .35s var(--e-quiet);
  cursor:default;
}
.primary-card::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%;
  height:2px;
  background:linear-gradient(90deg, transparent, #003B71, transparent);
  opacity:.55;
}
.primary-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 360px at 100% -10%, rgba(0,59,113,.05), transparent 55%);
}

/* Dock-magnification on hover. The wrapper pauses bobbing,
   the inner card zooms slightly + shadow deepens. transform-origin
   is set to top so the scale grows DOWNWARD only - the top edge
   stays put and the status pill above never gets blocked. */
.plan-card-float:hover .primary-card{
  transform-origin: top center;
  transform: translateY(-3px) scale(1.045);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 56px 120px rgba(20,36,33,.26);
}
/* Disable the old ch1-stage hover so we don't double-transform */
.ch1-stage:hover .primary-card{ transform: none; }

/* Carrier row - UHC + A+ rating */
.pc-carrier{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
}
.pc-carrier-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, #003B71 0%, #002648 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic; font-weight:600;
  font-variation-settings:"opsz" 36, "SOFT" 80;
  font-size:18px;
  letter-spacing:-.04em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 4px 12px rgba(0,59,113,.32);
  flex-shrink:0;
  position:relative;
}
.pc-carrier-info{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.pc-carrier-name{
  font-size:12px; font-weight:600;
  color:var(--ink);
  letter-spacing:-.005em;
  line-height:1.2;
}
.pc-carrier-rating{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:500;
  letter-spacing:-.002em;
  color:var(--ink-mute);
}
.pc-aplus{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1px 6px 1px 5px;
  background:rgba(0,59,113,.08);
  border:1px solid rgba(0,59,113,.18);
  border-radius:3px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:11px;
  color:#003B71;
  letter-spacing:-.01em;
  line-height:1.1;
}

.pc-plan-name{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 96, "SOFT" 50;
  font-size:32px;
  line-height:1.0;
  letter-spacing:-.028em;
  color:var(--teal-night);
}
.pc-plan-name em{
  font-style:italic;
  font-variation-settings:"opsz" 96, "SOFT" 80, "WONK" 1;
  color:var(--teal);
}
.pc-plan-sub{
  margin-top:6px;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.pc-plan-sub .dot{
  width:3px; height:3px; border-radius:50%;
  background:var(--ink-faint);
}
.pc-plan-sub em{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  color:var(--teal);
}

.pc-rule{
  margin:18px 0 4px;
  height:1px;
  background:var(--line);
}

.pc-benefits{
  display:flex; flex-direction:column;
}
.pc-benefit{
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.pc-benefit:last-child{ border-bottom:0; }
.pc-benefit .num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:13px;
  color:var(--gold-deep);
  line-height:1;
}
.pc-benefit .label{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.005em;
  line-height:1.35;
}
.pc-benefit .label strong{
  font-weight:600;
  color:var(--teal-deep);
}
.pc-benefit .stamp{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:12px;
  color:var(--teal);
  white-space:nowrap;
  letter-spacing:-.005em;
}

.pc-action{
  margin-top:12px;
  padding-top:14px;
  border-top:1px dashed var(--line-mid);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.pc-price{ display:flex; flex-direction:column; gap:3px; }
.pc-price-num{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 60, "SOFT" 50;
  font-size:28px;
  letter-spacing:-.024em;
  color:var(--teal-night);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.pc-price-num .approx{
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 60, "SOFT" 100;
  color:var(--ink-mute);
  margin-right:1px;
}
.pc-price-suffix{
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.pc-activate{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  background:linear-gradient(180deg, var(--teal-deep), var(--teal-night));
  color:var(--paper);
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600;
  letter-spacing:.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 6px 18px rgba(8,42,48,.28);
  transition:transform .25s var(--e-out), box-shadow .25s var(--e-out);
  flex-shrink:0;
}
.pc-activate:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 12px 28px rgba(8,42,48,.36);
}
.pc-activate .arr{ transition:transform .25s var(--e-out); display:inline-block; }
.pc-activate:hover .arr{ transform:translateX(3px); }

.pc-bridge{
  margin-top:12px;
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 18, "SOFT" 100;
  font-size:12.5px;
  color:var(--ink-mute);
  letter-spacing:-.005em;
  line-height:1.4;
}
.pc-bridge .ast{
  color:var(--gold);
  font-size:13px;
  flex-shrink:0;
  margin-top:1px;
}
.pc-bridge em{
  font-family:var(--font-display);
  font-style:italic;
  font-variation-settings:"opsz" 18, "SOFT" 80, "WONK" 1;
  color:var(--teal-deep);
  font-weight:400;
}

/* Status pill above the card */
.ch1-status{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 12px 6px 10px;
  background:rgba(255,253,247,.78);
  border:1px solid var(--line-mid);
  border-radius:var(--r-pill);
  backdrop-filter:blur(10px);
  font-size:11px; font-weight:600;
  letter-spacing:.04em;
  color:var(--teal-deep);
  box-shadow:0 4px 14px rgba(20,36,33,.06);
  align-self:flex-start;
}
.ch1-status .pulse{
  width:8px; height:8px; border-radius:50%;
  background:#3FA886;
  box-shadow:
    0 0 0 3px rgba(63,168,134,.22),
    0 0 10px rgba(63,168,134,.65),
    0 0 22px rgba(63,168,134,.35);
  animation:statusGlow 2.6s ease-in-out infinite;
}
@keyframes statusGlow{
  0%,100%{
    box-shadow:
      0 0 0 3px rgba(63,168,134,.22),
      0 0 10px rgba(63,168,134,.55),
      0 0 22px rgba(63,168,134,.30);
  }
  50%{
    box-shadow:
      0 0 0 6px rgba(63,168,134,.12),
      0 0 16px rgba(63,168,134,.85),
      0 0 30px rgba(63,168,134,.55);
  }
}
@keyframes statusPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(47,111,100,.14); }
  50%    { box-shadow:0 0 0 8px rgba(47,111,100,.06); }
}

/* ════════════════════════════════════════════════════════════════
   5 · CHAPTER II - CONFIDENCE - Plan recommendation
   ════════════════════════════════════════════════════════════════ */
.ch2-stage{
  position:relative;
  width:100%; max-width:540px;
  height:420px;
  perspective:1600px;
}

.ch2-ghost{
  position:absolute; top:50%; left:50%;
  width:280px; height:340px;
  border-radius:var(--r-lg);
  background:rgba(255,253,247,.55);
  border:1px solid var(--line-mid);
  box-shadow:0 8px 24px rgba(20,36,33,.06);
  backdrop-filter:blur(6px);
  filter:saturate(.4);
  opacity:.58;
  transition:transform 1.2s var(--e-luxe), opacity .8s var(--e-quiet);
}
.ch2-ghost.ghost-1{ transform:translate(-50%,-50%) rotate(-6deg) translate(-100px, 12px); z-index:1; }
.ch2-ghost.ghost-2{ transform:translate(-50%,-50%) rotate(6deg)  translate( 100px, 12px); z-index:1; }
.ch2-ghost-tag{
  position:absolute; top:18px; left:18px;
  font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.ch2-ghost-name{
  position:absolute; top:42px; left:18px; right:18px;
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 60, "SOFT" 50;
  font-size:22px;
  line-height:1.05;
  color:var(--ink-mute);
  letter-spacing:-.02em;
}
.ch2-ghost-meta{
  position:absolute; bottom:22px; left:18px; right:18px;
  font-size:11.5px; color:var(--ink-faint);
  display:flex; justify-content:space-between;
}
.ch2-stage:hover .ch2-ghost.ghost-1{ transform:translate(-50%,-50%) rotate(-10deg) translate(-134px, 18px); }
.ch2-stage:hover .ch2-ghost.ghost-2{ transform:translate(-50%,-50%) rotate(10deg)  translate( 134px, 18px); }

.ch2-chosen{
  position:absolute; top:50%; left:50%;
  width:320px;
  background:var(--paper);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 36px 80px rgba(20,36,33,.18);
  padding:22px 22px 20px;
  z-index:3;
  transform:translate(-50%,-50%);
  animation: lava-float-ch2 6.4s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform;
}
/* Centered + bobbing - translate(-50%,-50%) preserved in every keyframe
   because the card is absolutely positioned and needs the centering math.
   The bob travels translateY(0 → -12px → 0) over 6.4s, sinusoidal. */
@keyframes lava-float-ch2{
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-12px); }
}
.ch2-stage:hover .ch2-chosen{
  animation-play-state: paused;
  transform: translate(-50%, -50%) translateY(-3px) scale(1.045);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 56px 120px rgba(20,36,33,.26);
}

.ch2-recommended{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 11px 5px 8px;
  background:linear-gradient(135deg, rgba(241,223,192,.65), rgba(216,184,114,.22));
  border:1px solid rgba(196,154,90,.32);
  border-radius:var(--r-pill);
  font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep);
}
.ch2-recommended .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--gold-deep);
}
.ch2-carrier-line{
  margin-top:16px;
  display:flex; align-items:center; gap:11px;
}
.ch2-carrier-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg, #2F6F64 0%, #214E48 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic; font-weight:500;
  font-size:17px;
  letter-spacing:-.04em;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 4px 12px rgba(47,111,100,.32);
}
.ch2-carrier-name{
  font-family:var(--font-body);
  font-size:12.5px; font-weight:600;
  color:var(--ink);
  letter-spacing:-.005em;
}
.ch2-plan-name{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 60, "SOFT" 50;
  font-size:26px;
  line-height:1.04;
  letter-spacing:-.028em;
  color:var(--teal-night);
  margin-top:12px;
}
.ch2-plan-name em{
  font-style:italic;
  font-variation-settings:"opsz" 60, "SOFT" 80, "WONK" 1;
}

.ch2-key-stats{
  margin-top:16px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 16px;
}
.ch2-key-stat .label{
  font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
}
.ch2-key-stat .value{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 36, "SOFT" 50;
  font-size:18px;
  color:var(--teal-deep);
  margin-top:3px;
  letter-spacing:-.015em;
}
.ch2-key-stat.gold .value{ color:var(--gold-deep); }

.ch2-whisper{
  margin-top:12px;
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:13px;
  line-height:1.45;
  color:var(--teal-deep);
  letter-spacing:-.005em;
}
.ch2-whisper .quote{
  flex:0 0 10px;
  color:var(--gold);
  font-size:22px;
  line-height:1;
  margin-top:-2px;
}

.ch2-why{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed var(--line-mid);
  display:flex; align-items:center; justify-content:flex-end;
}
.ch2-why-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600;
  color:var(--teal-deep);
  letter-spacing:-.002em;
}
.ch2-why-cta .arr{ transition:transform .25s var(--e-out); }
.ch2-chosen:hover .ch2-why-cta .arr{ transform:translateX(3px); }

/* ════════════════════════════════════════════════════════════════
   6 · CHAPTER III - CLARITY - Savings reveal
   ════════════════════════════════════════════════════════════════ */
.ch3-stage{
  position:relative;
  width:100%; max-width:580px;
  padding:0;
}

.ch3-treatment{
  display:flex; flex-direction:column; gap:4px;
  margin-bottom:20px;
}
.ch3-treatment-label{
  font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute);
}
.ch3-treatment-list{
  display:flex; flex-direction:column; gap:1px;
  margin-top:2px;
}
.ch3-procedure{
  display:flex; align-items:baseline; gap:14px;
  padding:6px 0;
  font-size:14px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.ch3-procedure:last-child{ border-bottom:0; }
.ch3-procedure .num{
  flex:0 0 22px;
  font-family:var(--font-display);
  font-style:italic; font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:13px;
  color:var(--gold-deep);
}
.ch3-procedure .name{
  flex:1; letter-spacing:-.005em;
}
.ch3-procedure .meta{
  font-size:11.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.ch3-reveal{
  margin-top:22px;
  display:flex; flex-direction:column;
  gap:12px;
}

.ch3-without{
  display:flex; align-items:baseline; gap:14px;
}
.ch3-without .label{
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
  flex:0 0 130px;
}
.ch3-without .amt{
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:40px;
  letter-spacing:-.03em;
  color:var(--ink-faint);
  position:relative;
  font-variant-numeric:tabular-nums;
}
.ch3-without .amt::after{
  content:""; position:absolute;
  left:-4px; right:-4px;
  top:55%;
  height:1.5px;
  background:var(--ink-faint);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.2s var(--e-luxe) 1.2s;
}
.chapter.is-active .ch3-without .amt::after{ transform:scaleX(1); }

.ch3-with{
  display:flex; align-items:baseline; gap:14px;
}
.ch3-with .label{
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-deep);
  flex:0 0 130px;
}
.ch3-with .amt{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:52px;
  letter-spacing:-.03em;
  color:var(--teal-deep);
  font-variant-numeric:tabular-nums;
  line-height:1;
}

.ch3-savings{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line-mid);
  position:relative;
  display:flex; flex-direction:column;
}
.ch3-savings-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:6px;
}
.ch3-savings-eyebrow .sparkle{
  color:var(--gold);
  font-size:13px;
  animation:sparkle 3.6s ease-in-out infinite;
}
@keyframes sparkle{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%    { opacity:1; transform:scale(1.18); }
}
.ch3-savings-line{
  display:flex; align-items:baseline; gap:18px;
  flex-wrap:wrap;
}
.ch3-amount{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:clamp(60px, 7vw, 78px);
  letter-spacing:-.034em;
  line-height:.92;
  background:linear-gradient(140deg, #C49A5A 0%, #8F6833 50%, #C49A5A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.ch3-amount-suffix{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 36, "SOFT" 100;
  font-size:17px;
  color:var(--ink-mute);
  letter-spacing:-.005em;
}

.ch3-footnote{
  margin-top:14px;
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:-.002em;
  line-height:1.5;
  max-width:480px;
}
.ch3-footnote .dot{
  display:inline-block;
  width:4px; height:4px; border-radius:50%;
  background:var(--teal);
  margin-right:8px;
  vertical-align:2px;
}

/* ════════════════════════════════════════════════════════════════
   7 · CHAPTER IV - TRUST - First-visit coverage receipt
   ────────────────────────────────────────────────────────────────
   Replaces the v400 field-guide spread. Tangible procedure-by-
   procedure card showing what's $0 on day one. Mirrors the
   Chapter I plan card visually (same paper, hairline accent,
   editorial roman-numerated rows) so the two card-style chapters
   echo each other.
   ════════════════════════════════════════════════════════════════ */
.ch4-stage{
  position:relative;
  width:100%; max-width:460px;
}

.ch4-coverage{
  position:relative;
  width:100%;
  background:linear-gradient(180deg, var(--paper) 0%, #FBF6EB 100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 36px 84px rgba(20,36,33,.18);
  padding:24px 26px 22px;
  overflow:hidden;
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-quiet);
}
.ch4-coverage::before{
  content:"";
  position:absolute; top:0; left:10%; right:10%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.55;
}
.ch4-coverage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 360px at 100% -10%, rgba(196,154,90,.06), transparent 55%);
}
.ch4-stage:hover .ch4-coverage{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 48px 104px rgba(20,36,33,.24);
}

.ch4-coverage-header{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:14px;
}
.ch4-coverage-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}
.ch4-coverage-dot{
  width:6px; height:6px; border-radius:50%;
  background:#3FA886;
  box-shadow:
    0 0 0 3px rgba(63,168,134,.18),
    0 0 8px rgba(63,168,134,.5);
  animation:statusGlow 2.6s ease-in-out infinite;
  flex-shrink:0;
}
.ch4-coverage-plan{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 36, "SOFT" 50;
  font-size:18px;
  color:var(--teal-night);
  letter-spacing:-.018em;
  line-height:1;
}
.ch4-coverage-plan em{
  font-style:italic;
  font-variation-settings:"opsz" 36, "SOFT" 80, "WONK" 1;
  color:var(--teal);
}

.ch4-coverage-list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
  margin-bottom:14px;
}
.ch4-coverage-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.ch4-coverage-row:last-child{ border-bottom:0; }
.ch4-cov-num{
  font-family:var(--font-display);
  font-style:italic; font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:12.5px;
  color:var(--gold-deep);
  line-height:1;
  align-self:center;
}
.ch4-cov-name{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.ch4-cov-name strong{
  font-size:13px; font-weight:500;
  color:var(--ink);
  letter-spacing:-.005em;
  line-height:1.3;
}
.ch4-cov-code{
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--ink-faint);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ch4-cov-amt{
  display:flex; align-items:baseline;
  white-space:nowrap;
}
.ch4-cov-amt .amount{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 24, "SOFT" 50;
  font-size:16px;
  color:var(--teal-deep);
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}

.ch4-coverage-total{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px dashed var(--line-mid);
}
.ch4-coverage-total-block{
  display:flex; flex-direction:column; gap:3px;
}
.ch4-coverage-total-block--pay{
  align-items:flex-end;
}
.ch4-coverage-total-label{
  font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
}
.ch4-coverage-total-block--pay .ch4-coverage-total-label{
  color:var(--gold-deep);
}
.ch4-coverage-total-value{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 60, "SOFT" 50;
  font-size:28px;
  color:var(--teal-deep);
  letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.ch4-coverage-total-zero{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 96, "SOFT" 50;
  font-size:40px;
  background:linear-gradient(140deg, #2F6F64 0%, #214E48 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.028em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.ch4-coverage-arrow{
  font-family:var(--font-display);
  font-weight:300;
  font-size:22px;
  color:var(--ink-faint);
  line-height:1;
  align-self:center;
  letter-spacing:0;
}

/* ════════════════════════════════════════════════════════════════
   8 · CHAPTER V - ACTION - Platinum dentist
   ════════════════════════════════════════════════════════════════ */
.ch5-stage{
  position:relative;
  width:100%; max-width:520px;
  height:440px;
}

.ch5-runner{
  position:absolute;
  background:rgba(255,253,247,.65);
  border:1px solid var(--line-mid);
  border-radius:var(--r-md);
  padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  opacity:.7;
  filter:saturate(.5);
  backdrop-filter:blur(6px);
  transition:transform 1s var(--e-luxe), opacity .8s var(--e-quiet), filter .8s var(--e-quiet);
}
.ch5-runner-1{
  top:8%; right:-2%;
  width:268px;
  transform:rotate(2.5deg);
  z-index:1;
}
.ch5-runner-2{
  bottom:8%; left:-3%;
  width:268px;
  transform:rotate(-2.5deg);
  z-index:1;
}
.ch5-stage:hover .ch5-runner-1{ transform:rotate(3.5deg) translateX(14px); }
.ch5-stage:hover .ch5-runner-2{ transform:rotate(-3.5deg) translateX(-14px); }

.ch5-runner .mini-av{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg, var(--mist), var(--sage-faint));
  border:1px solid var(--line-mid);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-deep);
  font-family:var(--font-display);
  font-weight:500;
  font-size:13px;
  letter-spacing:-.02em;
}
.ch5-runner .info{ flex:1; min-width:0; }
.ch5-runner .name{
  font-size:12px; font-weight:600;
  color:var(--ink);
  letter-spacing:-.005em;
}
.ch5-runner .meta{
  font-size:10px;
  color:var(--ink-mute);
  letter-spacing:-.002em;
  margin-top:1px;
}
.ch5-runner .fit{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:13px;
  color:var(--teal-deep);
}
.ch5-runner .fit sup{ font-size:9px; color:var(--ink-mute); letter-spacing:.06em; }

.ch5-featured{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(100%, 400px);
  background:
    linear-gradient(180deg, rgba(255,253,247,1) 0%, rgba(252,247,236,1) 100%);
  border:1px solid rgba(196,154,90,.32);
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(196,154,90,.12) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 36px 84px rgba(20,36,33,.20);
  padding:0;
  z-index:5;
  overflow:hidden;
  transition:transform .8s var(--e-luxe), box-shadow .8s var(--e-quiet);
}
.ch5-stage:hover .ch5-featured{
  transform:translate(-50%,-50%) translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(196,154,90,.18) inset,
    0 4px 14px rgba(20,36,33,.06),
    0 48px 100px rgba(20,36,33,.26);
}

.ch5-platinum-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 18px;
  background:
    linear-gradient(95deg,
      #2A3548 0%,
      #1B2233 35%,
      #2A3548 65%,
      #1B2233 100%);
  color:#EFE6D2;
  font-size:9.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  position:relative;
  overflow:hidden;
}
.ch5-platinum-bar::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(196,154,90,.28) 50%, transparent 62%);
  transform:translateX(-110%);
  animation:shine 5.5s ease-in-out infinite 1.5s;
  pointer-events:none;
}
@keyframes shine{
  0%, 70%{ transform:translateX(-110%); }
  100%{ transform:translateX(110%); }
}
.ch5-platinum-bar .gem{
  color:#D2AE6A;
  font-size:12px;
  letter-spacing:0;
}
.ch5-platinum-bar .right{
  display:flex; align-items:center; gap:7px;
  font-weight:600;
  color:rgba(239,230,210,.7);
}

.ch5-featured-body{
  padding:20px 20px 18px;
}

.ch5-practice-row{
  display:flex; align-items:center; gap:14px;
}
.ch5-avatar{
  width:52px; height:52px; border-radius:13px;
  background:
    linear-gradient(135deg, #2F6F64 0%, #214E48 100%);
  color:#EFE6D2;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:21px;
  letter-spacing:-.04em;
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 6px 16px rgba(47,111,100,.32);
  flex-shrink:0;
}
.ch5-avatar .verify{
  position:absolute; bottom:-3px; right:-3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--gold);
  color:#fff;
  font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--paper);
}
.ch5-practice-info{ flex:1; min-width:0; }
.ch5-practice-name{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 36, "SOFT" 50;
  font-size:18px;
  letter-spacing:-.018em;
  color:var(--teal-night);
  line-height:1.15;
}
.ch5-practice-meta{
  font-size:12px;
  color:var(--ink-mute);
  margin-top:2px;
  letter-spacing:-.002em;
}
.ch5-practice-meta .sep{ margin:0 6px; color:var(--ink-faint); }

.ch5-stats{
  margin-top:16px;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.ch5-stat{
  display:flex; flex-direction:column; gap:3px;
}
.ch5-stat .label{
  font-size:9px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.ch5-stat .value{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 36, "SOFT" 50;
  font-size:17px;
  color:var(--teal-deep);
  letter-spacing:-.015em;
  line-height:1;
}
.ch5-stat .value em{
  font-style:italic;
  font-variation-settings:"opsz" 36, "SOFT" 80, "WONK" 1;
}

.ch5-row-availability{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.ch5-avail-left{
  display:flex; flex-direction:column; gap:3px;
}
.ch5-avail-eyebrow{
  display:flex; align-items:center; gap:7px;
  font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal);
}
.ch5-avail-eyebrow .live{
  width:6px; height:6px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 3px rgba(47,111,100,.18);
  animation:statusPulse 2.4s ease-in-out infinite;
}
.ch5-avail-time{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 24, "SOFT" 80;
  font-size:14.5px;
  color:var(--ink);
  letter-spacing:-.005em;
}
.ch5-book{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  background:linear-gradient(180deg, var(--teal-deep), var(--teal-night));
  color:var(--paper);
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 6px 18px rgba(8,42,48,.28);
  transition:transform .25s var(--e-out), box-shadow .25s var(--e-out);
}
.ch5-book:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px rgba(8,42,48,.36);
}
.ch5-book .arr{ transition:transform .25s var(--e-out); }
.ch5-book:hover .arr{ transform:translateX(3px); }

/* ════════════════════════════════════════════════════════════════
   9 · CHAPTER RAIL - bottom navigation spine
   ════════════════════════════════════════════════════════════════ */
.chapter-rail{
  position:absolute;
  bottom:22px; left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex; align-items:center;
  gap:0;
  padding:6px 16px;
  background:rgba(255,253,247,.78);
  border:1px solid var(--line-mid);
  border-radius:var(--r-pill);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 8px 24px rgba(20,36,33,.08);
  max-width:calc(100% - 32px);
}

.rail-chapter{
  display:flex; align-items:center;
  gap:9px;
  padding:8px 13px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
  cursor:pointer;
  position:relative;
  transition:color .4s var(--e-soft), background .4s var(--e-soft);
}
.rail-chapter:hover{ color:var(--teal-deep); }
.rail-chapter.is-active{
  color:var(--teal-night);
  background:rgba(47,111,100,.07);
}
.rail-chapter .roman{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-mute);
  transition:color .4s var(--e-soft);
}
.rail-chapter.is-active .roman{ color:var(--gold-deep); }

.rail-filament{
  width:12px; height:1px;
  background:var(--line-mid);
  flex-shrink:0;
}

/* ════════════════════════════════════════════════════════════════
   10 · ARROWS + PAUSE + PROGRESS
   ════════════════════════════════════════════════════════════════ */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,253,247,.78);
  border:1px solid var(--line-mid);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 8px 22px rgba(20,36,33,.10);
  transition:transform .3s var(--e-out), background .3s var(--e-out), box-shadow .3s var(--e-out);
}
.hero-arrow:hover{
  background:var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 14px 32px rgba(20,36,33,.16);
}
.hero-arrow-prev{ left:22px; }
.hero-arrow-next{ right:22px; }
.hero-arrow-prev:hover{ transform:translateY(-50%) translateX(-2px); }
.hero-arrow-next:hover{ transform:translateY(-50%) translateX( 2px); }
.hero-arrow svg{ width:18px; height:18px; }
.hero-arrow svg path{ stroke:var(--teal-deep); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.pause-btn{
  position:absolute;
  top:20px; right:22px;
  z-index:10;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,253,247,.7);
  border:1px solid var(--line-mid);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(20,36,33,.08);
  transition:transform .25s var(--e-out), color .25s var(--e-out);
}
.pause-btn:hover{ color:var(--teal-deep); transform:scale(1.06); }
.pause-btn .play-icon{ display:none; }
.pause-btn.is-paused .pause-icon{ display:none; }
.pause-btn.is-paused .play-icon{ display:block; }

.progress-track{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:rgba(20,36,33,.05);
  z-index:11;
  overflow:hidden;
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--teal), var(--gold));
  transition:opacity .4s ease;
}

/* ════════════════════════════════════════════════════════════════
   11 · BENEATH-THE-HERO RIBBON
   ════════════════════════════════════════════════════════════════ */
.trust-strip{
  background:var(--ivory-warm);
  border-top:1px solid var(--line);
  padding:20px 32px;
}
.trust-strip-row{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}
.trust-strip-item{
  /* Vertical stack: figure on top, label below. Lets all four items
     fit on a single row at desktop widths even with longer labels. */
  display:flex; flex-direction:column;
  align-items:center;
  gap:6px;
  flex: 1 1 0;
  min-width: 0;
  text-align:center;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:-.003em;
}
.trust-strip-item .figure{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"opsz" 36, "SOFT" 50;
  font-size:24px;
  color:var(--teal-deep);
  letter-spacing:-.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.trust-strip-item .figure em{
  font-style:italic;
  font-variation-settings:"opsz" 36, "SOFT" 80, "WONK" 1;
  color:var(--gold-deep);
}
.trust-strip-item .label{
  color:var(--ink-mute);
  font-weight:500;
  font-size:12.5px;
  line-height:1.35;
  text-wrap: balance;
  max-width: 240px;
}
.trust-strip-divider{
  width:1px; height:46px;
  background:var(--line-mid);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   12 · ON-ENTER MICRO REVEALS - text fades up when chapter activates
   ════════════════════════════════════════════════════════════════ */
.chapter-text > *{
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--e-quiet), transform .8s var(--e-quiet);
}
.chapter.is-active .chapter-text > .headline    { transition-delay:.10s; opacity:1; transform:translateY(0); }
.chapter.is-active .chapter-text > .lede        { transition-delay:.22s; opacity:1; transform:translateY(0); }
.chapter.is-active .chapter-text > .cta-row     { transition-delay:.34s; opacity:1; transform:translateY(0); }
.chapter.is-active .chapter-text > .social-proof{ transition-delay:.44s; opacity:1; transform:translateY(0); }
.chapter.is-active .chapter-text > .trust-line  { transition-delay:.44s; opacity:1; transform:translateY(0); }

.chapter-visual{
  opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity 1s var(--e-quiet) .12s, transform 1s var(--e-quiet) .12s;
}
.chapter.is-active .chapter-visual{
  opacity:1; transform:translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .chapter,
  .chapter-text > *,
  .chapter-visual,
  .plan-card-float,
  .ch3-without .amt::after{
    transition:none !important;
    animation:none !important;
  }
  .chapter.is-active,
  .chapter.is-active .chapter-text > *,
  .chapter.is-active .chapter-visual{
    opacity:1 !important;
    transform:none !important;
  }
  .ch3-without .amt::after{ transform:scaleX(1) !important; }
}


/* ════════════════════════════════════════════════════════════════
   13 · SOCIAL PROOF - Chapter I stacked avatars + rating
   ────────────────────────────────────────────────────────────────
   Five overlapping avatar circles with slight rotations (organic
   feel, not gridded), each in a different brand-palette gradient.
   Initials are rotated on each page load by hero-carousel.js so
   the social proof doesn't read as the same five "fake" users
   every time. Rating + count sit to the right.
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   SOCIAL PROOF - five stars · rating copy · five-initial dock stack
   ────────────────────────────────────────────────────────────────
   Sits below the CTA row in Chapter I. Three pieces: gold stars,
   trust copy with micro-line, and a `.cc-avatar-stack` of five
   initial avatars. Class names use the `.cc-` prefix so they
   never collide with the generic `.avatar` used by mega-nav
   profile circles, comment systems, or shared design tokens.

   The dock-style hover magnification (Part 3 of the spec) lives
   in a `(hover: hover) and (pointer: fine)` query so touch
   devices never get the desktop hover behavior.
   ════════════════════════════════════════════════════════════════ */
.social-proof{
  margin-top:24px;
  display:flex; align-items:center;
  gap:16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 3; /* sit above the lava-lit watermark + card glow layers */
}
.proof-stars{
  color:var(--gold);
  letter-spacing:.12em;
  font-size:14px;
  line-height:1;
  flex-shrink:0;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.proof-copy{
  display:flex; flex-direction:column;
  gap:3px;
  min-width:0;
  flex: 1 1 auto;
}
.proof-copy strong{
  font-size:13.5px;
  color:var(--teal-deep);
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.3;
}
.proof-copy span{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:11.5px;
  line-height:1.35;
  color:var(--ink-mute);
  letter-spacing:-.003em;
}

/* Avatar stack - `.cc-` scoped to prevent collisions */
.cc-avatar-stack{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 6px;
  min-width: max-content;
  position: relative;
  z-index: 5;
  isolation: isolate;
}
.cc-avatar-stack .cc-proof-avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  border: 2px solid var(--paper);
  box-shadow: 0 2px 8px rgba(20,36,33,.16);
  position: relative;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden;
}
.cc-avatar-stack .cc-proof-avatar + .cc-proof-avatar{
  margin-left: -10px;
}

/* Per-avatar brand-palette gradients + slight rotational tilt */
.cc-proof-avatar-1{
  background: linear-gradient(135deg, #2F6F64, #214E48);
  transform: rotate(-4deg);
  z-index: 1;
}
.cc-proof-avatar-2{
  background: linear-gradient(135deg, #C49A5A, #8F6833);
  transform: rotate(3deg);
  z-index: 2;
}
.cc-proof-avatar-3{
  background: linear-gradient(135deg, #8B6F72, #6E5659);
  transform: rotate(-2deg);
  z-index: 3;
}
.cc-proof-avatar-4{
  background: linear-gradient(135deg, #2A6BB0, #1B4F8A);
  transform: rotate(4deg);
  z-index: 4;
}
.cc-proof-avatar-5{
  background: linear-gradient(135deg, #3FA886, #2A7F66);
  transform: rotate(-3deg);
  z-index: 5;
}

/* ── MacBook-dock hover magnification - desktop only ──────────────
   Hovered avatar lifts and scales; neighbors scale less. Built on
   adjacent sibling + :has() so it works without JS. The hover query
   keeps touch devices entirely out of this code path so mobile/iOS
   never enters a stuck-hover state from a tap. */
@media (hover: hover) and (pointer: fine){
  .cc-avatar-stack .cc-proof-avatar{
    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      margin .28s cubic-bezier(.2,.8,.2,1),
      box-shadow .28s ease,
      filter .28s ease;
    will-change: transform;
    transform-origin: bottom center;
  }
  .cc-avatar-stack:hover .cc-proof-avatar{
    margin-left: -6px;
  }
  .cc-avatar-stack .cc-proof-avatar:hover{
    transform: translateY(-7px) scale(1.34) rotate(0deg) !important;
    z-index: 20;
    box-shadow: 0 14px 28px rgba(20,36,33,.24);
    filter: saturate(1.08);
  }
  /* Forward neighbor (next sibling of hovered avatar) */
  .cc-avatar-stack .cc-proof-avatar:hover + .cc-proof-avatar{
    transform: translateY(-4px) scale(1.16) rotate(0deg) !important;
    z-index: 18;
  }
  /* Backward neighbor (previous sibling) - uses :has() where supported.
     Browsers without :has() simply skip this rule, leaving the layout
     intact - no breakage. */
  .cc-avatar-stack .cc-proof-avatar:has(+ .cc-proof-avatar:hover){
    transform: translateY(-4px) scale(1.16) rotate(0deg) !important;
    z-index: 18;
  }
}

@media (prefers-reduced-motion: reduce){
  .cc-avatar-stack .cc-proof-avatar{ transition: none !important; }
  .cc-avatar-stack .cc-proof-avatar:hover{ transform: none !important; }
}

/* ── Chapter II eyebrow - slight negative word-spacing so the
   uppercase + letter-spacing combo doesn't create awkward gaps
   between words (especially between "FROM" and "{Month}"). ── */
.ch2-recommended{
  word-spacing:-0.06em;
}


/* ════════════════════════════════════════════════════════════════
   14 · CHAPTER IV · in-card subtle CTA
   ────────────────────────────────────────────────────────────────
   A quiet italic link sitting beneath the dentist-paid total.
   Bridges directly into Chapter V without competing with the
   primary CTA in the text column.
   ════════════════════════════════════════════════════════════════ */
.ch4-coverage-cta{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--line-mid);
  display:flex; align-items:center; justify-content:center;
  gap:7px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:13.5px;
  color:var(--teal-deep);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:color .25s var(--e-out), gap .25s var(--e-out);
}
.ch4-coverage-cta:hover{
  color:var(--teal-night);
  gap:11px;
}
.ch4-coverage-cta .arr{
  font-style:normal;
  font-family:var(--font-body);
  font-size:14px;
  display:inline-block;
  transition:transform .25s var(--e-out);
}
.ch4-coverage-cta:hover .arr{
  transform:translateX(3px);
}


/* ════════════════════════════════════════════════════════════════
   15 · ZIG-ZAG CHAPTERS - alternate visual/text columns
   ────────────────────────────────────────────────────────────────
   Chapters II and IV flip the layout: visual on the LEFT, text
   on the RIGHT. Odd chapters (I, III, V) keep the default: text
   left, visual right. Creates an editorial zig-zag rhythm across
   the five-chapter narrative.

   The watermark also moves to the right on flipped chapters so
   the giant ghost emotion word sits behind the headline (where
   it visually belongs), not behind the visual.

   Applies at desktop widths only; mobile is single-column and
   the flip is irrelevant.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 981px){
  .chapter[data-ch="2"],
  .chapter[data-ch="4"]{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .chapter[data-ch="2"] > .chapter-text,
  .chapter[data-ch="4"] > .chapter-text{
    grid-column: 2; grid-row: 1;
  }
  .chapter[data-ch="2"] > .chapter-visual,
  .chapter[data-ch="4"] > .chapter-visual{
    grid-column: 1; grid-row: 1;
  }
  .chapter[data-ch="2"] .chapter-watermark,
  .chapter[data-ch="4"] .chapter-watermark{
    left: auto;
    right: clamp(48px, 7vw, 132px);
  }
}


/* ════════════════════════════════════════════════════════════════
   16 · CARRIER TRANSITION MODAL
   ────────────────────────────────────────────────────────────────
   Sits over the page on `.is-open`. Backdrop is teal-night with
   glassmorphic blur. Card mirrors the .primary-card visual DNA
   (paper-to-cream gradient, gold hairline accent at top, soft
   editorial shadow). Disclosures are roman-numerated in italic
   Fraunces to match the chapter cards. Actions reuse the hero's
   .btn-primary and .btn-quiet so nothing looks bolted on.
   ════════════════════════════════════════════════════════════════ */
.carrier-modal{
  position:fixed; inset:0;
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--e-quiet), visibility 0s linear .35s;
}
.carrier-modal.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .35s var(--e-quiet), visibility 0s linear 0s;
}

.carrier-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(8,42,48,.55);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  cursor:pointer;
}

.carrier-modal-card{
  position:relative;
  width:100%;
  max-width:540px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:linear-gradient(180deg, var(--paper) 0%, #FBF6EB 100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--r-xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(20,36,33,.04) inset,
    0 24px 60px rgba(8,42,48,.34),
    0 60px 140px rgba(8,42,48,.24);
  padding:38px 40px 32px;
  transform:scale(.96) translateY(10px);
  opacity:0;
  transition:transform .5s var(--e-luxe), opacity .5s var(--e-quiet);
}
.carrier-modal.is-open .carrier-modal-card{
  transform:scale(1) translateY(0);
  opacity:1;
}
/* Gold hairline accent at top - same DNA as the chapter cards */
.carrier-modal-card::before{
  content:"";
  position:absolute;
  top:0; left:12%; right:12%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.6;
}
.carrier-modal-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 400px at 100% -10%, rgba(196,154,90,.06), transparent 55%);
  border-radius:inherit;
}

.carrier-modal-close{
  position:absolute;
  top:18px; right:18px;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,253,247,.7);
  border:1px solid var(--line-mid);
  color:var(--ink-mute);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:color .2s var(--e-out), background .2s var(--e-out), transform .2s var(--e-out);
  z-index:2;
}
.carrier-modal-close:hover{
  color:var(--teal-deep);
  background:var(--paper);
  transform:scale(1.06);
}
.carrier-modal-close svg{ width:13px; height:13px; }

.carrier-modal-eyebrow{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px;
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
}
.carrier-modal-eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:
    0 0 0 3px rgba(196,154,90,.18),
    0 0 8px rgba(196,154,90,.55);
  animation:statusGlow 2.6s ease-in-out infinite;
  flex-shrink:0;
}

.carrier-modal-title{
  position:relative;
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(30px, 4vw, 42px);
  line-height:1.04;
  letter-spacing:-.028em;
  color:var(--teal-night);
  margin-bottom:18px;
}
.carrier-modal-title em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
  color:var(--teal);
}

.carrier-modal-lede{
  position:relative;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:-.003em;
  margin-bottom:22px;
}
.carrier-modal-lede strong{
  color:var(--teal-deep);
  font-weight:600;
}

.carrier-modal-disclosures{
  position:relative;
  padding:16px 18px;
  background:rgba(220,237,232,.24);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  margin-bottom:24px;
}
.carrier-modal-disclosures-label{
  display:block;
  font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:8px;
}
.carrier-modal-disclosure{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-soft);
  letter-spacing:-.002em;
}
.carrier-modal-disclosure:last-child{
  border-bottom:0;
  padding-bottom:2px;
}
.carrier-modal-disclosure .num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 18, "SOFT" 80;
  font-size:12px;
  color:var(--gold-deep);
  line-height:1.5;
}
.carrier-modal-disclosure strong{
  color:var(--teal-deep);
  font-weight:600;
}

.carrier-modal-actions{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.carrier-modal-stay{
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.carrier-modal-continue{
  text-decoration:none;
  white-space:nowrap;
}

/* Mobile - stack actions, full-width primary, slightly tighter card */
@media (max-width: 640px){
  .carrier-modal{ padding:16px; }
  .carrier-modal-card{
    padding:28px 24px 24px;
    border-radius:var(--r-lg);
  }
  .carrier-modal-title{ font-size:clamp(26px, 7vw, 34px); }
  .carrier-modal-close{ top:14px; right:14px; }
  .carrier-modal-actions{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:10px;
  }
  .carrier-modal-continue{
    width:100%;
    justify-content:center;
  }
  .carrier-modal-stay{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

/* Reduced motion - instant on/off, no scale animation */
@media (prefers-reduced-motion: reduce){
  .carrier-modal,
  .carrier-modal-card{
    transition:none !important;
  }
  .carrier-modal.is-open .carrier-modal-card{
    transform:none;
  }
}


/* ════════════════════════════════════════════════════════════════
   17 · CHAPTER IV · PPO Advantage extensions
   ────────────────────────────────────────────────────────────────
   Two additions on top of the v500 coverage card:
     · `.ch4-cov-micro` - italic Fraunces microcopy beneath each
       procedure name, collapsed by default, expanded on row hover.
       Always-visible on mobile (touch can't hover reliably).
     · `.ch4-practitioner-cta` - gold-tinted dentist-recruitment
       hook that replaces the old patient "find a dentist" link
       inside the card. Routes to the For Practices page.
   ════════════════════════════════════════════════════════════════ */

/* ── Microcopy under each diagnostic row ─────────────────────── */
.ch4-coverage-row{
  align-items:start;
  cursor:default;
}
.ch4-coverage-row .ch4-cov-amt{
  align-self:start;
  margin-top:2px;
}
.ch4-cov-micro{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 18, "SOFT" 100;
  font-size:11.5px;
  line-height:1.45;
  color:var(--ink-mute);
  letter-spacing:-.003em;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:
    max-height .35s var(--e-quiet),
    opacity   .25s var(--e-out),
    margin-top .35s var(--e-quiet);
}
.ch4-coverage-row:hover .ch4-cov-micro{
  max-height:60px;
  opacity:1;
  margin-top:4px;
}

/* ── Microcopy color: warm beige instead of cool gray (more readable
   on the cream card surface, ties to the existing gold accent system).
   text-wrap: balance keeps the 3 short sentences from collapsing into
   one long line followed by two short ones. */
.ch4-cov-micro{
  color: var(--gold-deep);
  text-wrap: balance;
}

/* On mobile / touch, always show - hover doesn't fire reliably */
@media (max-width: 980px){
  .ch4-cov-micro{
    max-height:60px;
    opacity:.88;
    margin-top:3px;
  }
}

.ch4-practitioner-cta{
  display:block;
  margin-top:14px;
  padding:13px 16px 12px;
  background:linear-gradient(180deg, rgba(241,223,192,.32), rgba(241,223,192,.16));
  border:1px solid rgba(196,154,90,.24);
  border-radius:var(--r-md);
  cursor:pointer;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:
    border-color .35s var(--e-out),
    box-shadow .35s var(--e-out),
    background .35s var(--e-out),
    transform .35s var(--e-out);
}
/* Soft gold glow on hover - reads as "we noticed you" without aggression */
.ch4-practitioner-cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(220px 80px at 80% 50%, rgba(196,154,90,.14), transparent 65%);
  opacity:0;
  transition:opacity .4s var(--e-quiet);
  pointer-events:none;
}
.ch4-practitioner-cta:hover{
  border-color:rgba(196,154,90,.48);
  background:linear-gradient(180deg, rgba(241,223,192,.42), rgba(241,223,192,.22));
  box-shadow:
    0 0 0 4px rgba(196,154,90,.08),
    0 6px 22px rgba(196,154,90,.22);
}
.ch4-practitioner-cta:hover::before{ opacity:1; }

.ch4-practitioner-eyebrow{
  display:block;
  font-size:9px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:5px;
}
.ch4-practitioner-question{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"opsz" 24, "SOFT" 80;
  font-size:13.5px;
  line-height:1.35;
  color:var(--teal-night);
  letter-spacing:-.008em;
  margin-bottom:6px;
}
.ch4-practitioner-action{
  display:inline-flex; align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:-.002em;
  color:var(--teal-deep);
  transition:gap .25s var(--e-out);
}
.ch4-practitioner-cta:hover .ch4-practitioner-action{ gap:10px; }
.ch4-practitioner-action .arr{
  font-style:normal;
  font-family:var(--font-body);
  font-size:13px;
  display:inline-block;
  transition:transform .25s var(--e-out);
}
.ch4-practitioner-cta:hover .ch4-practitioner-action .arr{
  transform:translateX(3px);
}

/* Mobile: slightly tighter padding on the practitioner CTA */
@media (max-width: 640px){
  .ch4-practitioner-cta{
    margin-top:12px;
    padding:11px 14px 10px;
  }
  .ch4-practitioner-question{ font-size:12.5px; }
  .ch4-practitioner-action{ font-size:11px; }
}


/* ════════════════════════════════════════════════════════════════
   18 · CHAPTER IV · Estimate disclaimer line
   ────────────────────────────────────────────────────────────────
   Sits beneath the plan title in the card header. Italic Fraunces,
   warm beige - reads as an editorial annotation, not a legal disclaimer.
   ════════════════════════════════════════════════════════════════ */
.ch4-coverage-note{
  margin-top:6px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-variation-settings:"opsz" 18, "SOFT" 100;
  font-size:11.5px;
  line-height:1.4;
  color:var(--gold-deep);
  letter-spacing:-.003em;
  opacity:.85;
}


/* ════════════════════════════════════════════════════════════════
   CHAPTER IV · LAYOUT TIGHTENING
   ────────────────────────────────────────────────────────────────
   Three small adjustments so the receipt card stays fully visible
   above the chapter rail and the new 3-line headline doesn't wrap
   to 4 lines on common desktop widths.
   ════════════════════════════════════════════════════════════════ */

/* Headline: cap the inline width so "Your PPO plan" stays one line.
   At ~470px max-width with the chapter-text font scale (clamp 44-72px),
   the three intended lines hold across the desktop range. */
.ch4-headline{
  max-width: 480px;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: .98;
}

/* Tighter receipt-card padding + row spacing so the card + dentist
   box stay within the hero. Saves ~24px vertical without compressing
   the typography. */
.ch4-coverage{
  padding: 24px 24px 20px;
}
.ch4-coverage-header{
  margin-bottom: 12px;
}
.ch4-coverage-row{
  padding: 9px 0;
}
.ch4-coverage-total{
  padding: 12px 0 4px;
  margin-top: 4px;
}

/* Dentist CTA box: tighter padding, slightly smaller action line so
   the "Join the CoverCapy dentist network →" fits comfortably on a
   single line in most widths. */
.ch4-practitioner-cta{
  margin-top: 12px;
  padding: 11px 14px 10px;
}
.ch4-practitioner-action{
  font-size: 11.5px;
}

@media (max-width: 980px){
  .ch4-headline{ max-width: 100%; font-size: clamp(34px, 7.5vw, 48px); }
  .ch4-coverage{ padding: 22px 22px 18px; }
}


/* ════════════════════════════════════════════════════════════════
   SLIDER 1 · VALUE STRIP & SECONDARY CTA INSIDE THE UHC CARD
   ────────────────────────────────────────────────────────────────
   Three compact tiles ($0 / Day one / Fast ID) above the price row,
   plus a quiet secondary link beneath the activate button. Gives
   Slider 1 its own conversion "moment" so it stops being out-shone
   by Slider 4's $0 receipt total. The value strip floats above the
   lava-lit card surface via z-index:2 - never covers the lava bob.
   ════════════════════════════════════════════════════════════════ */
.pc-value-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 14px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 248, .64);
  border: 1px solid rgba(196, 154, 90, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 2px 8px rgba(20, 36, 33, .04);
  position: relative;
  z-index: 2;
}
.pc-value-strip > div{
  min-width: 0;
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(15, 61, 66, .08);
  text-align: left;
}
.pc-value-strip strong{
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 40;
  color: var(--teal-deep);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1;
  letter-spacing: -.02em;
}
.pc-value-strip span{
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Gold accent on the $0 tile - the "wow" beat of the strip */
.pc-value-strip > div:first-child{
  background: linear-gradient(180deg, rgba(241,223,192,.42), rgba(241,223,192,.18));
  border-color: rgba(196,154,90,.32);
}
.pc-value-strip > div:first-child strong{
  color: var(--gold-deep);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
}

/* Secondary CTA - quiet text link beneath the activate button */
.pc-secondary-cta{
  display: block;
  margin-top: 10px;
  padding: 9px 4px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-decoration: none;
  transition: color .25s var(--e-quiet), gap .3s var(--e-quiet);
}
.pc-secondary-cta:hover{
  color: var(--gold-deep);
}
.pc-secondary-cta .arr{
  display: inline-block;
  margin-left: 4px;
  transition: transform .3s var(--e-luxe);
}
.pc-secondary-cta:hover .arr{
  transform: translateX(3px);
}

/* ── Responsive CTA label - both spans live in the DOM so CSS can
   choose the best-fitting label without wrapping the pill. */
.cta-label-full{ display: inline; }
.cta-label-short{ display: none; }
@media (max-width: 480px){
  .cta-label-full{ display: none; }
  .cta-label-short{ display: inline; }
}


/* Loaded after hero-slider.css: mobile overlay */
/* ════════════════════════════════════════════════════════════════
   CoverCapy Hero - MOBILE FIXES OVERLAY · v500 fade engine
   ────────────────────────────────────────────────────────────────
   Loaded AFTER hero-slider.css so its rules win on the cascade.

   No JS needed - `hero-carousel.js` already handles touch swipe
   universally. Everything below is CSS-only:
     · Single-column chapter layout that scrolls internally
       (overflow-y:auto on `.chapter`) so 6-row cards don't clip.
     · Watermarks scaled down so they don't dominate.
     · Hero arrows hidden - swipe handles navigation on touch.
     · Chapter rail compacted (emotion labels hidden except active).
     · Per-chapter visuals: ghost cards (Ch2/Ch5) hidden, UNH chip
       hidden, savings reveal (Ch3) typographically reflowed, the
       PPO Advantage card (Ch4) tightened for phone widths.
     · Microcopy always visible on mobile (touch can't hover).
   ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   TABLET & BELOW (≤980px)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px){

  .hero{
    height: var(--hero-h-mobile);
    min-height: 600px;
    max-height: 820px;
  }

  .chapter{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 24px 22px 76px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-content: start;
  }
  .chapter-text{ max-width: 100%; }
  .chapter-visual{ min-height: auto; }

  /* Watermark - less aggressive at smaller sizes */
  .chapter-watermark{
    font-size: clamp(96px, 28vw, 180px);
    top: 14%;
    opacity: .55;
  }

  .pause-btn{ width: 36px; height: 36px; top: 14px; right: 14px; }

  /* Swipe replaces arrows on touch */
  .hero-arrow{ display: none; }

  /* Chapter rail - tighter, emotion labels hidden except active */
  .chapter-rail{ padding: 5px 8px; bottom: 14px; }
  .rail-chapter{ padding: 7px 9px; font-size: 10px; letter-spacing: .12em; gap: 6px; }
  .rail-chapter .emotion{ display: none; }
  .rail-chapter.is-active .emotion{ display: inline; }
  .rail-chapter .roman{ font-size: 12px; }
  .rail-filament{ width: 8px; }

  /* Chapter II - hide ghost runner-up cards on mobile */
  .ch2-stage{
    height: auto;
    min-height: 0;
    perspective: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ch2-ghost{ display: none; }
  /* Reset absolute centering - card flows normally below the text column */
  .ch2-chosen{
    position: relative;
    top: auto; left: auto;
    transform: none;
    animation: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .ch2-stage:hover .ch2-chosen{ transform: none; }

  /* Chapter V - hide runner-up dentist cards on mobile */
  .ch5-stage{ height: auto; min-height: 360px; }
  .ch5-runner{ display: none; }

  /* Chapter III - keep savings reveal graceful at narrow widths */
  .ch3-with .amt{ font-size: 46px; }
  .ch3-without .amt{ font-size: 34px; }
  .ch3-without .label,
  .ch3-with .label{ flex: 0 0 110px; font-size: 10.5px; }

  /* Chapter IV - PPO Advantage card on mobile */
  .ch4-stage{ max-width: 100%; }
  .ch4-coverage{
    padding: 22px 22px 20px;
    max-width: 460px;
    margin: 0 auto;
  }
  .ch4-coverage-plan{ font-size: 17px; }
  .ch4-coverage-note{ font-size: 11px; }
  .ch4-cov-name strong{ font-size: 12.5px; }
  .ch4-cov-amt .amount{ font-size: 15px; }
  .ch4-coverage-total-label{ font-size: 9.5px; letter-spacing: .14em; }
  .ch4-coverage-total-value{ font-size: 24px; }
  .ch4-coverage-total-zero{ font-size: 36px; }
  .ch4-practitioner-cta{ margin-top: 12px; padding: 11px 14px 10px; }
  .ch4-practitioner-question{ font-size: 12.5px; }
  .ch4-practitioner-action{ font-size: 10.5px; }
  /* UNH chip stays hidden - handled in main CSS */

  /* Carrier modal - tighter card on tablet */
  .carrier-modal-card{ padding: 28px 24px 24px; }
}


/* ────────────────────────────────────────────────────────────────
   PHONE (≤640px)
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px){

  :root{ --hero-h-mobile: 68vh; }
  .hero{ min-height: 580px; }

  .chapter{
    padding: 20px 18px 70px;
    gap: 14px;
  }

  .headline{
    font-size: clamp(32px, 8.5vw, 46px);
    line-height: 1.05;
    letter-spacing: -.02em;
  }
  .lede{
    font-size: 15px;
    line-height: 1.5;
  }

  .chapter-watermark{
    font-size: clamp(72px, 22vw, 130px);
    top: 18%;
    opacity: .5;
  }

  /* Full-width stacked CTAs - touch targets ≥46px tall */
  .cta-row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn{
    width: 100%;
    justify-content: center;
    min-height: 46px;
    padding: 13px 24px;
  }
  .btn-quiet{
    justify-content: center;
    padding: 14px 4px;
    min-height: 44px;
  }

  /* Trust line wraps gracefully */
  .trust-line{
    gap: 6px 14px;
    font-size: 11.5px;
    flex-wrap: wrap;
  }

  /* Slider 1 social-proof + avatar stack on phone */
  .social-proof{ gap: 12px; margin-top: 18px; }
  .proof-stars{ font-size: 13px; }
  .proof-copy strong{ font-size: 12.5px; }
  .proof-copy span{ font-size: 11px; }
  .cc-avatar-stack .cc-proof-avatar{
    width: 28px;
    height: 28px;
    font-size: 10px;
    border-width: 2px;
  }
  .cc-avatar-stack .cc-proof-avatar + .cc-proof-avatar{ margin-left: -8px; }

  /* Slider 1 value strip - keep 3 columns but tighter padding/text */
  .pc-value-strip{ margin: 12px 0 10px; padding: 6px; gap: 6px; border-radius: 14px; }
  .pc-value-strip > div{ padding: 8px 6px; border-radius: 10px; }
  .pc-value-strip strong{ font-size: 15px; }
  .pc-value-strip span{ font-size: 8.5px; letter-spacing: .06em; }
  .pc-secondary-cta{ font-size: 10px; padding-top: 8px; margin-top: 8px; }

  /* Chapter IV - tighter on phone */
  .ch4-coverage{ padding: 20px 18px 18px; }
  .ch4-coverage-row{ padding: 8px 0; gap: 10px; }
  .ch4-cov-micro{ font-size: 11px; line-height: 1.42; }
  .ch4-coverage-total-value{ font-size: 22px; }
  .ch4-coverage-total-zero{ font-size: 34px; }

  /* Bottom trust strip - single column on phone */
  .trust-strip{ padding: 24px 20px; }
  .trust-strip-row{
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
  .trust-strip-item{ max-width: 280px; }
  .trust-strip-item .figure{ font-size: 22px; }
  .trust-strip-item .label{ font-size: 12px; }
  .trust-strip-divider{ display: none; }

  /* Carrier modal - full-width buttons stacked */
  .carrier-modal{ padding: 16px; }
  .carrier-modal-card{ padding: 26px 22px 22px; border-radius: var(--r-lg); }
  .carrier-modal-title{ font-size: clamp(26px, 7vw, 34px); }
  .carrier-modal-close{ top: 14px; right: 14px; }
  .carrier-modal-actions{
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .carrier-modal-continue,
  .carrier-modal-stay{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ────────────────────────────────────────────────────────────────
   SMALL PHONE (≤420px) - iPhone SE, older Androids
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 420px){

  .chapter{ padding: 24px 18px 72px; }
  .headline{ font-size: clamp(28px, 8vw, 40px); }
  .lede{ font-size: 15px; }
  .chapter-watermark{ display: none; }
  .pause-btn{ width: 30px; height: 30px; top: 12px; right: 12px; }

  /* Avatar stack even tighter */
  /* Slider 1 small phone tightening */
  .cc-avatar-stack .cc-proof-avatar{ width: 26px; height: 26px; font-size: 9.5px; }
  .cc-avatar-stack .cc-proof-avatar + .cc-proof-avatar{ margin-left: -7px; }
  .social-proof{ gap: 10px; }
  .proof-copy strong{ font-size: 12px; }
  .proof-copy span{ font-size: 10.5px; }
  /* Value strip - three tight columns; collapse to single column under 360px
     so the labels don't truncate awkwardly */
  .pc-value-strip{ padding: 5px; gap: 5px; }
  .pc-value-strip > div{ padding: 7px 5px; }
  .pc-value-strip strong{ font-size: 14px; }

  /* Chapter III - savings reveal tightest */
  .ch3-without .label,
  .ch3-with .label{ flex: 0 0 90px; font-size: 10px; }
  .ch3-with .amt{ font-size: 40px; }
  .ch3-without .amt{ font-size: 30px; }
  .ch3-amount{ font-size: 56px; }

  /* Chapter IV - tightest card */
  .ch4-coverage{ padding: 18px 16px 16px; }
  .ch4-coverage-row{ padding: 7px 0; gap: 9px; }
  .ch4-cov-num{ font-size: 11px; }
  .ch4-cov-name strong{ font-size: 12px; }
  .ch4-cov-code{ font-size: 9px; }
  .ch4-cov-micro{ font-size: 10.5px; line-height: 1.4; }
  .ch4-cov-amt .amount{ font-size: 14px; }
  .ch4-coverage-total-value{ font-size: 20px; }
  .ch4-coverage-total-zero{ font-size: 32px; }
  .ch4-practitioner-cta{ padding: 10px 12px; }
  .ch4-practitioner-question{ font-size: 12px; }
}


/* ────────────────────────────────────────────────────────────────
   LANDSCAPE PHONE - short, wide viewports
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){
  .hero{ height: 100vh; min-height: 440px; }
  .chapter{ padding: 20px 32px 76px; }
  .headline{ font-size: clamp(26px, 5vw, 38px); }
  .lede{ margin-top: 12px; font-size: 14.5px; }
  .cta-row{ margin-top: 16px; }
  .chapter-watermark{ display: none; }
}


/* ================================================================
   COVERCAPY HERO - OVERRIDES LAYER (iterative v501 through v526)
   Appended after the base. Loads before hero-slider-mobile.css in
   the page; mobile rules use !important + a separate mobile height
   variable, so this layer only affects desktop.
   ================================================================ */
/* ════════════════════════════════════════════════════════════════
   COVERCAPY · HERO · v501, "Calm, honest, patient first"
   ────────────────────────────────────────────────────────────────
   Appended after the v500 base + the mobile overlay. Overwrites
   nothing above; it wins on source order + specificity, per the
   cascade rule.

   What this layer changes, and why:
     1. Pulls two stray hues back into the system.
          a. UHC carrier mark + A+ chip: brand blue -> calm teal.
          b. Social-proof avatars: four-hue rainbow -> one teal ramp.
        Result: the hero reads as one palette (teal + gold + cream),
        not five competing colors.
     2. Demotes the For-Dentists hook in Chapter IV from a gold
        glowing box to a quiet hairline aside. A patient who wants
        to book is no longer pulled toward the dentist funnel, and
        gold goes back to meaning one thing: money.
     3. Promotes the patient "find a dentist" link from a grey
        underline to a tappable outlined pill, so the patient's
        own door is never quieter than a sales button. This is the
        same inversion that hid the "browse dentists" path on the
        city-search screen.
   ════════════════════════════════════════════════════════════════ */

/* ── 1a · Carrier mark + A+ chip: blue -> calm teal ───────────── */
.primary-card .pc-carrier-mark{
  background:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-night) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 4px 12px rgba(16,47,45,.30);
}
.pc-carrier .pc-aplus{
  background:rgba(47,111,100,.08);
  border-color:rgba(47,111,100,.20);
  color:var(--teal-deep);
}

/* ── 1b · Social-proof avatars: rainbow -> single teal ramp ───── */
.cc-avatar-stack .cc-proof-avatar-1{ background:linear-gradient(135deg,#2F6F64,#214E48); }
.cc-avatar-stack .cc-proof-avatar-2{ background:linear-gradient(135deg,#3C7E72,#28574F); }
.cc-avatar-stack .cc-proof-avatar-3{ background:linear-gradient(135deg,#2F6F64,#1E4842); }
.cc-avatar-stack .cc-proof-avatar-4{ background:linear-gradient(135deg,#46897C,#2F6F64); }
.cc-avatar-stack .cc-proof-avatar-5{ background:linear-gradient(135deg,#214E48,#102F2D); }

/* ── 2 · Chapter IV dentist hook: gold box -> quiet aside ─────── */
.ch4-practitioner-cta{
  margin-top:14px;
  padding:12px 0 2px;
  background:none;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
}
.ch4-practitioner-cta:hover{
  background:none;
  border-color:var(--line-mid);
  box-shadow:none;
  transform:none;
}
.ch4-practitioner-cta::before{ display:none; }
.ch4-practitioner-eyebrow{ color:var(--ink-mute); }
.ch4-practitioner-question{ font-size:12.5px; color:var(--ink-soft); font-weight:400; }
.ch4-practitioner-action{ font-size:11px; color:var(--ink-mute); }
.ch4-practitioner-cta:hover .ch4-practitioner-action{ color:var(--teal-deep); }

/* If you would rather the homepage not recruit dentists at all,
   uncomment the next line and the whole aside disappears.
   .ch4-practitioner-cta{ display:none; } */

/* ── 3 · Patient "find a dentist" link -> tappable pill ───────── */
.cta-row .btn-quiet[href*="ppodentists"]{
  padding:12px 18px;
  border:1px solid var(--line-mid);
  border-radius:var(--r-pill);
  color:var(--teal-deep);
  font-weight:600;
}
.cta-row .btn-quiet[href*="ppodentists"]:hover{
  border-color:var(--teal);
  background:var(--teal-faint);
  color:var(--teal-deep);
}

/* ════════════════════════════════════════════════════════════════
   HERO · v514 LAYER, font rendering fix
   ────────────────────────────────────────────────────────────────
   The design pins Fraunces opsz manually via font-variation-settings
   (display = 144, body text = 18, etc.). Safari also applies its own
   automatic optical sizing by default, and the two fighting produces
   the heavy, bleeding headline. Turning auto optical sizing off makes
   the manual opsz the single source of truth, so type renders as
   designed. Scoped to the hero so it cannot affect the rest of the site.
   ════════════════════════════════════════════════════════════════ */
.hero-wrap,
.trust-strip,
.carrier-modal{
  font-optical-sizing: none;
}

/* ════════════════════════════════════════════════════════════════
   HERO · v516 LAYER, "Free" badge on the first plan card
   A filled gold pill (gold = money/savings) so the headline benefit
   pops with energy, without caps-and-exclamation shouting that would
   clash with the display type.
   ════════════════════════════════════════════════════════════════ */
.pc-benefit .stamp.pc-free{
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 6px rgba(143,104,51,.30);
}

/* ════════════════════════════════════════════════════════════════
   HERO · v517 LAYER, headline optical-size fix
   The headline was pinned to opsz 144 (display master, very thin
   hairlines) but only renders ~72px, so the light strokes looked
   fragile and the "f" appeared to bleed / wobble. Pin opsz to the
   real rendered size so the glyphs are drawn solid at that size.
   font-variation-settings replaces the whole axis list, so each
   selector restates its other axes (SOFT / WONK) unchanged.
   ════════════════════════════════════════════════════════════════ */
.headline{
  font-variation-settings: "opsz" 72, "SOFT" 30;
}
.headline em,
.headline .gold{
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}


/* ════════════════════════════════════════════════════════════════
   HERO · v518 LAYER, restore the three highlight blocks in place of
   the plain benefit lines, and make the "$0" gold (the money / free
   beat). All other block styling inherits from base .pc-value-strip.
   ════════════════════════════════════════════════════════════════ */
.pc-value-strip > div.pc-vs-free strong{
  color: var(--gold-deep);
}

/* ════════════════════════════════════════════════════════════════
   HERO · v526 LAYER, vertical trim (final)
   Carousel sits shorter: lower height, min, and max. The chapter's
   top/bottom padding is reclaimed in step so the content area at the
   floor (620 - 28 - 72 = 520px) is >= the old floor (640 - 32 - 92 =
   516px) and nothing clips. Bottom path strip tightened too.
   Only padding-top/bottom are overridden so the wide-screen left/right
   content-lock padding stays intact.
   ════════════════════════════════════════════════════════════════ */
:root{
  --hero-h:   72vh;
  --hero-min: 620px;
  --hero-max: 800px;
}
.chapter{
  padding-top: 28px;
  padding-bottom: 72px;
}
.trust-strip{
  padding-top: 14px;
  padding-bottom: 14px;
}