/* CardCenter Pro — shared styles for content pages (guides, legal, about, contact). */
:root {
  color-scheme: dark;
  --bg:#0a0a0b; --surface:#111113; --surface-2:#16161a; --line:#1c1c21; --line-2:#2a2a31;
  --text:#e7e7ea; --soft:#b4b4bd; --muted:#6b6b76; --faint:#5d5d68; --on-text:#0a0a0b;
  --outer:#f59e0b; --inner:#22d3ee; --pass:#34d399;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.7 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--inner); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--text); }
a:focus-visible { outline:2px solid var(--inner); outline-offset:2px; }
.wrap { max-width:1280px; margin:0 auto; padding-inline:16px; }
.eyebrow { font:500 10.5px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* Header */
.site-header { border-bottom:1px solid var(--line); }
.site-header .wrap { height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; color:var(--text); text-decoration:none; }
.brand span { color:var(--muted); font-weight:400; }
.nav { display:none; gap:24px; font-size:14px; }
.nav a { color:var(--soft); text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--text); }
.cta-mini { font-size:14px; font-weight:600; background:var(--text); color:var(--on-text); padding:7px 14px; border-radius:6px; text-decoration:none; }
.cta-mini:hover { background:var(--soft); color:var(--on-text); }
@media (min-width:720px) { .nav { display:flex; } }

/* Article */
.article { max-width:44rem; margin:0 auto; padding:48px 16px 24px; }
.article h1 { font-size:32px; line-height:1.2; letter-spacing:-.02em; margin:10px 0 12px; text-wrap:balance; }
.article .lede { font-size:18px; color:var(--soft); margin:0 0 8px; }
.article .meta { font:12px var(--mono); color:var(--muted); margin-bottom:32px; }
.article h2 { font-size:22px; letter-spacing:-.01em; margin:40px 0 8px; text-wrap:balance; }
.article h3 { font-size:17px; margin:28px 0 4px; }
.article p, .article li { color:#d4d4da; }
.article ul, .article ol { padding-left:22px; }
.article li + li { margin-top:6px; }
.article strong { color:var(--text); }
.article code { font:14px var(--mono); background:var(--surface-2); padding:1px 5px; border-radius:4px; }
@media (min-width:720px) { .article h1 { font-size:40px; } }
.callout { border:1px solid var(--line-2); border-left:3px solid var(--outer); background:var(--surface); border-radius:6px; padding:14px 16px; margin:24px 0; font-size:15px; }
.callout p { margin:0; }
.formula { font:15px/1.6 var(--mono); background:var(--surface); border:1px solid var(--line-2); border-radius:6px; padding:14px 16px; margin:16px 0; overflow-x:auto; color:var(--text); }
.table-wrap { overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:8px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface); }
td { font-variant-numeric:tabular-nums; }
tr:last-child td { border-bottom:0; }
.tool-cta { margin:40px 0 8px; border:1px solid var(--line-2); border-radius:10px; padding:20px; background:var(--surface); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.tool-cta p { margin:0; color:var(--soft); max-width:28rem; }
.tool-cta strong { display:block; color:var(--text); font-size:17px; margin-bottom:2px; }
.more { border-top:1px solid var(--line); margin-top:40px; padding-top:24px; }
.more ul { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
.more a { text-decoration:none; }
.more a:hover { text-decoration:underline; }
.ad-slot { margin:32px 0; }
body:not(.ads-on) .ad-slot { display:none; }
.ad-label { font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }

/* Footer */
.site-footer { border-top:1px solid var(--line); margin-top:56px; }
.site-footer .wrap { padding-block:32px; display:flex; flex-direction:column; gap:14px; font-size:12px; color:var(--muted); }
.foot-links { display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot-links a { color:var(--soft); text-decoration:none; font-size:13px; }
.foot-links a:hover { color:var(--text); }
.site-footer p { margin:0; max-width:52rem; line-height:1.6; }