body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-5); }

section { padding-block: var(--space-9); position: relative; }
section.alt { background: var(--color-bg-alt); }

.section-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--space-7); }
.section-head .eyebrow {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  background: var(--color-primary-light); color: var(--color-primary-dark);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.section-head h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.section-head p { color: var(--color-text-soft); font-size: var(--fs-md); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  section { padding-block: var(--space-9); }
}

a { transition: color var(--transition); }
a:hover { color: var(--color-primary); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: #fff; padding: 12px 20px; z-index: 999;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}