/* pricing - page-scoped rules, lifted verbatim from the page's
   former inline <style> block. Loaded from page_styles, i.e. the same
   cascade position the inline block held, so no winner can flip. */
/* page-local: composition only — no new colors, no new type */
  .price-hero { padding-block: clamp(40px, 7vw, 84px); }
/* the pricing controls rail — the page owns its own price state, above the ladder */
  .ctl-rail { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-xl); }
.ctl { display: flex; flex-direction: column; gap: var(--space-2); }
.ctl .k { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
/* `cursor: default` IS NOT CARRIED OVER, AND THE PREVIEW IS THE REASON, NOT AN EXCEPTION
   TO IT. The preview's page sheet states `cursor: default` because ITS card is a plain
   `<article>` (bundle/templates/pricing/index.html:88) - a card that does not go anywhere.
   This page's card DOES: it is `a.plan[href]` (pricing/index.html:79), and navigating is
   behaviour, which the preview carries none of and cannot speak to. The preview's own
   answer for an interactive plan card is one line up its own cascade -
   `.plan { cursor: pointer }` in bundle/css/shared/common.css:678 - so dropping the
   page-scoped override lands on the preview's value for what this element actually is,
   rather than on the value it states for an element this page does not have. MEASURED at
   360/480/620/900/1440: `cursor` was `default` on a card whose whole body is the link, so
   the one affordance a pointer device gets for it was absent. `display: flex` and
   `flex-direction: column` stay - `.plan .foot { margin-top: auto }` below depends on them. */
  .plan-grid .plan { display: flex; flex-direction: column; }
/* THE CARD IS A LINK HERE, AND THAT IS WHAT TOOK ITS TEXT COLOUR AWAY.
   The preview draws this card as a plain article (bundle/templates/pricing/index.html:88).
   This page makes the WHOLE card the affordance (`a.plan`, pricing/index.html:79), so the
   global `a` owner in css/shared/common.css paints it `--accent-400`, and every descendant
   that states no colour of its own INHERITS that.
   MEASURED at 360/480/620/900/1440: the card resolved oklch(0.72 0.11 285) here against
   oklch(0.93 0.006 280) in the preview, and it reached the spec list - the `dt`/`dd` rows
   of a PRICE table rendering in brand lavender instead of ink. `.name`, `.tagline`,
   `.price*` and `.feats li` each state their own colour and were unaffected, which is why
   the drift showed on the one block that does not.
   `inherit`, not a named token: an article inherits the page ink, so this restores exactly
   what the preview's element takes and introduces no second owner of a colour. It is
   (0,2,0) and so also holds through `a:hover` (0,1,1) - the preview has no hover state to
   reproduce, and the card's hover affordance is its border, which is untouched. */
.plan-grid .plan { color: inherit; }
.plan .tagline { font-size: var(--t-sm); color: var(--ink-500); margin-top: var(--space-2); min-height: 2.8em; }
.plan .price-block { margin: var(--space-6) 0 var(--space-6); }
.plan .price-annual { font-size: var(--t-xs); color: var(--ink-500); font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.plan .price-vat { font-size: var(--t-xs); color: var(--ink-600); margin-top: var(--space-1); }
.plan .dl { gap: var(--space-2) var(--space-5); }
.plan .dl dd { text-align: right; font-variant-numeric: tabular-nums; }
/* `margin-top: var(--space-6)`, not `margin: 0` - the bundle states it inline on all four
   plan cards (`bundle/templates/pricing/index.html:106,145,171,197`). With the list at a
   flat `margin: 0` the feature rows sat FLUSH against the spec `<dl>` above them, so the
   card's two blocks read as one run. Left/right/bottom stay 0, which is what the base
   rule was really carrying. */
.plan .feats { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan .feats li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t-sm); color: var(--ink-400); }
.plan .feats .i { width: 14px; height: 14px; color: var(--accent-400); flex: 0 0 auto; }
.plan .foot { margin-top: auto; padding-top: var(--space-7); }
@media (max-width: 620px) { .ctl-rail { gap: var(--space-6); } }

/* ---- THE RULE BETWEEN THE RAIL AND THE LADDER SITS OFF-CENTRE ------------
   The bundle states both of this divider's gaps INLINE and states them EQUAL:
   `margin-bottom: var(--space-7)` on the rail (bundle/templates/pricing/index.html:212)
   and `margin-block: 0 var(--space-7)` on the rule itself (:231). Under CSP neither can
   be emitted, so the rule fell back to `.hr`'s own `margin-block: var(--space-6)` above it
   and to `.stack-lg > * + *` below it.
   MEASURED: 16.8px above the rule and 33.6px below it here, against 19.6/19.6 in the
   preview - a divider twice as far from the thing beneath it as from the thing above it,
   so it reads as attached to the rail rather than as separating the two blocks.
   THREE DECLARATIONS, NOT TWO, and the third is why: adjacent margins COLLAPSE TO THE
   LARGER, so restating the rule's own bottom margin alone would still lose to the grid's
   inherited 33.6px. The grid's rung has to be stated too for the pair to land where the
   bundle puts them. Each is (0,2,0), the same weight as `.stack-lg > * + *`, and this sheet
   loads after the shared one - so they win on order, with no `!important` and no reach
   outside this page. */
.ctl-rail { margin-bottom: var(--space-7); }
.ctl-rail + .hr { margin-block: 0 var(--space-7); }
.hr + .plan-grid { margin-top: var(--space-7); }

/* ---- TWO MORE DECLARATIONS THE BUNDLE CARRIES INLINE ---------------------
   THE HERO HEADLINE'S MEASURE (`bundle/templates/pricing/index.html:14`,
   `style="max-width:20ch"`). `h1, .h1` declares no measure at all, and `.lead` beneath it
   is capped at `--measure` - so the headline ran the full shell width while the sentence
   under it stopped two thirds across, and the two blocks lost their shared left-hand
   rhythm. Keyed on `.price-hero`, this page's own hero class, which wraps exactly one
   `.h1`; no new class is needed to say it. */
.price-hero .h1 { max-width: 20ch; }

/* THE FEATURE-TILE BODY RUNG for the four "Included with every plan" tiles
   (`bundle/templates/pricing/index.html:223,228,233,238`). Same rung and same cause as
   `.card--hover p.muted.small` in css/public/shell.css - `h3, .h3` and `p` are both
   `margin: 0`, so the body copy rendered flush against its own heading. It lives HERE
   rather than in the shell sheet because these four tiles are plain `.card` (the bundle
   composes no `card--hover` on them), and a bare `.card` rule in the shell sheet would
   also reach the auth and error pages, which the bundle does not touch. On this page
   `.card` is emitted by these four tiles and nothing else. */
.card p.muted.small { margin-top: var(--space-3); }