@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/humanist.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/sans.woff2") format("woff2");
}

:root {
  --color-brand: #a8391f;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Source Sans 3", "Gill Sans", "Trebuchet MS", system-ui, sans-serif;
  --radius: 8px;
  --space-section: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--color-text, #1a1a1a);
  background: var(--color-surface, #ffffff);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-heading, system-ui, sans-serif); line-height: 1.2; }
a { color: var(--color-brand, #0b5cab); }
img { max-width: 100%; height: auto; }
.section { padding: var(--space-section, 48px) 24px; }
.section__inner { max-width: 68rem; margin: 0 auto; }
.hero { background: var(--color-brand, #0b5cab); color: #fff; }
.hero a { color: #fff; }
.panels__list { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; padding: 0; }
.panel { border-radius: var(--radius, 8px); padding: 24px; background: rgba(0, 0, 0, 0.04); }
.note { border: 2px dashed #b45309; padding: 16px; color: #7c2d12; }
.footer { padding: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12); }