/* Arthur Labs landing — sections below the hero.
   Legacy variables are mapped onto the design tokens (css/tokens.css) so these
   sections follow the light/dark theme until they migrate to al- components.
   Nav + hero live in css/home.css (ART-299). */

:root {
  --bg: var(--color-bg);
  --bg-elevated: var(--color-surface-sunken);
  --bg-card: var(--color-surface);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --accent-dim: var(--color-accent-hover);
  --border: var(--color-border);
  --radius: var(--radius-lg);
  --font: var(--font-sans);
  --space: var(--gutter);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.landing-body a:not(.al-btn) {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.landing-body a:not(.al-btn):hover {
  color: var(--accent-dim);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  z-index: 100;
}

.skip-link:focus {
  left: var(--space);
  top: var(--space);
}

.landing-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space) 4rem;
}

.section {
  padding: 3rem 0 0;
}

.section__header {
  margin-bottom: 1.75rem;
}

.section__header h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  letter-spacing: -0.02em;
}

.section__header p {
  margin: 0;
  color: var(--text-muted);
  max-width: 36rem;
}