/* ==========================================================================
   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. Variant marker bar     .vb-marker
     2. App CTA button         .vb-appbtn
     3. Tier / price ladder    .vb-ladder, .vb-tiers
     4. Package card           .vb-pkg
     5. Ascension block        .vb-asc
     6. Packages page grid     .vb-pkg-grid
     7. App band               .vb-band
     8. Homepage promo strip   .vb-promo
     9. Responsive + print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Variant marker bar
   Sits in normal document flow at the very top of every page, so it pushes
   content down and cannot overlay body copy at any viewport. Navy, which
   separates it from A's gold full-width review bar directly beneath it.
   Build marker, not client-facing copy.
   -------------------------------------------------------------------------- */
.vb-marker {
  background: var(--surgical); color: #fff;
  border-bottom: 1px solid rgba(215, 197, 148, .45);
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  padding-top: 7px; padding-bottom: 7px;
  user-select: none;
}
.vb-marker .wrap { display: flex; align-items: center; gap: 9px; }
.vb-marker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); flex: none;
}

/* --------------------------------------------------------------------------
   2 · App CTA button
   A .btn modifier, not a new button. Adds the outbound mark and keeps the
   label from wrapping oddly on narrow screens.
   -------------------------------------------------------------------------- */
.vb-appbtn { gap: 8px; }
.vb-appbtn .vb-appbtn-x { font-size: 1.05em; line-height: 1; opacity: .85; }
.vb-appbtn.btn--pri:hover .vb-appbtn-x { opacity: 1; }

/* --------------------------------------------------------------------------
   3 · Tier / price ladder
   A real table so the ladder is readable by assistive tech and by print.
   Desktop keeps the table. Below 640px every row restacks as a card inside
   .vb-ladder-scroll, so the app link is on screen without a sideways swipe.
   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: 460px;
  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: 44%;
}
.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); }
.vb-tiers .vb-t-go { text-align: right; white-space: nowrap; }
.vb-tiers .vb-t-go a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--surgical); padding-bottom: 2px;
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  justify-content: flex-end;
}
.on-dark .vb-tiers .vb-t-go a { border-bottom-color: var(--mint); }
.vb-tiers .vb-t-go a:hover { border-bottom-color: transparent; }

/* 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); }

/* --------------------------------------------------------------------------
   4 · 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; }

/* --------------------------------------------------------------------------
   5 · 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); }

/* --------------------------------------------------------------------------
   6 · 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; }

/* --------------------------------------------------------------------------
   7 · App band — aftercare and results surfaces only
   -------------------------------------------------------------------------- */
.vb-band {
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--surgical);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
.on-dark .vb-band { background: var(--slate-2); border-color: var(--line-dk); border-left-color: var(--mint); }
.vb-band h3 { font-size: 21px; margin-bottom: 8px; }
.vb-band p { font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 62ch; }
.on-dark .vb-band p { color: rgba(248, 245, 239, .72); }
.vb-band-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vb-band-list li {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 13px; border-radius: 2px; border: 1px solid var(--line); color: var(--muted);
}
.on-dark .vb-band-list li { border-color: var(--line-dk); color: rgba(248, 245, 239, .8); }

/* --------------------------------------------------------------------------
   8 · Homepage promo strip
   Dismissible with no JavaScript: a visually-hidden checkbox ahead of the
   strip. The label toggles it, the sibling selector hides the strip. Without
   CSS or with JS off the strip simply stays visible.
   -------------------------------------------------------------------------- */
.vb-promo {
  background: var(--surgical); color: #fff;
  border-bottom: 1px solid rgba(215, 197, 148, .3);
  font-size: 13.5px;
}
.vb-promo-x:checked ~ .vb-promo { display: none; }
.vb-promo-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-top: 13px; padding-bottom: 13px;
}
.vb-promo-t { display: flex; align-items: center; gap: 10px; line-height: 1.5; margin: 0; }
.vb-promo-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none;
}
.vb-promo-act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vb-promo-go {
  font-weight: 700; text-decoration: none;
  border-bottom: 1.5px solid rgba(215, 197, 148, .8); padding-bottom: 2px;
  white-space: nowrap;
}
.vb-promo-go:hover { border-bottom-color: #fff; }
.vb-promo-close {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: rgba(255, 255, 255, .72); cursor: pointer; white-space: nowrap;
  padding: 4px 2px;
}
.vb-promo-close:hover { color: #fff; }
.vb-promo-x:focus-visible ~ .vb-promo .vb-promo-close {
  outline: 2.5px solid var(--mint); outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9 · Responsive + print
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .vb-asc-grid, .vb-pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .vb-asc-grid--1 { grid-template-columns: minmax(0, 1fr); }
  .vb-band { grid-template-columns: 1fr; gap: 20px; }
  .vb-band .btn { justify-self: start; }
}

@media (max-width: 640px) {
  .vb-asc-grid, .vb-asc-grid--2, .vb-asc-grid--3, .vb-pkg-grid { grid-template-columns: 1fr; }
  .vb-pkg { padding: 22px 22px 24px; }
  .vb-pkg-pr { font-size: 28px; }

  /* The ladder restacks: one card per tier, so the app link is on screen
     without 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; }
  .vb-tiers .vb-t-go { flex: 1 0 100%; margin-top: 11px; text-align: left; }
  .vb-tiers .vb-t-go a { display: inline-block; padding: 3px 0 5px; }

  .vb-promo-in { align-items: flex-start; flex-direction: column; gap: 10px; }
  .vb-marker { font-size: 9.5px; letter-spacing: .1em; }
}

@media print {
  .vb-marker, .vb-promo, .vb-promo-x { display: none !important; }
  .vb-ladder-scroll { overflow: visible; }
  .vb-tiers { min-width: 0; }
}

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