/* ============================================================
   JIIVE — PRICING (v3 · gold period)
   The Tiers section type from DESIGN.md: head above, two tiers
   6 + 6, ledger-plans below, then the retest line and the
   disclaimer; then the Complete Wellness biomarkers as a ledger.
   Header, footer, buttons and the rail come from css/home.css so
   they match the homepage exactly; the grid, field label, ghost
   pill and reveal come from css/page.css. Every value is a token
   from css/tokens.css. The tiers are shared with Home's pricing
   section: the lone gold period for Jiive Age and the period
   opened into a glass cell for Complete Wellness (DESIGN.md
   "The gold rule", item 5, and "Pricing").
   ============================================================ */

main:focus { outline: none; }

/* the ghost pill sits beside a primary pill: its border is taken out of the padding so both stand the same height */

/* ---------- Tiers ---------- */
.tiers { padding: calc(var(--size-header) + var(--space-section-tight)) 0 var(--space-section-tight); }
.tiers-head { max-width: calc(100% * 9 / 12); }
.tiers-head h1 {
  margin-top: var(--space-md);
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
  max-width: var(--measure-head);
}

/* the two tiers share row lines, so the names, prices and CTAs align though only one has a label */
.tier-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: var(--space-split);
  row-gap: 0;
  margin-top: var(--space-block);
}
.tier {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  justify-items: start;
  align-items: end;
  padding-top: var(--space-lg);
  border-top: var(--size-hairline) solid var(--color-border);
}
.tier-visual {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--size-tier-visual);
  height: var(--size-tier-visual);
  margin-bottom: var(--space-lg);
}
.tier-label { grid-row: 2; margin-bottom: var(--space-sm); }
.tier-name { grid-row: 3; }
.tier-price { grid-row: 4; }
.tier-pay { grid-row: 5; }
.tier .btn { grid-row: 6; align-self: start; }
/* Jiive Age: the lone period. On hover (or keyboard focus in the tier) it grows six times
   and turns into the glass cell; its bead shadow sits on a layer that fades out, so no
   shadow is animated. (From the prototype, on --ease-out so it settles without overshoot.) */
.tier-period {
  position: relative;
  width: var(--size-one-dot);
  height: var(--size-one-dot);
  border-radius: var(--radius-full);
  background: var(--gold-bead);
  transition: transform var(--dur-tier) var(--ease-out);
}
.tier-period::before, .tier-period::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity var(--dur-500) var(--ease-out);
}
.tier-period::before { box-shadow: var(--shadow-bead-px); }
.tier-period::after { background: var(--glass-cell); opacity: 0; }
/* Complete Wellness: a cluster of 46 gold beads that spreads into a wider ring on hover,
   each bead a moment after the last (positions in the markup, from the prototype) */
.tier-constel { position: relative; width: 0; height: 0; --r: var(--size-constel); }
.tier-constel span {
  position: absolute;
  left: calc(var(--size-speck) / -2);
  top: calc(var(--size-speck) / -2);
  width: var(--size-speck);
  height: var(--size-speck);
  border-radius: var(--radius-full);
  background: var(--gold-bead);
  box-shadow: var(--shadow-speck);
  transform: translate(calc(var(--x) * var(--r)), calc(var(--y) * var(--r)));
  transition: transform var(--dur-tier) var(--ease-out) var(--d);
}
/* opened: keyboard focus anywhere in the tier, or hover with a mouse */
.tier:focus-within .tier-period { transform: scale(var(--size-one-dot-open)); }
.tier:focus-within .tier-period::before { opacity: 0; }
.tier:focus-within .tier-period::after { opacity: 1; }
.tier:focus-within .tier-constel { --r: var(--size-constel-open); }
@media (hover: hover) and (pointer: fine) {
  .tier:hover .tier-period { transform: scale(var(--size-one-dot-open)); }
  .tier:hover .tier-period::before { opacity: 0; }
  .tier:hover .tier-period::after { opacity: 1; }
  .tier:hover .tier-constel { --r: var(--size-constel-open); }
}
.tier-name {
  font-size: var(--text-title);
  line-height: var(--leading-head);
}
.tier-price {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-price);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-emerald-ink);
  white-space: nowrap;
}
.tier-pay { margin: var(--space-xs) 0 0; color: var(--color-text-secondary); }
.tier .btn { margin-top: var(--space-lg); }

/* ---------- ledger-plans ---------- */
.ledger-plans {
  width: 100%;
  margin-top: var(--space-section-tight);
  border-collapse: separate;
  border-spacing: 0;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.ledger-plans .col-name { width: 50%; }
.ledger-plans .col-plan { width: 25%; }
.ledger-plans th, .ledger-plans td {
  padding: var(--space-md) var(--grid-gutter);
  text-align: left;
  vertical-align: middle;
}
.ledger-plans th:first-child { padding-left: 0; }
.ledger-plans tbody tr:not(:last-child) > * { border-bottom: var(--size-hairline) solid var(--color-border); }
/* head row: field labels, with a tick mark hanging from the top rule at each column start */
.ledger-plans thead th {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: var(--size-hairline) solid var(--color-border);
  background: linear-gradient(var(--color-emerald-ink), var(--color-emerald-ink)) no-repeat 0 0 / var(--size-hairline) var(--size-ledger-tick);
}
.ledger-plans thead th + th { text-align: center; }
.ledger-plans tbody th {
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  color: var(--color-emerald-ink);
}
.ledger-plans td { text-align: center; }
.ledger-plans svg { display: inline-block; width: var(--size-icon-md); height: var(--size-icon-md); vertical-align: middle; }
.tick { color: var(--color-vital-green); }
.cross { color: var(--color-text-secondary); }
/* the recommended plan's column: a surface strip, outlined, with input-radius ends */
.ledger-plans .hl {
  background-color: var(--color-surface);
  box-shadow: inset var(--size-hairline) 0 var(--color-border), inset calc(-1 * var(--size-hairline)) 0 var(--color-border);
}
.ledger-plans thead .hl {
  border-radius: var(--radius-input) var(--radius-input) 0 0;
  box-shadow: inset var(--size-hairline) 0 var(--color-border), inset calc(-1 * var(--size-hairline)) 0 var(--color-border), inset 0 var(--size-hairline) var(--color-border);
}
.ledger-plans tbody tr:last-child .hl {
  border-radius: 0 0 var(--radius-input) var(--radius-input);
  box-shadow: inset var(--size-hairline) 0 var(--color-border), inset calc(-1 * var(--size-hairline)) 0 var(--color-border), inset 0 calc(-1 * var(--size-hairline)) var(--color-border);
}

/* ---------- Retest line and disclaimer ---------- */
.retest {
  margin: var(--space-block) 0 0;
  padding-left: var(--space-md);
  border-left: var(--size-rule-accent) solid var(--color-vital-green);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-pull);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-emerald-ink);
  text-wrap: balance;
}
.disclaimer {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- Complete Wellness biomarkers (Ledger: head 1–4, ledger 5–12) ---------- */
.markers { padding: var(--space-section-tight) 0 var(--space-section); }
.markers-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-block);
  align-items: start;
}
.markers-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--size-header) + var(--space-block)); }
.markers-head h2 {
  font-size: var(--text-section);
  line-height: var(--leading-head);
  max-width: var(--measure-head);
}

.markers .ledger { grid-column: 5 / span 8; }
.mk-head, .ledger-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}
.mk-head {
  padding: var(--space-md) 0;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-border);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.mk-head span {
  padding-top: var(--space-md);
  margin-top: calc(-1 * var(--space-md));
  background: linear-gradient(var(--color-emerald-ink), var(--color-emerald-ink)) no-repeat 0 0 / var(--size-hairline) var(--size-ledger-tick);
}
.mk-head span:nth-child(1), .ledger-id { grid-column: span 1; }
.mk-head span:nth-child(2), .ledger-name { grid-column: span 2; }
.mk-head span:nth-child(3), .ledger-note { grid-column: span 4; }
.mk-head span:nth-child(4), .ledger-value { grid-column: span 1; text-align: right; }
.ledger-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.ledger-row { align-items: baseline; padding: var(--space-md) 0; }
.ledger-row + .ledger-row { border-top: var(--size-hairline) solid var(--color-border); }
.ledger-id, .ledger-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.ledger-id { color: var(--color-text-secondary); }
.ledger-value { color: var(--color-emerald-ink); }
.ledger-name {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  letter-spacing: normal;
  color: var(--color-emerald-ink);
}
.ledger-note {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- Responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  .tier-period, .tier-constel span { transition: none; }
}

@media (max-width: 880px) {
  .tiers-head { max-width: none; }
  .markers-head { grid-column: 1 / -1; position: static; }
  .markers .ledger { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  /* tiers stack: each keeps its own rows */
  .tier-row { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--space-block); }
  .tier { display: flex; flex-direction: column; grid-row: auto; align-items: flex-start; }
}
@media (max-width: 600px) {
  /* ledger-plans: each row becomes the feature name and one labelled line per plan */
  .ledger-plans, .ledger-plans tbody, .ledger-plans tr, .ledger-plans th, .ledger-plans td { display: block; }
  .ledger-plans colgroup { display: none; }
  .ledger-plans thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ledger-plans tbody tr { padding: var(--space-md) 0; }
  .ledger-plans tbody tr:not(:last-child) { border-bottom: var(--size-hairline) solid var(--color-border); }
  .ledger-plans tbody tr:not(:last-child) > * { border-bottom: 0; }
  .ledger-plans tbody th { padding: 0 0 var(--space-xs); }
  .ledger-plans td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xxs) 0;
    text-align: left;
  }
  .ledger-plans td::before {
    content: attr(data-label);
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
  }
  .ledger-plans .hl, .ledger-plans thead .hl, .ledger-plans tbody tr:last-child .hl {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  /* biomarker ledger: ID and name on one line with the count right-aligned, the note below */
  .mk-head { display: none; }
  .ledger-rows { border-top: var(--size-hairline) solid var(--color-emerald-ink); }
  .ledger-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: var(--space-xxs);
  }
  .ledger-id { grid-column: 1; grid-row: 1; }
  .ledger-name { grid-column: 2; grid-row: 1; }
  .ledger-value { grid-column: 3; grid-row: 1; }
  .ledger-note { grid-column: 2 / -1; grid-row: 2; }
}