/* Shared styling for the /learn/ articles.
   Matches the house style already used by the other static pages in client/public
   (dark slate, cyan->blue gradient, --gold sampled from the real brand amber). */
:root{ --bg:#020617; --ink:#e8edf7; --mut:#8794ad; --cy:#22d3ee; --cy3:#67e8f9; --bl:#3b82f6; --gold:#FBBF24;
  --line:rgba(255,255,255,.10); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
*{box-sizing:border-box}
body{ margin:0; font-family:var(--sans); color:var(--ink); line-height:1.6;
  background:radial-gradient(1100px 520px at 12% -8%,rgba(34,211,238,.12),transparent 60%),
             radial-gradient(1000px 500px at 100% 0%,rgba(59,130,246,.12),transparent 55%),var(--bg); min-height:100vh; }
a{color:var(--cy3)}
.bar{ position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); background:rgba(2,6,23,.72);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:12px 20px; }
.bar .brand{ display:flex; align-items:center; gap:10px; flex:1; font-weight:800; letter-spacing:-.01em;
  text-decoration:none; color:var(--ink); }
.bar .brand small{ display:block; font-weight:500; font-size:11px; color:var(--mut); letter-spacing:.02em; }
.back{ text-decoration:none; color:#04121f; background:linear-gradient(90deg,var(--cy),var(--bl));
  border-radius:9px; padding:8px 14px; font-size:13px; font-weight:700; white-space:nowrap; }
.wrap{ max-width:760px; margin:0 auto; padding:30px 18px 80px; }
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--mut); }
h1{ font-size:clamp(25px,4.4vw,36px); font-weight:800; letter-spacing:-.02em; margin:10px 0 14px; line-height:1.2; }
h2{ font-size:clamp(19px,2.8vw,23px); font-weight:800; letter-spacing:-.01em; margin:38px 0 10px; }
h3{ font-size:16px; font-weight:700; margin:24px 0 6px; }
p{ margin:0 0 14px; color:#c4cde0; }
.lede{ font-size:17px; color:#d5dcea; }
.answer{ border:1px solid rgba(34,211,238,.35); background:rgba(34,211,238,.06); border-radius:16px;
  padding:20px 22px; margin:22px 0 10px; }
.answer .big{ font-size:clamp(30px,6vw,42px); font-weight:900; letter-spacing:-.02em; color:#fff; line-height:1.1; }
.answer .sub{ color:var(--mut); font-size:13.5px; margin-top:6px; }
.tbl{ width:100%; overflow-x:auto; margin:14px 0 6px; }
table{ border-collapse:collapse; width:100%; font-size:14.5px; min-width:420px; }
/* The two-column money tables must fit a phone outright. A 420px floor clipped the
   right-hand column on a 390px screen - it scrolled, but a truncated money column
   reads as broken. Only wide multi-column tables need to scroll. */
.tbl.narrow table{ min-width:0; }
.tbl.narrow th,.tbl.narrow td{ padding:10px 4px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
th{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--mut); font-weight:700; }
td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.total td{ font-weight:800; color:#fff; border-bottom:none; }
tr.win td{ color:#fff; background:rgba(34,211,238,.08); }
.note{ border-left:3px solid var(--gold); background:rgba(251,191,36,.07); border-radius:0 10px 10px 0;
  padding:13px 16px; margin:18px 0; font-size:14.5px; color:#dfe5f0; }
.cta{ border:1px solid var(--line); border-radius:18px; padding:26px 24px; margin:38px 0 10px; text-align:center;
  background:linear-gradient(168deg,rgba(34,211,238,.10),rgba(59,130,246,.10)); }
.cta h2{ margin:0 0 8px; }
.cta p{ margin:0 0 18px; font-size:14.5px; }
.btn{ display:inline-block; background:linear-gradient(90deg,var(--cy),var(--bl)); color:#04121f;
  text-decoration:none; font-weight:800; font-size:16px; padding:14px 30px; border-radius:999px; }
.faq dt{ font-weight:700; margin:18px 0 4px; color:var(--ink); }
.faq dd{ margin:0; color:#c4cde0; }
.more{ list-style:none; padding:0; margin:14px 0 0; }
.more li{ margin:0 0 10px; }
.more a{ font-weight:600; }
footer{ border-top:1px solid var(--line); margin-top:46px; padding-top:20px; color:var(--mut); font-size:12.5px; }
footer a{ color:var(--mut); }
/* index cards */
.card{ display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:13px; background:rgba(255,255,255,.03); transition:border-color .15s; }
.card:hover{ border-color:rgba(34,211,238,.4); }
.card h2{ font-size:17.5px; margin:0 0 5px; letter-spacing:-.01em; color:var(--ink); }
.card p{ margin:0; font-size:14px; color:var(--mut); }