/* =============================================
   THEME VARIABLES — curated enterprise theme set
   (13 themes) + high-contrast a11y mode.
   ============================================= */

/* 1. Ocean Depths */
[data-theme="ocean-depths"] {
  --bg:          #1a2332;
  --bg2:         #1f2d40;
  --bg3:         #162030;
  --surface:     #243347;
  --border:      rgba(54,163,163,0.28);
  --border-glow: rgba(168,218,220,0.4);
  --accent:      #36a3a3;
  --accent2:     #a8dadc;
  --text:        #f1faee;
  --muted:       #8aacb3;
  --subtle:      #69939d;
  --tag-bg:      rgba(54,163,163,0.15);
  --tag-color:   #a8dadc;
  --hf:          'Syne', sans-serif;
  --bf:          'Raleway', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* =============================================
   ENTERPRISE THEME PACK (5 from DEV.to "10 Modern
   Color Palettes for SaaS Dashboards 2026" +
   9 curated enterprise palettes for security SaaS).
   ============================================= */

/* 11. Stripe-Like Blurple — fintech-style dark + indigo CTA. */
[data-theme="stripe-blurple"] {
  --bg:          #0f172a;
  --bg2:         #1e293b;
  --bg3:         #0a1020;
  --surface:     #1e293b;
  --border:      rgba(118,120,243,0.28);
  --border-glow: rgba(129,140,248,0.45);
  --accent:      #7678f3;
  --accent2:     #818cf8;
  --text:        #f1f5f9;
  --muted:       #94a3b8;
  --subtle:      #778599;
  --tag-bg:      rgba(118,120,243,0.16);
  --tag-color:   #a5b4fc;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* 15. Monochrome Pro — pure neutral scale, for wireframe-grade clarity. */
[data-theme="monochrome-pro"] {
  --bg:          #f8fafc;
  --bg2:         #e2e8f0;
  --bg3:         #cbd5e1;
  --surface:     #ffffff;
  --border:      rgba(15,23,42,0.12);
  --border-glow: rgba(71,85,105,0.3);
  --accent:      #0f172a;
  --accent2:     #475569;
  --text:        #0f172a;
  --muted:       #475569;
  --subtle:      #66707f;
  --tag-bg:      rgba(15,23,42,0.06);
  --tag-color:   #0f172a;
  --hf:          'Josefin Sans', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     0;
  --ok:          #16a34a;
  --warn:        #d97706;
  --bad:         #dc2626;
  --info:        #2563eb;
}

/* 16. Carbon Graphite — IBM Carbon dark, industrial-software default. */
[data-theme="carbon-graphite"] {
  --bg:          #161616;
  --bg2:         #262626;
  --bg3:         #0c0c0c;
  --surface:     #262626;
  --border:      rgba(57,57,57,1);
  --border-glow: rgba(56,125,254,0.45);
  --accent:      #387dfe;
  --accent2:     #78a9ff;
  --text:        #f4f4f4;
  --muted:       #c6c6c6;
  --subtle:      #828282;
  --tag-bg:      rgba(56,125,254,0.16);
  --tag-color:   #78a9ff;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* 17. Fluent Navy — Microsoft Fluent light + Azure-blue CTA. */
[data-theme="fluent-navy"] {
  --bg:          #faf9f8;
  --bg2:         #f3f2f1;
  --bg3:         #edebe9;
  --surface:     #ffffff;
  --border:      rgba(0,111,197,0.24);
  --border-glow: rgba(0,111,197,0.45);
  --accent:      #006fc5;
  --accent2:     #106ebe;
  --text:        #201f1e;
  --muted:       #605e5c;
  --subtle:      #716f6e;
  --tag-bg:      rgba(0,111,197,0.10);
  --tag-color:   #006fc5;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     0;
  --ok:          #16a34a;
  --warn:        #d97706;
  --bad:         #dc2626;
  --info:        #2563eb;
}

/* 19. Terminal Amber — Bloomberg-style deep navy + amber accent. */
[data-theme="terminal-amber"] {
  --bg:          #0d1421;
  --bg2:         #1a2332;
  --bg3:         #060a14;
  --surface:     #1a2332;
  --border:      rgba(255,136,0,0.22);
  --border-glow: rgba(255,136,0,0.45);
  --accent:      #ff8800;
  --accent2:     #ffb84d;
  --text:        #e8ecf3;
  --muted:       #9aa6b8;
  --subtle:      #748296;
  --tag-bg:      rgba(255,136,0,0.12);
  --tag-color:   #ffb84d;
  --hf:          'Oxanium', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* 20. Federal Slate — defense-coded navy with brushed-gold accent. */
[data-theme="federal-slate"] {
  --bg:          #0e1726;
  --bg2:         #1a2438;
  --bg3:         #070b14;
  --surface:     #1f2b42;
  --border:      rgba(193,154,75,0.22);
  --border-glow: rgba(193,154,75,0.45);
  --accent:      #c19a4b;
  --accent2:     #e1c47d;
  --text:        #e8ecf3;
  --muted:       #9aa6b8;
  --subtle:      #76859b;
  --tag-bg:      rgba(193,154,75,0.12);
  --tag-color:   #e1c47d;
  --hf:          'Playfair Display', serif;
  --bf:          'Lora', serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* 21. Oxblood Compliance — formal light theme with burgundy accent. */
[data-theme="oxblood-compliance"] {
  --bg:          #faf7f4;
  --bg2:         #f1ece6;
  --bg3:         #e6dfd6;
  --surface:     #ffffff;
  --border:      rgba(109,26,54,0.16);
  --border-glow: rgba(109,26,54,0.35);
  --accent:      #6d1a36;
  --accent2:     #9a3a5c;
  --text:        #1f1216;
  --muted:       #6b4a55;
  --subtle:      #786a6f;
  --tag-bg:      rgba(109,26,54,0.07);
  --tag-color:   #6d1a36;
  --hf:          'Cormorant Garamond', serif;
  --bf:          'Lora', serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     0;
  --ok:          #16a34a;
  --warn:        #d97706;
  --bad:         #dc2626;
  --info:        #2563eb;
}

/* 22. Emerald Ops — SRE/SOC dark with operations-green semantics. */
[data-theme="emerald-ops"] {
  --bg:          #0a1410;
  --bg2:         #14241c;
  --bg3:         #050a07;
  --surface:     #182f24;
  --border:      rgba(16,185,129,0.22);
  --border-glow: rgba(110,231,183,0.45);
  --accent:      #10b981;
  --accent2:     #6ee7b7;
  --text:        #d1fae5;
  --muted:       #6ee7b7;
  --subtle:      #34d399;
  --tag-bg:      rgba(16,185,129,0.14);
  --tag-color:   #6ee7b7;
  --hf:          'Oxanium', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* 23. Arctic Cobalt — Azure-style light with electric cobalt accent. */
[data-theme="arctic-cobalt"] {
  --bg:          #f5f7fb;
  --bg2:         #e8edf6;
  --bg3:         #dae1f0;
  --surface:     #ffffff;
  --border:      rgba(30,64,175,0.16);
  --border-glow: rgba(59,130,246,0.4);
  --accent:      #1e40af;
  --accent2:     #3b82f6;
  --text:        #0f1e3d;
  --muted:       #4c5d80;
  --subtle:      #616e84;
  --tag-bg:      rgba(30,64,175,0.08);
  --tag-color:   #1e40af;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     0;
  --ok:          #16a34a;
  --warn:        #d97706;
  --bad:         #dc2626;
  --info:        #2563eb;
}

/* 30. Corporate Emerald — deep forest green dark with bright-green accent. */
[data-theme="corporate-emerald"] {
  --bg:          #052e16;
  --bg2:         #14532d;
  --bg3:         #021a0c;
  --surface:     #14532d;
  --border:      rgba(34,197,94,0.22);
  --border-glow: rgba(134,239,172,0.45);
  --accent:      #22c55e;
  --accent2:     #86efac;
  --text:        #f0fdf4;
  --muted:       #86efac;
  --subtle:      #4ade80;
  --tag-bg:      rgba(34,197,94,0.14);
  --tag-color:   #86efac;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --bad:         #f87171;
  --info:        #60a5fa;
}

/* 33. Modern Minimalist — pure white light with charcoal accent. */
[data-theme="modern-minimalist"] {
  --bg:          #ffffff;
  --bg2:         #f5f5f5;
  --bg3:         #ebebeb;
  --surface:     #ffffff;
  --border:      rgba(54,69,79,0.12);
  --border-glow: rgba(112,128,144,0.35);
  --accent:      #36454f;
  --accent2:     #708090;
  --text:        #1a1a1a;
  --muted:       #5f757d;
  --subtle:      #697579;
  --tag-bg:      rgba(54,69,79,0.06);
  --tag-color:   #36454f;
  --hf:          'Josefin Sans', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     0;
  --ok:          #16a34a;
  --warn:        #d97706;
  --bad:         #dc2626;
  --info:        #2563eb;
}

/* 34. Arctic Frost — white-blue light with steel-blue accent. */
[data-theme="arctic-frost"] {
  --bg:          #fafafa;
  --bg2:         #f0f5fb;
  --bg3:         #e4edf7;
  --surface:     #ffffff;
  --border:      rgba(74,111,165,0.14);
  --border-glow: rgba(74,111,165,0.35);
  --accent:      #4a6fa5;
  --accent2:     #d4e4f7;
  --text:        #1c2a3a;
  --muted:       #527398;
  --subtle:      #5f7184;
  --tag-bg:      rgba(74,111,165,0.08);
  --tag-color:   #4a6fa5;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     0;
  --ok:          #16a34a;
  --warn:        #d97706;
  --bad:         #dc2626;
  --info:        #2563eb;
}

/* High Contrast — WCAG-AAA accessibility theme (black/white, high-vis blue CTA).
   Offered in the portal as the third toggle option alongside Dark and Light. */
[data-theme="high-contrast"] {
  --bg:          #000000;
  --bg2:         #0d0d0d;
  --bg3:         #000000;
  --surface:     #1a1a1a;
  --border:      rgba(255,255,255,0.55);
  --border-glow: rgba(255,255,255,0.9);
  --accent:      #6cb6ff;
  --accent2:     #a9d2ff;
  --text:        #ffffff;
  --muted:       #e0e0e0;
  --subtle:      #b8b8b8;
  --tag-bg:      rgba(108,182,255,0.18);
  --tag-color:   #cfe5ff;
  --hf:          'Syne', sans-serif;
  --bf:          'Montserrat', sans-serif;
  --mono:        'IBM Plex Mono', monospace;
  --is-dark:     1;
  --ok:          #4ade80;
  --warn:        #fde047;
  --bad:         #ff6b6b;
  --info:        #7dd3fc;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--bf);
  min-height: 100vh;
  transition: background 0.35s ease, color 0.35s ease;
}

/* Default link styling — theme-aware. Overridden by component-scoped
   selectors (.nav-menu a, .footer-col a, .btn-*, a.prod-card, etc.) */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.2s, opacity 0.2s, text-decoration-color 0.2s;
}
a:hover {
  color: var(--accent2, var(--accent));
  text-decoration-color: var(--accent);
}

/* =============================================
   ACCESSIBILITY — focus & skip link
   ============================================= */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Suppress non-keyboard focus rings */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--hf);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* =============================================
   THEME SWITCHER BAR (fixed top)
   ============================================= */
/* =============================================
   THEME DROPDOWN (in nav)
   ============================================= */
.theme-dd {
  position: relative;
  display: inline-block;
}

/* Trigger matches the accent "Try Demo" CTA — outlined accent pill */
.theme-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.73rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  transition: all 0.2s;
}

.theme-dd-trigger:hover {
  background: var(--accent);
  color: var(--bg);
}

.theme-dd-trigger:hover .swatch {
  box-shadow: 0 0 0 1px var(--bg);
}

.theme-dd-trigger .swatch {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border);
}

.theme-dd-trigger .caret {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 0.15rem;
  transition: transform 0.2s;
}

.theme-dd.open .theme-dd-trigger .caret {
  transform: rotate(180deg);
}

.theme-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 0 0 1px var(--border);
  display: none;
  z-index: 200;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.theme-dd.open .theme-dd-menu { display: block; }

/* Floating bottom-right variant — sits above the Help & Questions FAB,
   icon-only trigger, menu opens upward (drop-up). */
.theme-dd--floating {
  position: fixed;
  right: 1.25rem;
  bottom: 4.5rem;
  z-index: 9998;
  display: inline-block !important;
  width: auto !important;
}
.theme-dd--floating .theme-dd-trigger {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: var(--bg, var(--surface));
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  position: relative;
  justify-content: center;
}
.theme-dd--floating .theme-dd-trigger:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.theme-dd--floating .theme-dd-trigger .theme-dd-ico {
  font-size: 16px;
  line-height: 1;
}
.theme-dd--floating .theme-dd-trigger .swatch {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px var(--bg, var(--surface));
}
.theme-dd--floating .theme-dd-menu {
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
  transform-origin: bottom right;
  animation: themeDDUp 0.18s ease;
}
@keyframes themeDDUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* LIVE pill — green pulsing dot + uppercase mono label.
   Attaches inline to product cards (svc-card / prod-card). */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #22c55e;
  font-family: var(--mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.live-pill:hover {
  background: rgba(34, 197, 94, 0.22);
  color: #22c55e;
  transform: translateY(-1px);
}
.live-pill .live-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65);
  animation: livePillPulse 1.8s ease-out infinite;
}
@keyframes livePillPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* Light themes: darken the hardcoded green to meet 4.5:1 on pale backgrounds.
   #16a34a achieves ~4.6:1 on white and ~5.2:1 on the lightest bg values used. */
[data-theme="monochrome-pro"]      .live-pill,
[data-theme="fluent-navy"]         .live-pill,
[data-theme="oxblood-compliance"]  .live-pill,
[data-theme="arctic-cobalt"]       .live-pill,
[data-theme="modern-minimalist"]   .live-pill,
[data-theme="arctic-frost"]        .live-pill {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.45);
  background: rgba(22, 163, 74, 0.10);
}
[data-theme="monochrome-pro"]      .live-pill .live-pill-dot,
[data-theme="fluent-navy"]         .live-pill .live-pill-dot,
[data-theme="oxblood-compliance"]  .live-pill .live-pill-dot,
[data-theme="arctic-cobalt"]       .live-pill .live-pill-dot,
[data-theme="modern-minimalist"]   .live-pill .live-pill-dot,
[data-theme="arctic-frost"]        .live-pill .live-pill-dot {
  background: #16a34a;
}

/* Wrapper around svc-card that needs the LIVE pill in the top-right corner. */
.svc-card-wrap {
  position: relative;
  display: block;
}
.svc-card-wrap > .svc-card {
  display: block;
  height: 100%;
}
.svc-card-wrap > .live-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
/* Auto-dock for the floating Help (.scw-root) + Theme (.theme-dd--floating)
   pills. site.js adds .is-docked ~6s after load; both then slide off the right
   edge leaving a ~16px sliver as the hover target. Hover (or JS removing the
   class on pointer-enter / focus) brings them back. The translate is own-width
   (100%) plus the 1.25rem inset, minus the 16px sliver that stays on screen. */
.scw-root,
.theme-dd--floating {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.scw-root.is-docked,
.theme-dd--floating.is-docked {
  transform: translateX(calc(100% + 1.25rem - 16px));
}
.scw-root.is-docked:hover,
.theme-dd--floating.is-docked:hover {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .scw-root,
  .theme-dd--floating { transition: none; }
}

@media (max-width: 520px) {
  .theme-dd--floating { right: 0.75rem; bottom: 4rem; }
  .theme-dd--floating .theme-dd-menu { right: 0; left: auto; min-width: 220px; }
  /* Right inset shrinks to 0.75rem on mobile — keep the same 16px sliver. */
  .scw-root.is-docked,
  .theme-dd--floating.is-docked {
    transform: translateX(calc(100% + 0.75rem - 16px));
  }
}

.theme-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.theme-opt:hover {
  background: var(--bg2);
  color: var(--text);
}

.theme-opt.active {
  background: var(--tag-bg);
  color: var(--text);
}

.theme-opt .swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.theme-opt .check {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  opacity: 0;
}

.theme-opt.active .check { opacity: 1; }

.theme-dd-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subtle);
  padding: 0.5rem 0.65rem 0.4rem;
}

.theme-dd-section {
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 0.6rem;
}

/* =============================================
   NAV
   ============================================= */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  transition: background 0.35s, border-color 0.35s;
}

.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--hf);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.brand-icon {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* STACK Vault mark — three stacked bars; top bar 'lights' with accent2 glow.
   Uses currentColor (set to var(--accent)) so it follows the theme. */
.brand-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand-icon .lm-stack { color: var(--accent); }
.brand-icon .lm-glow  { color: var(--accent2); }
.brand-icon .lm-bar { fill: currentColor; }
.brand-icon .lm-top {
  fill: var(--accent2);
  filter: drop-shadow(0 0 4px var(--border-glow));
}

.nav-brand-wordmark {
  font-family: var(--hf);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
}
.nav-brand-wordmark .wm-stack {
  font-weight: 800;
  margin-right: 0.28em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav-brand-wordmark .wm-lume  { font-weight: 800; color: var(--accent); }

/* Footer brand wordmark — apply the same STACK-as-uppercase treatment to the
   "Stack " span (the first inner span). The product word ("Vault") in the
   second span keeps its case. Body prose elsewhere remains sentence case. */
.footer-brand > span > span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}

/* Top-level nav item (button) */
.nav-item {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-family: var(--bf);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  position: relative;
}

.nav-trigger .ni-icon {
  font-size: 13px;
  color: var(--subtle);
  transition: color 0.18s ease, transform 0.18s ease;
}

.nav-trigger .ni-caret {
  font-size: 9px;
  opacity: 0.5;
  margin-left: 0.1rem;
  transition: transform 0.2s ease, opacity 0.18s ease;
}

/* Underline accent on hover/open — enterprise feel */
.nav-trigger::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.32rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

/* Trigger active styles. :hover preserved for instant feedback (so the trigger
 * lights up as the cursor arrives, before the 80ms open delay fires).
 * The dropdown panel itself is the only thing gated on .open vs :hover above. */
.nav-item:hover .nav-trigger,
.nav-item.open .nav-trigger {
  color: var(--text);
  background: var(--bg2);
  border-color: var(--border);
}

.nav-item:hover .nav-trigger .ni-icon,
.nav-item.open .nav-trigger .ni-icon {
  color: var(--accent);
}

.nav-item:hover .nav-trigger::after,
.nav-item.open .nav-trigger::after {
  transform: scaleX(1);
}

.nav-item.open .nav-trigger .ni-caret {
  transform: rotate(180deg);
  opacity: 1;
}
html:not(.has-js) .nav-item:hover .nav-trigger .ni-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown menu.
 * Two reasons selection used to be twitchy:
 *   1. 6px gap between trigger and menu — cursor would fall through, hover lost.
 *   2. CSS-only :hover closes the menu the instant the cursor leaves the trigger,
 *      which loses the user during a diagonal cross toward a menu item.
 *
 * Fix:
 *   - The 6px gap is now visually preserved but covered by a transparent
 *     "bridge" pseudo-element on the menu itself, so the cursor never
 *     enters dead space between trigger and menu.
 *   - The JS-driven .open class is the authoritative state; CSS :hover is
 *     kept as a no-JS fallback. JS handles the hover-intent delay (~250ms
 *     close grace period) to forgive diagonal sweeps.
 */
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem;
  box-shadow: 0 18px 48px rgba(0,0,0,0.32), 0 0 0 1px var(--border);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}

/* Invisible bridge that closes the 6px gap between trigger and menu so the
 * cursor stays inside the .nav-item hover region while moving down. */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -10px;            /* slightly more than the visual gap */
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
}

/* Pure-CSS hover fallback for no-JS users only. When JS boots it sets
 * html.has-js, which switches dropdown control entirely to the JS .open class
 * (with hover-intent timers). Mixing the two would let CSS :hover snap the
 * menu closed before our 250ms close grace fires. */
html:not(.has-js) .nav-item:hover .nav-menu,
.nav-item.open .nav-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-menu-label {
  font-family: var(--bf);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
  padding: 0.55rem 0.7rem 0.45rem;
}

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--bf);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
  position: relative;
}

.nav-menu a .nm-icon {
  font-size: 14px;
  color: var(--subtle);
  width: 18px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.nav-menu a:hover {
  background: var(--bg2);
  color: var(--text);
  padding-left: 0.95rem;
}

.nav-menu a:hover .nm-icon,
.nav-menu a:hover .nm-logo {
  color: var(--accent);
}

.nav-menu a .nm-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--subtle);
  transition: color 0.15s ease;
}

.nav-menu a .nm-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.nav-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleY(0);
  transition: transform 0.18s ease;
}

.nav-menu a:hover::before { transform: scaleY(1); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0.6rem;
}

/* Live-demo variant: attention-drawing pill, visually distinct from the
   filled Log In button. Soft "breathing" glow draws the eye without shouting;
   theme-safe via color-mix, and stilled for reduced-motion users. */
.nav-cta-demo {
  position: relative;
  background: var(--tag-bg);
  color: var(--accent);
  border: 1px solid var(--border-glow, var(--accent));
  border-radius: 999px;
  font-family: var(--bf);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.45rem 0.95rem;
  animation: demoPulse 2.8s ease-in-out infinite;
}
.nav-cta-demo:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 18px 1px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: none;
}
@keyframes demoPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border-glow, var(--accent)); }
  50%      { box-shadow: 0 0 16px 1px color-mix(in srgb, var(--accent) 42%, transparent); border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta-demo { animation: none; }
}
.nav-cta:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Wide variant used by the merged Products dropdown so two grouped columns
 * (Platform Services + Product Suite) fit side-by-side at desktop widths. */
.nav-menu--wide {
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.55rem 0.7rem;
}

.nav-menu--wide .nav-col { display: flex; flex-direction: column; min-width: 0; }
.nav-menu--wide .nav-menu-label { padding: 0.4rem 0.7rem 0.45rem; }

/* Three-column variant for menus that carry an extra section (e.g. Resources
   with Compliance Journey). Collapses to a single column on mobile via the
   .nav-menu--wide rule in the responsive block below. */
.nav-menu--3col {
  min-width: 760px;
  grid-template-columns: 1fr 1fr 1fr;
  /* Wide 3-col menu under a center-right trigger would overflow the right
     edge if left-aligned; anchor it to the trigger's right edge instead. */
  left: auto;
  right: 0;
}

/* Between the mobile breakpoint and wide-desktop there isn't room for three
   columns under a right-anchored menu, so reflow to two columns until 1280px. */
@media (min-width: 981px) and (max-width: 1279px) {
  .nav-menu--3col {
    min-width: 520px;
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  padding: 5rem 3rem 4.5rem;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 30%, transparent 100%);
  transition: all 0.35s;
}

.hero-glow {
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 420px;
  background: radial-gradient(ellipse, var(--tag-bg) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* "Live" indicator for nav menu items (Compli, Compass) */
.nav-menu a.nm-live { position: relative; }
.nav-menu a.nm-live .nm-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: nm-live-pulse 1.6s ease-in-out infinite;
}
/* "LIVE" pill — green dot + uppercase mono label, sits at the end of a nav menu item. */
.nav-menu a.nm-live .nm-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #34d399;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-menu a.nm-live .nm-live-pill .nm-live-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: nm-live-pulse 1.6s ease-in-out infinite;
}
@keyframes nm-live-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(52, 211, 153, 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px  rgba(52, 211, 153, 0);    opacity: 0.65; }
  100% { box-shadow: 0 0 0 0    rgba(52, 211, 153, 0);    opacity: 1; }
}

h1 {
  font-family: var(--hf);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.4rem;
}

h1 .accent { color: var(--accent); }

.hero-sub {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.hero-mission {
  font-size: 0.875rem;
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
}
.hero-mission strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero-mission span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  margin-top: 0.2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  min-height: 44px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--hf);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}

.btn-primary:hover { opacity: 0.88; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  min-height: 44px;
  background: transparent;
  color: var(--muted);
  font-family: var(--hf);
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-ghost:hover { color: var(--text); border-color: var(--border-glow); }

/* STAT STRIP */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
}

.stat-cell {
  background: var(--bg2);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 0.35s;
}

.stat-value {
  font-family: var(--hf);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.04em;
}

.stat-value .unit { color: var(--accent); font-size: 1.1rem; }

.stat-label {
  font-family: var(--mono);
  font-size: 0.67rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =============================================
   SECTIONS
   ============================================= */
.divider {
  height: 1px;
  background: var(--border);
  transition: background 0.35s;
}

.section {
  padding: 4.5rem 3rem;
  max-width: 1180px;
  margin: 0 auto;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--accent);
}

.eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.eyebrow a:hover { opacity: 0.7; }

h2 {
  font-family: var(--hf);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 0.65rem;
}

.section-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: 2.75rem;
  font-weight: 400;
}

/* =============================================
   SERVICE CARDS
   ============================================= */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Four-across variant — used by the "Four planes" spine section so all 4 cards
   sit in one row instead of 3 + a stranded card with two empty cells. Collapses
   to 2 then 1 column at the shared card-grid breakpoints below. */
.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.svc-card {
  background: var(--bg2);
  padding: 1.9rem 1.75rem;
  transition: background 0.2s;
  cursor: default;
}

.svc-card:hover { background: var(--surface); }

.svc-icon {
  width: 42px; height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 1.15rem;
  background: var(--tag-bg);
  color: var(--accent);
  transition: background 0.35s;
}

.svc-card h3 {
  font-family: var(--hf);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.svc-card p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 400;
}

.card-link {
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.svc-card:hover .card-link { opacity: 1; }

.text-link-accent {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.text-link-accent:hover { border-bottom-color: var(--accent); }

/* =============================================
   LEGACY PAGE PRIMITIVES
   A family of older service/compare pages (ciso-office-hours,
   compliance-acceleration, hipaa-starter-kit, control-mapping,
   stackvault-vs-vanta, internal-audit-checklist) plus the vCISO explainer
   pages reference class names that were never defined, so their content,
   footers and cards rendered unstyled. Define them here using the same
   theme tokens and design language as .section / .site-footer / .svc-card.
   ============================================= */

/* Content wrapper (these pages put <div class="container"> inside <section>). */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero subtitle. */
.subtitle {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

/* Legacy multi-column footer. Scoped to footers that actually contain
   .footer-content so the modern .site-footer and the simple single-row product
   footers (styled by the base `footer` flex rule) are left untouched. The
   display:block overrides that base flex rule, which would otherwise shrink the
   inner .container to its content width. */
footer:has(.footer-content) {
  display: block;
  border-top: 1px solid var(--bg2);
  background: var(--bg);
  padding: 3.5rem 0 1.5rem;
  margin-top: 3rem;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.2rem;
  margin-bottom: 2.5rem;
}
.footer-section h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.95rem;
}
.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-section a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-section a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--bg2);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Prose wrapper + responsive icon cards on the vCISO explainer pages. */
.prose { max-width: 820px; }
.prose > p,
.prose li { color: var(--muted); line-height: 1.75; }
.prose h2,
.prose h3 { color: var(--text); }

.card-grid-6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}
.resp-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.6rem;
  transition: border-color 0.2s, transform 0.2s;
}
.resp-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
}
.resp-card-icon {
  width: 42px; height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 1rem;
  background: var(--tag-bg);
  color: var(--accent);
}
.resp-card h4 {
  font-family: var(--hf);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.resp-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Transparency/disclaimer callout at the foot of legal pages. Pairs with
   .section (for max-width + centering) and overrides its padding to callout
   size. */
.legal-note {
  padding: 1.1rem 1.35rem;
  margin: 1.5rem auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--muted);
}
.legal-note p { margin: 0; }

/* =============================================
   HOW IT WORKS CARDS
   ============================================= */
.how-it-works-section {
  margin: 48px 0;
}

.how-it-works-title {
  text-align: center;
  margin-bottom: 32px;
  color: var(--text);
  font-family: var(--hf);
  font-size: 1.5rem;
  font-weight: 700;
}

.how-it-works-card {
  background: var(--bg2);
  padding: 28px 24px;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.how-it-works-card:hover {
  background: var(--surface);
}

.how-it-works-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
  font-family: var(--hf);
  letter-spacing: -0.02em;
}

.how-it-works-card-title {
  margin: 8px 0;
  color: var(--text);
  font-family: var(--hf);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.how-it-works-card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  font-weight: 400;
}

/* =============================================
   PRODUCT SHELF
   ============================================= */
.shelf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.prod-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: border-color 0.2s;
}

.prod-card:hover { border-color: var(--border-glow); }

a.prod-card { text-decoration: none; color: inherit; }

.prod-icon {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}

.prod-card h4 {
  font-family: var(--hf);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.28rem;
}

.prod-card p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
}

.prod-tag {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.15rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  text-transform: uppercase;
  background: var(--tag-bg);
  color: var(--tag-color);
}

/* =============================================
   TERMINAL
   ============================================= */
.terminal {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

.td { width: 10px; height: 10px; border-radius: 50%; }
.td-r { background: #f87171; }
.td-a { background: #fbbf24; }
.td-g { background: #34d399; }

.term-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-left: 0.5rem;
  letter-spacing: 0.04em;
}

.term-body {
  padding: 1.4rem 1.75rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.85;
}

.tl-m { color: var(--muted); }
.tl-a { color: var(--accent); }
.tl-a2 { color: var(--accent2); }
.tl-g { color: #34d399; }
.tl-r { color: #f87171; }
.tl-t { color: var(--text); }

/* =============================================
   BLOG
   ============================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.blog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.2s;
}

.blog-card:hover { border-color: var(--border-glow); }

.blog-meta {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-tag {
  padding: 0.1rem 0.48rem;
  border-radius: 2px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--tag-bg);
  color: var(--tag-color);
}

.blog-card h4 {
  font-family: var(--hf);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.blog-card p {
  font-size: 0.77rem;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
  flex: 1;
}

.blog-link {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
}

/* =============================================
   COMPLI HERO & STEP CARDS
   ============================================= */
.compli-hero {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3rem;
  text-align: center;
}

.compli-content {
  max-width: 760px;
  margin: 0 auto;
}

.compli-content .eyebrow {
  justify-content: center;
}

.compli-content h2 {
  font-size: 1.8rem;
  margin: 0 auto 0.75rem;
  max-width: 720px;
  text-wrap: balance;
}

.compli-content .section-desc {
  font-size: 0.95rem;
  margin: 0 auto 1.75rem;
  max-width: 640px;
  text-wrap: balance;
  line-height: 1.6;
}

.compli-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.step-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  min-height: 320px;
}

.step-card:hover {
  border-color: var(--border-glow);
  background: var(--surface);
}

.step-number {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  font-family: var(--hf);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.step-card h3 {
  font-family: var(--hf);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0.25rem;
}

.step-card p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
  flex: 1;
}

.step-icon {
  font-size: 28px;
  color: var(--accent);
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* =============================================
   CTA BANNER
   ============================================= */
.cta-wrap {
  padding: 0 3rem 3rem;
}

.cta-banner {
  padding: 3.25rem 3rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}

.cta-banner::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: var(--tag-bg);
  pointer-events: none;
}

.cta-banner h2 { font-size: 1.65rem; margin-bottom: 0.4rem; }

.cta-banner p {
  font-size: 0.87rem;
  color: var(--muted);
  font-weight: 400;
}

.cta-actions { display: flex; gap: 0.75rem; flex-shrink: 0; position: relative; z-index: 1; }

/* =============================================
   FOOTER
   ============================================= */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  transition: border-color 0.35s;
}

.footer-brand {
  font-family: var(--hf);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
}

.footer-links a {
  font-size: 0.73rem;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--mono);
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--accent); }

.footer-copy {
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  nav,
  .hero,
  .section,
  .cta-wrap,
  footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid-3,
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .nav-mobile-toggle {
    display: inline-flex;
  }

  nav {
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
  }

  .nav-links,
  .theme-dd {
    display: none;
  }

  nav.nav-open .nav-links,
  nav.nav-open .theme-dd {
    display: flex;
  }

  .nav-links {
    width: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
  }

  .nav-item,
  .nav-trigger {
    width: 100%;
  }

  .nav-trigger {
    justify-content: space-between;
    padding: 0.7rem 0.8rem;
  }

  .nav-item .nav-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0.35rem;
    display: none !important;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
  }

  .nav-item.open .nav-menu {
    display: block !important;
  }

  /* Wide two-column dropdown collapses to a single stacked column on mobile. */
  .nav-menu--wide {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  /* Log In CTA stays visible in the top bar alongside brand + hamburger. */
  .nav-cta {
    order: 2;
    margin-left: auto;
    margin-right: 0.5rem;
    padding: 0.5rem 0.9rem;
  }

  .theme-dd {
    width: 100%;
    order: 4;
  }

  .theme-dd-trigger {
    width: 100%;
    justify-content: center;
  }

  .theme-dd-menu {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .hero {
    padding-top: 3.25rem;
    padding-bottom: 3.2rem;
  }

  .hero-actions {
    margin-bottom: 2.4rem;
  }

  .shelf-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.4rem;
  }

  .cta-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .cta-actions .btn-primary,
  .cta-actions .btn-ghost {
    flex: 1;
    min-width: 140px;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  h1 {
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .hero-sub,
  .section-desc {
    font-size: 0.9rem;
  }

  .stat-strip,
  .card-grid-3,
  .card-grid-4,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .prod-card,
  .blog-card,
  .svc-card {
    padding: 1.25rem 1.15rem;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
  }
}

@media (max-width: 380px) {
  nav,
  .hero,
  .section,
  .cta-wrap,
  footer {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  nav {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .nav-brand {
    gap: 0.5rem;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
  }

  .nav-brand-wordmark {
    font-size: 1rem;
  }

  .nav-mobile-toggle {
    width: 34px;
    height: 34px;
  }

  .hero {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }

  .hero-badge {
    font-size: 0.58rem;
    padding: 0.28rem 0.6rem;
    margin-bottom: 1.25rem;
    gap: 0.4rem;
  }

  h1 {
    font-size: clamp(1.55rem, 8.6vw, 1.9rem);
    margin-bottom: 1rem;
  }

  .hero-sub {
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 1.35rem;
  }

  .hero-actions {
    gap: 0.6rem;
    margin-bottom: 1.35rem;
  }

  .btn-primary,
  .btn-ghost,
  .nav-cta {
    width: 100%;
    justify-content: center;
    padding: 0.65rem 0.9rem;
    font-size: 0.72rem;
  }

  .stat-cell {
    padding: 0.85rem 0.75rem;
    gap: 0.15rem;
  }

  .stat-value {
    font-size: 1.45rem;
  }

  .stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  .section {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .eyebrow {
    font-size: 0.62rem;
    margin-bottom: 0.55rem;
  }

  h2 {
    font-size: clamp(1.25rem, 7vw, 1.45rem);
  }

  .section-desc {
    font-size: 0.8rem;
    line-height: 1.55;
    margin-bottom: 1.35rem;
  }

  .svc-card,
  .prod-card,
  .blog-card {
    padding: 0.95rem 0.85rem;
  }

  .svc-icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
    margin-bottom: 0.8rem;
  }

  .svc-card h3,
  .prod-card h4,
  .blog-card h4 {
    font-size: 0.82rem;
  }

  .svc-card p,
  .prod-card p,
  .blog-card p {
    font-size: 0.73rem;
    line-height: 1.5;
  }

  .prod-icon {
    font-size: 18px;
  }

  .prod-tag,
  .blog-tag {
    font-size: 0.55rem;
  }

  .terminal {
    border-radius: 6px;
  }

  .term-bar {
    padding: 0.55rem 0.7rem;
  }

  .term-title {
    font-size: 0.58rem;
    margin-left: 0.35rem;
  }

  .term-body {
    padding: 0.75rem 0.75rem;
    font-size: 0.62rem;
    line-height: 1.6;
  }

  .cta-wrap {
    padding-bottom: 1.6rem;
  }

  .cta-banner {
    padding: 1.2rem 0.9rem;
    gap: 1rem;
  }

  .cta-banner h2 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
  }

  .cta-banner p {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .cta-actions {
    gap: 0.55rem;
  }

  .footer-brand {
    font-size: 0.82rem;
  }

  .footer-links a {
    font-size: 0.66rem;
  }

  .footer-copy {
    font-size: 0.58rem;
  }
}

@media (max-width: 320px) {
  nav,
  .hero,
  .section,
  .cta-wrap,
  footer {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .nav-brand-wordmark {
    font-size: 0.92rem;
  }

  .hero-badge {
    font-size: 0.54rem;
    letter-spacing: 0.06em;
  }

  h1 {
    font-size: clamp(1.4rem, 8.2vw, 1.75rem);
  }

  .btn-primary,
  .btn-ghost,
  .nav-cta {
    min-height: 40px;
    padding: 0.58rem 0.7rem;
    font-size: 0.68rem;
    gap: 0.35rem;
  }

  .hero-actions.can-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .hero-actions.can-inline .btn-primary,
  .hero-actions.can-inline .btn-ghost {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 0.62rem;
    letter-spacing: 0;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .term-body {
    font-size: 0.58rem;
  }
}

/* =============================================
   TRANSITIONS
   ============================================= */
*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* =============================================
   REDUCED MOTION
   Collapses all transitions and animations for
   users who set prefers-reduced-motion in their OS.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =============================================
   PRODUCT-PAGE LOGO LOCKUP
   (STACK Compli, future Stack-branded products)
   ============================================= */
.product-logo {
  margin-bottom: 1.4rem;
  display: block;
}
.product-logo img {
  display: block;
  height: auto;
  max-width: 240px;
  width: 100%;
}
/* SVG-based STACK lockup used across product & service pages */
.cw-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text);
  line-height: 1;
  margin-bottom: 1.4rem;
  width: max-content;
  max-width: 100%;
}
.cw-mark {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
}
.cw-wordmark {
  font-family: var(--hf, 'Syne', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cw-stack { color: var(--text); opacity: 0.85; }
.cw-name,
.cw-compass { color: var(--accent); }
/* Default: show the dark-text logo, hide the white variant. */
.product-logo-light { display: none; }
.product-logo-dark  { display: block; }

/* On dark themes: swap. Keep this list in sync with every theme that sets
 * --is-dark: 1; missed entries leave a dark-text logo on a dark background. */
[data-theme="ocean-depths"]       .product-logo-dark,
[data-theme="stripe-blurple"]     .product-logo-dark,
[data-theme="carbon-graphite"]    .product-logo-dark,
[data-theme="terminal-amber"]     .product-logo-dark,
[data-theme="federal-slate"]      .product-logo-dark,
[data-theme="emerald-ops"]        .product-logo-dark,
[data-theme="corporate-emerald"]  .product-logo-dark,
[data-theme="high-contrast"]      .product-logo-dark { display: none; }
[data-theme="ocean-depths"]       .product-logo-light,
[data-theme="stripe-blurple"]     .product-logo-light,
[data-theme="carbon-graphite"]    .product-logo-light,
[data-theme="terminal-amber"]     .product-logo-light,
[data-theme="federal-slate"]      .product-logo-light,
[data-theme="emerald-ops"]        .product-logo-light,
[data-theme="corporate-emerald"]  .product-logo-light,
[data-theme="high-contrast"]      .product-logo-light { display: block; }

/* === FOOTER:enterprise (v1) === */
.site-footer {
  border-top: 1px solid var(--bg2);
  padding: 4rem 2.5rem 1.5rem;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--bf);
  transition: border-color 0.35s ease, background 0.35s ease;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 2.2rem;
  max-width: 1240px;
  margin: 0 auto 3rem;
}
.footer-brand-col .footer-brand {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-family: var(--hf); font-weight: 800; font-size: 1.05rem;
  color: var(--text); letter-spacing: -0.01em;
}
.footer-brand-col .footer-mark { width: 24px; height: 24px; display: inline-flex; }
.footer-brand-col .footer-mark svg { width: 100%; height: 100%; overflow: visible; }
.footer-brand-col .footer-tagline {
  font-size: 0.78rem; line-height: 1.55; color: var(--muted);
  max-width: 280px; margin: 0 0 1.1rem;
}
.footer-social { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--muted);
  border: 1px solid var(--border);
  font-size: 0.95rem; text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.footer-social a:hover {
  color: var(--accent); border-color: var(--accent); transform: translateY(-1px);
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.95rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a {
  font-size: 0.82rem;
  font-family: var(--bf);
  color: var(--muted); text-decoration: none;
  transition: color 0.18s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-legal {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem; border-top: 1px solid var(--bg2);
  font-family: var(--mono); font-size: 0.66rem;
  color: var(--muted); letter-spacing: 0.05em;
  text-align: center;
}
.footer-legal .legal-sep { opacity: 0.4; }
.footer-legal a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-legal a:hover { color: var(--accent); }
/* Legacy single-row footer styles are superseded; hide the old copy block in
   case any partial render still emits it. */
.footer-copy { display: none; }
@media (max-width: 980px) {
  .site-footer { padding: 3rem 1.5rem 1.5rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; }
}