:root { --max: 1200px; --gap: 1rem; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f6f7fb; color: #111; }
.container { max-width: var(--max); margin: 1.5rem auto; padding: 0 1rem; }
.site-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: .6rem 1rem; }
.site-header h1 { margin: 0; font-size: 1.1rem; }
.site-header a { color: inherit; text-decoration: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.card { display: grid; grid-template-columns: 56px 1fr; gap: .75rem; align-items: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: .8rem; padding: 1rem; text-decoration: none; color: inherit; }
.card:hover { border-color: #cbd5e1; background: #fff; }
.card-icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 28px; background: #f1f5f9; border-radius: .6rem; }
.card-body h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.card-body p { margin: 0 0 .4rem; color: #334155; font-size: .95rem; }
.card-link { color: #0a3a8d; font-weight: 600; font-size: .92rem; }