/*
Theme Name: PropXConnect
Theme URI: https://propxconnect.com
Author: TradeSaber Inc.
Author URI: https://tradesaber.com
Description: Hand-coded theme for PropXConnect — prop firm comparison, affiliate codes and rewards. No page builder. Palette and type are switchable from the Customizer; the firm data itself lives in the PropXConnect plugin, never in this theme.
Version: 1.16.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: propxconnect
*/

/* =====================================================================
   CONTENTS
   1.  Palette tokens (direction A / B, dark / light)
   2.  Type tokens (Franklin / Spartan)
   3.  Base + WordPress plumbing
   4.  Header / nav
   5.  Hero + the quote card
   6.  Spec sheet
   7.  Rewards + how it works
   8.  Footer
   9.  Plugin embed
   10. Editor / generic page content
   ===================================================================== */


/* ── DIRECTION A · teal leads the surfaces, orange is only ever an action ── */
html[data-dir="a"][data-mode="dark"]{
  --bg:#0C1417; --bg-deep:#080F11; --raise:#111C21; --line:#1E3239; --rule:#28414A;
  --text:#EDF3F5; --dim:#8FA6AE; --faint:#5A737D;
  --brand:#0FA0CC; --deep:#00647F; --glow:#57CDF9;
  --act:#EA6D22; --act-hi:#FF8038; --act-ink:#0C1417;
  --grey:#8A8E92; --pos:#38CE8D; --neg:#E85F63;
  --wash:rgba(15,160,204,.12);
}
html[data-dir="a"][data-mode="light"]{
  --bg:#F4F7F8; --bg-deep:#E8EEF0; --raise:#FFFFFF; --line:#D5E1E5; --rule:#B8CCD3;
  --text:#08161A; --dim:#4F6771; --faint:#84999F;
  --brand:#00647F; --deep:#004A5F; --glow:#0B8FC4;
  --act:#D25710; --act-hi:#EA6D22; --act-ink:#FFFFFF;
  --grey:#6E7276; --pos:#0E7F52; --neg:#C13A3E;
  --wash:rgba(0,100,127,.08);
}
/* ── DIRECTION B · the existing TradeSaber orange leads ── */
html[data-dir="b"][data-mode="dark"]{
  --bg:#1F1F21; --bg-deep:#161617; --raise:#292A2C; --line:#3A3A3F; --rule:#4A4A50;
  --text:#F2F0EB; --dim:#A8A8A2; --faint:#75756E;
  --brand:#E88103; --deep:#B96500; --glow:#57CDF9;
  --act:#E88103; --act-hi:#FF9A22; --act-ink:#131313;
  --grey:#8A8A84; --pos:#2FBF71; --neg:#E14B4B;
  --wash:rgba(232,129,3,.12);
}
html[data-dir="b"][data-mode="light"]{
  --bg:#F5F3EF; --bg-deep:#EAE6DE; --raise:#FFFFFF; --line:#DFDAD1; --rule:#C6BFB3;
  --text:#191917; --dim:#67675F; --faint:#93938B;
  --brand:#C46B00; --deep:#9C5500; --glow:#0B8FC4;
  --act:#C46B00; --act-hi:#E88103; --act-ink:#FFFFFF;
  --grey:#77776F; --pos:#0E7F52; --neg:#C13A3E;
  --wash:rgba(196,107,0,.09);
}

/* ── TYPE ─────────────────────────────────────────────────────────
   FRANKLIN (default): Libre Franklin — a revival of Franklin Gothic,
   drawn 1902 and still on newsstands. One family across the whole
   weight range, plus a mono for figures. Nothing here can date,
   because nothing here is of a period.
   SPARTAN: the previous stack, kept for comparison.
   ───────────────────────────────────────────────────────────────── */
html[data-type="franklin"]{
  --disp:"Libre Franklin",system-ui,sans-serif;
  --body:"Libre Franklin",system-ui,sans-serif;
  --num:"IBM Plex Mono",ui-monospace,monospace;
  --disp-track:-.018em;
  --disp-lead:.92;
}
html[data-type="spartan"]{
  --disp:"League Spartan",system-ui,sans-serif;
  --body:"Public Sans",system-ui,sans-serif;
  --num:"JetBrains Mono",ui-monospace,monospace;
  --disp-track:-.028em;
  --disp-lead:.88;
}
/* Franklin's cap height and counters differ from Spartan's, so the
   display sizes get a nudge rather than being reused blind. */
html[data-type="franklin"] .hero h1{font-size:clamp(26px,3.1vw,41px);letter-spacing:-.02em;line-height:.98}
html[data-type="franklin"] h2.disp{letter-spacing:-.016em;line-height:.95}
html[data-type="franklin"] .rung .c{letter-spacing:-.022em}
html[data-type="franklin"] .brand .nm{font-size:20px;letter-spacing:-.012em}
html[data-type="franklin"] .stats .n{letter-spacing:-.018em}
html[data-type="franklin"] .btn{letter-spacing:.055em}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--num);font-variant-numeric:tabular-nums}

/* League Spartan, used hard: heavy, uppercase, tight. This is the voice. */
.disp{
  font-family:var(--disp);
  font-weight:900; text-transform:uppercase;
  letter-spacing:var(--disp-track); line-height:var(--disp-lead);
}
h2.disp{font-size:clamp(30px,4vw,50px)}
h3{font-family:var(--disp);font-weight:800;letter-spacing:-.015em}

/* THE CHAMFER — a 45° corner cut, taken straight off the logo's geometry.
   Nothing on this page has a rounded corner. */
.chamfer{clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)}
.chamfer-sm{clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}

.kicker{
  font-family:var(--num);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
}


/* ── announcement bar ── */
.announce{
  background:var(--act);color:var(--act-ink);text-align:center;
  font-family:var(--num);font-size:12.5px;font-weight:500;letter-spacing:.05em;
  padding:9px 16px;
}
.announce a{text-decoration:underline;text-underline-offset:3px}

/* ── header: no card, no pill. Two hairlines and alignment. ── */
.head{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;gap:30px;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px}
.brand .nm{font-family:var(--disp);font-weight:900;font-size:21px;letter-spacing:-.02em;line-height:1}
.brand .nm i{font-style:normal;color:var(--brand)}
.brand .by{font-family:var(--num);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.nav{display:flex;gap:0;list-style:none;margin-left:18px}
.nav a{
  display:block;padding:0 17px;height:76px;line-height:76px;font-size:14px;font-weight:500;
  color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;
}
.nav a:hover{color:var(--text);border-color:var(--act)}
/* Every control in the header is the SAME height, set once here.
   Left to their own padding they each ended up a different size, because a
   single glyph, a word, and a two-size number stack all have different
   natural line boxes. Height is fixed and the padding goes horizontal only. */
.head .right{margin-left:auto;display:flex;align-items:center;gap:10px;--ctl-h:38px}
.head .right > *{height:var(--ctl-h);flex:none}
.head .right .btn-sm{padding:0 16px;line-height:1}
.head .right #propx-mode{width:var(--ctl-h);padding:0;font-size:15px;font-family:var(--body)}
.head .right .nav-burger{width:var(--ctl-h);height:var(--ctl-h)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:13.5px;letter-spacing:.045em;padding:13px 24px;transition:.14s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.btn-pri{background:var(--act);color:var(--act-ink)}
.btn-pri:hover{background:var(--act-hi)}
.btn-line{box-shadow:inset 0 0 0 1px var(--rule);color:var(--text)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--act);color:var(--act)}
.btn-sm{padding:10px 17px;font-size:12.5px}

/* ── hero ── */
.hero{position:relative;padding:40px 0 30px;overflow:hidden}
/* the mark itself, cropped and bled off the edge — structure, not decoration */
.hero .mark{
  position:absolute;right:-150px;top:-90px;width:520px;opacity:.05;
  pointer-events:none;user-select:none;
}
.hero .in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
.hero h1{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(27px,3.3vw,44px);line-height:.94;letter-spacing:-.028em;margin-top:14px;
}
.hero h1 .t{color:var(--brand)}
.hero h1 .o{
  color:var(--act);
  /* the one line that steps out of the block — a human would do this */
  display:inline-block;margin-left:.06em;
}
.hero .lede{
  color:var(--dim);font-size:18px;margin-top:26px;max-width:44ch;
  border-left:2px solid var(--act);padding-left:18px;
}
.hero .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.hero-copy{min-width:0}
.hero-side{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Stat line — hairline separated, sized to sit beside the headline
   rather than under it. Deliberately small: it is orientation, not a claim. */
.statline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statline div{padding:12px 14px;border-right:1px solid var(--line)}
.statline div:last-child{border-right:0}
.statline .n{display:block;font-family:var(--disp);font-weight:900;font-size:22px;line-height:1;letter-spacing:-.02em}
.statline .n sup{font-size:11px;font-weight:700;color:var(--faint);margin-left:1px}
.statline .l{display:block;font-family:var(--num);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:7px}

/* ── FRONT RUNNERS ─────────────────────────────────────────────────────
   The whole reason this section exists: somebody who already knows which
   firm they want should be able to copy a code without scrolling. It sits
   directly under a deliberately short hero.
   ───────────────────────────────────────────────────────────────────── */
.runners-sec{padding:0 0 44px}
.runners-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.runners-head .all{font-family:var(--num);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.runners-head .all:hover{color:var(--act)}
.runners{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.runner{
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);
  padding:15px 16px;display:flex;flex-direction:column;gap:14px;transition:.14s;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.runner:hover{box-shadow:inset 0 0 0 1px var(--rule)}

/* Logo and name on the left, the offer top-right — the shape a scanner
   expects, and it keeps the offer from becoming a wall. */
.rhead{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:11px;min-width:0}
.rlogo{
  width:38px;height:38px;flex:none;display:grid;place-items:center;overflow:hidden;
  font-family:var(--disp);font-weight:800;font-size:13px;color:#fff;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.rlogo img{width:100%;height:100%;object-fit:cover;display:block}

/* Firm names are proper nouns. Setting them in heavy uppercase was the
   thing making this section hard to read — four of them in a row turns
   into a shouting match and the eye has no lowercase shapes to latch on to. */
.runner h3{
  font-family:var(--disp);font-weight:700;text-transform:none;
  font-size:15.5px;line-height:1.25;letter-spacing:-.008em;
  align-self:center;min-width:0;
}

/* Small, quiet, and still the first thing you see because it is the only
   colour on the card. Percentage over code, no gap — one object. */
.offer{display:flex;flex-direction:column;min-width:104px;overflow:hidden;border-radius:8px}
.ooff{
  background:var(--act);color:var(--act-ink);text-align:center;
  font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 8px;white-space:nowrap;
}
.ooff.flat{background:var(--brand);color:#fff}
.ocode{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  background:var(--bg-deep);color:var(--brand);padding:6px 8px;transition:.14s;
  font-family:var(--num);font-weight:600;font-size:10.5px;letter-spacing:.08em;
  box-shadow:inset 0 0 0 1px var(--line);
}
.ocode svg{width:11px;height:11px;flex:none;opacity:.6}
.ocode:hover{background:var(--brand);color:#fff}
.ocode:hover svg{opacity:1}
.ocode.copied{background:var(--pos);color:#04231a}

.rgo{
  font-family:var(--num);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
  transition:.14s;
}
.rgo:hover{color:var(--act)}
.runners-note{font-family:var(--num);font-size:11px;color:var(--faint);margin-top:14px}

/* ── section rhythm: deliberately uneven, not a stack of equal blocks ── */
.sheet-sec{padding:56px 0 60px}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:34px}
.sec-top .lede{color:var(--dim);font-size:15.5px;margin-top:12px;max-width:52ch}
.warn{
  font-family:var(--num);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg);padding:7px 11px;white-space:nowrap;
}

/* The comparison table itself is rendered by the PropXConnect PLUGIN,
   which ships its own stylesheet. The theme deliberately carries no
   table CSS — two stylesheets fighting over the same rows is how a
   re-skin goes wrong. The plugin follows this palette via the
   [propxconnect palette="…"] attribute, set for you in
   propx_render_comparison(). */

/* ── rewards: a ruled ladder, not four identical cards ── */
.rw{background:var(--bg-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0}
.rung{
  display:grid;grid-template-columns:180px 1fr auto;gap:30px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);transition:.15s;
}
.rung:first-of-type{border-top:2px solid var(--rule)}
.rung:hover{padding-left:12px}
.rung .c{font-family:var(--disp);font-weight:900;font-size:clamp(38px,4.6vw,58px);line-height:.82;letter-spacing:-.04em;color:var(--glow)}
.rung .c small{display:block;font-family:var(--num);font-size:9.5px;font-weight:400;letter-spacing:.19em;color:var(--faint);margin-top:9px;text-transform:uppercase}
.rung h3{font-size:22px;text-transform:uppercase}
.rung p{color:var(--dim);font-size:15px;margin-top:6px;max-width:56ch}
.rung .t{font-family:var(--num);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.rung.first .c{color:var(--act)}
.rung.first .t{color:var(--act)}

/* ── how it works: three ruled columns ── */
.how{padding:64px 0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0;margin-top:34px}
.cols > div{padding:26px 30px 8px;border-left:1px solid var(--line);border-top:2px solid var(--rule)}
.cols > div:first-child{padding-left:0;border-left:0}
.cols .ix{font-family:var(--disp);font-weight:900;font-size:15px;color:var(--brand);letter-spacing:.02em}
.cols h3{font-size:20px;text-transform:uppercase;margin:14px 0 9px}
.cols p{color:var(--dim);font-size:15px}

/* ── footer ── */
.foot{padding:52px 0 60px;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px}
.foot .r{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center}
.foot .lk{display:flex;gap:24px;flex-wrap:wrap}
.foot .lk a:hover{color:var(--text)}
.foot .d{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;max-width:86ch}

@media (max-width:1080px){
  .runners{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero .in{grid-template-columns:1fr;gap:26px}
  .hero .mark{right:-200px;top:auto;bottom:-90px;width:420px}
  .nav{display:none}
  .statline{grid-template-columns:repeat(2,1fr)}
  .statline div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .statline div:nth-child(2n){border-right:0}
  .rung{grid-template-columns:1fr;gap:12px}
  .rung .t{text-align:left}
  .sheet-sec,.rw,.how{padding-top:44px;padding-bottom:40px}
  .runners{gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* =====================================================================
   9. PLUGIN EMBED
   The PropXConnect plugin renders full-bleed with
   width:100vw; margin-left:calc(50% - 50vw).
   100vw includes the scrollbar, so on desktop it overhangs by the
   scrollbar width. We clip that on BODY.

   ⚠ It must stay `clip`, not `hidden`. `overflow:hidden` turns body
   into a scroll container and silently kills `position:sticky` on the
   header. If the header ever stops sticking, check this line first.
   ===================================================================== */
body{overflow-x:clip}

.pxc-embed{margin:0}
.pxc-embed #pxc-root{margin-top:0;margin-bottom:0}
.pxc-missing{
  border:1px solid var(--neg);color:var(--neg);padding:22px 24px;margin:28px 0;
  font-family:var(--num);font-size:13.5px;line-height:1.6;
}
.pxc-missing b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:16px;margin-bottom:8px;letter-spacing:-.01em}

/* =====================================================================
   10. GENERIC PAGE / POST CONTENT
   ===================================================================== */
/* Keep .wrap's 28px gutter — a shorthand here silently wiped it and left
   page titles flush against the viewport edge while the content below stayed
   inset. Any padding rule on an element that also carries .wrap must restate
   the horizontal value. */
.page-head{padding:64px 28px 0}
.page-head h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.6vw,62px);line-height:.92;letter-spacing:var(--disp-track)}
.entry{padding:34px 0 80px;max-width:78ch}
.entry p,.entry ul,.entry ol,.entry blockquote,.entry figure,.entry table{margin-bottom:1.15em}
.entry h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:28px;margin:1.8em 0 .5em;letter-spacing:-.015em}
.entry h3{font-size:21px;margin:1.5em 0 .4em}
.entry a{color:var(--act);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.25em}
.entry li{margin-bottom:.35em}
.entry blockquote{border-left:2px solid var(--act);padding-left:18px;color:var(--dim)}
.entry code{font-family:var(--num);font-size:.9em;background:var(--raise);padding:2px 6px}
.entry pre{font-family:var(--num);background:var(--raise);padding:18px;overflow-x:auto;font-size:13px}
.entry img{margin:0 auto}
.entry table{border-collapse:collapse;width:100%}
.entry th,.entry td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
.entry th{font-family:var(--num);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.alignwide{max-width:1240px}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption-text,.wp-element-caption{font-family:var(--num);font-size:12px;color:var(--faint);margin-top:8px}

/* Admin bar: the sticky header has to sit under it, not behind it. */
body.admin-bar .head{top:32px}
@media screen and (max-width:782px){body.admin-bar .head{top:46px}}
@media (max-width:960px){body.admin-bar .head{top:46px}}

/* Mobile nav */
.nav-burger{display:none;width:42px;height:42px;color:var(--dim);font-size:19px;box-shadow:inset 0 0 0 1px var(--rule)}
.nav-burger:hover{color:var(--text)}
@media (max-width:960px){
  .nav-burger{display:grid;place-items:center}
  .nav.open{
    display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--rule);padding:8px 0;
  }
  .nav.open li{width:100%;border-bottom:1px solid var(--line)}
  .nav.open li:last-child{border-bottom:0}
  .nav.open a{height:auto;line-height:1.4;padding:15px 28px;border-bottom:0}
  .head .wrap{position:relative}
}
.nav .sub-menu{display:none}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:999;background:var(--act);color:var(--act-ink);padding:12px 18px}

/* Custom logo, when one is set in the Customizer. */
.brand .custom-logo,.brand img{height:40px;width:auto;flex:none}

/* Pagination on the blog index. */
.pagination,.nav-links.pagination{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--num);font-size:13px}
.page-numbers{padding:9px 14px;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}
.page-numbers:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--rule)}
.page-numbers.current{background:var(--act);color:var(--act-ink);box-shadow:none}

/* =====================================================================
   11. REWARDS PROGRAM — points pill, rate cards, ladders, tiers
   ===================================================================== */

/* Points pill in the header. Number, goal, and a progress bar for the next
   reward in reach. Shows an honest zero until crediting is wired up. */
.pts-pill{
  display:flex;align-items:center;gap:7px;position:relative;
  padding:0 13px;box-shadow:inset 0 0 0 1px var(--rule);
  font-family:var(--num);line-height:1;transition:.14s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.pts-pill:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.pts-pill .pp-mark{
  width:9px;height:9px;flex:none;background:var(--glow);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.pts-pill.is-prem .pp-mark{background:var(--act)}
.pts-pill .pp-n{font-size:14px;font-weight:600;color:var(--text)}
.pts-pill .pp-goal{font-size:11px;color:var(--faint)}
.pts-pill .pp-goal::before{content:"/ "}
.pts-pill .pp-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.pts-pill .pp-n{position:relative;top:-1px}
.pts-pill .pp-bar i{display:block;height:100%;background:var(--glow)}
.pts-pill.is-prem .pp-bar i{background:var(--act)}

.page-head .page-lede{color:var(--dim);font-size:16.5px;margin-top:16px;max-width:60ch}
.page-head h1{font-size:clamp(28px,3.4vw,46px)}

/* Three rate cards. The number is the message, so nothing else competes. */
.rate-band{padding:34px 0 8px}
.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rate-card{
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);padding:20px;
  display:flex;flex-direction:column;gap:5px;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.rate-card.is-prem{box-shadow:inset 0 0 0 1px var(--act)}
.rate-card .rl{font-family:var(--num);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.rate-card.is-prem .rl{color:var(--act)}
.rate-card .rn{font-family:var(--disp);font-weight:900;font-size:42px;line-height:1;letter-spacing:-.03em;margin-top:4px}
.rate-card.is-prem .rn{color:var(--act)}
.rate-card.is-flat .rn{color:var(--glow)}
.rate-card .ru{font-family:var(--num);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.rate-card p{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.5}

.rw-sec{padding:56px 0}
.rw-sec.alt{background:var(--bg-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rw-sec .sec-lede{color:var(--dim);font-size:15px;margin-top:12px;max-width:64ch}
.rw-sec h2.disp{margin-top:12px}

/* Ladder tables — hairline rows, tabular figures, no boxes. */
.ladder-table{margin-top:26px;border-top:2px solid var(--rule);overflow-x:auto}
.lt-head,.lt-row{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr 1.2fr;gap:14px;align-items:center;min-width:640px}
.lt-head.four,.lt-row.four{grid-template-columns:2.4fr 1fr 1.2fr 1.2fr}
.lt-head.five,.lt-row.five{grid-template-columns:1.4fr 1.2fr 1.2fr 1.2fr .8fr}
.lt-head{
  font-family:var(--num);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:12px 4px;border-bottom:1px solid var(--rule);
}
.lt-row{padding:15px 4px;border-bottom:1px solid var(--line)}
.lt-row:last-child{border-bottom:0}
.lt-row:hover{background:var(--raise)}
.lt-name{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.25}
.lt-name i{display:block;font-style:normal;font-family:var(--num);font-size:10.5px;color:var(--faint);margin-top:4px;letter-spacing:.06em}
.lt-num{font-family:var(--num);font-size:14.5px;font-variant-numeric:tabular-nums}
.lt-num.dim{color:var(--faint)}
.lt-num.hi{color:var(--act);font-weight:600}
.lt-pts{font-family:var(--disp);font-weight:900;font-size:20px;color:var(--glow);letter-spacing:-.02em}
.lt-edge{
  font-family:var(--num);font-size:11.5px;font-weight:600;text-align:center;
  background:var(--act);color:var(--act-ink);padding:5px 7px;justify-self:start;
}
.fineprint{font-family:var(--num);font-size:11px;color:var(--faint);margin-top:18px;line-height:1.6;max-width:80ch}

/* Two tiers, side by side. */
.steps-sec{padding:44px 0 8px}
.tiers-sec{padding:56px 0;background:var(--bg-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.tier{
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);padding:24px;
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
}
.tier.is-prem{box-shadow:inset 0 0 0 1px var(--act)}
.tier .tk{font-family:var(--num);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.tier.is-prem .tk{color:var(--act)}
.tier h3{font-size:24px;text-transform:uppercase;margin:8px 0 12px;letter-spacing:-.015em}
.tier .trate{font-family:var(--disp);font-weight:900;font-size:38px;line-height:1;letter-spacing:-.03em;display:block}
.tier.is-prem .trate{color:var(--act)}
.tier .trate i{font-style:normal;font-family:var(--num);font-size:11px;font-weight:400;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin-left:9px}
.tier ul{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.tier li{position:relative;padding-left:20px;margin-bottom:11px;font-size:14.5px;color:var(--dim);line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--brand);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tier.is-prem li::before{background:var(--act)}
.tier li strong{color:var(--text);font-weight:600}

/* Worked example. */
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.ex{background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);padding:20px;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);}
.ex.is-prem{box-shadow:inset 0 0 0 1px var(--act)}
.ex .exl{font-family:var(--num);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ex .exn{display:block;font-family:var(--disp);font-weight:900;font-size:44px;line-height:1;letter-spacing:-.035em;margin-top:8px}
.ex.is-prem .exn{color:var(--act)}
.ex .exu{font-family:var(--num);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ex p{color:var(--dim);font-size:13.5px;margin-top:12px;line-height:1.5}

.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;margin-top:24px}
.faq > div{padding:22px 26px 18px;border-left:1px solid var(--line);border-top:2px solid var(--rule)}
.faq > div:first-child{padding-left:0;border-left:0}
.faq h3{font-size:16.5px;margin-bottom:8px}
.faq p{color:var(--dim);font-size:14.5px;line-height:1.55}

.rw-cta{padding:60px 0;text-align:center;border-top:1px solid var(--line)}
.rw-cta h2{margin-bottom:22px}
.rw-cta .btn + .btn{margin-left:10px}

@media (max-width:900px){
  .rate-grid,.ex-grid{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .faq > div{padding-left:0;border-left:0}
  .pts-pill .pp-goal{display:none}
}

/* Earn rate by firm — a ruled list, top rate flagged. */
.firm-rates{margin-top:26px;border-top:2px solid var(--rule)}
.fr{
  display:grid;grid-template-columns:44px 1fr auto auto;gap:16px;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.fr:last-child{border-bottom:0}
.fr:hover{background:var(--raise)}
.fr-logo{
  width:44px;height:44px;display:grid;place-items:center;overflow:hidden;
  font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.fr-logo img{width:100%;height:100%;object-fit:cover;display:block}
.fr-name{font-family:var(--disp);font-weight:700;font-size:16px;min-width:0}
.fr-rate{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:-.025em;white-space:nowrap}
.fr-rate i{font-style:normal;font-family:var(--num);font-size:10px;font-weight:400;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin-left:8px}
.fr-prem{font-family:var(--num);font-size:11px;color:var(--faint);letter-spacing:.05em;white-space:nowrap;text-align:right}
.fr.is-top .fr-rate{color:var(--glow)}
.fr.is-top .fr-name::after{
  content:"Top rate";margin-left:10px;font-family:var(--num);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--act);
  box-shadow:inset 0 0 0 1px var(--act);padding:3px 6px;white-space:nowrap;
}
@media (max-width:720px){
  .fr{grid-template-columns:38px 1fr auto;gap:12px}
  .fr-prem{display:none}
  .fr-logo{width:38px;height:38px}
  .fr.is-top .fr-name::after{display:block;margin:6px 0 0;width:max-content}
}


/* =====================================================================
   12. MEMBER DASHBOARD
   ===================================================================== */
.dash-head{padding:44px 28px 0;max-width:1240px;margin:0 auto}
.dash-hi{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,3vw,38px);line-height:1;letter-spacing:var(--disp-track);
}
.dash-hi em{font-style:normal;color:var(--brand)}
.dash-sub{color:var(--dim);font-size:15px;margin-top:12px;max-width:60ch}
.dash-body{max-width:1240px;margin:0 auto;padding:26px 28px 80px}

/* Submission deadlines — read from the plugin so they can't drift. */
.dash-rules{
  background:var(--bg-deep);box-shadow:inset 0 0 0 1px var(--line);
  padding:20px 22px;margin-top:18px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.dash-rules h2{
  font-family:var(--num);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;font-weight:500;
}
.dash-rule{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.dash-rule:first-of-type{border-top:0;padding-top:0}
.dash-rule .win{
  font-family:var(--disp);font-weight:800;font-size:14px;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;min-width:96px;color:var(--act);
}
.dash-rule .win.slow{color:var(--brand)}
.dash-rule .firms{font-size:14px;color:var(--text)}
.dash-note{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13px;color:var(--dim);line-height:1.5;
}
.dash-note b{color:var(--text);font-weight:600}

/* A word where a number normally sits — same weight, smaller so it doesn't
   overpower the digits beside it. */
.statline .n.never{font-size:clamp(19px,2vw,25px);letter-spacing:-.01em}

/* ---- v1.12.0: runners as a carousel -----------------------------------
   Every firm, scroll-snapped. CSS does the scrolling; the arrows only nudge
   it, so a dead script leaves a list that still swipes.
   ---------------------------------------------------------------------- */
.runners{overflow:hidden;padding:2px 0 14px;margin:0}
.runners::-webkit-scrollbar{height:6px}
.runners::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}

.runners:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.runners-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.runners-nav{display:flex;gap:8px}
.rnav{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--dim);
  font-size:19px;line-height:1;transition:.14s;
}
.rnav:hover{border-color:var(--brand);color:var(--text)}
.rnav[disabled]{opacity:.3;cursor:default}
.rnav[disabled]:hover{border-color:var(--line);color:var(--dim)}
.runners-head .all{white-space:nowrap}
@media(max-width:640px){
  .runners-nav{display:none} /* swipe is the obvious gesture on touch */
  .runners > .runner{flex-basis:78%}
}

/* Drag feel: grab cursor, and no text selection fighting the drag. */
.runners{cursor:grab;user-select:none;-webkit-user-select:none}
.runners.dragging{cursor:grabbing;scroll-behavior:auto}
.runners.dragging a{pointer-events:none}

/* ---- v1.14.0: bare carousel -------------------------------------------
   No arrows, no scrollbar. It moves on its own and drags under the cursor,
   so the controls were decoration that only added edges to look at.
   ---------------------------------------------------------------------- */
.runners{scrollbar-width:none;-ms-overflow-style:none}
.runners::-webkit-scrollbar{display:none;height:0}
.runners-head{display:none}
.runners-foot{display:flex;justify-content:center;margin-top:22px}
.runners-foot .btn{min-width:220px;justify-content:center}


/* ---- v1.15.0: continuous marquee --------------------------------------
   The track is twice the card list wide and slides by transform, so there is
   no scroll position to snap and no seam when it wraps.
   ---------------------------------------------------------------------- */
.runners{position:relative;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none}
.runners.dragging{cursor:grabbing}
.runners.dragging a{pointer-events:none}
.runners-track{
  display:flex;gap:14px;width:max-content;
  will-change:transform;transform:translate3d(0,0,0);
}
.runners-track > .runner{flex:0 0 clamp(240px,26vw,300px)}

/* Fade the edges so cards enter and leave rather than being sliced off. */
.runners::before,.runners::after{
  content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.runners::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.runners::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

/* Room above, and a line about what the strip is for. */
.runners-sec{padding-top:16px}
.runners-title{margin:38px 0 20px}
.runners-title .kicker{display:block;margin-bottom:7px}
.runners-title p{margin:0;color:var(--dim);font-size:15px;max-width:60ch}

@media(max-width:640px){
  .runners-track > .runner{flex-basis:78%}
  .runners::before,.runners::after{width:28px}
}
.rw-lede{margin:14px 0 0;color:var(--dim);font-size:15px;max-width:62ch}