/* STMRing - ported from Framer code component STMRing.tsx
   The STM System diagram: three words on the outer circle, seven benefits on
   the inner ring, the mark at the centre, and an arc carrying a dot at one end
   and an arrowhead at the other. The whole drawing is one 800x800 SVG that
   scales with its frame; every geometry figure is a viewBox unit, not a pixel.

   The rotation is SMIL (animateTransform about 400,400), emitted with
   begin="indefinite" and started by js/framer/stmring.js after load, so the
   server HTML is static and nobody sees a turn-then-snap. Reduced motion: the
   diagram is static (JS never begins the SMIL; CSS is a no-op belt-and-braces).
   Weights are 700 throughout. */

/* HeuvelGrotesk-Bold.woff2 - a code component is not handed the project fonts,
   so the face is declared here from its own upload.
   TODO: this points at framerusercontent.com; swap for the self-hosted
   heuvel-grotesk-bold woff2 once it is on the shop2 CDN. */
@font-face {
  font-family: "HeuvelGroteskSTM";
  src: url(https://framerusercontent.com/assets/rl3WgevGN9arG4s2dRrwGgqxpE.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.fr-stmring {
  --fr-stmring-ground: var(--jifu-ground-raised, #F4F1EA);
  --fr-stmring-outer-ink: var(--jifu-ink, #191919);
  --fr-stmring-inner-ink: rgba(25, 25, 25, 0.72);
  --fr-stmring-ink: var(--jifu-ink, #191919);
  --fr-stmring-c1: #191919;
  --fr-stmring-c2: #3F5F22;
  --fr-stmring-c3: #6BA22F;
  --fr-stmring-c4: #8BC53D;
  --fr-stmring-font: "HeuvelGroteskSTM", "Heuvel Grotesk", "HeuvelGrotesk", var(--jifu-font-display, Montserrat), "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.fr-stmring__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fr-stmring__word {
  font-family: var(--fr-stmring-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--fr-stmring-outer-ink);
}
.fr-stmring__inner {
  font-family: var(--fr-stmring-font);
  font-weight: 700;
  letter-spacing: 0.10em;
  fill: var(--fr-stmring-inner-ink);
}
.fr-stmring__mark {
  font-family: var(--fr-stmring-font);
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  /* JS never begins the SMIL under reduced motion; this pins it just in case. */
  .fr-stmring__spin { animation: none; }
}