/* Article pages under /learn. Builds on /style.css tokens; flat, quiet, readable. */
.article{display:grid;gap:16px;padding-block:36px 24px;max-width:66ch}
.article h1{font-size:clamp(32px,6vw,46px);line-height:1.12}
.article .standfirst{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(19px,3vw,22px);color:var(--muted);line-height:1.45}
.article h2{font-family:var(--body);font-weight:500;font-size:21px;letter-spacing:-.01em;padding-top:18px}
.article p,.article li{text-wrap:pretty}
.article ul,.article ol{margin:0;padding-left:22px;display:grid;gap:8px}
.article blockquote{margin:4px 0;padding-left:16px;border-left:1px solid var(--line-strong);font-family:var(--display);font-style:italic;color:var(--detached);font-size:19px}
.crumbs{font-size:14px;color:var(--muted);padding-top:20px}
.crumbs a{color:var(--muted)}
.meta{font-size:14px;color:var(--muted)}
.cta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:22px;margin-block:12px;display:grid;gap:10px}
.cta .btn{justify-self:start}
.cta p{max-width:56ch}
.crisis{font-size:14.5px;color:var(--muted);border-left:2px solid var(--cas);padding-left:12px}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding-block:14px}
.faq summary{cursor:pointer;font-weight:500;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.2em;color:var(--accent)}
.faq details[open] summary::before{content:"–"}
.faq details p{padding-top:8px;padding-left:1.2em}
.sources{font-size:14px;color:var(--muted)}
.sources ol{gap:6px}
.sources a{color:var(--muted);word-break:break-word}
.compare{width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.compare th{font-weight:500;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.table-scroll{overflow-x:auto}
.hub{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hub li{border-bottom:1px solid var(--line);padding-block:18px;display:grid;gap:4px}
.hub a.t{font-family:var(--display);font-size:22px;font-weight:400;text-decoration:none;color:var(--ink)}
.hub a.t:hover{color:var(--accent)}
.hub .d{color:var(--muted);font-size:15.5px}