/* ===================================================================
   site.css — the shared component library for EVERY page.

   Loaded after styles.css on the homepage and on every generated page.
   It defines no new brand colours or fonts: everything resolves to the
   tokens in styles.css :root (Instrument Sans, --primary/--secondary,
   the slate grays, --surface-tint) plus the navy already used by the
   midnight hero and the closing CTA.

   Contents
     1. Local aliases
     2. Header bar
     3. Mega-menu sheet (desktop)
     4. Mobile sheet
     5. Footer (giant wordmark)
     6. Page scaffold: containers, sections, heads, breadcrumbs
     7. Page hero
     8. Blocks: problem, pillars, capability rows, compare table,
        connected modules, testimonial, FAQ, logo strip, trust strip
     9. Product mocks (.mk-*)
    10. Reveal-on-scroll
   =================================================================== */

/* -------------------------------------------------------------------
   1. Local aliases (all derived from existing tokens / palette)
   ------------------------------------------------------------------- */
:root {
  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-500);
  --line: #e8edf2;
  --line-strong: #dbe3ea;
  --navy-950: #020817;
  --navy-900: #04122a;
  --navy-800: #061a38;
  --ok: #047857;
  --ok-bg: #ecfdf5;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --bad: #b91c1c;
  --bad-bg: #fef2f2;
  --wrap: 1200px;
  --gutter: 2rem;
  /* The logo's own bar geometry (shear 0.625), as a faint tiling texture. */
  --isogrid-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22'%3E%3Cpath d='M9 3h15l-2.5 4h-15z' fill='%230369a1' fill-opacity='.07'/%3E%3Cpath d='M29 14h15l-2.5 4h-15zM-11 14h15l-2.5 4h-15z' fill='%230369a1' fill-opacity='.05'/%3E%3C/svg%3E");
  --isogrid-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22'%3E%3Cpath d='M9 3h15l-2.5 4h-15z' fill='%2338bdf8' fill-opacity='.13'/%3E%3Cpath d='M29 14h15l-2.5 4h-15zM-11 14h15l-2.5 4h-15z' fill='%2338bdf8' fill-opacity='.08'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  :root {
    --gutter: 1rem;
  }
}

html.nav-locked,
html.nav-locked body {
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* In-page anchors on generated pages land clear of the fixed header. */
.sp [id] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* Skew-bar marker — the logo's parallelogram, reused as the label motif in
   the menu, footer and section eyebrows so they read as one family. */
.skew-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.skew-label::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 1px;
  background: var(--secondary);
  transform: skewX(-32deg);
}

/* -------------------------------------------------------------------
   2. Header bar
   ------------------------------------------------------------------- */
.site-header.header {
  display: block;
  height: auto;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-height);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

.site-header__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
}

.site-header__logo .header-logo {
  height: 28px;
  width: auto;
}

.site-nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The pill that glides under whichever top-level item is hovered (or
   open). One element, moved with transform + width, so it reads as a
   single soft highlight sliding along the bar. */
.site-nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 38px;
  margin-top: -19px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.055);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(0.22, 0.8, 0.24, 1),
    width 320ms cubic-bezier(0.22, 0.8, 0.24, 1),
    opacity 160ms ease,
    background 160ms ease;
}

.site-nav__pill.is-on {
  opacity: 1;
}

.site-nav__pill.no-anim {
  transition: opacity 160ms ease;
}

.site-nav__item {
  position: relative;
  z-index: 1;
}

.site-nav__trigger,
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 38px;
  padding: 0 0.9rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms ease;
}

.site-nav__trigger:hover,
.site-nav__link:hover,
.site-nav__trigger.is-current,
.site-nav__link.is-current,
.site-nav__trigger[aria-expanded="true"] {
  color: var(--ink);
}

.site-nav__chev {
  width: 14px;
  height: 14px;
  opacity: 0.55;
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    opacity 160ms ease;
}

.site-nav__trigger[aria-expanded="true"] .site-nav__chev {
  transform: rotate(180deg);
  opacity: 0.9;
}

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header__login {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  padding: 0 0.75rem;
  height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.site-header__login:hover {
  color: var(--primary);
  background: rgba(3, 105, 161, 0.06);
}

.site-header__actions .cta-button--small {
  font-size: var(--fs-sm);
  height: 38px;
  padding: 0 1.1rem;
}

.site-header__burger {
  display: none;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}

.site-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gray-800);
  transition:
    transform var(--transition-base),
    opacity var(--transition-fast);
}

.site-header.is-mobile-open .site-header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-mobile-open .site-header__burger span:nth-child(2) {
  opacity: 0;
}

.site-header.is-mobile-open .site-header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* pages.css (legacy legal/integration pages) gives `.subpage .header` a
   backdrop-filter. Any filter on the header makes it the containing block
   for its position:fixed children, which collapses the mobile sheet to
   zero height — so the shared header never carries one. */
.subpage .site-header.header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.subpage .site-header.header:not(.header--scrolled):not(.header--floating):not(.is-mobile-open) {
  background: transparent;
  border-bottom-color: transparent;
}

/* Solid bar once the page scrolls; white sheet on mobile. The desktop
   menu deliberately does NOT repaint the bar — it floats below it. */
.site-header.header--scrolled,
.site-header.header--floating {
  background: #fff;
  border-bottom-color: var(--gray-200);
}

.site-header.is-mobile-open {
  background: #fff;
  border-bottom-color: var(--gray-100);
  transform: none;
}

/* Over a dark midnight hero (homepage and every subpage hero). */
body:has(#hero.hero--midnight)
  .site-header:not(.header--scrolled):not(.header--floating):not(.is-mobile-open)
  :is(.site-nav__trigger, .site-nav__link, .site-header__login) {
  color: rgba(226, 232, 240, 0.84);
}

body:has(#hero.hero--midnight)
  .site-header:not(.header--scrolled):not(.header--floating):not(.is-mobile-open)
  :is(.site-nav__trigger, .site-nav__link):is(:hover, [aria-expanded="true"]) {
  color: #fff;
}

body:has(#hero.hero--midnight)
  .site-header:not(.header--scrolled):not(.header--floating):not(.is-mobile-open)
  .site-header__login:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

body:has(#hero.hero--midnight)
  .site-header:not(.header--scrolled):not(.header--floating):not(.is-mobile-open)
  .site-nav__pill {
  background: rgba(255, 255, 255, 0.09);
}

body:has(#hero.hero--midnight)
  .site-header:not(.header--scrolled):not(.header--floating):not(.is-mobile-open)
  .site-header__burger
  span {
  background: #e2e8f0;
}

.site-header.is-mobile-open .header-logo--dark {
  display: block !important;
}

.site-header.is-mobile-open .header-logo--light {
  display: none !important;
}

/* -------------------------------------------------------------------
   3. Mega-menu (desktop) — one floating card that morphs between menus
   ------------------------------------------------------------------- */
.mega {
  --mx: 0px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  padding-top: 10px; /* invisible bridge from the bar, so hover never drops */
  transform: translateX(var(--mx));
  visibility: hidden;
  pointer-events: none;
  transition: transform 320ms var(--ease);
  z-index: 1;
}

.mega.is-visible {
  visibility: visible;
}

.mega.is-open {
  pointer-events: auto;
}

.mega__card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 10px 24px -12px rgba(15, 23, 42, 0.16),
    0 32px 64px -24px rgba(2, 8, 23, 0.32);
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 180ms ease,
    transform 260ms var(--ease),
    width 320ms var(--ease),
    height 320ms var(--ease);
}

.mega.is-open .mega__card {
  opacity: 1;
  transform: none;
}

.mega.no-anim,
.mega.no-anim .mega__card {
  transition: none !important;
}

.mega-panel {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 320ms var(--ease);
}

.mega-panel[data-pos="before"] {
  transform: translateX(-36px);
}

.mega-panel[data-pos="after"] {
  transform: translateX(36px);
}

.mega-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 220ms ease 40ms,
    transform 320ms var(--ease);
}

.mega-panel.no-anim {
  transition: none !important;
}

.mega-panel--platform {
  width: min(1120px, calc(100vw - 32px));
}

.mega-panel--solutions {
  width: min(1120px, calc(100vw - 32px));
}

.mega-panel--compare {
  width: min(920px, calc(100vw - 32px));
}

.mega-panel--resources {
  width: min(600px, calc(100vw - 32px));
}

.mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 1.5rem;
  padding: 1.5rem;
}

.mega-groups {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.mega-group {
  padding: 0 0.85rem;
  border-left: 1px solid var(--gray-100);
}

.mega-group:first-child {
  padding-left: 0;
  border-left: none;
}

.mega-group--compact {
  flex: 0 0 auto;
}

.mega-inner--compare .mega-groups {
  grid-auto-flow: row;
  grid-template-columns: minmax(270px, 1fr) max-content;
}

.mega-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.mega-label::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 1px;
  background: var(--secondary);
  transform: skewX(-32deg);
}

.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-item__link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: background 200ms ease;
}

.mega-item__link:hover,
.mega-item__link:focus-visible {
  background: linear-gradient(90deg, rgba(237, 246, 250, 0.95), rgba(237, 246, 250, 0.35));
}

.mega-item__link[aria-current="page"] {
  background: var(--gray-50);
}

.mega-item__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.06);
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 260ms var(--ease, ease),
    box-shadow 220ms ease;
}

.mega-item__icon svg {
  width: 20px;
  height: 20px;
}

.mega-item__link:hover .mega-item__icon,
.mega-item__link:focus-visible .mega-item__icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(3, 105, 161, 0.6);
}

.mega-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  padding-top: 0.1rem;
}

.mega-item__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.mega-item__arrow {
  width: 14px;
  height: 14px;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 200ms ease,
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.mega-item__link:hover .mega-item__arrow,
.mega-item__link:focus-visible .mega-item__arrow {
  opacity: 1;
  transform: none;
}

.mega-item__desc {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--gray-500);
}

.mega-item__badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--surface-tint);
  color: var(--primary);
}

/* Sub-features hang off a guide line; the hovered one lights its segment. */
.mega-item__sub {
  list-style: none;
  margin: -0.2rem 0 0.35rem 2.05rem;
  padding: 0.1rem 0 0.1rem 1.4rem;
  border-left: 1px solid var(--gray-200);
}

.mega-item__sub a {
  position: relative;
  display: block;
  padding: 0.26rem 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 220ms ease;
}

.mega-item__sub a::before {
  content: "";
  position: absolute;
  left: calc(-1.4rem - 1px);
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--secondary);
  transition:
    height 220ms cubic-bezier(0.22, 0.8, 0.24, 1),
    top 220ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.mega-item__sub a:hover,
.mega-item__sub a:focus-visible {
  color: var(--primary-dark);
  transform: translateX(2px);
}

.mega-item__sub a:hover::before,
.mega-item__sub a:focus-visible::before {
  top: calc(50% - 8px);
  height: 16px;
}

/* Compact list (Elevea vs. …): text rows, two columns. */
.mega-group--compact .mega-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 0.5rem;
}

.mega-group--compact .mega-item__title {
  white-space: nowrap;
}

.mega-group--compact .mega-item__link {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
}

.mega-group--compact .mega-item__title {
  font-weight: 500;
  color: var(--gray-700);
}

.mega-group--compact .mega-item__link:hover .mega-item__title {
  color: var(--ink);
}

.mega-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.4rem 0 0 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.mega-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.mega-more:hover svg {
  transform: translateX(3px);
}

.mega-aside {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mega-aside__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.mega-aside__links a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.mega-aside__links a:hover {
  background: var(--gray-50);
  color: var(--primary);
}

.mega-aside__links svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

/* Featured cards: navy + isogrid + a mini product moment. */
.mega-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background:
    var(--isogrid-dark),
    radial-gradient(90% 80% at 100% 0%, rgba(14, 165, 233, 0.3) 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(99, 102, 241, 0.22) 0%, transparent 70%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
  color: #e2e8f0;
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 260ms ease;
}

.mega-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(2, 8, 23, 0.55);
}

.mega-feature__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.mega-feature__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

.mega-feature__title svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform var(--transition-fast);
}

.mega-feature:hover .mega-feature__title svg {
  transform: translateX(3px);
}

.mega-mock {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  line-height: 1.45;
}

.mega-mock__q {
  align-self: flex-end;
  max-width: 92%;
  padding: 0.3rem 0.55rem;
  border-radius: 8px 8px 2px 8px;
  background: rgba(56, 189, 248, 0.18);
  color: #e0f2fe;
}

.mega-mock__a {
  color: #cbd5e1;
}

.mega-mock__a b {
  color: #fff;
  font-weight: 600;
}

.mega-mock__a sup {
  color: #7dd3fc;
  font-weight: 700;
}

.mega-mock__cites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mega-mock__cites span {
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.6875rem;
}

.mega-mock__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #cbd5e1;
}

.mega-mock__row b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.mega-mock__row svg {
  width: 12px;
  height: 12px;
}

.mega-feature--quote {
  background: var(--surface-tint);
  color: var(--ink-2);
}

.mega-feature--quote .mega-feature__eyebrow {
  color: var(--primary);
}

.mega-feature__quote {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.mega-feature__cite {
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

.mega-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary);
}

.mega-feature__cta svg {
  width: 14px;
  height: 14px;
}

/* The page behind an open menu: a soft dim, no colour change. */
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 8, 23, 0.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms ease,
    visibility 0s linear 200ms;
}

.mega-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 200ms ease,
    visibility 0s;
}

/* -------------------------------------------------------------------
   4. Mobile sheet (< 1100px)
   ------------------------------------------------------------------- */
.mnav {
  display: none;
}

@media (max-width: 1099px) {
  .site-nav,
  .site-header__actions,
  .mega,
  .mega-scrim {
    display: none !important;
  }

  .site-header__bar {
    grid-template-columns: 1fr auto;
  }

  .site-header__burger {
    display: flex;
  }

  .mnav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid var(--gray-100);
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 200ms ease-out,
      transform 200ms ease-out;
  }

  .mnav[hidden] {
    display: none;
  }

  .site-header.is-mobile-open .mnav {
    opacity: 1;
    transform: none;
  }
}

.mnav__viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.mnav__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1.25rem 1.5rem;
  animation: mnavIn 220ms ease-out both;
}

.mnav__panel[hidden],
.mnav__panel--root.is-behind {
  display: none;
}

.mnav__panel--root {
  animation-name: mnavBack;
}

@keyframes mnavIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes mnavBack {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

.mnav__rows,
.mnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 0 0.25rem;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  background: none;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mnav__chev {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
}

.mnav__back {
  position: sticky;
  top: -0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: calc(100% + 2.5rem);
  min-height: 52px;
  margin: -0.5rem -1.25rem 0.5rem;
  padding: 0 1rem;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  background: rgba(255, 255, 255, 0.97);
  font-family: var(--font-primary);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
}

.mnav__back svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.mnav__overview {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0.25rem;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  min-height: 44px;
}

.mnav__overview svg {
  width: 16px;
  height: 16px;
}

.mnav__label {
  margin: 1.1rem 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mnav__label::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 1px;
  background: var(--secondary);
  transform: skewX(-32deg);
}

.mnav__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0;
  border: none;
  background: none;
  font-family: var(--font-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mnav__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--primary);
}

.mnav__icon svg {
  width: 21px;
  height: 21px;
}

.mnav__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mnav__title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--ink);
}

.mnav__desc {
  font-size: var(--fs-sm);
  color: var(--gray-500);
  line-height: 1.35;
}

.mnav__item[aria-current="page"] .mnav__title {
  color: var(--primary);
}

.mnav__ctas {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gray-100);
  background: #fff;
}

.mnav__ctas .cta-button {
  min-height: 48px;
  font-size: var(--fs-body);
}

@media (max-width: 768px) {
  .mnav {
    top: var(--header-height);
  }
}

/* -------------------------------------------------------------------
   5. Footer — midnight, lit like the hero, with a giant wordmark
   ------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(14, 165, 233, 0.18) 0%, transparent 70%),
    radial-gradient(55% 60% at 6% 92%, rgba(99, 102, 241, 0.22) 0%, transparent 70%),
    radial-gradient(40% 35% at 50% 100%, rgba(56, 189, 248, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #0b1424 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color: #94a3b8;
}

/* A lit hairline along the top edge, and the engineered grid from the
   hero, faded toward the edges. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.55) 30%, rgba(99, 102, 241, 0.5) 70%, transparent);
  z-index: 1;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(148, 197, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 197, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 80%);
  pointer-events: none;
}

.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 5rem var(--gutter) 0;
  box-sizing: content-box;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
  gap: 4rem;
}

.site-footer__logo img {
  height: 28px;
  width: auto;
  display: block;
}

.site-footer__statement {
  margin: 1.25rem 0 1.5rem;
  max-width: 320px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #cbd5e1;
}

.site-footer__cta {
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.25),
    0 10px 30px -6px rgba(14, 165, 233, 0.55) !important;
}

.site-footer__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.16s ease-out;
}

.site-footer__cta:hover svg {
  transform: translateX(3px);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

.site-footer__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.site-footer__label::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 1px;
  background: linear-gradient(180deg, #38bdf8, #6366f1);
  transform: skewX(-32deg);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__col li a,
.site-footer__col li button {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0;
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: #b6c3d4;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 180ms ease,
    transform 220ms ease;
}

.site-footer__col li a:hover,
.site-footer__col li button:hover {
  color: #fff;
  transform: translateX(3px);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: var(--fs-xs);
  color: #64748b;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.18);
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.site-footer__social:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(125, 211, 252, 0.4);
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
}

/* The giant wordmark — static, like a signature at the foot of the page.
   The logo is a CSS mask, so the letters take a lit blue-to-teal gradient
   that falls off toward the bottom edge. No animation. */
.site-footer__wordmark {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2660 / 512;
  margin: 0.5rem 0 -1.5%;
  -webkit-mask: url("/assets/logo/elevea-lockup-mono-light.svg") center / 100% 100% no-repeat;
  mask: url("/assets/logo/elevea-lockup-mono-light.svg") center / 100% 100% no-repeat;
  background:
    linear-gradient(180deg, rgba(2, 8, 23, 0) 25%, rgba(2, 8, 23, 0.65) 100%),
    linear-gradient(95deg, #1e3a8a 0%, #0b5a92 35%, #0e7490 70%, #155e75 100%);
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

@media (max-width: 640px) {
  .site-footer__inner {
    padding-top: 3.5rem;
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }

  .site-footer__col li a,
  .site-footer__col li button {
    padding: 0.45rem 0;
    font-size: var(--fs-body);
  }

  .site-footer__bottom {
    margin-top: 2.5rem;
  }
}

/* -------------------------------------------------------------------
   6. Page scaffold
   ------------------------------------------------------------------- */
.sp {
  font-family: var(--font-primary);
  color: var(--ink-2);
}

.sp-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: content-box;
}

.sp-section {
  position: relative;
  padding: 7rem 0;
  /* Decorative glows behind illustrations may reach past the gutter;
     clip (not hidden) so nothing scrolls sideways and sticky still works. */
  overflow-x: clip;
}

.sp-section--tint {
  background: var(--surface-tint);
}

.sp-section--tight {
  padding: 4.5rem 0;
}

@media (max-width: 768px) {
  .sp-section {
    padding: 4rem 0;
  }

  .sp-section--tight {
    padding: 3rem 0;
  }
}

.sp-head {
  max-width: 760px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.sp-head--left {
  margin-left: 0;
  text-align: left;
}

.sp-head .section-badge {
  margin: 0 auto 1.25rem;
}

.sp-head--left .section-badge {
  margin-left: 0;
}

.sp-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-fluid-title);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--gray-800);
  margin: 0;
}

.sp-sub {
  margin: 1rem 0 0;
  font-size: var(--fs-fluid-subtitle);
  line-height: 1.65;
  color: var(--gray-500);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--gray-300);
}

.crumbs a {
  color: var(--gray-500);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--primary);
}

.crumbs [aria-current] {
  color: var(--gray-700);
  font-weight: 500;
}

/* -------------------------------------------------------------------
   7. Page hero — the homepage's midnight hero, detail for detail.
   Same ground, aurora, silk threads (js/hero-silk.js), badge, headline,
   accent gradient, subtitle and buttons (all from styles.css); only the
   layout below is page-specific.
   ------------------------------------------------------------------- */
.sp-hero.hero--midnight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-height) + 3.5rem) 0 5.5rem;
  background:
    radial-gradient(52% 60% at 76% 52%, rgba(14, 165, 233, 0.16) 0%, transparent 70%),
    radial-gradient(48% 46% at 8% 0%, rgba(56, 189, 248, 0.13) 0%, transparent 70%),
    radial-gradient(60% 50% at 46% 112%, rgba(79, 70, 229, 0.2) 0%, transparent 70%),
    linear-gradient(180deg, #020817 0%, #04122a 55%, #061a38 100%);
  color: #e2e8f0;
}

.sp-hero .sp-wrap {
  position: relative;
  z-index: 1;
}

.sp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: center;
}

.sp-hero--solo .sp-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

.sp-hero__copy {
  min-width: 0;
}

.sp-hero .hero-title {
  font-size: clamp(2rem, 3.6vw, 3.125rem);
  line-height: 1.15;
  margin-bottom: 1.1rem;
}

/* A multi-word accent wraps with the line (the homepage's is one phrase
   on its own line, so it can stay inline-block there). */
.sp-hero .hero-accent-gradient {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sp-hero .hero-subtitle {
  max-width: 560px;
}

.hero-badge__icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.sp-hero .crumbs ol {
  margin-bottom: 1.25rem;
  color: #64748b;
}

.sp-hero .crumbs a {
  color: #94a3b8;
}

.sp-hero .crumbs a:hover {
  color: #e0f2fe;
}

.sp-hero .crumbs [aria-current] {
  color: #cbd5e1;
}

.sp-hero .crumbs li + li::before {
  color: #334155;
}

/* The buttons: identical to the homepage hero. They never wrap. */
.cta-button {
  white-space: nowrap;
}

.cta-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.sp-hero .hero-ctas {
  flex-wrap: wrap;
}

.sp-hero .hero-ctas .cta-button--primary {
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.25),
    0 10px 30px -6px rgba(14, 165, 233, 0.55);
}

.sp-hero .hero-ctas .cta-button--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.sp-hero .hero-ctas .cta-button--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(125, 211, 252, 0.55);
  color: #fff;
}

/* --- The product window (as the homepage's .hx) --- */
.hero-visual {
  position: relative;
  padding-bottom: 2.25rem;
  animation: fadeInUp 0.6s ease-out 0.35s both;
}

.app {
  position: relative;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 60px -16px rgba(0, 0, 0, 0.6),
    0 0 60px -20px rgba(14, 165, 233, 0.24);
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 44px;
  padding: 0 0.85rem 0 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-primary);
}

.app-bar__logo {
  display: block;
  height: 15px;
  width: auto;
}

.app-bar__sep {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}

.app-bar__org {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.app-bar__org svg {
  width: 11px;
  height: 11px;
  color: var(--gray-400);
}

.app-bar__crumb {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.app-bar__crumb::before {
  content: "/";
  margin-right: 0.6rem;
  color: var(--gray-300);
}

.app-bar__bell {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--gray-500);
}

.app-bar__bell svg {
  width: 15px;
  height: 15px;
}

.app-bar__user {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: var(--gray-700);
  font-size: 0.58rem;
  font-weight: 700;
}

.app-body.mk--bare {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.app-body .mk-bar {
  border-bottom: none;
  padding-top: 0.35rem;
  min-height: 46px;
}

/* The toast hangs over the window's bottom-left corner on desktop: give
   the window room there so it covers empty space, never content. */
@media (min-width: 769px) {
  .hero-visual:has(.hero-toast) .app-body > .mk-body:last-child {
    padding-bottom: 2.75rem;
  }
}

/* The glass notification card, as the homepage hero's source cards. */
.hero-toast {
  position: absolute;
  left: -1.5rem;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 300px;
  padding: 0.75rem 0.95rem 0.75rem 0.75rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 72, 122, 0.82) 0%, rgba(16, 38, 74, 0.92) 100%);
  border: 1px solid rgba(148, 197, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 36px -14px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e2e8f0;
  font-family: var(--font-primary);
  animation: toastIn 0.7s cubic-bezier(0.22, 0.8, 0.24, 1) 1.1s both;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

.hero-toast__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}

.hero-toast--ok .hero-toast__icon {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

.hero-toast--warn .hero-toast__icon {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

.hero-toast__icon svg {
  width: 17px;
  height: 17px;
}

.hero-toast__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.hero-toast__text b {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
}

.hero-toast__text span {
  font-size: 0.75rem;
  color: #94a3b8;
}

@media (max-width: 1100px) {
  .sp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .sp-hero .hero-subtitle {
    max-width: 640px;
  }

  .hero-visual {
    max-width: 720px;
  }

  .hero-toast {
    left: 1rem;
  }
}

@media (max-width: 768px) {
  .sp-hero.hero--midnight {
    padding: calc(var(--header-height) + 2rem) 0 3.5rem;
  }

  .sp-hero .hero-ctas .cta-button {
    flex: 1 1 auto;
    min-height: 48px;
  }

  .hero-visual {
    padding-bottom: 0;
  }

  .hero-toast {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: 0.75rem;
  }

  .app-bar__crumb {
    display: none;
  }
}

/* -------------------------------------------------------------------
   8. Blocks
   ------------------------------------------------------------------- */

/* --- Outcome / reason cards --- */
.sp-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-pillar {
  position: relative;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

.sp-pillar:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 36px -20px rgba(15, 23, 42, 0.25);
}

.sp-section--tint .sp-pillar {
  border-color: rgba(3, 105, 161, 0.08);
}

.sp-pillar__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(3, 105, 161, 0.6);
}

.sp-pillar__icon--bad {
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
  box-shadow: 0 8px 18px -8px rgba(185, 28, 28, 0.55);
}

.sp-pillar__icon svg {
  width: 23px;
  height: 23px;
}

.sp-pillar h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.sp-pillar p {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--gray-600);
}

@media (max-width: 900px) {
  .sp-pillars {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Capability rows (alternating) --- */
.sp-caps {
  display: grid;
  gap: 6.5rem;
}

.sp-cap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4.5rem;
  align-items: center;
}

.sp-cap:nth-child(even) .sp-cap__copy {
  order: 2;
}

.sp-cap__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.sp-cap__body {
  margin: 1rem 0 0;
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--gray-600);
}

.sp-checks {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.sp-checks li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--gray-700);
}

.sp-checks svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.12rem;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.15);
}

.sp-powered {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid rgba(3, 105, 161, 0.14);
  font-size: var(--fs-sm);
  color: var(--gray-600);
  text-decoration: none;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 220ms ease;
}

.sp-powered b {
  color: var(--ink);
  font-weight: 600;
}

.sp-powered__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}

.sp-powered__icon svg {
  width: 15px;
  height: 15px;
}

.sp-powered > svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  transition: transform 200ms ease;
}

.sp-powered:hover {
  border-color: rgba(3, 105, 161, 0.35);
  box-shadow: 0 10px 22px -14px rgba(3, 105, 161, 0.55);
  transform: translateY(-1px);
}

.sp-powered:hover > svg {
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .sp-caps {
    gap: 4.5rem;
  }

  .sp-cap {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .sp-cap:nth-child(even) .sp-cap__copy {
    order: 0;
  }
}

/* --- Comparison table --- */
.sp-cmp {
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 24px 48px -32px rgba(15, 23, 42, 0.22);
}

.sp-cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) minmax(0, 1.12fr);
}

.sp-cmp__row + .sp-cmp__row {
  border-top: 1px solid var(--line);
}

.sp-cmp__cell {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.sp-cmp__cell--label {
  font-weight: 600;
  color: var(--ink);
}

.sp-cmp__cell--them {
  color: var(--gray-500);
}

.sp-cmp__cell--us {
  background: linear-gradient(90deg, rgba(237, 246, 250, 0.95), rgba(237, 246, 250, 0.55));
  color: var(--ink);
  font-weight: 500;
}

.sp-cmp__row--head .sp-cmp__cell {
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.sp-cmp__row--head .sp-cmp__cell--us img {
  height: 16px;
  width: auto;
}

.sp-cmp__cell svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  padding: 3px;
  border-radius: 50%;
}

.sp-cmp__cell--them svg {
  background: var(--gray-100);
  color: var(--gray-400);
}

.sp-cmp__cell--partial svg {
  background: var(--warn-bg);
  color: var(--warn);
}

.sp-cmp__cell--yes svg {
  background: var(--ok-bg);
  color: var(--ok);
}

.sp-cmp__cell--us svg {
  background: var(--primary);
  color: #fff;
}

.sp-cmp__mobile-label {
  display: none;
}

@media (max-width: 760px) {
  .sp-cmp__row--head {
    display: none;
  }

  .sp-cmp__row {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.4rem 0;
  }

  .sp-cmp__cell {
    padding: 0.5rem 1.1rem;
  }

  .sp-cmp__cell--label {
    padding-top: 0.9rem;
    font-size: var(--fs-body-lg);
  }

  .sp-cmp__cell--us {
    margin: 0 0.6rem 0.6rem;
    border-radius: 10px;
  }

  .sp-cmp__mobile-label {
    display: inline;
    font-weight: 600;
    margin-right: 0.25rem;
  }
}

.sp-asof {
  max-width: 1000px;
  margin: 1rem auto 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--gray-500);
  text-align: center;
}

.sp-asof a {
  color: var(--primary);
}

/* --- Testimonial --- */
.sp-quote {
  position: relative;
  max-width: 880px;
  margin: 4rem auto 0;
  padding: 2.75rem 3rem;
  text-align: center;
  border-radius: 22px;
  background:
    var(--isogrid-light),
    radial-gradient(70% 90% at 50% 0%, rgba(14, 165, 233, 0.1) 0%, transparent 70%),
    #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.25);
}

.sp-section--tint .sp-quote {
  border-color: rgba(3, 105, 161, 0.1);
}

.sp-quote__mark {
  width: 36px;
  height: 36px;
  color: var(--secondary);
  opacity: 0.7;
}

.sp-quote blockquote {
  margin: 0.85rem 0 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sp-quote figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-size: var(--fs-body);
  color: var(--gray-500);
}

.sp-quote figcaption strong {
  color: var(--gray-800);
  font-weight: 600;
}

.sp-quote figcaption span::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--gray-300);
}

@media (max-width: 640px) {
  .sp-quote {
    padding: 2rem 1.25rem;
  }
}

/* --- "Works with" chips --- */
.sp-related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
}

.sp-related__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-right: 0.25rem;
}

.sp-chiplink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 0.95rem 0 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    transform 220ms ease;
}

.sp-chiplink svg {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.sp-chiplink:hover {
  color: var(--primary-dark);
  border-color: rgba(3, 105, 161, 0.35);
  transform: translateY(-1px);
}

/* --- FAQ (native <details>) --- */
.sp-faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.sp-faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.sp-section--tint .sp-faq details {
  border-color: rgba(3, 105, 161, 0.08);
}

.sp-faq details[open] {
  border-color: rgba(3, 105, 161, 0.25);
  box-shadow: 0 16px 32px -24px rgba(3, 105, 161, 0.4);
}

.sp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 1rem 1.35rem;
  font-size: var(--fs-heading-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.sp-faq summary::-webkit-details-marker {
  display: none;
}

.sp-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    linear-gradient(var(--primary), var(--primary)) center / 10px 1.75px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center / 1.75px 10px no-repeat,
    var(--surface-tint);
  transition: transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.sp-faq details[open] summary::after {
  transform: rotate(135deg);
}

.sp-faq summary:hover {
  color: var(--primary-dark);
}

.sp-faq__a {
  padding: 0 1.35rem 1.35rem;
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--gray-600);
}

.sp-faq__a p {
  margin: 0;
}

.sp-faq__a p + p {
  margin-top: 0.75rem;
}

/* --- The loop (platform overview) / numbered steps --- */
.sp-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-loop--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-loop__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 260ms ease;
}

.sp-loop__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px rgba(15, 23, 42, 0.25);
}

.sp-loop__num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sp-loop__verb {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
}

.sp-loop__step h3 {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--ink);
}

.sp-loop__step p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

.sp-loop__mods {
  display: grid;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 0.5rem 0 0;
  list-style: none;
}

.sp-loop__mods a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: 10px;
  background: var(--gray-50);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-800);
  text-decoration: none;
  transition:
    background 200ms ease,
    color 200ms ease;
}

.sp-loop__mods a:hover {
  background: var(--surface-tint);
  color: var(--primary);
}

.sp-loop__mods svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.sp-loop__go {
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 200ms ease,
    transform 220ms ease;
}

.sp-loop__mods a:hover .sp-loop__go {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .sp-loop,
  .sp-loop--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sp-loop,
  .sp-loop--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Versus (compare pages) --- */
.sp-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.sp-versus__card {
  padding: 2rem;
  border-radius: 18px;
  background: var(--gray-50);
  border: 1px solid var(--line);
}

.sp-versus__card--us {
  background:
    var(--isogrid-light),
    radial-gradient(80% 80% at 100% 0%, rgba(14, 165, 233, 0.12) 0%, transparent 70%),
    #fff;
  border-color: rgba(3, 105, 161, 0.25);
  box-shadow: 0 24px 48px -32px rgba(3, 105, 161, 0.4);
}

.sp-versus__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-600);
}

.sp-versus__card--us img {
  height: 18px;
  width: auto;
}

.sp-versus__card h3 {
  margin: 1rem 0 0.5rem;
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--ink);
}

.sp-versus__card p {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--gray-600);
}

@media (max-width: 760px) {
  .sp-versus {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Category matrix (/compare) --- */
.sp-matrix {
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.22);
}

.sp-matrix__row {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) repeat(3, minmax(0, 1fr));
}

.sp-matrix__row + .sp-matrix__row {
  border-top: 1px solid var(--line);
}

.sp-matrix__row > span {
  padding: 1.2rem 1.35rem;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.sp-matrix__row--head > span {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.sp-matrix__row--head img {
  height: 16px;
  width: auto;
}

.sp-matrix .is-us {
  background: linear-gradient(180deg, rgba(237, 246, 250, 0.95), rgba(237, 246, 250, 0.6));
}

.sp-matrix__label {
  font-weight: 700;
  color: var(--ink);
}

.sp-matrix ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-matrix li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--gray-600);
}

.sp-matrix .is-us li {
  color: var(--ink);
  font-weight: 500;
}

.sp-matrix li svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 0.12rem;
  padding: 3px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-400);
}

.sp-matrix .is-us li svg {
  background: var(--primary);
  color: #fff;
}

.sp-matrix__col {
  display: none;
}

@media (max-width: 900px) {
  .sp-matrix__row--head {
    display: none;
  }

  .sp-matrix__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-matrix__row > span {
    padding: 0.75rem 1.1rem;
  }

  .sp-matrix__label {
    padding-top: 1.1rem !important;
    font-size: var(--fs-heading-sm);
  }

  .sp-matrix__col {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
}

/* --- Matchup cards (/compare) --- */
.sp-vsgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-vs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(3, 105, 161, 0.1);
  text-decoration: none;
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

.sp-vs:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 105, 161, 0.3);
  box-shadow: 0 18px 36px -20px rgba(3, 105, 161, 0.4);
}

.sp-vs__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sp-vs__name {
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--ink);
}

.sp-vs__name i {
  font-style: normal;
  font-weight: 500;
  color: var(--gray-400);
}

.sp-vs__top svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  transition: transform 220ms ease;
}

.sp-vs:hover .sp-vs__top svg {
  transform: translateX(3px);
}

.sp-vs__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}

.sp-vs__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

/* --- Cautionary tales (/why-elevea) --- */
.sp-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-case {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(3, 105, 161, 0.08);
}

.sp-case__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.sp-case__top b {
  font-size: var(--fs-heading-sm);
  color: var(--ink);
}

.sp-case__top span {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  white-space: nowrap;
}

.sp-case p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

.sp-case__cost {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sp-case__cost b {
  color: var(--bad);
  font-size: var(--fs-body-lg);
}

.sp-case__cost span {
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.sp-lesson {
  max-width: 760px;
  margin: 3rem auto 0;
  text-align: center;
  font-size: var(--fs-heading);
  line-height: 1.55;
  color: var(--gray-700);
}

.sp-lesson strong {
  color: var(--primary-dark);
}

@media (max-width: 1024px) {
  .sp-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sp-cases {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Founder (/about) --- */
.sp-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 4rem;
  align-items: start;
}

.sp-founder__photo {
  position: sticky;
  top: 110px;
  margin: 0;
  padding: 1rem;
  border-radius: 24px;
  background:
    var(--isogrid-light),
    radial-gradient(80% 80% at 100% 0%, rgba(14, 165, 233, 0.14) 0%, transparent 70%),
    var(--surface-tint);
  border: 1px solid var(--line);
}

.sp-founder__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.sp-founder__photo figcaption {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 0.25rem 0.25rem;
}

.sp-founder__photo figcaption b {
  color: var(--ink);
  font-size: var(--fs-heading-sm);
}

.sp-founder__photo figcaption span {
  color: var(--gray-500);
  font-size: var(--fs-sm);
}

.sp-founder__copy .section-badge {
  margin-bottom: 1rem;
}

.sp-prose {
  margin: 1.1rem 0 0;
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--gray-600);
}

.sp-prose strong {
  color: var(--ink);
}

.sp-founder__label {
  margin: 2rem 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.sp-logowall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-logowall img {
  display: block;
  height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .sp-founder {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .sp-founder__photo {
    position: static;
    max-width: 360px;
  }
}

/* Learn-more links added under homepage sections */
.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.learn-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.learn-more:hover svg {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------
   9. Product mocks (.mk-*) — to the homepage's standard (.visual-card,
   .kg-*, .hx). Colour means STATE: green ok, amber behind, red
   blocked, blue = AI / active. Never decoration.
   ------------------------------------------------------------------- */
.mk-scene {
  position: relative;
}

/* Capability illustrations sit on a soft glow, not in a frame. */
.sp-cap__visual .mk-scene::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  background:
    radial-gradient(50% 50% at 60% 45%, rgba(14, 165, 233, 0.16) 0%, transparent 70%),
    var(--isogrid-light);
  -webkit-mask-image: radial-gradient(60% 60% at 55% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 55% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}

.mk-scene__inner {
  position: relative;
  z-index: 1;
}

.mk-scene--layered .mk:not(.mk--float) {
  margin-right: 16%;
  margin-bottom: 5rem;
}

.mk--float {
  position: absolute !important;
  right: 0;
  bottom: 0;
  width: min(58%, 300px);
  z-index: 2;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 24px 48px -16px rgba(15, 23, 42, 0.3) !important;
}

@media (max-width: 640px) {
  .mk-scene--layered .mk:not(.mk--float) {
    margin-right: 0;
    margin-bottom: 0;
  }

  .mk--float {
    position: relative !important;
    width: auto;
    margin-top: 0.75rem;
  }
}

.mk {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -10px rgba(15, 23, 42, 0.12),
    0 40px 80px -30px rgba(3, 60, 100, 0.2);
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: left;
}

.mk-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
}

.mk-bar > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary);
}

.mk-bar > img {
  flex: 0 0 auto;
}

.mk-bar__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.mk-bar__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-dot-state {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--secondary);
}

.mk-dot-state--ok {
  background: #10b981;
}

.mk-dot-state--live {
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5);
  animation: mkPulse 2.2s ease-out infinite;
}

@keyframes mkPulse {
  70% {
    box-shadow: 0 0 0 7px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.mk-body {
  padding: 1rem;
}

.mk-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.mk-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.mk-sub svg {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  margin-right: 0.15rem;
}

.mk-kicker {
  margin: 0.75rem 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.mk-kicker:first-child {
  margin-top: 0;
}

.mk-lead {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.mk-p {
  margin: 0.4rem 0;
  line-height: 1.55;
}

.mk-strike {
  margin: 0.3rem 0 0.75rem;
  color: var(--gray-400);
  text-decoration: line-through;
}

.mk-big {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.mk-big small {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
}

.mk-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mk-row--between {
  justify-content: space-between;
}

.mk-push {
  margin-left: auto;
}

.mk-grow {
  flex: 1;
  min-width: 0;
}

.mk-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-rows > li,
.mk-rows > .mk-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.mk-rows > li:last-child,
.mk-rows > .mk-row:last-child {
  border-bottom: none;
}

.mk-rows--tight > li,
.mk-rows--tight > .mk-row {
  padding: 0.5rem 0;
}

.mk-rows > li > svg,
.mk-rows > .mk-row > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary);
}

.mk-rows sup,
.mk-bubble sup,
.mk-p sup {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--primary);
  margin-left: 1px;
}

/* Chips, counts, tags */
.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.mk-chip svg {
  width: 11px;
  height: 11px;
}

.mk-chip--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.mk-chip--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.mk-chip--bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.mk-chip--ai {
  background: var(--surface-tint);
  color: var(--primary);
}

.mk-chip--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
}

.mk-count {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 24px;
  padding: 0 0.45rem;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mk-count--bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.mk-count--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.mk-count--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.mk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.mk-logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem 0.15rem 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-700);
  background: #fff;
}

.mk-logo-chip svg {
  width: 12px;
  height: 12px;
  color: var(--gray-500);
}

.mk-kbd {
  margin-left: auto;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mk-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 0.75rem;
  font-weight: 600;
}

.mk-note svg {
  width: 14px;
  height: 14px;
}

/* Avatars */
.mk-av {
  --av: #64748b;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--av) 16%, #fff);
  color: color-mix(in srgb, var(--av) 80%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 30%, #fff);
  font-size: 0.625rem;
  font-weight: 700;
}

.mk-av--ai {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(3, 105, 161, 0.6);
}

.mk-av--ai svg {
  width: 13px;
  height: 13px;
}

/* Meters, sparklines, stat tiles */
.mk-meter {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--gray-100);
  overflow: hidden;
}

.mk-meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.22, 0.8, 0.24, 1) 200ms;
}

.mk-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}

.mk-spark {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 0.4rem;
  overflow: visible;
}

.mk-spark__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 0.8, 0.24, 1) 250ms;
}

.mk-spark--ok .mk-spark__line { stroke: #10b981; }
.mk-spark--ok .mk-spark__fill { fill: rgba(16, 185, 129, 0.12); }
.mk-spark--warn .mk-spark__line { stroke: #f59e0b; }
.mk-spark--warn .mk-spark__fill { fill: rgba(245, 158, 11, 0.12); }
.mk-spark--bad .mk-spark__line { stroke: #ef4444; }
.mk-spark--bad .mk-spark__fill { fill: rgba(239, 68, 68, 0.1); }
.mk-spark--blue .mk-spark__line { stroke: #0ea5e9; }
.mk-spark--blue .mk-spark__fill { fill: rgba(14, 165, 233, 0.12); }

.mk-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.mk-tile {
  padding: 0.7rem 0.75rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.mk-tile__k {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-600);
}

.mk-tile__k i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--secondary);
}

.mk-tile--ok .mk-tile__k i { background: #10b981; }
.mk-tile--warn .mk-tile__k i { background: #f59e0b; }
.mk-tile--bad .mk-tile__k i { background: #ef4444; }

.mk-tile__v {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.mk-tile__v small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
}

/* KPI grid (pastel cells, as the homepage scorecard) */
.mk-kgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: 5px;
  align-items: stretch;
}

.mk-kgrid__h {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  padding-bottom: 0.15rem;
}

.mk-kgrid__l {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.mk-kgrid__l small {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--gray-500);
}

.mk-k {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mk-k--beat { background: #a7f3d0; color: #065f46; }
.mk-k--hit { background: #d1fae5; color: #047857; }
.mk-k--near { background: #fde9cf; color: #b45309; }
.mk-k--miss { background: #fde0e0; color: #b91c1c; }

.mk-sync {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--gray-50);
}

.mk-sync b {
  display: block;
  font-size: 0.75rem;
  color: var(--ink);
}

.mk-sync__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ok-bg);
  color: var(--ok);
}

.mk-sync__icon svg {
  width: 15px;
  height: 15px;
}

.mk-logos {
  display: flex;
  gap: 0.35rem;
}

.mk-xl {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #e7f3ec;
  color: #107c41;
  font-size: 0.625rem;
  font-weight: 800;
}

/* Heatmap */
.mk-heat {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 5px;
  font-size: 0.75rem;
}

.mk-heat > span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mk-heat > .mk-heat__l {
  place-items: center start;
  font-weight: 600;
  color: var(--gray-700);
}

.mk-heat > .mk-heat__h {
  min-height: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
}

.mk-h5 { background: #a7f3d0; color: #065f46; }
.mk-h4 { background: #d1fae5; color: #047857; }
.mk-h3 { background: #f1f5f9; color: #475569; }
.mk-h2 { background: #fde9cf; color: #b45309; }
.mk-h1 { background: #fde0e0; color: #b91c1c; }

/* Likert distribution */
.mk-dist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 92px;
}

.mk-dist__bar {
  position: relative;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  transform-origin: bottom;
  transition: transform 800ms cubic-bezier(0.22, 0.8, 0.24, 1) 200ms;
}

.mk-dist__bar b {
  position: absolute;
  top: -1.15rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.625rem;
  color: var(--gray-600);
}

.mk-dist__bar--1 { background: #fca5a5; }
.mk-dist__bar--2 { background: #fdba74; }
.mk-dist__bar--3 { background: #cbd5e1; }
.mk-dist__bar--4 { background: #6ee7b7; }
.mk-dist__bar--5 { background: #34d399; }

.mk-dist__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.625rem;
  color: var(--gray-500);
}

/* Tables */
.mk-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.mk-table th {
  padding: 0.45rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: right;
  color: var(--gray-500);
  border-bottom: 1px solid var(--line);
}

.mk-table th:first-child,
.mk-table td:first-child {
  text-align: left;
}

.mk-table td {
  padding: 0.55rem 0.4rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  color: var(--gray-600);
}

.mk-table tr:last-child td {
  border-bottom: none;
}

.mk-trend {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-600);
}

.mk-trend--up {
  background: var(--ok-bg);
  color: var(--ok);
}

.mk-trend--down {
  background: var(--bad-bg);
  color: var(--bad);
}

.mk-why {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--surface-tint);
  font-size: 0.75rem;
  line-height: 1.5;
}

.mk-why svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--primary);
}

.mk-why em {
  color: var(--gray-500);
  font-style: normal;
}

/* Score */
.mk-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 28px;
  gap: 0.55rem 0.6rem;
  align-items: center;
  font-size: 0.75rem;
}

.mk-score .mk-num {
  text-align: right;
}

/* Chat */
.mk-chat {
  display: grid;
  gap: 0.75rem;
}

.mk-msg {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}

.mk-msg--user {
  justify-content: flex-end;
}

.mk-bubble {
  max-width: 84%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: var(--gray-50);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-top-left-radius: 4px;
}

.mk-msg--user .mk-bubble {
  background: #f1f5f9;
  border-color: transparent;
  color: var(--ink);
  border-radius: 12px 12px 4px 12px;
}

.mk-bubble--answer {
  max-width: none;
  background: #fff;
  border: none;
  padding: 0.1rem 0;
}

.mk-bubble b {
  color: var(--ink);
}

.mk-read {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  color: var(--gray-500);
}

.mk-read svg {
  width: 13px;
  height: 13px;
  padding: 2px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
}

.mk-tag-ai {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--surface-tint);
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: 1px;
}

.mk-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  margin-right: 0.45rem;
  vertical-align: -2px;
}

.mk-wave i {
  width: 2px;
  border-radius: 1px;
  background: var(--secondary);
  animation: mkWave 1.2s ease-in-out infinite;
}

.mk-wave i:nth-child(1) { height: 5px; animation-delay: 0s; }
.mk-wave i:nth-child(2) { height: 11px; animation-delay: 0.1s; }
.mk-wave i:nth-child(3) { height: 7px; animation-delay: 0.2s; }
.mk-wave i:nth-child(4) { height: 13px; animation-delay: 0.3s; }
.mk-wave i:nth-child(5) { height: 6px; animation-delay: 0.4s; }
.mk-wave i:nth-child(6) { height: 10px; animation-delay: 0.5s; }
.mk-wave i:nth-child(7) { height: 5px; animation-delay: 0.6s; }

@keyframes mkWave {
  50% {
    transform: scaleY(0.45);
  }
}

.mk-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.mk-cite {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 0.6875rem;
  color: var(--gray-600);
}

.mk-cite b {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.5625rem;
}

.mk-cite svg {
  width: 11px;
  height: 11px;
}

.mk-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.55rem 0.55rem 0.55rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--gray-400);
}

.mk-input span:not(.mk-send):not(.mk-mic) {
  flex: 1;
}

.mk-mic {
  display: grid;
  place-items: center;
  color: var(--secondary);
}

.mk-mic svg {
  width: 15px;
  height: 15px;
}

.mk-send {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
}

.mk-send svg {
  width: 13px;
  height: 13px;
  transform: rotate(-90deg);
}

/* Tree (goals) */
.mk-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-tree ul {
  margin: 0 0 0 1.05rem;
  padding: 0 0 0 0.9rem;
  list-style: none;
  border-left: 1px solid var(--line-strong);
}

.mk-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
}

.mk-type {
  flex: 0 0 auto;
  padding: 0.12rem 0.4rem;
  border-radius: 5px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-tint);
  color: var(--primary);
}

.mk-type--kr {
  background: #f1f5f9;
  color: var(--gray-600);
}

.mk-type--init {
  background: #f5f3ff;
  color: #5b21b6;
}

/* Timeline */
.mk-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-steps li {
  position: relative;
  display: flex;
  gap: 0.7rem;
  padding: 0 0 0.9rem;
}

.mk-steps li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  background: var(--line);
}

.mk-steps li:last-child {
  padding-bottom: 0;
}

.mk-steps li:last-child::before {
  content: none;
}

.mk-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--primary);
}

.mk-dot svg {
  width: 14px;
  height: 14px;
}

.mk-dot--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.mk-dot--bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.mk-dot--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

/* Highlight + context menu */
.mk-quote {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--line);
  line-height: 1.6;
  color: var(--ink-2);
}

.mk-hl {
  background: rgba(14, 165, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
  border-radius: 2px;
  color: var(--ink);
}

.mk-menu {
  width: max-content;
  min-width: 220px;
  margin: 0.5rem 0 0 auto;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.3);
}

.mk-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  border-radius: 7px;
  font-weight: 500;
  color: var(--ink-2);
}

.mk-menu__item svg {
  width: 15px;
  height: 15px;
  color: var(--gray-500);
}

.mk-menu__item--on {
  background: var(--surface-tint);
  color: var(--primary-dark);
}

.mk-menu__item--on svg {
  color: var(--primary);
}

/* Checkbox rows (actions) */
.mk-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--gray-300);
}

.mk-check--on {
  border-color: #10b981;
  background: #10b981;
  color: #fff;
}

.mk-check--on svg {
  width: 11px;
  height: 11px;
}

.mk-done {
  color: var(--gray-400) !important;
  text-decoration: line-through;
}

.mk-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: var(--bad-bg);
  border: 1px solid rgba(185, 28, 28, 0.12);
}

.mk-alert__k {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bad);
}

.mk-alert__k svg {
  width: 12px;
  height: 12px;
}

/* Split view (cross-team) */
.mk-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.mk-side {
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.mk-side__who {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--primary);
}

/* Questions + progress (planning) */
.mk-qs {
  margin: 0 0 0.75rem;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-weight: 500;
}

.mk-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.mk-progress b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Options (anonymity) */
.mk-options {
  display: grid;
  gap: 0.45rem;
}

.mk-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mk-option--on {
  border-color: rgba(3, 105, 161, 0.35);
  background: var(--surface-tint);
}

.mk-radio {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: #fff;
}

.mk-option--on .mk-radio {
  border: 4px solid var(--primary);
}

.mk-option b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* Templates */
.mk-templates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mk-template {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 600;
  color: var(--ink);
}

.mk-template svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.mk-template small {
  display: block;
  font-weight: 500;
  color: var(--gray-500);
  font-size: 0.6875rem;
}

/* Definition rows */
.mk-dl {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  margin: 0.85rem 0 0;
  align-items: center;
}

.mk-dl dt {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.mk-dl dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--ink);
}

/* Sources (platform overview) */
.mk-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.mk-source {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.mk-source__k {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
}

.mk-source__k svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.mk-source b {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.mk-source .mk-sub {
  color: var(--ok);
  font-weight: 600;
}

.mk-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.4rem;
}

.mk-chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.8, 0.24, 1) 200ms;
}

/* -------------------------------------------------------------------
   10. Reveal-on-scroll + mock motion (site.js adds .reveal-ready)
   Sections fade up; inside a revealed mock, meters grow, sparklines and
   charts draw, and rows arrive one after another. All content is
   visible without JS.
   ------------------------------------------------------------------- */
[data-reveal] {
  transition:
    opacity 650ms ease-out,
    transform 650ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.reveal-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-ready [data-reveal]:not(.is-visible) .mk-meter > i {
  transform: scaleX(0);
}

.reveal-ready [data-reveal]:not(.is-visible) .mk-spark__line,
.reveal-ready [data-reveal]:not(.is-visible) .mk-chart__line {
  stroke-dashoffset: 1;
}

.reveal-ready [data-reveal]:not(.is-visible) .mk-dist__bar {
  transform: scaleY(0);
}

.mk-rows > li,
.mk-steps > li,
.mk-tree > li,
.mk--float {
  transition:
    opacity 500ms ease-out,
    transform 500ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.mk-rows > li:nth-child(2),
.mk-steps > li:nth-child(2) { transition-delay: 90ms; }
.mk-rows > li:nth-child(3),
.mk-steps > li:nth-child(3) { transition-delay: 180ms; }
.mk-rows > li:nth-child(4),
.mk-steps > li:nth-child(4) { transition-delay: 270ms; }
.mk--float { transition-delay: 350ms; }

.reveal-ready [data-reveal]:not(.is-visible) :is(.mk-rows > li, .mk-steps > li, .mk-tree > li) {
  opacity: 0;
  transform: translateY(8px);
}

.reveal-ready [data-reveal]:not(.is-visible) .mk--float {
  opacity: 0;
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .mega,
  .mega__card,
  .mega-panel,
  .site-nav__pill,
  .mnav,
  .mnav__panel,
  .hero-toast,
  .hero-visual,
  .mk-wave i,
  .mk-dot-state--live {
    transition: none !important;
    animation: none !important;
  }

  .reveal-ready [data-reveal]:not(.is-visible),
  .reveal-ready [data-reveal]:not(.is-visible) * {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* -------------------------------------------------------------------
   11. Homepage readability on phones
   The hero badge (10px) and the "Who it's for" cards (13px) were set
   below a comfortable reading size on small screens.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section--hero .hero-badge,
  .sp-hero .hero-badge {
    font-size: 0.72rem;
  }

  .section--audience .audience-card p {
    font-size: var(--fs-body-lg);
  }

  .section--audience .audience-card p.audience-subtitle {
    font-size: var(--fs-sm);
  }
}

/* -------------------------------------------------------------------
   12. Blog (/resources) — generated cover art, topic filter, articles
   ------------------------------------------------------------------- */

/* Topic chip (colour comes from the topic's ramp) */
.post-topic {
  --t-from: #7dd3fc;
  --t-to: #0284c7;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.45rem;
  border-radius: var(--radius-full);
  background: rgba(2, 8, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.post-topic svg {
  width: 13px;
  height: 13px;
  color: var(--t-from);
}

/* Topic filter (segmented links to real topic pages) */
.post-filter {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0.35rem;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.post-filter::-webkit-scrollbar {
  display: none;
}

.post-filter a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.post-filter a svg {
  width: 15px;
  height: 15px;
  color: var(--secondary);
}

.post-filter a span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gray-400);
}

.post-filter a:hover {
  background: var(--gray-50);
  color: var(--ink);
}

.post-filter a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
}

.post-filter a[aria-current="page"] svg,
.post-filter a[aria-current="page"] span {
  color: rgba(255, 255, 255, 0.7);
}

/* Cards */
.post-index {
  padding-top: 4rem;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform 300ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 300ms ease,
    border-color 300ms ease;
}

.post-card a:hover {
  transform: translateY(-4px);
  border-color: rgba(3, 105, 161, 0.22);
  box-shadow: 0 28px 48px -28px rgba(3, 60, 100, 0.45);
}

.post-card__art {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--navy-950);
}

.post-cover {
  display: block;
  width: 100%;
  height: 100%;
}

.post-card__art .post-cover {
  transition: transform 700ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.post-card a:hover .post-card__art .post-cover {
  transform: scale(1.04);
}

.post-card__topic {
  position: absolute;
  left: 1rem;
  top: 1rem;
}

.post-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: 1.5rem 1.6rem 1.4rem;
}

.post-card__title {
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.post-card__excerpt {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-600);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.post-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gray-300);
}

.post-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-weight: 600;
  color: var(--primary);
}

.post-card__go svg {
  width: 14px;
  height: 14px;
  transition: transform 220ms ease;
}

.post-card a:hover .post-card__go svg {
  transform: translateX(3px);
}

/* Lead story: art beside text, full width */
.post-card--lead {
  grid-column: 1 / -1;
}

.post-card--lead a {
  flex-direction: row;
}

.post-card--lead .post-card__art {
  flex: 0 0 52%;
  aspect-ratio: auto;
  min-height: 340px;
}

.post-card--lead .post-card__text {
  justify-content: center;
  gap: 0.85rem;
  padding: 2.5rem;
}

.post-card--lead .post-card__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.post-card--lead .post-card__excerpt {
  font-size: var(--fs-body-lg);
}

.post-card--lead .post-card__meta {
  margin-top: 0.5rem;
}

@media (max-width: 1024px) {
  .post-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-card--lead a {
    flex-direction: column;
  }

  .post-card--lead .post-card__art {
    flex: none;
    aspect-ratio: 2 / 1;
    min-height: 0;
  }

  .post-card--lead .post-card__text {
    padding: 1.75rem;
  }
}

@media (max-width: 700px) {
  .post-grid,
  .post-grid--3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .post-card__text {
    padding: 1.25rem 1.25rem 1.15rem;
  }

  .post-index {
    padding-top: 2.5rem;
  }

  .post-filter {
    margin-bottom: 1.75rem;
  }
}

/* Article hero */
.sp-hero--post .hero-title {
  font-size: clamp(2rem, 3.6vw, 2.875rem);
}

.sp-hero--article .sp-hero__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.post-hero-art {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(148, 197, 255, 0.18);
  box-shadow:
    0 28px 60px -16px rgba(0, 0, 0, 0.6),
    0 0 60px -20px rgba(14, 165, 233, 0.3);
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.post-hero-art .post-cover {
  width: 100%;
  height: 100%;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 560px;
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.post-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.post-byline img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.post-byline > span {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  color: #94a3b8;
}

.post-byline b {
  color: #fff;
  font-weight: 600;
}

.post-share {
  display: flex;
  gap: 0.5rem;
}

.post-share__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.post-share__btn svg {
  width: 16px;
  height: 16px;
}

.post-share__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(125, 211, 252, 0.5);
  color: #fff;
}

.post-share__btn.is-copied {
  border-color: rgba(52, 211, 153, 0.6);
  color: #6ee7b7;
}

.post-share__done {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.post-share__done:empty {
  display: none;
}

@media (max-width: 1100px) {
  .sp-hero--article .sp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-hero-art {
    display: none;
  }
}

/* Reading progress */
.post-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  height: 3px;
  pointer-events: none;
}

.post-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), #7dd3fc, #818cf8);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

/* Layout: sticky contents rail + reading column */
.post-section {
  padding-top: 4.5rem;
}

.post-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  justify-content: center;
  gap: 4rem;
}

.post-toc {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  align-self: start;
}

.post-toc__label {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.post-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--gray-200);
}

.post-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--gray-500);
  text-decoration: none;
  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.post-toc a:hover {
  color: var(--ink);
}

.post-toc a.is-active {
  color: var(--primary-dark);
  font-weight: 600;
  border-left-color: var(--secondary);
}

@media (max-width: 1024px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .post-toc {
    position: static;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
  }

  .post-toc ol {
    border-left: none;
  }

  .post-toc a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-left: 0;
    border-left: none;
  }
}

/* Reading column */
.post-body {
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--gray-700);
}

.post-body > p,
.post-body > ul,
.post-body > ol {
  margin: 0 0 1.35rem;
}

.post-body > p:first-child {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--ink);
}

.post-body h2 {
  margin: 3.25rem 0 1rem;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
  text-wrap: balance;
}

.post-body h3 {
  margin: 2rem 0 0.6rem;
  font-size: var(--fs-heading);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.post-body strong {
  color: var(--ink);
}

.post-body a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.post-body ul,
.post-body ol {
  padding-left: 1.4rem;
}

.post-body li {
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}

.post-body li::marker {
  color: var(--secondary);
  font-weight: 700;
}

.post-body blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--secondary);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
}

.post-body blockquote p {
  margin: 0;
}

.post-body blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--gray-500);
}

.post-body hr {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid var(--line);
}

.post-box {
  margin: 2rem 0;
  padding: 1.5rem 1.6rem;
  border-radius: 16px;
  background:
    var(--isogrid-light),
    radial-gradient(70% 90% at 100% 0%, rgba(14, 165, 233, 0.1) 0%, transparent 70%),
    var(--surface-tint);
  border: 1px solid rgba(3, 105, 161, 0.14);
}

.post-box .post-box__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.post-box .post-box__title::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 1px;
  background: var(--secondary);
  transform: skewX(-32deg);
}

.post-box p {
  margin: 0 0 0.6rem;
}

.post-box p:last-child {
  margin-bottom: 0;
}

.post-table {
  margin: 1.75rem 0;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
}

.post-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.post-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.post-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  min-width: 140px;
}

.post-table tr:last-child td {
  border-bottom: none;
}

.post-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* Product callout, mid-article */
.post-cta {
  display: flex;
  gap: 1.1rem;
  margin: 2.75rem 0;
  padding: 1.6rem;
  border-radius: 18px;
  background:
    var(--isogrid-dark),
    radial-gradient(90% 80% at 100% 0%, rgba(14, 165, 233, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
  color: #cbd5e1;
  font-size: var(--fs-body);
  line-height: 1.6;
  box-shadow: 0 24px 48px -28px rgba(2, 8, 23, 0.6);
}

.post-cta__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}

.post-cta__icon svg {
  width: 22px;
  height: 22px;
}

.post-cta p {
  margin: 0 0 0.75rem;
}

.post-cta .post-cta__eyebrow {
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.post-cta .post-cta__title {
  margin-bottom: 0.35rem;
  font-size: var(--fs-heading-sm);
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.post-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  font-weight: 600;
  color: #7dd3fc;
  text-decoration: none;
}

.post-cta a svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.post-cta a:hover svg {
  transform: translateX(3px);
}

/* Author box */
.post-author {
  display: flex;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding: 1.75rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.post-author img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.post-author p {
  margin: 0;
}

.post-author__name {
  font-weight: 700;
  color: var(--ink);
}

.post-author__role {
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.post-author .post-author__bio {
  margin-top: 0.6rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-600);
}

.post-author a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  min-height: 32px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.post-author a svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .post-body {
    font-size: 1rem;
  }

  .post-body > p:first-child {
    font-size: 1.0625rem;
  }

  .post-cta,
  .post-author {
    flex-direction: column;
  }

  .post-meta {
    border-top: none;
    padding-top: 0.5rem;
  }
}

/* -------------------------------------------------------------------
   12b. Menu & footer additions (latest post, mobile root, accordion)
   ------------------------------------------------------------------- */
.mega-panel--resources {
  width: min(900px, calc(100vw - 32px));
}

.mega-inner--resources {
  grid-template-columns: minmax(0, 1fr) 272px;
}

.mega-feature--post {
  padding: 0 0 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.mega-feature--post:hover {
  box-shadow: 0 18px 36px -18px rgba(3, 60, 100, 0.35);
}

.mega-feature__art {
  display: block;
  aspect-ratio: 2 / 1;
  margin-bottom: 0.35rem;
  overflow: hidden;
}

.mega-feature__art .post-cover {
  width: 100%;
  height: 100%;
}

.mega-feature--post .mega-feature__eyebrow,
.mega-feature--post .mega-feature__title,
.mega-feature--post .mega-feature__meta {
  padding: 0 1.1rem;
}

.mega-feature--post .mega-feature__eyebrow {
  color: var(--primary);
}

.mega-feature--post .mega-feature__title {
  color: var(--ink);
  line-height: 1.35;
}

.mega-feature__meta {
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

/* Mobile root rows: icon + label + one line of context */
.mnav__row {
  gap: 0.85rem;
  min-height: 72px;
  justify-content: flex-start;
}

.mnav__rowicon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--primary);
}

.mnav__rowicon svg {
  width: 21px;
  height: 21px;
}

.mnav__rowtext {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.mnav__rowtext b {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.mnav__rowtext span {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--gray-500);
}

.mnav__features {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.mnav__promo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem;
  border-radius: 16px;
  text-decoration: none;
  background:
    var(--isogrid-dark),
    radial-gradient(90% 80% at 100% 0%, rgba(14, 165, 233, 0.3) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
}

.mnav__promo-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.mnav__promo-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: #fff;
}

.mnav__promo-title svg {
  width: 16px;
  height: 16px;
}

.mnav__promo .mega-mock {
  margin-top: 0.25rem;
}

.mnav__post {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.6rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  text-decoration: none;
}

.mnav__post-art {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
}

.mnav__post-art .post-cover {
  width: 100%;
  height: 100%;
}

.mnav__post-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mnav__post-text b {
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--ink);
}

.mnav__post-text > span:last-child {
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

.mnav__label--flush {
  margin: 0;
}

/* Footer column toggles: plain labels on desktop, accordion on phones */
.site-footer__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: default;
}

.site-footer__chev {
  display: none;
  width: 16px;
  height: 16px;
  transition: transform 240ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

@media (max-width: 640px) {
  .footer-js .site-footer__nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }

  .footer-js .site-footer__col {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  }

  .footer-js .site-footer__label {
    margin: 0;
  }

  .footer-js .site-footer__label::before {
    display: none;
  }

  .footer-js .site-footer__toggle {
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    cursor: pointer;
    font-size: 0.75rem;
  }

  .footer-js .site-footer__chev {
    display: block;
  }

  .footer-js .site-footer__col.is-open .site-footer__chev {
    transform: rotate(180deg);
  }

  .footer-js .site-footer__col ul {
    display: none;
    padding-bottom: 1rem;
  }

  .footer-js .site-footer__col.is-open ul {
    display: block;
    animation: mnavIn 220ms ease-out both;
  }
}

/* -------------------------------------------------------------------
   13. Typesetting — line breaks that look set, not poured
   Headings balance their lines (no lone last word); body copy avoids
   orphans. Applies to every new page type and the shared header,
   footer and CTA band, so anything added later inherits it.
   ------------------------------------------------------------------- */
.sp :is(h1, h2, h3),
.sp-h2,
.sp-hero .hero-title,
.cta-content h2,
.mega-item__title,
.mega-feature__title,
.post-card__title,
.sp-cap__title,
.sp-versus__card h3,
.sp-quote blockquote,
.sp-faq summary {
  text-wrap: balance;
}

.sp p,
.sp li,
.cta-content p,
.mega-item__desc,
.mnav__desc,
.site-footer__statement {
  text-wrap: pretty;
}

/* One rhythm for headings and body across every template. */
.sp-h2 {
  line-height: 1.15;
}

.sp-sub {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.sp-head--left .sp-sub {
  margin-left: 0;
}

.sp-pillar h3,
.sp-loop__step h3,
.sp-versus__card h3,
.post-card__title {
  line-height: 1.3;
}

/* Phones: outcome cards go compact (icon beside title) so a section of
   three reads as a list, not three screens of cards. */
@media (max-width: 640px) {
  .sp-pillars {
    gap: 0.75rem;
  }

  .sp-pillar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.35rem 1.25rem;
  }

  .sp-pillar__icon {
    grid-row: span 2;
    width: 42px;
    height: 42px;
  }

  .sp-pillar h3 {
    margin: 0.1rem 0 0.35rem;
    font-size: var(--fs-heading-sm);
  }

  .sp-pillar p {
    font-size: var(--fs-body);
  }

  .sp-head {
    margin-bottom: 2.25rem;
  }

  .sp-quote {
    margin-top: 2.5rem;
  }

  .sp-quote blockquote {
    font-size: 1.125rem;
  }
}

/* -------------------------------------------------------------------
   14. Overview blocks — differentiators, audiences, loop titles
   ------------------------------------------------------------------- */

/* Loop titles are short by design and must sit on one line at every
   desktop width, so all four cards line up. */
.sp-loop__step h3 {
  font-size: 1.125rem;
  white-space: nowrap;
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .sp-loop__step {
    padding: 1.5rem 1.25rem;
  }
}

/* Five differentiators: three across, then two — on a 6-column grid. */
.sp-diffs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-diff {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(3, 105, 161, 0.08);
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 260ms ease;
}

.sp-diff:nth-child(4),
.sp-diff:nth-child(5) {
  grid-column: span 3;
}

.sp-diff:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(3, 60, 100, 0.35);
}

.sp-diff__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.sp-diff__num {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gray-200);
}

.sp-diff h3 {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.sp-diff p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-600);
}

.sp-diff__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.sp-diff__link svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.sp-diff__link:hover svg {
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .sp-diffs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-diff,
  .sp-diff:nth-child(4),
  .sp-diff:nth-child(5) {
    grid-column: span 1;
  }

  .sp-diff:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .sp-diffs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .sp-diff {
    padding: 1.4rem 1.25rem;
  }
}

/* Audiences */
.sp-aud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-aud__card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 2rem 1.75rem;
  border-radius: 20px;
  background:
    var(--isogrid-light),
    radial-gradient(90% 70% at 100% 0%, rgba(14, 165, 233, 0.1) 0%, transparent 70%),
    #fff;
  border: 1px solid var(--line);
}

.sp-aud__who {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-tint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.sp-aud__who svg {
  width: 15px;
  height: 15px;
}

.sp-aud__card h3 {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.sp-aud__card ul {
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.sp-aud__card li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--gray-700);
}

.sp-aud__card li svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  padding: 3px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

@media (max-width: 900px) {
  .sp-aud {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .sp-aud__card {
    padding: 1.5rem 1.25rem;
  }
}

/* Founder (about) — experience list + sign-off */
.sp-founder__sign {
  margin: 1.25rem 0 0;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--ink);
}

.sp-founder__exp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-founder__exp li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gray-700);
}

.sp-founder__exp svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  padding: 3px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--primary);
}

@media (max-width: 640px) {
  .sp-founder__exp {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mk-sub--wrap {
  margin-top: 0.15rem;
  line-height: 1.45;
}

/* Signal filtering: how many people raised each topic, as a meter */
.mk-signal__who {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.3rem;
}

.mk-signal__who .mk-meter {
  flex: 0 0 64px;
}

.mk-signal__who .mk-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-signal--noise {
  opacity: 0.55;
}

.mk-signal--noise .mk-meter > i {
  background: var(--gray-400);
}

/* Tab strip inside a mock (study summaries) */
.mk-tabs {
  display: flex;
  gap: 0.15rem;
  padding: 0.35rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}

.mk-tabs span {
  margin-bottom: -1px;
  padding: 0.4rem 0.5rem 0.55rem;
  border-bottom: 2px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
}

.mk-tabs .is-on {
  color: var(--primary);
  border-color: var(--primary);
}

.mk-count--ai {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--surface-tint);
  color: var(--primary);
}

.mk-count svg {
  width: 12px;
  height: 12px;
}

/* Consistent breathing room: the body's padding is the only space at its
   top and bottom edges, and a quote sits evenly between its header and
   the tags under it. */
.mk-body > :first-child {
  margin-top: 0;
}

.mk-body > :last-child {
  margin-bottom: 0;
}

/* Only where a list opens or closes the card — a list that follows a
   header row or precedes a kicker keeps its own padding. */
.mk-body > .mk-rows:first-child > :first-child,
.mk-body > .mk-tree:first-child > :first-child > .mk-node:first-child {
  padding-top: 0;
}

.mk-body > .mk-rows:last-child > :last-child {
  padding-bottom: 0;
}

/* A profile/summary row above a list reads as its header */
.mk-body > .mk-row + .mk-rows {
  margin-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.mk-p + .mk-tags {
  margin-top: 0.75rem;
}

.mk-p:has(+ .mk-tags) {
  margin-bottom: 0;
}

/* Voice answer: the wave sits centered against the whole bubble */
.mk-bubble:has(> .mk-wave) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mk-bubble > .mk-wave {
  flex: 0 0 auto;
  margin-right: 0;
}

/* Goals: owner right beside the title; status badge carries the KPI */
.mk-node__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-node .mk-status {
  margin-left: auto;
}

.mk-status b {
  margin-left: 0.4rem;
  padding-left: 0.4rem;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 35%, transparent);
  font-variant-numeric: tabular-nums;
}

.mk-sub--bad {
  color: var(--bad);
}

/* A source passage above a list: same gap as a header row */
.mk-body > .mk-quote + .mk-rows {
  margin-top: 0.6rem;
}

.mk-quote .mk-sub {
  margin-top: 0.3rem;
}

/* A primary action at the foot of a mock */
.mk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.55rem;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.mk-cta svg {
  width: 13px;
  height: 13px;
}

/* Prompt library: run button */
.mk-run {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary);
}

.mk-run svg {
  width: 11px;
  height: 11px;
}

/* Question bank: one-click add */
.mk-qbank .mk-title {
  font-weight: 500;
}

.mk-add {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}

.mk-add.is-added {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
}

.mk-add svg {
  width: 12px;
  height: 12px;
}

.mk-suggest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  border-radius: 9px;
  border: 1px dashed rgba(3, 105, 161, 0.35);
  background: var(--surface-tint);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.mk-suggest svg {
  width: 13px;
  height: 13px;
}

/* -------------------------------------------------------------------
   15. Integrations, Support & documents
   ------------------------------------------------------------------- */

/* Logo tile */
.int-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.3);
}

.int-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Directory */
.int-group + .int-group {
  margin-top: 4rem;
}

.int-group__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.int-group__head h2 {
  margin: 0;
  font-size: var(--fs-heading-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.int-group__head p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--gray-500);
}

.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.int-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.int-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  transition:
    transform 280ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 280ms ease,
    border-color 280ms ease;
}

.int-card:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 105, 161, 0.25);
  box-shadow: 0 22px 44px -26px rgba(3, 60, 100, 0.4);
}

.int-card .int-logo {
  margin-bottom: 0.4rem;
}

.int-card__name {
  font-size: var(--fs-heading-sm);
  font-weight: 700;
  color: var(--ink);
}

.int-card__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

.int-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
}

.int-card__go svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.int-card:hover .int-card__go svg {
  transform: translateX(3px);
}

/* Hero: Elevea at the centre, integrations in orbit */
.int-hub {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.int-hub__rings span {
  position: absolute;
  inset: calc(var(--i, 0) * 1%);
  border-radius: 50%;
  border: 1px solid rgba(148, 197, 255, 0.14);
}

.int-hub__rings span:nth-child(1) { inset: 10%; }
.int-hub__rings span:nth-child(2) { inset: 26%; border-style: dashed; border-color: rgba(148, 197, 255, 0.1); }
.int-hub__rings span:nth-child(3) { inset: 0; border-color: rgba(148, 197, 255, 0.07); }

.int-hub__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(125, 211, 252, 0.35);
  box-shadow:
    0 0 0 8px rgba(14, 165, 233, 0.06),
    0 0 60px -10px rgba(14, 165, 233, 0.6);
}

.int-hub__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
  animation: fadeInUp 0.6s ease-out calc(0.3s + var(--d)) both;
}

.int-hub__node img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Detail hero: Elevea + X */
.int-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
}

.int-pair__tile {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 30px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 28px 60px -16px rgba(0, 0, 0, 0.6),
    0 0 60px -20px rgba(14, 165, 233, 0.35);
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.int-pair__tile + .int-pair__link + .int-pair__tile {
  animation-delay: 0.45s;
}

.int-pair__tile img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.int-pair__link {
  display: flex;
  gap: 8px;
}

.int-pair__link i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7dd3fc;
  opacity: 0.35;
  animation: intPulse 1.6s ease-in-out infinite;
}

.int-pair__link i:nth-child(2) { animation-delay: 0.2s; }
.int-pair__link i:nth-child(3) { animation-delay: 0.4s; }

@keyframes intPulse {
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* What you get */
.int-gets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.int-gets li {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.int-gets__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}

.int-gets__icon svg {
  width: 18px;
  height: 18px;
}

.int-gets li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.int-gets b {
  font-size: var(--fs-heading-sm);
  color: var(--ink);
}

.int-gets li > span:last-child > span {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

/* Steps */
.int-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.int-steps li {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(3, 105, 161, 0.08);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.int-steps__n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--primary);
  font-weight: 700;
}

.int-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 820px;
  margin: 2rem auto 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--gray-500);
  text-align: center;
}

.int-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* Support */
.sup-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sup-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  transition:
    transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

.sup-card:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 105, 161, 0.25);
  box-shadow: 0 22px 44px -26px rgba(3, 60, 100, 0.4);
}

.sup-card .sp-pillar__icon {
  margin-bottom: 0.4rem;
}

.sup-card__title {
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--ink);
}

.sup-card__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

.sup-card__email {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
}

.sup-card__email svg {
  width: 16px;
  height: 16px;
}

/* Documents (legal) */
.post-body--doc {
  font-size: 1rem;
}

.post-body--doc > p:first-child {
  font-size: 1.0625rem;
}

.post-body--doc h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
}

.post-body .legal-table-wrap {
  margin: 1.75rem 0;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
}

.post-body .legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.post-body .legal-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--line);
}

.post-body .legal-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.post-body .legal-table tr:last-child td {
  border-bottom: none;
}

.post-body .legal-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.post-body .legal-meta {
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.doc-see-also {
  margin-top: 3rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

@media (max-width: 1024px) {
  .int-grid--3,
  .sup-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .int-hub {
    width: min(100%, 360px);
  }
}

@media (max-width: 700px) {
  .int-gets,
  .int-steps,
  .int-grid--3,
  .sup-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .int-pair__tile {
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .int-pair__tile img {
    width: 46px;
    height: 46px;
  }

  .int-hub__node {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 12px;
  }

  .int-hub__node img {
    width: 24px;
    height: 24px;
  }

  .int-hub__core {
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 20px;
  }
}

/* Integrations: request one */
.int-request {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 4rem;
  padding: 1.75rem 2rem;
  border-radius: 18px;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(14, 165, 233, 0.1) 0%, transparent 60%),
    #fff;
  border: 1px solid rgba(3, 105, 161, 0.18);
}

.int-request .sp-pillar__icon {
  flex: 0 0 auto;
}

.int-request__text {
  flex: 1;
  min-width: 0;
}

.int-request h2 {
  margin: 0 0 0.3rem;
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--ink);
}

.int-request p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gray-600);
}

.int-request .cta-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .int-request {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .int-request .cta-button {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------
   16. Customers — the homepage's scrolling testimonial wall, every quote.
   ------------------------------------------------------------------- */
.cust-wall {
  padding-top: 4rem;
}

/* Same drift speed as the homepage wall (about 10s per row). */
.cust-wall .testimonials-scroll-container {
  animation-duration: calc(var(--rows, 6) * 10s);
}

@media (max-width: 768px) {
  /* No marquee on phones: every quote once, no duplicates, no expander. */
  .cust-wall .testimonials-row:nth-child(n + 4) {
    display: grid !important;
  }

  .cust-wall .testimonials-row.testimonials-row--dup:nth-child(n) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cust-wall .testimonials-viewport {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cust-wall .testimonials-scroll-container {
    animation: none;
  }

  .cust-wall .testimonials-row--dup {
    display: none;
  }
}

.testimonials-more {
  margin: 2rem 0 0;
  text-align: center;
}

.post-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

/* -------------------------------------------------------------------
   17. Homepage feature visuals — the same chrome as every product mock
       on the site (.mk): 14px window, 46px white header with a 13px
       title and 12px meta, 16px body padding, 13px card text with 12px
       secondary text, 12px-radius bubbles and inputs. Content and
       animation are untouched; this only aligns the shared parts.
   ------------------------------------------------------------------- */
#features :is(.visual-card, .modern-chat-window) {
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -10px rgba(15, 23, 42, 0.12),
    0 40px 80px -30px rgba(3, 60, 100, 0.2);
}

#features :is(.vc-header, .modern-chat-header) {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

#features :is(.vc-header-title, .modern-chat-title) {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
}

#features .modern-chat-logo {
  width: 16px;
  height: 16px;
}

#features .vc-header-meta,
#features .agentic-live-label {
  font-size: 0.75rem;
  letter-spacing: normal;
}

#features .vc-header-meta {
  color: var(--gray-500);
}

#features .kg-body,
#features .modern-chat-messages {
  padding: 1rem;
}

/* Cards and their text */
#features :is(.cg-name, .ga-card-text, .ga-step) {
  font-size: 0.8125rem;
  letter-spacing: normal;
}

#features :is(.cg-meta, .ga-meta, .kg-sync-sub) {
  font-size: 0.75rem;
}

#features .kg-sync-title {
  font-size: 0.8125rem;
  font-weight: 600;
}

#features :is(.kg-tile, .kg-sync-card, .ga-card, .cg-node) {
  border-radius: 11px;
}

/* Chat bubbles and inputs */
#features :is(.user-message-bubble, .ai-message-content) {
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

#features .user-message-bubble {
  border-radius: 12px 12px 4px 12px;
}

#features .ai-message-content {
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  background: var(--gray-50);
}

#features :is(.modern-chat-input-box, .agentic-voice-status) {
  border-radius: 12px;
  border-color: var(--line-strong);
  background: #fff;
  font-size: 0.8125rem;
}

#features .modern-input-placeholder {
  font-size: 0.8125rem;
}

/* A document with no sections to jump between: no TOC column, and the
   width goes to the content (e.g. the sub-processors table). */
.post-layout--single {
  grid-template-columns: minmax(0, 1000px);
}

#features .chat-message--user .chat-input-text {
  font-size: inherit;
}

/* Footer: LinkedIn beside the logo and the copyright under the CTA, so
   there's no separate bottom row. On a single column (≤1024px) the brand
   block dissolves into the grid so the copyright can sit last. */
.site-footer__brandbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-footer__copy {
  margin: 1.75rem 0 0;
  font-size: var(--fs-xs);
  color: #64748b;
}

.site-footer__wordmark {
  margin-top: 4rem;
}

@media (max-width: 1024px) {
  .site-footer__top {
    gap: 0;
  }

  .site-footer__brand {
    display: contents;
  }

  .site-footer__brand > * {
    justify-self: start;
  }

  .site-footer__nav {
    order: 1;
    margin-top: 3rem;
  }

  .site-footer__copy {
    order: 2;
    margin-top: 2.5rem;
  }

  .site-footer__wordmark {
    margin-top: 2.5rem;
  }
}

/* Homepage team: the About link lives in the founder's caption */
.team-about {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(3, 105, 161, 0.25);
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.team-about svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.team-about:hover {
  border-color: rgba(3, 105, 161, 0.5);
  box-shadow: 0 8px 20px -10px rgba(3, 105, 161, 0.45);
}

.team-about:hover svg {
  transform: translateX(3px);
}