/* ============================================================================
   TRADING REPS - site styles

   COLOUR RULES, AND THEY ARE NOT DECORATION:
     green  = the setup that broke the level and kept going, and progress
     red    = the setup that failed, and risk / stop / warning
     cyan   = neutral chart labels such as entry
     Buttons and chrome stay NEUTRAL (near-white on dark) so no interface
     colour ever quietly means "good outcome".

   CLAIMS FLOOR: no win rate, hit rate, accuracy figure or base rate anywhere.
   Outcome words are "kept going" / "did not". Never winning / losing.
   ========================================================================== */

:root{
  --bg:       #0B0D11;
  --bg-2:     #0F131A;
  --panel:    #12161E;
  --panel-2:  #171C26;
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.16);
  --ink:      #F2F4F7;
  --ink-2:    #B4BECC;
  --muted:    #8A94A6;
  --up:       #2FBF87;
  --dn:       #F0554A;
  --cyan:     #4CC3E0;
  --amber:    #E3AC4A;
  --r:        14px;
  --r-lg:     18px;
  --wrap:     1140px;
  --sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif;
  --mono:     ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0}

:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#0B0D11; padding:12px 18px; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- masthead */
.mast{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,17,.82);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.mast .wrap{display:flex; align-items:center; gap:18px; height:64px}
.brand{
  font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
}
.brand-sub{display:none}
.mast nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.mast nav a{font-size:15px; color:var(--ink-2); text-decoration:none; transition:color .15s}
.mast nav a:hover{color:var(--ink)}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; border-radius:11px; border:1px solid transparent;
  background:var(--ink); color:#0B0D11;
  font:600 16px/1.2 var(--sans); text-decoration:none; cursor:pointer;
  transition:opacity .15s, transform .12s;
}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:9px 16px; font-size:14.5px; border-radius:9px}
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.btn-ghost:hover{background:var(--panel-2); opacity:1}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* -------------------------------------------------------------------- hero */
.hero{position:relative; overflow:hidden; padding:clamp(52px,8vw,96px) 0 clamp(40px,5vw,64px)}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:110%;
  pointer-events:none;
  background:
    radial-gradient(42% 42% at 20% 26%, rgba(47,191,135,.10), transparent 70%),
    radial-gradient(38% 38% at 80% 8%,  rgba(76,195,224,.08), transparent 70%);
}
.hero .wrap{position:relative}
.hero h1{
  margin:20px 0 0; max-width:20ch;
  font-size:clamp(34px,5.2vw,60px); line-height:1.08; letter-spacing:-.03em;
}
.lede{
  margin:22px 0 0; max-width:60ch;
  font-size:clamp(17px,1.5vw,19.5px); line-height:1.6; color:var(--ink-2);
}
.support{
  display:inline-flex; align-items:center; gap:10px; margin:22px 0 0;
  padding:9px 16px 9px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--panel);
  font-size:14.5px; color:var(--ink-2);
}
.dot{
  width:8px; height:8px; border-radius:50%; background:var(--up);
  box-shadow:0 0 0 3px rgba(47,191,135,.16); flex:none;
}
.trust{margin:18px 0 0; font-size:14px; color:var(--muted)}

/* ---------------------------------------------------------- product shots */
.shot{margin:clamp(34px,5vw,56px) 0 0}
.shot img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow);
  background:var(--panel);
}
.shot figcaption{
  margin:14px auto 0; max-width:64ch; text-align:center;
  font-size:14px; line-height:1.6; color:var(--muted);
}

/* ------------------------------------------------------------- the numbers */
.stats{
  display:grid; gap:1px; margin:clamp(30px,4vw,48px) 0 0;
  grid-template-columns:repeat(4,1fr);
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.stat{background:var(--bg-2); padding:24px 22px}
.stat .n{
  display:block; font-size:clamp(28px,3.4vw,40px); font-weight:600;
  line-height:1; letter-spacing:-.03em;
}
.stat .lbl{
  display:block; margin:11px 0 0;
  font:500 12px/1.45 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.stat.up .n{color:var(--up)}
.stat.down .n{color:var(--dn)}

/* ---------------------------------------------------------- the four shapes */
.shapes{
  display:grid; gap:20px; margin:clamp(32px,4vw,48px) 0 0;
  grid-template-columns:1fr 1fr;
}
.group{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 24px 12px;
}
.group-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.tag{
  display:inline-block; padding:5px 11px; border-radius:7px;
  font:600 12px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
}
.tag.up{color:var(--up); background:rgba(47,191,135,.10); border:1px solid rgba(47,191,135,.28)}
.tag.dn{color:var(--dn); background:rgba(240,85,74,.10); border:1px solid rgba(240,85,74,.28)}
.group-n{font-size:14px; color:var(--muted)}
.shape{padding:20px 0; border-bottom:1px solid var(--line)}
.shape:last-child{border-bottom:0}
.shape-n{
  font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1;
  color:var(--ink-2);
}
.shape h3{margin-top:8px; font-size:17.5px}
.shape p{margin-top:6px; font-size:15px; line-height:1.55; color:var(--ink-2)}

/* ---------------------------------------------------------------- sections */
section{padding:clamp(52px,7vw,92px) 0}
.ruled{border-top:1px solid var(--line)}
.eyebrow{
  margin:0 0 16px; font:600 12.5px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
h2{font-size:clamp(26px,3.4vw,40px); line-height:1.15; max-width:22ch}
.sec-lede{margin:20px 0 0; max-width:62ch; color:var(--ink-2); font-size:17.5px}
.closer{
  margin:clamp(28px,4vw,40px) 0 0; font-size:clamp(19px,2.2vw,24px);
  font-weight:600; letter-spacing:-.02em; max-width:34ch;
}

/* ------------------------------------------------------------------- cards */
.cards{display:grid; gap:20px; margin:clamp(30px,4vw,44px) 0 0}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px;
}
.card h3{font-size:18.5px; line-height:1.35}
.card p{margin:11px 0 0; font-size:15.5px; line-height:1.62; color:var(--ink-2)}

/* -------------------------------------------------------------- the 5 loop */
.loop{
  display:grid; gap:16px; margin:clamp(34px,4vw,48px) 0 0;
  grid-template-columns:repeat(5,1fr);
}
.loop.four{grid-template-columns:repeat(4,1fr)}
.step{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 20px 24px;
}
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--bg-2);
  font:600 13px/1 var(--mono); color:var(--ink-2); margin-bottom:14px;
}
.step h3{font-size:17px}
.step p{margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink-2)}

/* ------------------------------------------------------- the trade-plan panel */
.panel{
  margin:clamp(28px,4vw,44px) 0 0;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px); box-shadow:var(--shadow);
}
.panel h3{font-size:clamp(20px,2.4vw,26px); line-height:1.25; max-width:26ch}
.panel > p{margin-top:16px; max-width:66ch; color:var(--ink-2); font-size:16.5px}
.panel .two-up{
  margin-top:24px; display:grid; gap:0 32px; grid-template-columns:1fr 1fr;
}
.panel .two-up li{color:var(--ink)}
.panel .two-up li:nth-child(2){border-top:0; padding-top:0}
.panel .two-up li:nth-child(2)::before{top:10px}
.panel-foot{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted); max-width:60ch;
}

/* -------------------------------------------------------------- coming next */
.next{
  margin:clamp(28px,4vw,40px) 0 0;
  border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--bg-2); padding:24px 26px;
}
.next h3{
  font:600 12.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--amber); margin-bottom:16px;
}
.plain{list-style:none}
.plain li{
  position:relative; padding:11px 0 11px 24px;
  font-size:15.5px; line-height:1.55; color:var(--ink-2);
  border-top:1px solid var(--line);
}
.plain li:first-child{border-top:0; padding-top:0}
.plain li::before{
  content:""; position:absolute; left:2px; top:21px;
  width:9px; height:1px; background:var(--line-2);
}
.plain li:first-child::before{top:10px}
.plain b{color:var(--ink); font-weight:600}

/* ---------------------------------------------------------------- compare */
.compare{
  display:grid; gap:20px; margin:clamp(30px,4vw,44px) 0 0;
  grid-template-columns:1fr 1fr;
}
.compare .card h3{
  font:600 12.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.compare .lit{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-color:var(--line-2); box-shadow:var(--shadow);
}
.compare .lit h3{color:var(--ink)}
.compare .lit .plain li{color:var(--ink)}

/* ---------------------------------------------------------------- founder */
.founder{
  max-width:70ch; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(28px,4vw,44px);
}
.founder p{margin-top:18px; color:var(--ink-2); font-size:17px}
.founder .sig{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--muted);
}

/* -------------------------------------------------------------------- cta */
.cta{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(30px,5vw,56px); box-shadow:var(--shadow);
}
.signup{display:flex; flex-wrap:wrap; gap:10px; max-width:520px; margin:30px 0 0}
.signup input[type=email]{
  flex:1 1 240px; min-width:0; padding:15px 17px; border-radius:11px;
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink);
  font:400 16px/1.2 var(--sans);
  transition:border-color .15s, background .15s;
}
.signup input[type=email]::placeholder{color:var(--muted)}
.signup input[type=email]:focus{outline:none; border-color:var(--cyan); background:var(--bg-2)}
.signup button{
  flex:0 0 auto; padding:15px 26px; border-radius:11px; border:1px solid transparent;
  background:var(--ink); color:#0B0D11; cursor:pointer;
  font:600 16px/1.2 var(--sans);
  transition:opacity .15s, transform .12s;
}
.signup button:hover{opacity:.88}
.signup button:active{transform:translateY(1px)}
/* Honeypot. Must stay reachable in the DOM but invisible and unfocusable,
   so bots fill it and people never see it. Do not use display:none - some
   bots skip those. */
.hp{
  position:absolute !important; left:-9999px; top:auto;
  width:1px; height:1px; opacity:0; pointer-events:none;
}
.formnote{margin:14px 0 0; font-size:14px; color:var(--muted); max-width:56ch}
.formmsg{margin:12px 0 0; font-size:15px; color:var(--ink-2); min-height:1px}
.formmsg.good{color:var(--up)}
.formmsg.bad{color:var(--dn)}
.formmsg.warn-msg{color:var(--amber)}
.cta .trust{margin-top:22px}

/* -------------------------------------------------------------------- faq */
.faq{margin:clamp(30px,4vw,44px) 0 0; border-top:1px solid var(--line); max-width:80ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-size:17.5px; font-weight:600; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font:400 22px/1 var(--sans); color:var(--muted);
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--ink)}
.faq details p{padding:0 0 22px; max-width:70ch; color:var(--ink-2); font-size:16px}

/* ----------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line); padding:44px 0 56px; font-size:14.5px; color:var(--muted)}
.foot-top{
  display:flex; flex-wrap:wrap; gap:22px 32px; align-items:flex-start;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}
.foot-cat{margin-top:8px; font-size:13.5px; color:var(--muted)}
.foot-top nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:14px 24px}
.foot-top nav a{color:var(--ink-2); text-decoration:none}
.foot-top nav a:hover{color:var(--ink)}
.foot-top nav a.ph{color:var(--muted)}
.disclaimer{
  margin-top:26px; max-width:78ch; font-size:14px; line-height:1.7; color:var(--muted);
}
.copy{margin-top:18px; font-size:13.5px; color:var(--muted)}

/* ------------------------------------------------- method.html carry-over */
.status{border-bottom:1px solid var(--line); background:var(--bg-2)}
.status .wrap{
  display:flex; gap:11px; align-items:baseline;
  padding-top:13px; padding-bottom:13px; font-size:14.5px; color:var(--ink-2);
}
.status .dot{position:relative; top:-2px}
.prose .wrap{max-width:820px}
.prose h2{margin-top:54px; font-size:clamp(23px,2.6vw,30px); max-width:none}
.prose h3{margin-top:34px; font-size:20px}
.prose p, .prose li{margin-top:16px; color:var(--ink-2)}
.prose b, .prose strong{color:var(--ink); font-weight:600}
.prose ul, .prose ol{margin-top:16px; padding-left:22px}
.prose li{list-style:disc}
.prose dl{margin:26px 0 0}
.prose dt{
  margin-top:24px; font-weight:600; color:var(--ink); font-size:17px;
  letter-spacing:-.01em;
}
.prose dd{
  margin:8px 0 0; padding-left:16px; border-left:1px solid var(--line);
  color:var(--ink-2); font-size:16px; line-height:1.65;
}
.prose a{color:var(--cyan)}
.callout, .warn{
  margin-top:26px; border:1px solid var(--line); border-left:2px solid var(--amber);
  background:var(--bg-2); border-radius:10px; padding:22px 24px;
  color:var(--ink-2); font-size:15.5px; line-height:1.65;
}
.callout b, .warn b{color:var(--ink); font-weight:600}
.spec{border-collapse:collapse; width:100%; margin-top:24px; font-size:15px}
.spec th, .spec td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.spec th{
  color:var(--muted); font:600 12.5px/1.4 var(--mono);
  letter-spacing:.08em; text-transform:uppercase;
}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.k{font-family:var(--mono); font-size:.92em; color:var(--ink)}
.note{font-size:14px; color:var(--muted)}
.up{color:var(--up)}
.dn{color:var(--dn)}
.mono{font-family:var(--mono)}

/* -------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .loop, .loop.four{grid-template-columns:repeat(2,1fr)}
  .cards.two{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .shapes{grid-template-columns:1fr}
}
@media (max-width:860px){
  .cards.three{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .mast nav a:not(.btn){display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .mast .wrap{height:58px}
  .cards.two{grid-template-columns:1fr}
  .loop, .loop.four{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:20px 18px}
  .btn-row{gap:10px}
  .btn-row .btn{width:100%}
  .signup button{width:100%}
  .faq summary{font-size:16.5px}
  .panel .two-up{grid-template-columns:1fr}
  .panel .two-up li:nth-child(2){border-top:1px solid var(--line); padding-top:11px}
  .panel .two-up li:nth-child(2)::before{top:21px}
}