/* Home and glossary extras. Colours and spacing come from the tokens in styles.css. No inline styles, no external assets. */
.home-live { margin-block: var(--section-gap); }
.home-live .dash-grid { margin-top: var(--s-4); }
.feature-grid, .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.feature { position: relative; padding: var(--s-5); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.feature:hover, .feature:focus-within { border-color: hsl(var(--primary) / 0.6); }
.feature .ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); margin-bottom: var(--s-3); }
.feature h3 { margin: 0 0 var(--s-1-5); font-size: var(--text-lg); }
.feature h3 a { color: inherit; text-decoration: none; }
.feature h3 a::after { content: ""; position: absolute; inset: 0; }
.feature p { margin: 0; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.steps { counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.steps li { counter-increment: step; padding: var(--s-5); border-left: 2px solid hsl(var(--primary) / 0.5); background: hsl(var(--card)); border-radius: 0 var(--radius) var(--radius) 0; }
.steps li::before { content: counter(step); display: block; font-family: var(--mono); font-size: var(--text-sm); color: hsl(var(--primary)); margin-bottom: var(--s-1); }
.steps h3 { margin: 0 0 var(--s-1-5); font-size: var(--text-lg); }
.steps p { margin: 0; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.cta-band { display: grid; gap: var(--s-4); align-items: center; padding: var(--s-8) var(--s-6); margin-block: var(--section-gap); border: 1px solid hsl(var(--primary) / 0.4); border-radius: calc(var(--radius) * 1.5); background: linear-gradient(135deg, hsl(var(--gradient-start) / 0.12), hsl(var(--gradient-end) / 0.12)); }
.cta-band h2 { margin-top: 0; }
.cta-band p { margin: 0; max-width: var(--measure); }
@media (min-width: 52rem) { .cta-band { grid-template-columns: 1fr auto; } }
/* Visual QA: main.wrap spaces sections with gap, so section margins doubled the space */
main.wrap > .home-live, main.wrap > .cta-band { margin-block: 0; }
.cta-band > div { display: grid; gap: var(--s-2); }
/* At a glance: one KPI strip (build-time numbers); home.js only adds sparklines and the two charts. */
.home-live .kpi-row { list-style: none; margin: 0; padding: 0; }
.home-live .kpi .stat, .home-live .kpi .stat-label { margin: 0; }
.home-live .kpi-spark { width: 100%; height: 2rem; }
.home-live .kpi-spark svg { width: 100%; height: 100%; }
.home-live > .meta { margin: var(--s-3) 0 0; }
.home-live .dash-grid .panel-head h3 { margin: 0; }
/* Latest advisories: three cards in a row. */
.advisory-list.home-adv { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.home-adv .card { margin: 0; }
/* Latest CVEs / claims / breaches: three compact panels. */
@media (min-width: 60rem) { .home-teasers > .home-panel { grid-column: span 4; } }
.home-panel { display: flex; flex-direction: column; gap: var(--s-3); }
.home-panel .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin: 0; }
.home-panel .section-head h2 { margin: 0; font-size: var(--text-lg); }
.home-panel .section-head a { font-size: var(--text-sm); }
.home-panel > p { margin: 0; font-size: var(--text-sm); }
.home-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.home-panel ul > li.card { margin: 0; padding: var(--s-2) 0; background: none; border: 0; border-bottom: 1px solid hsl(var(--border)); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: var(--text-sm); }
.home-panel ul > li.card:last-child { border-bottom: 0; }
.home-panel ul > li.card:nth-child(n + 6) { display: none; }
.home-panel li.card h2, .home-panel li.card h3 { margin: 0 0 var(--s-1); font-size: var(--text-base); }
.home-panel li.card p { margin: 0; }
/* Legal notes sit next to what they qualify as one muted line, not as boxes in the flow. Wording is unchanged. */
.home-note { margin-top: auto; display: grid; gap: var(--s-1); }
.home-note .notice, .home-note .meta { margin: 0; padding: 0; border: 0; background: none; color: hsl(var(--muted-foreground)); font-size: var(--text-xs); line-height: 1.45; }
main.wrap > .home-note { margin-top: calc(var(--s-2) * -1); }

/* Teaser panels: chips wrap inline instead of stretching one per line in a narrow column */
.home-panel .chips { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 0; margin: 0; list-style: none; }
.home-panel .chips .chip { display: inline-flex; width: auto; }
/* Seven tiles: an even 4 + 3 on desktop rather than 5 + 2 */
@media (min-width: 64rem) { .home-live .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }