/* Real screenshot coordinates are shared by the image and SVG overlay. */
.hero{width:min(1480px,calc(100% - 64px));grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:36px;align-items:center}
.hero h1{font-size:38px;text-wrap:initial}
.hero .lede{font-size:18px;line-height:1.6}
.hero-copy{min-width:0}
.trade-example{min-width:0;width:100%}
.trade-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;font-weight:600;color:#cfbf98;margin-bottom:14px}
.trade-heading b{color:#ed8c8b;font-size:11px;border:1px solid #bd61613b;padding:3px 7px;border-radius:4px}
.trade-composition{position:relative}
.trade-chart{position:relative;aspect-ratio:2034/1380;overflow:hidden;border:1px solid #d3ab5545;border-radius:18px;background:#151922;box-shadow:0 16px 45px #0005}
.trade-chart-image{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.trade-connectors,.trade-markers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.trade-connectors path{fill:none;stroke:#ecc873;stroke-width:2;vector-effect:non-scaling-stroke}
.trade-connectors circle{fill:#171a21;stroke:#ecc873;stroke-width:2;vector-effect:non-scaling-stroke}
.trade-connectors .exit-point{stroke:#80d6ab;fill:#254534}
.trade-connectors .fall-path{stroke:#edc977;stroke-width:1.5;stroke-dasharray:5 7;opacity:.55}
.trade-marker{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:7px;padding:7px 9px;background:#10110ff0;border:1px solid #be9b554f;border-radius:6px;box-shadow:0 4px 16px #0005;color:#f4e7c7;font-size:12px;white-space:nowrap;line-height:1.25}
.trade-marker b{display:grid;place-items:center;width:20px;height:20px;border:1px solid #ba9652;border-radius:4px;font-size:12px;color:#f4d68e}
.trade-marker.profit{border-color:#80d6ab66}.trade-marker.profit b{color:#9bdfbc;border-color:#80d6ab88}
.marker-short{display:none}
.trade-proof{position:absolute;width:26%;margin:0;z-index:2}
.proof-signal{left:7%;top:39%}
.proof-result{right:4%;top:58%}
.trade-proof .media-button{border:1px solid #d7b65c70;border-radius:8px;box-shadow:0 9px 26px #0008;aspect-ratio:auto;background:#12120f}
.trade-proof img{display:block;width:100%;height:auto;object-fit:contain}
.proof-result .media-button{border-color:#79bd9070}
.trade-proof figcaption{font-size:11px;line-height:1.4;color:#c4bca8;margin-top:6px}
.trade-proof .expand-mark{width:24px;height:24px;font-size:18px;right:5px;bottom:5px}
.trade-summary{font-size:14px;margin:38px 0 8px;color:#c7c5bd;max-width:70%}
.trade-summary strong{color:#91d9b3;white-space:nowrap}
.trade-disclaimer{font-size:12px;line-height:1.5;max-width:72%}
.trade-example.is-animated .trade-chart-image{animation:trade-appear .6s both}
.trade-example.is-animated .trade-marker,.trade-example.is-animated .trade-proof{animation:trade-appear .5s both;animation-delay:var(--delay,.3s)}
.trade-example.is-animated .proof-signal{--delay:.5s}.trade-example.is-animated .proof-result{--delay:1.6s}
.trade-example.is-animated .fall-path{animation:trade-appear .7s 1s both}
@keyframes trade-appear{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(min-width:1600px){.hero h1{font-size:42px}}
@media(min-width:768px) and (max-width:1199px){.hero{grid-template-columns:1fr;max-width:850px}.hero-copy{max-width:650px}.trade-example{margin-top:8px}.hero h1{font-size:38px}}
@media(max-width:767px){
 .hero{display:flex;flex-direction:column;width:calc(100% - 32px);gap:24px;padding-block:30px}
 .hero-copy{display:contents}.hero .eyebrow{align-self:flex-start;margin-bottom:0;order:0}
 .hero h1{order:1;margin:0;width:100%;font-size:36px;line-height:1.14;overflow-wrap:normal}.hero .lede{order:2;margin:0;font-size:18px;line-height:1.5}
 .hero .actions{display:contents}.hero .actions .primary{order:3;align-self:stretch;text-align:center}
 .trade-example{order:5}.hero .actions .secondary{order:6;align-self:stretch;text-align:center}
 .hero-detail{order:7;margin:0!important;font-size:16px}.hero-copy>.micro{order:4;margin:-12px 0 4px;font-size:14px;line-height:1.5;align-self:stretch}.exchange-strip{order:8;margin:0!important;font-size:14px}
 .trade-heading{font-size:12px;gap:12px;line-height:1.5;align-items:flex-start}.trade-heading>span{max-width:250px}.trade-heading b{font-size:12px;flex-shrink:0}
 .trade-composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .trade-chart{grid-column:1/-1;aspect-ratio:1;border-radius:16px}
 .trade-marker{left:var(--mobile-x);top:var(--mobile-y);font-size:14px;padding:6px 8px;gap:5px}
 .marker-long{display:none}.marker-short{display:inline}
 .trade-proof{position:static;width:100%;min-width:0;max-width:none;margin:0}
 .trade-proof .media-button{border-radius:8px;width:100%;aspect-ratio:1;background:#151515}.trade-proof img{width:100%;height:100%;object-fit:contain}.trade-proof figcaption{font-size:14px;line-height:1.4;margin-top:8px}
 .trade-summary{margin-top:20px;font-size:15px;max-width:none}.trade-disclaimer{max-width:none;font-size:13px}
}
@media(max-width:360px){.hero h1{font-size:32px}.trade-heading{font-size:12px}.hero{gap:20px}.hero .lede{font-size:17px}.trade-marker{padding:5px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.trade-example.is-animated *{animation:none!important}}