/* Certant Flat — pricing page local rules. Tokens only, prefix .pg-pricing-. */

/* All five tier CTAs are .btn pills (four ghost, one primary) so the row reads as one
   parallel line; flat.css only auto-pins .link, so mirror the pin for .btn here. */
.pg-pricing__tiers > .pg-pricing__tier > .btn { margin-top: auto; }

/* .btn--ghost is transparent with no border, so the four secondary CTAs have no visible
   boundary until hover — the row still reads as four teal text labels plus one filled pill,
   the exact appearance this row is meant to avoid. Give them the system hairline so all five
   are bounded pills at rest. outline (not border) keeps the box from growing and does not
   collide with the card's own hover/focus outline (different element) or the .btn focus ring. */
.pg-pricing__tiers .btn--ghost { outline: 1px solid var(--line); outline-offset: -1px; }

/* margin-top: auto on .btn does nothing once a single-column card is at its
   natural height (below 1100px, .split collapses to one column), and .btn has
   a fixed height so padding can't stand in for the gap the way it does on
   .link. Give the list itself a floor so the button never sits flush under it. */
.pg-pricing__tiers .ticks { margin-bottom: var(--sp-4); }

/* Tier blurbs run one or two lines depending on wording; give every card the
   same floor so the price row below lines up across all five. */
.pg-pricing__tiers > .pg-pricing__tier > p { min-height: calc(2 * var(--lh-relaxed) * 1em); }

/* Same floor the plan blurbs get, so the price line and tick lists align across the three deployment cards.
   5 lines: card 2's blurb wraps to five lines at 850px, the narrowest width before the row goes single-column. */
.pg-pricing__ent > .pg-pricing__tier > p { min-height: calc(3 * var(--lh-relaxed) * 1em); } /* three lines: the columns are bare now, so a taller floor reads as a hole */

/* card 3's heading ("BYO hardware or cloud") wraps to two lines in the 850–960px band while its siblings
   stay on one, which alone pushes its price line and tick list out of alignment with cards 1 and 2.
   h3 renders at --lh-snug (1.3), not --lh-tight (1.1) — the floor has to match h3's own line-height
   or a real two-line heading (57px) still overshoots a one-line card's floor (48px). */
.pg-pricing__ent > .pg-pricing__tier > h3 { min-height: calc(2 * var(--lh-snug) * 1em); }

/* Same misalignment one level down: card 2's billing caption ("Hardware, plus a 12-month licence")
   wraps to two lines at 850px while its siblings' captions stay on one, pushing its tick list out of
   line even after the heading and blurb floors above hold. */
.pg-pricing__ent .caption { min-height: calc(2 * var(--lh-normal) * 1em); }

/* The crossed-out monthly figure the old page showed beside "billed annually". --fg-2, never --fg-3 on a tint. */
.pg-pricing__was { color: var(--fg-2); margin-right: var(--sp-2); }

/* A price that changes under the reader's eye should cross-fade, not cut; state is a class, not a snap. */
.pg-pricing__tiers .stat { transition: opacity var(--dur) var(--ease); }
.pg-pricing__tiers .stat.is-swapping { opacity: 0; }

/* Tiers are bare columns (2026-09-21: cards are for figures); the recommended plan is the one
   painted surface, a teal tint panel, so it reads as the highlight without an outline or a hue
   change on its siblings. The other columns take a little top padding so their tiles sit level
   with the panel's. */
.pg-pricing__tiers > .pg-pricing__tier:not(.pg-pricing__tier--pick) { padding-top: var(--sp-6); }
.pg-pricing__tier .tile { background: var(--bg-tint); }
.pg-pricing__tier--pick .tile { background: var(--tile-bg); }
.pg-pricing__tier--pick .btn--ghost { outline: 0; }

/* Five plan cards need a three-up and a two-up step; .split--5 goes 5 → 2 → 1 and lands a 696px-wide card
   at 760px. Declared as grid-template-columns (not --cols) because flat.css's 800px rule sets that property. */
@media (max-width: 1100px) { .split.pg-pricing__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .split.pg-pricing__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .split.pg-pricing__tiers { grid-template-columns: 1fr; } }

/* The old table banded its three group rows so the sections separated; .table__key alone is plain ink.
   Sentence case, no text-transform — the band does the work the uppercase used to. */
.pg-pricing__cmp .table__key { background: var(--bg-tint); color: var(--teal-text); }

/* The header row is the table's anchor; system th color (--fg-3) reads weaker than the tinted group
   band beneath it, so darken it to the ink the body key cells use — one row is the anchor, not both. */
.pg-pricing__cmp thead th { color: var(--fg-1); }

/* The feature column is the spine you scan down; the old table set it in semibold ink. Exclude the group bands, already styled. */
.pg-pricing__cmp tbody td:not(.table__key):first-child { font-weight: var(--fw-semibold); color: var(--fg-1); }

@media (prefers-reduced-motion: reduce) {
  /* End state stays readable: the price is still correct — only the movement between states goes.
     The disclosure's own chevron and reveal-animation reduced-motion rules live in flat.css. */
  .pg-pricing__tiers .stat { transition: none; }
}