/* =====================================================
   ELIAN DESIGN SYSTEM — Marketing site
   Connected operations intelligence for distributed sites.
   ===================================================== */

/* Self-hosted only — no third-party font requests. Keeping type on our own
   origin avoids leaking visitor IPs to a US CDN (we advertise EU residency /
   GDPR alignment) and removes a render-blocking @import chain: the browser
   would otherwise have to fetch and parse this stylesheet before it could even
   discover the font URLs. Space Grotesk and JetBrains Mono are SIL OFL 1.1;
   see fonts/README.md for attribution. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}

/* Space Grotesk — display face (variable, 300-700) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/SpaceGrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — data / protocol labels (variable, 100-800) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand */
  --brand-green:        #1D9E75;
  --brand-green-dark:   #137d5b;
  --brand-green-soft:   #d8f1e7;
  --brand-blue:         #378ADD;
  --brand-blue-dark:    #2A6EB5;
  --brand-blue-soft:    #dceaf8;
  --brand-purple:       #534AB7;
  --brand-purple-dark:  #3F388C;
  --brand-purple-soft:  #e2e0f3;

  --brand-gradient:     linear-gradient(135deg, #1D9E75 0%, #378ADD 55%, #534AB7 100%);
  --brand-gradient-soft:linear-gradient(135deg, rgba(29,158,117,0.10) 0%, rgba(55,138,221,0.10) 50%, rgba(83,74,183,0.10) 100%);

  /* Surfaces — light */
  --surface-canvas:     #f5f8fb;
  --surface-1:          #ffffff;
  --surface-2:          #eef2f7;
  --surface-3:          #e3e9f1;
  --surface-overlay:    rgba(255,255,255,0.92);

  /* Surfaces — dark */
  --ink-canvas:         #0B1220;
  --ink-1:              #131C2E;
  --ink-2:              #1B2540;
  --ink-3:              #243056;
  --ink-line:           rgba(255,255,255,0.08);

  /* Foreground */
  --fg-1:               #0C172B;
  --fg-2:               #3B4A66;
  --fg-3:               #5F6F87;
  --fg-4:               #8A98AE;
  --fg-on-dark-1:       #F4F7FB;
  --fg-on-dark-2:       #C9D3E3;
  --fg-on-dark-3:       #8E9BB3;

  /* Borders */
  --border-1:           rgba(12,23,43,0.08);
  --border-2:           rgba(12,23,43,0.14);
  --border-strong:      rgba(12,23,43,0.22);
  --border-on-dark:     rgba(255,255,255,0.10);
  --border-on-dark-strong: rgba(255,255,255,0.18);

  /* Status */
  --success:            #1D9E75;
  --success-soft:       #d8f1e7;
  --warning:            #E08A2B;
  --warning-soft:       #fceedb;
  --danger:             #D8443B;
  --danger-soft:        #fadcd9;
  --info:               #378ADD;
  --info-soft:          #dceaf8;
  --ai:                 #534AB7;
  --ai-soft:            #e2e0f3;

  /* Type families */
  --font-display:       'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:          'Inter', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-display:         clamp(2.4rem, 4.6vw, 3.6rem);
  --fs-h1:              clamp(2rem, 3.4vw, 2.6rem);
  --fs-h2:              clamp(1.5rem, 2.4vw, 1.95rem);
  --fs-h3:              1.25rem;
  --fs-h4:              1.05rem;
  --fs-body:            1rem;
  --fs-body-sm:         0.9rem;
  --fs-caption:         0.8rem;
  --fs-eyebrow:         0.72rem;
  --fs-mono:            0.85rem;

  /* Line-height & tracking */
  --lh-tight:           1.18;
  --lh-snug:            1.35;
  --lh-body:            1.6;
  --tracking-eyebrow:   0.18em;
  --tracking-tight:     -0.02em;
  --tracking-mono:      0.02em;

  /* Spacing (4px grid) */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;

  /* Shadows */
  --shadow-1:           0 1px 2px rgba(12,23,43,0.06), 0 1px 1px rgba(12,23,43,0.04);
  --shadow-2:           0 4px 14px rgba(12,23,43,0.07), 0 1px 2px rgba(12,23,43,0.04);
  --shadow-3:           0 14px 36px rgba(12,23,43,0.10), 0 2px 4px rgba(12,23,43,0.04);
  --shadow-4:           0 28px 72px rgba(8,18,38,0.18);
  --shadow-glow-green:  0 0 0 4px rgba(29,158,117,0.18);
  --shadow-glow-blue:   0 0 0 4px rgba(55,138,221,0.18);
  --shadow-inset:       inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion */
  --ease-base:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:           120ms;
  --dur-base:           200ms;
  --dur-slow:           360ms;
}

@keyframes mwSignalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,.24); opacity: .86; }
  50% { box-shadow: 0 0 0 8px rgba(29,158,117,0); opacity: 1; }
}
@keyframes mwBluePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(55,138,221,.24); }
  50% { box-shadow: 0 0 0 8px rgba(55,138,221,0); }
}
@keyframes mwDataSweep {
  from { transform: translateX(-120%); opacity: 0; }
  20%, 70% { opacity: .75; }
  to { transform: translateX(160%); opacity: 0; }
}
@keyframes mwScanY {
  from { transform: translateY(-120%); opacity: 0; }
  18%, 72% { opacity: .75; }
  to { transform: translateY(180%); opacity: 0; }
}
@keyframes mwRouteStep {
  0%, 18%, 100% { border-color: rgba(83,74,183,.26); background: rgba(83,74,183,.16); }
  34%, 54% { border-color: rgba(83,74,183,.52); background: rgba(83,74,183,.28); }
}
@keyframes mwBarFlow {
  from { background-position: 0 0; }
  to { background-position: 48px 0; }
}

/* ============== Reset + base ============== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
/* Global chevron cap — prevents the SVG from growing in flex/grid containers */
.mw-chev { width: 14px; height: 14px; flex-shrink: 0; }
/* Native focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease-base), background-color .2s var(--ease-base), border-color .2s var(--ease-base), opacity .2s var(--ease-base);
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  transition: color .2s var(--ease-base), background-color .2s var(--ease-base), border-color .2s var(--ease-base), opacity .2s var(--ease-base), transform .2s var(--ease-base);
}

/* Global smooth motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, button, .btn, .mw-nav__cta, .mw-nav__link, .mw-nav__login,
  .mw-nav__dd-btn, .mw-nav__dd-item, .mw-pillar, .mw-pillar__visual,
  .mw-usecase, .mw-cap, .mw-pricing__tier,
  .mw-price, .mw-fcard, .mw-irow__shot, .mw-irow__shot img,
  .mw-footer a, .mw-footer__link, .mw-form input, .mw-form textarea,
  .mw-form select, .mw-header__logo, .mw-header__logo img,
  .mw-nav__dd-menu {
    transition:
      color .22s var(--ease-base),
      background .28s var(--ease-base),
      background-color .28s var(--ease-base),
      border-color .28s var(--ease-base),
      box-shadow .3s var(--ease-base),
      transform .35s var(--ease-base),
      opacity .28s var(--ease-base),
      filter .28s var(--ease-base);
  }
  .mw-header__logo:hover { opacity: 0.9; }
  .mw-header__logo:hover img { transform: rotate(-6deg) scale(1.06); }
  @media (hover: hover) {
    .mw-footer a:hover { color: #fff; transform: translateX(2px); }
    .mw-irow__shot:hover img { transform: scale(1.02); }
  }

  /* Scroll-reveal: fade in sections as they enter the viewport (no translate).
     Uses a CSS-only fail-safe: if JS doesn't add `is-visible` within the load
     animation, the section becomes visible anyway (#5 audit). */
  .mw-reveal {
    opacity: 0;
    transition: opacity .5s var(--ease-base);
    will-change: opacity;
    animation: mwRevealFallback 0s 1s forwards;
  }
  .mw-reveal.is-visible {
    opacity: 1;
    animation: none;
  }
  .mw-reveal-step {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ease-base), transform .55s var(--ease-out);
    will-change: opacity, transform;
    animation: mwRevealFallback 0s 1s forwards;
  }
  .mw-reveal-step.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .mw-reveal-step:nth-child(2) { transition-delay: 45ms; }
  .mw-reveal-step:nth-child(3) { transition-delay: 90ms; }
  .mw-reveal-step:nth-child(4) { transition-delay: 135ms; }
  .mw-reveal-step:nth-child(5) { transition-delay: 180ms; }
  @keyframes mwRevealFallback { to { opacity: 1; transform: none; } }

  /* Linked overview cards (a.mw-fcard): subtle hover lift to indicate clickability */
  a.mw-fcard {
    transition: transform .25s var(--ease-base), border-color .25s var(--ease-base), box-shadow .25s var(--ease-base);
  }
  @media (hover: hover) {
    a.mw-fcard:hover {
      transform: translateY(-2px);
      border-color: var(--brand-blue);
      box-shadow: 0 12px 28px rgba(15,23,42,0.08);
    }
    a.mw-fcard:hover .mw-fcard__num { color: var(--brand-blue-dark); }
  }
}

/* Content shell. Ramps with the viewport instead of stopping at a fixed cap:
   1320px up to a 1440 laptop, then +0.35px per extra viewport px, hard cap 1920.
   A static max-width either cramps a 3000px monitor or over-stretches a 1920. */
.container {
  width: min(92%, calc(1320px + (100vw - 1440px) * 0.35), 1920px);
  margin-inline: auto;
}
.is-hidden { display: none !important; }

/* ============== Header ============== */
.mw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  border-bottom: 1px solid var(--ink-line);
  padding-top: env(safe-area-inset-top);
}
.mw-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 14px 0;
}
.mw-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  padding: 6px 4px 6px 0;
  min-height: 44px;
}
.mw-header__mark { height: 32px; width: auto; display: block; }
.mw-header__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1;
}
.mw-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}
.mw-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-on-dark-2);
  padding: 8px 4px;
  transition: color .12s var(--ease-base);
}
.mw-nav__link:hover,
.mw-nav__link.is-active { color: var(--fg-on-dark-1); }

.mw-nav__dd { position: relative; }
.mw-nav__dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-on-dark-2);
  padding: 8px 4px;
}
.mw-nav__dd-btn:hover { color: var(--fg-on-dark-1); }
.mw-nav__dd-btn .mw-chev {
  width: 14px; height: 14px;
  transition: transform .2s var(--ease-base);
}
.mw-nav__dd.open .mw-nav__dd-btn .mw-chev { transform: rotate(180deg); }

.mw-nav__dd-menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 10px;
  min-width: 240px;
  background: #fff;
  color: var(--fg-1);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-1);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease-base), transform .16s var(--ease-base);
}
/* Invisible bridge so the cursor doesn't lose hover when crossing the gap */
.mw-nav__dd-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 16px;
}
.mw-nav__dd.open .mw-nav__dd-menu,
.mw-nav__dd:hover .mw-nav__dd-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mw-nav__dd-item {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.mw-nav__dd-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: var(--brand-gradient);
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .22s var(--ease-base), opacity .22s var(--ease-base);
}
@media (hover: hover) {
  .mw-nav__dd-item:hover {
    background: var(--surface-2);
    transform: translateX(2px);
  }
  .mw-nav__dd-item:hover::before {
    transform: scaleY(1);
    opacity: 1;
  }
}
.mw-nav__dd-item-label { display: block; font-weight: 600; color: var(--fg-1); }
.mw-nav__dd-item-desc  { display: block; font-size: 12px; color: var(--fg-3); margin-top: 2px; }

/* Login pill (subtle) and CTA (filled green) */
.mw-nav__login {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background .16s var(--ease-base), border-color .16s var(--ease-base);
}
.mw-nav__login:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}
.mw-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--brand-green);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: background .12s var(--ease-base);
}
.mw-nav__cta:hover { background: var(--brand-green-dark); }

.mw-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.mw-nav__toggle:active { transform: scale(0.94); }
.mw-nav__toggle span { display: block; width: 18px; height: 2px; background: #fff; position: relative; }
.mw-nav__toggle span::before,
.mw-nav__toggle span::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #fff;
}
.mw-nav__toggle span::before { top: -6px; }
.mw-nav__toggle span::after  { top:  6px; }

/* ============== Hero (landing) ============== */
.mw-hero {
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  padding: 96px 0 112px;
  position: relative;
  overflow: hidden;
  min-height: 600px;
  isolation: isolate;
}
/* The hero art is capped to the same 1920 shell as .container, so on a wide
   monitor it ends where every section below it ends. Left full-bleed under
   that width, where the 4% container gutter is too small to read as a step. */
.mw-hero__bg {
  position: absolute;
  inset: 0;
  width: min(100%, 1920px);
  margin-inline: auto;
  pointer-events: none;
}
.mw-hero__bg-img {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0;
  transition: opacity 1.2s var(--ease-base);
}
.mw-hero__bg-img.is-active { opacity: 1; }
.mw-hero__bg-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink-canvas) 0%, var(--ink-canvas) 16%, rgba(11,18,32,0.90) 30%, rgba(11,18,32,0.45) 52%, rgba(11,18,32,0.08) 80%, rgba(11,18,32,0.04) 100%),
    linear-gradient(180deg, rgba(11,18,32,0.45) 0%, rgba(11,18,32,0) 30%, rgba(11,18,32,0) 70%, rgba(11,18,32,0.55) 100%);
}
/* Only once the art is actually capped does its right edge stop at a hard cut
   mid-image; below that it bleeds off-screen and needs no fade. */
@media (min-width: 1921px) {
  .mw-hero__bg-fade {
    background:
      linear-gradient(270deg, var(--ink-canvas) 0%, rgba(11,18,32,0) 10%),
      linear-gradient(90deg, var(--ink-canvas) 0%, var(--ink-canvas) 16%, rgba(11,18,32,0.90) 30%, rgba(11,18,32,0.45) 52%, rgba(11,18,32,0.08) 80%, rgba(11,18,32,0.04) 100%),
      linear-gradient(180deg, rgba(11,18,32,0.45) 0%, rgba(11,18,32,0) 30%, rgba(11,18,32,0) 70%, rgba(11,18,32,0.55) 100%);
  }
}
.mw-hero__inner { position: relative; }
.mw-hero__copy { max-width: 660px; }
.mw-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
  text-wrap: balance;
}
.mw-hero h1 em { font-style: normal; color: #6ee7b7; }
.mw-hero__lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-on-dark-2);
  max-width: 520px;
  margin: 0 0 32px;
}
.mw-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============== Trust strip ============== */
.mw-trust {
  background: #fff;
  border-bottom: 1px solid var(--border-1);
  padding: 28px 0;
  overflow: hidden;
}
.mw-trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.mw-trust__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.mw-trust__items { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.mw-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-2);
  white-space: nowrap;
}

/* ============== Sections ============== */
.mw-section { padding: var(--space-16) 0; }
.mw-section--shaded { background: var(--surface-2); }
.mw-section--ink { background: var(--ink-canvas); color: var(--fg-on-dark-1); }
.mw-section--ink .mw-section__heading h2 { color: #fff; }
.mw-section--ink .mw-section__heading p  { color: var(--fg-on-dark-2); }
.mw-section__heading {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin-bottom: var(--space-10);
}
.mw-section__heading .eyebrow,
.mw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-green-dark);
  margin: 0;
}
.mw-section__heading .eyebrow::after,
.mw-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.mw-section--ink .mw-section__heading .eyebrow { color: #6ee7b7; }
.mw-section__heading h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}
.mw-section__heading p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* ============== Pillars ============== */
.mw-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  isolation: isolate;
}
.mw-pillar {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,251,253,.96) 100%),
    radial-gradient(circle at 12% 0%, rgba(29,158,117,.10), transparent 38%);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.mw-pillar__visual {
  width: 100%;
  min-height: 148px;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
  background:
    linear-gradient(90deg, rgba(12,23,43,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(12,23,43,.04) 1px, transparent 1px),
    #f3f7fb;
  background-size: 22px 22px, 22px 22px, auto;
  overflow: hidden;
}
.mw-pillar::after {
  content: '';
  position: absolute;
  right: -42px;
  top: -42px;
  width: 132px;
  height: 132px;
  border-radius: 999px;
  border: 1px solid rgba(12,23,43,.06);
  pointer-events: none;
}
.mw-pillar--connect .mw-pillar__visual {
  background:
    linear-gradient(90deg, rgba(19,125,91,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(19,125,91,.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(216,241,231,.95), #fff 72%);
  background-size: 22px 22px, 22px 22px, auto;
}
.mw-pillar--decide .mw-pillar__visual {
  background:
    linear-gradient(90deg, rgba(42,110,181,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(42,110,181,.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(220,234,248,.95), #fff 72%);
  background-size: 22px 22px, 22px 22px, auto;
}
.mw-pillar--coordinate .mw-pillar__visual {
  background:
    linear-gradient(90deg, rgba(83,74,183,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(83,74,183,.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(226,224,243,.95), #fff 72%);
  background-size: 22px 22px, 22px 22px, auto;
}
.mw-pillar h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
  margin: 0;
  color: var(--fg-1);
}
.mw-pillar p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 12px 0 14px;
}
.mw-pillar ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.mw-pillar li {
  position: relative;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-3);
  padding-left: 16px;
}
.mw-pillar li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-blue);
}
.mw-edge-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 116px;
  overflow: hidden;
}
.mw-edge-map::before {
  content: '';
  position: absolute;
  left: 20%;
  right: 26%;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(19,125,91,.26);
  border-bottom: 1px solid rgba(19,125,91,.16);
}
.mw-edge-map::after {
  content: '';
  position: absolute;
  left: 48%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--brand-green);
  box-shadow: 0 0 0 8px rgba(29,158,117,.12);
}
.mw-edge-map__node,
.mw-edge-map__box,
.mw-vision-panel__rule,
.mw-routing-board span {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(12,23,43,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 2px rgba(12,23,43,.04);
}
.mw-edge-map__node {
  position: relative;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
.mw-edge-map__node::before,
.mw-edge-map__node::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(59,74,102,.28);
}
.mw-edge-map__node::before { top: 14px; }
.mw-edge-map__node::after { top: 24px; width: 44%; right: auto; }
.mw-edge-map__box {
  grid-column: 3;
  grid-row: 1 / span 2;
  border-radius: 8px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.68)),
    radial-gradient(circle at 50% 50%, rgba(29,158,117,.14), transparent 58%);
}
.mw-edge-map__box::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 6px;
  border: 1px solid rgba(19,125,91,.16);
}
.mw-edge-map__box::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 18px;
  width: 5px;
  height: 64%;
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(180deg, rgba(19,125,91,.34) 0 5px, transparent 5px 12px);
}
.mw-edge-map__box i,
.mw-vision-panel__rule i,
.mw-routing-board i,
.mw-routing-board b {
  display: block;
  border-radius: 999px;
}
.mw-edge-map__box i {
  height: 5px;
  background: rgba(19,125,91,.22);
}
.mw-edge-map__box i:first-child { width: 82%; background: var(--brand-green); }
.mw-edge-map__box i:nth-child(2) { width: 58%; }
.mw-edge-map__box i:nth-child(3) { width: 70%; }
.mw-vision-panel {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 12px;
  height: 116px;
}
.mw-vision-panel__frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(135deg, #172237, #263756);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.mw-vision-panel__frame::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110,231,183,.18), rgba(55,138,221,.20));
}
.mw-vision-panel__frame::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #6ee7b7;
  box-shadow: 13px 0 0 rgba(110,231,183,.46), 26px 0 0 rgba(110,231,183,.26);
}
.mw-vision-panel__zone,
.mw-vision-panel__box {
  position: absolute;
  border-radius: 4px;
}
.mw-vision-panel__zone {
  inset: 18px 15px 16px 22px;
  border: 1px dashed rgba(110,231,183,.8);
  overflow: hidden;
}
.mw-vision-panel__zone::after {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  top: 0;
  height: 18px;
  background: linear-gradient(180deg, transparent, rgba(110,231,183,.28), transparent);
  transform: translateY(-120%);
  pointer-events: none;
}
.mw-vision-panel__box {
  left: 44%;
  top: 34%;
  width: 28%;
  height: 30%;
  border: 2px solid #6ee7b7;
  box-shadow: 0 0 0 1px rgba(11,18,32,.25);
}
.mw-vision-panel__rule {
  border-radius: 8px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
}
.mw-vision-panel__rule::before {
  content: '';
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, var(--brand-blue) 0 5px, transparent 6px),
    conic-gradient(from 24deg, rgba(55,138,221,.22), rgba(29,158,117,.38), rgba(83,74,183,.28), rgba(55,138,221,.22));
}
.mw-vision-panel__rule i {
  height: 6px;
  background: rgba(42,110,181,.20);
}
.mw-vision-panel__rule i:first-child { width: 78%; background: var(--brand-blue); }
.mw-vision-panel__rule i:nth-child(2) { width: 52%; }
.mw-vision-panel__rule i:nth-child(3) { width: 66%; }
.mw-routing-board {
  position: relative;
  display: grid;
  gap: 8px;
  height: 116px;
  padding-left: 22px;
}
.mw-routing-board::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-purple), rgba(83,74,183,.18));
}
.mw-routing-board span {
  border-radius: 8px;
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74));
}
.mw-routing-board i {
  width: 18px;
  height: 18px;
  background: rgba(83,74,183,.16);
  border: 1px solid rgba(83,74,183,.26);
}
.mw-routing-board b {
  width: 72%;
  height: 6px;
  background: rgba(83,74,183,.24);
}
.mw-routing-board span:nth-child(2) b { width: 58%; }
.mw-routing-board span:nth-child(3) b { width: 66%; }

@media (prefers-reduced-motion: no-preference) {
  .mw-edge-map::after { animation: mwSignalPulse 3.2s var(--ease-base) infinite; }
  .mw-edge-map__node:nth-child(1) { animation: mwSignalPulse 4.8s var(--ease-base) infinite; }
  .mw-edge-map__node:nth-child(2) { animation: mwSignalPulse 4.8s var(--ease-base) .7s infinite; }
  .mw-edge-map__node:nth-child(3) { animation: mwSignalPulse 4.8s var(--ease-base) 1.4s infinite; }
  .mw-edge-map__node:nth-child(4) { animation: mwSignalPulse 4.8s var(--ease-base) 2.1s infinite; }
  .mw-edge-map__box i:first-child {
    background: linear-gradient(90deg, var(--brand-green), #6ee7b7, var(--brand-green));
    background-size: 48px 100%;
    animation: mwBarFlow 2.8s linear infinite;
  }
  .mw-vision-panel__zone::after { animation: mwScanY 3.8s var(--ease-base) infinite; }
  .mw-vision-panel__box { animation: mwSignalPulse 2.8s var(--ease-base) infinite; }
  .mw-vision-panel__rule::before { animation: mwBluePulse 3.4s var(--ease-base) infinite; }
  .mw-routing-board span:nth-child(1) i { animation: mwRouteStep 4.2s var(--ease-base) infinite; }
  .mw-routing-board span:nth-child(2) i { animation: mwRouteStep 4.2s var(--ease-base) .75s infinite; }
  .mw-routing-board span:nth-child(3) i { animation: mwRouteStep 4.2s var(--ease-base) 1.5s infinite; }
}

@media (min-width: 761px) {
  .mw-pillars::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 72px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(29,158,117,.20), rgba(55,138,221,.24), rgba(83,74,183,.22));
    z-index: 0;
  }
  .mw-pillar::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 21px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #fff;
    border: 3px solid var(--brand-green);
    box-shadow: 0 0 0 6px rgba(29,158,117,.10);
    z-index: 2;
  }
  .mw-pillar--decide::before {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 6px rgba(55,138,221,.10);
  }
  .mw-pillar--coordinate::before {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 6px rgba(83,74,183,.10);
  }
}

/* ============== Use cases (5-up dark) ============== */
.mw-usecases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.mw-usecase {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px;
}
.mw-usecase::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-gradient);
  transform: scaleX(.28);
  transform-origin: left;
  opacity: .44;
  transition: transform .28s var(--ease-base), opacity .28s var(--ease-base);
}
.mw-usecase h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}
.mw-usecase p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-on-dark-2);
  margin: 0;
}

/* ============== Capability gallery ============== */
.mw-capability {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) 0;
  border-bottom: 1px dashed var(--border-1);
}
.mw-capability:last-child { border-bottom: 0; }
.mw-capability--flip > :first-child { order: 2; }
.mw-capability__copy h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin: 12px 0 12px;
  letter-spacing: -0.01em;
}
.mw-capability__copy .eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-dark);
  margin: 0;
}
.mw-capability__copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.mw-capability__copy ul {
  list-style: none;
  padding: 0; margin: 0 0 18px;
  display: grid; gap: 8px;
}
.mw-capability__copy li {
  font-size: 14px;
  color: var(--fg-2);
  display: flex; gap: 10px;
}
.mw-capability__copy li::before { content: '✓'; color: var(--brand-green); font-weight: 800; }
.mw-capability__shot {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.mw-capability__shot::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 34%, rgba(110,231,183,.16) 45%, rgba(96,165,250,.16) 52%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 28%);
  transform: translateX(-120%);
  pointer-events: none;
}
.mw-capability__shot::after {
  content: '';
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 18px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #6ee7b7;
  box-shadow: 0 0 0 5px rgba(110,231,183,.16);
  opacity: .88;
  pointer-events: none;
}
.mw-capability__shot img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mw-capability__shot::before { animation: mwDataSweep 6.5s var(--ease-base) infinite; }
  .mw-capability__shot::after { animation: mwSignalPulse 3.6s var(--ease-base) infinite; }
}
@media (hover: hover) {
  .mw-capability__shot { transition: transform .32s var(--ease-base), box-shadow .32s var(--ease-base), border-color .32s var(--ease-base); }
  .mw-capability:hover .mw-capability__shot {
    transform: translateY(-3px);
    border-color: rgba(55,138,221,.32);
    box-shadow: 0 24px 58px rgba(8,18,38,.16);
  }
}

/* ============== Pricing ============== */
.mw-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mw-price {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s var(--ease-base), box-shadow .25s var(--ease-base), border-color .25s var(--ease-base);
}
@media (hover: hover) {
  .mw-price:hover {
    transform: translateY(-4px);
    border-color: var(--brand-green);
    box-shadow: 0 18px 36px rgba(15,23,42,0.08);
  }
}
.mw-price.featured {
  border-color: var(--brand-green);
  box-shadow: 0 24px 50px rgba(29,158,117,0.12);
  position: relative;
}
.mw-price.featured::before {
  content: attr(data-badge);
  position: absolute;
  top: 12px; right: 12px;
  background: var(--brand-green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mw-price__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-green-dark);
  margin: 0;
}
.mw-price h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
}
.mw-price__amount {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-1);
}
.mw-price__amount small {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-3);
}
.mw-price__desc {
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
}
.mw-price ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}
.mw-price li {
  font-size: 13.5px;
  color: var(--fg-2);
  display: flex;
  gap: 10px;
}
.mw-price li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--brand-green);
  margin-top: 7px;
  flex-shrink: 0;
}
.mw-price .btn { width: 100%; justify-content: center; }

.mw-price__setup {
  font-size: 12px;
  color: var(--fg-3);
  margin: -10px 0 0;
  line-height: 1.45;
}

.mw-pricing--4up { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mw-pricing--4up .mw-price { padding: 22px; gap: 16px; }
@media (max-width: 1240px) {
  .mw-pricing--4up { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mw-pricing--4up .mw-price { padding: 28px; gap: 18px; }
}
@media (max-width: 760px) {
  .mw-pricing--4up { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* ============== Enterprise banner (the "fourth plan" presented as a wide call-out) ============== */
.mw-price-banner {
  margin-top: 28px;
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  border-radius: 18px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-on-dark);
}
.mw-price-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 100% 50%, rgba(83,74,183,0.22), transparent 70%);
  pointer-events: none;
}
.mw-price-banner__copy { position: relative; }
.mw-price-banner__copy .mw-price__tag { color: #c4b5fd; margin: 0; }
.mw-price-banner__copy h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 6px 0 8px;
  color: #fff;
  letter-spacing: -0.01em;
}
.mw-price-banner__copy > p {
  margin: 0 0 14px;
  color: var(--fg-on-dark-2);
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
}
.mw-price-banner__copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.mw-price-banner__copy li {
  font-size: 13.5px;
  color: var(--fg-on-dark-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mw-price-banner__copy li::before {
  content: '✓';
  color: #6ee7b7;
  font-weight: 700;
}
.mw-price-banner__cta { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.mw-price-banner__cta .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .mw-price-banner { grid-template-columns: 1fr; padding: 24px; }
  .mw-price-banner__cta { align-items: stretch; }
  .mw-price-banner__cta .btn { width: 100%; justify-content: center; }
}

.mw-pricing__note {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.55;
}
.mw-pricing__note a {
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mw-pricing__note a:hover { color: var(--brand-blue); }

/* ============== Footer ============== */
.mw-footer {
  background: var(--ink-canvas);
  color: var(--fg-on-dark-2);
  padding: 64px 0 32px;
  position: relative;
}
.mw-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-blue), transparent);
  opacity: 0.5;
}
.mw-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-8);
}
.mw-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.mw-footer__mark { width: 56px; height: 56px; }
.mw-footer__word {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}
.mw-footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
  margin: 16px 0 0;
  color: var(--fg-on-dark-3);
}
.mw-footer h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 14px;
}
.mw-footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
}
.mw-footer ul a {
  font-size: 14px;
  color: var(--fg-on-dark-2);
  transition: color .12s var(--ease-base);
}
@media (hover: hover) {
  .mw-footer ul a:hover { color: #fff; }
}
.mw-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mw-footer__bottom small {
  font-size: 12px;
  color: var(--fg-on-dark-3);
}
.mw-footer__legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.mw-footer__legal a {
  font-size: 12px;
  color: var(--fg-on-dark-3);
}
.mw-footer__legal a:hover { color: #fff; }

/* ============== Buttons ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  /* WCAG 2.5.5 target size. Previously only applied under 480px, which left
     buttons at ~43px on tablets. The compact .mw-stickycta .btn overrides this
     later in the file and keeps its own 40px. */
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14.5px;
  transition: all .16s var(--ease-base);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--brand-green); color: #fff; }
.btn-primary:hover { background: var(--brand-green-dark); }
.btn-outline-light {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.20);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
.btn-outline {
  background: #fff;
  color: var(--fg-1);
  border-color: var(--border-2);
}
.btn-outline:hover { border-color: var(--brand-blue); color: var(--brand-blue-dark); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg-1); }

/* ============== Page hero (smaller) ============== */
.mw-phero {
  background: var(--ink-canvas);
  color: var(--fg-on-dark-1);
  padding: 80px 0 64px;
  position: relative;
  overflow: hidden;
}
.mw-phero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 80% 30%, rgba(29,158,117,0.18), transparent 70%);
  pointer-events: none;
}
.mw-phero--blue::before {
  background: radial-gradient(50% 50% at 80% 30%, rgba(55,138,221,0.20), transparent 70%);
}
.mw-phero--purple::before {
  background: radial-gradient(50% 50% at 80% 30%, rgba(83,74,183,0.22), transparent 70%);
}
.mw-phero__inner { position: relative; }
.mw-phero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  text-wrap: balance;
  max-width: 820px;
}
.mw-phero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6ee7b7;
  margin-bottom: 16px;
}
.mw-phero--blue .mw-phero__eyebrow   { color: #93c5fd; }
.mw-phero--purple .mw-phero__eyebrow { color: #c4b5fd; }
.mw-phero__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-on-dark-2);
  margin: 0;
  max-width: 620px;
}
.mw-phero__proofs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}
.mw-phero__proofs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: var(--fg-on-dark-1);
  font-size: 13px;
  font-weight: 700;
}
.mw-phero__proofs li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110,231,183,.14);
}
@media (prefers-reduced-motion: no-preference) {
  .mw-phero__proofs li::before { animation: mwSignalPulse 3.8s var(--ease-base) infinite; }
  .mw-phero__proofs li:nth-child(2)::before { animation-delay: .45s; }
  .mw-phero__proofs li:nth-child(3)::before { animation-delay: .9s; }
  .mw-phero__proofs li:nth-child(4)::before { animation-delay: 1.35s; }
}
.mw-phero--security { background: #0B1220; }
.mw-phero--security .mw-phero__lead { max-width: 660px; }
.mw-security-visual {
  position: relative;
  min-height: 310px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    radial-gradient(80% 80% at 80% 0%, rgba(55,138,221,.24), transparent 72%);
  box-shadow: 0 28px 70px rgba(0,0,0,.32);
  overflow: hidden;
}
.mw-security-visual::before {
  content: '';
  position: absolute;
  inset: 16px;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000, transparent 90%);
  opacity: .7;
  pointer-events: none;
}
.mw-security-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(110,231,183,.12) 48%, rgba(96,165,250,.12) 55%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}
.mw-security-visual__rail,
.mw-security-visual__panel,
.mw-security-visual__footer {
  position: relative;
  z-index: 1;
}
.mw-security-visual__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.mw-security-visual__rail span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  background: rgba(11,18,32,.62);
  color: var(--fg-on-dark-1);
  font-size: 12px;
  font-weight: 800;
}
.mw-security-visual__panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-sm);
  background: rgba(11,18,32,.78);
}
.mw-security-visual__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mw-security-visual__row:last-child { border-bottom: 0; }
.mw-security-visual__row span {
  color: var(--fg-on-dark-3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.mw-security-visual__row b {
  color: var(--fg-on-dark-1);
  font-size: 13px;
  text-align: right;
}
.mw-security-visual__footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr;
  gap: 10px;
  margin-top: 20px;
}
.mw-security-visual__footer span {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #6ee7b7, #60a5fa, #6ee7b7);
  background-size: 180% 100%;
  opacity: .82;
}
@media (prefers-reduced-motion: no-preference) {
  .mw-security-visual::after { animation: mwDataSweep 7s var(--ease-base) infinite; }
  .mw-security-visual__rail span:first-child { animation: mwBluePulse 4.2s var(--ease-base) infinite; }
  .mw-security-visual__footer span { animation: mwBarFlow 4.8s linear infinite; }
  .mw-security-visual__footer span:nth-child(2) { animation-delay: .6s; }
  .mw-security-visual__footer span:nth-child(3) { animation-delay: 1.1s; }
}
@media (max-width: 960px) {
  .mw-security-visual { max-width: 560px; min-height: 280px; }
}
@media (max-width: 760px) {
  .mw-security-visual { display: none; }
}
@media (max-width: 560px) {
  .mw-security-visual { padding: 18px; min-height: 0; }
  .mw-security-visual__rail { grid-template-columns: 1fr; }
  .mw-security-visual__row { display: grid; gap: 4px; }
  .mw-security-visual__row b { text-align: left; }
}

/* Solution hero — two-column with product shot + CTA row */
.mw-phero__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.mw-phero__copy { min-width: 0; }
.mw-phero__media { min-width: 0; }
.mw-phero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.mw-phero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.mw-phero__actions .mw-share { margin-top: 0; }
@media (max-width: 960px) {
  .mw-phero__inner--split { grid-template-columns: 1fr; gap: 40px; }
  .mw-phero__media { order: 2; max-width: 560px; margin-top: 4px; }
}

/* Share button (injected on solution heroes by elian.js) */
.mw-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 10px 17px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #e5edf7;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
}
.mw-share:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); }
.mw-share:active { transform: translateY(1px); }
.mw-share:focus-visible { outline: 2px solid #1D9E75; outline-offset: 2px; }
.mw-share__icon { flex: none; }
/* Share + LinkedIn sit as one group on news posts. The row owns the top
   margin so the two pills line up on their own baseline. */
.mw-sharerow { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; }
.mw-sharerow .mw-share { margin-top: 0; }
.mw-phero__actions .mw-sharerow { margin-top: 0; }
/* Icon-only: keep a 44px hit area even though the glyph is 18px. */
.mw-share--icon {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  text-decoration: none;
  position: relative;
}
/* The base pill is tuned for the dark hero. On the light news list it would
   be near-invisible, so the ghost variant re-tones it for a pale surface. */
.mw-share--ghost {
  color: var(--fg-2);
  background: #fff;
  border-color: var(--border-1);
}
.mw-share--ghost:hover { background: var(--surface-2); border-color: var(--fg-3); }
.mw-sharerow--list { margin-top: 14px; }
/* Icon-only buttons have no label to overwrite, so confirm the copy with a
   tooltip instead. Absolutely positioned: no reflow of the list. */
.mw-share--icon.is-copied::after {
  content: attr(data-copied);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: var(--ink-canvas);
  border-radius: 6px;
  pointer-events: none;
}
.mw-share.is-copied {
  color: #6ee7b7;
  border-color: rgba(110, 231, 183, 0.5);
  background: rgba(29, 158, 117, 0.14);
}
@media (max-width: 760px) {
  .mw-share { margin-top: 22px; min-height: 44px; padding: 11px 18px; }
}

/* ============== Feature grid (numbered) ============== */
.mw-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mw-fgrid--4up { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mw-fgrid--4up .mw-fcard { padding: 22px; }
@media (max-width: 1100px) {
  .mw-fgrid--4up { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mw-fgrid--4up .mw-fcard { padding: 26px; }
}
.mw-fcard {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: baseline;
}
.mw-fcard::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  opacity: .86;
  transition: transform .28s var(--ease-base);
}
.mw-fcard__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-blue);
  margin: 0;
  letter-spacing: 0.08em;
}
.mw-fcard h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--fg-1);
}
.mw-fcard p {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 12px 0 0;
}

/* ============== Image row ============== */
.mw-section--alt { background: var(--surface-2); }
.mw-irow {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-10);
  align-items: center;
}
.mw-irow--flip {
  grid-template-columns: 1.1fr 1fr;
  direction: rtl;
}
.mw-irow--flip > * { direction: ltr; }
.mw-irow__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 14px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.mw-irow__copy p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}
.mw-irow__shot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  box-shadow: 0 12px 30px rgba(15,23,42,0.06);
  background: #fff;
}
.mw-irow__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============== CTA section ============== */
.mw-cta {
  background: var(--ink-canvas);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.mw-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 100%, rgba(29,158,117,0.20), transparent 70%);
}
.mw-cta__inner { position: relative; text-align: center; }
.mw-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  margin: 0 0 28px;
  color: #fff;
  letter-spacing: -0.01em;
}
.mw-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============== Stats ============== */
.mw-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.mw-stat__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--brand-green);
  line-height: 1;
  margin-bottom: 8px;
}
.mw-stat__label {
  font-size: 13px;
  color: var(--fg-3);
  font-weight: 500;
}

/* ============== Pricing comparison table ============== */
.mw-ptable {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mw-ptable table { width: 100%; border-collapse: collapse; min-width: 540px; }
.mw-ptable th,
.mw-ptable td {
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border-1);
}
.mw-ptable th {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--fg-1);
  font-size: 13px;
}
.mw-ptable td:not(:first-child),
.mw-ptable th:not(:first-child) { text-align: center; }
.mw-ptable td.yes { color: var(--brand-green); font-weight: 700; }
.mw-ptable tr:last-child td { border-bottom: 0; }

/* ============== Contact form ============== */
.mw-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}
.mw-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.mw-form input,
.mw-form textarea,
.mw-form select {
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--fg-1);
  transition: border-color .16s var(--ease-base), box-shadow .16s var(--ease-base);
}
.mw-form input:focus,
.mw-form textarea:focus,
.mw-form select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(55,138,221,0.18);
}
.mw-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-body);
}
/* Prevent iOS auto-zoom on focus by ensuring 16px+ font on inputs */
@media (max-width: 760px) {
  .mw-form input,
  .mw-form textarea,
  .mw-form select { font-size: 16px; }
}
.mw-form .form-status {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-2);
}
.mw-form .form-status[data-state="success"] { background: var(--success-soft); color: var(--brand-green-dark); }
.mw-form .form-status[data-state="error"]   { background: var(--danger-soft);  color: var(--danger); }
.mw-form .form-status[data-state="pending"] { background: var(--info-soft);    color: var(--brand-blue-dark); }

/* ============== About panel ============== */
.mw-about {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.mw-about h2 {
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.mw-about p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.mw-about__side {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 28px;
}
.mw-about__side h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  margin: 0 0 14px;
}
.mw-about__side dl {
  margin: 0;
  display: grid;
  gap: 12px;
}
.mw-about__side dt { font-size: 12px; color: var(--fg-3); }
.mw-about__side dd { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--fg-1); }
/* Multi-sentence values. The dd above is sized and weighted for a short value
   (a name, a figure); a paragraph in 15px/600 reads as a wall of bold. The
   sub-processor entry has to be prose because it has to say who receives what
   and where that applies, so it opts into normal weight instead. */
.mw-about__side dd.mw-about__prose {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
}

/* ============== Language switcher (flags) ============== */
.mw-lang { position: relative; }
.mw-lang__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-on-dark-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
}
.mw-lang__btn:hover { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.mw-lang__globe { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.mw-lang__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
}
.mw-lang__flag svg { width: 100%; height: 100%; display: block; }
.mw-lang__menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 10px;
  min-width: 180px;
  background: #fff;
  color: var(--fg-1);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-1);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s var(--ease-base), transform .16s var(--ease-base);
}
.mw-lang__menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 16px;
}
.mw-lang.open .mw-lang__menu,
.mw-lang:hover .mw-lang__menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mw-lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
}
@media (hover: hover) {
  .mw-lang__item:hover { background: var(--surface-2); }
}
.mw-lang__item[aria-current="true"] { color: var(--brand-blue-dark); font-weight: 700; }

/* Footer locale row */
.mw-footer__langs {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.mw-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-on-dark-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.mw-footer__lang:hover { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); }
.mw-footer__lang[aria-current="true"] { color: #fff; border-color: rgba(255,255,255,0.30); }

/* ============== Legal pages ============== */
.mw-legal {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--surface-canvas);
}
.mw-legal__inner {
  max-width: 780px;
  margin: 0 auto;
}
.mw-legal h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.mw-legal .last-updated {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0 0 32px;
}
.mw-legal section { margin-bottom: var(--space-8); }
.mw-legal h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg-1);
}
.mw-legal h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--fg-1);
}
.mw-legal p,
.mw-legal li,
.mw-legal dd {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}
.mw-legal p { margin: 0 0 12px; }
.mw-legal ul, .mw-legal ol {
  margin: 0 0 14px;
  padding-left: 1.2em;
}
.mw-legal li { margin-bottom: 6px; }
.mw-legal li::marker { color: var(--fg-4); }
.mw-legal dl { display: grid; gap: 12px; margin: 0 0 16px; }
.mw-legal dt { font-weight: 700; color: var(--fg-1); font-size: 15px; }
.mw-legal dd { margin: 0; }
.mw-legal a { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.mw-legal a:hover { color: var(--brand-blue); }
.mw-legal strong { color: var(--fg-1); font-weight: 700; }
.mw-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}
.mw-legal th, .mw-legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
}
.mw-legal th { background: var(--surface-2); font-weight: 700; color: var(--fg-1); }

/* ============== Cookie banner ============== */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 80;
  background: var(--ink-1);
  color: var(--fg-on-dark-1);
  border: 1px solid var(--border-on-dark);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s var(--ease-base), transform .25s var(--ease-base);
  max-width: 720px;
  margin: 0 auto;
}
.cookie-banner.visible { opacity: 1; transform: none; }
.cookie-banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-banner-content p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-on-dark-2);
  flex: 1;
  min-width: 240px;
}
.cookie-banner-content a { color: #6ee7b7; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; }
.cookie-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-on-dark);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}
.cookie-btn-accept { background: var(--brand-green); border-color: var(--brand-green); }
.cookie-btn-accept:hover { background: var(--brand-green-dark); }
.cookie-btn-decline:hover { background: rgba(255,255,255,0.12); }

/* ============== Responsive ============== */
@media (max-width: 1024px) {
  .mw-hero { padding: 72px 0 88px; min-height: 520px; }
  .mw-hero__bg-img { width: 90%; opacity: 0; }
  .mw-hero__bg-img.is-active { opacity: 0.35; }
  .mw-hero__bg-fade {
    background: linear-gradient(180deg, var(--ink-canvas) 0%, rgba(11,18,32,0.6) 60%, var(--ink-canvas) 100%);
  }
  .mw-pillars { grid-template-columns: repeat(2, 1fr); }
  /* 3-up so the five cards land 3+2 rather than 2+2+1 with an orphan. */
  .mw-usecases { grid-template-columns: repeat(3, 1fr); }
  .mw-pricing { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .mw-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .mw-footer__brand { grid-column: 1 / -1; }
  .mw-fgrid { grid-template-columns: repeat(2, 1fr); }
  .mw-stats { grid-template-columns: repeat(2, 1fr); }
  .mw-irow, .mw-irow--flip { grid-template-columns: 1fr; direction: ltr; }
  .mw-about { grid-template-columns: 1fr; }
}
/* Nav drawer: kicks in earlier than content stacking so tablets get the drawer.
   Briefly 1100 while Integrations was a top-level item — the bar had zero slack
   in the 961-1100 band and a fifth entry overflowed the header. That item is
   back in the Resources dropdown, so the original 960 threshold applies again. */
@media (max-width: 960px) {
  .mw-nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    flex-direction: column;
    align-items: stretch;
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--ink-1);
    gap: 2px;
    overflow-y: auto;
    z-index: 49;
    transform: translateX(105%);
    transition: transform .32s var(--ease-out);
    box-shadow: -16px 0 40px rgba(0,0,0,0.35);
    margin-left: 0;
    visibility: hidden;
  }
  .mw-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  /* Backdrop */
  .mw-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8,12,22,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-base);
    z-index: 48;
  }
  .mw-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .mw-nav.is-open .mw-nav__link,
  .mw-nav.is-open .mw-nav__dd-btn {
    width: 100%;
    padding: 14px 12px;
    font-size: 16px;
    min-height: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    justify-content: space-between;
    border-radius: 8px;
  }
  .mw-nav.is-open .mw-nav__link:active,
  .mw-nav.is-open .mw-nav__dd-btn:active { background: rgba(255,255,255,0.06); }
  .mw-nav.is-open .mw-nav__dd { width: 100%; }
  /* Smooth accordion: animate max-height + opacity. Direct children get a
     translateY in for a subtle staggered feel. */
  .mw-nav.is-open .mw-nav__dd-menu {
    position: static;
    display: block;
    pointer-events: none;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    margin: 0;
    color: var(--fg-on-dark-1);
    min-width: 0;
    max-height: 0;
    opacity: 0;
    padding: 0 0 0 12px;
    overflow: hidden;
    transition:
      max-height .3s var(--ease-out),
      opacity .2s var(--ease-base),
      padding .3s var(--ease-out);
  }
  .mw-nav.is-open .mw-nav__dd-menu > .mw-nav__dd-item {
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity .25s var(--ease-base) .05s,
      transform .25s var(--ease-out) .05s;
  }
  .mw-nav.is-open .mw-nav__dd.open .mw-nav__dd-menu {
    max-height: 480px;
    opacity: 1;
    pointer-events: auto;
    padding: 4px 0 8px 12px;
  }
  .mw-nav.is-open .mw-nav__dd.open .mw-nav__dd-menu > .mw-nav__dd-item {
    opacity: 1;
    transform: none;
  }
  /* Chevron flip is already declared globally; just ensure smoothness */
  .mw-nav.is-open .mw-nav__dd-btn .mw-chev {
    transition: transform .25s var(--ease-out);
  }
  /* Tap feedback on the dd-btn */
  .mw-nav.is-open .mw-nav__dd-btn:active {
    transform: scale(0.985);
    background: rgba(255,255,255,0.04);
  }
  .mw-nav.is-open .mw-nav__dd-item {
    min-height: 44px;
    padding: 12px 12px;
  }
  .mw-nav.is-open .mw-nav__dd-item-label { color: #fff; }
  .mw-nav.is-open .mw-nav__dd-item-desc  { color: var(--fg-on-dark-3); }
  .mw-nav.is-open .mw-nav__dd-item:active { background: rgba(255,255,255,0.08); }
  /* Lang switcher in drawer: horizontal flag-pill row, no dropdown */
  .mw-nav.is-open .mw-lang {
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    position: static;
    display: block;
  }
  .mw-nav.is-open .mw-lang__btn { display: none; }
  .mw-nav.is-open .mw-lang__menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  .mw-nav.is-open .mw-lang__menu::before { display: none; }
  .mw-nav.is-open .mw-lang__item {
    flex: 1 1 calc(50% - 3px);
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--fg-on-dark-1);
    justify-content: flex-start;
  }
  .mw-nav.is-open .mw-lang__item[aria-current="true"] {
    background: rgba(110,231,183,0.10);
    border-color: rgba(110,231,183,0.45);
    color: #6ee7b7;
  }
  .mw-nav.is-open .mw-lang__item:active { background: rgba(255,255,255,0.10); }
  .mw-nav.is-open .mw-nav__cta,
  .mw-nav.is-open .mw-nav__login {
    margin-top: 8px;
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding: 14px 16px;
    font-size: 15px;
  }
  .mw-nav.is-open .mw-nav__cta { margin-top: 16px; }
  .mw-nav__toggle { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-nav { transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .mw-capability__shot::before,
  .mw-icard__shot::after,
  .mw-security-visual::after,
  .mw-vision-panel__zone::after {
    display: none !important;
  }
}

/* Content stacking on phone-sized viewports — also retunes vertical rhythm
   tokens so heading-to-content gaps don't blow up (audit #56-66). */
@media (max-width: 760px) {
  .mw-section { padding: 40px 0; }
  .mw-section__heading { margin-bottom: 20px; gap: 8px; }
  .mw-hero { padding: 56px 0 64px; min-height: 0; }
  .mw-phero { padding: 48px 0 40px; }
  .mw-pillars { grid-template-columns: 1fr; gap: 14px; }
  .mw-capability,
  .mw-capability--flip {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  .mw-capability--flip > :first-child { order: 0; }
  .mw-trust__inner { justify-content: flex-start; }
  .mw-fgrid { grid-template-columns: 1fr; gap: 14px; }
  .mw-fgrid--4up { gap: 14px; }
  .mw-pricing { gap: 14px; }
  .mw-usecases { gap: 14px; }
  .mw-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mw-footer { padding: 40px 0 32px; }
  .mw-footer__bottom { margin-top: 28px; padding-top: 18px; }
  .mw-cta { padding: 48px 0; }
  .mw-cta h2 { margin: 0 0 20px; }
  .mw-irow,
  .mw-irow--flip {
    gap: 24px;
  }
  .mw-irow__shot {
    max-width: 480px;
    margin-inline: auto;
  }
  /* Pillar / fcard description spans full width without indent on mobile (#12) */
  .mw-pillar p,
  .mw-pillar ul {
    margin-top: 10px;
    padding-left: 0;
  }
  .mw-fcard p { margin: 8px 0 0; }
  .mw-pillar { padding: 18px; }
  .mw-fcard { padding: 18px; }
  /* Tighter hero copy on phones */
  .mw-hero__copy { max-width: 100%; }
  .mw-hero__lead { max-width: 100%; }
  /* Page hero room */
  .mw-phero h1 { margin: 0 0 12px; }
  .mw-phero__lead { font-size: 16px; }
}
@media (max-width: 480px) {
  .mw-usecases { grid-template-columns: 1fr; }
  .mw-footer__grid { grid-template-columns: 1fr; }
  .mw-hero h1 { font-size: clamp(30px, 9vw, 40px); }
  .mw-phero h1 { font-size: clamp(26px, 7.5vw, 34px); }
  .mw-section__heading h2 { font-size: clamp(22px, 6.5vw, 32px); }
  .btn { padding: 12px 16px; font-size: 14px; min-height: 44px; }
  /* Trim hero side padding so the lead text isn't cramped */
  .mw-hero { padding: 40px 0 56px; min-height: 0; }
  .mw-hero__lead { font-size: 16px; }
  .mw-section { padding: 32px 0; }
}

/* =====================================================
   MOBILE-NATIVE PATTERNS (added in audit pass)
   - trust marquee, scroll-snap rails, sticky bottom CTA,
     bottom-sheet cookie banner, footer accordion, back-to-top,
     legal TOC, drawer details
   ===================================================== */

/* ---------- Trust strip marquee (#31) ---------- */
.mw-trust--marquee .mw-trust__inner {
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
.mw-trust--marquee .mw-trust__rail {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mw-trust--marquee .mw-trust__items {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: mwMarquee 32s linear infinite;
}
@media (hover: hover) {
  .mw-trust--marquee .mw-trust__items:hover { animation-play-state: paused; }
}
@keyframes mwMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mw-trust--marquee .mw-trust__items { animation: none; transform: none; }
  .mw-trust--marquee .mw-trust__inner { flex-wrap: wrap; }
  .mw-trust--marquee .mw-trust__rail { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .mw-trust--marquee .mw-trust__items { width: auto; flex-wrap: wrap; gap: 16px 24px; }
}
@media (max-width: 760px) {
  .mw-trust { padding: 18px 0; }
  .mw-trust--marquee .mw-trust__inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .mw-trust--marquee .mw-trust__label {
    font-size: 10.5px;
    text-align: center;
  }
  .mw-trust--marquee .mw-trust__rail {
    width: 100%;
    align-self: stretch;
  }
  .mw-trust--marquee .mw-trust__items {
    animation-duration: 24s;
  }
}

/* ---------- Horizontal scroll-snap rails (#32-36) ---------- */
@media (max-width: 760px) {
  .mw-snap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 16px;
    padding: 4px 16px 18px;
    margin: 0 -16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mw-snap::-webkit-scrollbar { display: none; }
  .mw-snap > * { scroll-snap-align: start; }
  /* Apply snap behavior to existing grids on mobile */
  .mw-pillars--snap,
  .mw-fgrid--snap,
  .mw-pricing--snap {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 16px;
    padding: 4px 16px 18px;
    margin: 0 -16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
  }
  .mw-pillars--snap::-webkit-scrollbar,
  .mw-fgrid--snap::-webkit-scrollbar,
  .mw-pricing--snap::-webkit-scrollbar { display: none; }
  .mw-pillars--snap > *,
  .mw-fgrid--snap > *,
  .mw-pricing--snap > * { scroll-snap-align: start; }
  /* Pricing card on a snap rail keeps natural height */
  .mw-pricing--snap .mw-price { min-height: 100%; }
}

/* ---------- Sticky bottom CTA (#37) ---------- */
.mw-stickycta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 45;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(11,18,32,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(140%);
  transition: transform .35s var(--ease-out), opacity .25s var(--ease-base);
  opacity: 0;
}
.mw-stickycta.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.mw-stickycta__msg {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-on-dark-1);
  line-height: 1.3;
}
.mw-stickycta .btn {
  padding: 10px 14px;
  font-size: 13.5px;
  min-height: 40px;
}
.mw-stickycta__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-dark-2);
  background: transparent;
  flex-shrink: 0;
}
.mw-stickycta__close:hover { color: #fff; background: rgba(255,255,255,0.06); }
@media (max-width: 760px) {
  .mw-stickycta { display: flex; }
  /* Leave room above footer / cookie banner / back-to-top */
  .mw-stickycta.is-visible ~ .mw-footer { padding-bottom: 80px; }
}

/* ---------- Cookie banner: bottom-sheet on mobile (#4, #14, #15) ---------- */
.cookie-btn { min-height: 44px; padding: 12px 18px; font-size: 14px; }
.cookie-banner-content a { padding: 4px 0; }
@media (max-width: 760px) {
  .cookie-banner {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    margin: 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .cookie-banner-content { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-banner-actions { display: flex; gap: 8px; width: 100%; }
  .cookie-banner-actions .cookie-btn { flex: 1; }
  /* If a sticky CTA is showing, lift the cookie banner above it */
  .mw-stickycta.is-visible ~ .cookie-banner { transform: translateY(-72px); }
  .mw-stickycta.is-visible ~ .cookie-banner.visible { transform: translateY(0); }
}

/* ---------- Footer accordion on mobile (#41) ---------- */
@media (max-width: 760px) {
  .mw-footer__col {
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .mw-footer__col:first-child { border-top: 0; }
  .mw-footer__col h4 {
    margin: 0;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    min-height: 44px;
  }
  .mw-footer__col h4::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,0.45);
    border-bottom: 2px solid rgba(255,255,255,0.45);
    transform: rotate(45deg);
    transition: transform .2s var(--ease-base);
    margin-bottom: 4px;
  }
  .mw-footer__col[data-open="true"] h4::after { transform: rotate(-135deg); margin-bottom: -2px; }
  .mw-footer__col ul {
    display: none;
    padding: 0 0 16px;
    gap: 8px;
  }
  .mw-footer__col[data-open="true"] ul { display: grid; }
  .mw-footer__col ul a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 0;
  }
  .mw-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .mw-footer__brand { padding-bottom: 12px; }
}

/* ---------- Back-to-top (#55) ---------- */
.mw-totop {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink-canvas);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 44;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s var(--ease-base), transform .2s var(--ease-base);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
.mw-totop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mw-totop:active { transform: scale(0.94); }
@media (max-width: 760px) {
  .mw-totop { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- Legal page TOC (#43, #54) ---------- */
.mw-legal__toc {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 24px;
  font-size: 13.5px;
}
.mw-legal__toc summary {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  min-height: 32px;
}
.mw-legal__toc summary::-webkit-details-marker { display: none; }
.mw-legal__toc summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease-base);
}
.mw-legal__toc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.mw-legal__toc ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 12px 0 4px;
  display: grid;
  gap: 8px;
}
.mw-legal__toc a {
  color: var(--brand-blue-dark);
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.mw-legal__toc a:hover { color: var(--brand-blue); text-decoration: underline; }
.mw-legal__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--fg-3);
}
.mw-legal__meta strong { color: var(--fg-2); font-weight: 600; }
@media (max-width: 760px) {
  .mw-legal__toc[open] {
    position: sticky;
    top: 64px;
    z-index: 10;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15,23,42,0.06);
  }
}

/* ---------- "What happens next" disclosure on contact (#42) ---------- */
.mw-disclosure {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 0;
  border: 1px solid var(--border-1);
}
.mw-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 48px;
}
.mw-disclosure > summary::-webkit-details-marker { display: none; }
.mw-disclosure > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease-base);
  opacity: 0.6;
}
.mw-disclosure[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.mw-disclosure__body { padding: 0 18px 18px; }
.mw-disclosure__body ol {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 12px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
}
.mw-disclosure__body strong { color: var(--fg-1); }

/* ---------- Sticky in-page section nav for long product pages (#40) ---------- */
.mw-stickytabs {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-1);
  margin: 0 0 0;
}
.mw-stickytabs__rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
}
.mw-stickytabs__rail::-webkit-scrollbar { display: none; }
.mw-stickytabs a {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--surface-2);
  white-space: nowrap;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.mw-stickytabs a:hover { background: var(--surface-3); color: var(--fg-1); }
.mw-stickytabs a.is-active {
  background: var(--ink-canvas);
  color: #fff;
}

/* ---------- Drawer details (close button at top-right) ---------- */
.mw-nav__close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--fg-on-dark-1);
  align-items: center;
  justify-content: center;
}
@media (max-width: 960px) {
  .mw-nav.is-open .mw-nav__close { display: inline-flex; }
}

/* ---------- Pricing badge wrap fix (#27) ---------- */
.mw-price.featured::before {
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Trust strip wraps gracefully on real desktop ---------- */
.mw-trust__items > * { line-height: 1.4; }

/* ---------- Hero gradient: ensure no horizontal bleed on mobile ---------- */
@media (max-width: 760px) {
  .mw-hero__bg-fade {
    background:
      linear-gradient(180deg, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.55) 35%, rgba(11,18,32,0.85) 100%);
  }
  .mw-hero__bg-img { width: 100%; object-position: center; opacity: 0; }
  .mw-hero__bg-img.is-active { opacity: 0.30; }
}

/* ---------- Active states / tap feedback on cards (#26, #49) ---------- */
@media (hover: none) {
  a.mw-fcard:active { transform: scale(0.99); border-color: var(--brand-blue); }
  .mw-price:active { transform: scale(0.99); }
  .mw-footer__lang:active { background: rgba(255,255,255,0.16); }
  .btn:active { transform: scale(0.97); }
}

/* ---------- Mobile lang chip in footer: clearer current state (#17) ---------- */
.mw-footer__lang {
  min-height: 36px;
}
.mw-footer__lang[aria-current="true"] {
  background: rgba(110,231,183,0.10);
  border-color: rgba(110,231,183,0.45);
  color: #6ee7b7;
}

/* ---------- Section heading tightening on dark sections ---------- */
@media (max-width: 760px) {
  .mw-section--ink { padding: 40px 0; }
}

/* ---------- Disclosure content vertical rhythm fix on contact ---------- */
@media (max-width: 760px) {
  .mw-disclosure { margin-top: 16px; }
}

/* ---------- Bottom-anchored elements layering ---------- */
.cookie-banner { z-index: 80; }
.mw-stickycta { z-index: 78; }
.mw-totop { z-index: 76; }
.mw-nav-backdrop { z-index: 48; }

/* =====================================================
   AUDIT ROUND 2 — additional fixes
   ===================================================== */

/* #6, #7, #8 — tap-target padding for footer legal links, see-all,
   and privacy sidebar sub-links. Markup stays the same; CSS expands the
   hit area without changing visible text size. */
.mw-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
}
.mw-footer__bottom small a { padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
.mw-pricing__note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 8px;
}
.mw-legal a {
  /* Inline content links: keep inline but pad block-side */
  padding: 4px 0;
}

/* #9 — hover scoping for the remaining standalone hover rules.
   The ones that haven't been wrapped yet are defaults from earlier in the file;
   this block wins because it cascades below them. */
@media (hover: none) {
  .mw-nav__link:hover,
  .mw-nav__dd-btn:hover,
  .mw-nav__login:hover,
  .mw-nav__cta:hover,
  .mw-pricing__note a:hover,
  .mw-footer__legal a:hover,
  .btn-primary:hover,
  .btn-outline-light:hover,
  .btn-outline:hover,
  .btn-ghost:hover,
  .mw-lang__btn:hover,
  .mw-footer__lang:hover,
  .mw-legal a:hover,
  .cookie-btn-accept:hover,
  .cookie-btn-decline:hover,
  .mw-stickycta__close:hover,
  .mw-legal__toc a:hover,
  .mw-stickytabs a:hover,
  .mw-header__logo:hover,
  .mw-header__logo:hover img {
    background: revert;
    color: revert;
    border-color: revert;
    transform: revert;
    opacity: revert;
  }
}

/* #10 — CSS-only marquee fallback. If JS doesn't run, the items still tile
   the rail. The track gets a duplicate via ::after spacer so the loop never
   shows a gap. */
/* If JS already duplicated the track, it is wide enough; the rule below is the
   CSS-only fallback for the no-JS case. */
html.no-js .mw-trust--marquee .mw-trust__items::after {
  content: "";
  display: block;
  width: 100%;
}

/* #11, #12 — cookie banner / drawer / sticky-CTA stacking on short viewports.
   When the drawer is open we hide the sticky CTA so the cookie banner has
   the full bottom of the screen. We also raise the cookie banner higher when
   sticky CTA is visible. */
.mw-nav.is-open ~ .mw-stickycta { display: none; }
@media (max-width: 760px) {
  .mw-stickycta.is-visible ~ .cookie-banner.visible { transform: translateY(-72px); }
  /* On viewports under 700px tall (iPhone SE landscape), stack vertically so
     buttons don't run off the bottom. */
}
@media (max-height: 700px) and (max-width: 760px) {
  .mw-stickycta.is-visible ~ .cookie-banner.visible {
    transform: translateY(-92px);
  }
  .cookie-banner-content { gap: 8px; }
  .cookie-banner-content p { font-size: 12.5px; }
  .cookie-btn { min-height: 40px; padding: 8px 12px; }
}

/* #13 — dark sections use the same mobile padding tokens as light sections */
@media (max-width: 760px) {
  .mw-section--ink,
  .mw-section--shaded,
  .mw-section--alt { padding: 40px 0; }
}

/* #14 — pricing comparison table scroll affordance */
.mw-ptable {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.mw-ptable::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(15,23,42,0.72) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>') no-repeat center / 14px;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: 0.85;
  animation: mwTableHint 1.6s ease-in-out infinite;
}
@keyframes mwTableHint {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.6; }
  50%      { transform: translateY(-50%) translateX(4px); opacity: 1; }
}
@media (min-width: 760px) {
  .mw-ptable {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .mw-ptable::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-ptable::after { animation: none; }
}

/* #15 — hero min-height shouldn't lock tablets to 520px */
@media (max-width: 1024px) and (min-width: 761px) {
  .mw-hero { min-height: 0; padding: 64px 0 72px; }
}

/* #16, #17 — remove dead .mw-stickytabs / .mw-snap selectors? Leaving them
   in place would be harmless dead CSS, but I prefer explicit display:none so
   if any author re-introduces the markup they get a visual reminder to wire
   it up first. */
.mw-stickytabs { display: none; }

/* #18 — drawer lang chip current state stronger */
@media (max-width: 960px) {
  .mw-nav.is-open .mw-lang__item[aria-current="true"] {
    background: rgba(110,231,183,0.16);
    border-color: #6ee7b7;
    color: #6ee7b7;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(110,231,183,0.35);
  }
  .mw-nav.is-open .mw-lang__item[aria-current="true"]::after {
    content: '';
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236ee7b7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
  }
}

/* #19 — drawer close button bumped to 44 */
.mw-nav__close {
  width: 44px;
  height: 44px;
}

/* iOS 100dvh fix — when address bar collapses, drawer should keep filling */
@media (max-width: 960px) {
  .mw-nav {
    height: 100dvh;
    height: 100vh; /* fallback */
    height: 100dvh;
  }
}

/* Tablet 760-960 band — drawer is on but content uses desktop spacing.
   Apply same padding tokens. */
@media (max-width: 960px) and (min-width: 761px) {
  .mw-section { padding: 56px 0; }
  .mw-cta { padding: 56px 0; }
}

/* Chat widget shouldn't collide with sticky CTA — push it up when CTA visible */
.mw-stickycta.is-visible ~ #chat-widget,
.mw-stickycta.is-visible ~ [class*="chat"] {
  bottom: 80px !important;
}

/* =====================================================
   Proof band (capability + compliance + integrations)
   Replaces the old text marquee. Pure facts — no
   customer logos / testimonials (pre-launch honest proof).
   ===================================================== */
.mw-proof {
  /* Now sits between the shaded capability section and the dark closing CTA,
     so it shares the shaded surface instead of punching a white stripe
     between them. Moved out of the slot directly under the hero: compliance
     and protocol facts are diligence answers, not an opening argument. */
  background: var(--surface-2);
  border-top: 1px solid var(--border-1);
  padding: var(--space-12) 0;
}
.mw-proof__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.mw-proof__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.mw-proof__badge {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  /* White on the shaded band — the pills used to be surface-2 on white. */
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  white-space: nowrap;
}
/* Qualifier under the trust pills. The pills assert "compliant"; this line is
   where we state plainly that we are not third-party certified, so a
   procurement reader never has to infer it from the /security/ page. */
.mw-proof__note {
  margin: var(--space-4) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-2);
}
/* Replaces the six protocol chips. The names were too granular for a landing
   page, and /integrations/ is now a top-level nav item that covers them
   properly. The Microsoft for Startups lockup is a pill here too — as an image
   it was illegible at any height that fit the row. */
.mw-proof__protoline {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--fg-3);
}
.mw-proof__protoline a {
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mw-proof__protoline a:hover { color: var(--brand-blue); }

/* Protocol chips. Dropped from the landing page (too granular there) but still
   the right form on /platform/, where naming the protocols IS the point. The
   rules were deleted with the landing-page chip wall, leaving the platform
   markup rendering as unstyled run-together text. */
.mw-proof__integrations {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: var(--space-6);
}
.mw-proof__intlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-right: 4px;
}
.mw-proof__proto {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

/* Closing CTA — supporting line under the headline */
.mw-cta__eyebrow { color: #6ee7b7; margin: 0 0 14px; }
.mw-cta__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-on-dark-2);
  max-width: 640px;
  margin: 0 auto 28px;
}

/* =====================================================
   Perceived-quality polish (token-based, reversible)
   ===================================================== */
@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(29,158,117,0.30);
  }
  .mw-pillar, .mw-usecase {
    transition: transform .22s var(--ease-base), box-shadow .22s var(--ease-base), border-color .22s var(--ease-base);
  }
  .mw-pillar:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
    border-color: var(--border-2);
  }
  .mw-usecase:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.22);
  }
  .mw-usecase:hover::before {
    transform: scaleX(1);
    opacity: 1;
  }
  .mw-fcard:hover::after {
    transform: scaleX(1);
  }
}

@media (max-width: 760px) {
  .mw-proof { padding: var(--space-10) 0; }
}

/* =====================================================
   Insights — article prose + capture form
   ===================================================== */
.mw-prose { max-width: 720px; margin: 0 auto; }
.mw-prose p, .mw-prose ul, .mw-prose ol { font-size: 17px; line-height: 1.7; color: var(--fg-2); margin: 0 0 20px; }
.mw-prose h2 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg-1); margin: 40px 0 14px; }
.mw-prose h3 { font-size: 19px; font-weight: 700; color: var(--fg-1); margin: 28px 0 10px; }
.mw-prose ul, .mw-prose ol { padding-left: 22px; }
.mw-prose li { margin-bottom: 8px; }
.mw-prose strong { color: var(--fg-1); }
.mw-prose blockquote { margin: 24px 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--brand-green); color: var(--fg-1); font-size: 19px; line-height: 1.5; }
.mw-article__meta { max-width: 720px; margin: 0 auto 6px; font-size: 13px; color: var(--fg-4); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.mw-article__foot { max-width: 720px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--border-1); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 14px; }
.mw-insights__dek { font-size: 14px; color: var(--fg-3); margin: 10px 0 0; line-height: 1.5; }
.mw-capture { max-width: 560px; }
.mw-consent { display: flex !important; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--fg-3); font-weight: 400; }
.mw-consent input { margin-top: 3px; width: auto; flex: 0 0 auto; }
.mw-consent span { flex: 1; }
.btn-linkedin { background: #0a66c2; color: #fff; }
.btn-linkedin:hover { background: #084e95; }

/* ---------- Insights — visual article cards ---------- */
.mw-icards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.mw-icard { display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid var(--border-1); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-1); }
.mw-icard::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color .22s var(--ease-base); }
.mw-icard__shot { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); position: relative; }
.mw-icard__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.26) 50%, transparent 58%);
  transform: translateX(-120%);
  pointer-events: none;
}
.mw-icard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-base); }
.mw-icard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.mw-icard__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-green-dark); }
.mw-icard__body h3 { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--fg-1); margin: 0; }
.mw-icard__body p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }
@media (hover: hover) { .mw-icard { transition: transform .22s var(--ease-base), box-shadow .22s var(--ease-base), border-color .22s var(--ease-base); } .mw-icard:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: rgba(55,138,221,.32); } .mw-icard:hover::after { border-color: rgba(110,231,183,.28); } .mw-icard:hover .mw-icard__shot img { transform: scale(1.04); } .mw-icard:hover .mw-icard__shot::after { animation: mwDataSweep 1.2s var(--ease-base) 1; } }
@media (max-width: 760px) { .mw-icards { grid-template-columns: 1fr; gap: 16px; } }

/* Homepage "Latest" strip — three news cards above the closing CTA */
.mw-icards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .mw-icards--3 { grid-template-columns: repeat(2, 1fr); } }
.mw-icard__cat time { color: inherit; }
.mw-icard__cat .mw-icard__dot { opacity: .55; margin: 0 6px; }
.mw-latest__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.mw-latest__head .mw-section__heading { margin-bottom: 0; }
.mw-latest__all {
  font-size: 14px; font-weight: 600; color: var(--brand-green-dark);
  text-decoration: none; white-space: nowrap; padding-bottom: 4px;
}
.mw-latest__all:hover { color: var(--brand-blue); }
@media (max-width: 760px) { .mw-latest__head { display: block; } .mw-latest__all { display: inline-block; margin-bottom: 20px; } }

/* ---------- Editorial spec list (replaces 01/02/03 card grids) ---------- */
.mw-speclist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.mw-spec {
  position: relative;
  padding: 26px 0 24px;
  border-top: 1px solid var(--border-1);
}
.mw-spec::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 42px;
  height: 1px;
  background: var(--brand-gradient);
  opacity: .78;
  transition: width .24s var(--ease-base), opacity .24s var(--ease-base);
}
.mw-spec h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--fg-1); }
.mw-spec p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.mw-section--ink .mw-spec { border-color: var(--border-on-dark); }
.mw-section--ink .mw-spec h3 { color: #fff; }
.mw-section--ink .mw-spec p { color: var(--fg-on-dark-2); }
@media (max-width: 760px) { .mw-speclist { grid-template-columns: 1fr; gap: 0; } }

/* Scoping caveat under the site-connectivity spec list on /integrations/.
   Deliberately quiet — it is a qualifier, not a claim. */
.mw-connectivity__note {
  margin: var(--space-8) 0 var(--space-6);
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-on-dark-3);
}

/* clickable spec items (industry / use-case hub link cards) */
@media (hover: hover) {
  .mw-spec:hover::before { width: 64px; opacity: 1; }
  a.mw-spec:hover h3 { color: var(--brand-blue-dark); }
}

/* ---------- Follow / Backed-by band (page bottom) ---------- */
.mw-connect { background: var(--surface-2); border-top: 1px solid var(--border-1); padding: 30px 0; }
.mw-connect__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.mw-connect__partner { display: inline-flex; align-items: center; gap: 12px; }
.mw-connect__partner span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); }
.mw-connect__partner img { height: 42px; width: auto; display: block; }
@media (max-width: 640px) { .mw-connect__inner { justify-content: center; text-align: center; } }

/* ---------- Footer connect (LinkedIn + Microsoft for Startups) ---------- */
.mw-footer__connect { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 20px 0 4px; }
.mw-footer__partner { display: flex; flex-direction: column; gap: 7px; }
.mw-footer__partner > span { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.mw-footer__partner img { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 8px; }

/* =====================================================
   News (/news/) — dated entries on a single index.
   No per-item pages on purpose: every item needs four
   language versions, and a section only stays alive if
   adding to it means editing one file per locale.
   ===================================================== */
.mw-newslist { display: grid; max-width: 760px; }
.mw-news { padding: 28px 0; border-top: 1px solid var(--border-1); }
.mw-news:first-child { border-top: 0; padding-top: 0; }
.mw-news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.mw-news__tag {
  color: var(--brand-green-dark);
  background: var(--brand-green-soft);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  letter-spacing: 0.08em;
}
.mw-news h2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--fg-1);
  text-wrap: balance;
}
.mw-news p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.mw-news p + p { margin-top: 12px; }
.mw-news p.mw-news__more { margin: 12px 0 0; }
.mw-news__more a {
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mw-news__more a:hover { color: var(--brand-blue); }
@media (max-width: 760px) {
  .mw-news { padding: 22px 0; }
  .mw-news h2 { font-size: 20px; }
}

/* ---------- News index rail ---------- */
/* The list is capped at 760px inside a 1200px container, so ~440px sits
   empty on the right. This drops the index into that space without moving
   or resizing the list itself. */
.mw-newsindex {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.mw-newsnav { position: sticky; top: 96px; max-width: 300px; }
.mw-newsnav__title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mw-newsnav__list { margin: 0; padding: 0; list-style: none; }
.mw-newsnav__list li + li { border-top: 1px solid var(--border-1); }
.mw-newsnav__list a {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  text-decoration: none;
  color: var(--fg-1);
}
.mw-newsnav__list time { font-size: 12px; font-weight: 600; color: var(--fg-3); }
.mw-newsnav__list span { font-size: 14px; line-height: 1.4; font-weight: 600; }
.mw-newsnav__list a:hover span { color: var(--brand-blue-dark); }
.mw-newsnav__list a:focus-visible { outline: 2px solid var(--brand-blue-dark); outline-offset: 3px; }
@media (max-width: 1080px) {
  /* Below this the two columns stop fitting. The rail only duplicates the
     headlines already on screen, so it goes rather than stacking a second
     copy of the same nine links under the list. */
  .mw-newsindex { display: block; }
  .mw-newsnav { display: none; }
}

/* ---------- News post pages (/news/<slug>/) ---------- */
/* Article column plus a facts rail. The rail collapses under the article
   below 900px rather than squeezing into an unreadable second column. */
.mw-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 56px;
  align-items: start;
}
.mw-post__body { min-width: 0; max-width: 720px; }
.mw-post__shot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-1);
  margin-bottom: var(--space-6);
}
.mw-post__lead { font-size: 19px; line-height: 1.6; color: var(--fg-1); font-weight: 600; }
.mw-post__body p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.mw-post__list { margin: 0 0 16px; padding-left: 20px; }
.mw-post__list li { margin-bottom: 10px; font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.mw-post__list li strong { color: var(--fg-1); }
.mw-post__meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--fg-on-dark-2); font-size: 14px; }
.mw-crumb { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mw-crumb a { color: #6ee7b7; text-decoration: none; }
.mw-crumb a:hover { text-decoration: underline; }
.mw-post__back { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-1); }
.mw-post__back a { color: var(--brand-blue-dark); font-weight: 600; text-decoration: none; }
.mw-post__back a:hover { text-decoration: underline; }

.mw-post__aside { position: sticky; top: 96px; }
.mw-facts { width: 100%; border-collapse: collapse; font-size: 14px; }
.mw-facts caption {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: 12px;
}
.mw-facts th {
  width: 40%;
  padding: 10px 14px 10px 0;
  text-align: left;
  font-weight: 600;
  color: var(--fg-3);
  vertical-align: top;
}
.mw-facts td { padding: 10px 0; color: var(--fg-1); vertical-align: top; line-height: 1.5; }
.mw-facts tr + tr th, .mw-facts tr + tr td { border-top: 1px solid var(--border-1); }
.mw-facts__more { margin: 18px 0 0; font-size: 14px; }
.mw-facts__more a { color: var(--brand-blue-dark); font-weight: 600; text-decoration: none; }
.mw-facts__more a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .mw-post__layout { grid-template-columns: 1fr; gap: 36px; }
  /* Sticky is meaningless in a single column and would detach the rail. */
  .mw-post__aside { position: static; padding-top: var(--space-5); border-top: 1px solid var(--border-1); }
}

/* Links inside a page-hero lead: on the dark hero an unstyled link is
   indistinguishable from body text. */
.mw-phero__lead a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.45);
}
.mw-phero__lead a:hover { text-decoration-color: #fff; }

/* Outbound partner links in prose (e.g. Numerisat on the private-5G and news
   pages). The global `a` rule inherits colour and strips the underline, so an
   inline link is invisible without its own affordance. Scoped to a class rather
   than `p a` so it cannot disturb the existing per-context link rules.
   On dark surfaces the blue fails contrast, hence the light override — and
   .mw-phero__lead a already wins on specificity where that hero styles links. */
.mw-extlink {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mw-extlink:hover { color: var(--brand-blue); }
.mw-section--ink .mw-extlink,
.mw-phero .mw-extlink { color: #6ee7b7; }

/* Partner logo card in the news sidebar. The supplied Numerisat mark is the
   "blanc" variant — the "sat" half is white with no fill, so on the light news
   page it would read as "Numeri". It needs an ink panel behind it rather than
   sitting bare on the page background. */
.mw-partner {
  display: block;
  margin-top: 18px;
  padding: 18px 20px 20px;
  background: var(--ink-canvas);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  text-align: center;
}
.mw-partner__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
  margin-bottom: 14px;
}
.mw-partner img { width: 100%; max-width: 180px; height: auto; margin-inline: auto; }
@media (hover: hover) {
  .mw-partner { transition: border-color .22s var(--ease-base); }
  .mw-partner:hover { border-color: var(--border-on-dark-strong); }
}

/* ============================================================
   Security page — deployment axis + control notes
   Three contrast levels per item so the eye has somewhere to
   land: green eyebrow (the site's existing device), a dark
   claim, then lighter supporting detail. No cards, no shadows,
   no radius, no icons — hairlines and type only.
   ============================================================ */

.mw-where { margin-top: var(--space-10); }

.mw-where__ends {
  display: none;
  justify-content: space-between;
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--fg-4);
}

.mw-where__list { list-style: none; margin: 0; padding: 0; display: grid; }

.mw-where__opt {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) var(--space-4);
  border-top: 1px solid var(--border-2);
}
.mw-where__opt:last-child { border-bottom: 1px solid var(--border-2); }
.mw-where__opt::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-6);
  bottom: var(--space-6);
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
}

.mw-where__opt h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  font-weight: 700;
}
.mw-where__opt p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .mw-where__ends { display: flex; }
  .mw-where__list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-10);
    border-top: 1px solid var(--border-2);
  }
  .mw-where__opt { border-top: 0; padding: var(--space-6) 0 0; }
  .mw-where__opt:last-child { border-bottom: 0; }
  .mw-where__opt::before {
    top: -1px;
    bottom: auto;
    width: 44px;
    height: 3px;
  }
}

/* --- Control notes ----------------------------------------- */
.mw-notes { margin-top: var(--space-10); display: grid; gap: var(--space-10); }

.mw-notes__item { display: grid; gap: var(--space-2); }
.mw-notes__item .mw-eyebrow { margin: 0 0 var(--space-1); }

.mw-notes__claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-1);
  max-width: 24ch;
}
.mw-notes__detail {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 52ch;
}

@media (min-width: 900px) {
  .mw-notes { gap: var(--space-12); }
  .mw-notes__item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-12);
    align-items: start;
  }
  .mw-notes__item .mw-eyebrow { grid-column: 1; margin: 0 0 var(--space-3); }
  .mw-notes__claim  { grid-column: 1; }
  .mw-notes__detail { grid-column: 2; grid-row: 1 / span 2; padding-top: 4px; }
}