/* Base styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--body-line);
  color: var(--text-primary);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus-ring) 45%, transparent); outline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--text-primary);
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: var(--h1-line); }
h2 { font-size: var(--h2); line-height: var(--h2-line); }
h3 { font-size: var(--h3); line-height: var(--h3-line); }
h4 { font-size: var(--h4); line-height: var(--h4-line); }
p { margin: 0; }

.nina-container {
  width: min(var(--container-default), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
.nina-container--text { max-width: var(--container-text); }
.nina-container--medium { max-width: var(--container-medium); }
.nina-container--wide { width: min(var(--container-wide), calc(100% - (var(--page-gutter) * 2))); }

.nina-section { padding-block: var(--section-y); }
.nina-section--compact { padding-block: var(--section-y-compact); }
.nina-section--surface-2 { background: var(--surface-2); }
.nina-section--surface-3 { background: var(--surface-3); }
.nina-section__header { max-width: var(--container-text); margin-bottom: var(--space-6); }
.nina-section__header--center { margin-inline: auto; text-align: center; }
.nina-section__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--primary);
}
.nina-section__intro { margin-top: var(--space-4); color: var(--text-secondary); }
.nina-body-lg { font-size: var(--body-lg); line-height: var(--body-lg-line); }
.nina-small { font-size: var(--body-sm); line-height: var(--body-sm-line); color: var(--text-secondary); }
.nina-stack { display: grid; gap: var(--space-4); }
.nina-grid { display: grid; gap: var(--grid-gap); }
.nina-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.nina-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.nina-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.nina-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); align-items: center; }