/* wave2 harness registered · verify-final · goal-close · registered · CHANGED · r4  */
/* ──────────────────────────────────────────────────────────────────────
   Marketing / public surface — `.mkt` scope.

   The Linear-grade language for the public site (nav, footer, and the
   content pages linked from them: about, careers, investors, blog,
   changelog, contact, help, docs, api, status, terms, privacy, security).

   Same rules as the app engines: global design tokens (light/dark via
   design-variables.css), hairline borders, restrained public-site motion, and
   page structure preserved. The Stripe-inspired layer uses angled bands,
   product-like cards, and trust/proof hierarchy without copying Stripe's brand.
   ────────────────────────────────────────────────────────────────────── */

.mkt {
  --mkt-nav-height: 64px;
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}
.mkt a { color: inherit; text-decoration: none; }
.mkt button { font-family: inherit; cursor: pointer; }

body.public-shell-body {
  --mkt-nav-height: 64px;
  --wm-surface-indigo: #635bff;
  --wm-surface-cyan: #06b6d4;
  --wm-surface-green: #10b981;
  --wm-surface-amber: #f59e0b;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 92%, white) 0%, var(--theme-bg) 34rem),
    var(--theme-bg);
}

.mkt-main {
  position: relative;
  isolation: isolate;
  /* `clip` (not `hidden`) clips the diagonal bands identically but does NOT
     create a scroll container, so descendant `position: sticky` (the legal/docs
     TOC sidebars) actually sticks to the viewport. `overflow: hidden` here was
     silently disabling every sticky nav on the public surface. */
  overflow: clip;
  padding-top: var(--mkt-nav-height, 64px);
}

.mkt-main::before,
.mkt-main::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
  z-index: 0;
}

.mkt-main::before {
  top: 0;
  height: min(42rem, 72vh);
  background:
    linear-gradient(116deg, rgba(99, 91, 255, 0.22) 0%, rgba(6, 182, 212, 0.16) 23%, transparent 46%),
    linear-gradient(151deg, transparent 0 55%, rgba(16, 185, 129, 0.14) 55.2% 69%, rgba(245, 158, 11, 0.12) 69.2% 76%, transparent 76.2%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg-elevated) 86%, transparent), transparent 80%);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
  opacity: 0.95;
}

.mkt-main::after {
  top: 0;
  height: 52rem;
  background-image:
    linear-gradient(color-mix(in srgb, var(--theme-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--theme-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(116deg, transparent 0 68%, color-mix(in srgb, var(--wm-surface-cyan) 18%, transparent) 68.1% 68.6%, transparent 68.8% 100%);
  background-size: 128px 128px, 128px 128px, 100% 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 82%);
  opacity: 0.72;
}

.mkt-main > * {
  position: relative;
  z-index: 1;
}

.wm-public-progress {
  position: fixed;
  /* Top edge of the viewport — under the old opaque bar it hugged the nav,
     but beneath the floating glass capsule a full-width line at y=64 read
     as a detached stray hair. */
  top: 0;
  left: 0;
  right: 0;
  z-index: 51;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--wm-surface-indigo), var(--wm-surface-cyan), var(--wm-surface-green), var(--wm-surface-amber));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.wm-public-progress.is-visible {
  opacity: 1;
}

.mkt-container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-8); }
@media (max-width: 1024px) { .mkt-container { padding: 0 var(--space-5); } }
@media (max-width: 640px)  { .mkt-container { padding: 0 var(--space-4); } }

/* ═══ NAV — liquid glass ═════════════════════════════════════════════════
   iOS-26-style floating glass capsule. The fixed bar itself is invisible;
   `.mkt-container` inside it is the lens: heavy blur + SATURATION (the part
   that makes content glow through instead of just fogging), a translucent
   theme fill, hairline border, and a 1px specular top edge. Content scrolls
   underneath and refracts. Scrolling densifies the fill slightly — no
   geometry ever changes. */
.mkt-nav {
  --mkt-nav-height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 8px clamp(10px, 2vw, 24px) 0;
  background: transparent;
  border-bottom: 0;
  color: var(--theme-text);
  pointer-events: none; /* the band is air; only the capsule catches clicks */
}
.mkt-nav .mkt-container {
  pointer-events: auto;
  /* The lens spans the full band (minus the float gutters): page content and
     section hairlines always pass UNDER the glass — blurred and pretty —
     never naked through transparent side gutters. A 1120px capsule on a wide
     screen left full-bleed borders slicing visibly past both ends of it. */
  max-width: none;
  padding: 0 10px 0 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--theme-text) 9%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 46%),
    color-mix(in srgb, var(--theme-bg-elevated) 56%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.dark .mkt-nav .mkt-container,
[data-theme="dark"] .mkt-nav .mkt-container {
  border-color: color-mix(in srgb, #fff 9%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 6%, transparent), transparent 46%),
    color-mix(in srgb, var(--theme-bg-elevated) 52%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
/* Scrolled: the glass densifies so text stays readable over busy content. */
.mkt-nav.shadow-sm .mkt-container,
.mkt-nav.is-scrolled .mkt-container {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 46%),
    color-mix(in srgb, var(--theme-bg-elevated) 74%, transparent);
  border-color: color-mix(in srgb, var(--theme-text) 12%, transparent);
}
.dark .mkt-nav.shadow-sm .mkt-container,
.dark .mkt-nav.is-scrolled .mkt-container,
[data-theme="dark"] .mkt-nav.shadow-sm .mkt-container,
[data-theme="dark"] .mkt-nav.is-scrolled .mkt-container {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 6%, transparent), transparent 46%),
    color-mix(in srgb, var(--theme-bg-elevated) 72%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent);
}
/* No backdrop-filter (old engines): fall back to a solid theme bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mkt-nav .mkt-container { background: var(--theme-bg-elevated); }
}
/* Children: keep the compact sizing from the nav polish, but let COLOUR fall
   through to the theme-aware base rules (.mkt-navlink, .mkt-signin, .mkt-lang,
   …) so the bar is dark-on-light in light mode and light-on-dark in dark. */
.mkt-nav .mkt-logo { gap: 10px; }
.mkt-nav .mkt-logo-text { font-size: 17px; font-weight: 720; }
.mkt-nav .mkt-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #635bff 0%, #0ea5e9 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* One height per row (UI rule §14): language, theme, Sign in, Get started are
   all 40px — measured 38 / 40 / 38 / 40 before. */
.mkt-nav .mkt-signin { height: 40px; display: inline-flex; align-items: center; }
.mkt-nav .mkt-lang { height: 40px; padding: 0 11px; }
/* Flag-only language button — a square icon chip like the theme toggle. */
.mkt-nav .mkt-lang.mkt-lang--compact {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.mkt-lang--compact .fi { font-size: 15px; }
/* 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.mkt-nav .mkt-icon-btn,
.mkt-nav .mkt-mobile-btn {
  width: 40px;
  height: 40px;
}
/* 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.mkt-nav .mkt-btn-pri {
  height: 40px;
  padding: 0 18px;
  border-radius: 9px;
  font-weight: 700;
}
.mkt-nav-inner {
  /* 8px float gap + 54px capsule + 2px borders = the 64px --mkt-nav-height
     band every page already reserves — no spacer math changes anywhere. */
  height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.mkt-logo { grid-column: 1; display: inline-flex; align-items: center; gap: 9px; justify-self: start; min-width: 0; }
.mkt-logo-mark {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--brand-primary); color: var(--theme-text-inverted);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.mkt-logo-text { font-family: var(--font-family-heading); font-size: 16px; font-weight: 680; letter-spacing: 0; color: var(--theme-text); }
.mkt-nav-center,
.mkt-nav-actions {
  display: none;
  align-items: center;
}
@media (min-width: 768px) {
  .mkt-nav-center {
    grid-column: 2;
    display: inline-flex;
    justify-self: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .mkt-nav-actions {
    grid-column: 3;
    display: inline-flex;
    justify-self: end;
    gap: 10px;
  }
}
.mkt-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 13.5px; font-weight: 650; color: var(--theme-text-secondary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.mkt-navlink:hover { color: var(--theme-text); background: color-mix(in srgb, var(--brand-primary) 7%, transparent); }
.mkt-navlink.is-active {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  /* Inset hairline via shadow — color only on active; no border-width jump */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

/* 40x40 minimum hit area (UI_DESIGN_RULES §12) — min-height bumped from 36px. */
.mkt-btn-pri {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, #ffffff 10%, transparent); border-radius: var(--radius-md);
  background: linear-gradient(180deg, #202631 0%, #111827 100%);
  color: #ffffff !important;
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: filter var(--transition-fast), color var(--transition-fast);
}
.mkt-btn-pri::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,0.16) 48%, transparent 62% 100%);
  transform: translateX(-120%);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mkt-btn-pri:hover { filter: brightness(1.04); color: #ffffff; }
.mkt-btn-pri:hover::after { transform: translateX(120%); }
.mkt-btn-pri > * { position: relative; z-index: 1; }
.mkt-btn-pri:active { filter: brightness(0.88); }
.dark .mkt-btn-pri {
  border-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);
  color: #111827 !important;
}
.dark .mkt-btn-pri:hover {
  color: #111827 !important;
}
/* 40x40 minimum hit area (UI_DESIGN_RULES §12) — min-height bumped from 36px. */
.mkt-btn-sec {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--theme-card-bg) 84%, transparent); color: var(--theme-text-secondary);
  backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 500;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.mkt-btn-sec:hover { border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-strong)); background: var(--theme-hover); color: var(--theme-text); }
/* 40x40 minimum hit area (UI_DESIGN_RULES §12) — min-height bumped from 36px. */
.mkt-signin {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.mkt-signin:hover { color: var(--brand-text); background: var(--theme-hover); }

/* 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.mkt-icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--theme-card-bg); color: var(--theme-text-secondary);
  font-size: 13px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.mkt-icon-btn:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }

/* dropdown (lang) */
.mkt-lang-wrap { position: relative; }
.mkt-lang {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--theme-card-bg) 92%, var(--theme-bg-secondary));
  font-size: 12.5px; font-weight: 560; color: var(--theme-text-secondary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.mkt-lang i { font-size: 10px; opacity: 0.58; }
.mkt-lang:hover { border-color: var(--border-strong); background: var(--theme-card-bg); color: var(--theme-text); }
.mkt-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  background: var(--theme-card-bg); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 4px; min-width: 168px;
  box-shadow: var(--shadow-popover);
}
.mkt-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--theme-text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mkt-menu-item:hover { background: var(--theme-hover); color: var(--theme-text); }
.mkt-menu-item.is-active { background: var(--theme-hover); color: var(--theme-text); }
.mkt-menu-item .fa-check { margin-left: auto; font-size: 11px; color: var(--brand-text); }

/* mobile menu. 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.mkt-mobile-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--theme-card-bg); color: var(--theme-text);
  grid-column: 3;
  justify-self: end;
}
@media (min-width: 768px) { .mkt-mobile-btn { display: none; } }
/* ── In-capsule expanding menu ────────────────────────────────────────────────
   The menu is a normal-flow row INSIDE the nav's glass capsule, so opening it
   grows the capsule itself: one border, one background, one radius — navbar
   and menu are physically one piece, not two panels faking a seam.
   Height animates 0 ↔ measured px (set inline by marketing_nav.js, then
   released to auto on transitionend) — px height interpolates in every
   engine, unlike grid-template-rows fr values. `visibility` keeps closed
   links untabbable. The single `.is-open` class + one inline height drive
   the whole state — no display/timeout dance to desync into a stranded
   half-open strip. */
.mkt-mobile-menu {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: auto;
  color: var(--theme-text);
  transition:
    height 0.5s cubic-bezier(0.32, 0.72, 0.28, 1),
    visibility 0s linear 0.5s;
}
.mkt-mobile-menu.is-open {
  visibility: visible;
  transition: height 0.5s cubic-bezier(0.32, 0.72, 0.28, 1);
}
@media (min-width: 768px) {
  .mkt-mobile-menu { display: none; }
}
.mkt-mobile-menu .mkt-mobile-menu-inner > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.mkt-mobile-menu.is-open .mkt-mobile-menu-inner > * {
  opacity: 1;
  transform: translateY(0);
}
.mkt-mobile-menu.is-open .mkt-mobile-menu-inner > :nth-child(1) { transition-delay: 0.06s; }
.mkt-mobile-menu.is-open .mkt-mobile-menu-inner > :nth-child(2) { transition-delay: 0.13s; }
.mkt-mobile-menu.is-open .mkt-mobile-menu-inner > :nth-child(3) { transition-delay: 0.2s; }
.mkt-mobile-menu.is-open .mkt-mobile-menu-inner > :nth-child(4) { transition-delay: 0.27s; }
.mkt-mobile-btn i { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.28, 1); }
.mkt-mobile-btn.is-open i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .mkt-mobile-menu,
  .mkt-mobile-menu .mkt-mobile-menu-inner > *,
  .mkt-mobile-btn i { transition: none; }
}
.mkt-mobile-menu-inner {
  /* The cap keeps a tall menu scrollable inside the capsule instead of
     growing past the viewport. NO vertical padding/border here — with
     border-box they'd clamp the collapsed height to a visible lip; top/bottom
     space lives on the first/last children and the divider is an inset
     shadow (paints nothing at zero height). */
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: calc(100dvh - var(--mkt-nav-height, 64px) - 24px);
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--theme-text) 8%, transparent);
}
.mkt-mobile-menu-inner > :first-child { padding-top: var(--space-3); }
.mkt-mobile-menu-inner > :last-child { margin-bottom: var(--space-4); }
.mkt-mobile-section {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-divider);
}
.mkt-mobile-section-head {
  /* sans: a label, not a code (UI rule §7) */
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-tertiary);
}
.mkt-mobile-link {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 650;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.mkt-mobile-link i {
  color: var(--theme-text-tertiary);
  font-size: 11px;
}
.mkt-mobile-link:hover,
.mkt-mobile-link.is-active {
  border-color: var(--border-subtle);
  background: var(--theme-hover);
  color: var(--theme-text);
}
.mkt-mobile-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.mkt-choice-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: 13px; color: var(--theme-text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.mkt-choice-pill.is-active { border-color: var(--brand-primary); color: var(--brand-text); }
.mkt-mobile-lang-pill {
  min-height: 44px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 var(--space-3);
  border-radius: 8px;
  background: var(--theme-card-bg);
  font-size: 14px;
  font-weight: 600;
}
.mkt-mobile-lang-pill:hover {
  border-color: var(--border-strong);
  background: var(--theme-hover);
  color: var(--theme-text);
}
.mkt-mobile-lang-pill .fi {
  flex: 0 0 auto;
  font-size: 17px;
}
.mkt-mobile-theme-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--theme-card-bg);
  color: var(--theme-text);
  font-size: 14.5px;
  font-weight: 650;
}
/* 40x40 minimum hit area (UI_DESIGN_RULES §12). */
.mkt-mobile-theme-row .mkt-icon-btn {
  width: 40px;
  height: 40px;
}
.mkt-mobile-actions {
  display: grid;
  gap: var(--space-2);
}
.mkt-mobile-actions .mkt-btn-sec,
.mkt-mobile-actions .mkt-btn-pri {
  min-height: 46px;
  justify-content: center;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
}
@media (max-width: 340px) {
  .mkt-mobile-menu-inner {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }
  .mkt-mobile-lang-grid {
    grid-template-columns: 1fr;
  }
}
/* Footer Theme-toggle choice-pill — theme-aware, like the rest of the footer. */
.mkt-footer .mkt-choice-pill {
  color: var(--theme-text-secondary);
  border-color: var(--border-subtle);
}
.mkt-footer .mkt-choice-pill:hover {
  color: var(--theme-text);
  border-color: var(--brand-primary);
  background: var(--theme-hover);
}

/* ═══ PAGE BODY PRIMITIVES ═══════════════════════════════════════════════ */
/* Vertical rhythm ONLY. The shorthand used to zero the horizontal padding
   too, and on the pages that put .mkt-page on the same element as
   .mkt-container (contact, about) that beat the container's own gutter at
   equal specificity — measured 2026-09-05: "Let's talk." at x=0 on a phone. */
.mkt-page { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: var(--space-16); }
.mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-card-bg) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 48%, transparent);
  /* sans: a label, not a code (UI rule §7) */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: var(--space-4);
}
.mkt-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wm-surface-cyan), var(--wm-surface-green));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wm-surface-cyan) 12%, transparent);
}
.mkt-h1 {
  max-width: 920px;
  font-family: var(--font-family-heading);
  font-size: clamp(2.4rem, 5.4vw, 5.1rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.96;
  color: var(--theme-text);
}
@media (max-width: 640px) { .mkt-h1 { font-size: clamp(2.15rem, 11vw, 3.2rem); line-height: 1.02; } }
[data-page="landing-page"] .mkt-h1 {
  max-width: 820px;
  font-size: clamp(2.25rem, 3.45vw, 3.45rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
}
@media (max-width: 640px) {
  [data-page="landing-page"] .mkt-h1 {
    font-size: clamp(2rem, 8.8vw, 2.65rem);
    line-height: 1.08;
  }
}
.mkt-lede {
  margin-top: var(--space-5);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.58;
  color: var(--theme-text-secondary);
  max-width: 720px;
}
/* The one shared "what is this, and is it for me?" sentence, rendered by
   macros/positioning.html on every public page. Deliberately a step quieter
   than .mkt-lede: each page still leads with its own angle, and this is the
   constant underneath that ties those angles to one product. Hierarchy comes
   from size alone, not colour and not opacity — it inherits the same
   secondary text token the lede uses, at full strength. An earlier draft
   dimmed this to opacity 0.86, which buys nothing the smaller size does not
   already say and pushes body text toward the contrast floor.

   NOTE, because it will otherwise look like a bug: on /about this size does
   NOT apply. `.about-hero-copy p:not(.about-eyebrow)` is specificity 0-2-1
   against this rule's 0-1-0, so the page wins and renders the line at lede
   size. That is right there — on /about this sentence REPLACED the hero lede
   and is the primary copy, whereas on / and /b2b/intake it sits under a lede
   that keeps its own voice. Worth knowing before you change the value here
   and wonder why one of the three pages ignored you. */
.mkt-positioning {
  margin-top: var(--space-3);
  font-size: clamp(14px, 1.15vw, 15.5px);
  line-height: 1.6;
  color: var(--theme-text-secondary);
}

.mkt-section { margin-top: clamp(4rem, 9vw, 7rem); }
.mkt-section-h {
  font-family: var(--font-family-heading);
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  font-weight: 740;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--theme-text);
  margin-bottom: var(--space-5);
}
.mkt-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Sticky table-of-contents link (legal / docs sidebars) */
.mkt-toc-link {
  display: block; padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--theme-text-secondary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.mkt-toc-link:hover { color: var(--theme-text); background: var(--theme-hover); }
.mkt-toc-link.is-active { color: var(--brand-text); background: var(--theme-hover); }

.mkt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(1rem, 2vw, 1.35rem); }
.mkt-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 95%, white), var(--theme-card-bg));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: var(--space-5);
  transition:
    border-color var(--transition-normal),
    background var(--transition-normal);
}
.mkt-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.mkt-card::after {
  inset: 0;
  background: radial-gradient(360px circle at var(--wm-card-x, 50%) var(--wm-card-y, 0%), color-mix(in srgb, white 32%, transparent), transparent 42%);
}
.mkt-card > * {
  position: relative;
  z-index: 1;
}
.mkt-card:hover,
.mkt-card.is-spotlit {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-subtle));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 88%, var(--brand-primary)), var(--theme-card-bg));
}
.mkt-card.is-spotlit::after {
  opacity: 1;
}
.mkt-card-title { font-family: var(--font-family-heading); font-size: 15.5px; font-weight: 720; color: var(--theme-text); margin-bottom: 7px; letter-spacing: -0.01em; }
.mkt-card-desc { font-size: 13.5px; line-height: 1.6; color: var(--theme-text-secondary); }
.mkt-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text);
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.mkt-card-link:hover { gap: 8px; text-decoration: none; color: var(--brand-primary-hover); }

/* status rows */
.mkt-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.mkt-status-row + .mkt-status-row { margin-top: var(--space-2); }
.mkt-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }
.mkt-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-text-tertiary); }
.mkt-dot.is-good { color: var(--success-text); } .mkt-dot.is-good::before { background: var(--success); }
.mkt-dot.is-warn { color: var(--warning-text); } .mkt-dot.is-warn::before { background: var(--warning); }
.mkt-dot.is-bad  { color: var(--danger-text); }  .mkt-dot.is-bad::before  { background: var(--danger); }

/* long-form prose (terms / privacy / security / docs) */
.mkt-prose { max-width: 760px; font-size: 16px; line-height: 1.72; color: var(--theme-text-secondary); }
.mkt-prose h2 { font-family: var(--font-family-heading); font-size: 21px; font-weight: 640; letter-spacing: -0.02em; color: var(--theme-text); margin: var(--space-8) 0 var(--space-3); }
.mkt-prose h3 { font-family: var(--font-family-heading); font-size: 17px; font-weight: 640; letter-spacing: -0.01em; color: var(--theme-text); margin: var(--space-6) 0 var(--space-2); }
.mkt-prose p { margin: 0 0 var(--space-5); }
.mkt-prose ul, .mkt-prose ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
.mkt-prose li { margin-bottom: 7px; line-height: 1.6; }
/* --brand-text: body links in marketing prose are 16px on a light page and
   --brand-primary measured 4.30:1 there. Shared by 6 templates, so this one
   line covers all of them. */
.mkt-prose a { color: var(--brand-text); }
.mkt-prose a:hover { text-decoration: underline; }
.mkt-prose hr { border: 0; border-top: 1px solid var(--border-divider); margin: var(--space-8) 0; }
.mkt-prose code { font-family: var(--font-family-mono); font-size: 0.9em; background: var(--theme-bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 1px 5px; }

/* ═══ HELP CENTER (search + pills + link-lists + FAQ) ═════════════════════ */
.mkt-search-input {
  width: 100%; padding: 13px 44px; border-radius: var(--radius-md);
  border: 1px solid var(--border-control); background: var(--theme-card-bg);
  color: var(--theme-text); font-family: inherit; font-size: 15px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.mkt-search-input::placeholder { color: var(--theme-text-tertiary); }
.mkt-search-input:focus { outline: none; border-color: var(--brand-primary); }

.mkt-search-results {
  margin-top: var(--space-3); background: var(--theme-card-bg);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  overflow: hidden; text-align: left;
}
.mkt-search-result {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px var(--space-4);
  border-bottom: 1px solid var(--border-divider);
  transition: background-color var(--transition-fast);
}
.mkt-search-result:last-child { border-bottom: 0; }
.mkt-search-result:hover { background: var(--theme-hover); }
.mkt-search-result-ico {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--theme-bg-secondary); color: var(--theme-text-tertiary); font-size: 12px;
}
.mkt-search-result-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--theme-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-search-result-cat { display: block; font-size: 12px; color: var(--theme-text-tertiary); }
.mkt-search-result-arrow { font-size: 10px; color: var(--theme-text-tertiary); flex-shrink: 0; }

.mkt-pillrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.mkt-pillrow-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--theme-text-tertiary); margin-right: var(--space-1); }
.mkt-pill {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--theme-card-bg); color: var(--theme-text-secondary);
  font-size: 12.5px; font-weight: 500;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.mkt-pill:hover { border-color: var(--border-strong); background: var(--theme-hover); color: var(--theme-text); }

.mkt-card-glyph { font-size: 12px; color: var(--theme-text-tertiary); }

.mkt-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mkt-link-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 8px 0; border-top: 1px solid var(--border-divider);
  transition: opacity var(--transition-fast);
}
.mkt-link-list li:first-child .mkt-link-item { border-top: 0; }
.mkt-link-item-title { display: block; font-size: 13.5px; font-weight: 500; color: var(--theme-text-secondary); line-height: 1.4; transition: color var(--transition-fast); }
.mkt-link-item:hover .mkt-link-item-title { color: var(--brand-text); }
.mkt-link-item-sub { display: block; font-size: 12px; color: var(--theme-text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-link-item-meta { flex-shrink: 0; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--theme-text-tertiary); margin-top: 1px; }

.mkt-faq { display: flex; flex-direction: column; gap: var(--space-2); }
.mkt-faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); }
.mkt-faq-item:hover { border-color: var(--border-strong); }
.mkt-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 14px var(--space-4); text-align: left;
  background: transparent; border: 0; color: var(--theme-text);
  font-size: 14.5px; font-weight: 500;
  transition: background-color var(--transition-fast);
}
.mkt-faq-q:hover { background: var(--theme-hover); }
.mkt-faq-icon { flex-shrink: 0; font-size: 12px; color: var(--theme-text-tertiary); transition: transform var(--transition-fast); }
.mkt-faq-icon.rotate-45 { transform: rotate(45deg); }
.mkt-faq-body-wrap { border-top: 1px solid var(--border-divider); }
.mkt-faq-body { padding: var(--space-4); font-size: 13.5px; line-height: 1.6; color: var(--theme-text-secondary); }
.mkt-faq-body strong { color: var(--theme-text); font-weight: 600; }
.mkt-faq-body a { display: inline-flex; }

/* ═══ STRIPE-INSPIRED PUBLIC SURFACE EFFECTS ═════════════════════════════ */
.mkt :where(
  .doc-start-card,
  .doc-index-card,
  .careers-principle,
  .careers-signal,
  .post-card,
  .cl-card,
  .sec-card,
  .investor-proof-card,
  .investor-metric-card,
  .investor-module,
  .investor-panel,
  .investor-product-frame,
  .investor-timeline-item,
  .investor-cta,
  .mkt-status-row,
  .mkt-faq-item
) {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition:
    border-color var(--transition-normal),
    background-color var(--transition-normal);
}

.mkt :where(
  .doc-start-card,
  .doc-index-card,
  .careers-principle,
  .careers-signal,
  .post-card,
  .cl-card,
  .sec-card,
  .investor-proof-card,
  .investor-metric-card,
  .investor-module,
  .investor-panel,
  .investor-product-frame,
  .investor-timeline-item,
  .investor-cta,
  .mkt-status-row,
  .mkt-faq-item
)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--wm-card-x, 50%) var(--wm-card-y, 0%), color-mix(in srgb, white 28%, transparent), transparent 44%);
  transition: opacity var(--transition-normal);
}

.mkt :where(
  .doc-start-card,
  .doc-index-card,
  .careers-principle,
  .careers-signal,
  .post-card,
  .cl-card,
  .sec-card,
  .investor-proof-card,
  .investor-metric-card,
  .investor-module,
  .investor-panel,
  .investor-product-frame,
  .investor-timeline-item,
  .investor-cta,
  .mkt-status-row,
  .mkt-faq-item
):hover,
.mkt :where(
  .doc-start-card,
  .doc-index-card,
  .careers-principle,
  .careers-signal,
  .post-card,
  .cl-card,
  .sec-card,
  .investor-proof-card,
  .investor-metric-card,
  .investor-module,
  .investor-panel,
  .investor-product-frame,
  .investor-timeline-item,
  .investor-cta,
  .mkt-status-row,
  .mkt-faq-item
).is-spotlit {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-subtle));
  background-color: color-mix(in srgb, var(--theme-card-bg) 92%, var(--brand-primary));
}

.mkt :where(
  .doc-start-card,
  .doc-index-card,
  .careers-principle,
  .careers-signal,
  .post-card,
  .cl-card,
  .sec-card,
  .investor-proof-card,
  .investor-metric-card,
  .investor-module,
  .investor-panel,
  .investor-product-frame,
  .investor-timeline-item,
  .investor-cta,
  .mkt-status-row,
  .mkt-faq-item
).is-spotlit::after {
  opacity: 1;
}

.mkt [data-wm-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition-normal),
    background-color var(--transition-normal);
  transition-delay: var(--wm-reveal-delay, 0ms);
}

.mkt [data-wm-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mkt [data-wm-reveal="hero"] {
  transform: translateY(12px);
}

.mkt :where(.mkt-page, .mkt-section, section):not(.mkt-mobile-section) {
  scroll-margin-top: calc(var(--mkt-nav-height, 64px) + 28px);
}

.mkt :where(.mkt-search-input, .doc-search, .doc-sidebar-search, .mkt-form input, .mkt-form textarea, .mkt-form select) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 35%, transparent);
}

.mkt :where(.mkt-search-input, .doc-search input, .doc-sidebar-search input, .mkt-form input, .mkt-form textarea, .mkt-form select):focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border-strong));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.mkt-toc-link.is-active {
  /* House rule: no left-rail active indicators — active = brand colour (set
     above) + bg-tint + slightly bolder weight. No border-left / inset rail. */
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .wm-public-progress,
  .mkt [data-wm-reveal],
  .mkt-card,
  .mkt-btn-pri,
  .mkt-btn-sec,
  .mkt :where(
    .doc-start-card,
    .doc-index-card,
    .careers-principle,
    .careers-signal,
    .post-card,
    .cl-card,
    .sec-card,
    .investor-proof-card,
    .investor-metric-card,
    .investor-module,
    .investor-panel,
    .investor-product-frame,
    .investor-timeline-item,
    .investor-cta,
    .mkt-status-row,
    .mkt-faq-item
  ) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .mkt [data-wm-reveal] {
    opacity: 1;
  }
}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════ */
.mkt-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--theme-text);
  background: var(--theme-bg-secondary);
  border-top: 1px solid var(--theme-border);
}

/* No decorative pseudo-layers: the rainbow hairline + background grid read as
   unfinished scaffolding next to the page's hairline-and-type language. The
   plain border-top above is the entire footer boundary. */

.mkt-footer-inner {
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Bare link columns sit right against the display edge at the global 16px
   phone gutter (cards get away with it — their inner padding adds optical
   margin; naked text doesn't). Give the footer a real gutter on phones. */
@media (max-width: 640px) {
  .mkt-footer .mkt-container { padding: 0 var(--space-6); }
}

/* ── CTA band — the page's closing pitch. Hairline-separated from the link
   grid; the landing page (which has its own CTA zone) skips it. ─────────── */
.mkt-footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--theme-border);
}

.mkt-footer-cta-h {
  font-family: var(--font-family-heading);
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 740;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--theme-text);
}

.mkt-footer-cta-sub {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--theme-text-secondary);
  max-width: 480px;
}

.mkt-footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mkt-footer-cta-actions .mkt-btn-pri,
.mkt-footer-cta-actions .mkt-btn-sec {
  min-height: 42px;
  font-size: 13.5px;
}
.mkt-footer-cta-actions .mkt-btn-pri { padding: 0 22px; }
.mkt-footer-cta-actions .mkt-btn-sec { padding: 0 18px; }

/* ── Link grid ───────────────────────────────────────────────────────────── */
.mkt-footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(min(120px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: start;
}

.mkt-footer-grid > div:not(.mkt-footer-brand) {
  padding-top: 10px;
}

@media (max-width: 1080px) {
  .mkt-footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7, 28px) var(--space-6);
  }
}

@media (max-width: 760px) {
  .mkt-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-5);
  }
}

/* Brand block is type on the page like everything else — the bordered
   mini-card read as a stray widget on mobile. */
.mkt-footer-brand {
  grid-column: 1 / -1;
  max-width: 440px;
}

@media (min-width: 1081px) {
  .mkt-footer-brand {
    grid-column: auto;
  }
}

.mkt-footer .mkt-logo-mark {
  background: linear-gradient(135deg, #635bff 0%, #06b6d4 100%);
  color: #ffffff;
}

.mkt-footer .mkt-logo-text {
  color: var(--theme-text);
}

.mkt-footer-desc {
  margin-top: var(--space-4);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--theme-text-secondary);
  max-width: 340px;
}

/* Socials live in the bottom bar — compact icon chips. */
.mkt-social {
  display: flex;
  gap: var(--space-2);
}

.mkt-social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--theme-text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--theme-card-bg);
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.mkt-social a:hover {
  color: var(--brand-text);
  border-color: var(--brand-primary);
  background: var(--theme-hover);
}

.mkt-footer-h {
  /* sans: a label, not a code (UI rule §7) */
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  margin-bottom: var(--space-5);
}

.mkt-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mkt-footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  color: var(--theme-text-secondary);
  font-size: 14.5px;
  font-weight: 560;
  transition: color var(--transition-fast);
}

.mkt-footer-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mkt-footer-link:hover,
.mkt-footer-link.is-active {
  color: var(--theme-text);
}

.mkt-footer-link:hover::after,
.mkt-footer-link.is-active::after {
  opacity: 0.48;
}

/* ── Bottom bar controls: socials · language · theme — one compact row. ── */
.mkt-footer #footer-lang-toggle,
.mkt-footer #theme-toggle-footer {
  min-height: 34px;
  border-color: var(--border-subtle);
  border-radius: 8px;
  background: var(--theme-card-bg);
  color: var(--theme-text-secondary);
  font-size: 12.5px;
  font-weight: 620;
  box-shadow: none;
}

.mkt-footer-lang {
  position: relative;
}

.mkt-footer #footer-lang-toggle {
  gap: 8px;
  padding: 0 11px;
}

.mkt-footer .mkt-footer-theme {
  width: 34px;
  padding: 0;
  justify-content: center;
}

.mkt-footer #footer-lang-toggle:hover,
.mkt-footer #theme-toggle-footer:hover {
  border-color: var(--brand-primary);
  background: var(--theme-hover);
  color: var(--theme-text);
  transform: none;
}

.mkt-footer .mkt-menu {
  border-color: var(--border-subtle);
  background: var(--theme-card-bg);
  box-shadow: var(--shadow-popover);
}

.mkt-footer .mkt-footer-menu {
  top: auto;
  left: auto;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  min-width: 176px;
  padding: 6px;
  border-radius: 10px;
}

.mkt-footer .mkt-menu-item {
  color: var(--theme-text-secondary);
}

.mkt-footer .mkt-menu-item:hover,
.mkt-footer .mkt-menu-item.is-active {
  color: var(--theme-text);
  background: var(--theme-hover);
}

.mkt-footer-bottom {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--theme-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mkt-footer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mkt-footer-sep {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
  margin: 0 var(--space-2);
}

.mkt-footer-copy {
  font-size: 13px;
  color: var(--theme-text-tertiary);
}

/* ── Watermark wordmark — quiet, oversized close to the page. ~4% ink keeps
   it texture, not message; no descenders in "wallmarkets" so a tight line
   box + small negative margin crops it cleanly at the page edge. ────────── */
.mkt-footer-watermark {
  position: relative;
  z-index: -1;
  margin-top: clamp(1rem, 3vw, 2.25rem);
  margin-bottom: -0.16em;
  font-family: var(--font-family-heading);
  font-size: clamp(4.25rem, 15.5vw, 12.5rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.8;
  text-align: center;
  white-space: nowrap;
  color: color-mix(in srgb, var(--theme-text) 4%, transparent);
  user-select: none;
  pointer-events: none;
}

/* Legal-page gradient hero (terms/privacy) — masked top-right wash, consistent
   with the other public heroes. Decorative canvas is aria-hidden. */
.legal-hero { position: relative; overflow: hidden; }
.legal-hero > *:not(.legal-hero-gradient) { position: relative; z-index: 1; }
.legal-hero-gradient {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  opacity: 0.2; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 130% at 88% 8%, #000 10%, transparent 62%);
          mask-image: radial-gradient(120% 130% at 88% 8%, #000 10%, transparent 62%);
}
[data-theme="dark"] .legal-hero-gradient { opacity: 0.36; }

/* Static-first hero gradient — a CSS-only mesh that REPLACES the per-frame WebGL
   canvas on utility / long-form pages (legal, security). Per STRIPE_UI_TEARDOWN
   Part 5 §4: reserve the live shader for the single landing hero; everywhere else
   a compositor-only mesh gets ~80% of the look at ~0 CPU on our shared host.
   Drop this class onto the existing .legal-hero-gradient / .sec-hero-gradient
   element (which already supplies inset, opacity and the radial mask) — this only
   paints + drifts. Reduced-motion freezes it to a static frame. */
.wm-hero-mesh {
  background:
    radial-gradient(at 18% 22%, #635bff 0%, transparent 50%),
    radial-gradient(at 82% 14%, #4f7cff 0%, transparent 48%),
    radial-gradient(at 70% 82%, #06b6d4 0%, transparent 50%),
    radial-gradient(at 12% 88%, #10b981 0%, transparent 50%);
  background-size: 170% 170%;
  background-position: 0% 0%;
  animation: wm-hero-drift 42s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes wm-hero-drift { to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .wm-hero-mesh { animation: none; }
}

/* Shared hero-gradient POSITIONING (pair with .wm-hero-mesh for the paint) so
   the pages that had a flat hero (api_docs, blog, changelog, documentation) get
   the same focused wash as the redesigned heroes without re-rolling per-page CSS.
   Two variants:
     --bleed  full-viewport-width band for a plain .mkt-container hero; the 100vw
              breakout is clipped (no h-scroll) by .mkt-main { overflow: clip }.
     --inset  fills an already-contained hero shell (position:relative + overflow
              hidden parent, e.g. .doc-hero-shell). */
.wm-hero-fill {
  position: absolute; z-index: 0; pointer-events: none; opacity: 0.2;
  -webkit-mask-image: radial-gradient(120% 130% at 84% 8%, #000 12%, transparent 62%);
          mask-image: radial-gradient(120% 130% at 84% 8%, #000 12%, transparent 62%);
}
[data-theme="dark"] .wm-hero-fill { opacity: 0.36; }
.wm-hero-fill--bleed { top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; }
.wm-hero-fill--inset { inset: 0; width: 100%; height: 100%; }
/* host of a --bleed gradient lifts its own content above the wash */
.wm-hero-host { position: relative; }
.wm-hero-host > *:not(.wm-hero-fill) { position: relative; z-index: 1; }

/* Legal/prose readability — restore list markers (Tailwind preflight strips them)
   and separate top-level legal sections with a hairline for scannability. */
.mkt-prose ul { list-style: disc; }
.mkt-prose ol { list-style: decimal; }
.mkt-prose li::marker { color: var(--theme-text-tertiary); }

/* Related-links footer — compact, tidy link cards (not oversized empty boxes). */
.legal-footer-links .mkt-card {
  padding: 13px 16px;
  min-height: 0;
}
.legal-footer-links .mkt-card span { font-size: 14px; }

/* ── Related-links footer — ONE consistent component across all public pages
   (replaces the per-page sec-related / legal-footer-links / mkt-help-related /
   "RELATED RESOURCES" variants). Macro: templates/macros/related.html. ───────── */
.related-links {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.related-links-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5);
}
.related-links-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-text-tertiary);
}
.related-links-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-3);
}
.related-links-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 13px 16px; border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--theme-card-bg); color: var(--theme-text);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.related-links-card:hover { border-color: var(--border-strong); color: var(--brand-text); }
.related-links-card i { font-size: 11px; color: var(--theme-text-tertiary); transition: color var(--transition-fast); }
.related-links-card:hover i { color: var(--brand-text); }

/* ── Landing hero slideshow progress bar ───────────────────────────────────
   Driven by landing_hero_slider.js (.hero-progress-inner width fills across the
   5s auto-advance interval; freezes on hover). Sits above the slide dots. */
.hero-progress {
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--border-subtle);
  overflow: hidden;
}
.hero-progress-inner {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--brand-primary);
  border-radius: 999px;
  /* CSS drives the fill (reliable, no per-frame JS); JS only restarts/pauses it
     on slide-change / hover. Same 5s period as the auto-advance interval. */
  animation: hero-progress-fill 5s linear infinite;
}
@keyframes hero-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-progress-inner { animation: none; transform: scaleX(0.04); }
}

/* WCAG 2.5.5/2.5.8 touch floor — 40x40 is under the 44px minimum. Same rule as
   .wm-icon-btn (tailwind.css) and .sfx-icon-btn (storefront/chrome.css); coarse
   pointers only, so desktop density is unchanged. */
@media (pointer: coarse) {
  .mkt-icon-btn {
    min-height: var(--min-touch-target, 44px);
    min-width: var(--min-touch-target, 44px);
  }
}