/* ==========================================================================================
   PremiereTrade marketing site, v4. LIGHT, the founder's call: "the lighter version is way
   better". Product sits in dark bands so a dark screenshot has a ground of its own.

   COLOUR IS QUOTED from customer-web/src/theme/tokens.css. The one exception is --brand-ink,
   which carries its measurement where it is declared.

   THE WIZARD TRAFFIC LIGHT IS RESERVED, red/yellow/green carry meaning and are never folded
   into the brand pair.

   TWO IMAGE RULES, both learned by getting them wrong:
   1. NEVER SHRINK A WHOLE WINDOW. v1/v2 pasted a 2690px application at ~620px, a 4.3x
      reduction that turned a 13px price into 3px. Crops only, at native resolution.
   2. NEVER UPSCALE A CROP EITHER. v3 took 18% of a 2690px image, upscaled it to 760px and
      displayed it large, two magnifications stacked, and it rendered at cartoon size.
      Every crop's max width is now <= its source region.
   ========================================================================================== */

:root{
  --brand:#0ea968; --brand-2:#16c784;
  /* DERIVED, measured 2026-10-11: white on #0ea968 = 3.05:1 FAIL; on #0a7d4d = 5.18:1 PASS,
     and #0a7d4d on white = 5.18:1 PASS. One token serves button fill and small green text. */
  --brand-ink:#0a7d4d; --brand-ink-h:#097346; --brand-ink-a:#086a41;
  --brand-soft:rgba(14,169,104,.10);

  --app:#0b0e11; --app-2:#121820; --app-raised:#151a21; --app-line:#242c37;
  --app-text:#f5f7fa; --app-muted:#8a97a7;

  --paper:#fff; --paper-2:#f6f8f7; --ink:#0b0e11; --ink-soft:#4b5563; --ink-faint:#69727d;
  --rule:#e4e9e7; --rule-2:#eef2f0;
  /* --ink-faint was 3.85:1 on white, a fail at every size it is used at (11px head
     risk line, 12.5px .tp, 14px .cap, the legal date stamp). MEASURED for the
     replacement: 4.88:1 on --paper and 4.57:1 on --paper-2, so it passes on BOTH
     grounds it actually sits on rather than only the white one. */

  --wiz-g:#2fae4a; --wiz-y:#e8d21f; --wiz-r:#d0392b;
  --danger:#d92d3a;

  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --shell:1200px; --head-h:70px; --t:140ms ease;
}
*{box-sizing:border-box}
/* overflow-x:clip, not hidden: hidden on <html> turns the whole document into a scroll
   container and silently kills position:sticky on .head. clip does not. This is a
   backstop, not the fix, the header above is the fix; this stops the NEXT one. */
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + var(--sp-4));scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-lg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px;border-radius:3px}
/* NEVER left:-9999px HERE. In LTR it is off-screen and the browser discards the
   overflow; in RTL, left IS the inline-start direction, so it becomes real scrollable
   width. MEASURED on the live /privacy-ar: documentElement.scrollWidth 11599 against
   clientWidth 1600, from this one link. Two pages ship RTL, ar and ur. */
.skip{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;background:var(--ink);color:#fff;padding:var(--sp-3) var(--sp-4);z-index:100}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--sp-5)}

/* header */
.head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--rule)}
.head-in{display:flex;align-items:center;gap:var(--sp-6);min-height:var(--head-h)}
.brand{font-family:var(--display);font-weight:800;font-size:var(--fs-xl);letter-spacing:-.025em;text-decoration:none;white-space:nowrap}
.brand i{font-style:normal;color:var(--brand-ink)}
.brand sup{font-size:.46em;color:var(--ink-faint);font-weight:600}
.nav{display:flex;gap:var(--sp-5);margin-left:var(--sp-3)}
.nav a{text-decoration:none;font-size:var(--fs-md);font-weight:500;color:var(--ink-soft);padding:var(--sp-2) 0;transition:color var(--t)}
.nav a:hover{color:var(--brand-ink)}
/* the Log in entry inside the dropdown. Hidden on desktop, where .head-cta carries
   the real button; shown at the breakpoint where .navbtn appears and .head-cta
   sheds its ghost button. Exactly one Log in is visible at any width. */
.nav-login{display:none}
.head-cta{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center}
.head-risk{font-size:11px;color:var(--ink-faint);white-space:nowrap}
.navbtn{display:none;margin-left:auto;order:3;flex:0 0 42px;width:42px;height:42px;padding:0 10px;flex-direction:column;justify-content:center;gap:4px;background:transparent;border:1px solid var(--rule);border-radius:var(--r-sm);cursor:pointer}
.navbtn span{display:block;height:2px;background:var(--ink);border-radius:1px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:700;font-size:var(--fs-md);padding:11px var(--sp-5);border-radius:var(--r-sm);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t)}
.btn-lg{font-size:17px;padding:16px var(--sp-6);border-radius:var(--r-md)}
.btn-go{background:var(--brand-ink);color:#fff}
.btn-go:hover{background:var(--brand-ink-h)} .btn-go:active{background:var(--brand-ink-a)}
.btn-line{border-color:var(--rule);color:var(--ink);background:var(--paper)}
.btn-line:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.btn-ghost{color:var(--ink-soft)} .btn-ghost:hover{color:var(--brand-ink)}

/* type */
h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.2vw,76px);line-height:1.0;letter-spacing:-.034em;margin:0 0 var(--sp-4);text-wrap:balance}
h1 i{font-style:normal;color:var(--brand-ink)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.9vw,46px);line-height:1.06;letter-spacing:-.028em;margin:0 0 var(--sp-4);text-wrap:balance}
h3{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.012em;margin:0 0 var(--sp-2)}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 var(--sp-4)}
.eyebrow .num{color:var(--ink-faint);margin-right:var(--sp-2)}
/* The deck line under the headline. "Master the Markets." is three words, so the h1 is huge
   and leaves a gap; this carries the brand claim into that gap at a size between the headline
   and the body, rather than letting the h1 float. */
.lede{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,31px);
  line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:0 auto var(--sp-4);
  max-width:40ch;text-wrap:balance}
.lede b,.lede i{font-style:normal;color:var(--brand-ink)}
.band-d .lede{color:var(--app-text)}
.sub{font-size:clamp(17px,1.95vw,21px);line-height:1.5;color:var(--ink-soft);margin:0 auto var(--sp-6);max-width:62ch}
.sec-head{max-width:66ch;margin-bottom:var(--sp-7)}
.sec-head-c{margin-inline:auto;text-align:center}
.sec-sub{font-size:var(--fs-xl);color:var(--ink-soft);margin:0;line-height:1.45}
p{margin:0 0 var(--sp-4)}
.risk{font-size:var(--fs-sm);color:var(--ink-soft);margin:0;line-height:1.5}
section{padding:clamp(54px,6.6vw,96px) 0}
/* a hairline between two consecutive LIGHT sections. Without it the page is one
   continuous white sheet and the eye has nothing to tell it a new idea started. */
section + section:not(.band-d):not(.band-t):not(.nums){border-top:1px solid var(--rule-2)}
.band-t + section:not(.band-d):not(.band-t){border-top:0}
.band-d{background:var(--app);color:var(--app-text)}
.band-d h2,.band-d h3{color:var(--app-text)}
.band-d p,.band-d .sec-sub{color:var(--app-muted)}
.band-d .eyebrow{color:var(--brand-2)}
.band-t{background:var(--paper-2)}

/* ── hero: centred, with the product full-bleed BELOW it (tastytrade / thinkorswim shape)
      rather than a small rectangle beside the text ── */
/* ── the hero ground ────────────────────────────────────────────────────────────────────
   The founder, looking at the live top fold: "the entire page look slike you just stuck all
   this in a whte backdrop, needs tosome contrast, looks strange."  He was right and the
   cause was structural: .band-t and .band-d alternate all the way down the page, but the
   HERO -- the one screen most visitors ever see -- had no surface of its own at all, so the
   headline, the CTA and the pills sat on the same flat #fff as the header above them with
   no edge anywhere.

   LIGHT, not dark. He settled that earlier: "the lighter version is way better". So the
   ground is built from depth rather than darkness -- a cool tint rising to white, one
   brand-tinted wash behind the headline, a hairline grid at 3% so the plane reads as a
   surface instead of as nothing, and a rule at the bottom edge so the hero ENDS somewhere.
   The grid is a gradient, not an image: no request, no cache question. */
.hero{position:relative;padding-top:clamp(40px,5.4vw,78px);padding-bottom:0;text-align:center;
  background:
    radial-gradient(1100px 420px at 50% -6%, rgba(14,169,104,.10), transparent 70%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 72%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,14,17,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,14,17,.030) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 78%)}
.hero > .shell{position:relative;z-index:1}
.head{border-bottom:1px solid var(--rule)}
.pills{list-style:none;margin:var(--sp-5) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
/* white ON the tint now, not tint on white: on the new hero ground the old fill was
   the same colour as the plane behind it and the pills disappeared into it. */
.pills li{font-size:var(--fs-sm);font-weight:600;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:7px var(--sp-4);
  box-shadow:0 1px 2px rgba(11,14,17,.04)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:center;margin-bottom:var(--sp-3)}
.lnk{font-weight:600;font-size:var(--fs-md);color:var(--brand-ink);text-decoration:none}
.lnk:hover{text-decoration:underline}
.note{font-size:var(--fs-md);color:var(--ink-soft);margin:0 0 var(--sp-3)}
.note b{color:var(--ink);font-weight:700}

/* the hero product band: dark ground so a dark screenshot has something to sit on */
.stage{margin-top:clamp(32px,4vw,56px);background:linear-gradient(180deg,var(--paper) 0 42%,var(--app) 42% 100%);padding-bottom:clamp(28px,4vw,52px)}
.stage-in{position:relative;overflow:visible}
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--app-line);background:var(--app);
  box-shadow:0 2px 6px rgba(11,14,17,.14),0 40px 80px -28px rgba(11,14,17,.5)}
.shot img{width:100%;display:block}
/* INSIDE the shell. At right:-8px this card pushed the page 8px wider than the
   viewport and gave the whole document a horizontal scrollbar. MEASURED:
   body.scrollWidth 1800 against window 1800 only after this moved in. */
.stat{position:absolute;right:var(--sp-5);bottom:-26px;z-index:3;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);box-shadow:0 18px 44px -12px rgba(11,14,17,.3);display:flex;flex-direction:column;gap:2px;min-width:190px}
.stat b{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--brand-ink)}
.stat span{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.35}

/* a live dot, the only motion on the page */
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--app-muted)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--brand-2);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* number grid */
.nums{background:var(--ink);color:#fff}
/* CENTRED. Left-aligned in a 1200px shell these five sat in a ragged row with a long
   empty right edge. They are a single statement, so they are centred as one. */
.nums-in{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6) clamp(28px,5vw,72px);padding:var(--sp-7) var(--sp-5)}
.nm{display:flex;flex-direction:column;gap:3px;text-align:center;align-items:center;max-width:200px}
.nm b{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:-.03em;color:var(--brand-2);font-variant-numeric:tabular-nums}
.nm span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#aab4bf}

/* versus table */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-6)}
.vcol{border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-5);background:var(--paper)}
.vcol.good{border-color:var(--brand-ink);background:var(--brand-soft)}
.vcol h3{font-family:var(--display);font-weight:800;font-size:var(--fs-xl);margin-bottom:var(--sp-4);letter-spacing:-.018em}
.vcol ul{list-style:none;margin:0;padding:0}
.vcol li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:9px 0;border-top:1px solid var(--rule-2);font-size:var(--fs-md);color:var(--ink-soft);line-height:1.45}
.vcol li:first-child{border-top:0}
.vcol i{flex:0 0 18px;font-style:normal;font-weight:800;text-align:center}
.vcol.bad i{color:var(--danger)} .vcol.good i{color:var(--brand-ink)}

/* splits, lists */
.split{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(24px,4vw,56px);align-items:center}
.split-r{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.shot-s{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--app-line);background:var(--app);box-shadow:0 2px 6px rgba(11,14,17,.12),0 28px 60px -24px rgba(11,14,17,.42)}
.shot-s img{width:100%;display:block}
/* the basket is a NARROW crop: it gets a narrow column, not the full width */
.shot-n{max-width:340px;margin-inline:auto}
/* OUTSIDE the frame, with real separation. It was rendering inside the bordered,
   overflow-hidden box, hard against the chart's date axis, and read as stray text. */
.cap{margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--ink-faint);line-height:1.5}
.band-d .cap{color:var(--app-muted)}
.cap-c{text-align:center;max-width:70ch;margin-inline:auto}
.key{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.key li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-md);color:var(--ink-soft);line-height:1.45}
.key i{flex:0 0 14px;width:14px;height:14px;border-radius:4px;margin-top:4px}
.key b{color:var(--ink);font-weight:700}
.k-g{background:var(--wiz-g)}.k-y{background:var(--wiz-y)}.k-r{background:var(--wiz-r)}
.flist{list-style:none;margin:0;padding:0}
.flist li{border-top:1px solid var(--rule);padding:var(--sp-4) 0;font-size:var(--fs-md);color:var(--ink-soft);line-height:1.55}
.flist li:last-child{border-bottom:1px solid var(--rule)}
.flist b{display:block;color:var(--ink);font-size:var(--fs-lg);font-weight:700;margin-bottom:3px}
.band-d .flist li{border-color:var(--app-line);color:var(--app-muted)}
.band-d .flist b{color:var(--app-text)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--sp-5)}
.steps li{border-top:3px solid var(--brand-ink);padding-top:var(--sp-4)}
.steps .n{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;color:var(--brand-ink);display:block;margin-bottom:var(--sp-2)}
.steps p{font-size:var(--fs-md);color:var(--ink-soft);margin:0;line-height:1.55}

.bks{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.bk{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:3px}
.bk b{font-family:var(--display);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.018em}
.bk span{font-size:var(--fs-sm);color:var(--ink-soft)}
.bk-us{border-color:var(--brand-ink)} .bk-us b{color:var(--brand-ink)}
.classes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.classes li{font-size:var(--fs-md);font-weight:600;padding:8px var(--sp-4);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper)}

.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:var(--sp-4)}
.who div{border:1px solid var(--app-line);border-radius:var(--r-md);padding:var(--sp-5);font-size:var(--fs-lg);line-height:1.4;background:var(--app-raised)}
.closer{margin:var(--sp-6) 0 0;font-size:var(--fs-xl);font-weight:600;color:var(--brand-2);text-align:center}

/* trustpilot slot, DESIGNED, NOT FILLED. 0.0 from 0 reviews on 2026-10-12, so there is
   nothing honest to render. The markup stays so the day reviews exist it is one swap. */
.tp{border:1px dashed var(--rule);border-radius:var(--r-md);padding:var(--sp-4);text-align:center;color:var(--ink-faint);font-size:var(--fs-sm);max-width:460px;margin:var(--sp-5) auto 0}

.close{text-align:center}
.close-in{max-width:62ch;margin-inline:auto}
.gets{list-style:none;margin:0 auto var(--sp-5);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-5);max-width:60ch}
.gets li{position:relative;padding-left:21px;font-size:var(--fs-md);color:var(--ink-soft)}
.gets li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--brand-ink)}

.foot{background:var(--app);color:var(--app-muted);padding:var(--sp-8) 0 var(--sp-5)}
.foot-in{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--sp-5);padding-bottom:var(--sp-7);border-bottom:1px solid var(--app-line)}
.foot .brand i{color:var(--brand-2)} .foot .brand{color:var(--app-text)}
.foot-note{font-size:var(--fs-md);margin:var(--sp-3) 0 0;line-height:1.5}
/* h2, not h4: the footer columns are top-level nav landmarks and were
   the single cause of a heading-level skip on all 25 pages. The rule
   moved with the tag, so nothing about the rendering changes. */
.fcol h2{font-size:var(--fs-sm);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--app-text);margin:0 0 var(--sp-3)}
.fcol a{display:block;font-size:var(--fs-md);text-decoration:none;color:var(--app-muted);padding:3px 0;transition:color var(--t)}
.fcol a:hover{color:var(--brand-2)}
.foot-legal{padding-top:var(--sp-5)}
.foot-legal p{font-size:var(--fs-sm);line-height:1.6;margin:0 0 var(--sp-3);max-width:92ch}

@media (max-width:960px){
  .split,.split-r,.vs{grid-template-columns:1fr}
  .split .shot-s,.split-r .shot-s{order:-1}
  .navbtn{display:inline-flex}
  .nav{position:absolute;top:var(--head-h);left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:var(--sp-2) var(--sp-5) var(--sp-4);display:none}
  .nav-open .nav{display:flex}
  .nav a{padding:var(--sp-3) 0;border-bottom:1px solid var(--rule-2)}
  .nav-login{display:block;font-weight:700;color:var(--brand-ink)}
  .head-risk{display:none}
  .foot-in{grid-template-columns:1fr 1fr}
  .stat{position:static;margin:var(--sp-4) auto 0;min-width:0;max-width:300px}
}
@media (max-width:560px){
  .shell{padding-inline:var(--sp-4)}
  .foot-in{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
  .head-in{gap:var(--sp-3);min-width:0}
  /* THE SIDEWAYS SCROLL. At 390px the row had 358px to hold a 125px brand, a 42px
     hamburger, a "Log in" button and a primary CTA, none of them allowed to wrap.
     Log in is now in the dropdown (.nav-login above), and the primary button is
     given permission to shrink and ellipsise rather than to push the document. */
  .head-cta .btn-ghost{display:none}
  .head-cta{min-width:0;gap:var(--sp-2)}
  .head-cta .btn{min-width:0;padding-inline:var(--sp-3);font-size:var(--fs-sm);
    overflow:hidden;text-overflow:ellipsis}
  .brand{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
}

/* ───────── document pages (legal, about, partners) ───────── */
.h1-doc{font-size:clamp(32px,4.2vw,50px);margin-bottom:var(--sp-3)}
.doc{max-width:74ch}
.doc h2{font-family:var(--display);font-weight:700;font-size:var(--fs-2xl);letter-spacing:-.02em;margin:var(--sp-7) 0 var(--sp-3)}
.doc h3{font-size:var(--fs-xl);font-weight:700;margin:var(--sp-6) 0 var(--sp-2)}
.doc h4{font-size:var(--fs-lg);font-weight:700;margin:var(--sp-5) 0 var(--sp-2)}
/* :not([class]) FOR THE SAME REASON AS `.doc a:not(.btn)` ABOVE, and this one was
   visible on the live page. `.doc p` is (0,1,1); `.plan-flag` is (0,1,0), so the
   generic prose rule won and the "Most complete" pill painted --ink-soft #4b5563 on
   its own --brand-ink #0a7d4d fill. MEASURED: 1.46:1. Dark grey on dark green.
   CHECKED BEFORE CHANGING, because a generic rule carries 28 pages: every <p> that
   carries a class inside a .doc is .cap .sec-sub .price .price-alt .plan-for
   .plan-flag or .risk, and all of them declare their own colour and size. .price
   declares neither and needs neither: it has no text of its own, only .price b and
   .price span, which are styled directly. So nothing loses styling here. */
.doc p:not([class]){font-size:var(--fs-lg);color:var(--ink-soft);line-height:1.65;margin:0 0 var(--sp-4)}
.doc ul,.doc ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5)}
.doc li{font-size:var(--fs-lg);color:var(--ink-soft);line-height:1.6;margin-bottom:var(--sp-2)}
/* :not(.btn) IS THE FIX, and it is not about ordering. `.doc a` is (0,1,1) and
   `.btn-go` is (0,1,0), so this rule BEAT the buttons on specificity, moving it
   earlier in the file would have changed nothing. MEASURED on the live /pricing:
   all three plan buttons text-decoration:underline, and the Pro button computed
   color rgb(10,125,77) on background rgb(10,125,77) = 1.00:1. Green on green. */
.doc a:not(.btn){color:var(--brand-ink);text-decoration:underline}
.doc strong,.doc b{color:var(--ink);font-weight:650}
.doc table{border-collapse:collapse;width:100%;margin:0 0 var(--sp-5);font-size:var(--fs-md)}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.doc th{font-weight:700;color:var(--ink)}
.doc img{border-radius:var(--r-md);margin:var(--sp-4) 0}
.doc hr{border:0;border-top:1px solid var(--rule);margin:var(--sp-6) 0}
/* The first line of a LEGAL page is its date stamp, and this styles it as one. The
   :not([class]) is the same guard as on `.doc p` and `.doc a` above, and it is here
   because the rule was wrong the moment a non-legal page opened its .doc with a
   classed paragraph: /pricing starts with <p class="sec-sub">, so its 62-character
   sub-headline was being set in uppercase monospace at 12.5px. Visible in a
   screenshot, invisible to every automated check, because nothing is measurably
   broken -- it is the right CSS applied to the wrong paragraph. */
.doc > p:first-child:not([class]){font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

/* ───────── language switcher & sub-navigation ─────────
   RESTORED after being stripped by mistake. The old pages carried a bar of links that my
   extractor read as stray text and removed. It was not stray: there are EIGHT fully
   translated privacy policies (es it de fr nl ar ur zh), and for a business with 556K
   followers across five language pages those are an asset, not decoration. */
.langbar,.subnav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6);padding:0 0 var(--sp-4);border-bottom:1px solid var(--rule)}
.langbar a,.subnav a{font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--ink-soft);padding:6px var(--sp-3);border:1px solid var(--rule);border-radius:var(--r-pill)}
.langbar a:hover,.subnav a:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.langbar a[aria-current],.subnav a[aria-current]{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
[dir="rtl"] .doc{direction:rtl;text-align:right}
[dir="rtl"] .doc ul,[dir="rtl"] .doc ol{padding-left:0;padding-right:var(--sp-5)}

/* ───────── pricing ───────── */
.doc:has(.plans){max-width:none}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);margin:0 0 var(--sp-5)}
.plan{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column}
.plan-best{border-color:var(--brand-ink);box-shadow:0 18px 44px -18px rgba(11,14,17,.22)}
.plan-flag{position:absolute;top:-11px;left:var(--sp-5);background:var(--brand-ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);margin:0}
.plan h2{font-family:var(--display);font-weight:800;font-size:var(--fs-xl);margin:0 0 var(--sp-3);letter-spacing:-.018em}
.price{margin:0 0 2px;display:flex;align-items:baseline;gap:7px}
.price b{font-family:var(--display);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.price span{font-size:var(--fs-md);color:var(--ink-soft)}
.price-alt{font-size:var(--fs-sm);color:var(--ink-soft);margin:0 0 var(--sp-4)}
.price-alt b{color:var(--ink);font-weight:700}
.plan-for{font-size:var(--fs-md);color:var(--ink-soft);margin:0 0 var(--sp-4);line-height:1.5}
.plan-list{list-style:none;margin:0 0 var(--sp-5);padding:0}
.plan-list li{position:relative;padding-left:23px;font-size:var(--fs-md);color:var(--ink-soft);margin-bottom:var(--sp-3);line-height:1.45}
.plan-list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--brand-ink)}
.plan-list b{color:var(--ink);font-weight:700}
.plan .btn{margin-top:auto}
.btn-full{width:100%}
.mono{font-family:var(--mono);font-size:.9em}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   FORMS, this whole section was MISSING, and that is the defect, not a weakness in it.

   /start.html shipped using nine classes that had no rule anywhere in this file:
   .start-in .gets-l .formcard .f .hint .hint-c .hp .formerr .c, so every control on the
   only signup page rendered as the browser's native widget. MEASURED on the live page
   before this block existed: input font-family Arial, font-size 13.33px, height 21px,
   border 1.67px inset rgb(118,118,118). That is the founder's "the form looks like
   complete crap", and it was literally true: there were no styles to come through.

   THE ONE THAT MATTERED MORE THAN THE LOOK: .hp is the honeypot wrapper. With no rule it
   computed display:block / visibility:visible, so the input named "website" was a VISIBLE
   labelled field, 146x21px, sitting directly above "Create my account". `signup_shield.py`
   refuses any submission that fills it. Every careful person who completed every box on
   the page was being turned away at registration, silently, and the page gave no sign.
   .hp is the third of the six ways defects hide, inverted: a capability that was invoked
   exactly as designed, against the wrong audience.

   Bare element selectors below, not only classes. contact.html, challenge-join.html and
   partners-contact.html carry unclassed <input>/<button> markup inherited from the old
   site; styling the ELEMENT means those pages are covered whether or not anyone remembers
   to add a class, and the .btn classes still win where they are present.
   ═════════════════════════════════════════════════════════════════════════════════════ */

/* ── controls ───────────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not(.hp),
select:not(.hp), textarea:not(.hp){
  display:block;width:100%;font-family:var(--font);font-size:var(--fs-lg);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:12px var(--sp-3);min-height:46px;line-height:1.4;
  transition:border-color var(--t),box-shadow var(--t);appearance:none;-webkit-appearance:none}
textarea{min-height:120px;resize:vertical;line-height:1.6}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234b5563' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-right:var(--sp-6)}
[dir="rtl"] select{background-position:left var(--sp-3) center;padding-right:var(--sp-3);padding-left:var(--sp-6)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-ink);
  box-shadow:0 0 0 3px var(--brand-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input[aria-invalid="true"],.f-bad input,.f-bad textarea,.f-bad select{border-color:var(--danger)}
/* 16px on iOS or Safari zooms the page on focus; --fs-lg is already 16px, this pins it */
@media (max-width:860px){input,select,textarea{font-size:16px}}

/* An unclassed submit still has to look like a button. .btn wins where it is present:
   .btn is (0,1,0) and beats these (0,0,1) element selectors. */
button,input[type=submit],input[type=button]{
  font-family:var(--font);font-size:var(--fs-md);font-weight:700;cursor:pointer}
button[type=submit]:not([class]),input[type=submit]:not([class]),
form button:not([class]){display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:11px var(--sp-5);border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--brand-ink);color:#fff;transition:background var(--t)}
button[type=submit]:not([class]):hover,form button:not([class]):hover{background:var(--brand-ink-h)}

/* ── /start layout ──────────────────────────────────────────────────────────── */
/* Same note as the hero: the founder on this page, "the entire page look slike you just
   stuck all this in a whte backdrop". The form card was already white, so on a white page
   there was no card -- only a faint shadow with nothing behind it to cast onto. The section
   gets the hero's ground so the card has a plane to sit ON, which is what makes it read as
   a card at all. */
.start-wrap{position:relative;
  background:
    radial-gradient(900px 380px at 50% -8%, rgba(14,169,104,.10), transparent 70%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 78%)}
.start-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,14,17,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,14,17,.030) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 70%)}
.start-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(380px,460px);
  gap:var(--sp-8);align-items:start;padding:var(--sp-8) var(--sp-5)}
.gets-l{text-align:left;justify-content:flex-start}
.gets-l li{text-align:left}

.formcard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:0 1px 2px rgba(11,14,17,.05),0 18px 44px -16px rgba(11,14,17,.16)}
.f{margin:0 0 var(--sp-4)}
.f > label{display:block;font-size:var(--fs-md);font-weight:600;color:var(--ink);
  margin:0 0 var(--sp-2)}
.hint{font-size:var(--fs-sm);color:var(--ink-faint);line-height:1.5;margin:var(--sp-2) 0 0}
.hint-c{text-align:center;margin-top:var(--sp-4)}
.hint a{color:var(--brand-ink)}
.formerr{margin:var(--sp-4) 0 0;padding:10px var(--sp-3);border-radius:var(--r-sm);
  background:rgba(217,45,58,.08);border:1px solid rgba(217,45,58,.3);color:#9b1f29;
  font-size:var(--fs-md);font-weight:600}
.formerr[hidden]{display:none}
.c{text-align:center}

/* THE HONEYPOT. Hidden from people AND from assistive technology, still submitted, still
   focusable by nothing (the input carries tabindex="-1"). Not `display:none` and not
   `visibility:hidden`, some bots skip those and the field then adds no evidence at all;
   this keeps it in the layout tree where a form-filler will find it. */
.hp{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  pointer-events:none;opacity:0}

@media (max-width:860px){
  .start-in{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-6) var(--sp-4)}
  .formcard{padding:var(--sp-5)}
}

/* ── the limits block on /pricing ───────────────────────────────────────────────────────
   TradingView and NinjaTrader both make the ceiling of the unpaid state VISIBLE rather
   than hiding it, because seeing the ceiling is what creates the wish to be above it.
   This block is that, and every line in it is quoted from the entitlement matrix in
   migrations 0110 and 0114, not written to sound good:
     broker.connections free=0   layouts/baskets/watchlists.max free=1
     engines.scope      free=symbol (core=basket)   alarms.max free=0
     scanner, journal   free=0    ads.disabled      free=0
   If those seeds change, this copy is wrong and must change with them. */
.limits{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--brand-ink);
  border-radius:var(--r-md);padding:var(--sp-5) var(--sp-5) var(--sp-4);margin:0 0 var(--sp-5)}
.limit-list{list-style:none;margin:0;padding:0}
.limit-list li{position:relative;padding-left:26px;font-size:var(--fs-lg);color:var(--ink-soft);
  line-height:1.6;margin-bottom:var(--sp-3)}
.limit-list li:last-child{margin-bottom:0}
.limit-list li::before{content:"";position:absolute;left:3px;top:11px;width:11px;height:2px;
  background:var(--ink-faint);border-radius:1px}
.limit-list b{color:var(--ink);font-weight:700}

/* --app-muted, not --ink-faint: the footer ground is --app #0b0e11. --ink-faint is measured
   against --paper and --paper-2 and computes 3.97:1 here, a fail. --app-muted is the
   dark-ground member of that pair and measures 6.51:1 on --app. */
.foot-copy{color:var(--app-muted)}

/* consent control: the whole sentence is the hit target, not the 13px box */
.consent{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer;
  padding:var(--sp-3) 0;font-size:var(--fs-md);color:var(--ink-soft);line-height:1.5}
.consent input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;min-height:0;margin:1px 0 0;
  font-family:var(--font);
  accent-color:var(--brand-ink);cursor:pointer}
.consent a{color:var(--brand-ink)}

/* deck viewer arrows: were 22x22 unclassed native buttons with no accessible name */
.deck-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  min-height:44px;padding:0;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);font-size:var(--fs-lg);cursor:pointer;
  transition:border-color var(--t),color var(--t)}
.deck-arrow:hover{border-color:var(--brand-ink);color:var(--brand-ink)}

/* a screenshot used as evidence inside a document page: framed, captioned OUTSIDE the frame.
   The caption sat inside an overflow:hidden bordered box once and the founder read it as
   stray code: "it looks liek some sort of errant code, just stuck there." */
.shot-doc{margin:var(--sp-5) 0;max-width:100%}
.shot-doc img{border:1px solid var(--rule);border-radius:var(--r-md);display:block;
  width:100%;height:auto;background:var(--app)}
.shot-doc figcaption{margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--ink-faint);
  line-height:1.5}