/* ============================================================
   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;
  }
}