/* TradePerformance help centre — inherits the landing site's dark identity:
   black ground, single green accent, Plus Jakarta Sans + JetBrains Mono. */
:root{
  --black:#000; --surface:#0c0c0c; --surface2:#131313; --surface3:#1a1a1a;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.11);
  --t1:#ffffff; --t2:#888; --t3:#757575;
  --green:#1D9E75; --green-dim:rgba(29,158,117,0.08); --green-glow:rgba(29,158,117,0.14);
  --max:1160px;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--black); color:var(--t1);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:3px}
code{font-family:var(--mono); font-size:.88em; background:var(--surface3); padding:1px 5px; border-radius:3px}

/* header */
.help-top{border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:10}
.help-top .wrap{display:flex; align-items:center; gap:20px; height:60px}
.brand{font-weight:800; font-size:17px; color:var(--t1); letter-spacing:-.02em}
.brand span{color:var(--green)}
.brand:hover{text-decoration:none}
/* The last crumb is a full question title, which runs off the side of a phone.
   Let the trail shrink and truncate the current page rather than pushing the
   document wider than the window. */
.crumbs{
  display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--t3);
  font-family:var(--mono); min-width:0; flex:1; overflow:hidden
}
.crumbs b{
  color:var(--t2); font-weight:500;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}
.crumbs a{white-space:nowrap}
@media (max-width:640px){
  .help-top .wrap{gap:12px}
  .crumbs{font-size:12.5px; gap:7px}
}

/* layout */
.cols{display:grid; grid-template-columns:216px 1fr; gap:48px; padding:40px 24px 90px}
@media (max-width:880px){.cols{grid-template-columns:1fr; gap:24px}}
.rail{position:sticky; top:84px; align-self:start; max-height:calc(100vh - 110px); overflow-y:auto}
@media (max-width:880px){.rail{position:static; max-height:none}}
.rail-hd{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--t3); padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:4px
}
.rail a{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 9px; border-radius:5px; color:var(--t2); font-size:14px
}
.rail a:hover{background:var(--surface2); color:var(--t1); text-decoration:none}
.rail a.on{background:var(--green-dim); color:var(--green); font-weight:600}
.rail a span{font-family:var(--mono); font-size:11px; color:var(--t3)}

main h1{font-size:clamp(28px,4vw,38px); letter-spacing:-.025em; margin:0 0 12px; text-wrap:balance}
.lead{color:var(--t2); font-size:17px; max-width:64ch; margin:0 0 28px}

/* tools */
.tools{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap}
#q{
  flex:1 1 260px; background:var(--surface2); border:1px solid var(--border2);
  border-radius:7px; padding:10px 14px; color:var(--t1); font-family:inherit; font-size:14.5px
}
#q::placeholder{color:var(--t3)}
.ghost{
  background:transparent; border:1px solid var(--border2); border-radius:7px;
  color:var(--t2); padding:10px 16px; font-family:inherit; font-size:13.5px; cursor:pointer
}
.ghost:hover{color:var(--t1); border-color:var(--green); background:var(--green-dim)}
.nores{color:var(--t3); font-style:italic; padding:14px 2px}

/* entries */
.entry{border-bottom:1px solid var(--border); scroll-margin-top:76px}
.entry summary{
  cursor:pointer; padding:16px 34px 16px 2px; position:relative;
  font-size:17px; font-weight:600; letter-spacing:-.012em; list-style:none; text-wrap:balance
}
.entry summary::-webkit-details-marker{display:none}
.entry summary::after{
  content:'+'; position:absolute; right:6px; top:15px;
  font-family:var(--mono); font-size:19px; color:var(--t3); font-weight:400
}
.entry[open] summary::after{content:'−'; color:var(--green)}
.entry summary:hover{color:var(--green)}
.entry .body{padding:0 0 26px; max-width:70ch}
.short{
  background:var(--green-dim); border-left:2px solid var(--green);
  padding:12px 16px; border-radius:0 6px 6px 0; margin:0 0 20px; color:var(--t1)
}
.steps{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:14px}
.steps>li{color:var(--t2)}
.steps>li::marker{color:var(--green); font-family:var(--mono); font-size:13px}
.steps strong{color:var(--t1); font-weight:600}
.steps ul{margin:9px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
.steps ul li{color:var(--t3); font-size:15px}
.body>p{color:var(--t2); margin:16px 0 0}
.body>p strong{color:var(--t1)}

/* screenshot slots */
/* Hug the image so the caption lines up under it rather than running wider
   than the thing it is labelling. */
.shot{margin:12px 0 0; width:max-content; max-width:100%}
.shot-ph{
  border:1px dashed var(--border2); border-radius:8px; background:var(--surface2);
  padding:18px 16px; display:flex; flex-direction:column; gap:5px
}
.shot-tag{font-family:var(--mono); font-size:11px; color:var(--green); letter-spacing:.04em}
.shot-alt{font-size:13.5px; color:var(--t3)}
/* Render a shot at its own size, not stretched to the column. A close-up of a
   pop-out is 250–550px wide; blowing it up to 760 makes it soft for no gain.
   Small crops still get a floor so they stay legible. */
.shot img{
  width:100%; height:auto;
  border:1px solid var(--border2); border-radius:8px; display:block
}
.shot figcaption{font-size:13px; color:var(--t3); margin-top:7px}
/* Every shot links to its own file. A phone renders a 2880px capture into a
   342px column, so the inline image is a thumbnail whatever we do; the link is
   how the reader reaches the real thing, using the browser's own zoom. */
.shot-zoom{display:block; color:inherit}
.shot-zoom:hover{text-decoration:none}
.shot-zoom:hover img{border-color:var(--green)}

/* hub */
.hub{padding:48px 0 90px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px; margin-top:32px}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:22px; display:flex; flex-direction:column; gap:9px; color:var(--t1)
}
.card:hover{border-color:var(--green); background:var(--surface2); text-decoration:none}
.card h2{font-size:18px; margin:0; letter-spacing:-.015em}
.card p{margin:0; color:var(--t3); font-size:14px; line-height:1.55; flex:1}
.count{font-family:var(--mono); font-size:11px; color:var(--green); letter-spacing:.05em}

/* hub search — the only box that reads guide bodies rather than the page it
   sits on, so it is the one that answers a symptom typed from memory. */
.hubsearch{margin-top:30px}
#hq{
  width:100%; background:var(--surface2); border:1px solid var(--border2);
  border-radius:7px; padding:12px 15px; color:var(--t1); font-family:inherit; font-size:15px
}
#hq::placeholder{color:var(--t3)}
.hres{margin-top:20px}
.hres ul{list-style:none; margin:0; padding:0}
.hres li a{
  display:grid; gap:5px; padding:15px 2px;
  border-bottom:1px solid var(--border); color:var(--t1)
}
.hres li a:hover{text-decoration:none; background:var(--surface2)}
.ht{font-size:16.5px; font-weight:600; letter-spacing:-.012em; text-wrap:balance}
.ha{font-family:var(--mono); font-size:11px; color:var(--green); letter-spacing:.05em}
.hx{color:var(--t3); font-size:14px; line-height:1.55}
.hres mark{background:var(--green-glow); color:var(--t1); border-radius:2px; padding:0 2px}
.hmore{color:var(--t3); font-style:italic; font-size:14px; padding:14px 2px}

/* footer */
.site-foot{border-top:1px solid var(--border); background:var(--surface); padding:24px 0}
.site-foot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--t3)}

/* ── question pages ─────────────────────────────────────────────────── */
.article{padding:44px 24px 90px}
.article main{max-width:760px; margin:0 auto}
.article h1{font-size:clamp(26px,3.6vw,36px); line-height:1.18; letter-spacing:-.022em; margin:0 0 22px; text-wrap:balance}
.article .short{
  background:var(--green-dim); border-left:2px solid var(--green);
  padding:14px 18px; border-radius:0 7px 7px 0; margin:0 0 26px;
  color:var(--t1); font-size:17px; line-height:1.55
}
.article main>p{color:var(--t2); font-size:16.5px; line-height:1.7; margin:0 0 17px}
.article main>p strong{color:var(--t1); font-weight:600}
.article p.bullet{
  padding-left:18px; position:relative; margin:0 0 11px
}
.article p.bullet::before{content:'—'; position:absolute; left:0; color:var(--green)}

/* Feature lists. A page that enumerates what something holds should read as a
   list of things, not as a paragraph — the label carries its own line so the
   set can be scanned without reading any of the descriptions. */
.features{
  list-style:none; margin:0 0 22px; padding:0;
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--border)
}
.features li{
  display:grid; grid-template-columns:minmax(140px,210px) 1fr; gap:6px 22px;
  padding:13px 4px 13px 0; border-bottom:1px solid var(--border);
  align-items:baseline
}
.features li b{
  color:var(--t1); font-weight:600; font-size:15.5px; line-height:1.45;
  letter-spacing:-.005em
}
.features li span{color:var(--t2); font-size:16px; line-height:1.65}
.features li span strong{color:var(--t1); font-weight:600}
.features li code{font-size:13.5px}
/* A bullet with no label spans the full width rather than leaving a gap. */
.features li:not(:has(b)) span{grid-column:1 / -1}
@media (max-width:640px){
  .features li{grid-template-columns:1fr; gap:3px; padding:12px 0}
  .features li b{font-size:15px}
  .features li span{font-size:15.5px}
}
.steps-hd{
  font-size:12px; font-family:var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--t3); margin:38px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--border)
}
.article .steps{list-style:none; counter-reset:step; margin:0; padding:0; display:flex; flex-direction:column; gap:30px}
.article .steps>li{counter-increment:step; position:relative; padding-left:44px}
.article .steps>li::before{
  content:counter(step); position:absolute; left:0; top:-2px;
  width:28px; height:28px; border-radius:50%; background:var(--green-dim);
  border:1px solid var(--green); color:var(--green);
  font-family:var(--mono); font-size:13px; display:flex; align-items:center; justify-content:center
}
.step-text{color:var(--t2); font-size:16.5px; line-height:1.65}
.step-text strong{color:var(--t1); font-weight:600}
.article .steps ul{margin:11px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:8px}
.article .steps ul li{color:var(--t3); font-size:15.5px; line-height:1.6}
.article .steps ul strong{color:var(--t2)}

.pager{display:flex; justify-content:space-between; gap:16px; margin:52px 0 0; padding-top:24px; border-top:1px solid var(--border)}
.pager a{
  flex:0 1 46%; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:14px 16px; color:var(--t1); font-size:15px; line-height:1.4
}
.pager a:hover{border-color:var(--green); text-decoration:none}
.pager a.next{text-align:right}
.pager span{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t3); margin-bottom:5px
}
.related{margin-top:44px}
.related h2{font-size:12px; font-family:var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--t3); margin:0 0 14px}
.related ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.related a{font-size:15.5px}

/* ── area feature page ──────────────────────────────────────────────── */
.area{padding:44px 24px 90px}
.area main{max-width:820px; margin:0 auto}
.area h1{font-size:clamp(30px,4.4vw,42px); letter-spacing:-.025em; margin:0 0 18px}
.area .lead{font-size:18.5px; line-height:1.65; color:var(--t2); margin:0 0 16px; max-width:66ch}
.overview{margin:34px 0 8px}
.overview h2{font-size:20px; letter-spacing:-.015em; margin:0 0 14px}
.overview p{color:var(--t2); font-size:16.5px; line-height:1.7; margin:0 0 15px}
.overview p strong{color:var(--t1)}
.overview p.bullet{padding-left:18px; position:relative; margin:0 0 11px}
.overview p.bullet::before{content:'—'; position:absolute; left:0; color:var(--green)}
.qgroup{margin-top:40px}
.qgroup>h2{
  font-size:12px; font-family:var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--green); margin:0 0 4px; padding-bottom:10px; border-bottom:1px solid var(--border)
}
.gnote{color:var(--t3); font-size:15px; margin:12px 0 4px}
.entry .body .full{
  display:inline-block; margin-top:6px; font-size:14.5px; font-weight:600
}

/* A lead image inside each area-page answer — without one the accordion reads
   as text-only and the guide behind it looks like it has no pictures. */
/* min(), not a bare 560px: the figure now sizes to its content, and a plain
   560 cap pushes past a phone's width. */
.entry .body .shot.lead{margin:14px 0 4px; max-width:min(560px,100%)}
.entry .body .shot.lead img{border:1px solid var(--border2); border-radius:8px; width:100%; height:auto; display:block}

/* Images carry explicit width/height so the browser reserves space and the page
   does not jump as they arrive. These rules keep them fluid regardless. */
.shot img{max-width:100%; height:auto}