/* Supremely marketing theme.
   Utility classes carry most of the design; this file holds only the few
   things that read better as declarations: the warm page canvas, font
   smoothing, and the [x-cloak] guard for the header dropdowns. */

body.supremely {
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.supremely [x-cloak] { display: none !important; }

/* Accent line of a headline. Solid, in the theme's accent colour: one
   colour for everything that is highlighted, so the highlight means the
   same thing everywhere on the page. The class keeps its old name because
   the templates and the rotating-word script address it by that name. */
.sup-gradient {
  color: var(--sup-accent, #6d4fe0);
}

/* Rotating headline word (front-page "Rotating words" content): the script
   toggles .sup-rotate-out around each swap; reduced-motion visitors get the
   settled last word with no animation. */
.sup-rotate {
  display: inline-block;
  transition: opacity 0.2s ease, transform 0.2s ease, width 0.25s ease;
}
.sup-rotate-out {
  opacity: 0;
  transform: translateY(0.35em);
}
@media (prefers-reduced-motion: reduce) {
  .sup-rotate { transition: none; }
}


/* Headlines: the same sans as the body, set heavy and tight. One family,
   two voices; the weight and the tracking do the work the second family
   used to. */
.supremely .sup-display {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.supremely h2.sup-display { line-height: 1.1; letter-spacing: -0.025em; }

/* The drawn community in the hero. Only what utilities cannot say: the
   card's soft lift, and that it never captures a pointer. */
.sup-shot {
  box-shadow: 0 24px 48px -24px rgba(20, 22, 26, 0.25), 0 0 0 1px rgba(20, 22, 26, 0.06);
  pointer-events: none;
  user-select: none;
}