/* ============================================================
   10 — PRICING HERO
   Dark canvas that runs up behind the transparent nav (the bar only
   inverts to dark ink once it is scrolled or a menu is open, so the
   first screen of every page has to be dark).

   No CTA row here on purpose: the plan table two screens down is the
   call to action, and a button above it would compete with it.
   ============================================================ */

.prc-hero {
  --prc-hero-slant: min(7vw, 88px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* top clears the 72px nav plus its own optical air */
  padding-block: calc(var(--s-12) + var(--s-9))
                 calc(var(--s-12) + var(--prc-hero-slant));
  color: var(--text-invert-body);
}

/* Layered wash — quieter than the homepage mesh, static by design.
   A pricing page is read, not landed on; ambient motion here is noise. */
.prc-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 58% at 14% 18%, color-mix(in srgb, var(--c-brand) 42%, transparent), transparent 72%),
    radial-gradient(38% 52% at 88% 8%,  color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 74%),
    radial-gradient(56% 64% at 68% 96%, color-mix(in srgb, var(--c-brand) 20%, transparent), transparent 76%),
    var(--grad-dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--prc-hero-slant)), 0 100%);
}

.prc-hero__inner { position: relative; z-index: 1; }

.prc-hero__eyebrow { color: var(--c-teal); }

.prc-hero__title {
  margin-block: var(--s-4) 0;
  max-width: 15ch;
  color: var(--text-invert);
}

.prc-hero__lead { margin-block-start: var(--s-6); }

/* ---------- the two-part model, side by side ---------- */

.prc-hero__parts {
  display: grid;
  gap: var(--s-6);
  margin-block-start: var(--s-10);
  max-width: 46rem;
}

@media (min-width: 640px) {
  .prc-hero__parts { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

/* A hairline rule rather than a card: two facts, not two products. */
.prc-hero__part {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--s-3);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid color-mix(in srgb, var(--c-white) 22%, transparent);
}

.prc-hero__ico {
  grid-row: 1 / 2;
  width: var(--s-5);
  height: var(--s-5);
  /* baseline-align the glyph with the label's cap height */
  transform: translateY(0.18em);
  color: var(--c-teal);
}

.prc-hero__part-k {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-white) 62%, transparent);
}

.prc-hero__part-v {
  grid-column: 2;
  margin-block-start: var(--s-2);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
  color: var(--text-invert);
}

.prc-hero__part-d {
  grid-column: 2;
  margin-block-start: var(--s-2);
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-invert-body);
}