/* ============================================================
   Learning Success — PLAN-CHOICE PAGE  (/choose-plan/)
   Page-unique layout only. All classes prefixed .ls-plan-.
   Reuses tokens from tokens.css; body type + headings come from
   .ls-pattern in components.css. No shared class is redefined here.
   Section order: header · cards · included · reassure · faq · close
   ============================================================ */

/* ---- Section 1 — Header --------------------------------------------- */
.ls-plan-header {
  max-width: 820px; margin: 0 auto; padding: 70px 32px 44px; text-align: center;
  animation: ls-rise 0.5s var(--ease-out) both;
}
.ls-plan-header__h1 {
  font: var(--font-hero); font-size: 3.1rem; color: var(--text-strong);
  letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 20px;
}
.ls-plan-header__sub {
  font: var(--font-body-md); font-size: 1.2rem; color: var(--text-muted);
  max-width: 720px; margin: 0 auto; line-height: 1.6;
}

/* ---- Section 2 — Plan cards ----------------------------------------- */
.ls-plan-cards { padding: 16px 32px 8px; }
.ls-plan-cards__inner { max-width: 1000px; margin: 0 auto; }
.ls-plan-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch;
}
.ls-plan-card {
  background: var(--surface-card); border-radius: var(--radius-2xl);
  padding: 44px 34px 34px; display: flex; flex-direction: column;
}
.ls-plan-card--monthly { border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.ls-plan-card--yearly {
  position: relative; transform: scale(1.03);
  border: 2.5px solid var(--blue-500); box-shadow: var(--shadow-xl);
}
.ls-plan-card__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--orange-500); color: #fff;
  font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.ls-plan-card__name {
  font: var(--font-h3); font-size: 1.35rem; color: var(--text-strong); margin: 8px 0 14px;
}
.ls-plan-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ls-plan-card__price .amt {
  font: var(--font-hero); font-size: 3rem; letter-spacing: -0.02em; line-height: 1;
  color: var(--text-strong);
}
.ls-plan-card--yearly .ls-plan-card__price .amt { color: var(--blue-700); }
.ls-plan-card__price .per { font: var(--font-body-md); font-size: 1.05rem; color: var(--text-muted); }
.ls-plan-card__ctx {
  font: var(--font-body-base); color: var(--text-body); line-height: 1.55; margin: 0 0 26px;
}
.ls-plan-card__ctx strong { color: var(--text-strong); }
.ls-plan-card__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--orange-500); color: #fff;
  font: var(--font-label); font-size: 1.06rem; font-weight: var(--weight-semibold);
  padding: 16px 24px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  margin-top: auto; transition: filter var(--dur-fast) var(--ease-out);
}
.ls-plan-card__btn:hover { filter: brightness(0.94); }
.ls-plan-card__micro {
  font: var(--font-label); font-size: 0.86rem; color: var(--text-muted);
  text-align: center; margin: 14px 0 0; line-height: 1.5;
}
.ls-plan-cards__guidance {
  font: var(--font-body-base); color: var(--text-muted);
  max-width: 820px; margin: 30px auto 0; text-align: center; line-height: 1.65;
}

/* ---- Section 3 — What's included ------------------------------------ */
.ls-plan-included { padding: 64px 32px; }
.ls-plan-included__card {
  max-width: 960px; margin: 0 auto; background: var(--blue-50);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl);
  padding: 48px 48px 44px;
}
.ls-plan-included__head {
  font: var(--font-h2); font-size: 1.75rem; color: var(--text-strong);
  letter-spacing: -0.01em; text-align: center; margin: 0 0 30px;
}
.ls-plan-incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.ls-plan-incl { display: flex; gap: 13px; align-items: flex-start; }
.ls-plan-incl .tick {
  width: 24px; height: 24px; border-radius: 50%; background: var(--green-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.ls-plan-incl p { font: var(--font-body-base); color: var(--text-body); margin: 0; line-height: 1.55; }

/* ---- Section 4 — Reassurance strip ---------------------------------- */
.ls-plan-reassure { max-width: 1120px; margin: 0 auto; padding: 8px 32px 56px; }
.ls-plan-reassure__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ls-plan-reassure__item { display: flex; gap: 14px; align-items: flex-start; }
.ls-plan-reassure__item svg { flex-shrink: 0; margin-top: 2px; }
.ls-plan-reassure__item p { font: var(--font-body-base); color: var(--text-body); margin: 0; line-height: 1.5; }

/* ---- Section 5 — Micro-FAQ ------------------------------------------ */
.ls-plan-faq { background: var(--surface-page); padding: 80px 32px; }
.ls-plan-faq__head {
  font: var(--font-h1); font-size: 2.2rem; color: var(--text-strong);
  letter-spacing: -0.01em; max-width: 760px; margin: 0 auto 36px;
}
.ls-plan-faq__list {
  max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
}
.ls-plan-faq__item {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
}
.ls-plan-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; font: var(--font-h3); font-size: 1.12rem; color: var(--text-strong);
}
.ls-plan-faq__item summary::-webkit-details-marker { display: none; }
.ls-plan-faq__item summary svg { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.ls-plan-faq__item[open] summary svg { transform: rotate(180deg); }
.ls-plan-faq__ans { padding: 0 26px 24px; }
.ls-plan-faq__ans p { font: var(--font-body-md); color: var(--text-muted); margin: 0; line-height: 1.65; }
.ls-plan-faq__link { max-width: 760px; margin: 32px auto 0; }
.ls-plan-faq__link a {
  font: var(--font-label); font-size: 0.98rem; font-weight: var(--weight-semibold);
  color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px;
}
.ls-plan-faq__link a:hover { color: var(--blue-800); }

/* ---- Section 6 — Quiet close ---------------------------------------- */
.ls-plan-close__inner { max-width: 680px; margin: 0 auto; padding: 80px 32px 96px; text-align: center; }
.ls-plan-close .qmark { margin-bottom: 16px; }
.ls-plan-close__quote {
  font: var(--font-body-md); font-size: 1.32rem; font-style: italic;
  color: var(--text-strong); line-height: 1.5; margin: 0 0 16px;
}
.ls-plan-close__cite { font: var(--font-label); font-weight: var(--weight-semibold); color: var(--text-muted); margin-bottom: 44px; }
.ls-plan-close__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange-500); color: #fff;
  font: var(--font-label); font-size: 1.08rem; font-weight: var(--weight-semibold);
  padding: 17px 32px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  transition: filter var(--dur-fast) var(--ease-out);
}
.ls-plan-close__btn:hover { filter: brightness(0.94); }
.ls-plan-close__micro { font: var(--font-label); color: var(--text-muted); margin: 18px 0 0; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 860px) {
  .ls-plan-grid, .ls-plan-incl-grid, .ls-plan-reassure__grid { grid-template-columns: 1fr; }
  .ls-plan-card--yearly { order: 1; transform: none; }
  .ls-plan-card--monthly { order: 2; }
  .ls-plan-header__h1 { font-size: 2.4rem; }
}