* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Keep layout width stable when a vertical scrollbar appears/disappears */
html {
  scrollbar-gutter: stable both-edges;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--berkeley-blue);
  background: #ffffff;
}

.container {
  max-width: 740px;

  /* Physical fallback */
  margin-left: auto;
  margin-right: var(--content-right-gap);

  /* Logical margins: RTL‑ready */
  margin-inline-start: auto;
  margin-inline-end: var(--content-right-gap);

  padding: 0 24px;

  /* Smooth transition for layout changes */
  transition:
    margin-left 180ms ease,          /* physical fallback */
    margin-inline-start 180ms ease,  /* logical primary  */
    max-width 180ms ease;
}

/* Typography utilities */
.muted-italic-text,
.feature-text .muted-italic-text,
.muted-italic-text p {
  font-size: 0.8em !important;
  font-style: italic !important;
  color: var(--color-text-secondary, #666) !important;
}
.primer-intro { font-size: 0.9em !important; }

/* Sections */
.section { padding: 28px 0; }
.section.shaded { background: var(--gray-light); }
.section + .section { padding-top: 16px; }
.section .container > *:first-child { margin-top: 0; }
.section .container > *:last-child { margin-bottom: 0; }
.section h2 {
  font-size: 2.25rem;
  margin-bottom: 16px;
  color: var(--berkeley-blue);
  line-height: 1.3;
}
.section h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--berkeley-blue);
  line-height: 1.4;
}
.section-intro {
  font-size: 1rem;
  margin-bottom: 20px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Desktop/tablet centering is in walkthrough.nav.css (nav-driven behavior). */

/* Mobile adjustments */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .section { padding: 20px 0; }
  .section + .section { padding-top: 12px; }
  .section h2 { font-size: 1.875rem; }
}

/* Respect user reduced‑motion preference */
@media (prefers-reduced-motion: reduce) {
  .container,
  .walkthrough-nav {
    transition: none !important;
  }
}