/* ============================================================================
   METRICSTAB DESIGN SYSTEM — marketing surface (home, auth, pricing, docs)
   Light-first. Optional dark variant via [data-bs-theme="dark"].
   All tokens and components are prefixed `--ms-` / `.ms-` to coexist with
   Bootstrap on app pages without collision.
   ============================================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ms-bg:            #ffffff;
  --ms-bg-subtle:     #fafbfc;
  --ms-bg-muted:      #f3f5f8;
  --ms-bg-elevated:   #ffffff;
  --ms-bg-inverse:    #0b0f1f;

  /* Borders */
  --ms-border:        #e6e8ec;
  --ms-border-strong: #d1d5db;
  --ms-border-soft:   #eef0f3;

  /* Text */
  --ms-text:          #0b1220;
  --ms-text-muted:    #4b5563;
  --ms-text-subtle:   #6b7280;
  --ms-text-faint:    #9ca3af;
  --ms-text-inverse:  #f8fafc;

  /* Brand — indigo→violet (matches existing logo gradient) */
  --ms-primary:        #4f46e5;
  --ms-primary-hover:  #4338ca;
  --ms-primary-active: #3730a3;
  --ms-primary-soft:   rgba(79, 70, 229, 0.08);
  --ms-primary-border: rgba(79, 70, 229, 0.18);
  --ms-violet:         #7c3aed;
  --ms-gradient:       linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --ms-gradient-text:  linear-gradient(100deg, #4f46e5 10%, #7c3aed 60%, #06b6d4 100%);

  /* Semantic accents */
  --ms-success:        #10b981;
  --ms-success-soft:   rgba(16, 185, 129, 0.10);
  --ms-warning:        #f59e0b;
  --ms-warning-soft:   rgba(245, 158, 11, 0.10);
  --ms-danger:         #ef4444;
  --ms-danger-soft:    rgba(239, 68, 68, 0.10);
  --ms-info:           #06b6d4;
  --ms-info-soft:      rgba(6, 182, 212, 0.10);

  /* Type */
  --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ms-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale (clamp for responsive headlines) */
  --ms-fs-xs:   12px;
  --ms-fs-sm:   13px;
  --ms-fs-base: 15px;
  --ms-fs-md:   16px;
  --ms-fs-lg:   18px;
  --ms-fs-xl:   21px;
  --ms-fs-2xl:  clamp(22px, 2.4vw, 26px);
  --ms-fs-3xl:  clamp(26px, 3vw, 32px);
  --ms-fs-4xl:  clamp(32px, 4vw, 44px);
  --ms-fs-5xl:  clamp(40px, 5.5vw, 60px);
  --ms-fs-6xl:  clamp(48px, 7vw, 80px);

  /* Spacing scale (multiple of 4) */
  --ms-sp-1:  4px;
  --ms-sp-2:  8px;
  --ms-sp-3:  12px;
  --ms-sp-4:  16px;
  --ms-sp-5:  20px;
  --ms-sp-6:  24px;
  --ms-sp-8:  32px;
  --ms-sp-10: 40px;
  --ms-sp-12: 48px;
  --ms-sp-16: 64px;
  --ms-sp-20: 80px;
  --ms-sp-24: 96px;
  --ms-sp-32: 128px;

  /* Radius */
  --ms-radius-xs: 4px;
  --ms-radius-sm: 6px;
  --ms-radius-md: 10px;
  --ms-radius-lg: 14px;
  --ms-radius-xl: 20px;
  --ms-radius-2xl: 28px;
  --ms-radius-pill: 999px;

  /* Shadows (soft, slightly cool) */
  --ms-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ms-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ms-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ms-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05);
  --ms-shadow-xl: 0 28px 64px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(15, 23, 42, 0.06);
  --ms-shadow-glow: 0 0 0 1px var(--ms-primary-border), 0 12px 40px rgba(79, 70, 229, 0.18);

  /* Layout */
  --ms-container: 1180px;
  --ms-container-narrow: 760px;
  --ms-nav-height: 64px;

  /* Motion */
  --ms-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ms-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ms-dur-fast: 150ms;
  --ms-dur-base: 220ms;
  --ms-dur-slow: 400ms;
}

/* ── DARK VARIANT ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --ms-bg:            #0a0d1a;
  --ms-bg-subtle:     #0e1222;
  --ms-bg-muted:      #131830;
  --ms-bg-elevated:   #161b30;
  --ms-bg-inverse:    #f8fafc;

  --ms-border:        rgba(255, 255, 255, 0.08);
  --ms-border-strong: rgba(255, 255, 255, 0.14);
  --ms-border-soft:   rgba(255, 255, 255, 0.05);

  --ms-text:          #f1f5f9;
  --ms-text-muted:    rgba(241, 245, 249, 0.72);
  --ms-text-subtle:   rgba(241, 245, 249, 0.55);
  --ms-text-faint:    rgba(241, 245, 249, 0.35);
  --ms-text-inverse:  #0b1220;

  --ms-primary-soft:   rgba(99, 102, 241, 0.14);
  --ms-primary-border: rgba(99, 102, 241, 0.35);

  --ms-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ms-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --ms-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
  --ms-shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
  --ms-shadow-glow: 0 0 0 1px var(--ms-primary-border), 0 16px 56px rgba(99, 102, 241, 0.35);
}

/* ── MARKETING BODY (only when .ms-marketing is on <body>) ────────────────── */
body.ms-marketing {
  font-family: var(--ms-font-sans);
  background: var(--ms-bg);
  color: var(--ms-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.ms-marketing img,
body.ms-marketing svg { max-width: 100%; display: block; }

/* When base.html container wraps content, neutralise its padding for full-bleed
   marketing sections. The body class is set per-page so app pages are unaffected. */
body.ms-marketing > .container,
body.ms-marketing > .container-fluid,
body.ms-marketing > div.mt-4 {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── LAYOUT PRIMITIVES ────────────────────────────────────────────────────── */
.ms-container {
  max-width: var(--ms-container);
  margin: 0 auto;
  padding: 0 var(--ms-sp-6);
}
.ms-container-narrow {
  max-width: var(--ms-container-narrow);
  margin: 0 auto;
  padding: 0 var(--ms-sp-6);
}
.ms-section {
  padding: var(--ms-sp-24) 0;
  position: relative;
}
.ms-section-sm { padding: var(--ms-sp-16) 0; }
.ms-section-lg { padding: var(--ms-sp-32) 0; }
.ms-section-alt { background: var(--ms-bg-subtle); }

@media (max-width: 768px) {
  .ms-section    { padding: var(--ms-sp-16) 0; }
  .ms-section-sm { padding: var(--ms-sp-12) 0; }
  .ms-section-lg { padding: var(--ms-sp-20) 0; }
}

.ms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-sp-6); }
.ms-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ms-sp-6); }
.ms-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ms-sp-4); }

@media (max-width: 968px) {
  .ms-grid-3, .ms-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ms-grid-2, .ms-grid-3, .ms-grid-4 { grid-template-columns: 1fr; }
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
.ms-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ms-sp-2);
  font-size: var(--ms-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-primary);
  background: var(--ms-primary-soft);
  border: 1px solid var(--ms-primary-border);
  padding: 5px 12px;
  border-radius: var(--ms-radius-pill);
}
.ms-eyebrow-success { color: var(--ms-success); background: var(--ms-success-soft); border-color: rgba(16,185,129,.18); }
.ms-eyebrow-warning { color: var(--ms-warning); background: var(--ms-warning-soft); border-color: rgba(245,158,11,.18); }
.ms-eyebrow-info    { color: var(--ms-info);    background: var(--ms-info-soft);    border-color: rgba(6,182,212,.18); }

.ms-h1, .ms-h2, .ms-h3, .ms-h4 {
  font-weight: 800; letter-spacing: -0.025em; color: var(--ms-text);
  line-height: 1.1;
}
.ms-h1 {
  font-size: var(--ms-fs-6xl);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1.02;
}
.ms-h2 {
  font-size: var(--ms-fs-5xl);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1.06;
}
.ms-h3 { font-size: var(--ms-fs-3xl); }
.ms-h4 { font-size: var(--ms-fs-xl); letter-spacing: -0.02em; }

.ms-display-grad {
  background: var(--ms-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ms-lead {
  font-size: var(--ms-fs-lg);
  color: var(--ms-text-muted);
  line-height: 1.7;
  max-width: 620px;
}
.ms-lead-center { margin-left: auto; margin-right: auto; }
.ms-muted { color: var(--ms-text-muted); }
.ms-subtle { color: var(--ms-text-subtle); }
.ms-faint { color: var(--ms-text-faint); }

/* ── SECTION HEADER ───────────────────────────────────────────────────────── */
.ms-section-head { text-align: center; max-width: 700px; margin: 0 auto var(--ms-sp-16); }
.ms-section-head .ms-eyebrow { margin-bottom: var(--ms-sp-5); }
.ms-section-head h2 { margin-bottom: var(--ms-sp-4); }
.ms-section-head p { color: var(--ms-text-muted); font-size: var(--ms-fs-lg); line-height: 1.65; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ms-sp-2);
  font-family: inherit;
  font-size: var(--ms-fs-base);
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: var(--ms-radius-md);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--ms-dur-fast) var(--ms-ease),
              color      var(--ms-dur-fast) var(--ms-ease),
              border-color var(--ms-dur-fast) var(--ms-ease),
              box-shadow var(--ms-dur-base) var(--ms-ease),
              transform  var(--ms-dur-fast) var(--ms-ease);
  white-space: nowrap;
}
.ms-btn:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 2px;
}
.ms-btn-sm { padding: 8px 14px; font-size: var(--ms-fs-sm); }
.ms-btn-lg { padding: 14px 24px; font-size: var(--ms-fs-md); border-radius: var(--ms-radius-lg); }
.ms-btn-xl { padding: 18px 30px; font-size: var(--ms-fs-md); border-radius: var(--ms-radius-lg); font-weight: 700; }

.ms-btn-primary {
  background: var(--ms-primary); color: #fff; border-color: var(--ms-primary);
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 6px 20px rgba(79, 70, 229, 0.25);
}
.ms-btn-primary:hover {
  background: var(--ms-primary-hover); border-color: var(--ms-primary-hover);
  color: #fff;
  box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 10px 30px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
}
.ms-btn-primary:active { transform: translateY(0); }

.ms-btn-secondary {
  background: var(--ms-bg); color: var(--ms-text); border-color: var(--ms-border-strong);
  box-shadow: var(--ms-shadow-xs);
}
.ms-btn-secondary:hover {
  background: var(--ms-bg-muted); color: var(--ms-text);
  border-color: var(--ms-text-faint);
}

.ms-btn-ghost {
  background: transparent; color: var(--ms-text); border-color: transparent;
}
.ms-btn-ghost:hover { background: var(--ms-bg-muted); color: var(--ms-text); }

.ms-btn-link {
  background: transparent; color: var(--ms-primary); border-color: transparent;
  padding: 4px 6px;
}
.ms-btn-link:hover { color: var(--ms-primary-hover); background: var(--ms-primary-soft); }

.ms-btn-on-dark {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.18);
}
.ms-btn-on-dark:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.ms-card {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-xl);
  padding: var(--ms-sp-6);
  transition: border-color var(--ms-dur-base) var(--ms-ease),
              box-shadow var(--ms-dur-base) var(--ms-ease),
              transform var(--ms-dur-base) var(--ms-ease);
}
.ms-card-hover:hover {
  border-color: var(--ms-primary-border);
  box-shadow: var(--ms-shadow-lg);
  transform: translateY(-2px);
}
.ms-card-pad-lg { padding: var(--ms-sp-8); }
.ms-card-flush { padding: 0; overflow: hidden; }

/* Soft icon tile */
.ms-icon-tile {
  width: 44px; height: 44px;
  border-radius: var(--ms-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.ms-icon-tile-lg { width: 56px; height: 56px; font-size: 24px; border-radius: var(--ms-radius-lg); }
.ms-tile-primary { background: var(--ms-primary-soft); color: var(--ms-primary); }
.ms-tile-success { background: var(--ms-success-soft); color: var(--ms-success); }
.ms-tile-warning { background: var(--ms-warning-soft); color: var(--ms-warning); }
.ms-tile-danger  { background: var(--ms-danger-soft);  color: var(--ms-danger); }
.ms-tile-info    { background: var(--ms-info-soft);    color: var(--ms-info); }
.ms-tile-violet  { background: rgba(124,58,237,.10); color: var(--ms-violet); }

/* ── BADGES / PILLS ───────────────────────────────────────────────────────── */
.ms-badge {
  display: inline-flex; align-items: center; gap: var(--ms-sp-1);
  font-size: var(--ms-fs-xs); font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--ms-radius-pill);
  border: 1px solid var(--ms-border);
  background: var(--ms-bg);
  color: var(--ms-text-muted);
}
.ms-badge-primary { color: var(--ms-primary); background: var(--ms-primary-soft); border-color: var(--ms-primary-border); }
.ms-badge-success { color: var(--ms-success); background: var(--ms-success-soft); border-color: rgba(16,185,129,.22); }
.ms-badge-warning { color: var(--ms-warning); background: var(--ms-warning-soft); border-color: rgba(245,158,11,.22); }
.ms-badge-danger  { color: var(--ms-danger);  background: var(--ms-danger-soft);  border-color: rgba(239,68,68,.22); }

/* Live dot */
.ms-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ms-success); box-shadow: 0 0 8px var(--ms-success);
  animation: ms-pulse 2s ease-in-out infinite;
}
@keyframes ms-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.8); }
}

/* ── MARKETING NAV ────────────────────────────────────────────────────────── */
.ms-nav {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--ms-border-soft);
}
[data-bs-theme="dark"] .ms-nav {
  background: rgba(10, 13, 26, 0.78);
}
.ms-nav-inner {
  max-width: var(--ms-container);
  margin: 0 auto;
  height: var(--ms-nav-height);
  padding: 0 var(--ms-sp-6);
  display: flex; align-items: center; gap: var(--ms-sp-4);
}
.ms-logo {
  display: inline-flex; align-items: center; gap: var(--ms-sp-2);
  font-weight: 800; font-size: 17px; letter-spacing: -0.03em;
  color: var(--ms-text); text-decoration: none;
}
.ms-logo:hover { color: var(--ms-text); }
.ms-logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ms-gradient);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
.ms-nav-links {
  display: flex; align-items: center; gap: var(--ms-sp-1);
  list-style: none; padding: 0; margin: 0 0 0 var(--ms-sp-6);
}
.ms-nav-links a {
  display: inline-block;
  font-size: var(--ms-fs-sm); font-weight: 500;
  color: var(--ms-text-muted); text-decoration: none;
  padding: 7px 12px; border-radius: var(--ms-radius-sm);
  transition: background var(--ms-dur-fast) var(--ms-ease), color var(--ms-dur-fast) var(--ms-ease);
}
.ms-nav-links a:hover { background: var(--ms-bg-muted); color: var(--ms-text); }
/* Counterpart to .ms-nav-hide-mobile: items that appear ONLY in the collapsed
   mobile menu. Used for "Log in", which exists as a button in .ms-nav-right on
   desktop but is hidden under 860px — leaving phone visitors with no way to
   sign in. Shown at the matching breakpoint below. */
.ms-nav-only-mobile { display: none; }
.ms-nav-right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--ms-sp-2);
}
.ms-nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--ms-radius-sm);
  background: transparent; border: 1px solid var(--ms-border);
  color: var(--ms-text); cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 20px;
}

/* Mobile nav */
@media (max-width: 860px) {
  .ms-nav-links {
    position: fixed;
    top: var(--ms-nav-height); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--ms-bg);
    border-bottom: 1px solid var(--ms-border);
    padding: var(--ms-sp-3) var(--ms-sp-4);
    margin: 0;
    gap: var(--ms-sp-1);
    transform: translateY(-12px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--ms-dur-base) var(--ms-ease), transform var(--ms-dur-base) var(--ms-ease);
  }
  .ms-nav-links.open {
    transform: translateY(0);
    opacity: 1; pointer-events: auto;
  }
  .ms-nav-links a { padding: 12px 14px; font-size: var(--ms-fs-base); }
  .ms-nav-toggle { display: inline-flex; }
  .ms-nav-hide-mobile { display: none !important; }
  .ms-nav-only-mobile { display: block; }
}

/* Phone widths: the signed-in nav carries more than the marketing one -- a
   billing-state badge, help launcher, theme toggle and a Log out button. At
   390px those totalled 233px, which with the logo and 24px side padding put
   .ms-nav-right's right edge at 396px in a 390px viewport. Every authenticated
   report page scrolled sideways by 6px as a result; the data tables were
   already handled, this was the chrome above them.

   Tightening the gutters buys back more than the overflow without hiding any
   control, and the state badge is allowed to ellipsize rather than force the
   row wider than the screen. */
@media (max-width: 480px) {
  .ms-nav-inner {
    padding: 0 var(--ms-sp-3);
    gap: var(--ms-sp-2);
  }
  .ms-nav-right { gap: var(--ms-sp-1); min-width: 0; }
  .ms-nav-state {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.ms-hero {
  position: relative; overflow: hidden;
  padding: var(--ms-sp-24) 0 var(--ms-sp-20);
  text-align: center;
}
.ms-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,   rgba(79, 70, 229, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 15% 35%,  rgba(124, 58, 237, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 85% 45%,  rgba(6, 182, 212, 0.05) 0%, transparent 65%);
}
[data-bs-theme="dark"] .ms-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,   rgba(79, 70, 229, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 40%,  rgba(124, 58, 237, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 50%,  rgba(6, 182, 212, 0.10) 0%, transparent 65%);
}
.ms-hero > * { position: relative; z-index: 1; }

.ms-hero-h1 {
  font-size: var(--ms-fs-6xl);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.0;
  margin: 0 auto var(--ms-sp-6);
  max-width: 12ch;
}
.ms-hero-sub {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--ms-text-muted);
  max-width: 560px; margin: 0 auto var(--ms-sp-8);
  line-height: 1.65;
}
.ms-hero-ctas {
  display: flex; gap: var(--ms-sp-3); justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--ms-sp-4);
}
.ms-hero-fine {
  font-size: var(--ms-fs-sm); color: var(--ms-text-faint);
  display: inline-flex; gap: var(--ms-sp-4); flex-wrap: wrap; justify-content: center;
}
.ms-hero-fine span { display: inline-flex; align-items: center; gap: var(--ms-sp-1); }

/* Hero kicker chip */
.ms-hero-chip {
  display: inline-flex; align-items: center; gap: var(--ms-sp-2);
  font-size: var(--ms-fs-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ms-text-muted);
  background: var(--ms-bg);
  border: 1px solid var(--ms-border);
  padding: 6px 14px; border-radius: var(--ms-radius-pill);
  margin-bottom: var(--ms-sp-6);
  box-shadow: var(--ms-shadow-xs);
}

/* Product screenshot frame */
.ms-product-frame {
  margin: var(--ms-sp-16) auto 0;
  max-width: 1080px;
  border-radius: var(--ms-radius-2xl);
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-xl);
  overflow: hidden;
  position: relative;
}
.ms-product-frame::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,0.06) 100%);
}
.ms-product-chrome {
  display: flex; align-items: center; gap: var(--ms-sp-2);
  padding: 11px 16px;
  background: var(--ms-bg-subtle);
  border-bottom: 1px solid var(--ms-border-soft);
}
.ms-product-chrome span.dot { width: 11px; height: 11px; border-radius: 50%; }
.ms-product-chrome .r { background: #ff5f57; }
.ms-product-chrome .y { background: #febc2e; }
.ms-product-chrome .g { background: #28c840; }
.ms-product-chrome .url {
  margin: 0 auto;
  font-size: var(--ms-fs-xs); color: var(--ms-text-faint);
  font-family: var(--ms-font-mono);
}
.ms-product-image { display: block; width: 100%; height: auto; }
.ms-product-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 460px;
  background:
    linear-gradient(135deg, var(--ms-bg-muted), var(--ms-bg-subtle)),
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(79,70,229,.04) 8px, rgba(79,70,229,.04) 9px);
  color: var(--ms-text-faint); font-size: var(--ms-fs-sm);
}

/* ── LOGO / SOCIAL PROOF STRIP ────────────────────────────────────────────── */
.ms-logo-strip {
  display: flex; align-items: center; justify-content: center; gap: var(--ms-sp-10);
  flex-wrap: wrap;
  padding: var(--ms-sp-6) 0;
  color: var(--ms-text-faint);
  font-size: var(--ms-fs-sm);
}
.ms-logo-strip .label {
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: var(--ms-fs-xs);
}
.ms-logo-strip .items {
  display: inline-flex; align-items: center; gap: var(--ms-sp-8);
  flex-wrap: wrap; justify-content: center;
}
.ms-logo-strip .items > span {
  font-weight: 700; letter-spacing: -0.02em; color: var(--ms-text-subtle);
  font-size: 17px;
  display: inline-flex; align-items: center; gap: var(--ms-sp-2);
  opacity: 0.85;
}
.ms-logo-strip .items i { font-size: 18px; }

/* ── FEATURE GRID ─────────────────────────────────────────────────────────── */
.ms-feature {
  padding: var(--ms-sp-8);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-bg-elevated);
  transition: border-color var(--ms-dur-base), box-shadow var(--ms-dur-base), transform var(--ms-dur-base);
  height: 100%;
}
.ms-feature:hover {
  border-color: var(--ms-primary-border);
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-2px);
}
.ms-feature h3 {
  font-size: var(--ms-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--ms-sp-4) 0 var(--ms-sp-2);
  color: var(--ms-text);
}
.ms-feature p { font-size: var(--ms-fs-base); color: var(--ms-text-muted); line-height: 1.65; margin: 0; }
.ms-feature-list {
  list-style: none; padding: 0; margin: var(--ms-sp-4) 0 0;
  display: flex; flex-direction: column; gap: var(--ms-sp-2);
}
.ms-feature-list li {
  display: flex; align-items: flex-start; gap: var(--ms-sp-2);
  font-size: var(--ms-fs-sm); color: var(--ms-text-muted);
  line-height: 1.55;
}
.ms-feature-list li i {
  color: var(--ms-success); font-size: 15px; flex-shrink: 0; margin-top: 1px;
}

/* Side-by-side feature row (image + text) */
.ms-feature-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--ms-sp-16); align-items: center;
}
.ms-feature-row + .ms-feature-row { margin-top: var(--ms-sp-20); }
.ms-feature-row.reverse > :first-child { order: 2; }

@media (max-width: 968px) {
  .ms-feature-row { grid-template-columns: 1fr; gap: var(--ms-sp-8); }
  .ms-feature-row.reverse > :first-child { order: 0; }
}

.ms-feature-row h3 {
  font-size: var(--ms-fs-4xl);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: var(--ms-sp-4);
}
.ms-feature-row p { font-size: var(--ms-fs-lg); color: var(--ms-text-muted); line-height: 1.7; }
.ms-feature-row .ms-feature-list { margin-top: var(--ms-sp-5); }
.ms-feature-row .ms-feature-list li { font-size: var(--ms-fs-base); }

.ms-feature-visual {
  padding: var(--ms-sp-6);
  background: var(--ms-bg-subtle);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-2xl);
  position: relative; overflow: hidden;
}

/* ── PRICING ──────────────────────────────────────────────────────────────── */
.ms-pricing-grid {
  display: grid; gap: var(--ms-sp-4);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px) { .ms-pricing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .ms-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ms-pricing-grid { grid-template-columns: 1fr; } }

.ms-plan {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-xl);
  padding: var(--ms-sp-6);
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color var(--ms-dur-base), box-shadow var(--ms-dur-base), transform var(--ms-dur-base);
}
.ms-plan:hover {
  border-color: var(--ms-primary-border);
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-2px);
}
.ms-plan-recommended {
  border-color: var(--ms-primary);
  box-shadow: var(--ms-shadow-glow);
  background: linear-gradient(180deg, var(--ms-primary-soft) 0%, var(--ms-bg-elevated) 60%);
}
.ms-plan-recommended:hover { transform: translateY(-3px); }
.ms-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ms-gradient); color: #fff;
  font-size: var(--ms-fs-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--ms-radius-pill);
  white-space: nowrap;
}
.ms-plan-tier {
  font-size: var(--ms-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ms-text-subtle);
  margin-bottom: var(--ms-sp-2);
}
.ms-plan-price {
  font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  color: var(--ms-text);
  display: flex; align-items: baseline; gap: 2px;
}
.ms-plan-price .currency { font-size: 20px; font-weight: 700; align-self: flex-start; margin-top: 6px; }
.ms-plan-price .period   { font-size: 14px; font-weight: 500; color: var(--ms-text-subtle); margin-left: 4px; }
.ms-plan-desc {
  font-size: var(--ms-fs-sm); color: var(--ms-text-muted);
  margin: var(--ms-sp-3) 0 var(--ms-sp-5);
  line-height: 1.55; min-height: 38px;
}
.ms-plan-features {
  list-style: none; padding: 0; margin: 0 0 var(--ms-sp-6);
  display: flex; flex-direction: column; gap: var(--ms-sp-2);
  flex-grow: 1;
}
.ms-plan-features li {
  display: flex; align-items: flex-start; gap: var(--ms-sp-2);
  font-size: var(--ms-fs-sm); color: var(--ms-text-muted); line-height: 1.5;
}
.ms-plan-features li i { color: var(--ms-success); font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.ms-plan-features li.off i { color: var(--ms-text-faint); }
.ms-plan-features li.off { color: var(--ms-text-faint); }

.ms-interval-toggle {
  display: inline-flex; padding: 4px; border-radius: var(--ms-radius-pill);
  background: var(--ms-bg-muted); border: 1px solid var(--ms-border);
  margin: 0 auto var(--ms-sp-8);
}
.ms-interval-toggle button {
  font: inherit; font-size: var(--ms-fs-sm); font-weight: 600;
  border: 0; background: transparent;
  padding: 8px 18px; border-radius: var(--ms-radius-pill);
  color: var(--ms-text-muted); cursor: pointer;
  transition: background var(--ms-dur-fast), color var(--ms-dur-fast);
}
.ms-interval-toggle button.active {
  background: var(--ms-bg-elevated); color: var(--ms-text);
  box-shadow: var(--ms-shadow-xs);
}
.ms-interval-toggle .save-badge {
  display: inline-block; margin-left: 6px; font-size: 11px;
  background: var(--ms-success-soft); color: var(--ms-success);
  padding: 1px 7px; border-radius: var(--ms-radius-pill); font-weight: 700;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.ms-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ms-sp-3); }
.ms-faq details {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-sp-5) var(--ms-sp-6);
  transition: border-color var(--ms-dur-base), box-shadow var(--ms-dur-base);
}
.ms-faq details[open] {
  border-color: var(--ms-primary-border);
  box-shadow: var(--ms-shadow-sm);
}
.ms-faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--ms-sp-4);
  font-size: var(--ms-fs-md); font-weight: 600; color: var(--ms-text);
}
.ms-faq summary::-webkit-details-marker { display: none; }
.ms-faq summary::after {
  content: '+'; font-size: 22px; line-height: 1; font-weight: 400;
  color: var(--ms-text-faint);
  transition: transform var(--ms-dur-base);
}
.ms-faq details[open] summary::after { content: '−'; }
.ms-faq details p {
  margin: var(--ms-sp-4) 0 0; padding: 0;
  font-size: var(--ms-fs-base); color: var(--ms-text-muted); line-height: 1.7;
}

/* ── CTA STRIP (final CTA section) ────────────────────────────────────────── */
.ms-cta-strip {
  position: relative; overflow: hidden;
  border-radius: var(--ms-radius-2xl);
  background: linear-gradient(135deg, #4f46e5, #7c3aed 65%, #06b6d4);
  color: #fff;
  padding: var(--ms-sp-16) var(--ms-sp-12);
  text-align: center;
  box-shadow: var(--ms-shadow-xl);
}
.ms-cta-strip::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .4;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 75%);
}
.ms-cta-strip > * { position: relative; z-index: 1; }
.ms-cta-strip h2 {
  font-size: var(--ms-fs-5xl); font-weight: 900;
  letter-spacing: -0.035em; line-height: 1.05;
  margin-bottom: var(--ms-sp-4); color: #fff;
}
.ms-cta-strip p {
  font-size: var(--ms-fs-lg); color: rgba(255,255,255,.85);
  max-width: 520px; margin: 0 auto var(--ms-sp-8);
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.ms-footer {
  background: var(--ms-bg-subtle);
  border-top: 1px solid var(--ms-border);
  padding: var(--ms-sp-16) 0 var(--ms-sp-8);
}
.ms-footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--ms-sp-8);
  margin-bottom: var(--ms-sp-12);
}
.ms-footer-grid .ms-footer-brand { max-width: 320px; }
.ms-footer-grid p { font-size: var(--ms-fs-sm); color: var(--ms-text-muted); line-height: 1.65; margin: var(--ms-sp-3) 0 0; }
.ms-footer-h {
  font-size: var(--ms-fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ms-text-subtle);
  margin-bottom: var(--ms-sp-4);
}
.ms-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ms-sp-2); }
.ms-footer-list a {
  font-size: var(--ms-fs-sm); color: var(--ms-text-muted); text-decoration: none;
  transition: color var(--ms-dur-fast);
}
.ms-footer-list a:hover { color: var(--ms-text); }
.ms-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--ms-sp-3);
  padding-top: var(--ms-sp-6);
  border-top: 1px solid var(--ms-border);
  font-size: var(--ms-fs-xs); color: var(--ms-text-faint);
}

@media (max-width: 1024px) {
  .ms-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ms-footer-grid .ms-footer-brand { grid-column: span 3; max-width: 480px; }
}
@media (max-width: 600px) {
  .ms-footer-grid { grid-template-columns: 1fr 1fr; }
  .ms-footer-grid .ms-footer-brand { grid-column: span 2; }
}

/* ── AUTH PAGES ───────────────────────────────────────────────────────────── */
.ms-auth-shell {
  min-height: calc(100vh - var(--ms-nav-height) - 60px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ms-sp-12) var(--ms-sp-4);
  background:
    radial-gradient(ellipse 40% 40% at 20% 20%, rgba(79, 70, 229, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 60%);
}
.ms-auth-card {
  width: 100%; max-width: 980px;
  display: grid; grid-template-columns: 1fr 1.05fr;
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-2xl);
  overflow: hidden;
  box-shadow: var(--ms-shadow-xl);
}
.ms-auth-pane { padding: var(--ms-sp-10) var(--ms-sp-10); }
.ms-auth-pane h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--ms-sp-2); color: var(--ms-text); }
.ms-auth-pane .ms-auth-sub { font-size: var(--ms-fs-base); color: var(--ms-text-muted); margin: 0 0 var(--ms-sp-6); }

.ms-auth-aside {
  position: relative; overflow: hidden;
  padding: var(--ms-sp-10);
  background: var(--ms-gradient);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--ms-sp-6);
}
.ms-auth-aside::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .4;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
}
.ms-auth-aside > * { position: relative; z-index: 1; }
.ms-auth-aside h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: var(--ms-sp-6) 0 var(--ms-sp-3); }
.ms-auth-aside p { font-size: var(--ms-fs-base); color: rgba(255,255,255,.85); line-height: 1.6; }
.ms-auth-feats { list-style: none; padding: 0; margin: var(--ms-sp-5) 0 0; display: flex; flex-direction: column; gap: var(--ms-sp-3); }
.ms-auth-feats li { display: flex; align-items: flex-start; gap: var(--ms-sp-2); font-size: var(--ms-fs-sm); }
.ms-auth-feats li i { color: rgba(255,255,255,.95); margin-top: 2px; }
.ms-auth-quote {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-sp-4);
  font-size: var(--ms-fs-sm); line-height: 1.6;
}
.ms-auth-quote .author { display: block; margin-top: var(--ms-sp-2); font-size: var(--ms-fs-xs); opacity: .8; }

/* Form controls in auth pane */
.ms-form-group { margin-bottom: var(--ms-sp-4); }
.ms-form-label {
  display: block; font-size: var(--ms-fs-sm); font-weight: 600;
  color: var(--ms-text); margin-bottom: var(--ms-sp-2);
}
.ms-form-control {
  display: block; width: 100%;
  padding: 11px 14px;
  font: inherit; font-size: var(--ms-fs-base);
  color: var(--ms-text);
  background: var(--ms-bg);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-md);
  transition: border-color var(--ms-dur-fast), box-shadow var(--ms-dur-fast);
}
.ms-form-control:focus {
  outline: none;
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 4px var(--ms-primary-soft);
}
.ms-form-control.is-invalid {
  border-color: var(--ms-danger);
}
.ms-form-error {
  display: block; margin-top: 6px;
  font-size: var(--ms-fs-xs); color: var(--ms-danger);
}
.ms-form-hint { display: block; margin-top: 6px; font-size: var(--ms-fs-xs); color: var(--ms-text-subtle); }
.ms-pw-wrap { position: relative; }
.ms-pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: transparent; border: 0; padding: 6px;
  color: var(--ms-text-subtle); cursor: pointer; font-size: 16px;
}
.ms-pw-toggle:hover { color: var(--ms-text); }

.ms-divider {
  display: flex; align-items: center; gap: var(--ms-sp-3);
  margin: var(--ms-sp-5) 0;
  color: var(--ms-text-subtle); font-size: var(--ms-fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ms-divider::before, .ms-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--ms-border);
}

.ms-alert {
  display: flex; gap: var(--ms-sp-2); align-items: flex-start;
  padding: 12px 14px; border-radius: var(--ms-radius-md);
  font-size: var(--ms-fs-sm); line-height: 1.5;
  margin-bottom: var(--ms-sp-4);
  border: 1px solid;
}
.ms-alert-success { background: var(--ms-success-soft); border-color: rgba(16,185,129,.25); color: #047857; }
.ms-alert-warning { background: var(--ms-warning-soft); border-color: rgba(245,158,11,.25); color: #b45309; }
.ms-alert-danger  { background: var(--ms-danger-soft);  border-color: rgba(239,68,68,.25);  color: #b91c1c; }
.ms-alert i { margin-top: 1px; }
[data-bs-theme="dark"] .ms-alert-success { color: #34d399; }
[data-bs-theme="dark"] .ms-alert-warning { color: #fbbf24; }
[data-bs-theme="dark"] .ms-alert-danger  { color: #f87171; }

@media (max-width: 768px) {
  .ms-auth-card { grid-template-columns: 1fr; }
  .ms-auth-aside { order: -1; padding: var(--ms-sp-6); }
  .ms-auth-pane  { padding: var(--ms-sp-8); }
}

/* ── DOCS LIST ────────────────────────────────────────────────────────────── */
.ms-docs-hero {
  position: relative; overflow: hidden;
  padding: var(--ms-sp-20) 0 var(--ms-sp-16);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(79, 70, 229, 0.08), transparent 60%),
    var(--ms-bg-subtle);
  border-bottom: 1px solid var(--ms-border);
}
.ms-docs-hero h1 {
  font-size: var(--ms-fs-5xl); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05;
  margin: var(--ms-sp-4) 0 var(--ms-sp-3); color: var(--ms-text);
}
.ms-docs-hero p { font-size: var(--ms-fs-lg); color: var(--ms-text-muted); max-width: 640px; margin: 0 auto; }

.ms-docs-categories { display: flex; flex-direction: column; gap: var(--ms-sp-12); }
.ms-docs-cat-header { margin-bottom: var(--ms-sp-6); display: flex; align-items: flex-end; gap: var(--ms-sp-4); justify-content: space-between; }
.ms-docs-cat-header h2 { font-size: var(--ms-fs-2xl); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--ms-text); }
.ms-docs-cat-header p { font-size: var(--ms-fs-sm); color: var(--ms-text-muted); margin: 4px 0 0; }
.ms-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ms-sp-4); }
@media (max-width: 968px) { .ms-docs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ms-docs-grid { grid-template-columns: 1fr; } }

.ms-doc-card {
  display: flex; gap: var(--ms-sp-3); align-items: flex-start;
  padding: var(--ms-sp-5);
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  text-decoration: none;
  transition: border-color var(--ms-dur-base), box-shadow var(--ms-dur-base), transform var(--ms-dur-base);
}
.ms-doc-card:hover {
  border-color: var(--ms-primary-border);
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-1px);
}
.ms-doc-card .ms-icon-tile { width: 36px; height: 36px; font-size: 16px; }
.ms-doc-card h4 { font-size: var(--ms-fs-md); font-weight: 700; color: var(--ms-text); margin: 0 0 4px; letter-spacing: -0.01em; }
.ms-doc-card p { font-size: var(--ms-fs-sm); color: var(--ms-text-muted); margin: 0; line-height: 1.5; }
.ms-doc-card .ms-badge { margin-left: auto; }

/* ── REVEAL CLASSES (no-op) ────────────────────────────────────────────────────
   `.ms-rv` was once a scroll-reveal trigger. We removed the hide-then-fade-in
   animation because it broke for any renderer that doesn't scroll (screenshot
   tools, search engines without JS, prerender services) and offered marginal
   visual value. Classes stay so the markup is unchanged; they simply do nothing.
   ─────────────────────────────────────────────────────────────────────────── */
.ms-rv, .ms-rv.in, .ms-rv.d1, .ms-rv.d2, .ms-rv.d3, .ms-rv.d4 {
  opacity: 1; transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ms-rv { opacity: 1; transform: none; transition: none; }
  .ms-live-dot { animation: none; }
  *, *::before, *::after { transition-duration: 0.001s !important; animation-duration: 0.001s !important; }
}

/* ── HOMEPAGE REDESIGN ADDITIONS ───────────────────────────────────────────
   New components for the leaner homepage. All motion is gated under
   prefers-reduced-motion: no-preference, and the global reduce rule above also
   neutralises animations — so the static fallback is automatic. */

/* Animated aurora layer behind the hero (decorative, sits below content). */
.ms-hero-aurora {
  position: absolute; inset: -45% -10% auto -10%; height: 150%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 30%, rgba(79, 70, 229, 0.18), transparent 70%),
    radial-gradient(38% 38% at 72% 38%, rgba(124, 58, 237, 0.16), transparent 70%),
    radial-gradient(36% 36% at 52% 72%, rgba(6, 182, 212, 0.12), transparent 70%);
  filter: blur(44px); opacity: 0.7;
}
[data-bs-theme="dark"] .ms-hero-aurora { opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  .ms-hero-aurora { animation: ms-aurora 20s ease-in-out infinite alternate; }
}
@keyframes ms-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.16); }
}

/* Floating "live insight" card over the product screenshot — cross-fades 3 real
   insights. Lives inside .ms-product-frame (position: relative). */
.ms-hero-insight {
  position: absolute; z-index: 3;
  right: 18px; bottom: 18px;
  width: min(330px, 62%); height: 116px;
}
.ms-hi-card {
  position: absolute; inset: 0;
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  padding: 13px 15px; opacity: 0;
  text-align: left;
}
.ms-hi-card:first-child { opacity: 1; }  /* static default / reduced-motion */
.ms-hi-card .ms-hi-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ms-hi-card .ms-hi-body { font-size: 12.5px; line-height: 1.5; color: var(--ms-text-muted); }
.ms-hi-card .ms-hi-body strong { color: var(--ms-text); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .ms-hi-card { animation: ms-cycle 12s infinite; }
  .ms-hi-card:nth-child(2) { animation-delay: 4s; }
  .ms-hi-card:nth-child(3) { animation-delay: 8s; }
}
@keyframes ms-cycle {
  0%   { opacity: 0; transform: translateY(6px); }
  4%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; }
}
@media (max-width: 768px) {
  .ms-hero-insight { display: none; }  /* screenshot too small to overlay cleanly */
}

/* Numbered step badge for the "How it works" section. */
.ms-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--ms-radius-pill);
  background: var(--ms-primary-soft); color: var(--ms-primary);
  font-size: var(--ms-fs-sm); font-weight: 700; flex: none;
}

/* Single-line "depth" cue under the capabilities grid (expert breadth signal). */
.ms-depth-line {
  margin-top: var(--ms-sp-10); text-align: center;
  display: flex; flex-wrap: wrap; gap: var(--ms-sp-2) var(--ms-sp-3);
  align-items: center; justify-content: center;
  font-size: var(--ms-fs-sm); color: var(--ms-text-subtle);
}
.ms-depth-line .sep { color: var(--ms-text-faint); }
.ms-depth-line a { color: var(--ms-primary); font-weight: 600; text-decoration: none; }
.ms-depth-line a:hover { text-decoration: underline; }