/* Choptick article pages — the shared look for /prop-firm-*.html and friends. * * Extracted 2026-09-04. Every article carried its own copy of this, so a brand * change meant editing it in seven places and a reader who opened two articles * downloaded it twice. Linked and cached instead. * * ⚠ The theme is applied by an inline script in each page's BEFORE this * loads, so there is no flash of the wrong theme. Keep that script inline. */ :root[data-theme="dark"]{--bg:#0e1219;--bg2:#151b25;--bg3:#1b2230;--border:rgba(223,230,239,0.10);--text:#dfe6ef;--text-dim:#8794a5;--accent:#c2895f;--green:#46c07a;--red:#e2606a} :root[data-theme="light"]{--bg:#eef1f5;--bg2:#ffffff;--bg3:#f6f8fa;--border:rgba(20,30,48,0.10);--text:#1a222e;--text-dim:#586472;--accent:#a4652f;--green:#1f9d57;--red:#c0392b} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.68;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} .wrap{max-width:720px;margin:0 auto;padding:0 24px} nav{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent)} .nav-in{display:flex;align-items:center;gap:16px;height:60px;max-width:960px;margin:0 auto;padding:0 24px} .brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--accent)}.brand span{color:var(--text)}.brand-logo{width:24px;height:24px;display:block} .nav-links{margin-left:auto;display:flex;align-items:center;gap:14px} .nav-links a{color:var(--text-dim);font-size:14px;font-weight:500} .nav-links a:hover{color:var(--text)} header.hero{padding:56px 0 4px} .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent)} h1{font-size:clamp(29px,4.4vw,42px);letter-spacing:-0.03em;font-weight:800;margin-top:12px;line-height:1.15;text-wrap:balance} .standfirst{margin:18px 0 0;color:var(--text-dim);font-size:17px} article{padding:14px 0 60px} h2{font-size:23px;letter-spacing:-0.02em;font-weight:750;margin:44px 0 12px;text-wrap:balance} h3{font-size:17.5px;font-weight:700;margin:28px 0 8px} p{margin:0 0 16px;font-size:16.5px} ul{margin:0 0 18px;padding-left:22px} li{margin:0 0 9px;font-size:16.5px} strong{font-weight:680} .lede{font-size:17.5px} table{width:100%;border-collapse:collapse;margin:20px 0 22px;font-size:15px} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)} th{font-size:12.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-dim);font-weight:700} td.num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums} .tbl-wrap{overflow-x:auto} .neg{color:var(--red)}.pos{color:var(--green)} .callout{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:18px 20px;margin:24px 0} .callout p:last-child{margin-bottom:0} .callout .ct{font-size:12.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--accent);margin-bottom:6px} .cta{background:var(--bg2);border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);border-radius:14px;padding:26px;margin:46px 0 0;text-align:center} .cta h2{margin:0 0 8px;font-size:21px} .cta p{color:var(--text-dim);font-size:15.5px;max-width:46ch;margin:0 auto 18px} /* ⚠ The block is centred, so a list inside it has to opt out — a centred bulleted list is unreadable. These "what you actually get" lists exist because a page that ranks and does not show the product has only done half its job. */ .cta ul{text-align:left;max-width:60ch;margin:0 auto 20px;padding:0;list-style:none} .cta ul li{position:relative;padding:7px 0 7px 22px;color:var(--text-dim);font-size:15px;line-height:1.55} .cta ul li+li{border-top:1px solid var(--border)} .cta ul li::before{content:"¹3";position:absolute;left:0;top:7px;color:var(--accent);font-weight:700} .cta ul li strong{color:var(--text)} .btn{display:inline-flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:600;padding:11px 22px;border-radius:9px;background:var(--accent);color:#fff;border:1px solid transparent;transition:transform .08s ease} .btn:hover{transform:translateY(-1px)} .related{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--border);font-size:15.5px;color:var(--text-dim)} .related a{color:var(--accent);font-weight:600} .disclaim{margin-top:34px;color:var(--text-dim);font-size:13.5px;line-height:1.6} footer{border-top:1px solid var(--border);padding:26px 0 40px;color:var(--text-dim);font-size:13.5px} footer a{color:var(--text-dim);text-decoration:underline} /* ⛔ RECOVERED 2026-09-04. These rules were LOST TWICE and neither loss was * visible on a desktop. Writing the consistency article I copied this * stylesheet's opening and stopped before the media queries; extracting the * shared file from THAT article then propagated the omission back onto * prop-firm-drawdown.html, which had been correct. * * ⚠ Caught by qa/public-nav.test.js, which reads the page source for the wrap * rule — so it now has to follow the . Without these, the nav is 669px * inside a 390px phone and the links sit off-screen, on pages published * specifically to receive search traffic that is mostly mobile. */ /* NAV OVERFLOW. Measured on a real phone viewport: this nav was 669px wide inside 390px, so Pricing, Sign in and Get started all sat off-screen and were reachable only by scrolling sideways -- including the primary CTA. Nothing about the nav was responsive; it simply ran off the edge. Wrap it, and drop the same-page jump links on a phone, where you reach those sections by scrolling anyway. */ @media(max-width:820px){ /* height was a fixed 60px, so a wrapped second row spilled straight over the hero underneath -- the DOM reported every link "visible" while they sat on top of the page content. Let it grow instead. */ .nav-in{flex-wrap:wrap;justify-content:center;row-gap:6px;height:auto;min-height:60px;padding-top:8px;padding-bottom:8px} .nav-links{margin-left:0;flex-wrap:wrap;justify-content:center;gap:6px} .nav-links a:not(.btn){padding:6px 9px;font-size:13px} .nav-links .btn{padding:7px 12px;font-size:13px} } @media(max-width:640px){ .nav-links a[href^="#"]{display:none} /* Wrapped, this nav is three rows tall. Sticky, that permanently ate a fifth of a phone screen -- worse than the problem it fixed. Let it scroll away on a phone; every link is also in the footer. */ nav{position:static} }