/* ==========================================================================
   pricing.css — the plan-comparison page, shared by every record site.

   THIS FILE CARRIES STRUCTURE ONLY. Colour, type and radius come from whichever brand
   stylesheet loaded before it, through the bridge below. The factory shares mechanism, never
   look: CarrierHelm's pricing page must still read as an inspection sticker, PermitWatch's as
   a public document, ModelWatch's as an instrument.

   THE BRIDGE. The three brands named their tokens differently before this page existed, so each
   hook below tries the generic name first and then the names actually in use. A brand that wants
   a different pricing accent (or paper, or rule) sets the GENERIC name — `--accent`, `--paper`,
   `--rule`, `--display`, `--r` — in its own `:root`, and it wins the chain without touching this
   file. Nothing here should ever reference a brand-specific token at a use site.

   ---------------------------------------------------------------------------
   LAYOUT SHAPE, and why

   A plan band of one card per tier over a feature matrix that scrolls sideways with its label
   column pinned. The body must never scroll sideways, so every grid track is minmax()-bounded
   and every grid item can shrink.

   1. FOUR SLOTS, ONE SUBGRID. Every card is name / who-it-is-for / price / button, in that
      order, and the band is a grid of four rows that each card SUBGRIDS into. So slot three of
      the Free card and slot three of the Enterprise card begin on the same pixel row even
      though the copy above them is different lengths, and the buttons — which stretch to their
      shared track — are the same height even when one label wraps and another does not. Before
      this, the four CTAs started at four different heights (measured: 187 / 155 / 171 / 155 px
      from the top of their cards) and the Free card ended in a line of grey text where the
      others had buttons, which is what made it look like it had fallen off the band.

      The hairline above the price block is the tell-tale: it is drawn per card, so it forms one
      continuous rule across the band ONLY while the anatomy is exact. A card that drifts breaks
      the line visibly, with nothing to measure.

   2. PRICE AND BUTTON AT THE BOTTOM. Asked for, and the card is deliberately short — four slots,
      no feature list — so the price still lands within a couple of hundred pixels of the card's
      top edge and stays above the fold. The evidence for top-vs-bottom CTA placement inside a
      pricing card is thin either way; what is not thin is that a price a reader has to hunt for
      costs conversions, so the cost of bottom placement is paid down by keeping the card short
      rather than by arguing about it.

   3. COLUMN COUNT COMES FROM THE CONTAINER, NOT THE VIEWPORT. The three brands hand this page
      three different measures (roughly 730 / 800 / 1360 px), so a viewport media query would
      break the band at three different moments and give the same design three different
      crampings. `container-type: inline-size` on `.pg` makes the breakpoints read the space the
      page actually has, and all three sites arrive at four columns of the same proportion.
   ========================================================================== */

.pg {
  --pg-paper:   var(--paper,   var(--surface, #fff));
  --pg-ground:  var(--ground,  var(--bg, #f2f4f5));
  --pg-panel:   var(--panel,   var(--tint, var(--surface-2, #f4f6f7)));
  --pg-ink:     var(--ink,     #14181a);
  --pg-ink-2:   var(--ink-2,   #4a565e);
  --pg-ink-3:   var(--ink-3,   #6b7780);
  --pg-rule:    var(--rule,    var(--line, #ccd4d8));
  --pg-rule-2:  var(--rule-2,  var(--line-soft, #e2e7ea));
  --pg-accent:  var(--accent,  var(--brand, var(--blue, var(--down, #12503a))));
  --pg-r:       var(--r, 2px);
  --pg-ui:      var(--ui, system-ui, -apple-system, sans-serif);
  --pg-num:     var(--num, var(--mono, ui-monospace, Menlo, monospace));
  --pg-display: var(--display, var(--serif, var(--ui, system-ui)));
  /* A wash of the brand's own accent, so the discount badge picks up each site's colour without
     this file ever naming one. Browsers without color-mix fall through to the panel tint. */
  --pg-accent-wash: var(--pg-panel);

  font-family: var(--pg-ui);
  color: var(--pg-ink);
  padding: 18px 0 44px;
  /* Breakpoints below read this, not the window. See layout note 3. */
  container-type: inline-size;
  container-name: pg;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .pg { --pg-accent-wash: color-mix(in srgb, var(--pg-accent) 11%, transparent) }
}

/* Monthly / annual. Both figures are in the markup; the root attribute picks one, so the page
   is correct with JavaScript switched off and instant with it on. */
.pg[data-billing="month"] [data-when="year"],
.pg[data-billing="year"] [data-when="month"] { display: none }

.pg-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- introductory pricing ------------------------------------------------
   The claim is quoted verbatim from the manifest constant, and it is what licenses the struck
   price beside every plan: the strike is a FUTURE list price this subscription is locked out
   of, not a former price we once charged (16 CFR §233.1 is about the latter). The sentence that
   explains the strike lives here, once, rather than four times in the cards. */
.pg-intro {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0 0 22px; padding: 11px 15px;
  background: var(--pg-panel);
  border-left: 4px solid var(--pg-accent);
  border-radius: 0 var(--pg-r) var(--pg-r) 0;
  font-size: 14.5px; line-height: 1.45; color: var(--pg-ink-2);
}
.pg-intro__tag { color: var(--pg-accent); font-weight: 700 }
.pg-intro span { flex: 1 1 22ch; min-width: 0 }

/* ---- heading + billing toggle -------------------------------------------- */
.pg-top {
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: flex-end; justify-content: space-between; margin: 0 0 18px;
}
.pg-top__t { flex: 1 1 320px; min-width: 0 }
.pg h1 {
  font-family: var(--pg-display); font-weight: 700;
  font-size: clamp(26px, 4.2vw, 35px); line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 8px;
}
.pg-lede { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.5; color: var(--pg-ink-2) }

.pg-bill {
  display: inline-flex; flex: 0 0 auto;
  background: var(--pg-paper); border: 1px solid var(--pg-rule);
  border-radius: var(--pg-r); overflow: hidden;
}
.pg-bill__opt {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: 48px; padding: 7px 18px;
  font-size: 15px; font-weight: 600; line-height: 1.25;
  color: var(--pg-ink-2); text-decoration: none; border: 0;
}
.pg-bill__opt + .pg-bill__opt { border-left: 1px solid var(--pg-rule) }
.pg-bill__opt small { font-size: 12.5px; font-weight: 400; color: var(--pg-ink-3) }
.pg-bill__opt[aria-current] { background: var(--pg-accent); color: var(--pg-paper) }
.pg-bill__opt[aria-current] small { color: inherit; opacity: .85 }

/* ---- the plan band --------------------------------------------------------
   One hairline-ruled band, not four floating cards: the gap IS the rule, drawn by the grid's
   own background showing through a 1px gap. A card spans all four rows, so it paints over the
   row gaps inside itself and only the gap BETWEEN bands (when the band wraps to two rows of
   cards) stays visible as a rule. */
.pg-plans {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: minmax(0, 1fr);
  background: var(--pg-rule); border: 1px solid var(--pg-rule);
}
@container pg (min-width: 380px) {
  .pg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@container pg (min-width: 700px) {
  .pg-plans { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

.pg-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--pg-paper);
}
/* Slot padding lives on the slots, never on the card: a subgrid's own padding would push its
   tracks out of step with the parent's and undo the alignment this whole block exists for. */
.pg-card > * { min-width: 0; padding-inline: 15px; margin: 0 }
.pg-card--pick { box-shadow: inset 0 3px 0 var(--pg-accent) }

.pg-card__n {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
  padding-top: 15px;
  font-family: var(--pg-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2;
}
/* Our own recommendation, which is always a true thing to say — never "most popular", which
   would be a claim about other customers that we cannot show. */
.pg-card__flag {
  font-family: var(--pg-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; color: var(--pg-accent);
}
.pg-card__who {
  padding-top: 5px; padding-bottom: 15px;
  font-size: 13.5px; line-height: 1.4; color: var(--pg-ink-2);
}

/* The price block. Its top border is the continuous rule across the band. */
.pg-card__price {
  padding-top: 11px; padding-bottom: 12px;
  border-top: 1px solid var(--pg-rule-2);
  margin-top: auto;   /* flex fallback; the subgrid rule below turns this off */
}
.pg-card__anchor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
  min-height: 21px; margin-bottom: 3px;
  font-size: 13.5px; line-height: 1.4;
}
.pg-card__list {
  font-family: var(--pg-num); font-size: 14.5px; color: var(--pg-ink-3);
  text-decoration-thickness: 1.5px;
}
/* Flat, in the brand's own accent, sized like a label rather than a sticker. The saving is real
   — it is the gap to a list price we are committed to — so it does not need shouting. */
.pg-card__off {
  padding: 1px 6px; border-radius: var(--pg-r);
  background: var(--pg-accent-wash); color: var(--pg-accent);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.pg-card__note { color: var(--pg-ink-3) }

.pg-card__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px }
.pg-card__amt {
  font-family: var(--pg-num); font-size: 30px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05;
}
.pg-card__per { font-size: 13px; color: var(--pg-ink-3) }

.pg-card__act { display: grid; padding-bottom: 15px }
/* The card is the narrowest place a `.btn` ever appears — CarrierHelm's reading column caps
   this page at ~728px, so a four-up band gives each button about 130px of text. The brand's own
   button size would wrap "Choose Enterprise" onto two lines, so the label is set a step down
   here. If it wraps anyway the band still holds: the buttons share a subgrid track, so a
   two-line label makes all four buttons taller together rather than knocking one out of line. */
.pg-card__cta {
  width: 100%; text-align: center; align-content: center;
  padding-inline: 7px; font-size: 14.5px; text-wrap: balance;
}

@supports (grid-template-rows: subgrid) {
  .pg-plans { grid-template-rows: auto auto auto auto }
  .pg-card {
    display: grid; grid-row: span 4; grid-template-rows: subgrid;
  }
  .pg-card__price { margin-top: 0 }
}

/* ---- the matrix -----------------------------------------------------------
   The table scrolls inside its own container; the label column is pinned so a value is never
   orphaned from the feature it belongs to. */
.pg-matrix {
  overflow-x: auto; overflow-y: hidden;
  background: var(--pg-paper);
  border: 1px solid var(--pg-rule); border-top: 0;
  -webkit-overflow-scrolling: touch;
  /* `overflow-x: auto` alone does NOT contain this table, and the difference is a page that
     scrolls sideways on a phone. Measured at 390px: the matrix scrolled internally by 364px as
     intended AND the document scrolled sideways by 217px as well. max-width:100%, width:100%
     and overflow-x:clip on the parent all changed nothing; `contain: paint` takes the page to
     0 while leaving the internal scroll intact. A wide <table> in a scroller escapes its
     container in a way a wide <div> does not, so the usual minmax(0,1fr)/min-width:0 reflex
     is not the fix here. Verify with window.scrollX after scrollTo(9999,0), not by eye — the
     page looked correct in a screenshot while doing this. */
  contain: paint;
}
.pg-matrix:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: -2px }
.pg-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px }
.pg-t th, .pg-t td { padding: 10px 12px; text-align: left; vertical-align: top }

.pg-corner {
  position: sticky; left: 0; z-index: 2;
  background: var(--pg-panel); border-bottom: 1px solid var(--pg-rule);
}
.pg-h {
  background: var(--pg-panel); border-bottom: 1px solid var(--pg-rule);
  font-size: 13px; font-weight: 700; color: var(--pg-ink-2);
  text-align: center; white-space: nowrap;
}
.pg-h--pick { color: var(--pg-ink); box-shadow: inset 0 -2px 0 var(--pg-accent) }

.pg-band th {
  background: var(--pg-panel); padding: 7px 12px;
  border-top: 1px solid var(--pg-rule); border-bottom: 1px solid var(--pg-rule-2);
  font-family: var(--pg-display); font-size: 13.5px; font-weight: 700; color: var(--pg-ink);
}
/* Keeps the section name in view while the matrix is scrolled sideways. */
.pg-band__t { position: sticky; left: 12px; display: inline-block }

.pg-lab {
  position: sticky; left: 0; z-index: 1;
  min-width: 188px; max-width: 300px;
  background: var(--pg-paper); border-bottom: 1px solid var(--pg-rule-2);
  box-shadow: 1px 0 0 var(--pg-rule-2);
  font-size: 14.5px; font-weight: 600; color: var(--pg-ink);
}
.pg-lab small {
  display: block; margin-top: 2px;
  font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--pg-ink-3);
  white-space: normal;
}
.pg-c {
  min-width: 104px; border-bottom: 1px solid var(--pg-rule-2);
  font-family: var(--pg-num); font-size: 14px; color: var(--pg-ink);
  text-align: center; white-space: nowrap;
}
.pg-c--no { color: var(--pg-ink-3) }
/* A qualified yes: the tick keeps the column scannable, the word underneath keeps the fact. */
.pg-c--yes { line-height: 1 }
.pg-tick {
  display: inline-block; width: 13px; height: 7px; margin: 4px 0 3px;
  border-left: 2.5px solid var(--pg-accent); border-bottom: 2.5px solid var(--pg-accent);
  transform: rotate(-45deg);
}
.pg-c__cap {
  display: block; margin-top: 4px;
  font-family: var(--pg-ui); font-size: 12px; font-weight: 600; color: var(--pg-ink-3);
}
.pg-hint { display: none; margin: 8px 0 0; font-size: 12.5px; color: var(--pg-ink-3) }
@container pg (max-width: 760px) {
  .pg-hint { display: block }
}
/* The page's script measures the table and sets `hidden` when it does not actually overflow.
   That has to out-rank the container query above, which is a guess about width, not a fact
   about this table — the UA's own [hidden] rule loses to any class selector. */
.pg-hint[hidden] { display: none !important }

/* ---- the weekly export ----------------------------------------------------
   A third way to pay us, so it gets the plan cards' anatomy rather than a price hidden inside a
   button label: name, price, what you give up, button. */
.pg-x {
  margin: 30px 0 0; padding: 20px 20px 22px;
  background: var(--pg-paper);
  border: 1px solid var(--pg-rule); border-top: 3px solid var(--pg-accent);
}
.pg-x h2 {
  font-family: var(--pg-display); font-size: 21px; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 8px;
}
.pg-x__lede { margin: 0 0 14px; max-width: 62ch; font-size: 15.5px; line-height: 1.5; color: var(--pg-ink-2) }
.pg-x__list {
  display: grid; gap: 7px 22px; margin: 0 0 15px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  font-size: 14.5px; line-height: 1.45; color: var(--pg-ink-2);
}
.pg-x__list li { position: relative; min-width: 0; padding-left: 18px }
.pg-x__list li::before {
  content: ""; position: absolute; left: 1px; top: .55em;
  width: 7px; height: 7px; background: var(--pg-accent);
}
.pg-x__fresh { margin: 0 0 16px; font-size: 14px; color: var(--pg-ink-3) }

.pg-x__buy {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: minmax(0, 1fr);
  background: var(--pg-rule); border: 1px solid var(--pg-rule);
}
@container pg (min-width: 560px) {
  .pg-x__buy { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.pg-x__opt {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 14px 15px 15px; background: var(--pg-paper);
}
.pg-x__opt-n {
  margin: 0; font-family: var(--pg-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em;
}
.pg-x__opt-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0 }
.pg-x__amt {
  font-family: var(--pg-num); font-size: 26px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1;
}
.pg-x__per { font-size: 13px; color: var(--pg-ink-3) }
.pg-x__opt-w {
  margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--pg-ink-2);
}
.pg-x__cta { margin-top: auto; width: 100%; text-align: center }

/* ---- fine print ------------------------------------------------------------ */
.pg-fine { margin: 26px 0 0; max-width: 66ch }
.pg-fine h2 { font-family: var(--pg-display); font-size: 16px; font-weight: 700; margin: 20px 0 5px }
.pg-fine h2:first-child { margin-top: 0 }
.pg-fine p { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--pg-ink-2) }
.pg-fine__note { margin-top: 16px }

/* ---- phones ----------------------------------------------------------------- */
@media (max-width: 600px) {
  .pg { padding-top: 12px }
  .pg-top { align-items: stretch }
  .pg-bill { width: 100% }
  .pg-bill__opt { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; padding: 7px 10px }
  .pg-card > * { padding-inline: 13px }
  .pg-card__amt { font-size: 27px }
  .pg-t th, .pg-t td { padding: 9px 10px }
  .pg-lab { min-width: 156px; max-width: 200px; font-size: 14px }
  .pg-c { min-width: 92px; font-size: 13.5px }
  .pg-x { padding: 16px 15px 18px }
}

/* ---------------------------------------------------------------------------
   The pricing page is not an article, so it must not be held to the brand's
   reading measure.

   Each brand sizes `main.wrap` for prose — carrierwatch 760px, permitwatch 840px — which
   squeezed four plan cards into 181px each at ANY viewport, including 1920. modelwatch pulls
   the other way at 1400px. One comparison table rendered at three different measures is the
   opposite of the predictable, consistent layout this page is supposed to have, so it gets its
   own measure: wide enough for four cards and a matrix, narrow enough that the eye can still
   travel across a row.

   `:has()` rather than a class, because the class would have to be added in three brand
   layout files and the pricing page is the only thing that needs it — the rule belongs with
   the component it serves. Brands that want a different width set --pg-page-max.
   --------------------------------------------------------------------------- */
main.wrap:has(> .pg),
main.wrap:has(> .pg-page) {
  max-width: var(--pg-page-max, 1180px);
}