*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.18; margin: 0 0 var(--space-3); color: inherit; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--space-3); }
a { color: var(--teal-text); text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--turquoise); }

.container { width: min(100% - 2 * var(--space-3), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-6); }

.skip-link {
  position: absolute; inset-inline-start: var(--space-3); top: -4rem;
  background: var(--deep-forest); color: var(--ivory); padding: var(--space-2) var(--space-3); border-radius: 0 0 8px 8px; z-index: 20;
}
.skip-link:focus { top: 0; }

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

/* ---- dark surfaces ---- */
.on-dark { background: var(--deep-forest); color: var(--on-dark); }
.on-dark a { color: var(--ivory); }

/* ---- sections ---- */
.start { background: var(--ivory); padding-block: var(--space-6); scroll-margin-top: 0; }

.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-4); align-items: start; }

.results { padding-block: var(--space-6); }
.contact { background: var(--ivory); padding-block: var(--space-6); }
.contact__inner { max-width: 44rem; }