.error-boundary {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: clamp(24px, 6vw, 80px);
  color: #f8f5ff;
  background: radial-gradient(circle at 50% 25%, rgba(119, 72, 255, 0.2), transparent 42%), #030611;
}

.error-boundary-card {
  width: min(620px, 100%);
  padding: clamp(30px, 6vw, 64px);
  text-align: center;
  background: rgba(13, 16, 31, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.error-boundary-eyebrow {
  margin: 0 0 22px;
  color: #9dff63;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.error-boundary h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
}

.error-boundary-body {
  max-width: 480px;
  margin: 22px auto 0;
  color: rgba(248, 245, 255, 0.72);
  font-size: 17px;
  line-height: 1.7;
}

.error-boundary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.error-boundary-actions button {
  min-width: 148px;
  min-height: 50px;
  padding: 0 24px;
  color: #071006;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  background: #9dff63;
  border: 1px solid #9dff63;
  border-radius: 999px;
}

.error-boundary-actions .error-boundary-secondary {
  color: #f8f5ff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
}

.error-boundary-actions button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

:root {
  --bg: #000000;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.82);
  --line: rgba(255, 255, 255, 0.18);
  --violet: #7e49ff;
  --ticker: rgba(58, 12, 126, 0.92);
  --green: #66f2a9;
  --font-sans:
    "Inter Variable", "Noto Sans SC Variable", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:
    "Playfair Display Variable", "Noto Serif SC Variable", ui-serif, Georgia, "Times New Roman",
    serif;
  --marketing-intro-title-size: clamp(28px, 3.1944vw, 46px);
  --marketing-intro-title-line-height: 1.12;
  --marketing-intro-copy-size: clamp(15.7px, 1.8056vw, 26px);
  --marketing-intro-copy-line-height: 1.35;
  --marketing-intro-cta-font-size: clamp(12px, 1vw, 14.4px);
  --marketing-intro-cta-min-width: clamp(104px, 8.8194vw, 127px);
  --marketing-intro-cta-min-height: clamp(34px, 2.8472vw, 41px);
  --marketing-intro-cta-pad-x: clamp(18px, 1.5278vw, 22px);
  --marketing-intro-cta-margin-top: clamp(18px, 1.6667vw, 24px);
  /* Nav chrome actions. The menu label (left) and the login button (right)
     read from the same three tokens so they always resolve to one size and
     one baseline; the login button is the reference. 1.15 is the +15% bump. */
  --chrome-action-font-size: calc(14px * 1.15);
  --chrome-action-line-height: 1.5;
  --chrome-menu-icon-size: calc(15px * 1.15);
}

* {
  box-sizing: border-box;
}

@property --chip-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --interest-left-offset {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --interest-right-offset {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -16.6666667%;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-synthesis: none;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app {
  min-height: 100vh;
  overflow-x: clip;
  background: #000000;
}

@supports (height: 100dvh) {
  .app,
  .app-home-layer,
  .app-page-layer,
  .route-loading {
    min-height: 100dvh;
  }
}

.app-home-layer,
.app-page-layer {
  min-height: 100vh;
}

[inert] {
  pointer-events: none;
  user-select: none;
}

[data-page-background][aria-hidden="true"] {
  pointer-events: none;
  user-select: none;
}

.app-home-layer[aria-hidden="true"] :is(.interest-marquee, .interest-chip) {
  animation-play-state: paused;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 999px;
  color: #07111f;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transform: translateY(calc(-100% - 24px));
  transition: transform 160ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.route-loading {
  display: grid;
  min-height: 100vh;
  place-items: center;
  color: rgba(255, 255, 255, 0.86);
  background: #000000;
  font-size: 14px;
  letter-spacing: 0.04em;
}

:is(#nvidia-insight-title, #follow-title, #footer) {
  scroll-margin-top: 120px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #70e0ff;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@property --theme-split-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

.theme-split-experience {
  --theme-split-x: 100%;
  --split-control-bar-height: 58px;
  --split-chrome-height: 112px;
  /* 0 = the chrome's second nav row is down, 1 = rolled up under the control
     bar. ThemeSplitExperience writes it inline from scroll travel. */
  --split-nav-collapse: 0;
  --split-nav-row-height: calc(var(--split-chrome-height) - var(--split-control-bar-height));
  --theme-split-control-offset: calc(
    var(--split-chrome-height) - var(--split-nav-row-height) * var(--split-nav-collapse)
  );
  --interest-left-offset: 0%;
  --interest-right-offset: -16.6666667%;
  --theme-light-surface: #ffffff;

  position: relative;
  overflow: clip;
  isolation: isolate;
  background: #000;
  transition: --theme-split-x 0s linear;
}

.theme-split-snap-animating {
  transition: --theme-split-x 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-layer {
  --growth-surface: #000000;
  --theme-ink: #ffffff;
  --theme-muted: rgba(255, 255, 255, 0.76);
  --theme-muted-strong: rgba(255, 255, 255, 0.9);
  --theme-soft: rgba(255, 255, 255, 0.66);
  --theme-line: rgba(255, 255, 255, 0.18);
  --theme-control-bg: rgba(4, 6, 14, 0.86);
  --theme-control-border: rgba(255, 255, 255, 0.12);
  --theme-nav-bg: rgba(4, 6, 14, 0.46);
  --theme-ticker: rgba(58, 12, 126, 0.92);
  --theme-button-bg: #ffffff;
  --theme-button-ink: #080810;
  --theme-copy-shadow: 0 20px 52px rgba(0, 0, 0, 0.62);
  --theme-card-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  --theme-panel-overlay: rgba(3, 16, 30, 0.6);
  --theme-chip-bg: #f6fcff;
  --theme-chip-ink: #2e3442;
  --theme-nvidia-mask: linear-gradient(66deg, #000 8.54%, rgba(0, 0, 0, 0) 90.66%);
  --theme-footer-bg: #000;
  --theme-asset-filter: none;
  --theme-logo-filter: none;
  --theme-video-filter: brightness(0.9) contrast(1.08) saturate(0.95);

  color: var(--theme-ink);
  background: var(--growth-surface);
}

.theme-rest-layers {
  position: relative;
  background: linear-gradient(
    90deg,
    #000 0 var(--theme-split-x),
    var(--theme-light-surface) var(--theme-split-x) 100%
  );
}

.theme-layer-single {
  position: relative;
  z-index: 1;
}

/* Home only: start one hero frame early, under the hero's fading sticky
   frame, so the growth preview's sticky hold takes over the moment the
   hero's pin lets go — no section slides. */
.theme-split-after-hero {
  margin-top: calc(-1 * var(--hero-frame-height));
}

@media (prefers-reduced-motion: reduce) {
  .theme-split-after-hero {
    margin-top: 0;
  }
}

.theme-split-control {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.theme-split-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  pointer-events: none;
}

.theme-split-line {
  position: absolute;
  top: var(--theme-split-control-offset);
  bottom: 0;
  left: var(--theme-split-x);
  width: 3px;
  background: #f7e7ce;
  transform: translateX(-50%);
}

.theme-split-hit {
  --theme-split-handle-y: 50%;

  position: absolute;
  top: var(--theme-split-control-offset);
  bottom: 0;
  left: var(--theme-split-x);
  width: 96px;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
  transform: translateX(-50%);
}

.theme-split-snapped-left .theme-split-hit {
  transform: translateX(0);
}

.theme-split-snapped-right .theme-split-hit {
  transform: translateX(-100%);
}

.theme-split-hit:focus-visible {
  outline: none;
}

.theme-split-hit:focus-visible .theme-split-handle {
  border-radius: 999px;
  opacity: 1;
  outline: 3px solid #70e0ff;
  outline-offset: 4px;
  transform: translate(-50%, -50%) scale(1);
}

@media (forced-colors: active) {
  .theme-split-hit:focus-visible .theme-split-handle {
    outline-color: Highlight;
  }
}

.theme-split-edge-badge {
  position: absolute;
  top: 50%;
  display: flex;
  height: 37px;
  align-items: center;
  background: rgba(26, 30, 38, 0.92);
  border: 1px solid #22262f;
  box-shadow: 0 11px 25px rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-split-edge-badge-left {
  left: 0;
  padding: 2px 3px 2px 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  border-left: 0;
  justify-content: flex-end;
  transform: translate(-100%, -50%);
}

.theme-split-edge-badge-right {
  right: 0;
  padding: 2px 10px 2px 3px;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  justify-content: flex-start;
  transform: translate(100%, -50%);
}

.theme-split-edge-disc {
  display: flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: #11131a;
  background: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-split-edge-disc svg {
  display: block;
  width: 19px;
  height: 19px;
}

.theme-split-snapped-left .theme-split-edge-badge-left {
  opacity: 1;
  transform: translate(0, -50%);
}

.theme-split-snapped-right .theme-split-edge-badge-right {
  opacity: 1;
  transform: translate(0, -50%);
}

.theme-split-snapped-left .theme-split-line,
.theme-split-snapped-right .theme-split-line {
  opacity: 0;
}

.theme-split-line {
  transition: opacity 200ms ease;
}

.theme-split-handle {
  position: absolute;
  top: var(--theme-split-handle-y, 50%);
  left: 50%;
  display: flex;
  width: 96px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
}

.theme-split-handle-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.theme-split-handle-arrow {
  fill: #333333;
  stroke: #ffffff;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease;
  vector-effect: non-scaling-stroke;
  will-change: transform;
}

.theme-split-handle-arrow-left {
  transform-origin: right center;
}

.theme-split-handle-arrow-right {
  transform-origin: left center;
}

.theme-split-hit[data-drag-direction="left"] .theme-split-handle-arrow-left {
  transform: scaleX(1.34) scaleY(1.1);
}

.theme-split-hit[data-drag-direction="left"] .theme-split-handle-arrow-right {
  opacity: 0.72;
  transform: scaleX(0.9) scaleY(0.96);
}

.theme-split-hit[data-drag-direction="right"] .theme-split-handle-arrow-left {
  opacity: 0.72;
  transform: scaleX(0.9) scaleY(0.96);
}

.theme-split-hit[data-drag-direction="right"] .theme-split-handle-arrow-right {
  transform: scaleX(1.34) scaleY(1.1);
}

.theme-split-dragging .theme-split-handle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 140ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-split-dragging,
.theme-split-dragging * {
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-split-line,
  .theme-split-handle,
  .theme-split-handle-arrow {
    transition: none;
  }
}

@media (max-width: 560px) {
  .theme-split-sticky {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .theme-split-line {
    width: 2px;
  }

  .theme-split-hit {
    top: calc(25vh - 34px);
    top: calc(25dvh - 34px);
    bottom: auto;
    width: 74px;
    height: 68px;
  }

  .theme-split-edge-badge {
    top: 25vh;
    top: 25dvh;
  }

  .theme-split-handle {
    top: 50%;
    width: 74px;
    height: 26px;
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.78);
  }

  .theme-split-snapped-left .theme-split-handle,
  .theme-split-snapped-right .theme-split-handle {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.56);
  }

  .theme-split-dragging .theme-split-handle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Pinned hero frame height, shared with the theme-split overlap and the
   growth preview's hand-off hold so all three agree (620px floor included). */
:root {
  --hero-frame-height: max(100vh, 620px);
}

@supports (height: 100dvh) {
  :root {
    --hero-frame-height: max(100dvh, 620px);
  }
}

.sequence-section {
  position: relative;
  min-height: 500vh;
  /* Pure black like the section that follows: it shows through while the
     frame fades, and any tint would draw a faint seam. */
  background: #000;
}

.phase-scroll-space {
  position: relative;
  height: 400vh;
  pointer-events: none;
}

.phase-target {
  position: absolute;
  left: 0;
  display: block;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.phase-target-25 {
  top: 0;
}

.phase-target-50 {
  top: 100vh;
}

.phase-target-75 {
  top: 200vh;
}

.sequence-sticky {
  position: sticky;
  top: 0;
  /* Above the theme-split section tucked under this frame, so the frame
     covers it while fading to black. Overlays (menu, login) sit far higher. */
  z-index: 5;
  height: var(--hero-frame-height);
  overflow: hidden;
  background: #010204;
}

.sequence-sticky::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(3, 6, 17, 0.16) 0%, rgba(3, 6, 17, 0) 42%),
    linear-gradient(
      90deg,
      rgba(3, 6, 17, 0.64) 0%,
      rgba(3, 6, 17, 0.1) 42%,
      rgba(3, 6, 17, 0.44) 100%
    ),
    radial-gradient(circle at 50% 68%, rgba(152, 174, 210, 0.05), transparent 46%);
}

.earth-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background: #010204;
}

.earth-canvas-shell {
  position: absolute;
  inset: 0;
}

.earth-canvas-shell {
  z-index: 2;
}

.earth-canvas-shell > div,
.earth-canvas-shell canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.star-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.82;
  background-image:
    radial-gradient(circle at 7% 18%, rgba(255, 255, 255, 0.7) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 18% 43%, rgba(255, 255, 255, 0.58) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 27% 15%, rgba(255, 255, 255, 0.42) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 39% 7%, rgba(255, 255, 255, 0.62) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 58% 26%, rgba(255, 255, 255, 0.48) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 72% 19%, rgba(255, 255, 255, 0.66) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 87% 37%, rgba(255, 255, 255, 0.54) 0 0.7px, transparent 1.6px),
    radial-gradient(circle at 93% 71%, rgba(255, 255, 255, 0.58) 0 0.8px, transparent 1.7px);
  background-size:
    347px 263px,
    421px 337px,
    509px 383px,
    593px 431px,
    683px 509px,
    751px 571px,
    821px 619px,
    907px 677px;
}

.star-layer::before {
  position: absolute;
  top: 43%;
  left: 15.3%;
  width: 4px;
  height: 4px;
  content: "";
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 7px 2px rgba(255, 255, 255, 0.78),
    0 0 22px 6px rgba(166, 193, 228, 0.26);
}

.star-layer::after {
  position: absolute;
  top: calc(43% - 11px);
  left: calc(15.3% - 11px);
  width: 26px;
  height: 26px;
  content: "";
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.72) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, 0.46) 50%, transparent 53%);
  opacity: 0.68;
  transform: rotate(45deg);
}

.intro-header,
.data-chrome,
.final-brand {
  position: absolute;
  z-index: 20;
}

.intro-header {
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 126px;
  padding: 28px 42px;
  background: transparent;
}

.data-chrome {
  top: 0;
  right: 0;
  left: 0;
}

.final-brand {
  top: 64px;
  left: 64px;
}

@media (prefers-reduced-motion: reduce) {
  .sequence-section {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .phase-scroll-space {
    display: none;
  }

  .sequence-sticky {
    position: relative;
  }

  .data-chrome,
  .final-brand,
  .scroll-cue,
  .phase-copy:not(.phase-copy-intro) {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
}

.brand-mark {
  position: relative;
  display: inline-grid;
  width: clamp(48px, 4.8vw, 66px);
  height: clamp(48px, 4.8vw, 66px);
  flex: 0 0 auto;
  place-items: center;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  place-items: center;
}

.icon-button img {
  display: block;
}

.language-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: visible;
  border-radius: 50%;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease,
    opacity 220ms ease;
}

.language-toggle:hover {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.24));
  transform: translateY(-1px);
}

.language-toggle:active {
  transform: scale(0.92);
}

.language-icon-wrap {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  transform-origin: center;
  animation: language-swap 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.language-icon-wrap svg {
  display: block;
  width: 32px;
  height: 32px;
}

.login-button,
.primary-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--theme-button-ink, #07101f);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  background: var(--theme-button-bg, #f8fbff);
  border: 1px solid var(--theme-line, rgba(255, 255, 255, 0.72));
  border-radius: 4px;
}

/* The rule above is shared layout only. Size is declared per selector so the
   hero CTA can never pick up a nav-chrome size by source order alone. */
.login-button {
  font-size: var(--chrome-action-font-size);
  line-height: var(--chrome-action-line-height);
}

.primary-link {
  font-size: 14px;
}

.control-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 58px;
  padding: 0 28px;
  background: var(--theme-control-bg, rgba(4, 6, 14, 0.72));
  border-bottom: 1px solid var(--theme-control-border, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.control-bar-title {
  padding: 0;
  color: var(--theme-ink, #f3f5ff);
  max-width: min(100%, 680px);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 850;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.control-bar .top-actions {
  justify-self: end;
  gap: 12px;
}

.menu-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-ink, #f3f5ff);
  font-size: var(--chrome-action-font-size);
  line-height: var(--chrome-action-line-height);
  font-weight: 850;
  min-width: 0;
}

.menu-trigger {
  width: max-content;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.menu-trigger:hover {
  color: #ffffff;
}

.menu-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.84);
  outline-offset: 5px;
}

.menu-icon {
  display: block;
  width: var(--chrome-menu-icon-size);
  height: var(--chrome-menu-icon-size);
  flex: 0 0 auto;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring, #2f7cff);
  outline-offset: 3px;
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: #c73c4b;
}

:where(input, select, textarea)[aria-invalid="true"]:focus-visible {
  outline-color: #c73c4b;
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
}

.auth-page {
  --theme-ink: #ffffff;
  --theme-muted: rgba(255, 255, 255, 0.76);
  --theme-muted-strong: rgba(255, 255, 255, 0.9);
  --theme-line: rgba(255, 255, 255, 0.18);
  --theme-control-bg: rgba(4, 6, 14, 0.94);
  --theme-control-border: rgba(255, 255, 255, 0.12);
  --theme-button-bg: #ffffff;
  --theme-button-ink: #080810;
  --focus-ring: #2f6fed;

  position: fixed;
  inset: 0;
  z-index: 160;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
  color: #07111f;
  color-scheme: light;
  background: #ffffff;
  animation: auth-sheet-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.auth-page-closing {
  pointer-events: none;
  animation: auth-sheet-out 320ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.auth-shell {
  display: grid;
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  grid-template-columns: minmax(0, 60%) minmax(430px, 40%);
}

.auth-visual {
  position: relative;
  display: flex;
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  padding: clamp(72px, 9.3vw, 150px);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #120023;
}

.auth-visual img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-visual-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, #130024 0%, rgba(13, 0, 36, 0.8) 50%, rgba(14, 0, 36, 0) 100%),
    rgba(19, 0, 36, 0.48);
}

.auth-visual-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  text-align: left;
}

.auth-control-bar .control-bar-title {
  color: #ffffff;
}

.auth-control-bar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.auth-top-close {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: #ffffff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  place-items: center;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.auth-top-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.38);
}

.auth-top-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.auth-top-close svg {
  display: block;
  width: 18px;
  height: 18px;
}

.auth-top-close path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.auth-visual-copy h1 {
  margin: 0;
  font-size: clamp(38px, 3.35vw, 60px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: 0;
}

.auth-visual-copy h1 span {
  display: block;
}

.auth-visual-copy h1 span:first-child {
  white-space: nowrap;
}

.auth-title-cn {
  max-width: 660px;
  margin: 0;
  font-size: 0.86em;
  text-wrap: balance;
}

.auth-visual-copy p {
  max-width: 640px;
  margin: 32px 0 0;
  color: rgba(175, 207, 255, 0.82);
  font-size: clamp(18px, 1.25vw, 23px);
  font-weight: 700;
  line-height: 1.55;
  text-wrap: balance;
}

.auth-visual-copy > p span {
  display: block;
  white-space: nowrap;
}

.auth-visual-copy blockquote {
  width: fit-content;
  margin: 48px 0 0;
  padding-left: 28px;
  border-left: 3px solid #22a36c;
  text-align: left;
}

.auth-visual-copy blockquote p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(18px, 1.16vw, 22px);
  font-weight: 500;
}

.auth-visual-copy cite {
  display: block;
  margin-top: 8px;
  color: #20a96b;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}

.auth-panel {
  position: relative;
  display: flex;
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  padding: clamp(52px, 6vw, 96px) clamp(44px, 7vw, 112px);
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.auth-card {
  width: min(100%, 420px);
}

.auth-card h2 {
  margin: 0;
  color: #07111f;
  font-size: clamp(28px, 2vw, 36px);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: 0;
}

.auth-subtitle {
  margin: 10px 0 0;
  color: rgba(7, 17, 31, 0.72);
  font-size: 17px;
  font-weight: 700;
}

.auth-tabs {
  display: flex;
  gap: 28px;
  margin-top: 42px;
  border-bottom: 1px solid rgba(7, 17, 31, 0.08);
}

.auth-tabs button {
  position: relative;
  padding: 0 0 16px;
  color: rgba(7, 17, 31, 0.66);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.auth-tabs .auth-tab-active {
  color: #07111f;
}

.auth-tabs .auth-tab-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: #07111f;
}

.auth-tabs button[aria-selected="true"] {
  color: #07111f;
}

.auth-form {
  display: grid;
  gap: 22px;
  margin-top: 36px;
}

.auth-field {
  display: grid;
  gap: 10px;
}

.auth-field-label {
  color: rgba(7, 17, 31, 0.68);
  font-size: 14px;
  font-weight: 800;
}

.auth-input-wrap {
  display: flex;
  height: 58px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: #f1f2f4;
  border-radius: 4px;
  border: 1px solid transparent;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.auth-input-wrap:focus-within {
  border-color: rgba(47, 111, 237, 0.72);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.13);
}

.auth-input-wrap svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: #8a9099;
}

.auth-input-wrap svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-input-wrap input {
  min-width: 0;
  flex: 1;
  color: #07111f;
  font-size: 15px;
  background: transparent;
  border: 0;
  outline: 0;
}

.auth-input-wrap input::placeholder {
  color: #a8aeb8;
}

.auth-input-wrap input:focus-visible {
  outline: 0;
}

.auth-required-mark {
  color: #b3293b;
}

.auth-field-error {
  color: #b3293b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.auth-field-invalid .auth-input-wrap {
  border-color: rgba(179, 41, 59, 0.78);
}

.auth-eye {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  place-items: center;
}

.auth-eye svg {
  width: 25px;
  height: 17px;
}

.auth-eye svg * {
  fill: #74777f;
  stroke: none;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: end;
}

.auth-code-row > button {
  height: 58px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  background: #001329;
  border: 0;
  border-radius: 4px;
}

.auth-check {
  display: flex;
  min-height: 22px;
  align-items: center;
  gap: 10px;
  color: rgba(7, 17, 31, 0.68);
  font-size: 14px;
  font-weight: 700;
}

.auth-check-group {
  display: grid;
  gap: 7px;
}

.auth-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #001329;
}

.auth-check a {
  color: #b88a1d;
}

.auth-check > a {
  margin-left: auto;
  color: #07111f;
}

.auth-check-login-en {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
  line-height: 1.25;
}

.auth-check-login-en input {
  margin-top: 1px;
}

.auth-check-login-en > a {
  grid-column: 2;
  margin-left: 0;
  justify-self: start;
}

.auth-submit {
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
  background: #001329;
  border: 0;
  border-radius: 4px;
}

.auth-submit-arrow {
  width: 13px;
  height: 10px;
  flex: 0 0 13px;
}

.auth-divider {
  height: 1px;
  margin: 46px 0 38px;
  background: rgba(7, 17, 31, 0.08);
}

.auth-google {
  display: inline-flex;
  width: 100%;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #1d2632;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid rgba(7, 17, 31, 0.1);
  border-radius: 4px;
}

.auth-google svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.auth-footer {
  margin-top: clamp(56px, 8vh, 96px);
  color: rgba(7, 17, 31, 0.38);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.auth-footer p {
  margin: 0 0 8px;
}

.auth-footer nav {
  display: flex;
  justify-content: center;
  gap: 14px;
}

@keyframes auth-sheet-in {
  from {
    transform: translate3d(0, -104%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes auth-sheet-out {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -104%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page,
  .auth-page-closing {
    animation-duration: 1ms;
  }
}

@media (max-width: 1080px) and (min-width: 881px) {
  .auth-shell {
    grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr);
  }

  .auth-visual {
    padding: 54px 38px;
  }

  .auth-visual-copy > p span {
    white-space: normal;
  }

  .auth-panel {
    padding: 44px 34px 58px;
  }

  .auth-card {
    width: min(100%, 390px);
  }
}

@media (max-width: 880px) {
  .auth-page {
    overflow-x: hidden;
  }

  .auth-shell {
    min-height: calc(100vh - 58px);
    min-height: calc(100dvh - 58px);
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    min-height: calc(100vh - 58px);
    min-height: calc(100dvh - 58px);
    padding: 42px 20px 58px;
    align-items: flex-start;
  }

  .auth-card {
    width: min(100%, 420px);
  }

  .auth-top-close {
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    place-items: center;
  }

  .auth-card h2 {
    font-size: clamp(24px, 6.7vw, 28px);
    line-height: 1.16;
    text-wrap: balance;
  }

  .auth-tabs {
    margin-top: 30px;
  }

  .auth-form {
    gap: 18px;
    margin-top: 28px;
  }

  .auth-input-wrap {
    height: 54px;
  }

  .auth-code-row > button {
    height: 54px;
  }

  .auth-check {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: start;
    line-height: 1.35;
  }

  .auth-check input {
    margin-top: 1px;
  }

  .auth-check > a {
    margin-left: 10px;
  }

  .auth-divider {
    margin: 34px 0 28px;
  }
}

@media (max-height: 700px) and (orientation: landscape) {
  .auth-panel,
  .auth-visual {
    min-height: calc(100vh - 58px);
    min-height: calc(100dvh - 58px);
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 36px;
  }

  .auth-tabs {
    margin-top: 24px;
  }

  .auth-form {
    gap: 14px;
    margin-top: 22px;
  }

  .auth-input-wrap,
  .auth-code-row > button {
    height: 50px;
  }

  .auth-divider {
    margin: 26px 0 22px;
  }

  .auth-footer {
    margin-top: 34px;
  }
}

@media (max-width: 420px) {
  .auth-panel {
    padding: 34px 18px 52px;
  }

  .auth-check {
    grid-template-columns: 16px minmax(0, 1fr);
    row-gap: 8px;
  }

  .auth-check > a {
    grid-column: 2;
    margin-left: 0;
    justify-self: start;
  }
}

.breadcrumb {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 28px;
  color: var(--theme-muted-strong, rgba(255, 255, 255, 0.92));
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 500;
  background: var(--theme-nav-bg, rgba(4, 6, 14, 0.46));
  border-bottom: 1px solid var(--theme-control-border, rgba(255, 255, 255, 0.08));
}

.breadcrumb a:not(:last-child)::after {
  margin-left: 12px;
  color: var(--theme-soft, rgba(255, 255, 255, 0.62));
  content: "|";
}

.tradingview-ticker {
  width: 100%;
  min-width: 0;
}

.tradingview-ticker .tradingview-widget-container,
.tradingview-ticker .tradingview-widget-container__widget {
  width: 100%;
  min-width: 0;
}

.mega-menu-page {
  --menu-bg: #111111;
  --menu-ink: #f7f7f7;
  --menu-muted: rgba(255, 255, 255, 0.72);
  --menu-soft: rgba(255, 255, 255, 0.5);
  --menu-line: rgba(255, 255, 255, 0.14);
  --menu-blue: #168bff;
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--menu-ink);
  color-scheme: dark;
  background: var(--menu-bg);
  animation: mega-menu-slide-in 860ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.mega-menu-page button,
.mega-menu-page input {
  font-family: inherit;
}

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

.mega-menu-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 144px;
  padding: 38px 46px 28px;
  border-bottom: 1px solid var(--menu-line);
}

.mega-menu-close {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  appearance: none;
  color: #ffffff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  line-height: 0;
  place-items: center;
  -webkit-appearance: none;
}

.mega-menu-close svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.mega-menu-close path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.mega-menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mega-menu-close:disabled {
  cursor: default;
}

.mega-menu-brand {
  max-width: min(100%, 720px);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  color: #ffffff;
  font-size: 58px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.mega-menu-login {
  justify-self: end;
  min-width: 94px;
}

.mega-menu-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  border-bottom: 1px solid var(--menu-line);
}

.mega-menu-main {
  min-width: 0;
}

.mega-menu-search {
  position: relative;
  display: flex;
  width: min(640px, calc(100% - 92px));
  height: 68px;
  margin: 34px 46px 46px;
  overflow: visible;
  color: #111111;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
}

.mega-menu-search-control {
  display: grid;
  min-width: 0;
  flex: 1;
  padding: 7px 18px 6px;
  align-content: center;
}

.mega-menu-search-label {
  color: rgba(17, 17, 17, 0.62);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.mega-menu-search input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  color: #222222;
  font-size: 23px;
  background: transparent;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}

.mega-menu-search input::-webkit-search-decoration,
.mega-menu-search input::-webkit-search-cancel-button {
  display: none;
}

.mega-menu-search:focus-within {
  box-shadow: 0 0 0 3px rgba(126, 182, 255, 0.34);
}

.mega-menu-search input:focus-visible {
  outline: 0;
}

.mega-menu-form-error {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  color: #ffadb8;
  font-size: 13px;
  font-weight: 700;
}

.mega-menu-search input::placeholder {
  color: rgba(17, 17, 17, 0.58);
}

.mega-menu-search button {
  display: grid;
  width: 60px;
  flex: 0 0 60px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  place-items: center;
}

.mega-menu-search svg {
  width: 24px;
  height: 24px;
}

.mega-menu-search path {
  fill: none;
  stroke: #111111;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px;
  padding: 40px 46px 72px;
  border-top: 1px solid var(--menu-line);
}

.mega-menu-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 86px;
}

.mega-menu-section h2 {
  display: block;
  margin: 0 0 24px;
  color: #ffffff;
  font-size: 31px;
  font-weight: 780;
  line-height: 1.16;
  text-wrap: balance;
}

/* Inline rather than a flex sibling: when a long category title does wrap, the
   arrow stays on its last line instead of floating beside the whole block. */
.mega-menu-section h2 .menu-arrow-icon {
  margin-left: 12px;
  vertical-align: middle;
}

.mega-menu-section ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

.mega-menu-section a {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
}

.mega-menu-section a:hover,
.mega-menu-footer a:hover,
.menu-subscribe a:hover,
.highlight-card a:hover {
  color: #dfeeff;
}

.menu-inline-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.menu-inline-divider {
  display: block;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.28);
}

.menu-more {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.menu-more .menu-down-icon {
  display: block;
  width: 32px;
  height: 32px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.mega-menu-aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 42px;
  padding: 24px 46px 52px;
  border-left: 1px solid var(--menu-line);
}

.market-card {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  gap: 14px;
  padding-top: 0;
  border-bottom: 1px solid var(--menu-line);
}

.market-card span {
  display: block;
  width: var(--bar-width);
  height: 22px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.05)
    ),
    #252525;
}

.market-card span:nth-child(2) {
  height: 66px;
}

.market-card span:nth-child(3) {
  height: 40px;
}

.highlight-card {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--menu-line);
}

.highlight-card h2 {
  margin: 0 0 34px;
  color: #ffffff;
  font-size: 29px;
  font-weight: 780;
  line-height: 1.18;
}

.highlight-image-link {
  display: block;
  height: 228px;
  overflow: hidden;
  background: #202020;
}

.highlight-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlight-card h3 {
  margin: 22px 0 28px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
}

.highlight-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.highlight-dots {
  display: flex;
  align-items: center;
  gap: 13px;
}

.highlight-dots span {
  display: block;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.highlight-dots .is-active {
  background: var(--menu-blue);
}

.highlight-arrows {
  display: flex;
  gap: 16px;
}

.highlight-arrows button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: 50%;
  place-items: center;
}

.highlight-arrows .menu-arrow-icon {
  width: 17px;
  height: 17px;
}

.highlight-arrows button:disabled {
  cursor: default;
  opacity: 0.3;
}

.menu-subscribe p:first-child {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.menu-subscribe h2 {
  max-width: 520px;
  margin: 0 0 24px;
  color: #ffffff;
  font-size: 36px;
  font-weight: 820;
  line-height: 1.18;
}

.menu-subscribe form {
  display: block;
  margin-bottom: 16px;
}

.menu-subscribe-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 750;
}

.menu-subscribe-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: stretch;
}

.menu-subscribe-error {
  display: block;
  margin-top: 8px;
  color: #ffadb8;
  font-size: 13px;
  font-weight: 700;
}

.menu-subscribe input {
  width: 100%;
  min-height: 62px;
  padding: 0 18px;
  color: #ffffff;
  font-size: 17px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 5px;
  outline: 0;
}

.menu-subscribe input::placeholder {
  color: rgba(255, 255, 255, 0.54);
}

.menu-subscribe button {
  min-height: 50px;
  padding: 0 18px;
  color: #07111f;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  background: #f5f9ff;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 5px;
}

.menu-subscribe-terms {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  line-height: 1.5;
}

.menu-subscribe-terms a {
  color: #7ab6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mega-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 46px 70px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
}

.mega-menu-footer p {
  margin: 0;
}

.mega-menu-footer nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.mega-menu-footer a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.menu-arrow-icon,
.menu-down-icon,
.privacy-options-icon {
  display: inline-block;
  flex: 0 0 auto;
}

.menu-arrow-icon {
  width: 17px;
  height: 17px;
}

.menu-arrow-left {
  transform: rotate(180deg);
}

.menu-down-icon {
  width: 25px;
  height: 25px;
}

.mega-menu-page.is-closing {
  pointer-events: none;
  animation: mega-menu-slide-out 620ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes mega-menu-slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes mega-menu-slide-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Two-column band only. Below 1181px the aside stacks under the columns and the
   grid gets the full width back, so the fixed sizes there are already fine.
   Above it the aside holds a fixed 560px while the viewport shrinks, which
   squeezes each of the three columns to ~140px at 1250px and wraps every
   multi-character category title. Scaling all three together keeps them on one
   line without changing anything at full desktop width. */
@media (min-width: 1181px) {
  .mega-menu-layout {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 30vw, 560px);
  }

  .mega-menu-grid {
    gap: clamp(36px, 6vw - 42px, 72px);
  }

  .mega-menu-section h2 {
    font-size: clamp(24px, 1.35vw + 7px, 31px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu-page {
    animation: none;
  }

  .mega-menu-page.is-closing {
    animation: none;
  }
}

.mega-menu-page button:focus-visible,
.mega-menu-page a:focus-visible,
.mega-menu-page input:focus-visible {
  outline: 2px solid rgba(126, 182, 255, 0.88);
  outline-offset: 4px;
}

@media (max-width: 1180px) {
  .mega-menu-brand {
    font-size: 44px;
  }

  .mega-menu-layout {
    grid-template-columns: 1fr;
  }

  .mega-menu-grid {
    gap: 42px;
  }

  .mega-menu-aside {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1fr);
    border-top: 1px solid var(--menu-line);
    border-left: 0;
  }

  .market-card {
    display: none;
  }

  .menu-subscribe {
    align-self: start;
  }
}

@media (max-width: 1024px) and (min-width: 821px) {
  .mega-menu-header {
    min-height: 112px;
    padding: 28px 34px 24px;
  }

  .mega-menu-brand {
    font-size: 40px;
  }

  .mega-menu-search {
    width: min(640px, calc(100% - 68px));
    margin-right: 34px;
    margin-left: 34px;
  }

  .mega-menu-grid {
    gap: 36px;
    padding-right: 34px;
    padding-left: 34px;
  }

  .mega-menu-section h2 {
    font-size: 27px;
  }

  .mega-menu-section a {
    font-size: 18px;
  }
}

@media (max-width: 820px) {
  .mega-menu-header {
    grid-template-columns: auto 1fr auto;
    min-height: 86px;
    padding: 18px 20px;
  }

  .mega-menu-close {
    width: 38px;
    height: 38px;
  }

  .mega-menu-brand {
    justify-self: center;
    font-size: 30px;
  }

  .mega-menu-login {
    min-width: 74px;
  }

  .mega-menu-search {
    width: calc(100% - 40px);
    height: 58px;
    margin: 24px 20px 42px;
  }

  .mega-menu-search input {
    font-size: 16px;
  }

  .mega-menu-grid {
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 34px 20px 52px;
  }

  .mega-menu-column {
    gap: 46px;
  }

  .mega-menu-section h2 {
    margin-bottom: 16px;
    font-size: 25px;
  }

  .mega-menu-section ul {
    gap: 14px;
  }

  .mega-menu-section a {
    font-size: 17px;
  }

  .mega-menu-aside {
    display: flex;
    padding: 34px 20px 42px;
  }

  .highlight-card h2 {
    margin-bottom: 22px;
    font-size: 25px;
  }

  .menu-subscribe h2 {
    font-size: 27px;
  }

  .mega-menu-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 20px 44px;
  }

  .mega-menu-footer nav {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}

@media (max-width: 520px) {
  .mega-menu-header {
    min-height: 72px;
    padding: 14px 18px;
    grid-template-columns: 38px minmax(0, 1fr) 68px;
    column-gap: 9px;
    row-gap: 0;
  }

  .mega-menu-close {
    width: 36px;
    height: 36px;
  }

  .mega-menu-login {
    grid-column: auto;
    min-width: 68px;
    min-height: 38px;
    padding: 0 10px;
    justify-self: end;
  }

  .mega-menu-brand {
    min-width: 0;
    justify-self: center;
    overflow: hidden;
    font-size: clamp(20px, 5.4vw, 24px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .highlight-image-link {
    height: 188px;
  }

  .menu-subscribe-input-row {
    grid-template-columns: minmax(0, 1fr) minmax(94px, max-content);
    gap: 10px;
    align-items: stretch;
  }

  .menu-subscribe input {
    min-height: 54px;
    padding: 0 14px;
    font-size: 15px;
  }

  .menu-subscribe button {
    min-height: 54px;
    padding: 0 12px;
    font-size: 14px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .mega-menu-header {
    min-height: 72px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .mega-menu-search {
    height: 58px;
    margin-top: 22px;
  }

  .mega-menu-grid {
    padding-top: 30px;
  }
}

.subscription-page {
  --theme-ink: #ffffff;
  --theme-muted: rgba(255, 255, 255, 0.76);
  --theme-muted-strong: rgba(255, 255, 255, 0.9);
  --theme-soft: rgba(255, 255, 255, 0.62);
  --theme-line: rgba(255, 255, 255, 0.2);
  --theme-control-bg: rgba(10, 10, 12, 0.96);
  --theme-control-border: rgba(255, 255, 255, 0.12);
  --theme-nav-bg: rgba(10, 10, 12, 0.96);
  --theme-button-bg: #ffffff;
  --theme-button-ink: #07111f;
  --theme-footer-bg: #000;
  --theme-logo-filter: none;

  min-height: 100vh;
  color: #1a1f2b;
  color-scheme: light;
  background: #f5f5f5;
}

.subscription-page-background {
  min-height: inherit;
}

.subscription-chrome {
  position: sticky;
  top: 0;
  z-index: 80;
}

.subscription-letter {
  padding: clamp(80px, 7vw, 128px) 24px clamp(72px, 7vw, 112px);
}

.subscription-letter-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.subscription-letter-head img {
  display: block;
  width: clamp(96px, 8vw, 136px);
  height: auto;
  filter: brightness(0) saturate(100%) invert(8%) sepia(12%) saturate(1220%) hue-rotate(179deg)
    brightness(95%) contrast(94%);
}

.subscription-letter-head h1 {
  margin: 16px 0 0;
  color: #303030;
  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: 850;
  line-height: 1.1;
}

.subscription-letter-head p {
  margin: 8px 0 0;
  color: #a4acb8;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 700;
}

.subscription-letter-card {
  --subscription-sign-gap: 28px;

  display: flex;
  width: min(1132px, calc(100vw - 48px));
  margin: clamp(42px, 4.2vw, 68px) auto 0;
  padding: clamp(41px, 4vw, 65px) clamp(41px, 4vw, 65px) var(--subscription-sign-gap);
  flex-direction: column;
  color: #4d4d4d;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.1vw, 22px);
  line-height: 1.78;
  background: #ffffff;
  border: 1px solid #e0e3e8;
}

.subscription-letter-card p {
  margin: 0 0 26px;
}

.subscription-letter-card ol {
  margin: 29px 0;
  padding: 0 0 0 42px;
  border-left: 3px solid #5c4ad8;
}

.subscription-letter-card li {
  margin: 10px 0;
}

.subscription-letter-card strong {
  color: #3a3a3a;
  font-weight: 850;
}

.subscription-feedback span {
  display: block;
}

.subscription-cta {
  display: flex;
  min-height: 55px;
  margin-top: 36px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 0;
  font-size: 16px;
  font-weight: 850;
  font-family: inherit;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #332a72 0%, #6150d8 100%);
  cursor: pointer;
}

.subscription-letter-card .subscription-sign {
  margin: var(--subscription-sign-gap) 0 0 auto;
  color: #9ba3af;
  font-weight: 700;
  text-align: right;
}

.contact-page {
  background: #f5f5f5;
}

.contact-help {
  display: grid;
  min-height: clamp(840px, 72vh, 860px);
  padding: calc(clamp(84px, 8vh, 112px) + 70px) 24px 500px;
  place-items: start center;
  align-content: start;
  color: #171717;
  text-align: center;
}

.contact-help h1 {
  max-width: min(760px, 100%);
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(34px, 2.75vw, 54px);
  font-weight: 850;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

.contact-title-line {
  display: inline;
}

.contact-title-line + .contact-title-line::before {
  content: " ";
}

.contact-help p {
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  color: #2b2b2b;
  font-size: clamp(14px, 0.95vw, 17px);
  font-weight: 500;
  line-height: 1.5;
}

.contact-search {
  position: relative;
  width: min(760px, calc(100vw - 64px));
  margin-top: clamp(34px, 3vw, 46px);
}

.contact-search-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  color: #343943;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.contact-search-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 20px;
  height: 20px;
  color: #969da8;
  pointer-events: none;
  transform: translateY(-50%);
}

.contact-search-icon circle,
.contact-search-icon path {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-search input {
  width: 100%;
  height: 54px;
  padding: 0 20px 0 52px;
  color: #171717;
  border: 1px solid #d6d9df;
  border-radius: 6px;
  outline: 0;
  background: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-search input::-webkit-search-decoration,
.contact-search input::-webkit-search-cancel-button {
  display: none;
}

.contact-search input::placeholder {
  color: #8b929e;
  opacity: 1;
}

.contact-search input:focus {
  border-color: #6d5ce6;
  box-shadow: 0 0 0 3px rgba(97, 80, 216, 0.13);
}

.contact-manual-help {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  color: #0f0f0f;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 15, 15, 0.04);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.contact-search-manual-open .contact-manual-help {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.contact-manual-help-icon {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
}

.contact-support-page {
  background: #f5f5f5;
}

.contact-support-content {
  display: grid;
  width: min(1540px, calc(100vw - 80px));
  min-height: 690px;
  margin: 0 auto;
  padding: clamp(88px, 7vw, 128px) 0 clamp(120px, 9vw, 170px);
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, 0.8fr);
  gap: clamp(74px, 8vw, 140px);
  color: #4a4a4a;
}

.contact-support-form-block header {
  margin: 0 0 28px;
}

.contact-support-form-block h1 {
  margin: 0;
  color: #494949;
  font-size: clamp(30px, 2.1vw, 42px);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0;
}

.contact-support-form-block header p {
  margin: 18px 0 0;
  color: #666;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.support-form {
  display: grid;
  gap: 15px;
}

.support-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.support-field-label {
  color: #4c4c4c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.support-required,
.support-field-error {
  color: #b3293b;
}

.support-field-error {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.support-form-guidance {
  margin: -2px 0 0;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 28px;
  align-items: start;
}

.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  color: #242424;
  border: 1px solid #aeb3bb;
  border-radius: 6px;
  outline: 0;
  background: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.support-form input,
.support-form select {
  height: 50px;
  padding: 0 16px;
}

.support-form textarea {
  min-height: 126px;
  padding: 16px;
  resize: vertical;
  line-height: 1.55;
}

.support-form input::placeholder,
.support-form textarea::placeholder {
  color: #565656;
  opacity: 1;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  border-color: #6d5ce6;
  box-shadow: 0 0 0 3px rgba(97, 80, 216, 0.12);
}

.support-select-control {
  position: relative;
  display: block;
}

.support-select-control select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  color: #565656;
}

.support-select-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  color: #303030;
  pointer-events: none;
  transform: translateY(-50%);
}

.support-select-chevron path,
.support-link svg path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-privacy {
  max-width: 880px;
  margin: 6px 0 0;
  color: #666;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}

.support-privacy a,
.support-email a {
  color: #003cff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.support-submit {
  width: 92px;
  height: 48px;
  margin-top: 6px;
  color: #ffffff;
  border: 0;
  border-radius: 5px;
  background: #031126;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
}

.contact-support-aside {
  padding-top: 16px;
  color: #545454;
}

.support-kicker {
  margin: 0 0 20px;
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 850;
}

.contact-support-aside h2,
.contact-support-aside h3 {
  margin: 0;
  color: #4c4c4c;
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0;
}

.contact-support-aside h2 {
  font-size: clamp(29px, 2.25vw, 44px);
}

.support-link {
  display: inline-flex;
  margin-top: 34px;
  align-items: center;
  gap: 4px;
  color: #1c1c1c;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}

.support-link svg {
  width: 18px;
  height: 18px;
  color: #003cff;
}

.contact-support-aside h3 {
  margin-top: 36px;
  font-size: clamp(29px, 2vw, 40px);
}

.contact-support-aside p:not(.support-kicker):not(.support-email) {
  max-width: 470px;
  margin: 28px 0 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.72;
}

.support-email {
  margin: 28px 0 0;
  color: #464646;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
}

.support-feedback-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: start center;
  padding: clamp(92px, 15vh, 170px) 24px 24px;
  background: rgba(8, 9, 14, 0);
  opacity: 0;
  pointer-events: auto;
  transition:
    opacity 220ms ease,
    background-color 220ms ease;
}

.support-feedback-modal-layer-visible {
  background: rgba(8, 9, 14, 0.04);
  opacity: 1;
}

.support-feedback-modal {
  display: grid;
  width: min(820px, calc(100vw - 48px));
  min-height: 188px;
  padding: 28px 34px 30px;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px 36px;
  align-items: end;
  color: #202020;
  border-radius: 0 0 16px 16px;
  background: #ffffff;
  box-shadow:
    0 20px 40px rgba(8, 12, 24, 0.12),
    0 3px 10px rgba(8, 12, 24, 0.06);
  opacity: 0;
  transform: translateY(-12px) scale(0.985);
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.support-feedback-modal-layer-visible .support-feedback-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.support-feedback-modal h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: #111111;
  font-size: clamp(24px, 1.8vw, 32px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
}

.support-feedback-modal p {
  margin: 0;
  color: #6a7282;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 700;
  line-height: 1.6;
}

.support-feedback-modal button {
  width: 220px;
  height: 64px;
  justify-self: end;
  color: #ffffff;
  border: 0;
  background: #031126;
  box-shadow: 0 12px 22px rgba(3, 17, 38, 0.22);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.waitlist-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 3, 8, 0.5);
  animation: waitlist-layer-in 220ms ease both;
}

.waitlist-modal-layer-closing {
  pointer-events: none;
  animation: waitlist-layer-out 220ms ease both;
}

.waitlist-modal {
  position: relative;
  width: min(500px, calc(100vw - 32px));
  min-height: 316px;
  padding: 36px 34px 40px;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  border-radius: 32.022px;
  background: linear-gradient(180deg, #0e0a1b 0%, #393081 100%);
  box-shadow:
    0 10.007px 15.01px -3.002px rgba(0, 0, 0, 0.1),
    0 4.003px 6.004px -4.003px rgba(0, 0, 0, 0.1);
  animation: waitlist-modal-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.waitlist-modal-layer-closing .waitlist-modal {
  animation: waitlist-modal-out 220ms ease both;
}

.waitlist-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  color: #ffffff;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.waitlist-modal-close svg {
  width: 18px;
  height: 18px;
}

.waitlist-modal-close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.waitlist-kicker {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.waitlist-title-wrap {
  position: relative;
  display: grid;
  min-height: 62px;
  place-items: center;
}

.waitlist-title {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.waitlist-title span {
  display: block;
}

.waitlist-title-thanks {
  opacity: 0;
  transform: translateY(8px);
}

.waitlist-modal-submitted .waitlist-title-entry {
  opacity: 0;
  transform: translateY(-8px);
}

.waitlist-modal-submitted .waitlist-title-thanks {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 110ms;
}

.waitlist-subtitle {
  margin: 15px 0 26px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.waitlist-form {
  position: relative;
  width: 340px;
  height: 60px;
  margin: 0 auto;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(12, 9, 25, 0.18),
    0 3px 10px rgba(255, 255, 255, 0.18);
  transform-origin: center;
  transition:
    width 620ms cubic-bezier(0.72, 0, 0.18, 1),
    box-shadow 420ms ease;
}

.waitlist-form-submitted {
  width: 171px;
  box-shadow:
    inset 0 0 0 1px rgba(12, 9, 25, 0.14),
    0 3px 12px rgba(255, 255, 255, 0.2);
}

.waitlist-field {
  display: block;
  height: 100%;
}

.waitlist-field-label {
  display: block;
  width: 340px;
  max-width: 100%;
  margin: 0 auto 8px;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  transition:
    height 220ms ease,
    margin 220ms ease,
    opacity 180ms ease;
}

.waitlist-field input {
  width: 100%;
  height: 100%;
  padding: 0 82px 0 25px;
  color: #151515;
  border: 0;
  outline: 0;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  background: transparent;
  transition:
    opacity 220ms ease,
    transform 360ms ease;
}

.waitlist-field input::placeholder {
  color: #202020;
  opacity: 1;
}

.waitlist-form-submitted .waitlist-field input {
  opacity: 0;
  transform: scaleX(0.72);
}

.waitlist-modal-submitted .waitlist-field-label {
  height: 0;
  margin-bottom: 0;
  opacity: 0;
}

.waitlist-error {
  margin: 9px auto 0;
  color: #ffd1d7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.waitlist-submit {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 6px solid #000000;
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  transform: translateY(-50%);
  transform-origin: center;
  transition:
    right 620ms cubic-bezier(0.72, 0, 0.18, 1),
    width 420ms ease,
    height 420ms ease,
    border-width 420ms ease,
    background 420ms ease,
    transform 620ms cubic-bezier(0.72, 0, 0.18, 1);
}

.waitlist-submit-arrow,
.waitlist-submit-check {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
}

.waitlist-submit-arrow {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 180ms ease,
    transform 260ms ease;
}

.waitlist-submit-check {
  opacity: 0;
  transform: scale(0.55) rotate(-16deg);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.2, 1.25, 0.28, 1);
}

.waitlist-submit svg {
  display: block;
}

.waitlist-form-submitted .waitlist-submit {
  right: 50%;
  width: 49px;
  height: 49px;
  border: 8.006px solid var(--color-black-solid, #000);
  border-radius: 99.069px;
  background: var(--color-grey-9640, rgba(245, 245, 245, 0.4));
  cursor: default;
  transform: translate(50%, -50%) rotate(360deg);
}

.waitlist-form-submitted .waitlist-submit-arrow {
  opacity: 0;
  transform: translateX(18px);
}

.waitlist-form-submitted .waitlist-submit-check {
  opacity: 1;
  transform: scale(0.7) rotate(0deg);
  transition-delay: 420ms;
}

@keyframes waitlist-layer-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes waitlist-layer-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes waitlist-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes waitlist-modal-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}

@media (max-width: 560px) {
  .subscription-letter {
    padding: 42px 16px 64px;
  }

  .subscription-letter-head img {
    width: 84px;
  }

  .subscription-letter-head h1 {
    margin-top: 12px;
    font-size: 30px;
    line-height: 1.14;
  }

  .subscription-letter-head p {
    font-size: 14px;
    line-height: 1.35;
  }

  .subscription-letter-card {
    --subscription-sign-gap: 20px;

    width: calc(100vw - 32px);
    margin-top: 34px;
    padding: 30px 22px 26px;
    font-size: 16px;
    line-height: 1.72;
    overflow-wrap: anywhere;
  }

  .subscription-letter-card p {
    margin-bottom: 20px;
  }

  .subscription-letter-card ol {
    margin: 22px 0;
    padding-left: 22px;
    border-left-width: 2px;
  }

  .subscription-letter-card li {
    margin: 8px 0;
  }

  .subscription-cta {
    min-height: 50px;
    margin-top: 28px;
    letter-spacing: 0.04em;
  }

  .contact-help {
    min-height: 620px;
    padding: 128px 18px 220px;
  }

  .contact-help h1 {
    max-width: 340px;
    font-size: 31px;
    line-height: 1.18;
  }

  .contact-title-line {
    display: block;
  }

  .contact-title-line + .contact-title-line::before {
    content: none;
  }

  .contact-help p {
    font-size: 15px;
  }

  .contact-search {
    width: min(100%, 420px);
  }

  .contact-search input {
    height: 50px;
  }

  .contact-manual-help {
    height: 48px;
    padding: 0 13px;
  }

  .contact-support-content {
    width: min(100%, calc(100vw - 36px));
    min-height: 0;
    padding: 66px 0 92px;
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .contact-support-form-block h1,
  .contact-support-aside h2,
  .contact-support-aside h3 {
    font-size: 29px;
  }

  .support-form-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .contact-support-aside {
    padding-top: 0;
  }

  .support-feedback-modal-layer {
    padding: 88px 14px 18px;
  }

  .support-feedback-modal {
    min-height: 220px;
    padding: 24px 20px 24px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .support-feedback-modal button {
    width: 100%;
    height: 56px;
  }

  .waitlist-modal-layer {
    padding: 14px;
  }

  .waitlist-modal {
    min-height: 276px;
    padding: 34px 20px 36px;
    border-radius: 26px;
  }

  .waitlist-kicker {
    font-size: 14px;
  }

  .waitlist-title-wrap {
    min-height: 58px;
  }

  .waitlist-title {
    font-size: 23px;
  }

  .waitlist-subtitle {
    font-size: 12px;
  }

  .waitlist-form {
    width: min(340px, 100%);
  }

  .waitlist-form-submitted {
    width: 171px;
  }
}

@media (max-width: 1024px) and (min-width: 561px) {
  .contact-support-content {
    width: min(920px, calc(100vw - 64px));
    padding: 76px 0 110px;
    grid-template-columns: 1fr;
    gap: 68px;
  }

  .contact-support-aside {
    max-width: 720px;
    padding-top: 0;
  }
}

@media (max-width: 760px) {
  .support-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .waitlist-modal-layer,
  .support-feedback-modal-layer {
    padding: 12px;
  }

  .waitlist-modal,
  .support-feedback-modal {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .waitlist-modal {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.phase-copy {
  position: absolute;
  z-index: 12;
  color: #fff;
  text-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
  will-change: transform, opacity;
}

.phase-copy > * {
  will-change: transform, opacity, filter;
}

.phase-copy h1,
.phase-copy h2 {
  margin: 0;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
}

.phase-copy .launch-title {
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  line-height: 1;
  white-space: nowrap;
}

.launch-title-en,
.launch-title-cn {
  display: block;
  flex: 0 0 auto;
  line-height: 1;
}

.launch-title-cn {
  transform: translateY(-0.01em);
}

.phase-copy h1,
.phase-copy-left h2,
.phase-copy-center h2 {
  font-size: clamp(40px, 4.2vw, 64px);
}

.phase-copy-intro h1,
.phase-copy-left h2,
.phase-copy-center h2 {
  white-space: nowrap;
}

.phase-copy p {
  max-width: 740px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.58;
}

.phase-copy-intro {
  top: 35.2%;
  right: 0;
  left: 0;
  width: min(1120px, calc(100% - 56px));
  margin: 0 auto;
  text-align: center;
}

.phase-copy-intro p,
.phase-copy-center p {
  margin-right: auto;
  margin-left: auto;
}

.phase-copy-left {
  top: 38%;
  left: 11%;
  width: min(980px, calc(100% - 56px));
}

.phase-copy-center {
  top: 43%;
  right: 0;
  left: 0;
  width: min(980px, calc(100% - 56px));
  margin: 0 auto;
  text-align: center;
}

.phase-copy-metrics {
  bottom: 7%;
  left: 6.2%;
  width: min(1180px, calc(100% - 56px));
}

.phase-metrics-promoted-title {
  max-width: 1080px;
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1.18;
  text-wrap: balance;
}

.primary-link {
  min-width: 166px;
  margin-top: 34px;
}

.primary-link::after {
  margin-left: 12px;
  content: ">";
}

.play-button {
  position: relative;
  width: 42px;
  height: 26px;
  margin-top: 42px;
  cursor: pointer;
  background: rgba(3, 6, 17, 0.26);
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
}

.play-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
  transform: translate(-35%, -50%);
}

.mini-links {
  position: absolute;
  right: 50%;
  bottom: 5.2%;
  z-index: 12;
  display: flex;
  width: min(500px, calc(100% - 48px));
  gap: 40px;
  transform: translateX(50%);
}

.mini-link {
  position: relative;
  flex: 1;
  padding-bottom: 11px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.mini-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: rgba(255, 255, 255, 0.86);
}

.scroll-cue {
  position: absolute;
  right: 5.2%;
  bottom: 5.5%;
  z-index: 12;
  display: grid;
  width: 34px;
  height: 54px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  place-items: center;
}

.scroll-cue span {
  position: relative;
  width: 3px;
  height: 34px;
  background: #ffffff;
}

.scroll-cue span::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  content: "";
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: translateX(-50%) rotate(45deg);
}

.growth-preview {
  --growth-preview-dark: #000000;
  --growth-preview-dark-panel: #000000;
  --growth-preview-light: var(--theme-light-surface, #ffffff);
  --growth-preview-violet: #a78bfa;
  --growth-preview-violet-strong: #7e49ff;

  /* Module footprint (frame + highlights): follows the viewport, never below
     the old fixed 1040px, capped so the 2400px artwork is not upscaled. */
  --growth-preview-module-width: max(min(86vw, 1560px), min(1040px, 100%));

  position: relative;
  z-index: 8;
  isolation: isolate;
  /* No overflow clip: the layers clip their own backdrop, and a scroll
     container here would break the sticky hand-off hold inside. */
  color: rgba(245, 240, 230, 0.92);
  background: var(--growth-preview-dark);
}

.growth-preview::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: var(--growth-preview-light);
  clip-path: inset(0 0 0 var(--theme-split-x, 100%));
  /* Fades in with the module during the hand-off hold (GrowthPreview tweens
     the variable), so a light half is never sitting under the hero frame. */
  opacity: var(--growth-preview-surface, 1);
}

/* Hand-off hold: the section starts under the hero frame (.theme-split-after-
   hero); this sticky wrapper pins the module for one frame of scrolling (the
   spacer's travel) while GrowthPreview fades it in. Native sticky, no JS
   positioning, so nothing trembles on wheel ticks. */
.growth-preview-hold {
  position: sticky;
  top: 0;
}

.growth-preview-hold-spacer {
  height: var(--hero-frame-height);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .growth-preview-hold-spacer {
    height: 0;
  }
}

.growth-preview-layer {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.growth-preview-layer-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #141318;
  background: var(--growth-preview-light);
  pointer-events: none;
  clip-path: inset(0 0 0 var(--theme-split-x, 100%));
}

/*
 * Dot-matrix 2D earth behind the module: the analysis hero's glimmering
 * GlimmerWorldMap canvas, cover-fitted into the old backdrop's box so the
 * composition holds. Spans the window width (left: 50% − 50vw), anchored to
 * the frame's top and lifted 66% of its height so the southern third stays
 * behind the frame.
 */
.growth-preview-worldmap {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  margin-left: -50vw;
  aspect-ratio: 1200 / 450;
  pointer-events: none;
  transform: translateY(-66%);
}

.growth-preview-worldmap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Corner dot grids: the landing-v21 corner-dots tile at a 22px pitch as a
   mask, each patch tucked behind one frame corner so an L of dots shows, with
   the ink fading away from the corner. */
.growth-preview-corner-dots {
  --growth-preview-corner-ink: rgba(245, 240, 230, 0.42);

  position: absolute;
  z-index: -1;
  width: 200px;
  height: 130px;
  background: radial-gradient(
    farthest-corner at var(--growth-preview-corner-x) var(--growth-preview-corner-y),
    var(--growth-preview-corner-ink) 0 30%,
    transparent 100%
  );
  mask-image: url("/assets/pics/landing-v21/corner-dots.png");
  mask-repeat: repeat;
  mask-size: 264px 264px;
  pointer-events: none;
}

.growth-preview-corner-dots-start {
  top: -56px;
  left: -80px;
  --growth-preview-corner-x: 80px;
  --growth-preview-corner-y: 56px;
}

.growth-preview-corner-dots-end {
  right: -100px;
  bottom: -64px;
  --growth-preview-corner-x: 100px;
  --growth-preview-corner-y: 66px;
}

.growth-preview-layer-light .growth-preview-corner-dots {
  --growth-preview-corner-ink: rgba(20, 19, 24, 0.3);
}

@media (max-width: 760px) {
  /* The stage is not a containing block on phones (see below); skip them. */
  .growth-preview-corner-dots {
    display: none;
  }
}

@media (max-width: 760px) {
  /* Phones keep the earlier composition: the stage stops being a containing
     block, so the map positions against the shell, behind the heading. */
  .growth-preview-worldmap {
    top: clamp(40px, 9vw, 72px);
    width: 168vw;
    margin-left: -84vw;
    transform: none;
  }
}

.growth-preview-atmosphere {
  position: absolute;
  top: clamp(52px, 5.2vw, 76px);
  left: 50%;
  width: min(1080px, 92vw);
  height: clamp(250px, 27vw, 390px);
  opacity: 0.28;
  /* Violet glow only: its old 18px dot grid moiréd against the earth's dots. */
  background: radial-gradient(circle at center, rgba(167, 139, 250, 0.32), transparent 58%);
  mask-image: radial-gradient(ellipse at center, #000 0 38%, transparent 72%);
  transform: translateX(-50%);
}

.growth-preview-layer-light .growth-preview-atmosphere {
  display: none;
}

.growth-preview-shell {
  position: relative;
  z-index: 1;
  /* 1592px = the 1560px module cap plus the 16px gutter on either side. */
  width: min(1592px, calc(100% - 32px));
  margin: 0 auto;
  /* Top padding clears the sticky chrome with both nav rows down (112px;
     100px under 900px wide) by a few pixels and no more. */
  padding: clamp(104px, 8.3333vw, 120px) 0 clamp(88px, 8vw, 116px);
}

.growth-preview-intro {
  width: min(920px, 100%);
  margin: 0 auto;
  text-align: center;
}

.growth-preview-eyebrow {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin: 0;
  padding: 5px 13px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 999px;
  color: rgba(245, 240, 230, 0.66);
  background: rgba(167, 139, 250, 0.08);
  font-size: clamp(10px, 0.8333vw, 12px);
  font-weight: 650;
  letter-spacing: 0.08em;
}

.growth-preview-layer-light .growth-preview-eyebrow {
  border-color: rgba(70, 46, 130, 0.2);
  color: rgba(20, 19, 24, 0.64);
  background: rgba(126, 73, 255, 0.08);
}

.growth-preview-intro h2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: clamp(20px, 2vw, 28px) 0 0;
  font-family: var(--font-sans);
  font-size: clamp(34px, 3.6111vw, 52px);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.growth-preview-description {
  /* In em so the line holds the same character count at every font size; a
     fixed 760px box wrapped the 47.5em Chinese sentence once the font hit 16px. */
  width: min(50em, 100%);
  margin: clamp(18px, 1.6667vw, 24px) auto 0;
  color: rgba(245, 240, 230, 0.55);
  font-size: clamp(14px, 1.1111vw, 16px);
  line-height: 1.75;
  text-wrap: balance;
}

.growth-preview-layer-light .growth-preview-description {
  color: rgba(20, 19, 24, 0.6);
}

.growth-preview-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 2.2222vw, 32px);
  gap: 12px;
}

.growth-preview-cta {
  display: inline-flex;
  min-width: 148px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 720;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.growth-preview-cta-primary {
  color: #141318;
  background: rgba(245, 240, 230, 0.92);
  box-shadow: 0 14px 34px rgba(167, 139, 250, 0.14);
}

.growth-preview-cta-secondary {
  border-color: rgba(245, 240, 230, 0.16);
  color: rgba(245, 240, 230, 0.78);
  background: rgba(255, 255, 255, 0.025);
}

.growth-preview-layer-light .growth-preview-cta-primary {
  color: #f5f0e6;
  background: #141318;
  box-shadow: none;
}

.growth-preview-layer-light .growth-preview-cta-secondary {
  border-color: rgba(20, 19, 24, 0.16);
  color: rgba(20, 19, 24, 0.76);
  background: rgba(20, 19, 24, 0.025);
}

@media (hover: hover) and (pointer: fine) {
  .growth-preview-layer:not(.growth-preview-layer-light) .growth-preview-cta:hover {
    border-color: rgba(167, 139, 250, 0.72);
    transform: translateY(-2px);
  }
}

.growth-preview-cta:focus-visible {
  outline: 3px solid rgba(167, 139, 250, 0.72);
  outline-offset: 4px;
}

.growth-preview-stage {
  position: relative;
  width: var(--growth-preview-module-width);
  margin: clamp(46px, 4.5833vw, 66px) auto 0;
}

@media (max-width: 760px) {
  /* Lets the phone-only map rule above position against the shell instead. */
  .growth-preview-stage {
    position: static;
  }
}

.growth-preview-demo {
  position: relative;
  width: 100%;
  /* The artwork's own 16:10; the old 16:9 frame cropped the product's top
     bar and halved the timeline scrubber. */
  aspect-ratio: 2400 / 1500;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: var(--growth-preview-dark-panel);
  box-shadow:
    0 10px 28px -10px rgba(0, 0, 0, 0.34),
    0 36px 120px rgba(126, 73, 255, 0.18);
}

.growth-preview-layer-light .growth-preview-demo {
  border-color: rgba(20, 19, 24, 0.14);
  box-shadow: none;
}

.growth-preview-demo picture,
.growth-preview-demo img {
  display: block;
  width: 100%;
  height: 100%;
}

.growth-preview-demo img {
  object-fit: cover;
  object-position: center;
}

.growth-preview-demo-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(11, 7, 22, 0.06),
      transparent 24%,
      transparent 72%,
      rgba(11, 7, 22, 0.18)
    ),
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(5, 3, 12, 0.13) 100%);
  pointer-events: none;
}

.growth-preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(56px, 5.2778vw, 76px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(245, 240, 230, 0.28);
  border-radius: 50%;
  background: rgba(11, 7, 22, 0.68);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
}

.growth-preview-play span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid rgba(245, 240, 230, 0.92);
}

.growth-preview-highlights {
  display: grid;
  width: var(--growth-preview-module-width);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(30px, 2.7778vw, 40px) auto 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.growth-preview-layer-light .growth-preview-highlights {
  border-color: rgba(20, 19, 24, 0.14);
}

.growth-preview-highlights li {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  padding: clamp(24px, 2.2222vw, 32px) clamp(18px, 2.0833vw, 30px);
  gap: 14px;
}

.growth-preview-highlights li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.growth-preview-layer-light .growth-preview-highlights li + li {
  border-color: rgba(20, 19, 24, 0.12);
}

.growth-preview-highlights img {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  object-fit: contain;
  opacity: 0.88;
}

.growth-preview-layer-light .growth-preview-highlights img {
  filter: invert(1);
}

.growth-preview-highlights h3 {
  margin: 0;
  color: rgba(245, 240, 230, 0.92);
  font-size: clamp(14px, 1.1111vw, 16px);
  font-weight: 720;
  line-height: 1.3;
}

.growth-preview-layer-light .growth-preview-highlights h3 {
  color: rgba(20, 19, 24, 0.92);
}

.growth-preview-highlights p {
  margin: 8px 0 0;
  color: rgba(245, 240, 230, 0.55);
  font-size: clamp(11px, 0.9028vw, 13px);
  line-height: 1.65;
}

.growth-preview-layer-light .growth-preview-highlights p {
  color: rgba(20, 19, 24, 0.58);
}

@media (max-width: 900px) {
  .growth-preview-shell {
    padding-top: 104px;
  }

  .growth-preview-stage,
  .growth-preview-highlights {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .growth-preview-shell {
    width: min(100% - 28px, 1188px);
    padding-top: 104px;
    padding-bottom: 80px;
  }

  .growth-preview-intro h2 {
    font-size: clamp(30px, 9.2vw, 42px);
  }

  .growth-preview-description {
    font-size: 14px;
    line-height: 1.65;
  }

  .growth-preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .growth-preview-cta {
    width: 100%;
  }

  .growth-preview-stage {
    margin-top: 42px;
  }

  .growth-preview-demo {
    aspect-ratio: 4 / 3;
  }

  .growth-preview-demo img {
    object-position: center;
  }

  .growth-preview-highlights {
    grid-template-columns: 1fr;
  }

  .growth-preview-highlights li {
    padding: 22px 8px;
  }

  .growth-preview-highlights li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }

  .growth-preview-layer-light .growth-preview-highlights li + li {
    border-color: rgba(20, 19, 24, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .growth-preview-cta {
    transition: none;
  }
}

.interest-section {
  --interest-border-1: #48e7ea;
  --interest-border-2: #4853ea;
  --interest-border-3: #48e7ea;
  --interest-border-4: #4853ea;
  --interest-border-5: #ead248;
  --interest-border-6: #ea7348;
  --interest-border-7: #48e7ea;
  --interest-pad-x: clamp(16px, 1.9444vw, 28px);
  --interest-pad-top: clamp(96px, 12vw, 220px);
  --interest-pad-bottom: 0px;
  /* Width of the soft edge on each side of the marquee, measured inward from
     the viewport edge. The cloud runs the full viewport width, so this band
     sits in the margin the rows used to stop short of rather than eating
     into the chips: the fully opaque run still begins where the first whole
     chip began before the fade existed. */
  --interest-cloud-fade: clamp(56px, 14vw, 260px);
  --interest-cloud-pad-y: clamp(11.2px, 1.1666vw, 16.8px);
  /* Room inside the clipped cloud for the chips' drop shadows and hover
     bloom (up to ~75px below, ~42px above a chip). The extra bottom room is
     taken back with a negative margin so the next section does not move;
     the overlap strip shows this section's split background, which matches
     the next section's, so it is invisible. */
  --interest-cloud-shadow-top: 48px;
  --interest-cloud-shadow-bottom: 80px;
  --interest-shadow-overlap: calc(
    var(--interest-cloud-shadow-bottom) - var(--interest-cloud-pad-y)
  );
  --interest-cloud-margin: clamp(36px, 3.8889vw, 56px);
  --interest-cloud-gap: clamp(22.4px, 2.9166vw, 42px);
  --interest-row-gap: clamp(19.6px, 2.3334vw, 33.6px);
  --interest-title-size: var(--marketing-intro-title-size);
  --interest-copy-size: var(--marketing-intro-copy-size);
  --interest-copy-margin: clamp(18px, 1.9444vw, 28px);
  --interest-chip-font: clamp(18.2px, 1.75vw, 25.2px);
  --interest-chip-pad-y: clamp(14px, 1.5567vw, 22.4154px);
  --interest-chip-pad-x: clamp(19.6px, 2.3349vw, 33.6238px);
  --interest-plain-font: clamp(25.2px, 2.7825vw, 40.068px);
  --interest-symbol-size: clamp(30.8px, 3.2084vw, 46.2px);

  position: relative;
  z-index: 9;
  padding: var(--interest-pad-top) var(--interest-pad-x) var(--interest-pad-bottom);
  margin-bottom: calc(-1 * var(--interest-shadow-overlap));
  overflow: hidden;
  text-align: center;
  color: var(--theme-ink, #fff);
  background: var(--growth-surface);
}

.interest-section-split {
  --interest-boundary-overlap: 8px;
  --growth-surface: #000000;
  --theme-ink: #ffffff;
  --theme-muted-strong: rgba(255, 255, 255, 0.9);

  margin-bottom: calc(-1 * (var(--interest-boundary-overlap) + var(--interest-shadow-overlap)));
  margin-top: calc(var(--interest-boundary-overlap) * -1);
  padding-bottom: var(--interest-boundary-overlap);
  padding-top: calc(var(--interest-pad-top) + var(--interest-boundary-overlap));
  background: #000000;
}

.interest-section-split::before {
  position: absolute;
  inset: 0 0 -1px;
  z-index: 0;
  content: "";
  background: var(--theme-light-surface, #ffffff);
  clip-path: inset(0 0 0 var(--theme-split-x));
}

.interest-copy {
  position: relative;
  z-index: 1;
}

.interest-copy-light {
  --theme-ink: #07111f;
  --theme-muted-strong: rgba(7, 17, 31, 0.84);

  position: absolute;
  top: var(--interest-pad-top);
  right: var(--interest-pad-x);
  left: var(--interest-pad-x);
  z-index: 2;
  color: var(--theme-ink);
  pointer-events: none;
  clip-path: inset(0 0 0 var(--theme-split-x));
}

.interest-section-split .interest-copy-light {
  top: calc(var(--interest-pad-top) + var(--interest-boundary-overlap));
}

.post-interest-sections {
  position: relative;
  display: flow-root;
  background: var(--growth-surface);
}

.post-interest-sections .global-market-section {
  margin-top: -1px;
}

.landing-v21-load-fallback {
  display: grid;
  min-height: 240px;
  place-content: center;
  gap: 10px;
  padding: 64px 24px;
  color: #ece7de;
  background: #141318;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.landing-v21-load-fallback h2,
.landing-v21-load-fallback p {
  margin: 0;
}

.landing-v21-load-fallback h2 {
  font-size: clamp(24px, 3vw, 36px);
}

.landing-v21-load-fallback p {
  color: rgba(236, 231, 222, 0.72);
  font-size: 14px;
}

.persistent-data-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
}

.split-data-chrome {
  /* Shrinks with the second row as it rolls up (ThemeSplitExperience writes
     the variable), so the bottom edge and ::after line ride on the row. */
  --split-chrome-current-height: calc(
    var(--split-chrome-height, 112px) - var(--split-nav-row-height, 54px) *
      var(--split-nav-collapse, 0)
  );

  position: sticky;
  top: 0;
  z-index: 65;
  height: var(--split-chrome-current-height);
  margin-bottom: calc(var(--split-chrome-current-height) * -1);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  transition: visibility 0s linear 80ms;
  visibility: hidden;
}

.split-data-chrome::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 4;
  height: 3px;
  pointer-events: none;
  content: "";
  background: #000000;
  opacity: var(--split-chrome-progress, 0);
}

.theme-split-chrome-visible .split-data-chrome {
  visibility: visible;
  transition: visibility 0s;
}

.theme-split-chrome-pinned .split-data-chrome {
  pointer-events: auto;
}

.split-data-chrome-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000000;
  contain: paint;
  opacity: var(--split-chrome-progress, 0);
  transform: translate3d(0, var(--split-chrome-y, -16px), 0);
  transition:
    opacity 80ms linear,
    transform 80ms linear;
  will-change: opacity, transform;
}

.split-data-chrome-dark {
  --theme-ink: #ffffff;
  --theme-muted: rgba(255, 255, 255, 0.76);
  --theme-muted-strong: rgba(255, 255, 255, 0.9);
  --theme-line: rgba(255, 255, 255, 0.18);
  --theme-control-border: rgba(255, 255, 255, 0.12);
  --theme-button-bg: #ffffff;
  --theme-button-ink: #080810;

  color: #ffffff;
}

.split-data-chrome-light {
  --theme-ink: #07111f;
  --theme-muted: rgba(7, 17, 31, 0.7);
  --theme-muted-strong: rgba(7, 17, 31, 0.84);
  --theme-line: rgba(7, 17, 31, 0.16);
  --theme-control-border: rgba(15, 32, 54, 0.14);
  --theme-button-bg: #07111f;
  --theme-button-ink: #ffffff;

  color: #07111f;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--theme-split-x)) 0 0);
}

.split-control-bar {
  position: relative;
  z-index: 3;
  background: #000000;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 #000000;
}

.split-primary-nav {
  position: relative;
  z-index: 1;
  background: #000000;
  border-top: 0;
  border-bottom: 0;
  /* Slides up behind the opaque control bar by its own height, fading on the
     way; on phones the row is shorter than its allowance, so both close on
     the bar together. */
  opacity: clamp(0, 1 - var(--split-nav-collapse, 0) * 1.6, 1);
  transform: translate3d(0, calc(-100% * var(--split-nav-collapse, 0)), 0);
  visibility: visible;
  will-change: transform, opacity;
}

/* Fully rolled up: out of the tab order and hit-testing until it comes back. */
.theme-split-experience[data-split-nav-collapsed] .split-primary-nav {
  pointer-events: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .split-data-chrome,
  .theme-split-chrome-visible .split-data-chrome,
  .split-data-chrome-layer {
    transition-duration: 1ms;
  }
}

.split-data-chrome-light .split-control-bar {
  background: #cfe3f6;
}

.split-data-chrome-light .menu-icon {
  filter: brightness(0) saturate(100%) invert(7%) sepia(24%) saturate(1308%) hue-rotate(180deg)
    brightness(96%) contrast(96%);
}

.split-data-chrome-light .language-icon-wrap svg path {
  fill: var(--theme-ink);
}

.persistent-data-chrome .control-bar {
  background: var(--theme-control-bg, rgba(4, 6, 14, 0.86));
}

.interest-section h2 {
  margin: 0;
  font-size: var(--interest-title-size);
  font-weight: 850;
  line-height: var(--marketing-intro-title-line-height);
  letter-spacing: 0;
}

.interest-section p {
  margin: var(--interest-copy-margin) auto 0;
  color: var(--theme-muted-strong, rgba(255, 255, 255, 0.9));
  font-size: var(--interest-copy-size);
  line-height: var(--marketing-intro-copy-line-height);
}

.interest-section p span {
  display: block;
  white-space: nowrap;
}

.interest-cloud {
  position: relative;
  z-index: 3;
  width: 100vw;
  /* Top margin gives back the extra shadow room so the first row keeps its
     old position. */
  margin: calc(
      var(--interest-cloud-margin) + var(--interest-cloud-pad-y) - var(--interest-cloud-shadow-top)
    )
    auto 0;
  margin-left: 50%;
  padding: var(--interest-cloud-shadow-top) 0 var(--interest-cloud-shadow-bottom);
  overflow: hidden;
  transform: translateX(-50%);
  /* Masks both cloud layers at once, so the dark base and the split-theme
     light copy fade identically and stay aligned with the divider. The mask
     is purely visual: hit testing is unaffected, so a chip mid-fade is still
     hoverable.

     The intermediate stops trace a smoothstep curve rather than a straight
     alpha ramp. A linear ramp holds near-opaque for most of the band and
     then drops, which reads as a chip blinking out; easing in and out of
     both ends is what makes the dissolve continuous. */
  mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.16) calc(var(--interest-cloud-fade) * 0.25),
    rgba(0, 0, 0, 0.5) calc(var(--interest-cloud-fade) * 0.5),
    rgba(0, 0, 0, 0.84) calc(var(--interest-cloud-fade) * 0.75),
    #000 var(--interest-cloud-fade),
    #000 calc(100% - var(--interest-cloud-fade)),
    rgba(0, 0, 0, 0.84) calc(100% - var(--interest-cloud-fade) * 0.75),
    rgba(0, 0, 0, 0.5) calc(100% - var(--interest-cloud-fade) * 0.5),
    rgba(0, 0, 0, 0.16) calc(100% - var(--interest-cloud-fade) * 0.25),
    transparent 100%
  );
}

.interest-cloud-layer {
  display: grid;
  gap: var(--interest-cloud-gap);
}

/* Covers the whole cloud (shadow room included) with the light surface, so
   nothing painted outside the white chips underneath — their purple hover
   bloom and glow — leaks out around the dark copies on the light side. The
   rows start after the same top padding as the base layer's, so the copies
   sit exactly on their originals. */
.interest-cloud-layer-light {
  position: absolute;
  inset: 0;
  padding-top: var(--interest-cloud-shadow-top);
  /* The box is taller than its rows (it also covers the shadow room below);
     without this the grid would stretch the rows and drift them off the
     originals underneath. */
  align-content: start;
  color: #07111f;
  background: var(--theme-light-surface, #ffffff);
  pointer-events: none;
  clip-path: inset(0 0 0 var(--theme-split-x));
}

.interest-marquee {
  display: flex;
  width: max-content;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.interest-marquee:hover {
  animation-play-state: paused;
}

.interest-cloud:has(.interest-marquee:nth-child(1):hover) .interest-marquee:nth-child(1),
.interest-cloud:has(.interest-marquee:nth-child(2):hover) .interest-marquee:nth-child(2),
.interest-cloud:has(.interest-marquee:nth-child(3):hover) .interest-marquee:nth-child(3),
.interest-cloud:has(.interest-marquee:nth-child(4):hover) .interest-marquee:nth-child(4) {
  animation-play-state: paused;
}

.interest-marquee-left {
  animation-name: interest-marquee-left;
}

.interest-marquee-right {
  animation-name: interest-marquee-right;
}

.interest-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--interest-row-gap);
  padding-right: var(--interest-row-gap);
  flex-wrap: nowrap;
  transform: translate3d(0, 0, 0);
}

/*
 * Interest chips: liquid-metal pills. Resting = the "shader-button" look
 * (a face inside a 2px liquid-metal rim, painted per chip by a 2D canvas
 * that MarketingSections blits from one shared shader tile; the CSS conic
 * rim beneath is the fallback). Hover = the "3-d liquid metal button" look:
 * a metal ring lit by a pointer-tracking specular (--chip-hover-x/y),
 * bevelled face, ambient bloom, press sink and release ripple.
 * Face colours follow the theme side: white face / dark ink on the dark side
 * (.interest-cloud-layer-base), dark face / light ink on the light side
 * (.interest-cloud-layer-light, the pointer-inert twin that mirrors the base
 * chip's state through the is-hover / is-pressed classes).
 */
.interest-chip {
  --chip-hover-x: 50%;
  --chip-hover-y: 50%;
  --chip-ripple-x: 50%;
  --chip-ripple-y: 50%;
  --chip-rim: 2px;
  /* White face on the dark side; its hover is a purple light (the reference's
     white specular disappears on a white face). */
  --chip-face: linear-gradient(180deg, #ffffff 0%, #e4e4e9 100%);
  --chip-face-hover: linear-gradient(180deg, #f8f4ff 0%, #e6dbfb 100%);
  /* Mid grey at rest so the hover purple reads as the label lighting up. */
  --chip-ink: #6b7280;
  --chip-ink-hover: #5b21b6;
  --chip-ink-active: #4c1d95;
  --chip-ink-shadow: none;
  --chip-ink-glow: drop-shadow(0 0 6px rgba(139, 92, 246, 0.55));
  --chip-ink-glow-active: drop-shadow(0 0 10px rgba(139, 92, 246, 0.85));
  --chip-ring: linear-gradient(180deg, #5b4b8a 0%, #2e2650 50%, #3d3366 100%);
  --chip-specular-core: rgba(221, 214, 254, 0.98);
  --chip-specular-mid: rgba(167, 139, 250, 0.8);
  --chip-specular-edge: rgba(124, 58, 237, 0.4);
  --chip-hairline: rgba(196, 181, 253, 0.7);
  /* Black shadows vanish on the black side: rest floats on a pool of light,
     hover/press use the reference's black shadows recoloured purple. */
  --chip-rest-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16), 0 36px 28px -10px rgba(255, 255, 255, 0.05),
    0 20px 18px -6px rgba(255, 255, 255, 0.07), 0 9px 10px -2px rgba(255, 255, 255, 0.09),
    0 2px 5px rgba(255, 255, 255, 0.1);
  --chip-hover-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.45), 0 0 34px rgba(139, 92, 246, 0.55),
    0 25px 50px rgba(139, 92, 246, 0.8), 0 10px 20px rgba(139, 92, 246, 0.6);
  --chip-pressed-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.6), 0 0 22px rgba(139, 92, 246, 0.7),
    0 5px 15px rgba(139, 92, 246, 0.8), 0 2px 5px rgba(139, 92, 246, 0.6);
  --chip-bevel:
    inset 0 4px 12px rgba(0, 0, 0, 0.14), inset 0 -1px 4px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --chip-bevel-pressed:
    inset 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 2px 8px rgba(0, 0, 0, 0.14),
    inset 0 0 0 100vmax rgba(0, 0, 0, 0.04);
  --chip-sheen: rgba(255, 255, 255, 0.9);
  --chip-shade: rgba(109, 40, 217, 0.12);
  --chip-inner-glow: rgba(139, 92, 246, 0.26);
  --chip-ambient: rgba(139, 92, 246, 0.7);
  --chip-ripple: rgba(139, 92, 246, 0.45);

  position: relative;
  z-index: 0;
  display: inline-flex;
  padding: calc(var(--interest-chip-pad-y) + var(--chip-rim))
    calc(var(--interest-chip-pad-x) + var(--chip-rim));
  align-items: center;
  justify-content: center;
  color: var(--chip-ink);
  font-size: var(--interest-chip-font);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  isolation: isolate;
  border-radius: 999px;
  /* CSS fallback rim: chrome bands with a faint dispersion, turning slowly. */
  background: conic-gradient(
    from var(--chip-glow-angle, 0deg),
    #2a2a2a,
    #9a9a9f 16%,
    #f3f3f5 26%,
    #6b6a70 40%,
    #1d1d1f 52%,
    #a7a7b0 64%,
    #e9e6ea 73%,
    #3b3b3f 88%,
    #2a2a2a
  );
  box-shadow: var(--chip-rest-shadow);
  animation: interest-chip-glow 6s linear infinite;
  transform: translateY(0);
  transition:
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms ease;
}

/* With the shader painting the rim the rotating CSS ring is invisible, so
   stop animating 160+ gradients under it. */
.interest-cloud-metal .interest-chip {
  animation: none;
}

.interest-cloud-layer-light .interest-chip {
  --chip-face: linear-gradient(180deg, #202020 0%, #000000 100%);
  --chip-face-hover: linear-gradient(180deg, #252525 0%, #181818 100%);
  --chip-ink: #666666;
  --chip-ink-hover: #9ca3af;
  --chip-ink-active: #ffffff;
  --chip-ink-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --chip-ink-glow: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  --chip-ink-glow-active: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  --chip-ring: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 50%, #3a3a3a 100%);
  --chip-specular-core: rgba(255, 255, 255, 0.95);
  --chip-specular-mid: rgba(255, 255, 255, 0.6);
  --chip-specular-edge: rgba(220, 230, 255, 0.3);
  --chip-hairline: rgba(255, 255, 255, 0.2);
  --chip-rest-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3), 0 36px 14px rgba(0, 0, 0, 0.02), 0 20px 12px rgba(0, 0, 0, 0.08),
    0 9px 9px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.15);
  --chip-hover-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 10px 20px rgba(0, 0, 0, 0.6);
  --chip-pressed-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6);
  --chip-bevel:
    inset 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 -1px 4px rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(75, 85, 99, 0.2);
  --chip-bevel-pressed:
    inset 0 8px 20px rgba(0, 0, 0, 0.8), inset 0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 100vmax rgba(255, 255, 255, 0.05);
  --chip-sheen: rgba(255, 255, 255, 0.08);
  --chip-shade: rgba(0, 0, 0, 0.3);
  --chip-inner-glow: rgba(255, 255, 255, 0.06);
  --chip-ambient: rgba(0, 0, 0, 0.18);
  --chip-ripple: rgba(255, 255, 255, 0.4);
}

/* Shared shader tile (2× the reference's 142×46 button), laid out off-screen. */
.interest-metal-source {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 284px;
  height: 92px;
  pointer-events: none;
}

.interest-metal-source canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.interest-chip-metal {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* Hover rim: machined metal ring under a pointer-tracking specular. */
.interest-chip::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(
      80px circle at var(--chip-hover-x) var(--chip-hover-y),
      var(--chip-specular-core) 0%,
      var(--chip-specular-mid) 25%,
      var(--chip-specular-edge) 50%,
      transparent 70%
    ),
    var(--chip-ring);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Specular hairline along the top edge of the ring. */
.interest-chip::after {
  position: absolute;
  top: 3px;
  right: 24px;
  left: 24px;
  z-index: 3;
  height: 1px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--chip-hairline), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.interest-chip-face {
  position: absolute;
  inset: var(--chip-rim);
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  background: var(--chip-face);
  pointer-events: none;
  transition:
    background 150ms ease,
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top sheen (upper third) and bottom shade (lower quarter), hover only. */
.interest-chip-face::before,
.interest-chip-face::after {
  position: absolute;
  right: 0;
  left: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.interest-chip-face::before {
  top: 0;
  height: 33%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--chip-sheen), transparent);
}

.interest-chip-face::after {
  bottom: 0;
  height: 25%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(0deg, var(--chip-shade), transparent);
}

.interest-chip-ripple {
  position: absolute;
  top: calc(var(--chip-ripple-y) - var(--chip-rim));
  left: calc(var(--chip-ripple-x) - var(--chip-rim));
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--chip-ripple) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}

.interest-chip.is-rippling .interest-chip-ripple {
  animation: interest-chip-ripple 600ms ease-out;
}

/* Blurred ambient bloom around the pill, following the pointer. Kept
   visibility:hidden while idle so 160+ blurred layers are not composited. */
.interest-chip-ambient {
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(
    180px circle at calc(var(--chip-hover-x) + 14px) calc(var(--chip-hover-y) + 14px),
    var(--chip-ambient),
    transparent 60%
  );
  filter: blur(28px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 500ms ease,
    visibility 0s linear 500ms;
}

.interest-chip-label {
  position: relative;
  z-index: 3;
  color: inherit;
  text-shadow: var(--chip-ink-shadow);
  transition:
    color 150ms ease,
    filter 150ms ease,
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .interest-chip:is(:hover, .is-hover) {
    color: var(--chip-ink-hover);
    box-shadow: var(--chip-hover-shadow);
  }

  .interest-chip:is(:hover, .is-hover)::before,
  .interest-chip:is(:hover, .is-hover)::after,
  .interest-chip:is(:hover, .is-hover) .interest-chip-face::before,
  .interest-chip:is(:hover, .is-hover) .interest-chip-face::after {
    opacity: 1;
  }

  .interest-chip:is(:hover, .is-hover) .interest-chip-ambient {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 500ms ease,
      visibility 0s;
  }

  .interest-chip:is(:hover, .is-hover) .interest-chip-face {
    background:
      radial-gradient(
        60px circle at calc(var(--chip-hover-x) - var(--chip-rim))
          calc(var(--chip-hover-y) - var(--chip-rim)),
        var(--chip-inner-glow) 0%,
        transparent 60%
      ),
      var(--chip-face-hover);
    box-shadow: var(--chip-bevel);
  }

  .interest-chip:is(:hover, .is-hover) .interest-chip-label {
    filter: var(--chip-ink-glow);
    transform: scale(1.05);
  }

  .interest-chip.is-pressed {
    transform: translateY(3px);
    box-shadow: var(--chip-pressed-shadow);
  }

  .interest-chip.is-pressed::after,
  .interest-chip.is-pressed .interest-chip-face::before {
    opacity: 0.3;
  }

  .interest-chip.is-pressed .interest-chip-ambient {
    opacity: 0.5;
  }

  .interest-chip.is-pressed .interest-chip-face {
    box-shadow: var(--chip-bevel-pressed);
  }

  .interest-chip.is-pressed .interest-chip-label {
    color: var(--chip-ink-active);
    filter: var(--chip-ink-glow-active);
    transform: scale(0.95);
  }
}

.interest-row .interest-chip:nth-child(7n + 1) {
  animation-delay: -0.2s;
}
.interest-row .interest-chip:nth-child(7n + 2) {
  animation-delay: -1.1s;
}
.interest-row .interest-chip:nth-child(7n + 3) {
  animation-delay: -2.3s;
}
.interest-row .interest-chip:nth-child(7n + 4) {
  animation-delay: -3.4s;
}
.interest-row .interest-chip:nth-child(7n + 5) {
  animation-delay: -4.1s;
}
.interest-row .interest-chip:nth-child(7n + 6) {
  animation-delay: -5.2s;
}
.interest-row .interest-chip:nth-child(7n) {
  animation-delay: -2.7s;
}

@media (prefers-reduced-motion: reduce) {
  .interest-chip,
  .interest-symbol-metal {
    animation: none;
  }

  .interest-chip,
  .interest-chip::before,
  .interest-chip::after,
  .interest-chip-face,
  .interest-chip-face::before,
  .interest-chip-face::after,
  .interest-chip-ambient,
  .interest-chip-label {
    transition: none;
  }

  .interest-chip.is-rippling .interest-chip-ripple {
    animation: none;
  }
}

.interest-plain {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--interest-plain-font);
  font-style: normal;
  font-weight: var(--font-weight-300, 300);
  line-height: 1.259;
  text-align: center;
  white-space: nowrap;
}

.interest-cloud-layer-light .interest-plain {
  color: #07111f;
}

.interest-symbol {
  position: relative;
  display: inline-grid;
  width: var(--interest-symbol-size);
  height: var(--interest-symbol-size);
  flex: 0 0 auto;
  color: #ffffff;
  isolation: isolate;
  place-items: center;
}

.interest-cloud-layer-light .interest-symbol {
  color: #07111f;
}

/* Glyph rim: the chips' shader tile (CSS metal gradient as fallback) masked
   to the glyph outline grown by the rim; MarketingSections sets the mask. */
.interest-symbol-metal {
  position: absolute;
  top: calc(-1 * var(--symbol-pad, 0%));
  left: calc(-1 * var(--symbol-pad, 0%));
  z-index: 0;
  display: block;
  width: calc(100% + 2 * var(--symbol-pad, 0%));
  height: calc(100% + 2 * var(--symbol-pad, 0%));
  background: conic-gradient(
    from var(--chip-glow-angle, 0deg),
    #2a2a2a,
    #9a9a9f 16%,
    #f3f3f5 26%,
    #6b6a70 40%,
    #1d1d1f 52%,
    #a7a7b0 64%,
    #e9e6ea 73%,
    #3b3b3f 88%,
    #2a2a2a
  );
  animation: interest-chip-glow 6s linear infinite;
  mask-image: var(--symbol-mask);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
}

.interest-cloud-metal .interest-symbol-metal {
  animation: none;
}

.interest-symbol svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.interest-symbol svg path {
  fill: currentColor;
}

@media (max-width: 560px) {
  .interest-section {
    --interest-cloud-gap: 18px;
    --interest-row-gap: 12px;
    --interest-chip-font: clamp(15px, 4.2vw, 17px);
    --interest-chip-pad-y: 10px;
    --interest-chip-pad-x: 14px;
    --interest-plain-font: clamp(20px, 5.6vw, 24px);
    --interest-symbol-size: 28px;
    /* A proportional fade would swallow most of a ~375px row, so the mobile
       band is a fixed length instead. */
    --interest-cloud-fade: 48px;
    --interest-cloud-shadow-top: 32px;
    --interest-cloud-shadow-bottom: 56px;
  }

  .interest-marquee {
    animation-duration: 22s;
  }
}

/*
 * The content below the interest cloud is rendered once.  Theme differences
 * are painted against the viewport-wide split instead of cloning the entire
 * React tree.  Fixed paint gradients keep every text fragment aligned with
 * the draggable divider, even when the fragment itself is narrow or centred.
 */
.theme-layer-single {
  --split-ink-paint: linear-gradient(
    90deg,
    #ffffff 0 var(--theme-split-x),
    #07111f var(--theme-split-x) 100%
  );
  --split-muted-paint: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.76) 0 var(--theme-split-x),
    rgba(7, 17, 31, 0.7) var(--theme-split-x) 100%
  );
  --split-strong-paint: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0 var(--theme-split-x),
    rgba(7, 17, 31, 0.84) var(--theme-split-x) 100%
  );
  --split-soft-paint: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.66) 0 var(--theme-split-x),
    rgba(7, 17, 31, 0.58) var(--theme-split-x) 100%
  );
  --split-line-paint: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0 var(--theme-split-x),
    rgba(7, 17, 31, 0.16) var(--theme-split-x) 100%
  );
  --split-error-paint: linear-gradient(
    90deg,
    #ffb5b5 0 var(--theme-split-x),
    #9b1c31 var(--theme-split-x) 100%
  );
}

.theme-rest-layers .theme-layer-single .post-interest-sections,
.theme-rest-layers .theme-layer-single .follow-section {
  background: linear-gradient(
    90deg,
    #000000 0 var(--theme-split-x),
    var(--theme-light-surface, #ffffff) var(--theme-split-x) 100%
  );
}

.theme-rest-layers
  .theme-layer-single
  :is(.follow-topline h2, .follow-kicker, .follow-heading, .footer-nav h3) {
  --split-text-paint: var(--split-ink-paint);
}

.theme-rest-layers .theme-layer-single :is(.footer-nav a, .footer-bottom p) {
  --split-text-paint: var(--split-soft-paint);
}

.theme-rest-layers .theme-layer-single :is(.follow-topline a, .follow-legal, .follow-email-label) {
  --split-text-paint: var(--split-strong-paint);
}

.theme-rest-layers .theme-layer-single .follow-form-error {
  --split-text-paint: var(--split-error-paint);
}

.theme-rest-layers .theme-layer-single .footer-email {
  --split-text-paint: var(--split-muted-paint);
}

.theme-rest-layers
  .theme-layer-single
  :is(
    .follow-topline h2,
    .follow-topline a,
    .follow-kicker,
    .follow-heading,
    .follow-legal,
    .follow-email-label,
    .follow-form-error,
    .footer-email,
    .footer-nav h3,
    .footer-nav a,
    .footer-bottom p
  ) {
  color: transparent;
  background-image: var(--split-text-paint);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
  .theme-rest-layers
    .theme-layer-single
    :is(
      .follow-topline h2,
      .follow-topline a,
      .follow-kicker,
      .follow-heading,
      .follow-legal,
      .follow-email-label,
      .follow-form-error,
      .footer-email,
      .footer-nav h3,
      .footer-nav a,
      .footer-bottom p
    ) {
    color: CanvasText;
    background-image: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: CanvasText;
  }
}

.theme-rest-layers .theme-layer-single .follow-panel-overlay {
  background-image:
    linear-gradient(90deg, transparent 0 var(--theme-split-x), #ffffff var(--theme-split-x) 100%),
    linear-gradient(270deg, #45388e 0%, #251a5b 60.1%);
  background-position:
    0 0,
    0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.theme-rest-layers .theme-layer-single .follow-rule {
  background-image: var(--split-line-paint);
  background-position: 0 0;
  background-repeat: no-repeat;
}

.theme-rest-layers .theme-layer-single .site-footer {
  isolation: isolate;
}

.theme-rest-layers .theme-layer-single .site-footer::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: #ffffff url("/assets/pics/白footer.png") 50% / cover no-repeat;
  clip-path: inset(0 0 0 var(--theme-split-x));
  will-change: clip-path;
}

.theme-rest-layers .theme-layer-single .site-footer-inner {
  z-index: auto;
}

.theme-rest-layers .theme-layer-single .footer-bottom {
  border-top-color: transparent;
  border-image: var(--split-line-paint) 1;
}

.theme-rest-layers .theme-layer-single :is(.footer-logo-mark, .footer-social) {
  filter: none;
  mix-blend-mode: difference;
}

@media (prefers-reduced-motion: reduce) {
  .theme-rest-layers .theme-layer-single .site-footer::before {
    will-change: auto;
  }
}

/*
 * Fixed background-clip text disappears intermittently on mobile WebKit.
 * Paint the divider locally for intermediate drag positions, then use real
 * text and surface colours once the divider snaps to either edge.
 */
/*
 * Local, element-relative split paint. Each painted element gets its own
 * --theme-element-split-x in px from ThemeSplitExperience, so the gradient
 * is scroll-attached and sized to the element rather than anchored to the
 * viewport. These rules were mobile-only while desktop used
 * background-attachment: fixed; they now apply at every width. A fixed
 * background that misses a repaint renders background-clip: text glyphs
 * fully transparent — invisible, not merely mis-coloured — and 100vw also
 * drifted from the divider by the scrollbar width. At the two snapped
 * positions the gradient is dropped entirely for a real colour.
 */
.theme-rest-layers
  .theme-layer-single
  :is(.follow-topline h2, .follow-kicker, .follow-heading, .footer-nav h3) {
  --theme-element-dark-color: #ffffff;
  --theme-element-light-color: #07111f;
}

.theme-rest-layers .theme-layer-single :is(.footer-nav a, .footer-bottom p) {
  --theme-element-dark-color: rgba(255, 255, 255, 0.66);
  --theme-element-light-color: rgba(7, 17, 31, 0.58);
}

.theme-rest-layers .theme-layer-single :is(.follow-topline a, .follow-legal, .follow-email-label) {
  --theme-element-dark-color: rgba(255, 255, 255, 0.9);
  --theme-element-light-color: rgba(7, 17, 31, 0.84);
}

.theme-rest-layers .theme-layer-single .follow-form-error {
  --theme-element-dark-color: #ffb5b5;
  --theme-element-light-color: #9b1c31;
}

.theme-rest-layers .theme-layer-single .footer-email {
  --theme-element-dark-color: rgba(255, 255, 255, 0.76);
  --theme-element-light-color: rgba(7, 17, 31, 0.7);
}

.theme-rest-layers
  .theme-layer-single
  :is(
    .follow-topline h2,
    .follow-topline a,
    .follow-kicker,
    .follow-heading,
    .follow-legal,
    .follow-email-label,
    .follow-form-error,
    .footer-email,
    .footer-nav h3,
    .footer-nav a,
    .footer-bottom p
  ) {
  --theme-element-split-x: var(--theme-split-x);

  background-image: linear-gradient(
    90deg,
    var(--theme-element-dark-color) 0 var(--theme-element-split-x),
    var(--theme-element-light-color) var(--theme-element-split-x) 100%
  );
  background-position: 0 0;
  background-attachment: scroll;
  background-size: 100% 100%;
}

.theme-rest-layers .theme-layer-single .follow-panel-overlay {
  --theme-element-split-x: var(--theme-split-x);

  background-image:
    linear-gradient(
      90deg,
      transparent 0 var(--theme-element-split-x),
      #ffffff var(--theme-element-split-x) 100%
    ),
    linear-gradient(270deg, #45388e 0%, #251a5b 60.1%);
  background-attachment: scroll, scroll;
  background-size:
    100% 100%,
    auto;
}

.theme-rest-layers .theme-layer-single .follow-rule {
  --theme-element-split-x: var(--theme-split-x);

  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0 var(--theme-element-split-x),
    rgba(7, 17, 31, 0.16) var(--theme-element-split-x) 100%
  );
  background-attachment: scroll;
  background-size: 100% 100%;
}

.theme-split-snapped-right
  .theme-rest-layers
  .theme-layer-single
  :is(
    .follow-topline h2,
    .follow-topline a,
    .follow-kicker,
    .follow-heading,
    .follow-legal,
    .follow-email-label,
    .follow-form-error,
    .footer-email,
    .footer-nav h3,
    .footer-nav a,
    .footer-bottom p
  ),
.theme-split-snapped-left
  .theme-rest-layers
  .theme-layer-single
  :is(
    .follow-topline h2,
    .follow-topline a,
    .follow-kicker,
    .follow-heading,
    .follow-legal,
    .follow-email-label,
    .follow-form-error,
    .footer-email,
    .footer-nav h3,
    .footer-nav a,
    .footer-bottom p
  ) {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.theme-split-snapped-right
  .theme-rest-layers
  .theme-layer-single
  :is(
    .follow-topline h2,
    .follow-topline a,
    .follow-kicker,
    .follow-heading,
    .follow-legal,
    .follow-email-label,
    .follow-form-error,
    .footer-email,
    .footer-nav h3,
    .footer-nav a,
    .footer-bottom p
  ) {
  color: var(--theme-element-dark-color);
}

.theme-split-snapped-left
  .theme-rest-layers
  .theme-layer-single
  :is(
    .follow-topline h2,
    .follow-topline a,
    .follow-kicker,
    .follow-heading,
    .follow-legal,
    .follow-email-label,
    .follow-form-error,
    .footer-email,
    .footer-nav h3,
    .footer-nav a,
    .footer-bottom p
  ) {
  color: var(--theme-element-light-color);
}

.theme-split-snapped-right .theme-rest-layers .theme-layer-single .follow-panel-overlay {
  background: linear-gradient(270deg, #45388e 0%, #251a5b 60.1%);
}

.theme-split-snapped-left .theme-rest-layers .theme-layer-single .follow-panel-overlay {
  background: #ffffff;
}

.theme-split-snapped-right .theme-rest-layers .theme-layer-single .follow-rule {
  background: rgba(255, 255, 255, 0.18);
}

.theme-split-snapped-left .theme-rest-layers .theme-layer-single .follow-rule {
  background: rgba(7, 17, 31, 0.16);
}

@media (forced-colors: active) {
  .theme-rest-layers
    .theme-layer-single
    :is(
      .follow-topline h2,
      .follow-topline a,
      .follow-kicker,
      .follow-heading,
      .follow-legal,
      .follow-email-label,
      .follow-form-error,
      .footer-email,
      .footer-nav h3,
      .footer-nav a,
      .footer-bottom p
    ) {
    color: CanvasText;
    background-image: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: CanvasText;
  }
}

.global-market-section {
  position: relative;
  min-height: 1068px;
  overflow: hidden;
  color: #f0e3de;
  background: linear-gradient(
    90deg,
    #000000 0 var(--theme-split-x),
    #ffffff var(--theme-split-x) 100%
  );
  isolation: isolate;
}

.global-market-starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.global-market-starfield {
  z-index: -1;
  overflow: hidden;
  opacity: 0.72;
  background-image:
    radial-gradient(circle at 7% 12%, rgba(240, 227, 222, 0.62) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 16% 31%, rgba(183, 156, 244, 0.46) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 27% 17%, rgba(240, 227, 222, 0.38) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 34% 44%, rgba(240, 227, 222, 0.52) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 43% 8%, rgba(183, 156, 244, 0.54) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 52% 26%, rgba(240, 227, 222, 0.34) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 61% 14%, rgba(240, 227, 222, 0.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 69% 39%, rgba(183, 156, 244, 0.4) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 78% 20%, rgba(240, 227, 222, 0.46) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 91% 33%, rgba(240, 227, 222, 0.58) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 11% 62%, rgba(240, 227, 222, 0.44) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 22% 79%, rgba(183, 156, 244, 0.44) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 39% 67%, rgba(240, 227, 222, 0.34) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 48% 88%, rgba(240, 227, 222, 0.54) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 58% 59%, rgba(183, 156, 244, 0.38) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 72% 74%, rgba(240, 227, 222, 0.47) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 84% 57%, rgba(240, 227, 222, 0.35) 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 94% 83%, rgba(183, 156, 244, 0.5) 0 0.8px, transparent 1.4px);
  background-repeat: no-repeat;
  clip-path: inset(0 calc(100% - var(--theme-split-x)) 0 0);
  mask-image: linear-gradient(to bottom, transparent 1%, #000 12%, #000 88%, transparent 99%);
}

.global-market-starfield::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.52;
  background-image:
    radial-gradient(circle, rgba(240, 227, 222, 0.42) 0 0.65px, transparent 1px),
    radial-gradient(circle, rgba(167, 139, 250, 0.38) 0 0.55px, transparent 0.95px),
    radial-gradient(circle, rgba(240, 227, 222, 0.3) 0 0.45px, transparent 0.9px);
  background-position:
    17px 29px,
    61px 47px,
    109px 13px;
  background-size:
    137px 149px,
    211px 193px,
    263px 227px;
}

.global-market-content {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 16vw), 1584px);
  margin: 0 auto;
  padding: 66px 0 62px;
}

.global-market-copy {
  display: flex;
  max-width: 1094px;
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.global-market-copy h2,
.global-market-description,
.global-market-callouts h3,
.global-market-callout-text {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    #f0e3de 0 var(--theme-split-x),
    #191817 var(--theme-split-x) 100%
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.global-market-copy h2 {
  margin: 0;
  font-family: "Noto Sans SC Variable", "Noto Sans SC", sans-serif;
  font-size: clamp(42px, 3.3vw, 56px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.024em;
}

.global-market-title-accent {
  white-space: nowrap;
}

.global-market-description {
  max-width: 760px;
  margin: 18px 0 0;
  opacity: 0.56;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
}

.global-market-visual {
  position: relative;
  width: min(100%, 1438px);
  height: 820px;
  margin: 25px auto 0;
  overflow: visible;
  contain: layout;
}

.global-market-canvas-shell,
.global-market-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.global-market-canvas-shell {
  z-index: 2;
  overflow: visible;
  background: transparent;
}

.global-market-cobe-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82.5vw, 900px);
  height: min(82.5vw, 900px);
  overflow: visible;
  background: transparent;
  transform: translate(-50%, -50%);
}

.global-market-cobe-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
}

.global-market-cobe-host > div {
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
}

.global-market-cobe-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: grab;
  opacity: 0;
  pointer-events: auto;
  touch-action: pan-y;
  border-radius: 50%;
  transition: opacity 480ms ease;
}

.global-market-cobe-canvas.is-ready {
  opacity: 1;
}

.global-market-fallback {
  display: block;
  opacity: 1;
  transition: opacity 240ms ease;
}

.global-market-canvas-shell[data-webgl="ready"] .global-market-fallback {
  opacity: 0;
}

.global-market-fallback-globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(57.5vw, 538px);
  aspect-ratio: 1;
  border: 1px solid rgba(167, 139, 250, 0.05);
  border-radius: 50%;
  background: repeating-radial-gradient(
    ellipse at 50% 50%,
    transparent 0 18px,
    rgba(167, 139, 250, 0.05) 19px 20px
  );
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.global-market-fallback-globe::before,
.global-market-fallback-globe::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(199, 180, 255, 0.05);
  border-radius: 50%;
}

.global-market-fallback-globe::before {
  inset: 4% 28%;
}

.global-market-fallback-globe::after {
  inset: 28% 4%;
}

.global-market-fallback-node {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: #f0e3de;
  border: 2px solid #a78bfa;
  border-radius: 50%;
  box-shadow: 0 0 20px #a78bfa;
}

.global-market-fallback-node-a {
  top: 39%;
  left: 39%;
}

.global-market-fallback-node-b {
  top: 48%;
  right: 38%;
}

.global-market-fallback-node-c {
  right: 45%;
  bottom: 27%;
}

.global-market-fallback-route {
  position: absolute;
  z-index: 1;
  width: 22%;
  height: 12%;
  border-top: 1px solid rgba(215, 199, 255, 0.68);
  border-radius: 50%;
  transform-origin: center;
}

.global-market-fallback-route-a {
  top: 39%;
  left: 39%;
  transform: rotate(12deg);
}

.global-market-fallback-route-b {
  top: 52%;
  left: 46%;
  transform: rotate(42deg);
}

.global-market-event-tooltip {
  --global-market-event-tone-dark: #a78bfa;
  --global-market-event-tone-light: #6c43b2;

  position: absolute;
  top: 31%;
  left: 10%;
  z-index: 6;
  display: block;
  width: min(224px, 42vw);
  color: rgba(240, 227, 222, 0.74);
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgba(14, 13, 17, 0.96) 0 var(--global-market-event-split-x, 100%),
    rgba(255, 255, 255, 0.98) var(--global-market-event-split-x, 100%) 100%
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 100%;
  border: 1px solid rgba(132, 122, 143, 0.3);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(15, 10, 24, 0.16);
  filter: blur(calc((1 - var(--global-market-tooltip-visible, 0)) * 3px));
  opacity: var(--global-market-tooltip-visible, 0);
  pointer-events: none;
  transform: translate(calc(-50% + var(--global-market-event-shift-x, 0px)), calc(-100% - 26px));
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.global-market-event-tooltip::before {
  position: absolute;
  bottom: -26px;
  left: calc(50% - 0.5px - var(--global-market-event-shift-x, 0px));
  width: 1px;
  height: 26px;
  content: "";
  background: linear-gradient(to bottom, rgba(167, 139, 250, 0.58), rgba(167, 139, 250, 0.08));
}

.global-market-event-tooltip[data-placement="right"] {
  transform: translate(calc(26px + var(--global-market-event-shift-x, 0px)), -50%);
}

.global-market-event-tooltip[data-placement="right"]::before {
  top: calc(50% - 0.5px);
  bottom: auto;
  left: calc(-26px - var(--global-market-event-shift-x, 0px));
  width: calc(26px + var(--global-market-event-shift-x, 0px));
  height: 1px;
  background: linear-gradient(to left, rgba(167, 139, 250, 0.58), rgba(167, 139, 250, 0.08));
}

.global-market-event-tooltip[data-placement="left"] {
  transform: translate(calc(-100% - 26px + var(--global-market-event-shift-x, 0px)), -50%);
}

.global-market-event-tooltip[data-placement="left"]::before {
  top: calc(50% - 0.5px);
  right: calc(-26px + var(--global-market-event-shift-x, 0px));
  bottom: auto;
  left: auto;
  width: calc(26px - var(--global-market-event-shift-x, 0px));
  height: 1px;
  background: linear-gradient(to right, rgba(167, 139, 250, 0.58), rgba(167, 139, 250, 0.08));
}

.global-market-event-tooltip[data-tone="negative"] {
  --global-market-event-tone-dark: #eb8a93;
  --global-market-event-tone-light: #a93443;
}

.global-market-event-tooltip[data-tone="positive"] {
  --global-market-event-tone-dark: #6fc6a9;
  --global-market-event-tone-light: #167255;
}

.global-market-event-tooltip[data-tone="neutral"] {
  --global-market-event-tone-dark: #b5a5d8;
  --global-market-event-tone-light: #66517d;
}

.global-market-event-tooltip-header {
  display: flex;
  min-height: 27px;
  padding: 0 10px;
  align-items: center;
  border-bottom: 1px solid rgba(132, 122, 143, 0.22);
}

.global-market-event-tooltip-indicator {
  --global-market-event-local-split-x: calc(
    var(--global-market-event-split-x, 100%) - var(--global-market-event-element-offset-x, 0px)
  );

  width: 3px;
  height: 10px;
  flex: 0 0 auto;
  margin-right: 7px;
  background-image: linear-gradient(
    90deg,
    var(--global-market-event-tone-dark) 0 var(--global-market-event-local-split-x),
    var(--global-market-event-tone-light) var(--global-market-event-local-split-x) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 1px;
}

.global-market-event-tooltip-label,
.global-market-event-tooltip-index,
.global-market-event-tooltip-location,
.global-market-event-tooltip-copy,
.global-market-event-tooltip-direction,
.global-market-event-tooltip-impact {
  --global-market-event-local-split-x: calc(
    var(--global-market-event-split-x, 100%) - var(--global-market-event-element-offset-x, 0px)
  );

  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--global-market-event-text-dark) 0 var(--global-market-event-local-split-x),
    var(--global-market-event-text-light) var(--global-market-event-local-split-x) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.global-market-event-tooltip-label {
  --global-market-event-text-dark: rgba(240, 227, 222, 0.72);
  --global-market-event-text-light: rgba(25, 23, 28, 0.68);

  font-family: "Inter Variable", Inter, monospace;
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.global-market-event-tooltip-index {
  --global-market-event-text-dark: rgba(240, 227, 222, 0.34);
  --global-market-event-text-light: rgba(25, 23, 28, 0.36);

  margin-left: 5px;
  font-family: "Inter Variable", Inter, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.global-market-event-tooltip-location {
  --global-market-event-text-dark: rgba(240, 227, 222, 0.52);
  --global-market-event-text-light: rgba(25, 23, 28, 0.54);

  max-width: 92px;
  margin-left: auto;
  overflow: hidden;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.global-market-event-tooltip-copy {
  --global-market-event-text-dark: #f0e3de;
  --global-market-event-text-light: #18161b;

  display: block;
  padding: 9px 11px 7px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 560;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-market-event-tooltip-meta {
  display: flex;
  padding: 0 11px 9px;
  align-items: center;
  gap: 8px;
  font-family: "Inter Variable", Inter, "Noto Sans SC", sans-serif;
  font-size: 9px;
  line-height: 12px;
}

.global-market-event-tooltip-direction {
  --global-market-event-text-dark: var(--global-market-event-tone-dark);
  --global-market-event-text-light: var(--global-market-event-tone-light);

  font-weight: 600;
}

.global-market-event-tooltip-impact {
  --global-market-event-text-dark: rgba(240, 227, 222, 0.45);
  --global-market-event-text-light: rgba(25, 23, 28, 0.5);

  padding-left: 8px;
  border-left: 1px solid rgba(132, 122, 143, 0.24);
}

.theme-split-snapped-left .global-market-event-tooltip {
  background-color: #fbf9fd;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 242, 250, 0.98));
  background-attachment: scroll;
  background-size: auto;
  border-color: rgba(86, 61, 113, 0.3);
  box-shadow:
    0 12px 28px rgba(54, 38, 72, 0.14),
    inset 3px 0 0 var(--global-market-event-tone-light);
}

.theme-split-snapped-left .global-market-event-tooltip-header {
  background: rgba(91, 61, 126, 0.045);
  border-bottom-color: rgba(83, 60, 109, 0.16);
}

.theme-split-snapped-left .global-market-event-tooltip-impact {
  border-left-color: rgba(83, 60, 109, 0.18);
}

.theme-split-snapped-left .global-market-event-tooltip::before {
  background: linear-gradient(to bottom, rgba(108, 67, 178, 0.52), transparent);
}

.theme-split-snapped-left .global-market-event-tooltip[data-placement="right"]::before {
  background: linear-gradient(to left, rgba(108, 67, 178, 0.52), transparent);
}

.theme-split-snapped-left .global-market-event-tooltip[data-placement="left"]::before {
  background: linear-gradient(to right, rgba(108, 67, 178, 0.52), transparent);
}

/* Event markers: lit core in the event's tone, soft halo, slow sonar ring. */
.global-market-event-node {
  --global-market-node-size: 11px;
  --global-market-node-rgb: 157, 124, 245;

  position: absolute;
  z-index: 5;
  width: var(--global-market-node-size);
  height: var(--global-market-node-size);
  opacity: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 34%,
    #ffffff 0,
    rgba(var(--global-market-node-rgb), 1) 55%,
    rgba(var(--global-market-node-rgb), 0.82) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(20, 19, 24, 0.55),
    0 0 0 3px rgba(var(--global-market-node-rgb), 0.24),
    0 0 16px rgba(var(--global-market-node-rgb), 0.65);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease;
}

.global-market-event-node::before,
.global-market-event-node::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
}

.global-market-event-node::before {
  width: calc(var(--global-market-node-size) * 3.4);
  height: calc(var(--global-market-node-size) * 3.4);
  background: radial-gradient(
    circle,
    rgba(var(--global-market-node-rgb), 0.3) 0,
    rgba(var(--global-market-node-rgb), 0) 68%
  );
}

.global-market-event-node::after {
  width: calc(var(--global-market-node-size) * 2.6);
  height: calc(var(--global-market-node-size) * 2.6);
  border: 1.5px solid rgba(var(--global-market-node-rgb), 0.72);
  opacity: 0;
}

.global-market-event-node[data-tone="negative"] {
  --global-market-node-rgb: 239, 107, 122;
}

.global-market-event-node[data-tone="positive"] {
  --global-market-node-rgb: 67, 184, 146;
}

.global-market-event-node[data-tone="neutral"] {
  --global-market-node-rgb: 181, 165, 216;
}

.global-market-event-node[data-tone="plain"] {
  --global-market-node-size: 7px;
}

.global-market-event-node:not([data-tone="plain"])::after {
  animation: global-market-node-ping 2.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes global-market-node-ping {
  0% {
    opacity: 0.85;
    scale: 0.4;
  }

  70%,
  100% {
    opacity: 0;
    scale: 1.45;
  }
}

.global-market-event-node-1 {
  top: 45%;
  left: 36%;
}

.global-market-event-node-2 {
  top: 53%;
  left: 43%;
}

.global-market-event-node-3 {
  top: 59%;
  left: 59%;
}

.global-market-event-node-4 {
  top: 43%;
  left: 62%;
}

.global-market-event-node-5 {
  top: 38%;
  left: 72%;
}

@supports (position-anchor: --cobe-test) and (left: anchor(center)) {
  .global-market-event-node {
    top: anchor(center);
    right: auto;
    bottom: auto;
    left: anchor(center);
    opacity: var(--global-market-node-visible, 1);
    transform: none;
    translate: -50% -50%;
  }
}

.global-market-callouts {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(100%, 1438px);
  min-height: 230px;
  margin: -115px auto 0;
  padding: 0;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  list-style: none;
  border: 1px solid rgba(240, 227, 222, 0.13);
  border-radius: 0;
  box-shadow: none;
}

.global-market-callouts li {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 228px;
  padding: 42px 39px 32px;
  gap: 0;
  flex-direction: column;
  background: linear-gradient(
    90deg,
    #151414 0 var(--theme-split-x),
    rgba(255, 255, 255, 0.96) var(--theme-split-x) 100%
  );
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.global-market-callouts li + li {
  border-left: 1px solid rgba(240, 227, 222, 0.13);
}

.global-market-callout-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-bottom: 24px;
  align-items: center;
  justify-content: center;
  color: #b69cf4;
}

.global-market-callout-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.global-market-callouts h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 520;
  line-height: 28px;
}

.global-market-callout-text {
  margin: 6px 0 0;
  opacity: 0.55;
  font-size: 15px;
  line-height: 28px;
}

/*
 * Mobile WebKit does not reliably paint fixed backgrounds clipped to text,
 * especially once the content sits below a sticky ancestor.  Keep the split
 * treatment, but resolve it inside each element on touch/small viewports.
 */
/*
 * Local, element-relative split paint. Each painted element gets its own
 * --theme-element-split-x in px from ThemeSplitExperience, so the gradient
 * is scroll-attached and sized to the element rather than anchored to the
 * viewport. These rules were mobile-only while desktop used
 * background-attachment: fixed; they now apply at every width. A fixed
 * background that misses a repaint renders background-clip: text glyphs
 * fully transparent — invisible, not merely mis-coloured — and 100vw also
 * drifted from the divider by the scrollbar width. At the two snapped
 * positions the gradient is dropped entirely for a real colour.
 */
.global-market-copy h2,
.global-market-description,
.global-market-callouts h3,
.global-market-callout-text {
  --theme-element-split-x: var(--theme-split-x);
  --theme-element-dark-color: #f0e3de;
  --theme-element-light-color: #191817;

  background-image: linear-gradient(
    90deg,
    var(--theme-element-dark-color) 0 var(--theme-element-split-x),
    var(--theme-element-light-color) var(--theme-element-split-x) 100%
  );
  background-position: 0 0;
  background-attachment: scroll;
  background-size: 100% 100%;
}

.global-market-callouts li {
  --theme-element-split-x: var(--theme-split-x);

  background-image: linear-gradient(
    90deg,
    #151414 0 var(--theme-element-split-x),
    rgba(255, 255, 255, 0.96) var(--theme-element-split-x) 100%
  );
  background-attachment: scroll;
  background-size: 100% 100%;
}

.theme-split-snapped-right
  :is(
    .global-market-copy h2,
    .global-market-description,
    .global-market-callouts h3,
    .global-market-callout-text
  ),
.theme-split-snapped-left
  :is(
    .global-market-copy h2,
    .global-market-description,
    .global-market-callouts h3,
    .global-market-callout-text
  ) {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.theme-split-snapped-right
  :is(
    .global-market-copy h2,
    .global-market-description,
    .global-market-callouts h3,
    .global-market-callout-text
  ) {
  color: var(--theme-element-dark-color);
}

.theme-split-snapped-left
  :is(
    .global-market-copy h2,
    .global-market-description,
    .global-market-callouts h3,
    .global-market-callout-text
  ) {
  color: var(--theme-element-light-color);
}

.theme-split-snapped-right .global-market-callouts li {
  background-color: #151414;
  background-image: none;
}

.theme-split-snapped-left .global-market-callouts li {
  background-color: rgba(255, 255, 255, 0.96);
  background-image: none;
}

@media (max-width: 900px) {
  .global-market-section {
    min-height: auto;
  }

  .global-market-content {
    width: min(calc(100% - 40px), 1584px);
  }

  .global-market-copy h2 span {
    display: block;
  }

  .global-market-visual {
    height: clamp(560px, 82vw, 720px);
  }

  .global-market-callouts {
    margin-top: -40px;
    grid-template-columns: 1fr;
  }

  .global-market-callouts li {
    min-height: 184px;
    padding: 30px 28px 26px;
  }

  .global-market-callouts li + li {
    border-top: 1px solid rgba(240, 227, 222, 0.13);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .global-market-content {
    width: calc(100% - 28px);
    padding: 54px 0 52px;
  }

  .global-market-copy h2 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .global-market-description {
    max-width: 28em;
  }

  .global-market-visual {
    width: calc(100% + 28px);
    height: 450px;
    margin-left: -14px;
  }

  .global-market-cobe-stage {
    width: min(calc(100vw - 8px), 480px);
    height: min(calc(100vw - 8px), 480px);
  }

  .global-market-event-tooltip {
    display: block;
    width: min(176px, 46vw);
    border-radius: 2px;
    box-shadow: 0 8px 20px rgba(15, 10, 24, 0.14);
  }

  .global-market-event-tooltip-header {
    min-height: 22px;
    padding: 0 7px;
  }

  .global-market-event-tooltip-indicator {
    width: 2px;
    height: 8px;
    margin-right: 5px;
  }

  .global-market-event-tooltip-label {
    font-size: 8px;
  }

  .global-market-event-tooltip-index,
  .global-market-event-tooltip-location {
    font-size: 7px;
  }

  .global-market-event-tooltip-location {
    max-width: 58px;
  }

  .global-market-event-tooltip-copy {
    padding: 6px 8px 4px;
    font-size: 10px;
    line-height: 14px;
  }

  .global-market-event-tooltip-meta {
    padding: 0 8px 6px;
    gap: 5px;
    font-size: 8px;
    line-height: 10px;
  }

  .global-market-event-tooltip-impact {
    padding-left: 5px;
  }

  .global-market-event-node {
    scale: 0.72;
  }

  .global-market-callouts li {
    min-height: 176px;
    padding: 26px 22px 24px;
  }

  .global-market-callout-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 18px;
  }

  .global-market-callouts h3 {
    font-size: 18px;
    line-height: 25px;
  }

  .global-market-callout-text {
    font-size: 13px;
    line-height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-market-fallback,
  .global-market-cobe-canvas,
  .global-market-event-node {
    transition: none;
  }

  .global-market-event-node::after {
    animation: none;
  }

  .global-market-event-tooltip {
    transition: none;
  }
}

@media (forced-colors: active) {
  .global-market-copy h2,
  .global-market-description,
  .global-market-callouts h3,
  .global-market-callout-text {
    color: CanvasText;
    background-image: none;
    -webkit-text-fill-color: CanvasText;
  }

  .global-market-event-tooltip {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }

  .global-market-event-tooltip-label,
  .global-market-event-tooltip-index,
  .global-market-event-tooltip-location,
  .global-market-event-tooltip-copy,
  .global-market-event-tooltip-direction,
  .global-market-event-tooltip-impact {
    color: CanvasText;
    background-image: none;
    -webkit-text-fill-color: CanvasText;
  }

  .global-market-event-tooltip-indicator {
    background: Highlight;
  }
}

.nvidia-insight {
  position: relative;
  overflow: hidden;
  color: var(--theme-ink, #fff);
  background: var(--growth-surface, #000);
}

.nvidia-insight-image {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--theme-asset-filter, none);
}

.nvidia-insight-mask {
  position: absolute;
  inset: 0;
  background: var(--theme-nvidia-mask, linear-gradient(66deg, #000 8.54%, rgba(0, 0, 0, 0) 90.66%));
}

.nvidia-insight-copy {
  position: absolute;
  top: 22%;
  left: 6.7%;
  z-index: 1;
  width: 44%;
  container-type: inline-size;
}

.nvidia-insight-eyebrow {
  margin: 0 0 1.7vw;
  color: var(--theme-soft, rgba(255, 255, 255, 0.68));
  font-size: clamp(11px, 2.6cqw, 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nvidia-insight h2 {
  margin: 0;
  color: var(--theme-ink, #fff);
  font-size: clamp(20px, 5.1cqw, 48px);
  font-weight: 760;
  line-height: 1.24;
  letter-spacing: 0;
}

.nvidia-insight h2 span {
  display: block;
  white-space: nowrap;
}

.nvidia-insight-copy > p:not(.nvidia-insight-eyebrow) {
  margin: 2.2vw 0 0;
  color: var(--theme-muted, rgba(255, 255, 255, 0.78));
  font-size: clamp(13px, 3.2cqw, 25px);
  line-height: 1.55;
}

.nvidia-insight-link {
  display: inline-flex;
  min-height: 32px;
  margin-top: 2.8vw;
  align-items: center;
  gap: 10px;
  color: var(--theme-ink, #fff);
  font-size: clamp(13px, 2.4cqw, 18px);
  font-weight: 700;
}

.nvidia-insight-link svg {
  display: block;
  width: 19px;
  height: 20px;
  flex: 0 0 19px;
}

.follow-section {
  display: grid;
  min-height: clamp(420px, 27.34vw, 620px);
  margin-top: clamp(36px, 4vw, 80px);
  grid-template-columns: 1fr 1fr;
  color: var(--theme-ink, #fff);
  background: var(--growth-surface, #000);
}

.follow-panel,
.follow-photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.follow-panel {
  background: var(--theme-follow-panel-bg, #000000);
}

.follow-panel-image {
  position: absolute;
  inset: 0;
  display: none;
  width: 200%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.follow-panel-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, #45388e 0%, #251a5b 60.1%), var(--color-azure-660, rgba(3, 16, 30, 0.6));
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25.017372131347656px);
}

.theme-layer-light .follow-panel-overlay {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.follow-content {
  position: relative;
  z-index: 1;
  width: min(75.5%, 768px);
  margin: 0 auto;
  padding-top: clamp(56px, 4.1vw, 92px);
  padding-bottom: clamp(40px, 3vw, 72px);
}

.follow-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
}

.follow-topline h2 {
  margin: 0;
  color: var(--theme-ink, #fff);
  font-size: clamp(22px, 1.35vw, 32px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.follow-topline a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--theme-muted-strong, rgba(255, 255, 255, 0.9));
  font-size: clamp(14px, 0.83vw, 18px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.follow-link-arrow {
  width: 13px;
  height: 10px;
  flex: 0 0 13px;
}

.follow-rule {
  height: 1px;
  margin-top: clamp(18px, 1.25vw, 28px);
  background: var(--theme-line, rgba(255, 255, 255, 0.82));
}

.follow-kicker {
  margin: clamp(34px, 2.4vw, 54px) 0 0;
  color: var(--theme-ink, #fff);
  font-size: clamp(13px, 0.72vw, 16px);
  font-weight: 800;
  line-height: 1.3;
}

.follow-heading {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--theme-ink, #fff);
  font-size: clamp(28px, 1.85vw, 42px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: pretty;
}

.follow-form {
  display: grid;
  margin-top: clamp(18px, 1.25vw, 28px);
  grid-template-columns: minmax(0, 1fr) clamp(112px, 6.45vw, 150px);
  gap: clamp(18px, 1.15vw, 26px);
}

.follow-email-label,
.follow-form-error {
  grid-column: 1 / -1;
}

.follow-email-label {
  margin-bottom: calc(clamp(18px, 1.15vw, 26px) * -0.55);
  color: var(--theme-muted-strong, rgba(255, 255, 255, 0.86));
  font-size: clamp(12px, 0.68vw, 14px);
  font-weight: 700;
}

.follow-form-error {
  margin-top: calc(clamp(18px, 1.15vw, 26px) * -0.55);
  color: #ffb5b5;
  font-size: clamp(12px, 0.68vw, 14px);
  font-weight: 650;
}

.follow-form input,
.follow-form button {
  height: clamp(54px, 3.9vw, 72px);
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: clamp(16px, 0.95vw, 20px);
}

.follow-form input {
  min-width: 0;
  padding: 0 20px;
  color: #121820;
  background: rgba(255, 255, 255, 0.96);
}

.follow-form input::placeholder {
  color: rgba(18, 24, 32, 0.48);
}

.follow-form button {
  color: rgba(3, 16, 30, 0.38);
  font-weight: 700;
  background: #e2f0ff;
}

.follow-legal {
  max-width: 720px;
  margin: clamp(14px, 0.95vw, 20px) 0 0;
  color: var(--theme-muted-strong, rgba(255, 255, 255, 0.86));
  font-size: clamp(11px, 0.62vw, 14px);
  line-height: 1.55;
}

.follow-legal a {
  color: #6ca7ff;
}

.follow-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--theme-asset-filter, none);
}

.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--theme-ink, #fff);
  background: var(--theme-footer-bg, #000) url("/assets/pics/黑footer.png") center 34% / auto 132%
    no-repeat;
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(78.2vw, 1780px);
  margin: 0 auto;
  padding: clamp(67px, 4.46vw, 101px) 0 clamp(46px, 3.74vw, 84px);
  grid-template-columns: 320px minmax(0, 1fr);
  column-gap: clamp(160px, 20vw, 460px);
}

.footer-brand-block {
  grid-column: 1;
  width: 320px;
}

.footer-logo-mark {
  display: block;
  width: 139px;
  height: 141px;
  object-fit: contain;
  filter: var(--theme-logo-filter, none);
}

.footer-email {
  /* The brand column is a fixed 320px (.footer-brand-block) while this line's
     font-size tracks the viewport, so from roughly 1984px upward the address
     is wider than the column it lives in. It used to be `white-space: nowrap`,
     which pushed the overflow out of the column and into the layout gap.
     Wrapping instead keeps it inside: below that width the line still fits on
     one row, so nothing changes for ordinary desktop widths. */
  max-width: 100%;
  margin: clamp(32px, 1.98vw, 45px) 0 0;
  color: var(--theme-muted, rgba(255, 255, 255, 0.82));
  font-size: clamp(14px, 0.83vw, 18px);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.footer-socials {
  display: flex;
  gap: 22px;
  margin-top: 24px;
}

.footer-social {
  display: flex;
  width: 36.025px;
  height: 36.025px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.001px solid var(--theme-line, var(--color-white-20, rgba(255, 255, 255, 0.2)));
  border-radius: 18.013px;
}

.footer-social svg {
  display: block;
}

.footer-nav {
  display: grid;
  grid-column: 2;
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(72px, 6.4vw, 148px);
}

.footer-nav h3 {
  margin: 0 0 24px;
  color: var(--theme-ink, #fff);
  font-size: clamp(20px, 1vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.footer-nav a {
  display: block;
  margin-top: 14px;
  color: var(--theme-soft, rgba(255, 255, 255, 0.62));
  font-size: clamp(16px, 0.88vw, 20px);
  line-height: 1.35;
}

.footer-bottom {
  display: flex;
  grid-column: 1 / -1;
  margin-top: clamp(75px, 4.68vw, 108px);
  padding-top: clamp(20px, 1.22vw, 27px);
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--theme-line, rgba(255, 255, 255, 0.55));
}

.footer-bottom p {
  margin: 0;
  color: var(--theme-soft, rgba(255, 255, 255, 0.38));
  font-size: clamp(13px, 0.72vw, 16px);
  line-height: 1.55;
}

.footer-bottom p:last-child {
  text-align: right;
}

.theme-layer-light .brand-mark img,
.theme-layer-light .menu-icon {
  filter: var(--theme-logo-filter);
}

.theme-layer-light .language-icon-wrap svg path,
.theme-layer-light .interest-symbol svg path,
.theme-layer-light .footer-social svg path {
  fill: var(--theme-ink);
}

.theme-layer-light .nvidia-insight {
  --theme-ink: #ffffff;
  --theme-muted: rgba(255, 255, 255, 0.76);
  --theme-muted-strong: rgba(255, 255, 255, 0.9);
  --theme-soft: rgba(255, 255, 255, 0.66);
  --theme-title-start: #ffffff;
  --theme-title-end: rgba(255, 255, 255, 0.35);
}

.theme-layer-light .site-footer {
  border-radius: 0;
  padding-bottom: 2px;
  background: #ffffff url("/assets/pics/白footer.png") 50% / cover no-repeat;
}

.theme-layer-light .site-footer::before {
  content: none;
}

@property --chip-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes interest-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-16.6666667%, 0, 0);
  }
}

@keyframes interest-marquee-right {
  from {
    transform: translate3d(-16.6666667%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes interest-chip-glow {
  from {
    --chip-glow-angle: 0deg;
  }

  to {
    --chip-glow-angle: 360deg;
  }
}

/* Click ripple inside an interest chip, spreading out from the pointer. */
@keyframes interest-chip-ripple {
  from {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }
}

@keyframes language-swap {
  from {
    opacity: 0;
    transform: rotate(-18deg) scale(0.72);
  }

  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media (max-width: 900px) {
  .theme-split-experience {
    --split-chrome-height: 100px;
  }

  .sequence-sticky {
    min-height: 680px;
  }

  .intro-header {
    height: 70px;
    padding: 10px 20px;
  }

  .final-brand {
    top: 42px;
    left: 24px;
  }

  .brand {
    gap: 10px;
    font-size: 22px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .top-actions {
    gap: 8px;
  }

  .control-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: 58px;
    padding: 0 16px;
  }

  .control-bar-title {
    justify-self: center;
    font-size: 20px;
  }

  .control-bar .top-actions {
    gap: 6px;
  }

  .breadcrumb {
    min-height: 42px;
    justify-content: flex-start;
    padding: 0 16px;
    overflow-x: auto;
    font-size: 14px;
    white-space: nowrap;
  }

  .phase-copy-intro,
  .phase-copy-left,
  .phase-copy-center,
  .phase-copy-metrics {
    right: auto;
    left: 24px;
    width: calc(100% - 48px);
    margin: 0;
    text-align: left;
  }

  .phase-copy-intro {
    top: 32%;
  }

  .phase-copy-left,
  .phase-copy-center {
    top: 34%;
  }

  .phase-copy-metrics {
    bottom: 7%;
  }

  .phase-copy h1,
  .phase-copy-left h2,
  .phase-copy-center h2 {
    font-size: 38px;
  }

  .phase-copy-metrics h2 {
    font-size: 32px;
  }

  .phase-copy p {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    font-size: 16px;
  }

  .mini-links {
    right: auto;
    bottom: 72px;
    left: 24px;
    width: calc(100% - 96px);
    gap: 22px;
    transform: none;
  }

  .mini-link {
    font-size: 13px;
  }

  .scroll-cue {
    right: 20px;
    bottom: 22px;
  }

  .interest-section p span {
    white-space: normal;
  }

  .nvidia-insight-copy {
    left: 32px;
    width: 42%;
  }

  .nvidia-insight h2 span {
    white-space: normal;
    text-wrap: balance;
  }

  .follow-section {
    grid-template-columns: 1fr;
  }

  .follow-panel {
    min-height: 520px;
  }

  .follow-photo {
    min-height: 420px;
  }

  .site-footer-inner {
    width: calc(100% - 64px);
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .footer-brand-block {
    grid-column: 1;
    width: auto;
  }

  .footer-nav {
    grid-column: 1;
    width: 100%;
    margin: 46px 0 0;
    column-gap: 36px;
  }

  .footer-bottom {
    margin-top: 52px;
  }
}

@media (max-width: 720px) {
  .phase-copy .launch-title {
    flex-wrap: wrap;
    row-gap: 0.08em;
    white-space: normal;
  }

  .phase-copy-intro h1,
  .phase-copy-left h2,
  .phase-copy-center h2 {
    white-space: normal;
  }
}

@media (max-height: 700px) {
  .sequence-sticky,
  .theme-split-sticky {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  :root {
    /* Login button is the reference at this breakpoint: 12px base, +15%. */
    --chrome-action-font-size: calc(12px * 1.15);
  }

  .theme-split-experience {
    --split-chrome-height: 106px;
  }

  .control-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 0 12px;
  }

  .control-bar-title {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(17px, 5vw, 20px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .control-bar .top-actions,
  .intro-header .top-actions {
    gap: 6px;
  }

  .language-toggle,
  .language-icon-wrap,
  .language-icon-wrap svg {
    width: 28px;
    height: 28px;
  }

  .language-toggle {
    flex-basis: 28px;
  }

  .menu-label {
    gap: 6px;
  }

  .login-button {
    min-height: 34px;
    padding: 0 12px;
  }

  .breadcrumb {
    min-height: auto;
    padding: 8px 10px;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    overflow: visible;
    font-size: clamp(10px, 2.65vw, 12px);
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .breadcrumb a {
    white-space: nowrap;
  }

  .breadcrumb a:not(:last-child)::after {
    margin-left: 6px;
  }

  .phase-copy h1,
  .phase-copy-left h2,
  .phase-copy-center h2,
  .phase-copy-metrics h2 {
    font-size: clamp(26px, 7vw, 30px);
    line-height: 1.12;
  }

  .phase-copy .launch-title {
    flex-wrap: wrap;
    white-space: normal;
  }

  .phase-copy-intro,
  .phase-copy-left,
  .phase-copy-center,
  .phase-copy-metrics {
    left: 20px;
    width: calc(100% - 40px);
  }

  .phase-copy-left h2 {
    white-space: normal;
  }

  .phase-copy p {
    max-width: min(100%, 360px);
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.52;
  }

  .phase-copy-metrics {
    bottom: 9%;
    width: min(352px, calc(100% - 40px));
  }

  .phase-copy-metrics h2 {
    font-size: clamp(22px, 6.2vw, 27px);
  }

  .phase-copy-intro h1,
  .phase-copy-center h2 {
    white-space: normal;
  }

  .primary-link {
    min-width: 138px;
  }

  .mini-links {
    width: calc(100% - 74px);
    gap: 14px;
  }

  .interest-section p br {
    display: none;
  }

  .nvidia-insight {
    min-height: clamp(420px, 112vw, 500px);
  }

  .nvidia-insight-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
  }

  .nvidia-insight-mask {
    background: linear-gradient(76deg, #000 18%, rgba(0, 0, 0, 0.76) 52%, rgba(0, 0, 0, 0.2) 100%);
  }

  .nvidia-insight-copy {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 40px);
    min-height: clamp(420px, 112vw, 500px);
    margin: 0 auto;
    padding: 46px 0 42px;
  }

  .follow-section {
    min-height: 0;
    margin-top: 36px;
  }

  .follow-photo {
    display: none;
  }

  .follow-panel {
    min-height: 0;
  }

  .follow-content {
    width: calc(100% - 40px);
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .follow-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .follow-heading {
    font-size: 27px;
  }

  .follow-form {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 108px);
    gap: 10px;
    align-items: stretch;
  }

  .follow-form input,
  .follow-form button {
    height: 56px;
    font-size: 15px;
  }

  .follow-form input {
    padding: 0 14px;
  }

  .follow-form button {
    width: auto;
    min-width: 0;
    padding: 0 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .site-footer-inner {
    width: calc(100% - 40px);
    padding-top: 29px;
    grid-template-columns: 1fr;
  }

  .footer-logo-mark {
    display: none;
  }

  .footer-brand-block {
    order: 2;
    margin-top: 34px;
  }

  .footer-email {
    margin-top: 0;
  }

  .footer-socials {
    gap: 14px;
    margin-top: 22px;
  }

  .footer-nav {
    order: 1;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 0;
  }

  .footer-nav h3 {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .footer-nav a {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.32;
  }

  .footer-bottom {
    order: 3;
    flex-direction: column;
  }

  .footer-bottom p:last-child {
    text-align: left;
  }
}