/* =============================================================================
   I4PL Conference 2026 - Registration pricing
   -----------------------------------------------------------------------------
   A real table, not a set of cards. Four rates across two audiences is tabular
   data, and a table is what a screen reader and a scanning eye both handle best.
   The member saving is pulled out beside it because it is the single most
   persuasive number on the page.
   ============================================================================= */

.pricing { padding: 3rem 0; background: var(--paper-2); }
.pricing-grid { display: grid; gap: 1.5rem; }

.price-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.price-table { width: 100%; border-collapse: collapse; }

.price-group th {
  padding: 1rem 1.25rem .6rem;
  font-size: var(--t-small); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: left;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.price-table tbody tr:not(.price-group) { border-bottom: 1px solid var(--line); }
.price-table tbody tr:last-child { border-bottom: 0; }

.price-table th[scope="row"] {
  padding: 1.1rem 1.25rem;
  font-size: var(--t-body); font-weight: 700;
  color: var(--ink); text-align: left;
}
.price-table td { padding: 1.1rem 1.25rem; vertical-align: middle; }

.price-cell { white-space: nowrap; }
.price-amt {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 900; letter-spacing: -.03em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.price-cur {
  margin-left: .35rem; font-size: var(--t-small);
  font-weight: 700; color: var(--muted);
}
.price-tag {
  font-size: var(--t-small); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-align: right;
}
/* Early-bird rows carry the cyan accent so the cheaper option reads first. */
.price-table tr.is-early th[scope="row"] { box-shadow: inset 4px 0 0 var(--cyan); }
.price-table tr.is-early .price-tag { color: var(--cyan-deep); }

.price-note {
  margin: 0; padding: 1rem 1.25rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--muted);
}

/* --- Member saving ------------------------------------------------------- */
.saving {
  align-self: start;
  padding: 1.75rem 1.5rem;
  background: var(--ink); color: var(--muted-dark);
  border-radius: var(--r);
}
.saving-amt {
  margin: 0 0 .5rem;
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.saving-txt { font-size: var(--t-small); max-width: 34ch; }
.saving .link-arrow { color: var(--cyan); margin-top: .5rem; }

@media (min-width: 62rem) {
  .pricing { padding: 5rem 0; }
  .pricing-grid { grid-template-columns: 1.5fr .8fr; gap: 2.5rem; align-items: start; }
  .price-table th[scope="row"], .price-table td { padding: 1.35rem 1.75rem; }
  .price-group th { padding: 1.15rem 1.75rem .7rem; }
  .price-note { padding: 1.15rem 1.75rem; }
}