/* Trading (education) page layout. */
.page-hero{padding-top:64px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:940px){.page-hero{grid-template-columns:1fr;gap:40px}}
.page-hero h1{font-size:clamp(42px,6.4vw,72px);line-height:1.02;margin:16px 0 20px}
.page-hero p{max-width:460px;color:var(--text-on-dark-dim);font-size:16px}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}

#chartSvg{width:100%;height:auto}
.candle-group{opacity:0;transform:scaleY(.15);transform-box:fill-box;transform-origin:bottom;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.candle-group.show{opacity:1;transform:scaleY(1)}
.trendline{fill:none;stroke:var(--gold-bright);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,213,77,.5))}
.grid-line{stroke:var(--line);stroke-width:1}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.split h2{font-size:clamp(30px,4vw,42px);margin-bottom:18px}
.body-text p{color:var(--text-on-dark-dim);margin-bottom:16px;max-width:58ch}
.body-text strong{color:var(--text-on-dark);font-weight:500}

.swap-demo{padding:28px}
.swap-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.swap-chip{flex:1;text-align:center;padding:20px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(0,0,0,.2)}
.swap-chip .label{font:11px var(--font-mono);color:var(--text-on-dark-faint);letter-spacing:.08em;text-transform:uppercase}
.swap-chip .val{font:26px var(--font-display);margin-top:8px}
.swap-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:float-arrow 2.4s ease-in-out infinite}
.swap-arrow svg{width:15px;height:15px;color:var(--gold-bright)}
@keyframes float-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.swap-caption{margin-top:18px;font-size:13px;color:var(--text-on-dark-dim);text-align:center}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.duo-card{padding:30px}
.duo-card h3{font-size:23px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.duo-card p{color:var(--text-on-dark-dim);font-size:14.5px;max-width:42ch}
.duo-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.long .duo-icon{background:rgba(255,213,77,.12);border:1px solid rgba(255,213,77,.35)}
.short .duo-icon{background:rgba(90,163,143,.12);border:1px solid rgba(90,163,143,.35)}
.duo-icon svg{width:19px;height:19px}
.long .duo-icon svg{color:var(--gold-bright);animation:float-y-sm 2.6s ease-in-out infinite}
.short .duo-icon svg{color:var(--accent2-bright);animation:float-y-sm 2.6s ease-in-out infinite reverse}

.anatomy-wrap{max-width:980px;margin:0 auto}.anatomy-stage{display:grid;grid-template-columns:150px minmax(170px,.75fr) minmax(220px,1fr);gap:clamp(18px,4vw,46px);align-items:center;padding:32px;min-height:350px}
.anatomy-controls{display:grid;gap:8px}.anatomy-controls .tab-btn{padding:11px 13px;font-size:13px}.anatomy-controls .tab-btn .k{font-size:10px}
#anatomySvg{width:200px;height:280px}
.anat-highlight{transition:filter .3s ease,opacity .3s ease;opacity:.3}.anat-highlight.on{opacity:1;filter:drop-shadow(0 0 9px rgba(255,213,77,.8))}.anat-highlight.pulse{animation:anatomy-pulse .52s var(--ease-soft)}@keyframes anatomy-pulse{0%{opacity:.38;filter:drop-shadow(0 0 0 rgba(255,213,77,0))}55%{opacity:1;filter:drop-shadow(0 0 16px rgba(255,213,77,.95))}100%{opacity:1;filter:drop-shadow(0 0 9px rgba(255,213,77,.8))}}
.anat-hitbox{pointer-events:all;stroke:rgba(0,0,0,.001);stroke-width:34;fill:rgba(0,0,0,.001);cursor:pointer;outline:none}.anat-hitbox[data-anatomy-part="body"]{stroke-width:0}.anat-point-hitbox{stroke-width:0}.anat-level-hitbox{stroke-width:0}.anat-hitbox:hover,.anat-hitbox:focus-visible,.anat-hitbox.active{filter:drop-shadow(0 0 10px rgba(255,213,77,.7))}.anat-hitbox:focus-visible{stroke:rgba(255,213,77,.35);outline:none}
.anatomy-explainer{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.025);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.anatomy-explainer.is-active{border-color:var(--gold-line);background:rgba(255,213,77,.055);animation:explainer-in .42s var(--ease-soft)}@keyframes explainer-in{from{opacity:.55;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}.anatomy-explainer span{font:10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright)}.anatomy-explainer h3{font-size:23px;margin:6px 0}.anatomy-explainer p{font-size:14px;color:var(--text-on-dark-dim)}
@media (max-width:760px){.anatomy-stage{grid-template-columns:1fr;padding:22px;gap:24px}.anatomy-controls{grid-template-columns:1fr 1fr}.anatomy-stage #anatomySvg{margin:auto}.anatomy-explainer{min-height:150px}}

.risk-section{background:linear-gradient(180deg,rgba(90,163,143,.05),transparent 60%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.leverage-bar{margin-top:40px;padding:24px 28px}
.leverage-bar .row{display:flex;justify-content:space-between;font:12px var(--font-mono);color:var(--text-on-dark-dim);margin-bottom:10px}
.bar-track{height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.bar-fill{height:100%;width:0%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--accent2));transition:width 1.4s var(--ease)}
.bar-fill.is-visible{width:88%}