/* ============================================================
   FLiiP Components
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.5rem;
  font-size: var(--sz-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast),
              box-shadow var(--dur-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* On phones a nowrap button with a long label (French especially) becomes
   wider than the screen and clips or skews its section. Let labels wrap. */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
  }
}

.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}
.btn--primary:hover {
  background: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
  color: var(--c-white);
  box-shadow: var(--shadow-blue);
}

.btn--secondary {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-gray-300);
}
.btn--secondary:hover {
  background: var(--c-ink);
  color: var(--c-white);
  border-color: var(--c-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.35);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  color: var(--c-white);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-gray-300);
}
.btn--ghost-dark:hover {
  background: var(--c-gray-100);
  color: var(--c-ink);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--sz-base);
  border-radius: var(--r-lg);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--sz-xs);
}

/* ---- Nav / Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  transition: background var(--dur-base), box-shadow var(--dur-base);
}
.site-header--transparent {
  background: transparent;
}
.site-header--scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 0 var(--c-gray-200);
}
.site-header--dark-scrolled {
  background: rgba(22,23,25,0.98);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.nav {
  display: flex;
  align-items: center;
  height: 4rem;
  gap: var(--sp-2);
}

.nav__logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  flex-shrink: 0;
}
/* Logo is a CMS-managed <img> — see "Brand (header logo)" in Keystatic. */
.nav__logo img {
  display: block;
  height: 30px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem var(--sp-3);
  font-size: var(--sz-sm);
  font-weight: 500;
  color: var(--c-gray-700);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--c-ink);
  background: var(--c-gray-100);
}
.site-header--on-dark .nav__link { color: rgba(255,255,255,0.75); }
.site-header--on-dark .nav__link:hover,
.site-header--on-dark .nav__link[aria-expanded="true"] {
  color: var(--c-white);
  background: rgba(255,255,255,0.08);
}

.nav__link--highlight {
  background: var(--c-sky-soft);
  color: var(--c-blue);
  font-weight: 600;
  border-radius: var(--r-full);
}
.nav__link--highlight:hover {
  background: rgba(11,131,250,0.14);
  color: var(--c-blue-dark);
}
.site-header--on-dark .nav__link--highlight {
  background: rgba(11,131,250,0.18);
  color: var(--c-white);
}
.site-header--on-dark .nav__link--highlight:hover {
  background: rgba(11,131,250,0.30);
  color: var(--c-white);
}

.nav__link .chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast);
  flex-shrink: 0;
  opacity: 0.6;
}
.nav__link[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* When a nav item contains a wide megamenu, drop its `position: relative` so
   the menu can center against the header instead of the small trigger. */
.nav__item:has(> .megamenu) { position: static; }

/* ========== Megamenu (enterprise full-panel) ========== */
.megamenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  /* Cap to the viewport so the panel never overflows on narrow desktop
     windows (the drawer takes over below 1024px). */
  min-width: min(920px, calc(100vw - 24px));
  max-width: min(1080px, calc(100vw - 24px));
  background: var(--c-white);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(22,23,25,0.04),
    0 18px 40px -8px rgba(22,23,25,0.20),
    0 4px 12px -2px rgba(22,23,25,0.06);
  border: 1px solid var(--c-gray-200);
  padding: 0;
  overflow: hidden;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  z-index: var(--z-dropdown);
}
.megamenu.is-open {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* Invisible hover bridge over the 10px gap between the header and the open
   megamenu. Hover/pointer events on a pseudo-element are dispatched to its
   originating element, so the cursor crossing the gap still counts as
   hovering .nav__item and nav.js never starts its close timer. Anchored to
   .site-header (the item is position: static, same containing block as the
   menu itself). Gated on .is-open so it can never *open* a menu from the
   strip below the header. */
.nav__item:has(> .megamenu.is-open)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px; /* 10px gap + 2px overlap under the panel's top edge */
}
/* Top section holds the columns; bottom rail holds utility links */
.megamenu__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 0;
  background:
    linear-gradient(90deg, transparent calc(66.66% - 1px), var(--c-gray-200) calc(66.66% - 1px), var(--c-gray-200) 66.66%, transparent 66.66%);
}
.megamenu__col {
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  min-width: 0;
}
.megamenu__col + .megamenu__col {
  border-left: 1px solid var(--c-gray-200);
}
.megamenu__col--feature {
  background: linear-gradient(180deg, #F5F7F9 0%, #FFFFFF 100%);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.megamenu__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray-500);
  margin-bottom: var(--sp-1);
  padding: 0 var(--sp-2);
}
.megamenu__section-desc {
  font-size: 12px;
  color: var(--c-gray-700);
  padding: 0 var(--sp-2);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}

.megamenu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 8px var(--sp-2);
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur-fast);
  position: relative;
}
.megamenu__item:hover {
  background: var(--c-gray-100);
}
.megamenu__item--secondary {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--c-gray-200);
  padding-top: 14px;
}
.megamenu__item--secondary .megamenu__item-text strong {
  color: var(--c-gray-700);
  font-weight: 500;
}
.megamenu__item--secondary .megamenu__item-icon {
  opacity: 0.7;
}
.megamenu__item--secondary:hover .megamenu__item-text strong {
  color: var(--c-blue);
}
.megamenu__item:hover .megamenu__item-icon {
  background: linear-gradient(135deg, rgba(11,131,250,0.18), rgba(31,190,252,0.18));
  color: var(--c-blue);
}
.megamenu__item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-gray-700);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.megamenu__item-icon svg { width: 16px; height: 16px; }
.megamenu__item-text {
  min-width: 0;
}
.megamenu__item-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.megamenu__item-text span {
  font-size: 12px;
  color: var(--c-gray-500);
  line-height: 1.4;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- External-link glyph ----------------------------------------------
   Appended (in SiteHeader/SiteFooter) to any nav/footer link that points
   off-site. Those links also get target="_blank" rel="noopener noreferrer",
   so the glyph signals "opens in a new tab". Inherits the link colour and
   stays muted until hover. Lives once here, styled per surface below. */
.ext-ico {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: currentColor;
  opacity: 0.45;
}
/* Desktop megamenu rich rows: tuck the glyph into the top-right corner. */
.megamenu__item .ext-ico,
.megamenu__subitem .ext-ico {
  margin-left: auto;
  align-self: flex-start;
  margin-top: 4px;
}
.megamenu__item:hover .ext-ico,
.megamenu__subitem:hover .ext-ico { opacity: 0.85; color: var(--c-blue); }
/* Compact chip rows. */
.megamenu__chip .ext-ico { margin-left: auto; width: 12px; height: 12px; }
.megamenu__chip:hover .ext-ico { opacity: 0.85; }
/* Inline CTAs that are already coloured (feature card, enterprise strip). */
.megamenu__feature-cta .ext-ico,
.megamenu__enterprise-cta .ext-ico { opacity: 0.9; }
/* Top-level desktop links (e.g. Pricing/About if ever external). */
.nav__link .ext-ico { margin-left: 5px; }
/* Mobile drawer. */
.mobile-nav__sublink .ext-ico { margin-left: auto; width: 14px; height: 14px; }
.mobile-nav__plain-link .ext-ico { margin-left: 6px; width: 14px; height: 14px; }
/* Footer column + legal links. */
.footer__link .ext-ico { margin-left: 5px; vertical-align: -1px; opacity: 0.5; }
.footer__link:hover .ext-ico { opacity: 0.9; }
.footer__legal-links a .ext-ico { margin-left: 4px; width: 11px; height: 11px; vertical-align: -1px; opacity: 0.5; }
.footer__legal-links a:hover .ext-ico { opacity: 0.9; }

/* Chip cluster — compact rows for items without subtext (e.g. competitor brand names) */
.megamenu__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-gray-200);
}
.megamenu__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--sp-2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray-700);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
  min-width: 0;
}
.megamenu__chip::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gray-300);
  flex-shrink: 0;
  transition: background var(--dur-fast);
}
.megamenu__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.megamenu__chip:hover {
  background: var(--c-gray-100);
  color: var(--c-blue);
}
.megamenu__chip:hover::before {
  background: var(--c-blue);
}

/* Nested sub-goals shown indented beneath a parent megamenu item */
.megamenu__subitems {
  list-style: none;
  padding: 0;
  margin: 2px 0 var(--sp-3) 44px;
}
.megamenu__subitem {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px var(--sp-2);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--dur-fast);
}
.megamenu__subitem::before {
  content: '›';
  color: var(--c-blue);
  font-weight: 400;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.megamenu__subitem:hover {
  background: var(--c-gray-100);
}
.megamenu__subitem:hover .megamenu__subitem-label {
  color: var(--c-blue);
}
.megamenu__subitem-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.megamenu__subitem-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}
.megamenu__subitem-subtext {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-gray-500);
  line-height: 1.4;
}

/* Featured spotlight card */
.megamenu__feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.megamenu__feature:hover {
  border-color: var(--c-blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(11,131,250,0.18);
}
.megamenu__feature-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-ink-soft) 100%);
  position: relative;
  overflow: hidden;
}
.megamenu__feature-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
}
.megamenu__feature-thumb svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  color: var(--c-white);
  opacity: 0.9;
  z-index: 2;
}
/* Image variant — thumbnail replaces the gradient */
.megamenu__feature-thumb--image {
  background-color: var(--c-gray-100);
}
.megamenu__feature-thumb--image::before {
  background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,0.55) 100%);
  z-index: 2;
}
/* Inner image layer. Animating transform: scale() is GPU-accelerated and far
   smoother than transitioning background-size on the thumb itself. */
.megamenu__feature-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.megamenu__feature:hover .megamenu__feature-img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .megamenu__feature-img { transition: none; }
  .megamenu__feature:hover .megamenu__feature-img { transform: none; }
}
.megamenu__feature-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms;
}
.megamenu__feature-play svg {
  position: static;
  width: 22px;
  height: 22px;
  margin: 0;
  color: var(--c-white);
  opacity: 1;
}
.megamenu__feature:hover .megamenu__feature-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(11, 131, 250, 0.85);
}
.megamenu__feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}
.megamenu__feature-body {
  font-size: 12.5px;
  color: var(--c-gray-700);
  line-height: 1.5;
  flex: 1;
}
.megamenu__feature-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Enterprise callout strip — full-width dark band at the bottom of the megamenu */
.megamenu__enterprise {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 14px var(--sp-6);
  background: linear-gradient(90deg, rgba(11,131,250,0.06) 0%, rgba(11,131,250,0.02) 100%);
  border-top: 1px solid rgba(11,131,250,0.14);
  text-decoration: none;
  transition: background var(--dur-fast);
}
.megamenu__enterprise:hover {
  background: linear-gradient(90deg, rgba(11,131,250,0.10) 0%, rgba(11,131,250,0.04) 100%);
}
.megamenu__enterprise-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(11,131,250,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-blue);
  transition: background var(--dur-fast);
}
.megamenu__enterprise:hover .megamenu__enterprise-icon {
  background: rgba(11,131,250,0.20);
}
.megamenu__enterprise-icon svg { width: 16px; height: 16px; }
.megamenu__enterprise-text {
  flex: 1;
  min-width: 0;
}
.megamenu__enterprise-text strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}
.megamenu__enterprise-text span {
  font-size: 12px;
  color: var(--c-gray-500);
  line-height: 1.4;
}
.megamenu__enterprise-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-blue);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}
.megamenu__enterprise:hover .megamenu__enterprise-cta {
  color: var(--c-blue-dark);
}

/* Bottom utility rail */
.megamenu__rail {
  background: var(--c-gray-100);
  border-top: 1px solid var(--c-gray-200);
  padding: 12px var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.megamenu__rail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-gray-700);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.megamenu__rail-link:hover { color: var(--c-blue); }
.megamenu__rail-link svg { width: 12px; height: 12px; opacity: 0.6; }
.megamenu__rail-divider {
  width: 1px;
  height: 12px;
  background: var(--c-gray-200);
}

/* Legacy 2col/3col hooks — keep working for older markup */
.megamenu--2col,
.megamenu--3col {
  /* If a page still has the old grid markup directly inside .megamenu,
     wrap it visually so layout still looks reasonable */
  padding: var(--sp-6);
}
.megamenu--2col.is-open,
.megamenu--3col.is-open {
  display: grid;
}
.megamenu--2col { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.megamenu--3col { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }

.megamenu__cta {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-gray-200);
}
.megamenu__cta a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-blue);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background var(--dur-fast);
}
.megamenu__cta a:hover {
  background: var(--c-sky-soft);
  color: var(--c-blue-dark);
}

.nav__utility {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: var(--sp-4);
  flex-shrink: 0;
}

.nav__signin {
  font-size: var(--sz-sm);
  font-weight: 500;
  color: var(--c-gray-700);
  text-decoration: none;
  padding: 0.5rem var(--sp-3);
  border-radius: var(--r-md);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav__signin:hover {
  color: var(--c-ink);
  background: var(--c-gray-100);
}
.site-header--on-dark .nav__signin { color: rgba(255,255,255,0.7); }
.site-header--on-dark .nav__signin:hover {
  color: var(--c-white);
  background: rgba(255,255,255,0.08);
}

/* Mobile hamburger */
.nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background var(--dur-fast);
  color: var(--c-ink);
  margin-left: auto;
}
.nav__hamburger:hover { background: var(--c-gray-100); }
.site-header--on-dark .nav__hamburger { color: var(--c-white); }
.site-header--on-dark .nav__hamburger:hover { background: rgba(255,255,255,0.08); }

/* Mobile nav overlay.
   The outer .mobile-nav is a fixed full-viewport layer that dims the page;
   the inner __panel is the white sheet (full-width on phones, capped at
   420px on tablets so it reads as a drawer, not a takeover). */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(22, 23, 25, 0.45);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 420px);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__panel {
  transform: translateX(0);
}
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  height: 4rem;
  border-bottom: 1px solid var(--c-gray-200);
  flex-shrink: 0;
}
.mobile-nav__logo { display: flex; align-items: center; }
.mobile-nav__logo img { display: block; height: 28px; width: auto; }
.mobile-nav__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--c-ink);
  transition: background var(--dur-fast);
  margin-right: calc(-1 * var(--sp-2));
}
.mobile-nav__close:hover { background: var(--c-gray-100); }

.mobile-nav__body {
  flex: 1;
  padding: var(--sp-3) var(--sp-5) var(--sp-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav__section + .mobile-nav__section,
.mobile-nav__section + .mobile-nav__plain-link,
.mobile-nav__plain-link + .mobile-nav__plain-link,
.mobile-nav__plain-link + .mobile-nav__section {
  border-top: 1px solid var(--c-gray-100);
}
.mobile-nav__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: var(--sp-4) var(--sp-2);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  background: none;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast);
  text-align: left;
}
.mobile-nav__trigger:hover { background: var(--c-gray-100); }
.mobile-nav__trigger .chevron {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast);
  color: var(--c-gray-500);
  flex-shrink: 0;
}
.mobile-nav__trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  display: none;
  padding: 0 0 var(--sp-4);
}
.mobile-nav__submenu.is-open { display: block; }

/* Groups mirror the megamenu columns so mobile keeps the same information
   architecture as desktop instead of one flat link dump. */
.mobile-nav__group + .mobile-nav__group { margin-top: var(--sp-4); }
.mobile-nav__group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray-500);
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}
.mobile-nav__sublink {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-2);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mobile-nav__sublink:hover { background: var(--c-gray-100); }
.mobile-nav__sublink-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-gray-700);
}
.mobile-nav__sublink-icon svg { width: 16px; height: 16px; }
.mobile-nav__sublink--nested {
  padding-left: calc(32px + var(--sp-3) + var(--sp-2));
  min-height: 40px;
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
}

.mobile-nav__plain-link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--sp-4) var(--sp-2);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background var(--dur-fast);
}
.mobile-nav__plain-link:hover { background: var(--c-gray-100); }

.mobile-nav__footer {
  padding: var(--sp-4) var(--sp-5) max(var(--sp-5), env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-gray-200);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.mobile-nav__cta {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: 15px;
}

/* ---- Hero Sections ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
/* Immersive hero (homepage) pulls up under the sticky transparent header */
.hero--immersive {
  margin-top: -4rem;
  padding-top: 4rem;
}
/* Dark first-section heroes on inner pages also pull up under the transparent header */
main > section:first-child[style*="--c-ink"],
main > section:first-child[style*="position:relative"] {
  margin-top: -4rem;
  padding-top: calc(var(--sp-20) + 4rem) !important;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img,
.hero__bg-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* Both layers in the video-hero get matching treatment so the swap is invisible. */
.hero--video .hero__bg-poster,
.hero--video .hero__bg-video {
  filter: blur(2px) saturate(1.05);
  transform: scale(1.015);
  transform-origin: center;
  will-change: transform;
}
/* Poster sits at the same z-level; we fade it out once the video is playing
   so we never have two slightly-different sources stacked on top of each other. */
.hero--video .hero__bg-poster {
  position: absolute;
  inset: 0;
  transition: opacity 600ms ease-in;
}
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: none;
}
/* When the video is playing: video reaches its final opacity AND the poster
   drops to 0 in lockstep — so any frame mid-fade contains only one source
   at non-zero opacity. No more compressed-JPG ghost peeking through. */
.hero__bg-video.is-ready {
  opacity: 0.55;
}
.hero__bg--video-on .hero__bg-poster {
  opacity: 0;
}
/* Scrim: lifts text contrast over the (busy) video background */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 55%, transparent 80%),
    linear-gradient(180deg, rgba(22,23,25,0.35) 0%, rgba(22,23,25,0.55) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-video { display: none; }
}
.hero__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 85%);
}
.hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--sp-32) 0 var(--sp-24);
}

.hero--immersive .hero__content {
  max-width: 48rem;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero--split .hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.hero h1 {
  color: var(--c-white);
  letter-spacing: var(--ls-snug);
}

.hero h1 .highlight {
  color: var(--c-sky);
}

.hero__ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}
.hero--immersive .hero__ctas {
  justify-content: center;
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__screen {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-blue-lg), 0 0 0 1px rgba(255,255,255,0.08);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform var(--dur-slow) var(--ease-out);
  width: 100%;
  max-width: 560px;
}
.hero__screen:hover {
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
}
/* ---- Logo Marquee ---- */
.marquee-section {
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--c-gray-200);
  border-bottom: 1px solid var(--c-gray-200);
  overflow: hidden;
}
.marquee-section__label {
  text-align: center;
  font-size: var(--sz-sm);
  color: var(--c-gray-500);
  font-weight: 500;
  margin-bottom: var(--sp-8);
}
.marquee-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track__group {
  display: flex;
  gap: var(--sp-12);
  flex-shrink: 0;
  align-items: center;
  padding-right: var(--sp-12);
}
.marquee-track img {
  height: 48px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity var(--dur-base), filter var(--dur-base);
  flex-shrink: 0;
}
.marquee-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---- Stat Tiles ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.stat-tile {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.stat-tile__number {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.stat-tile__label {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  margin-bottom: var(--sp-3);
}
.stat-tile__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.55);
}
.stat-tile__attribution img {
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}
.stat-tile__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-blue);
  display: inline-block;
  flex-shrink: 0;
}

/* Light version */
.stats-grid--light .stat-tile {
  background: var(--c-white);
  border-color: var(--c-gray-200);
  box-shadow: var(--shadow-md);
}
.stats-grid--light .stat-tile__number {
  color: var(--c-blue);
}
.stats-grid--light .stat-tile__label { color: var(--c-gray-700); }
.stats-grid--light .stat-tile__attribution { color: var(--c-gray-500); }
.stats-grid--light .stat-tile__attribution img {
  filter: none;
  opacity: 0.7;
}

/* ---- Feature Cards ---- */
.feature-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--c-sky-soft);
}
.feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-sky-soft), rgba(11,131,250,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-blue);
  flex-shrink: 0;
}
.feature-card__icon svg { width: 24px; height: 24px; }
.feature-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}
.feature-card p {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  line-height: 1.55;
  flex: 1;
}
.feature-card__link {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  transition: gap var(--dur-fast);
}
.feature-card__link:hover { gap: var(--sp-2); color: var(--c-blue-dark); }

/* Dark feature card */
.feature-card--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.feature-card--dark:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(11,131,250,0.3);
  box-shadow: 0 20px 40px -8px rgba(0,0,0,0.4);
}
.feature-card--dark h4 { color: var(--c-white); }
.feature-card--dark p { color: rgba(255,255,255,0.6); }

/* ---- Quote Cards ---- */
.quote-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.quote-card__mark {
  font-size: 3.5rem;
  line-height: 0.8;
  font-weight: 800;
  color: var(--c-sky-soft);
  font-family: Georgia, serif;
}
.quote-card__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-gray-700);
  font-style: italic;
  flex: 1;
}
.quote-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-gray-200);
}
.quote-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-gray-200);
}
.quote-card__name {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}
.quote-card__role {
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
}
.quote-card__logo {
  margin-left: auto;
  height: 24px;
  opacity: 0.6;
}

/* Full-width quote band */
.quote-band {
  background: linear-gradient(135deg, var(--c-blue-deep), var(--c-ink));
  padding: var(--sp-20) 0;
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.quote-band__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}
.quote-band__mark {
  font-size: 5rem;
  line-height: 0.7;
  font-family: Georgia, serif;
  color: var(--c-sky);
  opacity: 0.4;
}
.quote-band__text {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-white);
  font-style: italic;
}
.quote-band__author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.quote-band__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  object-fit: cover;
}
.quote-band__info { text-align: left; }
.quote-band__name {
  font-size: var(--sz-sm);
  font-weight: 700;
  color: var(--c-white);
}
.quote-band__role {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.55);
}
.quote-band__logo {
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  margin-left: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(255,255,255,0.2);
}

/* ---- Trust Strip ---- */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--c-gray-200);
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.trust-strip__badge img {
  height: 36px;
  width: auto;
}
.trust-strip__text {
  font-size: var(--sz-sm);
  color: var(--c-gray-500);
  font-weight: 500;
}
.trust-strip__text strong {
  color: var(--c-ink);
  display: block;
}

/* ---- Trust scores: minimal centered review-score columns ----
   Big rating, star row, review count, platform name; hairline dividers
   between columns. Sits right after the customer stories, introduced by a
   one-line transition lede. */
.trust-scores__lede {
  text-align: center;
  margin-top: var(--sp-16);
  font-size: var(--sz-base);
  color: var(--c-gray-700);
}
.trust-scores {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--sp-8) 0 var(--sp-4);
}
.trust-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-12);
  text-decoration: none;
}
.trust-score + .trust-score {
  border-left: 1px solid var(--c-gray-200);
}
.trust-score__num {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  line-height: 1;
}
.trust-score__stars {
  position: relative;
  display: inline-block;
  color: var(--c-gray-300);
  font-size: 1rem;
  letter-spacing: 3px;
  line-height: 1;
}
.trust-score__stars-fill {
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-ink);
}
.trust-score__count {
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
}
.trust-score__platform {
  /* auto top margin pins platform names to a shared baseline even when a
     column has no review-count line (Software Advice) */
  margin-top: auto;
  padding-top: var(--sp-1);
  font-size: var(--sz-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-gray-700);
}
a.trust-score:hover .trust-score__platform { color: var(--c-ink); }
@media (max-width: 640px) {
  .trust-scores {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
  }
  .trust-score { padding: 0; }
  .trust-score + .trust-score {
    border-left: 0;
    border-top: 1px solid var(--c-gray-200);
    padding-top: var(--sp-6);
  }
}

/* ---- Final CTA Section ---- */
.cta-section {
  background: var(--c-ink);
  position: relative;
  overflow: hidden;
  padding: var(--sp-24) 0;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section__inner {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}
.cta-section h2 { color: var(--c-white); }
.cta-section p { color: rgba(255,255,255,0.65); font-size: 1.125rem; }
.cta-section__btns {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Footer ---- */
.footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.65);
  padding: var(--sp-20) 0 var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: var(--sp-8);
}
.footer__brand p {
  font-size: var(--sz-sm);
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  margin: var(--sp-4) 0 var(--sp-6);
}
.footer__logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-white);
  text-decoration: none;
}
.footer__logo-text span { color: var(--c-blue); }

.footer__col h5 {
  font-size: var(--sz-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--sp-5);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer__link {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--dur-fast);
  line-height: 1.4;
}
.footer__link:hover { color: var(--c-white); }
/* On touch widths, space the footer links out to finger-sized rows. */
@media (max-width: 1023px) {
  .footer__links { gap: var(--sp-2); }
  .footer__link { display: inline-block; padding: var(--sp-2) 0; }
}

.footer__social {
  display: flex;
  gap: var(--sp-3);
}
.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.footer__social-link:hover {
  background: var(--c-blue);
  color: var(--c-white);
}
.footer__social-link svg { width: 16px; height: 16px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer__bottom p {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.3);
}
.footer__legal-links {
  display: flex;
  gap: var(--sp-6);
}
.footer__legal-links a {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.footer__legal-links a:hover { color: rgba(255,255,255,0.7); }

/* Footer trust badges */
.footer__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.footer__trust img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.35;
  transition: opacity var(--dur-fast);
}
.footer__trust img:hover { opacity: 0.7; }

/* Footer logo (image variant) */
.footer__logo {
  display: inline-block;
  text-decoration: none;
}
.footer__logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* Branded integration chips (real brand colors, single-letter mark) */
.brand-chip {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--c-white);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.06);
}
.brand-chip--adyen   { background: linear-gradient(135deg, #0ABF53 0%, #06873B 100%); }
.brand-chip--stripe  { background: linear-gradient(135deg, #635BFF 0%, #5046E5 100%); }
.brand-chip--zapier  { background: linear-gradient(135deg, #FF4F00 0%, #D33A00 100%); }
.brand-chip--google  { background: linear-gradient(135deg, #4285F4 0%, #34A853 100%); }
.brand-chip--meta    { background: linear-gradient(135deg, #1877F2 0%, #0866FF 100%); }
.brand-chip--gantner { background: linear-gradient(135deg, #2D2D2D 0%, #4B5258 100%); }

/* Footer rating chips — clean readable on dark, no broken image silhouettes */
.footer__trust {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.01em;
}
.footer__rating svg {
  width: 14px;
  height: 14px;
  color: #F5B544;
  flex-shrink: 0;
}
.footer__rating strong {
  color: var(--c-white);
  font-weight: 700;
  margin-right: 2px;
}

/* ---- Customer Story Cards ---- */
.story-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.story-card__image {
  height: 200px;
  overflow: hidden;
  background: var(--c-gray-100);
}
.story-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow);
}
.story-card:hover .story-card__image img { transform: scale(1.04); }
.story-card__body {
  padding: var(--sp-8);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.story-card__logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  object-position: left;
}
.story-card__customer {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.story-card__customer::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
  display: inline-block;
}
.story-card__metric {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--c-blue);
  line-height: 1;
}
.story-card__metric-label {
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
  font-weight: 500;
  margin-top: var(--sp-1);
}
.story-card__quote {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  font-style: italic;
  line-height: 1.6;
  flex: 1;
}
.story-card__author {
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
  font-weight: 600;
}
.story-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-blue);
  margin-top: auto;
  /* Finger-sized hit area without shifting the card layout. */
  padding: var(--sp-2) 0;
  margin-bottom: calc(-1 * var(--sp-2));
}

/* ---- Comparison Table ---- */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.comparison-table th {
  background: var(--c-gray-100);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--sz-sm);
  font-weight: 700;
  color: var(--c-ink);
  text-align: left;
  border-bottom: 2px solid var(--c-gray-200);
}
.comparison-table th:first-child { border-radius: var(--r-md) 0 0 0; }
.comparison-table th:last-child { border-radius: 0 var(--r-md) 0 0; }
.comparison-table th.fliip-col {
  background: linear-gradient(135deg, rgba(11,131,250,0.08), rgba(31,190,252,0.05));
  color: var(--c-blue-deep);
  border-bottom-color: var(--c-blue);
}
.comparison-table td {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  border-bottom: 1px solid var(--c-gray-200);
  vertical-align: middle;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:nth-child(even) td { background: var(--c-gray-100); }
.comparison-table td.fliip-col {
  background: rgba(11,131,250,0.03) !important;
  font-weight: 500;
  color: var(--c-ink);
}
.comparison-table td:first-child {
  font-weight: 500;
  color: var(--c-ink);
}
.check-icon { color: var(--c-success); width: 18px; height: 18px; }
.x-icon { color: var(--c-gray-300); width: 18px; height: 18px; }
.limited-pill {
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  background: rgba(226,163,59,0.12);
  color: var(--c-warning);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

/* ---- Pricing Cards ---- */
.pricing-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: relative;
  transition: box-shadow var(--dur-base);
}
.pricing-card:hover { box-shadow: var(--shadow-xl); }
.pricing-card--featured {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px var(--c-blue);
}
.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.pricing-card__tier {
  font-size: var(--sz-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.pricing-card__amount {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  line-height: 1;
}
.pricing-card__period {
  font-size: var(--sz-sm);
  color: var(--c-gray-500);
  font-weight: 500;
}
.pricing-card h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-ink);
}
.pricing-card p {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  line-height: 1.6;
}
.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  line-height: 1.5;
}
.pricing-card__feature svg {
  width: 18px;
  height: 18px;
  color: var(--c-success);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- FAQ Accordion ---- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 44rem;
  margin: 0 auto;
}
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
.faq-item.is-open { border-color: var(--c-blue); }
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-6);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--sp-4);
  transition: background var(--dur-fast);
}
.faq-trigger:hover { background: var(--c-gray-100); }
.faq-trigger .chevron {
  width: 20px;
  height: 20px;
  color: var(--c-gray-500);
  flex-shrink: 0;
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.faq-item.is-open .faq-trigger .chevron {
  transform: rotate(180deg);
  color: var(--c-blue);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.faq-answer__inner {
  padding: 0 var(--sp-6) var(--sp-6);
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  line-height: 1.7;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--dur-fast); }
.breadcrumb a:hover { color: rgba(255,255,255,0.9); }
.breadcrumb__sep { opacity: 0.3; }
.breadcrumb__current { color: rgba(255,255,255,0.8); }

/* ---- Segment Cards ---- */
.segment-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-decoration: none;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.segment-card:hover {
  background: rgba(11,131,250,0.12);
  border-color: rgba(11,131,250,0.4);
  transform: translateY(-4px);
}
.segment-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(11,131,250,0.2), rgba(31,190,252,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-blue);
}
.segment-card__icon svg { width: 26px; height: 26px; }
.segment-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-white);
}
.segment-card p {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  flex: 1;
}
.segment-card__link {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-blue);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
}

/* ---- Pill Tags / Filters ---- */
.filter-pills {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-10);
}
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: var(--r-full);
  font-size: var(--sz-sm);
  font-weight: 500;
  border: 1px solid var(--c-gray-200);
  background: var(--c-white);
  color: var(--c-gray-700);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.pill:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
}
.pill.active {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}

/* ---- Tab System ---- */
.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.tabs__nav {
  display: flex;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__tab {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--sz-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tabs__tab:hover { color: rgba(255,255,255,0.8); }
.tabs__tab.active {
  color: var(--c-white);
  border-bottom-color: var(--c-blue);
}

/* Light tabs */
.tabs--light .tabs__nav { border-bottom-color: var(--c-gray-200); }
.tabs--light .tabs__tab { color: var(--c-gray-500); }
.tabs--light .tabs__tab:hover { color: var(--c-ink); }
.tabs--light .tabs__tab.active { color: var(--c-blue); border-bottom-color: var(--c-blue); }

.tabs__panel { display: none; }
.tabs__panel.active { display: block; animation: tabs-panel-fadein 0.35s ease; }
@keyframes tabs-panel-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Auto-rotate progress indicator — uses background-image to stay inside button bounds */
@property --tab-fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.tabs__tab.active.is-timing {
  border-bottom-color: transparent;
  background-image: linear-gradient(
    to right,
    var(--c-blue) var(--tab-fill),
    rgba(67, 97, 238, 0.25) var(--tab-fill)
  );
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  animation: tab-fill-anim var(--tabs-dur, 6000ms) linear forwards;
}
@keyframes tab-fill-anim {
  from { --tab-fill: 0%; }
  to   { --tab-fill: 100%; }
}

/* ---- Integration Tiles ---- */
/* Integration logo row — count-agnostic even grid (home "works with your stack").
   auto-fit keeps the tiles evenly distributed with no orphaned empty cell. */
.integrations-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 900px) {
  .integrations-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .integrations-row { grid-template-columns: repeat(2, 1fr); }
}
.integration-tile {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  cursor: default;
}
.integration-tile:hover {
  border-color: var(--c-sky-soft);
  box-shadow: var(--shadow-md);
}
.integration-tile img {
  height: 40px;
  width: 40px;
  object-fit: contain;
}
.integration-tile h5 {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.integration-tile p {
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
  line-height: 1.5;
}

/* ---- Reveal animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ---- Region / Language selector (enterprise pill, far-right) ---- */
.nav__region-wrap {
  position: relative;
  display: inline-flex;
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-gray-200);
  order: 99; /* push to end of nav__utility flex container */
}
.nav__region {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 7px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-gray-700);
  cursor: pointer;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
  white-space: nowrap;
}
.nav__region:hover {
  background: var(--c-gray-100);
  color: var(--c-ink);
}
.nav__region[aria-expanded="true"] {
  background: var(--c-gray-100);
  border-color: var(--c-gray-200);
  color: var(--c-ink);
}
.nav__region-globe {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--c-gray-500);
  transition: color var(--dur-base);
}
.nav__region:hover .nav__region-globe,
.nav__region[aria-expanded="true"] .nav__region-globe {
  color: var(--c-blue);
}
.nav__region-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform var(--dur-base);
}
.nav__region[aria-expanded="true"] .nav__region-chevron {
  transform: rotate(180deg);
}
.nav__region-label {
  font-variant-numeric: tabular-nums;
}
/* On dark headers */
.site-header--on-dark .nav__region-wrap {
  border-left-color: rgba(255,255,255,0.12);
}
.site-header--on-dark .nav__region {
  color: rgba(255,255,255,0.7);
}
.site-header--on-dark .nav__region-globe {
  color: rgba(255,255,255,0.5);
}
.site-header--on-dark .nav__region:hover,
.site-header--on-dark .nav__region[aria-expanded="true"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: var(--c-white);
}
.site-header--on-dark .nav__region:hover .nav__region-globe,
.site-header--on-dark .nav__region[aria-expanded="true"] .nav__region-globe {
  color: var(--c-sky);
}
.region-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 320px;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(22,23,25,0.18), 0 4px 12px rgba(22,23,25,0.06);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base), visibility var(--dur-base), transform var(--dur-base);
  z-index: var(--z-popover);
}
.region-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.region-menu__group + .region-menu__group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-gray-200);
}
.region-menu__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gray-500);
  padding: 4px 8px 6px;
}
.region-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--dur-base);
  cursor: pointer;
}
.region-menu__item:hover {
  background: var(--c-gray-100);
}
.region-menu__item[aria-current="true"] {
  background: rgba(11,131,250,0.08);
  color: var(--c-blue);
}
.region-menu__item[aria-current="true"]::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
  margin-left: auto;
}
.region-menu__code {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  color: var(--c-gray-700);
  background: var(--c-gray-100);
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
}
.region-menu__sub {
  font-size: 12px;
  color: var(--c-gray-500);
  font-weight: 400;
  margin-left: 4px;
}

/* ---- Sticky mobile CTA ---- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(22,23,25,0.98);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--sp-4) var(--sp-5);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.sticky-cta.is-visible {
  transform: translateY(0);
}
.sticky-cta__text {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-white);
}
.sticky-cta__text span { color: rgba(255,255,255,0.5); font-weight: 400; display: block; font-size: var(--sz-xs); }
.sticky-cta__dismiss {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  border-radius: var(--r-sm);
}

/* ---- Problem/Solution Contrast Block ---- */
.contrast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.contrast-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contrast-item__before {
  background: var(--c-gray-100);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.contrast-item__after {
  background: rgba(11,131,250,0.06);
  border: 1px solid rgba(11,131,250,0.15);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.contrast-item__label {
  font-size: var(--sz-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray-500);
  margin-bottom: var(--sp-3);
}
.contrast-item__after .contrast-item__label { color: var(--c-blue); }
.contrast-item__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-3);
  color: var(--c-gray-400);
}
.contrast-item__after .contrast-item__icon { color: var(--c-blue); }
.contrast-item h4 {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.contrast-item p {
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
  line-height: 1.55;
}

/* Responsive */
/* Nav collapse — the megamenu panels need ~920px+, so the drawer takes over
   below 1024px. The Book-a-demo CTA stays in the bar: the primary action is
   never hidden behind the hamburger. */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  /* (.nav__region-wrap is hidden from SiteHeader.astro's style block — it
     must out-cascade the base rule that lives there.) */
  .nav__hamburger { display: flex; margin-left: 0; }
  .nav__utility { margin-left: auto; }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .contrast-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .footer__brand { grid-column: 1 / -1; }
  .trust-strip { gap: var(--sp-5); }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .sticky-cta { display: flex; }
}

/* ============================================================
   2026 Redesign — New Component Vocabulary
   "Operating system for the gym floor" — Bloomberg meets Stripe.
   Editorial scale, monochrome restraint, blue as accent only.
   ============================================================ */

/* ---- Tabular numbers (use on stats / pricing / metrics) ---- */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- Section number marker ("01 / 06") ---- */
.section-num {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gray-500);
  font-variant-numeric: tabular-nums;
}
.section-num__digits {
  color: var(--c-blue);
}
.section-num__rule {
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.section-num--light { color: rgba(255,255,255,0.5); }
.section-num--light .section-num__digits { color: var(--c-sky); }

/* ---- Live indicator dot ---- */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1FBEFC;
  position: relative;
  flex-shrink: 0;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #1FBEFC;
  opacity: 0.35;
  animation: live-pulse 1.8s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(0.8); opacity: 0.35; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Editorial display heading (hero alt) ---- */
.headline-massive {
  font-size: clamp(3rem, 8.5vw, var(--sz-display));
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--c-white);
}
.headline-massive--light { color: var(--c-ink); }
.headline-massive em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-sky);
  letter-spacing: -0.04em;
}
.headline-massive .accent {
  position: relative;
  color: var(--c-sky);
}
.headline-massive--light em { color: var(--c-blue); }
.headline-massive--light .accent {
  color: var(--c-blue);
}

/* ---- Proof ticker (standardized stat strip — matches the hero meta bar) ----
   Single-line, monospace, bold value + muted label. Mirrors `.page-hero__meta`
   so a standalone proof section (e.g. on /solutions pages) reads identically to
   the ticker baked into PageHero. Fold attribution into the label with " · ". */
.proof-ticker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.proof-ticker span strong { color: var(--c-white); font-weight: 600; }

/* ---- Proof Block (large stat + attribution, editorial) ---- */
.proof-block {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.proof-block__num {
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.proof-block__num small {
  font-size: 0.4em;
  color: var(--c-sky);
  font-weight: 600;
}
.proof-block__label {
  font-size: var(--sz-base);
  color: rgba(255,255,255,0.7);
  margin-top: var(--sp-3);
  max-width: 22rem;
}
.proof-block__attr {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.proof-block__attr::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--c-sky);
}
.proof-block--light .proof-block__num { color: var(--c-ink); }
.proof-block--light .proof-block__num small { color: var(--c-blue); }
.proof-block--light .proof-block__label { color: var(--c-gray-700); }
.proof-block--light .proof-block__attr { color: var(--c-gray-500); }

/* ---- Module Card (rich, for platform pages) ---- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-gray-200);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.module-grid--dark {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.08);
}
.module-card-rich {
  background: var(--c-white);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-decoration: none;
  color: var(--c-ink);
  transition: background var(--dur-base);
  position: relative;
  min-height: 280px;
}
.module-card-rich:hover {
  background: var(--c-gray-100);
}
.module-card-rich__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-gray-500);
  font-variant-numeric: tabular-nums;
}
.module-card-rich__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-blue);
}
.module-card-rich:hover .module-card-rich__icon {
  background: var(--c-blue);
  color: var(--c-white);
}
.module-card-rich__icon svg { width: 18px; height: 18px; }
.module-card-rich h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.module-card-rich p {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  line-height: 1.55;
  flex: 1;
}
.module-card-rich__cta {
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--dur-fast);
  margin-top: auto;
}
.module-card-rich:hover .module-card-rich__cta { gap: var(--sp-3); }

.module-grid--dark .module-card-rich {
  background: var(--c-ink);
  color: var(--c-white);
}
.module-grid--dark .module-card-rich:hover {
  background: var(--c-ink-soft);
}
.module-grid--dark .module-card-rich h3 { color: var(--c-white); }
.module-grid--dark .module-card-rich p { color: rgba(255,255,255,0.6); }
.module-grid--dark .module-card-rich__num { color: rgba(255,255,255,0.4); }
.module-grid--dark .module-card-rich__icon {
  background: rgba(255,255,255,0.08);
  color: var(--c-sky);
}

@media (max-width: 1024px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .module-grid { grid-template-columns: 1fr; }
}

/* ---- Editorial split (text + visual, asymmetric) ---- */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-16);
  align-items: center;
}
.editorial--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.editorial--reverse .editorial__text { order: 2; }
.editorial__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.editorial__text h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -0.025em;
  font-weight: 700;
}
.editorial__text p { font-size: 1.0625rem; line-height: 1.6; }
.editorial__visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--c-ink);
  box-shadow: 0 30px 80px -20px rgba(11,131,250,0.25), 0 0 0 1px rgba(255,255,255,0.06);
}
.editorial__visual img,
.editorial__visual video {
  display: block;
  width: 100%;
  height: auto;
}
.editorial__visual--frame {
  background: linear-gradient(135deg, var(--c-ink) 0%, #0e1a2e 100%);
  padding: var(--sp-3);
}
@media (max-width: 1024px) {
  .editorial,
  .editorial--reverse { grid-template-columns: 1fr; gap: var(--sp-10); }
  .editorial--reverse .editorial__text { order: 0; }
}

/* ---- Pricing card (replaces inline-styled pricing) ---- */
/* No "most popular" card: the three plans read as a ramp (01 → 02 → 03).
   Each card carries a step header (section-num digits + a 3-segment level
   meter) and shares row tracks via subgrid so prices and CTAs always align. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}
.pricing-tier {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.pricing-tier:hover {
  border-color: var(--c-gray-300);
  transform: translateY(-2px);
}
/* Material ramp: the card surfaces ascend with the tiers. Step 1 is an
   outline on the soft section background, step 2 a solid white card, step 3
   ink — the same dark language as the Enterprise card below it, so the top
   tiers read as a family. No tier is badged as "recommended"; the weight
   simply grows with the plan. */
.pricing-tier--step1 {
  /* A real but lighter surface: milky white over the soft section bg sits
     visibly below step 2's solid white without reading as empty. */
  background: rgba(255,255,255,0.6);
  border-color: var(--c-gray-300);
}
.pricing-tier--step1:hover { border-color: var(--c-gray-500); }
.pricing-tier--step2 {
  box-shadow: var(--shadow-md);
}
.pricing-tier--step3 {
  /* Softer charcoal (not full ink) — still the dark-tier family with the
     Enterprise card below, a notch less heavy. */
  background: var(--c-ink-soft);
  border-color: var(--c-blue);
  color: var(--c-white);
  box-shadow: 0 30px 60px -20px rgba(11,131,250,0.35);
}
.pricing-tier--step3:hover {
  border-color: var(--c-blue);
  transform: translateY(-4px);
}
/* On-ink recolors for the step-3 card */
.pricing-tier--step3 .pricing-tier__audience { color: rgba(255,255,255,0.55); }
.pricing-tier--step3 .pricing-tier__name { color: var(--c-white); }
.pricing-tier--step3 .pricing-tier__desc { color: rgba(255,255,255,0.65); }
.pricing-tier--step3 .pricing-tier__price-row { border-top-color: rgba(255,255,255,0.12); }
.pricing-tier--step3 .pricing-tier__price { color: var(--c-white); }
.pricing-tier--step3 .pricing-tier__suffix,
.pricing-tier--step3 .pricing-tier__footnote-line { color: rgba(255,255,255,0.5); }
.pricing-tier--step3 .pricing-tier__features { color: rgba(255,255,255,0.85); }
.pricing-tier--step3 .pricing-tier__feat::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FBEFC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.pricing-tier--step3 .pricing-tier__feat--inherit { color: rgba(255,255,255,0.6); }
.pricing-tier--step3 .pricing-tier__feat--inherit::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FBEFC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.pricing-tier--step3 .pricing-tier__level i { background: rgba(255,255,255,0.18); }
.pricing-tier--step3 .pricing-tier__level i.is-on { background: var(--c-sky); }
/* Desktop: the cards subgrid onto shared row tracks, so audience, name,
   description, price, footnote, features, and CTA each sit on the same line
   across all three cards no matter how long any card's copy runs. Browsers
   without subgrid keep the independent flex columns above. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1025px) {
    .pricing-grid { row-gap: 0; }
    .pricing-grid .pricing-tier {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 8;
      row-gap: 0;
    }
  }
}
/* Step header: ordinal digits (01/02/03) left, level meter right. */
.pricing-tier__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.pricing-tier__level {
  display: inline-flex;
  gap: 4px;
}
.pricing-tier__level i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-gray-200);
}
.pricing-tier__level i.is-on { background: var(--c-blue); }
.pricing-tier__audience {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-gray-500);
}
.pricing-tier__name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin-top: var(--sp-2);
}
/* Legacy: kept for backwards compatibility */
.pricing-tier__desc {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  line-height: 1.5;
  margin-top: var(--sp-2);
}
.pricing-tier__price-row {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-gray-200);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.pricing-tier__footnote-line {
  margin-top: var(--sp-2);
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.pricing-tier__price {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.pricing-tier__suffix {
  font-size: var(--sz-sm);
  font-weight: 500;
  color: var(--c-gray-500);
}
.pricing-tier__footnote {
  width: 100%;
  font-size: var(--sz-xs);
  color: var(--c-gray-500);
  margin-top: 4px;
}
.pricing-tier__features {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  flex: 1;
}
.pricing-tier__feat {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: 1.5;
}
.pricing-tier__feat::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B83FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
/* "Everything in <previous tier>, plus" connector: a plus glyph instead of a
   checkmark, muted, so the inheritance chain reads as part of the ramp rather
   than as a feature. */
.pricing-tier__feat--inherit {
  color: var(--c-gray-500);
  font-weight: 600;
}
.pricing-tier__feat--inherit::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B83FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.pricing-tier .btn { justify-content: center; width: 100%; }

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 32rem; margin: 0 auto; }
}

/* ---- Compare table (pricing detail) ---- */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--sz-sm);
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.compare th,
.compare td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--c-gray-200);
  vertical-align: middle;
}
.compare thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray-500);
  background: var(--c-gray-100);
  border-bottom: 1px solid var(--c-gray-200);
  white-space: nowrap;
}
.compare thead th.compare__featured {
  color: var(--c-blue);
  background: rgba(11,131,250,0.05);
  position: relative;
}
.compare thead th.compare__featured::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-blue);
}
.compare tbody td.compare__featured { background: rgba(11,131,250,0.025); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare__group td {
  background: var(--c-gray-100);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray-700);
  padding: var(--sp-3) var(--sp-5);
}
.compare td:first-child { font-weight: 500; color: var(--c-ink); }
.compare td.compare__cell-center { text-align: center; }
.compare__check {
  width: 18px;
  height: 18px;
  color: var(--c-blue);
  display: inline-block;
  vertical-align: middle;
}
.compare__dash {
  width: 12px;
  height: 1px;
  background: var(--c-gray-300);
  display: inline-block;
  vertical-align: middle;
}

/* ---- Spotlight (full-bleed quote with cinema feel) ---- */
.spotlight {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  padding: var(--sp-24) 0;
}
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}
.spotlight__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  align-items: center;
}
.spotlight__quote {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--c-white);
}
.spotlight__quote::before { content: '\201C'; color: var(--c-sky); margin-right: 4px; }
.spotlight__quote::after { content: '\201D'; color: var(--c-sky); margin-left: 4px; }
.spotlight__attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.02em;
}
.spotlight__attr strong { color: var(--c-white); font-weight: 600; }

/* ---- Manifesto (the big closing CTA) ---- */
.manifesto {
  position: relative;
  background: var(--c-ink);
  padding: var(--sp-32) 0;
  overflow: hidden;
}
.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-ink-soft) 0%, var(--c-ink) 100%);
  opacity: 0.5;
}
.manifesto::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.manifesto__inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
.manifesto__heading {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--c-white);
  margin-bottom: var(--sp-5);
}
.manifesto__heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-sky);
}
.manifesto__lede {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.7);
  max-width: 36rem;
  margin: 0 auto var(--sp-10);
  line-height: 1.55;
}
.manifesto__ctas {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}
.manifesto__caption {
  margin-top: var(--sp-6);
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}

/* ---- Page hero (interior pages: pricing, platform, solutions) ---- */
.page-hero {
  position: relative;
  background: var(--c-ink);
  padding: calc(var(--sp-24) + 4rem) 0 var(--sp-20);
  margin-top: -4rem;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-ink-soft) 0%, var(--c-ink) 100%);
  opacity: 0.6;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 80%);
}
.page-hero__inner {
  position: relative;
  z-index: 1;
}
.page-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-16);
  align-items: end;
}
.page-hero__layout--center {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}
.page-hero__layout--center .page-hero__num,
.page-hero__layout--center .page-hero__lede,
.page-hero__layout--center .page-hero__ctas {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.page-hero__num {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--c-white);
}
.page-hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-sky);
}
.page-hero__lede {
  margin-top: var(--sp-6);
  font-size: 1.125rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  max-width: 36rem;
}
.page-hero__ctas {
  margin-top: var(--sp-8);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.page-hero__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  flex-wrap: wrap;
}
.page-hero__meta span strong { color: var(--c-white); font-weight: 600; }
/* When the hero layout is centered, center the meta strip too so it matches
   the visual alignment of the headline + CTAs above it. */
.page-hero__inner:has(.page-hero__layout--center) .page-hero__meta {
  justify-content: center;
  text-align: center;
}
@media (max-width: 1024px) {
  .page-hero__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
}
/* Compact variant — shorter vertical rhythm for pages whose hero is text-only
   and sits directly above dense content (e.g. pricing, where tier cards follow
   immediately). Trims top/bottom padding and the meta strip gap. */
.page-hero--compact { padding: calc(var(--sp-20) + 4rem) 0 var(--sp-12); }
.page-hero--compact .page-hero__meta { margin-top: var(--sp-8); }
/* On phones the desktop-scale hero padding reads as a screenful of empty
   ink before any content; tighten it so the headline lands on arrival. */
@media (max-width: 768px) {
  .page-hero { padding: calc(var(--sp-16) + 4rem) 0 var(--sp-12); }
  .page-hero--compact { padding: calc(var(--sp-10) + 4rem) 0 var(--sp-10); }
  .page-hero__meta { gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); }
  .page-hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Capability list (used in module pages) ---- */
.cap-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cap-list li {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
}
.cap-list li:hover { border-color: var(--c-blue); }
.cap-list__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: rgba(11,131,250,0.08);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cap-list__icon svg { width: 18px; height: 18px; }
.cap-list strong {
  color: var(--c-ink);
  font-size: var(--sz-base);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.cap-list p { font-size: var(--sz-sm); color: var(--c-gray-700); line-height: 1.5; }
.cap-list--dark li {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.cap-list--dark li:hover { border-color: rgba(11,131,250,0.4); }
.cap-list--dark .cap-list__icon { background: rgba(31,190,252,0.12); color: var(--c-sky); }
.cap-list--dark strong { color: var(--c-white); }
.cap-list--dark p { color: rgba(255,255,255,0.6); }
/* Grid variant — 3-up capability cards (pricing "what's included") that
   collapse to 2 then 1 column so the list never forces the page wider than
   the viewport on phones. */
.cap-list--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 1024px) { .cap-list--grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cap-list--grid { grid-template-columns: 1fr; } }

/* ---- Status chip (Available, New, Future) ---- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-chip--available {
  background: rgba(27,170,108,0.12);
  color: #0E6B41;
}
.status-chip--available::before { background: #1BAA6C; }
.status-chip--new {
  background: rgba(11,131,250,0.12);
  color: var(--c-blue-dark);
}
.status-chip--new::before { background: var(--c-blue); }
.status-chip--soon {
  background: rgba(226,163,59,0.12);
  color: #9A6B0F;
}
.status-chip--soon::before { background: #E2A33B; }
.status-chip--dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* ---- Two-line meta divider (under hero) ---- */
.hr-fade {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  margin: var(--sp-16) 0;
}
.hr-fade--light {
  background: linear-gradient(90deg, transparent, var(--c-gray-200), transparent);
}

/* ---- Showcase frame (product screenshot wrapper) ---- */
.showcase-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-gray-100);
  padding: var(--sp-3);
  box-shadow:
    0 0 0 1px var(--c-gray-200),
    0 2px 4px -1px rgba(22,23,25,0.06),
    0 24px 50px -20px rgba(22,23,25,0.22);
}
.showcase-frame__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 12px;
}
.showcase-frame__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-gray-300);
}
.showcase-frame__inner {
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-gray-200);
}
.showcase-frame__inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Side label (vertical text, editorial) ---- */
.side-label {
  position: absolute;
  left: var(--sp-6);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 1280px) { .side-label { display: none; } }

/* ============================================================
   Customer Story Long-Form Layout
   ============================================================ */

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-16);
  align-items: start;
}
@media (max-width: 1024px) {
  .story-layout { grid-template-columns: 1fr; gap: var(--sp-10); }
}

/* Sidebar with at-a-glance facts */
.story-aside {
  position: sticky;
  top: calc(4rem + var(--sp-6));
}
.story-aside__card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-6) var(--sp-7);
}
.story-aside__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gray-500);
  margin-bottom: var(--sp-5);
}
.story-aside__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.story-aside__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-gray-200);
}
.story-aside__list li:last-child { border-bottom: 0; }
.story-aside__list dt,
.story-aside__list .key {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gray-500);
}
.story-aside__list dd,
.story-aside__list .val {
  font-size: var(--sz-sm);
  color: var(--c-ink);
  font-weight: 500;
  margin: 0;
}
.story-aside__cta {
  display: block;
  margin-top: var(--sp-4);
  text-align: center;
}

/* Long-form body */
.story-body {
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-gray-700);
}
.story-body > * + * {
  margin-top: var(--sp-5);
}
.story-body h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--c-ink);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-gray-200);
}
.story-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.story-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}
.story-body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-gray-700);
}
.story-body p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--c-ink);
  font-weight: 400;
}
.story-body ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.story-body ul li {
  display: flex;
  gap: var(--sp-3);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-gray-700);
}
.story-body ul li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B83FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.story-body blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-8);
  background: var(--c-gray-100);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--c-ink);
  font-style: normal;
}
.story-body blockquote::before {
  content: '\201C';
  color: var(--c-blue);
  margin-right: 4px;
}
.story-body blockquote::after {
  content: '\201D';
  color: var(--c-blue);
  margin-left: 4px;
}
.story-body blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--sz-sm);
  font-weight: 600;
  color: var(--c-gray-700);
  font-style: normal;
}
.story-body blockquote cite::before { content: '\2014  '; color: var(--c-gray-500); }
.story-body img,
.story-body .showcase-frame {
  margin: var(--sp-8) 0;
}

/* Customer story metric strip — replaces the legacy blue band */
.story-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin-top: var(--sp-12);
}
.story-metrics__cell {
  background: var(--c-ink);
  padding: var(--sp-6) var(--sp-6);
  text-align: center;
  position: relative;
}
.story-metrics__cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--c-blue);
}
.story-metrics__num {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
}
.story-metrics__label {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.6);
  margin-top: var(--sp-3);
  display: block;
}
@media (max-width: 768px) {
  .story-metrics { grid-template-columns: 1fr; }
}

/* "More stories" mini cards */
.more-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1024px) { .more-stories { grid-template-columns: 1fr; } }
.more-story {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.more-story:hover {
  transform: translateY(-4px);
  border-color: var(--c-gray-300);
  box-shadow: var(--shadow-lg);
}
.more-story__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.more-story__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.more-story__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.more-story__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.more-story__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.more-story__metric {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ============================================================================
   Platform-page primitives — shared section vocabulary
   ============================================================================
   These classes were extracted from the consolidated /platform page so other
   pages can reuse the same section grammar (centered editorial header,
   h2-scale title with em accent, monospace metric chip, subtle grid pattern
   background). Documented in docs/DESIGN_SYSTEM.md.

   Conventions:
   - Use `.eyebrow` for the small label above titles (already in base.css)
   - Use `.section-header` (layout.css) for the centered eyebrow + h2 + lede block
   - Use `.section-num` for numbered eyebrows ("01 / 03 ─── MEMBER MANAGEMENT")
   - Use `.lead` for the lede paragraph (already in base.css)
   - Use the classes below for the rest
*/

/* ---- Section title (h2-scale headline with em accent) ----
   Like .headline-massive but sized for section h2 (not hero h1). Use the
   `--center` modifier when there is no paired right-side element. Use
   `--dark` on dark-bg sections to swap the em accent to sky blue. */
.section-title {
  font-size: clamp(2rem, 3.4vw + 1rem, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0;
}
.section-title em {
  font-style: normal;
  color: var(--c-blue);
}
.section-title--center {
  text-align: center;
}
.section-title--dark {
  color: var(--c-white);
}
.section-title--dark em {
  color: var(--c-sky);
}

/* ---- Grid pattern background ----
   Subtle 64×64 grid overlay used on light editorial sections. Apply as a
   positioned ::before on a `position: relative` section. Or use the helper
   element pattern: <div class="grid-pattern-bg" aria-hidden="true"></div>
   inside a positioned section. Top-masked so the pattern fades out below. */
.grid-pattern-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(11, 131, 250, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 131, 250, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.0) 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.0) 80%);
}
.grid-pattern-bg--centered {
  /* center-masked variant for sections that should show the pattern
     concentrated in the middle (used on PlatformOverview) */
  background-size: 80px 80px;
  background-image:
    linear-gradient(to right, rgba(22, 23, 25, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 23, 25, 0.05) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
}

/* ============================================================
   Guides (gated ebooks) — index cards, gate page, thank-you page
   ============================================================ */

/* --- Index / explore card grid --- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 960px) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .guide-grid { grid-template-columns: 1fr; }
}

.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-gray-300);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
}
.guide-card__cover {
  aspect-ratio: 77 / 100; /* the ebook covers are letter-portrait (816x1056) */
  background: var(--c-gray-100);
  border-bottom: 1px solid var(--c-gray-200);
}
.guide-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guide-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1;
}
.guide-card__meta {
  font-family: var(--font-mono);
  font-size: var(--sz-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-gray-500);
}
.guide-card__title {
  font-size: var(--sz-h4);
  line-height: 1.3;
  margin: 0;
}
.guide-card__excerpt {
  color: var(--c-gray-700);
  font-size: var(--sz-sm);
  margin: 0;
}
.guide-card__cta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-weight: 600;
  font-size: var(--sz-sm);
  color: var(--c-blue);
}

/* --- Gate page (dark hero + form card) --- */
.guide-gate {
  background: var(--c-ink);
  margin-top: -4rem;
  padding: calc(var(--sp-12) + 4rem) 0 var(--sp-16);
}
.guide-gate__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 960px) {
  .guide-gate__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.guide-gate__back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--sz-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin-bottom: var(--sp-6);
}
.guide-gate__back:hover { color: var(--c-white); }
.guide-gate__title {
  color: var(--c-white);
  margin: var(--sp-4) 0;
}
.guide-gate__lede {
  color: rgba(255, 255, 255, 0.65);
}
.guide-gate__meta {
  font-family: var(--font-mono);
  font-size: var(--sz-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-sky);
}
.guide-gate__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.guide-gate__list-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--sz-sm);
  line-height: 1.5;
}
.guide-gate__check {
  flex: none;
  color: var(--c-sky);
  margin-top: 2px;
}
.guide-gate__cover {
  display: block;
  width: min(15rem, 70%);
  margin-top: var(--sp-8);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 960px) {
  .guide-gate__cover { display: none; } /* form card comes right after the bullets on mobile */
}

/* The white form card. Mirrors .demo-form-card; HubSpot field styling is
   scoped under .guide-form-card in GuideGateForm.astro. */
.guide-form-card {
  background: var(--c-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.guide-form-card__heading {
  font-size: 1.5rem;
  margin-bottom: var(--sp-2);
  color: var(--c-ink);
}
.guide-form-card__intro {
  color: var(--c-gray-700);
  font-size: var(--sz-sm);
  margin-bottom: var(--sp-5);
}
.guide-form-card__fallback {
  font-size: var(--sz-sm);
  color: var(--c-gray-700);
  margin: var(--sp-4) 0 0;
}
.guide-form-card__fallback a {
  color: var(--c-blue);
  text-decoration: underline;
}

/* --- Thank-you page --- */
.guide-thanks {
  background: var(--c-ink);
  margin-top: -4rem;
  padding: calc(var(--sp-16) + 4rem) 0;
}
.guide-thanks__inner {
  max-width: 44rem;
}
.guide-thanks__title {
  color: var(--c-white);
  margin: var(--sp-4) 0;
}
.guide-thanks__body {
  color: rgba(255, 255, 255, 0.65);
}
.guide-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.guide-thanks__note {
  margin-top: var(--sp-4);
  font-size: var(--sz-sm);
  color: rgba(255, 255, 255, 0.55);
}

.guide-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}