/* Pricing page. Tokens come from base.css; no raw colors here. */

/* ---------- hero + billing toggle ---------- */
.pricing-hero { padding-top: var(--s-8); }
@media (min-width: 820px) { .pricing-hero { padding-top: var(--s-9); } }
.pricing-hero__head { max-width: 1200px; margin-bottom: var(--s-6); }
.pricing-hero__title { font-size: clamp(38px, 4.9vw, 64px); }
/* forced break kept inline so the hero caret stays on the last line */
@media (min-width: 820px) { .pricing-hero__l2::before { content: "\A"; white-space: pre; } }
.pricing-hero__head .lead { margin-inline: auto; }

.billing { display: flex; justify-content: center; margin-bottom: var(--s-6); }
.billing .segmented [role="tab"] { height: 38px; padding-inline: 18px; }
@media (max-width: 639px) { .billing .segmented [role="tab"] { height: 44px; } }

/* ---------- plan cards ---------- */
.plans { display: grid; gap: var(--s-4); align-items: stretch; }
.plan--pro { order: -1; }
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .plan--pro { order: 0; }
}

.plan { display: flex; flex-direction: column; }
.plan__body { flex: 1; display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) var(--s-6); }
@media (min-width: 1100px) { .plan__body { padding: 32px 32px 36px; } }

.plan__name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: var(--s-5);
  font-size: clamp(44px, 4.2vw, 56px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan__amount { display: inline-block; white-space: nowrap; }
/* Pro's amount gets an exact monospace width so the roll never jitters the line. */
.plan__amount[data-price-monthly] {
  width: calc(var(--n, 2) * (1ch - .04em));
  transition: width 240ms var(--ease-out);
}
.plan__amount.is-rolling { color: var(--accent); }
.plan__unit { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }

.plan__note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--text-2);
}
.plan__save { transition: opacity var(--t) ease-out, transform var(--t) ease-out; }
.plans[data-period="monthly"] .plan__save { opacity: 0; transform: translateX(-6px); }

.plan__pitch {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
}
.plan__cta { margin-top: var(--s-5); }
.plan__label { margin-top: var(--s-6); font-size: 12px; color: var(--text-2); }
.plan__list { margin-top: var(--s-3); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.plan__list li:first-child { color: var(--text); }

/* Pro: accent hairline, accent title, a 1px accent top edge. */
.plan--pro { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.plan.plan--pro:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.plan--pro .window__bar { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 55%, transparent); }
.plan--pro .window__title { color: var(--accent); }

.plans__foot { margin: var(--s-5) auto 0; max-width: 62ch; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .plan__amount[data-price-monthly] { transition: none; }
}

/* ---------- comparison table ---------- */
.compare__wrap { position: relative; } /* keeps .sr-only marks inside the scroller */
.compare__table { min-width: 640px; }
.compare__table thead th { font-size: 12px; box-shadow: inset 0 -1px 0 var(--border); border-bottom: 0; }
.compare__table thead th:not(:first-child),
.compare__table td { text-align: center; width: 17%; }
.compare__table thead th.is-pro { color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.compare__table tbody th[scope="row"] { font-weight: 400; color: var(--text); }
.compare__table td.is-pro { background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.compare__table td.yes, .compare__table td.no { font-weight: 500; }

.compare__group th {
  padding-top: 22px;
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
}
.compare__group span { display: inline-block; }
.compare__group span::before { content: "# "; content: "# " / ""; color: var(--ok); }
.compare__table tbody tr.compare__group:hover { background: none; }
.compare__table tbody + tbody .compare__group th { border-top: 1px solid var(--border); }
.compare__table .compare__group th { color: var(--text-2); }
.compare__table td.yes, .compare__table td.no { font-size: 15px; }

.compare__hint { margin-top: var(--s-3); text-align: right; }

/* Phones: sideways scroll with the feature column pinned. */
@media (max-width: 819px) {
  .compare__table tbody th[scope="row"],
  .compare__table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 172px;
    max-width: 200px;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
  }
  .compare__table thead th:first-child { background: var(--bg-2); box-shadow: inset 0 -1px 0 var(--border), 1px 0 0 var(--line); }
  .compare__table tbody tr:hover th[scope="row"] { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
  .compare__group span { position: sticky; left: 16px; }
}

/* Desktop: header row sticks under the site header. */
@media (min-width: 820px) {
  .compare__wrap { overflow: visible; }
  .compare__table thead th { position: sticky; top: var(--header-h); z-index: 2; }
  .compare__table thead th:first-child { border-top-left-radius: var(--r-card); }
  .compare__table thead th:last-child { border-top-right-radius: var(--r-card); }
  .compare__table tbody:last-child tr:last-child > :first-child { border-bottom-left-radius: var(--r-card); }
  .compare__table tbody:last-child tr:last-child > :last-child { border-bottom-right-radius: var(--r-card); }
  .compare__table tbody th[scope="row"] { width: 49%; padding-left: 20px; }
  .compare__group th, .compare__table thead th:first-child { padding-left: 20px; }
}

/* ---------- FAQ ---------- */
.pricing-faq__grid { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) {
  .pricing-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
  .pricing-faq__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); margin-bottom: 0; }
}

/* ---------- closing CTA ---------- */
.pricing-cta__body { display: grid; gap: var(--s-6); padding: var(--s-6) var(--s-5); }
.pricing-cta__body .title { font-size: clamp(28px, 3.2vw, 40px); }
.pricing-cta__body .lead { margin-top: var(--s-3); }
@media (max-width: 479px) { .pricing-cta__actions .btn--primary { width: 100%; justify-content: center; } }
@media (min-width: 900px) {
  .pricing-cta__body { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: var(--s-7); }
}

.pricing-cta__lead { margin-top: var(--s-4); max-width: 52ch; }