/*
 * Shared Raisin UI for every page: raisinplugins.com, the store, the developer portal and
 * download.raisinplugins.com. It holds the one top bar and the one primary-button finish.
 * This file is the source; the portal and download site serve byte-identical copies
 * (scripts/raisin-ui.test.mjs keeps them in sync).
 *
 * <header class="raisin-bar">
 *   <div class="raisin-bar__inner">
 *     <a class="raisin-bar__brand" href="https://raisinplugins.com/">
 *       <img src="/assets/raisin-mark.png" width="19" height="26" alt=""><strong>Raisin</strong><span>Plugins</span>
 *     </a>
 *     <nav class="raisin-bar__nav" aria-label="Primary">
 *       <a class="raisin-bar__link" href="…" aria-current="page">Store</a> …
 *       <details class="raisin-bar__profile">…</details>
 *     </nav>
 *   </div>
 * </header>
 *
 * Self-contained: it reads no page variables, so it looks the same on every origin.
 * Pages lay out against --raisin-bar-h.
 */
:root { --raisin-bar-h: 56px; }

.raisin-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--raisin-bar-h);
  display: flex;
  align-items: center;
  font-family: Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  border-bottom: 1px solid rgba(182, 119, 238, .12);
  /* Smoked glass over the page's dark room, with the bar's fine diagonal purple pinstripes
     etched into it. The stage and its purple light read through faintly, as through the cards. */
  background:
    repeating-linear-gradient(135deg, transparent 0 5px, rgba(182, 119, 238, .1) 5px 6px),
    linear-gradient(180deg, rgba(14, 12, 18, .86), rgba(8, 7, 11, .8));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px -20px rgba(0, 0, 0, .9);
}
/* The under-glow: a thin accent line fading out at both ends, and a soft halo below it. */
.raisin-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(182, 119, 238, .45) 25%, rgba(196, 156, 232, .7) 50%, rgba(182, 119, 238, .45) 75%, transparent 100%);
  pointer-events: none;
}
.raisin-bar::before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -12px;
  height: 12px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(182, 119, 238, .16), transparent 100%);
  filter: blur(6px);
  pointer-events: none;
}
.raisin-bar__inner {
  width: min(calc(100% - 40px), 1180px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.raisin-bar__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e4e4e4;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.raisin-bar__brand img { width: auto; height: 26px; filter: drop-shadow(0 0 12px rgba(182, 119, 238, .35)); }
.raisin-bar__brand strong { font-weight: 850; }
.raisin-bar__brand span { margin-left: -5px; color: #7c7c7c; }

.raisin-bar__nav { display: flex; align-items: center; gap: 20px; min-width: 0; }
.raisin-bar__link,
.raisin-bar__button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  border: 0;
  color: #c0c0c0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.raisin-bar__link:hover,
.raisin-bar__button:hover { color: #fff; }

/*
 * Nav as a quiet segmented slider: plain links in a faint glass track, with a soft purple
 * pill (the glider, placed by raisin-ui.js) that glides behind the hovered or focused link
 * and rests behind the current page. It is the site's selected-tab look: a violet wash with
 * a fine violet edge. Without the script the current page keeps its pill.
 */
.raisin-bar__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  /* Opaque, so the bar's pinstripes stop at the track's edge instead of showing through. */
  background: #121016;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.raisin-bar__keys { display: contents; }
.raisin-bar__key {
  position: relative;
  z-index: 1;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #9a9aa3;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.raisin-bar__key:hover,
.raisin-bar__key:focus-visible { color: #f1eaf9; }
.raisin-bar__key.is-lit { color: #f1eaf9; }
.raisin-bar__key[aria-current="page"],
.raisin-bar__glider {
  background: linear-gradient(180deg, rgba(182, 119, 238, .24), rgba(140, 82, 192, .14));
  box-shadow: inset 0 0 0 1px rgba(196, 156, 232, .32), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px -6px rgba(182, 119, 238, .55);
}
.raisin-bar__key[aria-current="page"] { color: #f1eaf9; }
/* With the script running the glider carries the pill, so the page's own link drops it. */
.raisin-bar__track.is-gliding .raisin-bar__key[aria-current="page"] { background: none; box-shadow: none; }
.raisin-bar__track.is-gliding .raisin-bar__key[aria-current="page"]:not(.is-lit) { color: #9a9aa3; }
.raisin-bar__glider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.22, .9, .24, 1), width .35s cubic-bezier(.22, .9, .24, 1), opacity .2s ease;
}
.raisin-bar__glider.is-on { opacity: 1; }
.raisin-bar__glider.is-instant { transition: none; }
.raisin-bar__link:focus-visible,
.raisin-bar__button:focus-visible,
.raisin-bar__brand:focus-visible,
.raisin-bar__profile summary:focus-visible { outline: 2px solid #b677ee; outline-offset: 3px; border-radius: 6px; }
.raisin-bar .hidden,
.raisin-bar [hidden] { display: none !important; }

/* A small status chip in the same glass as the nav track, with a lit violet dot. */
.raisin-bar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  color: #c9c0d6;
  background: #121016;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.raisin-bar__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c49ce8;
  box-shadow: 0 0 0 3px rgba(182, 119, 238, .14), 0 0 8px rgba(182, 119, 238, .8);
}

/* Account menu: avatar button with a dropdown holding identity and sign-out. */
.raisin-bar__profile { position: relative; }
.raisin-bar__profile summary {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: #e4e4e4;
  background: #121016;
  font-size: 12px;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}
.raisin-bar__profile summary::-webkit-details-marker { display: none; }
.raisin-bar__profile summary:hover,
.raisin-bar__profile[open] summary { border-color: #b677ee; }
.raisin-bar__profile summary img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.raisin-bar__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 14px;
  background: rgba(30, 30, 32, .96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.raisin-bar__identity {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: #e4e4e4;
  text-decoration: none;
}
.raisin-bar__identity img,
.raisin-bar__identity .raisin-bar__initial { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.raisin-bar__initial { display: grid; place-items: center; background: #5e308c; font-weight: 850; }
.raisin-bar__identity span { min-width: 0; display: flex; flex-direction: column; }
.raisin-bar__identity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.raisin-bar__identity small { margin-top: 4px; color: #7c7c7c; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.raisin-bar__menu .raisin-bar__link,
.raisin-bar__menu .raisin-bar__button { width: 100%; min-height: 38px; padding: 0 6px; justify-content: space-between; }

@media (max-width: 640px) {
  .raisin-bar__inner { width: calc(100% - 28px); gap: 12px; }
  .raisin-bar__brand span { display: none; }
  .raisin-bar__nav { gap: 12px; }
  .raisin-bar__link { font-size: 11px; }
  .raisin-bar__track { gap: 2px; }
  .raisin-bar__key { min-height: 26px; padding: 0 10px; font-size: 12px; }
  .raisin-bar__status { display: none; }
}

/*
 * Primary action finish: raised, violet-tinted gunmetal. Applies to every purple call to action on
 * every site (enter, sign in, checkout, pay, portal actions). Each site keeps the button's size
 * and radius; this owns its colour, bevel and states. The #quote-close member gives the list
 * id-level specificity so older site rules cannot repaint it. Disabled buttons keep their
 * site's muted style.
 */
:is(.raisin-metal, .button--primary, .discord, .discord-button, .checkout, .checkout-submit, #quote-close, .account-primary, .button.primary):not(:disabled):not([aria-disabled="true"]) {
  color: #efe9f7;
  border: 1px solid #120f17;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 46%, rgba(0, 0, 0, .08) 54%, rgba(0, 0, 0, .24) 100%),
    linear-gradient(180deg, #5d5669 0%, #433d4f 48%, #342f3e 52%, #221e2a 100%);
  box-shadow:
    inset 0 1px 0 rgba(236, 224, 255, .32),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(182, 119, 238, .2),
    0 1px 0 rgba(0, 0, 0, .4),
    0 8px 18px -8px rgba(0, 0, 0, .9),
    0 2px 10px -4px rgba(162, 91, 225, .35);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
:is(.raisin-metal, .button--primary, .discord, .discord-button, .checkout, .checkout-submit, #quote-close, .account-primary, .button.primary):not(:disabled):not([aria-disabled="true"]):hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(236, 224, 255, .4),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(182, 119, 238, .38),
    0 1px 0 rgba(0, 0, 0, .4),
    0 12px 24px -8px rgba(0, 0, 0, .95),
    0 0 22px -6px rgba(182, 119, 238, .55);
}
:is(.raisin-metal, .button--primary, .discord, .discord-button, .checkout, .checkout-submit, #quote-close, .account-primary, .button.primary):not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(.94);
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .7),
    inset 0 0 0 1px rgba(182, 119, 238, .3),
    inset 0 -1px 0 rgba(236, 224, 255, .12),
    0 1px 2px rgba(0, 0, 0, .45);
}
:is(.raisin-metal, .button--primary, .discord, .discord-button, .checkout, .checkout-submit, #quote-close, .account-primary, .button.primary):focus-visible {
  outline: 2px solid #c49ce8;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .raisin-bar__key, .raisin-bar__glider { transition: none !important; }
  :is(.raisin-metal, .button--primary, .discord, .discord-button, .checkout, .checkout-submit, #quote-close, .account-primary, .button.primary) { transition: none; }
  :is(.raisin-metal, .button--primary, .discord, .discord-button, .checkout, .checkout-submit, #quote-close, .account-primary, .button.primary):not(:disabled):is(:hover, :active) { transform: none; }
}

/* ---------------------------------------------------------------------------
 * The stage: a dark room, one beam of light, and the raisin mark standing in it,
 * copy on the left. Used by the landing hero and the store sign-in, so both pages
 * are literally the same scene. Self-contained like the top bar: no page variables.
 * ------------------------------------------------------------------------- */
.hero--stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  width: 100%;
  min-height: calc(100vh - var(--raisin-bar-h, 56px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 72% 48%, rgba(94, 48, 140, .22), transparent 68%),
    radial-gradient(1200px 700px at 50% 120%, rgba(20, 20, 23, .9), transparent 60%);
}
.hero-copy--stage {
  position: relative;
  z-index: 2;
  padding: 72px 0 96px max(20px, calc((100vw - 1180px) / 2));
  max-width: none;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: #b677ee;
  font: 500 10px/1 Barlow, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b677ee;
  box-shadow: 0 0 0 4px rgba(182, 119, 238, .14), 0 0 14px rgba(182, 119, 238, .8);
  animation: kicker-pulse 2.2s ease-in-out infinite;
}
@keyframes kicker-pulse { 50% { opacity: .35; } }
.hero--stage h1 {
  margin: 0 0 24px;
  max-width: 14ch;
  font: 400 clamp(54px, 6.4vw, 96px)/.94 Barlow, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  letter-spacing: -.05em;
  text-transform: none;
  font-stretch: normal;
}
.hero--stage h1 em { color: #b677ee; font-style: normal; }
.hero--stage h1 strong { font-weight: 700; }
.hero--stage .hero-lede { max-width: 470px; color: #c0c0c0; font-size: 16px; line-height: 1.7; }
.hero--stage .hero-actions { margin: 32px 0 20px; }
.hero--stage .button--primary {
  min-height: 46px;
  padding: 0 24px 0 26px;
  gap: 16px;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(182, 119, 238, .35), 0 14px 40px -12px rgba(162, 91, 225, .9);
}
.hero--stage .button--primary span { transition: transform .2s ease; }
.hero--stage .button--primary:hover span { transform: translateX(4px); }
.hero-fine {
  margin: 0;
  color: #7c7c7c;
  font-size: 11px;
  letter-spacing: .08em;
}

/* The stage. A black room. One lamp overhead, a hazy cone, and a bright oval of
   light on the floor with the mark standing in it. Purple orbs drift at the corners. */
.hero--stage {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  background:
    radial-gradient(1400px 900px at 50% 45%, transparent 25%, #000 100%),
    #030304;
}
/* Dither. Large soft gradients on near-black band in 8-bit; a fine noise tile at low
   opacity breaks the steps up without reading as texture. */
.hero--stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .075;
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-copy--stage { z-index: 6; }
/* Faint glyph rain in the black, under everything else. Masked so it thins out
   around the copy and never competes with the light on the stage. */
.hero-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .3;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(64% 76% at 28% 45%, rgba(0, 0, 0, .25) 18%, #000 72%), linear-gradient(180deg, transparent 0%, #000 12%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(64% 76% at 28% 45%, rgba(0, 0, 0, .25) 18%, #000 72%), linear-gradient(180deg, transparent 0%, #000 12%, #000 85%, transparent 100%);
  mask-composite: intersect;
}
.spot-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}
.spot-orb--tl { width: 760px; height: 760px; left: -300px; top: -320px; background: radial-gradient(circle, rgba(140, 82, 192, .46), rgba(94, 48, 140, .12) 50%, transparent 72%); animation: orb-tl 34s ease-in-out infinite; }
.spot-orb--br { width: 880px; height: 880px; left: calc(44% - 440px); bottom: -250px; background: radial-gradient(circle, rgba(162, 91, 225, .42), rgba(94, 48, 140, .10) 50%, transparent 72%); animation: orb-br 42s ease-in-out infinite; }
@keyframes orb-tl {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(160px, 40px) scale(1.08); }
  50% { transform: translate(220px, 200px) scale(.96); }
  75% { transform: translate(40px, 240px) scale(1.12); }
}
@keyframes orb-br {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(120px, -40px) scale(1.08); }
  50% { transform: translate(60px, -140px) scale(.94); }
  75% { transform: translate(-100px, -90px) scale(1.12); }
}

.spot-stage {
  position: relative;
  align-self: stretch;
  min-height: 600px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* The lamp: a small hot spot at the top with a bloom around it. */
.spot-lamp {
  position: absolute;
  left: 50%;
  top: 2.5%;
  width: 34px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f4eefc;
  box-shadow: 0 0 10px 4px rgba(244, 238, 252, .8), 0 0 40px 14px rgba(214, 190, 246, .35), 0 0 90px 30px rgba(182, 119, 238, .18);
  z-index: 3;
}
/* The cone. The wrapper blurs an already clipped child, so the edges go soft
   instead of the blur being cut off by the clip. */
.spot-beam {
  position: absolute;
  inset: 0;
  filter: blur(9px);
  animation: beam-breathe 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.spot-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(47.5% 3%, 52.5% 3%, 86% 84%, 14% 84%);
  background: linear-gradient(180deg, rgba(232, 222, 250, .30) 0%, rgba(200, 170, 240, .17) 30%, rgba(182, 140, 236, .10) 60%, rgba(182, 140, 236, .06) 84%);
}
/* Haze inside the cone: a second, narrower, brighter core. */
.spot-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(48.8% 3%, 51.2% 3%, 72% 84%, 28% 84%);
  background: linear-gradient(180deg, rgba(240, 232, 252, .22) 0%, rgba(214, 190, 246, .08) 55%, rgba(214, 190, 246, .04) 84%);
}
@keyframes beam-breathe { 50% { opacity: .78; } }
/* Shafts in the haze: thin fans of light from the lamp, clipped to the cone. Two layers
   sway in opposite phase and flicker on their own clocks, so the beam never sits still. */
.spot-rays {
  position: absolute;
  inset: 0;
  filter: blur(2.5px);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
.spot-rays::before,
.spot-rays::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(47.5% 3%, 52.5% 3%, 86% 84%, 14% 84%);
  transform-origin: 50% 3%;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 70%, transparent 86%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 70%, transparent 86%);
}
.spot-rays::before {
  background: repeating-conic-gradient(from 170.5deg at 50% 3%, rgba(240, 232, 252, 0) 0deg, rgba(240, 232, 252, .13) 1.3deg, rgba(240, 232, 252, 0) 2.6deg, rgba(240, 232, 252, 0) 5.2deg);
  animation: rays-sway-a 13s ease-in-out infinite, rays-flicker-a 4.2s ease-in-out infinite;
}
.spot-rays::after {
  background: repeating-conic-gradient(from 168deg at 50% 3%, rgba(214, 190, 246, 0) 0deg, rgba(214, 190, 246, .09) 2deg, rgba(214, 190, 246, 0) 4deg, rgba(214, 190, 246, 0) 7.3deg);
  animation: rays-sway-b 17s ease-in-out infinite, rays-flicker-b 6.1s ease-in-out infinite;
}
@keyframes rays-sway-a { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes rays-sway-b { 0%, 100% { transform: rotate(1.1deg); } 50% { transform: rotate(-1.1deg); } }
@keyframes rays-flicker-a { 0%, 100% { opacity: .55; } 35% { opacity: 1; } 60% { opacity: .7; } 80% { opacity: .95; } }
@keyframes rays-flicker-b { 0%, 100% { opacity: .9; } 30% { opacity: .5; } 55% { opacity: .85; } 75% { opacity: .45; } }
/* The pool on the floor: a bright oval with a soft but definite edge. */
.spot-floor {
  position: absolute;
  left: 50%;
  top: 84%;
  width: 76%;
  height: 15%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(244, 238, 252, .55) 0%, rgba(222, 204, 248, .40) 35%, rgba(196, 160, 236, .22) 62%, rgba(182, 140, 236, .06) 82%, transparent 100%);
  filter: blur(3px);
  z-index: 1;
}
.spot-floor::after {
  content: "";
  position: absolute;
  inset: -40% -12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(182, 140, 236, .16), transparent 70%);
  filter: blur(14px);
}
/* The mark, standing in the light. */
.spot-figure {
  position: relative;
  z-index: 2;
  width: clamp(190px, 22vw, 300px);
  height: clamp(266px, 30.8vw, 420px);
  margin-top: 9%;
  /* A hair of blur on the whole figure (mark, rim and shade together) so the PNG edge
     stops reading as a cut-out against the light. */
  filter: blur(.6px);
  animation: mark-bounce 3.6s ease-in-out infinite;
}
.spot-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Lit from above: full at the top, a touch darker toward the base. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .7) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .7) 100%);
  filter: saturate(.95) brightness(1.06);
}
/* Rim light. The overlay is masked to the mark's silhouette with a second copy of the
   silhouette shifted down and subtracted, so only the upward-facing edges keep any fill.
   Lit in the lamp's colour, brighter near the top, it reads as the beam catching the
   top of every ridge. A second, softer layer with a larger shift gives a wider bloom. */
.spot-shine,
.spot-shine::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png");
  -webkit-mask-size: contain, contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, xor, source-over;
  mask-image: url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png");
  mask-size: contain, contain, contain;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-composite: intersect, exclude, add;
}
.spot-shine {
  -webkit-mask-position: center top, center 2px, center top;
  mask-position: center top, center 2px, center top;
  /* Two fills: a steady lilac edge, and a bright glint band that travels along it. */
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 252, 255, .95) 50%, transparent 62%),
    linear-gradient(180deg, rgba(240, 232, 252, .8) 0%, rgba(214, 190, 246, .5) 35%, rgba(196, 160, 236, .3) 70%, rgba(182, 140, 236, .18) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  mix-blend-mode: screen;
  filter: blur(.4px);
  animation: rim-glint 5.6s cubic-bezier(.4, 0, .3, 1) infinite, rim-breathe 4.2s ease-in-out infinite;
}
.spot-shine::before {
  content: "";
  -webkit-mask-position: center top, center 6px, center top;
  mask-position: center top, center 6px, center top;
  background: linear-gradient(180deg, rgba(232, 220, 252, .30) 0%, rgba(214, 190, 246, .16) 40%, rgba(196, 160, 236, .06) 100%);
  filter: blur(3px);
  opacity: .6;
}
/* Shade. A darkening that climbs from the base, masked to the silhouette, and a dark rim on
   the downward-facing edges (the silhouette minus a copy shifted up), so every ridge has a
   lit top and a shadowed underside. */
.spot-shade,
.spot-shade::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spot-shade {
  -webkit-mask: url("/assets/raisin-mark.png") center top / contain no-repeat;
  mask: url("/assets/raisin-mark.png") center top / contain no-repeat;
  background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(12, 6, 20, .26) 56%, rgba(10, 4, 18, .5) 82%, rgba(8, 3, 14, .62) 100%);
  mix-blend-mode: multiply;
}
.spot-shade::before {
  content: "";
  -webkit-mask-image: url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png");
  -webkit-mask-size: contain, contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-position: center top, center -6px, center top;
  -webkit-mask-composite: source-in, xor, source-over;
  mask-image: url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png"), url("/assets/raisin-mark.png");
  mask-size: contain, contain, contain;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-position: center top, center -6px, center top;
  mask-composite: intersect, exclude, add;
  background: linear-gradient(180deg, rgba(10, 4, 18, .35) 0%, rgba(10, 4, 18, .75) 100%);
  filter: blur(1.2px);
}
@keyframes rim-glint {
  0%, 18% { background-position: 140% 0, 0 0; }
  70%, 100% { background-position: -140% 0, 0 0; }
}
@keyframes rim-breathe { 0%, 100% { opacity: .78; } 35% { opacity: 1; } 60% { opacity: .85; } 80% { opacity: .95; } }
@keyframes mark-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-34px); }
}
@keyframes shadow-bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(.72); opacity: .55; }
}
/* The mark's own shadow on the floor, and darkness closing in at the stage edges. */
.spot-shadow {
  position: absolute;
  left: 50%;
  top: 84%;
  width: 44%;
  height: 11%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8, 4, 14, .9) 0%, rgba(12, 6, 20, .6) 40%, transparent 72%);
  filter: blur(8px);
  z-index: 2;
  animation: shadow-bounce 3.6s ease-in-out infinite;
}
.spot-rim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 3, 4, .45) 0%, transparent 28%, transparent 72%, rgba(3, 3, 4, .45) 100%),
    linear-gradient(180deg, transparent 0%, transparent 82%, rgba(3, 3, 4, .85) 100%);
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 900px) {
  .hero--stage { grid-template-columns: 1fr; gap: 0; }
  .hero-copy--stage { order: 2; padding: 0 20px 72px; text-align: center; }
  .hero--stage h1 { max-width: none; margin-inline: auto; font-size: clamp(40px, 11.5vw, 72px); }
  .hero--stage .hero-lede { margin-inline: auto; }
  .hero--stage .hero-actions { justify-content: center; }
  .spot-stage { order: 1; min-height: 480px; margin-top: 0; }
  .spot-figure { width: clamp(150px, 40vw, 220px); height: clamp(210px, 56vw, 308px); margin-top: -4%; }
  .spot-floor { width: 92%; }
  .spot-orb--tl { width: 460px; height: 460px; left: -200px; top: -200px; }
  .spot-orb--br { width: 540px; height: 540px; left: auto; right: -240px; bottom: -260px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kicker-dot, .spot-figure, .spot-shadow, .spot-beam, .spot-shine, .spot-orb, .spot-rays::before, .spot-rays::after { animation: none; }
}

/* What the stage used to inherit from the landing stylesheet, stated here so it renders
   identically on the store. */
.hero--stage { font-synthesis: weight style small-caps; color: #e4e4e4; font-family: Barlow, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
.hero--stage .hero-lede { margin: 16px 0; }
.hero--stage .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero--stage .button--primary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
}