/* ==========================================================================
   Ageless Health & Aesthetics — Variant B additions
   Loaded AFTER styles.css. Nothing in this file may change an element that
   exists in Variant A: every selector is prefixed .vb- or is a .vb- descendant.
   Tokens, spacing and type all come from styles.css so the components read as
   native rather than bolted on.

   Contents
     1. Tier / price ladder     .vb-ladder, .vb-tiers
     2. Package card            .vb-pkg
     3. Ascension block         .vb-asc
     4. Packages page grid      .vb-pkg-grid
     5. Featured procedures     .vb-feat
     6. Close-seconds strip     .vb-close
     7. Doctor credibility band .vb-doc
     8. Doctor consult aside    .vb-doc-aside
     9. Financing options       .vb-fin
    10. Branded placeholder     .vb-ph
    11. Quoted-at-consult note  .vb-quoted
    12. Responsive + print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tier / price ladder
   A real table so the ladder is readable by assistive tech and by print.
   Three columns: option, price, monthly estimate. Desktop keeps the table.
   Below 640px every row restacks as a card inside .vb-ladder-scroll. The
   page never scrolls sideways at any width.
   -------------------------------------------------------------------------- */
.vb-ladder { margin: 0; }
.vb-ladder .vb-ladder-h { margin-bottom: 10px; }
.vb-ladder-range {
  font-size: 15px; line-height: 1.6; color: var(--muted);
  max-width: 62ch; margin-bottom: 22px;
}
.on-dark .vb-ladder-range { color: rgba(248, 245, 239, .72); }

.vb-ladder-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
}
.on-dark .vb-ladder-scroll { border-top-color: var(--line-dk); }

.vb-tiers {
  width: 100%; border-collapse: collapse; min-width: 420px;
  font-family: var(--body); text-align: left;
}
.vb-tiers thead th {
  font-family: var(--body); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 14px 16px 12px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap; vertical-align: bottom;
}
.on-dark .vb-tiers thead th { color: rgba(248, 245, 239, .55); border-bottom-color: var(--line-dk); }

.vb-tiers tbody th, .vb-tiers tbody td {
  padding: 17px 16px 17px 0; border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.on-dark .vb-tiers tbody th, .on-dark .vb-tiers tbody td { border-bottom-color: var(--line-dk); }
.vb-tiers tbody tr:last-child th, .vb-tiers tbody tr:last-child td { border-bottom: none; }
.vb-tiers th:last-child, .vb-tiers td:last-child { padding-right: 0; }

.vb-tiers .vb-t-nm {
  font-family: var(--display); font-size: 18px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.25; width: 50%;
}
.vb-tiers .vb-t-nm small {
  display: block; font-family: var(--body); font-size: 12.5px;
  font-weight: 400; color: var(--muted); margin-top: 4px;
}
.on-dark .vb-tiers .vb-t-nm small { color: rgba(248, 245, 239, .62); }
.vb-tiers .vb-t-pr { font-size: 17px; font-weight: 700; white-space: nowrap; }
.vb-tiers .vb-t-mo {
  font-size: 13px; font-weight: 600; color: var(--surgical); white-space: nowrap;
}
.on-dark .vb-tiers .vb-t-mo { color: var(--mint); }

/* The anchor row — the top of the ladder gets weight without a colour change. */
.vb-tiers tr.vb-t-top .vb-t-nm, .vb-tiers tr.vb-t-top .vb-t-pr { font-weight: 700; }
.vb-tiers tr.vb-t-top .vb-t-pr { font-size: 19px; }

.vb-ladder-foot {
  margin-top: 20px; font-size: 13.5px; line-height: 1.65;
  color: var(--muted); max-width: 66ch;
}
.on-dark .vb-ladder-foot { color: rgba(248, 245, 239, .68); }

/* --------------------------------------------------------------------------
   2 · Package card
   Same card language as .tile / .pcard: paper-2 face, hairline border,
   3px radius, navy on hover.
   -------------------------------------------------------------------------- */
.vb-pkg {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px 28px;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.vb-pkg:hover { border-color: var(--surgical); transform: translateY(-2px); }
.on-dark .vb-pkg { background: var(--slate-2); border-color: var(--line-dk); }
.on-dark .vb-pkg:hover { border-color: var(--mint); }

.vb-pkg-nm { font-size: 22px; margin-bottom: 12px; }
.vb-pkg-pr {
  font-family: var(--display); font-size: 32px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.02em;
}
.vb-pkg-mo {
  font-size: 13px; font-weight: 600; color: var(--surgical); margin-top: 7px;
}
.on-dark .vb-pkg-mo { color: var(--mint); }

.vb-pkg-items {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.7; color: var(--muted);
}
.on-dark .vb-pkg-items { border-top-color: var(--line-dk); color: rgba(248, 245, 239, .75); }
.vb-pkg-items li { padding: 3px 0; }
.vb-pkg-items li::before { content: '— '; opacity: .5; }

.vb-pkg-note {
  margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.on-dark .vb-pkg-note { color: rgba(248, 245, 239, .6); }

.vb-pkg-cta { margin-top: 22px; align-self: stretch; }

/* --------------------------------------------------------------------------
   3 · Ascension block
   -------------------------------------------------------------------------- */
.vb-asc { margin-top: 8px; }
.vb-asc-head { max-width: 62ch; margin-bottom: 28px; }
.vb-asc-head h2 { margin-bottom: 12px; }
.vb-asc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.vb-asc-grid--1 { grid-template-columns: minmax(0, 460px); }
.vb-asc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vb-asc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vb-asc-foot {
  margin-top: 22px; font-size: 13.5px; line-height: 1.65;
  color: var(--muted); max-width: 70ch;
}
.on-dark .vb-asc-foot { color: rgba(248, 245, 239, .68); }

/* --------------------------------------------------------------------------
   4 · Packages page grid
   The grid is a [data-filter-target]; the existing .chips filter in main.js
   hides children by data-tags, so no new script is needed.
   -------------------------------------------------------------------------- */
.vb-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }

/* --------------------------------------------------------------------------
   5 · Featured procedures band
   The three signature procedures, front and center. Card language matches
   .pcard: paper-2 face, hairline border, media on top, navy on hover. The
   price is the loudest element after the name, set in Fraunces.
   -------------------------------------------------------------------------- */
.vb-feat-head { max-width: 66ch; margin-bottom: 32px; }
.vb-feat-head h2 { margin-bottom: 10px; }
.vb-feat-head > p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.on-dark .vb-feat-head > p { color: rgba(248, 245, 239, .72); }

.vb-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }

.vb-feat-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.vb-feat-card:hover { border-color: var(--surgical); transform: translateY(-2px); }
.on-dark .vb-feat-card { background: var(--slate-2); border-color: var(--line-dk); }
.on-dark .vb-feat-card:hover { border-color: var(--mint); }

.vb-feat-media { display: block; }
.vb-feat-media .gcase-i, .vb-feat-media .vb-ph { aspect-ratio: 16 / 10; }

.vb-feat-b { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.vb-feat-b h3 { font-size: 21px; margin-bottom: 6px; }
.vb-feat-b h3 a { text-decoration: none; }
.vb-feat-b h3 a:hover { text-decoration: underline; }
.vb-feat-line { font-size: 14px; line-height: 1.6; color: var(--muted); }
.on-dark .vb-feat-line { color: rgba(248, 245, 239, .72); }

.vb-feat-pr { margin-top: 16px; }
.vb-feat-pr .lbl {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.on-dark .vb-feat-pr .lbl { color: rgba(248, 245, 239, .55); }
.vb-feat-pr .amt {
  font-family: var(--display); font-size: 30px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.02em;
}
.vb-feat-mo { font-size: 13px; font-weight: 600; color: var(--surgical); margin-top: 6px; }
.on-dark .vb-feat-mo { color: var(--mint); }

.vb-feat-go {
  margin-top: auto; padding-top: 20px; align-self: flex-start;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--surgical); padding-bottom: 2px;
}
.on-dark .vb-feat-go { border-bottom-color: var(--mint); }
.vb-feat-go:hover { border-bottom-color: transparent; }

/* --------------------------------------------------------------------------
   6 · Close-seconds strip
   Deliberately subordinate to the featured band: no cards, no imagery, a
   flat hairline list. Each item is one link.
   -------------------------------------------------------------------------- */
.vb-close-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.on-dark .vb-close-k { color: rgba(248, 245, 239, .55); }

.vb-close-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px;
  border-top: 1px solid var(--line);
}
.on-dark .vb-close-grid { border-top-color: var(--line-dk); }

.vb-close-i {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 0 26px; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.on-dark .vb-close-i { border-bottom-color: var(--line-dk); }
.vb-close-nm {
  font-family: var(--display); font-size: 19px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.25;
}
.vb-close-line { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.on-dark .vb-close-line { color: rgba(248, 245, 239, .72); }
.vb-close-pr { font-size: 13px; font-weight: 700; color: var(--surgical); margin-top: 3px; }
.on-dark .vb-close-pr { color: var(--mint); }
.vb-close-go { font-size: 12.5px; font-weight: 600; color: var(--surgical); margin-top: 6px; }
.on-dark .vb-close-go { color: var(--mint); }
.vb-close-i:hover .vb-close-go { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7 · Doctor credibility band
   Evidence for "A board-certified surgeon. Not a franchise injector."
   Portrait photo left, credentials right. Works on paper and in .on-dark.
   -------------------------------------------------------------------------- */
.vb-doc-in {
  display: grid; grid-template-columns: minmax(0, 380px) 1fr;
  gap: 54px; align-items: center;
}
.vb-doc-media {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2); position: relative;
}
.on-dark .vb-doc-media { border-color: var(--line-dk); background: var(--slate-2); }

.vb-doc-b h2 { margin-bottom: 12px; }
.vb-doc-cred {
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--surgical); margin-bottom: 14px;
}
.on-dark .vb-doc-cred { color: var(--mint); }
.vb-doc-copy {
  font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 58ch;
}
.on-dark .vb-doc-copy { color: rgba(248, 245, 239, .75); }
.vb-doc-b .btn { margin-top: 24px; }

/* --------------------------------------------------------------------------
   8 · Doctor consult aside
   Compact card placed beside a consult CTA. Answers "who will I actually
   see" in three lines. Circle crop of the same portrait.
   -------------------------------------------------------------------------- */
.vb-doc-aside {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; max-width: 460px;
}
.on-dark .vb-doc-aside { background: var(--slate-2); border-color: var(--line-dk); }
.vb-doc-aside-media {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  position: relative; border: 1px solid var(--line);
}
.on-dark .vb-doc-aside-media { border-color: var(--line-dk); }
.vb-doc-aside-b strong {
  display: block; font-family: var(--display); font-size: 16.5px;
  font-weight: 500; line-height: 1.25; margin-bottom: 3px;
}
.vb-doc-aside-b p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 4px; }
.on-dark .vb-doc-aside-b p { color: rgba(248, 245, 239, .72); }
.vb-doc-aside-b a { font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--surgical); }
.on-dark .vb-doc-aside-b a { color: var(--mint); }
.vb-doc-aside-b a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9 · Financing options
   Three provider cards: Cherry (live application link), CareCredit and
   Affirm (contact-first until provider links exist). The CTA row aligns
   across cards regardless of copy length.
   -------------------------------------------------------------------------- */
.vb-fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.vb-fin-c {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px 28px;
  display: flex; flex-direction: column;
}
.on-dark .vb-fin-c { background: var(--slate-2); border-color: var(--line-dk); }
.vb-fin-c h3 { font-size: 20px; margin-bottom: 8px; }
.vb-fin-c p { font-size: 14px; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }
.on-dark .vb-fin-c p { color: rgba(248, 245, 239, .75); }
.vb-fin-c .btn { margin-top: auto; align-self: stretch; }
.vb-fin-foot {
  margin-top: 20px; font-size: 13px; line-height: 1.65;
  color: var(--muted); max-width: 70ch;
}
.on-dark .vb-fin-foot { color: rgba(248, 245, 239, .68); }

/* --------------------------------------------------------------------------
   10 · Branded placeholder tile
   Replaces the anonymous gA–gH gradient swatches wherever a slot has no
   photo yet: navy face, hairline mint keyline, a small geometric mark and
   the service name in Fraunces. Reads as a designed tile, never as a
   censored photo. Loaded after styles.css, so .vb-ph beats .gA–.gH at equal
   specificity; the .gcase-i combo also outranks them outright.
   When a real photo lands, the existing .has-img switch takes over: the
   <img> covers the box and the placeholder internals are hidden.
   -------------------------------------------------------------------------- */
.vb-ph, .gcase-i.vb-ph, .pcard-img.vb-ph {
  background: var(--surgical); color: var(--paper-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 18px 16px;
  position: relative; overflow: hidden;
  font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.3;
}
.vb-ph::after {
  content: ''; position: absolute; inset: 9px;
  border: 1px solid rgba(215, 197, 148, .32); border-radius: 2px;
  pointer-events: none;
}
.vb-ph-mark { width: 40px; height: 40px; color: var(--mint); opacity: .85; flex: none; }
.vb-ph-nm {
  font-family: var(--display); font-size: 18px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.25; color: #fff; max-width: 18ch;
}
.vb-ph-cl {
  font-size: 8.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(215, 197, 148, .78);
}
/* Small square tiles (case grid) tighten up. */
.gcase-i.vb-ph .vb-ph-nm { font-size: 15.5px; }
.gcase-i.vb-ph .vb-ph-mark { width: 30px; height: 30px; }
/* A slot with a real photo: the image covers everything, and the
   placeholder internals are removed so nothing bleeds at the edges. */
.vb-ph.has-img::after,
.vb-ph.has-img .vb-ph-mark,
.vb-ph.has-img .vb-ph-nm,
.vb-ph.has-img .vb-ph-cl { display: none; }
/* Paper variant for use inside already-navy sections. */

/* --------------------------------------------------------------------------
   11 · Quoted-at-consult note
   The standard replacement for a removed price. Same hairline language as
   .answer but lighter, so it reads as information rather than a headline.
   -------------------------------------------------------------------------- */
.vb-quoted {
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--surgical);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px; max-width: 62ch;
  font-size: 14px; line-height: 1.65; color: var(--muted);
}
.on-dark .vb-quoted {
  background: var(--slate-2); border-color: var(--line-dk);
  border-left-color: var(--mint); color: rgba(248, 245, 239, .75);
}
.vb-quoted strong { color: var(--ink); font-weight: 600; }
.on-dark .vb-quoted strong { color: var(--paper-2); }
.vb-quoted a { color: var(--surgical); font-weight: 600; text-decoration: none; }
.on-dark .vb-quoted a { color: var(--mint); }
.vb-quoted a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12 · Responsive + print
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .vb-asc-grid, .vb-pkg-grid, .vb-feat-grid, .vb-fin-grid { grid-template-columns: repeat(2, 1fr); }
  .vb-asc-grid--1 { grid-template-columns: minmax(0, 1fr); }
  .vb-close-grid { grid-template-columns: 1fr; }
  .vb-doc-in { grid-template-columns: 1fr; gap: 28px; }
  .vb-doc-media { max-width: 420px; }
}

@media (max-width: 640px) {
  .vb-asc-grid, .vb-asc-grid--2, .vb-asc-grid--3, .vb-pkg-grid,
  .vb-feat-grid, .vb-fin-grid { grid-template-columns: 1fr; }
  .vb-pkg { padding: 22px 22px 24px; }
  .vb-pkg-pr { font-size: 28px; }
  .vb-feat-b { padding: 20px 20px 24px; }
  .vb-feat-pr .amt { font-size: 27px; }
  .vb-fin-c { padding: 22px 22px 24px; }
  .vb-doc-aside { max-width: none; }

  /* The ladder restacks: one card per tier, so nothing needs a sideways
     swipe. The column headers are dropped for sighted users because the
     name, the price and the /mo figure each read for themselves; they stay
     in the DOM for assistive tech. */
  .vb-ladder-scroll { overflow-x: visible; }
  .vb-tiers { display: block; width: 100%; min-width: 0; }
  .vb-tiers thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .vb-tiers tbody { display: block; }
  .vb-tiers tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .on-dark .vb-tiers tbody tr { border-bottom-color: var(--line-dk); }
  .vb-tiers tbody tr:last-child { border-bottom: none; }
  .vb-tiers tbody th, .vb-tiers tbody td {
    display: block; width: auto; padding: 0; border-bottom: none;
  }
  .vb-tiers .vb-t-nm { flex: 1 0 100%; font-size: 16.5px; margin-bottom: 5px; }
}

@media print {
  .vb-ladder-scroll { overflow: visible; }
  .vb-tiers { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vb-pkg, .vb-feat-card { transition: none; }
  .vb-pkg:hover, .vb-feat-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13 · Consult capture + success state (2026-08-20)
   New elements only; nothing existing in Variant A is restyled. The .cap
   wrapper hides the tracker's carried-value inputs (real text inputs inside a
   display:none wrapper, the GHL external-tracking pattern; type=hidden would
   be ignored). .consult-done replaces the form's button row after a captured
   submit. Both live only inside form[data-consult].
   -------------------------------------------------------------------------- */
form[data-consult] .cap { display: none !important; }

form[data-consult] .consult-done {
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
form[data-consult] .consult-done-lead {
  font-size: 15px; font-weight: 600; line-height: 1.5;
  color: var(--paper-2); margin: 0;
}
form[data-consult] .consult-done-alt {
  font-size: 12.5px; line-height: 1.55;
  color: rgba(248, 245, 239, .6); margin: 6px 0 0;
}
form[data-consult] .consult-done-alt a {
  color: rgba(248, 245, 239, .85);
}
form[data-consult] .fine.form-err {
  color: #E8B9AE;
}