/* Reset + base typography */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink-900); }
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p  { max-width: 64ch; }
small { font-size: var(--fs-sm); color: var(--ink-500); }

/* Layout helpers */
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 32px, var(--container-wide)); margin-inline: auto; }
.stack > * + * { margin-top: var(--s-5); }
.row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }

.section { padding-block: var(--s-9); }
.section-sm { padding-block: var(--s-7); }

/* Desktop-only compact variant — trims the 96px block padding to 48px on wider screens.
   Mobile already caps section padding in mobile.css, so this only needs to scope ≥768px. */
@media (min-width: 768px) {
  .section.section-compact { padding-block: var(--s-7); }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-600);
  margin-bottom: var(--s-3);
}

.lead { font-size: var(--fs-md); color: var(--ink-600); max-width: 62ch; }

.divider { height: 1px; background: var(--ink-200); border: 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;
}

/* Grid of cards — responsive */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }