/* elara_pricing.css: the rules only /AI/pricing uses. Loaded by that page and by no other.
   ---------------------------------------------------------------------------------------------------
   WHY THIS FILE EXISTS (founder, 2026-09-07): "I want the pages to all be separate so I can make changes
   and updates without affecting everything." Layout primitives -- .pg-band, .pg-paper, .pg-field, the prose and
   table system, the tiles and cards -- stay in elara_pages.css; what lives here is what is about PRICING: plan
   cards, the purchase note, the comparison-table modifiers, the closing payment line.

   WHAT IS NOT SPLIT. The tokens. One source for every token, the :root of elara_chat_app.css; a per-page palette
   would be exactly the second source it forbids. Isolation here is at the RULE layer.

   Zero literals, same ratchet as every other sheet: tools/design_scan.py, and it is in the SHEETS list of
   tools/tier1_pages_measure.py so it cannot quietly escape the gate. Isolation is proven by tools/page_isolation_proof.py. */

/* Pricing has a shorter introduction so a visitor reaches the prices in the first viewport
   (tests/test_launch_product_pages.py: the first price ends within the first screen at every width). */
.pg-field{min-height:0;padding:var(--sp4) 0}
.pg-plan-section{padding-top:var(--sp4)}

/* The card grid. The symmetry is structural, not eyeballed (docs/DESIGN_MATH.md section 5): the grid declares
   FOUR rows once and every card is a subgrid spanning them, so the plan name, the price block, the include
   list and the button share a baseline across all four cards whatever their content length. */
.pg-plans{display:grid;grid-template-rows:repeat(4,auto);gap:var(--sp2);margin:var(--sp3) 0 0;padding:0;list-style:none;
  /* Four columns when the row can hold four cards of five tap targets and a step (228 px: a 180 px tile, the
     longest label "Subscribe to Personal" at 148 px plus its padding); otherwise two. The switch is computed from
     declared tokens, not typed as a third breakpoint: the scale declares two (640, 896). The middle term is negative
     at or above the threshold (the clamp takes the four-up floor) and very large below it (the two-up ceiling); each
     bound sits one hairline under its exact share so a sub-pixel container keeps its column count.
     Measured by tests/test_pricing_geometry_browser.py (exit 0, 1 October 2026) at seven widths. */
  grid-template-columns:repeat(auto-fit,minmax(clamp((100% - 3 * var(--sp2)) / 4 - var(--bw-hair),
    ((var(--sp-tap) * 5 + var(--sp1)) * 4 + 3 * var(--sp2) - 100%) * 999,
    (100% - var(--sp2)) / 2 - var(--bw-hair)),1fr))}
/* gap: the approved picture (docs/design/approved/pages/ai-pricing, .cards{gap:var(--sp2)}) sets the cards one
   sp2 apart; at sp3 the four-up card measured 222 px and its tile could not hold "Subscribe to Personal" on one
   line (1 October 2026, tests/test_pricing_geometry_browser.py). */
/* Four equal cards on the ground band, the surface with the cyan tile glow and no border (DESIGN.md section 5;
   approved 29 September 2026). The recommended plan is told by its gold tile and its gold figure, not by a rule. */
.pg-plan{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:var(--sp2);margin:0;
  padding:var(--sp3);background:var(--panel);border:0;box-shadow:var(--glow-tile)}
.pg-plan h3{margin:0;font-size:var(--fs-step-1);line-height:var(--lbh-step-1);font-weight:var(--w-semi);color:var(--ink)}
.pg-plan .who{display:block;margin-top:var(--sp-half);font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut)}
.pg-plan .amt{display:block;margin:0;font-size:var(--fs-step-4);line-height:var(--lbh-step-4);font-weight:var(--w-bold);
  letter-spacing:var(--tr-snug);color:var(--ink);font-variant-numeric:tabular-nums}
/* the recommended plan is told by its gold tile; its price stays in ink like the others, as drawn */
.pg-plan .per,.pg-plan .zar{display:block;font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut);
  font-variant-numeric:tabular-nums}
.pg-plan ul{margin:0;padding:0;list-style:none;font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--mut)}
.pg-plan li{margin:0;padding:var(--sp1) 0;border-top:var(--bw-hair) solid var(--line)}
.pg-plan li:first-child{border-top:0;padding-top:0}
/* the tiles: a secondary tile takes the band's ground so it stands on the card; the Personal tile is the one gold primary */
.pg-plan .cta{display:flex;align-items:center;justify-content:center;min-height:var(--sp-tap);padding:0 var(--sp1);white-space:nowrap;
  color:var(--ink);background:var(--navy);border:0;box-shadow:var(--glow-tile);text-decoration:none;
  font-size:var(--fs-step--1);line-height:var(--lb-step--1);font-weight:var(--w-semi);
  transition:filter var(--dur-fast) var(--ease-std)}
.pg-plan .cta:hover{color:var(--ink);filter:brightness(1.06)}
.pg-plan.rec .cta{color:var(--gold-ink);background:var(--gold-organic);box-shadow:var(--glow-tile-gold)}
.pg-plan.rec .cta:hover{color:var(--gold-ink);background:var(--gold-organic)}
/* the purchase-point note: the one place the page states who takes the card, directly under the buttons */
.pg-buy{max-width:var(--measure-wide);margin:var(--sp3) 0 0;padding:var(--sp2) 0 0;
  border-top:var(--bw-hair) solid var(--line);font-size:var(--fs-step--1);line-height:var(--lb-step--1);color:var(--mut)}
/* comparison table row groups: one rule above each band, the band label in ink so the eye can find it */
/* the band label is a row label, not a column header: sentence case, on the first column's edge, as drawn */
.pg-table tr.grp th{padding:var(--sp3) var(--sp2) var(--sp1half) 0;text-transform:none;letter-spacing:var(--tr-none);
  color:var(--ink);border-bottom:var(--bw-hair) solid var(--line2);
  border-top:var(--bw-rule) solid var(--line2)}
.pg-table tbody tr:first-child.grp th{border-top:0;padding-top:var(--sp1half)}
/* The comparison: every column, header and cell, words and figures, starts on one left edge, as the approved
   picture draws it. Centred words beside right-aligned figures gave each column four to seven text edges
   (measured 1 October 2026); the figures keep tabular digits so "$10" and "$18" still line up digit for digit. */
.pg-table.cmp th,.pg-table.cmp td{text-align:left}
.pg-table.cmp{font-variant-numeric:tabular-nums}
/* A five-column comparison squeezed into a phone becomes four wrapped words per cell. .pg-scroll already
   provides the overflow container; the table just has to stop agreeing to shrink. */
.pg-table.cmp{min-width:var(--measure)}
/* the closing payment note, quieter than the calling card the footer carries */
.pg-pay{max-width:var(--measure-wide);margin:var(--sp6) 0 0;padding:var(--sp2) 0 0;
  border-top:var(--bw-hair) solid var(--line);font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut)}
@media(max-width:896px){
  .pg-plans{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,auto)}
}
@media(max-width:640px){
  .pg-plans{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:var(--sp2);margin-top:var(--sp4)}
  .pg-plan{grid-row:auto;grid-template-rows:auto}
}
@media(prefers-reduced-motion:reduce){.pg-plan .cta{transition:none}}