/* Mage Alert landing page (magealert.com).
   Values from design-system/handoff/landing-page/LANDING-SPEC.md and
   landing-tokens.json. `cqw` = 1% of .page's width (the page is a size
   container, exactly like the design file) so clamp() values match the spec
   at 1200 / 390 regardless of the scrollbar. See landing/README.md for every
   deviation from the handoff. */

:root {
  /* color */
  --bg-page: #08070c;
  --bg-deep: #0a0812;
  --bg-panel: #150f28;
  --bg-glow: #2a2154;
  --text-heading: #fff9ec;
  --text-strong: #f8f4ff;
  --text-body: #cfc5ea;
  --text-muted: #a9a0cc;
  --text-faint: #8b82ad;
  --text-eyebrow: #b8a9d8;
  --text-numeric: #fff6e4;
  --text-cream: #fff6de;
  --text-nav: #dcd4f2;
  --gold: #f0c567;
  --gold-light: #ffdf9b;
  --gold-pale: #fff3d2;
  --gold-chip-text: #ffebbe;
  --gold-hover: #f5d07a;
  --gold-plate: #e2be66;
  --gold-dark: #b98f3e;
  --gold-deep: #8a6a28;
  --gold-shadow: #6b5220;
  --violet: #c0b4ff;
  --violet-link: #c9beff;
  --violet-seam: #9b8cff;
  --violet-chip-text: #e4dcff;
  --mint: #7fd6b5;
  --mint-light: #8fe6c4;
  --mint-core: #17262a;
  --rose: #f6aec4;
  --pro: #c77bff;
  --pro-text: #f3e4ff;
  --line-violet: rgba(168, 148, 255, 0.2);
  --line-violet-strong: rgba(168, 148, 255, 0.3);
  --line-violet-soft: rgba(168, 148, 255, 0.14);
  /* surfaces */
  --card-bg: linear-gradient(150deg, #221b44 0%, #171130 55%, #120d22 100%);
  --card-shadow: inset 0 1px 0 rgba(210, 196, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.45);
  /* layout */
  --gutter: clamp(20px, 5cqw, 56px);
  --section-y: clamp(40px, 6cqw, 80px);
  --content-max: 1120px;
  --grid-max: 800px;
  --font-display: 'Cinzel', serif;
  --font-numeric: 'Space Grotesk', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg-page);
  /* Same iOS font-boosting guard the app pins (see CLAUDE.md). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--violet-link);
  text-decoration: none;
}
a:hover {
  color: var(--gold);
}
img {
  max-width: 100%;
}

@keyframes ma-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ma-spin-rev {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes ma-stream {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes ma-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes ma-sparkle {
  0%,
  100% {
    opacity: 0.2;
    transform: rotate(45deg) scale(0.75);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Scroll-driven animations ignore the duration rule above; switch them off. */
  [data-outro] {
    animation: none !important;
  }
}

/* ---- build-time flag (html[data-cta]) ---- */
html[data-cta='coming'] .only-live {
  display: none !important;
}
html[data-cta='live'] .only-coming {
  display: none !important;
}

/* ---- page frame ---- */
/* The page gradient lives on body (not .page) so the fixed orbit layer, a
   direct child of body, can sit between it and .page's content (v4). */
body {
  background:
    radial-gradient(130% 55% at 50% -8%, #2a2154 0%, #150f28 45%, #0a0812 78%) top / 100% 1100px
      no-repeat,
    var(--bg-page);
}
.page {
  container-type: inline-size;
  container-name: page;
  position: relative;
  z-index: 1;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}
.rings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ring {
  position: absolute;
  left: 50%;
  border-radius: 50%;
}
.ring-a {
  top: -300px;
  width: 760px;
  height: 760px;
  margin-left: -380px;
  border: 1px dashed rgba(240, 197, 103, 0.16);
  animation: ma-spin 90s linear infinite;
}
.ring-b {
  top: -160px;
  width: 520px;
  height: 520px;
  margin-left: -260px;
  border: 1px solid rgba(168, 148, 255, 0.14);
  animation: ma-spin-rev 60s linear infinite;
}

/* Spinning decorative layers must never be scroll-anchoring candidates.
   A rotating square's bounding box grows and shrinks as it turns, which moves
   its top edge; scroll anchoring read that as layout shift above the viewport
   and scrolled the page to compensate, so every reload (which restores the
   previous scroll position first) crept further down. The same goes for
   anything whose transform is animated while it is in or near view (the
   scroll reveals, materialize, and the scroll-driven section outro).
   Excluding these subtrees fixes it at the cause; scroll restoration is left
   alone. */
.rings,
.hero-fx,
.footer-decor,
.gauge-orbit,
.ring-step,
.footer-brand .mark,
[data-reveal],
[data-outro],
[data-fx] {
  overflow-anchor: none;
}

/* ---- brand mark (34px, pure CSS; one snippet used in nav + footer) ---- */
.mark {
  width: 34px;
  height: 34px;
  position: relative;
  flex: none;
  display: block;
}
.mark i {
  position: absolute;
  inset: 0;
}
.mark i::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 1.92px solid transparent;
  border-right: 1.92px solid transparent;
  top: 2.96px;
  margin-left: -1.92px;
  border-bottom: 6.65px solid #f0c567;
}
.mark i:nth-child(2) {
  transform: rotate(90deg);
}
.mark i:nth-child(3) {
  transform: rotate(180deg);
}
.mark i:nth-child(4) {
  transform: rotate(270deg);
}
.mark i:nth-child(n + 5)::before {
  top: 5.54px;
  margin-left: -1.48px;
  border-left-width: 1.48px;
  border-right-width: 1.48px;
  border-bottom: 4.07px solid #b98f3e;
}
.mark i:nth-child(5) {
  transform: rotate(45deg);
}
.mark i:nth-child(6) {
  transform: rotate(135deg);
}
.mark i:nth-child(7) {
  transform: rotate(225deg);
}
.mark i:nth-child(8) {
  transform: rotate(315deg);
}
.mark b {
  position: absolute;
  inset: 9.61px;
  border-radius: 50%;
  background: radial-gradient(circle, #2a2154, #150f28);
  border: 1.11px solid #f0c567;
  box-shadow:
    0 0 8.87px rgba(240, 197, 103, 0.3),
    inset 0 0 5.91px rgba(240, 197, 103, 0.18);
}
.mark u {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6.65px;
  height: 6.65px;
  margin: -3.33px 0 0 -3.33px;
  background: linear-gradient(180deg, #fff3d2, #f0c567);
  transform: rotate(45deg);
  box-shadow: 0 0 7.39px rgba(240, 197, 103, 0.8);
  text-decoration: none;
}

/* ---- nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.5);
}
.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(14px, 1.8cqw, 20px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--gold);
  white-space: nowrap;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid var(--line-violet-strong);
  color: var(--text-nav);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 160ms ease;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: var(--gold-hover);
  color: var(--text-cream);
  box-shadow: 0 0 18px rgba(240, 197, 103, 0.28);
  outline: none;
}

/* ---- shared section pieces ---- */
.section {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.section-col {
  display: flex;
  flex-direction: column;
}
.h2-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4cqw, 38px);
  line-height: 1.15;
  color: var(--text-heading);
}
.rule {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, #f0c567, transparent);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--line-violet);
  box-shadow: var(--card-shadow);
}
.diamond {
  display: inline-block;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}
p,
.pretty {
  text-wrap: pretty;
}
.seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-size: 200% 100%;
  opacity: 0.85;
  animation: ma-stream 5.5s linear infinite;
}
.rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.glyph {
  width: 20px;
  height: 20px;
  position: relative;
  flex: none;
}
.glyph > * {
  position: absolute;
}

/* ---- hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5cqw, 72px) var(--gutter) clamp(48px, 7cqw, 88px);
  margin-top: calc(-1 * clamp(62px, 5.8cqw, 74px));
  /* The eyebrow sits one gutter below the nav bar (v4). */
  padding-top: calc(clamp(62px, 5.8cqw, 74px) + clamp(20px, 5cqw, 56px));
  background: #0b0914;
}
/* The mage art and the veil over it are two layers (v4) so each breakpoint can
   position them independently. Mobile: fixed 380cqw scale, top-anchored, so the
   mage's head and shoulders sit between the eyebrow and the headline and don't
   slide when the hero grows. The size is capped at 1482px, which is exactly
   380cqw at 390px: above 390 the mage stays the size it is on a phone instead of
   growing to ~3x by 879px (Nate, 2026-10-03; v4 specified an uncapped 380cqw). */
.hero-art {
  position: absolute;
  inset: 0;
  background: #0b0914 url(assets/bg-hero-tall.webp) center top / min(380cqw, 1482px) auto no-repeat;
  pointer-events: none;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 8, 18, 0.6) 0%,
    rgba(10, 8, 18, 0.34) 14%,
    rgba(10, 8, 18, 0.4) 32%,
    rgba(21, 15, 40, 0.66) 52%,
    rgba(10, 8, 18, 0.86) 80%,
    #0a0812 100%
  );
  pointer-events: none;
}
.hero-grid {
  position: relative;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(22px, 3cqw, 32px);
}
.hero-tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3cqw, 32px);
  width: 100%;
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 760px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.6cqw, 64px);
  line-height: 1.08;
  color: var(--text-heading);
  text-wrap: balance;
}
.hero-text h1 {
  /* Mobile: pushes the headline (and everything below) down so the mage shows
     above it. Desktop resets this to 0. */
  margin-top: clamp(130px, 40cqw, 170px);
}
.hero-sub {
  margin: 0;
  max-width: 560px;
  font-size: clamp(16px, 1.6cqw, 19px);
  line-height: 1.5;
  color: var(--text-body);
}

.instrument {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 18px 26px;
  border-radius: 20px;
  background: linear-gradient(150deg, #2e2440 0%, #1d1530 55%, #140e20 100%);
  border: 1px solid rgba(240, 197, 103, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(210, 196, 255, 0.1),
    0 26px 60px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.instrument .rail {
  background: linear-gradient(180deg, #ffdf9b, #8a6a28);
}
.instrument .seam {
  background-image: linear-gradient(90deg, transparent, #ffdf9b, #9b8cff, transparent);
}
.tick {
  position: absolute;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  opacity: 0.85;
}
.instrument .tick {
  top: 14px;
  right: 16px;
  width: 12px;
  height: 12px;
}
.row {
  display: flex;
  align-items: center;
}
.row-title {
  gap: 10px;
}
.name {
  font-weight: 500;
  font-size: 17px;
  color: var(--text-strong);
}
.gauge-row {
  gap: 20px;
}
.gauge {
  position: relative;
  flex: none;
}
.gauge > * {
  position: absolute;
  border-radius: 50%;
}
.gauge-hero {
  width: 76px;
  height: 76px;
}
.gauge-ticks {
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(127, 214, 181, 0.5) 0deg 1deg,
    transparent 1deg 30deg
  );
}
.gauge-arc {
  inset: 9%;
  background: conic-gradient(#7fd6b5 0turn 0.18turn, rgba(127, 214, 181, 0.13) 0.18turn);
}
.gauge-core {
  inset: 21%;
  background: var(--mint-core);
  box-shadow: inset 0 0 18px rgba(127, 214, 181, 0.3);
  display: grid;
  place-items: center;
}
.gauge-core i {
  width: 14%;
  height: 14%;
  background: #7fd6b5;
  transform: rotate(45deg);
  box-shadow: 0 0 12px #7fd6b5;
  animation: ma-sparkle 3s ease-in-out infinite;
  border-radius: 0;
}
.gauge-orbit {
  inset: 0;
  animation: ma-spin 7.5s linear infinite;
  border-radius: 0;
}
.gauge-orbit i {
  position: absolute;
  top: -1.5%;
  left: 45%;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background: #7fd6b5;
  box-shadow: 0 0 12px #7fd6b5;
}
.readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.readout .label {
  white-space: nowrap;
}
.countdown {
  font-family: var(--font-numeric);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-numeric);
  white-space: nowrap;
}
.countdown small {
  font-weight: 600;
  color: rgba(255, 246, 228, 0.7);
  margin-left: 1.5px;
}
.countdown small:nth-of-type(1) {
  margin-right: 0.16em;
}
.countdown-hero {
  font-size: 44px;
  text-shadow: 0 0 22px rgba(127, 214, 181, 0.3);
}
.countdown-hero small {
  font-size: 0.5em;
}
.chip-stage {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 13px;
  border-radius: 14px;
  border: 1px solid rgba(155, 140, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-link);
  white-space: nowrap;
}
.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(240, 197, 103, 0.12), rgba(240, 197, 103, 0.04));
  border: 1px solid rgba(240, 197, 103, 0.45);
  color: var(--gold-plate);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
}
.plate .diamond {
  width: 7px;
  height: 7px;
}

/* banner glyph (hero + widget) uses % boxes, stroke 1.5px */
.glyph-banner-pct {
  width: 22px;
  height: 22px;
}
.glyph-banner-pct .g-bar {
  left: 9%;
  right: 9%;
  top: 10%;
  height: 1.5px;
  background: var(--gold);
}
.glyph-banner-pct .g-poles {
  left: 23%;
  top: 16%;
  width: 54%;
  height: 50%;
  border: 1.5px solid var(--gold);
  border-top: none;
  border-bottom: none;
}
.glyph-banner-pct .g-cross {
  left: 23%;
  top: 34%;
  width: 54%;
  height: 1.5px;
  background: var(--gold);
  opacity: 0.5;
}
.glyph-banner-pct .g-tail-l {
  left: 23%;
  top: 63%;
  width: 31%;
  height: 1.5px;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: rotate(30.65deg);
}
.glyph-banner-pct .g-tail-r {
  left: 50%;
  top: 79%;
  width: 31%;
  height: 1.5px;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: rotate(-30.65deg);
}

/* CTA block */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* The nav bar is sticky over the page; keep #get from landing under it. */
  scroll-margin-top: 90px;
}
.cta:focus:not(:focus-visible) {
  outline: none;
}
.cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(240, 197, 103, 0.55);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cta-tag .diamond {
  width: 6px;
  height: 6px;
}
.badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.badge {
  display: block;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}
.badge img {
  height: 44px;
  width: auto;
  display: block;
}
a.badge:hover,
a.badge:focus-visible {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 14px rgba(240, 197, 103, 0.3));
  outline: none;
}
.badge-off {
  opacity: 0.5;
  cursor: default;
}
.badges-footer {
  gap: 12px;
  justify-content: flex-start;
}
/* The page's one explicit breakpoint (v4): 880px. At and above it the footer
   badges sit at the right edge, under the nav links; below it they stay at the
   left, under the brand. A container query on .page so it tracks the same
   width the cqw gutters use. */
@container (min-width: 880px) {
  .badges-footer {
    justify-content: flex-end;
  }
}
.badges-footer .badge img {
  height: 38px;
}
.cta-note a {
  color: var(--violet-link);
  border-bottom: 1px solid rgba(201, 190, 255, 0.4);
}
.cta-note a:hover,
.cta-note a:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}
/* "browser" is lowercase in the HTML (screen readers read it normally);
   the capitals are presentation only. */
.cta-note a {
  position: relative;
  text-transform: uppercase;
}
/* Tap target >= 44x44 without changing the visual size. */
.cta-note a::after {
  content: '';
  position: absolute;
  inset: -14px -12px;
}
.cta-note {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trust-strip span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.check {
  color: var(--mint);
  font-size: 13px;
}

/* ---- v4 desktop hero (>= 880px): one left column, mage unobstructed on the
   right. This is the page's one explicit breakpoint; it must stay after the
   base rules above it so equal-specificity overrides win. JS reads
   getComputedStyle(.hero-tail).alignItems rather than repeating the number. ---- */
@container (min-width: 880px) {
  .hero {
    padding-left: 0;
    padding-right: 0;
    padding-top: clamp(104px, 12cqw, 168px);
  }
  .hero-grid {
    min-height: 640px;
    padding: 0 var(--gutter);
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
  }
  .hero-text {
    align-items: flex-start;
    max-width: min(600px, 56%);
  }
  .hero-text h1 {
    margin-top: 0;
  }
  .hero-tail,
  .cta {
    align-items: flex-start;
  }
  .cta div {
    justify-content: flex-start;
    text-align: left;
  }
  .trust-strip {
    justify-content: flex-start;
  }
  .hero-art {
    background-size: cover;
    background-position: calc(50% + 22cqw) 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 14%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 14%, #000 52%);
  }
  .hero-veil {
    background:
      linear-gradient(
        90deg,
        rgba(10, 8, 18, 0.9) 0%,
        rgba(10, 8, 18, 0.55) 40%,
        rgba(10, 8, 18, 0.1) 70%,
        rgba(10, 8, 18, 0.2) 100%
      ),
      linear-gradient(
        180deg,
        rgba(10, 8, 18, 0.55) 0%,
        rgba(10, 8, 18, 0) 25%,
        rgba(10, 8, 18, 0) 68%,
        #0a0812 100%
      );
  }
}

/* ---- How It Works ---- */
.hiw {
  gap: clamp(28px, 4cqw, 44px);
}
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2cqw, 24px);
}
.step {
  gap: 16px;
  padding: 24px;
  border-radius: 18px;
}
.halo {
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  border: 1px solid rgba(240, 197, 103, 0.5);
  box-shadow:
    0 0 0 1px rgba(240, 197, 103, 0.06),
    0 0 34px rgba(240, 197, 103, 0.12);
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.step-num {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.step-num .ring-step {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(240, 197, 103, 0.6);
  animation: ma-spin 36s linear infinite;
  opacity: 0;
  transition: opacity 700ms ease;
}
.step-num span {
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: 24px;
  color: var(--gold);
  line-height: 1;
}
.step.is-active .halo,
.step.is-active .ring-step {
  opacity: 1;
}
.step-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-title {
  font-weight: 600;
  font-size: 18px;
  color: var(--text-strong);
}
.step-text p,
.body-15 {
  margin: 0;
  font-size: 15px;
  color: var(--text-body);
}
.demo {
  margin-top: auto;
}
.input-demo {
  position: relative;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(180deg, #1d1739, #120e24);
  border: 1px solid var(--line-violet-strong);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.input-demo .b {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 0 solid var(--gold);
}
.input-demo .b-tl {
  left: 5px;
  top: 5px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.input-demo .b-br {
  right: 5px;
  bottom: 5px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.input-demo .diamond {
  width: 6px;
  height: 6px;
  color: var(--gold);
}
.typed-wrap {
  display: flex;
  align-items: center;
  min-height: 20px;
  font-size: 15px;
  color: var(--text-strong);
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 17px;
  margin-left: 2px;
  opacity: 0;
  transition: opacity 300ms ease;
}
.caret i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: ma-blink 1.1s steps(1) infinite;
}
.step.is-active .caret {
  opacity: 1;
}
.toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border-left: 3px solid;
}
.trow .st {
  font-size: 12px;
  color: var(--mint-light);
}
.trow-season {
  background: rgba(155, 140, 255, 0.1);
  border-left-color: #c0b4ff;
}
.trow-brawl {
  background: rgba(240, 197, 103, 0.08);
  border-left-color: #f0c567;
}
.trow-season > span:first-child,
.trow-brawl > span:first-child {
  color: var(--text-strong);
}
/* Conflict row: resting state is "off" per spec §6.3. */
.trow-conflict {
  background: #100d1c;
  border-left-color: #2a2740;
  opacity: 0.75;
  transition:
    background 500ms ease,
    border-color 500ms ease,
    opacity 500ms ease;
}
.trow-conflict > span:first-child {
  color: var(--text-body);
  transition: color 500ms ease;
}
.trow-conflict .st {
  color: var(--text-faint);
  transition: color 500ms ease;
}
.trow-conflict .st-on {
  display: none;
}
.trow-conflict.is-on {
  background: rgba(246, 174, 196, 0.1);
  border-left-color: #f6aec4;
  opacity: 1;
}
.trow-conflict.is-on > span:first-child {
  color: var(--text-strong);
}
.trow-conflict.is-on .st {
  color: var(--mint-light);
}
.trow-conflict.is-on .st-off {
  display: none;
}
.trow-conflict.is-on .st-on {
  display: inline;
}
.notif {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: #141024;
  border: 1px solid var(--line-violet);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.notif-icon {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: #1b1440;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 197, 103, 0.4);
  color: var(--gold);
}
.notif-icon .diamond {
  width: 6px;
  height: 6px;
}
.notif-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.notif-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.notif-body {
  font-size: 13px;
  color: var(--text-body);
}
.notif-wrap {
  margin-top: auto;
}
.notif-wrap.is-hidden {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  transition: none;
}
.notif-wrap.is-in {
  transition:
    opacity 360ms ease,
    transform 560ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* ---- What It Tracks ---- */
.tracks-section {
  padding-top: clamp(40px, 6cqw, 88px);
  padding-bottom: clamp(40px, 6cqw, 88px);
  gap: clamp(28px, 4.5cqw, 56px);
}
.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}
.head-row > p {
  margin: 0;
  max-width: 440px;
  font-size: 15.5px;
  color: var(--text-body);
}
.grid-800 {
  display: grid;
  gap: clamp(16px, 2.6cqw, 32px);
  max-width: var(--grid-max);
  width: 100%;
  margin: 0 auto;
}
.tracks-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.track {
  overflow: hidden;
  gap: 12px;
  padding: 18px 18px 18px 24px;
  border-radius: 18px;
  background: var(--fam-bg);
  border: 1px solid var(--fam-line);
}
.track .rail {
  background: var(--fam-rail);
}
.track .seam {
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--fam-hue),
    var(--violet-seam),
    transparent
  );
  animation-duration: var(--seam, 5.5s);
}
.track .tick {
  top: 12px;
  right: 14px;
  width: 10px;
  height: 10px;
}
.fam-violet {
  --fam-hue: #c0b4ff;
  --fam-tick: rgba(192, 180, 255, 0.14);
  --fam-line: rgba(155, 140, 255, 0.36);
  --fam-bg: linear-gradient(150deg, #2a2258 0%, #1b1440 55%, #130e26 100%);
  --fam-rail: linear-gradient(180deg, #c0b4ff, #4b3f8c);
}
.fam-gold {
  --fam-hue: #f0c567;
  --fam-tick: rgba(240, 197, 103, 0.14);
  --fam-line: rgba(240, 197, 103, 0.26);
  --fam-bg: linear-gradient(150deg, #2e2440 0%, #1d1530 55%, #140e20 100%);
  --fam-rail: linear-gradient(180deg, #ffdf9b, #8a6a28);
}
.fam-rose {
  --fam-hue: #f6aec4;
  --fam-tick: rgba(246, 174, 196, 0.14);
  --fam-line: rgba(232, 138, 168, 0.34);
  --fam-bg: linear-gradient(150deg, #3a2038 0%, #231428 55%, #150e1c 100%);
  --fam-rail: linear-gradient(180deg, #f6aec4, #7a3e52);
}
.fam-neutral {
  --fam-hue: #c6bfe0;
  --fam-tick: rgba(198, 191, 224, 0.14);
  --fam-line: rgba(168, 148, 255, 0.2);
  --fam-bg: linear-gradient(150deg, #221b44 0%, #171130 55%, #120d22 100%);
  --fam-rail: linear-gradient(180deg, #a29cc0, #413c5c);
}
.g-shield-body {
  left: 4px;
  top: 2.8px;
  width: 12px;
  height: 14px;
  border: 1.5px solid var(--fam-hue);
  border-radius: 2.4px 2.4px 8.8px 8.8px / 2px 2px 12.4px 12.4px;
}
.g-shield-line {
  left: 50%;
  top: 5.4px;
  width: 1.5px;
  height: 7.2px;
  margin-left: -0.75px;
  background: var(--fam-hue);
  opacity: 0.5;
}
.g-banner-bar {
  left: 1.8px;
  right: 1.8px;
  top: 2px;
  height: 1.5px;
  background: var(--fam-hue);
}
.g-banner-poles {
  left: 4.6px;
  top: 3.2px;
  width: 10.8px;
  height: 10px;
  border: 1.5px solid var(--fam-hue);
  border-top: none;
  border-bottom: none;
}
.g-banner-cross {
  left: 4.6px;
  top: 6.8px;
  width: 10.8px;
  height: 1.5px;
  background: var(--fam-hue);
  opacity: 0.5;
}
.g-banner-tl {
  left: 4.6px;
  top: 12.6px;
  width: 6.2px;
  height: 1.5px;
  background: var(--fam-hue);
  transform-origin: 0 50%;
  transform: rotate(30.65deg);
}
.g-banner-tr {
  left: 10px;
  top: 15.8px;
  width: 6.2px;
  height: 1.5px;
  background: var(--fam-hue);
  transform-origin: 0 50%;
  transform: rotate(-30.65deg);
}
.g-wagon-body {
  left: 1.8px;
  top: 4px;
  width: 16.4px;
  height: 7.2px;
  border: 1.5px solid var(--fam-hue);
  border-radius: 2.6px 2.6px 2px 2px;
}
.g-wagon-axle {
  left: 1px;
  top: 11.2px;
  width: 18px;
  height: 1.5px;
  background: var(--fam-hue);
}
.g-wagon-wl {
  left: 1.8px;
  top: 11.6px;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--fam-hue);
  border-radius: 50%;
}
.g-wagon-wr {
  right: 1.8px;
  top: 11.6px;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--fam-hue);
  border-radius: 50%;
}
.g-clock-face {
  inset: 1.5px;
  border: 1.5px solid var(--fam-hue);
  border-radius: 50%;
}
.g-clock-h1 {
  left: 9.25px;
  top: 5px;
  width: 1.5px;
  height: 5.5px;
  background: var(--fam-hue);
}
.g-clock-h2 {
  left: 9.25px;
  top: 9.25px;
  width: 4.5px;
  height: 1.5px;
  background: var(--fam-hue);
}
.track-name {
  font-weight: 500;
  font-size: 16.5px;
  color: var(--text-strong);
}
.gauge-card {
  width: 56px;
  height: 56px;
}
.gauge-card .gauge-ticks {
  background: repeating-conic-gradient(
    from 0deg,
    var(--fam-tick) 0deg 1.3deg,
    transparent 1.3deg 30deg
  );
}
.gauge-card .gauge-arc {
  inset: 5px;
  background: conic-gradient(var(--fam-hue) 0turn var(--arc), var(--fam-tick) var(--arc));
}
.gauge-card .gauge-core {
  inset: 12px;
  background: var(--bg-panel);
  box-shadow: none;
}
.gauge-card .gauge-core i {
  width: 8px;
  height: 8px;
  background: var(--fam-hue);
  box-shadow: 0 0 9px var(--fam-hue);
  animation: none;
  opacity: 1;
  transform: rotate(45deg);
}
.gauge-card .gauge-orbit {
  animation-delay: var(--delay, 0s);
}
.gauge-card .gauge-orbit i {
  top: -1px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background: var(--fam-hue);
  box-shadow: 0 0 10px var(--fam-hue);
}
.count-row {
  gap: 14px;
}
.countdown-card {
  font-size: 32px;
}
.countdown-card small {
  font-size: 17px;
}
.countdown-card small:nth-of-type(1) {
  margin-right: 6px;
}
.chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(155, 140, 255, 0.14);
  border: 1px solid rgba(155, 140, 255, 0.32);
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-chip-text);
}
.divider {
  height: 1px;
  background: var(--line-violet-soft);
}
.why {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
}

/* ---- Alerts / Widget two-column pattern ---- */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 5cqw, 72px);
}
.split-reverse {
  flex-wrap: wrap-reverse;
}
.col-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.alerts-text {
  flex: 1 1 320px;
  gap: 28px;
}
.alerts-items {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.alerts-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alerts-item.lead {
  gap: 10px;
}
.leads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.lead-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  white-space: nowrap;
  border: 1px solid var(--line-violet-strong);
  color: var(--text-faint);
}
.lead-chip.on {
  background: linear-gradient(180deg, rgba(240, 197, 103, 0.32), rgba(240, 197, 103, 0.12));
  border: 1px solid #f0c567;
  color: var(--gold-chip-text);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35);
}
.col-media {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.alerts-media {
  flex: 1 1 280px;
}
.phone {
  width: min(300px, 100%);
  height: auto;
  border-radius: 28px;
  border: 1px solid rgba(168, 148, 255, 0.22);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.widget-media {
  flex: 1 1 300px;
}
.widget-text {
  flex: 1 1 320px;
  gap: 20px;
}
.widget-text > p {
  margin: 0;
  font-size: 16px;
  color: var(--text-body);
}
.tag-pro {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(199, 123, 255, 0.22), rgba(199, 123, 255, 0.07));
  border: 1px solid rgba(199, 123, 255, 0.42);
  color: var(--pro-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-pro .diamond {
  width: 5px;
  height: 5px;
  color: var(--pro);
}
.widget-tile {
  width: 329px;
  max-width: 100%;
  height: 155px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #2a2246 0%, #1c1533 55%, #140e22 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.widget-tile .edge {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(168, 148, 255, 0.22);
  pointer-events: none;
}
.widget-tile .wseam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffdf9b 50%, transparent);
  opacity: 0.9;
}
.wpanel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  background: rgba(168, 148, 255, 0.07);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 180ms ease;
}
.wpanel:hover {
  background: rgba(240, 197, 103, 0.14);
}
.wpanel-l {
  left: 0;
  border-right: 1px solid rgba(168, 148, 255, 0.32);
}
.wpanel-r {
  right: 0;
  border-left: 1px solid rgba(168, 148, 255, 0.32);
}
.chev {
  width: 9px;
  height: 9px;
  border: 0 solid var(--text-body);
  transform: rotate(45deg);
}
.wpanel-l .chev {
  border-left-width: 1.6px;
  border-bottom-width: 1.6px;
  margin-left: 3px;
}
.wpanel-r .chev {
  border-right-width: 1.6px;
  border-top-width: 1.6px;
  margin-right: 3px;
}
.wcontent {
  position: absolute;
  inset: 16px 48px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.wcontent .row-title {
  gap: 9px;
}
.wname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}
.wlabel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.wread {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 3px;
}
.gauge-widget {
  width: 48px;
  height: 48px;
}
.gauge-widget .gauge-ticks {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(127, 214, 181, 0.5) 0deg 1.3deg,
    transparent 1.3deg 30deg
  );
}
.gauge-widget .gauge-arc {
  inset: 4.4px;
}
.gauge-widget .gauge-core {
  inset: 10.5px;
  box-shadow: none;
}
.gauge-widget .gauge-core i {
  width: 7px;
  height: 7px;
  animation: none;
  opacity: 1;
  box-shadow: 0 0 9px #7fd6b5;
}
.countdown-widget {
  font-size: 32px;
}
.countdown-widget small {
  font-size: 17px;
}
.countdown-widget small:nth-of-type(1) {
  margin-right: 6px;
}
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 8px;
  margin-top: 4px;
}
.dots .diamond {
  width: 4px;
  height: 4px;
  color: #9b8cff;
  opacity: 0.4;
}
.dots .diamond.on {
  width: 6px;
  height: 6px;
  color: var(--mint);
  opacity: 1;
  box-shadow: 0 0 8px rgba(127, 214, 181, 0.7);
}

/* ---- Trust panel ---- */
.trust-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3cqw, 36px);
  padding: clamp(28px, 4cqw, 48px);
  border-radius: 24px;
  background: linear-gradient(150deg, #242c3c 0%, #18202c 55%, #111820 100%);
  border: 1px solid rgba(127, 214, 181, 0.36);
  box-shadow: var(--card-shadow);
}
.trust-card .rail {
  background: linear-gradient(180deg, #8fe6c4, #2f6455);
}
.trust-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-head p {
  margin: 0;
  max-width: 600px;
  font-size: 16px;
  color: var(--text-body);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(127, 214, 181, 0.3);
}
.trust-item .card-title .check {
  margin-right: 8px;
  font-size: inherit;
}
.trust-item p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-body);
}

/* ---- FAQ ---- */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3cqw, 40px) clamp(24px, 4cqw, 56px);
}
.faq-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line-violet);
}
.faq-q {
  font-weight: 600;
  font-size: 17px;
  color: var(--text-strong);
}
.faq-a {
  margin: 0;
  font-size: 15px;
  color: var(--text-body);
}
.faq-steps {
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Link below an answer: same inline-link treatment as .cta-note a, 14px/600. */
.faq-link {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--violet-link);
  border-bottom: 1px solid rgba(201, 190, 255, 0.4);
}
.faq-link:hover,
.faq-link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

/* ---- footer ---- */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-violet-soft);
  background: var(--bg-page);
}
.footer-inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(32px, 4cqw, 48px) var(--gutter) clamp(36px, 5cqw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  align-items: center;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand .wordmark {
  font-size: 14px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-nav a {
  color: var(--violet-link);
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--gold);
}
.footer-nav .mail {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
}
.legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint);
  max-width: 760px;
}
.legal div {
  text-wrap: pretty;
}

/* ======================================================================
   v4 motion (CHANGES-v4 §3-§7). Everything here is decoration: content is
   fully visible with JS off, and nothing below hides content by default CSS.
   Primed start states are applied by landing.js (or by the `js` / `fx`
   classes the head script sets). Steady-state styles after every animation
   equal the pre-v4 look.
   ====================================================================== */

@property --ma-sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}
@keyframes ma-materialize {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.965);
    filter: blur(10px) saturate(1.5);
    --ma-sweep: 0deg;
  }
  45% {
    opacity: 1;
    filter: blur(0) saturate(1);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0) saturate(1);
    --ma-sweep: 360deg;
  }
}
@keyframes ma-ring {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ma-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ma-slip {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
@keyframes ma-dial {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(180deg) scale(1);
  }
}
@keyframes ma-outro {
  to {
    opacity: 0.12;
    transform: translateY(-40px);
  }
}
@keyframes ma-charge {
  0%,
  40% {
    color: #f0c567;
    text-shadow: 0 0 22px rgba(240, 197, 103, 0.55);
  }
  46% {
    color: #fff9ec;
    text-shadow: 0 0 30px rgba(255, 249, 236, 0.75);
  }
  50% {
    color: #f0c567;
    text-shadow: 0 0 22px rgba(240, 197, 103, 0.5);
  }
  56% {
    color: #fff9ec;
    text-shadow: 0 0 34px rgba(255, 249, 236, 0.75);
  }
  60% {
    color: #e8cc86;
    text-shadow: 0 0 16px rgba(240, 197, 103, 0.4);
  }
  66% {
    color: #fff9ec;
    text-shadow: 0 0 36px rgba(255, 249, 236, 0.8);
  }
  100% {
    color: #fff9ec;
    text-shadow: 0 0 0 rgba(255, 249, 236, 0);
  }
}

/* Headline charge-up: pure CSS, no hidden state (the end state is the normal
   colour), skipped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text h1 .w {
    animation: ma-charge 2400ms ease-out both;
  }
  .hero-text h1 .w:nth-child(1) {
    animation-delay: 300ms;
  }
  .hero-text h1 .w:nth-child(2) {
    animation-delay: 460ms;
  }
  .hero-text h1 .w:nth-child(3) {
    animation-delay: 620ms;
  }
  .hero-text h1 .w:nth-child(4) {
    animation-delay: 780ms;
  }
}

/* Hero card: hidden before first paint only while the head script has set
   html.fx (JS on, motion allowed, materialize supported). landing.js starts the
   animation and clears the class; a 3s failsafe clears it if landing.js is late
   or missing, and a late landing.js then skips the effect. */
html.fx .hero .instrument {
  opacity: 0;
}

/* Chronomancy ring flashed over a card while it materializes. */
.fx-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(240, 197, 103, 0.75);
  box-shadow:
    inset 0 0 36px rgba(240, 197, 103, 0.28),
    inset 0 0 6px rgba(255, 235, 190, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Seam dividers between sections. Lines are primed (scaleX 0) by JS only. */
.seam-divider {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
  height: 24px;
}
.seam-line {
  flex: 1;
  height: 1px;
}
.seam-line-l {
  background: linear-gradient(90deg, transparent, rgba(240, 197, 103, 0.42));
  transform-origin: 100% 50%;
}
.seam-line-r {
  background: linear-gradient(90deg, rgba(240, 197, 103, 0.42), transparent);
  transform-origin: 0 50%;
}
.seam-dial {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.seam-dial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(240, 197, 103, 0.7);
}
.seam-dial::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: #f0c567;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(240, 197, 103, 0.9);
}
[data-fx='line'] {
  transform-origin: 0 50%;
}

/* Section outro: progressive enhancement, compositor-driven, opacity and
   transform only. Browsers without scroll-driven animations skip it. */
@supports (animation-timeline: view()) {
  [data-outro] {
    animation: ma-outro linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  .hero-grid[data-outro] {
    animation-range: exit 45% exit 100%;
  }
}

/* Orbit wheels: a fixed layer, direct child of <body> before .page (so .page's
   content stacks above it and no containing-block question arises). JS drives
   its opacity and the wheels' rotation from scroll; with JS off or reduced
   motion it is simply not shown. lvh (vh fallback first) so the iOS URL bar
   doesn't move the wheels. */
.orbit {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.js .orbit {
  opacity: 0;
  visibility: hidden;
}
.no-js .orbit {
  display: none;
}
.orbit-wheel {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.orbit-a {
  left: -26vw;
  top: 38vh;
  top: 38lvh;
  width: 52vw;
  height: 52vw;
  border: 1px dashed rgba(240, 197, 103, 0.12);
}
.orbit-a i {
  position: absolute;
  top: -3px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0c567;
  box-shadow: 0 0 12px #f0c567;
  opacity: 0.55;
}
.orbit-b {
  right: -30vw;
  top: 58vh;
  top: 58lvh;
  width: 60vw;
  height: 60vw;
  border: 1px solid rgba(168, 148, 255, 0.1);
}
.orbit-b i {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(168, 148, 255, 0.3) 0deg 0.5deg,
    transparent 0.5deg 15deg
  );
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px));
  mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 8px));
}

/* Footer dial (decoration only; paused off-screen by landing.js). */
.footer-edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffdf9b, #9b8cff, transparent);
  background-size: 200% 100%;
  animation: ma-stream 9s linear infinite;
  opacity: 0.7;
}
.footer-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.footer-decor > * {
  position: absolute;
  left: 50%;
  border-radius: 50%;
}
.fd-glow {
  top: -14px;
  width: 1200px;
  height: 1200px;
  margin-left: -600px;
  background: radial-gradient(
    circle,
    rgba(74, 56, 140, 0) 44%,
    rgba(74, 56, 140, 0.26) 48%,
    rgba(10, 8, 18, 0) 60%
  );
}
.fd-ring {
  top: 36px;
  width: 1100px;
  height: 1100px;
  margin-left: -550px;
  border: 1px dashed rgba(240, 197, 103, 0.22);
  animation: ma-spin 140s linear infinite;
}
.fd-ring i {
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0c567;
  box-shadow:
    0 0 16px #f0c567,
    0 0 40px rgba(240, 197, 103, 0.5);
}
.fd-ticks {
  top: 176px;
  width: 820px;
  height: 820px;
  margin-left: -410px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(168, 148, 255, 0.45) 0deg 0.5deg,
    transparent 0.5deg 6deg
  );
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 14px), #000 calc(50% - 13px));
  mask: radial-gradient(circle, transparent calc(50% - 14px), #000 calc(50% - 13px));
  animation: ma-spin-rev 90s linear infinite;
  opacity: 0.7;
}
.fd-inner {
  top: 306px;
  width: 560px;
  height: 560px;
  margin-left: -280px;
  border: 1px solid rgba(168, 148, 255, 0.16);
}
.footer-brand .mark::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(240, 197, 103, 0.5);
  animation: ma-spin-rev 40s linear infinite;
}
.footer.is-offscreen .footer-edge,
.footer.is-offscreen .fd-ring,
.footer.is-offscreen .fd-ticks,
.footer.is-offscreen .footer-brand .mark::before {
  animation-play-state: paused;
}

/* ======================================================================
   v5 hero lighting layer (CHANGES-v5): a looping "living artwork" layer
   between .hero-art and .hero-veil. Pure decoration, aria-hidden, no
   requests; opacity/transform animations only. Every position is a % of
   the artwork, so .hero-plate reproduces .hero-art's size/position at each
   breakpoint (our values, not the handoff's: see landing/README.md).
   The BASE style of every element below is the design's static 0% look
   (soft lights, ring style A shown, nothing moving); the animations are
   applied only under prefers-reduced-motion: no-preference. That is why
   reduced motion, JS-off and old browsers all get the quiet static state
   instead of the global reduced-motion rule's "revert to base" (which would
   have been the loudest state).
   ====================================================================== */
@keyframes ma-eyes {
  0%,
  100% {
    opacity: 0.55;
  }
  9% {
    opacity: 0.95;
  }
  15% {
    opacity: 0.6;
  }
  24% {
    opacity: 1;
  }
  31% {
    opacity: 0.7;
  }
  47% {
    opacity: 0.9;
  }
  58% {
    opacity: 0.5;
  }
  66% {
    opacity: 1;
  }
  74% {
    opacity: 0.65;
  }
  88% {
    opacity: 0.92;
  }
}
@keyframes ma-sigil {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}
@keyframes ma-circle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.97);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.03);
  }
}
@keyframes ma-breathe {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.42;
  }
}
@keyframes ma-embers {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-260px);
  }
}
@keyframes ma-alt-a {
  0%,
  44% {
    opacity: 1;
  }
  50%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ma-alt-b {
  0%,
  44% {
    opacity: 0;
  }
  50%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ma-sway {
  0%,
  100% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(8px);
  }
}

.hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* A size container so cqw/cqh inside refer to the hero's own box (the same
     width as .page and the same box .hero-art covers). */
  container-type: size;
}
/* Mobile: mirrors .hero-art's  center top / min(380cqw, 1482px) auto.
   The image is 1920x1081, so the aspect ratio is 1920/1081 (not 16/9). */
.hero-plate {
  position: absolute;
  aspect-ratio: 1920 / 1081;
  width: min(380cqw, 1482px);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
/* Desktop: mirrors .hero-art { background-size: cover; background-position:
   calc(50% + 22cqw) 50% } and its left-edge fade. Named container query on
   .page (not a viewport media query: the scrollbar makes the two disagree by
   ~15px, and an unnamed @container here would query .hero-fx instead of
   .page). The 22cqw must match .hero-art's. */
@container page (min-width: 880px) {
  .hero-fx {
    -webkit-mask-image: linear-gradient(90deg, transparent 14%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 14%, #000 52%);
  }
  .hero-plate {
    width: max(100cqw, calc(100cqh * 1920 / 1081));
    top: 50%;
    transform: translate(calc(-50% + 22cqw), -50%);
  }
}

.hero-plate > *,
.hf-hand > .hf-spin {
  position: absolute;
}
.hf-ambient {
  left: 30%;
  top: 12%;
  width: 40%;
  height: 60%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(130, 100, 235, 0.5) 0%,
    rgba(90, 70, 200, 0.18) 42%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.16;
}
.hf-hand {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(150, 120, 255, 0.6) 0%,
    rgba(100, 80, 230, 0.22) 45%,
    transparent 68%
  );
  mix-blend-mode: screen;
  opacity: 0.3;
  transform: scale(0.97);
}
.hf-hand-l {
  left: 23.3%;
  top: 26.6%;
  width: 17%;
}
.hf-hand-r {
  left: 61.3%;
  top: 12.7%;
  width: 16%;
}
.hf-spin {
  inset: 11%;
  border-radius: 50%;
}
.hf-alt-a,
.hf-alt-b {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Ring style A: violet twin arc. Style B: thinner gold-to-white comet tail.
   Static state shows A only; the animation cross-fades them. */
.hf-alt-a {
  background: conic-gradient(
    from 0deg,
    transparent 0% 22%,
    rgba(200, 185, 255, 0.95) 42%,
    transparent 50% 72%,
    rgba(200, 185, 255, 0.95) 92%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%, #000 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 45%, #000 46%, #000 50%, transparent 51%);
}
.hf-alt-b {
  background: conic-gradient(
    from 0deg,
    transparent 0% 55%,
    rgba(240, 200, 120, 0.55) 78%,
    rgba(255, 245, 225, 0.95) 96%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 46.5%, #000 47.5%, #000 49%, transparent 50%);
  mask: radial-gradient(circle, transparent 46.5%, #000 47.5%, #000 49%, transparent 50%);
  opacity: 0;
}
.hf-eye {
  top: 18.1%;
  width: 3%;
  height: 2.2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 196, 96, 0.95) 0%,
    rgba(255, 140, 40, 0.4) 38%,
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.55;
}
.hf-eye-l {
  left: 46.7%;
}
.hf-eye-r {
  left: 50.1%;
}
.hf-sigil,
.hf-gem,
.hf-clock {
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.35;
  transform: scale(0.92);
}
.hf-sigil {
  left: 46.4%;
  top: 30.8%;
  width: 7%;
  background: radial-gradient(
    circle,
    rgba(255, 215, 130, 0.9) 0%,
    rgba(240, 160, 60, 0.3) 40%,
    transparent 68%
  );
}
.hf-gem {
  left: 47.7%;
  top: 44.1%;
  width: 3%;
  background: radial-gradient(
    circle,
    rgba(255, 170, 90, 0.9) 0%,
    rgba(230, 110, 40, 0.3) 40%,
    transparent 68%
  );
}
.hf-clock {
  left: 47.5%;
  top: -1.6%;
  width: 5%;
  background: radial-gradient(
    circle,
    rgba(255, 215, 130, 0.8) 0%,
    rgba(240, 160, 60, 0.25) 40%,
    transparent 68%
  );
}
.hf-embers {
  left: 10%;
  top: 46%;
  width: 80%;
  height: 54%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 90%, transparent 100%);
  mix-blend-mode: screen;
}
.hf-sway {
  position: absolute;
  inset: -12px;
  transform: translateX(-8px);
}
.hf-tile {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 260px);
  background-size: 260px 260px;
}
.hf-tile-1 {
  background-image:
    radial-gradient(
      circle at 18% 22%,
      rgba(255, 215, 150, 1) 0 1.8px,
      rgba(255, 170, 80, 0.35) 3px,
      transparent 6px
    ),
    radial-gradient(
      circle at 64% 71%,
      rgba(255, 185, 105, 1) 0 1.5px,
      rgba(255, 150, 60, 0.3) 2.6px,
      transparent 5px
    ),
    radial-gradient(
      circle at 86% 38%,
      rgba(255, 230, 180, 1) 0 1.6px,
      rgba(255, 190, 100, 0.3) 2.8px,
      transparent 5.5px
    ),
    radial-gradient(
      circle at 40% 88%,
      rgba(255, 170, 90, 0.95) 0 1.3px,
      rgba(255, 140, 60, 0.3) 2.4px,
      transparent 4.5px
    ),
    radial-gradient(circle at 30% 52%, rgba(255, 200, 130, 0.9) 0 1.1px, transparent 2px);
}
.hf-tile-2 {
  background-image:
    radial-gradient(circle at 52% 14%, rgba(255, 200, 120, 0.85) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 9% 63%, rgba(240, 160, 90, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 76% 92%, rgba(255, 215, 150, 0.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 24% 36%, rgba(255, 180, 100, 0.7) 0 0.9px, transparent 1.6px);
  background-position:
    0 0,
    120px 60px,
    40px 180px,
    200px 110px;
}

/* The motion: only when the user has not asked for less of it. */
@media (prefers-reduced-motion: no-preference) {
  .hf-ambient {
    animation: ma-breathe 8s ease-in-out infinite;
  }
  .hf-hand-l {
    animation: ma-circle 5.6s ease-in-out infinite;
  }
  .hf-hand-r {
    animation: ma-circle 6.4s -3s ease-in-out infinite;
  }
  .hf-hand-l .hf-spin {
    animation: ma-spin 13s linear infinite;
  }
  .hf-hand-r .hf-spin {
    animation: ma-spin-rev 16s linear infinite;
  }
  /* The A/B cross-fade is exactly 2x the ring's spin, so the ring looks one
     way on odd rotations and the other on even ones. */
  .hf-hand-l .hf-alt-a {
    animation: ma-alt-a 26s linear infinite;
  }
  .hf-hand-l .hf-alt-b {
    animation: ma-alt-b 26s linear infinite;
  }
  .hf-hand-r .hf-alt-a {
    animation: ma-alt-a 32s linear infinite;
  }
  .hf-hand-r .hf-alt-b {
    animation: ma-alt-b 32s linear infinite;
  }
  .hf-eye {
    animation: ma-eyes 4.7s linear infinite;
  }
  .hf-sigil {
    animation: ma-sigil 3.8s ease-in-out infinite;
  }
  .hf-gem {
    animation: ma-sigil 3.8s -1.9s ease-in-out infinite;
  }
  .hf-clock {
    animation: ma-sigil 7s -2s ease-in-out infinite;
  }
  .hf-sway-1 {
    animation: ma-sway 9s ease-in-out infinite;
  }
  .hf-sway-2 {
    animation: ma-sway 12s -5s ease-in-out infinite;
  }
  .hf-tile-1 {
    animation: ma-embers 15s linear infinite;
  }
  .hf-tile-2 {
    animation: ma-embers 24s linear infinite;
  }
}
/* Paused (by landing.js) while the hero is off-screen. */
.hero.is-offscreen .hero-fx,
.hero.is-offscreen .hero-fx * {
  animation-play-state: paused;
}