/* frameworks.css — page styles for /frameworks/ (hub).
   Linked after /styles.css by `{% set page_css = "frameworks" %}` in pipeline/templates/frameworks.html.j2.
   Shared tokens/components live in styles.css; keep only what is unique to this page here. */
main{max-width:1040px;margin:0 auto;padding:32px 20px 64px}

.hero{padding:38px 24px 30px;text-align:center;margin-bottom:30px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.hero h1{font-size:var(--t-h1);font-weight:500;line-height:1.08;margin-bottom:12px;letter-spacing:-0.025em}
.hero .subtitle{font-size:1.06em;color:var(--text-muted);max-width:720px;margin:0 auto 16px;line-height:1.6}
.hero .stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:8px}
.hero .stat .n{font-size:1.7em;font-weight:500;color:var(--gold-ink)}
.hero .stat .l{font-size:0.76em;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em}

.intro{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:16px 20px;margin:0 auto 36px;max-width:880px;line-height:1.68}

.grp{margin-bottom:40px}
.grp-head{margin-bottom:6px}
.grp-head h2{font-size:1.55em;font-weight:500}
.grp-blurb{color:var(--text-muted);line-height:1.6;margin-bottom:18px;max-width:820px}

.fw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--fw);border-radius:12px;padding:20px;transition:border-color .15s,transform .15s}
.card:hover{transform:translateY(-3px);border-color:var(--fw);text-decoration:none}
.card .num{font-size:0.72em;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--fw);margin-bottom:8px}
.card h3{font-size:1.2em;font-weight:500;line-height:1.2;margin-bottom:8px;color:var(--text)}
.card p{font-size:0.92em;color:var(--text-muted);line-height:1.55;flex:1}
.card .go{margin-top:12px;font-size:0.85em;font-weight:700;color:var(--fw)}

@media (max-width:560px){.hero h1{font-size:var(--t-h1);letter-spacing:-0.025em}}