*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: transparent;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

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

.framework-section {
  /* No min-height:100vh and no vertical padding — meant to be embedded
     (see the postMessage height-reporting script in index.html), so it
     reports its own natural content height rather than a viewport-
     relative one. Horizontal-only padding keeps the diagram off the host
     page's side edges without adding blank space above/below it. (The
     `padding` shorthand here had previously set vertical space too — its
     first value applies top/bottom — contradicting this comment; fixed
     to actually be horizontal-only.) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(16px, 6vw, 72px);
}

.framework-section > section {
  width: 100%;
}

/* Embed overrides (this file loads after components.css, so these win):
   - Size: the stage was capped at 720px, below the Figma canvas width
     (986px), which shrank every label and description to ~73%. It now
     grows to the Figma size and still scales down on smaller screens.
   - Background: the stage painted its own dark rectangle
     (--color-stage-bg). Removed so the host page shows through, like the
     other LEAP infographics. overflow:hidden stays: it clips the bottom
     circle's shadow bleed, which keeps the reported height accurate. */
.framework-stage {
  width: min(100%, 986px);
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-ring__inner { animation: none; }
  .bg-layer,
  .ring-node__label,
  .ring-node__desc {
    transition-duration: 1ms;
  }
}