:root {
  color-scheme: light dark;
  --bg: #fafafa;
  --text: #21201c;
  --muted: #66645e;
  --faint: #9a9790;
  --button-bg: #0a0a0b;
  --button-bg-hover: #2c2b27;
  --button-border: #0a0a0b;
  --button-text: #ffffff;
  --button-focus: rgba(33, 32, 28, 0.24);
  --button-shadow: rgba(33, 32, 28, 0.15);
  --rule: rgba(33, 32, 28, 0.12);
  --bubble-image: url("./assets/product/speech-bubble-yellow.png?v=20260604-comic-bubbles");
  --bubble-shadow:
    drop-shadow(0 14px 18px rgba(33, 32, 28, 0.16))
    drop-shadow(0 3px 4px rgba(33, 32, 28, 0.1));
  --brand-halo-one: rgba(255, 255, 255, 0.82);
  --brand-halo-two: rgba(33, 32, 28, 0.14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --measure: 600px;
  --gap-section: 92px;
  --gap-heading: 24px;
  --gap-copy: 15px;
  --gap-row: 20px;
  --nav-mark-size: 32px;
  --nav-icon-size: 26px;
  --nav-toggle-size: 20px;
  --media-toggle-size: 40px;
  --media-toggle-orb-size: 30px;
  --nav-text-size: 15px;
  --nav-row-size: 32px;
  --page-inline: 40px;
  /* Space between the viewport edge and the measure column — the most a shot
     can bleed left before it is cut off. body has `overflow-x: hidden`, so
     exceeding it clips silently rather than producing a scrollbar. */
  --shot-gutter: calc(
    (100vw - min(100vw - var(--page-inline), var(--measure))) / 2
  );
  --media-max-width: calc(var(--measure) * 1.85);
  --media-width: clamp(var(--measure), calc(100vw - var(--page-inline)), var(--media-max-width));
  --media-window-width: min(calc(100vw - var(--page-inline)), var(--media-width));
  --media-height: calc(var(--media-width) * 0.5625);
  --media-slot-height: clamp(300px, calc(var(--media-height) * 0.54), 380px);
  --media-pending-height: clamp(104px, calc(var(--media-slot-height) * 0.36), 138px);
  --media-overlap-top: -14px;
  --media-overlap-bottom: -36px;
  /* Guardrail: production no-video navbar-to-hero gap measured at 92px. */
  --no-video-hero-gap: 86px;
}

@font-face {
  font-family: "Gochi Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/gochi-hand.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB",
    "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.ambient-video-layer {
  position: relative;
  z-index: 1;
  width: var(--media-window-width);
  height: var(--media-slot-height);
  max-height: var(--media-pending-height);
  margin: var(--media-overlap-top) 0 var(--no-video-hero-gap) 50%;
  background: transparent;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
  transform: translateX(-50%);
  transform-origin: top center;
  transition:
    max-height 1040ms cubic-bezier(0.16, 1, 0.3, 1),
    margin-bottom 1040ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1040ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms var(--ease);
}

.ambient-video-layer.is-ready {
  max-height: var(--media-slot-height);
  margin-bottom: var(--media-overlap-bottom);
  clip-path: inset(0);
  opacity: 1;
}

.ambient-video-frame {
  position: relative;
  min-height: 0;
  height: var(--media-slot-height);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transform-origin: top center;
  transition:
    opacity 760ms var(--ease),
    transform 1040ms var(--ease);
}

.ambient-video-layer.is-ready .ambient-video-frame {
  opacity: 1;
  transform: translateY(0);
}

.ambient-video-layer::before,
.ambient-video-layer::after {
  position: absolute;
  inset: -1px;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.ambient-video-layer::before {
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 62%, var(--bg) 100%);
  opacity: 0;
  transition: opacity 940ms var(--ease);
}

.ambient-video-layer::after {
  display: none;
}

.ambient-video {
  position: absolute;
  top: calc((var(--media-slot-height) - var(--media-height)) * 0.47);
  left: 50%;
  display: block;
  width: var(--media-width);
  max-width: none;
  height: var(--media-height);
  border: 0;
  filter: none;
  opacity: 0;
  object-fit: cover;
  transform: translateX(-50%) translateY(-10px) scale(1.008);
  transition:
    opacity 860ms var(--ease),
    transform 1120ms var(--ease);
}

.ambient-video-layer.is-ready::before {
  opacity: 1;
}

.ambient-video-layer.is-ready .ambient-video {
  transform: translateX(-50%) translateY(0) scale(1);
}

.ambient-video-layer.is-ready .ambient-video--light {
  opacity: 1;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

.page {
  position: relative;
  z-index: 2;
  width: min(100% - var(--page-inline), var(--measure));
  margin: 0 auto;
  padding: 54px 0 28px;
  flex: 1;
}

.codatta-arrival-banner {
  position: relative;
  z-index: 5;
  width: min(100% - var(--page-inline), 900px);
  margin: 18px auto -20px;
  color: var(--text);
}

.codatta-arrival-banner-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  padding: 16px 14px 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background:
    radial-gradient(
      ellipse at 18% -36%,
      color-mix(in srgb, var(--text) 10%, transparent) 0%,
      transparent 42%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--bg) 82%, var(--text) 12%),
      color-mix(in srgb, var(--bg) 93%, var(--text) 7%)
    );
  box-shadow: 0 18px 42px rgba(33, 32, 28, 0.08);
}

.codatta-arrival-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.codatta-arrival-meaning {
  width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codatta-arrival-kicker {
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
}

.codatta-arrival-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.codatta-arrival-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 180ms var(--ease),
    border-color 180ms var(--ease),
    transform 180ms var(--ease);
}

.codatta-arrival-link:hover,
.codatta-arrival-link:focus-visible {
  background: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  transform: translateY(-1px);
}

.codatta-arrival-dismiss {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  transition:
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    transform 180ms var(--ease);
}

.codatta-arrival-dismiss:hover,
.codatta-arrival-dismiss:focus-visible {
  border-color: var(--text);
  color: var(--text);
  transform: translateY(-1px);
}

/* The masthead is the one row sized by its content rather than by the reading
   measure: brand + the seven nav items need 604px, and /data-marketplace-os
   adds a language switcher for 644px, so holding the row to --measure (600px)
   wrapped the theme toggle onto a second line at every desktop width. It takes
   the width it needs and stays centred on the page, so it never grows off to
   one side; --measure is the floor, the gutter the ceiling. body is
   `overflow-x: hidden`, so a row wider than the gutter would clip in silence. */
.masthead {
  position: relative;
  left: 50%;
  z-index: 3;
  display: flex;
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - var(--page-inline));
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
  margin: -6px 0 20px;
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--nav-row-size) + 12px);
  padding: 6px 10px 6px 6px;
  color: inherit;
  font: inherit;
  perspective: 600px;
  text-decoration: none;
}

.brand-mark-shell {
  position: relative;
  display: inline-flex;
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  transform-origin: 50% 55%;
  will-change: transform;
}

.brand-mark-shell::before {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 42%, var(--brand-halo-one), transparent 35%),
    radial-gradient(circle, var(--brand-halo-two), transparent 68%);
  content: "";
  opacity: 0;
  transform: scale(0.78);
  transition:
    opacity 220ms var(--ease),
    transform 220ms var(--ease);
}

.brand:hover .brand-mark-shell::before,
.brand:focus-visible .brand-mark-shell::before {
  opacity: 0.55;
  transform: scale(1.12);
}

/* Let the wider explainer navigation wrap before it can push the page sideways. */
.nav-links {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-height: calc(var(--nav-row-size) + 12px);
}

.blog-link,
.github-link {
  display: inline-flex;
  min-height: var(--nav-row-size);
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 160ms var(--ease),
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}

.blog-link:hover,
.blog-link:focus-visible,
.github-link:hover,
.github-link:focus-visible,
.blog-link[aria-current="page"] {
  color: var(--text);
}

.blog-link:hover,
.blog-link:focus-visible {
  text-decoration: none;
}

.github-link {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex: 0 0 var(--nav-icon-size);
}

.github-link svg {
  display: block;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex: 0 0 auto;
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  width: var(--nav-toggle-size);
  height: var(--nav-toggle-size);
  flex: 0 0 var(--nav-toggle-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.music-toggle {
  position: relative;
  display: inline-flex;
  width: var(--media-toggle-size);
  height: var(--media-toggle-size);
  flex: 0 0 var(--media-toggle-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: none;
  box-shadow: none;
  transition:
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 160ms var(--ease),
    background-color 160ms var(--ease);
}

.music-toggle::before {
  position: absolute;
  inset: calc((var(--media-toggle-size) - var(--media-toggle-orb-size)) / 2);
  border: 1px solid rgba(33, 32, 28, 0.14);
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 8px 24px rgba(33, 32, 28, 0.06);
  content: "";
  backdrop-filter: blur(14px);
  transition:
    border-color 160ms var(--ease),
    background-color 160ms var(--ease);
}

.music-toggle:hover,
.music-toggle:focus-visible,
.music-toggle[aria-pressed="true"] {
  color: var(--text);
}

.music-toggle:hover::before,
.music-toggle:focus-visible::before,
.music-toggle[aria-pressed="true"]::before {
  border-color: rgba(33, 32, 28, 0.24);
}

.music-toggle:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 3px;
}

.music-toggle:active {
  transform: translateY(1px);
}

.ambient-media-controls {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  left: 75%;
  top: 75%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 520ms var(--ease);
}

.ambient-video-layer.is-ready .ambient-media-controls {
  opacity: 1;
  pointer-events: auto;
}

.ambient-media-controls .music-toggle:active {
  transform: translateY(1px);
}

.control-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  z-index: 4;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
  transition:
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
  white-space: nowrap;
}

.music-toggle:hover .control-tooltip,
.music-toggle:focus-visible .control-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.music-toggle-icon {
  position: absolute;
  inset: calc((var(--media-toggle-size) - 16px) / 2);
  width: 16px;
  height: 16px;
  z-index: 1;
  transition:
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}

.music-toggle-icon-on {
  opacity: 0;
  transform: scale(0.72);
}

.music-toggle[aria-pressed="true"] .music-toggle-icon-off {
  opacity: 0;
  transform: scale(0.72);
}

.music-toggle[aria-pressed="true"] .music-toggle-icon-on {
  opacity: 1;
  transform: scale(1);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--text);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 3px;
}

.theme-toggle:active {
  transform: translateY(1px);
}

.lang-zh {
  display: none;
}

html[data-lang="zh"] .lang-en {
  display: none;
}

html[data-lang="zh"] .lang-zh {
  display: inline;
}

/* The language switch is a link between the two URLs, not a CSS toggle — the Worker
   serves `/data-marketplace-os` and `/zh/data-marketplace-os` from one file and strips
   the other language out of each. `.blog-link` is `inline-flex`, so the `inline` above
   would flatten this one back out of the nav row. */
html[data-lang="zh"] .lang-switch.lang-zh {
  display: inline-flex;
}

.lang-switch {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex: 0 0 var(--nav-icon-size);
}

.lang-switch-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.theme-toggle-icon {
  position: absolute;
  inset: 3px;
  width: 14px;
  height: 14px;
  transition:
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}

.theme-toggle-icon-sun {
  opacity: 0;
  transform: scale(0.74) rotate(-18deg);
}

.theme-toggle-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.brand-word {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-row-size);
  font-size: var(--nav-text-size);
  font-weight: 640;
  line-height: 1;
}

.brand-word-char {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
}

.brand-mark {
  position: absolute;
  inset: 0;
  display: block;
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  max-width: none;
  object-fit: contain;
  transform-origin: 50% 55%;
  filter: invert(1);
  will-change: transform;
}

.section {
  margin-top: var(--gap-section);
}

.intro-section {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.copy {
  display: grid;
  gap: 0;
  max-width: var(--measure);
  color: var(--muted);
}

.statement {
  max-width: var(--measure);
  margin: 0 0 calc(var(--gap-copy) + 8px);
  color: var(--text);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.46;
  text-wrap: balance;
}

.section-kicker {
  margin-bottom: 24px;
  color: var(--faint);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.survey-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

.intro-cta {
  margin-top: 58px;
  gap: 16px;
}

.secondary-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 580;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 4px;
  transition:
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.secondary-link:hover,
.secondary-link:focus-visible {
  color: var(--text);
  text-decoration: none;
  transform: translateX(2px);
}

.secondary-link:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 4px;
}

.secondary-link:active {
  transform: translateY(1px);
}

.systems {
  margin-top: 54px;
}

.launch-timeline {
  width: min(calc(100vw - var(--page-inline)), 820px);
  margin: 104px 0 98px 50%;
  transform: translateX(-50%);
}

.timeline-device {
  position: relative;
  display: grid;
  overflow: visible;
  padding: 0;
}

.timeline-device-header,
.timeline-track,
.timeline-actions {
  position: relative;
  z-index: 1;
}

.timeline-device-header {
  width: min(100%, 620px);
  margin: 0 auto;
  text-align: center;
}

.timeline-device-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.28;
  text-wrap: balance;
}

.timeline-device-header p {
  max-width: 600px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.timeline-track-shell {
  position: relative;
  z-index: 1;
  width: calc(100% - 16px);
  margin: 58px auto 0;
}

.timeline-track {
  --timeline-glow: 0;
  --timeline-line-progress: 1;
  --timeline-progress: 0.08;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-track::before,
.timeline-track::after {
  position: absolute;
  top: 13px;
  right: 14px;
  left: 14px;
  height: 1px;
  content: "";
  transform-origin: left center;
  z-index: 0;
}

.timeline-track::before {
  background: linear-gradient(90deg, var(--text), var(--rule) 62%, transparent);
  opacity: 0.32;
  transform: scaleX(var(--timeline-line-progress));
}

.timeline-track::after {
  background: var(--text);
  opacity: calc(0.68 + (var(--timeline-glow) * 0.18));
  box-shadow: 0 0 calc(16px * var(--timeline-glow)) color-mix(in srgb, var(--text) 26%, transparent);
  transform: scaleX(var(--timeline-progress));
}

.timeline-step {
  --timeline-marker-ring-opacity: 0;
  --timeline-marker-ring-scale: 0.92;
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 32px 26px 0 0;
}

.timeline-step::before {
  position: absolute;
  top: 7px;
  left: 0;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--bg);
  content: "";
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 86%, transparent);
}

.timeline-step::after {
  position: absolute;
  top: 0;
  left: -7px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 1px solid var(--text);
  border-radius: 50%;
  content: "";
  opacity: var(--timeline-marker-ring-opacity);
  pointer-events: none;
  transform: scale(var(--timeline-marker-ring-scale));
}

@media (min-width: 681px) {
  .timeline-step:last-child::before {
    right: 7px;
    left: auto;
  }

  .timeline-step:last-child::after {
    right: 0;
    left: auto;
  }
}

.timeline-step.is-current {
  --timeline-current-ring-opacity: 0.12;
  --timeline-current-ring-scale: 1;
  --timeline-marker-ring-opacity: var(--timeline-current-ring-opacity);
  --timeline-marker-ring-scale: var(--timeline-current-ring-scale);
}

.timeline-step.is-current::before {
  background: var(--text);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--bg) 86%, transparent),
    0 0 0 7px color-mix(in srgb, var(--text) 11%, transparent);
}

.timeline-date {
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.timeline-step h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 640;
  letter-spacing: 0;
  line-height: 1.34;
}

.timeline-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.timeline-sync {
  position: absolute;
  top: var(--timeline-sync-y, 13px);
  left: var(--timeline-sync-x, 8px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 7;
  width: 34px;
  height: 34px;
  margin: 0;
  transform: translate(-50%, -50%);
}

.timeline-progress-previous {
  position: absolute;
  top: var(--timeline-previous-y, 13px);
  left: var(--timeline-previous-x, 8px);
  z-index: 5;
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--text) 42%, transparent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 82%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.timeline-sync-trigger {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bg) 76%, var(--text) 24%) 0 4px,
    color-mix(in srgb, var(--text) 28%, transparent) 4px 5px,
    transparent 5px
  );
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 610;
  letter-spacing: 0;
  line-height: 1.2;
  margin-left: 0;
  opacity: 0.34;
  padding: 0;
  transition:
    background 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease),
    opacity 160ms var(--ease),
    transform 160ms var(--ease);
}

.timeline-sync:hover .timeline-sync-trigger,
.timeline-sync:focus-within .timeline-sync-trigger,
.timeline-sync.is-open .timeline-sync-trigger {
  width: auto;
  min-width: 0;
  height: 30px;
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--text) 4%);
  color: var(--text);
  opacity: 1;
  padding: 7px 11px;
  transform: translateY(-1px);
}

.timeline-sync-trigger span {
  display: block;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition:
    max-width 160ms var(--ease),
    opacity 120ms var(--ease);
}

.timeline-sync:hover .timeline-sync-trigger span,
.timeline-sync:focus-within .timeline-sync-trigger span,
.timeline-sync.is-open .timeline-sync-trigger span {
  max-width: 190px;
  opacity: 1;
}

.timeline-sync-trigger:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 3px;
}

.timeline-sync-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 18px 32px;
  width: min(100%, 640px);
  margin: 28px auto 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  padding: 18px 0 0;
}

.timeline-sync-panel[hidden] {
  display: none;
}

.timeline-progress-summary,
.timeline-progress-payload {
  min-width: 0;
}

.timeline-progress-summary {
  display: grid;
  gap: 14px;
}

.timeline-sync-panel .timeline-sync-meta,
.timeline-sync-panel .timeline-payload-label {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  font-weight: 610;
  line-height: 1.35;
}

.timeline-progress-comparison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.timeline-progress-comparison div {
  min-width: 0;
}

.timeline-progress-comparison dt {
  color: var(--faint);
  font-size: 10px;
  font-weight: 610;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.timeline-progress-comparison dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 640;
  line-height: 1.25;
  white-space: nowrap;
}

.timeline-progress-payload {
  display: grid;
  align-content: start;
  gap: 11px;
}

.timeline-sync-panel ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-sync-panel li {
  min-width: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.42;
}

.timeline-sync-panel a {
  color: inherit;
  text-decoration: none;
}

.timeline-sync-panel a:hover,
.timeline-sync-panel a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.timeline-actions {
  display: grid;
  gap: 24px;
  margin-top: 72px;
}

.timeline-actions-copy {
  width: min(100%, 600px);
  margin: 0 auto;
  text-align: center;
}

.timeline-actions-copy h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 21px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.28;
  text-wrap: balance;
}

.timeline-actions-copy p {
  max-width: 500px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}

.path-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
}

.path-card {
  --path-accent: 96 128 148;
  --path-accent-color: color-mix(in srgb, rgb(var(--path-accent)) 70%, var(--text));
  --path-accent-strong: color-mix(in srgb, rgb(var(--path-accent)) 84%, var(--text));
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 188px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rule) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 94%, var(--text) 3%);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent),
    0 12px 34px color-mix(in srgb, var(--text) 4%, transparent);
  transform-origin: 50% 82%;
  transition:
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease),
    transform 220ms var(--ease);
  will-change: transform;
}

.path-card::before,
.path-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.path-card::before {
  display: none;
}

.path-card::after {
  inset: 1px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
}

.path-card:hover,
.path-card:focus-within {
  border-color: color-mix(in srgb, var(--text) 18%, var(--rule));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
    0 16px 44px color-mix(in srgb, var(--text) 6%, transparent);
  transform: translateY(-2px);
}

.path-card:active {
  transform: translateY(-1px) scale(0.99);
}

.path-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 660;
  letter-spacing: 0;
  line-height: 1.25;
}

.path-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.path-card-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-height: 26px;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  isolation: isolate;
  text-shadow: none;
  transform-origin: left center;
  transition:
    color 120ms var(--ease),
    opacity 120ms var(--ease),
    text-shadow 120ms var(--ease),
    transform 110ms cubic-bezier(0.2, 1, 0.22, 1);
}

.path-card-action::before {
  display: none;
}

.path-card:hover .path-card-action,
.path-card:focus-within .path-card-action {
  color: var(--text);
  text-shadow: none;
}

.path-card-action:hover,
.path-card-action:focus-visible {
  text-decoration: none;
  transform: scale(1.055);
}

.path-card:hover .path-card-action:hover,
.path-card:focus-within .path-card-action:focus-visible {
  color: var(--text);
  opacity: 1;
  text-shadow: none;
}

.path-card-action:hover::before,
.path-card-action:focus-visible::before,
.path-card-action.is-activating::before {
  display: none;
}

.path-card-action.is-activating {
  color: var(--text);
  text-shadow: none;
  transform: scale(1.12);
}

.path-card:hover .path-card-action.is-activating,
.path-card:focus-within .path-card-action.is-activating {
  color: var(--text);
  text-shadow: none;
}

.path-card-action:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 4px;
}

.survey-button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 15px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 13px;
  font-weight: 580;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
  overflow: visible;
  transform-origin: 52% 74%;
  transition:
    transform 160ms var(--ease),
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
  will-change: transform;
}

.survey-button::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(110deg, var(--button-bg) 0%, var(--button-bg-hover) 42%, var(--button-bg) 75%);
  content: "";
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
}

.survey-button::after {
  position: absolute;
  inset: 1px auto 1px 3px;
  width: 26px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent);
  content: "";
  opacity: 0;
  transform: translateX(-8px) skewX(-16deg);
  transition:
    opacity 180ms var(--ease),
    transform 360ms var(--ease);
}

.survey-button-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.survey-button-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.survey-button-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.1);
  opacity: 0;
}

.survey-button-dot:nth-child(1) {
  top: -2px;
  left: 16px;
  background: #ffcf5a;
}

.survey-button-dot:nth-child(2) {
  top: 5px;
  right: 18px;
  background: #8ff3d1;
}

.survey-button-dot:nth-child(3) {
  right: 6px;
  bottom: 3px;
  background: #ffa0c5;
}

.survey-button-dot:nth-child(4) {
  bottom: -2px;
  left: 34px;
  background: #ffffff;
}

.survey-button:hover,
.survey-button:focus-visible {
  background: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  box-shadow: 0 12px 30px var(--button-shadow);
}

.survey-button:hover::before,
.survey-button:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.survey-button:hover::after,
.survey-button:focus-visible::after {
  opacity: 1;
  transform: translateX(104px) skewX(-16deg);
}

.survey-button:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 3px;
}

.survey-button:active {
  transform: translateY(1px);
}

.copy p + p {
  margin-top: var(--gap-copy);
}

.system-list,
.system-copy {
  display: grid;
  gap: 0;
}

.system {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 0;
}

.system + .system {
  margin-top: var(--gap-row);
}

h3 {
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.45;
}

p,
.system-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.56;
  text-wrap: pretty;
}

.explainer-page {
  width: min(100% - var(--page-inline), var(--measure));
  padding-bottom: 72px;
}

.explainer-hero {
  margin-top: 88px;
}

.explainer-title {
  max-width: var(--measure);
  margin-top: 18px;
  color: var(--text);
  font-size: clamp(38px, 5.8vw, 52px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.05;
  text-wrap: balance;
}

.explainer-lede {
  max-width: var(--measure);
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.55;
}

/* The gap is the divider (design-system.md §9.3). This list used to carry a
   bounding rule top and bottom plus one per row — five hairlines for four rows,
   in a page that otherwise rules nothing off. The role pages had already
   dropped them for whitespace; the homepage and /data-marketplace-os were the
   two surfaces left disagreeing. */
.marketplace-flow {
  display: block;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.marketplace-flow li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.marketplace-flow li + li {
  margin-top: var(--gap-row);
}

.marketplace-flow li > span:first-child {
  width: 104px;
  flex: 0 0 104px;
  color: var(--text);
  font-weight: 650;
}

.explainer-hero-actions {
  justify-content: flex-end;
  gap: 16px;
  margin-top: 34px;
}

.explainer-hero-actions + .marketplace-flow {
  margin-top: 38px;
}

.campaign-preview-section {
  margin-top: 58px;
}

.campaign-preview-copy {
  display: grid;
  gap: 12px;
}

.campaign-preview-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 620;
  line-height: 1.3;
}

.campaign-preview-copy p:not(.section-kicker) {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.56;
}

.product-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 94%, white);
  box-shadow: 0 18px 52px color-mix(in srgb, var(--text) 7%, transparent);
  transform-origin: 50% 64%;
}

.product-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.has-product-shot-motion .product-shot-campaign,
.has-product-shot-motion .lineage-shot-screen,
.has-product-shot-motion .lineage-shot-full {
  will-change: transform, opacity, clip-path;
}

/* The shadow is the half of the hover that JS does not drive: deepening it in
   CSS keeps one property off the per-frame path, and it degrades to nothing
   when the parallax script never binds. */
.product-shot {
  transition: box-shadow 200ms var(--ease);
}

.product-shot.is-shot-hovered,
.lineage-shot-cluster.is-shot-hovered .product-shot {
  box-shadow: 0 26px 68px color-mix(in srgb, var(--text) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .product-shot {
    transition: none;
  }
}

/* The shot bleeds left of the measure column, so the space available to it is
   the viewport minus the gutters *plus* that negative shift — subtracting it is
   what the width was missing. Without this the box kept its full 860px while
   the bleed pushed it off-screen between the mobile breakpoint and ~1000px:
   +47px of sideways scroll at 900, +13 at 820. */
.product-shot-campaign {
  /* max() of negatives keeps the smallest magnitude, so the design nudge (-7vw,
     floored at -94px) applies only while the gutter can absorb it. Between 681
     and ~760px it cannot: -7vw is 47.7px against a 40.5px gutter, which put
     7.2px of the shot off-screen. */
  --shot-bleed: max(-94px, -7vw, calc(var(--shot-gutter) * -1));
  /* A bleeding shot starts at the gutter plus its own negative bleed, so the
     room to the far side is the viewport minus that start, minus the margin
     kept on the right. `100vw - page-inline + bleed` instead assumed the box
     started at page-inline/2 — true only below 640px, where the measure
     column already spans the viewport. Above it the surplus gutter pushed the
     right edge off-screen, peaking 8.2px at 968px. */
  width: min(
    860px,
    calc(
      100vw - var(--page-inline) / 2 - var(--shot-gutter) -
        var(--shot-bleed)
    )
  );
  margin-top: 24px;
  margin-left: var(--shot-bleed);
}

.product-section-action {
  justify-content: center;
  width: min(100%, var(--measure));
  margin: 30px auto 0;
}

.product-section-action .survey-button {
  min-width: 154px;
}

/* Same bleed-aware width as .product-shot-campaign above: this cluster was
   +26px past the viewport at 1024 and +47 at 900. */
.lineage-shot-cluster {
  position: relative;
  --shot-bleed: max(-132px, -10vw, calc(var(--shot-gutter) * -1));
  width: min(
    940px,
    calc(
      100vw - var(--page-inline) / 2 - var(--shot-gutter) -
        var(--shot-bleed)
    )
  );
  margin-top: 24px;
  margin-left: var(--shot-bleed);
}

.lineage-shot-screen {
  width: min(760px, 82vw);
}

.lineage-shot-full {
  width: min(360px, 38vw);
  max-height: 620px;
  opacity: 0.96;
  z-index: 1;
}

/* The tall panel overlaps the screen from the right. Both children share one
   grid cell rather than the panel being absolutely positioned, so the cluster
   is sized by its own content: the `min-height: 700px` this replaces was tuned
   to a taller screenshot and stranded ~90px of empty space under the panel once
   the assets were recaptured. Sizing beats a magic number that every future
   recapture has to re-tune. Stacked layout below 680px is untouched. */
@media (min-width: 681px) {
  .lineage-shot-cluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sharing one grid cell means the default `stretch` sized the shorter card to
     the taller one: the screen's image is 499px at this width but the panel
     claims 692 (72 margin + 620 cap), so the screen card carried 182px of its
     own background below the screenshot. Each card is sized by its own image. */
  .lineage-shot-screen,
  .lineage-shot-full {
    grid-area: 1 / 1;
    align-self: start;
  }

  .lineage-shot-full {
    justify-self: end;
    margin-top: 72px;
  }
}

/* Between the stacked layout and ~1080px the screen covers all but a sliver of
   the panel behind it — 122px at 1024, 32px at 900 — and since the asset's own
   right edge is page background, that sliver renders as an empty white card
   rather than a second screen. The panel is decorative (aria-hidden), so drop
   it where it stops reading as one. Below 681px it stacks and is legible again. */
@media (min-width: 681px) and (max-width: 1080px) {
  .lineage-shot-full {
    display: none;
  }
}

.lineage-shot-full img {
  transform: translateY(-4%);
}

.lineage-shot-screen {
  z-index: 2;
}

.explainer-section {
  margin-top: 76px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}

.explainer-section h2 {
  max-width: 620px;
  margin-bottom: 19px;
  color: var(--text);
  font-size: 21px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.3;
  text-wrap: balance;
}

.section-body {
  max-width: 650px;
}

.section-body > p {
  max-width: 650px;
}

.section-body > p + p {
  margin-top: var(--gap-copy);
}

.role-list {
  display: block;
  margin-top: 18px;
}

.role-item {
  padding: 0 0 19px;
}

.role-item + .role-item {
  padding-top: 19px;
}

.role-item h3 {
  font-weight: 620;
}

.role-item p {
  margin-top: 8px;
}

.step-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: marketplace-step;
}

.step-list.is-motion-ready li {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.step-list.is-motion-ready li.is-step-visible {
  opacity: 1;
  transform: translateY(0);
}

.step-list.is-motion-ready li {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.step-list.is-motion-ready li.is-step-visible {
  opacity: 1;
  transform: translateY(0);
}

.step-list li {
  position: relative;
  min-height: 48px;
  padding: 0 0 23px 54px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.56;
  counter-increment: marketplace-step;
}

.step-list li + li {
  padding-top: 1px;
}

.step-list li:not(:last-child)::after {
  position: absolute;
  top: 37px;
  bottom: 7px;
  left: 15px;
  width: 1px;
  background: var(--rule);
  content: "";
  opacity: 1;
  transform: scaleY(1);
  transform-origin: top;
}

.step-list.is-motion-ready li::after {
  transition:
    opacity 360ms var(--ease),
    transform 520ms var(--ease);
}

.step-list.is-motion-ready li:not(.is-step-visible):not(:last-child)::after {
  opacity: 0;
  transform: scaleY(0);
}

.step-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--faint) 42%, transparent);
  border-radius: 999px;
  color: var(--text);
  content: counter(marketplace-step);
  font-size: 12px;
  font-weight: 640;
  line-height: 1;
  transform: scale(1);
  transition:
    border-color 360ms var(--ease),
    transform 420ms var(--ease);
}

.step-list.is-motion-ready li:not(.is-step-visible)::before {
  transform: scale(0.84);
}

.step-list.is-motion-ready li.is-step-visible::before {
  border-color: color-mix(in srgb, var(--text) 38%, var(--rule));
  transform: scale(1);
}

.step-list li > span:first-child {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 590;
}

.lineage-preview-section {
  position: relative;
  margin-top: 84px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}

.lineage-preview-copy {
  display: grid;
  max-width: var(--measure);
  gap: 12px;
}

.lineage-preview-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 620;
  line-height: 1.3;
}

.lineage-preview-copy p:not(.section-kicker) {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.56;
}

.network-badge {
  --badge-bubble-gap: -40px;
  --badge-bubble-offset-x: 0px;
  --badge-bubble-translate-x: -50%;
  position: relative;
  z-index: 1;
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 5px;
  margin: 0 1px;
  padding: 0 8px 0 6px;
  border: 1px solid color-mix(in srgb, var(--rule) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 92%, var(--text) 3%);
  color: var(--text);
  font-size: 13px;
  font-weight: 590;
  line-height: 1;
  isolation: isolate;
  /* Badges are usually spans; the XnY one is an anchor, and the UA sheet underlines
     anchors. Reset here so a badge looks identical whichever element carries it. */
  text-decoration: none;
  transition:
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease),
    background-color 160ms var(--ease);
  vertical-align: text-bottom;
  white-space: nowrap;
  will-change: transform;
}

.payout-badge {
  --badge-bubble-offset-x: -10px;
}

.network-badge:hover,
.network-badge:focus-visible,
.network-badge.is-touch-open,
.network-badge.is-bubble-open {
  z-index: 30;
  border-color: color-mix(in srgb, var(--text) 22%, var(--rule));
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 6%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent),
    0 9px 22px color-mix(in srgb, var(--text) 10%, transparent),
    0 0 22px color-mix(in srgb, #5b8cff 20%, transparent);
}

.network-badge > img,
.network-badge > svg,
.network-badge
  > span:not(.badge-shine):not(.badge-shine-beam):not(.badge-sparkles):not(.badge-sparkle):not(.badge-tooltip-bubble) {
  position: relative;
  z-index: 2;
}

.network-badge img,
.network-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}

/* The XnY mark is solid ink with no brand colour of its own, so unlike the Base and
   Ethereum marks it cannot be a themed file: an <img>-referenced SVG sees neither
   `currentColor` nor the manual `data-theme` toggle, and a `prefers-color-scheme` rule
   inside the file would desync from that toggle. Inlined, it just follows the badge. */
.network-badge svg {
  fill: currentColor;
}

.badge-shine {
  position: absolute;
  inset: 1px;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.badge-shine-beam {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: 50%;
  width: 16px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #ffffff 76%, transparent),
    transparent
  );
  filter: blur(0.5px);
  transform: rotate(18deg);
}

.badge-sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.badge-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 84%, #5b8cff 16%);
  box-shadow: 0 0 8px color-mix(in srgb, #5b8cff 58%, transparent);
}

.badge-sparkle:nth-child(1) {
  left: 16%;
  top: 4px;
}

.badge-sparkle:nth-child(2) {
  left: 42%;
  top: 1px;
}

.badge-sparkle:nth-child(3) {
  right: 22%;
  top: 5px;
}

.badge-sparkle:nth-child(4) {
  right: 8px;
  bottom: 4px;
}

.badge-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + var(--badge-bubble-gap));
  /* `--badge-bubble-offset-x` is the per-badge design nudge (payout badges carry
     -10px). `--badge-bubble-fit-x` is written by chain-badge-motion.js and is
     only ever a viewport correction: the bubble is centred on its badge, so a
     badge near the right edge of the measure column put the box past the
     viewport and the page scrolled sideways — +32px at 680, +23 at 390. Two
     variables rather than one so fitting cannot silently eat the design nudge. */
  left: calc(50% + var(--badge-bubble-offset-x) + var(--badge-bubble-fit-x, 0px));
  z-index: 6;
  box-sizing: border-box;
  display: flex;
  width: min(var(--badge-bubble-width, 236px), calc(100vw - 44px));
  min-height: 202px;
  align-items: flex-start;
  justify-content: center;
  /* Padding tracks the artwork, not the text: the PNG is ~50% transparent margin and
     tail, so the box must be much larger than the visible bubble. These fractions of
     the box (left .21, right .17, top .25, bottom .38) keep the text inside the
     ellipse and clear of the tail — scale them together with the box or text spills
     onto the transparent edge. */
  padding: 51px 53px 82px 65px;
  background-image: var(--bubble-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #202020;
  filter: var(--bubble-shadow);
  font-family: "Gochi Hand", "Comic Sans MS", "Marker Felt", "Chalkboard SE", cursive;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 0.45px 0 rgba(0, 0, 0, 0.28),
    0.35px 0 0 rgba(0, 0, 0, 0.14);
  text-wrap: balance;
  transform: translateX(var(--badge-bubble-translate-x)) translateY(8px) scale(0.78)
    rotate(-1.4deg);
  transform-origin: 55% 94%;
  white-space: normal;
  word-break: normal;
}

.badge-tooltip-bubble--wide {
  min-height: 214px;
  padding: 54px 61px 88px 73px;
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-tooltip-bubble,
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-tooltip-bubble,
:root:not(.has-gsap-badge-motion) .network-badge.is-touch-open .badge-tooltip-bubble,
:root:not(.has-gsap-badge-motion) .network-badge.is-bubble-open .badge-tooltip-bubble {
  animation: badge-bubble-pop-in 260ms cubic-bezier(0.2, 1.56, 0.34, 1) both;
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-shine,
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-shine,
:root:not(.has-gsap-badge-motion) .network-badge.is-shining .badge-shine {
  opacity: 1;
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-shine-beam,
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-shine-beam,
:root:not(.has-gsap-badge-motion) .network-badge.is-shining .badge-shine-beam {
  animation: badge-shine-sweep 680ms var(--ease);
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-sparkle,
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-sparkle,
:root:not(.has-gsap-badge-motion) .network-badge.is-shining .badge-sparkle {
  animation: badge-sparkle-float 620ms var(--ease) both;
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-sparkle:nth-child(2),
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-sparkle:nth-child(2),
:root:not(.has-gsap-badge-motion) .network-badge.is-shining .badge-sparkle:nth-child(2) {
  animation-delay: 40ms;
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-sparkle:nth-child(3),
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-sparkle:nth-child(3),
:root:not(.has-gsap-badge-motion) .network-badge.is-shining .badge-sparkle:nth-child(3) {
  animation-delay: 75ms;
}

:root:not(.has-gsap-badge-motion) .network-badge:hover .badge-sparkle:nth-child(4),
:root:not(.has-gsap-badge-motion) .network-badge:focus-visible .badge-sparkle:nth-child(4),
:root:not(.has-gsap-badge-motion) .network-badge.is-shining .badge-sparkle:nth-child(4) {
  animation-delay: 105ms;
}

@keyframes badge-bubble-pop-in {
  0% {
    opacity: 0;
    transform: translateX(var(--badge-bubble-translate-x)) translateY(10px) scale(0.72)
      rotate(-2deg);
  }

  72% {
    opacity: 1;
    transform: translateX(var(--badge-bubble-translate-x)) translateY(-2px) scale(1.04)
      rotate(0.8deg);
  }

  100% {
    opacity: 1;
    transform: translateX(var(--badge-bubble-translate-x)) translateY(0) scale(1) rotate(0);
  }
}

@keyframes badge-shine-sweep {
  from {
    transform: translateX(-150%) rotate(18deg);
  }

  to {
    transform: translateX(150%) rotate(18deg);
  }
}

@keyframes badge-sparkle-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.2);
  }

  18% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(8px, -14px, 0) scale(0.12);
  }
}

.network-badge:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 2px;
}

.lineage-proof-list {
  display: grid;
  gap: 9px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.lineage-proof-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.45;
}

/* Colour, size and leading come from `.lineage-preview-copy p:not(.section-kicker)`
   above, which outranks this class — only the spacing needs saying. The XnY link inside
   is a `.network-badge`, so it must be left to that component: a `.lineage-substrate a`
   rule here would outrank `.network-badge` (0,1,1 over 0,1,0) and repaint the badge in
   body-copy muted with an underline through it. */
.lineage-substrate {
  margin: 14px 0 0;
}

.lineage-proof-list li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 58%, transparent);
  content: "";
  transform: translateY(-50%);
}

.frontier-list {
  margin-top: 0;
  padding-top: 2px;
}

.final-cta {
  padding-top: 38px;
  padding-bottom: 40px;
  border-top: 0;
  background: transparent;
}

.explainer-actions {
  justify-content: flex-start;
  gap: 16px;
  margin-top: 30px;
}

.compare-page {
  --compare-table-width: min(calc(100vw - var(--page-inline)), 920px);
  width: min(100% - var(--page-inline), var(--measure));
  padding-bottom: 72px;
}

.compare-hero {
  width: min(100%, var(--measure));
  max-width: var(--measure);
  margin-top: 70px;
}

.compare-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.4;
}

.compare-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms var(--ease);
}

.compare-breadcrumb a:hover,
.compare-breadcrumb a:focus-visible {
  color: var(--text);
}

.compare-title {
  margin-top: 24px;
  color: var(--text);
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: balance;
}

.compare-lede {
  max-width: var(--measure);
  margin-top: 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}

.compare-local-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px 12px;
  align-items: baseline;
  margin-top: 32px;
  padding: 12px 0 16px;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.compare-portal-actions {
  justify-content: center;
  margin-top: 42px;
}

.compare-end-portal-actions {
  justify-content: center;
  margin-top: 30px;
}

.compare-end-portal-actions + h2 {
  margin-top: 42px;
}

.compare-portal-actions .survey-button,
.compare-end-portal-actions .survey-button {
  color: var(--button-text);
  text-decoration: none;
}

.compare-local-nav::-webkit-scrollbar {
  display: none;
}

.compare-local-nav span {
  margin-right: 4px;
  color: var(--faint);
}

.compare-local-nav a {
  color: inherit;
  text-decoration: none;
  transition:
    color 160ms var(--ease),
    transform 160ms var(--ease);
}

.compare-local-nav a:hover,
.compare-local-nav a:focus-visible,
.compare-local-nav a[aria-current="page"] {
  color: var(--text);
}

.compare-local-nav a:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 4px;
}

.compare-content {
  display: grid;
  gap: 0;
  width: min(100%, var(--measure));
  max-width: var(--measure);
  margin-top: 52px;
}

.compare-content h2 {
  margin: 54px 0 18px;
  padding-top: 0;
  border-top: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.28;
  text-wrap: balance;
}

.compare-content h3,
.compare-content h4 {
  margin: 34px 0 12px;
  color: var(--text);
  font-size: 16px;
  font-weight: 620;
  line-height: 1.38;
}

.compare-content p,
.compare-content li,
.compare-content td,
.compare-content th,
.compare-content blockquote {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.64;
}

.compare-content p + p,
.compare-content blockquote + p {
  margin-top: var(--gap-copy);
}

.compare-content ul,
.compare-content ol {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding-left: 22px;
}

.compare-content blockquote {
  margin: 20px 0 0;
  padding: 16px 0 16px 18px;
  border-left: 1px solid var(--rule);
}

.compare-content a {
  color: var(--text);
  text-decoration-color: color-mix(in srgb, var(--text) 28%, transparent);
  text-underline-offset: 4px;
}

.compare-cite {
  display: inline-flex;
  align-items: baseline;
  margin-left: 4px;
  color: var(--faint);
  font-size: 0.76em;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transform: translateY(-0.35em);
}

.compare-cite:hover,
.compare-cite:focus-visible {
  color: var(--text);
}

.compare-sources {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.compare-content .compare-sources h2 {
  margin: 0 0 16px;
  padding-top: 0;
  border-top: 0;
}

.compare-source-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.compare-source-list li {
  padding-left: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.compare-content code {
  padding: 1px 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  font-size: 0.92em;
}

.compare-table-wrap {
  width: var(--compare-table-width);
  max-width: calc(100vw - var(--page-inline));
  margin: 20px 0 0 calc((var(--compare-table-width) - 100%) / -2);
  overflow-x: visible;
}

.compare-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid var(--rule);
}

.compare-table th,
.compare-table td {
  min-width: 0;
  padding: 18px clamp(16px, 1.8vw, 26px);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.compare-table th:nth-child(1),
.compare-table td:nth-child(1) {
  width: 21%;
}

.compare-table th:nth-child(2),
.compare-table td:nth-child(2) {
  width: 23%;
}

.compare-table th:nth-child(3),
.compare-table td:nth-child(3),
.compare-table th:nth-child(4),
.compare-table td:nth-child(4) {
  width: 28%;
}

.compare-table th {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.compare-table td {
  font-size: 14px;
}

.footer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  width: min(100% - var(--page-inline), 560px);
  margin: clamp(56px, 7vw, 96px) auto 0;
  padding: 0 0 34px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.brand-kit-entry {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  max-width: var(--measure);
  margin: clamp(58px, 7vw, 92px) auto 0;
  padding: 22px 0;
}

.brand-kit-entry .section-kicker {
  margin: 4px 0 0;
}

.brand-kit-entry h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
}

.brand-kit-entry-copy p {
  max-width: 42ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.54;
}

.brand-kit-entry-link {
  align-self: center;
  white-space: nowrap;
}

.footer p {
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.footnote {
  max-width: 430px;
  margin: 0 auto;
}

.footer-slogan {
  color: var(--muted);
  font-weight: 620 !important;
}

.footer-heart {
  display: inline-block;
  cursor: pointer;
  transform-origin: 50% 58%;
  vertical-align: -0.08em;
  will-change: transform;
}

.footer-heart:focus-visible {
  border-radius: 999px;
  outline: 2px solid var(--button-focus);
  outline-offset: 3px;
}

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

.footnote a:hover,
.footnote a:focus-visible {
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle-icon-sun,
  :root[data-theme="dark"] .theme-toggle-icon-sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  :root:not([data-theme]) .theme-toggle-icon-moon,
  :root[data-theme="dark"] .theme-toggle-icon-moon {
    opacity: 0;
    transform: scale(0.74) rotate(18deg);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0b;
    --text: #f7f6f1;
    --muted: #b2b0aa;
    --faint: #77746d;
    --button-bg: #ffffff;
    --button-bg-hover: #ffffff;
    --button-border: #ffffff;
    --button-text: #0a0a0b;
    --button-focus: rgba(255, 255, 255, 0.34);
    --button-shadow: rgba(255, 255, 255, 0.12);
    --rule: rgba(255, 255, 255, 0.14);
    --bubble-image: url("./assets/product/speech-bubble-yellow-orange-boundary.png?v=20260604-comic-bubbles");
    --bubble-shadow:
      drop-shadow(0 16px 22px rgba(0, 0, 0, 0.38))
      drop-shadow(0 0 16px rgba(173, 91, 16, 0.16));
    --brand-halo-one: rgba(255, 255, 255, 0.22);
    --brand-halo-two: rgba(255, 255, 255, 0.1);
  }

  .brand-mark {
    filter: none;
  }

  .blog-link:hover,
  .blog-link:focus-visible,
  .github-link:hover,
  .github-link:focus-visible,
  .theme-toggle:hover,
  .theme-toggle:focus-visible {
    color: var(--text);
  }

  .survey-button::before,
  .survey-button::after {
    display: none;
  }

  .survey-button-dot {
    background: #0a0a0b;
    box-shadow: none;
  }

  .survey-button:hover,
  .survey-button:focus-visible {
    transform: translateY(-1px);
  }

  :root:not([data-theme]) .ambient-video-layer.is-ready .ambient-video--light {
    opacity: 0;
  }

  :root:not([data-theme]) .ambient-video-layer.is-ready .ambient-video--dark {
    opacity: 1;
  }

  :root:not([data-theme]) .product-shot {
    background: color-mix(in srgb, var(--bg) 91%, #ffffff 5%);
  }

  .music-toggle {
    background: transparent;
    box-shadow: none;
  }

  .music-toggle::before {
    border-color: rgba(255, 255, 255, 0.16);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  .music-toggle:hover,
  .music-toggle:focus-visible,
  .music-toggle[aria-pressed="true"] {
    color: var(--text);
  }

  .music-toggle:hover::before,
  .music-toggle:focus-visible::before,
  .music-toggle[aria-pressed="true"]::before {
    border-color: rgba(255, 255, 255, 0.28);
  }
}

@media (hover: none), (pointer: coarse) {
  .network-badge {
    min-height: 30px;
    margin-block: -3px;
    padding-inline: 8px 10px;
    cursor: pointer;
  }

  .badge-tooltip-bubble {
    --badge-bubble-gap: -38px;
    width: min(var(--badge-bubble-width, 247px), calc(100vw - 28px));
    min-height: 190px;
    /* Horizontal padding matches desktop on purpose: the JS clamps width the same way
       on every pointer type, so a narrower inset here put text over the artwork's
       transparent edge (68/360 = 0.19 against a 0.21 interior — this predated the
       shrink). Only the vertical inset tracks the shorter box. */
    padding: 48px 53px 75px 65px;
    font-size: 13px;
  }

  .badge-tooltip-bubble--wide {
    min-height: 202px;
    padding: 51px 57px 82px 70px;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --text: #21201c;
  --muted: #66645e;
  --faint: #9a9790;
  --button-bg: #0a0a0b;
  --button-bg-hover: #2c2b27;
  --button-border: #0a0a0b;
  --button-text: #ffffff;
  --button-focus: rgba(33, 32, 28, 0.24);
  --button-shadow: rgba(33, 32, 28, 0.15);
  --rule: rgba(33, 32, 28, 0.12);
  --bubble-image: url("./assets/product/speech-bubble-yellow.png?v=20260604-comic-bubbles");
  --bubble-shadow:
    drop-shadow(0 14px 18px rgba(33, 32, 28, 0.16))
    drop-shadow(0 3px 4px rgba(33, 32, 28, 0.1));
  --brand-halo-one: rgba(255, 255, 255, 0.82);
  --brand-halo-two: rgba(33, 32, 28, 0.14);
}

:root[data-theme="light"] .brand-mark {
  filter: invert(1);
}

:root[data-theme="light"] .theme-toggle-icon-sun {
  opacity: 0;
}

:root[data-theme="light"] .theme-toggle-icon-sun {
  transform: scale(0.74) rotate(-18deg);
}

:root[data-theme="light"] .theme-toggle-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

:root[data-theme="light"] .ambient-video-layer.is-ready .ambient-video--light {
  opacity: 1;
}

:root[data-theme="light"] .ambient-video-layer.is-ready .ambient-video--dark {
  opacity: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --text: #f7f6f1;
  --muted: #b2b0aa;
  --faint: #77746d;
  --button-bg: #ffffff;
  --button-bg-hover: #ffffff;
  --button-border: #ffffff;
  --button-text: #0a0a0b;
  --button-focus: rgba(255, 255, 255, 0.34);
  --button-shadow: rgba(255, 255, 255, 0.12);
  --rule: rgba(255, 255, 255, 0.14);
  --bubble-image: url("./assets/product/speech-bubble-yellow-orange-boundary.png?v=20260604-comic-bubbles");
  --bubble-shadow:
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 16px rgba(173, 91, 16, 0.16));
  --brand-halo-one: rgba(255, 255, 255, 0.22);
  --brand-halo-two: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .theme-toggle-icon-moon {
  opacity: 0;
}

:root[data-theme="dark"] .theme-toggle-icon-moon {
  transform: scale(0.74) rotate(18deg);
}

:root[data-theme="dark"] .brand-mark {
  filter: none;
}

:root[data-theme="dark"] .theme-toggle-icon-sun {
  opacity: 1;
}

:root[data-theme="dark"] .theme-toggle-icon-sun {
  transform: scale(1) rotate(0deg);
}

:root[data-theme="dark"] .survey-button::before,
:root[data-theme="dark"] .survey-button::after {
  display: none;
}

:root[data-theme="dark"] .survey-button-dot {
  background: #0a0a0b;
  box-shadow: none;
}

:root[data-theme="dark"] .survey-button:hover,
:root[data-theme="dark"] .survey-button:focus-visible {
  transform: translateY(-1px);
}

:root[data-theme="dark"] .ambient-video-layer.is-ready .ambient-video--light {
  opacity: 0;
}

:root[data-theme="dark"] .ambient-video-layer.is-ready .ambient-video--dark {
  opacity: 1;
}

:root[data-theme="dark"] .product-shot {
  background: color-mix(in srgb, var(--bg) 91%, #ffffff 5%);
}

:root[data-theme="dark"] .music-toggle {
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .music-toggle::before {
  border-color: rgba(255, 255, 255, 0.16);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .music-toggle:hover,
:root[data-theme="dark"] .music-toggle:focus-visible,
:root[data-theme="dark"] .music-toggle[aria-pressed="true"] {
  color: var(--text);
}

:root[data-theme="dark"] .music-toggle:hover::before,
:root[data-theme="dark"] .music-toggle:focus-visible::before,
:root[data-theme="dark"] .music-toggle[aria-pressed="true"]::before {
  border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 680px) {
  :root {
    --measure: 600px;
    --page-inline: 32px;
    --media-overlap-top: -10px;
    --media-overlap-bottom: -22px;
    --media-slot-height: 252px;
    --nav-mark-size: 28px;
    --nav-icon-size: 23px;
    --nav-toggle-size: 18px;
    --nav-text-size: 14px;
    --nav-row-size: 28px;
    --media-toggle-size: 36px;
    --media-toggle-orb-size: 28px;
  }

  .page {
    padding-top: 32px;
    padding-bottom: 46px;
  }

  .codatta-arrival-banner {
    margin-top: 14px;
    margin-bottom: -14px;
  }

  .codatta-arrival-banner-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
  }

  .codatta-arrival-copy {
    grid-column: 1 / -1;
    padding-right: 32px;
  }

  .codatta-arrival-meaning {
    display: -webkit-box;
    max-height: 37px;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .codatta-arrival-link {
    justify-self: start;
  }

  .codatta-arrival-dismiss {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: -4px -4px 0 0;
  }

  .masthead {
    flex-wrap: wrap;
    gap: 9px 14px;
    margin-bottom: 10px;
  }

  .nav-links {
    gap: 9px 13px;
  }

  .brand {
    min-height: 36px;
    padding: 4px 8px 4px 4px;
  }

  .copy p + p {
    margin-top: 13px;
  }

  p,
  .system-copy p {
    font-size: 14.5px;
    line-height: 1.54;
  }

  .statement {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.42;
  }

  .section {
    margin-top: 74px;
  }

  .intro-cta {
    justify-content: flex-start;
    margin-top: 24px;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 11px;
  }

  .systems {
    margin-top: 56px;
  }


  .launch-timeline {
    margin-top: 74px;
    margin-bottom: 42px;
  }

  .timeline-device {
    padding: 0;
  }

  .timeline-device-header {
    width: 100%;
  }

  .timeline-device-header p {
    max-width: 330px;
    line-height: 1.58;
  }

  .timeline-track-shell {
    --timeline-mobile-rail-x: 10px;
    width: 100%;
    margin-top: 46px;
  }

  .timeline-track {
    grid-template-columns: 1fr;
    gap: 22px;
    width: 100%;
    padding-left: 22px;
  }

  .timeline-track::before {
    top: 5px;
    bottom: 5px;
    left: calc(var(--timeline-mobile-rail-x) - 0.5px);
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--text), var(--rule) 70%, transparent);
    transform: scaleY(var(--timeline-line-progress));
    transform-origin: top center;
  }

  .timeline-track::after {
    top: 5px;
    bottom: 5px;
    left: calc(var(--timeline-mobile-rail-x) - 0.5px);
    width: 1px;
    height: auto;
    background: var(--text);
    transform: scaleY(var(--timeline-progress));
    transform-origin: top center;
  }

  .timeline-step {
    padding: 0;
  }

  .timeline-step h3 {
    font-size: 15.5px;
    line-height: 1.3;
  }

  .timeline-step p {
    max-width: 31ch;
    font-size: 13.5px;
    line-height: 1.52;
  }

  .timeline-step::before {
    top: 2px;
    left: -20px;
  }

  .timeline-step::after {
    top: -4px;
    left: -27px;
  }

  .timeline-step.is-current::before {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--bg) 88%, transparent),
      0 0 0 5px color-mix(in srgb, var(--text) 10%, transparent);
  }

  .timeline-step.is-current::after {
    opacity: calc(var(--timeline-current-ring-opacity) * 0.55);
  }

  .timeline-sync-trigger {
    margin-left: 0;
    opacity: 0.22;
  }

  .timeline-sync:hover .timeline-sync-trigger,
  .timeline-sync:focus-within .timeline-sync-trigger,
  .timeline-sync.is-open .timeline-sync-trigger {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--bg) 76%, var(--text) 24%) 0 4px,
      color-mix(in srgb, var(--text) 28%, transparent) 4px 5px,
      transparent 5px
    );
    padding: 0;
    transform: none;
  }

  .timeline-sync:hover .timeline-sync-trigger span,
  .timeline-sync:focus-within .timeline-sync-trigger span,
  .timeline-sync.is-open .timeline-sync-trigger span {
    max-width: 0;
    opacity: 0;
  }

  .timeline-sync {
    justify-content: flex-start;
    transform: translate(-50%, -50%);
  }

  .timeline-sync-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    width: calc(100% - 22px);
    margin: 28px 0 0 22px;
    padding-top: 16px;
  }

  .timeline-progress-comparison {
    width: min(100%, 280px);
  }

  .timeline-actions {
    gap: 20px;
    margin-top: 58px;
  }

  .timeline-actions-copy {
    text-align: left;
  }

  .timeline-actions-copy h3 {
    font-size: 22px;
    line-height: 1.24;
  }

  .timeline-actions-copy p {
    margin: 0;
    max-width: 31ch;
  }

  .path-grid,
  .path-grid--three {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 0;
  }

  .path-card {
    min-height: 0;
    gap: 13px;
    padding: 19px 18px 18px;
  }

  .path-card h3 {
    font-size: 16.5px;
  }

  .path-card p {
    font-size: 14px;
    line-height: 1.54;
  }

  .system {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 2px 0;
  }

  .system-list,
  .system-copy {
    gap: 0;
  }

  .system + .system {
    margin-top: 28px;
  }

  .system h3 {
    font-size: 15.5px;
    line-height: 1.35;
  }

  .section-kicker {
    margin-bottom: 28px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }

  .brand-kit-entry {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 66px;
  }

  .brand-kit-entry .section-kicker {
    margin-bottom: 8px;
  }

  .brand-kit-entry-link {
    justify-self: flex-start;
    margin-top: 4px;
  }

  .footer {
    width: min(100% - var(--page-inline), var(--measure));
    margin-top: 72px;
    padding-bottom: 38px;
  }

  .explainer-page {
    padding-bottom: 54px;
  }

  .explainer-hero {
    margin-top: 68px;
  }

  .explainer-title {
    font-size: 34px;
    line-height: 1.1;
  }

  .explainer-lede {
    margin-top: 24px;
    font-size: 16px;
  }

  .explainer-section {
    margin-top: 64px;
    padding-top: 26px;
  }

  .explainer-section h2 {
    margin-bottom: 16px;
    font-size: 20px;
  }

  .marketplace-flow {
    margin-top: 32px;
  }

  .marketplace-flow li {
    display: block;
  }

  .marketplace-flow li > span:first-child {
    display: block;
    width: auto;
    margin-bottom: 5px;
  }

  .explainer-hero-actions,
  .explainer-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
  }

  .campaign-preview-section {
    margin-top: 46px;
  }

  .product-shot {
    border-radius: 14px;
  }

  .product-shot-campaign,
  .lineage-shot-cluster {
    width: 100%;
    margin-left: 0;
  }

  .lineage-shot-cluster {
    display: grid;
    gap: 14px;
    /* product-shot-reveal.js parks `.lineage-shot-full` at `x: 22` until the
       cluster scrolls into view. Absolutely positioned on desktop, that offset
       has room; stacked full-width here it hangs 22px past the viewport and the
       page scrolls sideways until the reveal lands. `clip` rather than `hidden`
       so this does not become a scroll container. */
    overflow-x: clip;
  }

  .lineage-shot-screen,
  .lineage-shot-full {
    width: 100%;
    max-height: none;
  }

  .lineage-shot-full {
    max-height: 480px;
  }

  .lineage-shot-full img {
    transform: translateY(-2%);
  }

  .product-section-action {
    justify-content: center;
    margin-top: 22px;
  }

  .step-list li {
    padding-left: 44px;
  }

  .step-list li:not(:last-child)::after {
    left: 15px;
  }

  .final-cta {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .explainer-actions {
    margin-top: 24px;
  }

  .compare-page {
    --compare-table-width: 100%;
    width: min(100% - var(--page-inline), var(--measure));
    padding-bottom: 54px;
  }

  .compare-hero {
    margin-top: 58px;
  }

  .compare-title {
    font-size: 32px;
    line-height: 1.12;
  }

  .compare-lede {
    font-size: 16px;
  }

  .compare-local-nav {
    gap: 8px 11px;
  }

  .compare-content {
    margin-top: 46px;
  }

  .compare-content h2 {
    margin-top: 56px;
    font-size: 20px;
  }

  .compare-table-wrap {
    width: 100%;
    margin-left: 0;
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td {
    display: block;
    width: 100%;
  }

  .compare-table {
    border-top: 1px solid var(--rule);
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
  }

  .compare-table td {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    padding: 7px 0;
    border-bottom: 0;
    font-size: 14px;
  }

  .compare-table td:nth-child(1),
  .compare-table td:nth-child(2),
  .compare-table td:nth-child(3),
  .compare-table td:nth-child(4) {
    width: 100%;
  }

  .compare-table td::before {
    color: var(--text);
    content: "";
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
  }

  .compare-table td:nth-child(1)::before {
    content: "Model";
  }

  .compare-table td:nth-child(2)::before {
    content: "Examples";
  }

  .compare-table td:nth-child(3)::before {
    content: "Best fit";
  }

  .compare-table td:nth-child(4)::before {
    content: "Tradeoff";
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-video-layer {
    transition: none;
  }

  .ambient-video-layer.is-ready {
    max-height: var(--media-slot-height);
    margin-bottom: var(--media-overlap-bottom);
    clip-path: inset(0);
    opacity: 1;
  }

  .ambient-video-frame,
  .ambient-video {
    transition: none;
  }

  .ambient-video-layer.is-ready .ambient-video-frame {
    opacity: 1;
    transform: none;
  }

  .network-badge,
  .network-badge:hover,
  .network-badge:focus-visible {
    transform: none;
    transition: none;
  }

  .badge-shine,
  .badge-shine-beam,
  .badge-sparkle,
  .badge-tooltip-bubble {
    animation: none !important;
  }

  .step-list.is-motion-ready li {
    opacity: 1 !important;
    transform: none !important;
  }

  .step-list.is-motion-ready li::before,
  .step-list.is-motion-ready li::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .path-card,
  .path-card:hover,
  .path-card:focus-visible {
    transform: none !important;
    transition: none !important;
  }

  .path-card::before {
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .path-card-action,
  .path-card-action:hover,
  .path-card-action:focus-visible,
  .path-card-action.is-activating {
    transform: none !important;
    transition: none !important;
  }

  .badge-sparkle {
    display: none;
  }

  .network-badge:hover .badge-tooltip-bubble,
  .network-badge:focus-visible .badge-tooltip-bubble,
  .network-badge.is-touch-open .badge-tooltip-bubble {
    opacity: 1 !important;
    transform: translateX(var(--badge-bubble-translate-x)) translateY(0) scale(1) rotate(0) !important;
  }
}

/* Homepage content iteration: footer link row, section link rows, quieter second path-card paragraph. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: center;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
}

.section-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 26px 0 0;
}

/* .systems' 54px was tuned for following the timeline device; when a content
   section precedes it instead, it keeps the page's standard beat. */
.section + .systems {
  margin-top: var(--gap-section);
}

/* Role explainers (/developers, /contributors) are siblings of
   /data-marketplace-os, so they take that page's rhythm rather than the
   homepage's: a hero that clears the masthead, a tighter action row, and
   hairline-ruled sections. Values match .explainer-hero, .explainer-hero-actions,
   and .explainer-section. */
.role-page .intro-section {
  margin-top: 88px;
}

.role-page .intro-cta {
  margin-top: 34px;
}

.role-page .section:not(.intro-section) {
  margin-top: 76px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}

/* Must follow the rules above: same specificity, so source order decides. These
   restate the site's own <=680px reductions, which plain-class selectors cannot
   apply to .role-page. Hero matches .explainer-hero's 68px. */
@media (max-width: 680px) {
  .role-page .intro-section {
    margin-top: 68px;
  }

  .role-page .intro-cta {
    margin-top: 24px;
  }

  .role-page .section:not(.intro-section) {
    margin-top: 74px;
    padding-top: 30px;
  }
}

/* A role page opens each section with its own hairline and kicker, so the list
   sits tight under the heading rather than starting a fresh block of space.
   The wider term column also stops "Clear acceptance criteria" wrapping to
   three lines against a one-line description. The rules this used to reset are
   gone from the base rule now, so only the spacing differs. */
.role-page .marketplace-flow {
  margin-top: 0;
}

/* Two-column only where there is room: <=680px stacks the term over its text,
   and the shared rules above would otherwise pin it to a 138px column. */
@media (min-width: 681px) {
  .role-page .marketplace-flow li {
    gap: 24px;
    align-items: start;
  }

  .role-page .marketplace-flow li > span:first-child {
    width: 138px;
    flex: 0 0 138px;
  }
}

.path-card p + p {
  color: var(--faint);
  font-size: 12.5px;
}

.path-card p a {
  color: var(--muted);
}

.path-card p a:hover,
.path-card p a:focus-visible {
  color: var(--text);
}