/* BCB Self-Pay & Health-Share (/insurance/self-pay/) — redesign 2026-05-25.
   Body, nav, footer, fonts, global reset, and the sitewide ombre default
   are handled by colors_and_type.css + nav.css. Every selector here is
   scoped to body.page-self-pay: that keeps the styles page-local AND
   beats the global `body.full-width-content section { padding-block }`
   rule (L-015), so each section keeps its own padding. */

/* ═══════════════════════════════════════════════════════════
   PAGE GRADIENT — long page (v3 long ramp)
   ═══════════════════════════════════════════════════════════ */
body.page-self-pay {
  background: var(--grad-page-v3);
  background-attachment: fixed;
}

/* Content */
body.page-self-pay .sp-section { padding: clamp(48px, 6vw, 80px) 32px; background: transparent; }
body.page-self-pay .sp-section--sm { padding: clamp(32px, 4vw, 56px) 32px; }
body.page-self-pay .sp-inner { max-width: 1080px; margin: 0 auto; }
body.page-self-pay .sp-inner--narrow { max-width: 820px; }
body.page-self-pay .sp-head { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); }
body.page-self-pay .sp-eyebrow { font-family: var(--font-accent); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-700); margin: 0 0 14px; }
body.page-self-pay .sp-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy-700); margin: 0 0 14px; text-wrap: balance; }
body.page-self-pay .sp-sub { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--navy-500); margin: 0; text-wrap: pretty; }

body.page-self-pay .sp-card { background: var(--card-lift-bg); backdrop-filter: var(--card-lift-blur); -webkit-backdrop-filter: var(--card-lift-blur); box-shadow: var(--shadow-card-lift); border-radius: var(--radius-xl); }

/* Three option cards */
body.page-self-pay .sp-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 920px) { body.page-self-pay .sp-options { grid-template-columns: 1fr; } }
body.page-self-pay .sp-option { padding: 36px 32px; display: flex; flex-direction: column; }
body.page-self-pay .sp-option__chip { align-self: flex-start; font-family: var(--font-accent); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin: 0 0 18px; }
body.page-self-pay .sp-option--pay .sp-option__chip { color: var(--pink-700); background: rgba(194,99,138,0.10); }
body.page-self-pay .sp-option--share .sp-option__chip { color: #2C9A6E; background: rgba(44,154,110,0.12); }
body.page-self-pay .sp-option--oon .sp-option__chip { color: var(--slate-700); background: rgba(52,66,88,0.10); }
body.page-self-pay .sp-option__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy-700); margin: 0 0 12px; line-height: 1.15; letter-spacing: -0.015em; }
body.page-self-pay .sp-option__body { font-size: 15.5px; line-height: 1.6; color: var(--navy-600); margin: 0 0 16px; flex: 1; }
body.page-self-pay .sp-option__list { list-style: none; padding: 0; margin: 0 0 18px; }
body.page-self-pay .sp-option__list li { padding: 8px 0 8px 22px; position: relative; font-size: 14.5px; line-height: 1.5; color: var(--navy-700); border-bottom: 1px solid rgba(62,80,104,0.08); }
body.page-self-pay .sp-option__list li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink-500); }
body.page-self-pay .sp-option--share .sp-option__list li::before { background: #2C9A6E; }
body.page-self-pay .sp-option--oon .sp-option__list li::before { background: var(--slate-500); }
body.page-self-pay .sp-option__list li:last-child { border-bottom: 0; }

/* ─── Rates ────────────────────────────────────────────── */

/* TPD explainer callout (above the tables) */
body.page-self-pay .sp-tpd {
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  margin-bottom: clamp(28px, 3.5vw, 40px);
  background: rgba(245, 214, 224, 0.42);
  border: 1px solid rgba(194, 99, 138, 0.18);
  border-radius: var(--radius-xl);
}
@media (max-width: 720px) { body.page-self-pay .sp-tpd { grid-template-columns: 1fr; } }
body.page-self-pay .sp-tpd__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--pink-500); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.02em;
  flex-shrink: 0;
}
body.page-self-pay .sp-tpd__label {
  font-family: var(--font-accent); font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-700);
  margin: 0 0 6px;
}
body.page-self-pay .sp-tpd__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.2; letter-spacing: -0.012em;
  color: var(--navy-700);
  margin: 0 0 8px;
}
body.page-self-pay .sp-tpd__body {
  font-size: 14.5px; line-height: 1.6;
  color: var(--navy-600);
  margin: 0;
}

/* Rates block (one per New / Established) */
body.page-self-pay .sp-rates-block { padding: clamp(28px, 4vw, 40px); }
body.page-self-pay .sp-rates-block + .sp-rates-block { margin-top: clamp(20px, 3vw, 28px); }
body.page-self-pay .sp-rates-block__head {
  display: flex; align-items: baseline;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(62,80,104,0.10);
}
body.page-self-pay .sp-rates-block__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--navy-700);
  margin: 0;
}
body.page-self-pay .sp-rates-block__note {
  font-size: 13.5px; line-height: 1.5;
  color: var(--navy-500);
  margin: 0;
  flex: 1 1 220px;
}
body.page-self-pay .sp-rates-block__note strong { color: var(--navy-700); font-weight: 600; }

/* Rates table — 4 cols (visit | office | home | telehealth) with TPD/Full price pair per cell */
body.page-self-pay .sp-rates__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
body.page-self-pay .sp-rates__table th,
body.page-self-pay .sp-rates__table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(62,80,104,0.08);
  font-size: 14.5px;
  vertical-align: top;
}
body.page-self-pay .sp-rates__table thead th {
  font-family: var(--font-accent); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-400);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(62,80,104,0.18);
}
body.page-self-pay .sp-rates__table thead th + th {
  text-align: right;
  width: 18%;
}
body.page-self-pay .sp-rates__table tbody td {
  color: var(--navy-700);
  line-height: 1.4;
}
body.page-self-pay .sp-rates__table tbody td + td {
  text-align: right;
  width: 18%;
  white-space: nowrap;
}
body.page-self-pay .sp-rates__table tbody tr:last-child td { border-bottom: 0; }
body.page-self-pay .sp-rates__table .visit { font-weight: 600; }
body.page-self-pay .sp-rates__table .visit small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--navy-500);
  margin-top: 2px;
  line-height: 1.35;
}
body.page-self-pay .rate__tpd {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  color: var(--pink-700);
  font-size: 16px;
  letter-spacing: -0.01em;
}
body.page-self-pay .rate__full {
  display: block;
  font-size: 11.5px; font-weight: 400;
  color: var(--navy-400);
  margin-top: 2px;
  letter-spacing: 0;
}
body.page-self-pay .rate--single .rate__tpd { color: var(--navy-700); }
body.page-self-pay .rate--na {
  color: var(--navy-300);
  font-size: 14px;
}

/* Mobile: stack visit + 3 modality rows */
@media (max-width: 720px) {
  body.page-self-pay .sp-rates__table thead { display: none; }
  body.page-self-pay .sp-rates__table tbody td {
    display: block;
    padding: 6px 0;
    border: 0;
    text-align: left !important;
    width: auto !important;
    white-space: normal;
  }
  body.page-self-pay .sp-rates__table tbody tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(62,80,104,0.10);
  }
  body.page-self-pay .sp-rates__table tbody tr:last-child { border-bottom: 0; }
  body.page-self-pay .sp-rates__table tbody td + td::before {
    content: attr(data-label);
    font-family: var(--font-accent); font-weight: 700;
    font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy-400);
    display: inline-block;
    margin-right: 10px;
    min-width: 80px;
  }
  body.page-self-pay .rate__full { display: inline; margin-left: 6px; }
}

/* iPhone SE: the inline data-label reserves ~90px, which squeezes the widest rows
   (Twins follow-up, e.g. "$230–$295 full $1,000–$1,150") past the edge. Drop the
   label to its own line so the price spans full width. (QA5 set this at 360px, but
   the iPhone SE viewport is 375px, so QA7 raises the breakpoint to catch it.) */
@media (max-width: 375px) {
  body.page-self-pay .sp-rates__table tbody td + td::before {
    display: block;
    min-width: 0;
    margin: 0 0 2px;
  }
}

/* Bodywork + add-on fees side-by-side cards */
body.page-self-pay .sp-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2vw, 24px);
  margin-top: clamp(28px, 3.5vw, 40px);
}
@media (max-width: 760px) { body.page-self-pay .sp-extras { grid-template-columns: 1fr; } }
body.page-self-pay .sp-extra { padding: clamp(24px, 3vw, 32px); }
body.page-self-pay .sp-extra__eyebrow {
  font-family: var(--font-accent); font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-700);
  margin: 0 0 10px;
}
body.page-self-pay .sp-extra__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2; letter-spacing: -0.012em;
  color: var(--navy-700);
  margin: 0 0 16px;
}
body.page-self-pay .sp-extra__list { margin: 0; padding: 0; list-style: none; }
body.page-self-pay .sp-extra__list li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(62,80,104,0.08);
  font-size: 14.5px; line-height: 1.5;
  color: var(--navy-700);
}
body.page-self-pay .sp-extra__list li:last-child { border-bottom: 0; }
body.page-self-pay .sp-extra__list .label { flex: 1; }
body.page-self-pay .sp-extra__list .label small {
  display: block;
  font-size: 12.5px;
  color: var(--navy-500);
  margin-top: 2px;
}
body.page-self-pay .sp-extra__list .price {
  font-family: var(--font-display); font-weight: 700;
  color: var(--pink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 15.5px;
}
body.page-self-pay .sp-extra__foot { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--navy-500); }

body.page-self-pay .sp-rates__note {
  margin: 16px 0 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--navy-500);
  text-align: center;
}
body.page-self-pay .sp-rates__note strong { color: var(--navy-700); font-weight: 600; }
body.page-self-pay .sp-rates__note a { color: var(--pink-600); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Health-share grid */
body.page-self-pay .sp-shares { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
body.page-self-pay .sp-share { padding: 18px 20px; background: rgba(255,255,255,0.78); border: 1px solid rgba(62,80,104,0.10); border-radius: var(--radius-md); }
body.page-self-pay .sp-share__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-700); margin: 0 0 4px; }
body.page-self-pay .sp-share__note { font-size: 13px; color: var(--navy-500); line-height: 1.4; margin: 0; }

/* HSA / FSA strip */
body.page-self-pay .sp-hsa { padding: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
@media (max-width: 760px) { body.page-self-pay .sp-hsa { grid-template-columns: 1fr; } }
body.page-self-pay .sp-hsa__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.02em; color: var(--pink-500); margin: 0 0 8px; }
body.page-self-pay .sp-hsa__sub { font-family: var(--font-accent); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-400); margin: 0; }
body.page-self-pay .sp-hsa__body { font-size: 15.5px; line-height: 1.65; color: var(--navy-600); margin: 0; }

/* Mid-page CTA (was inline styles in prototype) */
body.page-self-pay .sp-midcta { padding: clamp(28px, 4vw, 36px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: var(--pink-50); }
body.page-self-pay .sp-midcta__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 24px); color: var(--navy-700); line-height: 1.2; }
body.page-self-pay .sp-midcta__body { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--navy-600); }
body.page-self-pay .sp-midcta__btn { background: var(--pink-500); color: #fff; white-space: nowrap; }
@media (max-width: 720px) { body.page-self-pay .sp-midcta { grid-template-columns: 1fr; } }

/* Out-of-network superbill pointer (was inline styles in prototype) */
body.page-self-pay .sp-superbill { padding: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
body.page-self-pay .sp-superbill__eyebrow { margin-bottom: 8px; }
body.page-self-pay .sp-superbill__title { font-size: 24px; margin: 0 0 8px; }
body.page-self-pay .sp-superbill__body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--navy-600); }
body.page-self-pay .sp-superbill__body strong { color: var(--navy-700); }
body.page-self-pay .sp-superbill__btn { background: var(--pink-500); color: #fff; white-space: nowrap; }
@media (max-width: 720px) { body.page-self-pay .sp-superbill { grid-template-columns: 1fr; } }

/* Final CTA (navy) */
/* Final CTA → LIGHT frosted card + Case-A fade (enabled below). Was a navy band. */
body.page-self-pay .sp-final { position: relative; background: transparent; padding: clamp(48px, 7vw, 80px) 24px; text-align: center; }
body.page-self-pay .sp-final__inner { max-width: 720px; margin: 0 auto; background: var(--card-lift-bg); backdrop-filter: var(--card-lift-blur); -webkit-backdrop-filter: var(--card-lift-blur); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-xl); padding: clamp(40px,5.5vw,60px) clamp(28px,4vw,48px); box-shadow: 0 18px 50px -28px rgba(41,52,72,0.35); }
body.page-self-pay .sp-final__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 40px); color: var(--navy-700); margin: 0 0 14px; line-height: 1.1; text-wrap: balance; }
body.page-self-pay .sp-final__lede { font-size: 16.5px; line-height: 1.6; color: var(--navy-500); margin: 0 0 28px; }
body.page-self-pay .sp-final__row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
body.page-self-pay .sp-final__btn { font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; padding: 16px 28px; border-radius: 999px; text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease; }
body.page-self-pay .sp-final__btn--primary { background: var(--pink-500); color: #fff; }
body.page-self-pay .sp-final__btn--primary:hover { transform: translateY(-1px); background: var(--pink-600); color: #fff; }
body.page-self-pay .sp-final__btn--ghost { background: transparent; color: var(--navy-700); border: 1.5px solid var(--navy-200); }
body.page-self-pay .sp-final__btn--ghost:hover { background: rgba(41,52,72,0.06); }
body.page-self-pay .footer-ombre-blend { display: block; }

/* Hero with side-by-side photo (overrides shared hub-hero on this page) */
body.page-self-pay .hub-hero { padding: clamp(22px, 3.4vw, 44px) 24px clamp(14px, 2.2vw, 24px); background: transparent; }
body.page-self-pay .hub-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
body.page-self-pay .hub-hero__text { max-width: 580px; }
body.page-self-pay .hub-hero__kicker {
  font-family: var(--font-accent); font-weight: 700;
  font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-600);
  margin: 0 0 16px;
}
body.page-self-pay .hub-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.06; letter-spacing: -0.022em;
  color: var(--pink-600);
  margin: 0 0 18px;
  text-wrap: balance;
}
body.page-self-pay .hub-hero__sub {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.42;
  color: var(--navy-700);
  margin: 0 0 18px;
  font-weight: 500;
  text-wrap: pretty;
}
body.page-self-pay .hub-hero__media {
  height: clamp(220px, 30vw, 340px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--pink-50, #FDF1F4);
  box-shadow: var(--shadow-photo);
  position: relative;
}
body.page-self-pay .hub-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 48% 35%;
  display: block;
}

/* On-this-page chips inside the hero */
body.page-self-pay .hub-hero__toc {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 9px;
  margin-top: clamp(16px, 2vw, 22px);
}
body.page-self-pay .hub-toc__label {
  font-family: var(--font-accent);
  font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy-400);
  flex-basis: 100%; margin: 0 0 8px;
}
body.page-self-pay .hub-toc__chip {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 13.5px;
  color: var(--navy-600);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 80, 104, 0.14);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.page-self-pay .hub-toc__chip:hover {
  background: #fff;
  color: var(--pink-600);
  border-color: var(--pink-200);
}

/* Jump targets clear the fixed nav + hub-subnav strip. */
body.page-self-pay #sp-paths,
body.page-self-pay #sp-rates,
body.page-self-pay #sp-healthshare,
body.page-self-pay #sp-hsa,
body.page-self-pay #sp-superbill { scroll-margin-top: 130px; }

@media (max-width: 880px) {
  /* Single column, centered header. display:contents flattens the text
     wrapper so the chip row can reorder below the photo. */
  body.page-self-pay .hub-hero { padding-top: clamp(14px, 3vw, 22px); }
  body.page-self-pay .hub-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  body.page-self-pay .hub-hero__text { display: contents; }
  body.page-self-pay .hub-hero__kicker { margin-bottom: 8px; }
  body.page-self-pay .hub-hero__title  { margin-bottom: 10px; }
  body.page-self-pay .hub-hero__sub    { margin-bottom: 18px; }
  body.page-self-pay .hub-hero__media { width: 100%; }
  body.page-self-pay .hub-hero__toc {
    order: 1;
    justify-content: center;
    gap: 6px;
    margin-top: clamp(14px, 3vw, 18px);
  }
  body.page-self-pay .hub-toc__label { width: 100%; text-align: center; margin: 0 0 2px; }
  body.page-self-pay .hub-toc__chip { font-size: 12px; padding: 6px 12px; }
}

/* ─── Phone-width centering: section headers, short ledes, buttons.
   Multi-line body copy, lists, and rate tables stay left-aligned. ─── */
@media (max-width: 760px) {
  body.page-self-pay .sp-head { text-align: center; }
  body.page-self-pay .sp-tpd { text-align: center; }
  body.page-self-pay .sp-midcta { text-align: center; justify-items: center; }
  body.page-self-pay .sp-superbill { text-align: center; justify-items: center; }
  body.page-self-pay .sp-hsa { text-align: center; }
  body.page-self-pay .sp-final { text-align: center; }
}

/* 2026-06-15 (Suzanne): first-visit deposit note under the billing-path cards */
body.page-self-pay .sp-note {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-600);
}