/* ============ tokens ============ */
:root{
  color-scheme: dark;

  /* surfaces — near-black ladder, never pure #000 */
  --canvas:#0b0d10;
  --surface-1:#13161b;
  --surface-2:#1a1e25;
  --surface-3:#232830;
  --hairline:#20242c;
  --hairline-strong:#2c323c;

  /* text */
  --ink:#f2f3f5;
  --text:#c9ced6;
  --text-2:#a2a8b2;
  --text-3:#71787f;
  --text-4:#4d525b;

  /* brand — gold carries every primary action and value claim */
  --gold:#f0b90b;
  --gold-bright:#fcd535;
  --on-gold:#101114;
  --gold-hairline:rgba(240,185,11,.28);
  --gold-tint:rgba(240,185,11,.07);

  /* financial semantics — credits / savings only */
  --credit:#0ecb81;

  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;

  --pad:clamp(20px,4vw,56px);
  --maxw:1216px;
  --section:clamp(64px,8vw,104px);

  /* shared ledger columns: index column + gutter — one left edge everywhere */
  --ci:76px;
  --cg:28px;

  --font-display:"Archivo",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media(max-width:820px){
  :root{--ci:56px}
}

/* ============ base ============ */
*{box-sizing:border-box}
/* The hidden attribute has to outrank whatever a component sets on itself.
   The browser's own [hidden]{display:none} lives in the UA stylesheet, and
   any author rule beats the whole UA stylesheet regardless of specificity --
   so a single `display:grid` on a component silently un-hides it. That is
   exactly what put the promo dialog over the home page from the moment it
   loaded: the attribute was there, the element was hidden as far as
   JavaScript was concerned, and it was on screen anyway. Forty-plus elements
   across the site are toggled this way, so the guarantee belongs here rather
   than on each of them. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:420;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--gold);color:var(--on-gold)}

h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,76px);font-weight:680;line-height:1.02;letter-spacing:-.038em}
h2{font-size:clamp(27px,3.8vw,44px);font-weight:650;line-height:1.08;letter-spacing:-.03em}
h3{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
p{margin:0}

.lede{
  color:var(--text-2);
  font-size:clamp(15px,1.45vw,17.5px);
  line-height:1.6;
  max-width:54ch;
  text-wrap:pretty;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:var(--section)}

/* mono utility voices */
.mono{font-family:var(--font-mono)}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);
}
.eyebrow b{color:var(--gold);font-weight:500}
.tick{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-4);white-space:nowrap;
}
.num-label{
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:560;letter-spacing:.004em;
  padding:0 20px;height:44px;
  border-radius:var(--radius-sm);
  border:1px solid var(--hairline-strong);
  background:transparent;color:var(--ink);
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .13s ease;
}
/* The two outbound "buy at the firm" buttons, which are the only ones whose
   label is built from a firm's name. For a firm that has issued no affiliate
   link it reads "Copy DESK and open FTM Funded Trader Markets" -- 44
   characters, which wraps to two lines on a phone. .btn is a fixed 44px, so
   the second line rendered outside the pill. These grow instead; min-height
   keeps them identical to every other .btn whenever the label does fit, which
   is every desktop width and every firm that has a link. */
#fpGo,#pcGo{height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;text-align:center}

.btn:active{transform:scale(.98)}
.btn:hover{background:var(--surface-1);border-color:var(--text-4)}
.btn-gold{
  background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:620;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .13s ease,box-shadow .2s ease;
}
.btn-gold:hover{
  background:var(--gold-bright);border-color:var(--gold-bright);color:var(--on-gold);
  box-shadow:0 0 30px rgba(240,185,11,.25);
  transform:translateY(-1px);
}
.btn-dark{
  background:var(--on-gold);border-color:var(--on-gold);color:var(--gold);font-weight:620;
}
.btn-dark:hover{background:#000;border-color:#000;color:var(--gold-bright)}
.btn:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/* ============ nav ============ */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(11,13,16,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex;align-items:center;gap:30px;height:64px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand .mark{width:28px;height:28px;border-radius:7px}
.brand .name{
  font-weight:740;letter-spacing:-.03em;font-size:17.5px;color:var(--ink);line-height:1;
}
.brand .name em{font-style:normal;color:var(--gold)}
.nav-links{display:flex;gap:4px}
.nav-links a{
  font-size:13.5px;font-weight:480;color:var(--text-2);
  padding:8px 12px;border-radius:var(--radius-sm);
  transition:color .14s ease,background .14s ease;
}
.nav-links a:hover{color:var(--ink);background:var(--surface-1)}
.nav .btn{height:38px;padding:0 16px;font-size:13.5px;white-space:nowrap}
@media(max-width:900px){.nav-links{display:none}}

/* "Get the code" is three words in a nav that still carries the brand and Sign
   in once the links drop out. Below ~430px it wrapped to two lines inside the
   fixed 38px pill -- three at 320px -- so the label shortens rather than the
   pill growing: a nav button that changes height moves the whole sticky header
   and everything measured from it. The gap tightens at the same breakpoint,
   which is what buys "Get code" enough room to stay on one line at 320px.
   Other pages carry a longer label here ("Back to the board") and never
   wrapped, because their headers have no Sign in competing for the width. */
.nav .btn .lbl-sm{display:none}
@media(max-width:430px){
  .nav-in{gap:14px}
  .nav .btn .lbl-lg{display:none}
  .nav .btn .lbl-sm{display:inline}
}

/* A signed-in member does not read "Sign in" here -- app.js writes "My account"
   or "Admin desk", three characters wider, and at 320px that was enough to push
   the button past the edge and give the whole page a sideways scroll. The name
   beside it is already hidden below 640px, so there is nothing left to drop;
   what is left is the spacing. 360px is the floor for phones still sold, and
   above it the nav has room to spare, so this stays out of the way up there. */
@media(max-width:360px){
  .nav-in{gap:10px}
  .nav .btn{padding:0 12px}
}
/* Narrower still, and the last of the slack goes. This is not a phone size --
   320px is the floor for those, and the rule above already clears it there.
   It is a desktop window dragged down to 320px, where a classic 15px scrollbar
   leaves 305px of content and the signed-in nav went 7px over. Kept separate
   from the 360px rule so the Androids that actually sit at 360 are not made to
   look cramped for the sake of a window nobody browses at. */
@media(max-width:340px){
  .nav-in{gap:8px}
  .nav .btn{padding:0 10px}
}

/* desk status strip — part of the chrome */
.strip{border-top:1px solid var(--hairline)}
.strip-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:30px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);
  white-space:nowrap;overflow:hidden;
}
.strip-in b{font-weight:500;color:var(--text-3)}
.strip-in .gold{color:var(--gold)}
.strip-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--credit);margin-right:8px;vertical-align:1px;
}
@media(max-width:760px){.strip-in .strip-r{display:none}}

/* ============ hero ============ */
.hero{padding-top:clamp(40px,5vw,68px);position:relative}
.hero h1{
  font-size:clamp(46px,7.4vw,98px);
  font-weight:700;line-height:.99;letter-spacing:-.045em;
  max-width:100%;
}
.hero h1 .tc{
  font-family:var(--font-mono);font-weight:600;
  font-size:.86em;letter-spacing:-.03em;
  color:var(--gold);
}
@media(max-width:560px){.hb{display:none}}
.hero-sub{
  display:grid;grid-template-columns:1fr 1.04fr;
  gap:clamp(32px,4.5vw,72px);align-items:start;
  margin-top:clamp(30px,3.6vw,52px);
}
@media(max-width:920px){.hero-sub{grid-template-columns:1fr;gap:40px}}
.link-quiet{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);
  padding:14px 4px;
  transition:color .16s ease;
}
.link-quiet i{font-style:normal;color:var(--gold);transition:transform .18s ease}
.link-quiet:hover{color:var(--ink)}
.link-quiet:hover i{transform:translateX(3px)}
.btn-gold i{font-style:normal;font-family:var(--font-mono);transition:transform .18s ease}
.btn-gold:hover i{transform:translateX(3px)}

/* live deal desk — hero left column */
.deals{
  margin-top:30px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.deals-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.deals-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--credit);display:inline-block;margin-right:8px}
.deal{
  display:grid;grid-template-columns:auto 1fr auto;gap:3px 12px;align-items:center;
  padding:13px 15px;border-bottom:1px solid var(--hairline);
  transition:background .15s ease;
}
.deal:last-child{border-bottom:0}
.deal:hover{background:var(--surface-2)}
.deal .d-logo{
  grid-column:1;grid-row:1 / span 2;align-self:center;
  width:28px;height:28px;border-radius:7px;position:relative;
  display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--hairline-strong);
  font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--gold);
}
.deal .d-logo img{position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:3px}
.deal .d-firm{grid-column:2;grid-row:1;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
.deal .d-off{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.deal .d-off i{font-style:normal;color:var(--text-4);margin-left:8px;transition:transform .15s ease,color .15s ease}
.deal:hover .d-off i{transform:translateX(3px);color:var(--gold)}
.deal .d-note{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);
  letter-spacing:.03em;grid-column:2;grid-row:2;
}

/* instrument bar (trust) — full-width, hairline-bounded */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:clamp(40px,5vw,64px);
  background:rgba(11,13,16,.78);
}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}
  .trust > div:nth-child(3){border-left:0}
  .trust > div:nth-child(n+3){border-top:1px solid var(--hairline)}
}
.trust > div{
  padding:18px 24px;
  border-left:1px solid var(--hairline);
}
.trust > div:first-child{border-left:0}
.trust b{
  display:block;
  font-family:var(--font-mono);font-weight:600;font-size:24px;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:5px;font-variant-numeric:tabular-nums;
}
.trust b .gold{color:var(--gold-bright)}
.trust div span{display:block;line-height:1.5;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase}
@media(max-width:640px){
  .trust{grid-template-columns:1fr}
  .trust > div{border-left:0;border-top:1px solid var(--hairline);padding:16px 18px}
  .trust > div:first-child{border-top:0}
}

/* field interaction note */
.field-note{
  margin-top:12px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);
  display:flex;align-items:center;gap:9px;
}
.field-note .pulse{
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  animation:fpulse 2s ease-in-out infinite;
}
@keyframes fpulse{50%{opacity:.2}}
@media(hover:none){.field-note{display:none}}
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
}
.hero > .wrap{position:relative;z-index:1}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}

/* ============ terminal panel (signature) ============ */
.term{
  position:relative;
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 30px 70px -45px rgba(0,0,0,.85);
}
.term-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;border-bottom:1px solid var(--hairline);
}
.term-bar .t{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.term-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.term-bar .live{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--credit);
}
.term-body{padding:20px 18px 8px}
.field{margin-bottom:15px}
.field label,.seg-label{
  display:block;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:8px;
}
.field select{
  width:100%;appearance:none;
  background:var(--surface-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23f0b90b'><path d='M0 0h10L5 6z'/></svg>") no-repeat right 14px center;
  border:1px solid var(--hairline-strong);
  color:var(--ink);
  padding:12px 36px 12px 14px;
  border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:13px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.field select:hover{border-color:var(--text-4)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.field-row{grid-template-columns:1fr}}

/* segmented control for resets */
.seg{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface-2);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-md);
  padding:3px;gap:3px;
}
.seg button{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  color:var(--text-2);
  height:34px;border-radius:5px;
  padding:0 clamp(9px,1.2vw,14px);white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);font-weight:600}

.code-chip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px dashed var(--gold-hairline);
  background:var(--gold-tint);
  padding:12px 14px;border-radius:var(--radius-md);
  margin:18px 0 4px;
}
.code-chip .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--text-3);text-transform:uppercase}
.code-chip .v{font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:.3em;color:var(--gold-bright)}
.copy{
  border:1px solid var(--gold-hairline);color:var(--gold);
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 12px;border-radius:var(--radius-sm);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.copy:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.copy.done{background:var(--credit);border-color:var(--credit);color:#052b1b}

.readout{margin-top:14px;border-top:1px solid var(--hairline)}
.row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:13.5px;
}
/* Direct children throughout. The total's value is wrapped in .tot-wrap next
   to the blinking caret, so a plain descendant selector matched the number
   itself as a :first-child and handed it the label's 10.5px -- which is how
   the most important figure on the page came to render smaller than the list
   price above it, while the clamp() meant for it landed on the wrapper. */
.row > span:first-child{color:var(--text-3);letter-spacing:.04em}
.row > span:last-child{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.row.credit > span:last-child{color:var(--credit)}
.row.total{border-bottom:0;padding:18px 0 6px;align-items:center}
.row.total > span:first-child{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:10.5px;font-weight:500}
.row.total .tot-wrap{color:var(--gold-bright)}
/* Twice the rows above it and no more. It has to be the figure the eye lands
   on, which 13.5px next to 13.5px was not; it does not have to be a headline,
   which 46px was. */
.row.total [data-v="total"]{
  font-weight:700;font-size:clamp(24px,2.7vw,27px);letter-spacing:-.02em;line-height:1;
  color:var(--gold-bright);font-variant-numeric:tabular-nums;
}
.cur{
  display:inline-block;width:.42em;height:.85em;
  background:var(--gold-bright);margin-left:7px;
  animation:blink 1.1s steps(1) infinite;
}
/* Its width and height are in em, so it only scales with the total if it is
   told the total's size -- otherwise a 12.5px caret sits beside a 46px
   figure. Slimmer in proportion, so it reads as a cursor and not a block. */
.row.total .cur{font-size:clamp(24px,2.7vw,27px);width:.12em;height:.66em;margin-left:.16em}
@keyframes blink{50%{opacity:0}}
.term-foot{
  padding:12px 18px 14px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--text-4);line-height:1.6;
}

/* ============ ticker ============ */
.ticker{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:#090b0e;overflow:hidden;padding:12px 0;
  margin-top:var(--section);
}
.track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.track span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-4);padding:0 24px;white-space:nowrap;
}
.track span b{color:var(--gold);font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ page frame + index rail ============ */
.frame{position:fixed;inset:0;pointer-events:none;z-index:0}
.frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hairline)}
.frame::before{left:max(14px,calc(50% - var(--maxw)/2 - 30px))}
.frame::after{right:max(14px,calc(50% - var(--maxw)/2 - 30px))}
@media(max-width:1180px){.frame{display:none}}

.rail{
  position:fixed;z-index:56;top:50%;
  left:max(14px,calc(50% - var(--maxw)/2 - 30px));
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;gap:12px;
}
@media(max-width:1180px){.rail{display:none}}
.rail a{
  position:relative;display:block;width:26px;text-align:center;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.06em;color:var(--text-4);
  padding:3px 0;font-variant-numeric:tabular-nums;
  background:var(--canvas);border-radius:3px;
  transition:color .18s ease;
}
.rail a:hover{color:var(--text-2)}
.rail a.on{color:var(--gold)}
.rail a::after{
  content:attr(data-l);
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:4px;
  padding:4px 8px;color:var(--text-2);
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.rail a:hover::after{opacity:1}

/* ============ section headers — ruled index rows ============ */
/* meta line sits on the rule (eyebrow left, tick right); below it the index
   numeral occupies the shared 76px column so titles align with ledger titles */
.sec-head{
  border-top:1px solid var(--hairline-strong);
  padding-top:14px;
  display:grid;
  grid-template-columns:var(--ci) 1fr auto;
  grid-template-areas:
    "eb eb tk"
    "ix mn mn";
  gap:20px var(--cg);
  align-items:start;
  margin-bottom:clamp(28px,4vw,48px);
}
.sec-head .eyebrow{grid-area:eb}
.sec-head .tick{grid-area:tk;padding-top:1px}
.sec-head .sec-idx{grid-area:ix}
.sec-head > div{grid-area:mn}
.sec-idx{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(24px,3.2vw,38px);line-height:1;letter-spacing:-.02em;
  color:var(--text-4);font-variant-numeric:tabular-nums;
  padding-top:4px;
}
.sec-head h2{margin-top:0}
.sec-head .lede{margin-top:14px;max-width:54ch}
@media(max-width:640px){
  .sec-head{
    grid-template-columns:var(--ci) 1fr;
    grid-template-areas:
      "eb eb"
      "ix mn";
    gap:16px var(--cg);
  }
  .sec-head .tick{display:none}
  .sec-idx{font-size:22px;padding-top:5px}
}

/* ============ benefits ledger ============ */
.ledger{border-top:1px solid var(--hairline)}
.l-row{
  display:grid;grid-template-columns:var(--ci) 250px 1fr;gap:16px var(--cg);
  padding:26px 0;
  border-bottom:1px solid var(--hairline);
  transition:background .18s ease;
}
.l-row:hover{background:var(--surface-1)}
.l-row .num{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;color:var(--gold);padding-top:5px;
}
.l-row h3{font-size:17.5px}
.l-row p{color:var(--text-2);font-size:14px;line-height:1.62;max-width:60ch}
@media(max-width:820px){
  .l-row{grid-template-columns:var(--ci) 1fr}
  .l-row p{grid-column:2}
}

/* ============ the board (firms table) ============ */
.board{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.board table{width:100%;border-collapse:collapse}
.board thead th{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);
  text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--hairline);
  white-space:nowrap;
}
.board tbody td{
  padding:16px;border-bottom:1px solid var(--hairline);
  font-size:13.5px;vertical-align:middle;
}
.board tbody tr:last-child td{border-bottom:0}
.board tbody tr{transition:background .15s ease}
.board tbody tr:hover{background:var(--surface-2)}
.board .firm-cell{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{
  flex:none;width:36px;height:36px;border-radius:9px;
  display:grid;place-items:center;position:relative;
  background:var(--surface-3);
  border:1px solid var(--hairline-strong);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--gold);
}
.avatar i{font-style:normal}
.avatar img{
  position:absolute;inset:0;margin:auto;
  width:20px;height:20px;border-radius:4px;
  background:var(--surface-3);
}
/* A button, not a heading: it opens the firm's overview. Styled as the text
   it replaced, since the row should still read as a row -- the underline on
   hover is what says it does something. Buttons do not inherit font-family. */
.firm-name{
  font-family:inherit;font-weight:600;color:var(--ink);font-size:14.5px;
  letter-spacing:-.01em;line-height:1.25;
  background:none;border:0;padding:0;text-align:left;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.firm-name:hover{color:var(--gold);text-decoration-color:var(--gold-hairline)}
.firm-name:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.firm-mkt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;margin-top:3px}
.cell-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-2);white-space:nowrap}
.cell-disc{
  font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:4px;
  background:var(--gold-tint);color:var(--gold);
  border:1px solid var(--gold-hairline);
  white-space:nowrap;
}
.badge.dim{background:var(--surface-2);color:var(--text-3);border-color:var(--hairline-strong)}
.code-mini{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.22em;color:var(--gold-bright);
}
tr.locked .avatar{color:var(--text-4)}
tr.locked .firm-name{color:var(--text-3)}
tr.locked .firm-mkt,tr.locked .cell-meta{color:var(--text-4)}
tr.locked .code-mini{color:var(--text-4);letter-spacing:.3em}
.board-foot{
  padding:13px 16px;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--text-4);line-height:1.6;
}

/* ============ firm offer banner — rotates through the four desks ============ */
.fbanner{
  position:relative;overflow:hidden;
  border:1px solid var(--gold-hairline);
  border-radius:var(--radius-lg);
  background:linear-gradient(115deg,#12100a 0%,var(--surface-1) 46%,#0d0f14 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.fb-bg{
  position:absolute;inset:-45%;pointer-events:none;
  background-image:
    radial-gradient(rgba(240,185,11,.10) 1px,transparent 1.45px),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.45px);
  background-size:30px 30px,46px 46px;
  transform:rotate(7deg);
  animation:fbDrift 70s linear infinite;
}
@keyframes fbDrift{to{background-position:600px 300px,-460px 230px}}
.fb-in{
  position:relative;
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,44px);align-items:center;
  padding:clamp(24px,3.6vw,44px) clamp(20px,3.4vw,48px);
  min-height:clamp(170px,20vw,236px);
}
/* carousel: drag the desks past, no controls */
.fb-view{
  overflow:hidden;min-width:0;cursor:grab;
  touch-action:pan-y;                 /* horizontal drags us, vertical scrolls the page */
}
.fb-view.drag{cursor:grabbing}
.fb-track{
  display:flex;
  will-change:transform;
  transition:transform .52s cubic-bezier(.22,.61,.36,1);
}
.fb-track.free{transition:none}       /* finger down — track follows the pointer 1:1 */
.fb-slide{
  flex:0 0 100%;min-width:0;
  display:grid;grid-template-columns:auto auto 1fr;
  gap:clamp(16px,2.6vw,38px);align-items:center;
  user-select:none;-webkit-user-select:none;
  opacity:.32;transition:opacity .42s ease;
}
.fb-slide.on{opacity:1}
.fb-slide img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.fb-brand{text-align:left;min-width:120px}
.fb-logo{
  width:48px;height:48px;border-radius:11px;position:relative;
  display:grid;place-items:center;margin-bottom:10px;
  background:var(--surface-3);border:1px solid var(--hairline-strong);
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--gold);
}
.fb-logo img{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:5px}
.fb-name{font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.fb-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.fb-div{
  width:1px;align-self:stretch;
  background:linear-gradient(180deg,transparent,var(--gold-hairline) 30%,var(--gold-hairline) 70%,transparent);
}
.fb-eyebrow{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-2);
}
.fb-head{
  margin-top:10px;
  font-size:clamp(24px,3.4vw,42px);font-weight:740;
  letter-spacing:-.03em;line-height:1.02;color:var(--ink);
  text-transform:uppercase;
}
.fb-head b{
  font-weight:740;color:var(--gold-bright);
  text-shadow:0 0 22px rgba(240,185,11,.55);
  animation:fbGlow 2.2s ease-in-out infinite alternate;
}
@keyframes fbGlow{
  from{text-shadow:0 0 14px rgba(240,185,11,.35)}
  to{text-shadow:0 0 34px rgba(240,185,11,.75)}
}
.fb-facts{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--text-2);
}
.fb-facts span{padding:0 14px;border-left:1px solid var(--hairline-strong)}
.fb-facts span:first-child{padding-left:0;border-left:0}
.fb-cta{display:flex;flex-direction:column;align-items:center;gap:7px}
.fb-btn{
  border:1px solid var(--gold);color:var(--gold);background:transparent;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:13px 24px;border-radius:999px;white-space:nowrap;
  animation:fbBreath 3.2s ease-in-out infinite;
  transition:background .16s ease,color .16s ease;
}
@keyframes fbBreath{0%,100%{box-shadow:0 0 0 0 rgba(240,185,11,0)}50%{box-shadow:0 0 26px 0 rgba(240,185,11,.35)}}
.fb-btn:hover{background:var(--gold);color:var(--on-gold)}
.fb-lto{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-4)}
.fb-dots{display:flex;gap:6px;margin-top:6px}
.fb-dots i{width:4px;height:4px;border-radius:50%;background:var(--hairline-strong);cursor:pointer;transition:background .3s ease}
.fb-dots i.on{background:var(--gold)}
@media(max-width:880px){
  .fb-in{grid-template-columns:1fr}
  .fb-slide{grid-template-columns:1fr}
  .fb-div{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-hairline) 30%,var(--gold-hairline) 70%,transparent)}
  .fb-brand{display:flex;align-items:center;gap:12px}
  .fb-logo{margin-bottom:0}
  .fb-cta{flex-direction:row;justify-content:space-between;width:100%}
  .fb-dots{margin-top:0}
}

/* board filters — deal desk controls */
.board-filters{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--hairline);
}
.f-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.f-label{
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);
  margin-right:6px;
}
.f-group button{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  color:var(--text-2);letter-spacing:.04em;
  padding:7px 12px;border-radius:5px;
  border:1px solid var(--hairline-strong);
  transition:color .14s ease,background .14s ease,border-color .14s ease;
  font-variant-numeric:tabular-nums;
}
.f-group button:hover{color:var(--ink);border-color:var(--text-4)}
.f-group button.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
.f-reset{
  margin-left:auto;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);
  transition:color .14s ease;
}
.f-reset:hover{color:var(--gold)}

/* The list fee is what the firm asks; the true cost is what the desk exists
   to tell you. Struck through, so the pair reads as one before/after rather
   than as two prices to compare. */
.cell-fee{
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.cell-true{
  font-family:var(--font-mono);font-size:21px;font-weight:700;color:var(--gold-bright);
  letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* the /mo on monthly plans is a unit, not part of the number */
.cell-true .per{font-size:12px;font-weight:500;color:var(--text-2);letter-spacing:0}
.chip-cheap{
  display:inline-block;margin-left:9px;
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;
  background:rgba(14,203,129,.12);color:var(--credit);
  border:1px solid rgba(14,203,129,.3);
  vertical-align:2px;
}
.btn-row{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:9px 13px;border-radius:5px;
  background:var(--gold);color:var(--on-gold);
  border:1px solid var(--gold);white-space:nowrap;
  transition:background .15s ease,border-color .15s ease;
}
.btn-row:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn-row.done{background:var(--credit);border-color:var(--credit);color:#052b1b}

/* shed lower-priority columns before the card breakpoint */
@media (min-width:861px) and (max-width:1140px){
  .board thead th:nth-child(5),.board td.c-daily{display:none}
}
@media (min-width:861px) and (max-width:1000px){
  .board thead th:nth-child(3),.board td.c-target{display:none}
}

/* board → cards on small screens */
@media(max-width:860px){
  .board table,.board tbody,.board tr,.board td{display:block}
  .board thead{display:none}
  .board tbody tr{
    padding:16px;border-bottom:1px solid var(--hairline);
    display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:center;
  }
  .board tbody tr:last-child{border-bottom:0}
  .board tbody td{padding:0;border:0}
  .board td.c-firm{grid-column:1}
  .board td.c-true{grid-column:2;justify-self:end;text-align:right}
  .board td.c-size,.board td.c-target,.board td.c-dd,.board td.c-daily,.board td.c-fee{
    grid-column:span 1;
    display:flex;flex-direction:column;gap:3px;
    padding-top:8px;
  }
  .board td.c-size::before{content:"Account"}
  .board td.c-target::before{content:"Target"}
  .board td.c-dd::before{content:"Max drawdown"}
  .board td.c-daily::before{content:"Daily loss"}
  .board td.c-fee::before{content:"List fee"}
  .board td.c-size::before,.board td.c-target::before,.board td.c-dd::before,
  .board td.c-daily::before,.board td.c-fee::before{
    font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-4);
  }
  .board td.c-act{grid-column:1 / -1;padding-top:12px}
  .board td.c-act .btn-row{width:100%;justify-content:center}
  .board-filters{padding:12px}
  .f-reset{margin-left:0;width:100%;text-align:left}
}

/* ============ session log (how it works) ============ */
.session{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.s-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.s-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:9px}
.line{
  display:grid;grid-template-columns:88px 1fr;gap:20px;
  padding:22px 18px;border-bottom:1px solid var(--hairline);
}
.line:last-child{border-bottom:0}
.line .ps{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  color:var(--gold);white-space:nowrap;padding-top:3px;
  letter-spacing:.08em;
}
.line h3{font-size:16.5px;margin-bottom:7px}
.line p{color:var(--text-2);font-size:13.5px;line-height:1.6;max-width:66ch}
.line .mono-em{font-family:var(--font-mono);font-size:12px;color:var(--gold)}
.line .ret{font-family:var(--font-mono);font-size:11px;color:var(--text-3);margin-top:9px;letter-spacing:.04em}
.line .ret b{color:var(--credit);font-weight:500}
@media(max-width:560px){.line{grid-template-columns:1fr;gap:8px}}

/* ============ membership compare ledger ============ */
.compare{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{
  padding:15px 18px;border-bottom:1px solid var(--hairline);
  text-align:left;vertical-align:middle;font-size:13.5px;
}
.compare thead th{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);
}
.compare thead th.pro-col{color:var(--gold)}
.compare .feat{color:var(--text-2)}
.compare td.v{
  font-family:var(--font-mono);font-size:12px;color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.compare td.v.no{color:var(--text-4)}
.compare .pro-col{background:var(--surface-2);border-left:1px solid var(--hairline)}
.compare td.v.pro-col{color:var(--ink)}
.compare .price-row td{padding-top:18px;padding-bottom:18px}
.compare .price{
  font-family:var(--font-mono);font-size:clamp(22px,2.6vw,28px);font-weight:600;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.compare .price i{font-style:normal;font-family:var(--font-display);font-size:12px;color:var(--text-3);font-weight:440}
.compare .cta-row-t td{border-bottom:0;padding:18px}
.compare .cta-row-t .btn{width:100%}
.compare-foot{
  padding:13px 18px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--text-4);line-height:1.6;
}
@media(max-width:640px){
  .compare th,.compare td{padding:12px 10px;font-size:12.5px}
  .compare td.v{font-size:11px}
}

/* ============ protection band ============ */
.band{
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  background:var(--surface-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;
}
@media(max-width:880px){.band{grid-template-columns:1fr}}
.band h2{font-size:clamp(24px,3.2vw,38px)}
.stat-list{
  display:grid;
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--hairline);
  gap:1px;
}
.stat{
  background:var(--surface-2);
  padding:17px 20px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.stat span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.stat b{
  font-family:var(--font-mono);font-size:21px;font-weight:600;letter-spacing:-.01em;
  color:var(--gold-bright);font-variant-numeric:tabular-nums;
}

/* ============ join panel (free access) ============ */
.join{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(26px,3.6vw,46px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,4vw,60px);
  align-items:center;
}
@media(max-width:820px){.join{grid-template-columns:1fr}}
.join-fine{
  margin-top:18px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;
  color:var(--text-4);line-height:1.7;max-width:52ch;
}
.join-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--hairline);
}
.join-list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 2px;
  border-bottom:1px solid var(--hairline);
  font-size:14px;color:var(--text);line-height:1.5;
}
.join-list li::before{
  content:"→";color:var(--gold);
  font-family:var(--font-mono);font-size:12px;line-height:1.6;flex:none;
}

/* ============ gold band stacking (sits above the fixed frame rails) ============ */
.close-band{position:relative;z-index:1}

/* ============ faq ============ */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:21px 0;display:flex;gap:var(--cg);align-items:baseline;
  font-weight:560;font-size:15.5px;color:var(--ink);letter-spacing:-.008em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;color:var(--gold);
  font-family:var(--font-mono);font-size:17px;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq .q-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--text-4);flex:none;width:var(--ci)}
.faq p{padding:0 0 24px calc(var(--ci) + var(--cg));color:var(--text-2);font-size:14px;line-height:1.65;max-width:72ch;text-wrap:pretty}
@media(max-width:600px){
  .faq summary{gap:14px}
  .faq .q-n{width:auto}
  .faq p{padding-left:0}
}

/* ============ closing gold band ============ */
.close-band{
  margin-top:var(--section);
  background:var(--gold);
  color:var(--on-gold);
}
.close-in{
  padding-top:clamp(60px,8vw,110px);
  padding-bottom:clamp(60px,8vw,110px);
  display:grid;grid-template-columns:1.2fr auto;gap:clamp(28px,4vw,64px);align-items:center;
}
@media(max-width:820px){.close-in{grid-template-columns:1fr}}
.close-band .eyebrow{color:rgba(16,17,20,.62)}
.close-band h2{
  color:var(--on-gold);
  font-size:clamp(30px,4.6vw,54px);
  letter-spacing:-.035em;line-height:1.04;
  margin-top:16px;
}
.close-band .sub{
  margin-top:18px;color:rgba(16,17,20,.72);
  font-size:clamp(15px,1.5vw,17px);line-height:1.55;max-width:46ch;font-weight:480;
}
.close-code{
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.close-code .chip{
  display:inline-flex;align-items:baseline;gap:14px;
  border:1.5px dashed rgba(16,17,20,.4);
  border-radius:var(--radius-md);
  padding:14px 20px;
}
.close-code .chip .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(16,17,20,.6)}
.close-code .chip .v{font-family:var(--font-mono);font-size:22px;font-weight:600;letter-spacing:.3em}
.close-band .fine{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;
  color:rgba(16,17,20,.55);max-width:52ch;line-height:1.6;
}

/* ============ footer ============ */
footer{
  background:var(--canvas);
  border-top:1px solid var(--hairline);
  padding:clamp(44px,6vw,72px) 0 36px;
}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.f-grid{grid-template-columns:1fr}}
.f-col h4{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-4);
  margin:0 0 16px;
}
.f-col a{display:block;font-size:13.5px;color:var(--text-3);padding:5px 0;transition:color .15s ease}
.f-col a:hover{color:var(--gold)}
.f-col a.brand{display:flex;padding:0;margin-right:0}
.f-note{
  font-family:var(--font-mono);font-size:11px;color:var(--text-4);
  letter-spacing:.04em;line-height:1.8;max-width:34ch;margin-top:16px;
}
.f-note b{color:var(--gold);font-weight:500}

/* ---- footer socials ---- */
.f-social{display:flex;gap:10px;margin-top:20px}
/* beats .f-col a{display:block} on source order — same specificity, declared
   later. These sit in a row, not in a link list. */
.f-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;flex:0 0 auto;
  background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--radius-md);color:var(--text-3);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.f-social a:hover{color:var(--gold);border-color:var(--hairline-strong);background:var(--surface-2)}
.f-social a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* currentColor so the hover above drives the mark itself */
.f-social svg{width:17px;height:17px;fill:currentColor;display:block}
/* 38px reads right beside the footer type but is under the 44px minimum for a
   finger, so it grows where there is no cursor to aim with */
@media(max-width:820px){.f-social a{width:44px;height:44px}}
.f-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.f-bottom p{
  font-family:var(--font-mono);font-size:10px;color:var(--text-4);
  letter-spacing:.05em;max-width:74ch;line-height:1.7;
}

/* ============ flash promo spotlight (mid-page, admin-editable) ============ */
.spot{
  position:relative;border-radius:var(--radius-lg);padding:1px;
  background:linear-gradient(100deg,rgba(240,185,11,.16) 0%,rgba(240,185,11,.62) 50%,rgba(240,185,11,.16) 100%);
  background-size:220% 100%;
  animation:sweep 3s linear infinite;
}
@keyframes sweep{to{background-position:-220% 0}}
.spot-frame{
  background:var(--surface-1);
  border-radius:11px;
  padding:clamp(30px,4.5vw,58px) clamp(20px,4vw,56px);
  text-align:center;
}
.spot-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.spot-eyebrow .fdot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:fpulse 1.6s ease-in-out infinite}
.spot-title{
  margin-top:16px;
  font-size:clamp(38px,6vw,80px);font-weight:740;
  letter-spacing:-.038em;line-height:1;color:var(--ink);
  text-wrap:balance;
}
.spot-title .gold-num{
  font-family:var(--font-mono);font-weight:600;font-size:.97em;
  letter-spacing:-.02em;color:var(--gold-bright);
  text-shadow:0 0 30px rgba(240,185,11,.4);
  font-variant-numeric:tabular-nums;
}
@keyframes chipPulse{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.05)}96%{transform:scale(.99)}}
.spot-chip{animation:chipPulse 4.5s ease-in-out infinite}
.spot-sub{
  display:inline-block;margin-top:16px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);
  border:1px solid var(--hairline-strong);border-radius:999px;
  padding:9px 18px;
}
.spot-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:28px;text-align:left;
}
@media(max-width:760px){.spot-steps{grid-template-columns:1fr}}
.spot-step{
  background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:14px 16px;
}
.spot-step .n{
  display:block;margin-bottom:7px;
  font-family:var(--font-mono);font-size:9px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.spot-step b{font-weight:600;font-size:13.5px;color:var(--text);line-height:1.45}
.spot-code{
  margin-top:28px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.spot-code .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.spot-chip{
  border:1.5px dashed var(--gold-hairline);
  background:var(--gold-tint);border-radius:10px;
  padding:13px 28px;
  font-family:var(--font-mono);font-weight:600;font-size:21px;letter-spacing:.34em;
  color:var(--gold-bright);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.spot-chip:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.spot-ends{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-3)}
.spot-ends b{color:var(--gold-bright);font-weight:600;font-variant-numeric:tabular-nums}
.spot-terms{
  margin-top:18px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-4);
}
.spot-terms a{color:var(--text-3);text-decoration:underline;text-underline-offset:3px;transition:color .15s ease}
.spot-terms a:hover{color:var(--gold)}

/* strip promo link */
.strip-in a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;transition:color .15s ease}
.strip-in a:hover{color:var(--gold)}

/* ============ admin drawer (client-side promo editor) ============ */
.admin{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(348px,94vw);
  background:var(--surface-2);
  border-left:1px solid var(--hairline-strong);
  padding:20px 18px 26px;overflow-y:auto;
  transform:translateX(103%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.admin.open{transform:none}
.admin h3{
  margin:0 0 4px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.admin .sub{font-family:var(--font-mono);font-size:9.5px;color:var(--text-4);letter-spacing:.04em}
.admin label{
  display:block;margin:14px 0 5px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.admin input[type=text],.admin input[type=datetime-local]{
  width:100%;
  background:var(--surface-1);
  border:1px solid var(--hairline-strong);border-radius:6px;
  color:var(--ink);
  font-family:var(--font-mono);font-size:12.5px;
  padding:9px 10px;
}
.admin input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.admin .chk{
  display:flex;align-items:center;gap:9px;margin-top:16px;
  font-family:var(--font-mono);font-size:11px;color:var(--text);cursor:pointer;
}
.admin .chk input{accent-color:var(--gold);width:15px;height:15px}
.admin .row2{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.admin .btn{height:36px;font-size:12px;padding:0 13px}
.admin .note{
  margin-top:16px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text-4);
  letter-spacing:.03em;line-height:1.7;
}
/* Gold, not red: a draft masking the live promo is a state to get out of, not
   a fault. Sits at the foot of the drawer, where Save left you. */
.ap-override{
  display:block;margin-top:16px;padding:13px 14px;
  background:var(--gold-tint);border:1px solid var(--gold-hairline);
  border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:10.5px;line-height:1.75;color:var(--text-2);
}
.ap-override b{display:block;color:var(--gold);font-weight:600;margin-bottom:4px}
.ap-override span{display:block}
.ap-override .btn{width:100%;height:34px;font-size:11px;margin-top:11px}

.admin-x{
  position:absolute;top:10px;right:12px;
  font-family:var(--font-mono);font-size:15px;color:var(--text-4);
  padding:6px 8px;transition:color .15s ease;
}
.admin-x:hover{color:var(--ink)}

/* ============ floating flash sale — top-right, deals flow right → left ============ */
.flash{
  position:fixed;right:22px;top:108px;z-index:58;
  width:min(320px,calc(100vw - 28px));
  background:var(--surface-1);
  border:1px solid var(--gold-hairline);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -24px rgba(0,0,0,.9);
  padding:15px 16px 14px;
  opacity:0;transform:translateX(28px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1);
}
.flash.show{opacity:1;transform:translateX(0);pointer-events:auto}
.flash.exit{opacity:0;transform:translateX(-34px);pointer-events:none}
.f-steps{display:flex;gap:5px;margin-left:auto}
.f-steps i{width:4px;height:4px;border-radius:50%;background:var(--hairline-strong);transition:background .3s ease}
.f-steps i.on{background:var(--gold)}
.flash-note{
  margin-top:4px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.03em;
}
.flash-x{
  position:absolute;top:6px;right:8px;
  font-family:var(--font-mono);font-size:15px;line-height:1;
  color:var(--text-4);padding:6px 8px;border-radius:4px;
  transition:color .15s ease;
}
.flash-x:hover{color:var(--ink)}
.flash-tag{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;
}
.flash-tag .fdot{
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  animation:fpulse 1.6s ease-in-out infinite;
}
.flash-title{font-size:14.5px;line-height:1.45;color:var(--text)}
.flash-title b{color:var(--ink);font-weight:650}
.flash-timer{
  margin-top:7px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.04em;
}
.flash-timer b{
  color:var(--gold-bright);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.flash-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.flash-actions .btn{height:37px;padding:0 15px;font-size:12.5px}
.flash-actions .link-quiet{padding:10px 2px;font-size:10.5px}
/* On a phone the card joins the page instead of floating over it. Fixed and
   full-width it covered 56% of the headline and nearly all of the eyebrow
   until the trader found the ×; in the flow, between the header and the
   hero, it pushes the copy down rather than over it. The entrance turns
   vertical here: the desktop slide-in from the right would carry a
   full-width block past the viewport edge for half a second on every
   rotation, and a transform is enough to give the page a sideways scroll.
   The space is held from the first paint -- the card fades into it rather
   than shoving the headline down 1.6 seconds after the page has settled.
   900px, not 640: that is where the header goes compact, and the fixed
   toast was still across 38% of the headline on a portrait tablet at 768.
   Capped at 560px so a tablet gets a banner rather than a billboard. */
@media(max-width:900px){
  .flash{
    position:relative;top:auto;right:auto;left:auto;z-index:auto;
    width:auto;max-width:560px;margin:14px 14px 0;
    transform:translateY(-6px);
  }
  .flash.show{transform:none}
  .flash.exit{transform:translateY(6px)}
}

/* the plan's rules, under the calculator's plan select */
.field-hint{
  margin-top:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;
  color:var(--text-4);line-height:1.7;
}

/* ============ auth (nav link + status chips, shared by claim/admin pages) ============ */
.nav-auth{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.05em;
  color:var(--text-3);white-space:nowrap;transition:color .14s ease;
}
.nav-auth:hover{color:var(--ink)}
.nav-auth b{font-weight:600;color:var(--gold)}
@media(max-width:640px){.nav-auth .na-who{display:none}}

.st-chip{
  display:inline-flex;align-items:center;flex:none;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;border:1px solid;
}
.st-chip.pending{color:var(--gold);border-color:rgba(240,185,11,.4);background:rgba(240,185,11,.08)}
.st-chip.approved{color:var(--credit);border-color:rgba(14,203,129,.4);background:rgba(14,203,129,.08)}
.st-chip.rejected{color:#f6465d;border-color:rgba(246,70,93,.35);background:rgba(246,70,93,.07)}

/* ============ motion (GSAP owns movement; CSS only pre-hides under html.anim) ============ */
.rv{opacity:1}
html.anim .rv,
html.anim .hs{opacity:0}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.hs{opacity:1!important}
  .cur{display:none}
  .field-note{display:none}
  html{scroll-behavior:auto}
}

/* ============ promo code dialog ============
   One dialog, driven by app.js, opened from any per-firm code button. Sits
   above the flash sale (z-index 90), which is the highest thing on the page. */
.pc-overlay{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:20px;
  background:rgba(6,8,10,.78);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:pcFade .18s ease both;
}
@keyframes pcFade{from{opacity:0}to{opacity:1}}
.pc-dialog{
  width:min(440px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  background:var(--surface-1);
  border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:pcRise .22s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes pcRise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.pc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pc-heading{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.pc-close{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  font-size:20px;line-height:1;color:var(--text-3);
  border:1px solid transparent;background:transparent;
  transition:background .15s ease,color .15s ease;
}
.pc-close:hover{background:var(--surface-3);color:var(--ink)}

.pc-card{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--radius-md);padding:20px;text-align:center;
}
.pc-logo{
  display:grid;place-items:center;width:60px;height:60px;margin:0 auto 12px;
  border-radius:14px;background:var(--surface-3);border:1px solid var(--hairline-strong);
  overflow:hidden;
}
/* The image sits over the initials rather than replacing them, the way the
   board avatar does. `img + i{display:none}` matched whenever an img element
   existed — including one that had just 404'd and hidden itself — so a firm
   with a broken logo showed an empty tile instead of falling back. */
.pc-logo{position:relative}
.pc-logo img{
  position:absolute;inset:0;margin:auto;
  width:34px;height:34px;border-radius:7px;background:var(--surface-3);
}
.pc-logo i{font-style:normal;font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--gold)}
.pc-name{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:8px}

.pc-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px}
.pc-chips span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);background:var(--surface-1);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:5px 10px;
}

.pc-offer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;text-align:left}
/* A firm the desk has no rate at: the "Desk offer" badge and the DESK chip
   are both claims, and the dialog already says "list prices" beside them.
   app.js writes data-offer on the dialog for every firm it opens. */
#pcDialog[data-offer="0"] [data-when-offer]{display:none}
@media (max-width:420px){ .pc-offer{grid-template-columns:1fr} }

.pc-off-left{
  background:var(--gold-tint);border:1px solid var(--gold-hairline);
  border-radius:var(--radius-sm);padding:14px 12px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
}
.pc-badge{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-gold);background:var(--gold);border-radius:999px;padding:4px 9px;
}
.pc-pct{font-size:26px;font-weight:700;color:var(--gold);letter-spacing:-.02em;line-height:1.05}
.pc-pct b{font-weight:700}

.pc-off-right{display:flex;flex-direction:column;gap:9px}
.pc-code{
  display:flex;align-items:center;gap:9px;width:100%;
  border:1px dashed var(--gold-hairline);border-radius:var(--radius-sm);
  background:var(--surface-1);padding:10px 12px;
  font-family:var(--font-mono);transition:border-color .15s ease,background .15s ease;
}
.pc-code:hover{border-color:var(--gold);background:var(--gold-tint)}
.pc-code-l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pc-code b{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.1em;margin-left:auto}
.pc-code i{font-style:normal;font-size:13px;color:var(--text-3)}
.pc-facts{display:flex;flex-direction:column;gap:4px}
.pc-facts span{font-size:11.5px;line-height:1.45;color:var(--text-2)}
.pc-facts span::before{content:"· ";color:var(--gold)}

.pc-copied{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);
  font-size:11.5px;color:var(--credit);min-height:17px;
}
.pc-copied:empty{display:none}

.pc-actions{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pc-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;border-radius:var(--radius-sm);
  background:var(--gold);color:var(--on-gold);
  font-size:14.5px;font-weight:600;
  transition:background .16s ease,transform .13s ease;
}
.pc-primary:hover{background:var(--gold-bright)}
.pc-primary:active{transform:scale(.99)}
.pc-secondary{
  height:44px;border-radius:var(--radius-sm);
  border:1px solid var(--hairline-strong);background:transparent;color:var(--text);
  font-size:13.5px;font-weight:500;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.pc-secondary:hover{background:var(--surface-2);border-color:var(--text-4);color:var(--ink)}

/* The board with nothing in it. A table that filters down to no rows used to
   render an empty tbody, which reads as a broken page rather than an answer. */
/* Deliberately not display:flex. A td laid out as a flex container leaves the
   table layout algorithm, and colspan goes with it -- the message then sits in
   the width of the first column instead of across the board. Block children
   and text-align do the same job while the cell stays a cell. */
/* grid-column for the phone layout, where the row becomes a two-column grid
   and a cell would otherwise take one column -- 144px of a 333px board. It is
   inert on desktop, where the cell is a real table-cell and colspan rules. */
.b-empty{padding:44px 20px!important;text-align:center;grid-column:1/-1}
.b-empty b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.b-empty span{
  display:block;margin:8px auto 0;max-width:52ch;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
  color:var(--text-4);line-height:1.7;
}
.b-empty .btn{margin-top:17px;height:38px;font-size:12.5px}