/* ZForex public site (redesign 2026-11-14). System fonts, one file, no frameworks. */
:root{--bg:#F5F7F8;--paper:#FFFFFF;--ink:#17202B;--muted:#5C6775;--rule:#DCE1E6;--buy:#1E6B5A;--sell:#9C3A36;--focus:#2B5FD9}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);padding:6px 10px;z-index:9}

/* header and footer */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.mark{font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.mark span{display:inline-block;width:9px;height:9px;background:var(--buy);margin-right:8px;transform:translateY(-1px)}
.nav a{margin-left:22px;text-decoration:none;color:var(--muted);font-size:15px}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.site-foot{border-top:1px solid var(--rule);margin-top:72px;padding:24px 0 44px;color:var(--muted);font-size:14px}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot a{text-decoration:none}.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot .pairs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:6px}

/* type */
h1{font-size:clamp(30px,4.4vw,44px);line-height:1.12;letter-spacing:-.025em;margin:0 0 16px;font-weight:700}
h2{font-size:20px;letter-spacing:-.01em;margin:0}
.lede{color:var(--muted);font-size:18px;margin:0 0 18px;max-width:38em}
.note{font-size:15px;border-left:3px solid var(--ink);padding:2px 0 2px 12px;margin:0;max-width:44em}
.muted{color:var(--muted)}
.intro{padding:56px 0 8px;max-width:680px}
.page{padding:44px 0 0}
.prose{max-width:44em}.prose h2{margin:32px 0 8px;font-size:18px}.prose p,.prose li{color:#2B3542}
.back{font-size:14px;color:var(--muted);text-decoration:none}.back:hover{color:var(--ink)}

/* section heading row */
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:40px 0 12px;color:var(--muted);font-size:14px}

/* signal cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sig{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:18px 18px 16px;display:grid;grid-template-columns:1fr 92px;gap:4px 14px;text-decoration:none}
a.sig:hover{border-color:#B9C1CA}
.sig h3{margin:0;font-size:18px;letter-spacing:-.01em}
.side{font-weight:700;font-size:14px;text-transform:capitalize}
h1 .side{font-size:.55em;margin-left:10px;vertical-align:.2em}.side.buy{color:var(--buy)}.side.sell{color:var(--sell)}
.state{grid-column:1/-1;color:var(--muted);font-size:14px;margin:-2px 0 10px}
.levels{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px;align-content:start}
.sig .levels{grid-column:1/-1}
.levels dt{color:var(--muted)}.levels dd{margin:0;text-align:right;font-weight:600}
.empty{background:transparent;border:1px dashed var(--rule);display:block;color:var(--muted);font-size:15px}
.empty h3{color:var(--ink);margin-bottom:6px}

/* price ladder: TP, entry and SL at real relative distances */
.ladder{position:relative;border-left:2px solid var(--rule);margin-left:10px;min-height:118px}
.ladder i{position:absolute;left:-7px;width:12px;height:2px;background:var(--muted)}
.ladder i.entry{background:var(--ink)}
.ladder b{position:absolute;left:10px;font-size:11px;color:var(--muted);font-weight:500;transform:translateY(-50%);white-space:nowrap}
.buy .ladder i.tp{background:var(--buy)}.sell .ladder i.tp{background:var(--sell)}
.ladder.big{min-height:220px;margin-left:4px}
.ladder.big b{font-size:13px}.ladder.big b em{font-style:normal;color:var(--ink);font-weight:600;margin-left:6px}

/* signal page */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:start;margin-top:8px}
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:22px}
.panel .levels{font-size:16px;gap:10px 18px}
.sentence{font-size:18px;margin:0 0 18px;max-width:34em}
.times{margin:20px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;color:var(--muted)}
.times dd{margin:0;color:var(--ink)}

/* lists and tables */
.list{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);border-radius:6px;font-size:15px}
.list th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:10px 12px;border-bottom:1px solid var(--rule)}
.list td{padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
.list tr:last-child td{border-bottom:0}
.list .n{text-align:right}
.list a{text-decoration:none}.list a:hover{text-decoration:underline}
.table-scroll{overflow-x:auto}
.blank{color:var(--muted);background:var(--paper);border:1px dashed var(--rule);border-radius:6px;padding:18px}

/* how-to */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin:64px 0 0;padding-top:28px;border-top:1px solid var(--rule)}
.how h2{grid-column:1/-1}
.how h3{font-size:16px;margin:0 0 6px}.how p{margin:0;color:var(--muted);font-size:15px}

.app-link{display:inline-block;margin-top:14px;padding:9px 14px;border:1px solid var(--ink);border-radius:4px;text-decoration:none;font-weight:600;font-size:15px}
.app-link:hover{background:var(--ink);color:var(--paper)}

@media (max-width:720px){.detail{grid-template-columns:1fr}.ladder.big{min-height:160px}}
@media (max-width:560px){.nav a:not(.keep){display:none}.intro{padding-top:36px}.page{padding-top:32px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}