/* ==========================================================================
   KJPTV — Membership & Pricing furniture (.pr-*)
   Linked by Membership & Pricing.html only. The hero reuses .dir-hero
   (directory.css), section heads reuse .row-head (catalog.css), and the
   founder card / FAQ accordion / buttons are shared site.css components.
   ========================================================================== */

/* ---- Hero: headline left, the live member count stamped in a seal -------
   Same emblem language as the Cast & Crew Profile's .pf-seal (hairline gold
   rings, arc text, star), scaled up so the count is the centre of the stamp.
   The numeral wears the shared .gold-text metal from site.css — this file
   defines NO gold gradient of its own. */
.dir-hero h1 { line-height: 1.08; }
.pr-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.pr-count { display: flex; justify-content: flex-end; }
.pr-seal { position: relative; display: grid; place-items: center; width: clamp(206px, 23vw, 258px); aspect-ratio: 1; }
/* Onyx wash under the stamp so the hairlines hold over the brand pattern */
.pr-seal::before { content: ''; position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 6, 6, 0.66), rgba(6, 6, 6, 0) 78%); }
.pr-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-seal-ring { fill: none; stroke: var(--border-gold); stroke-width: 1; }
/* Bezel ticks: a dashed stroke, so the tick count is one dasharray not 48 lines */
.pr-seal-ticks { fill: none; stroke: var(--gold-honey); stroke-width: 7; stroke-dasharray: 1.7 12.77; opacity: 0.5; }
.pr-seal text { fill: var(--gold-mustard); font-size: calc(var(--size-meta) * 1.0455); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.pr-seal-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pr-seal-mid img { width: 26px; height: 26px; }
.pr-count-n {
  /* Symmetric padding: the negative tracking pulls the last digit past the box
     edge, and background-clip: text stops painting there — the 6 gets sliced. */
  display: block; padding: 0 0.08em;
  font-size: clamp(calc(var(--size-display) * 0.9333), 6.4vw, calc(var(--size-display) * 1.2667)); font-weight: 900; line-height: 0.9;
  letter-spacing: -0.055em; font-variant-numeric: tabular-nums;
}

/* ---- Founder strip, straight under the plan cards ---------------------- */
.pr-fstrip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 28px;
  margin-top: 40px; padding: 20px 26px; border-radius: var(--radius-card);
  border: 1px solid var(--border-gold); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight), var(--gold-glow);
}
.pr-fstrip-copy { display: flex; align-items: center; gap: 14px; }
.pr-fstrip-copy img { width: 26px; height: 26px; flex: none; }
.pr-fstrip-copy b { display: block; font-size: calc(var(--size-subhead) * 0.9444); font-weight: 800; letter-spacing: -0.015em; color: var(--text-heading); }
.pr-fstrip-copy span { display: block; margin-top: 3px; font-size: calc(var(--size-small) * 1.0833); color: var(--text-body); }
.pr-fstrip-copy em { font-style: normal; color: var(--gold-mustard); font-weight: 700; }

/* ---- Plan cards ---------------------------------------------------------- */
.pr-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pr-plan {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px 24px; border-radius: 20px;
  background: var(--color-surface-1); border: 1px solid var(--border-bevel-strong);
  box-shadow: var(--bevel-highlight), var(--shadow-matte);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pr-plan:hover { transform: translateY(-2px); border-color: rgba(214, 157, 56, 0.24); }
.pr-plan.is-feature { border-color: var(--border-gold); box-shadow: var(--bevel-highlight), var(--shadow-matte), var(--gold-glow); }
.pr-flag {
  position: absolute; top: -11px; left: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: calc(var(--size-meta) * 0.9545); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1206;
  background: var(--gold-metallic-135); box-shadow: var(--bevel-highlight);
}
.pr-flag img { width: 11px; height: 11px; filter: grayscale(1) brightness(0.35); }
.pr-plan-name { font-size: var(--size-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-mustard); }
.pr-plan-for { margin: 10px 0 0; font-size: calc(var(--size-body) * 0.9643); line-height: 1.5; color: var(--text-body); text-wrap: pretty; }
.pr-price { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 0; }
.pr-amt { font-size: calc(var(--size-display) * 0.7333); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--text-heading); }
.pr-per { font-size: var(--size-body); font-weight: 600; color: var(--text-body); }
.pr-feat { list-style: none; padding: 0; margin: 22px 0 24px; display: grid; gap: 11px; }
.pr-feat li { display: flex; align-items: flex-start; gap: 10px; font-size: calc(var(--size-body) * 0.9643); line-height: 1.45; color: var(--text-body); }
.pr-feat svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-mustard); }
.pr-feat li.is-off { color: var(--text-muted); }
.pr-feat li.is-off svg { color: var(--text-muted); }
.pr-plan .btn { margin-top: auto; }
.pr-plan-foot { margin: 12px 0 0; font-size: var(--size-small); line-height: 1.5; color: var(--text-muted); text-align: center; }

/* ---- Comparison grid ---------------------------------------------------- */
.pr-cmp-wrap {
  border: 1px solid var(--border-gold); border-radius: 18px;
  background: var(--color-surface-1); box-shadow: var(--bevel-highlight), var(--shadow-matte);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pr-cmp { width: 100%; min-width: 880px; border-collapse: collapse; }
.pr-cmp th, .pr-cmp td { padding: 14px 16px; text-align: center; font-size: calc(var(--size-body) * 0.9643); border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
/* a gold rule down every column boundary; the sticky label column draws its own
   right edge so the line holds while the grid scrolls sideways */
.pr-cmp th + th, .pr-cmp td + td { border-left: 1px solid rgba(214, 157, 56, 0.24); }
.pr-cmp tbody th { border-right: 1px solid rgba(214, 157, 56, 0.24); }
.pr-cmp thead th {
  padding: 20px 16px 14px; font-size: var(--size-meta); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.pr-cmp thead th .pr-cmp-sub { display: block; margin-top: 5px; font-size: calc(var(--size-meta) * 0.9545); letter-spacing: 0.06em; color: #5c5959; }
.pr-cmp thead th.is-gold { color: var(--gold-mustard); }
.pr-cmp tbody th {
  position: sticky; left: 0; z-index: 2;
  width: 27%; text-align: left; font-size: calc(var(--size-body) * 0.9643); font-weight: 600; color: var(--text-heading);
  background: var(--color-surface-1);
}
.pr-cmp tbody td { color: var(--text-body); }
.pr-cmp tbody tr:last-child th, .pr-cmp tbody tr:last-child td { border-bottom: 0; }
.pr-cmp tbody tr:hover td, .pr-cmp tbody tr:hover th { background: rgba(255, 255, 255, 0.018); }
.pr-cmp .is-gold-col { background: rgba(214, 157, 56, 0.05); }
.pr-cmp tbody tr:hover .is-gold-col { background: rgba(214, 157, 56, 0.075); }
.pr-cmp tfoot td { padding: 18px 16px 20px; }
.pr-cmp tfoot .btn { width: 100%; }
.pr-tick { display: inline-flex; width: 17px; height: 17px; color: var(--gold-mustard); }
.pr-tick svg { width: 100%; height: 100%; }
.pr-dash { display: inline-block; width: 14px; height: 1px; background: #4a4747; vertical-align: middle; }
.pr-val { font-weight: 600; color: var(--text-heading); }
.pr-val-soft { color: var(--text-muted); }
.pr-swipe { margin: 14px 0 0; font-size: var(--size-small); color: var(--text-muted); display: none; }
.pr-swipe.is-on { display: block; }

/* ---- On every plan ------------------------------------------------------ */
.pr-inc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pr-inc-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px;
  border: 1px solid var(--border-bevel); border-radius: var(--radius-card); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight); transition: border-color var(--dur-base) var(--ease-out);
}
.pr-inc-card:hover { border-color: rgba(214, 157, 56, 0.22); }
/* Same deep neumorphic well the homepage value cards use. */
.pr-inc-ico {
  width: 52px; height: 52px; border-radius: calc(var(--radius-card) * 0.8125); display: grid; place-items: center;
  color: var(--gold-mustard); background: var(--color-surface-2);
  border: 1px solid var(--border-bevel);
  box-shadow: inset 0 4px 9px rgba(0,0,0,0.72), inset 0 8px 16px rgba(0,0,0,0.4), inset 0 -2px 3px rgba(255,255,255,0.04);
}
.pr-inc-ico svg { width: 22px; height: 22px; }
.pr-inc-card h4 { font-size: calc(var(--size-body) * 1.1071); font-weight: 700; letter-spacing: -0.01em; color: var(--text-heading); }
.pr-inc-card p { flex: 1; font-size: calc(var(--size-body) * 0.9643); line-height: 1.55; color: var(--text-body); text-wrap: pretty; }

/* ---- Banded sections (founder + sign-up) ------------------------------- */
.pr-band { position: relative; overflow: hidden; background: var(--color-surface-1); border-top: 1px solid var(--border-bevel); border-bottom: 1px solid var(--border-bevel); }
.pr-band::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/brand-pattern.png?v=59e9ff10") repeat center / 460px auto;
  opacity: 0.05; pointer-events: none;
}
.pr-band > .container { position: relative; z-index: 2; }
/* Founder band only: the ribbon-cutting shot in place of the pattern texture,
   under a left protection wash so the copy keeps its contrast, and faded top and
   bottom so the band meets its neighbours instead of reading as a photo box. */
.pr-band.pr-photo::before {
  background: #060606 url("assets/founder-ribbon.jpg?v=9c4a4399") 54% 46% / cover no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 84%, transparent 100%);
}
.pr-band.pr-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,6,6,0.95) 0%, rgba(6,6,6,0.88) 30%, rgba(6,6,6,0.5) 60%, rgba(6,6,6,0.74) 100%),
    linear-gradient(180deg, rgba(6,6,6,0.62) 0%, rgba(6,6,6,0.3) 42%, rgba(6,6,6,0.72) 100%);
}
.pr-founder { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 60px; align-items: center; }
.pr-founder h2 { font-size: clamp(calc(var(--size-heading) * 0.9375), 3.6vw, calc(var(--size-heading) * 1.4375)); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.pr-founder p { margin-top: 18px; max-width: 46ch; color: #FFFFFFCC; }
.pr-fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-bevel); font-size: calc(var(--size-small) * 1.0417); line-height: 1.6; color: var(--text-muted); max-width: 44ch; }

/* ---- Free first episode ------------------------------------------------- */
.pr-free {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border: 1px solid var(--border-bevel-strong); border-radius: 20px; overflow: hidden;
  background: var(--color-surface-1); box-shadow: var(--bevel-highlight), var(--shadow-matte);
}
.pr-free-copy { padding: 44px 40px; }
.pr-free-copy h2 { font-size: clamp(calc(var(--size-heading) * 0.8438), 3vw, calc(var(--size-heading) * 1.1875)); font-weight: 800; line-height: 1.06; letter-spacing: -0.025em; }
.pr-free-list { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.pr-free-list li { display: flex; align-items: center; gap: 11px; font-size: calc(var(--size-body) * 1.0357); color: var(--text-body); }
.pr-free-list img { width: 15px; height: 15px; flex: none; }
.pr-free-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.pr-free-art { position: relative; min-height: 320px; background: #0a0a0a 50% 30% / cover no-repeat; }
.pr-free-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-surface-1) 0%, rgba(17, 17, 17, 0.5) 34%, rgba(6, 6, 6, 0.1) 100%); }

/* ---- Refer strip -------------------------------------------------------- */
.pr-refer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px;
  padding: 30px 34px; border-radius: 18px;
  border: 1px solid var(--border-gold); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight), var(--shadow-matte), var(--gold-glow);
}
.pr-refer h3 { font-size: calc(var(--size-subhead) * 1.2222); font-weight: 800; letter-spacing: -0.02em; }
.pr-refer p { margin-top: 8px; font-size: var(--size-body); color: var(--text-body); max-width: 52ch; }
.pr-refer-nums { display: flex; gap: 34px; }
.pr-refer-n b { display: block; font-size: calc(var(--size-heading) * 0.8125); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--gold-mustard); }
.pr-refer-n span { display: block; margin-top: 4px; font-size: calc(var(--size-meta) * 1.0455); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* ---- Closing sign-up CTA ----------------------------------------------- */
.pr-signup { text-align: center; }
.pr-signup h2 { font-size: clamp(calc(var(--size-display) * 0.5333), 4.4vw, calc(var(--size-display) * 0.9667)); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.pr-signup p { margin: 18px auto 0; max-width: 48ch; }
.pr-signup-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pr-signup-note { margin-top: 22px; font-size: calc(var(--size-small) * 1.0417); color: var(--text-muted); }
.pr-signup-note b { color: var(--gold-mustard); font-weight: 700; }

/* ---- Free-account sign-up modal ---------------------------------------- */
.pr-auth-soc { display: grid; gap: 10px; margin-bottom: 20px; }
.pr-auth-soc svg { width: 17px; height: 17px; flex: none; }
.pr-auth-or {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font-size: var(--size-meta); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.pr-auth-or::before, .pr-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border-bevel-strong); }
.pr-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-auth .dt-field.is-wide { grid-column: 1 / -1; }
.pr-auth-fine { margin: 16px 0 0; font-size: var(--size-small); line-height: 1.6; color: var(--text-muted); text-align: center; }
.pr-auth-fine a { color: var(--gold-mustard); }
.pr-auth-done { text-align: center; }
.pr-auth-done img { width: 44px; height: 44px; margin: 0 auto 16px; display: block; }
.pr-auth-done h3 { font-size: calc(var(--size-heading) * 0.75); font-weight: 800; letter-spacing: -0.02em; }
.pr-auth-done p { margin: 10px auto 24px; max-width: 40ch; font-size: var(--size-body); line-height: 1.6; color: var(--text-body); }
.pr-auth-done-acts { display: grid; gap: 10px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-founder { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .pr-free { grid-template-columns: minmax(0, 1fr); }
  .pr-free-art { min-height: 240px; order: -1; }
  .pr-free-art::after { background: linear-gradient(180deg, rgba(6, 6, 6, 0.1) 0%, rgba(17, 17, 17, 0.55) 66%, var(--color-surface-1) 100%); }
  .pr-hero-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pr-count { justify-content: flex-start; }
}
@media (max-width: 860px) {
  .pr-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No sticky label column at this width: it would sit over half the viewport
     and swallow the cells as they swipe under it. */
  .pr-cmp tbody th { position: static; width: 42%; min-width: 190px; }
}
@media (max-width: 620px) {
  .pr-plans, .pr-inc { grid-template-columns: minmax(0, 1fr); }
  .pr-free-copy { padding: 32px 24px; }
  .pr-refer { padding: 26px 24px; }
  .pr-refer-nums { gap: 24px; }
  .pr-refer-n b { font-size: calc(var(--size-subhead) * 1.2222); }
  .pr-auth { grid-template-columns: 1fr; }
  .pr-fstrip { padding: 20px; }
}
@media (max-width: 760px) {
  .pr-count { justify-content: center; }
  /* Portrait crop of the ribbon shot. NOT cover-over-the-whole-band: the band is
     far taller than it is wide once the copy and founder card stack, so cover
     crops the scissors down to one ring. Instead the photo gets its OWN
     top-anchored box, exactly as tall as the crop, and fades out INSIDE that box
     via the mask -- so the fade provably finishes before the photo's bottom edge
     and no sliver of the studio backdrop can survive to cut off. It dissolves
     into the band's own surface, not into a separate black block, so there is
     nothing for a seam to form against. */
  .pr-band.pr-photo { padding-top: min(84.6vw, 364px); }
  .pr-band.pr-photo::before {
    inset: 0 0 auto 0;
    height: min(117.8vw, 520px);
    background: url("assets/founder-ribbon-mobile-2.jpg?v=0887abf0") 50% 0 / cover no-repeat;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 40%, rgba(0,0,0,0.4) 66%, transparent 86%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 40%, rgba(0,0,0,0.4) 66%, transparent 86%);
  }
  /* Wash over the photo only, fading out on the same curve. */
  .pr-band.pr-photo::after {
    inset: 0 0 auto 0;
    height: min(117.8vw, 520px);
    background: linear-gradient(180deg, rgba(6,6,6,0.36) 0%, rgba(6,6,6,0.22) 42%, rgba(6,6,6,0.08) 70%, rgba(6,6,6,0) 86%);
  }
}