/* ============================================================
   08 — Pricing
   ============================================================ */

.pricing__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Billing period switch ---------- */
.pricing__switch {
  display: flex;
  justify-content: center;
  margin-top: var(--s-10);
}

.pricing__toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  max-width: 100%;
}

.pricing__thumb {
  position: absolute;
  inset-block: var(--s-1);
  inset-inline-start: var(--s-1);
  width: calc(50% - var(--s-1));
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-sm), var(--sh-inset-hair);
  transform: translateX(0);
  transition: transform var(--dur) var(--ease-expo);
}
.pricing__toggle[data-active="yearly"] .pricing__thumb { transform: translateX(100%); }

.pricing__period {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: calc(var(--s-10) + var(--s-1)); /* 44px minimum touch target */
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}
.pricing__period:hover { color: var(--text); }
.pricing__period[aria-checked="true"] { color: var(--text); }

.pricing__save {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--mint-100);
  color: color-mix(in srgb, var(--mint-500) 55%, var(--ink-900));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}
.pricing__save-tight { display: none; }

/* Narrow phones: shrink the segment, never stack it — the two labels have to
   stay on one baseline or the sliding thumb makes the offset obvious. Both
   tracks are nowrap, so their min-content is their floor: below this width the
   chip swaps to its short form instead of pushing the toggle past 100% (where
   body's overflow-x: hidden would silently clip it with no way to scroll). */
@media (max-width: 26.25rem) {
  .pricing__toggle { width: 100%; }
  .pricing__period { gap: var(--s-1); padding-inline: var(--s-2); }
  .pricing__save { padding-inline: var(--s-1); }
  .pricing__save-full { display: none; }
  .pricing__save-tight { display: inline; }
}

/* ---------- Card grid ---------- */
.pricing__grid {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-12);
  /* Stacked: cards fill the container edge to edge up to the two-column
     breakpoint. Half the page max is a layout cap, not a reading measure —
     it must not depend on a font metric the way --maxw-prose does. */
  max-inline-size: calc(var(--maxw) / 2);
  margin-inline: auto;
}

/* Radius and elevation come from .card unchanged (--r-lg, hairline, --sh-sm):
   a plan card is the same kind of object at the same scale as a feature tile,
   so it stays on the small-card tier. Only the featured card steps up, and it
   does that with the brand ring, not with a second radius. */
.pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-6);
}

/* ---------- Tablet: two columns, Studio spanning ---------- */
@media (min-width: 40rem) {
  .pricing__grid {
    max-inline-size: none;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }

  /* Reserved rows: header (tall enough for the chip), a two-line audience and
     a two-line list label. These three are the only variable-height rows above
     the feature lists, so reserving them locks the price / CTA / feature
     baselines across a row on every engine — subgrid or not. */
  .pricing__cardhead { min-block-size: calc(var(--fs-xs) * var(--lh-relaxed) + var(--s-2)); }
  .pricing__audience { min-block-size: calc(var(--lh-normal) * 2em); }
  /* border-box, so the label's own lead-in padding is part of the reservation. */
  .pricing__listlabel { min-block-size: calc(var(--s-8) + var(--fs-xs) * var(--lh-snug) * 2); }
}

/* Studio is first in the DOM (it leads the read on mobile and takes row 1
   here), so auto-placement alone gives Studio · Solo | Agency — visual order,
   tab order and reading order all agree. */
@media (min-width: 40rem) and (max-width: 62.4375rem) {
  .pricing__card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--s-10);
  }
  /* Row 1 carries the tier name in column 1 and the list label in column 2.
     They read as a matched pair of column headers, so they are aligned on
     their shared baseline rather than on their box tops — the two have very
     different type sizes and half-leading. */
  .pricing__card--featured .pricing__cardhead  { grid-area: 1 / 1; align-self: baseline; }
  .pricing__card--featured .pricing__audience  { grid-area: 2 / 1; }
  .pricing__card--featured .pricing__price     { grid-area: 3 / 1; }
  .pricing__card--featured .pricing__cta       { grid-area: 4 / 1; align-self: start; }
  .pricing__card--featured .pricing__listlabel {
    grid-area: 1 / 2;
    padding-top: 0;
    align-self: baseline;
    min-block-size: calc(var(--fs-xs) * var(--lh-snug) * 2);
  }
  .pricing__card--featured .pricing__features  { grid-area: 2 / 2 / -1 / 3; }
}

/* ---------- Desktop: row-locked three-up ---------- */
@media (min-width: 62.5rem) {
  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
    /* head · audience · price · cta · list label · features */
    grid-template-rows: auto auto auto auto auto 1fr;
    /* Column gutter only: a subgrid card inherits row gutters too, which would
       add --s-6 to every internal gap and break the card's own rhythm. */
    gap: 0 var(--s-6);
  }
  .pricing__card {
    grid-row: 1 / -1;
    padding-inline: var(--s-8);
  }
  /* DOM order is Studio · Solo · Agency; here the ladder reads left to right.
     Agency keeps auto placement and lands in the one free column.
     Studio also sits proud of its neighbours: the negative block margin is
     cancelled exactly by the matching block padding, so every internal row —
     name, price, CTA, features — stays locked to the cards either side. */
  .pricing__grid > .pricing__card:nth-child(2) { grid-column: 1; }
  .pricing__card--featured {
    grid-column: 2;
    --pricing-lift: var(--s-4);
    margin-block: calc(var(--pricing-lift) * -1);
    padding-block: calc(var(--s-8) + var(--pricing-lift));
  }
  @supports (grid-template-rows: subgrid) {
    .pricing__card { display: grid; grid-template-rows: subgrid; }
  }
}

.pricing__cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.pricing__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.pricing__flag {
  background: var(--ink-900);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  padding-inline: var(--s-3);
}

.pricing__audience {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ---------- Price block ---------- */
.pricing__price { padding-top: var(--s-6); }

.pricing__figure {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: var(--lh-tight);
}

/* The $ / numerals / unit seams are tuned separately: at 40px+ numerals one
   shared gap cannot serve both joints. */
.pricing__currency {
  font-family: var(--font-display);
  font-size: calc(var(--fs-h2) * 0.44);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  align-self: flex-start;
  padding-top: 0.28em;
  padding-inline-end: 0.06em;
}

.pricing__amount {
  font-family: var(--font-display);
  font-size: calc(var(--fs-h2) * 0.84);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  /* cancels the display tracking trailing the final digit */
  margin-inline-end: 0.035em;
}

.pricing__per {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  padding-inline-start: var(--s-1);
}

/* Yearly only: the monthly figure, struck. The toggle promises 20% — this is
   where the reader can see it without doing the arithmetic. */
.pricing__was {
  padding-inline-start: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  /* --text-subtle fails 4.5:1 on both the white card and the featured card's
     tinted top; the strike and the smaller size already carry the recession. */
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: from-font;
}

.pricing__billed {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  /* No tabular figures here: this face puts the comma on a figure-width
     advance, which opens "$1,236" into "$1 , 236". Nothing in this caption
     needs to align column-wise. */
  min-block-size: calc(var(--lh-normal) * 1em);
}

/* ---------- CTA ---------- */
.pricing__cta { padding-top: var(--s-6); }
.pricing__btn { width: 100%; }

/* .btn--primary / .btn--secondary set box-shadow at (0,1,0) *after* the global
   :focus-visible rule, so they win and the focus ring vanishes. Re-assert it at
   (0,2,0). The halo is composed from the card's own surface — --focus-ring's
   inner halo is --bg (warm off-white) and would read as a dirty fringe here. */
.pricing__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), var(--sh-accent);
}
.pricing__card--featured .pricing__btn:focus-visible {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-soft) 92%, var(--surface)),
    0 0 0 4px var(--accent), var(--sh-accent);
}

/* ---------- Feature list ---------- */
.pricing__listlabel {
  padding-top: var(--s-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  /* Half the eyebrow tracking: enough to read as a label, ~20px narrower than
     the full setting, which is what keeps it on one line in a 235px card. */
  letter-spacing: calc(var(--tracking-eyebrow) / 2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}

.pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.pricing__feature {
  display: grid;
  grid-template-columns: var(--s-5) 1fr;
  gap: var(--s-3);
  align-items: start;
}

/* Same fill/stroke pair as 05-features' .features__tick — mint disc, mint-500
   stroke. Success is mint everywhere; violet stays with interactivity. */
.pricing__tick {
  width: var(--s-5);
  height: var(--s-5);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--mint-100);
  color: var(--mint-500);
  margin-block-start: calc((var(--lh-normal) * 1em - var(--s-5)) / 2);
}

/* ---------- Featured (Studio) ---------- */
.pricing__card--featured {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-soft) 92%, var(--surface)) 0%,
      var(--surface) 46%);
  box-shadow: inset 0 0 0 calc(var(--s-1) / 2) var(--accent), var(--sh-lg);
}

/* Where masking is available the ring is painted with the brand gradient
   itself — one element, no ribbon sitting proud of a solid ring, no hue seam. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .pricing__card--featured { box-shadow: var(--sh-lg); }
  .pricing__card--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: calc(var(--s-1) / 2);
    background: var(--grad-brand);
    -webkit-mask: linear-gradient(var(--ink-900) 0 0) content-box, linear-gradient(var(--ink-900) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--ink-900) 0 0) content-box, linear-gradient(var(--ink-900) 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* ---------- Reassurance strip ---------- */
.pricing__reassure {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-12);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  max-inline-size: calc(var(--maxw) / 2);
  margin-inline: auto;
}

.pricing__reassure-item {
  display: grid;
  grid-template-columns: var(--s-6) 1fr;
  gap: var(--s-4);
  align-items: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.pricing__reassure-item b { color: var(--text); font-weight: var(--fw-semibold); }

.pricing__reassure-icon {
  width: var(--s-6);
  height: var(--s-6);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Three-up on the same breakpoint that releases the width cap and turns the
   card grid two-column — a full-width row holding four words is the tell. */
@media (min-width: 40rem) {
  .pricing__reassure {
    max-inline-size: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .pricing__reassure-item:not(:last-child) { padding-inline-end: var(--s-5); }
  .pricing__reassure-item + .pricing__reassure-item {
    padding-inline-start: var(--s-5);
    border-inline-start: 1px solid var(--border);
  }
}

/* Desktop has the width to open the columns up. */
@media (min-width: 62.5rem) {
  .pricing__reassure { padding-inline: var(--s-8); }
  .pricing__reassure-item:not(:last-child) { padding-inline-end: var(--s-8); }
  .pricing__reassure-item + .pricing__reassure-item { padding-inline-start: var(--s-8); }
}

/* ---------- Footnote ---------- */
.pricing__note {
  margin-top: var(--s-6);
  margin-inline: auto;
  max-inline-size: calc(var(--maxw) / 2);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-wrap: balance;
}