/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — system-native, no webfonts
   Editorial serif: Georgia-led stack, engineered for screen rendering
                    (sturdy strokes, no optical bleed on glass/italics).
   UI sans:        Apple system / Segoe UI / Helvetica / Arial.
   Display accent: Arial Black (held in reserve).
   ════════════════════════════════════════════════════════════════ */
:root{
  --ff-serif: Georgia, "Iowan Old Style", "Hoefler Text", Cambria, "Times New Roman", serif;
  --ff-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-display: "Arial Black", Helvetica, Arial, sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   COVERCAPY v400 · FULLY COASTAL PREMIUM MEGA NAV
   Design language: warm white · coastal neutrals · trust blue · sage · reserved lavender
   Inspiration: Apple × Amex × NerdWallet × Sephora × ClassPass
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Coastal brand */
  --g: #2E7D76;
  --gd: #123F52;
  --gdd: #0B2A38;
  --gm: #5DA7A0;
  --gl: #D9EFEA;
  --gll: #EFF8F5;

  /* Coastal accent tier */
  --gold: #2E7D76;
  --gold-l: #78BBB3;
  --gold-soft: #DCEFF7;
  --gold-vl: #F1FAF8;

  /* Coastal neutrals */
  --cream: #FAF8F4;
  --cream-d: #F1EEE7;
  --paper: #FFFDF9;
  --ink: #182A34;
  --ink-mid: #526D76;
  --ink-soft: #7E9298;
  --line: rgba(18,63,82,.10);
  --line-strong: rgba(18,63,82,.18);

  /* Trust + planning accents */
  --trust-blue: #CFE5F3;
  --planning-sage: #D8E8D9;
  --reward-coastal: #D8E8D9;
  --platinum-lavender: #E9E2F5;

  /* v207 warm coastal layer — used to rebalance teal dominance */
  --warm-white:    #FEFCF7;
  --warm-cream:    #FBF6EC;
  --sky-soft:      #E8F1F9;
  --sky-softer:    #F3F8FC;
  --champagne:     #F1E4C8;
  --champagne-soft:#FAF3E1;
  --champagne-deep:#D8B872;
  --mist-warm:     linear-gradient(135deg, rgba(232,241,249,.55) 0%, rgba(254,252,247,.92) 50%, rgba(241,228,200,.34) 100%);
  --mist-warm-soft:linear-gradient(135deg, rgba(232,241,249,.42) 0%, rgba(254,252,247,.94) 55%, rgba(241,228,200,.22) 100%);

  /* Platinum (Amex Centurion vibe) */
  --plat-bg-1: #F7F4FC;
  --plat-bg-2: #E9E2F5;
  --plat-line: rgba(130,111,166,.32);
  --plat-text: #3D365A;
  --plat-text-mid: #6A5F86;

  /* Misc */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --sh-soft: 0 1px 3px rgba(15,35,24,.04), 0 6px 24px rgba(15,35,24,.08);
  --sh-lift: 0 4px 12px rgba(15,35,24,.06), 0 18px 48px rgba(15,35,24,.14);
  --sh-deep: 0 8px 32px rgba(15,35,24,.16), 0 32px 80px rgba(15,35,24,.22);

  --ease: cubic-bezier(.2,.65,.25,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-sans);
  background: var(--warm-cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;          /* never fake bold/italic — every weight we use ships natively */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ── EDITORIAL SERIF RENDERING ────────────────────────────────
   Georgia was engineered for screen, but at large display sizes
   we still want maximum kerning + ligature work to keep the
   editorial polish intact. */
h1, h2, h3,
.demo-stage h1,
.cc-hero-title,
.cc-drop-head-text h3,
.find-region-name,
.find-featured-name,
.find-location-name,
.find-closest-name,
.feat-tier-title,
.feat-city-title{
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
  text-rendering: geometricPrecision;
}

/* ── ITALIC ACCENTS ───────────────────────────────────────────
   Georgia Italic is one of the cleanest screen italics ever shipped,
   but we still keep italics as subtle accents: never bolder than the
   roman, slightly looser tracking so glyphs breathe on glass and
   warm backgrounds. */
em, i, .em-accent{
  font-style: italic;
  font-weight: inherit;          /* never heavier than the surrounding roman */
  letter-spacing: .002em;        /* prevent optical bleed on screen-italic glyphs */
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 0;
}
/* When italics sit on glass (mega-nav hero, drop hero), nudge the
   color away from pure white and add a hair more tracking so the
   serif tail doesn't muddy against the blur. */
.cc-hero-title em,
.cc-drop-head-text h3 em{
  letter-spacing: .006em;
  font-weight: 400;
}

/* ── DEMO STAGE (page beneath the nav, just so the nav has context) ── */
.demo-stage{
  min-height: 200vh;
  padding: 80px 32px;
  background:
    radial-gradient(900px 540px at 20% -10%, rgba(232,241,249,.55), transparent 60%),
    radial-gradient(700px 420px at 110% 20%, rgba(241,228,200,.30), transparent 60%),
    var(--warm-cream);
}
.demo-stage h1{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--gd);
  max-width: 900px;
  margin: 40px auto 24px;
}
.demo-stage h1 em{
  font-style: italic;
  font-weight: 400;
  color: var(--g);
}
.demo-stage .lede{
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-mid);
  text-align: center;
}
.demo-stage .meta{
  max-width: 900px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.demo-stage .meta div{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-size: 13px;
  color: var(--ink-mid);
}
.demo-stage .meta strong{
  display:block;
  font-family:var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════
   1. NAV SHELL
   ════════════════════════════════════════════════════════════════ */
.cc-nav{
  position: sticky;
  top: 0;
  z-index: 500;
  background:
    linear-gradient(180deg, rgba(254,252,247,.94) 0%, rgba(251,246,236,.92) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(18,63,82,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(18,63,82,.08);
}
.cc-nav-row{
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0,1fr) minmax(170px, auto);
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: 64px;
  overflow-x: clip;
}

/* Logo */
.cc-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s var(--ease);
}
.cc-logo:hover{ opacity: .85; }
.cc-logo-mark{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--trust-blue), var(--reward-coastal));
  border: 1px solid rgba(18,63,82,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cc-logo-text{
  font-family:var(--ff-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.01em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
/* Center links */
.cc-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow-x: clip;
}
.cc-link{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, max-content) auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  max-width: 118px;
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--ink-mid);
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
  white-space: normal;
  text-align: center;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.cc-link:hover,
.cc-link.is-open{
  color: var(--gd);
  background: linear-gradient(135deg, rgba(232,241,249,.62) 0%, rgba(254,252,247,.92) 55%, rgba(241,228,200,.34) 100%);
}
.cc-link::before{
  content:'';
  position:absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
  opacity: .88;
  transform: translateY(2px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.cc-link:hover::before,
.cc-link.is-open::before{ opacity: 1; transform: translateY(0); }
.cc-link-icon{ font-size: 13px; line-height: 1; }
.cc-link > span:nth-child(2){
  min-width: 0;
  display: block;
  max-width: 74px;
}
.cc-link-caret{
  font-size: 8px;
  opacity: .5;
  transition: transform .25s var(--ease);
}
.cc-link.is-open .cc-link-caret{ transform: rotate(180deg); opacity: 1; }

/* Hover bridge (no gap-close) */
.cc-link::after{
  content:'';
  position:absolute;
  left:0; right:0;
  top: 100%;
  height: 14px;
  background: transparent;
}

/* Right side */
.cc-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 0;
}
.cc-action-link{
  color: var(--ink-mid);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: normal;
  line-height: 1.1;
  text-align: center;
}
.cc-action-link:hover{ background: linear-gradient(135deg, rgba(232,241,249,.50), rgba(254,252,247,.92)); color: var(--gd); }
.cc-action-join{
  margin-left: 6px;
  padding: 8px 16px 8px 14px;
  background: linear-gradient(135deg, var(--g), var(--gd));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 4px 12px rgba(18,63,82,.18);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-action-join:hover{
  background: linear-gradient(135deg, var(--gm), var(--gd));
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 6px 18px rgba(18,63,82,.25);
}
.cc-action-join .crown{
  font-size: 11px;
  display: inline-block;
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   2. DROPDOWN PANELS (shared shell)
   ════════════════════════════════════════════════════════════════ */
.cc-dropdown{
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--sh-deep);
  padding: 0;
  z-index: 999;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  overflow: hidden;
  max-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
}
.cc-link.is-open .cc-dropdown{
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Per-dropdown widths */
.cc-dropdown.plans-drop      { width: min(94vw, 880px); }
.cc-dropdown.calc-drop       { width: min(94vw, 820px); }
.cc-dropdown.find-drop       { width: min(96vw, 1040px); }
.cc-dropdown.rewards-drop    { width: min(94vw, 800px); }
.cc-dropdown.featured-drop   { width: min(94vw, 860px); }
.cc-dropdown.shop-drop       { width: min(94vw, 720px); }
.cc-dropdown.about-drop      { width: min(94vw, 680px); }

/* Shared dropdown header (premium serif) */
.cc-drop-head{
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(232,241,249,.62), transparent 60%),
    radial-gradient(120% 80% at 100% 0%, rgba(241,228,200,.34), transparent 60%),
    linear-gradient(180deg, var(--warm-white), var(--paper));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-shrink: 0;
}
.cc-drop-head-text h3{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--gd);
  margin-bottom: 8px;
}
.cc-drop-head-text h3 em{
  font-style: italic;
  font-weight: 400;
  color: var(--g);
}
.cc-drop-head-text p{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 480px;
  letter-spacing: -.005em;
}
.cc-drop-eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-bottom: 10px;
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g);
}
.cc-drop-eyebrow::before{
  content:'';
  width: 14px;
  height: 1px;
  background: var(--g);
}
.cc-drop-head-trust{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
}
.cc-drop-head-trust span{
  font-size: 10.5px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -.005em;
}
.cc-drop-head-trust span::before{
  content:'✓';
  color: var(--g);
  margin-right: 5px;
  font-weight: 700;
}

/* Dropdown body */
.cc-drop-body{ padding: 24px 28px; overflow-y: auto; flex: 1; min-height: 0; }
/* Thin custom scrollbar for drop body */
.cc-drop-body::-webkit-scrollbar{ width: 5px; }
.cc-drop-body::-webkit-scrollbar-thumb{ background: var(--gl); border-radius: 3px; }
.cc-drop-body::-webkit-scrollbar-track{ background: transparent; }

/* Footer strip */
.cc-drop-foot{
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(13,61,53,.025));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  flex-shrink: 0;
}
.cc-drop-foot-trust{ display: flex; gap: 16px; flex-wrap: wrap; }
.cc-drop-foot-trust span::before{
  content:'·';
  color: var(--gold);
  margin-right: 6px;
  font-weight: 900;
}

/* ════════════════════════════════════════════════════════════════
   3. SHARED PRIMITIVES (hero card, secondary cards, supporting links)
   ════════════════════════════════════════════════════════════════ */

/* Hero card — the ONE primary action per dropdown */
.cc-hero{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(45,138,94,.10), transparent 55%),
    linear-gradient(135deg, var(--gd), var(--g));
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
  border: 1px solid rgba(46,125,118,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 24px rgba(13,61,53,.18);
}
.cc-hero::after{
  content:'';
  position:absolute;
  top: -40%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(46,125,118,.22), transparent 60%);
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.cc-hero:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 36px rgba(13,61,53,.28);
}
.cc-hero-text{ position: relative; z-index: 1; min-width: 0; }
.cc-hero-eyebrow{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-hero-eyebrow::before{
  content:'';
  width: 14px;
  height: 1px;
  background: var(--gold-l);
}
.cc-hero-title{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin-bottom: 8px;
}
.cc-hero-title em{ font-style: italic; color: var(--gold-soft); font-weight: 400; }
.cc-hero-sub{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 440px;
}
.cc-hero-cta{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 20px;
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.16), 0 8px 18px rgba(46,125,118,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cc-hero:hover .cc-hero-cta{
  transform: translateX(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,.16), 0 10px 22px rgba(46,125,118,.40);
}
.cc-hero-cta .arrow{ transition: transform .25s var(--ease); }
.cc-hero:hover .cc-hero-cta .arrow{ transform: translateX(3px); }

/* Secondary cards row (always 2 cards) */
.cc-secondary{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.cc-sec-card{
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .2s var(--ease);
  cursor: pointer;
  position: relative;
}
.cc-sec-card:hover{
  border-color: var(--gm);
  background: var(--gll);
  transform: translateY(-1px);
  box-shadow: var(--sh-soft);
}
.cc-sec-card-icon{
  font-size: 16px;
  margin-bottom: 2px;
}
.cc-sec-card-title{
  font-family:var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-sec-card-title .arr{
  font-size: 11px;
  color: var(--g);
  opacity: 0;
  transform: translateX(-3px);
  transition: all .2s var(--ease);
}
.cc-sec-card:hover .arr{ opacity: 1; transform: translateX(0); }
.cc-sec-card-sub{
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.4;
}

/* Supporting links column */
.cc-support{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cc-support-label{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.cc-support-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 18px;
}
.cc-support-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  text-decoration: none;
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: 6px;
  transition: color .18s var(--ease);
}
.cc-support-link:hover{ color: var(--g); }
.cc-support-link .dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gm);
  opacity: .5;
  flex-shrink: 0;
  transition: all .18s var(--ease);
}
.cc-support-link:hover .dot{
  background: var(--gold-l);
  opacity: 1;
  transform: scale(1.4);
}

/* ════════════════════════════════════════════════════════════════
   4. PPO PLANS DROPDOWN — patient entry point
   ════════════════════════════════════════════════════════════════ */
.plans-needs-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
}
.plans-need-pill{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
  transition: all .18s var(--ease);
  cursor: pointer;
}
.plans-need-pill:hover{
  background: var(--gll);
  border-color: var(--gm);
  transform: translateX(2px);
}
.plans-need-pill .ic{ font-size: 14px; }

.plans-picks{
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--gold-vl), var(--cream));
  border: 1px solid rgba(46,125,118,.18);
  border-radius: 14px;
}
.plans-picks-label{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plans-picks-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.plans-pick{
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  border-right: 1px solid rgba(46,125,118,.15);
  padding-right: 12px;
  cursor: pointer;
}
.plans-pick:last-child{ border-right: none; padding-right: 0; }

/* ── UHC Featured Access Card ── */
.plans-uhc-feature{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(207,229,243,.55) 0%, rgba(254,252,247,.96) 55%, rgba(232,241,249,.40) 100%);
  border: 1px solid rgba(46,125,118,.22);
  border-radius: 14px;
  transition: all .2s var(--ease);
}
.plans-uhc-feature:hover{
  border-color: rgba(46,125,118,.38);
  box-shadow: 0 6px 18px rgba(18,63,82,.08);
}
.plans-uhc-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: linear-gradient(135deg, var(--g), var(--gd));
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.plans-uhc-info{ min-width: 0; }
.plans-uhc-name{
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.plans-uhc-sub{
  font-size: 11.5px;
  color: var(--ink-mid);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
}
.plans-uhc-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--g), var(--gd));
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s var(--ease);
  box-shadow: 0 4px 14px rgba(18,63,82,.18);
}
.plans-uhc-cta:hover{
  background: linear-gradient(135deg, var(--gm), var(--gd));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(18,63,82,.24);
}
.plans-pick-medal{
  font-size: 18px;
  margin-bottom: 4px;
  display: block;
}
.plans-pick-title{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.plans-pick-name{
  font-size: 11px;
  color: var(--ink-mid);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   5. COST CALCULATOR DROPDOWN — savings emotional pull
   ════════════════════════════════════════════════════════════════ */
.calc-savings{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.calc-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all .2s var(--ease);
  cursor: pointer;
}
.calc-row:hover{
  border-color: var(--gm);
  background: var(--gll);
}
.calc-row-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gll), var(--gl));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.calc-row-name{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gd);
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
.calc-row-prices{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
}
.calc-row-strike{
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(220,38,38,.5);
  text-decoration-thickness: 1.5px;
}
.calc-row-arr{ color: var(--gm); font-weight: 800; }
.calc-row-good{
  color: var(--g);
  font-weight: 800;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: -.01em;
}

/* ════════════════════════════════════════════════════════════════
   6. FIND DENTIST DROPDOWN v201
   Layout: Region tabs → Featured Dentist → [Locations + Areas | ZIP+Cities+Awaiting]
   ════════════════════════════════════════════════════════════════ */

/* ── FEATURED DENTIST CARD (right col, above ZIP panel) ── */
.find-featured{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--gold-vl) 0%, #FFF 70%);
  border: 1px solid rgba(46,125,118,.22);
  border-radius: 12px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.find-featured:hover{
  box-shadow: 0 6px 22px rgba(46,125,118,.12);
  transform: translateY(-1px);
}
.find-featured-avatar{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, var(--cream));
  border: 1px solid rgba(46,125,118,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,61,53,.08);
}
.find-featured-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family:var(--ff-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.find-featured-eyebrow::before{
  content:'';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-l);
  box-shadow: 0 0 0 3px rgba(46,125,118,.18);
}
.find-featured-name{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--gd);
  margin-bottom: 4px;
}
.find-featured-loc{
  font-size: 12px;
  color: var(--ink-mid);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* v215 — single tier badge on the Featured Dentist card.
   Platinum Elite (orange) > Capy Accredited (green) > Verified (coastal blue).
   One badge per dentist, showing the highest tier they hold. */
.find-featured-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.tier-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.25;
  white-space: nowrap;
  color: #fff;
}
.tier-chip .tier-chip-icon{
  font-size: 11px;
  line-height: 1;
  opacity: .95;
}

/* Platinum Elite — refined terracotta / burnt orange. Strongest rank. */
.tier-chip.platinum-elite{
  background: linear-gradient(135deg, #DD8857, #BF5D31);
  border: 1px solid rgba(166,82,40,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 6px rgba(166,82,40,.22);
}

/* Capy Accredited — brand coastal teal-green. */
.tier-chip.capy-accredited{
  background: linear-gradient(135deg, #5DA7A0, #2E7D76);
  border: 1px solid rgba(20,93,86,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 2px 6px rgba(20,93,86,.20);
}

/* Verified — coastal blue (third coastal palette hue). Baseline trust. */
.tier-chip.verified{
  background: linear-gradient(135deg, #5A9DC7, #3D7AA5);
  border: 1px solid rgba(46,98,138,.42);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 2px 6px rgba(46,98,138,.20);
}
.find-featured-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.find-featured-btn{
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s var(--ease);
  border: 1px solid transparent;
  text-align: center;
  cursor: pointer;
}
.find-featured-btn.primary{
  background: var(--gd);
  color: #fff;
}
.find-featured-btn.primary:hover{
  background: var(--g);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13,61,53,.18);
}
.find-featured-btn.secondary{
  background: var(--paper);
  color: var(--gd);
  border-color: var(--line-strong);
}
.find-featured-btn.secondary:hover{
  background: var(--cream);
  border-color: var(--g);
  color: var(--g);
}

/* ── TWO-COLUMN BODY LAYOUT ── */
.find-2col{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 12px;
}

/* ── NETWORK STATUS BADGE ── */
.net-status{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: var(--r-pill); font-family: var(--ff-sans); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.net-status::before{ content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; animation: netPulse 2.4s ease-in-out infinite; }
@keyframes netPulse{ 0%,100%{ opacity:.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.35); } }
.net-status.building{ background: rgba(234,179,8,.13); color: #92660A; border: 1px solid rgba(234,179,8,.28); }

/* ── CITY PATIENT DEMAND SIGNAL ── */
.city-demand-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  min-width: 0;
}
.city-demand-stat{
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--gd);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.city-demand-stat em{
  font-style: normal;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 500;
  margin-left: 1px;
}
.city-spot-open{
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: -.005em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}
.city-spot-open::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #16a34a;
  animation: citySpotPulse 2s ease-in-out infinite;
}
@keyframes citySpotPulse{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.5); }
}
.city-spot-featured{
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 600;
  color: var(--g);
  letter-spacing: -.005em;
  white-space: nowrap;
}
.find-city:hover .city-spot-open{ color: var(--gd); }
.find-city:hover .city-demand-stat{ color: var(--g); }

/* ════════════════════════════════════════════════════════════════
   PLATINUM ELITE FEATURED DENTIST CARD — v410 premium effects
   Ported from the feat-platinum keyframes already in this file.
   ════════════════════════════════════════════════════════════════ */

/* ── Wrapper tier themes ── */
.find-featured{
  position: relative;
  overflow: hidden;
}
.find-featured[data-tier="platinum-elite"]{
  background:
    radial-gradient(140% 110% at 0% 0%, rgba(241,228,200,.72), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(216,184,114,.28), transparent 55%),
    linear-gradient(135deg, var(--plat-bg-1) 0%, #FEFCF7 52%, var(--plat-bg-2) 100%);
  border-color: rgba(168,136,70,.40);
  box-shadow: 0 1px 0 rgba(255,255,255,.80) inset, 0 8px 28px rgba(168,136,70,.16);
}
.find-featured[data-tier="capy-accredited"]{
  background: linear-gradient(135deg, var(--gll) 0%, var(--paper) 58%, rgba(207,229,243,.45) 100%);
  border-color: rgba(46,125,118,.26);
}
.find-featured[data-tier="verified"]{
  background: linear-gradient(135deg, var(--sky-softer) 0%, var(--paper) 58%);
  border-color: rgba(91,148,194,.22);
}

/* ── Sweep shimmer (platinum only) ── */
.ff-sweep{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(108deg, transparent 30%, rgba(216,184,114,.22) 49%, rgba(255,248,220,.30) 51%, transparent 68%);
  background-size: 250% 100%;
  background-position: -100% 0;
  animation: ffSweep 5s ease-in-out infinite 1.2s;
  pointer-events: none;
  z-index: 0;
}
@keyframes ffSweep{
  0%,100%{ background-position: -100% 0; opacity: 0; }
  35%{ background-position: -100% 0; opacity: 0; }
  55%{ background-position: 180% 0; opacity: 1; }
  70%{ background-position: 180% 0; opacity: 0; }
}

/* ── Bloom (platinum only) ── */
.ff-bloom{
  position: absolute;
  right: -30px; top: -30px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,184,114,.26), transparent 65%);
  animation: ffBloom 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ffBloom{
  0%,100%{ opacity: .55; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.18); }
}

/* ── Premium avatar ── */
.ff-avatar{
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ff-avatar[data-tier="platinum-elite"]{
  background: linear-gradient(135deg, #F5E6BB, #D8B872);
  border: 1px solid rgba(168,136,70,.36);
  box-shadow: 0 3px 10px rgba(168,136,70,.24), inset 0 1px 0 rgba(255,255,255,.60);
}
.ff-avatar[data-tier="capy-accredited"]{
  background: linear-gradient(135deg, var(--gll), var(--gl));
  border: 1px solid rgba(46,125,118,.28);
  box-shadow: 0 3px 10px rgba(46,125,118,.14);
}
.ff-avatar[data-tier="verified"]{
  background: linear-gradient(135deg, var(--sky-softer), var(--trust-blue));
  border: 1px solid rgba(91,148,194,.28);
  box-shadow: 0 3px 10px rgba(91,148,194,.14);
}
.ff-avatar-glow{
  position: absolute;
  inset: -5px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(216,184,114,.34), transparent 65%);
  animation: ffAvatarGlow 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ffAvatarGlow{
  0%,100%{ opacity: .5; }
  50%{ opacity: 1; }
}
.ff-avatar-shine{
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.48) 0%, transparent 52%);
  pointer-events: none;
}
.ff-avatar-icon{
  font-size: 28px;
  position: relative;
  z-index: 2;
}
.ff-avatar-ring{ display: none; } /* removed per design */

/* ══════════════════════════════════════════════════════════════
   v224 PRESTIGE EFFECTS — feat-city-hero + find-featured shared
   bloom · shimmer border · diagonal sweep · orbiting sparks · cta glow
   ══════════════════════════════════════════════════════════════ */

/* Bloom — radial glow pulse from icon side */
.feat-city-bloom{
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 130% at 7% 50%, rgba(216,184,114,.32) 0%, transparent 62%);
  animation: fCityBloom 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes fCityBloom{
  0%,100%{ opacity: .55; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.07); }
}

/* Shimmer — animated prestige border ring */
.feat-city-shimmer{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent    0deg,
    rgba(216,184,114,.65)  55deg,
    transparent  115deg,
    transparent  235deg,
    rgba(216,184,114,.42) 295deg,
    transparent  355deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  animation: fCityShimmer 5.5s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: .80;
}
@keyframes fCityShimmer{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* Sweep — diagonal prestige light sweep */
.feat-city-sweep{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 18%,
    rgba(255,250,218,.45) 44%,
    rgba(216,184,114,.28) 50%,
    transparent 76%
  );
  background-size: 260% 100%;
  background-position: -100% 0;
  animation: fCitySweep 7s ease-in-out infinite 2s;
  pointer-events: none;
  z-index: 0;
}
@keyframes fCitySweep{
  0%,28%{ background-position: -100% 0; opacity: 0; }
  52%{ background-position: 210% 0; opacity: 1; }
  72%,100%{ background-position: 210% 0; opacity: 0; }
}

/* Sparks — orbiting diamond particles around icon/medal */
.feat-city-spark{
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: #D8B872;
  box-shadow: 0 0 8px 2px rgba(216,184,114,.75);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transform: rotate(45deg) scale(.2);
  will-change: opacity, transform;
}
.feat-city-spark-1{ top: -11px; left: 50%; margin-left: -2.5px; }
.feat-city-spark-2{ top:   3px; right: -11px; }
.feat-city-spark-3{ bottom: 3px; right: -11px; }
.feat-city-spark-4{ bottom: -11px; left: 50%; margin-left: -2.5px; }
.feat-city-spark-5{ bottom: 3px; left: -11px; }
.feat-city-spark-6{ top:   3px; left: -11px; }
@keyframes fCitySpark{
  0%,100%{ opacity: 0; transform: rotate(45deg) scale(.2); }
  20%,42%{ opacity: 1; transform: rotate(45deg) scale(1.25); }
  58%    { opacity: 0; transform: rotate(45deg) scale(.3); }
}
.feat-city-spark-1{ animation: fCitySpark 3.2s ease-in-out infinite 0s; }
.feat-city-spark-2{ animation: fCitySpark 3.2s ease-in-out infinite .53s; }
.feat-city-spark-3{ animation: fCitySpark 3.2s ease-in-out infinite 1.07s; }
.feat-city-spark-4{ animation: fCitySpark 3.2s ease-in-out infinite 1.60s; }
.feat-city-spark-5{ animation: fCitySpark 3.2s ease-in-out infinite 2.13s; }
.feat-city-spark-6{ animation: fCitySpark 3.2s ease-in-out infinite 2.67s; }

/* CTA button glow pulse */
.feat-city-cta{ position: relative; overflow: visible; }
.feat-city-cta-glow{
  position: absolute;
  inset: -7px -10px;
  border-radius: var(--r-pill);
  background: radial-gradient(ellipse at 50% 50%, rgba(216,184,114,.58), transparent 62%);
  animation: fCtaGlow 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes fCtaGlow{
  0%,100%{ opacity: .45; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.12); }
}

/* ── find-featured card: same bloom/shimmer/sweep but tier-tinted ── */
/* Platinum Elite: gold — same as feat-city-hero */
/* Capy Accredited: teal overrides */
.find-featured[data-tier="capy-accredited"] .feat-city-bloom{
  background: radial-gradient(72% 130% at 7% 50%, rgba(46,125,118,.22) 0%, transparent 62%);
}
.find-featured[data-tier="capy-accredited"] .feat-city-shimmer{
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent    0deg,
    rgba(93,167,160,.60)  55deg,
    transparent  115deg,
    transparent  235deg,
    rgba(93,167,160,.38) 295deg,
    transparent  355deg
  );
}
.find-featured[data-tier="capy-accredited"] .feat-city-sweep{
  background: linear-gradient(
    110deg,
    transparent 18%,
    rgba(217,239,234,.55) 44%,
    rgba(93,167,160,.22) 50%,
    transparent 76%
  );
  background-size: 260% 100%;
  background-position: -100% 0;
}
.find-featured[data-tier="capy-accredited"] .feat-city-spark{
  background: var(--gm);
  box-shadow: 0 0 7px 2px rgba(46,125,118,.65);
}
/* Verified: subtle blue */
.find-featured[data-tier="verified"] .feat-city-bloom{
  background: radial-gradient(72% 130% at 7% 50%, rgba(91,148,194,.18) 0%, transparent 62%);
}
.find-featured[data-tier="verified"] .feat-city-shimmer{
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent    0deg,
    rgba(91,148,194,.48)  55deg,
    transparent  115deg,
    transparent  235deg,
    rgba(91,148,194,.30) 295deg,
    transparent  355deg
  );
}
.find-featured[data-tier="verified"] .feat-city-spark{
  background: #5A9DC7;
  box-shadow: 0 0 6px 2px rgba(91,148,194,.55);
}
/* medal overflow must be visible for sparks to appear outside it */
.feat-city-medal{ overflow: visible; }
.ff-avatar{ overflow: visible; }

/* ── ff-info content ── */
.ff-info{
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.ff-tier-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #fff;
  white-space: nowrap;
}
.ff-tier-badge.platinum-elite{ background: linear-gradient(135deg, #DD8857, #BF5D31); box-shadow: 0 2px 6px rgba(166,82,40,.22); }
.ff-tier-badge.capy-accredited{ background: linear-gradient(135deg, var(--gm), var(--g)); box-shadow: 0 2px 6px rgba(20,93,86,.18); }
.ff-tier-badge.verified{ background: linear-gradient(135deg, #5A9DC7, #3D7AA5); box-shadow: 0 2px 6px rgba(46,98,138,.18); }
.ff-tier-badge.empty{ background: rgba(18,63,82,.10); color: var(--ink-mid); box-shadow: none; }

.ff-name{
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -.015em;
  color: var(--gd);
  margin-bottom: 4px;
  display: block;
  text-decoration: none;
  line-height: 1.1;
  transition: color .18s var(--ease);
}
.ff-name:hover{ color: var(--g); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ff-name-plain{
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--gd);
  margin-bottom: 4px;
  line-height: 1.1;
  letter-spacing: -.015em;
}

.ff-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-mid);
  font-weight: 500;
  margin-bottom: 7px;
}
.ff-meta-dot{
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: .5;
  flex-shrink: 0;
}
.ff-reviews{
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 500;
}

.ff-ppo{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ff-ppo-chip{
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(46,125,118,.18);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--gd);
  letter-spacing: -.005em;
}
.ff-ppo-check{ color: var(--g); font-weight: 800; margin-right: 3px; }

/* ── Featured card CTAs ── */
.ff-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.ff-btn-book, .ff-btn-call{
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s var(--ease);
  text-align: center;
  min-width: 148px;
  letter-spacing: -.005em;
}
.ff-btn-book{
  background: linear-gradient(135deg, rgba(93,167,160,.98), rgba(46,125,118,.98) 54%, rgba(18,63,82,.98));
  color: #fff;
  border-color: rgba(46,125,118,.32);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px rgba(18,63,82,.16);
}
.ff-btn-book:hover{
  background: linear-gradient(135deg, rgba(120,187,179,1), rgba(46,125,118,1) 52%, rgba(18,63,82,1));
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px rgba(18,63,82,.20);
}
.ff-btn-call{
  background: rgba(255,253,249,.88);
  color: var(--gd);
  border-color: rgba(18,63,82,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.88) inset;
}
.ff-btn-call:hover{
  background: rgba(232,241,249,.72);
  color: var(--g);
  border-color: rgba(46,125,118,.28);
  transform: translateY(-1px);
}

/* Platinum Elite book button gets the gold treatment */
.find-featured[data-tier="platinum-elite"] .ff-btn-book{
  background: linear-gradient(135deg, #C9B07A, #A88846);
  border-color: rgba(168,136,70,.52);
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 8px 20px rgba(168,136,70,.28);
}
.find-featured[data-tier="platinum-elite"] .ff-btn-book:hover{
  background: linear-gradient(135deg, #D4BB88, #B8943E);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px rgba(168,136,70,.38);
}

/* ── COMPACT REGION TABS (now inside left col) ── */
.find-regions{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.find-region{
  position: relative;
  padding: 7px 6px 6px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .22s var(--ease);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  overflow: hidden;
}
.find-region:hover{
  border-color: var(--gm);
  background: var(--gll);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(15,35,24,.06);
}
.find-region.is-active{
  border-color: var(--g);
  background: linear-gradient(180deg, var(--paper), var(--gll));
  box-shadow: 0 3px 12px rgba(45,138,94,.12), inset 0 0 0 1px var(--gm);
}
.find-region.is-active::before{
  content:'';
  position: absolute;
  top: -1.5px; left: 10px; right: 10px;
  height: 2px;
  background: linear-gradient(90deg, var(--gm), var(--g), var(--gm));
  border-radius: 0 0 3px 3px;
}
.find-region-icon{ font-size: 14px; line-height: 1; margin-bottom: 1px; }
.find-region-name{
  font-family:var(--ff-sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: -.005em;
  color: var(--gd);
  line-height: 1.1;
}
.find-region.is-active .find-region-name{ color: var(--g); }
.find-region-sub{ display: none; }

/* ── PANEL: shared shell for Locations / Areas / ZIP cards ── */
.find-panel{
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.find-panel + .find-panel{ margin-top: 12px; }
.find-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--gll), var(--cream));
}
.find-panel-title{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family:var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g);
}
.find-panel-tag{
  font-family:var(--ff-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.find-panel-body{ padding: 8px; }

/* ── LOCATIONS LIST (left top) ── */
.find-locations{ display: flex; flex-direction: column; gap: 4px; }
.find-location{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all .15s var(--ease);
  border: 1px solid transparent;
}
.find-location:hover{
  background: var(--gll);
  border-color: var(--gm);
}
.find-location.is-active{
  background: linear-gradient(180deg, var(--gll), var(--paper));
  border-color: var(--gm);
  box-shadow: inset 2px 0 0 var(--g);
}
.find-location-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.find-location.is-active .find-location-icon{
  background: #fff;
  border-color: var(--gm);
}
.find-location-text{ flex: 1; min-width: 0; }
.find-location-name{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--gd);
  letter-spacing: -.015em;
  line-height: 1.2;
  display: block;
  overflow-wrap: anywhere;
}
.find-location.is-active .find-location-name{ color: var(--g); }
.find-location-sub{
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 1px;
}

/* ── POPULAR AREAS LIST (left bottom) ── */
.find-areas{
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 224px;
  overflow-y: auto;
  padding-right: 2px;
}
.find-areas::-webkit-scrollbar{ width: 5px; }
.find-areas::-webkit-scrollbar-thumb{ background: var(--gl); border-radius: 3px; }
.find-area{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) minmax(58px, auto);
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all .15s var(--ease);
  border: 1px solid transparent;
}
.find-area:hover{
  background: var(--gll);
  border-color: var(--gm);
}
.find-area.is-active{
  background: var(--gll);
  border-color: var(--gm);
  box-shadow: inset 2px 0 0 var(--g);
}
.find-area-icon{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.find-area-name{
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.01em;
  min-width: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.find-area.is-active .find-area-name{ color: var(--g); }
.find-area-count{
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -.005em;
  line-height: 1.1;
  text-align: right;
  white-space: normal;
}
.find-area.is-active .find-area-count{ color: var(--g); font-weight: 700; }

/* ── ZIP PANEL (right side) ── */
.find-zip-panel{
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.find-zip-row{
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.find-zip-input{
  flex: 1;
  padding: 12px 16px;
  font-family: var(--ff-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--gd);
  outline: none;
  transition: all .18s var(--ease);
  text-align: center;
}
.find-zip-input:focus{
  border-color: var(--gm);
  box-shadow: 0 0 0 3px rgba(45,138,94,.12);
}
.find-zip-input::placeholder{ color: var(--ink-soft); font-weight: 600; }
.find-zip-btn{
  padding: 12px 22px;
  background: var(--gd);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.find-zip-btn:hover{ background: var(--g); }
.find-zip-note{
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
  font-family:var(--ff-serif);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* CLOSEST NEARBY AREA section */
.find-closest{
  padding: 14px;
  background: linear-gradient(180deg, var(--gll) 0%, var(--paper) 100%);
  border: 1px solid var(--gm);
  border-radius: 12px;
  margin-bottom: 12px;
}
.find-closest-label{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.find-closest-name{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--gd);
  margin-bottom: 4px;
}
.find-closest-count{
  font-size: 12px;
  color: var(--ink-mid);
  font-weight: 600;
  margin-bottom: 10px;
}
.find-closest-cta{
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: var(--gd);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all .2s var(--ease);
}
.find-closest-cta:hover{
  background: var(--g);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13,61,53,.20);
}

/* POPULAR CITIES list */
.find-cities-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-top: 4px;
}
.find-cities-title{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.find-cities-tag{
  font-family:var(--ff-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.find-cities{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.find-city{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) minmax(0, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all .15s var(--ease);
  cursor: pointer;
}
.find-city:hover{ background: var(--gll); }
.find-city-pin{ font-size: 10px; color: var(--red); opacity: .8; }
.find-city-name{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gd);
  letter-spacing: -.005em;
  min-width: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.find-city-zip,
.find-city-demand-legacy{
  font-family:var(--ff-serif);
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  color: var(--g);
  letter-spacing: -.005em;
  white-space: normal;
  line-height: 1.12;
  text-align: right;
  overflow-wrap: anywhere;
}
.find-city:hover .find-city-zip{ color: var(--gold); }

/* AWAITING ACCREDITATION stat */
.find-awaiting{
  padding: 14px;
  background: linear-gradient(180deg, var(--gold-vl) 0%, var(--paper) 100%);
  border: 1px solid rgba(46,125,118,.22);
  border-radius: 12px;
  position: relative;
}
.find-awaiting-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.find-awaiting-eyebrow::before{
  content:'';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-l);
  animation: awaitingPulse 2s ease-in-out infinite;
}
@keyframes awaitingPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(46,125,118,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(46,125,118,0); }
}
.find-awaiting-num{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gd);
  margin-bottom: 4px;
}
.find-awaiting-num em{
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.find-awaiting-text{
  font-size: 11.5px;
  color: var(--ink-mid);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}
.find-awaiting-text strong{ color: var(--gd); font-weight: 700; }
.find-awaiting-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(46,125,118,.18);
}
.find-awaiting-q{
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
  font-family:var(--ff-serif);
}
.find-awaiting-link{
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -.005em;
}
.find-awaiting-link:hover{ color: var(--gold-l); }
.find-awaiting-link .arr{ transition: transform .2s var(--ease); }
.find-awaiting-link:hover .arr{ transform: translateX(3px); }
.find-zip-row{
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.find-zip-input{
  flex: 1;
  padding: 10px 14px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--gd);
  outline: none;
  transition: all .18s var(--ease);
}
.find-zip-input:focus{
  border-color: var(--gm);
  box-shadow: 0 0 0 3px rgba(45,138,94,.12);
}
.find-zip-input::placeholder{ color: var(--ink-soft); font-weight: 500; }
.find-zip-btn{
  padding: 10px 18px;
  background: var(--gd);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.find-zip-btn:hover{ background: var(--g); }
.find-zip-note{
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   7. PATIENT REWARDS DROPDOWN — coastal loyalty feel
   ════════════════════════════════════════════════════════════════ */
.rewards-hero{
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(232,241,249,.78), transparent 62%),
    radial-gradient(90% 120% at 100% 0%, rgba(241,228,200,.62), transparent 58%),
    linear-gradient(135deg, var(--warm-white) 0%, var(--paper) 52%, var(--warm-cream) 100%);
  border: 1px solid rgba(18,63,82,.11);
  overflow: hidden;
  position: relative;
}
.rewards-hero::before{
  content:'';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 360px;
  height: 360px;
  background:
    radial-gradient(circle, rgba(120,187,179,.18) 0%, transparent 52%);
  pointer-events: none;
}
.rewards-hero .cc-hero-eyebrow{ color: var(--g); }
.rewards-hero .cc-hero-eyebrow::before{ background: var(--gm); }
.rewards-hero .cc-hero-title{ color: var(--gd); }
.rewards-hero .cc-hero-title em{ color: var(--g); }
.rewards-hero .cc-hero-sub{ color: var(--ink-mid); }

.rewards-balance{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 11px 5px 9px;
  background: rgba(255,253,249,.78);
  border: 1px solid rgba(46,125,118,.18);
  border-radius: var(--r-pill);
  font-family:var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: .04em;
}
.rewards-balance .crown{ font-size: 11px; }
.rewards-balance strong{ color: var(--g); font-weight: 800; }

.rewards-ways{
  margin-top: 16px;
}
.rewards-ways-label{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rewards-ways-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.reward-way{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.reward-way:hover{
  background: var(--gold-vl);
  border-color: rgba(46,125,118,.32);
  transform: translateX(2px);
}
.reward-way-ic{ font-size: 15px; }

/* v216 — Ways-to-earn row gets a stacked text block so the Refer row can
   carry a small eligibility note ("Up to 2× per month") beneath its name. */
.reward-way-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.reward-way-name{
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.reward-way-meta{
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -.003em;
  line-height: 1.2;
  margin-top: 1px;
}

.reward-way-pts{
  margin-left: auto;
  font-family:var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.005em;
}

.rewards-perks{
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(232,241,249,.32) 0%, rgba(254,252,247,.96) 58%, rgba(241,228,200,.36) 100%);
  border: 1px solid rgba(18,63,82,.11);
  border-radius: 14px;
}
.rewards-perks-label{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
/* ──────────────────────────────────────────────
   v220 · PREMIUM REWARD REDEMPTION CARDS
   Ports the v212 Platinum Elite animation system
   (feat-plat-dot-frame, feat-plat-mini-diamond-orbit-1..6,
   feat-plat-dot-pulse) onto the 3 redemption cards.
   Diamond core → crown medallion (users redeem 👑 Crowns).
   Three themes: lavender / ice / rose.
   Keyframes themselves are reused verbatim from v212
   so motion timing matches Platinum Elite exactly.
   ────────────────────────────────────────────── */

.rewards-perks-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.reward-perk{
  /* per-card theme tokens — overridden by .theme-* */
  --rp-tint:        #826FA6;
  --rp-tint-soft:   rgba(130,111,166,.58);
  --rp-tint-vsoft:  rgba(130,111,166,.18);
  --rp-tint-deep:   #5F527E;
  --rp-bg-1:        #FFFDF9;
  --rp-bg-2:        #F7F4FC;
  --rp-bg-3:        #EEE7FA;
  --rp-glow-soft:   rgba(233,226,245,.98);
  --rp-spark-mid:   rgba(233,226,245,.96);
  --rp-text:        #3D365A;
  --rp-text-mid:    #6A5F86;
  --rp-shadow-tint: rgba(61,54,90,.18);

  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background:
    radial-gradient(ellipse at 0% 50%, var(--rp-bg-3), transparent 55%),
    radial-gradient(ellipse at 100% 50%, var(--rp-bg-2), transparent 50%),
    linear-gradient(135deg, var(--rp-bg-1) 0%, var(--rp-bg-2) 50%, var(--rp-bg-3) 100%);
  border: 1.25px dashed var(--rp-tint-soft);
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 4px 14px rgba(61,54,90,.08);
  transition:
    border-color .35s var(--ease),
    box-shadow .35s var(--ease),
    transform .35s var(--ease);
}

/* keep card content above the absolute frame + glow dots */
.reward-perk > *:not(.reward-perk-dot-frame):not(.reward-perk-glow-dot){
  position: relative;
  z-index: 2;
}

/* the animated dotted border — mirrors find-plat-dot-frame in v212 */
.reward-perk-dot-frame{
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  background:
    radial-gradient(circle, var(--rp-tint-soft) 0 1px, transparent 1.3px) 0 0 / 12px 2px repeat-x,
    radial-gradient(circle, var(--rp-tint-soft) 0 1px, transparent 1.3px) calc(100% - 1px) 0 / 2px 12px repeat-y,
    radial-gradient(circle, var(--rp-tint-soft) 0 1px, transparent 1.3px) 0 calc(100% - 1px) / 12px 2px repeat-x,
    radial-gradient(circle, var(--rp-tint-soft) 0 1px, transparent 1.3px) 0 0 / 2px 12px repeat-y;
  opacity: .42;
  pointer-events: none;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
  z-index: 1;
}
.reward-perk:hover .reward-perk-dot-frame{
  opacity: .82;
  filter: drop-shadow(0 0 4px var(--rp-tint-vsoft));
  animation: feat-plat-dot-frame 1.1s linear infinite;   /* ← v212 keyframes, reused verbatim */
}

/* star glints that drift between positions so each card feels less patterned */
.reward-perk-glow-dot{
  position: absolute;
  width: 10px;
  height: 10px;
  background:
    radial-gradient(circle, #fff 0 18%, var(--rp-glow-soft) 19% 42%, var(--rp-tint-soft) 43% 58%, transparent 72%);
  clip-path: polygon(50% 0, 61% 35%, 98% 50%, 61% 65%, 50% 100%, 39% 65%, 2% 50%, 39% 35%);
  pointer-events: none;
  z-index: 2;
  filter:
    drop-shadow(0 0 6px var(--rp-glow-soft))
    drop-shadow(0 0 5px var(--rp-tint-vsoft));
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.reward-perk-glow-dot-1{ animation-name: reward-star-roam-1; animation-delay: -.2s; }
.reward-perk-glow-dot-2{ animation-name: reward-star-roam-2; animation-delay: -1.4s; }
.reward-perk-glow-dot-3{ animation-name: reward-star-roam-3; animation-delay: -2.5s; }
.reward-perk-glow-dot-4{ animation-name: reward-star-roam-4; animation-delay: -3.3s; }
.reward-perk.theme-ice .reward-perk-glow-dot{ animation-duration: 5.1s; }
.reward-perk.theme-rose .reward-perk-glow-dot{ animation-duration: 4.9s; animation-direction: reverse; }

/* crown medallion — mirrors find-platinum-medallion structure */
.reward-perk-crown{
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle, #fff 0%, rgba(247,244,252,.82) 60%, var(--rp-bg-3) 100%);
  border: 1.5px solid var(--rp-tint-soft);
  box-shadow:
    inset 0 0 10px var(--rp-tint-vsoft),
    0 0 12px var(--rp-tint-vsoft);
  filter: drop-shadow(0 2px 3px var(--rp-shadow-tint));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow: visible;
}
.reward-perk-crown::after{
  content:'';
  position: absolute;
  inset: 4px;
  border: 1px dotted var(--rp-tint-soft);
  border-radius: 50%;
  transition: border-color .35s var(--ease), transform .65s var(--ease);
}

/* the crown emoji at the medallion center — replaces find-plat-diamond-core */
.reward-perk-crown-core{
  position: relative;
  z-index: 4;
  font-size: 16px;
  line-height: 1;
  filter:
    drop-shadow(0 1px 2px rgba(61,54,90,.18))
    drop-shadow(0 0 6px var(--rp-glow-soft));
  transition: transform .45s cubic-bezier(.25,.8,.25,1), filter .45s var(--ease);
}

/* mini orbiting diamond sparkles — direct reuse of feat-plat-mini-diamond */
.reward-perk-mini-diamond{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid var(--rp-tint-soft);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0 28%, var(--rp-spark-mid) 29% 58%, var(--rp-tint) 59% 100%);
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35) rotate(45deg);
  filter:
    drop-shadow(0 0 6px var(--rp-glow-soft))
    drop-shadow(0 0 4px var(--rp-tint-vsoft));
  transition: opacity .45s var(--ease), transform .45s cubic-bezier(.25,.8,.25,1);
  pointer-events: none;
}
.reward-perk-mini-diamond::before{
  content:'';
  position: absolute;
  inset: 1px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.90) 0 35%, transparent 36%),
    linear-gradient(315deg, rgba(255,255,255,.55) 0 32%, transparent 33%);
  border-radius: 1px;
}

/* pedestal diamonds — visible at the crown base instead of clouding it */
.reward-perk-mini-diamond-1{ animation: reward-crown-base-diamond-1 2.4s ease-in-out infinite; }
.reward-perk-mini-diamond-2{ animation: reward-crown-base-diamond-2 2.4s ease-in-out .14s infinite; }
.reward-perk-mini-diamond-3{ animation: reward-crown-base-diamond-3 2.4s ease-in-out .28s infinite; }
.reward-perk-mini-diamond-4{ animation: reward-crown-base-diamond-4 2.4s ease-in-out .42s infinite; }
.reward-perk-mini-diamond-5{ animation: reward-crown-base-diamond-5 2.4s ease-in-out .56s infinite; }
.reward-perk-mini-diamond-6{ animation: reward-crown-base-diamond-6 2.4s ease-in-out .70s infinite; }
.reward-perk:hover .reward-perk-mini-diamond{ opacity: 1; }

/* premium hover lift */
.reward-perk:hover{
  transform: translateY(-2px);
  border-color: var(--rp-tint);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 22px rgba(61,54,90,.14),
    0 0 0 1px var(--rp-tint-vsoft),
    0 0 26px var(--rp-tint-vsoft);
}
.reward-perk:hover .reward-perk-crown{
  transform: scale(1.06) rotate(5deg);
  box-shadow:
    inset 0 0 14px var(--rp-tint-vsoft),
    0 0 20px var(--rp-tint-soft);
}
.reward-perk:hover .reward-perk-crown::after{
  border-color: var(--rp-tint);
  transform: rotate(45deg);
}
.reward-perk:hover .reward-perk-crown-core{
  transform: scale(1.10) rotate(6deg);
  filter:
    drop-shadow(0 2px 3px rgba(61,54,90,.22))
    drop-shadow(0 0 10px var(--rp-glow-soft))
    drop-shadow(0 0 16px var(--rp-tint-vsoft));
}

/* text block — name + tiny luxury meta below (like .reward-way-text) */
.reward-perk-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.reward-perk-name{
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--rp-text);
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* luxury footer label — now inline as a meta line under the name */
.reward-perk-meta{
  font-family: var(--ff-sans);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rp-text-mid);
  opacity: .82;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* price on the right — matches the .reward-way-pts pattern */
.reward-perk-pts{
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--rp-tint-deep);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.reward-perk:hover .reward-perk-pts{
  color: var(--rp-tint);
}

/* ────────────────────────────────────────
   THEMES — override the --rp-* tokens
   ──────────────────────────────────────── */

/* 1 · Lavender champagne — Professional Whitening */
.reward-perk.theme-lavender{
  --rp-tint:        #8E78B4;
  --rp-tint-soft:   rgba(142,120,180,.58);
  --rp-tint-vsoft:  rgba(142,120,180,.20);
  --rp-tint-deep:   #5F4F84;
  --rp-bg-1:        #FFFDF7;
  --rp-bg-2:        #F8F3FB;
  --rp-bg-3:        #F1E4C8;   /* champagne accent */
  --rp-glow-soft:   rgba(247,236,210,.95);
  --rp-spark-mid:   rgba(238,231,250,.96);
  --rp-text:        #3D365A;
  --rp-text-mid:    #6A5F86;
}

/* 2 · Ice blue platinum — Invisalign Discount */
.reward-perk.theme-ice{
  --rp-tint:        #5B94C2;
  --rp-tint-soft:   rgba(91,148,194,.55);
  --rp-tint-vsoft:  rgba(91,148,194,.18);
  --rp-tint-deep:   #3F6E94;
  --rp-bg-1:        #FCFEFF;
  --rp-bg-2:        #E8F1F9;
  --rp-bg-3:        #DCE6F1;
  --rp-glow-soft:   rgba(220,235,247,.98);
  --rp-spark-mid:   rgba(207,229,243,.96);
  --rp-text:        #1E3A52;
  --rp-text-mid:    #4A6B85;
}

/* 3 · Rose champagne — Botox */
.reward-perk.theme-rose{
  --rp-tint:        #C28A8A;
  --rp-tint-soft:   rgba(194,138,138,.55);
  --rp-tint-vsoft:  rgba(194,138,138,.20);
  --rp-tint-deep:   #8E5F5F;
  --rp-bg-1:        #FFFDF8;
  --rp-bg-2:        #FAEFE8;
  --rp-bg-3:        #F1E4C8;   /* champagne accent */
  --rp-glow-soft:   rgba(247,236,210,.95);
  --rp-spark-mid:   rgba(244,224,217,.96);
  --rp-text:        #4F2E2E;
  --rp-text-mid:    #7E5C5C;
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .reward-perk-glow-dot,
  .reward-perk:hover .reward-perk-dot-frame,
  .reward-perk-mini-diamond-1,
  .reward-perk-mini-diamond-2,
  .reward-perk-mini-diamond-3,
  .reward-perk-mini-diamond-4,
  .reward-perk-mini-diamond-5,
  .reward-perk-mini-diamond-6{
    animation: none !important;
  }
  .reward-perk-mini-diamond{ opacity: .72; }
}

/* ──────────────────────────────────────────────
   ANIMATION KEYFRAMES — ported verbatim from v212
   (identical timing to .feat-platinum / .find-featured-platinum)
   ────────────────────────────────────────────── */

@keyframes feat-plat-dot-frame{
  from{
    background-position:
      0 0,
      calc(100% - 1px) 0,
      0 calc(100% - 1px),
      0 0;
  }
  to{
    background-position:
      12px 0,
      calc(100% - 1px) 12px,
      -12px calc(100% - 1px),
      0 -12px;
  }
}
@keyframes feat-plat-mini-diamond-orbit-1{
  0%,100%{ transform: translate(-50%, -50%) scale(.35) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-118%, -92%) scale(.76) rotate(58deg); opacity: .95; }
  50%{ transform: translate(-130%, -108%) scale(.88) rotate(66deg); opacity: 1; }
}
@keyframes feat-plat-mini-diamond-orbit-2{
  0%,100%{ transform: translate(-50%, -50%) scale(.35) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(22%, -90%) scale(.72) rotate(30deg); opacity: .90; }
  50%{ transform: translate(36%, -106%) scale(.84) rotate(22deg); opacity: 1; }
}
@keyframes feat-plat-mini-diamond-orbit-3{
  0%,100%{ transform: translate(-50%, -50%) scale(.35) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-102%, -28%) scale(.76) rotate(60deg); opacity: .86; }
  50%{ transform: translate(-116%, -36%) scale(.92) rotate(72deg); opacity: 1; }
}
@keyframes feat-plat-mini-diamond-orbit-4{
  0%,100%{ transform: translate(-50%, -50%) scale(.35) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(4%, -26%) scale(.74) rotate(30deg); opacity: .84; }
  50%{ transform: translate(18%, -34%) scale(.90) rotate(18deg); opacity: .98; }
}
@keyframes feat-plat-mini-diamond-orbit-5{
  0%,100%{ transform: translate(-50%, -50%) scale(.30) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-72%, -16%) scale(.70) rotate(62deg); opacity: .82; }
  50%{ transform: translate(-82%, -24%) scale(.86) rotate(76deg); opacity: .98; }
}
@keyframes feat-plat-mini-diamond-orbit-6{
  0%,100%{ transform: translate(-50%, -50%) scale(.30) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-24%, -18%) scale(.70) rotate(28deg); opacity: .82; }
  50%{ transform: translate(-14%, -26%) scale(.86) rotate(16deg); opacity: .98; }
}
@keyframes reward-crown-base-diamond-1{
  0%,100%{ transform: translate(-50%, -50%) scale(.30) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-170%, 72%) scale(.82) rotate(55deg); opacity: .9; }
  50%{ transform: translate(-188%, 88%) scale(.98) rotate(65deg); opacity: 1; }
}
@keyframes reward-crown-base-diamond-2{
  0%,100%{ transform: translate(-50%, -50%) scale(.30) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-118%, 92%) scale(.78) rotate(34deg); opacity: .86; }
  50%{ transform: translate(-130%, 112%) scale(.94) rotate(24deg); opacity: .98; }
}
@keyframes reward-crown-base-diamond-3{
  0%,100%{ transform: translate(-50%, -50%) scale(.30) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-50%, 106%) scale(.84) rotate(52deg); opacity: .92; }
  50%{ transform: translate(-54%, 126%) scale(1) rotate(62deg); opacity: 1; }
}
@keyframes reward-crown-base-diamond-4{
  0%,100%{ transform: translate(-50%, -50%) scale(.30) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(22%, 92%) scale(.80) rotate(30deg); opacity: .86; }
  50%{ transform: translate(36%, 112%) scale(.96) rotate(18deg); opacity: .98; }
}
@keyframes reward-crown-base-diamond-5{
  0%,100%{ transform: translate(-50%, -50%) scale(.25) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(-148%, 126%) scale(.70) rotate(60deg); opacity: .8; }
  50%{ transform: translate(-158%, 146%) scale(.86) rotate(72deg); opacity: .96; }
}
@keyframes reward-crown-base-diamond-6{
  0%,100%{ transform: translate(-50%, -50%) scale(.25) rotate(45deg); opacity: 0; }
  25%,80%{ transform: translate(56%, 126%) scale(.70) rotate(28deg); opacity: .8; }
  50%{ transform: translate(72%, 146%) scale(.86) rotate(14deg); opacity: .96; }
}
@keyframes reward-star-roam-1{
  0%,100%{ top: 18%; left: 18%; opacity: 0; transform: scale(.25) rotate(0deg); }
  9%{ top: 18%; left: 18%; opacity: .98; transform: scale(1.22) rotate(45deg); }
  18%{ top: 18%; left: 18%; opacity: 0; transform: scale(.3) rotate(90deg); }
  30%{ top: 64%; left: 46%; opacity: 0; transform: scale(.25) rotate(0deg); }
  40%{ top: 64%; left: 46%; opacity: .92; transform: scale(1.32) rotate(45deg); }
  50%{ top: 64%; left: 46%; opacity: 0; transform: scale(.3) rotate(90deg); }
  62%{ top: 28%; left: 78%; opacity: 0; transform: scale(.25) rotate(0deg); }
  72%{ top: 28%; left: 78%; opacity: .88; transform: scale(1.12) rotate(45deg); }
  82%{ top: 28%; left: 78%; opacity: 0; transform: scale(.3) rotate(90deg); }
}
@keyframes reward-star-roam-2{
  0%,100%{ top: 74%; left: 24%; opacity: 0; transform: scale(.22) rotate(0deg); }
  11%{ top: 74%; left: 24%; opacity: .9; transform: scale(1.08) rotate(45deg); }
  20%{ top: 74%; left: 24%; opacity: 0; transform: scale(.28) rotate(90deg); }
  33%{ top: 22%; left: 56%; opacity: 0; transform: scale(.22) rotate(0deg); }
  44%{ top: 22%; left: 56%; opacity: 1; transform: scale(1.28) rotate(45deg); }
  53%{ top: 22%; left: 56%; opacity: 0; transform: scale(.28) rotate(90deg); }
  66%{ top: 70%; left: 84%; opacity: 0; transform: scale(.22) rotate(0deg); }
  76%{ top: 70%; left: 84%; opacity: .86; transform: scale(1.12) rotate(45deg); }
  86%{ top: 70%; left: 84%; opacity: 0; transform: scale(.28) rotate(90deg); }
}
@keyframes reward-star-roam-3{
  0%,100%{ top: 30%; left: 86%; opacity: 0; transform: scale(.24) rotate(0deg); }
  12%{ top: 30%; left: 86%; opacity: .94; transform: scale(1.16) rotate(45deg); }
  22%{ top: 30%; left: 86%; opacity: 0; transform: scale(.30) rotate(90deg); }
  36%{ top: 78%; left: 60%; opacity: 0; transform: scale(.24) rotate(0deg); }
  47%{ top: 78%; left: 60%; opacity: .96; transform: scale(1.26) rotate(45deg); }
  57%{ top: 78%; left: 60%; opacity: 0; transform: scale(.30) rotate(90deg); }
  68%{ top: 20%; left: 34%; opacity: 0; transform: scale(.24) rotate(0deg); }
  78%{ top: 20%; left: 34%; opacity: .84; transform: scale(1.08) rotate(45deg); }
  88%{ top: 20%; left: 34%; opacity: 0; transform: scale(.30) rotate(90deg); }
}
@keyframes reward-star-roam-4{
  0%,100%{ top: 66%; left: 72%; opacity: 0; transform: scale(.22) rotate(0deg); }
  10%{ top: 66%; left: 72%; opacity: .96; transform: scale(1.2) rotate(45deg); }
  19%{ top: 66%; left: 72%; opacity: 0; transform: scale(.28) rotate(90deg); }
  32%{ top: 36%; left: 28%; opacity: 0; transform: scale(.22) rotate(0deg); }
  42%{ top: 36%; left: 28%; opacity: .88; transform: scale(1.06) rotate(45deg); }
  51%{ top: 36%; left: 28%; opacity: 0; transform: scale(.28) rotate(90deg); }
  64%{ top: 82%; left: 16%; opacity: 0; transform: scale(.22) rotate(0deg); }
  75%{ top: 82%; left: 16%; opacity: .98; transform: scale(1.3) rotate(45deg); }
  84%{ top: 82%; left: 16%; opacity: 0; transform: scale(.28) rotate(90deg); }
}

.rewards-refer{
  margin-top: 12px;
  padding: 14px 18px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(232,241,249,.46), transparent 58%),
    linear-gradient(135deg, rgba(241,228,200,.58), rgba(254,252,247,.96));
  border: 1px solid rgba(184,137,61,.20);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gd);
  text-decoration: none;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.rewards-refer:hover{
  border-color: rgba(46,125,118,.30);
  box-shadow: 0 8px 22px rgba(18,63,82,.08);
  transform: translateY(-1px);
}
.rewards-refer-ic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,253,249,.82);
  border: 1px solid rgba(46,125,118,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.rewards-refer-text{
  flex: 1;
}
.rewards-refer-title{
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.rewards-refer-sub{
  font-size: 11.5px;
  color: var(--ink-mid);
  font-weight: 500;
}
.rewards-refer-arr{
  color: var(--g);
  font-size: 16px;
  transition: transform .2s var(--ease);
}
.rewards-refer:hover .rewards-refer-arr{ transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════
   8. GET FEATURED DROPDOWN — the money section
   Layout: City Featured (★ paid hero) → Free Profile + Capy Accredited (trust)
   Plus: Platinum Elite (private application)
   ════════════════════════════════════════════════════════════════ */
.feat-tiers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.feat-tier{
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all .25s var(--ease);
  position: relative;
}
.feat-tier:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-lift);
}
.feat-tier-eyebrow{
  font-family:var(--ff-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.feat-tier-title{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--gd);
}
.feat-tier-title em{ font-style: italic; color: var(--g); font-weight: 400; }
.feat-tier-sub{
  font-size: 12px;
  color: var(--ink-mid);
  line-height: 1.45;
  font-weight: 500;
}
.feat-tier-benefits{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.feat-tier-benefits li{
  font-size: 11.5px;
  color: var(--ink-mid);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.feat-tier-benefits li::before{
  content:'✓';
  color: var(--g);
  font-weight: 800;
  flex-shrink: 0;
}
.feat-tier-cta{
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--g);
  letter-spacing: -.005em;
}
.feat-tier-cta .arrow{ transition: transform .2s var(--ease); }
.feat-tier:hover .feat-tier-cta .arrow{ transform: translateX(4px); }

/* Tier — Accredited (trust badge / status, NOT the main paid offer) */
.feat-tier.is-accredited{
  background:
    radial-gradient(140% 80% at 100% 0%, rgba(232,241,249,.40), transparent 60%),
    linear-gradient(180deg, var(--warm-white), var(--paper));
  border: 1px solid rgba(46,125,118,.22);
}
.feat-tier.is-accredited::before{
  content:'';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(46,125,118,.40), var(--g), rgba(46,125,118,.40), transparent);
  border-radius: 14px 14px 0 0;
}
.feat-tier.is-accredited .feat-tier-eyebrow{ color: var(--g); }
.feat-tier.is-accredited .feat-tier-cta{ color: var(--g); }
.feat-tier.is-accredited:hover{ border-color: rgba(46,125,118,.40); }
.feat-trust-badge{
  position: absolute;
  top: -8px;
  right: 14px;
  padding: 3px 9px;
  background: linear-gradient(135deg, rgba(254,252,247,.98), rgba(232,241,249,.92));
  color: var(--g);
  border: 1px solid rgba(46,125,118,.32);
  border-radius: var(--r-pill);
  font-family:var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(18,63,82,.10);
}
.feat-recommend{
  position: absolute;
  top: -8px;
  right: 14px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #E8C77A, #B8893D);
  color: #fff;
  border-radius: var(--r-pill);
  font-family:var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(184,137,61,.34);
}

/* ── CITY FEATURED — the clearest paid CTA (hero row, above the trust tiers) ── */
.feat-city-hero{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(241,228,200,.55), transparent 58%),
    radial-gradient(120% 140% at 0% 100%, rgba(232,241,249,.50), transparent 58%),
    linear-gradient(135deg, #FAF3E1 0%, #FEFCF7 55%, #F3EDDB 100%);
  border: 1px solid rgba(184,137,61,.34);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 6px 22px rgba(184,137,61,.14);
}
.feat-city-hero::after{
  content:'';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(216,184,114,.20), transparent 60%);
  pointer-events: none;
}
.feat-city-hero:hover{
  transform: translateY(-2px);
  border-color: rgba(184,137,61,.52);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 12px 32px rgba(184,137,61,.22);
}
.feat-city-medal{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F5E6BB, #D8B872);
  border: 1px solid rgba(168,136,70,.34);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(168,136,70,.20), inset 0 1px 0 rgba(255,255,255,.55);
  position: relative;
  z-index: 1;
}
.feat-city-text{ position: relative; z-index: 1; min-width: 0; }
.feat-city-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8A6F2C;
  margin-bottom: 5px;
}
.feat-city-eyebrow .pill{
  padding: 2px 8px;
  background: linear-gradient(135deg, #E8C77A, #B8893D);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 8.5px;
  letter-spacing: .10em;
  box-shadow: 0 2px 6px rgba(184,137,61,.30);
}
.feat-city-title{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--gd);
  margin-bottom: 8px;
}
.feat-city-title em{ font-style: italic; color: #8A6F2C; font-weight: 400; }
.feat-city-sub{
  font-size: 12.75px;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 430px;
  font-weight: 500;
}
.feat-city-sub strong{ color: var(--gd); font-weight: 700; }
.feat-city-actions{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}
.feat-city-cta,
.feat-city-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.feat-city-cta{
  padding: 12px 20px 12px 22px;
  background: linear-gradient(135deg, #C9B07A, #A88846);
  color: #fff;
  border: 1px solid rgba(168,136,70,.55);
  box-shadow: 0 2px 0 rgba(0,0,0,.10), 0 8px 20px rgba(168,136,70,.32);
}
.feat-city-secondary{
  padding: 11px 16px;
  color: var(--gd);
  background: rgba(254,252,247,.62);
  border: 1px solid rgba(18,63,82,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.82) inset;
}
.feat-city-hero:hover .feat-city-cta{
  transform: translateX(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,.10), 0 12px 26px rgba(168,136,70,.42);
}
.feat-city-secondary:hover{
  background: rgba(232,241,249,.66);
  color: var(--g);
  box-shadow: 0 8px 18px rgba(18,63,82,.10);
}
.feat-city-cta .arrow{ transition: transform .25s var(--ease); }
.feat-city-hero:hover .feat-city-cta .arrow{ transform: translateX(3px); }
.feat-demand{
  position: relative;
  z-index: 1;
  align-self: stretch;
  padding: 15px 16px;
  border-radius: 14px;
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(232,241,249,.56), transparent 58%),
    linear-gradient(135deg, rgba(255,253,247,.90), rgba(250,243,225,.74));
  border: 1px solid rgba(168,136,70,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 24px rgba(18,63,82,.08),
    0 0 0 1px rgba(255,255,255,.35);
}
.feat-demand-label{
  font-family:var(--ff-sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A6F2C;
  margin-bottom: 7px;
}
.feat-demand-number{
  font-family:var(--ff-serif);
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--gd);
}
.feat-demand-number strong{
  font-weight: 600;
  color: var(--g);
}
.feat-demand-sub{
  margin-top: 5px;
  font-size: 11.25px;
  line-height: 1.35;
  color: var(--ink-mid);
  font-weight: 600;
}
.feat-demand-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.feat-demand-chip{
  padding: 4px 7px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(18,63,82,.12);
  color: var(--gd);
  font-family:var(--ff-sans);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
}
.feat-demand-proof{
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(18,63,82,.10);
  font-size: 11.4px;
  line-height: 1.38;
  color: var(--gd);
  font-weight: 700;
  letter-spacing: -.005em;
}
@media (max-width: 720px){
  .feat-city-hero{ grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .feat-city-actions{ margin-top: 14px; }
}

/* Platinum Elite — Amex Centurion vibe, less dark on hover */
/* Platinum Elite — Amex Centurion vibe, less dark on hover */
.feat-platinum{
  margin-top: 16px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(232,241,249,.40), transparent 60%),
    radial-gradient(140% 100% at 100% 100%, rgba(241,228,200,.30), transparent 60%),
    linear-gradient(135deg, var(--plat-bg-1), var(--plat-bg-2));
  border: 1px solid var(--plat-line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: all .35s var(--ease);
}
.feat-platinum::after{
  content:'';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(168,136,70,.00), rgba(168,136,70,.30), rgba(168,136,70,.00));
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
.feat-platinum:hover::after{ opacity: 1; }
.feat-platinum:hover{
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(232,241,249,.42), transparent 60%),
    radial-gradient(140% 100% at 100% 100%, rgba(241,228,200,.36), transparent 60%),
    linear-gradient(135deg, #EFE8F8, #E0D5EE);
  border-color: rgba(130,111,166,.52);
  box-shadow: 0 10px 30px rgba(80,60,120,.16), 0 2px 6px rgba(80,60,120,.08);
}
.feat-plat-mark{
  position: absolute;
  top: 18px;
  right: 24px;
  font-family:var(--ff-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  color: var(--plat-text-mid);
  letter-spacing: .02em;
  opacity: .7;
}
.feat-plat-eyebrow{
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A88846;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.feat-plat-eyebrow::before,
.feat-plat-eyebrow::after{
  content:'';
  width: 16px;
  height: 1px;
  background: #A88846;
  opacity: .55;
}
.feat-plat-title{
  font-family:var(--ff-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--plat-text);
  margin-bottom: 12px;
}
.feat-plat-title em{
  font-style: italic;
  font-weight: 400;
}
.feat-plat-copy{
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--plat-text-mid);
  max-width: 440px;
  font-weight: 400;
  letter-spacing: -.005em;
}
.feat-plat-copy strong{
  color: var(--plat-text);
  font-weight: 500;
}
.feat-plat-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 24px;
  background: rgba(254,252,247,.55);
  color: #8A6F2C;
  border: 1px solid rgba(168,136,70,.42);
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: all .3s var(--ease);
}
.feat-platinum:hover .feat-plat-cta{
  background: linear-gradient(135deg, #C9B07A, #A88846);
  border-color: rgba(168,136,70,.55);
  color: #fff;
  box-shadow: 0 6px 20px rgba(168,136,70,.32);
}
.feat-plat-cta .arrow{ transition: transform .3s var(--ease); }
.feat-platinum:hover .feat-plat-cta .arrow{ transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════
   9. SHOP DROPDOWN — premium curated list
   ════════════════════════════════════════════════════════════════ */
.shop-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
  margin-top: 4px;
}
.shop-cat{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all .18s var(--ease);
  border: 1px solid transparent;
}
.shop-cat:hover{
  background: var(--gll);
  border-color: var(--gm);
}
.shop-cat-ic{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gll), var(--gl));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.shop-cat-name{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.01em;
  margin-bottom: 1px;
}
.shop-cat-sub{
  font-size: 10.5px;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.35;
}
.shop-cat-arr{
  color: var(--g);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-3px);
  transition: all .18s var(--ease);
}
.shop-cat:hover .shop-cat-arr{ opacity: 1; transform: translateX(0); }

/* ════════════════════════════════════════════════════════════════
   10. ABOUT DROPDOWN — small/optional
   ════════════════════════════════════════════════════════════════ */
.about-quote{
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(232,241,249,.55), var(--warm-cream));
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 0;
}
.about-quote-text{
  font-family:var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gd);
  letter-spacing: -.005em;
  margin-bottom: 8px;
}
.about-quote-text .hit{
  font-style: normal;
  font-weight: 600;
  color: #B91C1C;
  text-decoration: line-through;
  text-decoration-color: rgba(185,28,28,.4);
}
.about-quote-text .save{
  font-style: normal;
  font-weight: 600;
  color: var(--g);
}
.about-quote-sig{
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
}
.about-quote-sig::before{ content:'— '; }

/* ════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION — visual feedback for every route click
   ════════════════════════════════════════════════════════════════ */
.cc-toast{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg, var(--gdd), var(--gd));
  color: #fff;
  border: 1px solid rgba(46,125,118,.30);
  border-radius: 14px;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  box-shadow: 0 12px 36px rgba(15,35,24,.30), 0 2px 8px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
  max-width: 320px;
}
.cc-toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cc-toast-arrow{
  color: var(--gold-l);
  font-weight: 800;
  font-family:var(--ff-sans);
  font-size: 11px;
  letter-spacing: .04em;
}
.cc-toast-route{
  font-family:var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
}
.cc-toast-close{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
  border: none;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: all .15s var(--ease);
}
.cc-toast-close:hover{ background: rgba(255,255,255,.18); color: #fff; }

/* ════════════════════════════════════════════════════════════════
   10b. COASTAL FIND DENTIST REFINEMENT
   Keeps v201's stronger layout, but makes geography + scrolling production-safe.
   ════════════════════════════════════════════════════════════════ */
.find-drop .cc-drop-head{
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(232,241,249,.78), transparent 60%),
    radial-gradient(110% 80% at 100% 0%, rgba(241,228,200,.42), transparent 60%),
    linear-gradient(180deg, var(--warm-white), var(--paper));
}
.cc-dropdown.find-drop{
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,125,118,.40) transparent;
}
.cc-dropdown.find-drop::-webkit-scrollbar{ width: 8px; }
.cc-dropdown.find-drop::-webkit-scrollbar-track{ background: transparent; }
.cc-dropdown.find-drop::-webkit-scrollbar-thumb{
  background: rgba(46,125,118,.34);
  border-radius: 999px;
  border: 2px solid rgba(255,253,249,.9);
}
.find-regions{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.find-region{
  background: linear-gradient(180deg, var(--warm-white), rgba(251,246,236,.78));
  border-color: rgba(18,63,82,.12);
  transform: none !important;
}
.find-region:hover,
.find-region.is-active{
  background: linear-gradient(180deg, rgba(232,241,249,.78), rgba(254,252,247,.96), rgba(241,228,200,.36));
  border-color: rgba(46,125,118,.34);
  box-shadow: 0 5px 18px rgba(18,63,82,.08), inset 0 0 0 1px rgba(255,255,255,.72);
}
.find-region-name,
.find-location-name{
  font-family:var(--ff-sans);
  font-weight: 800;
}
.find-region-sub,
.find-panel-tag,
.find-cities-tag{
  color: var(--ink-soft);
}
.find-featured{
  background:
    linear-gradient(135deg, rgba(241,228,200,.65) 0%, rgba(254,252,247,.96) 55%, rgba(232,241,249,.55) 100%);
  border-color: rgba(184,137,61,.28);
}
.find-2col{
  grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr);
  align-items: start;
}
.find-panel,
.find-zip-panel{
  background: linear-gradient(180deg, rgba(251,246,236,.62), var(--paper));
  border-color: rgba(18,63,82,.11);
  box-shadow: 0 1px 3px rgba(18,63,82,.04);
}
.find-panel-head{
  background: linear-gradient(180deg, rgba(232,241,249,.55), rgba(254,252,247,.86));
}
.find-locations,
.find-areas,
.find-cities{
  max-height: 256px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  padding-right: 3px;
}
.find-locations:hover,
.find-areas:hover,
.find-cities:hover{
  scrollbar-color: rgba(46,125,118,.48) transparent;
}
.find-locations::-webkit-scrollbar,
.find-areas::-webkit-scrollbar,
.find-cities::-webkit-scrollbar{ width: 7px; }
.find-locations::-webkit-scrollbar-track,
.find-areas::-webkit-scrollbar-track,
.find-cities::-webkit-scrollbar-track{ background: transparent; }
.find-locations::-webkit-scrollbar-thumb,
.find-areas::-webkit-scrollbar-thumb,
.find-cities::-webkit-scrollbar-thumb{
  background: transparent;
  border-radius: 999px;
  border: 2px solid transparent;
}
.find-locations:hover::-webkit-scrollbar-thumb,
.find-areas:hover::-webkit-scrollbar-thumb,
.find-cities:hover::-webkit-scrollbar-thumb{
  background: rgba(46,125,118,.46);
  border-color: rgba(255,255,255,.72);
}
.find-location,
.find-area,
.find-city{
  transition: background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
  transform: none !important;
}
.find-location:hover,
.find-location.is-active,
.find-area:hover,
.find-area.is-active,
.find-city:hover,
.find-city.is-active{
  background: linear-gradient(135deg, rgba(232,241,249,.55), rgba(254,252,247,.92), rgba(241,228,200,.28));
  border-color: rgba(46,125,118,.22);
  box-shadow: none;
}
.find-city{
  border: 1px solid transparent;
}
.find-city.is-active .find-city-name,
.find-city:hover .find-city-name{
  color: var(--g);
}
.find-city.is-active .find-city-zip{
  color: var(--gold);
}
.find-closest{
  background: linear-gradient(180deg, rgba(232,241,249,.72), rgba(254,252,247,.96));
  border-color: rgba(47,116,166,.22);
}
.find-closest[data-mode="city"]{
  background: linear-gradient(180deg, rgba(241,228,200,.62), rgba(254,252,247,.96));
  border-color: rgba(184,137,61,.38);
}
.find-closest[data-mode="city"] .find-closest-label{
  color: #8A6F2C;
}
.find-awaiting{
  background: linear-gradient(180deg, rgba(241,228,200,.58), var(--paper));
}
.find-awaiting-link{
  color: var(--gd);
}
.find-awaiting-link:hover{
  color: var(--g);
}

/* ════════════════════════════════════════════════════════════════
   10d. FIND DENTIST LUXURY BUTTON PASS
   Aligns Find Dentist actions with the fully coastal premium system.
   ════════════════════════════════════════════════════════════════ */
.find-featured-actions{
  gap: 8px;
}
.find-featured-btn,
.find-zip-btn,
.find-closest-cta{
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-weight: 800;
  letter-spacing: -.01em;
  border: 1px solid rgba(18,63,82,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 8px 20px rgba(18,63,82,.08);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.find-featured-btn.primary,
.find-zip-btn,
.find-closest-cta{
  background:
    linear-gradient(135deg, rgba(93,167,160,.98), rgba(46,125,118,.98) 54%, rgba(18,63,82,.98));
  color: #fff;
  border-color: rgba(46,125,118,.32);
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 10px 24px rgba(18,63,82,.16);
}
.find-featured-btn.primary:hover,
.find-zip-btn:hover,
.find-closest-cta:hover{
  background:
    linear-gradient(135deg, rgba(120,187,179,1), rgba(46,125,118,1) 52%, rgba(18,63,82,1));
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 14px 30px rgba(18,63,82,.20);
}
.find-featured-btn.secondary{
  background:
    linear-gradient(135deg, rgba(255,253,249,.96), rgba(239,248,245,.96));
  color: var(--gd);
  border-color: rgba(46,125,118,.20);
  box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 8px 18px rgba(18,63,82,.06);
}
.find-featured-btn.secondary:hover{
  background:
    linear-gradient(135deg, rgba(207,229,243,.72), rgba(255,253,249,.98));
  color: var(--g);
  border-color: rgba(46,125,118,.34);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 12px 24px rgba(18,63,82,.09);
}
.find-featured-btn{
  min-width: 136px;
  padding: 9px 15px;
  font-size: 11.5px;
}
.find-zip-btn{
  min-width: 78px;
  padding: 11px 20px;
  font-size: 13px;
}
.find-closest-cta{
  padding: 12px 18px;
  font-size: 13px;
}
.find-awaiting{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(232,241,249,.40), transparent 58%),
    linear-gradient(180deg, rgba(241,228,200,.50), var(--paper));
  border-color: rgba(184,137,61,.20);
}
.find-awaiting-link{
  color: var(--g);
  font-weight: 800;
}
.find-awaiting-link:hover{
  color: var(--gd);
}

/* ════════════════════════════════════════════════════════════════
   10e. v207 — HIERARCHY CLARIFICATION (Region → Location → Area → City/ZIP)
   ════════════════════════════════════════════════════════════════ */
.find-step-rail{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 4px 2px;
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.find-step-rail .step{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: linear-gradient(135deg, rgba(254,252,247,.96), rgba(232,241,249,.55));
  border: 1px solid rgba(18,63,82,.12);
  border-radius: var(--r-pill);
  color: var(--ink-mid);
}
.find-step-rail .step .n{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gd);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}
.find-step-rail .step.is-current{
  background: linear-gradient(135deg, rgba(241,228,200,.62), rgba(254,252,247,.96));
  border-color: rgba(184,137,61,.40);
  color: var(--gd);
}
.find-step-rail .step.is-current .n{ background: #A88846; }
/* Step 5 — the action step (Find). Always slightly emphasized in champagne. */
.find-step-rail .step.is-action{
  background: linear-gradient(135deg, rgba(254,252,247,.98), rgba(241,228,200,.42));
  border-color: rgba(184,137,61,.32);
  color: #8A6F2C;
}
.find-step-rail .step.is-action .n{
  background: linear-gradient(135deg, #C9B07A, #A88846);
}
.find-step-rail .sep{
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  opacity: .6;
}
.find-step-label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.find-step-label .step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9B07A, #A88846);
  color: #fff;
  font-family:var(--ff-sans);
  font-size: 9px;
  font-weight: 800;
}

/* ════════════════════════════════════════════════════════════════
   10c. WRAP-SAFE PRODUCTION PASS
   Keeps labels aligned and prevents long nav/place names from creating horizontal scroll.
   ════════════════════════════════════════════════════════════════ */
html,
body{
  max-width: 100%;
  overflow-x: clip;
}
.cc-nav,
.cc-mega,
.cc-dropdown{
  max-width: 100vw;
}
.cc-drop-head,
.cc-drop-body,
.cc-drop-foot,
.journey-bar,
.find-grid,
.find-panel,
.find-zip-panel,
.find-featured{
  min-width: 0;
}
.cc-link span,
.cc-action-link,
.cc-drop-title,
.cc-drop-sub,
.cc-card-title,
.cc-card-text,
.journey-step,
.find-region-name,
.find-region-sub,
.find-location-name,
.find-location-sub,
.find-area-name,
.find-area-count,
.find-city-name,
.find-city-zip,
.find-closest-name,
.find-closest-count,
.find-awaiting-title,
.find-awaiting-text{
  overflow-wrap: anywhere;
  word-break: normal;
}
.cc-link,
.cc-action-link,
.find-location,
.find-area,
.find-city{
  box-sizing: border-box;
}

@media (max-width: 900px){
  .find-regions{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .find-2col{ grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
  .cc-nav-row{ gap: 8px; padding: 0 14px; grid-template-columns: minmax(150px, auto) minmax(0,1fr) minmax(146px, auto); }
  .cc-link{ max-width: 102px; padding: 6px 6px; font-size: 11px; }
  .cc-link > span:nth-child(2){ max-width: 62px; }
  .cc-action-link{ padding: 8px 8px; font-size: 12px; }
  .cc-action-join{ padding: 8px 11px; }
}
@media (max-width: 880px){
  .cc-links{ display: none; }
  .cc-nav-row{ grid-template-columns: auto 1fr; }
  .cc-dropdown{ display: none !important; }
}
@media (max-width: 720px){
  .cc-action-link:not(.cc-action-join){ display: none; }
}

/* ════════════════════════════════════════════════════════════════
   v209 — LEFT-ALIGN CASCADE ROWS
   The Location / Area / City rows use CSS grid (and flex in Location's
   case). For inline <span> grid items, `justify-self: normal` resolves
   to `stretch`, but inline elements have no intrinsic width to stretch,
   so some browsers (notably Safari) end up centering them. This pass
   forces every row's text content to a block-level, start-aligned,
   text-align:left layout so names sit tight against their icons.

   Region tabs (top 5 buttons) deliberately stay centered — they're
   button-style cards, not list rows.
   ════════════════════════════════════════════════════════════════ */

/* Make sure each name/sub element is a real block at the START of its
   grid cell and reads left-to-right. */
.find-location-text,
.find-location-name,
.find-location-sub,
.find-area-name,
.find-area-icon + .find-area-name,
.find-city-name{
  display: block;
  text-align: left;
  justify-self: start;
  align-self: center;
  width: 100%;
  min-width: 0;
}

/* Counts/ZIPs on the right stay right-aligned, but anchored to the END
   of their grid cell so they don't drift. */
.find-area-count,
.find-city-zip{
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

/* Icons at the START — they're already start-aligned via auto column,
   but make it explicit so future overrides can't drift them. */
.find-location-icon,
.find-area-icon,
.find-city-pin{
  justify-self: start;
  flex-shrink: 0;
}

/* Location row uses flex, not grid. The icon + text-container layout
   needs the text container to align its inner content to the start. */
.find-location{
  justify-content: flex-start;
}
.find-location-text{
  flex: 1 1 auto;
}

/* ════════════════════════════════════════════════════════════════
   v210 — EMPTY-STATE FEATURED SPOT
   When the active area has no AREA_FEATURED entry, the Featured Dentist
   slot becomes an "Apply for Accreditation" CTA card. Same wrapper,
   same grid, same padding → zero layout shift between states.

   The empty state is signaled by:
   · slightly more champagne in the gradient (opportunity / "spot")
   · dashed avatar border (it's a placeholder, not a person)
   · pulsing eyebrow dot (visual call-to-action)
   ════════════════════════════════════════════════════════════════ */
.find-featured[data-state="empty"]{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(241,228,200,.72), transparent 58%),
    linear-gradient(135deg, rgba(254,252,247,.98) 0%, rgba(245,235,219,.62) 100%);
  border: 1px dashed rgba(184,137,61,.42);
}
.find-featured[data-state="empty"]:hover{
  border-color: rgba(184,137,61,.62);
  box-shadow: 0 6px 22px rgba(184,137,61,.16);
}
.find-featured[data-state="empty"] .find-featured-avatar{
  background: linear-gradient(135deg, rgba(254,252,247,.96), rgba(245,235,219,.78));
  border: 1.5px dashed rgba(184,137,61,.48);
  color: #8A6F2C;
}
.find-featured[data-state="empty"] .find-featured-eyebrow{
  color: #8A6F2C;
}
.find-featured[data-state="empty"] .find-featured-eyebrow::before{
  background: #D8B872;
  box-shadow: 0 0 0 3px rgba(216,184,114,.32);
  animation: awaitingPulse 2s ease-in-out infinite;
}
.find-featured[data-state="empty"] .find-featured-name{
  font-size: 18px;
}
.find-featured[data-state="empty"] .find-featured-loc{
  color: var(--ink-mid);
}

/* Apply-CTA buttons in the empty state lean champagne, not coastal-teal,
   so they read as "earn the badge" not "book this dentist". */
.find-featured[data-state="empty"] .find-featured-btn.primary{
  background:
    linear-gradient(135deg, #C9B07A 0%, #A88846 55%, #8A6F2C 100%);
  border-color: rgba(168,136,70,.48);
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 10px 24px rgba(168,136,70,.22);
}
.find-featured[data-state="empty"] .find-featured-btn.primary:hover{
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 30px rgba(168,136,70,.30);
  transform: translateY(-1px);
}
.find-featured[data-state="empty"] .find-featured-btn.secondary{
  color: #8A6F2C;
  border-color: rgba(184,137,61,.32);
}
.find-featured[data-state="empty"] .find-featured-btn.secondary:hover{
  color: #6F5820;
  border-color: rgba(184,137,61,.52);
}

/* ════════════════════════════════════════════════════════════════
   v211 — ZIP-AWARE CITY PICKER
   When a ZIP resolves to 2+ recognized cities (e.g. 91745 →
   Hacienda Heights + City of Industry), the closest panel switches
   to "zip" mode: hides the single name/count row and shows the
   recognized cities as selectable pills + a small "closest indexed"
   fallback line.
   ════════════════════════════════════════════════════════════════ */

/* Default: pills + fallback hidden. Single name/count visible. */
.find-closest .find-zip-pills,
.find-closest .find-zip-fallback{
  display: none;
}

/* ZIP mode: hide single name/count, reveal pills + fallback */
.find-closest[data-mode="zip"] .find-closest-name,
.find-closest[data-mode="zip"] .find-closest-count{
  display: none;
}
.find-closest[data-mode="zip"] .find-zip-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}
.find-closest[data-mode="zip"] .find-zip-fallback{
  display: block;
  margin-bottom: 10px;
}

/* ZIP mode background — leans champagne (a "your ZIP" warm signal),
   distinct from the cool sky of area-mode and the warmer champagne of city-mode. */
.find-closest[data-mode="zip"]{
  background: linear-gradient(180deg, rgba(241,228,200,.55), rgba(254,252,247,.96));
  border-color: rgba(184,137,61,.38);
}
.find-closest[data-mode="zip"] .find-closest-label{
  color: #8A6F2C;
}

/* Individual city pill */
.zip-city{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(46,125,118,.22);
  background: rgba(254,252,247,.92);
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.zip-city:hover{
  border-color: rgba(46,125,118,.42);
  background: linear-gradient(135deg, rgba(232,241,249,.62), rgba(254,252,247,.96));
  transform: translateY(-1px);
}
.zip-city.is-active{
  background: linear-gradient(135deg, rgba(93,167,160,.98), rgba(46,125,118,.98) 55%, rgba(18,63,82,.98));
  color: #fff;
  border-color: rgba(46,125,118,.62);
  box-shadow: 0 2px 0 rgba(0,0,0,.10), 0 6px 16px rgba(18,63,82,.18);
}

/* Indexed status dot: filled teal = we have PPO dentists indexed in this city,
   hollow = real city but no inventory yet (still routable to dentists.html) */
.zip-city::before{
  content:'';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(46,125,118,.48);
  flex-shrink: 0;
}
.zip-city[data-indexed="true"]::before{
  background: var(--g);
  border-color: var(--g);
}
.zip-city.is-active::before{
  background: #fff;
  border-color: #fff;
}

/* Closest-indexed fallback hint (small italic note under the pills) */
.find-zip-fallback{
  font-family:var(--ff-serif);
  font-style: italic;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.4;
}
.find-zip-fallback strong{
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 700;
  color: var(--gd);
  letter-spacing: -.005em;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v513 - v501-inspired masthead only
   Dropdown presentation and contents intentionally remain v509.
   ════════════════════════════════════════════════════════════════ */
:root{
  --v510-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --v510-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --v510-teal-deep: #0E3F44;
  --v510-teal-night: #082A30;
  --v510-ivory: #FAF7F1;
  --v510-paper: #FFFDF7;
  --v510-ink-soft: #3C5560;
  --v510-line: rgba(15,31,38,.08);
  --v510-gold: #B8924F;
  --v510-ease: cubic-bezier(.16,1,.3,1);
}

.cc-nav{
  background: linear-gradient(180deg, rgba(250,247,241,.94) 0%, rgba(246,241,231,.90) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--v510-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(184,146,79,.10) inset, 0 12px 36px rgba(8,42,48,.08);
}
.cc-nav::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(184,146,79,.32) 50%, transparent 100%);
  pointer-events:none;
}
.cc-nav-row{
  max-width:1480px;
  grid-template-columns:minmax(178px, 1fr) auto minmax(178px, 1fr);
  gap:24px;
  padding:0 28px;
  height:68px;
}
.cc-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--v510-teal-night);
  transition:opacity .25s var(--v510-ease);
}
.cc-logo-text{
  display:inline-block;
  font-family:var(--v510-display);
  font-size:27px;
  font-weight:400;
  letter-spacing:-.045em;
  color:var(--v510-teal-night);
}
.cc-edition{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  min-height:36px;
  padding-left:14px;
  border-left:1px solid rgba(15,31,38,.16);
  line-height:1;
}
.cc-edition-top{
  font-family:var(--v510-body);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--v510-ink-soft);
}
.cc-edition-bottom{
  font-family:var(--v510-display);
  font-style:italic;
  font-size:14px;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--v510-teal-deep);
  white-space:nowrap;
}
.cc-links{ gap:2px; }
.cc-link{
  display:inline-flex;
  grid-template-columns:none;
  gap:6px;
  max-width:none;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  color:var(--v510-ink-soft);
  font-family:var(--v510-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:-.003em;
  white-space:nowrap;
  overflow-wrap:normal;
  line-height:1.1;
  transition:color .25s var(--v510-ease), background .25s var(--v510-ease);
}
/* Top links stay compact; each nested panel must wrap and align independently. */
.cc-link > .cc-dropdown{
  white-space:normal;
  text-align:left;
  overflow-wrap:break-word;
}
.cc-dropdown.about-drop .cc-drop-head-text,
.cc-dropdown.about-drop .cc-drop-body,
.cc-dropdown.about-drop .about-quote,
.cc-dropdown.about-drop .cc-secondary,
.cc-dropdown.about-drop .cc-support-grid{
  min-width:0;
  max-width:100%;
}
.cc-dropdown.about-drop .about-quote-text{
  white-space:normal;
  overflow-wrap:break-word;
}
.cc-link:hover,
.cc-link.is-open{
  color:var(--v510-teal-night);
  background:rgba(27,94,90,.06);
}
.cc-link::before{
  left:18px;
  right:18px;
  bottom:6px;
  background:linear-gradient(90deg, transparent, var(--v510-gold), transparent);
  opacity:0;
  transition:opacity .25s var(--v510-ease), transform .25s var(--v510-ease);
}
.cc-link:hover::before,
.cc-link.is-open::before{ opacity:.9; }
.cc-link > span:not(.cc-link-caret){
  display:inline-block;
  max-width:none;
}
.cc-link-caret{
  opacity:.45;
  margin-left:2px;
  transition:transform .3s var(--v510-ease), opacity .25s var(--v510-ease);
}
.cc-actions{ gap:6px; }
.cc-action-link{
  color:var(--v510-ink-soft);
  font-family:var(--v510-body);
  font-size:13px;
  padding:9px 12px;
  white-space:nowrap;
  transition:color .25s var(--v510-ease), background .25s var(--v510-ease);
}
.cc-action-link:hover{
  color:var(--v510-teal-deep);
  background:rgba(27,94,90,.06);
}
.cc-action-join{
  margin-left:6px;
  padding:11px 18px;
  background:linear-gradient(180deg, var(--v510-teal-deep) 0%, var(--v510-teal-night) 100%);
  color:var(--v510-paper);
  font-size:12.5px;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 6px 18px rgba(8,42,48,.28);
  transition:transform .25s var(--v510-ease), box-shadow .25s var(--v510-ease);
}
.cc-action-join:hover{
  background:linear-gradient(180deg, var(--v510-teal-deep) 0%, var(--v510-teal-night) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px rgba(8,42,48,.36), 0 0 0 1px rgba(184,146,79,.32);
}
@media (max-width:1260px){
  .cc-edition{ display:none; }
}
@media (max-width:1100px){
  .cc-nav-row{ gap:8px; padding:0 14px; grid-template-columns:minmax(146px, 1fr) auto minmax(146px, 1fr); }
  .cc-link{ max-width:102px; padding:8px 8px; font-size:12px; white-space:normal; }
  .cc-link > span:not(.cc-link-caret){ max-width:74px; }
  .cc-action-link{ padding:8px; font-size:12px; }
  .cc-action-join{ padding:9px 12px; }
}
@media (max-width:880px){
  .cc-links{ display:none; }
  .cc-nav-row{ grid-template-columns:1fr auto; height:64px; }
}
@media (max-width:520px){
  .cc-logo-text{ font-size:23px; }
  .cc-action-join{ padding:8px 14px; }
}