/* Shared look for the static pages (About, one page per credit union, state indexes, share pages).
   Same tokens as the app so the two read as one site. */
:root{--ground:#fff; --surface:#fff; --surface-2:#f5f8fa; --ink:#232a31; --ink-2:#5b636a; --muted:#979ea8; --hairline:#e0e4e9; --accent:#0f69ff; --good:#00873c; --bad:#ff333a; color-scheme:light dark}
@media (prefers-color-scheme: dark){ :root{--ground:#16181c; --surface:#1a1d21; --surface-2:#22262b; --ink:#eaeef2; --ink-2:#aab2bb; --muted:#7d8590; --hairline:#2c3138; --accent:#7fb0ff; --good:#1fbf75; --bad:#ff5c61} }
*{box-sizing:border-box} body{margin:0; background:var(--ground); color:var(--ink); font:15px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased}
header{border-bottom:1px solid var(--hairline); background:var(--surface)} .wrap{max-width:820px; margin:0 auto; padding:0 20px}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; height:60px} header a.brand{color:var(--ink); text-decoration:none; font-weight:700; font-size:18px} header a.brand:hover{color:var(--accent)}
header nav{display:flex; gap:14px; font-size:13px} header nav a{color:var(--ink-2); text-decoration:none; font-weight:600} header nav a:hover{color:var(--accent)}
main .wrap{padding:32px 20px 56px} .eyebrow{font:600 11px/1 "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
h1{font-size:28px; letter-spacing:-.01em; line-height:1.2; margin:8px 0 6px; text-wrap:balance} .lead{font-size:17px; color:var(--ink-2); margin:0 0 20px; line-height:1.5}
h2{font-size:18px; margin:26px 0 8px} h3{font-size:15px; margin:18px 0 6px} p,li{margin:0 0 10px} ul{padding-left:20px} a{color:var(--accent)}
.meta{color:var(--ink-2); font-size:13.5px; margin:0 0 16px}
table.t{border-collapse:collapse; width:100%; max-width:560px; font-size:14px; margin:6px 0 14px} table.t td{padding:7px 0; border-bottom:1px solid var(--hairline)} table.t td.v{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; padding-left:16px}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 6px} button.btn{font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; border:0}
.brief{margin:10px 0 4px; max-width:560px} .brief-row{display:flex; gap:8px; flex-wrap:wrap} .brief input{flex:1 1 240px; font:500 14px "Inter",system-ui,sans-serif; padding:9px 12px; border:1px solid var(--hairline); border-radius:8px; background:var(--surface); color:var(--ink)}
.brief-msg{font-size:13.5px; margin:8px 0 0} .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .sr{position:absolute; left:-9999px} .btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:13.5px; padding:9px 14px; border-radius:8px} .btn.ghost{background:var(--surface-2); color:var(--ink); border:1px solid var(--hairline)} .btn:hover{filter:brightness(1.06)}
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:16px 18px; margin:14px 0}
.author{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap} .author img{width:96px; height:96px; border-radius:10px; object-fit:cover; flex:none; display:block} .author div{flex:1; min-width:240px}
.cols{columns:2; column-gap:28px; font-size:14px} .cols a{display:block; padding:3px 0; border-bottom:1px solid var(--hairline); text-decoration:none; color:var(--ink); break-inside:avoid} .cols a:hover{color:var(--accent)} .cols a span{color:var(--muted); font-size:12.5px; margin-left:6px}
@media (max-width:640px){ .cols{columns:1} h1{font-size:24px} }
.shot{display:block; width:100%; max-width:820px; border:1px solid var(--hairline); border-radius:12px; margin:12px 0}
:root{--l0:#e4e8ec; --l1:#e8a33d; --l2:#e07b2b; --l3:#d9532c; --l4:#c8312d; --l5:#a4171f; --star-off:#d5dbe1; --star-tile:#eef1f4}
@media (prefers-color-scheme: dark){ :root{--l0:#2c3138; --star-off:#4a525b; --star-tile:#22262b} }
.ai-badge{display:inline-flex; align-items:center; gap:7px; vertical-align:middle; margin-left:12px; padding:4px 10px 4px 11px; border-radius:99px; border:1px solid var(--hairline); background:var(--surface); color:var(--ink-2); font:700 11px/1 "Inter",system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; box-shadow:0 1px 2px rgba(35,42,49,.08)} .ai-badge:hover{text-decoration:none; box-shadow:0 3px 10px rgba(35,42,49,.16)}
.stars{display:inline-flex; gap:2px; vertical-align:middle} .stars i{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:3px; background:var(--star-tile)} .stars i svg{width:11px; height:11px; fill:var(--star-off)}
.stars i.on svg{fill:#fff} .stars[data-lvl="0"] i.on{background:#b9c0c8} .stars[data-lvl="1"] i.on{background:var(--l1)} .stars[data-lvl="2"] i.on{background:var(--l2)} .stars[data-lvl="3"] i.on{background:var(--l3)} .stars[data-lvl="4"] i.on{background:var(--l4)} .stars[data-lvl="5"] i.on{background:var(--l5)}
.stars.sm i{width:13px; height:13px} .stars.sm i svg{width:9px; height:9px}
ul.ev{list-style:none; padding:0; margin:0} ul.ev li{padding:7px 0; border-top:1px solid var(--hairline); font-size:14px} ul.ev li a{font-weight:600} ul.ev .q{font-style:italic; margin-top:3px}
footer{border-top:1px solid var(--hairline); color:var(--muted); font-size:12.5px} footer .wrap{padding:16px 20px; max-width:820px} footer a{color:inherit}

/* commentary pages (insights/) */
.article p{font-size:16.5px; line-height:1.65; margin:0 0 14px; max-width:70ch}
.byline{margin:-6px 0 18px}
.movers>div{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:8px 0; border-top:1px solid var(--hairline); font-size:14px} .movers>div a:first-child{font-weight:600; text-decoration:none} .movers .mv{display:inline-flex; gap:6px; align-items:center} .movers .src{font-size:12.5px; margin-left:auto}
ul.articles li{margin:0 0 12px}