/* ═══════════════════════════════════════════════════════════════════════
   M-U-S-I-C — Pricing page (patterns: pricing-*).
   Exact values ported from m-u-s-i-c-3.0 src/pages/Pricing.tsx inline
   styles + src/pages/Pricing.css. Shared vocabulary lives in main.css —
   only section-specific styles belong here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────── */

.pricing-hero {
  padding: clamp(56px, 9vw, 96px) clamp(16px, 4vw, 32px) clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  text-align: center;
}

.pricing-hero__title {
  font-size: clamp(38px, 6vw, 58px);
  line-height: 1.04;
  max-width: 760px;
  text-wrap: pretty;
}

.pricing-hero__lead {
  max-width: 560px;
}

/* ── Tier grid ───────────────────────────────────────────────────────── */

.pricing-tiers {
  padding: 0 clamp(16px, 4vw, 32px) clamp(56px, 8vw, 88px);
}

/* Tier card interior (card shell = music-card music-card--pad-lg in main.css;
   .pr-tier / .pr-cta names kept verbatim from 3.0 Pricing.css). */
.pr-tier {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Hover lift — verbatim from 3.0 Pricing.css. */
.pr-tier:hover {
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  transform: translateY(-3px);
}

/* Ink variant — the 10-Day MasterClass card. */
.pr-tier--ink {
  background: #111827;
  border: 1px solid #111827;
  color: #ffffff;
}

/* "THE FULL ROAD" flag (pair with pulse-low). */
.pr-tier__flag {
  position: absolute;
  top: -12px;
  left: 24px;
  background: #ff5a5f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 6px 12px;
  margin: 0;
}

.pr-tier__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Tier eyebrow: 0.12em tracking (tighter than the 0.14em music-eyebrow). */
.pr-tier__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0;
}

.pr-tier__eyebrow--green { color: #0b7d58; }
.pr-tier__eyebrow--teal  { color: #00789e; }
.pr-tier__eyebrow--amber { color: #9a6200; }
.pr-tier__eyebrow--gold  { color: #ffb000; }

.pr-tier__name {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
  margin: 0;
}

.pr-tier__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pr-tier__price {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.pr-tier__per {
  font-size: 13px;
  margin: 0;
}

.pr-tier__desc {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.pr-tier__exit {
  font-size: 12px;
  text-align: center;
  margin: 0;
}

/* Muted copy: slate on paper, gray on ink. */
.pr-tier__per,
.pr-tier__desc,
.pr-tier__exit {
  color: #516078;
}

.pr-tier--ink .pr-tier__per,
.pr-tier--ink .pr-tier__desc,
.pr-tier--ink .pr-tier__exit {
  color: #8b97aa;
}

/* Feature list: checks drawn by CSS so the copy stays plain editable text. */
ul.pr-tier__feats {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.pr-tier__feats li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.45;
  color: #243047;
}

.pr-tier__feats li::before {
  content: "✓";
  color: #19a974;
  font-weight: 700;
}

.pr-tier--ink .pr-tier__feats li {
  color: #cdd4df;
}

.pr-tier--ink .pr-tier__feats li::before {
  color: #ffb000;
}

/* Tier CTA — full-width block link. */
.wp-block-buttons.pr-tier__ctas {
  margin: 0;
}

.pr-tier__ctas .wp-block-button.pr-cta {
  width: 100%;
}

.wp-block-button.pr-cta .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
  background: #ffffff;
  color: #111827;
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid #cdd4df;
}

.wp-block-button.pr-cta--coral .wp-block-button__link {
  background: #ff5a5f;
  color: #ffffff;
  border: 1.5px solid #ff5a5f;
}

/* Hover — verbatim from 3.0 Pricing.css. */
.pr-cta:hover,
.wp-block-button.pr-cta .wp-block-button__link:hover {
  opacity: 0.85;
}

/* ── Credit & policies band ──────────────────────────────────────────── */

.pricing-policies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}

.pricing-policy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 20px);
  border-radius: 16px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/*
 * The tuition-disclosure card spans the whole row. Three policy cards fill the
 * grid exactly at desktop, so a fourth stranded alone in column 1 read as an
 * afterthought — and this one is not a perk like the other three, it is a cost
 * the buyer carries. Spanning it says so, and it collapses to a normal card at
 * the single-column breakpoint without a media query.
 */
.pricing-policy--wide {
  grid-column: 1 / -1;
}

.pricing-policy__icon {
  margin: 0;
}

.pricing-policy__icon img {
  width: 36px;
  height: 36px;
}

/* ── Young artists figure ────────────────────────────────────────────── */

.pricing-figure {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-figure__img img {
  aspect-ratio: 21 / 9;
}

.pricing-figure__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-figure__caption-text {
  font-size: 15px;
  line-height: 1.55;
  color: #516078;
  margin: 0;
}

/* ── The Master Mind band ─────────────────────────────────────────────────
   Sits below the four tiers. Its own band rather than a fifth card, so the
   top of the ladder reads as larger than the courses above it.            */
/* .music-band paints #111827 edge to edge. It was invisible while the card filled
   almost the whole width; the moment the card narrowed, a full-bleed band
   reappeared behind it. Neutralised here as well as removed from the markup. */
.pr-mm.music-band,
.pr-mm {
  background: none;
  color: inherit;
}

.pr-mm {
  /* Contained, not full bleed. Run edge to edge it read as one more page
     stripe — the same treatment as every other dark band on the site — and the
     summit blended in instead of standing out. Held inside the gutter it reads
     as an object sitting on the page, which is what being the top of the ladder
     should look like. The wrapper carries only the spacing; the card below
     carries the treatment. */
  margin-top: clamp(56px, 7vw, 96px);
  padding-inline: clamp(16px, 4vw, 32px);
}

.pr-mm__kicker {
  margin: 10px 0 0;
  color: #b9a2f0;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* The card itself. Same treatment as the quote players in
   assets/players/ — ink ground, a red glow off the top-right corner, a
   cobalt wash across the diagonal, the amber arc low on the right, a 4px red
   rule along the top and a 16px radius. Matching them deliberately: the summit
   and the featured interviews are the two "this one matters" objects on the
   site, and they should read as one family rather than two inventions. */
.pr-mm__inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Edge-aligned with the tier grid above. It used to be capped at a 900px
     content box, which with its own 44px padding made a 988px card under a
     1140px grid — so the summit sat visibly inboard of the four classes it is
     the summit of, and nothing lined up. border-box means the padding is inside
     the cap, so the card's edge lands exactly on the tier cards' edge at every
     width. The cream still reads around all four sides: the page gutter and the
     margin outside the 1140px container are what make it an object on the page,
     not a band — being narrow was never what did that. */
  box-sizing: border-box;
  max-width: 1140px;
  border-radius: clamp(20px, 2vw, 28px);
  background:
    radial-gradient(circle at 96% 4%, rgba(215, 55, 79, 0.22) 0 16%, transparent 36%),
    linear-gradient(135deg, rgba(36, 71, 198, 0.12), transparent 42%),
    #111827;
  color: #fff;
  border: 1px solid rgba(17, 24, 39, 0.18);
  box-shadow: 0 30px 72px rgba(17, 24, 39, 0.22);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.85fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
  /* .music-container has no horizontal padding of its own, and it is content-box
     capped at 1140px — so this padding decides where the card's edge lands.
     Holding it at the house gutter puts the card's edge on the same line as the
     tier grid above and its text on the same line as the tier text. */
  padding: clamp(34px, 4.4vw, 54px) clamp(22px, 3.4vw, 44px);
}

/* The rule that read as "the ladder ends, the summit starts" — now the top
   edge of the card, in the same red the players use. */
.pr-mm__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: #d7374f;
  pointer-events: none;
}

/* The arc, lifted from the players' poster. Decorative — it gives the ground
   somewhere to go instead of sitting flat. */
.pr-mm__inner::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -26%;
  width: 52%;
  height: 50%;
  border: clamp(22px, 3vw, 42px) solid rgba(255, 176, 0, 0.13);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-9deg);
  pointer-events: none;
}

/* Content rides above the arc. */
.pr-mm__inner > * {
  position: relative;
  z-index: 1;
}
/* Grid child of .pr-mm__inner — declared, not implicit. */
.pr-mm__copy { min-width: 0; }

/* ── Editorial rhythm inside the card ─────────────────────────────────────
   A magazine sets a standfirst apart from the body and hangs a rule under the
   deck; the card was doing neither, so every line carried the same weight. */
.pr-mm__title {
  text-wrap: balance;
}

.pr-mm__kicker::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, #b9a2f0, rgba(185, 162, 240, 0));
}

.pr-mm__lead {
  font-size: clamp(16px, 1.55vw, 18.5px);
  line-height: 1.62;
}

.pr-mm__feats {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: clamp(18px, 2.2vw, 24px);
}

.pr-mm__eyebrow {
  margin: 0 0 10px;
  color: #b9a2f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.pr-mm__title {
  margin: 0;
  color: #fff;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.pr-mm__lead {
  max-width: 62ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.6;
}
.pr-mm__feats {
  margin: 20px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.5;
}
.pr-mm__entry {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.5;
}
.pr-mm__buy {
  border: 1px solid rgba(185, 162, 240, 0.34);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(185, 162, 240, 0.07);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}
.pr-mm__price {
  margin: 0;
  color: #fff;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pr-mm__per {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13.5px;
}
.pr-mm__ctas { margin-top: 18px; }
.pr-mm__exit {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
@media (max-width: 860px) {
  .pr-mm__inner { grid-template-columns: 1fr; }
}