*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--surface-light);
  -webkit-font-smoothing: antialiased;
}
body.theme-dark { color: var(--cream-100); background: var(--surface-dark); }

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-heading); font-weight: 500; margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-4); }
.container-prose { max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--space-4); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 600;
}
.theme-dark .eyebrow { color: var(--gold-300); }

.section { padding-block: var(--space-8); }
@media (max-width: 640px) { .section { padding-block: var(--space-6); } }

/* Pre-launch audit fix "remove excessive vertical whitespace": .section
   applies padding-block symmetrically (top AND bottom) to every section.
   When two .section elements are direct siblings, that means BOTH
   contribute a full padding unit at the seam -- padding never collapses
   the way adjacent margins can -- so the visually-empty gap between them
   is the sum of both (176px at desktop, since --space-8 is 88px), roughly
   double any single section's own intended rhythm. This was the direct
   cause of the CEO-flagged gap before the order section on Relationship
   Dynamics Reading, and the same doubling recurs at every section
   boundary on every product page (worse on Personal Portrait's page,
   which stacks seven consecutive .section elements in a row).
   Fix: the second section's own top padding is redundant when the first
   section's bottom padding already opened the same gap -- dropping it
   collapses the seam to exactly one --space-8, which becomes the single
   consistent "section → section" rhythm used everywhere this pattern
   occurs. Scoped to above the mobile breakpoint deliberately: mobile's
   own compressed --space-8 (24px, set above) was already designed
   assuming this same doubling -- its own code comment targets "section
   gaps in the 32-48px range" from the doubled 24+24 -- so mobile is left
   untouched here rather than being over-corrected down to a single 24px,
   which would make it tighter than the compression was ever intended to
   produce. */
@media (min-width: 641px) {
  .section + .section { padding-top: 0; }
  /* Same rhythm, the "hero → first content section" relationship: .hero
     already uses an asymmetric padding-block (--space-8 top, --space-7 =
     64px bottom -- components.css), so it isn't part of the doubling
     above, but 64px (hero) + 88px (next section's own top padding) still
     summed to 152px -- noticeably more than the 88px "one section-gap"
     rhythm every other boundary now uses, and named explicitly in the
     brief ("between hero, content blocks and subsequent sections").
     Trimming the following section's top padding to --space-4 (24px)
     brings this to 64+24=88px -- the same single rhythm unit as every
     other section boundary, instead of a one-off larger gap here. */
  .hero + .section { padding-top: var(--space-4); }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -60px;
  background: var(--navy-950); color: var(--cream-100);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  z-index: 200; transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--gold-300); color: var(--navy-950); }

.visually-hidden-until-lg { display: none; }
@media (min-width: 900px) { .visually-hidden-until-lg { display: initial; } }