/* Base reset + typography + layout primitives */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--dc-font-body);
  font-size: 18.7px; /* base 16px + 2pt (1pt = 4/3px); +1pt 2026-08-29, +1pt more 2026-08-30 (Nino: body copy too small to read) */
  color: var(--dc-navy);
  background: var(--dc-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--dc-font-display);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/*
  Prose spacing (article-style content: currently just the privacy policy) is
  scoped to .dc-prose, NOT applied to bare ul/ol/li/h2/h3 globally. An earlier
  version of these rules was unscoped and leaked into every <li>/<h2>/<h3> on
  the site, including horizontal flex rows like the nav and footer link lists
  — margin-bottom on non-last <li>s made their flex "box" taller than the
  last item's, so align-items:center centered them at different vertical
  positions (last item sat ~4px lower). Nav/footer/card lists all manage their
  own spacing via flex `gap`, not margin — keep it that way outside .dc-prose.
*/
.dc-prose ul, .dc-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.dc-prose li { margin-bottom: 0.5em; }
.dc-prose li:last-child { margin-bottom: 0; }
.dc-prose h2, .dc-prose h3 { margin-top: 1.6em; }
.dc-prose h2:first-child, .dc-prose h3:first-child { margin-top: 0; }

.dc-container {
  width: var(--dc-container-w);
  margin: 0 auto;
}

.dc-section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }

.dc-lens-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .dc-lens-grid { grid-template-columns: 1fr; gap: 32px; }
}

.dc-section--white { background: var(--dc-white); color: var(--dc-navy); }
.dc-section--light { background: var(--dc-gray-light); color: var(--dc-navy); }
.dc-section--dark {
  background: var(--dc-navy);
  color: var(--dc-white);
}
.dc-section--dark h1, .dc-section--dark h2, .dc-section--dark h3 { color: var(--dc-white); }

.dc-eyebrow {
  font-family: var(--dc-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--dc-turquoise);
  margin-bottom: 0.75em;
  display: inline-block;
}
.dc-section--dark .dc-eyebrow,
.dc-hero .dc-eyebrow { color: var(--dc-lime); }

.dc-lede {
  font-size: calc(clamp(1.05rem, 1.6vw, 1.25rem) + 2.6px); /* +2pt, matches body's 16+2pt */
  /* No readability cap: a subtitle lede spans the full width of its container so it
     shares the SAME margins as the heading above it (Nino, 2026-08-31 — the 62ch cap
     made section subtitles like Learn's "Driven Growth" narrower than their heading).
     Hero ledes still get max-width:100% via `.dc-hero__content .dc-lede`, and centered
     CTA ledes are capped by their own 800px container — both unaffected. */
  max-width: none;
  opacity: 0.92;
}

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

@media (max-width: 640px) {
  .dc-section { padding: 56px 0; }
}