/**
 * /pricing/ — the pricing page.
 *
 * The 2.0 homepage's language (css/index-new.css): the stone drafting grid,
 * Fraunces display with a red italic emphasis, ink rules instead of boxes
 * wherever a box is not carrying something. Sections are prefixed .pr-; the
 * header and footer are the platform composites and bring their own styles.
 *
 * Two places deliberately differ from the homepage. The plan cards are real
 * cards, because the two plans are being compared and a card is what separates
 * them; and the comparison is a table, because it is one.
 */

.pr-page {
  color: var(--color-ink);
  background-color: var(--bg-page);
  background-image: var(--paper-grid-image);
  background-size: var(--paper-grid-size);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
.pr-page ::selection { background: var(--phase-learn-dark); color: var(--text-inverse); }
.pr-page main a:focus-visible, .pr-page main button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.pr-page main h1, .pr-page main h2, .pr-page main h3 { font-family: var(--font-heading); font-weight: var(--font-semibold); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.pr-page main p { margin: 0; }
.pr-wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
.pr-em { font-style: italic; color: var(--phase-learn-dark); box-shadow: inset 0 -8px 0 var(--phase-learn-light); }

/* Page-load reveal, the same regime the homepage uses (motion.md). */
@keyframes pr-reveal { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.pr-rv { animation: pr-reveal var(--duration-reveal) var(--ease-reveal) both; }
.pr-rv-2 { animation-delay: var(--stagger-reveal); }
.pr-rv-3 { animation-delay: calc(var(--stagger-reveal) * 2); }
.pr-rv-4 { animation-delay: calc(var(--stagger-reveal) * 3); }

/* The paragraph reset above is two classes deep, so anything relying on an
   auto margin to centre itself has to match it. */

/* hero */
.pr-hero { padding: var(--space-16) 0 var(--space-8); text-align: center; }
.pr-hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.04; padding-bottom: var(--space-3); }
.pr-page main .pr-hero__lede { margin: var(--space-6) auto 0; font-size: 19px; line-height: 1.55; color: var(--color-ink-secondary); max-width: 60ch; }
.pr-page main .pr-hero__note { margin: var(--space-5) auto 0; font-size: 15px; color: var(--color-ink-secondary); max-width: 56ch; }
.pr-hero__note b { color: var(--color-ink); font-weight: var(--font-semibold); }

/* billing toggle: two ghost buttons in a hairline track */
.pr-plans { padding-bottom: var(--space-12); }
.pr-toggle { display: inline-flex; gap: var(--space-1); margin: 0 auto var(--space-8); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--bg-surface); }
.pr-plans .pr-wrap { display: flex; flex-direction: column; align-items: center; }
.pr-toggle__btn.is-on { background: var(--phase-learn-dark); color: var(--text-inverse); }
.pr-toggle__btn.is-on:hover { background: var(--phase-learn-dark); color: var(--text-inverse); }

/* plan cards */
.pr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); width: 100%; align-items: start; }
.pr-card { position: relative; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.pr-card--pro { border-color: var(--phase-learn-dark); box-shadow: var(--shadow-lg); }
.pr-card__flag { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-8); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--phase-learn-dark); color: var(--text-inverse); font-size: 12px; font-weight: var(--font-semibold); letter-spacing: 0.04em; }
.pr-card__name { font-size: 26px; }
.pr-card__price { margin-top: var(--space-4); display: flex; align-items: baseline; gap: var(--space-2); }
.pr-card__amount { font-family: var(--font-heading); font-size: 52px; font-weight: var(--font-semibold); letter-spacing: -0.03em; line-height: 1; }
.pr-card__per { font-size: 15px; color: var(--color-ink-secondary); }
.pr-card__sub { margin-top: var(--space-2); font-size: 13px; color: var(--color-ink-muted); }
.pr-card__line { margin-top: var(--space-4); font-size: 16px; line-height: 1.55; color: var(--color-ink-secondary); }
.pr-card__cta { margin-top: var(--space-6); width: 100%; justify-content: center; }
/* Checkout is a round trip to Stripe, so the button has to say it is working
   and stop taking a second click. */
.pr-card__cta.is-busy { opacity: 0.72; pointer-events: none; }
.pr-card__err {
    margin-top: var(--space-3);
    font-size: var(--text-small);
    line-height: 1.45;
    color: var(--color-primary-on-white);
}
.pr-card__err[hidden] { display: none; }
.pr-card__list { margin: var(--space-6) 0 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--color-border); list-style: none; display: grid; gap: var(--space-3); }
.pr-card__list li { position: relative; padding-left: var(--space-6); font-size: 15px; line-height: 1.45; }
.pr-card__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--phase-learn-light); border: 2px solid var(--phase-learn-dark); }

/* comparison */
.pr-compare { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.pr-compare h2 { font-size: 34px; }
.pr-compare__lede { margin-top: var(--space-2); color: var(--color-ink-secondary); max-width: 62ch; }
/* The table is one plate: a hairline card with the Pro column tinted the whole
   way down, so the eye reads a column rather than eight separate rows. */
.pr-table-wrap { margin-top: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.pr-table { width: 100%; border-collapse: collapse; text-align: left; }
.pr-table thead th { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); font-family: var(--font-body); font-size: 12px; font-weight: var(--font-bold); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-ink); vertical-align: bottom; }
.pr-table thead th:not(:first-child) { width: 132px; text-align: center; }
.pr-table__price { display: block; margin-top: var(--space-1); font-family: var(--font-heading); font-size: 17px; font-weight: var(--font-semibold); letter-spacing: -0.01em; text-transform: none; color: var(--color-ink); }
.pr-table tbody th[scope="row"] { padding: var(--space-4) var(--space-6); font-weight: var(--font-normal); font-size: 15.5px; line-height: 1.4; color: var(--color-ink); }
.pr-table tbody td { padding: var(--space-4) var(--space-6); text-align: center; }
.pr-table tbody tr + tr th, .pr-table tbody tr + tr td { border-top: 1px solid var(--color-border); }
.pr-table tbody tr:hover th[scope="row"] { color: var(--phase-learn-dark); }

/* The Pro column, banded top to bottom. Its own hairline on the left keeps the
   band from reading as a highlight that ran off the row. */
.pr-table__pro { background: var(--phase-learn-very-light); box-shadow: inset 1px 0 0 var(--phase-learn-light); }
.pr-table thead .pr-table__pro { color: var(--phase-learn-dark); }
.pr-table thead .pr-table__pro .pr-table__price { color: var(--phase-learn-dark); }

.pr-yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--phase-learn-light); color: var(--phase-learn-dark); }
.pr-table__pro .pr-yes { background: var(--phase-learn-dark); color: var(--text-inverse); }
.pr-yes .material-symbols-outlined { font-size: 16px; }
.pr-no { color: var(--gray-400); }

/* faq */
.pr-faq { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
.pr-faq h2 { font-size: 34px; }
.pr-faq__list { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
/* The card itself is ws_card (feature variant); only the type inside it is
   this page's. */
.pr-faq__item h3 { font-size: 19px; }
.pr-faq__item p { margin-top: var(--space-2); font-size: 15px; line-height: 1.6; color: var(--color-ink-secondary); }
.pr-faq__more { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: 15px; color: var(--color-ink-secondary); }
.pr-faq__more a { color: var(--phase-learn-dark); }

/* close */
.pr-close { padding: var(--space-16) 0 var(--space-12); text-align: center; }
.pr-close h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.06; }
.pr-page main .pr-close__lede { margin: var(--space-4) auto 0; max-width: 56ch; color: var(--color-ink-secondary); }
.pr-close__cta { margin-top: var(--space-6); display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 860px) {
  .pr-cards { grid-template-columns: 1fr; }
  .pr-faq__list { grid-template-columns: 1fr; gap: var(--space-6); }
  .pr-table thead th:not(:first-child) { width: 76px; }
  .pr-table thead th, .pr-table tbody th[scope="row"], .pr-table tbody td { padding-left: var(--space-4); padding-right: var(--space-4); }
  .pr-table tbody th[scope="row"] { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-rv { animation: none; }
}