/* HFT ALGO How-It-Works public guide. Only guide-specific selectors; no trading/payment changes. */
:root{color-scheme:dark;--ink:#08080b;--panel:#151418;--line:#403039;--red:#ef284d;--muted:#c5b9c0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.howto-page{margin:0;color:#f8f6f8;background:#09090b;font:16px/1.5 system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.howto-page a{color:inherit;text-decoration:none}
.howto-page button{font:inherit;cursor:pointer}
.howto-page a:focus-visible,.howto-page button:focus-visible{outline:2px solid #ff89a0;outline-offset:4px}
.howto-header{max-width:1280px;margin:0 auto;padding:20px 34px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:55px;align-items:center;min-height:84px}
.howto-logo{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:24px;font-weight:900;letter-spacing:.03em}
.howto-logo img{display:block;width:37px;height:37px;object-fit:contain;background:#000;border-radius:6px}
.howto-logo b,.howto-footer b{color:#f1395a}
.howto-nav{display:flex;align-items:center;justify-content:center;gap:28px;white-space:nowrap}
.howto-nav a{padding:9px 8px;font-size:15px;color:#d8cfd3;font-weight:550;transition:color .15s ease}
.howto-nav a:hover{color:#fff}
.howto-nav a.active{font-weight:750;color:#fff}
.howto-session{display:flex;align-items:center;justify-content:flex-end;justify-self:end;min-width:140px}
.howto-session-link,.howto-session button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #f03659;padding:10px 18px;border-radius:9px;background:transparent;color:#fff;font-size:14px;font-weight:650;min-width:118px}
.howto-session-link:hover,.howto-session button:hover{background:#421a26}
.howto-session [hidden]{display:none!important}
.howto-container{max-width:1170px;margin:0 auto;padding:0 22px 42px}
.howto-hero{text-align:center;position:relative;padding:32px 10px 30px}
.howto-hero h1{font-size:clamp(35px,5vw,60px);line-height:1.12;letter-spacing:-.045em;margin:5px 0 9px;font-weight:850}
.howto-hero h1 span{color:#ef3457}
.howto-hero p{font-size:clamp(14px,1.6vw,18px);margin:0 auto;max-width:730px;color:#d9cbd1}
.howto-footer{border-top:1px solid #28252a;max-width:1170px;margin:35px auto 0;padding:26px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#9b9098;font-size:12px}
.howto-footer span:first-child{font-weight:900;font-size:18px;color:#fff}
.howto-demo{position:absolute;top:10px;left:12px;z-index:1;border:1px solid #b76d7d;background:#210d14cf;color:#ffe2e8;font-size:9px;font-weight:850;letter-spacing:.09em;border-radius:4px;padding:4px 7px}
.howto-visual{display:block;position:relative;margin:0;overflow:hidden;background:#150e12;border:1px solid #553340;border-radius:11px;min-height:105px}
.howto-visual img{display:block;width:100%;height:100%;object-fit:cover}
.howto-tips{margin:22px auto 0;max-width:1120px;border:1px solid #692738;border-radius:12px;background:linear-gradient(108deg,#35131d,#1a1016 70%,#30131c);padding:18px 23px;display:flex;align-items:center;gap:17px}
.howto-tips h2{font-size:16px;margin:0 12px 0 0;white-space:nowrap}
.howto-tips p{color:#e2ced4;font-size:13px;margin:0}
.howto-tips strong{color:#fff}
.howto-tips .icon{color:#ff5274;font-size:24px;font-weight:800}
.howto-bottom-note{font-size:12px;color:#a99da4;text-align:center;margin:17px auto 0}
.howto-bottom-note a{text-decoration:underline;color:#ffb5c3}
@media(max-width:800px){.howto-header{padding:18px 20px;column-gap:16px;grid-template-columns:1fr auto;row-gap:6px}.howto-logo{font-size:20px}.howto-nav{grid-column:1;grid-row:2;justify-content:start;gap:12px}.howto-nav a{font-size:13px}.howto-session{grid-column:2;grid-row:1 / span 2;min-width:0}.howto-session-link,.howto-session button{padding:9px 10px;min-width:0;font-size:12px}}
@media(max-width:470px){.howto-container{padding-left:12px;padding-right:12px}.howto-header{padding:12px}.howto-logo{font-size:18px}.howto-logo img{width:29px;height:29px}.howto-hero{padding:30px 7px 25px}.howto-tips{align-items:flex-start;flex-direction:column;gap:7px}.howto-footer{padding:23px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* OPTION A: five calm stacked panels, picture on right */
body.howto-stacked{background:radial-gradient(ellipse 65% 260px at 10% 250px,#3c101a 0,transparent 85%),radial-gradient(ellipse 35% 270px at 94% 140px,#440b1a 0,transparent 85%),#09090b}
.howto-stacked .howto-header{border-bottom:1px solid #272329}
.howto-stacked .howto-nav a.active{border-bottom:3px solid var(--red)}
.howto-stacked .howto-hero{padding:34px 8px 32px}
.howto-stack{display:flex;flex-direction:column;gap:14px}
.howto-stack-card{display:grid;grid-template-columns:minmax(0, .97fr) minmax(0,1fr);gap:24px;align-items:center;min-height:188px;padding:15px 16px 15px 24px;background:linear-gradient(135deg,#19191d,#111115);border:1px solid #3c3a40;border-radius:14px}
.howto-copy{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:start;gap:15px}
.howto-number{border-radius:50%;background:linear-gradient(140deg,#fe3758,#711323);border:1px solid #b13047;box-shadow:0 9px 25px #b40f292b;color:#fff;display:grid;place-items:center;width:53px;height:53px;font-size:26px;font-weight:850}
.howto-copy-inner{border-left:2px solid #a92a42;padding-left:18px}
.howto-copy h2{font-size:clamp(19px,2.3vw,27px);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.howto-copy p{font-size:14px;line-height:1.52;color:#ddd5d9;margin:0 0 7px}
.howto-copy .howto-addendum{font-size:12px;color:#b8a9b0;margin-top:8px}
.howto-copy a{text-decoration:underline;color:#ff99b0}
.howto-stack-card .howto-visual{aspect-ratio:3.05/1;width:100%;max-width:515px;justify-self:end}
.howto-stacked .howto-visual img{object-position:center}
@media(max-width:780px){.howto-stack-card{grid-template-columns:1fr;gap:15px;padding:17px}.howto-stack-card .howto-visual{max-width:100%;justify-self:stretch}.howto-copy{grid-template-columns:52px 1fr}.howto-number{width:46px;height:46px;font-size:22px}}
@media(max-width:470px){.howto-copy{grid-template-columns:41px 1fr;gap:10px}.howto-number{width:39px;height:39px;font-size:18px}.howto-copy-inner{padding-left:13px}.howto-stack-card .howto-visual{aspect-ratio:2.7/1}}
