.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;
}

: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;
  }
}

/*
 * Site buttons — the one place a button's look is defined.
 *
 * Every action button or button-styled link takes `ui-button` plus one role:
 *
 *   ui-button-primary    filled; the one main action in a group
 *   ui-button-secondary  outlined; the alternative action, and the
 *                        "look at this ›" links in the product sections
 *   ui-button-icon       a circle around an icon (close, previous / next)
 *
 * and, when it needs one, a size:
 *
 *   (none)               46px, the default
 *   ui-button-compact    40px, for the nav bar and inline "look at this ›" links
 *   ui-button-large      56px, for full-width form actions beside 56px fields
 *
 * One shape (a pill), one weight and one motion everywhere. Page CSS only
 * places a button — width, margins, grid cell, a breakpoint's size — and never
 * restates its radius, weight, colours, hover or focus.
 *
 * Colours come from the surface the button sits on, through the custom
 * properties below; nothing else should set them. Dark is the default.
 * A light surface adds `ui-surface-light` to its container. A section that
 * sits under the theme split (one button seen on both a dark and a white
 * page) sets just the properties it needs, e.g. a rim on the primary.
 *
 *   --button-primary-bg / -ink / -line       (default: the page's
 *                                            --theme-button-bg / -ink, so the
 *                                            nav keeps following the split)
 *   --button-secondary-bg / -ink
 *   --button-icon-bg / -ink
 *   --button-line / --button-line-hover      outline and icon rims
 */

:root {
  --button-height: 46px;
  --button-height-compact: 40px;
  --button-height-large: 56px;
  --button-pad-x: 24px;
  --button-pad-x-compact: 18px;
  --button-font-size: 14.5px;
  --button-font-size-compact: 14px;
  --button-font-size-large: 16px;
  --button-weight: 600;
  --button-radius: 999px;
  --button-icon-size: 44px;
  --button-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-surface-light {
  --button-primary-bg: #07111f;
  --button-primary-ink: #ffffff;
  --button-secondary-bg: #ffffff;
  --button-secondary-ink: #07111f;
  --button-icon-bg: rgba(7, 17, 31, 0.05);
  --button-icon-ink: #07111f;
  --button-line: rgba(7, 17, 31, 0.18);
  --button-line-hover: rgba(7, 17, 31, 0.42);
}

.ui-button {
  box-sizing: border-box;
  display: inline-flex;
  min-height: var(--button-height);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--button-pad-x);
  color: var(--_ink);
  font-family: var(--font-sans);
  font-size: var(--button-font-size);
  font-style: normal;
  font-weight: var(--button-weight);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--_bg);
  border: 1px solid var(--_line);
  border-radius: var(--button-radius);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  /* `translate` / `scale`, not `transform`: reveal animations and GSAP
     timelines own `transform` on some of these. */
  transition:
    background-color 200ms var(--button-ease),
    border-color 200ms var(--button-ease),
    color 200ms var(--button-ease),
    translate 200ms var(--button-ease),
    scale 160ms var(--button-ease);
}

.ui-button-primary {
  --_bg: var(--button-primary-bg, var(--theme-button-bg, #f8fbff));
  --_ink: var(--button-primary-ink, var(--theme-button-ink, #07101f));
  --_line: var(--button-primary-line, transparent);
  --_line-hover: var(--_line);
}

.ui-button-secondary {
  --_bg: var(--button-secondary-bg, transparent);
  --_ink: var(--button-secondary-ink, rgba(255, 255, 255, 0.9));
  --_line: var(--button-line, rgba(255, 255, 255, 0.22));
  --_line-hover: var(--button-line-hover, rgba(255, 255, 255, 0.5));
}

.ui-button-icon {
  --_bg: var(--button-icon-bg, rgba(255, 255, 255, 0.1));
  --_ink: var(--button-icon-ink, #ffffff);
  --_line: var(--button-line, rgba(255, 255, 255, 0.22));
  --_line-hover: var(--button-line-hover, rgba(255, 255, 255, 0.5));

  display: inline-grid;
  width: var(--button-icon-size);
  min-width: 0;
  height: var(--button-icon-size);
  min-height: 0;
  padding: 0;
  line-height: 0;
  place-items: center;
}

.ui-button-compact {
  min-height: var(--button-height-compact);
  padding-inline: var(--button-pad-x-compact);
  font-size: var(--button-font-size-compact);
}

.ui-button-large {
  min-height: var(--button-height-large);
  font-size: var(--button-font-size-large);
}

/* Hover tints the fill toward the text colour by the same amount on every
   role, so a filled, an outlined and a dark-filled button all answer alike. */
@media (hover: hover) and (pointer: fine) {
  .ui-button:hover:not(:disabled, [aria-disabled="true"]) {
    background: color-mix(in srgb, var(--_bg) 88%, var(--_ink));
    border-color: var(--_line-hover);
    translate: 0 -1px;
  }
}

.ui-button:active:not(:disabled, [aria-disabled="true"]) {
  scale: 0.97;
  translate: 0 0;
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button {
    transition:
      background-color 200ms var(--button-ease),
      border-color 200ms var(--button-ease),
      color 200ms var(--button-ease);
  }

  .ui-button:hover:not(:disabled, [aria-disabled="true"]),
  .ui-button:active:not(:disabled, [aria-disabled="true"]) {
    scale: none;
    translate: none;
  }
}

@media (forced-colors: active) {
  .ui-button {
    border-color: ButtonText;
  }

  .ui-button-primary {
    color: ButtonFace;
    background: ButtonText;
    forced-color-adjust: none;
  }
}

@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;
}

/* The login button is a compact primary button (buttons.css) whose text is
   the nav chrome's size, so it matches the menu label on the other side. */
.login-button {
  font-size: var(--chrome-action-font-size);
  line-height: var(--chrome-action-line-height);
}

.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%);
}

/* The left half: the founders' bench (loginBench/LoginBench.jsx) on purple,
   centred, a little below the middle. */
.auth-visual {
  position: relative;
  display: flex;
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  padding: clamp(32px, 4vw, 72px) clamp(24px, 3vw, 56px) clamp(56px, 8vh, 112px);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 28%, #7a56f0 0%, #6a46e8 46%, #4f2fc4 100%);
}

.auth-visual .login-bench {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin-top: 6vh;
}

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

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

.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-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;
}

/* A large primary button (buttons.css) as tall as the field beside it. */
.auth-code-row > button {
  height: 58px;
  padding-inline: 16px;
}

.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-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 {
  width: 100%;
  gap: 12px;
}

.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: 40px 24px 64px;
  }

  .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 {
    width: 42px;
    height: 42px;
  }

  .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: "|";
}

/* The market strip: TradingView's own ticker tape, which scrolls by itself.
   Nothing inside it is restyled. The tape draws TradingView's attribution line
   in the bottom 20px of its closed shadow root (a 4px gap, a 16px line); the
   owner asked for it to go (2026-09-30), so the tape is pulled up by those
   20px and the strip clips them. TradingView's free widget licence expects
   that line to stay (README, TradingView section). The hover card opens in
   the top layer, outside the clip. */
.tradingview-ticker {
  /* flow-root keeps the tape's negative margin inside the strip (clip alone
     would let it collapse through), so the strip ends where the tape does. */
  display: flow-root;
  width: 100%;
  min-width: 0;
  overflow: clip;
}

.tradingview-ticker tv-ticker-tape {
  display: block;
  width: 100%;
  margin-bottom: -20px;
}

.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;
}

.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;
}

/* Disabled only while the menu slides out; it is not an unavailable action,
   so it keeps its look instead of dimming like a disabled button. */
.mega-menu-close:disabled {
  opacity: 1;
}

.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);
}

/* The focus shows as the ring round the whole box (above), not as a second
   frame inside it; scoped to the page so the page-wide input focus rule
   further down does not draw one. */
.mega-menu-page .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;
}

/* One invisible grid (MenuPage places each section with grid-row /
   grid-column): the row gap is the gap between items; a title sits 24px
   above its first item, and every row after the first starts 86px below the
   last item of the row before it. */
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 20px;
  padding: 40px 46px 72px;
  border-top: 1px solid var(--menu-line);
}

.mega-menu-section {
  display: grid;
  min-width: 0;
  grid-template-rows: subgrid;
  align-content: start;
}

.mega-menu-section[data-menu-row]:not([data-menu-row="0"]) h2 {
  margin-top: 66px;
}

.mega-menu-section h2 {
  display: block;
  margin: 0 0 4px;
  align-self: end;
  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: grid;
  margin: 0;
  padding: 0;
  grid-row: span var(--menu-items);
  grid-template-rows: subgrid;
  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;
}

/* No taller than the item's own line, so its row stays the height of the
   others. */
.menu-inline-divider {
  display: block;
  width: 1px;
  height: 1.2em;
  background: rgba(255, 255, 255, 0.28);
}

.menu-inline-control .menu-down-icon {
  width: 1.2em;
  height: 1.2em;
}

.menu-more {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  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);
}

/* Loading skeleton: shown only while there are no briefs to show. */
.market-card-bar {
  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-bar:nth-child(2) {
  height: 66px;
}

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

/* The briefs, on the skeleton's lines: 22px meta, a two-line headline in
   66px, a two-line summary in 40px, then one-line briefs. */
.menu-news-meta {
  display: flex;
  height: 22px;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--menu-soft);
  font-size: 13px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.menu-news-tag {
  color: var(--menu-blue);
  font-weight: 600;
}

.menu-news-headline {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.menu-news-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--menu-muted);
  font-size: 15px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.menu-news-briefs {
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--menu-line);
  list-style: none;
}

.menu-news-briefs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
}

.menu-news-briefs li + li {
  border-top: 1px solid var(--menu-line);
}

.menu-news-briefs time {
  color: var(--menu-soft);
  font-size: 13px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.menu-news-briefs a {
  overflow: hidden;
  color: var(--menu-ink);
  font-size: 15px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-news a {
  color: inherit;
  text-decoration: none;
}

.menu-news-briefs a {
  color: var(--menu-ink);
}

.menu-news a:hover,
.menu-news a:focus-visible {
  color: #dfeeff;
}

.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 .menu-arrow-icon {
  width: 17px;
  height: 17px;
}

.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);
}

/* A large primary button (buttons.css), stretched to the field's height. */
.menu-subscribe button {
  min-height: 0;
}

.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 {
    column-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 {
    column-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 {
    column-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;
  }

  /* One column, the sections in the copy's order, each on its own. */
  .mega-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 46px;
    padding: 34px 20px 52px;
  }

  .mega-menu-section {
    display: block;
  }

  .mega-menu-section h2,
  .mega-menu-section[data-menu-row]:not([data-menu-row="0"]) h2 {
    margin: 0 0 16px;
    font-size: 25px;
  }

  .mega-menu-section ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .menu-more {
    margin-top: 24px;
  }

  .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 {
    padding: 0 16px;
  }
}

@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 {
  /* Keep the address whole; on narrow phones it drops below the prefix. */
  white-space: nowrap;
  color: #003cff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.support-submit {
  min-width: 92px;
  margin-top: 6px;
  justify-self: start;
}

.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;
  justify-self: end;
}

.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%;
  }

  .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);
}

/* Titles are pure white on the dark side; the light copy keeps the layer's
   ink. */
.growth-preview-intro h2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: clamp(20px, 2vw, 28px) 0 0;
  color: #ffffff;
  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;
}

/* Two equal buttons (buttons.css); the light copy is a ui-surface-light. */
.growth-preview-cta {
  min-width: 148px;
}

.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-layer-light .growth-preview-intro h2 {
  color: inherit;
}

.growth-preview-highlights h3 {
  margin: 0;
  color: #ffffff;
  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);
  }
}

.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 by the black pills underneath — their shadows and hover
   bloom — shows around the white 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: dark face / light ink on the dark side
 * (.interest-cloud-layer-base), white face / dark 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;
  --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);

  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 {
  /* White face on the light side. No coloured hover lighting here: the owner
     found the purple one ugly, so a hovered pill only lifts (shadow, bevel,
     label scale) and the liquid-metal rim stays as it is. */
  --chip-face: linear-gradient(180deg, #ffffff 0%, #e4e4e9 100%);
  --chip-face-hover: linear-gradient(180deg, #ffffff 0%, #e4e4e9 100%);
  --chip-ink: #6b7280;
  --chip-ink-hover: #6b7280;
  --chip-ink-active: #6b7280;
  --chip-ink-shadow: none;
  --chip-ink-glow: none;
  --chip-ink-glow-active: none;
  --chip-ring: transparent;
  --chip-specular-core: transparent;
  --chip-specular-mid: transparent;
  --chip-specular-edge: transparent;
  --chip-hairline: transparent;
  --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);
  /* The same shadows as the dark side's chips: rest, lift, press and bloom. */
  --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.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: transparent;
  --chip-inner-glow: transparent;
  --chip-ambient: rgba(0, 0, 0, 0.18);
  --chip-ripple: transparent;
}

/* 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-backdrop-light {
  display: block;
  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-backdrop-light {
    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%;
}

/*
 * That paint only reaches as far as each element's own box, and the footer
 * columns are narrower than some of their text: a nowrap heading such as
 * 「产品与解决方案」, or one long word in a link. Text past the box lost its
 * paint, so it vanished while the divider was mid-way. Each box grows to
 * its longest unbreakable run instead; nothing rewraps and the columns keep
 * their width.
 */
.theme-rest-layers .theme-layer-single .footer-nav :is(h3, a) {
  min-width: min-content;
}

.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%;
}

/*
 * The rule above the footer's copyright line, painted the same way. It used
 * the viewport-wide --split-line-paint as a border-image, but a border image
 * is laid out over the element's own box, so the colour change landed at the
 * split percentage of the rule's width rather than under the divider: the
 * dark half stopped short and the light half showed only a stub.
 */
.theme-rest-layers .theme-layer-single .footer-bottom {
  --theme-element-split-x: var(--theme-split-x);

  border-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%
    )
    1;
}

.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);
}

.theme-split-snapped-right .theme-rest-layers .theme-layer-single .footer-bottom {
  border-image: none;
  border-top-color: rgba(255, 255, 255, 0.18);
}

.theme-split-snapped-left .theme-rest-layers .theme-layer-single .footer-bottom {
  border-image: none;
  border-top-color: 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%;
}

/* Titles are pure white on the dark side; the copy under them keeps the
   warm ink. */
.global-market-copy h2,
.global-market-callouts h3 {
  --theme-element-dark-color: #ffffff;
}

.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);
}

.follow-form input {
  min-width: 0;
  padding: 0 20px;
  color: #121820;
  font-family: inherit;
  font-size: clamp(16px, 0.95vw, 20px);
  background: rgba(255, 255, 255, 0.96);
  border: 0;
  border-radius: 6px;
}

.follow-form input::placeholder {
  color: rgba(18, 24, 32, 0.48);
}

.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;
  isolation: isolate;
  overflow: hidden;
  color: var(--theme-ink, #fff);
  background: var(--theme-footer-bg, #000);
}

/* FooterBackdrop: the grid backdrop, drawn at the footer's size. */
.site-footer-backdrop,
.site-footer-backdrop > div,
.site-footer-backdrop-art {
  position: absolute;
  inset: 0;
}

.site-footer-backdrop {
  z-index: -1;
  pointer-events: none;
}

.site-footer-backdrop-art {
  display: block;
  width: 100%;
  height: 100%;
}

/* The light copy shows only where the theme split paints the light side. */
.site-footer-backdrop-light {
  display: none;
  background: #dedede;
}

.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);
  /* Brand | the gap between them | nav. The gap is the part that gives way
     when the nav needs the room, down to 64px; where the nav fits, the
     columns sit where they always have. */
  grid-template-columns: 320px minmax(64px, clamp(160px, 20vw, 460px)) minmax(min-content, 1fr);
}

.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-email-address {
  /* Never split the address at its hyphen. Where the line is too narrow for
     label and address together (small phones, and wide screens where the
     font grows inside the fixed 320px column) the address moves whole onto
     its own row under the label; it is at most 311px at the 18px cap. */
  white-space: nowrap;
}

.footer-socials {
  display: flex;
  gap: 22px;
  margin-top: 24px;
}

.footer-social {
  position: relative;
  isolation: isolate;
  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;
  transition:
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The white that fills the circle from its centre on hover and focus. */
.footer-social::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: #ffffff;
  transform: scale(0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social svg {
  display: block;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-social svg path {
  transition:
    fill 260ms cubic-bezier(0.22, 1, 0.36, 1),
    fill-opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Hover (only where there is a pointer that hovers, so a tap on a phone does
 * not leave the icon lit) and keyboard focus: the circle fills white from its
 * centre, the icon turns black and grows a little, and the circle lifts with
 * a soft glow. Pressing it squeezes it, like the language toggle. Under the
 * theme split the icons blend by difference, so on the light side the same
 * state reads as a dark circle with a light icon.
 */
@media (hover: hover) {
  .footer-social:hover {
    border-color: #ffffff;
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
  }

  .footer-social:hover::before {
    transform: scale(1);
  }

  .footer-social:hover svg {
    transform: scale(1.12);
  }

  .footer-social:hover svg path {
    fill: #000000;
    fill-opacity: 1;
  }
}

.footer-social:focus-visible {
  border-color: #ffffff;
  outline: 2px solid rgba(255, 255, 255, 0.84);
  outline-offset: 4px;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.footer-social:focus-visible::before {
  transform: scale(1);
}

.footer-social:focus-visible svg {
  transform: scale(1.12);
}

.footer-social:focus-visible svg path {
  fill: #000000;
  fill-opacity: 1;
}

.footer-social:active {
  transform: scale(0.92);
  transition-duration: 120ms;
}

/* Reduced motion keeps the colour change and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  .footer-social,
  .footer-social:hover,
  .footer-social:focus-visible,
  .footer-social:active,
  .footer-social svg,
  .footer-social:hover svg,
  .footer-social:focus-visible svg {
    transform: none;
  }

  .footer-social::before {
    opacity: 0;
    transform: none;
    transition: opacity 160ms linear;
  }

  .footer-social:hover::before,
  .footer-social:focus-visible::before {
    opacity: 1;
    transform: none;
  }
}

/* Each column is as wide as its text (the headings never wrap), and the
   three spread across the nav, so the last heading ends exactly where the
   rule above the copyright line ends. The column gap is the least space
   between them. */
.footer-nav {
  display: grid;
  grid-column: 3;
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  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;
  /* A narrow column wraps a link between words, never inside 「最新动态」. */
  word-break: keep-all;
  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;
}

/* Too narrow for the nav beside the brand: stack them, as below 900px. */
@media (max-width: 1180px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    grid-column: 1;
    margin-top: 46px;
  }

  .footer-bottom {
    margin-top: 52px;
  }
}

.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);
}

@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;
  }

  .follow-form input {
    padding: 0 14px;
    font-size: 15px;
  }

  .follow-form button {
    width: auto;
    min-width: 0;
    padding: 0 8px;
  }

  .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;
    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;
  }
}

@media (max-width: 400px) {
  .footer-nav {
    column-gap: 8px;
  }
}

/* The narrowest phones may not fit 「Products and Solutions」 on one line
   beside the other two columns. The first two columns give way first (their
   links wrap); only if that is not enough does the last heading wrap, between
   words, and it still ends where the rule above the copyright ends. */
@media (max-width: 374px) {
  .footer-nav {
    display: flex;
  }

  /* Shrink weights, not a tiny weight on the last column: flexbox absorbs
     only that fraction of the overflow when the weights left sum below 1. */
  .footer-nav > div {
    flex: 0 1000 auto;
  }

  .footer-nav > div:last-child {
    flex-shrink: 1;
  }

  .footer-nav h3 {
    white-space: normal;
    word-break: keep-all;
  }

  .footer-nav > div:last-child h3 {
    text-align: end;
  }
}