:root{
  --color-bg:#111214;--color-surface:#191b1e;--color-surface-raised:#23262a;--color-border:#33363d;
  --color-text:#f5f4f7;--color-muted:#9ca3af;
  --color-accent:#ff0083;--color-accent-hover:#ff379e;
  --color-profit:#4ccb83;--color-loss:#f06a6a
}
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans Hebrew",sans-serif;line-height:1.55;font-size:16px}
.wrap{max-width:1080px;margin:auto;padding:28px 16px 60px}
h1{font-size:clamp(28px,5vw,44px);margin:18px 0 4px;text-wrap:balance}
h2{font-size:22px;margin:36px 0 12px;text-wrap:balance}
h3{font-size:17px;margin:22px 0 10px}
p{margin:10px 0}
.muted{color:var(--color-muted)}
.badge{display:inline-block;padding:5px 11px;border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-muted);border-radius:999px;font-size:13px}

/* Numbers, amounts and sizes stay left to right inside the right-to-left text. */
.n{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:tabular-nums}

.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 4px}
.updated{display:inline-block;background:var(--color-accent);color:#fff;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px}
.disclaimer{color:var(--color-muted);font-size:13px}
.disclaimer a{color:var(--color-muted);text-decoration:underline}
.disclaimer a:hover{color:var(--color-accent)}
.scope{margin:12px 0 0;font-size:15px}
.scope a{color:var(--color-text);text-decoration:underline}
.scope a:hover{color:var(--color-accent)}

/* Jump links to the sections. */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px}
.toc a{display:inline-block;padding:8px 14px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;font-weight:600;font-size:14px;text-decoration:none}
.toc a:hover{border-color:var(--color-accent);color:var(--color-accent)}

.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:16px;margin:12px 0}
.table-wrap{overflow-x:auto;margin:12px 0;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface)}
table{width:100%;border-collapse:collapse}
caption{caption-side:top;text-align:right;padding:12px 13px 4px;font-weight:700}
th,td{padding:10px 13px;border-bottom:1px solid var(--color-border);text-align:right;vertical-align:top}
thead th{background:var(--color-surface-raised);color:var(--color-muted);font-size:13px;font-weight:600}
tbody th{font-weight:600;color:var(--color-text)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.tip{border-right:4px solid var(--color-accent);background:var(--color-surface-raised);padding:13px 15px;margin:12px 0;border-radius:10px}
ul{margin:6px 0;padding-right:22px}
li{margin:6px 0}

.src{margin:6px 2px 0;font-size:12.5px;color:var(--color-muted)}
.src a{display:inline-block;color:var(--color-muted);text-decoration:underline}
.card a,.tip a{color:var(--color-text);text-decoration:underline}
.card a:hover,.tip a:hover{color:var(--color-accent)}
.src a:hover{color:var(--color-accent)}

.cta{text-align:center;margin:40px 0 4px;padding:26px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px}
/* Phones: the question and the answer each take their own line, so the break always falls after
   the question mark. From tablet width the sentence fits on one line and stays there. */
.cta p{font-size:17px;font-weight:700;margin:0 auto 16px;line-height:1.5}
.cta p span{display:block;text-wrap:balance}
@media(min-width:768px){
  .cta p{white-space:nowrap}
  .cta p span{display:inline}
}
.cta a{display:inline-block;background:var(--color-accent);color:#fff;font-weight:700;font-size:15px;padding:12px 30px;border-radius:999px;text-decoration:none}
.cta a:hover{background:var(--color-accent-hover)}

.footer{font-size:13px;color:var(--color-muted);margin-top:18px}
.footer a{color:var(--color-muted)}
.footer a:hover{color:var(--color-accent)}

/* Header: the Passo Trading logo and a link back to the landing page. */
.site-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}
.site-top .logo{display:inline-flex}
.site-top .logo img{display:block;height:30px;width:auto}
.site-top .back{color:var(--color-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.site-top .back:hover{color:var(--color-accent)}
a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}

/* Independence, sources and the risk disclosure: body text size, not fine print. */
/* The independence statement: plain body text, at the bottom above the sources. */
.independence{margin:36px 0 0}
.sources a{color:var(--color-text);text-decoration:underline}
.sources a:hover{color:var(--color-accent)}
.legal{margin-top:12px}
.legal p{margin:0 0 10px;font-size:15px;line-height:1.55}
.legal p:last-child{margin-bottom:0}

@media(max-width:720px){
  .tiers{grid-template-columns:1fr}
  th,td{font-size:13px;padding:8px}
}