/* pricing — service tiers side by side, each a plan-card column. The price is a
 * DISPLAY string the author wrote; the kit renders it, never computes it.
 *
 * THE GRID DISCIPLINE — every part lines up ACROSS tiers: each tier is a ROW
 * SUBGRID spanning eight shared tracks, each part seated on its own track by
 * class, so the tallest instance of a part sizes that row for the whole band.
 * Two spec facts shape the plumbing (css-grid-2 §9/§11.1): gutters do NOT
 * collapse around empty tracks, so row-gap is zeroed here and every beat is a
 * PART MARGIN instead; and a subgrid's block padding transfers to the items at
 * its EDGES, so track 1 must never be empty — the partial renders an empty
 * badge seat to keep the card pad off the name. */

/* The ROW axis is this band's own: row-gap zeroed, the wrapped-row seam
 * restored as the tiers' uniform top margin. */
.sk-pricing-tiers {
  row-gap: 0;
  margin-top: calc(-1 * var(--kit-space-5));
}
.sk-pricing-tier {
  margin-top: var(--kit-space-5);
}
@media (max-width: 900px) {
  /* The cell grid's own row seam steps down at this rung — follow it. */
  .sk-pricing-tiers {
    margin-top: calc(-1 * var(--kit-space-4));
  }
  .sk-pricing-tier {
    margin-top: var(--kit-space-4);
  }
}

/* The tier column — a ROW SUBGRID over the eight shared part tracks; each
 * part below names its track. The top hairline is the rate-card rule; the
 * air under it rides the kit's row-air dial, faq's row posture. */
.sk-pricing-tier {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
}
/* Uncarded posture: a carded tier wears the panel skeleton instead. */
.sk-pricing-tier:not(.sk-card) {
  border-top: var(--sk-border-width) solid var(--sk-stroke);
  padding-top: calc(var(--kit-air-row) * var(--kit-type-base));
}

/* One class, one row; the beats are the parts' own margins, so an absent part
 * collapses to nothing band-wide. The name's space above rides the badge. */
.sk-pricing-badge,
.sk-pricing-badge-slot {
  grid-row: 1;
}
.sk-pricing-name {
  grid-row: 2;
}
.sk-pricing-price {
  grid-row: 3;
}
.sk-pricing-desc {
  grid-row: 4;
}
.sk-pricing-features-lead {
  grid-row: 5;
}
.sk-pricing-feature-list {
  grid-row: 6;
}
.sk-pricing-actions {
  grid-row: 7;
}
.sk-pricing-note {
  grid-row: 8;
}

/* Held to its own width: a grid item blockifies inline-flex, and stretch would
 * run the pill the full column. Its bottom margin also sizes the badge track
 * for the badge-less siblings' empty seats. */
.sk-pricing-badge {
  justify-self: start;
  margin-bottom: var(--kit-space-2);
}

/* The price line — the amount on the heading register (its type rides
 * data-text-style="heading-3"), the period seated on its baseline in the
 * detail voice. */
.sk-pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--kit-space-1);
  margin: var(--kit-space-2) 0 0;
}

/* The description — muted against the price (the label/value inking the
 * kit's paired rows speak), capped at a caption measure. */
.sk-pricing-desc {
  margin: var(--kit-space-2) 0 0;
  max-width: 36ch;
  color: var(--sk-ink-muted);
}

/* The lead-in sits on its OWN track, so the lists below still align when only
 * some tiers carry one. */
.sk-pricing-features-lead {
  margin: var(--kit-space-2) 0 0;
  color: var(--sk-ink-muted);
}
.sk-pricing-feature-list {
  list-style: none;
  margin: var(--kit-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kit-space-2);
}
.sk-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--kit-space-2);
  max-width: 36ch;
}

/* Drawn in CSS, no icon-catalog dependency. The box cannot share a baseline —
 * it has no text — so the margin computes the seat from the body leading. */
.sk-pricing-feature-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: calc((1.65em - 14px) / 2);
  color: var(--sk-accent);
}
.sk-pricing-feature-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 6px;
  border-left: var(--sk-icon-stroke) solid currentColor;
  border-bottom: var(--sk-icon-stroke) solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

/* The EXCLUDED posture — a feature this tier doesn't carry: the row rests
 * in the muted ink and the mark collapses to a dash (the check's own
 * bottom border, unrotated — one pseudo, two glyphs). */
.sk-pricing-feature[data-excluded="true"] {
  color: var(--sk-ink-muted);
}
.sk-pricing-feature[data-excluded="true"] .sk-pricing-feature-mark {
  color: var(--sk-ink-muted);
}
.sk-pricing-feature[data-excluded="true"] .sk-pricing-feature-mark::before {
  height: 0;
  border-left: none;
  transform: none;
  width: 10px;
}

/* No auto-margin pinning needed: the shared tracks seat every tier's CTA on one
 * line, the feature track above absorbing the copy-length slack. */
.sk-pricing-actions {
  margin-top: var(--kit-space-3);
}
.sk-pricing-note {
  margin: var(--kit-space-2) 0 0;
  color: var(--sk-ink-muted);
}

/* ── The highlighted tier — the featured plan, lifted by the accent: the
 * rule line and the price take the accent ink, nothing else moves. */
.sk-pricing-tier[data-highlight="true"] {
  border-top-color: var(--sk-accent);
}
.sk-pricing-tier[data-highlight="true"] .sk-pricing-amount {
  color: var(--sk-accent);
}

/* ── The card variant — the tier wears .sk-card (the shared CARD SURFACE)
 * and its uncarded rate-card rule yields above; only the highlight's accent
 * border is pricing's own. */
.sk-pricing[data-card="true"] .sk-pricing-tier[data-highlight="true"] {
  border-color: var(--sk-accent);
}