/* Pricing page: billing toggle, plan-card layout, comparison-table header and cells, roadmap, bands, services.
   Loaded by public/pricing.html only. The page uses the shared public components from public_site.css:
   the button (.public-btn), card (.public-card), table (.public-table), FAQ (.public-faq) and roadmap
   stepper (.public-stepper), and the lead and outer width reuse .public-container/.public-page-content.
   Only the pricing-specific pieces stay here: the monthly/annual toggle, plan-card and service-card layout,
   the comparison table's sticky header, centred cells and group rows, the self-hosting band and the
   section spacing. Colours are the shadcn tokens. */

.pricing-page { --pp-border: hsl(var(--border)); --pp-muted: hsl(var(--muted-foreground)); --pp-fg: hsl(var(--foreground)); --pp-primary: hsl(var(--primary)); }
.pricing-page .pp-section { margin-top: 4rem; }
.pricing-page .pp-section--first { margin-top: 3rem; }
@media (min-width: 768px) { .pricing-page .pp-section { margin-top: 6rem; } .pricing-page .pp-section--first { margin-top: 3rem; } }

/* Lead paragraphs: first reads as normal text, the rest as supporting detail.
   The heading and its intro share one left edge — override the public-page-content
   centring (.public-page-content > * { margin-inline: auto }) so the heading does
   not float away from its text. */
.pricing-page .pp-lead > * { margin-inline: 0; }
.pricing-page .pp-lead p { margin: 0 0 1rem; color: var(--pp-muted); }
.pricing-page .pp-lead p:first-of-type { color: var(--pp-fg); }
.pricing-page h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; margin: 0 0 1rem; }
@media (min-width: 768px) { .pricing-page h2 { font-size: 1.875rem; } }
.pricing-page .pp-sub { color: var(--pp-muted); max-width: 42.5rem; line-height: 1.7; margin: 0 0 2rem; }

/* Focus: links in the lead have no shared class; buttons, summaries and the shared inline link use the shared outline. */
.pricing-page .pp-lead a:focus-visible { outline: 2px solid hsl(var(--foreground)); outline-offset: 2px; border-radius: 0.25rem; }

/* Monthly / annual choice: the shared radio group, no script. The chosen radio decides which prices show. */
.pricing-page .pp-toggle { margin-bottom: 2rem; }
.pricing-page [data-interval] { display: none; }
.pricing-page:has(#pp-interval-1:checked) .pp-plans [data-interval="year"],
.pricing-page:has(#pp-interval-2:checked) .pp-plans [data-interval="month"],
.pricing-page [data-interval="both"] { display: block; }
.pricing-page:has(#pp-interval-1:checked) .pp-plans a[data-interval="year"],
.pricing-page:has(#pp-interval-2:checked) .pp-plans a[data-interval="month"] { display: inline-flex; }
.pricing-page:has(#pp-interval-1:checked) .pp-plans span[data-interval="year"],
.pricing-page:has(#pp-interval-2:checked) .pp-plans span[data-interval="month"] { display: inline; }

/* Plan cards: four across, stack on narrow screens */
.pricing-page .pp-plans { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .pricing-page .pp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pricing-page .pp-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pricing-page .pp-plans > .public-card, .pricing-page .pp-services > .public-card { display: flex; flex-direction: column; }
.pricing-page .public-card-title { margin: 0; }
.pricing-page .pp-for { margin: 0.5rem 0 1.25rem; min-height: 3.5rem; color: var(--pp-muted); font-size: 0.9375rem; line-height: 1.5; }
.pricing-page .pp-price { font-size: 3rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 0; }
.pricing-page .pp-price small { display: inline-block; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: var(--pp-muted); margin-left: 0.25rem; }
.pricing-page .pp-from { font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: var(--pp-muted); }
/* Four across (1024 and up): the content box is 168px wide, so the numeral is 40px and the "From" and "/year" parts
   sit on their own lines. Each card joins the grid's seven rows (title, audience, price, note, button, spacer, list),
   so the title, price, note and button rows are as tall as the tallest card's and the four buttons share one line. */
@media (min-width: 1024px) {
  .pricing-page .pp-plans { row-gap: 0; }
  .pricing-page .pp-plans > .public-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .pricing-page .pp-plans .pp-price { font-size: 2.5rem; }
  .pricing-page .pp-plans .pp-list { align-content: start; }
  .pricing-page .pp-plans .pp-price small, .pricing-page .pp-plans .pp-from { display: block; margin: 0.125rem 0 0; line-height: 1.4; }
}
.pricing-page .pp-note { margin: 0.5rem 0 1.25rem; min-height: 2.75rem; color: var(--pp-muted); font-size: 0.875rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pricing-page .pp-list { list-style: none; margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--pp-border); display: grid; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.5; }
.pricing-page .pp-list li { position: relative; padding-left: 1.5rem; }
.pricing-page .pp-list li::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 0.375rem; height: 0.75rem; border: solid hsl(var(--success-emphasis)); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pricing-page .pp-list .pp-lead-in { font-weight: 600; padding-left: 0; }
.pricing-page .pp-list .pp-lead-in::before { display: none; }
/* Plan-card buttons wrap (their label can take two lines in a narrow column), so the four across share one height. */
@media (min-width: 1024px) {
/* reuse-ok: equal plan-button height in a row of four; the plan cards are the only place a button label wraps to two lines */
  .pricing-page .pp-plans > .public-card > a { min-height: 3.875rem; }
}
.pricing-page .pp-alt { margin-top: 0.75rem; text-align: center; font-size: 0.875rem; min-height: 1.25rem; }

/* Comparison table: the shared .public-table--fit, with a header that stays in view and centred value cells.
   The wrapper (.pp-frame) clips its corners with overflow: clip, which rounds the header cells to the wrapper's
   radius but creates no scroll container, so the header still pins to the page, not to the wrapper. Cells carry
   the row rules and the table uses separate borders, because a collapsed border does not travel with a sticky
   header. */
.pricing-page .pp-frame { overflow: clip; }
/* reuse-ok: the shared table's scroll wrapper must not become the scroll container, or the header would pin to it instead of the page */
.pricing-page .pp-frame > div { overflow: visible; }
.pricing-page .public-table { border-collapse: separate; border-spacing: 0; }
/* reuse-ok: cell row rules, because separate borders under a sticky header need the rule on the cell */
.pricing-page .public-table th, .pricing-page .public-table td { text-align: center; border-bottom: 1px solid hsl(var(--border)); }
/* reuse-ok: opaque sticky header fill, so rows scrolling under it do not show through */
.pricing-page .public-table thead th {
  position: sticky; top: 0; z-index: 2; border-bottom-width: 2px;
  background: linear-gradient(hsl(var(--muted) / 0.5), hsl(var(--muted) / 0.5)), hsl(var(--background));
}
.pricing-page .public-table th[scope="row"], .pricing-page .public-table thead th:first-child { text-align: left; width: 32%; }
/* reuse-ok: group-row label, a smaller muted caption inside the shared table */
.pricing-page .public-table tbody th.pp-group { background: hsl(var(--muted)); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pp-muted); }
/* reuse-ok: no rule under the last row, so the table does not double the wrapper border */
.pricing-page .public-table tr:last-child td, .pricing-page .public-table tr:last-child th { border-bottom: 0; }
.pricing-page .pp-yes::before { content: ""; display: inline-block; width: 0.4rem; height: 0.8rem; border: solid hsl(var(--success-emphasis)); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.pricing-page .pp-no { color: var(--pp-muted); }

/* Bands */
.pricing-page .pp-band { background: hsl(var(--muted)); border-block: 1px solid var(--pp-border); }
.pricing-page .pp-band .pp-wrap { padding-block: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.pricing-page .pp-band h2 { margin-bottom: 0.5rem; }
.pricing-page .pp-band p { margin: 0; max-width: 42.5rem; line-height: 1.7; color: var(--pp-muted); }
.pricing-page .pp-services { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pricing-page .pp-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pricing-page .pp-services .public-card-body { margin-bottom: 1rem; }
.pricing-page .pp-services .pp-price { margin-bottom: 1rem; }
.pricing-page .pp-services > .public-card > a { align-self: flex-start; margin-top: auto; }
.pricing-page .pp-price--sm { font-size: 2rem; }
@media (max-width: 639px) {
/* reuse-ok: phone compaction so five columns fit at 390px */
  .pricing-page .public-table { font-size: 0.8125rem; }
/* reuse-ok: phone compaction so five columns fit at 390px */
  .pricing-page .public-table th, .pricing-page .public-table td { padding: 0.625rem 0.25rem; }
/* reuse-ok: phone compaction so five columns fit at 390px */
  .pricing-page .public-table thead th { font-size: 0.625rem; padding-inline: 0.125rem; }
/* reuse-ok: phone compaction so five columns fit at 390px */
  .pricing-page .public-table th[scope="row"], .pricing-page .public-table thead th:first-child { width: 30%; padding-left: 0.5rem; }
}