/* ============================================================================
   MrMurse - Tutoring Plans page styles
   Page-specific layout only. All values reference Phase 0 tokens. Composes the
   existing pricing-card, card, faq, and cta-block components; adds a comparison
   table, weekly-rhythm columns, and a decision grid unique to this page.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO ----- */
.plans-hero {
  background:
    radial-gradient(1000px 460px at 80% -10%, var(--c-teal-tint-10), transparent 60%),
    var(--bg-page);
  padding-top: var(--space-9);
}
.plans-hero__inner { max-width: 760px; }
.plans-hero__title { font-size: var(--fs-h1); font-weight: var(--fw-extra); margin-top: var(--space-5); }
.plans-hero__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin-top: var(--space-5); max-width: 620px; }
.plans-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* ------------------------------------------------------- PRICING CARDS ----- */
.plans-grid { max-width: 820px; margin-inline: auto; align-items: start; }
.pricing-card__note { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-4); text-align: center; }
.plans-value-note { max-width: 720px; margin-inline: auto; margin-top: var(--space-7); text-align: center; }

/* ------------------------------------------------------- COMPARE TABLE ----- */
.compare-table {
  margin-top: var(--space-7);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.compare-table__head,
.compare-table__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: center;
}
.compare-table__head {
  background: var(--bg-alt);
  border-bottom: var(--border-width) solid var(--border);
}
.compare-table__row + .compare-table__row,
.compare-table__row { border-top: var(--border-width) solid var(--border); }
.compare-table__feature {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body-sm); color: var(--text-body); font-weight: var(--fw-medium);
}
.compare-table__head .compare-table__feature { font-weight: var(--fw-bold); color: var(--text-primary); }
.compare-table__plan {
  padding: var(--space-4) var(--space-3);
  text-align: center; font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.compare-table__plan--accent { color: var(--accent-strong); background: var(--c-teal-tint-08); }
.compare-table__price { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); }
.compare-table__plan--accent .compare-table__price { color: var(--accent-strong); }
.compare-table__cell {
  padding: var(--space-4) var(--space-3);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.compare-table__row .compare-table__cell:last-child { background: var(--c-teal-tint-08); }
.compare-table__cell--text { font-size: var(--fs-caption); color: var(--text-body); line-height: var(--lh-snug); }
.ct-yes { color: var(--accent); }
.ct-no { color: var(--text-muted); font-size: var(--fs-body); }
.ct-count { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.ct-count--accent { color: var(--accent-strong); }
.compare-table__row--bestfor { align-items: stretch; }
.compare-table__row--bestfor .compare-table__cell { align-items: flex-start; padding-top: var(--space-5); padding-bottom: var(--space-5); }

@media (max-width: 700px) {
  .compare-table__head, .compare-table__row { grid-template-columns: 1.4fr .8fr .8fr; }
  .compare-table__feature { padding: var(--space-3) var(--space-4); }
  .compare-table__plan, .compare-table__cell { padding: var(--space-3) var(--space-2); }
}

/* ------------------------------------------------------- WEEKLY RHYTHM ----- */
.rhythm {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin-top: var(--space-7); align-items: start;
}
.rhythm__name {
  font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-primary);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}
.rhythm__col--accent .rhythm__name { color: var(--accent-strong); }
.rhythm__list { display: grid; gap: var(--space-3); }
.rhythm__list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-body-sm); color: var(--text-body);
}
.rhythm__dot {
  flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px;
  border-radius: 50%; background: var(--text-muted);
}
.rhythm__dot--accent { background: var(--accent); }
.rhythm__note { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-5); text-align: center; }
@media (max-width: 640px) { .rhythm { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- CHOOSE GRID ------- */
.choose__card { display: flex; flex-direction: column; }
.choose__card--accent { border-color: var(--accent); box-shadow: var(--shadow-md), 0 0 0 1px var(--accent); }
.choose__title {
  font-size: var(--fs-h4); color: var(--text-primary);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}
.choose__list { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.choose__list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--fs-body-sm); color: var(--text-body);
}
.choose__list .icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.choose__btn { margin-top: auto; }

/* ------------------------------------------------------- MISC -------------- */
.inline-link { color: var(--accent-strong); font-weight: var(--fw-semibold); text-decoration: underline; }
.inline-link:hover { color: var(--c-navy); }
.plans-faq { max-width: 820px; }
/* Slight breathing room between the FAQ heading and the first question group. */
.plans-faq .section-head { margin-bottom: var(--space-6); }

/* A bit of breathing room between the FAQ heading and the first question. */
.faq--spaced { margin-top: var(--space-6); }
.faq-group .faq--spaced { margin-top: 0; }

/* FAQ category groups: a subheading above each cluster of questions. */
.faq-group + .faq-group { margin-top: var(--space-6); }
.faq-group__title {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-strong);
  margin-bottom: var(--space-3);
}