/* ==========================================================================
   pricing.css — the dedicated pricing page

   Page-scoped only. Every value resolves to a token from css/tokens.css, and
   no component defined in css/components.css is restyled here — the tier
   cards, comparison grid, bundle band, EMI cards and guarantee band are new
   page-level compositions built out of the primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contrast patch — --text-subtle
   The shared token resolves to #7c8598, which is 3.71:1 on --surface and
   4.43:1 on --surface-2 in dark: under the 4.5:1 floor in both themes. It
   carries the field hints, the "Optional" markers and the footer note on this
   page, so it is corrected here until css/tokens.css is fixed centrally. The
   high-contrast theme already ships its own, darker values — leave those be.
   -------------------------------------------------------------------------- */
:root:not([data-contrast="high"]) { --text-subtle: #626c85; }
:root[data-theme="dark"]:not([data-contrast="high"]) { --text-subtle: #838b9f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-contrast="high"]) { --text-subtle: #838b9f; }
}

/* Placeholders are the one role that should NOT follow the darker token: a
   placeholder that reads as strongly as a value is a worse form, not a better
   one. Hold them at the old weight by mixing the corrected token back toward
   the field's own ground, so it stays right in both themes. */
:root:not([data-contrast="high"]) .input::placeholder {
  color: color-mix(in srgb, var(--text-subtle) 82%, var(--surface));
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.price-head-actions {
  align-items: flex-start;
}

.price-toggle-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.price-toggle-hint {
  max-width: 22rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.price-head-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-head-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.price-head-points li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.course-context {
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Tier cards
   -------------------------------------------------------------------------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tile-gap);
  align-items: start;
}

.tier-card {
  position: relative;
  overflow: visible;
}

.tier-card.is-pro {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--primary-border);
}

.tier-badge {
  position: absolute;
  top: 0;
  right: var(--space-6);
  transform: translateY(-50%);
  box-shadow: var(--shadow-sm);
}

.tier-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tier-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tier-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.tier-tagline {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 34ch;
}

.tier-price {
  padding-block: var(--space-4);
  border-block: 1px solid var(--border-subtle);
}

/* The tax-inclusive line is the number people actually pay — it is read, not
   skimmed, so it takes the muted tone rather than the subtle one. */
.tier-price .price-total { color: var(--text-muted); }

.tier-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tier-percourse {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}

.tier-for {
  padding: var(--card-pad-tight);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.tier-features {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
}

.tier-features li.is-lead {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.tier-tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
}

.tier-tick > svg { width: 0.8rem; height: 0.8rem; }

.tier-card.is-pro .tier-tick {
  background: var(--primary-soft);
  color: var(--primary);
}

.tier-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-md);
}

.tier-foot p { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */
.compare-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  table-layout: fixed;
}

.compare-table thead th {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  padding: var(--space-5) var(--row-px);
  text-align: left;
  vertical-align: bottom;
  background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--border);
}

.compare-table thead th:first-child {
  border-top-left-radius: var(--radius-xl);
}

.compare-table thead th:last-child {
  border-top-right-radius: var(--radius-xl);
}

.compare-table tbody tr:last-child th {
  border-bottom-left-radius: var(--radius-xl);
}

.compare-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-xl);
}

.cmp-feature-col { width: 46%; }
.cmp-tier-col { width: 27%; }

.cmp-head-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cmp-tier-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.cmp-tier-price {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The header row is sticky, so its Pro column must be fully opaque — the soft
   brand wash is layered over the surface rather than replacing it. */
.cmp-tier-col.is-pro {
  background-color: var(--surface-2);
  background-image: linear-gradient(var(--primary-soft), var(--primary-soft));
}
.cmp-tier-col.is-pro .cmp-tier-price { color: var(--primary-soft-text); }

.cmp-group th {
  padding: var(--space-5) var(--row-px) var(--space-2);
  text-align: left;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.cmp-group-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary);
}

.cmp-group-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.compare-table tbody tr:not(.cmp-group) + tr:not(.cmp-group) th,
.compare-table tbody tr:not(.cmp-group) + tr:not(.cmp-group) td {
  border-top: 1px solid var(--border-subtle);
}

.cmp-feature {
  padding: var(--row-py) var(--row-px);
  text-align: left;
  vertical-align: top;
  font-weight: var(--fw-regular);
}

.cmp-feature-label {
  display: block;
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.cmp-feature-hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.cmp-cell {
  padding: var(--row-py) var(--row-px);
  vertical-align: top;
}

.cmp-cell.is-pro { background: var(--primary-soft); }

.compare-table tbody tr:not(.cmp-group):hover th,
.compare-table tbody tr:not(.cmp-group):hover td {
  background: var(--surface-2);
}

.compare-table tbody tr:not(.cmp-group):hover td.is-pro {
  background: var(--primary-soft-hover);
}

/* Loading state — the rows the tbody carries until renderComparisonBody()
   replaces them. .skeleton-text sizes itself with a height, so the spans have
   to become blocks inside the cells. */
.cmp-skeleton-row .skeleton { display: block; }
.cmp-skeleton-row th,
.cmp-skeleton-row td { padding: var(--row-py) var(--row-px); }

/* An error state rendered into the tier grid must span both columns rather
   than sit in the Standard slot. */
.tier-grid > .alert { grid-column: 1 / -1; }

/* Markers ------------------------------------------------------------------ */
.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.mark > svg {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.2rem;
  border-radius: var(--radius-full);
}

.mark.is-yes > svg { background: var(--success-soft); color: var(--success); }
.mark.is-no > svg { background: var(--surface-inset); color: var(--text-subtle); }
.mark.is-part > svg { background: var(--warn-soft); color: var(--warn); }

.mark-text {
  color: var(--text);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Comparison — phone treatment: one column per tier, never a sideways scroll
   -------------------------------------------------------------------------- */
.compare-stack { display: none; }

@media (max-width: 860px) {
  .compare-table-wrap { display: none; }

  .compare-stack {
    display: grid;
    gap: var(--tile-gap);
  }

  .cmp-card.is-pro {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md), 0 0 0 2px var(--primary-border);
  }

  .cmp-card .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .cmp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .cmp-card-name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-tight);
  }

  .cmp-card-price {
    margin-top: calc(var(--space-5) * -1);
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  .cmp-card-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cmp-card-group-name {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--primary);
  }

  .cmp-card-rows {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cmp-card-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .cmp-card-row .mark { flex: 0 0 auto; }
  .cmp-card-row .mark .mark-text { display: none; }

  .cmp-card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .cmp-card-label {
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1.45;
  }

  .cmp-card-row.is-no .cmp-card-label {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--border-strong);
  }

  .cmp-card-hint {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .cmp-card-row.is-part .cmp-card-hint {
    color: var(--warn-soft-text);
    font-weight: var(--fw-semibold);
  }
}

/* --------------------------------------------------------------------------
   Bundle band
   -------------------------------------------------------------------------- */
.bundle-band {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.bundle-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bundle-courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bundle-courses li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--card-pad-tight);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.bundle-course-name {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.bundle-course-meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.bundle-maths .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.bundle-maths-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.bundle-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.bundle-row.is-pro {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.bundle-row-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.bundle-row-sum {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.bundle-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bundle-fine {
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   EMI
   -------------------------------------------------------------------------- */
.emi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
  margin: 0;
  margin-top: var(--space-6);
  padding: 0;
  border: 0;
}

/* The plans are indicative, not selectable. The dashed edge and the inset
   ground carry that; a blanket opacity would drop every figure below the
   4.5:1 contrast floor, so the card stays at full strength. */
.emi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

/* Disabled here means "not yet", not "invisible": keep the label readable in
   both themes instead of inheriting the global 50% button fade. */
.emi-card .btn:disabled {
  opacity: 1;
  --btn-fg: var(--text-muted);
  --btn-bg: var(--surface-2);
  --btn-bd: var(--border-strong);
}

.emi-months {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.emi-lines {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.emi-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-md);
}

.emi-lines dt { color: var(--text-muted); }

.emi-lines dd {
  margin: 0;
  color: var(--text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.emi-total {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.emi-note {
  margin-top: var(--space-4);
  max-width: 76ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Student discount
   -------------------------------------------------------------------------- */
.student-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: var(--space-10);
  align-items: start;
}

.student-copy p { max-width: 58ch; }

.student-card {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

#student-status:not(:empty) {
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Refund guarantee band
   -------------------------------------------------------------------------- */
.guarantee-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
}

.guarantee-mark {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--primary);
}

.guarantee-mark > svg { width: 100%; height: 100%; }

.guarantee-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.guarantee-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.guarantee-copy p {
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.guarantee-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.price-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--grad-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.price-cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.price-cta-sub {
  max-width: 56ch;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.65;
}

.price-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.price-cta-note {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .bundle-band,
  .student-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .student-card { position: static; }
}

@media (max-width: 900px) {
  .emi-grid { grid-template-columns: minmax(0, 1fr); }
  .guarantee-band { grid-template-columns: auto minmax(0, 1fr); }
  .guarantee-actions { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .tier-grid { grid-template-columns: minmax(0, 1fr); }
  .tier-badge { right: var(--space-4); }
  .bundle-courses { grid-template-columns: minmax(0, 1fr); }
  .price-head-actions { width: 100%; }
  .price-cta { padding: var(--space-8) var(--space-4); }
  .price-cta-title { font-size: var(--fs-2xl); }
}

@media (max-width: 520px) {
  .guarantee-band { grid-template-columns: minmax(0, 1fr); }
  .guarantee-actions { flex-wrap: wrap; }
  .price-cta-actions .btn { width: 100%; }
}