/* ============================================================
   REGISTAR — ELEVATION LAYER  ·  elevate.css   (v2)
   Layered ON TOP of style.css. This is precision, not reinvention:
   the dark/lime identity is untouched. It refines spacing, type and
   motion, and adds three things style.css didn't have —
     · the money-flow signature diagram
     · iconified cards
     · stat metrics with count-up + a drawing accent
   Load this AFTER style.css. Reusable across every page.
   ============================================================ */

   /* Page is dark by design — this stops Chromium / Opera GX "auto dark"
      from inverting the black-backed logo into a white tile. */
      html { color-scheme: dark; }

      :root {
       /* 8px spacing scale — one rhythm everywhere */
       --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
       --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
     
       /* motion tokens */
       --t-fast: 0.18s;
       --t-mid:  0.32s;
     }
     
     /* ---- Type: fluid display, tighter at the top end ---------- */
     .hero h1 { font-size: clamp(44px, 7vw, 82px); line-height: 0.98; letter-spacing: 0.005em; }
     .hero .lead { font-size: clamp(16px, 1.4vw, 19px); }
     .sec-head h2 { letter-spacing: 0.015em; }
     
     /* ---- Section rhythm: more generous, with subtle variation -- */
     .section { padding: var(--s-7) 0; }
     .section--surface {
       background:
         radial-gradient(ellipse 70% 60% at 50% -10%, var(--accent-dim), transparent 60%),
         var(--surface);
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
     }
     @media (max-width: 560px) { .section { padding: var(--s-6) 0; } }
     
     /* ---- HERO: two-column, text + signature ------------------- */
     .hero-grid { gap: var(--s-6); }
     .hero-copy { position: relative; }
     
     /* ---- SIGNATURE: the money-flow diagram -------------------- */
     .flow {
       position: relative;
       background: var(--surface);
       border: 1px solid var(--border-2);
       border-radius: var(--r-lg);
       padding: 22px 20px;
       box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9),
                   inset 0 0 0 1px rgba(255,255,255,0.02);
     }
     .flow .flow-cap {
       font-family: var(--f-mono);
       font-size: 10px;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--tx-3);
       margin-bottom: 14px;
     }
     .flow svg { width: 100%; height: auto; display: block; }
     
     /* svg element styling via CSS vars */
     .flow .node      { fill: var(--surface-2); stroke: var(--border-2); stroke-width: 1; }
     .flow .node--in  { fill: var(--surface-3); stroke: var(--border-2); }
     .flow .node--paid{ fill: var(--accent-dim); stroke: var(--accent); }
     .flow .node--lost{ fill: var(--surface-2); stroke: var(--border-2); stroke-dasharray: 4 4; opacity: 0.5; }
     .flow .lbl   { fill: var(--tx);  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }
     .flow .lbl-s { fill: var(--tx-2); font-family: var(--f-mono); font-size: 9px;  letter-spacing: 0.08em; }
     .flow .lbl-paid { fill: var(--accent); }
     .flow .lbl-lost { fill: var(--tx-3); }
     .flow .wire  { stroke: var(--border-2); stroke-width: 2; fill: none; }
     .flow .stream{ stroke: var(--accent); stroke-width: 2; fill: none; stroke-dasharray: 5 8; animation: flow-move 1.3s linear infinite; }
     .flow .stream--lost { stroke: var(--tx-3); animation-duration: 2.6s; opacity: 0.6; }
     .flow .head  { fill: var(--accent); }
     .flow .head--lost { fill: var(--tx-3); }
     .flow .strike { stroke: var(--tx-3); stroke-width: 1.5; }
     .flow .paidglow { animation: flow-glow 3.2s var(--ease) infinite; transform-origin: center; }
     
     @keyframes flow-move { to { stroke-dashoffset: -26; } }
     @keyframes flow-glow {
       0%, 100% { filter: drop-shadow(0 0 0 rgba(200,241,53,0)); }
       50%      { filter: drop-shadow(0 0 7px var(--accent-glow)); }
     }
     
     /* ---- Split intro (cards section) -------------------------- */
     .split { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
     .split .split-aside .lead { margin-top: 14px; }
     @media (min-width: 880px) {
       .split { grid-template-columns: 0.82fr 1.18fr; gap: var(--s-6); align-items: start; }
       .split .split-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
     }
     
     /* ---- Iconified cards -------------------------------------- */
     .card .card-icon {
       width: 40px; height: 40px;
       border-radius: 11px;
       display: grid; place-items: center;
       background: var(--accent-dim);
       border: 1px solid rgba(200, 241, 53, 0.25);
       color: var(--accent);
       margin-bottom: 16px;
       transition: transform var(--t-mid) var(--ease);
     }
     .card .card-icon svg { width: 20px; height: 20px; stroke: currentColor; }
     .card:hover .card-icon { transform: translateY(-2px) scale(1.04); }
     
     /* keep the small index number, now paired beside the icon */
     .card .card-row { display: flex; align-items: center; justify-content: space-between; }
     .card .card-row .card-ix { margin: 0; }
     
     /* ---- Stat metrics: count-up + drawing accent -------------- */
     .metrics {
       display: grid; gap: var(--s-4);
       grid-template-columns: 1fr;
     }
     @media (min-width: 720px) { .metrics { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
     
     .metric { position: relative; }
     .metric .num {
       font-family: var(--f-head);
       font-size: clamp(46px, 6.5vw, 76px);
       line-height: 0.92;
       color: var(--accent);
       letter-spacing: 0.01em;
     }
     .metric .accent-rule {
       height: 2px; width: 0; max-width: 120px;
       background: var(--accent);
       margin: 16px 0 14px;
       transition: width 0.9s var(--ease) 0.1s;
     }
     .metric.in .accent-rule { width: 120px; }
     .metric .mlabel {
       font-family: var(--f-mono);
       font-size: 12px;
       line-height: 1.6;
       letter-spacing: 0.04em;
       color: var(--tx-2);
       max-width: 38ch;
     }
     
     /* ---- Large editorial pull-quote --------------------------- */
     .pull { max-width: 920px; }
     .pull p {
       font-family: var(--f-head);
       font-size: clamp(30px, 4.6vw, 54px);
       line-height: 1.02;
       letter-spacing: 0.01em;
       color: var(--tx);
     }
     .pull p .dim { color: var(--tx-3); }
     .pull p .hl  { color: var(--accent); }
     .pull .by {
       margin-top: var(--s-3);
       font-family: var(--f-mono);
       font-size: 12px;
       letter-spacing: 0.06em;
       color: var(--tx-3);
     }
     .pull .by a { color: var(--tx-2); text-decoration: underline; }
     .pull .by a:hover { color: var(--accent); }
     
     /* ---- Stagger children on reveal --------------------------- */
     .stagger > .reveal:nth-child(1) { transition-delay: 0s; }
     .stagger > .reveal:nth-child(2) { transition-delay: 0.07s; }
     .stagger > .reveal:nth-child(3) { transition-delay: 0.14s; }
     .stagger > .reveal:nth-child(4) { transition-delay: 0.21s; }
     
     /* ---- Reduced motion: still elegant, just still ------------ */
     @media (prefers-reduced-motion: reduce) {
       .flow .stream, .flow .stream--lost, .flow .paidglow { animation: none; }
       .metric .accent-rule { transition: none; }
     }
   
   /* ============================================================
      ELEVATE · PASS 2 — content components
      Styles the page modules that were referenced in the markup
      but never had CSS: the nav logo mark, inline term tooltips,
      the two-copyright diagram, worked-example blocks and the
      myth cards. Tokens only — no new colours.
      ============================================================ */
   
   /* ---- Nav logo lockup (img mark + wordmark) ---------------- */
   .site-nav .nav-logo,
   .footer-brand .nav-logo {
     display: inline-flex;
     align-items: center;
     gap: 10px;
   }
   .nav-logo-mark {
     flex-shrink: 0;
     width: 50px;
     height: 50px;
     border-radius: 11px;
     display: block;
   }
   .footer-brand .nav-logo-mark { width: 37px; height: 37px; border-radius: 5px; }
   @media (max-width: 560px) {
     .site-nav .nav-logo { gap: 8px; }
     /* nav mark stays a full 50px on phones (see request) */
   }
   
   /* ---- Inline term + hover/focus tooltip -------------------- */
   .term {
     position: relative;
     color: var(--tx);
     border-bottom: 1px dashed var(--accent);
     cursor: help;
     outline: none;
     transition: color var(--t-fast) var(--ease);
   }
   .term:hover,
   .term:focus-visible { color: var(--accent); }
   
   .term-pop {
     position: absolute;
     bottom: calc(100% + 12px);
     left: 50%;
     z-index: 40;
     width: max-content;
     max-width: 260px;
     transform: translate(-50%, 6px);
     background: var(--surface-3);
     border: 1px solid var(--border-2);
     border-radius: var(--r-md);
     box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.9);
     padding: 12px 14px;
     font-family: var(--f-mono);
     font-size: 11.5px;
     font-weight: 400;
     line-height: 1.6;
     letter-spacing: 0.01em;
     text-transform: none;
     color: var(--tx-2);
     text-align: left;
     white-space: normal;
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
   }
   /* little pointer */
   .term-pop::after {
     content: '';
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     border: 6px solid transparent;
     border-top-color: var(--border-2);
   }
   .term:hover .term-pop,
   .term:focus-visible .term-pop,
   .term:focus .term-pop {
     opacity: 1;
     transform: translate(-50%, 0);
   }
   /* keep the popover on-screen near the left/right page edges */
   @media (max-width: 560px) {
     .term-pop { max-width: 220px; }
   }

   /* ---- Stop cards from clipping their tooltips --------------- */
   /* .card uses overflow:hidden for its growing top-line, which was
      cutting off any .term-pop that reached past the card edge (the
      PRS / MCPS / PPL cards on Players). For cards that actually
      contain a tooltip: let them overflow so the popover shows in
      full, raise the hovered/focused card above its neighbours so the
      popover overlays them cleanly, and inset the lime top-line by the
      corner radius so it no longer nibs past the rounded corners now
      that the card doesn't clip. */
   .card:has(.term-pop) { overflow: visible; }
   .card:has(.term-pop):hover,
   .card:has(.term-pop):focus-within { z-index: 5; }
   .card:has(.term-pop)::after { left: var(--r-md); width: 0; }
   .card:has(.term-pop):hover::after { width: calc(100% - (var(--r-md) * 2)); }

   /* ---- The two-copyright diagram (Players) ------------------ */
   .rights-top {
     text-align: center;
     font-family: var(--f-mono);
     font-size: 12px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--tx-2);
   }
   .rights-top b { color: var(--accent); margin: 0 6px; }
   .rights-fork {
     width: 1px;
     height: 34px;
     margin: 14px auto 22px;
     background: linear-gradient(var(--accent), transparent);
   }
   .rights-split {
     display: grid;
     gap: var(--s-3);
     grid-template-columns: 1fr;
   }
   @media (min-width: 720px) {
     .rights-split { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
   }
   .rights-col {
     position: relative;
     background: var(--surface);
     border: 1px solid var(--border-2);
     border-radius: var(--r-lg);
     padding: 26px 24px;
     overflow: hidden;
   }
   .rights-col::before {
     content: '';
     position: absolute;
     inset: 0 0 auto 0;
     height: 3px;
     background: var(--accent);
     opacity: 0.85;
   }
   .rc-tag {
     font-family: var(--f-mono);
     font-size: 10px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--tx-3);
     margin-bottom: 8px;
   }
   .rights-col h3 { margin-bottom: 6px; }
   .rc-sub { font-size: 14px; color: var(--tx-2); margin-bottom: 16px; }
   .soc-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
   .soc {
     display: inline-flex;
     align-items: center;
     font-family: var(--f-mono);
     font-size: 11px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--accent);
     background: var(--accent-dim);
     border: 1px solid rgba(200, 241, 53, 0.3);
     border-radius: var(--r-sm);
     padding: 5px 11px;
   }
   .soc.muted {
     color: var(--tx-3);
     background: var(--surface-2);
     border-color: var(--border-2);
   }
   .rc-line {
     font-size: 14px;
     line-height: 1.6;
     color: var(--tx-2);
     padding: 11px 0;
     border-top: 1px solid var(--border);
   }
   .rc-line:first-of-type { border-top: none; }
   .rc-line b { color: var(--tx); }
   
   /* ---- Worked-example block (Players / Registering) --------- */
   .example {
     background: var(--surface);
     border: 1px solid var(--border-2);
     border-radius: var(--r-lg);
     padding: 8px 28px 28px;
     overflow: hidden;
   }
   .ex-tag {
     font-family: var(--f-mono);
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--accent);
     padding: 20px 0 18px;
     border-bottom: 1px solid var(--border);
   }
   .ex-row {
     display: grid;
     grid-template-columns: 1fr;
     gap: 6px;
     padding: 20px 0;
     border-bottom: 1px solid var(--border);
   }
   @media (min-width: 720px) {
     .ex-row { grid-template-columns: 0.42fr 0.58fr; gap: var(--s-4); }
   }
   .ex-when {
     font-family: var(--f-mono);
     font-size: 13px;
     line-height: 1.5;
     letter-spacing: 0.02em;
     color: var(--tx);
   }
   .ex-pays { font-size: 15px; line-height: 1.65; color: var(--tx-2); }
   .ex-pays b { color: var(--accent); font-weight: 500; }
   .ex-punch {
     margin-top: 22px;
     padding: 18px 20px;
     background: var(--accent-dim);
     border: 1px solid rgba(200, 241, 53, 0.25);
     border-radius: var(--r-md);
     font-size: 15.5px;
     line-height: 1.6;
     color: var(--tx);
   }
   
   /* ---- Myth cards (Myths) ----------------------------------- */
   .myths {
     display: grid;
     gap: var(--s-3);
     grid-template-columns: 1fr;
   }
   @media (min-width: 760px) {
     .myths { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
   }
   .myth {
     position: relative;
     overflow: hidden;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     padding: 24px 22px;
     transition: border-color 0.3s var(--ease),
                 background 0.3s var(--ease);
   }
   .myth:hover {
     border-color: var(--border-2);
     background: var(--surface-2);
   }
   .myth-tag {
     font-family: var(--f-mono);
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--accent);
     margin: 0 0 14px;
   }
   .myth-claim,
   .myth-real {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     margin: 0;
     line-height: 1.55;
   }
   .myth-claim {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 12px;
   }
   .myth-real {
     font-size: 14.5px;
     color: var(--tx-2);
   }
   .myth-real strong { color: var(--tx); font-weight: 600; }
   .mk {
     flex: 0 0 auto;
     font-family: var(--f-mono);
     font-size: 13px;
     line-height: 1.55;
     transform: translateY(1px);
   }
   .myth-claim .mk { color: var(--tx-3); }   /* the X mark - kept muted */
   .myth-real  .mk { color: var(--accent); } /* the check mark - lime highlight */
   /* ============================================================
   MOBILE NAV  ·  Hamburger drawer (phones ≤ 767px)
   The .nav-toggle markup and the .nav-open JS both already exist;
   this is the missing CSS layer. Desktop nav is untouched.
   Tokens only — no new colours.
   ============================================================ */

/* Hamburger button — hidden on desktop, revealed in the query below. */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--tx);
  transition: transform 0.25s var(--ease), opacity 0.15s var(--ease);
}

@media (max-width: 767px) {
  /* Show the button; lift the link row off the bar into a drawer. */
  .nav-toggle { display: inline-flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.9);
  }
  .site-nav.nav-open .nav-links { display: flex; }

  /* Bars morph to an X when open (gap 5px + height 2px = 7px shift). */
  .site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Top-level links + dropdown toggles become full-width rows. */
  .nav-links > a,
  .nav-dd-toggle {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 24px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .nav-dd {
    display: block;
    width: 100%;
  }
  .nav-dd-toggle { justify-content: space-between; }
  .nav-dd::after { content: none; }        /* remove desktop hover bridge */

  /* Dropdowns expand inline & stacked instead of floating popovers. */
  .nav-dd-menu {
    box-sizing: border-box;
    position: static;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  /* Kill the desktop -50% translate in every reveal state; drive
     visibility by display so nothing peeks open unexpectedly. */
  .nav-dd .nav-dd-menu,
  .nav-dd:hover .nav-dd-menu,
  .nav-dd:focus-within .nav-dd-menu,
  .nav-dd.open .nav-dd-menu { transform: none; }
  .nav-dd .nav-dd-menu { display: none; opacity: 1; pointer-events: auto; }
  .nav-dd.open .nav-dd-menu { display: flex; }
  .nav-dd-menu a { padding: 13px 24px 13px 42px; }   /* indent children */

  /* "Join the list" sits as an inset button, not a full-bleed row. */
  .nav-links > a.nav-cta {
    width: auto;
    margin: 12px 24px 2px;
    padding: 13px 18px;
    text-align: center;
    font-size: 11px;
  }
}
/* ============================================================
   CONVERSION LAYER — additive, appended
   1. .u-accent      utility (replaces inline accent styles)
   2. .proof-row     verified figures sitting beside a CTA
   3. .waitlist--mid compact mid-article waitlist block
   ============================================================ */

/* ---- 1. Accent utility ------------------------------------ */
.u-accent { color: var(--accent); }

/* ---- 2. Proof row ----------------------------------------- */
.proof-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.proof-row li {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 14px 12px;
}
.proof-row b {
  display: block;
  font-family: var(--f-head);
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.proof-row span {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--tx-2);
}
.proof-src {
  margin: -14px auto 24px;
  max-width: 620px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--tx-3);
  text-align: center;
}
@media (min-width: 720px) {
  .proof-row { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 3. Mid-article waitlist ------------------------------ */
.waitlist--mid {
  text-align: left;
  padding: 32px 30px;
}
.waitlist--mid::before { opacity: 0.18; }
.waitlist--mid .eyebrow { justify-content: flex-start; margin-bottom: 12px; }
.waitlist--mid h2 { font-size: 30px; margin-bottom: 8px; }
.waitlist--mid .lead { margin: 0 0 20px; max-width: 54ch; }
.waitlist--mid .waitlist-form { margin: 0; justify-content: flex-start; max-width: 520px; }
.waitlist--mid .waitlist-note { text-align: left; }
.waitlist--mid .waitlist-success { margin: 0; }
.waitlist--mid .proof-inline {
  margin: 0 0 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--tx-2);
}
.waitlist--mid .proof-inline b { color: var(--accent); }

@media (max-width: 560px) {
  .waitlist--mid { padding: 28px 20px; }
  .waitlist--mid h2 { font-size: 26px; }
}

/* ============================================================
   "One track, split two ways" — diagram restyle (players.html)
   Overrides the earlier .rights-* block further up this file.
   ============================================================ */

.rights-diagram { position: relative; }

/* ---- Origin node ------------------------------------------ */
.rd-origin { text-align: center; }
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 10px 20px 10px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx);
}
.rd-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

/* ---- Fork ------------------------------------------------- */
.rd-fork { display: block; width: 100%; height: 76px; margin: 0 auto; }
.rd-fork-mobile { display: none; }
.rd-caption {
  text-align: center;
  margin: 0 0 26px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
}

/* ---- Cards ------------------------------------------------ */
.rights-col {
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.rights-col:hover { border-color: rgba(200, 241, 53, 0.34); transform: translateY(-2px); }
.rights-col::before { height: 2px; opacity: 1; }

.rc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 24px 0;
}
.rc-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid rgba(200, 241, 53, 0.32);
  font-family: var(--f-head);
  font-size: 21px;
  line-height: 1;
  color: var(--accent);
}
.rc-headings { min-width: 0; }
.rights-col .rc-tag { margin-bottom: 2px; }
.rights-col h3 { margin: 0; line-height: 1; }
.rights-col .rc-sub { padding: 0 24px; margin: 10px 0 16px; }
.rights-col .soc-list { padding: 0 24px; margin-bottom: 0; }

/* ---- Society rows ----------------------------------------- */
.rc-rows { list-style: none; margin: 18px 0 0; padding: 0; }
.rc-rows li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}
.rc-key {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.rc-key--muted { color: var(--tx-3); }
.rc-val { font-size: 14px; line-height: 1.65; color: var(--tx-2); }

/* ---- Payee footer bar ------------------------------------- */
.rc-payee {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 16px 24px;
  background: var(--accent-dim);
  border-top: 1px solid rgba(200, 241, 53, 0.22);
}
.rc-payee span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.rc-payee b { font-size: 14px; color: var(--accent); }

/* ---- Mobile: stack, swap the fork for a plain connector ---- */
@media (max-width: 719px) {
  .rd-fork { display: none; }
  .rd-fork-mobile {
    display: block;
    width: 1px;
    height: 40px;
    margin: 16px auto 18px;
    background: linear-gradient(var(--accent), transparent);
  }
  .rd-caption { margin-bottom: 20px; }
  .rc-rows li { grid-template-columns: 1fr; gap: 5px; padding: 14px 20px; }
  .rc-head { padding: 22px 20px 0; }
  .rights-col .rc-sub,
  .rights-col .soc-list { padding: 0 20px; }
  .rc-payee { padding: 14px 20px; }
}


/* ============================================================
   PROOF LINE — revision
   ------------------------------------------------------------
   Replaces the old .proof-row stat grid, which repeated the same
   three figures on every bottom waitlist box. Figures now appear
   in one reasoned sentence, and only on the pages where they are
   the relevant evidence:
     index      — 16,000 first-time PPL payees
     players    — £1.07bn PRS / £277.7m PPL (two pots, two bodies)
     myths      — ~3-year redistribution window
   The other ten boxes carry no figure at all.

   .proof-row / .proof-src above are now unused. Left in place
   rather than deleted so nothing breaks if a page still calls
   them; safe to remove once all pages are deployed.
   ============================================================ */

/* Base variant — centred, sits in the standard bottom box. */
.waitlist:not(.waitlist--mid) .proof-inline {
  max-width: 60ch;
  margin: 0 auto 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-2);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--tx-2);
  text-align: center;
}
.waitlist:not(.waitlist--mid) .proof-inline b {
  font-family: var(--f-mono);
  font-weight: 400;
  color: var(--accent);
  white-space: nowrap;
}

/* Mid variant — readability pass. The old rule set this in 11px
   mono, which was fine for one short line but hard going once the
   sentence carries its reasoning. */
.waitlist--mid .proof-inline {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0;
  margin: 0 0 20px;
  max-width: 56ch;
}
.waitlist--mid .proof-inline b {
  font-family: var(--f-mono);
  font-weight: 400;
  white-space: nowrap;
}

/* Source tag, both variants. */
.waitlist .proof-inline span {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--tx-3);
}

/* Lead tightens only where a proof line follows it. */
.waitlist:has(.proof-inline) .lead { margin-bottom: 18px; }

@media (max-width: 560px) {
  .waitlist:not(.waitlist--mid) .proof-inline { font-size: 13.5px; padding-top: 16px; }
}