/* Shared styles for the static, crawlable SEO pages under /learn and /tools.
   Deliberately self-contained (no engine CSS) — these pages are marketing/SEO
   surfaces, served as plain static HTML so Google reads them fully. Brand tokens
   mirror content-packs/stock-trading/theme.yaml. */
:root{
  --bg:#070B16; --bg2:#0D1530; --surface:#101A36; --line:#22305C;
  --text:#FFFFFF; --muted:#B6C2DE; --primary:#4E7AA6; --accent:#FBBF24; --success:#34D399;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(120% 90% at 80% 0%,var(--bg2) 0%,var(--bg) 60%);
  color:var(--text); font-family:Inter,system-ui,-apple-system,sans-serif; line-height:1.65;
}
a{color:#9cc2ea}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}

/* header */
.site-head{border-bottom:1px solid var(--line); background:rgba(7,11,22,.7); backdrop-filter:blur(6px); position:sticky; top:0; z-index:5}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-family:Poppins,sans-serif; font-weight:700; color:#fff; text-decoration:none; font-size:18px}
.brand .pig{font-size:22px}
.nav-cta{background:var(--accent); color:#070B16; font-weight:700; text-decoration:none; padding:9px 16px; border-radius:999px; font-size:14px; white-space:nowrap}

/* article */
main{padding:40px 0 20px}
.eyebrow{color:var(--accent); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; margin:0 0 10px}
h1{font-family:Poppins,sans-serif; font-weight:800; font-size:clamp(28px,5vw,44px); line-height:1.12; margin:0 0 14px}
h2{font-family:Poppins,sans-serif; font-weight:700; font-size:clamp(21px,3.4vw,28px); margin:38px 0 12px}
h3{font-weight:700; font-size:19px; margin:26px 0 8px}
p,li{color:#e7ecf7; font-size:17px}
.lead{color:var(--muted); font-size:19px}
ul,ol{padding-left:22px}
li{margin:6px 0}
blockquote{border-left:3px solid var(--accent); margin:20px 0; padding:6px 16px; color:var(--muted); background:var(--surface); border-radius:0 10px 10px 0}
code{background:var(--surface); padding:2px 6px; border-radius:6px; font-size:15px}
.key{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:22px 0}
.key strong{color:var(--accent)}

/* CTA block */
.cta-box{background:linear-gradient(120deg,#12204a,#0e1834); border:1px solid var(--line); border-radius:18px; padding:26px; margin:36px 0; text-align:center}
.cta-box h2{margin:0 0 8px}
.cta-box p{color:var(--muted); margin:0 0 18px}
.btn{display:inline-block; background:var(--accent); color:#070B16; font-weight:800; text-decoration:none; padding:14px 26px; border-radius:999px; font-size:17px}
.btn.ghost{background:transparent; color:#fff; border:1px solid var(--line); margin-left:8px}

/* cards (hub) */
.cards{display:grid; grid-template-columns:1fr; gap:14px; margin:24px 0}
.card{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card h3{margin:0 0 6px; color:#fff}
.card p{margin:0; color:var(--muted); font-size:15px}

/* calculator */
.calc{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; margin:24px 0}
.calc label{display:block; font-weight:600; color:var(--muted); margin:14px 0 6px; font-size:15px}
.calc input[type=number]{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#0b1225; color:#fff; font-size:16px}
.calc .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.calc-result{margin-top:22px; padding:20px; border-radius:14px; background:linear-gradient(120deg,#12204a,#0e1834); border:1px solid var(--line); text-align:center}
.calc-result .big{font-family:Poppins,sans-serif; font-weight:800; font-size:clamp(30px,6vw,46px); color:var(--accent); margin:6px 0}
.calc-result .sub{color:var(--muted); font-size:15px}

/* figures / diagrams */
.figure{margin:26px 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px}
.figure svg{display:block; width:100%; height:auto}
.figure figcaption{color:var(--muted); font-size:14px; text-align:center; margin-top:10px}
.svg-label{font-family:Inter,sans-serif; fill:#e7ecf7}
.svg-muted{font-family:Inter,sans-serif; fill:#B6C2DE}
.svg-accent{fill:var(--accent)}

/* footer */
.site-foot{border-top:1px solid var(--line); margin-top:40px; padding:30px 0; color:var(--muted); font-size:14px}
.site-foot a{color:var(--muted)}
.disclaimer{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; font-size:13px; color:#9aa6c4; margin:24px 0 0}
@media(max-width:560px){ .calc .row{grid-template-columns:1fr} .btn.ghost{margin:10px 0 0; display:block} }