/* Site styles (from the Hark prototype). */
:root {
  --x-bg: #ffffff;
  --x-ink: #111113;
  --x-body: #1b1a1d;
  --x-muted: #5e5e66;
  --x-line: #e6e6e8;
  --x-cyan: #c5fcfb;
  --x-cyan-hover: #b3f5f3;
  --x-hover: #f6f6f7;
  --x-pad: 24px;
  /* tabs.com type scale: linear from 480px to 1280px viewports */
  --fs-display-72: clamp(40px, calc(40px + 32 * (100vw - 480px) / 800), 72px);
  --fs-heading-48: clamp(32px, calc(32px + 16 * (100vw - 480px) / 800), 48px);
  --fs-heading-28: clamp(24px, calc(24px + 4 * (100vw - 480px) / 800), 28px);
  --fs-text-20: 20px;
  --fs-text-18: 18px;
  --fs-text-16: 16px;
  --fs-nav-15: 15px;
  --x-text: #1b1d1f;
  --x-text-95: rgba(27, 29, 31, 0.95);
  --x-text-90: rgba(27, 29, 31, 0.9);
  --x-text-50: rgba(17, 19, 20, 0.5);
  /* Theme tokens: light values reproduce the original page exactly */
  --x-surface: #f6f6f7;
  --x-surface-hover: #f1f1f3;
  --x-card-border: transparent;
  --x-shot: #e9e9ec;
  --x-go-bg: #fff;
  --x-go-border: #e6e6e8;
  --x-go-border-hover: #d4d4d8;
  --x-cell-bg: #fff;
  --x-logo-filter: brightness(0);
  --x-logo-opacity: .9;
  --x-dot-cta: rgba(17,17,19,0.05);
  --x-dot-ghost: rgba(17,17,19,0.06);
  --x-ghost-border: transparent;
  --x-signin-border: transparent;
  --x-signin-hover-bg: transparent;
  --x-signin-hover-deco: underline;
  --x-focus-cyan: #111113;
  --x-lead-bg: #FFFFFF;
  --x-lead-border: #E6E6E8;
  --x-lead-ink: #111113;
  --x-lead-ph: #6E6E77;
  --x-lead-ring: #0FA3AE;
  --x-panel-dot: #e6e6e8;
  --x-arc-ink: #111113;
  --x-arc-more: #5e5e66;
  --x-arc-icon-ring: transparent;
  --x-swap-card: #ffffff;
  --x-swap-card-border: #e6e6e8;
  --x-swap-hl: #7fe3e1;
  --x-feed-bg: #111113;
  --x-feed-border: transparent;
  --x-feed-ink: #f4f4f6;
  --x-feed-body: rgba(255, 255, 255, 0.7);
  --x-feed-label: rgba(255, 255, 255, 0.65);
  --x-feed-line: rgba(255, 255, 255, 0.12);
  --x-feed-glow: 0 0 0 1px rgba(197, 252, 251, 0.18), 0 8px 28px rgba(197, 252, 251, 0.16);
  --x-feed-focus: #111113;
  --x-feed-halo: 0 0 0 6px #C5FCFB;
  --x-kpi-card-bg: transparent;
  --x-kpi-card-border: transparent;
  --x-foot-bg: #F6F6F7;
  /* tertiary text, 4.7:1 on the footer */
  --x-foot-tertiary: #6E6E76;
  color-scheme: light;
}
/* Graphite (Bo's charcoal dark theme) */
html[data-theme="dark"] {
  --x-bg: #202125;
  --x-ink: #ECECEF;
  --x-body: #ECECEF;
  --x-muted: #A3A3AD;
  --x-line: #34353B;
  --x-hover: #2C2D33;
  --x-text-95: #A3A3AD;
  --x-text-90: #A3A3AD;
  --x-text-50: #7C7C87;
  --x-surface: #26272C;
  --x-surface-hover: #2C2D33;
  --x-card-border: #34353B;
  --x-shot: #2C2D33;
  --x-go-bg: #2C2D33;
  --x-go-border: #34353B;
  --x-go-border-hover: #4A4B53;
  --x-cell-bg: #202125;
  --x-logo-filter: brightness(0) invert(64%);
  --x-logo-opacity: 1;
  --x-dot-cta: rgba(236,236,239,0.05);
  --x-dot-ghost: rgba(236,236,239,0.06);
  --x-ghost-border: #34353B;
  --x-signin-border: #34353B;
  --x-signin-hover-bg: #2C2D33;
  --x-signin-hover-deco: none;
  --x-focus-cyan: #ECECEF;
  --x-lead-bg: #26272C;
  --x-lead-border: #34353B;
  --x-lead-ink: #ECECEF;
  --x-lead-ph: #7C7C87;
  --x-lead-ring: #8EEAF2;
  --x-panel-dot: #34353B;
  --x-arc-ink: #ECECEF;
  /* #7C7C87 is 3.6:1 on #26272C; lifted to pass AA (4.6:1) */
  --x-arc-more: #8E8E99;
  --x-arc-icon-ring: #34353B;
  --x-swap-card: #2C2D33;
  --x-swap-card-border: #34353B;
  --x-swap-hl: #C5FCFB;
  --x-feed-bg: #26272C;
  --x-feed-border: #34353B;
  --x-feed-ink: #ECECEF;
  --x-feed-body: #A3A3AD;
  --x-feed-label: #A3A3AD;
  --x-feed-line: #34353B;
  --x-feed-glow: none;
  --x-feed-focus: #ECECEF;
  --x-feed-halo: none;
  --x-kpi-card-bg: #26272C;
  --x-kpi-card-border: #34353B;
  --x-foot-bg: #1B1C20;
  /* tertiary text, lifted from #7C7C87 to pass AA on #1B1C20 */
  --x-foot-tertiary: #8E8E99;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--x-bg);
  color: var(--x-body);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font-family: "Archivo", system-ui, sans-serif; }
img { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2 { letter-spacing: -0.03em; margin: 0; }

.x-wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 var(--x-pad); }

/* Menu bar */
.x-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--x-bg);
  border-bottom: 1px solid var(--x-line);
}
.x-bar__in { height: 72px; display: flex; align-items: center; gap: 40px; }
.x-bar__in { position: relative; }
/* Visually hidden home link for keyboard users; keeps a full 44px box, hidden by clip until focused */
.x-skip {
  position: absolute; left: 0; top: 14px;
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px;
  background: var(--x-bg); color: var(--x-ink); font-size: 15px; font-weight: 500;
  clip-path: inset(50%); white-space: nowrap; z-index: 2;
}
.x-skip:focus, .x-skip:focus-visible { clip-path: none; outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
/* find wordmark: Figtree 600 text plus an o-sized gradient dot on the baseline */
.x-logo {
  --x-logo-ink: #111113; --x-logo-dot: #C5FCFB;
  --x-logo-dot-grad: linear-gradient(135deg, #C5FCFB, #8EEAF2);
  display: inline-flex; align-items: baseline; flex: none;
  min-height: 44px; line-height: 44px; white-space: nowrap;
  font-family: "Figtree", system-ui, sans-serif; font-weight: 600;
  font-size: 28px; letter-spacing: -0.02em; color: var(--x-logo-ink);
  border-radius: 8px;
}
.x-logo__dot {
  display: inline-block; flex: none; width: 0.54em; height: 0.54em; border-radius: 50%;
  /* 0.065em gap after the "d", plus 0.02em to offset the wordmark's -0.02em letter-spacing */
  margin-left: 0.085em; background: var(--x-logo-dot); background-image: var(--x-logo-dot-grad);
}
.x-logo__word { display: inline; }
/* Endorsement after the find wordmark: "by hellOOH" */
.x-logo__by {
  display: inline; flex: none; margin-left: 8px; white-space: nowrap;
  font-family: "Archivo", system-ui, sans-serif; font-size: 12px; letter-spacing: 0;
}
@media (min-width: 600px) { .x-logo__by { font-size: 14px; } }
.x-logo.x-logo--foot .x-logo__by { font-size: 16px; }
.x-logo__by-by { font-weight: 400; color: #6E6E77; }
.x-logo__by-name {
  font-weight: 550; font-variation-settings: "wght" 550;
  color: #111113; letter-spacing: -0.02em;
}
html[data-theme="dark"] .x-logo__by-by { color: #9A9AA3; }
html[data-theme="dark"] .x-logo__by-name { color: var(--x-logo-ink); }
.x-logo:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
html[data-theme="dark"] .x-logo {
  --x-logo-ink: #ECECEF; --x-logo-dot: #C5FCFB;
  --x-logo-dot-grad: linear-gradient(135deg, #C5FCFB, #8EEAF2);
}
@media (min-width: 600px) { .x-logo { font-size: 32px; } }
.x-logo.x-logo--foot { display: flex; width: fit-content; font-size: 36px; margin-bottom: 16px; }
.x-links { display: none; }
.x-actions { display: none; }
.x-burger {
  margin-left: auto; width: 44px; height: 44px; margin-right: -9px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.x-burger span {
  display: block; width: 26px; height: 2px; background: var(--x-ink); border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.x-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.x-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.x-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.x-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--x-bg); border-bottom: 1px solid var(--x-line);
  padding: 8px var(--x-pad) 24px;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.x-panel[hidden] { display: none; }
.x-panel ul { list-style: none; margin: 0 0 24px; padding: 0; }
.x-panel li { border-bottom: 1px solid var(--x-line); }
.x-panel li a {
  display: flex; align-items: center; min-height: 60px;
  font-size: 20px; font-weight: 500; color: var(--x-ink); letter-spacing: -0.01em;
}
.x-panel__btns { display: grid; gap: 10px; }

/* Buttons */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 20px; border-radius: 6px;
  font: 500 var(--fs-nav-15)/0.9 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease;
}
/* Create Account: brand pale cyan #C5FCFB dominant, dark ink text */
.x-btn--cyan, .x-feed__btn {
  background-color: #C5FCFB;
  background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 50%, #8EEAF2 100%);
  background-origin: border-box; border-color: transparent; color: #111113;
}
.x-btn--cyan:hover, .x-feed__btn:hover {
  background-color: #B4F6F6;
  background-image: linear-gradient(135deg, #B4F6F6 0%, #B4F6F6 45%, #74DDE9 100%);
  background-origin: border-box;
}
.x-btn--cyan:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-btn--ghost { background: var(--x-bg); border-color: var(--x-ghost-border); }
.x-btn--ghost:hover { background: var(--x-hover); }
.x-btn--outline { background: var(--x-bg); border-color: var(--x-line); }
.x-btn--outline:hover { background: var(--x-hover); }

/* Hero text */
.x-hero { padding-top: 56px; }
.x-eyebrow {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-text-95); margin: 0 0 16px;
}
.x-hero h1 {
  font-weight: 400; font-size: var(--fs-display-72); line-height: 1.1; letter-spacing: -0.04em;
  color: var(--x-ink); max-width: 770px;
}
@media (min-width: 1024px) {
  .x-hero h1 { font-size: clamp(40px, calc(40px + 32 * (100vw - 480px) / 800), 68px); max-width: none; }
  .x-hero h1 .x-grad-text { display: block; white-space: nowrap; }
}
.x-desc {
  font-size: var(--fs-text-18); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em;
  color: var(--x-text-95); max-width: 620px; margin: 24px 0 0;
}
/* Hero email capture */
.x-lead { position: relative; margin-top: 32px; width: 100%; }
.x-lead__form { margin: 0; }
.x-lead__label {
  position: absolute; top: 0; left: 0; display: block; padding: 0; margin: 0; border: 0;
  white-space: nowrap; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.x-lead__field {
  display: flex; align-items: stretch; gap: 4px; width: 100%; max-width: 500px; height: 56px;
  padding: 4px; background: var(--x-lead-bg); border: 1px solid var(--x-lead-border); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.x-lead__field:focus-within { border-color: var(--x-lead-ring); box-shadow: 0 0 0 3px rgba(142, 234, 242, .35); }
.x-lead__input {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 14px;
  background: transparent; border: 0; border-radius: 6px; outline: none;
  font: 400 16px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-lead-ink);
}
.x-lead__input::placeholder { color: var(--x-lead-ph); opacity: 1; }
.x-lead__input:focus, .x-lead__input:focus-visible { outline: none; }
.x-lead .x-lead__btn { flex: none; height: 100%; min-height: 0; padding: 0 22px; color: #111113; white-space: nowrap; }
.x-lead .x-lead__btn:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-lead__done { margin: 0; font-size: var(--fs-text-18); line-height: 1.45; letter-spacing: -0.01em; color: var(--x-ink); }
.x-lead__done:empty { display: none; }
@media (max-width: 599px) {
  .x-lead__field {
    flex-direction: column; gap: 8px; height: auto; max-width: none;
    padding: 0; background: none; border: 0; border-radius: 0;
  }
  .x-lead__field:focus-within { box-shadow: none; }
  .x-lead__input {
    flex: none; height: 52px; background: var(--x-lead-bg);
    border: 1px solid var(--x-lead-border); border-radius: 6px;
  }
  .x-lead__input:focus { border-color: var(--x-lead-ring); box-shadow: 0 0 0 3px rgba(142, 234, 242, .35); }
  .x-lead .x-lead__btn { width: 100%; height: 52px; padding-top: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .x-lead__field { transition: none; } }
/* Footer demo request */
.x-lead--foot { margin-top: 0; max-width: 360px; }
.x-lead--foot .x-lead__field { max-width: 360px; }
.x-lead--foot .x-lead__done { font-size: 16px; }
.x-news__title { margin: 0 0 4px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--x-ink); }
.x-news__sub { margin: 0 0 16px; max-width: 360px; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
@media (max-width: 599px) {
  .x-lead--foot, .x-lead--foot .x-lead__field { max-width: none; }
  .x-lead--foot .x-lead__input, .x-foot .x-lead--foot .x-lead__btn { height: 52px; min-height: 44px; }
}
/* Hero brand search */
.x-lead__search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.x-lead__search .x-lead__input { width: 100%; padding-left: 42px; -webkit-appearance: none; appearance: none; }
.x-lead__search .x-lead__input::-webkit-search-decoration { -webkit-appearance: none; }
.x-lead__icon {
  position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  color: var(--x-lead-ph); pointer-events: none;
}
.x-lead__note { margin: 12px 0 0; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: var(--x-muted); }
.x-lead__note + .x-lead__done:not(:empty) { margin-top: 12px; }
@media (max-width: 599px) {
  .x-lead__search { flex: none; }
  .x-lead__search .x-lead__input { height: 52px; }
}
/* Selected brand: a compact chip inside the search bar */
.x-lead__chip {
  position: absolute; z-index: 1; left: 38px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: calc(100% - 50px);
  padding: 0 2px 0 4px; box-sizing: border-box;
  background: var(--x-hover); border: 1px solid var(--x-lead-border); border-radius: 8px;
  font: 500 15px/1 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-lead-ink);
}
.x-lead__chip[hidden] { display: none; }
.x-lead__chip .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-lead__chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-lead__chip-x {
  position: relative; flex: none; width: 24px; height: 24px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 5px; color: var(--x-muted); cursor: pointer;
}
.x-lead__chip-x::before { content: ""; position: absolute; inset: -10px -6px; }
.x-lead__chip-x:hover { color: var(--x-lead-ink); background: var(--x-lead-bg); }
.x-lead__chip-x:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 0; }
.x-lead__chip-x svg { width: 12px; height: 12px; }
.x-lead__search.has-chip .x-lead__input::placeholder { color: transparent; }

/* Hero image */
.x-media { position: relative; margin-top: 56px; border-radius: 6px; overflow: hidden; }
.x-media > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%;
  border-radius: 6px;
}

/* Logo section */
.x-logos { padding: 80px 0 96px; }
.x-logos h2 {
  font-weight: 350; font-size: var(--fs-text-20); line-height: 1.45; letter-spacing: -0.02em;
  color: #8E8F96; max-width: 640px;
}
html[data-theme="dark"] .x-logos h2 { color: #9A9BA2; }
@media (min-width: 1024px) {
  .x-logos h2 {
    font-size: 26px; font-weight: 450; line-height: 1.25; letter-spacing: -0.022em;
    max-width: 760px; text-wrap: balance;
  }
}
@media (min-width: 1100px) {
  .x-logos h2 { max-width: none; white-space: nowrap; font-size: min(26px, calc((100vw - 2 * var(--x-pad)) / 42)); }
}
.x-band {
  margin: 32px auto 0; max-width: 1600px; overflow: hidden;
  border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.x-row { overflow: hidden; }
.x-row + .x-row { border-top: 1px solid var(--x-line); }
.x-track {
  display: flex; width: max-content; animation: x-left 40s linear infinite;
  will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden;
}
.x-row--rev .x-track { animation-name: x-right; animation-duration: 48s; }
.x-band:hover .x-track, .x-band.is-paused .x-track { animation-play-state: paused; }
.x-cell {
  flex: none; width: auto; height: 112px; margin-right: 40px;
  display: flex; align-items: center; justify-content: center;
}
/* Optical sizing: each logo (trimmed to its mark) gets h = clamp(min, sqrt(A / r), max), w = h * r,
   A = 1728 phones (3:1 wordmark ~24px) / 2700 from 768px (~30px); caps 14-32px tall, 110px wide
   (17-40px, 140px desktop); square-ish marks (Liquid Death, DraftKings, Apple) hit the height cap;
   then x0.9 for dense marks (SKIMS, Apple, HOKA), x1.1 for light ones (Spotify, Olipop, Coca-Cola).
   Sizes set inline per logo as --w/--h and --wd/--hd. */
.x-logos .x-track { animation-duration: 76s; }
.x-cell img {
  display: block; flex: none; width: var(--w); height: var(--h); max-width: none; object-fit: contain;
  opacity: var(--x-logo-opacity); filter: var(--x-logo-filter);
}
@keyframes x-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes x-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .x-track { animation: none !important; }
  .x-burger span { transition: none; }
}

@media (max-width: 1023px) {
  .x-btn, .x-feed__btn { padding-top: 15px; padding-bottom: 15px; min-height: 44px; }
}

@media (min-width: 768px) {
  .x-cell { height: 128px; margin-right: 60px; }
  .x-cell img { width: var(--wd); height: var(--hd); }
}

@media (min-width: 1200px) {
  .x-burger, .x-panel { display: none !important; }
  /* -12px lines the first label's text up with the page edge */
  .x-links { display: flex; gap: 4px; list-style: none; margin: 0 0 0 -12px; padding: 0; }
  .x-links a {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px;
    font-size: var(--fs-nav-15); font-weight: 500; line-height: 0.9; letter-spacing: -0.01em;
    color: var(--x-ink); border-radius: 8px;
  }
  .x-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .x-signin {
    display: flex; align-items: center; min-height: 44px; padding: 0 14px;
    font-size: var(--fs-nav-15); font-weight: 500; line-height: 0.9; letter-spacing: -0.01em;
    color: var(--x-ink); border-radius: 6px;
    transition: background-color .15s ease;
  }
  .x-signin:hover { background: var(--x-signin-hover-bg); text-decoration: var(--x-signin-hover-deco); text-underline-offset: 3px; }
  .x-media > img { aspect-ratio: 16 / 9; }
}

/* Features */
.x-feat { padding: 0 0 96px; }
.x-feat__head h2 {
  font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-feat__head h2 span { display: block; }
.x-feat__head h2 .x-feat__mute { color: var(--x-text-50); }
.x-feat__lead {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-text-90); max-width: 540px; margin: 20px 0 0;
}
.x-feat__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
.x-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--x-surface); border-radius: 8px; overflow: hidden;
  padding: 32px 32px 0; transition: background-color .2s ease;
}
.x-card:hover { background: var(--x-surface-hover); }
.x-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.x-card h3 {
  margin: 0; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink);
  flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: manual;
}
@media (max-width: 400px) {
  .x-card__top { gap: 12px; }
  .x-card h3 { font-size: 22px; }
}
.x-card__go {
  flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background-color: #E6E6E8; background-image: none;
  border: 1px solid transparent; border-radius: 6px; color: #111113; box-shadow: none;
  transition: background-color .2s ease;
}
html[data-theme="dark"] .x-card__go { background-color: #34353B; color: #ECECEF; }
.x-card__go svg { width: 16px; height: 18px; margin-left: 3px; transition: transform .2s ease; fill: currentColor; stroke: currentColor; }
.x-card:hover .x-card__go, .x-card__go:hover, .x-card__go:focus-visible,
html[data-theme="dark"] .x-card:hover .x-card__go, html[data-theme="dark"] .x-card__go:hover, html[data-theme="dark"] .x-card__go:focus-visible { background-color: #C5FCFB; background-image: none; color: #111113; }
.x-card:hover .x-card__go svg, .x-card__go:focus-visible svg { transform: scale(1.08); }
.x-card__desc {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-text-90); max-width: 520px; margin: 12px 0 0;
}
.x-card__shot {
  margin: auto -32px 0 8%;
  aspect-ratio: 4 / 3; background: var(--x-shot); border-radius: 6px 0 0 0;
}
.x-card__body { margin-bottom: 32px; }
@media (prefers-reduced-motion: reduce) {
  .x-card, .x-card__go, .x-card__go svg { transition: none; }
  .x-card:hover .x-card__go svg, .x-card__go:focus-visible svg { transform: none; }
}
@media (min-width: 1024px) {
  .x-feat { padding-bottom: 128px; }
  .x-feat__grid { grid-template-columns: repeat(6, 1fr); }
  .x-feat__grid > .x-card { grid-column: span 2; }
  .x-feat__grid > .x-card:nth-child(n+4) { grid-column: span 3; }
  .x-card__shot { aspect-ratio: 16 / 10; }
}

/* Feature mini-UIs: looping, light, paused off-screen */
.x-mini {
  position: relative; overflow: hidden; background: #F6F6F7; box-shadow: inset 0 0 0 1px #E6E6E8;
  font-family: "Archivo", system-ui, sans-serif; color: #111113; letter-spacing: 0;
}
.x-mini * { box-sizing: border-box; }
/* Agencies page: mocks built from the Media Sellers card parts */
.x-ag__sec { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
.x-ag__line { padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
.x-ag__lbl { font-size: 12px; font-weight: 500; color: var(--x-muted); }
.x-ag__body { display: grid; gap: 4px; min-width: 0; }
.x-ag .x-ms__row { flex-wrap: wrap; }
.x-ag .x-msc__arr { flex: none; }
.x-ag__owners { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.x-ag__bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.x-ag__bars i { flex: 1; height: var(--h); border-radius: 2px; background: #8EEAF2; }
.x-mini.is-paused *, .x-mini.is-paused *::before, .x-mini.is-paused *::after { animation-play-state: paused !important; }
.x-mini__win {
  position: absolute; inset: 12px 0 0 12px; overflow: hidden; background: #fff;
  border: 1px solid #E6E6E8; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0;
}
.x-mini__chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 500 12px/1 "Archivo", system-ui, sans-serif; color: #111113;
  padding: 4px 8px; border-radius: 999px; background: #EEFDFD; border: 1px solid #8EEAF2;
}
.x-mini b { font-weight: 600; }
.x-mini small { font-size: 12px; color: #5E5E66; }
.x-pop1 { animation: x-pop1 7s ease-out infinite; }
.x-pop2 { animation: x-pop2 7s ease-out infinite; }
.x-pop3 { animation: x-pop3 7s ease-out infinite; }
@keyframes x-pop1 { 0%, 28% { opacity: 0; transform: scale(.6); } 33% { opacity: 1; transform: scale(1.08); } 36%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-pop2 { 0%, 36% { opacity: 0; transform: scale(.6); } 41% { opacity: 1; transform: scale(1.08); } 44%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-pop3 { 0%, 44% { opacity: 0; transform: scale(.6); } 49% { opacity: 1; transform: scale(1.08); } 52%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }

/* 1. Campaign feed */
.x-mf__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #E6E6E8; }
.x-mf__bar b { font-size: 12px; }
.x-mf__live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5E5E66; }
.x-mf__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3BB8C4; }
.x-mf__new { overflow: hidden; max-height: 200px; animation: x-mf-new 7s ease-in-out infinite; }
@keyframes x-mf-new { 0%, 4% { max-height: 0; opacity: 0; } 16%, 86% { max-height: 200px; opacity: 1; } 96%, 100% { max-height: 0; opacity: 0; } }
.x-mf__open { position: relative; padding: 88px 12px 8px 12px; animation: x-mf-open 7s ease-in-out infinite; }
@keyframes x-mf-open { 0%, 18% { padding-top: 8px; padding-left: 66px; } 28%, 100% { padding-top: 88px; padding-left: 12px; } }
.x-mf__open .x-mf__thumb {
  position: absolute; left: 12px; top: 8px; width: calc(100% - 24px); height: 72px; overflow: hidden; background: #EDEDF0;
  animation: x-mf-grow 7s ease-in-out infinite;
}
@keyframes x-mf-grow { 0%, 18% { width: 44px; height: 30px; } 28%, 100% { width: calc(100% - 24px); height: 72px; } }
.x-mf__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-mf__new .x-mf__row { border-top: 0; box-shadow: inset 2px 0 0 #3BB8C4; }
.x-mf__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #E6E6E8; }
.x-mf__thumb { flex: none; width: 44px; height: 30px; border-radius: 4px; background: linear-gradient(135deg, #EDEDF0, #DCDCE1); }
.x-mf__thumb--b { background: linear-gradient(135deg, #F3EEE6, #E3DCD2); }
.x-mf__thumb--c { background: linear-gradient(135deg, #E9EEF3, #D6DEE6); }
.x-mf__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-mf__txt b, .x-mf__txt small { font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-mf__txt b { font-size: 13px; }
.x-mf__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 9px 12px; box-shadow: inset 2px 0 0 #3BB8C4; }

/* 2. Alert toasts */
.x-ma { position: absolute; inset: 12px 12px auto; display: flex; flex-direction: column; }
.x-ma__slot { overflow: hidden; }
.x-ma__slot--b { animation: x-ma-slot-b 7s ease-in-out infinite; }
.x-ma__slot--c { animation: x-ma-slot-c 7s ease-in-out infinite; }
@keyframes x-ma-slot-b { 0%, 20% { max-height: 0; } 28%, 100% { max-height: 64px; } }
@keyframes x-ma-slot-c { 0%, 38% { max-height: 0; } 46%, 100% { max-height: 64px; } }
.x-ma__toast {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 7px 10px;
  background: #fff; border: 1px solid #E6E6E8; border-radius: 6px; box-shadow: 0 1px 2px rgba(17, 17, 19, .05);
}
.x-ma__slot--a .x-ma__toast { animation: x-ma-a 7s ease-out infinite; }
.x-ma__slot--b .x-ma__toast { animation: x-ma-b 7s ease-out infinite; }
.x-ma__slot--c .x-ma__toast { animation: x-ma-c 7s ease-out infinite; }
@keyframes x-ma-a { 0%, 3% { opacity: 0; transform: translateY(-10px); } 11%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes x-ma-b { 0%, 20% { opacity: 0; transform: translateY(-10px); } 28%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes x-ma-c { 0%, 38% { opacity: 0; transform: translateY(-10px); } 46%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
.x-ma__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-ma__txt b { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-ma__txt small { line-height: 1.2; }

/* 3. Geo radius */
.x-mg__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-mg__area { position: absolute; left: 36%; top: 56%; height: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.x-mg__ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #3BB8C4; background: rgba(142, 234, 242, .16);
  animation: x-mg-ring 7s ease-out infinite;
}
@keyframes x-mg-ring { 0%, 53% { opacity: 0; transform: scale(.1); } 55% { opacity: 1; } 64%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
.x-mg__head { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); z-index: 3; animation: x-mg-head 7s ease-out infinite; }
.x-mg__head .x-mini__chip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: #fff; border-color: #E6E6E8; box-shadow: 0 1px 2px rgba(17, 17, 19, .06); }
@keyframes x-mg-head { 0% { opacity: 0; } 4%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
.x-mg__mkts { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 4px; overflow: hidden; z-index: 3; }
.x-mg__mkts .x-mini__chip { flex: none; }
.x-mg__m1 { animation: x-mg-m1 7s ease-out infinite; }
.x-mg__m2 { animation: x-mg-m2 7s ease-out infinite; }
.x-mg__m3 { animation: x-mg-m3 7s ease-out infinite; }
@keyframes x-mg-m1 { 0%, 30% { opacity: 0; transform: translateY(6px); } 34%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes x-mg-m2 { 0%, 33% { opacity: 0; transform: translateY(6px); } 37%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes x-mg-m3 { 0%, 36% { opacity: 0; transform: translateY(6px); } 40%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
.x-mg__mk { position: absolute; width: 0; height: 0; z-index: 1; }
.x-mg__mk--sel { z-index: 2; }
.x-mg__drop { position: absolute; left: -13px; bottom: 0; width: 26px; height: 31px; opacity: .45; }
.x-mg__mk--sel .x-mg__drop { opacity: 1; }
.x-mg__pin { position: relative; display: block; width: 26px; height: 31px; transform-origin: 50% 100%; }
.x-mg__mk--sel .x-mg__pin { transform: scale(1.15); animation: x-mg-sel 7s ease-out infinite; }
.x-mg__tile {
  display: flex; width: 26px; height: 26px; padding: 4px; border-radius: 50%;
  background: #fff; border: 1px solid #E6E6E8; box-shadow: 0 1px 3px rgba(17, 17, 19, .12); overflow: hidden;
}
.x-mg__tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.x-mg__pin::after {
  content: ""; position: absolute; left: 50%; top: 25px; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #111113;
}
.x-mg__mk--sel .x-mg__tile { border-color: #3BB8C4; box-shadow: 0 0 0 3px rgba(142, 234, 242, .45); }
.x-mg__d1 { animation: x-mg-d1 7s ease-out infinite; }
.x-mg__d2 { animation: x-mg-d2 7s ease-out infinite; }
.x-mg__d3 { animation: x-mg-d3 7s ease-out infinite; }
.x-mg__d4 { animation: x-mg-d4 7s ease-out infinite; }
@keyframes x-mg-d1 { 0%, 4% { opacity: 0; transform: translateY(-22px); } 8% { opacity: 1; transform: none; } 10% { transform: translateY(-3px); } 12%, 42% { opacity: 1; transform: none; } 46%, 88% { opacity: .45; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes x-mg-d2 { 0%, 10% { opacity: 0; transform: translateY(-22px); } 14% { opacity: 1; transform: none; } 16% { transform: translateY(-3px); } 18%, 42% { opacity: 1; transform: none; } 46%, 88% { opacity: .45; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes x-mg-d3 { 0%, 16% { opacity: 0; transform: translateY(-22px); } 20% { opacity: 1; transform: none; } 22% { transform: translateY(-3px); } 24%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes x-mg-d4 { 0%, 22% { opacity: 0; transform: translateY(-22px); } 26% { opacity: 1; transform: none; } 28% { transform: translateY(-3px); } 30%, 42% { opacity: 1; transform: none; } 46%, 88% { opacity: .45; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes x-mg-sel { 0%, 42% { transform: scale(1); } 46% { transform: scale(1.22); } 49%, 100% { transform: scale(1.15); } }
.x-mg__addr {
  position: absolute; left: calc(36% + 20px); top: calc(56% - 19px); transform: translateY(-50%); z-index: 2;
}
.x-mg__addrin {
  display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; white-space: nowrap;
  background: #fff; border: 1px solid #E6E6E8; border-radius: 6px; box-shadow: 0 1px 2px rgba(17, 17, 19, .06);
  font-size: 12px; line-height: 1.15;
}
.x-mg__addr b { font-size: 12px; }
.x-mg__addr small { line-height: 1.15; }
.x-mg__addrin { animation: x-mg-addr 7s ease-out infinite; }
@keyframes x-mg-addr { 0%, 47% { opacity: 0; transform: translateX(-6px); } 52%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
.x-mg__poi { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.x-mg__poi .x-mini__chip { background: #fff; border-color: #E6E6E8; box-shadow: 0 1px 2px rgba(17, 17, 19, .06); padding: 4px 8px 4px 6px; }
.x-mg__poi .x-mini__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3BB8C4; }
.x-mg__p1 { animation: x-mg-p1 7s ease-out infinite; }
.x-mg__p2 { animation: x-mg-p2 7s ease-out infinite; }
.x-mg__p3 { animation: x-mg-p3 7s ease-out infinite; }
@keyframes x-mg-p1 { 0%, 62% { opacity: 0; transform: scale(.6); } 66% { opacity: 1; transform: scale(1.08); } 69%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mg-p2 { 0%, 67% { opacity: 0; transform: scale(.6); } 71% { opacity: 1; transform: scale(1.08); } 74%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mg-p3 { 0%, 72% { opacity: 0; transform: scale(.6); } 76% { opacity: 1; transform: scale(1.08); } 79%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }

/* Part 1 fixes: narrow phones */
@media (max-width: 479px) {
  .x-mf__tags { flex-wrap: nowrap; overflow: hidden; padding-top: 1px; }
  .x-mf__tags .x-mini__chip { padding: 3px 6px; }
}
@media (max-width: 420px) {
  .x-mg__poi .x-mini__chip { padding: 3px 6px 3px 5px; gap: 4px; }
  .x-mg__head { left: 6px; top: 6px; max-width: calc(100% - 12px); }
  .x-mg__head .x-mini__chip, .x-mg__mkts .x-mini__chip { padding: 3px 6px; }
  .x-mg__mkts { left: 6px; right: 6px; bottom: 6px; gap: 3px; }
  .x-mg__addrin { padding: 4px 6px; }
}

/* 4. Campaign calendar */
.x-mc__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #E6E6E8; min-width: 0; }
.x-mc__ttl { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.x-mc__ttl b, .x-mc__ttl small { overflow: hidden; text-overflow: ellipsis; }
.x-mc__cal { --h: 16px; --g: 4px; display: flex; flex-direction: column; gap: var(--g); padding: 12px 12px 32px; }
.x-mc__row { display: grid; grid-template-columns: 34px repeat(12, minmax(0, 1fr)); gap: var(--g); align-items: center; }
.x-mc__row > span { position: relative; height: var(--h); border-radius: 3px; background: #F1F1F3; }
.x-mc__row > .x-mc__yr { height: auto; background: none; font-size: 12px; line-height: 1; color: #5E5E66; }
.x-mc__row--next .x-mc__yr { color: #111113; font-weight: 600; }
.x-mc__mo > span { height: auto; background: none; text-align: center; font-size: 12px; line-height: 1; color: #5E5E66; }
.x-mc__row i { position: absolute; inset: 0; border-radius: 3px; background: #8EEAF2; box-shadow: inset 0 0 0 1px #3BB8C4; }
.x-mc__r1 i { animation: x-mc-r1 7s ease-out infinite; }
.x-mc__r2 i { animation: x-mc-r2 7s ease-out infinite; }
.x-mc__r3 i { animation: x-mc-r3 7s ease-out infinite; }
.x-mc__r4 i { animation: x-mc-r4 7s ease-out infinite; }
@keyframes x-mc-r1 { 0%, 6% { opacity: 0; transform: scale(.4); } 11% { opacity: 1; transform: scale(1.1); } 13%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mc-r2 { 0%, 14% { opacity: 0; transform: scale(.4); } 19% { opacity: 1; transform: scale(1.1); } 21%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mc-r3 { 0%, 22% { opacity: 0; transform: scale(.4); } 27% { opacity: 1; transform: scale(1.1); } 29%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mc-r4 { 0%, 30% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.1); } 37%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
.x-mc__row--next i { background: transparent; box-shadow: none; border: 1.5px dashed #3BB8C4; opacity: .5; animation: x-mc-soft 7s ease-out infinite; }
@keyframes x-mc-soft { 0%, 42% { opacity: 0; } 48%, 88% { opacity: .5; } 95%, 100% { opacity: 0; } }
.x-mc__row--next i.x-mc__sep { background: rgba(142, 234, 242, .3); opacity: 1; animation: x-mc-sep 7s ease-out infinite; }
@keyframes x-mc-sep {
  0%, 44% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(59, 184, 196, .5); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 0 rgba(59, 184, 196, .5); }
  53% { transform: scale(1); }
  64% { box-shadow: 0 0 0 6px rgba(59, 184, 196, 0); }
  64.1% { box-shadow: 0 0 0 0 rgba(59, 184, 196, .5); }
  76% { box-shadow: 0 0 0 6px rgba(59, 184, 196, 0); }
  76.1% { box-shadow: 0 0 0 0 rgba(59, 184, 196, .5); }
  88% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 184, 196, 0); }
  95%, 100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 184, 196, 0); }
}
.x-mc__tag { position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-70%); z-index: 2; }
.x-mc__tag::before {
  content: ""; position: absolute; left: 70%; top: -5px; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #8EEAF2;
}
.x-mc__tag { animation: x-mc-tag 7s ease-out infinite; }
@keyframes x-mc-tag { 0%, 54% { opacity: 0; margin-top: 6px; } 60%, 88% { opacity: 1; margin-top: 0; } 95%, 100% { opacity: 0; margin-top: 0; } }
@media (max-width: 479px) {
  .x-mc__bar { padding: 6px 10px; gap: 6px; }
  .x-mc__ttl { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
  .x-mc__ttl small { line-height: 1.15; }
  .x-mc__ttl .x-mc__sepdot { display: none; }
  .x-mc__cal { --h: 11px; --g: 2px; padding: 6px 10px 30px; }
  .x-mc__row { grid-template-columns: 30px repeat(12, minmax(0, 1fr)); }
  .x-mc__tag .x-mini__chip { padding: 3px 6px; }
}

/* 5. Relationship network */
.x-mn { background-image: radial-gradient(circle, #E6E6E8 1px, transparent 1.5px); background-size: 16px 16px; }
.x-mn__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-mn__svg line { stroke: #3BB8C4; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; }
.x-mn__l1 { animation: x-mn-l1 7s linear infinite; }
.x-mn__l2 { animation: x-mn-l2 7s linear infinite; }
.x-mn__l3 { animation: x-mn-l3 7s linear infinite; }
.x-mn__l4 { animation: x-mn-l4 7s linear infinite; }
.x-mn__l5 { animation: x-mn-l5 7s linear infinite; }
.x-mn__l6 { animation: x-mn-l6 7s linear infinite; }
.x-mn__l7 { animation: x-mn-l7 7s linear infinite; }
@keyframes x-mn-l1 { 0%, 8% { stroke-dashoffset: 100; opacity: 1; } 18%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes x-mn-l2 { 0%, 14% { stroke-dashoffset: 100; opacity: 1; } 24%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes x-mn-l3 { 0%, 20% { stroke-dashoffset: 100; opacity: 1; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes x-mn-l4 { 0%, 26% { stroke-dashoffset: 100; opacity: 1; } 36%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes x-mn-l5 { 0%, 32% { stroke-dashoffset: 100; opacity: 1; } 42%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes x-mn-l6 { 0%, 38% { stroke-dashoffset: 100; opacity: 1; } 48%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes x-mn-l7 { 0%, 44% { stroke-dashoffset: 100; opacity: 1; } 54%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.x-mn__node { position: absolute; transform: translate(-50%, -50%); }
.x-mn__in { display: block; position: relative; transform-origin: center; }
.x-mn .x-blogo { display: flex; box-shadow: 0 1px 2px rgba(17, 17, 19, .06); }
.x-mn .x-mn__logo { width: 52px; height: 24px; padding: 4px 6px; }
@media (min-width: 480px) { .x-mn .x-mn__logo { width: 60px; height: 28px; padding: 5px 7px; } }
.x-mn .x-mn__nike { width: 48px; height: 48px; padding: 9px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(142, 234, 242, .35); }
.x-mn__in small {
  position: absolute; left: 50%; top: 100%; margin-top: 3px; transform: translateX(-50%);
  padding: 0 3px; border-radius: 4px; background: #F6F6F7; line-height: 1.1; white-space: nowrap;
}
.x-mn__n0 { animation: x-mn-n0 7s ease-out infinite; }
.x-mn__n1 { animation: x-mn-n1 7s ease-out infinite; }
.x-mn__n2 { animation: x-mn-n2 7s ease-out infinite; }
.x-mn__n3 { animation: x-mn-n3 7s ease-out infinite; }
.x-mn__n4 { animation: x-mn-n4 7s ease-out infinite; }
.x-mn__n5 { animation: x-mn-n5 7s ease-out infinite; }
.x-mn__n6 { animation: x-mn-n6 7s ease-out infinite; }
.x-mn__n7 { animation: x-mn-n7 7s ease-out infinite; }
@keyframes x-mn-n0 { 0%, 1% { opacity: 0; transform: scale(.4); } 5% { opacity: 1; transform: scale(1.08); } 8%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n1 { 0%, 17% { opacity: 0; transform: scale(.4); } 21% { opacity: 1; transform: scale(1.08); } 24%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n2 { 0%, 23% { opacity: 0; transform: scale(.4); } 27% { opacity: 1; transform: scale(1.08); } 30%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n3 { 0%, 29% { opacity: 0; transform: scale(.4); } 33% { opacity: 1; transform: scale(1.08); } 36%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n4 { 0%, 35% { opacity: 0; transform: scale(.4); } 39% { opacity: 1; transform: scale(1.08); } 42%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n5 { 0%, 41% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.08); } 48%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n6 { 0%, 47% { opacity: 0; transform: scale(.4); } 51% { opacity: 1; transform: scale(1.08); } 54%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes x-mn-n7 { 0%, 53% { opacity: 0; transform: scale(.4); } 57% { opacity: 1; transform: scale(1.08); } 60%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
.x-mn__pulse {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #3BB8C4; box-shadow: 0 0 0 4px rgba(142, 234, 242, .5); opacity: 0;
  animation: x-mn-pulse 7s ease-in-out infinite;
}
@keyframes x-mn-pulse {
  0%, 62% { opacity: 0; left: 50%; top: 50%; }
  64% { opacity: 1; left: 50%; top: 50%; }
  78% { opacity: 1; left: 82%; top: 20%; }
  82%, 100% { opacity: 0; left: 82%; top: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .x-mini *, .x-mini *::before, .x-mini *::after { animation: none !important; }
}

/* Activate: insight to inventory */
.x-act { padding: 0 0 96px; }
.x-act__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.x-act__eyebrow {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-muted); margin: 0 0 16px;
}
.x-act h2 {
  margin: 0; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-act__lead {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-text-90); max-width: 540px; margin: 20px 0 0;
}
.x-act__steps {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border-top: 1px solid var(--x-line);
}
.x-act__steps li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px;
  padding: 16px 0; border-bottom: 1px solid var(--x-line);
}
.x-act__num {
  grid-row: 1 / span 2; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--x-muted);
  font-variant-numeric: tabular-nums;
}
.x-act__steps b { font-size: var(--fs-text-16); font-weight: 500; line-height: 1.4; color: var(--x-ink); }
.x-act__steps span:last-child { font-size: 14px; line-height: 1.45; color: var(--x-text-90); }
.x-act__link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px;
  font: 500 var(--fs-nav-15)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
@media (min-width: 640px) {
  .x-act__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 0; }
  .x-act__steps li { border-bottom: 0; border-top: 1px solid var(--x-line); padding: 16px 0 0; }
}

.x-act__vis {
  container-type: inline-size; position: relative; overflow: hidden; border-radius: 8px;
  background-color: var(--x-surface);
  background-image: radial-gradient(circle, var(--x-panel-dot) 1.5px, transparent 1.6px);
  background-size: 20px 20px; background-position: 10px 10px;
}
/* One shared trademark footnote: legal fine print at the 12px readable minimum.
   Identical on every page and breakpoint; absolute px, no media queries. */
p.x-footnote, .x-view p.x-footnote, .x-deck p.x-footnote {
  position: relative; display: block; margin: 2px 0; padding: 2px 16px;
  font-size: 12px; line-height: 1.3; font-weight: 400; font-style: normal; letter-spacing: normal;
  color: var(--x-muted); text-align: center; transform: none; zoom: 1;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.x-card > p.x-footnote, .x-act__notewrap > p.x-footnote { padding: 2px 0; }
.x-act__notewrap { min-width: 0; }
.x-swap {
  position: relative; display: grid; grid-template-columns: 22cqw minmax(0, 1fr);
  align-items: center; min-height: max(380px, 72cqw); padding: 32px 20px 32px 0; box-sizing: border-box;
}
.x-swap__hubwrap { position: relative; align-self: stretch; }
.x-swap__core {
  position: absolute; top: 50%; left: 20px; width: 56px; height: 56px; box-sizing: border-box;
  transform: translateY(-50%); border-radius: 14px;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.04), 0 4px 12px rgba(17, 17, 19, 0.05);
  display: flex; align-items: center; justify-content: center; z-index: 1; color: var(--x-ink);
}
.x-swap__core svg { width: 28px; height: 28px; display: block; }
.x-swap__core svg.x-eco { overflow: visible; }
/* Icon strokes share the section heading's colour token (.x-act h2 uses --x-ink) */
.x-swap__core svg.x-eco g { stroke: var(--x-ink); }
.x-eco { opacity: 1; }
.x-eco path { stroke: var(--x-ink); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .x-eco .ly { animation: x-eco-lift 2.4s ease-in-out infinite; }
  .x-eco .ly2 { animation-delay: 0.2s; }
  .x-eco .ly3 { animation-delay: 0.4s; }
}
@keyframes x-eco-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: no-preference) {
  .x-eco .x-send__plane { animation: x-send-drift 2.4s ease-in-out infinite; }
}
@keyframes x-send-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
.x-swap__card img.x-swap__logo--edge { outline: 1px solid #E6E6E8; }
@media (min-width: 640px) {
  .x-swap__morecell--span2 { grid-column: span 2; }
}
.x-swap__side { display: flex; flex-direction: column; align-items: stretch; justify-self: stretch; min-width: 0; }
.x-swap__grid {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 500px; align-self: center;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.x-swap__card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 104px; padding: 10px 6px; box-sizing: border-box; min-width: 0; text-align: center;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  font: 500 15px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
  will-change: transform; backface-visibility: hidden; z-index: 1;
}
.x-swap__card.is-moving { z-index: 2; }
.x-swap__card img {
  width: 32px; height: 32px; border-radius: 8px; flex: none; display: block;
  outline: 1px solid var(--x-arc-icon-ring); outline-offset: 0;
}
.x-swap__card img.x-swap__logo--sq { border-radius: 6px; }
.x-swap__card img.x-swap__logo--pad { box-sizing: border-box; padding: 6.5px; object-fit: contain; background: #FFFFFF; }
.x-swap__card img.x-swap__logo--wide { box-sizing: border-box; padding: 3px; object-fit: contain; background: #111113; }
.x-swap__card > img, .x-swap__card > .x-swap__name { transition: opacity 0.45s ease; }
.x-swap__card.is-fading > img, .x-swap__card.is-fading > .x-swap__name { opacity: 0; }
.x-swap__name { min-width: 0; overflow-wrap: break-word; }
.x-swap__ring {
  position: absolute; inset: -1px; border: 1px solid var(--x-swap-hl); border-radius: 12px;
  opacity: 0; pointer-events: none;
}
.x-swap__morecell { display: flex; align-items: center; justify-content: center; min-width: 0; }
.x-swap__more {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--x-swap-card-border);
  font: 500 13px/1 "Archivo", system-ui, sans-serif; color: var(--x-arc-more);
}
.x-swap__pulse {
  position: absolute; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--x-swap-hl); opacity: 0; pointer-events: none; z-index: 0;
  will-change: transform, opacity;
}
@media (max-width: 639px) {
  .x-swap { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 16px 16px 24px; gap: 16px; }
  .x-swap__hubwrap { height: 56px; }
  .x-swap__core { left: 0; }
  .x-swap__side { justify-self: stretch; align-items: center; }
  .x-swap__grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .x-swap__grid { max-width: none; }
  .x-swap__card { flex-direction: row; justify-content: flex-start; text-align: left; height: 48px; padding: 0 10px; gap: 10px; font-size: 14px; }
  .x-swap__morecell { grid-column: 1 / -1; padding-top: 4px; }
  .x-swap__card img { width: 28px; height: 28px; }
  .x-swap__morecell--span2 { grid-column: auto; padding-top: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .x-act__vis { max-width: 640px; }
}
@media (min-width: 1024px) {
  .x-act { padding-bottom: 128px; }
  .x-act__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}

/* Testimonials: tall quote cards; carousel below 1024px */
.x-quotes { padding: 0 0 96px; }
.x-quotes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.x-quotes h2 {
  font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-quotes__nav { display: flex; gap: 8px; flex: none; }
.x-quotes__arrow {
  width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--x-bg); color: var(--x-ink); border: 1px solid var(--x-line); border-radius: 6px; cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.x-quotes__arrow:hover { background: var(--x-hover); }
.x-quotes__arrow:disabled { opacity: .4; cursor: default; background: var(--x-bg); }
.x-quotes__arrow svg { width: 16px; height: 16px; }
.x-quotes__track {
  list-style: none; margin: 40px calc(-1 * var(--x-pad)) 0; padding: 4px var(--x-pad) 8px;
  display: flex; align-items: stretch; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--x-pad); overscroll-behavior-x: contain; scrollbar-width: none;
}
.x-quotes__track::-webkit-scrollbar { display: none; }
.x-quotes__track:focus-visible { outline: 2px solid var(--x-ink); outline-offset: -2px; border-radius: 16px; }
.x-quotes__sub { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--x-muted); }
/* Always-dark text-only quote cards, in both themes: logo, quote, then name and link pinned to the bottom */
.x-quote {
  flex: 0 0 85%; scroll-snap-align: start; min-width: 0; height: auto;
  position: relative;
  display: flex; flex-direction: column; padding: 24px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .06);
  background: #202125; box-shadow: none; color: #ECECEF; text-decoration: none;
  transition: background-color .15s ease;
}
.x-quote:hover { background: #26272C; }
/* Headshot as a full-bleed gray backdrop; fills the existing card area only */
.x-quote { overflow: hidden; isolation: isolate; }
.x-quote__bg {
  position: absolute; inset: 0; z-index: -2; display: block;
  width: 100%; height: 100%; max-width: none; margin: 0;
  object-fit: cover; object-position: center top; border-radius: inherit;
  filter: grayscale(100%) brightness(.9) contrast(.9);
  transition: filter .2s ease; pointer-events: none;
}
.x-quote::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(to top, rgba(32, 33, 37, .92) 0%, rgba(32, 33, 37, .92) 38%, rgba(32, 33, 37, .35) 72%, rgba(32, 33, 37, .35) 100%),
    linear-gradient(160deg, rgba(32, 33, 37, .92) 0%, rgba(32, 33, 37, .8) 30%, rgba(32, 33, 37, 0) 55%);
  transition: opacity .2s ease;
}
.x-quote:hover .x-quote__bg { filter: grayscale(100%) brightness(1) contrast(.9); }
@media (prefers-reduced-motion: reduce) { .x-quote__bg, .x-quote::before { transition: none; } }
.x-quote:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.x-quote__logo { display: block; flex: none; width: auto; height: 28px; max-width: 60%; object-fit: contain; object-position: left center; margin-bottom: 28px; }
.x-quote__fig { flex: 1 0 auto; display: flex; flex-direction: column; margin: 0; }
.x-quote blockquote { margin: 0; }
.x-quote blockquote p {
  margin: 0; font: 500 19px/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.015em; color: #ECECEF;
}
.x-quote figcaption { margin-top: auto; padding-top: 28px; }
.x-quote__name { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; color: #ECECEF; }
.x-quote__role { display: block; font-size: 14px; line-height: 1.45; color: #A3A3AD; }
.x-quote__cta { display: block; flex: none; margin-top: 14px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #C5FCFB; }
@media (prefers-reduced-motion: reduce) { .x-quote { transition: none; } }
@media (min-width: 640px) {
  .x-quote { flex-basis: 46%; padding: 32px; }
  .x-quote__logo { margin-bottom: 32px; }
  .x-quote figcaption { padding-top: 32px; }
  .x-quote blockquote p { font-size: 20px; }
}
@media (min-width: 768px) {
  .x-quote blockquote p { font-size: 22px; }
}
@media (min-width: 1024px) {
  .x-quotes { padding-bottom: 128px; }
  .x-quotes__nav { display: none; }
  .x-quotes__track {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px;
    margin: 48px 0 0; padding: 0; overflow: visible;
  }
  .x-quote { flex: none; }
  .x-quote blockquote p { font-size: clamp(22px, 1.9vw, 24px); }
}
@media (prefers-reduced-motion: reduce) { .x-quotes__arrow { transition: none; } }

.x-btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--x-ink); outline-offset: 2px;
}

/* Blog: OOH insights */
.x-blog { padding: 0 0 96px; --x-blog-tertiary: #6E6E76; }
html[data-theme="dark"] .x-blog { --x-blog-tertiary: #8E8E99; }
.x-blog h2 {
  margin: 0; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-blog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; align-items: start; }
.x-blog__feat { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.x-blog__img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--x-shot);
}
.x-blog__label { display: block; margin: 0; font: 400 12px/1.4 "Archivo", system-ui, sans-serif; color: var(--x-muted); }
.x-blog__feat .x-blog__label { margin-top: 20px; }
.x-blog__title {
  display: block; margin: 8px 0 0; font: 500 clamp(20px, 1.7vw, 22px)/1.3 "Archivo", system-ui, sans-serif;
  letter-spacing: -0.015em; color: var(--x-ink); overflow-wrap: break-word;
}

.x-blog__meta { display: block; margin: 8px 0 0; font: 400 14px/1.45 "Archivo", system-ui, sans-serif; color: var(--x-blog-tertiary); }
.x-blog__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.x-blog__panel {
  border-radius: 8px; padding: 32px 24px;
  background-color: var(--x-surface);
  background-image: radial-gradient(circle, var(--x-panel-dot) 1.5px, transparent 1.6px);
  background-size: 20px 20px; background-position: 10px 10px;
}
.x-blog__list {
  list-style: none; margin: 0; padding: 0;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
}
.x-blog__list li + li { border-top: 1px solid var(--x-swap-card-border); }
.x-blog__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px 16px; align-items: start;
  padding: 24px; color: inherit; text-decoration: none; border-radius: 11px;
}
.x-blog__row .x-blog__label { align-self: center; }
.x-blog__row .x-blog__rowtitle {
  grid-column: 1 / -1; margin: 0; font: 500 18px/1.35 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-blog__go {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--x-swap-card-border); border-radius: 6px; color: var(--x-ink); background-color: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.x-blog__go svg { width: 16px; height: 16px; }
.x-blog__row .x-blog__meta { grid-column: 1 / -1; margin: -4px 0 0; }
.x-blog__all {
  display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; border-radius: 12px;
  background: #111113; color: #F4F4F6; text-decoration: none;
  font: 500 var(--fs-text-16)/1 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em;
  transition: opacity .15s ease;
}
html[data-theme="dark"] .x-blog__all { background: #ECECEF; color: #111113; }
.x-blog__all:hover { opacity: .9; }
.x-blog__all svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .x-blog__go, .x-blog__all { transition: none; } }
@media (min-width: 1024px) {
  .x-blog { padding-bottom: 128px; }
  .x-blog__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin-top: 48px; }
}

/* FAQ: heading block + accordion */
.x-faq { padding: 0 0 96px; }
.x-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.x-faq__eyebrow {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-muted); margin: 0 0 16px;
}
.x-faq h2 {
  margin: 0; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-faq__lead {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; color: var(--x-muted); margin: 20px 0 0;
}
.x-faq__link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font: 500 var(--fs-text-16)/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-faq__list { margin: 0; padding: 0; border-top: 1px solid var(--x-line); }
.x-faq__item { border-bottom: 1px solid var(--x-line); }
.x-faq__q { margin: 0; font: inherit; }
.x-faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  min-height: 64px; padding: 20px 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 var(--fs-text-18)/1.35 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
  border-radius: 4px;
}
.x-faq__icon { position: relative; flex: none; width: 16px; height: 16px; color: var(--x-ink); transition: transform .3s ease; }
.x-faq__icon::before, .x-faq__icon::after {
  content: ""; position: absolute; left: 0; top: 7.25px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
.x-faq__icon::after { transform: rotate(90deg); }
.x-faq__btn[aria-expanded="true"] .x-faq__icon { transform: rotate(180deg); }
.x-faq__btn[aria-expanded="true"] .x-faq__icon::after { transform: rotate(0deg); opacity: 0; }
.x-faq__panel { overflow: hidden; transition: height .3s ease; }
.x-faq__panel[hidden] { display: none; }
.x-faq__a {
  margin: 0; padding: 0 40px 24px 0; max-width: 62ch;
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.55; color: var(--x-muted);
}
@media (prefers-reduced-motion: reduce) {
  .x-faq__panel, .x-faq__icon, .x-faq__icon::before, .x-faq__icon::after, .x-faq__link { transition: none; }
}
@media (min-width: 1024px) {
  .x-faq { padding-bottom: 128px; }
  .x-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
}

/* Daily feed band (full bleed, mid-page between Activate and News and Insights).
   Activate's bottom padding sets the gap above; this margin matches it below. */
.x-feed {
  position: relative; display: block; width: 100%; margin: 0 0 96px;
  background: var(--x-feed-bg); color: var(--x-feed-ink); text-align: center;
  border: 0; border-radius: 0;
  padding: 88px var(--x-pad) 96px; overflow: hidden;
}
.x-feed__notch {
  position: absolute; top: -1px; left: 50%; width: 28px; height: 13px;
  transform: translateX(-50%); display: block; fill: var(--x-bg);
}
.x-feed__in { max-width: 680px; margin: 0 auto; }
.x-feed h2 {
  font-size: var(--fs-heading-48); font-weight: 350; letter-spacing: -0.02em; line-height: 1.1; color: var(--x-feed-ink);
  text-align: center; overflow-wrap: break-word; max-width: 490px; margin: 0 auto;
}
.x-feed__body {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-feed-body); max-width: 460px; margin: 20px auto 0;
}
.x-feed__btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  min-height: 40px; padding: 0 20px; border-radius: 6px;
  font: 500 var(--fs-nav-15)/0.9 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em;
}
@media (max-width: 1023px) {
  .x-feed__btn { min-height: 44px; padding-top: 15px; padding-bottom: 15px; }
}
.x-kpi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0;
  width: 100%; max-width: 840px; box-sizing: border-box;
  margin: 48px auto 0; padding: 40px 0 0; border-top: 1px solid var(--x-feed-line);
  text-align: center;
}
.x-kpi__item { min-width: 0; padding: 0 12px; }
.x-kpi__item:nth-child(even) { border-left: 1px solid var(--x-feed-line); }
.x-kpi .x-kpi__num {
  margin: 0; font-size: var(--fs-heading-48); font-weight: 350; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--x-feed-ink); font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
.x-kpi .x-kpi__label {
  margin: 8px 0 0; font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-feed-label);
}
@media (min-width: 768px) {
  .x-kpi { margin-top: 64px; }
  .x-kpi__item { padding: 0 16px; }
}
@media (min-width: 1024px) {
  .x-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .x-kpi__item + .x-kpi__item { border-left: 1px solid var(--x-feed-line); }
}
/* Graphite-only borders (light keeps its original box sizes) */
html[data-theme="dark"] .x-card { border: 1px solid var(--x-card-border); }
html[data-theme="dark"] .x-signin { border: 1px solid var(--x-signin-border); }
html[data-theme="dark"] .x-feed { border-top: 1px solid var(--x-feed-border); border-bottom: 1px solid var(--x-feed-border); }
/* Graphite: KPI figures sit on their own cards */
html[data-theme="dark"] .x-kpi { border-top: 0; padding-top: 0; gap: 16px; }
html[data-theme="dark"] .x-kpi__item {
  background: var(--x-kpi-card-bg); border: 1px solid var(--x-kpi-card-border);
  border-radius: 8px; padding: 28px 16px;
}
html[data-theme="dark"] .x-kpi__item + .x-kpi__item { border-left: 1px solid var(--x-kpi-card-border); }
.x-feed__btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.x-feed__btn:hover svg, .x-feed__btn:focus-visible svg { transform: translateX(2px); }
.x-feed__btn { box-shadow: var(--x-feed-glow); }
/* Light: dark ring with a pale halo. Graphite: plain light ring, no glow */
.x-feed__btn:focus-visible { outline: 2px solid var(--x-feed-focus); outline-offset: 2px; box-shadow: var(--x-feed-halo); }
@media (prefers-reduced-motion: reduce) {
  .x-feed__btn svg { transition: none; }
  .x-feed__btn:hover svg, .x-feed__btn:focus-visible svg { transform: none; }
}
@media (min-width: 768px) {
  .x-feed { padding-top: 112px; padding-bottom: 120px; }
}
@media (min-width: 1024px) {
  .x-feed { margin-bottom: 128px; }
}
/* Spinning coverage globe (Data Coverage countries section and the overview decks) */
.x-globe {
  --g: min(420px, 100vw);
  position: relative; width: var(--g); aspect-ratio: 1 / 1;
  margin: 0 0 0 calc(50% - var(--g) / 2);
}
.x-globe::before {
  content: ""; position: absolute; inset: 5%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 55%, rgba(197, 252, 251, 0.07) 100%);
  box-shadow: 0 0 0 1px rgba(197, 252, 251, 0.16), 0 0 36px rgba(197, 252, 251, 0.14), 0 0 90px rgba(197, 252, 251, 0.06), inset 0 0 28px rgba(197, 252, 251, 0.10);
}
.x-globe__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x-globe__chips { position: absolute; inset: 0; pointer-events: none; }
.x-globe__chip {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; border-radius: 8px; white-space: nowrap; text-align: left;
  background: rgba(17, 17, 19, 0.9); border: 1px solid rgba(197, 252, 251, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); opacity: 0; will-change: transform, opacity;
  transform-origin: 50% 100%;
}
.x-globe__chip .x-blogo { width: 26px; height: 26px; border-radius: 6px; border: 0; }
.x-globe__word {
  flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 6px; border-radius: 6px;
  background: #fff; color: #111113; font: 600 12px/1 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em;
}
.x-globe__txt { display: flex; flex-direction: column; gap: 1px; }
.x-globe__txt b { font: 500 13px/1.2 "Archivo", system-ui, sans-serif; color: #f4f4f6; letter-spacing: -0.01em; }
.x-globe__txt small { font: 400 12px/1.2 "Archivo", system-ui, sans-serif; color: rgba(255, 255, 255, 0.68); }
@media (min-width: 768px) {
  .x-globe { --g: 520px; }
}
@media (min-width: 1024px) {
  .x-globe { --g: 600px; }
}
/* Home coverage band (dark): heading and lead on top, the four figures in an even row below */
.x-feed--globe .x-kpi { max-width: 960px; }
/* Data Coverage: globe under the countries heading, beside the list on desktop and above it on phones */
.x-dc-globe { margin-top: 32px; }
.x-dc-globe .x-globe { --g: min(300px, 78vw); margin: 0 auto; }
@media (min-width: 768px) {
  .x-dc-globe .x-globe { --g: 380px; }
}
@media (min-width: 1024px) {
  .x-dc-globe { margin-top: 40px; }
  .x-dc-globe .x-globe { --g: min(460px, 100%); margin: 0; }
}
/* Light theme globe: soft grey sphere and dots, deep brand cyan pins, no dark glows */
html:not([data-theme="dark"]) .x-dc-globe .x-globe::before {
  background: radial-gradient(circle at 38% 32%, #FFFFFF, #F6F6F7 60%, #EEF6F7 100%);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.07);
}
html:not([data-theme="dark"]) .x-dc-globe .x-globe__chip {
  background: #FFFFFF; border: 1px solid var(--x-line);
  box-shadow: 0 6px 18px rgba(17, 17, 19, 0.08);
}
html:not([data-theme="dark"]) .x-dc-globe .x-globe__word { background: var(--x-surface); }
html:not([data-theme="dark"]) .x-dc-globe .x-globe__txt b { color: #111113; }
html:not([data-theme="dark"]) .x-dc-globe .x-globe__txt small { color: var(--x-muted); }

/* Footer */
.x-foot { background: var(--x-foot-bg); border-top: 1px solid var(--x-line); padding-top: 64px; }
.x-foot__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.x-foot__tag {
  margin: 0 0 24px; max-width: 300px;
  font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--x-muted);
}
.x-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.x-foot__cols h2 {
  margin: 0 0 4px; font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-foot-tertiary);
}
.x-foot ul { list-style: none; margin: 0; padding: 0; }
.x-foot__cols a, .x-foot__legal a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 14px; line-height: 1.3; color: var(--x-muted);
  transition: color .15s ease;
}
.x-foot__cols a:hover, .x-foot__legal a:hover,
.x-foot__cols a:focus-visible, .x-foot__legal a:focus-visible { color: var(--x-ink); }
.x-foot .x-btn { min-height: 44px; }
.x-foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: 48px; padding: 16px 0 88px; border-top: 1px solid var(--x-line);
}
.x-foot__copy { margin: 0; font-size: 14px; line-height: 1.3; color: var(--x-muted); }
.x-foot__legal { display: flex; gap: 16px; }
.x-foot__legal a { min-width: 44px; justify-content: center; }
@media (min-width: 768px) {
  .x-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (min-width: 1024px) {
  .x-foot { padding-top: 80px; }
  .x-foot__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 48px; }
  .x-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .x-foot__cols h2 { margin-bottom: 12px; }
  .x-foot__cols ul { display: grid; gap: 4px; }
  .x-foot__cols a { min-height: 28px; }
  .x-foot .x-btn { min-height: 40px; }
  .x-foot__bottom { margin-top: 64px; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .x-foot a { transition: none; } }
/* Footer social icons: small monochrome icon buttons, no marker sweep */
.x-social { display: flex; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.x-social .x-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; border-radius: 50%;
  border: 1px solid var(--x-line); color: var(--x-muted); background: transparent;
  transition: color .15s ease, border-color .15s ease;
}
/* Hover/focus: the hairline ring stays as at rest; only the icon turns brand cyan (deep pin cyan on light, pale cyan on dark) */
.x-social { --x-social-cyan: #0E8F9C; }
html[data-theme="dark"] .x-social { --x-social-cyan: var(--x-cyan); }
.x-social .x-social__link:hover, .x-social .x-social__link:focus-visible,
.x-afoot .x-social .x-social__link:hover, .x-afoot .x-social .x-social__link:focus-visible { color: var(--x-social-cyan); border-color: var(--x-line); }
.x-social .x-social__link:focus-visible, .x-afoot .x-social .x-social__link:focus-visible { outline: 2px solid var(--x-social-cyan); outline-offset: 3px; border-radius: 50%; }
.x-social svg { width: 18px; height: 18px; display: block; }
.x-afoot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.x-afoot .x-social { margin: 4px 0; }
/* Create Account (#/signup): no social icons in the auth footer */
.x-afoot.is-signup .x-social { display: none; }
.x-apanel.x-apanel--bare::after { display: none; }
.x-foot .x-foot__social { margin: 0; }
@media (max-width: 479px) { .x-foot__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .x-social .x-social__link { transition: none; } }

/* Gradient text on key phrases, matching the Create Account gradient.
   Light stops are deepened for contrast: each is at least 3:1 on #FFFFFF. */
.x-grad-text {
  color: #0E8F9C;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html[data-theme="dark"] .x-grad-text { color: #C5FCFB; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .x-grad-text {
    background-image: linear-gradient(135deg, #0E8F9C 0%, #0D96A2 50%, #0FA3AE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  html[data-theme="dark"] .x-grad-text {
    background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 40%, #8EEAF2 100%);
  }
}
/* Light theme: solid ink with a brand-cyan marker highlight behind the lower part of the line.
   Padding is offset by equal negative margins so the text sits exactly where it did. */
html:not([data-theme="dark"]) .x-grad-text {
  color: #111113;
  -webkit-text-fill-color: #111113;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 50%, #8EEAF2 100%);
  background-size: 100% 0.45em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.04em;
  margin: 0 -0.04em;
}
/* Keep the phrase on its own line, but only as wide as its text so the highlight hugs the letters */
html:not([data-theme="dark"]) .x-feat__head h2 .x-feat__mute .x-grad-text { display: inline; }
@media (min-width: 1024px) {
  html:not([data-theme="dark"]) .x-hero h1 .x-grad-text { width: -moz-fit-content; width: fit-content; }
}
/* KPI figures: pale cyan gradient in both themes, since the KPI band is dark either way */
.x-kpi .x-kpi__num { display: inline-block; padding-bottom: 0.08em; color: #C5FCFB; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .x-kpi .x-kpi__num {
    background-image: linear-gradient(135deg, #C5FCFB 0%, #8EEAF2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Hero glass data card (same in both themes: it sits on the photo) */
.x-gc {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 264px; height: 152px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px 12px; overflow: hidden;
  background: rgba(32,33,37,.72);
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 32px rgba(0,0,0,.25);
  font-family: "Archivo", system-ui, sans-serif; color: #F4F4F6; text-align: left;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .x-gc {
    background: rgba(32,33,37,.34);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}
.x-gc__tabs { display: flex; gap: 0; flex: none; height: 24px; }
/* 44px hit area; negative margins keep the 24px visual row */
.x-gc__tab:first-child { margin-left: -14px; }
.x-gc__txt { position: relative; display: inline-block; padding: 5px 0 7px; }
.x-gc__tab {
  position: relative; appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; margin: -10px 0; padding: 0 11px; height: 44px; min-width: 44px;
  font: 600 12px/1 "Archivo", system-ui, sans-serif; letter-spacing: 0;
  color: #F4F4F6; opacity: .55; cursor: pointer; transition: opacity .2s ease;
}
.x-gc__tab:hover { opacity: .8; }
.x-gc__tab[aria-selected="true"] { opacity: 1; }
.x-gc__tab:focus-visible { outline: 2px solid #C5FCFB; outline-offset: 2px; border-radius: 4px; }
.x-gc__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.18); overflow: hidden; visibility: hidden;
}
.x-gc__tab[aria-selected="true"] .x-gc__bar { visibility: visible; }
.x-gc__bar::after {
  content: ""; position: absolute; inset: 0; background: #C5FCFB;
  transform: scaleX(0); transform-origin: left center;
}
.x-gc__tab.is-run .x-gc__bar::after { animation: x-gc-fill 4s linear forwards; }
.x-gc.is-paused .x-gc__tab.is-run .x-gc__bar::after { animation-play-state: paused; }
.x-gc.is-static .x-gc__tab[aria-selected="true"] .x-gc__bar::after { transform: scaleX(1); animation: none; }
@keyframes x-gc-fill { to { transform: scaleX(1); } }
.x-gc__body { position: relative; flex: 1; min-height: 0; }
.x-gc__slide {
  position: absolute; inset: 0; min-width: 0;
  opacity: 0; transform: translateY(6px); visibility: hidden;
  transition: opacity .38s ease, transform .38s ease, visibility 0s linear .38s;
}
.x-gc__slide.is-out { transform: translateY(-6px); }
.x-gc__slide.is-active {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .38s ease, transform .38s ease, visibility 0s;
}
.x-gc__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: 14px; row-gap: 10px; margin: 0;
}
.x-gc__grid > div { min-width: 0; }
.x-gc dt, .x-gc__label {
  margin: 0 0 3px; font: 400 12px/15px "Archivo", system-ui, sans-serif;
  color: rgba(244,244,246,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x-gc__slide > .x-gc__label { margin-bottom: 1px; }
.x-gc dd, .x-gc__val {
  margin: 0; font: 500 13px/17px "Archivo", system-ui, sans-serif; letter-spacing: -0.005em;
  color: #F4F4F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x-gc__desc {
  margin: 2px 0 0; font: 400 12px/16px "Archivo", system-ui, sans-serif; color: rgba(244,244,246,.68);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.x-gc__chips { display: flex; gap: 6px; margin: 5px 0 0; padding: 0; list-style: none; overflow: hidden; }
.x-gc__chips li {
  flex: none; padding: 2px 8px; border-radius: 999px;
  font: 500 12px/16px "Archivo", system-ui, sans-serif; color: #F4F4F6; white-space: nowrap;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.2);
}
@media (min-width: 640px) {
  .x-gc { width: 312px; height: 168px; padding: 12px 16px 14px; gap: 10px; }
}
@media (min-width: 1024px) {
  .x-gc { right: 20px; bottom: 20px; width: 344px; height: 176px; max-width: 38%; padding: 12px 18px 14px; gap: 12px; }
  .x-gc dd, .x-gc__val { font-size: 14px; line-height: 18px; }
  .x-gc__grid { row-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-gc__slide, .x-gc__slide.is-active { transition: none; transform: none; }
  .x-gc__tab.is-run .x-gc__bar::after { animation: none; }
}

/* Smooth in-page scrolling; view changes jump to the top instantly; off under reduced motion */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pricing */
.x-price { padding: 0 0 96px; scroll-margin-top: 72px; }
.x-price__eyebrow {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-muted); margin: 0 0 16px;
}
.x-price h2 {
  margin: 0; max-width: 760px; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-price__lead {
  font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0;
  color: var(--x-text-90); max-width: 540px; margin: 20px 0 0;
}
/* Screen-reader-only text: hidden the same way as the hero's email label */
.x-sr {
  position: absolute; top: 0; left: 0; display: block; padding: 0; margin: 0; border: 0;
  white-space: nowrap; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
/* Segmented pill switch */
.x-seg {
  display: inline-flex; gap: 4px; margin-top: 32px; padding: 4px; max-width: 100%;
  background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 999px;
}
.x-seg__tab {
  flex: 1 1 auto; min-height: 44px; padding: 0 20px; margin: 0; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; white-space: nowrap;
  font: 500 var(--fs-nav-15)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-muted);
  transition: background-color .15s ease, color .15s ease;
}
.x-seg__tab:hover { color: var(--x-ink); }
.x-seg__tab[aria-selected="true"] { background: var(--x-ink); color: var(--x-bg); }
.x-seg__tab:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
@media (max-width: 420px) {
  .x-seg { display: flex; }
  .x-seg__tab { padding: 0 12px; font-size: 14px; white-space: normal; }
}
/* Shared segmented control (.x-seg--dot): the active segment stays on the grey track,
   marked by the find logo's cyan dot. Used by tabs (aria-selected), toggles (aria-pressed)
   and radio groups (input:checked + span). */
.x-seg--dot .x-seg__tab[aria-selected="true"],
.x-seg--dot .x-seg__tab[aria-pressed="true"],
.x-seg--dot .x-role__opt input:checked + span { background: transparent; color: #1B1A1D; }
html[data-theme="dark"] .x-seg--dot .x-seg__tab[aria-selected="true"],
html[data-theme="dark"] .x-seg--dot .x-seg__tab[aria-pressed="true"],
html[data-theme="dark"] .x-seg--dot .x-role__opt input:checked + span { color: var(--x-ink); }
.x-seg--dot .x-role__opt span { flex-wrap: wrap; align-content: center; align-items: baseline; }
.x-seg--dot .x-seg__tab::after,
.x-seg--dot .x-role__opt span::after {
  content: ""; display: inline-block; flex: none; width: 0.55em; height: 0.55em; margin-left: 0.22em;
  vertical-align: baseline; border-radius: 50%;
  background: linear-gradient(135deg, #8EEAF2, #3FCFDC);
  opacity: 0; transition: opacity .15s ease;
}
html[data-theme="dark"] .x-seg--dot .x-seg__tab::after,
html[data-theme="dark"] .x-seg--dot .x-role__opt span::after { background: linear-gradient(135deg, #C5FCFB, #8EEAF2); }
.x-seg--dot .x-seg__tab[aria-selected="true"]::after,
.x-seg--dot .x-seg__tab[aria-pressed="true"]::after,
.x-seg--dot .x-role__opt input:checked + span::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .x-seg--dot .x-seg__tab::after, .x-seg--dot .x-role__opt span::after { transition: none; }
}
.x-price__panel { margin-top: 32px; }
.x-price__panel[hidden] { display: none; }
.x-price__panel:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; border-radius: 8px; }
/* Plan cards */
.x-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.x-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--x-surface); border: 1px solid var(--x-card-border); border-radius: 8px; padding: 32px;
}
.x-plan--hl { border: 2px solid var(--x-lead-ring); padding: 31px; }
.x-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.x-plan h3 {
  margin: 0; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink);
}
.x-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background-color: #C5FCFB; background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 50%, #8EEAF2 100%);
  font: 500 13px/1 "Archivo", system-ui, sans-serif; letter-spacing: 0; color: #111113; white-space: nowrap;
}
.x-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 24px 0 0; }
.x-plan__amt {
  font-weight: 350; font-size: clamp(36px, calc(36px + 8 * (100vw - 480px) / 800), 44px); line-height: 1.05;
  letter-spacing: -0.03em; color: var(--x-ink); font-variant-numeric: tabular-nums;
}
.x-plan__per { font-size: 15px; line-height: 1.4; color: var(--x-muted); }
.x-plan__note { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-plan__desc { margin: 16px 0 0; font-size: var(--fs-text-16); line-height: 1.45; color: var(--x-text-90); }
.x-plan__feats { list-style: none; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--x-line); display: grid; gap: 12px; }
.x-plan__feats li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 15px; line-height: 1.45; color: var(--x-body);
}
.x-check { width: 18px; height: 18px; margin-top: 2px; color: var(--x-lead-ring); }
.x-plan__cta { margin-top: auto; padding-top: 32px; }
.x-plan__cta .x-btn { width: 100%; min-height: 48px; }
.x-plan .x-btn--outline { background: var(--x-bg); }
.x-plan .x-btn--outline:hover { background: var(--x-hover); }
.x-btn--outline:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
/* Compare toggle + table */
.x-cmp { margin-top: 24px; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.x-cmp__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  min-height: 64px; padding: 20px 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 var(--fs-text-18)/1.35 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink); border-radius: 4px;
}
.x-cmp__btn[aria-expanded="true"] .x-faq__icon { transform: rotate(180deg); }
.x-cmp__btn[aria-expanded="true"] .x-faq__icon::after { transform: rotate(0deg); opacity: 0; }
.x-cmp__panel { padding: 0 0 24px; }
.x-cmp__panel[hidden] { display: none; }
.x-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
.x-cmp__scroll:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.x-cmp table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.4; color: var(--x-body); }
.x-cmp caption { text-align: left; }
.x-cmp th, .x-cmp td { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--x-line); text-align: center; vertical-align: middle; }
.x-cmp thead th { font-weight: 500; color: var(--x-ink); font-size: 15px; }
.x-cmp tbody th { text-align: left; font-weight: 400; color: var(--x-ink); padding-left: 0; }
.x-cmp thead td { padding-left: 0; }
.x-cmp tbody tr:last-child th, .x-cmp tbody tr:last-child td { border-bottom: 0; }
.x-cmp .is-hl { background: var(--x-surface); }
.x-cmp .x-check { display: inline-block; margin: 0; vertical-align: middle; }
.x-cmp__no { color: var(--x-muted); }
.x-cmp td .x-check { color: var(--x-ink); }
.x-cmp__scroll, .x-cmp caption, .x-bill { position: relative; }
/* Media Sales wide card */
.x-plan--wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.x-bill { margin: 0; padding: 0; border: 0; min-width: 0; }
.x-bill__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.x-bill__opt { position: relative; display: block; cursor: pointer; }
.x-bill__opt input { position: absolute; top: 0; left: 0; margin: 0; white-space: nowrap; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.x-bill__box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  min-height: 52px; padding: 12px 16px; border: 1px solid var(--x-line); border-radius: 6px; background: var(--x-bg);
  font: 500 15px/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.x-bill__opt:hover .x-bill__box { border-color: var(--x-muted); }
.x-bill__opt input:checked + .x-bill__box { border-color: var(--x-lead-ring); box-shadow: inset 0 0 0 1px var(--x-lead-ring); }
.x-bill__opt input:focus-visible + .x-bill__box { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.x-bill__radio {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--x-muted); position: relative;
}
.x-bill__opt input:checked + .x-bill__box .x-bill__radio { border-color: var(--x-lead-ring); }
.x-bill__opt input:checked + .x-bill__box .x-bill__radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--x-lead-ring);
}
.x-bill__lbl { display: flex; align-items: center; gap: 10px; }
.x-wide__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.x-wide__ctas .x-btn { min-height: 48px; padding: 0 28px; }
.x-textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--fs-nav-15)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-price__more { margin: 24px 0 0; font-size: var(--fs-text-16); line-height: 1.45; color: var(--x-muted); }
.x-price__more .x-textlink { min-height: 44px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) {
  .x-seg__tab, .x-bill__box { transition: none; }
}
@media (min-width: 900px) {
  .x-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .x-plan, .x-plan--wide { padding: 32px 28px; }
  .x-plan--hl { padding: 31px 27px; }
  .x-plan--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 40px; }
}
/* Two-card plan rows (Media Sales, Agencies) */
.x-plan > .x-bill { margin-top: 24px; }
.x-plan > .x-bill + div .x-plan__price { margin-top: 20px; }
.x-plan > .x-wide__ctas { margin-top: auto; padding-top: 32px; }
@media (max-width: 600px) {
  #x-price-tabs { display: flex; }
  #x-price-tabs .x-seg__tab { padding: 0 10px; font-size: 14px; white-space: normal; }
}
@media (min-width: 900px) {
  .x-plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .x-price { padding-bottom: 128px; }
  .x-plan { padding: 32px; }
  .x-plan--hl { padding: 31px; }
  .x-plan--wide { padding: 48px; gap: 64px; }
}

/* Views: hash-routed home and pricing pages */
.x-view[hidden] { display: none; }
.x-view h1:focus { outline: none; }
.x-view h1:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; border-radius: 4px; }
/* Current page in the nav */
.x-links a[aria-current="page"] { background: var(--x-hover); }
.x-panel li a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.x-foot__cols a[aria-current="page"] { color: var(--x-ink); }

/* Pricing page: compact centred hero above the plans */
.x-price--page { padding-top: 56px; }
.x-price__hero { text-align: center; }
.x-price__hero h1 {
  margin: 0 auto; max-width: 760px; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-price__hero .x-price__lead { margin-left: auto; margin-right: auto; }
.x-price--page .x-price__panel { margin-top: 40px; }
@media (min-width: 768px) { .x-price--page { padding-top: 80px; } }
@media (min-width: 1024px) { .x-price--page { padding-top: 96px; } }

/* Closing band: the feed band with the hero's email form */
.x-feed--end { margin-bottom: 0; }
.x-feed .x-lead { margin-top: 32px; }
.x-feed .x-lead__field { margin: 0 auto; }
.x-feed .x-lead__done { color: var(--x-feed-ink); }
.x-faq__a .x-textlink { display: flex; width: fit-content; min-height: 44px; margin-top: 4px; }

/* Hero brand search prototype: autocomplete, locked teaser, sign-up modal */
.x-hero .x-lead__form { position: relative; max-width: 500px; }
.x-ac {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(56px + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--x-lead-bg); border: 1px solid var(--x-lead-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(17, 17, 19, .12);
  max-height: min(360px, 50vh); overflow-y: auto; overscroll-behavior: contain;
}
.x-ac[hidden] { display: none; }
.x-ac__head {
  position: sticky; top: -6px; z-index: 1; margin: 0 -6px; padding: 12px 18px 6px;
  cursor: default; user-select: none; -webkit-user-select: none;
  background: var(--x-lead-bg); font-size: 13px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0; color: var(--x-muted);
}
.x-ac__head:first-child { margin-top: -6px; }
.x-ac__opt--signup { color: var(--x-lead-ink); }
.x-ac__msg {
  padding: 10px 12px 6px 52px; cursor: default; user-select: none; -webkit-user-select: none;
  font-size: 14px; line-height: 1.4; color: var(--x-muted);
}
.x-ac__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 12px 12px; border-radius: 6px; cursor: pointer;
  font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; color: var(--x-lead-ink);
}
.x-ac__opt { scroll-margin-top: 36px; }
.x-ac__opt small { flex: none; font-size: 14px; color: var(--x-muted); }
.x-ac__opt--logo { align-items: center; }
.x-ac__opt--logo > .x-ac__name { flex: 1; min-width: 0; }
.x-ac__opt--signup { padding-left: 52px; }
.x-blogo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 3px; box-sizing: border-box;
  background: #fff; border: 1px solid #E6E6E8; border-radius: 7px; overflow: hidden;
}
.x-blogo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.x-blogo--lg { width: 40px; height: 40px; }
.x-blogo:empty { display: none; }
.x-tease__brand { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.x-tease__brand h2 { padding-right: 0; }
.x-ac__opt[aria-selected="true"], .x-ac__opt:hover { background: var(--x-hover); }
@media (max-width: 599px) {
  .x-hero .x-lead__form { max-width: none; }
  .x-ac { top: calc(52px + 4px); }
}
/* Mobile brand picker: a full-screen sheet sized to the visual viewport (<768px only) */
.x-bp {
  position: fixed; z-index: 1000; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--x-lead-bg); color: var(--x-lead-ink);
}
.x-bp[hidden] { display: none; }
.x-bp__bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--x-lead-border); background: var(--x-lead-bg);
}
.x-bp__search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.x-bp__input {
  width: 100%; height: 44px; margin: 0; padding: 0 12px 0 40px; box-sizing: border-box;
  background: var(--x-lead-bg); border: 1px solid var(--x-lead-border); border-radius: 6px; outline: none;
  font: 400 16px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-lead-ink);
  -webkit-appearance: none; appearance: none;
}
.x-bp__input::-webkit-search-decoration { -webkit-appearance: none; }
.x-bp__input::placeholder { color: var(--x-lead-ph); opacity: 1; }
.x-bp__input:focus { border-color: var(--x-lead-ring); box-shadow: 0 0 0 3px rgba(142, 234, 242, .35); }
.x-bp__search .x-lead__icon { left: 13px; }
.x-bp__cancel {
  flex: none; min-width: 44px; height: 44px; margin: 0; padding: 0 6px;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  font: 500 16px/1 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-lead-ink);
}
.x-bp__cancel:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 0; }
.x-bp .x-ac {
  position: static; flex: 1 1 auto; min-height: 0; max-height: none;
  padding: 6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  border: 0; border-radius: 0; box-shadow: none;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.x-bp-lock, html.x-bp-lock body { overflow: hidden; }
html.x-bp-lock body { position: fixed; left: 0; right: 0; width: 100%; }

.x-tease {
  position: relative; max-width: 500px; margin-top: 20px; padding: 24px;
  background: var(--x-surface); border: 1px solid var(--x-card-border); border-radius: 8px;
  animation: x-tease-in .35s ease both;
}
.x-tease[hidden] { display: none; }
/* Home hero, desktop only: larger kicker and a centred text block */
@media (min-width: 1024px) {
  #view-home > .x-hero .x-wrap { text-align: center; }
  #view-home > .x-hero .x-eyebrow { font-size: 23px; white-space: nowrap; }
  #view-home > .x-hero .x-media { margin-top: 28px; }
  #view-home > .x-hero h1 { margin-left: auto; margin-right: auto; }
  html #view-home > .x-hero h1 .x-grad-text { margin-left: auto; margin-right: auto; }
  #view-home > .x-hero .x-desc { max-width: 720px; margin-left: auto; margin-right: auto; }
  #view-home > .x-hero .x-lead__form,
  #view-home > .x-hero .x-lead__field,
  #view-home > .x-hero .x-tease { margin-left: auto; margin-right: auto; }
  #view-home > .x-hero .x-lead__field,
  #view-home > .x-hero .x-ac,
  #view-home > .x-hero .x-tease,
  #view-home > .x-hero .x-media { text-align: left; }
}
@keyframes x-tease-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.x-tease__x, .x-modal__x {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; color: var(--x-ink); cursor: pointer;
}
.x-tease__x:hover, .x-modal__x:hover { background: var(--x-hover); }
.x-tease__x:focus-visible, .x-modal__x:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 0; }
.x-tease__x svg, .x-modal__x svg { width: 16px; height: 16px; }
.x-tease h2 { margin: 0; padding-right: 44px; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink); }
.x-tease__ind { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--x-muted); }
.x-tease__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 0; }
.x-tease__facts dt { font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-tease__facts dd { margin: 2px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--x-ink); }
.x-tease__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.x-tease__tile { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--x-shot); }
.x-tease__tile::before {
  content: ""; position: absolute; inset: -12px; filter: blur(10px);
  background: linear-gradient(135deg, #d9d9de 0%, #f1f1f3 45%, #c4c4cb 100%);
}
.x-tease__tile:nth-child(2)::before { background: linear-gradient(200deg, #cfcfd5 0%, #ececef 55%, #bdbdc5 100%); }
.x-tease__tile:nth-child(3)::before { background: linear-gradient(60deg, #e4e4e8 0%, #c9c9cf 50%, #f3f3f5 100%); }
html[data-theme="dark"] .x-tease__tile::before { background: linear-gradient(135deg, #3a3b42 0%, #2a2b30 50%, #45464e 100%); }
.x-tease__lock {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--x-bg); border-radius: 50%; color: var(--x-ink);
}
.x-tease__lock svg { width: 14px; height: 14px; }
.x-tease__cta { margin-top: 20px; }
.x-tease__cta .x-btn, .x-modal .x-btn--cyan { min-height: 48px; padding: 0 24px; }
.x-small { margin: 10px 0 0; font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: var(--x-muted); }
@media (max-width: 599px) {
  .x-tease { max-width: none; padding: 20px; }
  .x-tease__cta .x-btn { width: 100%; }
}

.x-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.x-modal[hidden] { display: none; }
.x-modal__scrim { position: absolute; inset: 0; background: rgba(17, 17, 19, .45); animation: x-fade .25s ease both; }
.x-modal__card {
  position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 40px 32px 32px; background: var(--x-bg); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(17, 17, 19, .2); animation: x-pop .3s ease both;
}
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.x-modal h2 { margin: 0; padding-right: 32px; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink); }
.x-modal h2:focus { outline: none; }
.x-modal__text { margin: 12px 0 0; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; color: var(--x-text-90); }
.x-field { display: block; margin-top: 16px; }
.x-field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--x-ink); }
.x-field input {
  width: 100%; height: 48px; padding: 0 14px; background: var(--x-lead-bg); color: var(--x-lead-ink);
  border: 1px solid var(--x-lead-border); border-radius: 6px; font: 400 16px/1.2 "Archivo", system-ui, sans-serif;
}
.x-field input:focus { outline: none; border-color: var(--x-lead-ring); box-shadow: 0 0 0 3px rgba(142, 234, 242, .35); }
.x-field input[aria-invalid="true"] { border-color: #c0362c; }
.x-field__err { display: block; margin-top: 6px; font-size: 14px; color: #c0362c; }
html[data-theme="dark"] .x-field__err { color: #ff8a80; }
.x-field__err:empty { display: none; }
.x-modal form .x-btn--cyan, .x-modal__step > .x-btn--cyan { width: 100%; margin-top: 24px; }
.x-modal__price { margin: 20px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--x-ink); }
.x-modal__note { margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--x-surface); font-size: 14px; color: var(--x-ink); }
.x-modal__note[hidden] { display: none; }
.x-modal .x-textlink { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
@media (max-width: 599px) {
  .x-modal { align-items: flex-end; padding: 0; }
  .x-modal__card { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 36px 20px 28px; animation-name: x-sheet; }
  @keyframes x-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .x-tease, .x-modal__scrim, .x-modal__card { animation: none; }
}

/* News and Insights: listing (#/resources/news) and post (#/resources/news/<slug>) */
a.x-blog__row:hover .x-blog__go { background: var(--x-hover); }
a.x-blog__feat:hover .x-blog__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.x-blog__feat:focus-visible, a.x-blog__row:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 4px; }
.x-news__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 32px; margin-top: 48px; text-align: left; }
.x-news__grid, .x-post { --x-blog-tertiary: #6E6E76; }
html[data-theme="dark"] .x-news__grid, html[data-theme="dark"] .x-post { --x-blog-tertiary: #8E8E99; }
.x-news__grid > [hidden], .x-post [hidden], #x-post-end[hidden] { display: none; }
.x-news__grid .x-blog__label { margin-top: 20px; }
.x-post__in > .x-blog__label { margin-top: 24px; }
.x-news__grid .x-blog__title { font-size: 20px; }
@media (min-width: 640px) { .x-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .x-news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.x-post { padding: 48px 0 96px; }
.x-post__in { max-width: 760px; margin: 0 auto; }
.x-post h1 { margin: 12px 0 0; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink); }
.x-post__by { margin: 20px 0 0; font: 400 15px/1.5 "Archivo", system-ui, sans-serif; color: var(--x-muted); }
.x-post__by b { font-weight: 500; color: var(--x-ink); }
.x-post__hero { margin: 40px 0 48px; }
.x-post__hero .x-blog__img { aspect-ratio: 21 / 9; }
.x-post__body { font: 400 18px/1.65 "Archivo", system-ui, sans-serif; color: var(--x-body); }
.x-post__body > * { margin: 0 0 24px; }
.x-post__body h2 { margin: 48px 0 16px; font: 400 var(--fs-heading-28)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--x-ink); }
.x-post__body ul { padding-left: 1.25em; }
.x-post__body li + li { margin-top: 8px; }
.x-post__body blockquote { margin: 40px 0; padding-left: 24px; border-left: 2px solid var(--x-ink); font-size: 24px; line-height: 1.4; letter-spacing: -0.01em; color: var(--x-ink); }
.x-post__body blockquote footer { margin-top: 12px; font-size: 15px; color: var(--x-muted); }
.x-post__body figure { margin: 40px 0; }
.x-post__body figure img { display: block; width: 100%; border-radius: 12px; background: var(--x-shot); }
.x-post__body figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-post__stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 28px; border-radius: 12px; background: var(--x-surface); }
.x-post__stat b { font-weight: 350; font-size: var(--fs-heading-48); line-height: 1; letter-spacing: -0.02em; color: var(--x-ink); }
.x-post__stat span { flex: 1 1 240px; font-size: 16px; line-height: 1.45; color: var(--x-muted); }
.x-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--x-line); }
.x-post__share .x-blog__label { margin-right: 8px; font-size: 14px; }
.x-post__rel { margin-top: 96px; }
.x-post__rel h2 { margin: 0; font-weight: 350; font-size: var(--fs-heading-28); letter-spacing: -0.02em; color: var(--x-ink); }
.x-post__rel .x-news__grid { margin-top: 32px; }
/* Case studies: portrait headshots crop toward the face; company logo above the quote, swapped per theme */
.x-case__photo { object-position: 50% 25%; filter: grayscale(100%); }
.x-case__logo img { display: block; width: auto; height: 28px; max-width: 60%; object-fit: contain; object-position: left center; }
.x-case__logo .x-case__wht, html[data-theme="dark"] .x-case__logo .x-case__ink { display: none; }
html[data-theme="dark"] .x-case__logo .x-case__wht { display: block; }
/* News filter: five tabs scroll sideways instead of wrapping on narrow phones */
#x-news-filter { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
#x-news-filter::-webkit-scrollbar { display: none; }
#x-news-filter .x-seg__tab { flex: 1 0 auto; white-space: nowrap; }
#x-news-filter .x-seg__tab:focus-visible { outline-offset: -2px; }

/* Auth views: Sign In (#/signin) and Create Account (#/signup) */
.x-bar[hidden], .x-foot[hidden], .x-afoot[hidden] { display: none; }
.x-abar__in { gap: 16px; }
.x-abar__alt {
  margin: 0 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 6px;
  font-size: 14px; line-height: 1.3; color: var(--x-muted); text-align: right;
}
.x-abar__alt .x-textlink { min-height: 44px; font-size: 14px; }
@media (min-width: 600px) { .x-abar__alt, .x-abar__alt .x-textlink { font-size: var(--fs-nav-15); } }
.x-abar__alt .x-textlink:focus-visible, .x-afoot a:focus-visible, .x-auth .x-textlink:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; border-radius: 4px; }

.x-auth { display: grid; grid-template-columns: minmax(0, 1fr); }
.x-auth__col { padding: 40px var(--x-pad) 56px; }
.x-auth__form { width: 100%; max-width: 400px; margin: 0 auto; }
.x-auth h1, .x-auth__title {
  margin: 0; font-weight: 400; font-size: clamp(32px, calc(32px + 8 * (100vw - 480px) / 800), 40px);
  line-height: 1.15; letter-spacing: -0.03em; color: var(--x-ink);
}
.x-auth__title:focus { outline: none; }
.x-auth__sub { margin: 12px 0 8px; font-size: var(--fs-text-16); line-height: 1.45; letter-spacing: -0.01em; color: var(--x-muted); }
.x-auth .x-field { margin-top: 20px; }
.x-auth .x-field > label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--x-ink); cursor: pointer; }
.x-auth .x-field input { transition: border-color .15s ease, box-shadow .15s ease; }
.x-ahint { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--x-muted); }
.x-pw { position: relative; }
.x-auth .x-pw input { padding-right: 76px; }
.x-pw__btn {
  position: absolute; top: 2px; right: 2px; height: 44px; min-width: 64px; padding: 0 12px;
  border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  font: 500 14px/1 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.x-pw__btn:hover { background: var(--x-hover); }
.x-pw__btn:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: -2px; }
.x-auth__row { display: flex; justify-content: flex-end; margin-top: 4px; }
.x-auth__row .x-textlink { font-size: 14px; }
.x-auth .x-btn--cyan { width: 100%; min-height: 48px; margin-top: 24px; font-size: 16px; }
.x-auth__row + .x-btn--cyan { margin-top: 12px; }
.x-anote {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 6px; background: var(--x-surface);
  font-size: 15px; line-height: 1.45; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-anote:empty { display: none; }
.x-auth__legal { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-auth__legal a { color: var(--x-ink); }
.x-auth__legal a:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; border-radius: 2px; }

/* "I am a…" segmented radio group, styled like the pricing switch */
.x-role { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.x-role legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--x-ink); }
.x-role__opts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 999px;
}
.x-role.is-invalid .x-role__opts { border-color: #c0362c; }
.x-role__opt { position: relative; display: block; cursor: pointer; }
.x-role__opt input { position: absolute; top: 0; left: 0; margin: 0; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.x-role__opt span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: 999px;
  font: 500 var(--fs-nav-15)/1.15 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-muted); text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.x-role__opt:hover span { color: var(--x-ink); }
.x-role__opt input:checked + span { background: var(--x-ink); color: var(--x-bg); }
.x-role__opt input:focus-visible + span { outline: 2px solid var(--x-ink); outline-offset: 2px; }
@media (max-width: 420px) { .x-role__opt span { font-size: 14px; padding: 0 4px; } }

.x-done__text { margin: 12px 0 0; font-size: var(--fs-text-16); line-height: 1.45; letter-spacing: -0.01em; color: var(--x-ink); }
.x-done__plan { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--x-muted); }
.x-done__ctas .x-btn--cyan { width: 100%; min-height: 48px; margin-top: 24px; font-size: 16px; }
.x-done__ctas .x-textlink { margin-top: 8px; }

/* Visual panel (desktop only) */
.x-apanel { display: none; }
@media (min-width: 1024px) {
  .x-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 24px var(--x-pad); max-width: 1440px; margin: 0 auto; }
  .x-auth__col {
    display: flex; align-items: center; padding: 32px 24px;
    min-height: calc(100vh - 72px - 48px); min-height: calc(100dvh - 72px - 48px);
  }
  .x-apanel {
    display: block; position: sticky; top: 96px; overflow: hidden; border-radius: 16px; background: var(--x-shot);
    height: calc(100vh - 72px - 48px); height: calc(100dvh - 72px - 48px); min-height: 480px;
  }
  .x-apanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .x-apanel::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to top, rgba(17,17,19,.78) 0%, rgba(17,17,19,.35) 50%, rgba(17,17,19,0) 100%);
  }
  .x-apanel__card {
    position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; max-width: 380px; margin: 0;
    padding: 18px 20px; border-radius: 16px;
    background: rgba(32,33,37,.72); border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 32px rgba(0,0,0,.25);
    font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; color: #F4F4F6;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .x-apanel__card { background: rgba(32,33,37,.34); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
  }
}

/* Press Kit (#/press): reuses the page hero, buttons, text links and closing band */
.x-pk__ctas { justify-content: center; }
.x-pk { display: grid; gap: 64px; max-width: 960px; margin: 64px auto 0; text-align: left; }
.x-pk h2 { margin: 0 0 20px; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink); }
.x-pk__box, .x-pk__card { padding: 20px; background: var(--x-surface); border: 1px solid var(--x-card-border); border-radius: 12px; color: var(--x-muted); font-size: 15px; line-height: 1.45; }
.x-pk__box { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.x-pk__box p { flex: 1 1 280px; margin: 0; font-size: var(--fs-text-16); color: var(--x-ink); }
.x-pk__facts { display: grid; margin: 16px 0 0; }
.x-pk__facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--x-line); font-size: 15px; }
.x-pk__facts dt { color: var(--x-muted); }
.x-pk__facts dd { margin: 0; color: var(--x-ink); }
.x-pk__facts a { color: inherit; text-underline-offset: 3px; }
.x-pk__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.x-pk__grid--solo { grid-template-columns: minmax(0, 320px); }
.x-pk__card b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 500; color: var(--x-ink); }
.x-pk__prev { display: grid; place-items: center; height: 140px; margin: -20px -20px 16px; border-bottom: 1px solid var(--x-card-border); border-radius: 12px 12px 0 0; }
.x-pk__prev img { max-width: 60%; max-height: 56px; }
.x-pk__dl { display: flex; gap: 20px; margin-top: 4px; }
.x-pk__note { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
button.x-pk__card { width: 100%; min-height: 44px; text-align: left; cursor: pointer; font: inherit; transition: background-color .15s ease; }
button.x-pk__card:hover { background: var(--x-surface-hover); }
.x-pk__card:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-pk__sw { display: block; height: 72px; margin-bottom: 14px; border: 1px solid var(--x-card-border); border-radius: 8px; }
.x-pk__card small { display: block; margin-top: 6px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.x-pk__type { display: block; margin-top: 12px; font-size: 32px; line-height: 1.2; color: var(--x-ink); }
@media (prefers-reduced-motion: reduce) { button.x-pk__card { transition: none; } }
/* Our Story (#/about): a founders' letter in one narrow column; reuses the page hero and closing band */
.x-story { max-width: 640px; margin: 56px 0 0; text-align: left; }
.x-story p { margin: 0 0 24px; font-size: var(--fs-text-18); font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; color: var(--x-text-95); }
.x-story__open { font-size: var(--fs-text-20) !important; color: var(--x-ink) !important; }
.x-story h2 { margin: 48px 0 16px; font-size: var(--fs-text-16); font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--x-muted); }
.x-story__sign { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--x-line); }
.x-story__sign p { margin: 0; }
.x-story__sign .x-story__names { font-size: var(--fs-text-20); font-weight: 500; font-style: normal; color: var(--x-ink); }
.x-story__sign .x-story__role { margin-top: 4px; font-size: var(--fs-text-16); color: var(--x-muted); }
/* Contact Us (#/contact): reuses .x-field, .x-role and .x-field__err */
.x-ct { display: grid; gap: 32px; max-width: 720px; margin: 40px auto 0; text-align: left; }
.x-ct form, .x-ct__done { scroll-margin-top: 96px; }
.x-ct form > .x-ahint { margin: 0; }
.x-ct__row { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .x-ct__row { grid-template-columns: 1fr 1fr; } }
.x-ct .x-field select, .x-ct .x-field textarea {
  width: 100%; min-height: 48px; padding: 0 14px; background: var(--x-lead-bg); color: var(--x-lead-ink);
  border: 1px solid var(--x-lead-border); border-radius: 6px; font: 400 16px/1.2 "Archivo", system-ui, sans-serif;
}
.x-ct .x-field textarea { padding: 12px 14px; line-height: 1.45; resize: vertical; }
.x-ct .x-field select:focus, .x-ct .x-field textarea:focus { outline: none; border-color: var(--x-lead-ring); box-shadow: 0 0 0 3px rgba(142, 234, 242, .35); }
.x-ct [aria-invalid="true"] { border-color: #c0362c !important; }
.x-ct__count { text-align: right; }
.x-ct__role .x-role__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .x-ct__role .x-role__opts { grid-template-columns: 1fr 1fr; border-radius: 26px; } }
.x-ct__check { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; min-height: 44px; font-size: 15px; line-height: 1.4; color: var(--x-ink); cursor: pointer; }
.x-ct__check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--x-ink); }
.x-ct__send { min-height: 48px; margin-top: 24px; font-size: 16px; }
.x-ct__sum { margin-bottom: 20px; padding: 16px 18px; border: 1px solid #c0362c; border-radius: 6px; background: var(--x-surface); }
.x-ct__sum:focus { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-ct__sum h2 { margin: 0; font-size: 16px; font-weight: 500; color: var(--x-ink); }
.x-ct__sum ul { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.x-ct__sum a { color: var(--x-ink); text-underline-offset: 3px; }
.x-ct__done h2 { margin: 0; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink); }
.x-ct__done h2:focus { outline: none; }
.x-ct__done .x-btn { margin-top: 24px; }
/* Careers (#/careers) and role pages (#/careers/<slug>): reuse the page hero, .x-pk sections and cards, and the Contact form styles */
.x-cr__group + .x-cr__group { margin-top: 32px; }
.x-cr__team { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--x-muted); }
.x-cr__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--x-line); }
.x-cr__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .8fr) 16px;
  gap: 16px; align-items: center; min-height: 64px; padding: 16px 12px; border-bottom: 1px solid var(--x-line);
  font-size: 15px; line-height: 1.4; color: var(--x-muted); text-decoration: none; transition: background-color .15s ease;
}
.x-cr__row:hover { background: var(--x-surface-hover); }
.x-cr__row:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-cr__title { font-size: 17px; font-weight: 500; color: var(--x-ink); }
.x-cr__row svg { width: 16px; height: 16px; color: var(--x-ink); }
@media (max-width: 720px) {
  .x-cr__row { display: flex; flex-wrap: wrap; gap: 4px 0; padding-right: 44px; }
  .x-cr__title { flex: 0 0 100%; }
  .x-cr__row > span + span + span::before, .x-cr__row > span + span + span + span::before { content: "·"; margin: 0 8px; }
  .x-cr__row svg { position: absolute; right: 12px; top: 50%; margin-top: -8px; }
}
.x-cr__more { margin: 32px 0 0; font-size: var(--fs-text-18); line-height: 1.5; color: var(--x-ink); }
.x-cr__back { display: inline-block; margin-bottom: 24px; }
.x-cr__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.x-cr__chips li {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--x-surface); border: 1px solid var(--x-line); font-size: 14px; color: var(--x-ink);
}
.x-cr-doc { max-width: 720px; margin: 56px auto 0; text-align: left; }
.x-cr-doc h2, .x-cr-apply > h2 { margin: 48px 0 16px; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink); }
.x-cr-doc h2:first-child, .x-cr-apply > h2 { margin-top: 0; }
.x-cr-doc p, .x-cr-doc li { font-size: var(--fs-text-18); line-height: 1.6; letter-spacing: -0.01em; color: var(--x-text-95); }
.x-cr-doc p { margin: 0; }
.x-cr-doc ul { margin: 0; padding-left: 22px; }
.x-cr-doc li + li { margin-top: 8px; }
.x-cr-apply { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--x-line); }
.x-cr-apply > h2 { margin-bottom: 0; }
.x-ct .x-field input[type="file"] { height: auto; min-height: 48px; padding: 8px 14px; font-size: 15px; cursor: pointer; }
.x-ct .x-field input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 30px; padding: 0 12px; border: 1px solid var(--x-line); border-radius: 999px;
  background: var(--x-surface); color: var(--x-ink); font: inherit; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .x-cr__row { transition: none; } }
/* Legal pages (#/legal/terms, #/legal/privacy, #/legal/cookies): one shared document template in a 720px column */
.x-legal { max-width: 720px; margin: 0 auto; text-align: left; }
.x-legal__hero h1 { margin: 0; font-weight: 350; font-size: var(--fs-heading-48); line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink); }
.x-legal__date { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--x-muted); }
.x-legal__note { margin: 24px 0 0; padding: 12px 16px; background: var(--x-surface); border: 1px solid var(--x-card-border); border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-legal__toc { margin: 40px 0 0; padding: 20px 0; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.x-legal__toc h2 { margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--x-muted); }
.x-legal__toc ol { margin: 0; padding-left: 22px; columns: 2 240px; column-gap: 32px; font-size: 15px; line-height: 1.4; color: var(--x-muted); }
.x-legal__toc li { break-inside: avoid; }
.x-legal__toc a { display: inline-flex; align-items: center; min-height: 36px; color: var(--x-ink); text-underline-offset: 3px; }
.x-legal__toc a:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; border-radius: 2px; }
.x-legal__body section { scroll-margin-top: 96px; }
.x-legal__body h2 { margin: 40px 0 12px; font-weight: 500; font-size: var(--fs-text-20); line-height: 1.3; letter-spacing: -0.01em; color: var(--x-ink); }
.x-legal__body h2:focus { outline: none; }
.x-legal__body p, .x-legal__body li { font-size: var(--fs-text-16); line-height: 1.65; color: var(--x-text-95); }
.x-legal__body p { margin: 0 0 12px; }
.x-legal__body ul { margin: 0 0 12px; padding-left: 22px; }
.x-legal__body li + li { margin-top: 6px; }
.x-legal__body a { color: var(--x-ink); text-underline-offset: 3px; }
.x-legal__body a:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; border-radius: 2px; }
/* Privacy request (#/legal/privacy-request): reuses the page hero, .x-pk cards and the Contact form styles */
.x-pr__h { margin: 0 0 20px; font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink); }
.x-pr__num { display: block; margin-bottom: 12px; font-size: 14px; color: var(--x-muted); }
.x-pr__laws { margin: 0; font-size: var(--fs-text-16); line-height: 1.6; color: var(--x-text-95); }
.x-pr__fine { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-ct__done p { margin: 12px 0 0; font-size: var(--fs-text-16); line-height: 1.5; color: var(--x-text-95); }

.x-afoot { border-top: 1px solid var(--x-line); }
.x-afoot p { margin: 0; padding: 8px 0; font-size: 14px; line-height: 1.4; color: var(--x-muted); }
.x-afoot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--x-muted); }
.x-afoot a:hover, .x-afoot a:focus-visible { color: var(--x-ink); }
@media (prefers-reduced-motion: reduce) {
  .x-role__opt span, .x-auth .x-field input { transition: none; }
}

/* Text links: the section-title marker highlight sweeps in behind the label on hover and keyboard focus */
.x-hl {
  background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 50%, #8EEAF2 100%);
  background-size: 0% 0.45em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.04em;
  margin: 0 -0.04em;
  transition: background-size .25s ease-out;
}
html[data-theme="dark"] .x-hl {
  background-image: linear-gradient(135deg, rgba(197,252,251,.35) 0%, rgba(197,252,251,.35) 50%, rgba(142,234,242,.35) 100%);
}
a:focus-visible > .x-hl { background-size: 100% 0.45em; }
@media (hover: hover) {
  a:hover > .x-hl { background-size: 100% 0.45em; }
}
/* Touch: sweep the marker in on tap */
.x-act__link, .x-textlink, .x-faq__link, .x-links a, .x-panel li a, .x-foot__cols a, .x-foot__legal a, .x-afoot a, .x-auth__legal a,
a:has(> .x-hl) { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a:active > .x-hl { background-size: 100% 0.45em; }
}
a.is-tapped > .x-hl { background-size: 100% 0.45em; }
@media (prefers-reduced-motion: reduce) { .x-hl { transition: none; } }
/* FAQ: the open question keeps the marker highlight; the icon sits outside the highlighted text */
.x-faq__qt { flex: 0 1 auto; min-width: 0; }
.x-faq__btn[aria-expanded="true"] .x-hl { background-size: 100% 0.45em; }

/* Solutions dropdown (desktop) and group (mobile menu) */
.x-sol { position: relative; }
.x-sol__btn {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-nav-15)/0.9 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink); border-radius: 8px;
}
.x-sol__btn[aria-current="page"] { background: var(--x-hover); }
.x-sol__btn svg { width: 10px; height: 10px; transition: transform .15s ease; }
.x-sol__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.x-sol__btn:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-sol__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 340px; margin: 0; padding: 8px; list-style: none;
  background: var(--x-bg); border: 1px solid var(--x-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(17, 17, 19, .1);
}
.x-sol__menu[hidden] { display: none; }
.x-sol__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.x-links .x-sol__item { display: block; min-height: 0; padding: 10px 12px; border-radius: 8px; line-height: 1.3; color: var(--x-ink); }
.x-links a.x-sol__item:hover, .x-links a.x-sol__item:focus-visible { background: var(--x-hover); }
.x-sol__item b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--fs-nav-15); }
.x-sol__item small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--x-muted); }
span.x-sol__item { cursor: default; }
.x-soon {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--x-surface); border: 1px solid var(--x-line); font: 500 12px/1 "Archivo", system-ui, sans-serif; color: var(--x-muted);
}
.x-panel li.x-panel__group { padding: 16px 0 8px; }
.x-panel__label { margin: 0 0 4px; font-size: 14px; color: var(--x-muted); }
.x-panel .x-panel__sub { margin: 0; }
.x-panel .x-panel__sub li { border: 0; }
.x-panel .x-panel__sub a, .x-panel__sub span { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 18px; font-weight: 500; color: var(--x-ink); }
.x-panel__sub span:not(.x-soon) { color: var(--x-muted); }
.x-panel__sub .x-soon { display: inline-flex; min-height: 0; font-size: 12px; }
.x-blog { scroll-margin-top: 72px; }

/* Media Sellers page */
.x-ms-hero { padding-bottom: 96px; }
.x-ms-hero .x-wide__ctas .x-btn { border: 0; }
.x-ms-demo { border: 0; cursor: pointer; }
.x-ms-hero h1 .x-grad-text { display: inline; white-space: normal; }
@media (min-width: 1024px) { .x-act--flip .x-act__vis { order: -1; } .x-ms-hero { padding-bottom: 128px; } }
.x-ms {
  width: 100%; max-width: 420px; align-self: center; box-sizing: border-box; padding: 16px; display: grid; gap: 12px;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05);
  font: 400 14px/1.4 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-ms__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.x-ms__row small, .x-ms small { color: var(--x-muted); font-size: 12px; }
.x-ms b { font-weight: 600; }
.x-ms__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
.x-ms__cols > div { display: grid; gap: 8px; align-content: start; }
.x-ms__av {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: #EEFDFD; border: 1px solid #8EEAF2; color: #111113; font-size: 11px; font-weight: 600;
}
.x-ms__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-ms__mail { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
.x-ms__mail p { margin: 0; }
.x-ms__send { justify-self: end; min-height: 32px; padding: 0 14px; margin-top: 4px; pointer-events: none; }
.x-ms__grid { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 420px; align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.x-ms__word { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.x-ms__pdl { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 14px; color: var(--x-muted); }
.x-ms__pdl img { height: 18px; width: auto; }
@media (max-width: 639px) { .x-ms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.x-ms__pdl .x-ms__pdl--dark, html[data-theme="dark"] .x-ms__pdl .x-ms__pdl--light { display: none; }
html[data-theme="dark"] .x-ms__pdl .x-ms__pdl--dark { display: block; }

/* Media Sellers feature loops: 7s, paused off-screen (.is-paused), static final frame under reduced motion */
.x-msa.is-paused *, .x-msa.is-paused *::before, .x-msa.is-paused *::after { animation-play-state: paused !important; }
.x-msa-in { animation: x-msa-in 7s ease-out infinite both; animation-delay: var(--d, 0s); }
@keyframes x-msa-in { 0%, 8% { opacity: 0; transform: translateY(4px); } 13%, 74% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }
@keyframes x-msa-pop { 0%, 34% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; transform: scale(1.2); } 41%, 74% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1); } }
.x-ms__av { position: relative; }
.x-msa__ok {
  position: absolute; right: -4px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #22A06B; box-shadow: 0 0 0 2px var(--x-swap-card);
}
.x-msa__ok svg { width: 8px; height: 8px; display: block; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* A: sub-tabs switch Brand Direct / Agency Contacts; the second pane runs half a loop behind (--o) */
.x-msa__tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--x-swap-card-border); }
.x-msa__tab { padding: 0 0 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 500; font-size: 13px; color: var(--x-muted); }
.x-msa__tab:first-child { color: var(--x-ink); border-color: #3BB8C4; }
.x-msa__panes { display: grid; }
.x-msa__panes > div { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; }
.x-msa__panes > div + div { opacity: 0; --o: -3.5s; }
.x-msa__tab, .x-msa__panes > div { animation: x-msa-pane 7s linear infinite both; animation-delay: var(--o, 0s); }
.x-msa__tab { animation-name: x-msa-tab; }
.x-msa__tab + .x-msa__tab { --o: -3.5s; color: var(--x-muted); border-color: transparent; }
.x-msa__panes .x-ms__row { animation: x-msa-row 7s ease-out infinite both; }
.x-msa__panes .x-msa__ok { animation: x-msa-ok 7s ease-out infinite both; }
.x-msa__panes .x-ms__row, .x-msa__panes .x-msa__ok { animation-delay: calc(var(--o, 0s) + var(--d, 0s)); }
@keyframes x-msa-pane { 0% { opacity: 0; } 3%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes x-msa-tab { 0%, 48% { color: var(--x-ink); border-color: #3BB8C4; } 50%, 100% { color: var(--x-muted); border-color: transparent; } }
@keyframes x-msa-row { 0%, 4% { opacity: 0; transform: translateY(4px); } 9%, 100% { opacity: 1; transform: none; } }
@keyframes x-msa-ok { 0%, 12% { transform: scale(0); } 15% { transform: scale(1.25); } 18%, 100% { transform: scale(1); } }
/* B: research shimmer, typed draft, one pulse */
@property --x-tp { syntax: "<number>"; inherits: true; initial-value: 1; }
.x-msb .x-mini__chip { position: relative; overflow: hidden; }
.x-msb .x-mini__chip::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  animation: x-msb-shim 7s ease-in-out infinite both; animation-delay: var(--d, 0s);
}
@keyframes x-msb-shim { 0%, 9% { opacity: 1; transform: translateX(-100%); } 22% { opacity: 1; transform: translateX(100%); } 23%, 100% { opacity: 0; transform: translateX(100%); } }
.x-msb .x-ms__mail { --x-tp: 1; animation: x-msb-type 7s linear infinite; }
@keyframes x-msb-type { 0%, 32% { --x-tp: 0; } 66%, 80% { --x-tp: 1; } 84%, 100% { --x-tp: 0; } }
.x-msb__c { opacity: clamp(0, calc((var(--x-tp) - var(--i)) * 400), 1); }
.x-msb .x-ms__send { animation: x-msb-pulse 7s ease-out infinite; }
@keyframes x-msb-pulse { 0%, 68% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 184, 196, .55); } 71% { transform: scale(1.06); } 74% { transform: scale(1); } 78%, 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59, 184, 196, 0); } }
/* C: deeper-search banner spins; rows resolve from skeleton bars, one at a time */
.x-msc { container-type: inline-size; font-size: 12px; }
.x-msc__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.x-msc__bar .x-btn { min-height: 30px; padding: 0 12px; font-size: 13px; pointer-events: none; }
.x-msc__run { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--x-line); font-weight: 500; color: var(--x-muted); white-space: nowrap; }
.x-msc__spin { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(59, 184, 196, .3); border-top-color: #3BB8C4; animation: x-msc-spin .9s linear infinite; }
@keyframes x-msc-spin { to { transform: rotate(360deg); } }
.x-msc__ban { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: rgba(142, 234, 242, .14); border: 1px solid rgba(59, 184, 196, .35); }
.x-msc__ban p { margin: 0; color: var(--x-muted); }
.x-msc__ban .x-ms__row { gap: 6px; font-size: 13px; }
.x-msc__ban .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-msc__pdl { flex: none; width: 15px; height: 15px; overflow: hidden; }
.x-msc__pdl img { height: 15px; width: auto; max-width: none; }
.x-msc__pdl .x-ms__pdl--dark, html[data-theme="dark"] .x-msc__pdl .x-ms__pdl--light { display: none; }
html[data-theme="dark"] .x-msc__pdl .x-ms__pdl--dark { display: block; }
.x-msc__arr { width: 12px; height: 12px; fill: none; stroke: var(--x-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.x-msc__ban .x-msc__spin { margin-left: 4px; }
.x-msc__t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto auto; column-gap: 8px; }
.x-msc__t > div { display: contents; }
.x-msc__t > div > span { display: grid; gap: 4px; align-content: center; justify-items: start; padding: 7px 0; border-top: 1px solid var(--x-swap-card-border); }
.x-msc__t > div:first-child > span { border-top: 0; padding-top: 0; color: var(--x-muted); font-weight: 500; }
.x-msc__v { border-radius: 3px; animation: x-msc-v 7s ease-out infinite both; animation-delay: var(--d, 0s); }
@keyframes x-msc-v { 0%, 16% { color: transparent; background-color: var(--x-line); } 22%, 86% { color: inherit; background-color: transparent; } 92%, 100% { color: transparent; background-color: var(--x-line); } }
.x-msc__ok, .x-msc__risk { display: inline-block; padding: 2px 6px; border-radius: 999px; font-style: normal; font-weight: 500; white-space: nowrap; animation: x-msc-pop 7s ease-out infinite both; animation-delay: var(--d, 0s); }
.x-msc__ok { background: rgba(34, 160, 107, .14); color: #146C47; }
html[data-theme="dark"] .x-msc__ok { color: #5FD3A0; }
.x-msc__risk { background: var(--x-surface); border: 1px solid var(--x-line); color: var(--x-muted); padding: 1px 6px; }
@keyframes x-msc-pop { 0%, 22% { transform: scale(0); } 26% { transform: scale(1.2); } 29%, 86% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
.x-msc__btn { display: inline-block; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--x-line); font-weight: 500; white-space: nowrap; color: var(--x-ink); }
@container (max-width: 360px) {
  .x-msc__t { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto; }
  .x-msc__loc { display: none !important; }
}
/* D: a contact drops into the next CRM tile each loop */
.x-msd__card {
  position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 3; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; white-space: nowrap; text-align: left;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 10px;
  box-shadow: 0 4px 12px rgba(17, 17, 19, .1); font: 400 12px/1.25 "Archivo", system-ui, sans-serif; color: var(--x-ink);
  animation: x-msd-card 7s ease-in-out 1 both;
}
.x-msd__card b { font-weight: 600; }
.x-msd__card small { color: var(--x-muted); font-size: 12px; }
@keyframes x-msd-card { 0% { opacity: 0; transform: translate(-80%, -10px); } 12%, 30% { opacity: 1; transform: translate(-50%, 0) scale(1); } 42%, 100% { opacity: 0; transform: translate(-50%, var(--x-drop, 72px)) scale(.4); } }
.x-msd__card .x-msc__btn { animation: x-msd-hot 7s ease-out 1 both; }
@keyframes x-msd-hot { 0%, 8% { background: transparent; box-shadow: 0 0 0 0 rgba(59, 184, 196, .5); } 12%, 40% { background: #C5FCFB; border-color: #8EEAF2; color: #111113; } 22% { box-shadow: 0 0 0 6px rgba(59, 184, 196, 0); } 100% { background: #C5FCFB; color: #111113; } }
@media (max-width: 639px) { .x-msd__card { --x-drop: 48px; } .x-msd__card small { display: none; } }
.x-msd .x-msa__ok { top: 8px; right: 8px; bottom: auto; opacity: 0; }
.x-msd .is-on { z-index: 2; animation: x-msd-glow 7s ease-out 1 both; }
.x-msd .is-on .x-msa__ok { animation: x-msa-pop 7s ease-out .7s 1 both; }
@keyframes x-msd-glow { 0%, 38% { box-shadow: 0 0 0 0 rgba(197, 252, 251, 0); } 44%, 84% { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB, 0 0 18px rgba(197, 252, 251, .9); } 96%, 100% { box-shadow: 0 0 0 0 rgba(197, 252, 251, 0); } }
@media (prefers-reduced-motion: reduce) {
  .x-msa *, .x-msa *::before, .x-msa *::after { animation: none !important; }
}

/* Agencies feature loops: one 7s timeline (--x-agt, 0 to 1) per mock; each part eases in from its start (--s).
   The timeline rewinds at the end of the loop. Without the animation --x-agt stays 1: the static final frame. */
@property --x-agt { syntax: "<number>"; inherits: true; initial-value: 1; }
.x-ag { animation: x-ag-t 7s linear infinite; }
.x-ag.is-paused { animation-play-state: paused; }
@keyframes x-ag-t { 0% { --x-agt: 0; } 86% { --x-agt: .86; } 93%, 100% { --x-agt: 0; } }
.x-ag-k, .x-ag__bars i { --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1); }
.x-ag-k { opacity: var(--p); }
.x-ag-k--up { transform: translateY(calc((1 - var(--p)) * 6px)); }
.x-ag-k--slide { transform: translateX(calc((1 - var(--p)) * -20px)); }
.x-ag-k--pop { transform: scale(calc(.6 + .4 * var(--p))); }
.x-ag-k--draw { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.x-ag-k--fill {
  opacity: 1; border-radius: 3px;
  color: color-mix(in srgb, var(--x-ink) calc(var(--p) * 100%), transparent);
  background-color: color-mix(in srgb, var(--x-line) calc((1 - var(--p)) * 100%), transparent);
}
.x-ag-k--blip { opacity: calc(var(--p) - clamp(0, calc((var(--x-agt) - var(--e, 1)) * 16), 1)); }
.x-ag-k--press {
  opacity: 1; display: inline-flex; align-items: center; gap: 4px;
  transform: scale(calc(1 - .32 * var(--p) * (1 - var(--p))));
  background-color: color-mix(in srgb, #C5FCFB calc(var(--p) * 100%), transparent);
  border-color: color-mix(in srgb, #8EEAF2 calc(var(--p) * 100%), var(--x-line));
  color: color-mix(in srgb, #111113 calc(var(--p) * 100%), var(--x-ink));
}
.x-ag__tick { width: 9px; height: 9px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-ag .x-msc__ok { animation: none; }
.x-ag__bars i { transform: scaleY(var(--p)); transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) { .x-ag { animation: none; } }

/* Media Owners feature loops: reuse the Agencies 7s timeline (.x-ag, --x-agt, --s), paused off-screen through .x-msa,
   with the static final frame under reduced motion. All data in these mocks is illustrative, including the perks
   in the Perks directory mock (block E). */
.x-mo-hot, .x-mo__new, .x-mo__tog, .x-mo__seg { --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1); }
.x-mo { font-size: 13px; }
.x-mo .x-msc__ok { display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
.x-mo__bar { justify-content: space-between; }
.x-mo__bar .x-msc__btn { font-size: 12px; font-style: normal; }
.x-mo__t { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) auto; column-gap: 10px; font-size: 12px; }
.x-mo__t > div { display: contents; }
.x-mo__t > div > span { display: grid; gap: 2px; align-content: center; justify-items: start; padding: 7px 0; border-top: 1px solid var(--x-swap-card-border); }
.x-mo__t > div:first-child > span { border-top: 0; padding-top: 0; color: var(--x-muted); font-weight: 500; }
.x-mo__new > span { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 6px)); }
.x-mo .x-ag-k--fill small { color: inherit; }
.x-mo__camp .x-ag__body { flex: 1; }
.x-mo__tog { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.x-mo__tog i { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: color-mix(in srgb, #3BB8C4 calc(var(--p) * 100%), var(--x-line)); }
.x-mo__tog i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 19, .2); transform: translateX(calc(var(--p) * 12px));
}
.x-mo__vis { justify-self: start; }
.x-mo__rfi { display: grid; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-mo__rfi > .x-ms__row > .x-mini__chip, .x-mo__rfi > .x-ms__row > .x-ms__chips { margin-left: auto; }
.x-mo__rfi > .x-ms__row > .x-ms__chips { justify-content: flex-end; }
.x-mo-hot {
  border-color: color-mix(in srgb, #8EEAF2 calc(var(--p) * 100%), var(--x-swap-card-border));
  background-color: color-mix(in srgb, rgba(142, 234, 242, .14) calc(var(--p) * 100%), transparent);
}
.x-mo__chip--muted { background: var(--x-surface); border-color: var(--x-line); color: var(--x-muted); }
.x-mo__open { display: grid; gap: 8px; }
.x-mo__ask { margin: 0; font-weight: 500; line-height: 1.35; }
.x-mo__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; font-size: 12px; }
.x-mo__fields > span { display: grid; gap: 2px; min-width: 0; }
.x-mo__fields small { color: var(--x-muted); font-weight: 500; }
.x-mo__exs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x-mo__ex { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--x-swap-card-border); font-size: 12px; }
.x-mo__ex .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-mo__ex .x-ag__body { gap: 2px; }
.x-mo__ex small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-mo__reply { display: grid; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--x-swap-card); border: 1px solid var(--x-line); }
.x-mo__type { --q: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 3.5), 1); clip-path: inset(0 calc((1 - var(--q)) * 100%) 0 0); }
.x-mo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.x-mo__seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 999px; background: var(--x-surface); border: 1px solid var(--x-line); font-size: 12px; font-weight: 500; }
.x-mo__seg span { position: relative; z-index: 1; padding: 3px 10px; text-align: center; }
.x-mo__seg span:first-child { color: color-mix(in srgb, var(--x-muted) calc(var(--p) * 100%), #111113); }
.x-mo__seg span:nth-child(2) { color: color-mix(in srgb, #111113 calc(var(--p) * 100%), var(--x-muted)); }
.x-mo__seg i {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); box-sizing: border-box;
  border-radius: 999px; background: #C5FCFB; border: 1px solid #8EEAF2; transform: translateX(calc(var(--p) * 100%));
}
.x-mo__in { padding: 8px 10px; border-radius: 8px; border: 1px solid #8EEAF2; background: rgba(142, 234, 242, .14); }
.x-mo__rule { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-mo__rule > span:first-of-type { flex: 1; min-width: 0; }
.x-mo__who { white-space: nowrap; font-weight: 500; }
.x-mo__tok, .x-mo__land { flex: none; box-sizing: border-box; padding: 1px; overflow: hidden; background: #fff; border: 1px solid #E6E6E8; }
.x-mo__tok { width: 18px; height: 18px; border-radius: 5px; }
.x-mo__tok:empty { visibility: hidden; }
.x-mo__land { position: absolute; right: -6px; bottom: -5px; width: 16px; height: 16px; border-radius: 4px; border-color: #8EEAF2; }
.x-mo__tok img, .x-mo__land img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* E: a perk form fills in, publishes, and the new perk lands in the Perks directory */
.x-mo__form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; font-size: 12px; }
.x-mo__form > span { padding: 7px 0; border-top: 1px solid var(--x-swap-card-border); }
.x-mo__form > span:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.x-mo__form > span:nth-child(odd) { color: var(--x-muted); font-weight: 500; }
.x-mo__form .x-ag-k--fill { justify-self: start; font-weight: 500; }
.x-mo__pub { justify-self: start; font-size: 12px; font-style: normal; }
.x-mo__perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.x-mo__perk { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); font-size: 12px; }
.x-mo__perk small { color: var(--x-muted); font-size: 12px; }
.x-mo__perk .x-mini__chip { padding: 3px 6px; }
/* F: a profile report; tiles rise in, deltas pop, weekly bars grow, the top record lands */
.x-mo__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x-mo__stat { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-mo__stat > small { line-height: 1.3; }
.x-mo__fig { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.x-mo__fig b { font-size: 18px; letter-spacing: -0.02em; }
.x-mo .x-mo__fig .x-msc__ok { font-size: 12px; }
.x-mo__wk { display: grid; gap: 6px; }
.x-mo__wk .x-ag__bars { height: 56px; gap: 10px; }
.x-mo__wks { display: flex; gap: 10px; font-size: 12px; color: var(--x-muted); }
.x-mo__wks span { flex: 1; text-align: center; }
.x-mo__top .x-ag__body { flex: 1; }
.x-mo__top .x-ag__body small { overflow: hidden; text-overflow: ellipsis; }
.x-mo__top > b { margin-left: auto; white-space: nowrap; font-size: 13px; }
/* Note card under the steps: a quiet pointer to Media Sellers */
.x-mo__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding: 16px 20px; border-radius: 8px; border: 1px solid var(--x-line); background: var(--x-surface);
}
.x-mo__note p { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.45; color: var(--x-text-90); }
.x-mo__note h3 { margin: 0 0 4px; font: 500 var(--fs-nav-15)/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink); }

/* For Media Owners: not a buying platform. Brand, through find (Discover), to the brand's own platform or the media owner direct.
   One calm 6s cycle; logos swap at each cycle's start while their card is unlit. Fixed connector geometry so the SVG never stretches.
   Paused off-screen through .x-msa. The resting frame (reduced motion) is every column visible, lines and outcomes lit. */
.x-nb__head { max-width: 640px; }
.x-nb__pill { margin: 20px 0 0; }
.x-nb__vis { margin-top: 40px; }
.x-nb {
  --x-nb-t: 6s; --x-nb-row: 132px;
  position: relative; display: grid; justify-content: center; align-items: center;
  grid-template-columns: minmax(0, 240px) 56px 96px 56px minmax(0, 280px);
  grid-template-rows: var(--x-nb-row) var(--x-nb-row);
  grid-template-areas: "brand c1 hub c2a outa" "brand c1 hub c2b outb";
  padding: 48px 32px 56px; box-sizing: border-box;
  font: 500 14px/1.25 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-nb__card {
  position: relative; z-index: 1; display: grid; gap: 10px; min-width: 0; padding: 14px; box-sizing: border-box;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05);
}
.x-nb__brand { grid-area: brand; }
.x-nb__outa { grid-area: outa; }
.x-nb__outb { grid-area: outb; }
.x-nb__outa, .x-nb__outb { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB; }
.x-nb__lbl { font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--x-muted); }
.x-nb__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.x-nb__stack { display: grid; flex: 1; min-width: 0; }
.x-nb__stack > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-width: 0; opacity: 0; }
.x-nb__stack > span:first-child { opacity: 1; }
.x-nb__stack b { min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.x-nb__msg {
  flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box;
  border-radius: 8px; background: var(--x-surface); border: 1px solid var(--x-line);
}
.x-nb__msg svg { width: 18px; height: 18px; fill: none; stroke: var(--x-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.x-nb__hub { grid-area: hub; position: relative; z-index: 1; justify-self: center; }
.x-nb__core {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; box-sizing: border-box;
  background: #fff; border: 1px solid #8EEAF2; box-shadow: 0 0 0 6px rgba(142, 234, 242, .35), 0 6px 18px rgba(17, 17, 19, .08);
}
.x-nb__core img { display: block; width: 58px; height: auto; }
.x-nb__cap { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--x-muted); white-space: nowrap; }
.x-nb__c { display: block; overflow: visible; }
.x-nb__c path { fill: none; stroke-linecap: round; }
.x-nb__ln { stroke: #3BB8C4; stroke-width: 1.75; }
.x-nb__dot { stroke: #3BB8C4; stroke-width: 7; stroke-dasharray: .001 99.999; opacity: 0; }
.x-nb__c1 { grid-area: c1; width: 56px; height: calc(var(--x-nb-row) * 2); }
.x-nb__c2a { grid-area: c2a; width: 56px; height: var(--x-nb-row); }
.x-nb__c2b { grid-area: c2b; width: 56px; height: var(--x-nb-row); }
.x-nb__v1, .x-nb__v2 { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .x-nb__brand { animation: x-nb-src var(--x-nb-t) ease-in-out infinite; }
  .x-nb__core { animation: x-nb-hub var(--x-nb-t) ease-in-out infinite; }
  .x-nb__outa, .x-nb__outb { animation: x-nb-out var(--x-nb-t) ease-in-out infinite; }
  .x-nb__c1 .x-nb__ln, .x-nb__v1 .x-nb__ln { animation: x-nb-l1 var(--x-nb-t) ease-in-out infinite; }
  .x-nb__c1 .x-nb__dot, .x-nb__v1 .x-nb__dot { animation: x-nb-d1 var(--x-nb-t) linear infinite; }
  .x-nb__c2a .x-nb__ln, .x-nb__c2b .x-nb__ln, .x-nb__v2 .x-nb__ln { animation: x-nb-l2 var(--x-nb-t) ease-in-out infinite; }
  .x-nb__c2a .x-nb__dot, .x-nb__c2b .x-nb__dot, .x-nb__v2 .x-nb__dot { animation: x-nb-d2 var(--x-nb-t) linear infinite; }
  .x-nb__stack--4 > span { animation: x-nb-s4 calc(var(--x-nb-t) * 4) linear infinite both; animation-delay: calc(var(--x-nb-t) * var(--k, 0)); }
  .x-nb__stack--6 > span { animation: x-nb-s6 calc(var(--x-nb-t) * 6) linear infinite both; animation-delay: calc(var(--x-nb-t) * var(--k, 0)); }
}
@keyframes x-nb-src {
  0%, 3% { border-color: var(--x-swap-card-border); box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05); }
  8%, 24% { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB; }
  34%, 100% { border-color: var(--x-swap-card-border); box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05); }
}
@keyframes x-nb-hub {
  0%, 28% { box-shadow: 0 0 0 6px rgba(142, 234, 242, .35), 0 6px 18px rgba(17, 17, 19, .08); }
  36%, 46% { box-shadow: 0 0 0 12px rgba(142, 234, 242, .5), 0 6px 18px rgba(17, 17, 19, .08); }
  58%, 100% { box-shadow: 0 0 0 6px rgba(142, 234, 242, .35), 0 6px 18px rgba(17, 17, 19, .08); }
}
@keyframes x-nb-out {
  0%, 60% { border-color: var(--x-swap-card-border); box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05); }
  66%, 88% { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB; }
  97%, 100% { border-color: var(--x-swap-card-border); box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05); }
}
@keyframes x-nb-l1 { 0%, 10% { stroke: var(--x-swap-card-border); } 30%, 88% { stroke: #3BB8C4; } 97%, 100% { stroke: var(--x-swap-card-border); } }
@keyframes x-nb-l2 { 0%, 44% { stroke: var(--x-swap-card-border); } 62%, 88% { stroke: #3BB8C4; } 97%, 100% { stroke: var(--x-swap-card-border); } }
@keyframes x-nb-d1 { 0%, 9% { opacity: 0; stroke-dashoffset: 0; } 11%, 28% { opacity: 1; } 31% { opacity: 0; stroke-dashoffset: -100; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes x-nb-d2 { 0%, 43% { opacity: 0; stroke-dashoffset: 0; } 45%, 59% { opacity: 1; } 62% { opacity: 0; stroke-dashoffset: -100; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes x-nb-s4 { 0% { opacity: 0; } 1.5%, 23.5% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes x-nb-s6 { 0% { opacity: 0; } 1%, 15.6% { opacity: 1; } 16.6%, 100% { opacity: 0; } }
@media (max-width: 639px) {
  .x-nb {
    justify-content: stretch; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "brand" "v1" "hub" "v2" "outa" "outb"; padding: 24px 16px 28px; row-gap: 0;
  }
  .x-nb__c1, .x-nb__c2a, .x-nb__c2b { display: none; }
  .x-nb__v1, .x-nb__v2 { display: block; justify-self: center; width: 16px; height: 40px; }
  .x-nb__v1 { grid-area: v1; }
  .x-nb__v2 { grid-area: v2; }
  .x-nb__core { width: 80px; height: 80px; }
  .x-nb__core img { width: 48px; }
  .x-nb__cap { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
  .x-nb__outb { margin-top: 12px; }
}
/* Secondary upgrade link beside the closing band's button */
.x-feed__alt {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; vertical-align: middle;
  font: 500 var(--fs-nav-15)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-feed-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.x-feed__alt:focus-visible { outline: 2px solid var(--x-feed-ink); outline-offset: 2px; border-radius: 4px; }
/* Closing band CTA row: button and "See pricing" link centred as one group */
.x-feed__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 28px; }
.x-feed__ctas .x-feed__btn { margin: 0; }
.x-feed__ctas .x-feed__alt { margin: 0; padding-top: 0; padding-bottom: 0; }
/* Programmatic focus targets (route headings, sections, scroll targets) take focus for screen readers without a visible ring; links, buttons and fields keep theirs */
[tabindex="-1"]:not(a):not(button):not(input):not(select):not(textarea):focus,
[tabindex="-1"]:not(a):not(button):not(input):not(select):not(textarea):focus-visible { outline: none !important; }

/* Platform Overview (#/overview/N): full-viewport slide deck. The site header and footer are hidden on this route. */
html.x-deck-on, html.x-deck-on body { overflow: hidden; }
.x-deck {
  position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh; height: 100dvh; background: var(--x-bg); color: var(--x-body);
  transition: background-color .4s ease;
}
.x-deck.is-dark {
  --x-bg: #111113; --x-ink: #f4f4f6; --x-body: #f4f4f6; --x-line: rgba(255, 255, 255, 0.16);
  --x-hover: rgba(255, 255, 255, 0.08); --x-muted: rgba(255, 255, 255, 0.7);
  --x-text-90: rgba(255, 255, 255, 0.72); --x-text-50: rgba(255, 255, 255, 0.62); --x-focus-cyan: #C5FCFB;
}
.x-deck.is-dark .x-logo { --x-logo-ink: #f4f4f6; }
.x-deck.is-dark .x-logo__by-name { color: #f4f4f6; }
.x-deck.is-dark .x-logo__by-by { color: #9A9AA3; }
.x-deck__top {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 var(--x-pad); border-bottom: 1px solid var(--x-line);
}
.x-deck__top .x-logo { font-size: 26px; }
.x-deck__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; pointer-events: none; }
.x-deck__progress i {
  display: block; height: 100%; width: 0; background: linear-gradient(90deg, #C5FCFB, #8EEAF2);
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.x-deck__count {
  margin: 0 0 0 auto; font: 500 14px/1 "Archivo", system-ui, sans-serif; color: var(--x-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.x-deck__top .x-quotes__arrow, .x-deck__foot .x-quotes__arrow { background: var(--x-bg); color: var(--x-ink); border-color: var(--x-line); }
.x-deck__top .x-quotes__arrow:hover, .x-deck__foot .x-quotes__arrow:hover { background: var(--x-hover); }
.x-deck__foot .x-quotes__arrow:disabled { background: var(--x-bg); }
.x-deck .x-quotes__arrow:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-deck__exit { min-height: 44px; }
.x-deck__top .x-quotes__arrow[hidden] { display: none; }
.x-deck__stage { position: relative; overflow: hidden; touch-action: pan-y; }
.x-slide {
  position: absolute; inset: 0; display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: 32px var(--x-pad) 40px;
}
.x-slide[hidden] { display: none; }
.x-slide__in { width: 100%; max-width: 1200px; margin: auto; }
.x-slide__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.x-deck__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 0 var(--x-pad); border-top: 1px solid var(--x-line);
}
.x-deck__dots { display: none; list-style: none; margin: 0; padding: 0; }
.x-deck__dot {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 44px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.x-deck__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--x-line);
  transition: width .3s ease, background-color .3s ease, border-radius .3s ease;
}
.x-deck__dot:hover::before { background: var(--x-muted); }
.x-deck__dot[aria-current="step"]::before { width: 20px; border-radius: 4px; background: linear-gradient(135deg, #C5FCFB, #8EEAF2); box-shadow: inset 0 0 0 1px #8EEAF2; }
.x-deck__dot:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: -2px; border-radius: 6px; }
.x-deck__hint { margin: 0; font-size: 13px; color: var(--x-muted); text-align: center; }
@media (min-width: 720px) {
  .x-deck__dots { display: flex; }
  .x-deck__hint { display: none; }
}
@media (max-width: 479px) {
  .x-deck__top { gap: 8px; }
  .x-deck__top .x-logo__by { display: none; }
}

/* Slide type: the site's two-line heading, line 2 muted with the cyan highlight */
.x-deck h1, .x-deck h2 {
  margin: 0; font-weight: 350; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -0.02em; color: var(--x-ink);
}
.x-deck h1 > span, .x-deck h2 > span { display: block; }
.x-deck__mute { color: var(--x-text-50); }
.x-deck h1.x-deck__title { font-size: clamp(72px, 11vw, 148px); line-height: 1; letter-spacing: -0.04em; }
.x-deck h1.x-deck__title .x-deck__mute { margin-top: 20px; font-size: clamp(26px, 3vw, 44px); line-height: 1.15; letter-spacing: -0.02em; max-width: 640px; }
.x-deck__eyebrow { margin: 0 0 16px; font-size: var(--fs-text-16); line-height: 1.45; color: var(--x-muted); }
.x-deck__lead { margin: 20px 0 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: var(--x-text-90); }
.x-deck__small { margin: 24px 0 0; font-size: 14px; color: var(--x-muted); letter-spacing: 0.01em; }
.x-deck__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.x-deck__links .x-btn { min-height: 44px; }
/* Dark slides keep the pale-cyan gradient text, as on the site's dark bands */
html:not([data-theme="dark"]) .x-slide--dark .x-grad-text {
  color: #C5FCFB; -webkit-text-fill-color: transparent; padding: 0; margin: 0;
  background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 40%, #8EEAF2 100%);
  background-size: auto; background-position: 0 0; -webkit-background-clip: text; background-clip: text;
}

/* Slide 1: title with the hero photo */
.x-deck__photo { position: relative; border-radius: 8px; overflow: hidden; background: var(--x-shot); }
.x-deck__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.x-deck__tags { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.x-deck__tags .x-mini__chip { font-size: 13px; padding: 6px 10px; }
/* Slide 2: three problem points */
.x-deck__pts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; counter-reset: x-pt; }
.x-deck__pts li { padding: 28px; border-radius: 8px; background: var(--x-surface); font-size: 20px; line-height: 1.4; color: var(--x-ink); letter-spacing: -0.01em; }
.x-deck__pts li::before { counter-increment: x-pt; content: "0" counter(x-pt); display: block; margin-bottom: 16px; font-size: 14px; font-weight: 500; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.x-deck__pts b { font-weight: 500; }
/* Slide 3: globe beside the figures */
.x-deck .x-globe { --g: min(520px, 84vw, 58vh); margin: 0 auto; }
.x-deck .x-kpi { margin: 32px 0 0; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
.x-deck .x-kpi__item + .x-kpi__item { border-left: 0; }
.x-deck .x-kpi__item:nth-child(even) { border-left: 1px solid var(--x-feed-line); }
.x-deck .x-kpi .x-kpi__num { font-size: clamp(36px, 4vw, 56px); }
/* Feature cards with the site's mock animations */
.x-deck__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.x-deck .x-card { padding: 24px 24px 0; }
.x-deck .x-card h3 { font-size: 24px; }
.x-deck .x-card__body { margin-bottom: 24px; }
.x-deck .x-card__shot { margin: auto -24px 0 8%; aspect-ratio: 16 / 9; }
.x-deck__vis { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; }
.x-deck .x-act__steps { max-width: 620px; }
.x-deck__note { margin: 20px 0 0; padding: 14px 16px; border-radius: 8px; background: var(--x-surface); font-size: 15px; line-height: 1.45; color: var(--x-ink); max-width: 560px; }
/* Slide 9: four audiences */
.x-deck__aud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.x-deck__aud a {
  display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 24px; border-radius: 8px;
  background: var(--x-surface); color: var(--x-ink); transition: background-color .2s ease;
}
.x-deck__aud a:hover { background: var(--x-surface-hover); }
.x-deck__aud a:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-deck__aud h3 { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
.x-deck__aud p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--x-text-90); }
.x-deck__aud .x-deck__go { margin-top: auto; padding-top: 12px; font-size: 15px; font-weight: 500; }
/* Slide 10: plans */
.x-deck__plans { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.x-deck__plans li { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 8px; background: var(--x-surface); }
.x-deck__plans li.is-free { background: transparent; box-shadow: inset 0 0 0 1px #8EEAF2; }
.x-deck__plans b { font-size: 15px; font-weight: 500; color: var(--x-ink); }
.x-deck__plans .x-deck__price { font-size: clamp(28px, 2.6vw, 36px); font-weight: 350; line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-deck__plans small { font-size: 14px; line-height: 1.4; color: var(--x-muted); }
/* Slide 10: the Agencies card (plans from the #/pricing Agencies tab), full width under the other plans */
.x-deck__plans > li.x-deck__ag { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; }
.x-deck__ag-zone { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.x-deck__ag-k { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--x-muted); }
.x-deck__ag-prices { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.x-deck__ag-prices > span { display: flex; flex-direction: column; gap: 2px; }
.x-deck__ag-desc { margin: 0; font-size: 14px; line-height: 1.4; color: var(--x-text-90); }
.x-deck__plans .x-deck__ag ul { list-style: none; margin: 0; padding: 0; }
.x-deck__plans .x-deck__ag ul li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 0; border-radius: 0; background: none;
  font-size: 14px; line-height: 1.4; color: var(--x-body); break-inside: avoid;
}
.x-deck__ag .x-check { width: 16px; height: 16px; margin-top: 2px; }
.x-deck__ag-feats { column-gap: 24px; }
.x-deck__ag-feats li + li { margin-top: 6px; }
.x-deck__plans .x-deck__ag ul.x-deck__ag-ent { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.x-deck__plans .x-deck__ag ul.x-deck__ag-ent li { display: inline-grid; }
@media (min-width: 640px) { .x-deck__ag-feats { columns: 2; } }
@media (min-width: 1024px) {
  .x-deck__plans > li.x-deck__ag { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.1fr); }
  .x-deck__ag-feats { columns: 3; }
}
/* 1440 and up (the 16:9 1600x900 frame): a wider slide, the six plans in one row, the Agencies card under them */
@media (min-width: 1440px) {
  .x-slide__in--plans { max-width: 1440px; }
  .x-slide__in--plans .x-deck__plans { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 24px; }
  .x-slide__in--plans .x-deck__plans > li { padding: 20px; }
  .x-slide__in--plans .x-deck__links { margin-top: 24px; }
}
/* Slide 11: case studies */
.x-deck__quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.x-deck__quote { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 28px; border-radius: 8px; background: var(--x-surface); }
.x-deck__quote > img { height: 28px; width: auto; max-width: 60%; object-fit: contain; object-position: left center; }
.x-deck__quote blockquote { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; color: var(--x-ink); }
.x-deck__quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14px; line-height: 1.35; color: var(--x-muted); }
.x-deck__quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; filter: grayscale(100%); flex: none; }
.x-deck__quote figcaption b { display: block; font-weight: 500; color: var(--x-ink); }
/* Slide 12: close */
.x-deck__close { text-align: center; }
.x-deck__close h2 { max-width: 900px; margin: 0 auto; }
.x-deck__close .x-deck__links { justify-content: center; }
.x-deck__close .x-btn--outline { background: transparent; color: var(--x-ink); }
.x-deck__close .x-btn--outline:hover { background: var(--x-hover); }
.x-deck__close .x-btn:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
@media (min-width: 640px) {
  .x-deck__aud, .x-deck__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .x-deck__pts, .x-deck__quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x-deck__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .x-slide { padding: 40px 48px 48px; }
  .x-slide__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .x-slide__grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .x-deck__aud { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .x-deck__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x-deck .x-kpi { margin-top: 0; }
}
/* Short laptop screens: tighten so each slide fits without scrolling */
@media (min-width: 1024px) and (max-height: 820px) {
  .x-deck h1, .x-deck h2 { font-size: clamp(32px, 3.4vw, 48px); }
  .x-deck h1.x-deck__title { font-size: clamp(64px, 8vw, 112px); }
  .x-deck__lead { font-size: 16px; margin-top: 14px; }
  .x-deck__cards, .x-deck__aud, .x-deck__plans, .x-deck__quotes, .x-deck__pts { margin-top: 24px; }
  .x-deck .x-card__shot { aspect-ratio: 2 / 1; }
  .x-deck .x-globe { --g: min(480px, 54vh); }
  .x-slide { padding-top: 24px; padding-bottom: 28px; }
}
/* Entrance: staggered fade and rise, replayed each time a slide shows */
@media (prefers-reduced-motion: no-preference) {
  .x-slide.is-on .x-in { animation: x-deck-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 40ms); }
}
@keyframes x-deck-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .x-deck, .x-deck__progress i, .x-deck__dot::before, .x-deck__aud a { transition: none; }
}

/* Publishers deck (#/deck/publishers/N): the overview deck as a static, print-ready deck. No links or controls;
   a quiet footer with the deck name and slide number. Mock loops play once, then rest on their final frame (.is-settled). */
.x-deck--pub .x-deck__top .x-logo { cursor: default; }
.x-pub__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 48px; padding: 0 var(--x-pad); border-top: 1px solid var(--x-line);
  font: 400 13px/1 "Archivo", system-ui, sans-serif; color: var(--x-muted); font-variant-numeric: tabular-nums;
}
.x-deck .x-act__steps.x-pub__steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; border-top: 0; }
.x-deck .x-pub__steps li { padding: 14px 0; border-top: 1px solid var(--x-line); border-bottom: 0; }
.x-deck .x-pub__steps li:last-child { border-bottom: 1px solid var(--x-line); }
.x-pub__mail { margin: 8px 0 0; font-size: clamp(30px, 3.6vw, 52px); font-weight: 350; line-height: 1.15; letter-spacing: -0.02em; color: #C5FCFB; }
.x-deck__close .x-pub__get { margin: 40px 0 0; }
.x-deck__close .x-deck__small { margin-top: 16px; }
@media (min-width: 768px) { .x-deck__quotes.x-pub__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-height: 820px) {
  .x-deck .x-pub__steps li { padding: 10px 0; }
  .x-deck .x-act__steps.x-pub__steps { margin-top: 20px; }
}
/* Cover: the headline is the title */
.x-deck h1.x-pub__h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.03em; }
@media (min-width: 1024px) and (max-height: 820px) { .x-deck h1.x-pub__h1 { font-size: clamp(36px, 4vw, 54px); } }

/* Campaign record card */
.x-pub__rec {
  width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box; overflow: hidden;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 8px 24px rgba(17, 17, 19, .06);
  font: 400 14px/1.4 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-pub__rec-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--x-swap-card-border); }
.x-pub__rec-head b { display: block; font-size: 16px; font-weight: 600; }
.x-pub__rec-head small { font-size: 13px; color: var(--x-muted); }
.x-pub__rec-head .x-mini__chip { margin-left: auto; }
.x-pub__rec-shot { position: relative; aspect-ratio: 2 / 1; background: var(--x-shot); }
.x-pub__rec-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.x-pub__rec-shot .x-mini__chip { position: absolute; left: 12px; bottom: 12px; background: #fff; border-color: #E6E6E8; box-shadow: 0 1px 2px rgba(17, 17, 19, .1); }
.x-pub__ok { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: rgba(34, 160, 107, .14); color: #146C47; }
html[data-theme="dark"] .x-pub__ok { color: #5FD3A0; }
.x-pub__ok svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-pub__rec-shot .x-pub__ok { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: #fff; color: #146C47; box-shadow: 0 1px 2px rgba(17, 17, 19, .12); }
.x-pub__rec-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 16px 18px; }
.x-pub__rec-dl div { min-width: 0; }
.x-pub__rec-dl dt { font-size: 12px; font-weight: 500; color: var(--x-muted); }
.x-pub__rec-dl dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.x-pub__rec-dl dd.x-pub__rec-owner { display: flex; align-items: center; gap: 8px; }
.x-pub__rec-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 16px; border-top: 1px solid var(--x-swap-card-border); }
@media (max-width: 639px) { .x-pub__rec-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-height: 820px) {
  .x-pub__rec-shot { aspect-ratio: 5 / 2; }
  .x-pub__rec-dl { gap: 8px 16px; padding: 12px 18px; }
  .x-pub__rec-head { padding: 10px 18px; }
}

/* Brand requests: one ask out, responses back */
.x-pub__ask { max-width: 460px; }
.x-pub__ask .x-ms__row > .x-mini__chip { margin-left: auto; }
.x-pub__resp { list-style: none; margin: 12px 0 0; padding: 0; width: 100%; max-width: 460px; align-self: center; display: grid; gap: 8px; }
.x-pub__resp li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  font: 400 13px/1.3 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-pub__resp img, .x-pub__flow img, .x-pub__crm-grid img { flex: none; width: 32px; height: 32px; border-radius: 8px; outline: 1px solid var(--x-arc-icon-ring); }
.x-pub__resp b { display: block; font-weight: 600; font-size: 14px; }
.x-pub__resp small { color: var(--x-muted); font-size: 12px; }
.x-pub__resp li > span:nth-child(2) { flex: 1; min-width: 0; }
.x-pub__resp .x-mini__chip { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .x-slide.is-on .x-pub__resp li { animation: x-deck-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.7s + var(--k, 0) * 220ms); }
}

/* Buy through your platforms: media owners, through find, to the buying platforms */
.x-pub__flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); column-gap: 28px; padding: 28px 24px; min-height: 380px; box-sizing: border-box; }
.x-pub__flow-lines { position: absolute; inset: 64px 24px 28px; width: calc(100% - 48px); height: calc(100% - 92px); overflow: visible; pointer-events: none; }
.x-pub__flow-lines line { stroke: var(--x-swap-card-border); stroke-width: 1.5; }
.x-pub__flow-lines line.is-hl { stroke: #3BB8C4; stroke-width: 2; }
.x-pub__col { position: relative; z-index: 1; display: grid; grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 0; min-width: 0; }
.x-pub__col > p { margin: 0 0 12px; height: 24px; font: 500 12px/24px "Archivo", system-ui, sans-serif; color: var(--x-muted); text-align: center; white-space: nowrap; }
.x-pub__col ul { display: contents; list-style: none; }
.x-pub__col li {
  align-self: center; display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 10px; min-width: 0; box-sizing: border-box;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  font: 500 14px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-pub__col li span { min-width: 0; overflow-wrap: break-word; }
.x-pub__flow img.x-pub__pad { box-sizing: border-box; padding: 5px; object-fit: contain; background: #fff; }
.x-pub__col li.is-hl { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB; }
.x-pub__direct { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--x-surface); border: 1px solid var(--x-line); }
.x-pub__direct svg { width: 18px; height: 18px; fill: none; stroke: var(--x-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.x-pub__hub { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 36px; }
.x-pub__hub .x-swap__core { position: static; transform: none; width: 64px; height: 64px; }
.x-pub__hub .x-logo { position: absolute; left: 50%; top: calc(50% + 18px + 42px); transform: translateX(-50%); font-size: 18px; white-space: nowrap; }
.x-pub__hub .x-logo__by { display: none; }
@media (max-width: 639px) {
  .x-pub__flow { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); column-gap: 12px; padding: 20px 12px; }
  .x-pub__flow-lines { inset: 56px 12px 20px; width: calc(100% - 24px); height: calc(100% - 76px); }
  .x-pub__col li { padding: 8px; gap: 8px; font-size: 12px; }
  .x-pub__col li img, .x-pub__direct { width: 24px; height: 24px; }
  .x-pub__hub .x-swap__core { width: 48px; height: 48px; }
  .x-pub__hub .x-logo { display: none; }
}

/* CRM and inbox sync: a brand lead lands in the CRM */
.x-pub__crm { display: grid; gap: 14px; width: 100%; max-width: 480px; align-self: center; }
.x-pub__crm .x-ms { max-width: none; }
.x-pub__crm .x-ms__row > .x-pub__ok { margin-left: auto; }
.x-pub__crm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.x-pub__crm-grid li {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 100px; padding: 10px 6px; box-sizing: border-box; min-width: 0; text-align: center;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  font: 500 15px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-pub__crm-grid img { box-sizing: border-box; padding: 6.5px; object-fit: contain; background: #fff; }
.x-pub__crm-grid li.is-hl { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB, 0 0 18px rgba(197, 252, 251, .9); }
.x-pub__crm-grid .x-msa__ok { top: 8px; right: 8px; bottom: auto; }
@media (max-width: 639px) {
  .x-pub__crm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .x-pub__crm-grid li { flex-direction: row; justify-content: flex-start; height: 48px; padding: 0 10px; font-size: 14px; }
}
@media (min-width: 1024px) and (max-height: 820px) { .x-pub__crm-grid li { height: 84px; } }

.x-deck--pub .is-settled, .x-deck--pub .is-settled *, .x-deck--pub .is-settled *::before, .x-deck--pub .is-settled *::after { animation: none !important; }

/* Master deck (#/deck/master/N): the publishers deck's chrome, type and mocks, for the full platform overview.
   Every visual's resting (reduced-motion) frame is its finished state; motion only plays under no-preference. */
.x-mst .x-deck__progress { bottom: -1px; }
.x-deck h2.x-mst__fh { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; }
.x-mst__feat .x-deck__lead { max-width: 540px; }
.x-mst .x-br__pts { margin-top: 20px; }
.x-mst .x-act__vis { width: 100%; }
/* Section title cards */
.x-deck h2.x-mst__sec { font-size: clamp(72px, 9vw, 140px); line-height: 1; letter-spacing: -0.04em; }
.x-mst__secsub { margin: 28px 0 0; max-width: 860px; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-text-90); }
.x-mst__sec .x-grad-text { display: inline; }
/* Close slide: the site address under "Let's talk", plain text with the cyan marker */
.x-mst__url { margin: 32px 0 0; font-size: clamp(36px, 3.8vw, 60px); font-weight: 350; line-height: 1.1; letter-spacing: -0.02em; color: var(--x-ink); }
/* By the numbers */
.x-mst__nums { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.x-mst__nums li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 280px; padding: 28px; box-sizing: border-box;
  border-radius: 8px; background-color: var(--x-surface);
  background-image: radial-gradient(circle, var(--x-panel-dot) 1.5px, transparent 1.6px); background-size: 20px 20px; background-position: 10px 10px;
}
.x-mst__nums small { font-size: 18px; line-height: 1.3; color: var(--x-muted); }
.x-mst__fig { font-size: clamp(56px, 6.2vw, 104px); font-weight: 350; line-height: 1; letter-spacing: -0.035em; color: var(--x-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .x-mst__nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Shared diagram panel: the mocks' dotted surface */
.x-mst__panel {
  position: relative; width: 100%; margin-top: 32px; border-radius: 8px; overflow: hidden;
  background-color: var(--x-surface);
  background-image: radial-gradient(circle, var(--x-panel-dot) 1.5px, transparent 1.6px); background-size: 20px 20px; background-position: 10px 10px;
  font: 400 14px/1.35 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-mst__panel > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.x-mst__card {
  position: absolute; box-sizing: border-box; background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05);
}
.x-mst__core {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 128px; height: 128px; border-radius: 50%; box-sizing: border-box; z-index: 2;
  background: var(--x-swap-card); border: 1px solid #8EEAF2; box-shadow: 0 0 0 8px rgba(142, 234, 242, .35), 0 6px 18px rgba(17, 17, 19, .08);
}
.x-mst__core .x-logo { font-size: 32px; min-height: 0; line-height: 1; }
.x-mst__core small { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--x-muted); }
.x-mst__line { fill: none; stroke: #3BB8C4; stroke-width: 1.75; stroke-linecap: round; }
.x-mst__line--soft { stroke: #8EEAF2; stroke-dasharray: 3 5; }
.x-mst__flow { display: none; fill: none; stroke: var(--x-swap-card); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 22; }
.x-mst__head { fill: #3BB8C4; }
/* Flywheel */
.x-mst__fly { aspect-ratio: 1200 / 440; }
.x-mst__aud { width: 22.5%; height: 38.6%; padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.x-mst__aud h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.x-mst__aud p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--x-text-90); }
.x-mst__aud .x-mini__chip { align-self: flex-start; margin-bottom: 4px; }
.x-mst__step {
  position: absolute; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; gap: 10px;
  width: 210px; padding: 10px 12px; box-sizing: border-box; border-radius: 12px;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); box-shadow: 0 1px 2px rgba(17, 17, 19, .04);
  font-size: 13px; line-height: 1.3; font-weight: 500;
}
.x-mst__step i, .x-mst__n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: #EEFDFD; border: 1px solid #8EEAF2; color: #111113; font: 600 11px/1 "Archivo", system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums;
}
.x-mst__orbit { display: none; fill: #3BB8C4; }
/* Data sources */
.x-mst__src { aspect-ratio: 1200 / 460; }
.x-mst__s { left: 2%; width: 31.67%; height: 10.87%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 10px; }
.x-mst__s > span:last-child { display: grid; gap: 2px; min-width: 0; }
.x-mst__s b { font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-mst__s small { font-size: 12px; line-height: 1.2; color: var(--x-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-mst__out { left: 71.67%; top: 50%; width: 26.33%; transform: translateY(-50%); padding: 16px; display: grid; gap: 12px; }
.x-mst__out-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.x-mst__out-h b { font-size: 15px; font-weight: 600; }
.x-mst__rec { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
.x-mst__rec > span:first-child { width: 44px; height: 32px; border-radius: 4px; background: linear-gradient(135deg, #EDEDF0, #DCDCE1); }
.x-mst__rec:nth-of-type(3) > span:first-child { background: linear-gradient(135deg, #F3EEE6, #E3DCD2); }
.x-mst__rec:nth-of-type(4) > span:first-child { background: linear-gradient(135deg, #E9EEF3, #D6DEE6); }
.x-mst__rec > span:last-child { display: grid; gap: 6px; }
.x-mst__rec i { display: block; height: 7px; border-radius: 4px; background: var(--x-line); }
.x-mst__rec i:first-child { width: 72%; background: #C9CBD1; }
.x-mst__rec i:last-child { width: 48%; }
.x-mst__out-f { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
@media (prefers-reduced-motion: no-preference) {
  .x-slide.is-on .x-mst__flow { display: inline; animation: x-mst-flow 1.6s linear infinite; }
  .x-slide.is-on .x-mst__orbit { display: inline; offset-path: path("M318 220 A282 170 0 0 1 882 220 A282 170 0 0 1 318 220"); animation: x-mst-orbit 7s linear infinite; }
  .x-slide.is-on .x-mst__core { animation: x-mst-ring 2.8s ease-in-out infinite; }
}
@keyframes x-mst-flow { to { stroke-dashoffset: -24; } }
@keyframes x-mst-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes x-mst-ring { 0%, 100% { box-shadow: 0 0 0 8px rgba(142, 234, 242, .35), 0 6px 18px rgba(17, 17, 19, .08); } 50% { box-shadow: 0 0 0 14px rgba(142, 234, 242, .18), 0 6px 18px rgba(17, 17, 19, .08); } }

/* Pitch deck (#/deck/pitch/N): investor overview on the master deck's chrome (.x-deck--pub .x-mst).
   Not linked from the site. Every visual's resting (reduced-motion) frame is its finished state for PDF export;
   motion only plays under no-preference. */
.x-pch__dots { background-color: var(--x-surface); background-image: radial-gradient(circle, var(--x-panel-dot) 1.5px, transparent 1.6px); background-size: 20px 20px; background-position: 10px 10px; }
/* Cover */
.x-pch__brand.x-logo { font-size: 56px; min-height: 0; line-height: 1; margin: 0 0 40px; }
.x-pch__brand .x-logo__by { margin-left: 14px; font-size: 22px; }
.x-deck h1.x-pch__h1 { font-size: clamp(44px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.035em; }
.x-pch__h1 .x-grad-text { display: inline; }
/* Statement */
.x-deck h2.x-pch__stmt { max-width: 1120px; font-size: clamp(44px, 5vw, 80px); line-height: 1.05; letter-spacing: -0.035em; }
.x-pch__stmt .x-grad-text, .x-pch__hl .x-grad-text { display: inline; }
.x-pch__under { margin: 36px 0 0; max-width: 760px; font-size: 22px; line-height: 1.45; color: var(--x-text-90); }
.x-pch__line { margin: 32px 0 0; max-width: 1040px; font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; color: var(--x-ink); }
/* Stat cards: three across */
.x-mst__nums.x-pch__n3 { grid-template-columns: minmax(0, 1fr); }
.x-pch__n3 li { min-height: 260px; }
.x-pch__n3 .x-mst__fig { font-size: clamp(56px, 5.8vw, 96px); }
.x-pch__src { display: block; margin-top: 14px; font-size: 14px; line-height: 1.35; color: var(--x-muted); }
@media (min-width: 768px) { .x-mst__nums.x-pch__n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Problem: map with unknown pins */
.x-pch__map {
  width: 100%; padding: 16px; box-sizing: border-box; border-radius: 12px; background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border);
  box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 8px 24px rgba(17, 17, 19, .06); font: 400 14px/1.35 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-pch__map-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.x-pch__q {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -32px 0 0 -13px; box-sizing: border-box; border-radius: 50%;
  background: var(--x-swap-card); border: 1.5px dashed var(--x-muted); color: var(--x-muted);
  font: 600 13px/1 "Archivo", system-ui, sans-serif; opacity: .6;
}
.x-pch__q::before {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -1px; width: 2px; height: 6px; border-radius: 1px; background: var(--x-muted);
}
.x-pch__rec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 12px 2px 0; border-top: 1px solid var(--x-swap-card-border); }
.x-pch__rec dt { font-size: 12px; font-weight: 500; color: var(--x-muted); }
.x-pch__rec dd { margin: 2px 0 0; font-size: 16px; font-weight: 500; color: var(--x-muted); }
/* Wall 1: two industries */
.x-pch__split { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: stretch; margin-top: 40px; }
.x-pch__side { padding: 28px; border-radius: 8px; }
.x-pch__side h3 { margin: 0 0 20px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--x-ink); }
.x-pch__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.x-pch__items li {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border);
  font: 500 17px/1.2 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-pch__items li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8EEAF2; }
.x-pch__gap { display: flex; align-items: center; gap: 18px; padding: 0 12px; }
.x-pch__gap i { flex: 1; height: 0; border-top: 2px dashed #8EEAF2; }
/* Wall 2: names into one taxonomy */
.x-pch__tax { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; }
.x-pch__tax li { display: grid; grid-template-columns: minmax(0, 1fr) 104px 300px; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 8px; }
.x-pch__raw { display: flex; flex-wrap: wrap; gap: 10px; }
.x-pch__raw span {
  padding: 9px 16px; border-radius: 999px; background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border);
  font: 500 17px/1.2 "Archivo", system-ui, sans-serif; color: var(--x-text-90);
}
.x-pch__arrow { display: block; width: 100%; height: 16px; overflow: visible; }
.x-pch__arrow path { fill: none; stroke: #3BB8C4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-pch__norm {
  justify-self: start; padding: 10px 20px; border-radius: 999px; background: #EEFDFD; border: 1px solid #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB;
  font: 600 19px/1.2 "Archivo", system-ui, sans-serif; color: #111113;
}
/* Wall 3 */
.x-pch__body { margin: 0; font-size: 24px; line-height: 1.45; letter-spacing: -0.01em; color: var(--x-text-90); }
.x-pch__note {
  margin: 32px 0 0; padding: 22px 26px; border-radius: 12px; background: var(--x-swap-card); border: 1px solid #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB;
  font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; color: var(--x-ink);
}
/* Gateway flow */
.x-pch__gw { list-style: none; margin: 40px 0 0; padding: 56px 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px; border-radius: 8px; }
.x-pch__gw li {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 150px; padding: 20px; box-sizing: border-box;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05);
  font: 500 20px/1.25 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-pch__gw small { font-size: 13px; font-weight: 500; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.x-pch__gw li + li::before { content: ""; position: absolute; left: -42px; top: 50%; width: 30px; height: 2px; margin-top: -1px; background: #3BB8C4; border-radius: 1px; }
.x-pch__gw li + li::after { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -6px; border-left: 8px solid #3BB8C4; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.x-pch__gw li.is-find { border-color: #8EEAF2; box-shadow: 0 0 0 3px #C5FCFB, 0 0 18px rgba(197, 252, 251, .9); }
.x-pch__gw .x-logo { font-size: 34px; min-height: 0; line-height: 1; }
/* Incentives: four sides */
.x-pch__aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.x-pch__aud > div { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 8px; background: var(--x-surface); }
.x-pch__ico {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; box-sizing: border-box; border-radius: 14px;
  background: var(--x-swap-card); border: 1px solid var(--x-swap-card-border); box-shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05);
}
.x-pch__ico svg { width: 28px; height: 28px; display: block; overflow: visible; }
.x-pch__ico svg g { stroke: var(--x-ink); }
.x-pch__aud h3 { margin: 0; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--x-ink); }
.x-pch__aud ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.x-pch__aud li { display: flex; gap: 10px; font-size: 17px; line-height: 1.4; color: var(--x-text-90); }
.x-pch__aud .x-check { flex: none; }
@media (min-width: 1024px) { .x-pch__aud { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Flywheel: four steps round the find core */
.x-pch__fly .x-mst__step { width: 250px; padding: 14px 16px; gap: 12px; font-size: 17px; line-height: 1.25; }
.x-pch__fly .x-mst__step i { width: 28px; height: 28px; font-size: 12px; }
/* Traction: logo wall */
.x-pch__logos { display: grid; gap: 14px; margin-top: 36px; }
.x-pch__grp { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 24px; padding: 18px 24px; border-radius: 8px; background: var(--x-surface); }
.x-pch__grp > p { margin: 0; font: 500 17px/1.3 "Archivo", system-ui, sans-serif; color: var(--x-ink); }
.x-pch__grp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.x-pch__grp li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 104px; padding: 12px 10px; box-sizing: border-box; min-width: 0;
  background: #fff; border: 1px solid #E6E6E8; border-radius: 12px; box-shadow: 0 1px 2px rgba(17, 17, 19, .04);
}
.x-pch__grp img { display: block; max-width: 100%; height: 38px; object-fit: contain; }
.x-pch__grp img.x-pch__ink { filter: brightness(0); }
.x-pch__grp li span { font: 500 13px/1.2 "Archivo", system-ui, sans-serif; color: #5E5E66; text-align: center; }
/* Team */
.x-pch__name { margin: 32px 0 0; font-size: 22px; line-height: 1.3; color: var(--x-ink); }
.x-pch__name b { font-weight: 500; }
.x-pch__name span { color: var(--x-muted); }
@media (prefers-reduced-motion: no-preference) {
  .x-pch .x-slide.is-on .x-pch__q { animation: x-pch-drop .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.5s + var(--k, 0) * 110ms); }
  .x-pch .x-slide.is-on .x-pch__gap i { animation: x-pch-grow .7s cubic-bezier(.2, .7, .2, 1) both .6s; }
  .x-pch .x-slide.is-on .x-pch__gap i:first-child { transform-origin: left center; }
  .x-pch .x-slide.is-on .x-pch__gap i:last-child { transform-origin: right center; }
  .x-pch .x-slide.is-on .x-pch__raw span { animation: x-deck-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.35s + var(--r, 0) * 380ms + var(--k, 0) * 90ms); }
  .x-pch .x-slide.is-on .x-pch__arrow path { stroke-dasharray: 100; animation: x-pch-draw .45s ease-out both; animation-delay: calc(.75s + var(--r, 0) * 380ms); }
  .x-pch .x-slide.is-on .x-pch__norm { animation: x-pch-pop .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(1.05s + var(--r, 0) * 380ms); }
  .x-pch .x-slide.is-on .x-pch__gw li { animation: x-deck-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--k, 0) * 160ms); }
  .x-pch .x-slide.is-on .x-pch__grp li { animation: x-deck-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--k, 0) * 50ms); }
}
@keyframes x-pch-drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes x-pch-grow { from { transform: scaleX(0); } }
@keyframes x-pch-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes x-pch-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }

/* For Brands feature sections: the shared split pattern (.x-act, .x-act--flip, .x-swap, .x-ms).
   The original five mocks sit in .x-br__shot; the new mocks run the Agencies timeline (--x-agt, --s) once over 6s
   and rest on their final frame; paused off-screen through .x-msa; static final frame under reduced motion.
   All brands, places and figures in these mocks are illustrative. */
.x-br__shot {
  width: 100%; max-width: 420px; align-self: center; aspect-ratio: 4 / 3; border-radius: 12px;
  box-shadow: inset 0 0 0 1px #E6E6E8, 0 1px 2px rgba(17, 17, 19, .04), 0 4px 12px rgba(17, 17, 19, .05);
}
.x-br { animation: x-br-t 6s linear 1 both; font-size: 13px; container-type: inline-size; }
.x-br.is-paused { animation-play-state: paused; }
@keyframes x-br-t { from { --x-agt: 0; } to { --x-agt: 1; } }
@media (prefers-reduced-motion: reduce) { .x-br { animation: none; } }
.x-br .x-msc__ok { animation: none; display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
.x-br .x-msc__btn { font-style: normal; font-size: 12px; }
.x-br__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.x-br__you { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--x-muted); }
.x-br__you .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-br__legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.x-br__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.x-br__legend .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-br__head .x-blogo { border-radius: 50%; border: 0; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 1px 3px rgba(17, 17, 19, .18); }
/* A: map */
.x-br__map { position: relative; aspect-ratio: 8 / 5; border-radius: 8px; background: var(--x-surface); overflow: hidden; }
.x-br__map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x-br__land { fill: var(--x-swap-card); stroke: var(--x-line); stroke-width: 1.5; stroke-linejoin: round; }
.x-br__mk, .x-br__ring, .x-br__cur { position: absolute; }
.x-br__mk {
  --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1);
  width: 20px; height: 20px; margin: -25px 0 0 -10px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 2px 5px rgba(17, 17, 19, .22); z-index: 2;
  opacity: var(--p); transform: translateY(calc((1 - var(--p)) * -16px));
}
.x-br__mk img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.x-br__mk::before {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(17, 17, 19, .2));
}
.x-br__mk--sel { z-index: 4; }
.x-br__mk--sel::after {
  --q: clamp(0, calc((var(--x-agt) - .74) * 16), 1);
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--text-primary);
  opacity: var(--q); transform: scale(calc(.5 + .5 * var(--q)));
}
.x-br__ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; z-index: 1;
  border: 1.5px dashed #3BB8C4; background: rgba(142, 234, 242, .22);
}
.x-br__cur {
  --q: clamp(0, calc((var(--x-agt) - .56) * 6), 1);
  width: 16px; height: 18px; margin: -14px 0 0 2px; z-index: 5; opacity: clamp(0, calc((var(--x-agt) - .56) * 30), 1);
  transform: translate(calc((1 - var(--q)) * 90px), calc((1 - var(--q)) * 40px));
}
.x-br__cur svg { display: block; width: 100%; height: 100%; fill: #111113; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.x-br__spots-row { justify-self: start; max-width: 100%; }
.x-br__spots-row .x-mini__chip { white-space: normal; line-height: 1.25; }
.x-br__spots-row .x-mini__chip::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed #3BB8C4; }
.x-br__rec {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px; border-radius: 8px; border: 1px solid #8EEAF2; background: var(--x-swap-card);
  box-shadow: 0 4px 12px rgba(17, 17, 19, .08);
}
.x-br__rec::before {
  content: ""; position: absolute; left: calc(68% - 6px); top: -7px; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--x-swap-card); border-left: 1px solid #8EEAF2; border-top: 1px solid #8EEAF2;
}
.x-br__thumb { width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--x-surface); }
.x-br__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x-br__rec-body { display: grid; gap: 6px; min-width: 0; }
.x-br__rec-body .x-ms__row { gap: 6px; flex-wrap: wrap; }
.x-br__rec-body .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-br__rec-body .x-mini__chip { padding: 3px 6px; }
.x-br__kv { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: 12px; }
.x-br__kv > div { display: flex; gap: 4px; }
.x-br__kv dt { color: var(--x-muted); }
.x-br__kv dd { margin: 0; font-weight: 500; }
.x-br__open { justify-self: start; font-size: 12px; font-weight: 600; color: var(--x-ink); }
/* Home feature card: compact Brand Monitor map, framed like the other card minis (light in both themes) */
.x-mbr.x-ms {
  --x-swap-card: #fff; --x-swap-card-border: #E6E6E8; --x-surface: #F6F6F7; --x-line: #E6E6E8;
  --x-ink: #111113; --x-muted: #5E5E66; --text-primary: #111113;
  position: absolute; inset: 12px 0 0 12px; width: auto; max-width: none; padding: 12px; gap: 8px;
  grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; overflow: hidden;
  border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; box-shadow: none; font-size: 12px;
}
.x-mbr .x-br__head { gap: 4px 8px; }
.x-mbr .x-br__legend { gap: 4px 10px; }
.x-mbr .x-br__legend .x-blogo, .x-mbr .x-br__you .x-blogo { width: 18px; height: 18px; }
.x-mbr .x-br__map { aspect-ratio: auto; min-height: 0; height: 100%; }
.x-mbr .x-br__mk { width: 16px; height: 16px; margin: -21px 0 0 -8px; padding: 2px; }
.x-mbr .x-br__ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@container (max-width: 300px) { .x-mbr .x-br__you { display: none; } }
/* Home features grid card: the map mock stays inside the card (stretched, not centred by .x-ms) and the map takes the room left.
   Desktop keeps the shared 16/10 shot so its top lines up with the row's other mocks, with the legend beside the map;
   one column lets the mock set its own height so the map keeps its 8/5 shape. */
.x-feat .x-mbr.x-ms {
  inset: 12px 12px 0 12px; align-self: stretch; justify-self: stretch;
  border-right: 1px solid var(--x-swap-card-border); border-radius: 6px 6px 0 0;
}
@media (max-width: 1023px) {
  .x-feat .x-card__shot:has(.x-mbr) { aspect-ratio: auto; }
  .x-feat .x-mbr.x-ms { position: relative; inset: auto; margin: 12px 12px 0; grid-template-rows: auto auto auto; }
  .x-feat .x-mbr .x-br__map { height: auto; aspect-ratio: 8 / 5; }
}
@media (min-width: 1024px) {
  .x-feat .x-mbr.x-ms {
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "spots spots" "head map"; gap: 8px 10px;
  }
  .x-feat .x-mbr .x-br__spots-row { grid-area: spots; }
  .x-feat .x-mbr .x-br__head { grid-area: head; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 6px; }
  .x-feat .x-mbr .x-br__legend { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .x-feat .x-mbr .x-br__map { grid-area: map; height: 100%; }
}
/* B: creative comparison */
.x-br__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.x-br__filter { display: inline-flex; gap: 4px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--x-line); background: var(--x-surface); font-size: 12px; }
.x-br__filter small { font-weight: 500; }
.x-br__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.x-br__cc { display: grid; align-content: start; justify-items: start; gap: 6px; min-width: 0; padding: 8px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); font-size: 12px; }
.x-br__cc .x-ms__row { gap: 6px; }
.x-br__cc .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-br__cc .x-mini__chip { padding: 3px 6px; }
.x-br__hdl { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.3; }
.x-br__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.x-br__tag { display: inline-block; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-muted); font-weight: 500; white-space: nowrap; }
.x-br__hl {
  --h: clamp(0, calc((var(--x-agt) - .66) * 16), 1);
  background-color: color-mix(in srgb, #C5FCFB calc(var(--h) * 100%), var(--x-surface));
  border-color: color-mix(in srgb, #3BB8C4 calc(var(--h) * 100%), var(--x-line));
  color: color-mix(in srgb, #111113 calc(var(--h) * 100%), var(--x-muted));
}
.x-br__cc--hl {
  --h: clamp(0, calc((var(--x-agt) - .66) * 16), 1);
  border-color: color-mix(in srgb, #8EEAF2 calc(var(--h) * 100%), var(--x-swap-card-border));
}
.x-br__shared { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); font-size: 12px; }
.x-br__shared .x-blogo { width: 20px; height: 20px; padding: 2px; border-radius: 5px; }
@container (max-width: 330px) {
  .x-br__cards { grid-template-columns: minmax(0, 1fr); }
  .x-br__cc { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .x-br__cc > .x-ms__row { grid-column: 1 / -1; }
  .x-br__cc > .x-mini__chip { grid-column: 1; }
  .x-br__cc > .x-br__hdl { grid-column: 2; grid-row: 2; align-self: center; }
  .x-br__cc > .x-br__tags { grid-column: 1 / -1; }
}
/* C: information requests */
.x-br__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 12px; }
.x-br__form > span { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.x-br__form small { color: var(--x-muted); font-weight: 500; }
.x-br__form .x-ag-k--fill { font-weight: 500; }
.x-br__send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.x-br__reply { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-br__reply .x-ag__body { flex: 1; gap: 2px; }
.x-br__reply .x-ag__body small { line-height: 1.3; }
.x-br__reply .x-ms__av--logo { box-sizing: border-box; padding: 3px; overflow: hidden; background: #fff; border-color: #E6E6E8; }
.x-br__reply .x-ms__av--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.x-br__reply .x-ms__av--pill { width: 56px; padding: 0; border-radius: 999px; }
.x-br__reply .x-ms__av--pill img { flex: none; width: 64px; height: 64px; }
.x-br__priv { display: inline-block; flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-muted); }
.x-br__pub { border-color: #8EEAF2; background: #EEFDFD; color: #111113; }
/* D: buy or hand off */
.x-br__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x-br__stat { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-br__stat b { font-size: 15px; letter-spacing: -0.01em; }
.x-br__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
.x-br__acts > div { display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; }
.x-br__to { display: grid; gap: 4px; justify-items: start; font-size: 12px; }
.x-br__to small { color: var(--x-muted); font-weight: 500; }
.x-br__sent { flex-wrap: wrap; gap: 6px !important; padding: 3px 8px 3px 6px; border-radius: 8px; }
.x-br__sentl { display: inline-flex; align-items: center; gap: 4px; }
/* Logo cyclers: items stacked in one cell; the .is-on one shows (hellOOH JS advances them every 1.8s once in view) */
.x-cyc { display: inline-grid; justify-items: start; align-items: center; }
.x-cyc__item {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px;
  opacity: 0; transform: translateY(5px); transition: opacity .4s ease, transform .4s ease;
}
.x-cyc__item.is-on { opacity: 1; transform: none; }
.x-cyc__item.is-off { transform: translateY(-5px); }
.x-cyc__item b { font-weight: 600; color: var(--x-ink); }
.x-cyc .x-blogo { width: 22px; height: 22px; padding: 2px; border-radius: 5px; }
.x-cyc .x-blogo--wide { width: 52px; padding: 3px 4px; }
@media (prefers-reduced-motion: reduce) { .x-cyc__item { transition: none; } }
@media (max-width: 640px) { .x-br__acts { grid-template-columns: minmax(0, 1fr); } }
.x-br__file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--x-line); background: var(--x-surface); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.x-br__file svg { width: 12px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
@container (max-width: 360px) { .x-br__acts { grid-template-columns: minmax(0, 1fr); } }
.x-br__acts .x-msc__ok { white-space: normal; }
/* For Brands, explore inventory: three points under the lead, and the inventory mock.
   The selected format cycles every 2s once in view (hellOOH JS), pauses off-screen; Billboards stays under reduced motion. */
.x-br__pts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 540px; }
.x-br__pts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--x-text-90); }
.x-inv__bar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--x-line); background: var(--x-surface); }
.x-inv__bar svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--x-muted); stroke-width: 1.75; stroke-linecap: round; }
.x-inv__bar .x-mini__chip { flex: none; }
.x-inv__bar small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-inv__fmts { display: flex; flex-wrap: wrap; gap: 6px; }
.x-inv__fmt {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-muted); font-size: 12px; font-weight: 500; line-height: 1;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.x-inv__fmt.is-on { background: #EEFDFD; border-color: #8EEAF2; color: #111113; }
.x-inv__panes { display: grid; }
.x-inv__pane { grid-area: 1 / 1; display: grid; gap: 6px; align-content: start; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.x-inv__pane.is-on { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.x-inv__row { padding: 7px 10px; min-width: 0; }
.x-inv__row .x-ag__body { min-width: 0; }
.x-inv__top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.x-inv__top b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.x-inv__top .x-br__tag { font-size: 12px; line-height: 1.3; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.x-inv__row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-inv__save { flex: none; font-style: normal; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--x-line); color: var(--x-ink); white-space: nowrap; }
.x-inv__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding-top: 12px; border-top: 1px solid var(--x-swap-card-border); }
@media (prefers-reduced-motion: reduce) { .x-inv__fmt, .x-inv__pane, .x-inv__pane.is-on { transition: none; } }
/* Opening map sequence (hellOOH JS adds .is-map, .is-pop, .is-zoom); the list sets the mock's height, the map overlays it.
   Without JS or under reduced motion the map stays hidden and the list shows. */
.x-inv__stage { display: grid; min-width: 0; }
.x-inv__list { grid-area: 1 / 1; display: grid; gap: 12px; min-width: 0; transition: opacity .5s ease, visibility 0s; }
.x-inv.is-map .x-inv__list { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.x-inv__map {
  grid-area: 1 / 1; position: relative; overflow: hidden; display: flex; align-items: center; min-width: 0;
  border-radius: 8px; background: var(--x-surface); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
}
.x-inv.is-map .x-inv__map { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.x-inv__world { width: 100%; aspect-ratio: 8 / 5; transform-origin: 47.75% 63.2%; transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.x-inv.is-zoom .x-inv__world { transform: translate(2.25%, -13.2%) scale(3); }
.x-inv__world svg { display: block; width: 100%; height: 100%; }
.x-inv__pins use {
  fill: var(--x-muted); stroke: var(--x-swap-card); stroke-width: .6; transform-box: fill-box; transform-origin: 50% 100%;
  opacity: 0; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease, fill .4s ease;
}
.x-inv.is-pop .x-inv__pins use { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 30ms), calc(var(--i, 0) * 30ms), 0s; }
.x-inv.is-zoom .x-inv__pins use { opacity: .35; transition-delay: 0s; }
.x-inv.is-zoom .x-inv__pins .x-inv__dfw { opacity: 1; fill: #3BB8C4; }
.x-inv__ring { fill: rgba(142, 234, 242, .22); stroke: #3BB8C4; stroke-width: .5; stroke-dasharray: 1.5 1.2; opacity: 0; transition: opacity .4s ease; }
.x-inv.is-zoom .x-inv__ring { opacity: 1; transition-delay: .5s; }
.x-inv__mkt { position: absolute; left: 10px; top: 10px; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.x-inv.is-zoom .x-inv__mkt { opacity: 1; transform: none; transition-delay: .5s; }
.x-inv__count {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1;
  color: var(--x-ink); background: var(--x-swap-card); border: 1px solid var(--x-line);
}
@media (prefers-reduced-motion: reduce) { .x-inv__map { display: none; } .x-inv__list { opacity: 1 !important; visibility: visible !important; } }

/* Integrations page (#/integrations) */
.x-in-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.x-in-key { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.x-in-key li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--x-text-90); }
.x-in-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  font: 500 12px/1 "Archivo", system-ui, sans-serif; letter-spacing: 0; color: var(--x-ink);
  padding: 6px 10px; border-radius: 999px; background: var(--x-bg); border: 1px solid var(--x-line);
}
.x-in-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--x-muted); box-sizing: border-box; }
.x-in-chip--ready {
  color: #111113; border-color: transparent;
  background-color: #C5FCFB; background-image: linear-gradient(135deg, #C5FCFB 0%, #C5FCFB 50%, #8EEAF2 100%);
}
.x-in-chip--ready::before { border: 0; background: #0E8F9C; }
.x-in-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.x-in-grid > li { display: flex; min-width: 0; }
.x-in-grid > li > .x-in-card, .x-in-grid > li > .x-in-more { flex: 1 1 auto; width: 100%; }
@media (min-width: 720px) { .x-in-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .x-in-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.x-in-card {
  display: flex; flex-direction: column; min-width: 0; height: 100%; box-sizing: border-box;
  background: var(--x-surface); border: 1px solid var(--x-card-border); border-radius: 8px; padding: 24px;
}
.x-in-card__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.x-in-card__top img {
  width: 40px; height: 40px; border-radius: 8px; flex: none; display: block;
  outline: 1px solid var(--x-arc-icon-ring); outline-offset: 0;
}
.x-in-card__top img.x-in-logo--sq { border-radius: 6px; }
.x-in-card__top img.x-in-logo--pad { box-sizing: border-box; padding: 8px; object-fit: contain; background: #FFFFFF; }
.x-in-card h3 { margin: 0; flex: 1 1 auto; font: 500 var(--fs-text-18)/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink); }
.x-in-facts { margin: 20px 0 0; }
.x-in-facts dt { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--x-muted); }
.x-in-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--x-body); }
.x-in-facts dd + dt { margin-top: 14px; }
.x-in-file { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--x-ink); overflow-wrap: anywhere; }
.x-in-pre {
  margin: 16px 0 0; padding: 12px 14px; overflow-x: auto; white-space: pre;
  background: var(--x-cell-bg); border: 1px solid var(--x-line); border-radius: 6px;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--x-body);
}
.x-in-pre:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.x-in-card__foot { margin-top: auto; padding-top: 16px; }
.x-in-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  min-height: 44px; padding: 12px 0 0; margin: 0; border: 0; border-top: 1px solid var(--x-line); background: none; cursor: pointer; text-align: left;
  font: 500 var(--fs-nav-15)/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-in-toggle[aria-expanded="true"] .x-faq__icon { transform: rotate(180deg); }
.x-in-toggle[aria-expanded="true"] .x-faq__icon::after { transform: rotate(0deg); opacity: 0; }
.x-in-spec[hidden] { display: none; }
.x-in-spec ul { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--x-text-90); }
.x-in-spec code, .x-in-facts code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--x-ink); }
.x-in-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--x-muted); }
.x-in-more {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 160px; height: 100%; box-sizing: border-box;
  padding: 24px; border: 1px dashed var(--x-line); border-radius: 8px;
}
/* Platform cards: one header line, fixed slots so sections line up across a row */
.x-in-grid .x-in-card__top { flex-wrap: nowrap; }
.x-in-grid .x-in-card__top h3 { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.x-in-grid .x-in-card__top .x-in-chip { flex: none; margin-left: auto; }
.x-in-grid .x-in-accepts { min-height: 26px; }
.x-in-grid .x-in-accepts + .x-in-note {
  margin-top: 8px; height: calc(2 * 1.45em); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.x-in-grid .x-in-pre {
  box-sizing: border-box; height: calc(4 * 12px * 1.65 + 24px + 2px);
  overflow-x: auto; overflow-y: hidden;
}
.x-in-full { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--x-line); }
.x-in-full dt { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--x-muted); }
.x-in-full dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--x-text-90); }
.x-in-full dd + dt { margin-top: 10px; }
@media (min-width: 720px) {
  .x-in-grid .x-in-facts dd:nth-of-type(2), .x-in-grid .x-in-facts dd:nth-of-type(3) {
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  }
  .x-in-grid .x-in-facts dd:nth-of-type(2) { height: calc(3 * 1.45em); -webkit-line-clamp: 3; line-clamp: 3; }
  .x-in-grid .x-in-facts dd:nth-of-type(3) { height: calc(2 * 1.45em); -webkit-line-clamp: 2; line-clamp: 2; }
}
.x-in-more b { font: 500 var(--fs-heading-28)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.015em; color: var(--x-ink); }
.x-in-more span { font-size: 15px; line-height: 1.45; color: var(--x-text-90); max-width: 32ch; }
.x-in-tbl { margin-top: 32px; }
.x-in-tbl table { min-width: 0; }
.x-in-tbl th, .x-in-tbl td { text-align: left; white-space: nowrap; }
.x-in-tbl tbody th { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.x-in-tbl thead th { padding-left: 16px; }
.x-in-tbl thead th:first-child { padding-left: 0; }
.x-in-formats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 24px 0 0; font-size: 14px; color: var(--x-muted); }
.x-in-formats .x-in-chip::before { display: none; }
#x-in-agency { scroll-margin-top: 72px; }
.x-in-book {
  margin-top: 40px; padding: 24px; border-radius: 8px;
  background: var(--x-surface); border: 1px solid var(--x-card-border);
}
@media (max-width: 479px) { .x-in-book { padding: 16px; } }
.x-in-book__head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.x-in-book__name { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--x-ink); }
.x-in-tabs { display: flex; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.x-in-tabs::-webkit-scrollbar { display: none; }
.x-in-tabs .x-seg__tab { flex: 0 0 auto; white-space: nowrap; padding: 0 16px; font-size: 14px; }
.x-in-tabs .x-seg__tab:focus-visible { outline-offset: -2px; }
.x-in-pane { margin-top: 16px; padding: 4px 16px; background: var(--x-cell-bg); border: 1px solid var(--x-line); border-radius: 6px; }
.x-in-pane[hidden] { display: none; }
.x-in-pane:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.x-in-pane .x-cmp__scroll table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.4; color: var(--x-body); }
.x-in-pane th, .x-in-pane td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--x-line); text-align: left; vertical-align: top; white-space: nowrap; }
.x-in-pane thead th { font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--x-muted); }
.x-in-pane tbody tr:last-child th, .x-in-pane tbody tr:last-child td { border-bottom: 0; }
.x-in-pane tbody th { font-weight: 500; color: var(--x-ink); }
.x-in-pane td.x-in-wrap { white-space: normal; min-width: 220px; }
.x-in-pane--kv table { min-width: 0; }
.x-in-pane--kv tbody th { font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--x-muted); width: 40%; }
.x-in-pane--kv td { white-space: normal; }
.x-in-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--x-line); }
.x-in-points li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--x-line); }
.x-in-points b { font-size: var(--fs-text-16); font-weight: 500; line-height: 1.4; color: var(--x-ink); }
.x-in-points span { font-size: 14px; line-height: 1.45; color: var(--x-text-90); }
@media (min-width: 640px) {
  .x-in-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 0; }
  .x-in-points li { border-bottom: 0; border-top: 1px solid var(--x-line); padding: 16px 0 0; }
}
.x-in-legal { padding: 24px 0; }
/* For Platforms (#/platforms): the four layers as one row of four on wide screens */
@media (min-width: 640px) { .x-in-points.x-pf-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .x-in-points.x-pf-layers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-pf-cards { margin-top: 32px; }
.x-pk__grid.x-pf-cards--four { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .x-pk__grid.x-pf-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .x-pk__grid.x-pf-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-pf-soon { margin: 0 0 16px; }
/* Inventory example: map pin to unit card (8s loop; static final frame under reduced motion) */
.x-un-wrap { width: 100%; max-width: 560px; justify-self: center; }
.x-un {
  --un-hot: #0FA3AE; --un-wash: rgba(197, 252, 251, 0.55);
  margin: 0; border-radius: 24px; overflow: hidden; background: var(--x-surface); border: 1px solid var(--x-line);
}
html[data-theme="dark"] .x-un { --un-hot: #8EEAF2; --un-wash: rgba(142, 234, 242, 0.18); }
.x-un__map { position: relative; }
.x-un__map > svg:first-child { display: block; width: 100%; height: auto; font-family: "Archivo", system-ui, sans-serif; }
.x-un__minor { stroke: var(--x-bg); stroke-width: 3; fill: none; opacity: .6; }
.x-un__road { stroke: var(--x-bg); stroke-width: 9; fill: none; }
.x-un__st { font-size: 12px; fill: var(--x-muted); }
.x-un__dot { fill: var(--x-muted); opacity: .45; }
.x-un__pinbase { fill: var(--x-muted); }
.x-un__pinhot { fill: var(--un-hot); }
.x-un__pineye { fill: var(--x-bg); }
.x-un__pulse { fill: var(--un-wash); stroke: var(--un-hot); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.x-un__cursor {
  position: absolute; left: 56.7%; top: 47%; width: 20px; height: 24px; display: block;
  fill: var(--x-ink); stroke: var(--x-bg); stroke-width: 1.5; stroke-linejoin: round; transform-origin: 2px 2px;
}
.x-un__card {
  margin: 0 12px 12px; padding: 16px; border-radius: 16px; background: var(--x-bg); border: 1px solid var(--x-line);
  color: var(--x-ink); font-size: 13px; line-height: 1.4;
}
.x-un__k { margin: 0; font-size: 12px; color: var(--x-muted); }
.x-un__title { margin: 2px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.x-un__loc { margin: 2px 0 0; color: var(--x-muted); }
.x-un__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--x-line); }
.x-un__facts dt { font-size: 12px; color: var(--x-muted); }
.x-un__facts dd { margin: 0; font-weight: 500; }
.x-un__fit { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--x-line); }
.x-un__fit span { color: var(--x-muted); font-size: 12px; }
.x-un__fit b { font-weight: 500; }
.x-un__fit i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--x-surface); overflow: hidden; }
.x-un__fit s { display: block; height: 100%; width: 82%; border-radius: 3px; background: var(--un-hot); transform-origin: left; }
.x-un__via { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--x-line); }
.x-un__via ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.x-un__via li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--x-muted); }
.x-un__via img { width: 36px; height: 36px; border-radius: 8px; display: block; outline: 1px solid var(--x-arc-icon-ring); }
.x-un__note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--x-muted); }
@media (prefers-reduced-motion: no-preference) {
  .x-un__cursor { animation: x-un-cursor 8s cubic-bezier(.45, 0, .2, 1) infinite; }
  .x-un__pinhot, .x-un__pulse { animation: x-un-hot 8s ease-out infinite; }
  .x-un__pulse { animation-name: x-un-pulse; }
  .x-un__card { animation: x-un-card 8s cubic-bezier(.22, .61, .36, 1) infinite; }
  .x-un__fit s { animation: x-un-fit 8s cubic-bezier(.22, .61, .36, 1) infinite; }
  .x-un__via { animation: x-un-via 8s ease-out infinite; }
}
@keyframes x-un-cursor {
  0% { left: 14%; top: 82%; transform: scale(1); opacity: 0; }
  4% { opacity: 1; }
  24% { left: 56.7%; top: 47%; transform: scale(1); }
  26% { transform: scale(.82); }
  29%, 88% { left: 56.7%; top: 47%; transform: scale(1); opacity: 1; }
  96%, 100% { left: 56.7%; top: 47%; opacity: 0; }
}
@keyframes x-un-hot { 0%, 25% { opacity: 0; } 28%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes x-un-pulse {
  0%, 25% { opacity: 0; transform: scale(.6); }
  28% { opacity: 1; transform: scale(1.6); }
  36%, 90% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes x-un-card {
  0%, 31% { opacity: 0; transform: translateY(32px); }
  42%, 90% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes x-un-fit { 0%, 40% { transform: scaleX(0); } 52%, 100% { transform: scaleX(1); } }
@keyframes x-un-via { 0%, 52% { opacity: 0; } 60%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* Coming soon: targeting animation (8s loop; static final frame under reduced motion) */
.x-tg {
  --tg-a: #0E8F9C; --tg-b: #111113; --tg-c: #A3A3AD;
  --tg-wash: rgba(197, 252, 251, 0.45); --tg-ring: #0FA3AE;
  margin: 0; width: 100%; max-width: 560px; justify-self: center;
  border-radius: 24px; overflow: hidden; background: var(--x-surface); border: 1px solid var(--x-line);
}
html[data-theme="dark"] .x-tg {
  --tg-a: #8EEAF2; --tg-b: #ECECEF; --tg-c: #6E6E77;
  --tg-wash: rgba(197, 252, 251, 0.10); --tg-ring: #8EEAF2;
}
.x-tg svg { display: block; width: 100%; height: auto; font-family: "Archivo", system-ui, sans-serif; }
.x-tg__street { stroke: var(--x-line); stroke-width: 2; fill: none; }
.x-tg__block { fill: var(--x-bg); }
.x-tg__panel { fill: var(--x-bg); stroke: var(--x-line); }
.x-tg__t { font-size: 13px; fill: var(--x-ink); }
.x-tg__t--muted { fill: var(--x-muted); }
.x-tg__t--b { font-weight: 500; }
.x-tg__a { fill: var(--tg-a); }
.x-tg__b { fill: var(--tg-b); }
.x-tg__c { fill: var(--tg-c); }
.x-tg__broad { fill: var(--tg-wash); stroke: var(--tg-ring); stroke-width: 1.5; stroke-dasharray: 4 6; }
.x-tg__ring { fill: var(--tg-wash); stroke: var(--tg-ring); stroke-width: 2; vector-effect: non-scaling-stroke; }
.x-tg__broad, .x-tg__ring { transform-box: fill-box; transform-origin: center; }
.x-tg__chipbg { fill: var(--x-ink); }
.x-tg__chipt { font-size: 13px; font-weight: 500; fill: var(--x-bg); }
.x-tg__chipdot { fill: #C5FCFB; }
html[data-theme="dark"] .x-tg__chipdot { fill: #0E8F9C; }
/* Legend and enrichment pill as HTML over the map, scaled in map units (1u = 1/360 of the figure) */
.x-tg { position: relative; container-type: inline-size; --u: 1px; }
@supports (width: 1cqw) { .x-tg { --u: calc(100cqw / 360); } }
.x-act__notewrap > .x-tg { margin-inline: auto; }
.x-act__notewrap > .x-tg + .x-footnote { margin-top: 12px; }
.x-tg__key {
  position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--u)); box-sizing: border-box;
  width: calc(148 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));
  border-radius: calc(12 * var(--u)); background: var(--x-bg); border: 1px solid var(--x-line);
  font: 400 max(12px, calc(13 * var(--u)))/1.25 "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
.x-tg__key p { margin: 0 0 calc(5 * var(--u)); color: var(--x-muted); white-space: nowrap; }
.x-tg__key ul { display: grid; gap: calc(3 * var(--u)); margin: 0; padding: 0; list-style: none; }
.x-tg__key li { display: flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap; }
.x-tg__sw { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; }
.x-tg__sw--a { background: var(--tg-a); }
.x-tg__sw--b { background: var(--tg-b); }
.x-tg__sw--c { background: var(--tg-c); }
.x-tg__key .x-blogo { width: calc(16 * var(--u)); height: calc(16 * var(--u)); padding: calc(1.5 * var(--u)); border-radius: calc(4 * var(--u)); }
.x-tg__pill {
  position: absolute; left: 50%; bottom: calc(10 * var(--u)); transform: translateX(-50%);
  display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap;
  padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 999px;
  background: var(--x-bg); border: 1px solid var(--x-line); color: var(--x-ink);
  font: 500 max(12px, calc(13 * var(--u)))/1.2 "Archivo", system-ui, sans-serif;
}
.x-tg__pill img { display: block; width: auto; height: 0.78em; align-self: baseline; transform: translateY(0.03em); }
.x-tg__pill .x-tg__logo-dk { display: none; }
html[data-theme="dark"] .x-tg__pill .x-tg__logo-lt { display: none; }
html[data-theme="dark"] .x-tg__pill .x-tg__logo-dk { display: block; }
@media (min-width: 1024px) {
  .x-tg__pill { padding: calc(4 * var(--u)) calc(10 * var(--u)); font-size: max(12px, calc(10.5 * var(--u))); }
}
/* Final frame by default */
.x-tg__broad, .x-tg__aud { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .x-tg__broad { animation: x-tg-broad 8s ease-in-out infinite; }
  .x-tg__aud { animation: x-tg-aud 8s ease-in-out infinite; }
  .x-tg__dots--a { animation: x-tg-dots-a 8s ease-in-out infinite; }
  .x-tg__dots--b { animation: x-tg-dots-b 8s ease-in-out infinite; }
  .x-tg__dots--c { animation: x-tg-dots-c 8s ease-in-out infinite; }
  .x-tg__legend { animation: x-tg-legend 8s ease-in-out infinite; }
  .x-tg__ring { animation: 8s cubic-bezier(.22, .61, .36, 1) infinite; }
  .x-tg__ring--a { animation-name: x-tg-ring-a; }
  .x-tg__ring--b { animation-name: x-tg-ring-b; }
  .x-tg__ring--c { animation-name: x-tg-ring-c; }
  .x-tg__chip { animation: x-tg-chip 8s ease-in-out infinite; }
}
@keyframes x-tg-broad {
  0% { opacity: 0; transform: scale(.94); }
  7%, 36% { opacity: 1; transform: scale(1); }
  46%, 100% { opacity: 0; transform: scale(.8); }
}
@keyframes x-tg-aud { 0%, 4% { opacity: 0; } 10%, 34% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes x-tg-dots-a { 0%, 13% { opacity: 0; } 19%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes x-tg-dots-b { 0%, 18% { opacity: 0; } 24%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes x-tg-dots-c { 0%, 23% { opacity: 0; } 29%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes x-tg-legend { 0%, 14% { opacity: 0; } 20%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes x-tg-ring-a {
  0%, 38% { opacity: 0; transform: translate(85px, -20px) scale(3.7); }
  42% { opacity: 1; }
  56%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes x-tg-ring-b {
  0%, 38% { opacity: 0; transform: translate(-90px, 30px) scale(3.7); }
  42% { opacity: 1; }
  56%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes x-tg-ring-c {
  0%, 38% { opacity: 0; transform: translate(-20px, -50px) scale(3.7); }
  42% { opacity: 1; }
  56%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes x-tg-chip { 0%, 58% { opacity: 0; } 64%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.x-in-accepts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.x-in-accepts .x-in-chip::before { display: none; }
.x-in-accepts + .x-in-note { margin-top: 8px; }
.x-in-layers { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .x-in-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .x-in-layers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-in-layer {
  display: flex; flex-direction: column; min-width: 0; height: 100%; box-sizing: border-box;
  background: var(--x-surface); border: 1px solid var(--x-card-border); border-radius: 8px; padding: 24px;
}
.x-in-layer__num { margin: 0 0 12px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--x-muted); }
.x-in-layer h3 { margin: 0; font: 500 var(--fs-text-18)/1.3 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink); }
.x-in-layer p { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--x-body); }
.x-in-layer p.x-in-layer__quote { font-weight: 500; color: var(--x-ink); }
.x-in-layer__tag { margin-top: auto; padding-top: 16px; }
.x-in-pane--kv tr.x-in-grp th { font: 500 14px/1.4 "Archivo", system-ui, sans-serif; color: var(--x-ink); padding-top: 20px; }
.x-in-pane--kv tbody:first-child tr.x-in-grp th { padding-top: 12px; }
.x-in-book .x-in-formats { margin-top: 16px; }
.x-in-pane > .x-in-note { margin: 0 0 12px; }

/* How matching works: scroll-driven stages (.is-s2 to .is-s4 on .x-mw__vis). Markup defaults to the final
   stage; JS rewinds to stage 1 only when motion is allowed. Every name, score and place is illustrative. */
.x-mw__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
.x-mw__stick { position: sticky; top: 84px; z-index: 2; background: var(--x-bg); padding-bottom: 12px; align-self: start; }
.x-mw__vis {
  position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 1 / 1;
  background: var(--x-surface); border: 1px solid var(--x-card-border);
  font-family: "Archivo", system-ui, sans-serif; color: var(--x-ink);
}
@media (min-width: 640px) { .x-mw__vis { aspect-ratio: 4 / 3; } }
.x-mw__vis * { box-sizing: border-box; }
.x-mw__vis, .x-mw__vis * { transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.x-mw__top {
  position: absolute; left: 12px; right: 12px; top: 10px; height: 26px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  opacity: 0; transition: opacity .4s;
}
.x-mw__vis.is-s2 .x-mw__top { opacity: 1; }
.x-mw__city { font-size: 12px; line-height: 1.3; color: var(--x-muted); white-space: nowrap; }
.x-mw__map { position: absolute; left: 12px; right: 12px; top: 44px; bottom: 12px; border-radius: 6px; overflow: hidden; }
.x-mw__streets { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; transition: opacity .5s; }
.x-mw__vis.is-s2 .x-mw__streets { opacity: 1; }
.x-mw__streets path { fill: none; vector-effect: non-scaling-stroke; }
.x-mw__road { stroke: var(--x-line); stroke-width: 5; }
.x-mw__lane { stroke: var(--x-line); stroke-width: 2; }
.x-mw__river { stroke: #8EEAF2; stroke-opacity: .55; stroke-width: 7; }
.x-mw__tiles {
  position: absolute; inset: 0; display: grid; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
}
.x-mw__tile {
  position: relative; border: 1px solid var(--x-line); margin: -0.5px; background: transparent;
  opacity: 0; transform: scale(.9);
  transition: opacity .4s, transform .4s, background-color .5s, box-shadow .5s, border-color .5s;
  transition-delay: calc(var(--i, 0) * 18ms);
}
.x-mw__vis.is-s2 .x-mw__tile { opacity: 1; transform: none; }
.x-mw__vis.is-s3 .x-mw__tile { opacity: .45; transition-delay: 0s; }
.x-mw__vis.is-s3 .x-mw__tile.is-m {
  opacity: 1; z-index: 1; border-color: #8EEAF2;
  background-color: rgba(197, 252, 251, .85);
  box-shadow: 0 0 0 1px #8EEAF2, 0 0 22px rgba(142, 234, 242, .75);
}
.x-mw__score {
  position: absolute; right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 999px;
  font: 500 12px/1.2 "Archivo", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: #111113; background: #fff; opacity: 0; transform: translateY(4px); transition: opacity .4s .15s, transform .4s .15s;
}
.x-mw__vis.is-s3 .x-mw__score { opacity: 1; transform: none; }
.x-mw__at { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.x-mw__tag {
  z-index: 2; font-size: 12px; padding: 4px 8px; opacity: 0; transition: opacity .4s;
  transition-delay: calc(.25s + var(--d, 0) * 80ms);
}
.x-mw__tag::before { display: none; }
.x-mw__vis.is-s2 .x-mw__tag { opacity: 1; }
.x-mw__vis.is-s3 .x-mw__tag { opacity: 0; transition-delay: 0s; }
.x-mw__pin { z-index: 3; width: 22px; height: 22px; margin-top: -9px; opacity: 0; }
.x-mw__pin svg { display: block; width: 22px; height: 22px; transform: translateY(-18px); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); transition-delay: inherit; }
.x-mw__pin { transition: opacity .3s; transition-delay: calc(.2s + var(--d, 0) * 120ms); }
.x-mw__pin path { fill: var(--x-ink); }
.x-mw__pin circle { fill: var(--x-bg); }
.x-mw__vis.is-s3 .x-mw__pin { opacity: 1; }
.x-mw__vis.is-s3 .x-mw__pin svg { transform: none; }
.x-mw__reason {
  z-index: 4; transform: translate(-50%, 0); font-size: 12px; max-width: calc(100% - 8px);
  box-shadow: 0 4px 14px rgba(17, 17, 19, .08); opacity: 0; transition: opacity .4s .55s;
}
.x-mw__reason::before { display: none; }
.x-mw__vis.is-s3 .x-mw__reason { opacity: 1; }
.x-mw__unit {
  z-index: 3; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--x-ink); color: var(--x-bg); box-shadow: 0 0 0 2px var(--x-bg);
  opacity: 0; transform: translate(-50%, -50%) scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.x-mw__vis.is-s4 .x-mw__unit { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.x-mw__ico { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.x-mw__tray {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; padding: 12px;
  border-radius: 8px; background: var(--x-bg); border: 1px solid var(--x-line);
  box-shadow: 0 8px 24px rgba(17, 17, 19, .1);
  opacity: 0; transform: translateY(24px); transition: opacity .4s .35s, transform .5s .35s;
}
.x-mw__vis.is-s4 .x-mw__tray { opacity: 1; transform: none; }
.x-mw__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; line-height: 1.3; color: var(--x-muted); }
.x-mw__legend li { display: inline-flex; align-items: center; gap: 6px; }
.x-mw__legend .x-mw__ico { color: var(--x-ink); }
.x-mw__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.x-mw__label { font: 500 12px/1.3 "Archivo", system-ui, sans-serif; color: var(--x-ink); margin-right: 2px; }
.x-mw__card {
  position: absolute; left: 50%; top: 50%; z-index: 6; width: min(360px, calc(100% - 24px));
  padding: 16px; border-radius: 8px; background: var(--x-bg); border: 1px solid var(--x-line);
  box-shadow: 0 8px 28px rgba(17, 17, 19, .1);
  transform: translate(-50%, -50%); transition: opacity .4s, transform .5s;
}
.x-mw__vis.is-s2 .x-mw__card { opacity: 0; transform: translate(-50%, -46%) scale(.96); pointer-events: none; }
.x-mw__eyebrow { margin: 0; font-size: 12px; line-height: 1.3; color: var(--x-muted); }
.x-mw__brand { margin: 2px 0 0; font: 500 var(--fs-text-16)/1.3 "Archivo", system-ui, sans-serif; color: var(--x-ink); }
.x-mw__grp { margin: 12px 0 6px; font: 500 12px/1.3 "Archivo", system-ui, sans-serif; color: var(--x-ink); }
.x-mw__card .x-mw__chips .x-in-chip::before { display: none; }
.x-mw__steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.x-mw__step {
  min-height: 46vh; padding: 20px 0 0; border-top: 1px solid var(--x-line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-content: start;
  opacity: .45; transition: opacity .3s;
}
.x-mw__step + .x-mw__step { margin-top: 16px; }
.x-mw__step.is-active, .x-mw.is-static .x-mw__step { opacity: 1; }
.x-mw__n {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; align-self: start;
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--x-line);
  font: 500 14px/1 "Archivo", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--x-ink);
  transition: background-color .3s, border-color .3s;
}
.x-mw__step.is-active .x-mw__n { background: #C5FCFB; border-color: #8EEAF2; color: #111113; }
.x-mw__step b { font: 500 var(--fs-text-18)/1.35 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink); }
.x-mw__step span:last-child { font-size: 15px; line-height: 1.45; color: var(--x-text-90); max-width: 440px; }
.x-mw__note { margin-top: 24px; }
@media (min-width: 900px) {
  .x-mw__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; margin-top: 48px; }
  .x-mw__stick { grid-column: 2; grid-row: 1; top: 112px; padding: 0; background: transparent; }
  .x-mw__steps { grid-column: 1; grid-row: 1; padding: 8vh 0 20vh; }
  .x-mw__step { min-height: 62vh; }
  .x-mw__step + .x-mw__step { margin-top: 0; }
}
.x-mw.is-static .x-mw__step { min-height: 0; padding-bottom: 20px; }
.x-mw.is-static .x-mw__steps { padding-bottom: 0; }
.x-mw.is-static .x-mw__stick { position: relative; top: auto; }
@media (prefers-reduced-motion: reduce) {
  .x-mw__vis *, .x-mw__step, .x-mw__n { transition: none !important; }
}

/* How information requests work (#/how-rfi-works): the For Brands split sections and mocks (.x-act, .x-swap, .x-ms, .x-br).
   Each mock runs the shared timeline (--x-agt, --s) once and rests on its final frame; paused off-screen through .x-msa;
   reduced motion shows the final frame (--x-agt stays 1). All names and figures in these mocks are illustrative. */
.x-br.x-rfi { animation-duration: 8s; }
.x-br.x-rfi--big { animation-duration: 11s; }
.x-rfi-hero .x-desc { max-width: 680px; }
.x-rfi__n {
  display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid #8EEAF2; background: #EEFDFD; color: #111113; font-weight: 500; font-variant-numeric: tabular-nums;
}
.x-rfi__swap { display: inline-grid; justify-items: start; align-items: center; }
.x-rfi__swap > * { grid-area: 1 / 1; }
.x-rfi__field { display: grid; gap: 6px; justify-items: start; }
.x-rfi__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-rfi__chips .x-mini__chip { padding: 3px 8px; }
.x-rfi__muted { background: var(--x-surface); border-color: var(--x-line); color: var(--x-muted); }
/* Segmented control: the indicator pops onto option --at of --n */
.x-rfi__seg {
  --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1);
  position: relative; display: inline-grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); max-width: 100%;
  padding: 2px; border-radius: 999px; background: var(--x-surface); border: 1px solid var(--x-line); font-size: 12px; font-weight: 500;
}
.x-rfi__seg span { position: relative; z-index: 1; padding: 4px 10px; text-align: center; white-space: nowrap; color: var(--x-muted); }
.x-rfi__seg span.is-on { color: color-mix(in srgb, #111113 calc(var(--p) * 100%), var(--x-muted)); }
.x-rfi__seg i {
  position: absolute; top: 2px; bottom: 2px; left: calc(2px + (100% - 4px) * var(--at, 0) / var(--n, 2)); width: calc((100% - 4px) / var(--n, 2));
  box-sizing: border-box; border-radius: 999px; background: #C5FCFB; border: 1px solid #8EEAF2;
  opacity: var(--p); transform: scale(calc(.7 + .3 * var(--p)));
}
/* Checkbox: ticks in at --s; --off unticks at --s */
.x-rfi__cb {
  --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1); --v: var(--p);
  flex: none; position: relative; display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, #3BB8C4 calc(var(--v) * 100%), var(--x-muted));
  background: color-mix(in srgb, #3BB8C4 calc(var(--v) * 100%), var(--x-swap-card));
}
.x-rfi__cb--off { --v: calc(1 - var(--p)); }
.x-rfi__cb > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: var(--v); }
.x-rfi__opts { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; font-weight: 500; }
.x-rfi__opt { display: inline-flex; align-items: center; gap: 6px; }
/* Pointer: glides in at --s, leaves at --e */
.x-rfi__cur {
  --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 10), 1); --o: clamp(0, calc((var(--x-agt) - var(--e, 2)) * 16), 1);
  position: absolute; left: 9px; top: 9px; z-index: 5; width: 14px; height: 16px; pointer-events: none;
  opacity: calc(clamp(0, calc(var(--p) * 4), 1) - var(--o)); transform: translate(calc((1 - var(--p)) * 48px), calc((1 - var(--p)) * 28px));
}
.x-rfi__cur svg { display: block; width: 100%; height: 100%; fill: #111113; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.x-rfi__blur { --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 10), 1); filter: blur(calc(var(--p) * 4px)); opacity: calc(1 - var(--p)); }
.x-rfi__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 500; white-space: nowrap; }
.x-rfi__av {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
  background: #111113; color: #fff; font-size: 11px; font-weight: 600;
}
.x-rfi__av--anon { background: var(--x-surface); color: var(--x-muted); border: 1px dashed var(--x-line); box-sizing: border-box; }
.x-rfi__row { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-rfi__row .x-ag__body { flex: 1; gap: 2px; }
.x-rfi__row small { line-height: 1.3; }
.x-rfi__tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-muted); }
.x-rfi__tag--match { border-color: #8EEAF2; background: #C5FCFB; color: #111113; }
.x-rfi__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.x-rfi__box { display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
/* 01: request builder */
.x-rfi .x-br__filters .x-ag-k--fill { font-weight: 500; }
/* 02: matching (the centrepiece, full width) */
.x-rfi-wide .x-rfi__intro { max-width: 760px; margin-bottom: 48px; }
.x-act__vis.x-rfi__stage { max-width: none; display: flex; justify-content: center; padding: 40px 32px; }
.x-ms.x-rfi--big { max-width: 960px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 20px; padding: 20px; align-items: start; }
@container (max-width: 760px) { .x-ms.x-rfi--big { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .x-act__vis.x-rfi__stage { padding: 16px; } .x-ms.x-rfi--big { padding: 14px; } }
.x-rfi__scanbox { display: grid; gap: 12px; align-content: start; min-width: 0; }
.x-rfi__grid { position: relative; aspect-ratio: 8 / 5; border-radius: 8px; background: var(--x-surface); overflow: hidden; }
.x-rfi__grid svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x-rfi__grid .x-rfi__dots { fill: var(--x-line); }
.x-rfi__grid .x-rfi__area { fill: var(--x-swap-card); stroke: var(--x-line); stroke-width: 1.5; }
.x-rfi__grid .x-ag-k { transform-box: fill-box; transform-origin: center; }
.x-rfi__node--m { fill: #3BB8C4; stroke: #fff; stroke-width: 2; }
.x-rfi__node--p { fill: var(--x-swap-card); stroke: #3BB8C4; stroke-width: 2; stroke-dasharray: 3 2; }
.x-rfi__ring { fill: rgba(142, 234, 242, .28); stroke: #8EEAF2; stroke-width: 1; }
.x-rfi__grid text { font: 600 9px "Archivo", system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.x-rfi__grid .x-rfi__tm { fill: #fff; }
.x-rfi__grid .x-rfi__tp { fill: #111113; }
html[data-theme="dark"] .x-rfi__grid .x-rfi__tp { fill: #C5FCFB; }
.x-rfi__scan {
  --q: clamp(0, calc((var(--x-agt) - .03) * 3.2), 1);
  position: absolute; top: 0; bottom: 0; left: calc(var(--q) * 100%); width: 48px; margin-left: -48px; pointer-events: none;
  background: linear-gradient(90deg, rgba(142, 234, 242, 0), rgba(142, 234, 242, .5)); border-right: 2px solid #3BB8C4;
  opacity: calc(clamp(0, calc((var(--x-agt) - .02) * 30), 1) - clamp(0, calc((var(--x-agt) - .33) * 16), 1));
}
.x-rfi__list { display: grid; gap: 6px; align-content: start; min-width: 0; }
.x-rfi__lhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.x-rfi__rank { flex: none; width: 12px; font-size: 12px; font-weight: 500; color: var(--x-muted); text-align: center; font-variant-numeric: tabular-nums; }
.x-rfi__dim { --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1); opacity: calc(1 - .5 * var(--p)); }
.x-rfi__name { position: relative; justify-self: start; }
.x-rfi__name b { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor calc(var(--h, 0) * 100%), transparent); }
.x-rfi__name--hov { --h: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1); }
.x-rfi__tip {
  --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 16), 1);
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 4; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; background: var(--x-ink); color: var(--x-swap-card); font-size: 12px; font-weight: 500;
  box-shadow: 0 4px 12px rgba(17, 17, 19, .16); opacity: var(--p); transform: translateY(-50%) scale(calc(.8 + .2 * var(--p)));
}
.x-rfi__cb .x-rfi__cur { left: 8px; top: 8px; }
.x-rfi__name .x-rfi__cur { left: 44px; top: 10px; }
.x-rfi__row.x-mo-hot { border-color: color-mix(in srgb, #8EEAF2 calc(var(--p) * 100%), var(--x-swap-card-border)); }
@container (max-width: 400px) { .x-rfi__list .x-rfi__rank { display: none; } }
/* 03: about you */
.x-rfi__note { min-height: 56px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--x-line); background: var(--x-surface); font-size: 12px; line-height: 1.45; }
.x-rfi__note .x-mo__type { display: block; }
.x-rfi__spark { width: 11px; height: 11px; flex: none; fill: currentColor; }
/* 04: send settings */
.x-rfi__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.x-rfi__line > small { font-weight: 500; }
.x-rfi__line .x-mo__tog { margin-left: 0; }
.x-rfi__select { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--x-line); font-size: 12px; }
.x-rfi__select svg { width: 10px; height: 10px; fill: none; stroke: var(--x-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.x-rfi__mov { background: var(--x-surface); }
.x-rfi__mov .x-br__kv dd { font-weight: 500; }
/* 05: outreach */
.x-rfi__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x-rfi__tile { position: relative; display: grid; gap: 8px; justify-items: start; align-content: start; min-width: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); }
.x-rfi__tile .x-mini__chip { padding: 3px 6px; }
.x-rfi__env {
  --p: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 7), 1);
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--x-muted);
  opacity: clamp(0, calc(var(--p) * 3), 1); transform: translate(calc((1 - var(--p)) * var(--dx, 0px)), calc((1 - var(--p)) * var(--dy, -60px)));
}
.x-rfi__env svg { width: 16px; height: 12px; flex: none; fill: #C5FCFB; stroke: #111113; stroke-width: 1.2; stroke-linejoin: round; }
html[data-theme="dark"] .x-rfi__env svg { stroke: #3BB8C4; fill: rgba(142, 234, 242, .2); }
.x-rfi__days { --d: calc(14 - 13 * clamp(0, calc((var(--x-agt) - .3) * 2.1), 1)); counter-reset: x-rfi-d var(--d); }
.x-rfi__days::before { content: counter(x-rfi-d); font-variant-numeric: tabular-nums; }
/* 06: responses */
.x-rfi__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.x-rfi__stats .x-br__stat b { font-size: 18px; }
.x-rfi__cnt { --q: clamp(0, calc((var(--x-agt) - var(--s, 0)) * 4), 1); counter-reset: x-rfi-c calc(var(--to) * var(--q)); font-variant-numeric: tabular-nums; }
.x-rfi__cnt::before { content: counter(x-rfi-c); }
.x-rfi__ringbox { display: flex; align-items: center; gap: 6px; }
.x-rfi__ringbox svg { width: 26px; height: 26px; flex: none; transform: rotate(-90deg); fill: none; stroke-width: 4; }
.x-rfi__ringbox .x-rfi__track { stroke: var(--x-line); }
.x-rfi__ringbox .x-rfi__arc { stroke: #3BB8C4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - 40 * clamp(0, calc((var(--x-agt) - .05) * 4), 1)); }
.x-rfi__ringbox b { font-size: 13px !important; line-height: 1.2; }
.x-rfi__exs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.x-rfi__ex { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 6px; border-radius: 8px; border: 1px solid var(--x-swap-card-border); font-size: 12px; }
.x-rfi__ph { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.x-rfi__ph svg { display: block; width: 100%; height: 100%; }
.x-rfi__ex .x-br__kv { display: grid; gap: 2px; }
.x-rfi__ex .x-br__kv > div { justify-content: space-between; gap: 6px; }
@container (max-width: 360px) {
  .x-rfi__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-rfi__exs { grid-template-columns: minmax(0, 1fr); }
  .x-rfi__ex { grid-template-columns: 76px minmax(0, 1fr); align-items: center; }
  .x-rfi__tiles { grid-template-columns: minmax(0, 1fr); }
}
/* 07: introductions */
.x-rfi__ask { border-color: #8EEAF2; background: rgba(142, 234, 242, .14); }
.x-rfi__ask p { margin: 0; font-weight: 500; font-size: 13px; line-height: 1.35; }
.x-rfi__bell { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.x-rfi__grid .x-mini__chip { position: absolute; left: 8px; top: 8px; }
.x-rfi__lead2 .x-rfi__tag { margin-right: 6px; }
@media (min-width: 1024px) {
  .x-rfi-wide .x-rfi__intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .x-rfi-wide .x-rfi__intro .x-act__lead:first-child { margin-top: 0; }
}

/* Data coverage (#/data-coverage): the inner-page hero, .x-act sections and the closing band.
   Bars grow and figures count up once on scroll-in; reduced motion shows the final state. */
.x-dc-kpi {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line);
}
.x-dc-kpi li { min-width: 0; padding: 24px 16px; border-top: 1px solid var(--x-line); }
.x-dc-kpi li:nth-child(-n+2) { border-top: 0; }
.x-dc-kpi li:nth-child(even) { border-left: 1px solid var(--x-line); }
.x-dc-kpi__num {
  margin: 0; font-size: var(--fs-heading-48); font-weight: 350; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--x-ink); font-variant-numeric: tabular-nums;
}
.x-dc-kpi__label { margin: 8px 0 0; font-size: var(--fs-text-16); line-height: 1.45; color: var(--x-muted); }
@media (min-width: 1024px) {
  .x-dc-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .x-dc-kpi li { border-top: 0; padding: 32px 24px; }
  .x-dc-kpi li + li { border-left: 1px solid var(--x-line); }
  .x-dc-kpi li:first-child { padding-left: 0; }
}
.x-dc-sec .x-act__grid { align-items: start; }
.x-dc-body { margin-top: 40px; }
.x-act__grid .x-dc-body { margin-top: 0; }
.x-dc-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
.x-dc-bars li { padding: 12px 0; border-bottom: 1px solid var(--x-line); min-width: 0; }
.x-dc-bars li[hidden] { display: none; }
.x-dc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.4; }
.x-dc-row span:first-child { color: var(--x-ink); min-width: 0; }
.x-dc-row b { flex: none; font-weight: 500; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-dc-updated { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--x-muted); }
.x-dc-updated svg { flex: none; width: 14px; height: 14px; }
.x-dc-bar { height: 6px; margin-top: 8px; border-radius: 999px; background: var(--x-surface); overflow: hidden; }
html[data-theme="dark"] .x-dc-bar { background: var(--x-line); }
.x-dc-bar i {
  display: block; height: 100%; width: var(--w); border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, #8EEAF2 0%, #0FA3AE 100%);
}
html[data-theme="dark"] .x-dc-bar i { background: linear-gradient(90deg, #8EEAF2 0%, #C5FCFB 100%); }
.x-dc-bars .x-dc-rest .x-dc-row span:first-child { color: var(--x-muted); }
.x-dc-rest .x-dc-bar i { background: var(--x-muted); opacity: .5; }
@media (min-width: 768px) {
  .x-dc-bars--two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto); }
}
.x-dc-note { margin: 16px 0 0; font-size: 12px; line-height: 1.45; color: var(--x-muted); }
.x-dc-more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; padding: 0 20px;
  border: 1px solid var(--x-line); border-radius: 6px; background: var(--x-bg); cursor: pointer;
  font: 500 var(--fs-nav-15)/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--x-ink);
}
.x-dc-more:hover { background: var(--x-hover); }
.x-dc-more:focus-visible { outline: 2px solid var(--x-focus-cyan); outline-offset: 2px; }
.x-dc-more svg { width: 12px; height: 12px; transition: transform .2s ease; }
.x-dc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.x-dc-fields { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .x-dc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .x-dc-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.x-dc-field {
  display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: 8px;
  background: var(--x-surface); border: 1px solid var(--x-card-border);
}
.x-dc-field p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--x-text-90); }
.x-dc-field b {
  display: block; margin: 12px 0 0; font-size: var(--fs-heading-28); font-weight: 400; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--x-ink); font-variant-numeric: tabular-nums;
}
.x-dc-field .x-dc-bar { margin-top: auto; background: var(--x-bg); }
.x-dc-field b + .x-dc-bar, .x-dc-field .x-dc-soon + .x-dc-bar { margin-top: 16px; }
.x-dc-soon {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 3px 10px;
  border: 1px solid var(--x-line); border-radius: 999px; background: var(--x-bg);
  font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--x-muted);
}
.x-dc-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.x-dc-end { padding: 24px 0 40px; }
.x-dc-anim .is-in .x-dc-pre .x-dc-bar i { transform: scaleX(0); transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .x-dc-anim .x-dc-bar i { transform: scaleX(0); transition: transform .9s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--i, 0) * 40ms); }
  .x-dc-anim .is-in .x-dc-bar i { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .x-dc-more svg { transition: none; } }

/* Taxonomy (#/taxonomy): the inner-page hero, .x-act sections and the closing band.
   The directory renders from the #x-tx-data block; search and group chips filter it. */
.x-tx-meta { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-tx-flow {
  list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch;
}
.x-tx-flow__step {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: 8px;
  background: var(--x-surface); border: 1px solid var(--x-card-border);
}
.x-tx-flow__label { margin: 0; font-size: 14px; line-height: 1.4; color: var(--x-muted); }
.x-tx-flow__label b { margin-right: 6px; font-weight: 500; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-tx-flow__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--x-text-90); }
.x-tx-flow__arrow { display: flex; align-items: center; justify-content: center; height: 32px; color: var(--x-muted); }
.x-tx-flow__arrow svg { width: 20px; height: 20px; transform: rotate(90deg); }
.x-tx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.x-tx-alias {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--x-line);
  background: var(--x-bg); font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--x-muted); white-space: nowrap;
}
.x-tx-canon {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid #8EEAF2; background: #EEFDFD; color: #111113; font-size: 15px; font-weight: 500; line-height: 1.3;
}
.x-tx-canon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #8EEAF2, #3FCFDC); }
.x-tx-cap { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
@media (min-width: 900px) {
  .x-tx-flow { grid-template-columns: minmax(0, 1.4fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); }
  .x-tx-flow__arrow { height: auto; }
  .x-tx-flow__arrow svg { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .x-tx-flow__arrow svg { animation: x-tx-nudge 1.8s ease-in-out infinite; }
  @keyframes x-tx-nudge { 0%, 100% { translate: -3px 0; opacity: .5; } 50% { translate: 3px 0; opacity: 1; } }
}
.x-tx-controls { display: grid; gap: 16px; margin-top: 32px; }
.x-tx-controls .x-lead__field { max-width: 560px; height: 52px; }
.x-tx-controls .x-seg { margin-top: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.x-tx-controls .x-seg::-webkit-scrollbar { display: none; }
.x-tx-controls .x-seg__tab { flex: 1 0 auto; white-space: nowrap; }
.x-tx-controls .x-seg__tab:focus-visible { outline-offset: -2px; }
.x-tx-status { margin: 0; font-size: 14px; line-height: 1.45; color: var(--x-muted); }
.x-tx-group { margin-top: 48px; }
.x-tx-group[hidden] { display: none; }
.x-tx-group__head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--x-line);
  font-weight: 400; font-size: var(--fs-heading-28); line-height: 1.25; letter-spacing: -0.015em; color: var(--x-ink);
}
.x-tx-group__n { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.x-tx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .x-tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .x-tx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.x-tx-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: 8px; scroll-margin-top: 96px;
  background: var(--x-surface); border: 1px solid var(--x-card-border);
}
.x-tx-card[hidden] { display: none; }
.x-tx-card:target, .x-tx-card.is-hit { outline: 2px solid #8EEAF2; outline-offset: 2px; }
.x-tx-card h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--x-ink); }
.x-tx-card__also { display: grid; gap: 6px; }
.x-tx-card__also p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--x-muted); }
.x-tx-card__def { margin: 0; font-size: 15px; line-height: 1.45; color: var(--x-text-90); }
.x-tx-empty { margin: 40px 0 0; font-size: 16px; line-height: 1.45; color: var(--x-text-90); }
.x-tx-empty[hidden] { display: none; }
.x-tx-empty button {
  margin-left: 4px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 16px/1.2 "Archivo", system-ui, sans-serif; color: var(--x-ink); text-decoration: underline; text-underline-offset: 3px;
}
.x-tx-note {
  display: flex; gap: 12px; max-width: 720px; margin: 48px 0 0; padding: 16px 20px; border-radius: 8px;
  border: 1px solid var(--x-line); background: var(--x-bg); font-size: 15px; line-height: 1.45; color: var(--x-text-90);
}
.x-tx-note::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: linear-gradient(135deg, #8EEAF2, #3FCFDC); }
.x-tx-note b { font-weight: 500; color: var(--x-ink); }