/*
Theme Name: Key Vision Plan
Theme URI: https://www.keyvisionplan.com
Description: Custom theme for Key Vision Plan (VSP Individual Savings Pass + QualSight LASIK). Forked from the Key Dental Plans theme.
Version: 1.0.0
Author: Key Vision Plan
Text Domain: key-vision
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Palette inherited from the Key Dental Plans theme. keyvisionplan.com uses the
   same #0067b4 brand blue, so the sister brands share one palette. */
:root {
  --blue: #0067b4;        /* headings, primary structural blue */
  --blue-dark: #004a81;   /* gradient bottom / hover */
  --blue-light: #128ae3;  /* highlights on dark backgrounds */
  --navy: #011c2f;        /* deep brand navy — footer, headlines */
  --red: #dc1d18;         /* brand accent + link colour */
  --red-dark: #c91410;    /* CTA gradient bottom / hover */
  --white: #ffffff;
  --off-white: #f5f8fb;
  --light-blue: #e6f0f9;
  --gray: #5b6b7c;
  --border: #c3dbef;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ── HEADER ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 68px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}

.header-logo img {
  height: 60px;
  width: auto;
  display: block;
}

.header-logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.5px;
}

.header-logo-text span {
  color: var(--navy);
}

.site-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.site-nav a {
  color: #444;
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--blue); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-phone {
  color: #444;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  font-size: 0.92rem;
  text-align: center;
  border: none;
}

.btn-danger {
  background: #dc2626;
  color: var(--white);
  padding: 0.65rem 1.4rem;
  border: none;
}
.btn-danger:hover { background: #b91c1c; color: var(--white); }

.btn-outline-danger {
  background: transparent;
  color: #dc2626;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid #dc2626;
  font-size: 0.84rem;
}
.btn-outline-danger:hover { background: #dc2626; color: var(--white); }

/* Red is Key Dental's action colour — the live site's "Join Now" buttons are
   red, with blue reserved for secondary/outline actions. */
.btn-primary {
  background: var(--red);
  color: var(--white);
  padding: 0.65rem 1.4rem;
}
.btn-primary:hover { background: var(--red-dark); color: var(--white); }

.btn-primary-lg {
  background: var(--red);
  color: var(--white);
  padding: 0.85rem 2rem;
  font-size: 1rem;
}
.btn-primary-lg:hover { background: var(--red-dark); color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--blue);
  padding: 0.65rem 1.4rem;
  border: 2px solid var(--blue);
}
.btn-outline:hover { background: var(--blue); color: var(--white); }

.btn-outline-lg {
  background: transparent;
  color: var(--blue);
  padding: 0.85rem 2rem;
  font-size: 1rem;
  border: 2px solid var(--blue);
}
.btn-outline-lg:hover { background: var(--blue); color: var(--white); }

.btn-white {
  background: var(--white);
  color: var(--blue);
  padding: 0.85rem 2rem;
  font-size: 1rem;
}
.btn-white:hover { background: var(--off-white); color: var(--blue-dark); }

.btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.84rem;
}

/* ── MOBILE NAV TOGGLE ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: all 0.25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: var(--white);
  padding: 1rem 1.5rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 99;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-nav.open { display: flex; }

.mobile-nav-link {
  display: block;
  padding: 0.7rem 0;
  color: #333;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-divider { height: 1px; background: #eee; margin: 0.5rem 0; }

/* ── SECTION SHARED ── */
.section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.text-center { text-align: center; }

.highlight {
  color: var(--blue);
}

/* ── HERO (Key Dental banner) ──
   main-banner-bg.jpg is 960x312 with the couple occupying roughly the left
   340px and pure white (255,255,255) from there rightwards. It is therefore
   placed at its NATURAL size, anchored to the bottom-left of the centred
   container — never `cover` — so it never upscales and never softens. The hero
   background is pure white to match the image's own right edge seamlessly, and
   the copy is inset past the subject. Text is dark navy, not white. */
.hero {
  /* Banner spans the full viewport, edge to edge. `100% auto` scales it to the
     exact viewport width (never `cover`, which would also zoom it vertically)
     and anchors it to the bottom, so the crop comes off the top where there is
     only background. The gradient underneath continues the photo's own tones
     into the area above it. Note the source is 960px wide, so beyond ~960px
     viewport this is an upscale. */
  background-image:
    none,
    linear-gradient(100deg, #e7eaf1 0%, #f2f4f7 26%, #ffffff 52%);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, center;
  background-size: 100% auto, auto;
  /* content-box keeps the photo below the fixed header — otherwise it bleeds up
     behind the translucent header bar and muddies the logo and nav. */
  background-origin: content-box, padding-box;
  background-clip: content-box, border-box;
  padding-top: 68px;
  border-bottom: 1px solid var(--light-blue);
}

.hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  /* The photo now lives on .hero (full-bleed), not here. Height tracks the
     viewport so the scaled banner is not cropped to a sliver on wide screens.
     The subject ends at x=340 of 960, i.e. ~35% of the viewport whatever the
     width, so the copy is inset past that point. */
  /* 32.5vw is the banner's own 960:312 ratio, so at most widths the whole photo
     is visible with nothing cropped. The cap only bites past ~1720px, and then
     only trims hair from the top — cropping any harder cuts into their faces. */
  min-height: clamp(320px, 32.5vw, 560px);
  padding: 2rem 1.5rem 0 420px;
  display: flex;
  align-items: center;
}

.hero-copy { width: 100%; }

.hero-badge {
  display: inline-block;
  background: var(--light-blue);
  border: 1px solid var(--border);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 0.9rem;
  letter-spacing: -0.5px;
}

.hero-title .highlight { color: var(--blue); }

.hero-sub {
  font-size: 1rem;
  color: var(--gray);
  margin-bottom: 1.25rem;
  max-width: 640px;
  line-height: 1.65;
}

.hero-bullets {
  list-style: none;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.hero-bullets li {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bullet-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--blue);
  border-radius: 50%;
  color: white;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-learn {
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s;
}
.hero-learn:hover { color: var(--red); }

/* ── PLANS BAND (was inside the hero) ── */
.plans-band {
  background: var(--off-white);
  padding: 3rem 1.5rem 3.5rem;
}

.plans-band .pricing-cards { margin-top: 2rem; }

/* On the light band the cards need a border rather than a heavy drop shadow. */
.plans-band .pricing-card {
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(1, 28, 47, 0.06);
}

/* ── PRICING CARDS (hero) ── */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.pricing-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.4rem 1.1rem 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.pricing-card--featured {
  background: var(--navy);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.card-popular {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--blue);
  border-radius: 50px;
  padding: 0.25rem 0.7rem;
  display: inline-block;
  margin-bottom: 0.6rem;
}

.card-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.pricing-card--featured .card-label {
  color: rgba(255,255,255,0.6);
}

.card-price {
  display: flex;
  align-items: flex-start;
  line-height: 1;
  margin-bottom: 0.2rem;
  color: var(--navy);
}

.pricing-card--featured .card-price { color: var(--white); }

.card-dollar {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.3rem;
}

.card-amount {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.card-mo {
  font-size: 0.85rem;
  font-weight: 500;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  color: var(--gray);
}

.pricing-card--featured .card-mo { color: rgba(255,255,255,0.55); }

.card-period {
  font-size: 0.72rem;
  color: var(--gray);
  margin-bottom: 1rem;
}

.pricing-card--featured .card-period { color: rgba(255,255,255,0.5); }

.card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
  flex: 1;
}

.card-features li {
  font-size: 0.8rem;
  color: #444;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-card--featured .card-features li { color: rgba(255,255,255,0.8); }

.cf-check {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.pricing-card--featured .cf-check { color: #7ec8f5; }

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.btn-outline-card {
  display: block;
  text-align: center;
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  padding: 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-outline-card:hover { background: var(--blue); color: var(--white); }

/* Quick-enroll flip overlay — position/size set by JS */
.qe-overlay { overflow: hidden; backface-visibility: hidden; }

.btn-primary-card {
  display: block;
  text-align: center;
  background: var(--red);
  color: var(--white);
  border: 1.5px solid var(--red);
  padding: 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-primary-card:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }

.pricing-card--featured .btn.btn-primary {
  display: block;
  text-align: center;
  padding: 0.6rem;
  font-size: 0.85rem;
}

.pricing-note {
  font-size: 0.8rem;
  /* Now sits on the light plans band, not on the hero photo. */
  color: var(--gray);
  text-align: center;
  margin-top: 1.25rem;
}

.pricing-note a { color: var(--blue); font-weight: 600; }

/* ── TRUST BAR ── */
.trust-bar {
  background: var(--blue);
  padding: 1rem 1.5rem;
}

.trust-bar-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.tb-item {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* ── TRUST BAR: mobile tiles (hidden by default, shown at 900px) ── */
.trust-bar-mobile {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.tb-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.85rem 0.25rem;
}

.tb-tile-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.tb-tile-label {
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ── CARD ICON (hidden on desktop, shown mobile) ── */
.card-icon {
  display: none;
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 0.25rem;
  line-height: 1;
}


/* ── HOW IT WORKS ── */
.how-section {
  padding: 5rem 0;
  background: var(--white);
}

.how-section .section-title {
  margin-bottom: 0.5rem;
}

.how-section .section-sub {
  color: var(--gray);
  text-align: center;
  font-size: 1rem;
  margin-bottom: 3rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.step-item {
  text-align: center;
  flex: 1;
  max-width: 240px;
  padding: 0 1rem;
}

.step-icon {
  width: 64px;
  height: 64px;
  background: var(--light-blue);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 1rem;
}

.step-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.step-desc {
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 1.55;
}

.step-arrow {
  color: var(--border);
  font-size: 1.5rem;
  padding-top: 1.5rem;
  flex-shrink: 0;
}

/* ── SAVINGS ── */
.savings-section {
  padding: 5rem 0;
  background: var(--off-white);
}

.savings-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: center;
}

/* Grid children default to min-width:auto, which lets wide content (the fee
   table) push the whole grid past the viewport. Allow them to shrink. */
.savings-inner > * { min-width: 0; }

.savings-cta-mobile  { display: none; }

.savings-sub {
  color: var(--gray);
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.savings-table-wrap {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.savings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.savings-table thead tr {
  background: var(--navy);
  color: var(--white);
}

.savings-table th {
  padding: 0.5rem 0.75rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.savings-table th.st-procedure { width: 46%; }
.savings-table th.st-avg       { width: 18%; text-align: right; }
.savings-table th.st-member    { width: 18%; text-align: right; }
.savings-table th.st-save      { width: 18%; text-align: right; }

.savings-table td {
  padding: 0.42rem 0.75rem;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.st-row-even { background: var(--white); }
.st-row-odd  { background: #f8fafd; }

.savings-table tbody tr:last-child td { border-bottom: none; }

.savings-table tbody tr:hover { background: #eef4ff; }

.st-avg { text-align: right; color: var(--gray); }
.st-member { text-align: right; font-weight: 600; }

.st-strikethrough {
  text-decoration: line-through;
  color: var(--gray);
}

.st-save {
  text-align: right;
  white-space: nowrap;
}

.st-save-amount {
  display: block;
  font-weight: 700;
  color: #16a34a;
  font-size: 0.8rem;
}

.st-save-pct {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 20px;
  margin-top: 0.15rem;
}

.savings-disclaimer {
  font-size: 0.72rem;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.savings-chart-note {
  font-size: 0.72rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0.75rem 0 0;
}

/* ── WHY Key Dental Plans ── */
.why-section {
  padding: 5rem 0;
  background: var(--white);
}

.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.why-section .section-title {
  margin-bottom: 0.75rem;
}

.why-intro {
  color: var(--gray);
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.why-icon {
  width: 44px;
  height: 44px;
  background: var(--light-blue);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.why-item h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}

.why-item p {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.55;
}

.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-card {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  color: var(--white);
}

.stat-card:last-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
}

.stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--white);
}

.stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* ── FAQ ── */
.faq-section {
  padding: 5rem 0;
  background: var(--off-white);
}

.faq-section .section-title {
  text-align: center;
  margin-bottom: 0.5rem;
}

.faq-intro {
  text-align: center;
  color: var(--gray);
  margin-bottom: 3rem;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  gap: 1rem;
  font-family: inherit;
}

.faq-icon {
  color: var(--blue);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.25s;
}

.faq-item.open .faq-icon { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.65;
  padding: 0 1.25rem;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 1.25rem 1.1rem;
}

/* ── CTA BANNER ── */
.cta-banner {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  padding: 4rem 1.5rem;
  text-align: center;
}

.cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

.cta-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-banner h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.cta-banner p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  margin-bottom: 2rem;
}

.cta-banner .btn-white {
  font-size: 1rem;
  padding: 0.85rem 2.5rem;
}

/* ── JOIN PAGE ── */
.join-page {
  min-height: 100vh;
  background: var(--off-white);
  padding: 100px 1.5rem 4rem;
}

.join-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* Form is the top-level container — no box styles of its own */
.join-form {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Full-width error banner sits above the two columns */
.join-error--wide {
  margin-bottom: 1.25rem;
}

/* Two-column grid: left = personal info (wider), right = plan + payment (sticky) */
.join-columns {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2rem;
  align-items: start;
}

.join-col--info {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
}

.join-col--payment {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  position: sticky;
  top: 5.5rem;
}

/* Full-width band across the top of step 2: selected plan + discount code */
.join-topband {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
}
.join-topband .join-section-label { margin-top: 0; }
.join-topband-side { display: flex; flex-direction: column; gap: 1rem; }

/* Widget mode: lay the payment column out as a flex column so the card widget (and
   its heading) sit BELOW the disclosure checkboxes — i.e. it appears right where the
   user checked the boxes. Disclaimers sink to the very bottom. */
.join-col--payment-widget { display: flex; flex-direction: column; }
.join-col--payment-widget > .join-payment-heading,
.join-col--payment-widget > #kdp-widget-area { order: 20; }
/* On renewal the reveal button sits inside this column too — keep it with the widget
   (enrollment's button lives in the info column, so this rule doesn't affect it). */
.join-col--payment-widget > .join-continue-payment { order: 25; }
.join-col--payment-widget > .form-disclaimer,
.join-col--payment-widget > .form-secure-note { order: 30; }

/* Renewal "card on file" step (shown instead of the widget when the member already
   has a saved card — avoids re-adding the same card, which AuthVia rejects). */
.kdp-cardonfile { margin-top: 0.5rem; }
.kdp-onfile-single { margin: 0.25rem 0 1rem; }
.kdp-onfile-select {
  width: 100%;
  padding: 0.75rem;
  margin: 0.25rem 0 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 1rem;
}
.kdp-use-new-card {
  display: inline-block;
  margin-top: 0.75rem;
}

/* Section divider labels used inside each column */
.join-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 1.5rem 0 0.75rem;
}

.join-col--info  > .join-section-label:first-of-type,
.join-col--payment > .join-section-label:first-of-type {
  margin-top: 0;
}

.join-back {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--blue);
  font-weight: 500;
  margin-bottom: 1.25rem;
  transition: opacity 0.2s;
}
.join-back:hover { opacity: 0.7; }

.join-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.join-sub {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.join-plan-summary {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.join-discount-row {
  margin-bottom: 1.25rem;
}
.join-discount-row input {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.join-optional {
  font-weight: 400;
  color: var(--gray);
  text-transform: none;
  letter-spacing: normal;
}

.join-plan-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.plan-tab {
  flex: 1;
  padding: 0.75rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.plan-tab:hover { color: var(--blue); }
.plan-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.plan-detail {
  display: none;
  padding: 1rem 1.25rem;
  flex-direction: column;
  gap: 0.2rem;
}
.plan-detail.active { display: flex; }

.plan-detail-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-detail-price {
  font-size: 0.9rem;
  color: var(--gray);
}

.plan-detail-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
  margin-top: 0.15rem;
}

.join-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.join-trust-item {
  font-size: 0.79rem;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.join-trust-item span {
  color: var(--blue);
  font-weight: 700;
}

.join-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.form-row {
  margin-bottom: 1rem;
}

.form-row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row--3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}

.form-hint {
  font-size: 0.72rem;
  color: var(--gray);
  line-height: 1.3;
}

/* Payment widget status message — make it readable, and prominent while loading. */
#kdp-widget-status {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--gray);
}
#kdp-widget-status.is-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0.5rem 0;
}
#kdp-widget-status.is-loading::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 3px solid rgba(30, 111, 191, 0.25);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: kdp-spin 0.7s linear infinite;
}
@keyframes kdp-spin { to { transform: rotate(360deg); } }

.form-group input:invalid:not(:placeholder-shown) {
  border-color: #d9534f;
}

.form-group input,
.form-group select {
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1a1a1a;
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,111,191,0.12);
}

.form-disclaimer {
  font-size: 0.78rem;
  color: var(--gray);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.form-disclaimer a {
  color: var(--blue);
  text-decoration: underline;
}

.join-submit,
.join-continue-payment {
  width: 100%;
  padding: 0.95rem;
  font-size: 1rem;
  transition: background 0.2s, opacity 0.2s;
}
.join-submit:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 1;
}
.join-submit:disabled:hover { background: #94a3b8; }

.form-secure-note {
  text-align: center;
  font-size: 0.77rem;
  color: var(--gray);
  margin-top: 0.75rem;
}

/* ── JOIN PROGRESS STEPS ── */
.jp-steps {
  display: flex;
  align-items: center;
  max-width: 280px;
  margin: 0 auto 2rem;
}

.jp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.jp-step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--border);
  color: var(--gray);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jp-step--active .jp-step-num { background: var(--blue); color: #fff; }
.jp-step--done   .jp-step-num { background: #22c55e;     color: #fff; }

.jp-step-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray);
  white-space: nowrap;
}
.jp-step--active .jp-step-label { color: var(--navy); }

.jp-step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 0.4rem 1.1rem;
}
.jp-step-connector--done { background: #22c55e; }

/* Step 1 right-col preview */
.jp-next-preview {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
}
.jp-next-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray);
  margin-bottom: 0.3rem;
}
.jp-next-sub {
  font-size: 0.84rem;
  color: var(--gray);
  line-height: 1.5;
}

/* Step 2 member name summary */
.jp-member-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f0f6ff;
  border: 1px solid #c5d8f0;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  margin-bottom: 1.5rem;
}
.jp-member-name  { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.jp-member-email { font-size: 0.82rem; color: var(--gray); }

/* ── DEPENDENTS ── */
.dependents-section {
  margin-top: 1.75rem;
}

.dependents-note {
  font-size: 0.84rem;
  color: var(--gray);
  margin-bottom: 0.9rem;
  line-height: 1.5;
}

.dep-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1rem 0.75rem;
  margin-bottom: 0.75rem;
  position: relative;
  background: #fafbfc;
}

.dep-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dep-row-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
}

.dep-remove-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: #dc2626;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: background 0.15s;
  font-family: inherit;
}
.dep-remove-btn:hover { background: #fef2f2; }

.dep-add-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  margin-top: 0.25rem;
}
.dep-add-btn:hover { border-color: var(--blue); background: #f0f6ff; }
.dep-add-btn:disabled { opacity: 0.4; cursor: default; }

/* ── RENEW PAGE ── */
.join-error--wide {
  grid-column: 1 / -1;
}

.renew-member-summary {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem 0.75rem;
  margin-bottom: 0.25rem;
}

.renew-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
  margin-top: 0.5rem;
}

.renew-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.renew-summary-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
}

.renew-summary-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

.renew-summary-note {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--gray);
}

.renew-summary-note a { color: var(--blue); }

.renew-plan-note {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 0.75rem;
}

.renew-plan-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.renew-plan-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray);
  margin-bottom: 0.35rem;
}

.renew-plan-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.35rem;
  background: #fff;
}

.renew-plan-option:hover { border-color: var(--blue); }

.renew-plan-option--selected {
  border-color: var(--blue);
  background: #f0f6ff;
}

.renew-plan-radio {
  accent-color: var(--blue);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.renew-plan-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  flex: 1;
}

.renew-plan-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

.renew-plan-fee {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray);
  margin-left: 0.25rem;
}

.renew-new-expiry {
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

/* ── CONFIRMATION PAGE ── */
.confirmation-page {
  min-height: 100vh;
  background: var(--off-white);
  padding: 120px 1.5rem 5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.confirmation-wrap {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.confirmation-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-weight: 700;
}

.confirmation-icon--success {
  background: #dcfce7;
  color: #16a34a;
}

.confirmation-icon--error {
  background: #fef2f2;
  color: #dc2626;
  font-size: 2.25rem;
}

.confirmation-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.confirmation-sub {
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.member-id-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  color: var(--white);
}

.member-id-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.5rem;
}

.member-id-value {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}

.member-id-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

.confirmation-details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  text-align: left;
}

.conf-detail {
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.conf-detail:last-child { border-bottom: none; }

.conf-detail-label { color: var(--gray); }
.conf-detail-value { font-weight: 600; color: var(--navy); }

.confirmation-next {
  text-align: left;
  margin-bottom: 2rem;
}

.confirmation-next h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}

.next-steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ── FIND A DENTIST PAGE ── */
.fad-hero {
  background: linear-gradient(135deg, #1a3a5c 0%, #1E5FA8 60%, #3B8FDF 100%);
  padding: 120px 1.5rem 3.5rem;
}

.fad-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.fad-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.75rem;
}

.fad-hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.85rem;
  line-height: 1.2;
}

.fad-hero-sub {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.fad-hero-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fad-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
}

.fad-body {
  background: var(--off-white);
  padding: 2.5rem 1.5rem 4rem;
}

.fad-body-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

.fad-search-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 600px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.fad-iframe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #0D1B2A 0%, #1E6FBF 100%);
  gap: 1rem;
}

.fad-iframe-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fad-iframe-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.fad-iframe-title {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.1rem;
}

.fad-iframe-hint {
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  margin: 0;
}

.fad-network-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.fad-iframe-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  color: var(--gray);
  font-size: 0.9rem;
  gap: 1rem;
}

.fad-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: fad-spin 0.75s linear infinite;
}

@keyframes fad-spin {
  to { transform: rotate(360deg); }
}

.fad-iframe {
  width: 100%;
  min-height: 700px;
  border: none;
  display: block;
}

.fad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  min-height: 500px;
  gap: 0.75rem;
}

.fad-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.fad-placeholder h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
}

.fad-placeholder p {
  font-size: 0.95rem;
  color: var(--gray);
  max-width: 360px;
  line-height: 1.6;
}

.fad-placeholder p a {
  color: var(--blue);
  font-weight: 600;
}

.fad-placeholder-note {
  font-size: 0.85rem !important;
  background: var(--light-blue);
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  color: var(--navy) !important;
  margin-top: 0.5rem;
}

.fad-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fad-tip-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
}

.fad-tip-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.85rem;
}

.fad-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fad-steps li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.fad-step-num {
  width: 24px;
  height: 24px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.fad-steps strong {
  display: block;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

.fad-steps p {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.5;
}

.fad-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fad-tips li {
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.5;
  display: flex;
  gap: 0.5rem;
}

.fad-tip-card--cta {
  background: var(--navy);
  border-color: transparent;
}

.fad-cta-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.25rem;
}

.fad-tip-card--cta h3 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 0;
}

.fad-help {
  text-align: center;
  padding: 0.5rem 0;
}

.fad-help p {
  font-size: 0.82rem;
  color: var(--gray);
}

.fad-help-phone {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue);
  margin: 0.25rem 0;
  letter-spacing: -0.5px;
}

.fad-help-hours {
  font-size: 0.75rem;
  color: var(--gray);
}

@media (max-width: 860px) {
  .fad-body-inner {
    grid-template-columns: 1fr;
  }

  .fad-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .fad-tip-card--cta,
  .fad-help {
    grid-column: 1 / -1;
  }

  .fad-hero-title { font-size: 1.8rem; }
}

@media (max-width: 560px) {
  .fad-sidebar { grid-template-columns: 1fr; }
  .fad-hero-badges { flex-direction: column; align-items: center; }
}

.next-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.next-step-num {
  width: 28px;
  height: 28px;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.next-step strong {
  display: block;
  font-size: 0.92rem;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

.next-step p {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.5;
}

.confirmation-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── JOIN / CONFIRMATION RESPONSIVE ── */
@media (max-width: 840px) {
  /* Stack the two columns on tablet/mobile */
  .join-columns { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Top band stacks too (plan over discount) */
  .join-topband { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem 1.5rem; }
  /* Payment column no longer sticky — user scrolls past info first */
  .join-col--payment { position: static; }
  .form-row--2 { grid-template-columns: 1fr; }
  .form-row--3 { grid-template-columns: 1fr 1fr; }
  .join-trust { grid-template-columns: 1fr; }
  .member-id-value { font-size: 1.8rem; }
  .confirmation-actions { flex-direction: column; }
  .confirmation-actions .btn { width: 100%; text-align: center; }
}

/* ── PLAN SELECTION PAGE ── */
.plans-page { padding: 3rem 1.5rem 4rem; background: var(--off-white); min-height: 100vh; }

.plans-wrap { max-width: 1120px; margin: 0 auto; }

.plans-hero { text-align: center; margin-bottom: 2.5rem; }
.plans-hero h1 { font-size: 2rem; font-weight: 800; color: var(--navy); margin: 0.5rem 0 0.75rem; }
.plans-hero-sub { color: var(--gray); font-size: 1rem; max-width: 520px; margin: 0 auto; }

/* Three columns — one per family type (Single / Couple / Family) */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.plans-category-header { margin-bottom: 1rem; }
.plans-category-title { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0 0 0.2rem; }
.plans-category-sub { font-size: 0.85rem; color: var(--gray); margin: 0; }

/* Cards stack vertically within each column */
.plans-category-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.plan-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.plan-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.09); border-color: var(--blue); }

.plan-card--featured {
  border-color: var(--blue);
  box-shadow: 0 2px 16px rgba(30,82,180,0.12);
}

.plan-card-ribbon {
  position: absolute;
  top: -1px;
  right: 1rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 0 0 6px 6px;
}

.plan-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0.5rem 0 0;
}

.plan-card-price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}
.plan-card-period { font-size: 0.9rem; font-weight: 400; color: var(--gray); }

.plan-card-sub {
  font-size: 0.8rem;
  color: var(--gray);
  margin: 0;
  min-height: 2.2rem;
}

.plan-card-features {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.plan-card-features li {
  font-size: 0.82rem;
  color: var(--navy);
  padding-left: 1.1rem;
  position: relative;
}
.plan-card-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}

.plan-card-btn { display: block; text-align: center; margin-top: auto; }

.plans-disclaimer {
  font-size: 0.75rem;
  color: var(--gray);
  text-align: center;
  margin-top: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ── JOIN FORM — selected plan summary (replaces tab switcher) ── */
.join-plan-selected {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.plan-selected-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plan-selected-price {
  font-size: 0.9rem;
  color: var(--gray);
}
.plan-selected-price span { font-weight: 700; color: var(--navy); }

.plan-selected-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  margin-top: 0.1rem;
}

.plan-change-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--blue);
  text-decoration: none;
}
.plan-change-link:hover { text-decoration: underline; }

/* Plan selection responsive */
@media (max-width: 860px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plans-hero h1 { font-size: 1.6rem; }
}

/* ── FOOTER ── */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.75);
}

.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3rem 0 2rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-brand-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.footer-brand-name span { color: var(--blue-light); }

.footer-tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.35rem;
}

.footer-contact {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}

.footer-contact a {
  color: var(--blue-light);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: flex-start;
}

.footer-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}

.footer-disclaimer {
  font-size: 0.72rem;
  /* Required compliance text — must be legible, not decorative. 0.3 alpha on
     navy fell well under WCAG AA for body text. */
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  padding-bottom: 1rem;
}

/* ── RESPONSIVE ── */
/* Side-by-side hero and the inline nav both run out of room well before the
   phone breakpoint: the nav wraps to two lines, and the copy grows taller than
   the full-width banner, leaving a grey band above the photo. Switch to the
   stacked treatment (copy above, banner as a full-width strip below) here. */
@media (max-width: 1100px) {
  .hero {
    background: var(--white);
  }

  .hero-inner {
    display: block;
    min-height: 0;
    background: none center bottom / 100% auto no-repeat;
    padding: 2rem 1.25rem 34vw;
  }

  .hero-title { font-size: 2rem; }

  .hero-sub {
    font-size: 0.95rem;
    margin-bottom: 1.1rem;
  }

  .hero-bullets {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }

  .hero-cta { gap: 1rem; }
  .hero-sub--desktop { display: block; }

  .site-nav, .header-actions { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .hero-title { font-size: 1.9rem; }
  .hero-cta .btn-primary-lg { width: 100%; text-align: center; }

  .plans-band { padding: 2rem 1rem 2.5rem; }

  /* Cards stacked vertically. Capped and centred: at full tablet width a card
     becomes ~720px wide, and against a fixed photo height that crops the
     portraits down to a strip of forehead. */
  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing-card  { padding: 0.9rem 1rem; text-align: left; background: var(--white); border: 1px solid var(--border); }
  .pricing-card--featured { background: var(--white); transform: none; border-color: var(--border); }
  .pricing-card--featured .card-label,
  .pricing-card--featured .card-price,
  .pricing-card--featured .card-mo,
  .pricing-card--featured .card-period,
  .pricing-card--featured .card-features li { color: inherit; }
  .pricing-card--featured .cf-check { color: var(--blue); }
  .card-amount   { font-size: 2rem; }
  .card-dollar   { margin-top: 0; }
  .card-period   { font-size: 0.78rem; margin-bottom: 0.3rem; }
  .card-label    { font-size: 0.7rem; margin-bottom: 0.1rem; }
  .card-actions  { flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
  .btn-outline-card, .btn-primary-card { width: 100%; text-align: center; }

  /* Mobile card: show icon */
  .card-icon    { display: block; font-size: 1.4rem; margin-bottom: 0.25rem; }

  /* Mobile Find a Dentist widget */
  .mobile-fad-widget { display: block; padding: 1rem 1.25rem 0; }
  .mobile-fad-inner {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(0,0,0,0.1);
    padding: 1.25rem;
  }
  .mobile-fad-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.9rem;
  }
  .mobile-fad-field {
    display: flex;
    align-items: center;
    border: 1.5px solid #dde3ed;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.6rem;
  }
  .mobile-fad-pin { padding: 0 0.6rem; color: #94a3b8; font-size: 1rem; }
  .mobile-fad-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.88rem;
    color: #333;
    padding: 0.65rem 0;
    background: transparent;
  }
  .mobile-fad-btn {
    background: var(--blue);
    color: #fff;
    border: none;
    padding: 0.65rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .mobile-fad-note {
    font-size: 0.75rem;
    color: #555;
    margin: 0;
  }

  /* Trust bar: swap to icon tiles */
  .trust-bar-desktop { display: none; }
  .trust-bar-mobile  { display: grid; }

  .savings-inner { grid-template-columns: 1fr; }
  .savings-cta-desktop { display: none; }
  .savings-cta-mobile  { display: block; margin-top: 1.25rem; text-align: center; }
  .savings-table th, .savings-table td { padding: 0.5rem 0.6rem; font-size: 0.72rem; }

  .why-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .steps-row {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .step-arrow { transform: rotate(90deg); padding: 0; }

  .step-item { max-width: 100%; }

  .why-stats {
    grid-template-columns: 1fr 1fr;
  }
  .stat-card:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .site-nav, .header-actions { display: none; }
  .nav-toggle { display: flex; }

  .section-title { font-size: 1.65rem; }

  /* Keep reserving room for the banner strip (34vw ~= the 960x312 ratio).
     The old value here was a flat 2rem, which let the photo run under the copy. */
  .hero-inner {
    padding: 1.5rem 1rem 34vw;
  }
  .hero-title { font-size: 1.6rem; }
  .hero-sub   { font-size: 0.9rem; }

  /* Cards live in their own band now, so they stack full-width rather than
     being squeezed into three tiny columns as they were inside the old hero. */
  .pricing-cards { grid-template-columns: 1fr; gap: 0.75rem; }
  .pricing-card--featured { transform: none; }

  .trust-bar-mobile { gap: 0.25rem; }
  .tb-tile { padding: 0.6rem 0.1rem; }
  .tb-tile-icon { font-size: 1.3rem; }
  .tb-tile-label { font-size: 0.6rem; }

  .st-procedure { max-width: 140px; }

  .why-stats { grid-template-columns: 1fr; }
  .stat-card:last-child { grid-column: auto; }

  .footer-top { flex-direction: column; }

  .footer-bottom-row { flex-direction: column; align-items: flex-start; }

  .cta-banner h2 { font-size: 1.6rem; }
}

/* ── HEADER LOGIN LINKS ── */
.header-login-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-login-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: #444;
  transition: color 0.2s;
  white-space: nowrap;
}
.header-login-link:hover { color: var(--blue); }

.header-login-divider {
  color: #ccc;
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  .header-login-links { display: none; }
}

/* ── AUTH PAGES (login) ── */
.auth-page {
  min-height: 100vh;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 1.5rem 4rem;
}

.auth-wrap {
  width: 100%;
  max-width: 420px;
}

.auth-back {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 500;
  margin-bottom: 1.5rem;
  transition: opacity 0.2s;
}
.auth-back:hover { opacity: 0.7; }

.auth-brand-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.1rem;
}
.auth-brand-name span { color: var(--blue); }

.auth-brand-tagline {
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.auth-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
}

.auth-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.auth-sub {
  font-size: 0.88rem;
  color: var(--gray);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

.auth-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.auth-submit {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem;
}

.auth-help {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--gray);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.auth-help a { color: var(--blue); font-weight: 500; }

/* ── RENEW LOOKUP ── */
.auth-page--lookup .auth-wrap { max-width: 460px; }

.rl-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.75rem;
}

.rl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.rl-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  color: var(--gray);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-step--active .rl-step-num {
  background: var(--blue);
  color: #fff;
}

.rl-step--done .rl-step-num {
  background: #22c55e;
  color: #fff;
}

.rl-step-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gray);
  white-space: nowrap;
}

.rl-step--active .rl-step-label { color: var(--navy); }

.rl-step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 0.35rem;
  margin-bottom: 1.15rem;
}

.rl-zip-hint {
  background: #f0f6ff;
  border: 1px solid #c5d8f0;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

/* ── MEMBER DASHBOARD ── */
.dash-page {
  min-height: 100vh;
  background: var(--off-white);
}

.dash-header {
  background: linear-gradient(135deg, #1a3a5c 0%, #1E5FA8 100%);
  padding: 100px 1.5rem 1.75rem;
}

.dash-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.dash-welcome {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.dash-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}

.dash-header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dash-member-id {
  text-align: right;
}

.dash-id-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.15rem;
}

.dash-id-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.03em;
}

.dash-logout {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  transition: color 0.2s;
}
.dash-logout:hover { color: var(--white); }

.dash-body {
  padding: 2rem 1.5rem 4rem;
}

.dash-body-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

.dash-notice {
  grid-column: 1 / -1;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
}

.dash-notice--success {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.dash-notice--error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

.dash-main, .dash-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dash-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
}

.dash-card--danger {
  border-color: #fca5a5;
}

.dash-card--support {
  text-align: center;
  background: var(--off-white);
}

.dash-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.dash-card-sub {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.dash-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.dash-plan-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dash-plan-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray);
}

.dash-plan-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}

.dash-status--active {
  color: #16a34a;
}

/* Search form inside dashboard */
.dash-search-form { margin-bottom: 1rem; }

.dash-search-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 0.75rem;
  align-items: end;
}

.form-group--btn label { visibility: hidden; }

.dash-search-results { margin-top: 0.5rem; }

.search-msg {
  font-size: 0.88rem;
  color: var(--gray);
  padding: 1rem 0;
}
.search-msg--loading { color: var(--blue); }
.search-msg--error   { color: #dc2626; }

.provider-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.provider-item {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.provider-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}

.provider-address {
  font-size: 0.82rem;
  color: var(--gray);
  margin-bottom: 0.2rem;
}

.provider-phone {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  display: inline-block;
  margin-right: 0.75rem;
}

.provider-spec {
  font-size: 0.75rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

/* Auto-renew toggle */
.dash-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dash-toggle {
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 50px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.dash-toggle--on { background: var(--blue); }

.dash-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dash-toggle--on .dash-toggle-knob { transform: translateX(20px); }

.dash-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}

/* Cancel confirmation */
.dash-cancel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* Support card */
.dash-support-label {
  font-size: 0.78rem;
  color: var(--gray);
  margin-bottom: 0.1rem;
}

.dash-support-phone {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.5px;
  margin: 0.2rem 0;
}

.dash-support-hours {
  font-size: 0.75rem;
  color: var(--gray);
}

@media (max-width: 860px) {
  .dash-body-inner { grid-template-columns: 1fr; }
  .dash-search-row { grid-template-columns: 1fr 1fr; }
  .form-group--btn { grid-column: 1 / -1; }
  .form-group--btn label { display: none; }
}

@media (max-width: 560px) {
  .dash-header-inner { flex-direction: column; align-items: flex-start; }
  .dash-name { font-size: 1.4rem; }
  .dash-search-row { grid-template-columns: 1fr; }
  .dash-plan-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   PROVIDER PORTAL
══════════════════════════════════════════════════ */

.prov-page {
  min-height: 100vh;
  background: var(--off-white);
}

.prov-header {
  background: linear-gradient(135deg, #0D1B2A 0%, #1E6FBF 100%);
  padding: 5rem 1.5rem 2rem;
}

.prov-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.prov-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.25rem;
}

.prov-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}

.prov-location {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.25rem;
}

.prov-body {
  padding: 2rem 1.5rem 4rem;
}

.prov-body-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

.prov-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Eligibility Checker ── */

.prov-checker {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.prov-checker-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.prov-checker-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.prov-checker-header p {
  font-size: 0.88rem;
  color: var(--gray);
}

/* ── Steps ── */

.prov-step {
  padding: 1.5rem 1.75rem;
}

.prov-step + .prov-step {
  border-top: 1px solid var(--border);
}

.prov-step--hidden {
  display: none;
}

.prov-step-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}

/* ── Search type radio ── */

.prov-search-type {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.prov-radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
}

.prov-radio input[type="radio"] {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Search fields ── */

.prov-search-fields {
  margin-bottom: 1.25rem;
}

.prov-search-fields--hidden {
  display: none;
}

.prov-search-btn {
  min-width: 160px;
}

/* ── Member found card ── */

.prov-member-found {
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.prov-found-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.prov-found-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--gray);
  flex-wrap: wrap;
}

.prov-found-meta strong {
  color: var(--navy);
}

/* ── DOB row ── */

.prov-dob-instruction {
  font-size: 0.88rem;
  color: var(--gray);
  margin-bottom: 1rem;
  line-height: 1.55;
}

.prov-dob-row {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.prov-dob-row .form-group {
  flex: 0 0 auto;
}

.prov-dob-row .form-group input {
  width: 180px;
}

/* ── Multiple-result picker ── */

.prov-picker {
  margin-top: 1rem;
}

.prov-picker-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem;
}

.prov-picker-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.prov-picker-item:hover,
.prov-picker-item:focus {
  background: #eff6ff;
  border-color: #1E6FBF;
  outline: none;
}

.prov-picker-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0D1B2A;
}

.prov-picker-meta {
  font-size: 0.8125rem;
  color: #64748b;
}

/* ── Error message ── */

.prov-error {
  margin-top: 0.85rem;
  padding: 0.7rem 1rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #b91c1c;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════
   ELIGIBILITY RESULT
══════════════════════════════════════════════════ */

.elig-result {
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid;
}

.elig-result--eligible {
  background: #f0fdf4;
  border-color: #86efac;
}

.elig-result--ineligible {
  background: #fef2f2;
  border-color: #fca5a5;
}

.elig-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.1rem;
}

.elig-badge--eligible {
  background: #dcfce7;
  color: #15803d;
}

.elig-badge--ineligible {
  background: #fee2e2;
  color: #b91c1c;
}

.elig-details {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.elig-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.elig-row span {
  color: var(--gray);
}

.elig-row strong {
  color: var(--navy);
  font-weight: 700;
}

.elig-row--deps {
  align-items: flex-start;
}

.elig-deps {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.elig-deps li {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}

.elig-note {
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.5;
  margin-top: 0.5rem;
}

.elig-reason {
  font-size: 0.9rem;
  color: #7f1d1d;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* ── Provider rep card ── */
.prov-rep-name {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.prov-rep-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.6rem;
}

.prov-rep-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray);
}

.prov-rep-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--blue);
}

/* ── Provider portal responsive ── */

@media (max-width: 860px) {
  .prov-body-inner { grid-template-columns: 1fr; }
  .prov-sidebar { order: -1; }
}

@media (max-width: 560px) {
  .prov-header { padding-top: 5.5rem; }
  .prov-header-inner { flex-direction: column; align-items: flex-start; }
  .prov-name { font-size: 1.4rem; }
  .prov-search-type { flex-direction: column; gap: 0.6rem; }
  .prov-dob-row { flex-direction: column; align-items: stretch; }
  .prov-dob-row .form-group input { width: 100%; }
  .elig-row { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
}

/* ══════════════════════════════════════════════════
   ENROLLMENT — PAYMENT SECTION
══════════════════════════════════════════════════ */

.join-payment-heading {
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.join-payment-heading h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0D1B2A;
  margin: 0 0 0.25rem;
}

.join-payment-sub {
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0;
}

/* Auto-renew opt-in checkbox row */
.join-autorenew-section {
  margin-top: 1.5rem;
}
.join-autorenew-note {
  margin: 0.5rem 0 0 1.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #555;
}
.join-autorenew-note .join-terms-link {
  margin-left: 0.25rem;
}

.join-carddelivery-section {
  margin-top: 1.5rem;
}
.join-carddelivery-section .join-section-label {
  margin-bottom: 0.5rem;
}

/* Auto-renew checkbox (same label style as the .join-checkbox-label pattern) */
.join-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.join-checkbox-label input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #1E6FBF;
}

.join-checkbox-label span {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.55;
}

/* Required acknowledgement checkboxes */
.join-ack-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.join-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.join-checkbox-row input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #1E6FBF;
}

.join-checkbox-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.55;
  cursor: pointer;
}

.join-terms-link {
  background: none;
  border: none;
  padding: 0;
  color: #1E6FBF;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.join-terms-link:hover {
  color: #1558a0;
}

/* Terms and Conditions modal */
.join-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.join-modal-overlay[hidden] {
  display: none;
}

.join-modal {
  background: #ffffff;
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.join-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.join-modal-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0D1B2A;
  margin: 0;
}

.join-modal-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  color: #64748b;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.join-modal-close:hover {
  background: #f1f5f9;
  color: #0D1B2A;
}

.join-modal-body {
  overflow-y: auto;
  padding: 1.5rem;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.join-modal-body h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0D1B2A;
  margin: 1.5rem 0 0.5rem;
}

.join-modal-body h3:first-of-type {
  margin-top: 0.5rem;
}

.join-modal-body p {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.7;
  margin: 0 0 0.5rem;
}

@media (max-width: 560px) {
  .join-modal { max-height: 92vh; border-radius: 8px; }
  .join-modal-header { padding: 1rem; }
  .join-modal-body { padding: 1rem; }
}

/* ── CONTENT PAGES (How It Works / Savings / FAQs) ── */
.content-page {
  padding-top: 68px;               /* clears the fixed header */
  background: var(--off-white);
}

.content-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.content-hero { text-align: center; margin-bottom: 3rem; }

.content-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.content-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

.content-sub {
  margin: 0.85rem auto 0;
  max-width: 40rem;
  color: var(--gray);
  font-size: 1.05rem;
}

.content-sub a { color: var(--blue); font-weight: 600; }

/* Steps — How It Works */
.hiw-steps { list-style: none; display: grid; gap: 1.25rem; }

.hiw-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
}

.hiw-step-num {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: 1.15rem;
}

.hiw-step-body h2 { font-size: 1.2rem; color: var(--navy); margin-bottom: 0.35rem; }
.hiw-step-body p  { color: var(--gray); }

/* Savings table (content pages only — the homepage has its own compact
   variant, and an unscoped min-width here forced the homepage grid wider
   than small viewports). */
.content-page .savings-table-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;               /* table scrolls, page never does */
}

.content-page .savings-table { width: 100%; border-collapse: collapse; min-width: 34rem; }

.content-page .savings-table caption {
  padding: 1.25rem 1.25rem 0;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

.content-page .savings-table th,
.content-page .savings-table td {
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--light-blue);
}

.content-page .savings-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}

.content-page .savings-table tbody th { font-weight: 600; color: var(--navy); }
.content-page .savings-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.content-page .savings-table .savings-pct { color: var(--blue); font-weight: 700; }

.content-page .savings-table tfoot th,
.content-page .savings-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--border);
  font-weight: 800;
  color: var(--navy);
  background: var(--light-blue);
}

/* Shared highlight tiles */
.content-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.content-highlight {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

.content-highlight strong { display: block; color: var(--navy); margin-bottom: 0.3rem; }
.content-highlight p      { color: var(--gray); font-size: 0.9rem; }

.content-note {
  margin-top: 1.75rem;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #94a3b8;
}

.content-cta {
  margin-top: 2.5rem;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem 1.5rem;
}

.content-cta h2 { font-size: 1.5rem; color: var(--navy); }
.content-cta p  { color: var(--gray); margin: 0.5rem 0 1.5rem; }

/* Homepage "see all FAQs" link */
.faq-more { text-align: center; margin-top: 1.5rem; }
.faq-more a { color: var(--blue); font-weight: 600; }

@media (max-width: 600px) {
  .hiw-step { flex-direction: column; gap: 0.85rem; padding: 1.35rem; }
}

/* ── KEY DENTAL BRAND ADDITIONS ── */

/* Lifestyle photo at the top of each hero pricing card (Single / Couple / Family).
   Bleeds to the card's rounded top corners, cancelling the card's own padding. */
.card-photo {
  display: block;
  /* The card's own padding is 1.4rem/1.1rem, so the photo is widened by the
     horizontal padding and pulled back out with negative margins to bleed to
     all three top edges. `max-width:none` is required: the global
     `img{max-width:100%}` otherwise caps this back to the content width and
     leaves a gap against the card's right edge. */
  width: calc(100% + 2.2rem);
  max-width: none;
  margin: -1.4rem -1.1rem 0.9rem;
  height: 132px;
  object-fit: cover;
  object-position: center 24%;
  border-radius: 16px 16px 0 0;
}

/* "Save $19" pill — Key Dental leads with the annual-vs-monthly saving. */
.card-save {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  border-radius: 50px;
  padding: 0.12rem 0.55rem;
  white-space: nowrap;
}

.card-fine {
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--gray);
  margin-top: 0.35rem;
}

.pricing-card--featured .card-fine { color: rgba(255,255,255,0.55); }

/* Accreditation / administrator badges in the footer. White plates so the
   supplied JPEGs (which have white backgrounds) sit cleanly on dark navy. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.footer-badges img {
  height: 38px;
  width: auto;
  background: var(--white);
  border-radius: 6px;
  padding: 3px 6px;
}

@media (max-width: 900px) {
  /* Must sit AFTER the base .card-photo rule above to win the cascade — an
     earlier copy inside the main responsive block was silently overridden.
     Card padding drops to 0.9rem/1rem here, so the bleed margins change to
     match, otherwise the photo overhangs the card edges. */
  .card-photo {
    width: calc(100% + 2rem);
    margin: -0.9rem -1rem 0.75rem;
    height: 150px;
  }
}

/* ── ABOUT PAGE ── */
.about-body {
  max-width: 46rem;
  margin: 0 auto;
  color: var(--gray);
  font-size: 1.02rem;
  line-height: 1.75;
}

.about-body p + p { margin-top: 1rem; }
.about-body a { color: var(--red); font-weight: 600; }

.about-heading {
  margin: 2.75rem 0 1rem;
  font-size: 1.4rem;
  color: var(--navy);
  text-align: center;
}

.about-quote {
  border-left: 3px solid var(--red);
}

.about-quote p {
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.65;
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════════
   KEY VISION PLAN additions
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero: copy left, family photo right (no full-bleed banner like Key Dental). */
.hero.hero--kv {
  background: linear-gradient(100deg, #f2f6fb 0%, #ffffff 60%);
}
.hero--kv .hero-inner {
  min-height: 0;
  padding: 2.5rem 1.5rem 0;
  gap: 2rem;
  align-items: flex-end;
}
.hero--kv .hero-copy { flex: 1 1 auto; padding-bottom: 2.5rem; }
.hero--kv .hero-photo { flex: 0 0 auto; line-height: 0; }
.hero--kv .hero-photo img { width: 350px; max-width: 100%; height: auto; display: block; }
.hero-renew { margin-top: 1rem; font-size: 0.85rem; color: var(--gray); }
.hero-renew a { color: var(--blue); font-weight: 600; }

@media (max-width: 1100px) {
  .hero--kv .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    padding: 2rem 1.25rem 0;
  }
  .hero--kv .hero-copy { padding-bottom: 0; }
}

/* Three pricing tiers (Single / Couple / Household). */
.pricing-cards.pricing-cards--three {
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
}
.plans-grid.plans-grid--three {
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
}
@media (max-width: 920px) {
  .pricing-cards.pricing-cards--three,
  .plans-grid.plans-grid--three {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}
.plans-disclaimer p + p { margin-top: 0.5rem; }

/* Benefit lists + footnotes (VSP / QualSight copy). */
.kv-list-title { font-size: 1rem; margin: 0 0 0.75rem; color: var(--navy); }
.kv-benefits { list-style: none; display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }
.kv-benefits li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; }
.kv-benefits .bullet-check { color: var(--blue); font-weight: 700; flex: 0 0 auto; }
.kv-benefits--wide { max-width: 820px; margin: 2rem auto 1.25rem; }
.kv-footnotes { font-size: 0.78rem; color: var(--gray); line-height: 1.55; }
.kv-footnotes p + p { margin-top: 0.35rem; }

/* Careington provider search embed. The locator is a fixed ~640px-wide page,
   so give it room and let it scroll inside on narrow screens. */
.kv-search-frame {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
}
.kv-search-frame iframe {
  display: block;
  width: 100%;
  min-width: 640px;
  height: 1270px;
  border: 0;
}
.kv-search-fallback { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--gray); }
.kv-search-fallback a { color: var(--blue); font-weight: 600; }