*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* MantisOps Display — brand display face (self-hosted, OFL; see /brand-font). */
@font-face {
  font-family: "MantisOps Display";
  src: url("/fonts/mantisops-display.woff2?v=10") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Clean-white theme (light-dominant with dark anchors: the product-dashboard
     showcase, the final CTA band, and the footer stay dark for contrast).
     Token names kept (--teal etc.) so existing rules need no change. Accent stays
     the logo blue; surfaces carry a faint cool undertone so white doesn't read
     clinical. */
  --bg:        #FFFFFF;
  --bg-mid:    #F1F5FA;   /* alternating light section */
  --bg-hi:     #E9EFF7;   /* inputs / hover / table headers */
  --bg-card:   #FFFFFF;
  --border:    #E2E9F1;
  --border-hi: #CBD7E6;
  --text:      #0F1E33;   /* dark navy ink */
  --text-sec:  #52607A;
  --text-dim:  #56657C;   /* 5.1:1 on --bg-hi (was #8493A8, 2.7–3.1:1) */
  --teal:      #2E80E0;   /* primary accent — logo blue */
  --teal-dk:   #1E5AA8;   /* deeper blue (readable on light) */
  --teal-glow: rgba(46,128,224,.14);
  /* Primary-button fill (both themes). White text: 4.93:1 rest, 5.84:1 hover, 6.6:1 active.
     --teal (#2E80E0) stays the accent/border colour; white on it is only 3.98:1. */
  --btn-bg:        #2E6BDD;
  --btn-bg-hover:  #2860C8;
  --btn-bg-active: #2558BA;
  --good:      #16A34A;
  --bad:       #DC2626;
  --radius:    10px;
  --font-display: 'MantisOps Display', 'Orbitron', 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* Theme-dependent surfaces (light values; the dark theme overrides them below). */
  --teal-text:  #1C5FC0;   /* accent used as TEXT (links, eyebrows); --teal stays the fill.
                             5.0–6.1:1 on every light surface (#2E80E0 was 3.4–4.0:1) */
  --good-text:  #15703A;   /* success colour used as TEXT (badges) */
  --page-bg:    linear-gradient(180deg, #FFFFFF 0%, #F3F7FC 60%);
  --nav-bg:     linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.4) 100%);
  --nav-bg-scrolled: rgba(255,255,255,.94);
  --brand-ink:  #0F1E33;
  --title-grad: linear-gradient(180deg, #14346A 0%, #1E5AA8 55%, #2E80E0 100%);
  --title-shadow: drop-shadow(0 1px 2px rgba(20,50,90,0.10));
  --accent-grad: linear-gradient(120deg, #2563EB 0%, #2E80E0 45%, #5BA0F5 100%);
  --hero-base:  #F4F9FE;
  --hero-wash:  linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 72%, rgba(248,251,254,.92) 100%);
  --cta-wash:   linear-gradient(180deg, rgba(243,247,252,.85) 0%, rgba(243,247,252,.15) 45%, rgba(243,247,252,0) 100%);
  --shadow-ink: rgba(20,50,90,.10);
  --shadow-lg:  0 14px 44px rgba(20,50,90,.13);
  --menu-shadow: 0 8px 32px rgba(0,0,0,.12);
  /* Alternating section tones (A plain · B elevated · C blue tint) for the wave dividers */
  --sec-a: #FFFFFF;  --sec-a2: #F7FAFD;
  --sec-b: #EEF3F9;  --sec-b2: #E7EEF7;
  --sec-c: #E7F1FC;  --sec-c2: #DDEAF8;
  /* Hero / closing-CTA background art (per product via body.pg-*; default = "other pages") */
  --hero-light:    url(/img/hero/nms-light-1.webp);
  --hero-light-sm: url(/img/hero/nms-light-1-1200.webp);
  --hero-dark:     url(/img/hero/nms-dark-1.webp);
  --hero-dark-sm:  url(/img/hero/nms-dark-1-1200.webp);
  --hero-pos:      center bottom;
  --hero-pos-sm:   center bottom;
}

/* ── DARK THEME (default: theme.js + data-theme="dark" in the markup) ─────────
   Palette follows the apps: deep navy page, raised surfaces a step lighter,
   cool off-white text, logo-blue accent with teal highlights. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0A1220;
  --bg-mid:    #0D1829;
  --bg-hi:     #16243A;
  --bg-card:   #101C30;
  --border:    #1F2F47;
  --border-hi: #2E4566;
  --text:      #E6EEF7;
  --text-sec:  #A2B0C4;
  --text-dim:  #8696AD;
  --teal:      #2E80E0;
  --teal-dk:   #8CC2FF;
  --teal-glow: rgba(91,160,245,.18);
  --teal-text: #6FB0F8;
  --good:      #3DD68C;
  --good-text: #3DD68C;
  --bad:       #F87171;
  --page-bg:   linear-gradient(180deg, #0A1220 0%, #0B1526 60%);
  --nav-bg:    linear-gradient(180deg, rgba(10,18,32,.96) 0%, rgba(10,18,32,.45) 100%);
  --nav-bg-scrolled: rgba(10,18,32,.94);
  --brand-ink: #EAF1F8;
  --title-grad: linear-gradient(180deg, #FFFFFF 0%, #D6E7FF 55%, #8DC0FA 100%);
  --title-shadow: drop-shadow(0 2px 10px rgba(0,0,0,.35));
  --accent-grad: linear-gradient(120deg, #5BA0F5 0%, #7FC0FF 50%, #4FD8C8 100%);
  --hero-base: #0A1220;
  --hero-wash: radial-gradient(62% 58% at 50% 46%, rgba(10,18,32,.62) 0%, rgba(10,18,32,0) 72%), linear-gradient(180deg, rgba(10,18,32,.55) 0%, rgba(10,18,32,0) 22%, rgba(10,18,32,0) 74%, #0A1220 100%);
  --cta-wash:  linear-gradient(180deg, rgba(10,18,32,.92) 0%, rgba(10,18,32,.25) 45%, rgba(10,18,32,0) 100%);
  --shadow-ink: rgba(0,0,0,.35);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.45);
  --menu-shadow: 0 12px 36px rgba(0,0,0,.5);
  --sec-a: #0A1220;  --sec-a2: #0B1526;
  --sec-b: #0E1A2E;  --sec-b2: #0D1829;
  --sec-c: #0F2038;  --sec-c2: #0C1B31;
}

/* Hero art per product family (body class set on each page). */
body.pg-home { --hero-light: url(/img/hero/rmm-light-4.webp); --hero-light-sm: url(/img/hero/rmm-light-4-1200.webp);
               --hero-dark: url(/img/hero/nms-dark-2.webp);   --hero-dark-sm: url(/img/hero/nms-dark-2-1200.webp);
               --hero-pos: center bottom; --hero-pos-sm: center bottom; }
body.pg-rmm  { --hero-light: url(/img/hero/rmm-light-2.webp); --hero-light-sm: url(/img/hero/rmm-light-2-1200.webp);
               --hero-dark: url(/img/hero/rmm-dark-2.webp);   --hero-dark-sm: url(/img/hero/rmm-dark-2-1200.webp);
               --hero-pos: center 45%; --hero-pos-sm: center;
               --cta-light: url(/img/hero/rmm-light-1.webp); --cta-light-sm: url(/img/hero/rmm-light-1-1200.webp);
               --cta-dark: url(/img/hero/rmm-dark-1.webp);   --cta-dark-sm: url(/img/hero/rmm-dark-1-1200.webp); }
body.pg-360  { --hero-light: url(/img/hero/360-light-1.webp); --hero-light-sm: url(/img/hero/360-light-1-1200.webp);
               --hero-dark: url(/img/hero/360-dark-1.webp);   --hero-dark-sm: url(/img/hero/360-dark-1-1200.webp);
               --hero-pos: right 55%; --hero-pos-sm: 85% center;
               --cta-light: url(/img/hero/360-light-2.webp); --cta-light-sm: url(/img/hero/360-light-2-1200.webp);
               --cta-dark: url(/img/hero/360-dark-2.webp);   --cta-dark-sm: url(/img/hero/360-dark-2-1200.webp); }
body.pg-nms  { --hero-light: url(/img/hero/nms-light-3.webp); --hero-light-sm: url(/img/hero/nms-light-3-1200.webp);
               --hero-dark: url(/img/hero/nms-dark-3.webp);   --hero-dark-sm: url(/img/hero/nms-dark-3-1200.webp);
               --hero-pos: center; --hero-pos-sm: center;
               --cta-light: url(/img/hero/nms-light-4.webp); --cta-light-sm: url(/img/hero/nms-light-4-1200.webp);
               --cta-dark: url(/img/hero/nms-dark-4.webp);   --cta-dark-sm: url(/img/hero/nms-dark-4-1200.webp); }
/* MantisOps Complete (/platform) and Shadow AI (/shadow-ai) pages. */
body.pg-platform { --hero-light: url(/img/hero/nms-light-1.webp); --hero-light-sm: url(/img/hero/nms-light-1-1200.webp);
               --hero-dark: url(/img/hero/nms-dark-1.webp);   --hero-dark-sm: url(/img/hero/nms-dark-1-1200.webp);
               --hero-pos: center bottom; --hero-pos-sm: center bottom;
               --cta-light: url(/img/hero/rmm-light-1.webp); --cta-light-sm: url(/img/hero/rmm-light-1-1200.webp);
               --cta-dark: url(/img/hero/rmm-dark-1.webp);   --cta-dark-sm: url(/img/hero/rmm-dark-1-1200.webp); }
body.pg-ai   { --hero-light: url(/img/hero/360-light-2.webp); --hero-light-sm: url(/img/hero/360-light-2-1200.webp);
               --hero-dark: url(/img/hero/360-dark-2.webp);   --hero-dark-sm: url(/img/hero/360-dark-2-1200.webp);
               --hero-pos: center 30%; --hero-pos-sm: center 40%;
               --cta-light: url(/img/hero/360-light-1.webp); --cta-light-sm: url(/img/hero/360-light-1-1200.webp);
               --cta-dark: url(/img/hero/360-dark-1.webp);   --cta-dark-sm: url(/img/hero/360-dark-1-1200.webp); }

/* Nav light/dark toggle (injected by theme.js just before the hamburger). */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-sec);
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-hi); background: var(--bg-hi); }
.theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Display face: H1/H2 titles only (plus the wordmarks) ─────────────────────
   Titles get the display face 900 + a gradient text fill + drop shadow. Everything
   that reads as text — subtitles, eyebrows, card headings, body — uses Inter. */
.hero h1, .section-title, .page-hero h1, .page-header h1 {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em;
  background: var(--title-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: var(--title-shadow);
}
/* Dark-anchor CTA keeps a light-on-dark title gradient. */
.cta-section h2 {
  font-family: var(--font-display); font-weight: 900;
  background: linear-gradient(180deg, #FFFFFF 0%, #BFD8FF 55%, #5BA0F5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub, .section-sub, .section-eyebrow, .cta-section p,
.page-hero p, .page-hero .eyebrow, .page-header p, .page-header .eyebrow {
  font-family: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.section-eyebrow, .page-hero .eyebrow, .page-header .eyebrow { font-weight: 700; letter-spacing: .16em; font-size: 12px; }
.feature-card h3, .why-card h3, .docs-card h3 { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.35; }

/* Clip stray horizontal overflow at the ROOT — on mobile the scroll container is
   <html>, so overflow-x on <body> alone doesn't stop the sideways scroll (which left
   a white strip to the right of the fixed background). */
html { overflow-x: hidden; max-width: 100%; }
body {
  background: var(--page-bg) fixed;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden; /* guard against stray horizontal overflow (white gap on mobile) */
  max-width: 100%;
}

a { color: var(--teal-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { opacity: .88; text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--btn-bg); color: #fff; box-shadow: 0 2px 8px rgba(46,107,221,.3); }
/* Darken instead of fading: .btn's hover opacity would lift the fill back below 4.5:1. */
.btn-primary:hover { opacity: 1; background: var(--btn-bg-hover); color: #fff; box-shadow: 0 4px 16px rgba(46,107,221,.4); }
.btn-primary:active { background: var(--btn-bg-active); color: #fff; }
.btn-primary:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 2px; }
.btn-secondary { background: transparent; border: 1.5px solid var(--border-hi); color: var(--text); }
.btn-outline { background: transparent; border: 1.5px solid var(--border-hi); color: var(--text-sec); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-text); }
.btn-lg { padding: 13px 28px; font-size: 15px; }

/* ── NAV ───────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Light fade bar: near-solid white at the top, fading translucent so content
     slides cleanly beneath it. */
  background: var(--nav-bg);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border-bottom: none;
  height: 64px;
  /* Bottom padding shrinks the centered content box from below, lifting every
     top-bar item upward while keeping them vertically aligned with each other. */
  padding: 0 28px 8px;
  display: flex; align-items: center; gap: 12px;
  transition: background .2s;
}
nav.nav-scrolled {
  background: var(--nav-bg-scrolled);
  box-shadow: 0 1px 0 var(--border), 0 6px 24px var(--shadow-ink);
}

.nav-brand-link { display: flex; align-items: center; gap: 4px; text-decoration: none; flex-shrink: 0; }
.nav-brand-link:hover { text-decoration: none; }
/* Wordmark image (icon + MANTISOPS lockup) replaces the text title.
   Nudged up 4px: the mantis is bottom-heavy (alpha centroid ~56%), so a plain
   center sits the text low against the nav links — this optically centers it. */
.nav-wordmark { height: 24px; width: auto; display: block }
/* Full brand lockup (mantis icon + MANTISOPS + tagline) — replaces the separate
   nav logo + wordmark. Sized to the nav height; transparent PNG over the dark nav. */
.nav-wordmark-full { height: 40px; width: auto; display: block; }
.nav-logo-wrap { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-logo { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(20,50,90,0.14)); }
.nav-brand .mm { font-size: 1em; }
.nav-brand-wrap { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.nav-brand {
  font-family: 'MantisOps Display', 'Orbitron', 'Segoe UI', sans-serif; /* tech/geometric; installed in Inkscape + on Google Fonts */
  font-size: 28px; font-weight: 900; letter-spacing: 1px;
  color: var(--brand-ink);
}
/* "OPS" mirrors the logo's glossy blue gradient — deeper royal blue. */
.nav-brand .o {
  background: linear-gradient(180deg, #5BA0F5 0%, #2E80E0 55%, #1E5AA8 100%); /* bottoms out at the logo navy #042B5B */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #2E80E0;
}
.nav-brand-sub {
  font-family: 'MantisOps Display', 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dim); margin-top: 2px;
}

.nav-links {
  /* True-center the menu in the bar regardless of logo/CTA widths. width:max-content
     matters: an absolutely-positioned box at left:50% is otherwise capped at half the
     viewport, which wrapped "Products ▾" / "What's New" onto two lines (and dropped
     them below the rest) on scaled 1920×1080 displays (125% → 1536 CSS px). */
  position: absolute; left: 50%; transform: translateX(-50%);
  width: max-content;
  display: flex; align-items: center; gap: 4px;
}
.nav-links a {
  color: var(--text-sec); text-decoration: none;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
/* Narrower desktops: stop absolute-centering (it would slide under the logo or the
   CTA buttons) and let the menu sit in the flow between them, still centered. */
@media (max-width: 1440px) {
  .nav-links { position: static; transform: none; width: auto; margin: 0 auto; gap: 2px; }
  .nav-links a { padding: 6px 9px; }
  .nav-cta-group { margin-left: 0; }
}
@media (max-width: 1240px) {
  .nav-demo-link { display: none; }
}
.nav-links a:hover { color: var(--text); background: var(--bg-hi); text-decoration: none; }

.nav-cta-group { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-demo-link { font-size: 13px; color: var(--text-sec); padding: 6px 12px; }
.nav-demo-link:hover { color: var(--text); text-decoration: none; }
.nav-cta-btn { padding: 8px 18px; font-size: 13px; }

/* Get-started dropdown */
.gs-wrap { position: relative; }
.gs-btn { cursor: pointer; }
.gs-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  min-width: 220px; padding: 6px; z-index: 200;
  box-shadow: var(--menu-shadow);
}
.gs-dropdown.open { display: block; }
.gs-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 7px; text-decoration: none; color: var(--text);
}
.gs-dropdown a:hover { background: var(--bg-hi); }
.gs-dropdown a strong { display: block; font-size: 13px; font-weight: 700; }
.gs-dropdown a em { display: block; font-size: 11px; color: var(--text-sec); font-style: normal; }
.gs-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }

/* Nav "Products" dropdown — CSS-only (hover / keyboard focus), no JS */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle { cursor: pointer; }
.nav-dd-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 10px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  min-width: 240px; padding: 6px; z-index: 200; box-shadow: var(--menu-shadow);
}
/* bridge the gap so the menu doesn't close when the cursor crosses into it */
.nav-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; }
.nav-dd-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 7px; text-decoration: none; color: var(--text);
}
.nav-dd-menu a:hover { background: var(--bg-hi); }
.nav-dd-menu a strong { display: block; font-size: 13px; font-weight: 700; }
.nav-dd-menu a em { display: block; font-size: 11px; color: var(--text-sec); font-style: normal; }
.nav-dd-ic { font-size: 20px; line-height: 1; flex-shrink: 0; }

/* Product-tab hero screenshot (homepage explorer) */
.tab-shot { max-width: 940px; margin: 0 auto 30px; }
.tab-shot .carousel-cap { min-height: 0; margin-top: 14px; }
.tab-shot .shot { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg-card); box-shadow: var(--shadow-lg); }

.nav-hamburger {
  display: none;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-sec); font-size: 16px; padding: 6px 10px; cursor: pointer;
  margin-left: auto;
}

.nav-mobile-menu {
  display: none; position: fixed; top: 80px; left: 0; right: 0; z-index: 99;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 16px 24px 20px; flex-direction: column; gap: 4px;
  box-shadow: 0 8px 24px rgba(20,50,90,.12);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { color: var(--text-sec); padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.nav-mobile-menu a:hover { color: var(--text); background: var(--bg-hi); text-decoration: none; }
/* Buttons in the mobile menu keep the white-on-blue button look (the link colour above
   out-specifies .btn-primary and left them grey-on-blue, ~1.6:1). */
.nav-mobile-menu a.btn-primary { color: #fff; background: var(--btn-bg); }
.nav-mobile-menu a.btn-primary:hover { color: #fff; background: var(--btn-bg-hover); }
.nav-mobile-menu a.btn-primary:active { color: #fff; background: var(--btn-bg-active); }

/* Collapse to the hamburger before the full menu can collide with the logo/CTA. */
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-cta-group { display: none; }
  .nav-hamburger { display: block; }
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 128px 32px 108px;
  text-align: center;
}
/* Hero art: per-theme, per-product image (vars set on :root / body.pg-*), a light
   wash for legibility, and a solid base. The 1200px version is used on phones. */
.hero, .page-hero, .page-header {
  background: var(--hero-wash), var(--hero-light) var(--hero-pos)/cover no-repeat, var(--hero-base);
}
html[data-theme="dark"] .hero, html[data-theme="dark"] .page-hero, html[data-theme="dark"] .page-header {
  background: var(--hero-wash), var(--hero-dark) var(--hero-pos)/cover no-repeat, var(--hero-base);
}
@media (max-width: 900px) {
  .hero, .page-hero, .page-header {
    background: var(--hero-wash), var(--hero-light-sm) var(--hero-pos-sm)/cover no-repeat, var(--hero-base);
  }
  html[data-theme="dark"] .hero, html[data-theme="dark"] .page-hero, html[data-theme="dark"] .page-header {
    background: var(--hero-wash), var(--hero-dark-sm) var(--hero-pos-sm)/cover no-repeat, var(--hero-base);
  }
}
/* Legibility over the bright hero art (S-017): the sub-paragraph and eyebrow get a soft dark halo and a brighter ink in dark mode. */
html[data-theme="dark"] .page-hero .eyebrow { text-shadow: 0 0 8px rgba(6,12,24,.95), 0 0 20px rgba(6,12,24,.8); }
html[data-theme="dark"] .page-hero p, html[data-theme="dark"] .page-header p {
  color: #C9D5E6; text-shadow: 0 0 6px rgba(6,12,24,.95), 0 1px 14px rgba(6,12,24,.9), 0 0 28px rgba(6,12,24,.7);
}
/* Home page performance: the sections below the hero are not laid out or painted until they
   scroll near the viewport (content-visibility:auto), so first paint no longer waits on the
   style/layout of the whole 100 KB page. contain-intrinsic-size is the measured height per
   breakpoint (the "auto" keyword then remembers the real height), so the scrollbar and #anchor
   jumps stay put. Text stays searchable and focusable. #compare is left out on purpose: its
   scrolling tables get tabindex from site.js by measuring scrollWidth, which needs real layout. */
.pg-home #features, .pg-home .why-section, .pg-home #pricing, .pg-home #docs, .pg-home #faq, .pg-home .cta-section { content-visibility: auto; }
.pg-home #features { contain-intrinsic-size: auto 1950px; }
.pg-home .why-section { contain-intrinsic-size: auto 600px; }
.pg-home #pricing { contain-intrinsic-size: auto 1670px; }
.pg-home #docs { contain-intrinsic-size: auto 1040px; }
.pg-home #faq { contain-intrinsic-size: auto 1060px; }
.pg-home .cta-section { contain-intrinsic-size: auto 500px; }
@media (max-width: 900px) {
  .pg-home #features { contain-intrinsic-size: auto 3500px; }
  .pg-home .why-section { contain-intrinsic-size: auto 1300px; }
  .pg-home #pricing { contain-intrinsic-size: auto 2580px; }
    .pg-home #docs { contain-intrinsic-size: auto 2260px; }
  .pg-home #faq { contain-intrinsic-size: auto 1080px; }
  .pg-home .cta-section { contain-intrinsic-size: auto 740px; }
}
/* Closing call-to-action band on the product-family pages (#trial): bottom-weighted art. */
.pg-rmm #trial, .pg-360 #trial, .pg-nms #trial, .pg-platform #trial, .pg-ai #trial {
  padding: 110px 24px 130px;
  background: var(--cta-wash), var(--cta-light) center bottom/cover no-repeat, var(--hero-base);
}
html[data-theme="dark"] .pg-rmm #trial, html[data-theme="dark"] .pg-360 #trial, html[data-theme="dark"] .pg-nms #trial,
html[data-theme="dark"] .pg-platform #trial, html[data-theme="dark"] .pg-ai #trial {
  background: var(--cta-wash), var(--cta-dark) center bottom/cover no-repeat, var(--hero-base);
}
@media (max-width: 900px) {
  .pg-rmm #trial, .pg-360 #trial, .pg-nms #trial, .pg-platform #trial, .pg-ai #trial {
    padding: 72px 20px 110px;
    background: var(--cta-wash), var(--cta-light-sm) center bottom/cover no-repeat, var(--hero-base);
  }
  html[data-theme="dark"] .pg-rmm #trial, html[data-theme="dark"] .pg-360 #trial, html[data-theme="dark"] .pg-nms #trial,
html[data-theme="dark"] .pg-platform #trial, html[data-theme="dark"] .pg-ai #trial {
    background: var(--cta-wash), var(--cta-dark-sm) center bottom/cover no-repeat, var(--hero-base);
  }
}
/* The herobg supplies the texture; the old dark dot-grid + hex + particle layers
   are hidden on the white theme. */
.hero::before { content: none; }
.hero-fx, #particle-canvas { display: none !important; }
/* ── Hero effect layers (behind content, card-style) ──────────────────────── */
.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx { position: absolute; inset: 0; pointer-events: none; }
/* Hex grid clustered in the left corners (top-left + bottom-left), fading in. */
.fx-hex {
  background: url(/hex-pattern.png?v=5) repeat;
  background-size: 60px auto;
  opacity: .16;
  -webkit-mask-image: radial-gradient(58% 60% at 0% 0%, #000 0%, transparent 78%), radial-gradient(58% 60% at 0% 100%, #000 0%, transparent 78%);
          mask-image: radial-gradient(58% 60% at 0% 0%, #000 0%, transparent 78%), radial-gradient(58% 60% at 0% 100%, #000 0%, transparent 78%);
}
#particle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; }

.badge-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.badge {
  font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(46,128,224,.3); color: var(--teal-text);
  background: rgba(46,128,224,.07);
}

.hero h1 {
  font-size: clamp(40px, 5vw, 64px); letter-spacing: 0.01em; line-height: 1.08;
  margin-bottom: 20px; color: var(--text);
}
/* Rotating tagline: JS fits all phrases to one uniform font size where they each wrap
   to two lines and sets a two-line min-height. The text stays in normal flow, so every
   phrase is the same height — no gap under short phrases, and swapping never changes the
   hero height (so its center/cover background never re-crops). */
#hero-rotator { display: block; max-width: 100%; }
#hero-rot-txt { display: block; text-align: center; max-width: 100%; overflow-wrap: break-word; transition: opacity .25s ease; }
.grad {
  background: var(--accent-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 17px; color: var(--text-sec); max-width: 660px; margin: 0 auto 30px;
  line-height: 1.65;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.hero-social-proof { font-size: 12px; color: var(--text-dim); letter-spacing: 0.5px; }

/* Product shot under the hero copy: always the dark dashboard, in a dark browser
   frame (reads well on both the dark and the light hero art). Cropped via CSS to the
   populated top of the capture. The hero keeps its background layers, so new art only
   means swapping the --hero-* variables. */
.hero { padding-bottom: 76px; }
.hero-shot { position: relative; z-index: 1; max-width: 1120px; margin: 50px auto 0; }
.hero-frame { border-radius: 14px; overflow: hidden; background: #0E1724; border: 1px solid rgba(120,160,220,.22);
  box-shadow: 0 34px 90px -24px rgba(2,8,20,.75), 0 12px 32px rgba(2,8,20,.30); }
.hero-frame .shot-bar { background: #16212F; border-bottom: 1px solid #223044; }
.hero-frame .shot-url { color: #8496AE; }
.hero-frame-img { aspect-ratio: 2000 / 960; overflow: hidden; }
.hero-frame-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
html:not([data-theme="dark"]) .hero-frame { border-color: rgba(20,50,90,.18); box-shadow: 0 34px 80px -28px rgba(20,50,90,.45), 0 10px 28px rgba(20,50,90,.14); }
@media (max-width: 640px) {
  .hero { padding: 104px 16px 48px; }
  .hero-sub { font-size: 16px; }
  .hero-shot { margin-top: 36px; }
  .hero-frame { border-radius: 10px; }
  .hero-frame .shot-bar { padding: 7px 10px; }
  .hero-frame .shot-dot { width: 8px; height: 8px; }
}

/* ── STATS BAR ─────────────────────────────────────────────────────────── */
.stats-bar {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 32px;
  display: flex; justify-content: center; gap: 56px; flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-num { font-size: 30px; font-weight: 800; color: var(--teal-text); line-height: 1; margin-bottom: 4px; }
.stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

/* ── SECTIONS ──────────────────────────────────────────────────────────── */
.section { padding: 88px 32px; }
.section-inner { max-width: 1160px; margin: 0 auto; }
.section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal-text); margin-bottom: 14px;
}
.section-title {
  font-size: 40px; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.5px; margin-bottom: 14px; color: var(--text);
}
.section-sub {
  font-size: 16px; color: var(--text-sec); max-width: 600px;
  line-height: 1.65; margin-bottom: 48px;
}

@media (max-width: 640px) {
  .section { padding: 60px 20px; }
  .section-title { font-size: 28px; }
}

/* ── PRODUCT TABS ──────────────────────────────────────────────────────── */
.product-tabs {
  display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap;
}
.product-tab {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 22px;
  cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: left; min-width: 220px;
}
.product-tab:hover { border-color: var(--border-hi); box-shadow: 0 2px 8px rgba(20,50,90,.10); }
.product-tab.active { border-color: var(--teal); background: rgba(46,128,224,.04); box-shadow: 0 0 0 3px rgba(46,128,224,.08); }
.tab-icon { font-size: 24px; flex-shrink: 0; }
.tab-label { font-size: 15px; font-weight: 700; color: var(--text); display: block; line-height: 1.2; }
.tab-desc { font-size: 12px; color: var(--text-sec); display: block; margin-top: 2px; }

/* Features: center the header + tab row so they line up with the centered demo
   below (it was flush-left while the demo was centered). Matches #showcase/.why. */
#features .section-eyebrow, #features .section-title { text-align: center; }
#features .section-sub { text-align: center; margin: 0 auto 40px; max-width: 640px; }
#features .product-tabs { justify-content: center; }

/* ── FEATURE PANEL ─────────────────────────────────────────────────────── */
.feature-panel { display: none; }
.feature-panel.active { display: block; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}
.feature-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.feature-card:hover { border-color: var(--border-hi); box-shadow: 0 4px 16px rgba(20,50,90,.10); }
.feature-card-highlight { border-color: rgba(46,128,224,.4); background: rgba(46,128,224,.03); }
/* Homepage explorer cards link to their product page (wired in site.js). */
.feature-card-link { position: relative; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.feature-card-link:hover { border-color: var(--teal); transform: translateY(-2px); }
.feature-card-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.feature-card-link::after { content: "Learn more \2192"; display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600;
  color: var(--teal-text); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.feature-card-link:hover::after, .feature-card-link:focus-visible::after { opacity: 1; transform: none; }
/* Inline SVG line icons (scripts/icons.py) — stroke style matches the apps' rail. */
.ico { display: block; width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon, .docs-icon { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; color: var(--teal-text);
  background: rgba(46,128,224,.10); border: 1px solid rgba(46,128,224,.20); }
.feature-icon .ico, .docs-icon .ico { width: 22px; height: 22px; }
.feature-icon.step-num { font-size: 18px; font-weight: 800; }
.tab-icon, .nav-dd-ic, .gs-icon { display: flex; align-items: center; color: var(--teal-text); }
.tab-icon .ico { width: 26px; height: 26px; }
.nav-dd-ic .ico, .gs-icon .ico { width: 20px; height: 20px; }
.shot-zoom .ico { width: 18px; height: 18px; }
.badge-ico { display: inline-flex; align-items: center; gap: 6px; }
.badge-ico .ico { width: 13px; height: 13px; }
.why-icon-wrap .ico { width: 22px; height: 22px; }
.why-icon-wrap.u27 { color: var(--teal-text); } .why-icon-wrap.u28 { color: #1F9D55; }
.why-icon-wrap.u29 { color: #7C5CE0; } .why-icon-wrap.u30 { color: #E0701A; }
html[data-theme="dark"] .why-icon-wrap.u28 { color: #4ADE80; } html[data-theme="dark"] .why-icon-wrap.u29 { color: #A78BFA; }
html[data-theme="dark"] .why-icon-wrap.u30 { color: #FB923C; }
.rm-theme .ic { color: var(--teal-text); } .rm-theme .ic .ico { width: 26px; height: 26px; }
.kb-cat-ico { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--teal-text); }
.kb-cat-ico .ico, .kb-search-ico .ico { width: 18px; height: 18px; }
.response-badge .ico { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.feature-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.feature-card p { font-size: 13px; color: var(--text-sec); line-height: 1.65; }

.feature-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── PRODUCT SHOWCASE (carousel + zoom lightbox) ───────────────────────── */
.showcase-section { background: var(--bg-mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.showcase-section .section-inner { text-align: center; }
.showcase-section .section-eyebrow, .showcase-section .section-title { text-align: center; }
.showcase-section .section-sub { text-align: center; margin: 0 auto 34px; max-width: 640px; }
/* Peek / coverflow carousel: the active slide sits centered at full size; the previous and
   next slides peek in scaled-down at either side. Slides are positioned by site.js from
   their wrap-around offset to the active index (…-1, 0, +1…), so it loops endlessly. The
   active slide stays in normal flow, which sizes the viewport without any JS measuring. */
.carousel { position: relative; margin: 0 auto; max-width: 1160px; --slide-w: 66%; }
.carousel-viewport { position: relative; overflow: hidden; padding: 18px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.carousel-track { position: relative; }
.carousel-slide { position: absolute; top: 18px; left: 50%; width: var(--slide-w); box-sizing: border-box;
  transform: translateX(-50%); transition: transform .65s cubic-bezier(.22,.8,.26,1), opacity .5s ease, filter .5s ease;
  will-change: transform, opacity; }
.carousel:not(.is-ready) .carousel-slide:first-child,
.carousel.is-ready .carousel-slide.is-active { position: relative; top: 0; }
.carousel:not(.is-ready) .carousel-slide:not(:first-child) { opacity: 0; }
.carousel-slide.is-active { z-index: 3; }
.carousel-slide.is-side { z-index: 2; cursor: pointer; filter: saturate(.8) brightness(.96); }
.carousel-slide.is-side:hover { filter: none; }
.carousel-slide.is-far { z-index: 1; pointer-events: none; }
.carousel-slide .carousel-cap { transition: opacity .35s ease; }
.carousel-slide:not(.is-active) .carousel-cap { opacity: 0; pointer-events: none; }
.carousel-slide:not(.is-active) .shot-figure { cursor: pointer; }
.carousel-slide:not(.is-active) .shot-zoom { display: none; }
@media (max-width: 720px) {
  .carousel { --slide-w: 84%; }
  .carousel-viewport { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .carousel-slide { transition: opacity .2s ease; } }
.shot { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg-card); box-shadow: var(--shadow-lg); }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--bg-hi); border-bottom: 1px solid var(--border); }
.shot-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.shot-dot.r { background: #FF5F57; } .shot-dot.y { background: #FEBC2E; } .shot-dot.g { background: #28C840; }
.shot-url { margin-left: 12px; font-size: 12px; color: var(--text-dim); font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-figure { position: relative; margin: 0; cursor: zoom-in; display: block; }
.shot-figure img { display: block; width: 100%; height: auto; }
/* Tighter in-page crops of the 2000x1125 captures (lightbox keeps the full shot):
   --z zooms, --x/--y shift by a share of the image box. 16:9 frame kept so the
   carousel never changes height between slides. */
.shot-figure.crop, .shot-crop { aspect-ratio: 16 / 9; overflow: hidden; }
.shot-figure.crop img, .shot > .shot-crop img { display: block; height: auto; width: calc(var(--z, 1) * 100%); max-width: none; transform: translate(var(--x, 0), var(--y, 0)); }
.crop-app { --z: 1.08; --x: -4.75%; --y: -5.85%; }   /* hide the left rail + top bar */
.crop-wf  { --z: 1.5;  --x: -18.6%; --y: -7.1%; }    /* workflow detail sits mid-page */
.shot-zoom { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 8px;
  background: rgba(15,30,51,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.shot-figure:hover .shot-zoom { opacity: 1; }
.carousel-cap { text-align: center; margin: 16px auto 0; max-width: 680px; min-height: 66px; }
.carousel-cap h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.carousel-cap p { font-size: 14px; color: var(--text-sec); line-height: 1.6; }
.carousel-arrow { position: absolute; top: calc(50% - 56px); width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 24px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(20,50,90,.18);
  z-index: 5; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.carousel-arrow:hover { border-color: var(--teal); color: var(--teal-text); transform: scale(1.06); }
.carousel-arrow:focus-visible, .carousel-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.carousel-arrow.prev { left: 10px; } .carousel-arrow.next { right: 10px; }
.carousel-dots { display: flex; gap: 0; justify-content: center; align-items: center; margin-top: 14px; }
/* Each dot is a 24x24 touch target (WCAG 2.5.8); the visible 9px dot is its content box. */
.carousel-dot { position: relative; overflow: hidden; box-sizing: content-box; width: 9px; height: 9px; border-radius: 12px; border: none;
  background: var(--border-hi); background-clip: content-box; cursor: pointer; padding: 7.5px; transition: width .3s ease, background .2s; }
.carousel-dot.active { width: 36px; }
/* the active dot doubles as the autoplay progress bar */
.carousel-dot.active::after { content: ""; position: absolute; inset: 7.5px; border-radius: 5px; background: var(--teal); transform-origin: left center; }
.carousel.autoplay .carousel-dot.active::after { animation: carousel-progress var(--autoplay, 6s) linear forwards; }
.carousel.autoplay.paused .carousel-dot.active::after { animation-play-state: paused; }
@keyframes carousel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carousel-count { font-size: 12px; color: var(--text-dim); margin-left: 10px; font-variant-numeric: tabular-nums; }
/* Pause/play for the auto-advancing slideshow (site.js adds it after the counter). */
.carousel-pause { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 8px;
  border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-sec); cursor: pointer; padding: 0; }
.carousel-pause:hover { color: var(--text); border-color: var(--border-hi); }
.showcase-cta { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Looping product demo clip under the product-page hero (autoplay handled in site.js). */
.hero-clip-wrap { padding: 0 24px 64px; margin-top: -18px; }
.demo-clip { max-width: 1040px; margin: 0 auto; }
.demo-clip .shot-bar { justify-content: flex-start; }
.clip-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--teal-text); }
.clip-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #28C840;
  box-shadow: 0 0 0 3px rgba(40,200,64,.18); animation: clip-pulse 1.8s ease-in-out infinite; }
@keyframes clip-pulse { 50% { box-shadow: 0 0 0 6px rgba(40,200,64,0); } }

/* ── Light/dark product-media toggle (site.js initMediaTheme) ─────────────── */
.media-theme-row { display: flex; justify-content: center; margin: -6px 0 18px; }
.media-theme {
  --mt-track: var(--bg-hi); --mt-border: var(--border); --mt-text: var(--text-sec);
  --mt-on-bg: var(--bg-card); --mt-on-text: var(--text); --mt-on-shadow: 0 1px 3px rgba(20,50,90,.16);
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--mt-track); border: 1px solid var(--mt-border);
}
.media-theme button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--mt-text); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.media-theme button:hover { color: var(--mt-on-text); }
.media-theme button[aria-pressed="true"] { background: var(--mt-on-bg); color: var(--mt-on-text); box-shadow: var(--mt-on-shadow); }
.media-theme button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.media-theme--compact { padding: 2px; }
.media-theme--compact button { padding: 4px 10px; font-size: 11px; gap: 4px; }
/* In a clip's title bar the toggle takes the right edge; the badge follows it. */
.shot-bar .media-theme { margin-left: auto; flex-shrink: 0; }
.shot-bar .media-theme + .clip-badge { margin-left: 12px; }
.shot-url { min-width: 0; }
@media (max-width: 560px) {
  .media-theme--compact button { font-size: 0; gap: 0; padding: 4px 8px; }
  .media-theme--compact button span { font-size: 12px; }
  .shot-bar .media-theme + .clip-badge { display: none; }
}

/* Dark media: the browser-window frame goes dark too, so it matches what's inside. */
.shot > img { display: block; width: 100%; height: auto; }
html[data-theme="dark"] .theme-light-only, html:not([data-theme="dark"]) .theme-dark-only { display: none; }
html[data-theme="dark"] .shot { background: #0E1724; border-color: #223044; box-shadow: 0 14px 44px rgba(4,12,24,.32); }
html[data-theme="dark"] .shot-bar { background: #16212F; border-bottom-color: #223044; }
html[data-theme="dark"] .shot-url { color: #8496AE; }
html[data-theme="dark"] .shot-bar .media-theme {
  --mt-track: #0E1724; --mt-border: #2A3A50; --mt-text: #93A4BB;
  --mt-on-bg: var(--btn-bg); --mt-on-text: #FFFFFF; --mt-on-shadow: none;
}
html[data-theme="dark"] .clip-badge { color: #6FB0F8; }
.demo-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg-hi); }
@media (prefers-reduced-motion: reduce) { .clip-badge::before { animation: none; } }

/* Zoom lightbox (injected once by site.js) — doubles as a gallery for its carousel */
.lightbox { position: fixed; inset: 0; background: rgba(8,16,28,.9); display: none;
  align-items: center; justify-content: center; z-index: 1000; padding: 24px 76px 64px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.5); cursor: default; }
.lightbox-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: none; font-size: 22px; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: none; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255,255,255,.26); }
.lightbox-nav.prev { left: 16px; } .lightbox-nav.next { right: 16px; }
.lightbox-cap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(80vw, 760px);
  text-align: center; color: #DCE6F2; font-size: 14px; line-height: 1.5; }
.lightbox-cap b { color: #fff; }
/* Arrows and close stay tappable above the caption; the caption never takes taps. */
.lightbox-nav, .lightbox-close { z-index: 2; }
.lightbox-cap { z-index: 1; pointer-events: none; }
/* Phones: an opaque backdrop (the page no longer shows through), the shot on top, the
   caption in its own band above the arrow row so it never runs under the ‹ › buttons. */
@media (max-width: 720px) {
  .lightbox { padding: 64px 12px 196px; background: #060C16; }
  .lightbox img { max-height: calc(100vh - 280px); }
  .lightbox-nav { top: auto; bottom: 18px; transform: none; }
  .lightbox-cap { bottom: 82px; width: calc(100vw - 32px); font-size: 13px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── WHY SECTION ───────────────────────────────────────────────────────── */
.why-section {
  background: var(--bg-mid);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 88px 32px;
}
.why-section .section-inner { text-align: center; }
.why-section .section-title { margin-bottom: 14px; }
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; max-width: 1000px; margin: 40px auto 0; text-align: left;
}
.why-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.why-card:hover { border-color: var(--border-hi); box-shadow: 0 4px 16px rgba(20,50,90,.10); }
.why-icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.why-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.why-card p { font-size: 13px; color: var(--text-sec); line-height: 1.65; }

/* ── INTEGRATIONS ──────────────────────────────────────────────────────── */
.integrations-section {
  background: var(--bg);
  padding: 88px 32px;
}
.integrations-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin-top: 48px;
}
.integration-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.integration-card:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(46,128,224,.08); }
.integration-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.integration-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.integration-card p { font-size: 12px; color: var(--text-sec); line-height: 1.55; }
.integration-tag {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 4px; margin-top: 6px;
  background: rgba(46,128,224,.1); color: var(--teal-text);
}

/* ── PRICING ───────────────────────────────────────────────────────────── */
.pricing-section { background: var(--bg-mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pricing-section .section-sub { margin-bottom: 32px; }

.pricing-toggle-row { display: flex; gap: 0; margin-bottom: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px; width: fit-content; }
.pricing-toggle {
  background: transparent; border: none; border-radius: 6px;
  padding: 9px 24px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text-sec); transition: color .15s, background .15s;
}
.pricing-toggle.active { background: var(--btn-bg); color: #fff; }

.pricing-panel { display: none; }
.pricing-panel.active { display: block; }

.pricing-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start;
}
@media (max-width: 900px) { .pricing-layout { grid-template-columns: 1fr; } }

.pricing-card-main {
  background: var(--bg-card); border: 1.5px solid var(--teal);
  border-radius: 14px; padding: 36px;
  box-shadow: 0 0 0 4px rgba(46,128,224,.07), 0 4px 24px rgba(46,128,224,.1);
}
.price-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-text); margin-bottom: 8px; }
.price-display { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.price-amount { font-size: 52px; font-weight: 800; line-height: 1; color: var(--text); }
.price-period { font-size: 16px; color: var(--text-sec); margin-bottom: 8px; }
.price-breakdown { font-size: 13px; color: var(--text-dim); margin-bottom: 28px; }

.price-calc { margin-bottom: 20px; }
.price-calc-label { font-size: 12px; color: var(--text-sec); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 12px; }
.calc-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.calc-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1.5px solid var(--border-hi); background: var(--bg-hi);
  color: var(--text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s; line-height: 1; flex-shrink: 0;
}
.calc-btn:hover { border-color: var(--teal); background: rgba(46,128,224,.07); }
.calc-value-wrap { display: flex; align-items: baseline; gap: 8px; }
.calc-value { font-size: 28px; font-weight: 800; color: var(--teal-text); line-height: 1; }
.calc-unit { font-size: 14px; color: var(--text-sec); }
.calc-sub { font-size: 12px; color: var(--text-dim); }

.price-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: var(--border);
  outline: none; margin-bottom: 6px;
}
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal); cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(46,128,224,.2), 0 2px 6px rgba(0,0,0,.12);
}
.price-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal); cursor: pointer; border: 2px solid #fff;
}
.price-slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); }

.price-model-note {
  font-size: 12px; color: var(--text-dim); margin-bottom: 24px;
  padding: 10px 14px; background: var(--bg-hi); border-radius: 6px; border: 1px solid var(--border);
}
.price-includes { list-style: none; margin-bottom: 24px; }
.price-includes li {
  font-size: 13px; color: var(--text-sec); padding: 5px 0;
  display: flex; align-items: flex-start; gap: 10px;
}
.price-includes li::before { content: "✓"; color: var(--good); font-weight: 700; flex-shrink: 0; }

.pricing-compare-side {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 24px; position: sticky; top: 86px;
  box-shadow: 0 2px 12px rgba(20,50,90,.08);
}
.compare-side-title { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.4; }
.compare-side-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.compare-side-row:last-of-type { border-bottom: none; }
.mantis-row .compare-side-name { color: var(--teal-text); font-weight: 700; }
.mantis-row .compare-side-price { color: var(--teal-text); font-weight: 700; }
.compare-side-name { color: var(--text-sec); }
.compare-side-price { color: var(--text-dim); font-size: 12px; }
.compare-side-note { font-size: 11px; color: var(--text-dim); margin-top: 12px; line-height: 1.5; }

.pricing-footer-note { margin-top: 28px; font-size: 13px; color: var(--text-dim); text-align: center; }

/* ── MantisOps Complete bundle banner ──────────────────────────────────── */
.bundle-banner {
  margin-top: 36px; position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  background: var(--bg-card); border: 1.5px solid var(--teal); border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 0 0 4px rgba(46,128,224,.07), 0 4px 24px rgba(46,128,224,.1);
}
.bundle-banner .price-includes { margin-bottom: 0; }
.bundle-save {
  display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
  font-size: 40px; font-weight: 800; line-height: 1; color: var(--teal-text);
}
.bundle-save-sub { font-size: 15px; font-weight: 600; color: var(--text-sec); }
.bundle-cta { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
@media (max-width: 760px) {
  .bundle-banner { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .bundle-cta { min-width: 0; }
}

/* ── COMPARE SECTION ───────────────────────────────────────────────────── */
.compare-section { background: var(--bg-mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.mini-compare-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.mini-tab {
  padding: 12px 20px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.mini-tab:hover { color: var(--text); }
.mini-tab.active { color: var(--teal-text); border-bottom-color: var(--teal); }

.mini-tab-panel { display: none; }
.mini-tab-panel.active { display: block; }

.mini-compare-wrap { overflow-x: auto; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.mini-table th, .mini-table td {
  padding: 10px 14px; text-align: left;
  vertical-align: middle;
}
.mini-table thead th {
  background: var(--bg-hi); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--text-sec); text-transform: uppercase;
  border-bottom: 2px solid var(--border);
  border-right: 1px solid transparent;
}
.mini-table thead th:hover { border-right-color: var(--border); }
.mini-table thead th:last-child { border-right-color: transparent; }
.mini-table tbody tr:hover td { background: rgba(46,128,224,.03); }
.col-mantis-head { background: rgba(46,128,224,.08) !important; color: var(--teal-text) !important; border-bottom-color: var(--teal) !important; }
.col-mantis { background: rgba(46,128,224,.03) !important; }
.yes { color: var(--good); font-weight: 700; }
.partial { color: #D97706; font-weight: 600; }
.no { color: var(--bad); }
.note { font-size: 11px; color: var(--text-dim); display: block; margin-top: 1px; }

/* ── DOCS SECTION ──────────────────────────────────────────────────────── */
.docs-section { background: var(--bg); }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.docs-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.docs-card:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(46,128,224,.08); }

.docs-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.docs-card p { font-size: 13px; color: var(--text-sec); line-height: 1.65; margin-bottom: 14px; }
.docs-links { list-style: none; }
.docs-links li { font-size: 13px; padding: 3px 0; }
.docs-links li a { color: var(--teal-text); }
.docs-links li a:hover { text-decoration: underline; }

/* ── FAQ SECTION ───────────────────────────────────────────────────────── */
.faq-section { background: var(--bg-mid); border-top: 1px solid var(--border); }
.faq-inner { max-width: 780px; }
.faq-list { margin-top: 16px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; text-align: left; background: none; border: none;
  color: var(--text); font-size: 15px; font-weight: 600;
  cursor: pointer; gap: 16px; line-height: 1.4;
  transition: color .15s;
}
.faq-question:hover { color: var(--teal-text); }
.faq-arrow {
  font-size: 11px; color: var(--text-dim); flex-shrink: 0;
  transition: transform .25s;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--teal-text); }
.faq-item.open .faq-question { color: var(--teal-text); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-answer { max-height: 500px; padding-bottom: 18px; }
.faq-answer p { font-size: 14px; color: var(--text-sec); line-height: 1.7; margin-bottom: 8px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin-left: 4px; }
.faq-answer strong { color: var(--text); }
code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 12px; background: var(--bg-hi); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; color: var(--teal-dk);
}

/* ── CTA SECTION ───────────────────────────────────────────────────────── */
.cta-section {
  position: relative; text-align: center; overflow: hidden;
  padding: 100px 32px 90px;
  background: linear-gradient(135deg, #0A1826 0%, #0C2438 50%, #0A1826 100%);
  border-top: 1px solid var(--border);
}
.cta-glow { display: none; }
.cta-section h2 { font-size: 42px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 16px; color: var(--text); }
.cta-section p { font-size: 16px; color: #B6C7DE; max-width: 520px; margin: 0 auto 36px; line-height: 1.65; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) { .cta-section h2 { font-size: 28px; } }

/* ── FOOTER (dark anchor) ──────────────────────────────────────────────── */
footer {
  background: #0B1A28; border-top: none;
  padding: 48px 32px 36px;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #66788F; margin-bottom: 4px; }
.footer-col a { font-size: 13px; color: #A2B0C4; }
.footer-col a:hover { color: #FFFFFF; text-decoration: none; }
footer .nav-brand { color: #EAF1F8; }
footer .footer-brand, footer .footer-brand * { color: #8395AC; }
footer .nav-logo { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

/* ── FORM PAGES (rmm.html / ops.html) ─────────────────────────────────── */
.page-hero {
  padding: 120px 32px 60px; text-align: center;
}
.page-hero .eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal-text); margin-bottom: 14px; }
.page-hero h1 { font-size: 38px; font-weight: 800; margin-bottom: 12px; line-height: 1.15; color: var(--text); }
.page-hero h1 span { color: var(--teal-text); }
.page-hero p { color: var(--text-sec); font-size: 15px; max-width: 540px; margin: 0 auto; line-height: 1.7; }
.form-wrap { display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px 72px; }
.form-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 40px; width: 100%; max-width: 500px;
  box-shadow: 0 4px 24px rgba(20,50,90,.10);
}
.form-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.form-card .sub { color: var(--text-sec); font-size: 13px; margin-bottom: 28px; }
label { display: block; font-size: 12px; color: var(--text-sec); margin-bottom: 5px; margin-top: 16px; font-weight: 600; }
input, select, textarea {
  width: 100%; background: var(--bg-hi); border: 1.5px solid var(--border);
  border-radius: 7px; color: var(--text); font-size: 14px; padding: 10px 13px; outline: none;
  font-family: inherit;
}
/* Checkboxes/radios must keep their intrinsic size — the width:100% above is
   for text fields only; without this the consent checkbox stretches full-width
   and (with flex-shrink:0) pushes the terms label outside the form. */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,128,224,.1); }
textarea { resize: vertical; min-height: 80px; }
.submit-btn { width: 100%; margin-top: 24px; padding: 12px; font-size: 15px; }
.success {
  display: none; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.3);
  border-radius: 8px; padding: 18px; color: var(--good); font-size: 14px;
  text-align: center; margin-top: 20px;
}
.err-msg { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 18px; }
.back-link { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-sec); }

/* ── COMPARE PAGE ──────────────────────────────────────────────────────── */
.page-header {
  padding: 120px 32px 48px; text-align: center;
}
.page-header .eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal-text); margin-bottom: 14px; }
.page-header h1 { font-size: 40px; font-weight: 700; margin-bottom: 14px; line-height: 1.15; color: var(--text); }
.page-header h1 span { color: var(--teal-text); }
.page-header p { color: var(--text-sec); font-size: 15px; max-width: 580px; margin: 0 auto; line-height: 1.7; }

.tab-nav {
  display: flex; justify-content: center; gap: 0;
  border-bottom: 1px solid var(--border); background: var(--bg);
  padding: 0 32px; flex-wrap: wrap;
}
.tab-btn {
  padding: 14px 24px; font-size: 13px; font-weight: 600; color: var(--text-dim);
  border: none; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  white-space: nowrap; letter-spacing: 0.3px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--teal-text); border-bottom-color: var(--teal); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.table-wrap { overflow-x: auto; padding: 40px 24px 56px; max-width: 1200px; margin: 0 auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.compare-table th, .compare-table td {
  padding: 11px 16px; text-align: left;
  vertical-align: middle;
}
.compare-table thead th {
  background: var(--bg-hi); font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--text-sec); text-transform: uppercase;
  border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 10;
  border-right: 1px solid transparent;
}
.compare-table thead th:hover { border-right-color: var(--border); }
.compare-table thead th:last-child { border-right-color: transparent; }
/* Hide every horizontal table separator incl. inline-styled rows/headers;
   vertical column dividers stay hover-only via th:hover border-right. */
table th, table td, table tr { border-top-color: transparent !important; border-bottom-color: transparent !important; }
.compare-table tbody tr:hover td { background: rgba(46,128,224,.03); }
.compare-table .feature-col { color: var(--text); font-size: 13px; max-width: 260px; }
.compare-table .category-row td {
  background: var(--bg-hi); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal-text);
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.col-mantis { background: rgba(46,128,224,.03) !important; }
.col-mantis-head { background: rgba(46,128,224,.09) !important; color: var(--teal-text) !important; border-bottom-color: var(--teal) !important; }
.badge-mantis {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: rgba(46,128,224,.12); color: var(--teal-text); font-weight: 700;
  margin-left: 6px; vertical-align: middle;
}

.pricing-section { padding: 48px 32px 72px; max-width: 1140px; margin: 0 auto; }
.pricing-section h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.pricing-section .sub { color: var(--text-sec); font-size: 14px; margin-bottom: 36px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.price-card {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 24px; position: relative; transition: border-color .2s, box-shadow .2s;
}
.price-card:hover { border-color: rgba(46,128,224,.4); box-shadow: 0 4px 16px rgba(46,128,224,.08); }
.price-card.featured { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(46,128,224,.07); }
.featured-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--btn-bg); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 12px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.5px;
}
.price-product { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.price-name { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.price-main { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; }
.price-main .price-unit { font-size: 13px; font-weight: 400; color: var(--text-sec); }
.price-note { font-size: 11px; color: var(--text-dim); margin-top: 4px; margin-bottom: 16px; }
.price-features { list-style: none; }
.price-features li { font-size: 12px; color: var(--text-sec); padding: 4px 0; display: flex; gap: 8px; align-items: flex-start; }
.price-features li::before { content: "✓"; color: var(--good); flex-shrink: 0; }

.verdict-section { background: var(--bg-mid); border-top: 1px solid var(--border); padding: 64px 32px; }
.verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.verdict-card { background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 24px; }
.verdict-vs { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; }
.verdict-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.verdict-card p { font-size: 13px; color: var(--text-sec); line-height: 1.6; }
.verdict-win { color: var(--good); font-weight: 600; }

.cta-banner { text-align: center; padding: 64px 32px; }
.cta-banner h2 { font-size: 26px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.cta-banner p { color: var(--text-sec); font-size: 14px; margin-bottom: 28px; }

/* ── SLIDER TRACK FILL ─────────────────────────────────────────────────── */
.price-slider { cursor: pointer; }

/* ── LIVE DASHBOARD SHOWCASE (Mantis360 security dashboard mockup) ──────── */
.showcase-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .showcase-inner { grid-template-columns: 1fr; gap: 32px; } }

.dash {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  color: var(--text); box-shadow: 0 24px 60px -20px rgba(46,128,224,.28), 0 8px 24px rgba(20,50,90,.08);
}
.dash-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--bg-mid); border-bottom: 1px solid var(--border); }
.dash-bar .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dash-bar .dot.r { background: #EF4444; } .dash-bar .dot.y { background: #EAB308; } .dash-bar .dot.g { background: #22C55E; }
.dash-title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-sec); }
.dash-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-dk); }
.dash-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: dashPulse 1.6s infinite; }
@keyframes dashPulse { 0% { box-shadow: 0 0 0 0 rgba(46,128,224,.45); } 70% { box-shadow: 0 0 0 9px rgba(46,128,224,0); } 100% { box-shadow: 0 0 0 0 rgba(46,128,224,0); } }

.dash-body { padding: 18px; }
.dash .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash .kpi { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; }
.dash .kpi-num { font-size: 26px; font-weight: 800; color: var(--teal-text); line-height: 1; }
.dash .kpi:first-child .kpi-num { color: var(--text); }
.dash .kpi-label { margin-top: 6px; font-size: 10px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .04em; }

.dash-scan { margin: 16px 0 18px; }
.dash-scan span { display: block; font-size: 11px; color: var(--text-sec); margin-bottom: 7px; }
.dash-scan span::before { content: "\25B8\00A0"; color: var(--teal-text); }
.scan-track { position: relative; height: 6px; border-radius: 6px; background: var(--bg-hi); overflow: hidden; }
.scan-track i { position: absolute; top: 0; left: -40%; height: 100%; width: 38%; border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--teal), #5BA0F5, transparent); animation: scanSweep 1.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scanSweep { 0% { left: -40%; } 100% { left: 100%; } }

.sev { display: flex; flex-direction: column; gap: 9px; }
.sev-row { display: grid; grid-template-columns: 64px 1fr 38px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-sec); }
.sev-row b { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.sev-bar { height: 8px; border-radius: 5px; background: var(--bg-hi); overflow: hidden; }
.sev-bar i { display: block; height: 100%; width: 0; border-radius: 5px; animation: sevGrow 1.2s cubic-bezier(.22,1,.36,1) forwards; }
.sev-bar i.c { background: #EF4444; } .sev-bar i.h { background: #F97316; }
.sev-bar i.m { background: #EAB308; } .sev-bar i.l { background: #22C55E; }
@keyframes sevGrow { to { width: var(--w); } }
@media (prefers-reduced-motion: reduce) { .scan-track i, .dash-live i, .sev-bar i { animation: none; } .sev-bar i { width: var(--w); } }

/* ── S-WAVE SECTION DIVIDERS ─────────────────────────────────────────────────
   Each section draws an S-shaped wave (::before) filled with its OWN top colour
   and positioned just ABOVE itself (bottom:100%), so the wave OVERLAPS the
   section above it. The wave's flat bottom meets the section seamlessly; its
   S-curved top edge reveals the previous section's colour, so consecutive
   sections use distinct navy tones. Pure CSS on existing selectors. */
#features, .why-section, #pricing, #compare, #docs, #faq, .cta-section, footer {
  position: relative;
  z-index: 1;
  border-top: none !important;
  border-bottom: none !important;
  /* Force full-bleed so the wave spans the whole page (a shared .pricing-section
     rule otherwise caps #pricing at 1140px and clips its curve). */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
footer { z-index: 2; }
/* Extra bottom room so the taller wave overlaps each section's padding, not its
   content (every section here is the one a wave sits on top of). */
#showcase, #features, .why-section, #pricing, #compare, #docs, #faq, .cta-section { padding-bottom: 128px; }
#features::before, .why-section::before, #pricing::before, #compare::before,
#docs::before, #faq::before, .cta-section::before, footer::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 110px;
  background-color: var(--wave);
  pointer-events: none;
  /* Each section supplies its OWN curve via --wave-mask (defined below), so no
     two dividers share a shape. The filled area is BELOW the curve, so it reads
     as this section's colour waving up into the section above.
     preserveAspectRatio=none stretches it to any width. */
  -webkit-mask: var(--wave-mask);
          mask: var(--wave-mask);
}
/* Alternating tones (A deep · B elevated navy · C blue-tint); --wave = each
   section's own top colour so the wave merges into the section below it. */
/* Each section gets a DISTINCT curve via --wave-mask (broad arch · S · reverse-S ·
   double-wave · diagonal · M-shape · asymmetric · valley) so no two match. */
#features    { --wave:var(--sec-b); --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C360,8 1080,8 1440,48 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, var(--sec-b) 0%, var(--sec-b2) 100%); }  /* B */
.why-section { --wave:var(--sec-a); --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C480,74 960,2 1440,40 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, var(--sec-a) 0%, var(--sec-a2) 100%); }  /* A */
#pricing     { --wave:var(--sec-c); --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C480,2 960,74 1440,18 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, var(--sec-c) 0%, var(--sec-c2) 100%); }  /* C */
#compare     { --wave:var(--sec-b); --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C240,8 480,60 720,36 C960,14 1200,60 1440,30 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, var(--sec-b) 0%, var(--sec-b2) 100%); }  /* B */
#docs        { --wave:var(--sec-a); --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C600,28 900,58 1440,52 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, var(--sec-a) 0%, var(--sec-a2) 100%); }  /* A */
#faq         { --wave:var(--sec-c); --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C360,62 540,8 720,40 C900,72 1080,18 1440,46 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, var(--sec-c) 0%, var(--sec-c2) 100%); }  /* C */
.cta-section { --wave:#0C2438; --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C720,5 1080,32 1440,14 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; background: linear-gradient(180deg, #0C2438 0%, #081A2A 100%); }
footer       { --wave:#0C1B28; --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C480,70 960,70 1440,20 L1440,74 L0,74 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; }
@media (max-width: 700px) {
  #features::before, .why-section::before, #pricing::before, #compare::before,
  #docs::before, #faq::before, .cta-section::before, footer::before { height: 64px; }
  #showcase, #features, .why-section, #pricing, #compare, #docs, #faq, .cta-section { padding-bottom: 84px; }
}

/* Table headers: 90% transparent (subtle tint) */
.result-tbl th, .agents-tbl th, table th, thead th { background: rgba(91,147,242,.05) !important; }



/* === auto-generated utility classes (inline-style refactor for CSP style-src) === */
.u1 { font-size:.42em !important; font-weight:600 !important; letter-spacing:0 !important; vertical-align:top !important; margin-left:1px !important; }
.u2 { color:var(--teal-text) !important; }
.u3 { font-size:13px !important; color:var(--text-dim) !important; margin-bottom:20px !important; }
.u4 { min-width:220px !important; }
.u5 { color:var(--teal-text) !important; font-weight:600 !important; }
.u6 { font-size:13px !important; }
.u7 { font-size:12px !important; color:var(--text-dim) !important; margin-top:16px !important; max-width:760px !important; }
.u8 { margin-top:56px !important; }
.u9 { margin-top:40px !important; padding:20px 24px !important; background:var(--bg-mid) !important; border:1px solid var(--border) !important; border-radius:10px !important; font-size:12px !important; color:var(--text-dim) !important; line-height:1.7 !important; }
.u10 { color:var(--text-sec) !important; }
.u11 { text-align:center !important; margin-bottom:40px !important; }
.u12 { font-size:26px !important; font-weight:700 !important; margin-bottom:8px !important; }
.u13 { color:var(--text-sec) !important; font-size:14px !important; max-width:560px !important; margin:0 auto !important; }
.u14 { display:flex !important; gap:14px !important; justify-content:center !important; flex-wrap:wrap !important; }
.u15 { font-size:15px !important; padding:13px 28px !important; }
.u16 { display:flex !important; gap:16px !important; flex-wrap:wrap !important; }
.u17 { color:var(--teal-text) !important; background:rgba(46,128,224,.1) !important; border:1.5px solid var(--teal) !important; box-shadow:none !important; }
.u18 { width:100% !important; text-align:center !important; display:block !important; padding:13px !important; }
.u19 { margin-top:8px !important; display:flex !important; gap:8px !important; flex-wrap:wrap !important; }
.u20 { flex:1 !important; text-align:center !important; }
.u21 { flex:1 1 100% !important; text-align:center !important; }
.u22 { border-color:var(--teal,#2E80E0) !important; color:var(--teal,#2E80E0) !important; text-decoration:none !important; }
.u23 { --w:64% !important; }
.u24 { --w:82% !important; }
.u25 { --w:48% !important; }
.u26 { --w:30% !important; }
.u27 { background:rgba(46,128,224,.1) !important; }
.u28 { background:rgba(63,185,80,.1) !important; }
.u29 { background:rgba(139,92,246,.1) !important; }
.u30 { background:rgba(249,115,22,.1) !important; }
.u31 { display:flex !important; gap:8px !important; margin-top:8px !important; }
.u32 { margin-top:10px !important; font-size:12px !important; color:#61728E !important; text-align:center !important; }
.u33 { text-align:left !important; }
.u34 { width:100% !important; font-size:14px !important; min-width:0 !important; }
.u35 { text-align:right !important; color:var(--teal-text) !important; font-weight:600 !important; }
.u36 { text-align:right !important; }
.u37 { margin-bottom:18px !important; }
.u38 { text-align:center !important; padding:13px !important; }
.u39 { text-align:center !important; margin-top:32px !important; }
.u40 { margin:8px 0 0 16px !important; color:var(--text-sec) !important; line-height:1.8 !important; }
.u41 { margin-top:8px !important; }
.u42 { background:rgba(46,128,224,.15) !important; border:1px solid var(--teal) !important; color:var(--teal-text) !important; }
.u43 { font-size:18px !important; }
.u44 { font-size:11px !important; color:var(--text-dim) !important; margin-top:4px !important; }
.u45 { justify-content:center !important; margin-top:22px !important; }
.u46 { padding-top:16px !important; }
.u47 { color:var(--bad) !important; }
.u48 { color:var(--text-dim) !important; }
.u49 { display:flex !important; align-items:flex-start !important; gap:8px !important; margin:14px 0 4px !important; font-size:13px !important; color:var(--text-sec) !important; font-weight:400 !important; cursor:pointer !important; }
.u50 { margin-top:3px !important; flex-shrink:0 !important; }
.u51 { margin:14px 0 !important; }
.u52 { padding-top:6px !important; }
.u53 { padding-top:8px !important; padding-bottom:26px !important; }
.u54 { padding-top:8px !important; }

/* ── Dark-theme component overrides ────────────────────────────────────────────
   Most components follow the tokens above; these cover the few hard-coded colours
   (including scoped <style> blocks in index/roadmap/release-notes, which load after
   this file but lose on specificity). */
html[data-theme="dark"] .mtx-word { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 18px rgba(46,128,224,.30)); }
html[data-theme="dark"] .cta-section { background: linear-gradient(180deg, #0F2340 0%, #0A1A2E 100%); --wave: #0F2340; }
html[data-theme="dark"] footer { background: #070E19; --wave: #070E19; }
html[data-theme="dark"] .u32 { color: var(--text-dim) !important; }
html[data-theme="dark"] .badge { background: rgba(91,160,245,.10); border-color: rgba(91,160,245,.35); }
html[data-theme="dark"] .product-tab.active, html[data-theme="dark"] .feature-card-highlight { background: rgba(91,160,245,.08); }
html[data-theme="dark"] .partial { color: #F5B544; }
html[data-theme="dark"] .feature-card:hover, html[data-theme="dark"] .why-card:hover,
html[data-theme="dark"] .product-tab:hover { box-shadow: 0 6px 22px rgba(0,0,0,.35); }
html[data-theme="dark"] .price-slider::-webkit-slider-thumb { border-color: var(--bg-card); }
html[data-theme="dark"] .price-slider::-moz-range-thumb { border-color: var(--bg-card); }
html[data-theme="dark"] .shot-zoom { background: rgba(0,0,0,.55); }
/* roadmap / release-notes product + change tags (light pastels in their own <style>) */
html[data-theme="dark"] .rm-items .tag, html[data-theme="dark"] .rn-prod.nms { color: #F5C48A; background: rgba(245,165,36,.12); border-color: rgba(245,165,36,.35); }
html[data-theme="dark"] .rm-items .tag.rmm, html[data-theme="dark"] .rn-prod.rmm { color: #9CC8FA; background: rgba(46,128,224,.14); border-color: rgba(91,160,245,.38); }
html[data-theme="dark"] .rm-items .tag.m360, html[data-theme="dark"] .rn-prod.m360 { color: #7FDDBB; background: rgba(32,178,128,.12); border-color: rgba(32,178,128,.35); }
html[data-theme="dark"] .rn-prod.platform { color: #C7B5F5; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.38); }
html[data-theme="dark"] .rn-tag.added, html[data-theme="dark"] .rn-tag.new { color: #7FE0A4; background: rgba(61,214,140,.12); }
html[data-theme="dark"] .rn-tag.fixed { color: #9CC8FA; background: rgba(46,128,224,.16); }
html[data-theme="dark"] .rn-tag.improved { color: #F5C48A; background: rgba(245,165,36,.13); }
html[data-theme="dark"] .rn-tag.changed { color: #C3CCDA; background: rgba(162,176,196,.14); }
html[data-theme="dark"] .rm-col.now .rm-items li::before { background: #3DD68C; }
html[data-theme="dark"] .rm-col.next .rm-items li::before { background: #5BA0F5; }

/* ── Layout polish ─────────────────────────────────────────────────────────────── */
/* Four-card grids (home "Why", roadmap themes) were 3 + 1 orphan: 4 / 2 / 1 columns. */
.why-grid, section .rm-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1160px; }
@media (max-width: 1000px) { .why-grid, section .rm-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .why-grid, section .rm-themes { grid-template-columns: 1fr; } }
/* Use-case page screenshot: same width as the product-page demo clips. */
.hero-clip-wrap > .shot { max-width: 1040px; margin: 0 auto; }
/* Phone stats bar: 2 x 2 instead of four stacked rows with big gaps. */
@media (max-width: 560px) {
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; padding: 24px 16px; }
  .stat-num { font-size: 26px; }
}
/* Feature cards: equal-height content, consistent icon/title rhythm. */
.feature-card p, .why-card p, .docs-card p { font-size: 13.5px; }

/* ── Platform + Shadow AI (launch 2026-11) ────────────────────────────────────
   Product mock panels (.mk-*) drawn in CSS — the same visual language as the apps
   (pills, product tags, KPI tiles, rows) — plus the layout pieces the /platform and
   /shadow-ai pages, the home "One platform" section and the product pages'
   "Better together" bands share. All colours come from the theme tokens; the few
   hard-coded hues (product tags, severities) have dark overrides at the end. No
   inline styles (CSP), so widths/scores use small modifier classes. */

/* Feature rows: copy + visual, alternating sides. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.split + .split { margin-top: 104px; }
.split.rev .split-copy { order: 2; }
.split-copy .section-eyebrow { margin-bottom: 10px; }
.split-title { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: .005em;
  margin-bottom: 14px; background: var(--title-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; filter: var(--title-shadow); }
.split-copy > p { font-size: 15.5px; color: var(--text-sec); line-height: 1.7; margin-bottom: 18px; max-width: 520px; }
.split-copy .price-includes { margin-bottom: 0; }
.split-copy .price-includes li { font-size: 14px; }
.split-more { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.rev .split-copy { order: 0; }
  .split + .split { margin-top: 72px; }
  .split-title { font-size: 25px; }
}

/* A soft glow behind a mock so it lifts off the page (stronger in dark). */
.mk-stage { position: relative; min-width: 0; }
.mk-stage::before { content: ""; position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46,128,224,.16), rgba(46,128,224,0) 70%); }
html[data-theme="dark"] .mk-stage::before { background: radial-gradient(50% 50% at 50% 50%, rgba(46,128,224,.26), rgba(79,216,200,.05) 55%, rgba(46,128,224,0) 72%); }
.mk-stage > * { position: relative; z-index: 1; }

/* Mock window. Reuses .dash-bar / .dash-title / .dash-live for the title bar. */
.mk { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; color: var(--text);
  text-align: left; font-size: 13px; line-height: 1.45;
  box-shadow: 0 24px 60px -22px rgba(46,128,224,.30), 0 8px 24px rgba(20,50,90,.08); }
html[data-theme="dark"] .mk { border-color: #22344F; box-shadow: 0 34px 80px -30px rgba(0,0,0,.75), 0 18px 60px -34px rgba(46,128,224,.55); }
.mk + .mk { margin-top: 16px; }
.mk-body { padding: 16px; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-h { font-size: 14.5px; font-weight: 700; color: var(--text); }
.mk-sub { font-size: 11.5px; color: var(--text-dim); }
.mk-note { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); display: flex; gap: 6px; align-items: flex-start; }
.mk-note .ico { width: 14px; height: 14px; margin-top: 1px; color: var(--teal-text); }

/* Segmented control (static) */
.mk-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg-hi); border: 1px solid var(--border); max-width: 100%; overflow: hidden; }
.mk-seg span { padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text-sec); white-space: nowrap; }
.mk-seg span.on { background: var(--bg-card); color: var(--text); box-shadow: 0 1px 2px rgba(15,30,51,.14); }
.mk-seg b { font-weight: 700; color: var(--text-dim); margin-left: 4px; }

/* Rows (div grid, not <table>: the site's global table rules strip borders) */
.mk-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-card); }
.mk-row:first-child { border-top: 0; }
.mk-row.is-hl { background: rgba(46,128,224,.06); box-shadow: inset 3px 0 0 var(--teal); }
.mk-cell { min-width: 0; }
.mk-t { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-s { display: block; margin-top: 2px; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-end { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.mk-th { display: grid; gap: 10px; padding: 0 12px 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
/* Column layouts used by the mocks */
.mk-cols-dev { grid-template-columns: minmax(0, 1.5fr) repeat(3, 44px) minmax(0, 1.25fr); }
.mk-cols-dev .mk-end { justify-content: flex-start; }
.mk-cols-app .mk-end { justify-content: flex-start; }
.mk-cols-app { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 56px 104px; }
.mk-cols-srv { grid-template-columns: 66px minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr); }
.mk-row > .mk-sev:first-child { min-width: 66px; text-align: center; }
.mk-cols-srv > .mk-sev:first-child { justify-self: start; }
.mk-c { text-align: center; display: flex; justify-content: center; }
@media (max-width: 520px) {
  .mk-cols-dev { grid-template-columns: minmax(0, 1fr) repeat(3, 30px); }
  .mk-cols-dev > :last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .mk-cols-app { grid-template-columns: minmax(0, 1fr) 34px 100px; }
  .mk-cols-app > .mk-hide-sm, .mk-cols-srv > .mk-hide-sm { display: none; }
  .mk-cols-srv { grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1fr); }
  .mk-body { padding: 12px; }
  .mk-seg { flex-wrap: wrap; }
}

/* Product tags (match the app switcher / release-notes colours) */
.mk-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 4px 6px; border-radius: 5px;
  font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; border: 1px solid; white-space: nowrap; }
.mk-tag.rmm  { color: #1E5AA8; border-color: #BCD3EF; background: #EAF2FC; }
.mk-tag.m360 { color: #137A5B; border-color: #B7E3D3; background: #E8F7F1; }
.mk-tag.nms  { color: #8A4B12; border-color: #F0D8B8; background: #FBF1E3; }
.mk-tag.portal { color: #5A3AA8; border-color: #D6CBF0; background: #F1ECFB; }

/* Severity + status pills */
.mk-sev { display: inline-block; padding: 3px 7px; border-radius: 999px; font: 700 9.5px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.mk-sev.crit { color: #B91C1C; background: rgba(239,68,68,.12); }
.mk-sev.high { color: #C2410C; background: rgba(249,115,22,.13); }
.mk-sev.med  { color: #A16207; background: rgba(234,179,8,.16); }
.mk-sev.low  { color: #1D4ED8; background: rgba(59,130,246,.12); }
.mk-sev.kev  { color: #B91C1C; background: transparent; border: 1px solid rgba(239,68,68,.45); }
.mk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  color: var(--text-sec); background: var(--bg-hi); }
.mk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mk-pill.good { color: #15803D; background: rgba(22,163,74,.12); }
.mk-pill.warn { color: #B45309; background: rgba(245,158,11,.15); }
.mk-pill.bad  { color: #B91C1C; background: rgba(239,68,68,.12); }
.mk-pill.mute { color: var(--text-dim); }
.mk-pill.nodot::before { display: none; }
.mk-yes, .mk-no { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mk-yes { color: #15803D; background: rgba(22,163,74,.13); }
.mk-yes .ico { width: 12px; height: 12px; stroke-width: 3; }
.mk-no::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--border-hi); }

/* Buttons inside mocks */
.mk-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; font-size: 11px; font-weight: 600;
  color: var(--text-sec); background: var(--bg-hi); border: 1px solid var(--border); white-space: nowrap; }
.mk-btn .ico { width: 13px; height: 13px; }
.mk-btn.pri { color: #fff; background: var(--btn-bg); border-color: transparent; }
.mk-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* KPI tiles */
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mk-kpi { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; min-width: 0; }
.mk-kpi .n { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.mk-kpi .n small { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-left: 3px; }
.mk-kpi .l { margin-top: 6px; font-size: 10.5px; color: var(--text-sec); line-height: 1.3; }
.mk-kpi .f { margin-top: 3px; font-size: 10.5px; color: var(--text-dim); line-height: 1.3; }
.mk-kpi .f.warn { color: #B45309; } .mk-kpi .f.bad { color: #B91C1C; }
@media (max-width: 560px) { .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Headline banner inside a mock */
.mk-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text); border: 1px solid rgba(245,158,11,.38); background: rgba(245,158,11,.09); }
.mk-banner .ico { width: 16px; height: 16px; color: #D97706; }
.mk-banner.bad { border-color: rgba(239,68,68,.38); background: rgba(239,68,68,.08); }
.mk-banner.bad .ico { color: #DC2626; }

/* Chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--text-sec); background: var(--bg-hi); border: 1px solid var(--border); white-space: nowrap; }
.mk-chip.warn { color: #B45309; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.32); }
.mk-chip .ico { width: 13px; height: 13px; }

/* Score ring (conic) + bars */
.mk-ring { --v: 0; --ring: var(--teal); position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--v) * 1%), var(--bg-hi) 0); display: grid; place-items: center; }
.mk-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg-card); }
.mk-ring > span { position: relative; text-align: center; line-height: 1; }
.mk-ring b { display: block; font-size: 28px; font-weight: 800; color: var(--text); }
.mk-ring i { display: block; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--teal-text); }
.mk-ring.v84 { --v: 84; }
.mk-meter { height: 7px; border-radius: 5px; background: var(--bg-hi); overflow: hidden; }
.mk-meter > i { display: block; height: 100%; border-radius: 5px; background: var(--teal); }
.mk-meter > i.good { background: #22C55E; } .mk-meter > i.warn { background: #F59E0B; }
.p96 { width: 96%; } .p91 { width: 91%; } .p88 { width: 88%; } .p74 { width: 74%; } .p62 { width: 62%; } .p40 { width: 40%; }
.p30 { width: 30%; } .p20 { width: 20%; } .p12 { width: 12%; }
.mk-scores { display: grid; gap: 9px; flex: 1; min-width: 0; }
.mk-score { display: grid; grid-template-columns: 74px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--text-sec); }
.mk-score b { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.mk-flex { display: flex; gap: 18px; align-items: center; }
@media (max-width: 420px) { .mk-flex { flex-direction: column; align-items: stretch; } .mk-ring { margin: 0 auto; } }

/* Key/value grid (device + sensor cards) */
.mk-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 12px; }
.mk-kv dt { color: var(--text-dim); }
.mk-kv dd { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg-mid); }
.mk-card + .mk-card { margin-top: 10px; }
.mk-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: var(--text); }
.mk-card-h .ico { width: 15px; height: 15px; color: var(--teal-text); }
.mk-card-h .mk-tag { margin-left: auto; }
.mk-port { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--bg-card); border: 1px dashed var(--border-hi); font-size: 12px; color: var(--text-sec); }
.mk-port b { color: var(--text); }
.mk-port .ico { width: 18px; height: 18px; color: var(--teal-text); }
.mk-mono { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 11px; }

/* Small helpers used inside mocks */
.mk-gap { margin-top: 14px; }
.mk-wrap { white-space: normal; font-size: 11.5px; line-height: 1.5; color: var(--text-sec); }
.mk-ev { flex-direction: column; align-items: flex-end; gap: 3px; }
.hub-ic.mk-mini { width: 26px; height: 26px; margin: 0; border-radius: 7px; }
.hub-ic.mk-mini .ico { width: 14px; height: 14px; }
.mk-kv .mk-pill, .mk-kv .mk-sev { vertical-align: 1px; }

/* Hub diagram: one agent -> three products -> one portal */
.hub-wrap { padding: 8px 24px 72px; margin-top: -10px; }
.hub { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.1fr) 64px minmax(0, 1fr); align-items: center; }
.hub-node, .hub-prod { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-lg); }
html[data-theme="dark"] .hub-node, html[data-theme="dark"] .hub-prod { border-color: #22344F; }
.hub-node .k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-text); }
.hub-node h3, .hub-node .hub-h { font-size: 18px; font-weight: 800; color: var(--text); margin: 6px 0 6px; }
.hub-node p { font-size: 12.5px; color: var(--text-sec); line-height: 1.55; }
.hub-node .mk-chips { margin-top: 12px; }
.hub-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0;
  color: var(--teal-text); background: rgba(46,128,224,.10); border: 1px solid rgba(46,128,224,.22); }
.hub-ic .ico { width: 21px; height: 21px; }
.hub-prods { display: grid; gap: 10px; }
.hub-prod { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.hub-prod .hub-ic { margin: 0; }
.hub-prod strong { display: block; font-size: 14px; color: var(--text); }
.hub-prod em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-sec); }
.hub-list { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.hub-list li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text); }
.hub-list .ico { width: 14px; height: 14px; color: var(--good); stroke-width: 3; }
.hub-link { position: relative; height: 2px; margin: 0 6px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, rgba(46,128,224,.25), rgba(46,128,224,.6)); }
.hub-link::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, #7FC0FF, transparent); animation: hubFlow 2.4s linear infinite; }
@keyframes hubFlow { to { left: 100%; } }
@keyframes hubFlowV { to { top: 100%; } }
@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr; gap: 0; max-width: 520px; }
  .hub-link { width: 2px; height: 28px; margin: 6px auto; background: linear-gradient(180deg, rgba(46,128,224,.25), rgba(46,128,224,.6)); }
  .hub-link::after { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, #7FC0FF, transparent); animation-name: hubFlowV; }
  .hub-wrap { padding: 0 16px 56px; }
}
@media (prefers-reduced-motion: reduce) { .hub-link::after { animation: none; display: none; } }

/* Home "One platform" section */
.plat-section { position: relative; background: radial-gradient(70% 55% at 50% 0%, rgba(46,128,224,.09), rgba(46,128,224,0) 70%); }
.plat-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.plat-head .section-sub { margin: 0 auto; max-width: 660px; }
.plat-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.plat-list { list-style: none; display: grid; gap: 14px; }
.plat-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: 12px;
  background: var(--bg-card); border: 1.5px solid var(--border); transition: border-color .2s, transform .2s; }
.plat-list li:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.plat-list .feature-icon { margin: 0; }
.plat-list h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.plat-list p { font-size: 13.5px; color: var(--text-sec); line-height: 1.6; }
.plat-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
@media (max-width: 900px) { .plat-grid { grid-template-columns: 1fr; gap: 32px; } }

/* "New" callout (Shadow AI) */
.ai-callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 40px auto 0; max-width: 1000px;
  padding: 18px 22px; border-radius: 14px; background: linear-gradient(120deg, rgba(46,128,224,.10), rgba(79,216,200,.07));
  border: 1.5px solid rgba(46,128,224,.35); text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s; }
.ai-callout:hover { text-decoration: none; border-color: var(--teal); transform: translateY(-1px); }
.ai-callout .feature-icon { margin: 0; }
.ai-callout strong { display: block; font-size: 15.5px; color: var(--text); }
.ai-callout span.d { display: block; font-size: 13.5px; color: var(--text-sec); margin-top: 2px; line-height: 1.55; }
.ai-callout .go { font-size: 13.5px; font-weight: 700; color: var(--teal-text); white-space: nowrap; }
.new-pill { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 999px; vertical-align: 2px;
  font: 800 9.5px/1.4 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--btn-bg); }
@media (max-width: 640px) { .ai-callout { grid-template-columns: 1fr; gap: 10px; } }

/* Catalog categories (Shadow AI page) */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
@media (min-width: 1100px) { .cat-card.cat-wide { grid-column: span 2; } }
.cat-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px; }
.cat-card h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.cat-card h3 .ico { width: 18px; height: 18px; color: var(--teal-text); }
.cat-card .mk-chips { gap: 5px; }
.cat-card .mk-chip { font-weight: 500; font-size: 11.5px; }

/* "Better together" band on the product pages */
.bt-section { background: var(--bg-mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bt-section .feature-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-section .feature-grid { margin-bottom: 28px; }
/* Three-card rows: three equal columns instead of auto-fill's empty fourth slot. */
.feature-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .feature-grid.cols-3 { grid-template-columns: 1fr; } }

/* Dark overrides for the hard-coded hues above */
html[data-theme="dark"] .mk-tag.rmm  { color: #9CC8FA; background: rgba(46,128,224,.14); border-color: rgba(91,160,245,.38); }
html[data-theme="dark"] .mk-tag.m360 { color: #7FDDBB; background: rgba(32,178,128,.12); border-color: rgba(32,178,128,.35); }
html[data-theme="dark"] .mk-tag.nms  { color: #F5C48A; background: rgba(245,165,36,.12); border-color: rgba(245,165,36,.35); }
html[data-theme="dark"] .mk-tag.portal { color: #C7B5F5; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.38); }
html[data-theme="dark"] .mk-sev.crit, html[data-theme="dark"] .mk-pill.bad { color: #FCA5A5; background: rgba(248,113,113,.15); }
html[data-theme="dark"] .mk-sev.kev { color: #FCA5A5; background: transparent; border-color: rgba(248,113,113,.5); }
html[data-theme="dark"] .mk-sev.high { color: #FDBA74; background: rgba(251,146,60,.15); }
html[data-theme="dark"] .mk-sev.med  { color: #FDE68A; background: rgba(250,204,21,.13); }
html[data-theme="dark"] .mk-sev.low  { color: #93C5FD; background: rgba(96,165,250,.14); }
html[data-theme="dark"] .mk-pill.good, html[data-theme="dark"] .mk-yes { color: #86EFAC; background: rgba(61,214,140,.14); }
html[data-theme="dark"] .mk-pill.warn, html[data-theme="dark"] .mk-chip.warn { color: #FCD34D; background: rgba(245,158,11,.14); }
html[data-theme="dark"] .mk-kpi .f.warn { color: #FCD34D; } html[data-theme="dark"] .mk-kpi .f.bad { color: #FCA5A5; }
html[data-theme="dark"] .mk-banner .ico { color: #FBBF24; } html[data-theme="dark"] .mk-banner.bad .ico { color: #F87171; }
html[data-theme="dark"] .mk-row.is-hl { background: rgba(91,160,245,.08); }
html[data-theme="dark"] .ai-callout { background: linear-gradient(120deg, rgba(46,128,224,.16), rgba(79,216,200,.07)); }

/* ── Keyboard, touch + motion accessibility (WCAG 2.2 AA) ─────────────────── */
/* Visually hidden, still read by screen readers (e.g. a section heading the design omits). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Skip link: the first focusable element on every page, shown only when focused. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  padding: 10px 16px; border-radius: 8px; background: var(--btn-bg); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 10px; text-decoration: none; }
/* A visible keyboard focus ring everywhere (incl. the demo clips and the price sliders). */
a:focus-visible, button:focus-visible, summary:focus-visible, video:focus-visible,
[tabindex]:focus-visible, .price-slider:focus-visible {
  outline: 2px solid var(--teal-text); outline-offset: 2px;
}
/* Links inside running text are underlined, so they don't rely on colour alone (1.4.1). */
main a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
/* iPhone Safari zooms into any field under 16px when it's focused: phones and touch
   screens get 16px fields (desktop keeps the 14px design). */
@media (max-width: 860px), (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }
/* Reduced motion: no decorative animation, transitions or smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}