/* DEFS /learn answer pages. System fonts only (SF on Mac/iPhone). Navy palette shared with /book. */
:root{
  --bg:#050B18;--navy:#071226;--panel:#0B1730;--panel-2:#0F1E3C;--raise:#132648;
  --line:#ffffff14;--line-2:#ffffff24;--line-3:#ffffff3a;
  --text:#E9ECF2;--body:#C9D0DD;--mute:#9AA4B8;--dim:#6B7690;
  --signal:#7CF5C8;--signal-ink:#04221A;--iris:#8AA8FF;--amber:#FFB547;
  --radius:18px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;min-height:100vh;background:radial-gradient(1200px 700px at 85% -10%,#16306480,transparent 60%),radial-gradient(900px 600px at -10% 110%,#0E2a4a70,transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font:400 17px/1.65 var(--font);letter-spacing:-.006em}
a{color:var(--iris);text-underline-offset:2px}a:hover{color:#B3C6FF}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--text);color:var(--navy);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1120px,100% - 40px);margin:0 auto;padding:22px 0 18px;padding-top:max(22px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:650;letter-spacing:.18em;font-size:13px}
.brand:hover{color:var(--text)}
.top-nav{display:flex;align-items:center;gap:8px}
.top-link{color:var(--mute);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.top-link:hover{color:var(--text);border-color:var(--line-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--signal);color:var(--signal-ink);font-weight:650;font-size:15px;text-decoration:none;border:0}
.btn:hover{color:var(--signal-ink);background:#9CF8D6}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-3)}.btn-ghost:hover{background:#ffffff0d;color:var(--text)}
.shell{width:min(1120px,100% - 40px);margin:0 auto;padding:8px 0 48px}
.crumbs{font-size:14px;color:var(--dim);margin:6px 0 18px}.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:var(--text)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
article{min-width:0;max-width:760px}
.kicker{font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:0 0 22px;text-wrap:balance}
h2{font-size:clamp(22px,2.6vw,28px);line-height:1.25;letter-spacing:-.018em;font-weight:680;margin:44px 0 14px;scroll-margin-top:20px}
h3{font-size:19px;line-height:1.35;font-weight:650;margin:28px 0 8px}
p,li{color:var(--body)}
p{margin:0 0 16px}
strong{color:var(--text);font-weight:640}
ul,ol{padding-left:22px;margin:0 0 18px}li{margin:0 0 8px}
.answer{background:linear-gradient(180deg,#0E2142,#0B1A36);border:1px solid #7CF5C840;border-left:4px solid var(--signal);border-radius:14px;padding:20px 22px;margin:0 0 18px}
.answer .label{display:block;font:650 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:0 0 10px}
.answer p{color:var(--text);font-size:18px;line-height:1.6;margin:0}
.meta{font-size:14px;color:var(--dim);margin:0 0 8px}
.card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 24px;margin:18px 0}
.card h3{margin-top:0}
.proof{background:linear-gradient(180deg,#0C1A36,#091530);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 24px;margin:20px 0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 16px;padding:0;list-style:none}
.stats li{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;margin:0}
.stats b{display:block;font-size:26px;line-height:1.1;color:var(--signal);font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.stats span{display:block;font-size:14px;line-height:1.4;color:var(--mute)}
.note{font-size:14px;color:var(--mute)}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 22px;border:1px solid var(--line-2);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:15px}
table:has(th:nth-child(3)){min-width:600px}
@media (max-width:560px){th,td{padding:10px 12px}}
th,td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
th{background:#0F1E3C;color:var(--text);font-weight:650;font-size:14px}
td{color:var(--body)}tr:last-child td{border-bottom:0}
.checks{list-style:none;padding-left:0}
.checks li{position:relative;padding-left:30px}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-3)}
.steps{counter-reset:s;list-style:none;padding-left:0}
.steps li{counter-increment:s;position:relative;padding-left:42px;margin-bottom:14px}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05em;width:28px;height:28px;border-radius:50%;background:#7CF5C81a;color:var(--signal);font-weight:700;font-size:14px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #7CF5C840}
.faq details{border-top:1px solid var(--line-2);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;position:relative;font-weight:640;color:var(--text);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--mute);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:linear-gradient(135deg,#0F2448,#0B1A36);border:1px solid var(--line-2);border-radius:var(--radius);padding:24px;margin:36px 0}
.cta p{margin:0;flex:1 1 280px;color:var(--text);font-size:17px}
.sources{font-size:14px}.sources li{color:var(--mute);word-break:break-word}
.related{list-style:none;padding:0}.related li{margin:0 0 10px}
aside.side{position:sticky;top:20px}
.side .box{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 18px 8px;margin-bottom:16px}
.side h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 12px;font-weight:650}
.side ul{list-style:none;padding:0;margin:0 0 10px}.side li{margin:0 0 10px;font-size:15px;line-height:1.4}
.side a{text-decoration:none}.side a:hover{text-decoration:underline}
.side a[aria-current]{color:var(--text);font-weight:600}
.side .box p{font-size:15px;color:var(--body)}
.side .btn{width:100%;margin-bottom:12px}
.index-list{list-style:none;padding:0;display:grid;gap:14px}
.index-list li{margin:0}
.index-list a{display:block;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;text-decoration:none}
.index-list a:hover{border-color:var(--line-3);background:var(--panel-2)}
.index-list b{display:block;color:var(--text);font-size:19px;line-height:1.35;margin-bottom:6px;font-weight:650}
.index-list span{color:var(--mute);font-size:15px}
.foot{border-top:1px solid var(--line);margin-top:24px;padding:24px 0 36px;color:var(--dim);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}.foot a{color:var(--mute);text-decoration:none}.foot a:hover{color:var(--text)}
@media (max-width:960px){.layout{grid-template-columns:1fr;gap:8px}aside.side{position:static}}
@media (max-width:560px){body{font-size:16.5px}.top-link.hide-sm{display:none}.stats{grid-template-columns:1fr}.answer{padding:18px}.answer p{font-size:17px}.card,.proof{padding:18px}h2{margin-top:36px}}
@media print{body{background:#fff;color:#000}aside.side,.top,.cta{display:none}}