/* theme-v4.css — FNOTrader cover-page theme (landing redesign).
   Loaded LAST on every public cover page (blog, guides, FAQ, glossary, brokers, tools, events, referral,
   plan picker, build-your-own, legal, auth). It does not touch page logic: it
   1) re-points the old shared tokens (styles.css / legal.css / auth.css / blog.css) at the new palette,
   2) tones typography and buttons down to the new weights, and
   3) styles the new site header (nav.v4n) and footer (footer.v4f) — scoped so old page CSS can't leak in. */

/* ---------- new palette ---------- */
:root{
  --v4-bg:#ffffff;--v4-ink:#1b2540;--v4-ink-2:#3d4a68;--v4-mute:#6b7a99;--v4-line:#d8e3f7;--v4-soft:#eef3ff;--v4-soft-2:#e3ecff;
  --v4-blue:#1e6fd8;--v4-blue-ink:#0f3d8a;--v4-blue-soft:#e3edfb;--v4-green:#15803d;--v4-card:#ffffff;
  --v4-shadow:0 18px 40px -18px rgba(11,21,38,.22),0 2px 6px rgba(11,21,38,.05);
  /* styles.css tokens → new */
  --bg:var(--v4-bg);--panel:var(--v4-card);--panel-2:var(--v4-soft);--border:var(--v4-line);--text:var(--v4-ink);--text-2:var(--v4-ink-2);
  --muted:var(--v4-mute);--blue:var(--v4-blue);--violet:#4f46e5;--green:var(--v4-green);--grad:linear-gradient(120deg,#1e6fd8 0%,#4f46e5 100%);
  --shadow:var(--v4-shadow);--nav-bg:color-mix(in srgb,var(--v4-bg) 86%,transparent);
  /* legal.css / auth.css tokens → new */
  --accent:var(--v4-blue);--accent-blue:var(--v4-blue);--page-bg:var(--v4-bg);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --v4-bg:#0c1220;--v4-ink:#d3dae6;--v4-ink-2:#aeb8ca;--v4-mute:#8592a8;--v4-line:#1f2a3d;--v4-soft:#121a2b;--v4-soft-2:#15203a;
  --v4-blue:#5b9aff;--v4-blue-ink:#bcd4ff;--v4-blue-soft:#17294b;--v4-green:#4ade80;--v4-card:#111a2c;
  --v4-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);
}

/* ---------- base ---------- */
html body{background:var(--v4-bg);color:var(--v4-ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-weight:400}
/* the old pages used 800–900 weights everywhere; the redesign is lighter (user: "text too thick") */
body h1{font-weight:700!important;letter-spacing:-.03em;color:var(--v4-ink)}
body h2{font-weight:650!important;letter-spacing:-.02em;color:var(--v4-ink)}
body h3,body h4{font-weight:600!important;color:var(--v4-ink)}
body h5,body h6{font-weight:600!important}
body b,body strong{font-weight:600}
/* gradient headline words → the new single blue accent */
body .grad-text,body .grad-tx,body .grad{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--v4-blue)!important}
/* buttons: pill, solid blue primary, tinted ghost */
body .btn-cta,body .btn-pri,body .btn-primary,body .btn.btn-cta{background:var(--v4-blue)!important;color:#fff!important;border:1px solid transparent;border-radius:999px;font-weight:500;box-shadow:0 8px 20px -10px var(--v4-blue)}
body .btn-cta:hover,body .btn-pri:hover,body .btn-primary:hover{filter:brightness(1.05)}
body .btn-ghost{background:var(--v4-card);color:var(--v4-ink);border:1px solid var(--v4-line);border-radius:999px;font-weight:500}
body a{color:inherit}
body .kicker,body .eyebrow{background:var(--v4-blue-soft);color:var(--v4-blue-ink);font-weight:600}

/* ---------- new header ---------- */
nav.v4n{display:block;left:auto;right:auto;position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--v4-bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:0;border-bottom:1px solid var(--v4-line);margin:0;padding:0;box-shadow:none;height:auto;width:auto;font-family:var(--font)}
nav.v4n .wrap.nav-in{max-width:1500px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:22px;height:64px;box-sizing:border-box}
nav.v4n a{color:inherit;text-decoration:none}
nav.v4n .logo{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--v4-ink);margin:0;padding:0;background:none}
nav.v4n .logo img{width:28px;height:28px;background:#fff;padding:3px;border-radius:7px;box-shadow:0 1px 6px rgba(0,0,0,.25);box-sizing:border-box}
nav.v4n .logo b{color:var(--v4-blue);font-weight:700}
nav.v4n .logo sup{font-size:8px;opacity:.5;margin-left:1px}
nav.v4n .nav-links{display:flex;align-items:center;gap:18px;font-size:13.5px;font-weight:500;color:var(--v4-ink-2);margin:0 0 0 6px;padding:0;flex:0 1 auto}
nav.v4n .nav-links>a{padding:0;margin:0;border-radius:0;background:none;font-size:13.5px;font-weight:500;color:var(--v4-ink-2)}
nav.v4n .nav-links>a:hover,nav.v4n .nav-ddt:hover{color:var(--v4-blue)}
nav.v4n .nav-dd{position:relative;padding-block:14px}
nav.v4n .nav-ddt{cursor:pointer;color:var(--v4-ink-2);font-weight:500}
nav.v4n .nav-dd-menu{display:none;position:absolute;top:100%;left:-12px;min-width:290px;background:var(--v4-card);border:1px solid var(--v4-line);border-radius:14px;box-shadow:var(--v4-shadow);padding:8px;z-index:60}
nav.v4n .nav-dd:hover .nav-dd-menu,nav.v4n .nav-dd:focus-within .nav-dd-menu{display:block}
nav.v4n .nav-dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;color:var(--v4-ink-2)}
nav.v4n .nav-dd-menu a:hover{background:var(--v4-soft);color:var(--v4-ink)}
nav.v4n .nav-dd-menu a i{width:9px;height:9px;border-radius:3px;background:var(--c);flex:none}
nav.v4n .theme-tg{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--v4-line);background:var(--v4-card);cursor:pointer;font-size:15px;display:grid;place-items:center;padding:0;color:inherit}
nav.v4n .nav-auth{display:flex;gap:10px;align-items:center;margin:0}
nav.v4n .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;border:1px solid transparent}
nav.v4n .btn-sm{height:38px;padding:0 16px;font-size:13.5px}
nav.v4n .btn-ghost{background:var(--v4-card)!important;color:var(--v4-ink)!important;border-color:var(--v4-line)}
nav.v4n .btn-blue,nav.v4n .btn-cta{background:var(--v4-blue)!important;color:#fff!important;box-shadow:0 8px 20px -10px var(--v4-blue)}
@media (max-width:1080px){nav.v4n .nav-links{display:none}nav.v4n.fnt-mnav-host .nav-in{gap:8px}nav.v4n.fnt-mnav-host .theme-tg{margin-left:auto}}
@media (max-width:420px){nav.v4n .wrap.nav-in{padding-inline:16px}nav.v4n .logo{font-size:15px;gap:7px}nav.v4n .logo img{width:26px;height:26px}nav.v4n .logo sup{display:none}nav.v4n .nav-auth{gap:6px}nav.v4n .nav-auth .btn-sm{height:34px;padding:0 12px;font-size:13px}nav.v4n .theme-tg{width:34px;height:34px}}
@media (max-width:350px){nav.v4n .wrap.nav-in{padding-inline:12px}nav.v4n .logo{font-size:15px;gap:6px}nav.v4n .logo img{width:24px;height:24px}nav.v4n .nav-auth .btn-sm{padding:0 9px;font-size:12px}}

/* ---------- new footer ---------- */
footer.v4f{border:0;border-top:1px solid var(--v4-line);padding:36px 0 40px;margin:48px 0 0;font-size:13px;color:var(--v4-mute);background:var(--v4-bg);font-family:var(--font);text-align:left}
footer.v4f .wrap{max-width:1500px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:22px;box-sizing:border-box}
footer.v4f a{color:inherit;text-decoration:none}
footer.v4f .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
footer.v4f .fcols b{display:block;color:var(--v4-ink);margin-bottom:8px;font-size:13px;font-weight:600}
footer.v4f .fcols a{display:block;margin-bottom:6px;padding-block:3px}
footer.v4f .fcols a:hover{color:var(--v4-blue)}
footer.v4f .fcols a.logo{display:inline-flex;align-items:center;gap:9px;margin:0;white-space:nowrap;font-size:17px;font-weight:700;color:var(--v4-ink)}
footer.v4f .fcols .logo img{width:28px;height:28px;background:#fff;padding:3px;border-radius:7px;box-shadow:0 1px 6px rgba(0,0,0,.25);box-sizing:border-box}
footer.v4f .fcols .logo b{display:inline;margin:0;font-size:inherit;color:var(--v4-blue);font-weight:700}
footer.v4f .fcols .logo sup{font-size:8px;opacity:.5}
footer.v4f p{margin:12px 0 0;max-width:34ch;line-height:1.55}
footer.v4f .legal{border-top:1px solid var(--v4-line);padding-top:18px;font-size:12px;line-height:1.6;max-width:none;margin:0}
footer.v4f .foot-copy{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;border-top:1px solid var(--v4-line);padding-top:14px;font-size:12.5px;color:var(--v4-mute)}
footer.v4f .foot-copy a{text-decoration:underline}
@media (max-width:760px){footer.v4f .fcols{grid-template-columns:1fr 1fr}}

/* ---------- legal pages (legal.css was a dark stand-alone layout) ---------- */
body.v4-legal{padding:0!important}
body.v4-legal .v4-main{padding:32px 20px 20px}
body.v4-legal .legal-hero{background:linear-gradient(180deg,var(--v4-blue-soft),var(--v4-card))!important;color:var(--v4-ink)!important;border:1px solid var(--v4-line);box-shadow:none!important}
body.v4-legal .legal-hero *{color:inherit!important}
body.v4-legal .legal-hero .brand{display:none}
body.v4-legal .legal-toc,body.v4-legal .legal-doc{background:var(--v4-card)!important;border-color:var(--v4-line)!important;color:var(--v4-ink)}
body.v4-legal .legal-doc a,body.v4-legal .legal-toc a{color:var(--v4-blue)}

/* ---------- auth pages (login / register / reset) ---------- */
body.v4-auth{display:block!important;padding:0!important;min-height:100vh}
body.v4-auth .v4-main{min-height:calc(100vh - 65px);display:flex;align-items:center;justify-content:center;padding:28px 16px;box-sizing:border-box}
body.v4-auth .auth-card{box-shadow:var(--v4-shadow)}
body.v4-auth .auth-banner{background:linear-gradient(150deg,#0f3d8a 0%,#1e6fd8 100%)!important}
/* form panel: the new light card (dark theme keeps the dark card via the same tokens) */
body.v4-auth .auth-card{background:var(--v4-card);border:1px solid var(--v4-line)}
body.v4-auth .auth-form-panel{background:var(--v4-card);color:var(--v4-ink)}
body.v4-auth .auth-form-title{color:var(--v4-ink);font-weight:700}
body.v4-auth .auth-form-sub,body.v4-auth .swap,body.v4-auth .resend-row{color:var(--v4-mute)}
body.v4-auth .field-label{color:var(--v4-mute);font-weight:600}
body.v4-auth .field-input{background:var(--v4-soft);color:var(--v4-ink);border-color:var(--v4-line)}
body.v4-auth .field-input:focus{border-color:var(--v4-blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--v4-blue) 18%,transparent)}
body.v4-auth .consent-block{background:var(--v4-soft);border-color:var(--v4-line)}
body.v4-auth .consent-label{color:var(--v4-ink-2)}
body.v4-auth .consent-label a,body.v4-auth .swap a,body.v4-auth .resend-row a,body.v4-auth .dev-hint a{color:var(--v4-blue)}
body.v4-auth .btn-primary{border-radius:999px;font-weight:600}
body.v4-auth .btn-google{border-radius:999px;border-color:var(--v4-line)}
body.v4-auth .chan-badge{color:var(--v4-green)}
body.v4-auth .steps-dots i{background:var(--v4-line)}
body.v4-auth .auth-form-panel hr,body.v4-auth .or-row::before,body.v4-auth .or-row::after{border-color:var(--v4-line);background:var(--v4-line)}
body.v4-auth .auth-mobile-brand b span{color:var(--v4-ink)}
/* inline light-on-dark text inside the (now light) form panel */
body.v4-auth .auth-form-panel [style*="rgba(232,239,255"],body.v4-auth .auth-form-panel [style*="rgba(226,232,240"],body.v4-auth .auth-form-panel [style*="#94a3b8"]{color:var(--v4-mute)!important}
body.v4-auth .auth-form-panel [style*="color:#fff"],body.v4-auth .auth-form-panel [style*="color: #fff"],body.v4-auth .auth-form-panel [style*="#e2e8f0"]{color:var(--v4-ink)!important}

/* the old stylesheets append their own ® after the wordmark — the new chrome already has one */
nav.v4n .logo>span::after,footer.v4f .logo>span::after,nav.v4n .logo b::after,footer.v4f .logo b::after{content:none!important}