/* CLEAN WHITE FOOTER - SITE-WIDE (founder directive 2026-07-28).
   Every page renders a white body, but the shared footer was built for a dark
   ground, so ~2900 pages ended in black slabs under white content. The v5 link
   columns were already white with dark slate type; only the surfaces beneath
   them were dark, so no type changes are needed.
   !important is required: shared.css loads BEFORE each page inline style, and
   several pages set .footer .footer-top-half to black there.
   Opt-out .footer-dark keeps the dark treatment - applied to book.html, the one
   genuinely dark page (body rgb(11,11,12)). nova-analytics.html does not link
   this file at all. /checkout measures white and correctly takes the light one.
   PLACED AT THE TOP ON PURPOSE: something earlier in this file leaves an
   unterminated comment, so everything appended at EOF is swallowed and never
   reaches the browser. A previous author hit the same wall and left a note at
   the end of this file saying they moved their rule up here for that reason.
   Verified: appended at EOF these rules parsed as 0 rules in the browser. */
.footer:not(.footer-dark),
.footer:not(.footer-dark) .footer-top-half { background: #ffffff !important; }
.footer:not(.footer-dark) .status-banner { background: #f9fafb !important; border-top: 1px solid #f0f1f3; }
.footer:not(.footer-dark) { border-top: 1px solid #e5e7eb; }
.footer:not(.footer-dark) .footer-divider { background: #e5e7eb !important; }

/* FOOTER LINK-COLUMNS: BLACK RULES, NO GREEN - SITE-WIDE (founder, 2026-07-29).
   Applied to the status page first, then asked for on every page.

   Four green gradients lived in the .ftv5-links block and all four are gone:
     ::before   96x2px linear-gradient(#9fe870 -> #58d900) pinned at top:-1.5px,
                so it overlapped the top rule and read as a smudge;
     ::after    1440x80px radial wash rgba(88,217,0,0.05) bleeding downward;
     h5 / h5 span   gradient-FILLED heading text;
     h5::after  the 32x2px accent, kept but recoloured black.
   The block's own 1px borders in rgba(88,217,0,0.22) are removed outright
   (see the border rule below).

   THE HEADINGS ARE GRADIENT-FILLED TEXT (background-clip:text +
   -webkit-text-fill-color:transparent). Resetting `color` alone leaves them
   transparent and they VANISH; the fill colour has to be reset too.

   !important + the footer.footer prefix are load-bearing for the same reason
   as the block above: this file loads before each page's inline <style>, and
   the footer ships its own rules in <body>.

   Scoped :not(.footer-dark) so book.html - the one genuinely dark page - keeps
   its dark footer instead of getting black-on-black borders and ink headings.

   PLACED AT THE TOP for the reason documented above: an unterminated comment
   earlier in this file swallows anything appended at EOF. Do not move it down.
*/
/* No rules on the top and bottom edges at all (founder follow-up 2026-07-29:
   "remove the 2 thin black lines at the footer"). The block shipped with 1px
   borders in rgba(88,217,0,0.22); they were briefly black, now they are gone
   entirely. Zeroed rather than made transparent so the 2px they occupied is
   reclaimed too. */
footer.footer:not(.footer-dark) .ftv5-links{
  border-top:0 !important;
  border-bottom:0 !important;
}
footer.footer:not(.footer-dark) .ftv5-links::before,
footer.footer:not(.footer-dark) .ftv5-links::after{display:none !important;}
footer.footer:not(.footer-dark) .ftv5-links .ftv5-col h5,
footer.footer:not(.footer-dark) .ftv5-links .ftv5-col h5 span{
  background:none !important;
  background-image:none !important;
  -webkit-text-fill-color:#0E1113 !important;
  color:#0E1113 !important;
}
footer.footer:not(.footer-dark) .ftv5-links .ftv5-col h5::after{
  background:#000000 !important;
  background-image:none !important;
}
.footer:not(.footer-dark) .footer-social a[href*="x.com"] { color: #0f1419 !important; }

/* ═══════════════════════════════════════════════════════
   NOVA AI — SHARED STYLES FOR PRODUCT & SOLUTION PAGES
   ═══════════════════════════════════════════════════════ */

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

/* Visible keyboard-focus ring (a11y audit 2026-06-26): the site shipped no
   :focus styles, so keyboard users had no indication of where they were.
   :focus-visible shows the brand-green ring only for keyboard nav (not mouse
   clicks), so it doesn't change the mouse-click look. */
:focus-visible { outline: 2px solid #58d900; outline-offset: 2px; border-radius: 0; }

/* ── YouTube Lightbox ── */
.yt-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: none; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; opacity: 0; transition: opacity 0.35s ease; }
.yt-lightbox.active { display: flex; opacity: 1; }
.yt-lightbox-inner { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; background: #000; border-radius: 0; overflow: hidden; box-shadow: 0 32px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(88,217,0,0.2); cursor: default; transform: scale(0.96); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.yt-lightbox.active .yt-lightbox-inner { transform: scale(1); }
.yt-lightbox-inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-lightbox-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.5); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 2; }
.yt-lightbox-close:hover { background: rgba(255,255,255,0.15); }

/* ── Reusable "Watch Demo" button ── */
.watch-demo-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: linear-gradient(135deg, #dc2626, #b91c1c); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); border-radius: 0; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit; box-shadow: 0 8px 24px rgba(220,38,38,0.35), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s; }
.watch-demo-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(220,38,38,0.45); color: #fff; }
.watch-demo-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: #58d900; }
.watch-demo-btn .watch-demo-duration { font-size: 11px; font-weight: 600; opacity: 0.85; padding: 2px 8px; background: rgba(255,255,255,0.15); border-radius: 0; }

/* ── Lightbox Modal (opens on hover of any content image) ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  cursor: zoom-out;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-overlay img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 0;
  box-shadow: 0 32px 100px rgba(0,0,0,0.5);
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.lightbox-overlay.active img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(8px);
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ── Image hover behaviour (DISABLED 2026-05-01 per user request) ──
   Images no longer scale on hover. The previous rule (transform:
   scale(1.05) on img:hover with a green-tinted shadow) was site-wide,
   and the user found it noisy on tightly designed sections like the
   Nova Shell hero pair where it pulled focus from the video tile.
   Keeping the base img selector with the transition declaration so a
   future revival of the effect just needs a single transform line on
   img:hover; no other refactor required. The previous exclusion list
   of nav/footer/proof selectors is gone — with the global rule
   neutralised, those exclusions became dead code. */
img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
/* !important added 2026-05-01: pages like src/index.html still ship a
   `main img:hover, section img:hover, ... { transform: scale(1.05) }`
   rule (no !important on the page side) with selector specificity
   (0,1,1). A plain `img:hover` (0,0,1) loses on specificity. !important
   wins regardless. The companion JS killer in shared-lightbox.js
   handles container-level :hover rules where the transform lives on
   a parent class (e.g. .screen-frame:hover) instead of the img. */
img:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Site-wide hover-zoom kill on image containers (2026-05-01) ──
   The bare img:hover rule above only neutralises the GLOBAL site-wide
   img:hover (which existed in shared.css). It does NOT cover the dozen
   page-local rules that target image CONTAINERS (e.g. .screen-frame,
   .gallery-item, .blog-card .blog-thumb-svg). Those live inline in
   95+ HTML files and many use !important on the transform.

   Listing every image-container :hover here with `transform:none
   !important` is a single-edit way to disable hover-zoom site-wide
   without touching each file. It also future-proofs new pages that
   copy these patterns from existing ones.

   Buttons, CTAs, play buttons, close buttons, and small icon
   affordances are NOT in this list — they're click targets, not
   images, and a small hover-scale on a button is expected affordance.

   For .screen-frame specifically the page rule also brightens the
   box-shadow on hover (translateY + scale + bigger green halo). We
   override the box-shadow back to the resting value so the tile is
   completely static on hover. The resting value matches the
   non-hover .screen-frame rule used on the marketing pages
   (see src/product/novashell.html ~line 73). */
/* `body` prefix is intentional and load-bearing: page-local <style>
   blocks are inserted in <head> AFTER shared.css's <link>, so an
   un-prefixed `.screen-frame:hover { transform: none !important }`
   tied with the page's own `.screen-frame:hover { ... !important }`
   loses on source order. `body .screen-frame:hover` has higher
   specificity (0,1,1 vs 0,1,0), so it wins regardless of order.
   Don't drop the body prefix unless you've also moved the page-local
   rules out of <head>. */
body .screen-frame:hover,
body .ivid-wrap:hover .ivid-screen,
body .gallery-item:hover,
body .gallery-item:hover img,
body .blog-card:hover .blog-thumb-svg,
body .compare-card:hover .compare-cover-art,
body .team-card:hover .team-photo img,
body .ig-post-card:hover .ig-img img,
body .og-img-card:hover > img,
body .proof-logo-card:hover .logo-inner,
body .deck-pdf-mock:hover,
body .ai-fleet-frame:hover,
body .feat-dash-frame:hover,
body .clickable-img:hover,
body .sim:hover {
  transform: none !important;
}
body .screen-frame:hover {
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.95),0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

:root {
  --background: #ffffff;
  --white: #ffffff;
  --off-white: #dcfce7;
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0;
  --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b;
  --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b;
  --gray-900: #0f172a;
  --brand: #58d900;
  --brand-light: rgba(88,217,0,0.08);
  /* Green for TEXT sitting on white/light backgrounds (a11y audit 2026-07-24).
     --brand (#58d900) measures 1.85:1 on white — fails WCAG AA (4.5:1 small,
     3:1 large text). Keep #58d900 on dark surfaces (11.3:1 there); use this
     darker green (5.19:1 on white) whenever green TEXT sits on white. For
     display-size accents on white, pages use the darker text-clip gradient
     #3ba800 -> #2d8500 (both stops pass 3:1 large-text AA). */
  --green-on-light: #2e7d00;
  --navy: #0f172a; --navy-light: #1e293b;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 6px rgba(15,23,42,0.05),0 10px 15px rgba(15,23,42,0.08);
  --shadow-lg: 0 10px 25px rgba(15,23,42,0.08),0 20px 48px rgba(15,23,42,0.06);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); color: var(--gray-700); background: #ffffff; overflow-x: hidden; line-height: 1.6; }
a { text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

/* ── NAV (synced from homepage) ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 48px;
  transition: all 0.4s ease;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  border-bottom-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 8px rgba(15,23,42,0.06);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108px;
}

/* Compact, left-aligned desktop nav: logo, then links, then the "Talk to
   Founders" CTA, all grouped on the left with small FIXED gaps; the free space
   sits on the right. Overrides .nav-inner's space-between (which otherwise
   spread the items across the full width — a ~306px logo gap when the CTA was
   clustered right). nav-links margin-left = gap after the logo; nav-actions
   margin-left = gap after Pricing, and its margin-right:auto pushes the empty
   space to the right edge. !important to beat each page's inline head nav CSS.
   Tuned 2026-06-25 per founder (was too spread, then too clustered).
   Harmless on mobile: nav-links is hidden / a full-width column, and
   nav-actions stacks, so the auto margin collapses. */
.nav-links { margin-left: 40px !important; margin-right: 0 !important; }
.nav-actions { margin-left: 32px !important; margin-right: auto !important; }

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  margin-left: 0;
  flex-shrink: 0;
}

.nav-logo-block {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 18px 6px 6px;
  position: relative;
}

.nav-beta-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #000;
  background: #58d900;
  padding: 3px 7px;
  border-radius: 0;
  line-height: 1;
  text-transform: uppercase;
  margin-left: 8px;
  align-self: center;
}

.nav-logo-block:hover {
  border: none;
  box-shadow: none;
}

.nav-logo-block img {
  height: 90px;
  width: auto;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-logo-wordmark {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.nav-beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 0;
  text-transform: uppercase;
  margin-left: 8px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.nav-logo-wordmark em {
  font-style: normal;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.nav-logo-wordmark strong {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #a8ff3e 0%, #58d900 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 16px rgba(88,217,0,0.7));
}

.nav-logo-tagline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #58d900, #a8ff3e, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.75;
}

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

.nav-links a {
  text-decoration: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 0;
  transition: color 0.2s, background-color 0.2s;
}

.nav-links a:hover { color: #ffffff; background-color: #58d900; }

/* A11y tap targets (audit 2026-07-24): top-level nav links measured 56x18px —
   below the WCAG 2.2 24px minimum / 44px recommendation, and ~90% of traffic
   is mobile. Direct-child scope on purpose: dropdown-panel links are flex
   rows with icon + two-line text (already tall) and must keep their own
   display value. The taller hit area is invisible in the bar because the
   flex row centers items. */
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
}

/* Footer column links (same audit): measured ~18px tall and as narrow as
   20px ("CLI"). Padding + negative horizontal margin grows the hit area to
   ~28px tall without shifting the rendered column layout. !important because
   each page's inlined footer <style> block loads after this sheet. This rule
   deliberately lives HERE next to the nav rule: rules appended at the end of
   this file did not reach the browser (late-file parse issue, untraced), and
   this position is proven to parse. */
footer.footer .ftv5-col a {
  padding: 5px 6px !important;
  margin: 0 -6px !important;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6aea00 0%, #58d900 60%, #3fb800 100%);
  color: #ffffff !important;
  border-radius: 0;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none;
  transition: box-shadow 0.25s, transform 0.2s, filter 0.2s;
}

.nav-cta:hover{filter: none;transform: none;box-shadow: none;}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(88,217,0,0.1);
  border: 1px solid rgba(88,217,0,0.25);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.25s;
  color: #58d900;
  box-shadow: none;
}

.nav-icon-btn:hover {
  background: rgba(88,217,0,0.2);
  border-color: rgba(88,217,0,0.5);
  color: #6aea00;
  box-shadow: none;
  transform: translateY(-1px);
}

.nav-icon-btn svg { stroke: currentColor; }

.nav-btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: rgba(88,217,0,0.12);
  color: #58d900 !important;
  border: 1px solid rgba(88,217,0,0.35);
  border-radius: 0;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.nav-btn-demo:hover {
  background: rgba(88,217,0,0.22);
  transform: translateY(-1px);
  box-shadow: none;
}

.nav-item-dropdown {
  position: relative;
}

.nav-item-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-item-dropdown > a .chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
  opacity: 0.7;
}

.nav-item-dropdown:hover > a .chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0a0a0a;
  /* Founder request 2026-06-13: every nav mega-dropdown (Product / Solutions /
     Platform / Compare) carries a clearly brand-green edge instead of the old
     faint rgba(88,217,0,0.15) border. Solid #58d900 border + a crisp green
     ring + a soft green halo on top of the existing depth shadow. The mobile
     accordion rule (.nav-links.open .nav-item-dropdown.mobile-open
     .nav-dropdown, specificity 0,5,0) sets border:none / box-shadow:none and
     outranks this base rule, so the green edge is desktop-only by design. */
  border: 1px solid #58d900;
  border-radius: 0;
  padding: 20px;
  min-width: 560px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(88,217,0,0.55);
  z-index: 2000;
  gap: 8px;
}

/* Product dropdown was shrunk to a single column on 2026-05-14 (lifecycle
   nav: Monitor / Detect / Investigate / Respond / Automate / Integrations).
   Lives in shared.css so every page picks up the tight 320-380px panel,
   including pages that don't carry the inline minified rule. Without this,
   pages without the inline override fell back to the .nav-dropdown
   min-width 560px and left ~200px of empty horizontal space inside the
   panel. max-width caps it so future longer labels can't blow it back out. */
.nav-dropdown.product-dd {
  grid-template-columns: 1fr;
  min-width: 320px;
  max-width: 380px;
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -20px;
  right: -20px;
  height: 10px;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown.dd-open .nav-dropdown {
  display: grid;
}

.nav-dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid rgba(88,217,0,0.1);
  padding-right: 8px;
}

.nav-dropdown-col:last-child {
  border-right: none;
  padding-right: 0;
}

.nav-dropdown-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(88,217,0,0.7);
  padding: 6px 12px 8px;
  border-bottom: 1px solid rgba(88,217,0,0.1);
  margin-bottom: 6px;
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 0;
  text-decoration: none;
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  background: transparent;
  transition: background 0.15s, color 0.15s;
  border-bottom: 1px solid rgba(88,217,0,0.06);
}

.nav-dropdown a:last-child {
  border-bottom: none;
}

.nav-dropdown a:hover {
  background: rgba(88,217,0,0.08);
  color: #ffffff !important;
}

.nav-dropdown a .dd-icon {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: rgba(88,217,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.nav-dropdown a .dd-text strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.nav-dropdown a .dd-text span {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
}

/* Legacy 3-column override neutralised on 2026-05-14 when the 19-link
   product mega-menu became a 5-bucket single-column lifecycle nav. The
   sibling rule above (`.nav-dropdown.product-dd { grid-template-columns:
   1fr; min-width: 320px; ... }`) is the live one. Keeping this stub here
   instead of deleting so the line numbers cited in the comment above
   stay meaningful in `git blame`. */
.nav-dropdown.product-dd {
  /* intentionally empty — superseded by sibling 5-bucket rule */
}

/* Platform dropdown collapsed 2026-05-14 from a 6-column 28-link mega-menu
   to a 1-column 6-subfolder list. The deeper 28 features remain at their
   /platform/<subfolder>/<feature> URLs and are reachable from the lifecycle
   bucket pages. */
.nav-dropdown.platform-dd {
  grid-template-columns: 1fr;
  min-width: 340px;
  max-width: 400px;
}

/* Solutions dropdown collapsed 2026-05-14 from a 3-column 9-item mega-menu
   (Industry / Role / Technology) to a 1-column 7-page list. Kubernetes and
   OpenTelemetry were dropped from the nav because they're integrations, not
   buyer-segment solutions. */
.nav-dropdown.solutions-dd {
  grid-template-columns: 1fr;
  min-width: 340px;
  max-width: 400px;
  /* Green edge now lives on the base .nav-dropdown rule (2026-06-13) so all
     four dropdowns share it; this rule only sets the single-column layout. */
}

.nav-dropdown.compare-dd {
  grid-template-columns: 1fr 1fr;
  min-width: 400px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1100;
  position: relative;
  /* 44x44 (was 36x36) — WCAG 2.2 target size, audit 2026-07-24. The three
     22px hamburger bars stay centered via the flex rule further down. */
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  margin: 5px auto;
  transition: transform 0.3s ease, opacity 0.2s ease;
  border-radius: 0;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.nav-open { overflow: hidden; }

@keyframes navSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mobileAccordion {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 800px; }
}

@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 12px; padding: 5px 10px; letter-spacing: 0.04em; }
  .nav { padding: 0 20px; }
  .nav-inner { height: 88px; }
  .nav-logo { margin-left: 0; }
  .nav-logo-block img { height: 72px; }
  .nav-logo-wordmark em,
  .nav-logo-wordmark strong { font-size: 32px; }
  .nav-cta { padding: 8px 16px; font-size: 11px; }
  .nav-btn-demo { font-size: 12px; }
  .nav-icon-btn { width: 34px; height: 34px; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-actions { gap: 8px; }
  .nav-btn-demo { padding: 8px 14px; font-size: 11px; }
  .nav-inner { height: 72px; }
  .nav-logo-block img { height: 56px; }
  .nav-logo-wordmark em,
    .nav-logo-wordmark strong { font-size: 28px; }
  .nav-logo { margin-left: 0; }
  .nav-links.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(5,5,10,0.98);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 90px 24px 32px;
      gap: 0;
      z-index: 1050;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      animation: navSlideIn 0.3s ease forwards;
    }
  .nav-links.open > li {
      border-bottom: 1px solid rgba(88,217,0,0.08);
    }
  .nav-links.open > li > a {
      display: block;
      font-size: 16px;
      font-weight: 600;
      padding: 16px 0;
      color: #ffffff !important;
      background: transparent !important;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
  .nav-links.open .nav-item-dropdown > a {
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  .nav-links.open .nav-item-dropdown > a .chevron {
      display: block;
      width: 16px;
      height: 16px;
      opacity: 0.5;
      transition: transform 0.3s ease;
      stroke: #58d900;
    }
  .nav-links.open .nav-item-dropdown.mobile-open > a .chevron {
      transform: rotate(180deg);
      opacity: 1;
    }
  .nav-links.open .nav-dropdown {
      display: none !important;
    }
  .nav-links.open .nav-item-dropdown.mobile-open .nav-dropdown {
      display: flex !important;
      position: static;
      transform: none;
      background: rgba(88,217,0,0.04);
      border: none;
      border-radius: 0;
      padding: 8px 0;
      min-width: unset;
      box-shadow: none;
      flex-direction: column;
      gap: 0;
      margin-bottom: 8px;
      animation: mobileAccordion 0.25s ease forwards;
    }
  .nav-links.open .nav-dropdown::before { display: none; }
  .nav-links.open .nav-dropdown-col {
      border-right: none;
      padding-right: 0;
      border-bottom: 1px solid rgba(88,217,0,0.06);
      padding-bottom: 4px;
      margin-bottom: 4px;
    }
  .nav-links.open .nav-dropdown-col:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
  .nav-links.open .nav-dropdown a {
      padding: 10px 16px;
      font-size: 14px;
      border-bottom: none;
    }
  .nav-links.open .nav-dropdown a .dd-icon {
      width: 26px;
      height: 26px;
      border-radius: 0;
    }
  .nav-links.open .nav-dropdown a .dd-text strong {
      font-size: 13px;
    }
  .nav-links.open .nav-dropdown a .dd-text span {
      font-size: 10px;
    }
  .nav-links.open .nav-dropdown-heading {
      font-size: 9px;
      padding: 8px 16px 6px;
      color: rgba(88,217,0,0.6);
    }
  .nav-links.open::after {
      content: '';
      display: block;
      flex-shrink: 0;
      height: 80px;
    }
}

@media (max-width: 480px) {
  .nav { padding: 0 12px; }
  .nav-inner { height: 60px; }
  .nav-logo-block img { height: 40px; }
  .nav-logo-wordmark em,
    .nav-logo-wordmark strong { font-size: 22px; }
  /* Compact nav CTA for small phones: the full "Get Started Free"
     string is ~21 chars and overflows the ~110px column between
     "Sign in" and the right edge at 390px viewport. Hide the body
     text + inline arrow with font-size:0 and render an abbreviated
     "Try Nova" via ::before so the conversion affordance stays
     visible without truncation. The full price-anchored copy reads
     above 480px on tablet, laptop, and desktop. */
  .nav-cta { padding: 7px 14px; font-size: 0; gap: 0; }
  .nav-cta::before { content: "Try Nova"; font-size: 11px; font-weight: 700; letter-spacing: 0; }
  .nav-cta svg { display: none; }
  .nav-btn-demo { padding: 6px 12px; font-size: 10px; }
  .nav-btn-demo svg { display: none; }
  .nav-links.open { padding: 70px 16px 24px; }
}

@media (max-width: 360px) {
  .nav-cta { display: none; }
}

@media (min-width: 901px) {
  .nav-item-dropdown > a .chevron { display: inline-block; }
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; background: #58d900; color: #000; border: none; border-radius: 0;
  font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer; letter-spacing: 0.01em;
  transition: transform 0.2s, filter 0.2s;
  box-shadow: 0 0 0 1px rgba(88,217,0,0.4);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; background: transparent; color: var(--gray-700); border: 1px solid var(--gray-300); border-radius: 0;
  font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer; letter-spacing: 0.01em;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-secondary:hover { border-color: var(--gray-900); color: var(--gray-900); transform: translateY(-1px); }

/* ── PRODUCT PAGE HERO ── */
.page-hero {
  padding: 120px 32px 80px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse, rgba(88,217,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 8px; border-radius: 0;
  background: rgba(88,217,0,0.1); border: 1px solid rgba(88,217,0,0.25);
  font-size: 12px; font-weight: 700; color: #58d900; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #58d900; animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* max-width was 820px. Page heroes are authored as one or two deliberate
   lines (often with an explicit <br>), but at up to 64px the 820px cap made
   EACH of those lines wrap again, so a hero written as two rows rendered as
   three or four. min(1240px,100%) lets each authored line hold one row while
   staying inside the viewport; the type still scales down with the viewport
   faster than the text does, so narrow screens wrap normally. */
.page-hero h1 { font-size: clamp(38px,5vw,64px); font-weight: 800; color: #fff; line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 20px; max-width: min(1240px, 100%); margin-left: auto; margin-right: auto; }
.page-hero h1 em { font-style: normal; background: linear-gradient(135deg,#58d900,#a8ff3e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-hero p { font-size: 18px; color: rgba(255,255,255,0.6); max-width: 640px; margin: 0 auto 40px; line-height: 1.7; }
.page-hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 60px; }

/* Hero screenshot */
.hero-screen-wrap { max-width: 1100px; margin: 0 auto; position: relative; }
.screen-frame {
  border-radius: 0; overflow: hidden;
  border: 1px solid rgba(88,217,0,0.2);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5),0 32px 80px rgba(0,0,0,0.6);
  background: #0a0a0f;
}
.screen-chrome {
  background: #111118; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chrome-dots { display: flex; gap: 6px; }
.chrome-dots span { width: 11px; height: 11px; border-radius: 50%; }
.chrome-dots span:nth-child(1) { background: #ef4444; }
.chrome-dots span:nth-child(2) { background: #eab308; }
.chrome-dots span:nth-child(3) { background: #22c55e; }
.chrome-url { flex: 1; text-align: center; font-size: 12px; color: rgba(255,255,255,0.3); }
.chrome-badge { font-size: 11px; color: #22c55e; font-weight: 600; }
.screen-frame img { width: 100%; display: block; object-fit: cover; }

/* ── STATS BAR ── */
.stats-bar {
  background: #fff; border-top: 1px solid #e8f5e9; border-bottom: 1px solid #e8f5e9;
  padding: 48px 32px;
}
.stats-bar-inner { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.stat-item { text-align: center; padding: 16px 40px; border-right: 1px solid var(--gray-200); }
.stat-item:last-child { border-right: none; }
.stat-num { font-size: 42px; font-weight: 800; color: var(--gray-900); line-height: 1; letter-spacing: -0.03em; }
.stat-num span { color: #58d900; }
.stat-label { font-size: 13px; color: var(--gray-500); font-weight: 500; margin-top: 4px; }

/* ── FEATURE SECTIONS ── */
.feature-section { padding: 100px 32px; }
.feature-section:nth-child(even) { background: #f8fffe; }
.feature-section:nth-child(odd) { background: #fff; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #58d900; margin-bottom: 12px; }
.feature-row h2 { font-size: clamp(26px,3vw,38px); font-weight: 800; color: var(--gray-900); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 16px; }
.feature-row p { font-size: 16px; color: var(--gray-500); line-height: 1.75; margin-bottom: 28px; }
.feature-bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.feature-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--gray-600); line-height: 1.5; }
.bullet-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(88,217,0,0.12); border: 1px solid rgba(88,217,0,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; color: #58d900; font-size: 11px; font-weight: 700; }
.feature-bullets li strong { color: var(--gray-800); }

/* ONE-ROW SECTION HEADINGS (2026-07-22, founder request: "put the texts that
   are in 2 rows to one if they can be in one").

   178 pages carry a copy of the `#nova-page-clean` block, which collapses
   .feature-row to a single centred column capped at 780px so the body
   paragraph keeps a readable measure. The section heading inherits that 780px
   and wraps onto a second row on ~44 pages, purely because the column is
   narrow: the headings themselves need 790-1240px on one line. The paragraph
   still wants its 780px measure, so the fix belongs on the heading alone.

   width:max-content sizes the heading box to its text, and margin-left:50% +
   translateX(-50%) re-centres a box that is WIDER than its containing block
   (plain `margin:auto` cannot: when width exceeds the container the auto
   margins collapse to 0 and the box overhangs to the right). max-width:92vw
   keeps it inside the section's 24-32px padding at every width, so a long
   heading can never push the page into horizontal scroll; anything longer than
   that just wraps as before.

   Scoped with `> .feature-text:only-child` so it applies ONLY to the collapsed
   single-column layout. Pages that still run the original two-column
   .feature-row (text + visual, e.g. the homepage) have a second child, so the
   selector does not match and the heading cannot overhang into the visual.
   Gated at >=1000px because below that the row is full-bleed and already
   correct. */
@media (min-width: 1000px) {
  /* .feature-text is a GRID ITEM, and a grid item's default `min-width:auto`
     makes its track grow to the item's min-content size. Without this line the
     max-content heading below drags the whole column out to its own width, so
     the heading's containing block widens with it, the 50% offset is computed
     against that inflated width, and the "centring" cancels out to a plain
     left-aligned overhang. Pinning min-width:0 keeps the column at its 780px
     cap so the heading overhangs a stable, centred box. */
  .feature-row > .feature-text:only-child { min-width: 0; }
  .feature-row > .feature-text:only-child h2 {
    width: max-content;
    max-width: 92vw;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }

  /* Same request, same cause, other page templates: a display heading inheriting
     a text-column cap that is narrower than the heading needs, so it broke onto
     a second row. Two treatments, because the two groups are anchored
     differently and must not be nudged sideways:

     (a) LEFT-ALIGNED headings keep their left edge exactly where it is and grow
         to the right. Their containers are all centred and fixed-width, so the
         room to the right edge is `50vw + (containerWidth/2 - padding - gutter)`
         -- a constant per container, measured and baked in below. That keeps a
         long heading from ever reaching the viewport edge.

     (b) CENTRED headings grow in both directions and are re-centred with the
         50%/-50% pair, capped at 92vw like the section headings above.

     Anything still too long for the room available simply wraps as it does
     today. Body copy is deliberately excluded: legal and article prose keeps
     its narrow measure, where a second row is correct, not a defect. */
  .uc-h1            { width: max-content; max-width: calc(50vw + 406px); }
  .guide-container > h1 { width: max-content; max-width: calc(50vw + 299px); }
  .support-heading  { width: max-content; max-width: calc(50vw + 336px); }

  .asre-header h1,
  .policy-hero h1 {
    width: max-content;
    max-width: 92vw;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }

  /* .csc-cta-headline (pricing) gets the symmetric-negative-margin treatment
     instead: it runs a `csc-cta-up` entrance animation whose final keyframe
     sets `transform: translateY(0)`, which would overwrite a centring
     translateX and drop the heading half its width to the right. Negative
     margins are untouched by that animation. Its container is 720px wide with
     ~336px of room on each side, so 90px of overhang stays well clear of the
     viewport edge at every width this media query covers. */
  /* Selector is deliberately .csc-cta-inner .csc-cta-headline, not the bare
     class: pricing.html sets `margin: 0 0 18px` on .csc-cta-headline in a
     page-level <style> that loads AFTER this file, so an equal-specificity
     rule here would lose the cascade and the overhang would silently do
     nothing (it did). The extra class outranks it without needing !important. */
  .csc-cta-inner .csc-cta-headline { margin-left: -90px; margin-right: -90px; }

  /* Article headings in the .asre-body template (guides and the long-form
     marketing pages, e.g. "The RED method, golden signals, and the dependency
     graph" on /microservices-monitoring). Left-aligned inside the 880px
     .asre-wrap, so same treatment as (a): hold the left edge, grow right.
     .asre-wrap is centred, leaving 50vw + 408px of room before the gutter.
     The 44px green rule drawn by .asre-body h2::before is a fixed-width
     block, so widening the heading box does not stretch it. */
  .asre-body > h2 { width: max-content; max-width: calc(50vw + 408px); }
}

/* Docs pages run a fixed 280px sidebar, applied as `padding-left` on <body> at
   >=1101px, so their content column is centred on the REMAINING width, not on
   the viewport. A 92vw heading centred there would hang off the right edge (it
   did: /docs/agent-autonomy overflowed by 5px at 1440). Re-cap to the width
   the shifted column actually has, minus its section padding. */
@media (min-width: 1101px) {
  .docs-page-shifted .feature-row > .feature-text:only-child h2 {
    max-width: calc(100vw - 360px);
  }
}

/* Feature screenshot */
.feat-screen { position: relative; }
.feat-screen .screen-frame img { max-height: 380px; object-fit: cover; object-position: top; }

/* ── RELATED PRODUCTS ── */
.related-section { padding: 80px 32px; background: var(--navy); }
.related-section h3 { text-align: center; font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 40px; }
.related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.related-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0; padding: 20px; transition: border-color 0.2s, background 0.2s; }
.related-card:hover { border-color: rgba(88,217,0,0.3); background: rgba(88,217,0,0.04); }
.related-card a { text-decoration: none; display: block; }
.related-icon { font-size: 24px; margin-bottom: 10px; }
.related-card h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.related-card p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* ── PAGE CTA BANNER ── */
.page-cta { padding: 100px 32px; background: #f0fdf4; text-align: center; }
.page-cta h2 { font-size: clamp(28px,3.5vw,44px); font-weight: 800; color: var(--gray-900); letter-spacing: -0.03em; margin-bottom: 16px; }
/* max-width was 520px, which broke the one-line CTA support copy ("100+
   specialized agents. Ready in minutes, no model training, no configuration
   required.") onto a second row on 14+ pages. These lines are written as a
   single beat under the CTA headline, and the longest of them needs 806px, so
   820px puts every one of them back on one row. Still a cap, so anything
   genuinely longer wraps as before. */
.page-cta p { font-size: 17px; color: var(--gray-500); max-width: 820px; margin: 0 auto 36px; line-height: 1.7; }
.page-cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── FOOTER (Premium Multi-Variant with footer.png) ── */
.footer { background: #0f172a; padding: 0; position: relative; overflow: hidden; }
.footer-col h5 { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #58d900; margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid rgba(88,217,0,0.2); position: relative; }
.footer-col h5::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 24px; height: 2px; background: #58d900; border-radius: 0; }
.footer-col a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.65); text-decoration: none; padding: 7px 0; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); font-weight: 500; }
.footer-col a::before { content: '→'; color: #58d900; opacity: 0; transform: translateX(-8px); transition: all 0.25s cubic-bezier(0.4,0,0.2,1); font-weight: 700; font-size: 13px; }
.footer-col a:hover { color: #fff; transform: translateX(4px); }
.footer-col a:hover::before { opacity: 1; transform: translateX(0); }
.footer-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: #58d900; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.footer-eyebrow::before { content: ''; width: 24px; height: 2px; background: #58d900; border-radius: 0; }
.footer-headline { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 26px; font-weight: 900; color: #fff; margin: 0 0 28px; line-height: 1.2; letter-spacing: -0.02em; }
.footer-headline span { color: #58d900; }
.footer-bottom { background: #0a0a0a; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 3px solid #58d900; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; }

/* ── VARIANT 1: IMAGE LEFT HALF (Solutions pages) ── */
.footer.variant-left .footer-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; gap: 0; }
.footer.variant-left .footer-img { background: #000; border-right: 4px solid #58d900; position: relative; overflow: hidden; }
.footer.variant-left .footer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer.variant-left .footer-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(15,23,42,0.5) 100%); }
.footer.variant-left .footer-content { padding: 72px 56px; display: flex; flex-direction: column; gap: 40px; background: radial-gradient(ellipse at top right, rgba(88,217,0,0.08) 0%, transparent 60%), #0f172a; }
.footer.variant-left .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* ── VARIANT 2: IMAGE RIGHT HALF (Product pages) ── */
.footer.variant-right .footer-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; gap: 0; }
.footer.variant-right .footer-img { background: #000; border-left: 4px solid #58d900; position: relative; overflow: hidden; order: 2; }
.footer.variant-right .footer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer.variant-right .footer-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 70%, rgba(15,23,42,0.5) 100%); }
.footer.variant-right .footer-content { padding: 72px 56px; display: flex; flex-direction: column; gap: 40px; background: radial-gradient(ellipse at top left, rgba(88,217,0,0.08) 0%, transparent 60%), #0f172a; }
.footer.variant-right .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* ── VARIANT 3: TOP BANNER (Platform pages) ── */
.footer.variant-banner .footer-banner-top { position: relative; width: 100%; height: 260px; overflow: hidden; background: #000; border-bottom: 4px solid #58d900; box-shadow: none; }
.footer.variant-banner .footer-banner-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer.variant-banner .footer-banner-top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%); }
.footer.variant-banner .footer-banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; padding: 0 24px; }
.footer.variant-banner .footer-banner-title { font-size: clamp(22px, 3.5vw, 36px); font-weight: 900; color: #fff; margin: 0 0 10px; text-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 40px rgba(88,217,0,0.3); letter-spacing: -0.02em; }
.footer.variant-banner .footer-banner-sub { color: rgba(255,255,255,0.85); font-size: 14px; margin: 0; font-weight: 500; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.footer.variant-banner .footer-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; }
.footer.variant-banner .footer-intro .footer-headline { font-size: 22px; max-width: 320px; }

/* ── VARIANT 4: CIRCULAR BADGE (Compare pages) ── */
.footer.variant-badge .footer-inner { max-width: 1200px; margin: 0 auto; padding: 72px 32px; display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: start; }
.footer.variant-badge .footer-img { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 4px solid #58d900; box-shadow: 0 0 0 1px rgba(88,217,0,0.2); position: relative; flex-shrink: 0; }
.footer.variant-badge .footer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer.variant-badge .footer-content { display: flex; flex-direction: column; gap: 32px; }
.footer.variant-badge .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* ── VARIANT 5: BACKGROUND OVERLAY (Docs pages) ── */
.footer.variant-bg { position: relative; }
.footer.variant-bg .footer-bg-img { position: absolute; inset: 0; z-index: 0; }
.footer.variant-bg .footer-bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.25; }
.footer.variant-bg .footer-bg-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.95) 50%, #0f172a 100%); }
.footer.variant-bg .footer-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 80px 32px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; }
.footer.variant-bg .footer-intro { max-width: 360px; }

/* ── Responsive for all variants ── */
@media (max-width: 900px) {
  .footer.variant-left .footer-inner,
  .footer.variant-right .footer-inner { grid-template-columns: 1fr; min-height: auto; }
  .footer.variant-left .footer-img,
  .footer.variant-right .footer-img { border-right: none; border-left: none; border-bottom: 4px solid #58d900; order: 0; }
  .footer.variant-left .footer-img img,
  .footer.variant-right .footer-img img { height: 240px; }
  .footer.variant-left .footer-content,
  .footer.variant-right .footer-content { padding: 48px 24px; }
  .footer.variant-left .footer-cols,
  .footer.variant-right .footer-cols,
  .footer.variant-badge .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer.variant-banner .footer-inner,
  .footer.variant-bg .footer-inner { grid-template-columns: 1fr; padding: 48px 24px; }
  .footer.variant-badge .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer.variant-badge .footer-img { width: 180px; height: 180px; }
}

/* ── SOLUTION HERO (green tint) ── */
.solution-hero { background: linear-gradient(135deg, var(--navy) 0%, #0a1f0a 100%); }
.solution-hero::before { background: radial-gradient(ellipse, rgba(88,217,0,0.12) 0%, transparent 70%); }

/* ── RESPONSIVE ── */

/* Tablets & small laptops */
@media (max-width: 1024px) {
  .page-hero { padding: 110px 24px 64px; }
  .feature-row { gap: 48px; }
  .feature-row .feature-bullets li { font-size: 13px; }
  .related-section { padding: 64px 24px; }
  .page-cta { padding: 72px 24px; }
  .container-lg { padding: 0 24px; }
  .stats-bar { padding: 36px 24px; }
  .stat-item { padding: 14px 28px; }
  .hero-screen-wrap { max-width: 100%; }
  .feat-screen .screen-frame img { max-height: 320px; }
}

@media (max-width: 900px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 40px; direction: ltr; }
  .feature-section { padding: 72px 24px; }
  .stats-bar-inner { gap: 0; flex-direction: column; }
  .stat-item { padding: 16px 24px; border-right: none; border-bottom: 1px solid var(--gray-200); }
  .stat-item:last-child { border-bottom: none; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .page-hero-actions { flex-direction: column; align-items: center; }
  .page-hero-actions .btn-primary,
  .page-hero-actions .btn-secondary { width: 100%; max-width: 320px; justify-content: center; }
}

/* Large phones */
@media (max-width: 680px) {
  .page-hero { padding: 100px 18px 56px; }
  .page-hero h1 { font-size: clamp(28px, 7vw, 38px); }
  .page-hero p { font-size: 15px; }
  .feature-section { padding: 56px 18px; }
  .feature-row { gap: 28px; }
  .feature-row h2 { font-size: clamp(24px, 6vw, 32px); }
  .feature-row p { font-size: 14px; }
  .related-section h3 { font-size: 22px; }
  .related-grid { grid-template-columns: 1fr; }
  .page-cta h2 { font-size: clamp(24px, 6vw, 34px); }
  .page-cta p { font-size: 15px; }
  .stats-bar { padding: 32px 16px; }
  .stat-num { font-size: 32px; }
  .screen-chrome { padding: 8px 12px; gap: 10px; }
  .chrome-dots span { width: 9px; height: 9px; }
  .chrome-url { font-size: 10px; }
}

@media (max-width: 560px) {
  .page-hero { padding: 96px 16px 48px; }
  .page-hero h1 { font-size: clamp(26px, 6.5vw, 32px); }
  .feature-section { padding: 48px 16px; }
  .feature-row { gap: 24px; }
  .related-section { padding: 56px 16px; }
  .page-cta { padding: 56px 16px; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { overflow-x: hidden; }
  .nav { padding: 0 16px; }
  .nav-inner { height: 60px; }
  .nav-logo-block img { height: 42px; }
  .nav-cta { padding: 8px 14px; font-size: 11px; }
  .nav-btn-demo { padding: 6px 10px; font-size: 10px; }
  .nav-btn-demo svg { display: none; }
  .btn-primary { padding: 12px 24px; font-size: 14px; }
  .btn-secondary { padding: 11px 22px; font-size: 14px; }
  .page-hero { padding: 90px 14px 40px; }
  .page-hero h1 { font-size: 24px; }
  .page-hero p { font-size: 13px; }
  .container { padding: 0 14px; }
  .container-lg { padding: 0 14px; }
  .nav-icon-btn { width: 32px; height: 32px; }
  .feature-section { padding: 40px 14px; }
  .related-card { padding: 16px; }
  .related-card h4 { font-size: 14px; }
  .related-card p { font-size: 12px; }
  .page-cta { padding: 48px 14px; }
  .stat-num { font-size: 28px; }
  .stat-label { font-size: 11px; }

  /* Footer variants mobile */
  .footer.variant-left .footer-cols,
  .footer.variant-right .footer-cols,
  .footer.variant-badge .footer-cols,
  .footer.variant-banner .footer-inner,
  .footer.variant-bg .footer-inner { gap: 24px; }
  .footer-col a { font-size: 13px; padding: 5px 0; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; padding: 16px 16px; }
}

/* Small phones */
@media (max-width: 360px) {
  .nav-cta { display: none; }
  .page-hero h1 { font-size: 22px; }
  .page-hero p { font-size: 12px; }
  .btn-primary { padding: 10px 18px; font-size: 13px; }
  .btn-secondary { padding: 9px 16px; font-size: 13px; }
  .feature-row h2 { font-size: 22px; }
}

/* ── Cookie Consent Banner ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: #0f172a; border-top: 1px solid #E3E6E9;
  padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
  transform: translateY(100%); transition: transform 0.4s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; flex: 1; }
.cookie-banner p a { color: #15803d; text-decoration: underline; }
.cookie-banner-btns { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn-accept { padding: 8px 20px; background: #58d900; color: #000; border: none; border-radius: 0; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cookie-btn-decline { padding: 8px 20px; background: transparent; color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.12); border-radius: 0; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; padding: 16px 20px; gap: 12px; }
  .cookie-banner-btns { width: 100%; }
  .cookie-btn-accept, .cookie-btn-decline { flex: 1; }
}

/* ── Reading Progress Bar ── */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 10001;
  background: linear-gradient(90deg, #58d900, #6aea00);
  width: 0%; transition: width 0.1s linear;
  box-shadow: none;
}

/* ── Share Buttons ── */
.share-bar { display: flex; align-items: center; gap: 10px; margin: 24px 0; padding: 16px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.share-bar-label { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: all 0.2s; color: #64748b; }
.share-btn:hover { border-color: rgba(88,217,0,0.4); background: rgba(88,217,0,0.05); color: #58d900; }
.share-btn svg { width: 16px; height: 16px; }
.share-btn-copy { padding: 6px 14px; width: auto; font-size: 11px; font-weight: 600; gap: 6px; font-family: inherit; }

/* ── Footer "Talk to the founder" CTA (sits under the footer headline) ── */
.hf-founder-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 22px; border-radius: 0; background: linear-gradient(135deg, #9fe870, #58d900 50%, #3ba800); color: #04140a !important; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset; transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease; align-self: flex-start; max-width: fit-content; }
.hf-founder-cta::before { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: skewX(-18deg); pointer-events: none; animation: hf-cta-shine 4.5s ease-in-out 1.2s infinite; }
@keyframes hf-cta-shine { 0% { left: -60%; } 40%, 100% { left: 140%; } }
.hf-founder-cta svg { width: 14px; height: 14px; }
.hf-founder-cta .arrow { transition: transform 0.3s ease; }
.hf-founder-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset; }
.hf-founder-cta:hover .arrow { transform: translateX(3px); }

/* ═══════════════ Compare-page cost breakdown visual ═══════════════ */
.inv-grid { display:grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin: 0 auto; max-width: 1180px; }
.inv-card { position: relative; background: linear-gradient(180deg,#ffffff,#f8fafc); border-radius: 0; padding: 32px 30px 28px; box-shadow: 0 30px 80px -30px rgba(15,23,42,0.35), 0 0 0 1px rgba(15,23,42,0.06); display: flex; flex-direction: column; overflow: hidden; color: #0f172a; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.inv-card::before { content: ''; position: absolute; top:0; left:0; right:0; height: 6px; }
.inv-card-dd::before { background: linear-gradient(90deg,#ef4444,#f87171); }
.inv-card-nova::before { background: #15803d; }
.inv-card-nova { box-shadow: 0 0 0 1px rgba(15,23,42,0.10); }
.inv-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed rgba(15,23,42,0.15); }
.inv-head-left { display:flex; align-items:center; gap:14px; }
.inv-biz { font-size: 16px; font-weight: 900; color:#0f172a; letter-spacing:-0.01em; font-family: system-ui, -apple-system, sans-serif; }
.inv-meta { font-size: 11px; color: #64748b; letter-spacing: 0.06em; margin-top: 3px; text-transform: uppercase; font-family: system-ui, -apple-system, sans-serif; font-weight: 700; }
.inv-lines { display:flex; flex-direction:column; gap: 4px; flex: 1; }
.inv-line { display:grid; grid-template-columns: 1.6fr 1fr auto; gap: 10px; align-items:center; padding: 10px 2px; border-bottom: 1px dotted rgba(15,23,42,0.1); font-size: 12px; }
.inv-line:last-child { border-bottom: none; }
.inv-name { color:#0f172a; font-weight:700; font-family: system-ui, -apple-system, sans-serif; }
.inv-name em { color:#ef4444; font-style:normal; font-weight:600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.inv-calc { color:#64748b; font-size: 11px; text-align: right; }
.inv-amt { color:#0f172a; font-weight:900; font-size: 13px; text-align: right; min-width: 62px; }
.inv-line-alien { background: rgba(239,68,68,0.06); margin: 6px -8px 0; padding: 12px 10px; border-radius: 0; border: 1px dashed rgba(239,68,68,0.4); border-bottom:1px dashed rgba(239,68,68,0.4); }
.inv-line-hero { grid-template-columns: 1fr auto auto; padding: 18px 14px; background: #f8faf6; border-radius: 0; border: 1px solid rgba(15,23,42,0.10); margin-bottom: 14px; border-bottom: 1px solid rgba(88,217,0,0.3); }
.inv-line-hero .inv-name { font-size: 14px; }
.inv-line-hero .inv-amt { font-size: 18px; color:#166534; }
.inv-pill { display:inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 0; background: #15803d; color:#ffffff; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.inv-included { list-style:none; margin:0; padding: 0 2px; display:grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-family: system-ui, -apple-system, sans-serif; }
.inv-included li { font-size: 11px; color:#334155; padding-left: 16px; position: relative; }
.inv-included li::before { content: '\2713'; position:absolute; left:0; top:0; color:#15803d; font-weight:900; }
.inv-total { display:flex; justify-content:space-between; align-items:baseline; margin-top: 22px; padding-top: 18px; border-top: 2px solid #0f172a; font-family: system-ui, -apple-system, sans-serif; }
.inv-total span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; }
.inv-total strong { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.inv-total-red strong { color:#ef4444; }
.inv-total-green strong { color:#16a34a; }
.inv-foot { margin-top: 14px; font-size: 11px; color:#64748b; font-family: system-ui, -apple-system, sans-serif; text-align:center; font-style: italic; }
.inv-vs { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.inv-vs-line { flex:1; width: 2px; background: rgba(15,23,42,0.12); }
.inv-vs-chip { width:58px; height:58px; border-radius:50%; background:#0f172a; color:#ffffff; font-size:18px; font-weight:900; font-style: italic; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 2px rgba(88,217,0,0.4); letter-spacing:-0.02em; }
.inv-savings { margin: 40px auto 0; max-width: 1180px; background: linear-gradient(135deg, #0f172a, #064e3b); border-radius: 0; padding: 28px 36px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; box-shadow: none; border: 1px solid rgba(88,217,0,0.3); }
.inv-savings-row { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.inv-savings-label { font-size: 10px; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.14em; font-weight:800; margin-bottom:6px; }
.inv-savings-big { font-size: 32px; font-weight: 900; color:#fff; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }
.inv-savings-sep { width: 1px; height: 44px; background: rgba(255,255,255,0.12); }
.inv-savings-cta { display:inline-flex; align-items:center; padding: 14px 28px; background: #15803d; color:#ffffff; text-decoration:none; border-radius: 0; font-weight: 900; font-size: 14px; box-shadow: none; transition: transform 0.2s ease; }
.inv-savings-cta:hover { transform: translateY(-2px); }
.inv-disclaimer { max-width: 1180px; margin: 22px auto 0; font-size: 11px; color: #64748b; line-height: 1.6; text-align: center; font-style: italic; padding: 0 8px; }
@media (max-width: 960px) { .inv-grid { grid-template-columns: 1fr; gap: 18px; } .inv-vs { flex-direction: row; padding: 4px 0; } .inv-vs-line { width: auto; height: 2px; background: rgba(15,23,42,0.12); } .inv-included { grid-template-columns: 1fr; } .inv-savings { padding: 24px 22px; } .inv-savings-row { gap: 20px; justify-content: space-around; width: 100%; } .inv-savings-big { font-size: 26px; } }
@media (max-width: 520px) { .inv-card { padding: 24px 20px 22px; } .inv-line { grid-template-columns: 1fr auto; } .inv-calc { grid-column: 1 / -1; text-align: left; } .inv-savings-sep { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
 * Universal sim panel animations (paired with /shared-sim-anims.js)
 *
 * Scroll-reveal cascade: when a .sim gets .is-revealed, its KPI tiles,
 * header, panel, rows, timeline items, and pills fade/slide into place
 * in a staggered sequence. Typewriter caret for .simh and count-up for
 * .sim-kpi .v are driven entirely by shared-sim-anims.js.
 * ═══════════════════════════════════════════════════════════════════ */
.sim .sim-kpi,
.sim .sim-panel,
.sim .simh,
.sim .sim-row,
.sim .sim-tl-item { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.sim .sim-row,
.sim .sim-tl-item { transform: translateX(-22px); }
.sim .sim-pill { opacity: 0; transform: scale(.55); transition: opacity .55s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.sim.is-revealed .sim-kpi,
.sim.is-revealed .sim-panel,
.sim.is-revealed .simh,
.sim.is-revealed .sim-row,
.sim.is-revealed .sim-tl-item,
.sim.is-revealed .sim-pill { opacity: 1; transform: none; }
.sim.is-revealed .simh { transition-delay: .10s; }
.sim.is-revealed .sim-panel { transition-delay: .30s; }
.sim.is-revealed .sim-kpi:nth-child(1) { transition-delay: .55s; }
.sim.is-revealed .sim-kpi:nth-child(2) { transition-delay: .75s; }
.sim.is-revealed .sim-kpi:nth-child(3) { transition-delay: .95s; }
.sim.is-revealed .sim-kpi:nth-child(4) { transition-delay: 1.15s; }
.sim.is-revealed .sim-row:nth-child(1) { transition-delay: 1.00s; }
.sim.is-revealed .sim-row:nth-child(2) { transition-delay: 1.20s; }
.sim.is-revealed .sim-row:nth-child(3) { transition-delay: 1.45s; }
.sim.is-revealed .sim-row:nth-child(4) { transition-delay: 1.70s; }
.sim.is-revealed .sim-row:nth-child(5) { transition-delay: 1.95s; }
.sim.is-revealed .sim-row:nth-child(6) { transition-delay: 2.20s; }
.sim.is-revealed .sim-tl-item:nth-child(1) { transition-delay: 1.00s; }
.sim.is-revealed .sim-tl-item:nth-child(2) { transition-delay: 1.20s; }
.sim.is-revealed .sim-tl-item:nth-child(3) { transition-delay: 1.45s; }
.sim.is-revealed .sim-tl-item:nth-child(4) { transition-delay: 1.70s; }
.sim.is-revealed .sim-tl-item:nth-child(5) { transition-delay: 1.95s; }
.sim.is-revealed .sim-row:nth-child(1) .sim-pill { transition-delay: 1.40s; }
.sim.is-revealed .sim-row:nth-child(2) .sim-pill { transition-delay: 1.60s; }
.sim.is-revealed .sim-row:nth-child(3) .sim-pill { transition-delay: 1.85s; }
.sim.is-revealed .sim-row:nth-child(4) .sim-pill { transition-delay: 2.10s; }
.sim.is-revealed .sim-row:nth-child(5) .sim-pill { transition-delay: 2.35s; }
.sim.is-revealed .sim-row:nth-child(6) .sim-pill { transition-delay: 2.60s; }
.sim .simh.tw-caret::after { content: ""; display: inline-block; width: 5px; height: 9px; margin-left: 3px; background: #9fe870; vertical-align: baseline; animation: tw-blink .8s steps(2) infinite; box-shadow: none; }
@keyframes tw-blink { 50% { opacity: 0; } }
/* ── Stats bar cascade reveal ── */
.stats-bar .stat-item { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.stats-bar.is-revealed .stat-item { opacity: 1; transform: none; }
.stats-bar.is-revealed .stat-item:nth-child(1) { transition-delay: .10s; }
.stats-bar.is-revealed .stat-item:nth-child(2) { transition-delay: .28s; }
.stats-bar.is-revealed .stat-item:nth-child(3) { transition-delay: .46s; }
.stats-bar.is-revealed .stat-item:nth-child(4) { transition-delay: .64s; }
.stats-bar.is-revealed .stat-item:nth-child(5) { transition-delay: .82s; }
.stats-bar.is-revealed .stat-item:nth-child(6) { transition-delay: 1.00s; }
/* ── Sparkline bar grow-up on reveal ── */
.sim .sim-spark span { transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.16,1,.3,1) 1.2s; }
.sim.is-revealed .sim-spark span { transform: scaleY(1); }
/* ── Live tick-in feed transitions ── */
.sim .sim-row.tick-out,
.sim .sim-tl-item.tick-out { opacity: 0 !important; transform: translateY(10px) !important; transition: opacity .4s ease, transform .4s ease !important; }
.sim .sim-row.tick-in,
.sim .sim-tl-item.tick-in { opacity: 0 !important; transform: translateY(-10px) !important; transition: none !important; }
.sim-feed .sim-panel { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sim .sim-kpi,
  .sim .sim-panel,
  .sim .simh,
  .sim .sim-row,
  .sim .sim-tl-item,
  .sim .sim-pill { opacity: 1; transform: none; transition: none; }
  .sim .simh.tw-caret::after { display: none; }
  .sim .sim-spark span { transform: none; transition: none; }
  .stats-bar .stat-item { opacity: 1; transform: none; transition: none; }
  .sim .sim-row.tick-out,
  .sim .sim-row.tick-in,
  .sim .sim-tl-item.tick-out,
  .sim .sim-tl-item.tick-in { opacity: 1 !important; transform: none !important; }
}

/* ── Sim-panel grids responsive (used across product, compare, features pages) ── */
@media (max-width: 900px) {
  .sim-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .sim-grid3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .sim-grid4, .sim-grid3 { grid-template-columns: 1fr !important; }
  .sim-grid2 { grid-template-columns: 1fr !important; }
  .sim-spark { grid-template-columns: repeat(10, 1fr) !important; }
}

/* ── Prevent decorative orbs from causing horizontal overflow ── */
.pricing-hero-orb-a, .pricing-hero-orb-b,
.cmp-orb-a, .cmp-orb-b,
[class*="hero-orb"] { pointer-events: none; }
@media (max-width: 768px) {
  .pricing-hero-orb-a, .pricing-hero-orb-b,
  .cmp-orb-a, .cmp-orb-b { display: none; }
}

/* ── Global overflow guard ── */
html { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
pre, code { overflow-x: auto; word-break: break-word; }

/* ── Disable decorative grid backgrounds site-wide (2026-05-05) ──
   16 legacy classes painted an animated 1px green grid pattern (the
   `linear-gradient(rgba(88,217,0,0.07–0.08) 1px, transparent 1px)` look)
   over hero, section, and footer backgrounds on ~38 marketing pages.
   We're removing the grid look entirely while keeping the underlying
   section layout/markup intact, so this override neutralises just the
   grid paint + animation. Source rules live inline in each page's
   <style> block; nullifying them here in shared.css avoids ~70 surgical
   edits and is easy to revert by deleting this block. The 2 pages that
   don't load shared.css (src/index.html, src/nova-analytics.html) carry
   the same override inline. If a new page adds another `*-grid*` class,
   append its selector here. */
.cl-grid-bg,
.ftv4-grid,
.hero-proof-video::after,
.about-grid-bg,
.blog-grid-bg,
.faq-grid-bg,
.features-grid-bg,
.hero-v2-grid,
.install-grid-bg,
.int-grid-bg,
.links-grid-bg,
.pricing-hero-grid,
.qh-grid-bg,
.roi-grid-bg,
.support-grid,
.team-grid-bg,
.wu-grid-bg {
  background-image: none !important;
  animation: none !important;
}

/* Pricing nav/footer links restored 2026-05-28: the temporary rule that
   hid /pricing in nav+footer (added 2026-05-27 while the page was a
   placeholder) was removed now that the pricing page is live. */

/* ════════ Header + footer update — propagated from homepage 2026-06-24 ════════ */
/* NAV: hide fullscreen icon; demo CTA -> outline (Start-Free-Trial trial button keeps its fill) */
#fullscreenBtn{display:none !important;}
.nav-cta:not(.nav-cta-trial){background:transparent !important;background-image:none !important;color:#ffffff !important;border:none !important;}
.nav-cta:not(.nav-cta-trial):hover{background:#58d900 !important;color:#ffffff !important;}
.nav-cta:not(.nav-cta-trial) svg{color:#ffffff !important;fill:currentColor !important;}
/* FOOTER: black bar, no green divider, compact, grouped & bigger buttons */
.footer-divider{display:none !important;}
.status-banner{border-top:none !important;background:#000000 !important;padding-top:8px !important;padding-bottom:8px !important;}
.footer-bottom-half{background:#000000 !important;padding-top:5px !important;padding-bottom:5px !important;}
.footer-bottom{border-top:none !important;justify-content:space-between !important;gap:24px !important;}
.footer-bottom p,.footer-bottom p a{font-size:15px !important;}
.footer-bottom p{display:inline-flex !important;align-items:center !important;gap:30px !important;}
.footer-bottom p a{margin:0 !important;}
.footer-social{gap:30px !important;}
.footer-social svg{width:28px !important;height:28px !important;}

/* ── Animations removed site-wide 2026-06-27 (per request) ───────────────────
   Neutralizes ALL @keyframes motion on every page that loads shared.css.
   Near-zero duration + single iteration, but animation-fill-mode is left
   intact, so the many `opacity:0 … animation:… forwards` entrance reveals snap
   straight to their final VISIBLE state instead of being hidden. Verified safe:
   0 reveals in blog rely on a non-forwards animation; ~all non-blog use forwards.
   Net: fully static site, no motion, all content visible. Revert by deleting
   this block. (index.html + nova-analytics.html don't load shared.css and carry
   the same override inline.) */
*, *::before, *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
}


/* Hero product screenshot frame for /product/* pages (added 2026-06-28).
   Dark browser-chrome-framed Nova Carbon screenshot under the light page-hero.
   shared-lightbox.js makes the <img> click-to-zoom. */
.hero-shot{max-width:1060px;margin:-8px auto 0;padding:0 24px;position:relative;z-index:2;}
.hero-shot-frame{border-radius:0;overflow:hidden;border:1px solid rgba(15,23,42,0.12);box-shadow:0 2px 4px rgba(15,23,42,0.06),0 44px 90px -32px rgba(15,23,42,0.42);background:#0a0a0a;}
.hero-shot-chrome{display:flex;align-items:center;gap:8px;padding:11px 15px;background:#0c100c;border-bottom:1px solid rgba(255,255,255,0.06);}
.hero-shot-chrome>span{width:11px;height:11px;border-radius:50%;background:#3a3a3a;flex:0 0 auto;}
.hero-shot-chrome>span:nth-child(1){background:#ff5f57;}
.hero-shot-chrome>span:nth-child(2){background:#febc2e;}
.hero-shot-chrome>span:nth-child(3){background:#28c840;}
.hero-shot-url{flex:1;text-align:center;font:600 12px/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#58d900;background:rgba(0,0,0,0.35);border:1px solid rgba(88,217,0,0.18);border-radius:0;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hero-shot-frame img{display:block;width:100%;height:auto;cursor:zoom-in;}
@media(max-width:640px){.hero-shot{padding:0 14px;}}

/* ═══ Homepage-parity nav styles — appended 2026-07-04 design pass ═══
   Extracted from the homepage inline CSS so every page (blog fleet
   included) renders the identical header. Later rules win over the
   legacy nav rules above at equal specificity. */
nav img,.nav img,.navbar img,.footer img,.footer-social img,.proof-logos img,.unified-card.with img,#promoBannerImg,img[width="1"],img[height="1"],svg{transition: none !important;cursor: auto !important;}
nav img:hover,.nav img:hover,.navbar img:hover,.footer img:hover,.footer-social img:hover,.proof-logos img:hover,.unified-card.with img:hover,#promoBannerImg:hover{transform: none !important;box-shadow: 0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(88,217,0,0.15) !important;}
.nav{position: fixed;top: 0;left: 0;right: 0;z-index: 1000;padding: 0 48px;transition: all 0.4s ease;background: rgba(0,0,0,0.95);backdrop-filter: blur(20px) saturate(180%);-webkit-backdrop-filter: blur(20px) saturate(180%);border-bottom: 1px solid transparent;}
.nav.scrolled{border-bottom-color: rgba(0,0,0,0.06);box-shadow: 0 1px 8px rgba(15,23,42,0.06);}
.nav-inner{max-width: 1400px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;height: 72px;}
.nav-logo{display: flex;align-items: center;text-decoration: none;color: #ffffff;margin-left: 0;flex-shrink: 0;}
.nav-logo-block{display: flex;align-items: center;gap: 14px;background: transparent;border: none;border-radius: 0;padding: 6px 18px 6px 6px;position: relative;}
.nav-beta-badge{font-size: 10px;font-weight: 800;letter-spacing: 0.08em;color: #000;background: #58d900;padding: 3px 7px;border-radius: 0;line-height: 1;text-transform: uppercase;margin-left: 8px;align-self: center;}
.nav-logo-block:hover{border: none;box-shadow: none;}
.nav-logo-block img{height: 90px;width: auto;}
.nav-logo-text{display: flex;flex-direction: column;gap: 4px;}
.nav-logo-wordmark{display: flex;align-items: baseline;gap: 4px;line-height: 1;}
.nav-beta-badge{display: inline-flex;align-items: center;padding: 3px 8px;background: #dc2626;color: #ffffff;font-size: 10px;font-weight: 800;letter-spacing: 0.1em;border-radius: 0;text-transform: uppercase;margin-left: 8px;line-height: 1;box-shadow: 0 2px 8px rgba(220,38,38,0.35);font-family: 'Helvetica Neue',Arial,sans-serif;}
.nav-logo-wordmark em{font-style: normal;font-size: 38px;font-weight: 900;letter-spacing: 0.06em;text-transform: uppercase;color: #ffffff;-webkit-text-fill-color: #ffffff;}
.nav-logo-wordmark strong{font-size: 38px;font-weight: 900;letter-spacing: 0.06em;text-transform: uppercase;background: linear-gradient(180deg,#a8ff3e 0%,#58d900 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;filter: drop-shadow(0 2px 16px rgba(88,217,0,0.7));}
.nav-logo-tagline{font-size: 10px;font-weight: 700;letter-spacing: 0.2em;text-transform: uppercase;background: linear-gradient(90deg,#58d900,#a8ff3e,#ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;opacity: 0.75;}
.nav-links{display: flex;align-items: center;gap: 40px;list-style: none;}
.nav-links a{text-decoration: none;color: #ffffff;font-size: 13px;font-weight: 600;letter-spacing: 0.06em;text-transform: uppercase;padding: 6px 14px;border-radius: 0;transition: color 0.2s,background-color 0.2s;}
.nav-links a:hover{color: #ffffff;background-color: #58d900;}
.nav-cta{display: inline-flex;align-items: center;gap: 7px;padding: 10px 20px;background: linear-gradient(135deg,#6aea00 0%,#58d900 60%,#3fb800 100%);color: #ffffff !important;border-radius: 0;font-weight: 800;font-size: 12px;letter-spacing: 0.08em;text-transform: uppercase;text-decoration: none !important;white-space: nowrap;box-shadow: none;transition: box-shadow 0.25s,transform 0.2s,filter 0.2s;}
.nav-cta:hover{filter: none;transform: none;box-shadow: none;}
.nav-actions{display: flex;align-items: center;gap: 10px;flex-shrink: 0;}
.nav-icon-btn{display: flex;align-items: center;justify-content: center;width: 38px;height: 38px;background: rgba(88,217,0,0.1);border: 1px solid rgba(88,217,0,0.25);border-radius: 0;cursor: pointer;transition: all 0.25s;color: #58d900;box-shadow: none;}
.nav-icon-btn:hover{background: rgba(88,217,0,0.2);border-color: rgba(88,217,0,0.5);color: #6aea00;box-shadow: none;transform: translateY(-1px);}
.nav-icon-btn svg{stroke: currentColor;}
.nav-btn-trial{display: inline-flex;align-items: center;gap: 7px;padding: 9px 18px;background: transparent;color: #e2e8f0 !important;border: 1px solid rgba(226,232,240,0.18);border-radius: 0;font-weight: 600;font-size: 13px;letter-spacing: 0.06em;text-transform: uppercase;text-decoration: none;transition: border-color 0.2s,background 0.2s,color 0.2s;white-space: nowrap;}
.nav-btn-trial:hover{background: rgba(255,255,255,0.06);border-color: rgba(226,232,240,0.35);color: #ffffff !important;}
.nav-btn-trial:hover{filter: brightness(1.1);color: #ffffff !important;transform: translateY(-1px);}
.nav-btn-demo{display: inline-flex;align-items: center;gap: 7px;padding: 9px 20px;background: rgba(88,217,0,0.12);color: #58d900 !important;border: 1px solid rgba(88,217,0,0.35);border-radius: 0;font-weight: 600;font-size: 13px;letter-spacing: 0.06em;text-transform: uppercase;text-decoration: none;transition: background 0.2s,transform 0.2s,box-shadow 0.2s;white-space: nowrap;}
.nav-btn-demo:hover{background: rgba(88,217,0,0.22);transform: translateY(-1px);box-shadow: none;}
.nav-item-dropdown{position: relative;}
.nav-item-dropdown>a{display: inline-flex;align-items: center;gap: 5px;}
.nav-item-dropdown>a .chevron{width: 12px;height: 12px;transition: transform 0.2s;opacity: 0.7;}
.nav-item-dropdown:hover>a .chevron{transform: rotate(180deg);}
.nav-dropdown{display: none;position: absolute;top: calc(100%+6px);left: 50%;transform: translateX(-50%);background: #0a0a0a;border: 1px solid rgba(88,217,0,0.15);border-radius: 0;padding: 20px;min-width: 560px;box-shadow: 0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(88,217,0,0.06);z-index: 2000;gap: 8px;}
.nav-dropdown::before{content: '';position: absolute;top: -10px;left: -20px;right: -20px;height: 10px;}
.nav-item-dropdown:hover .nav-dropdown,.nav-item-dropdown.dd-open .nav-dropdown{display: grid;}
.nav-dropdown-col{display: flex;flex-direction: column;gap: 2px;border-right: 1px solid rgba(88,217,0,0.1);padding-right: 8px;}
.nav-dropdown-col:last-child{border-right: none;padding-right: 0;}
.nav-dropdown-heading{font-size: 10px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(88,217,0,0.7);padding: 6px 12px 8px;border-bottom: 1px solid rgba(88,217,0,0.1);margin-bottom: 6px;}
.nav-dropdown a{display: flex;align-items: center;gap: 10px;padding: 9px 12px;border-radius: 0;text-decoration: none;color: rgba(255,255,255,0.75) !important;font-size: 13px;font-weight: 500;letter-spacing: 0.01em;text-transform: none;background: transparent;transition: background 0.15s,color 0.15s;border-bottom: 1px solid rgba(88,217,0,0.06);}
.nav-dropdown a:last-child{border-bottom: none;}
.nav-dropdown a:hover{background: rgba(88,217,0,0.08);color: #ffffff !important;}
.nav-dropdown a .dd-icon{width: 30px;height: 30px;border-radius: 0;background: rgba(88,217,0,0.1);display: flex;align-items: center;justify-content: center;flex-shrink: 0;font-size: 15px;}
.nav-dropdown a .dd-text strong{display: block;font-size: 13px;font-weight: 600;color: #ffffff;line-height: 1.2;}
.nav-dropdown a .dd-text span{font-size: 11px;color: rgba(255,255,255,0.4);font-weight: 400;}
.nav-dropdown.product-dd{grid-template-columns: 1fr;min-width: 320px;max-width: 380px;}

/* ===== Green wash/glow/orbs removed site-wide (founder 2026-07-21) =====
   Decorative ambient green blobs and glow OVERLAYS only. Intentional brand
   green (CTA buttons, headline text gradients, the nav, borders, status-pill
   states) is untouched. .without-glow is a FUNCTIONAL comparison-card wrapper
   and is deliberately NOT matched. Inserted mid-file (server-dev drops EOF
   appends) and !important so it beats the per-page orb rules. */
[class*="orb"]{display:none !important;}
.status-banner-glow,
.hero-glow, .bg-glow, .cta-launch-glow,
.sre-vlink-glow, .sre-link-glow, .pl-nc-glow,
.sre-hero-console-fleet-bar-glow{display:none !important;}
.hero-v2-stars, .scan-line, .cin-grid-bg{display:none !important;}
[class*="bg-glow"], .page-hero .bg-glow, section .bg-glow{display:none !important;}
/* Green radial glow on the solution-page hero pseudo-element */
.solution-hero::before, .page-hero.solution-hero::before{background:none !important;display:none !important;}
/* ===== end green-decoration removal ===== */

/* Light PRODUCT/SOLUTIONS dropdown unified 2026-07-21: same design as the
   homepage (was homepage-only inline). INSERTED here (not appended at EOF -
   server-dev drops EOF appends) and @media-guarded to desktop so the dark
   mobile drawer rules above are untouched. */
@media (min-width: 901px){
  .nav-dropdown{
    background:#ffffff;
    border:none;
    border-top:3px solid #58d900;
    border-radius:0;
    box-shadow:0 8px 10px rgba(0,0,0,0.07);
    padding:20px;
  }
  /* Datadog uses whitespace, not rules, to separate columns and rows. The one
     divider we keep is the column split, at a much fainter alpha than the old
     green-on-black hairline, which turned to dirt on white. */
  .nav-dropdown-col{border-right:1px solid rgba(0,0,0,0.07);padding-right:14px;}
  .nav-dropdown-col:last-child{border-right:none;padding-right:0;}
  .nav-dropdown-heading{
    color:rgba(0,0,0,0.45);
    font-size:11px;
    letter-spacing:0.12em;
    border-bottom:none;      /* row/heading rules removed, per source */
    padding:4px 11px 10px;
    margin-bottom:2px;
  }
  .nav-dropdown a{
    color:#000000 !important;
    border-bottom:none;      /* the ledger-sheet hairlines, gone */
    padding:9px 11px;        /* Datadog's 7px 11px, opened up for 2-line rows */
    border-radius:0;
  }
  /* Their rows tint on hover rather than changing text colour, which keeps the
     label at full contrast while hovered. Same idea, Nova green at low alpha. */
  .nav-dropdown a:hover{background:rgba(88,217,0,0.10);color:#000000 !important;}
  .nav-dropdown a .dd-text strong{color:#000000;font-size:15px;font-weight:500;line-height:1.35;}
  /* Was rgba(255,255,255,0.4). The same 0.4 alpha inverted on white is far too
     faint, so the sub-label lands at 0.55 and picks up a little size. */
  .nav-dropdown a .dd-text span{color:rgba(0,0,0,0.55);font-size:12.5px;line-height:1.4;}
  /* ICONS: monochrome, no chip (2026-07-20, matching datadoghq.com).
     Datadog's nav uses NO icon on item rows at all, and on its left category
     rail uses bare line glyphs that inherit the label colour, going brand
     purple only on the active row. Nothing anywhere sits in a tinted chip. So
     the green chip goes, the glyph stays as a scanning aid for 11 rows of
     title + description, and it renders black like the label.

     The box shrinks 30px -> 20px because it was sized to be a chip; at 30px
     with no background it just leaves a dead gutter between glyph and text.

     WHY THE ATTRIBUTE SELECTORS: every glyph hardcodes its colour as an SVG
     presentation attribute (stroke="#58d900", fill="#58d900") rather than
     currentColor, so there is nothing for `color` to cascade into. CSS
     properties do outrank presentation attributes, hence targeting the shapes
     directly. The :not([fill="none"]) guard is load-bearing: most of these are
     outline icons whose paths carry fill="none", and filling them black would
     turn every one into a solid blob.

     Side effect, intended: "1. Monitor" was drawn in amber (#f59e0b) while the
     other ten were green. Going monochrome erases that odd one out. */
  .nav-dropdown a .dd-icon{background:none;border-radius:0;width:20px;height:20px;}
  .nav-dropdown a .dd-icon svg [stroke]{stroke:#000000;}
  .nav-dropdown a .dd-icon svg [fill]:not([fill="none"]){fill:#000000;}
  /* Datadog tints the rail glyph with its brand colour on the active row. Same
     gesture here, in the darkened green, since #58d900 on the pale hover wash
     is too low-contrast to read. */
  .nav-dropdown a:hover .dd-icon svg [stroke]{stroke:#2f7d00;}
  .nav-dropdown a:hover .dd-icon svg [fill]:not([fill="none"]){fill:#2f7d00;}
  .nav-dropdown > a[href="/features"]{
    color:#2f7d00 !important;
    border-top:1px solid rgba(0,0,0,0.07) !important;
    border-radius:0;
  }
}
.nav-dropdown.platform-dd{grid-template-columns: 1fr;min-width: 340px;max-width: 400px;}
.nav-dropdown.solutions-dd{grid-template-columns: 1fr;min-width: 340px;max-width: 400px;}
.nav-dropdown.compare-dd{grid-template-columns: 1fr 1fr;min-width: 400px;}
.nav-toggle{display: none;background: none;border: none;cursor: pointer;padding: 8px;z-index: 1100;position: relative;width: 36px;height: 36px;flex-shrink: 0;}
.nav-toggle span{display: block;width: 22px;height: 2px;background: #ffffff;margin: 5px auto;transition: transform 0.3s ease,opacity 0.2s ease;border-radius: 0;}
.nav-toggle.active span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity: 0;}
.nav-toggle.active span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
@media (max-width: 1100px){
.nav-btn-trial{display: none;}
.nav-links{gap: 20px;}
.nav{padding: 0 24px;}
.nav-logo{margin-left: 0;}
}
@media (max-width: 900px){
.nav-links{display: none;}
.nav-toggle{display: flex;align-items: center;justify-content: center;}
.nav-actions{gap: 8px;}
.nav-btn-demo{padding: 8px 14px;font-size: 11px;}
.nav-inner{height: 72px;}
.nav-logo-block img{height: 56px;}
.nav-logo-wordmark em,.nav-logo-wordmark strong{font-size: 28px;}
.nav-logo{margin-left: 0;}
.nav-links.open{display: flex;flex-direction: column;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(5,5,10,0.98);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);padding: 90px 24px 32px;gap: 0;z-index: 1050;overflow-y: auto;-webkit-overflow-scrolling: touch;animation: navSlideIn 0.3s ease forwards;}
.nav-links.open>li{border-bottom: 1px solid rgba(88,217,0,0.08);}
.nav-links.open>li>a{display: block;font-size: 16px;font-weight: 600;padding: 16px 0;color: #ffffff !important;background: transparent !important;text-transform: uppercase;letter-spacing: 0.06em;}
.nav-links.open .nav-item-dropdown>a{pointer-events: auto;display: flex;align-items: center;justify-content: space-between;}
.nav-links.open .nav-item-dropdown>a .chevron{display: block;width: 16px;height: 16px;opacity: 0.5;transition: transform 0.3s ease;stroke: #58d900;}
.nav-links.open .nav-item-dropdown.mobile-open>a .chevron{transform: rotate(180deg);opacity: 1;}
.nav-links.open .nav-dropdown{display: none !important;}
.nav-links.open .nav-item-dropdown.mobile-open .nav-dropdown{display: flex !important;position: static;transform: none;background: rgba(88,217,0,0.04);border: none;border-radius: 0;padding: 8px 0;min-width: unset;box-shadow: none;flex-direction: column;gap: 0;margin-bottom: 8px;animation: mobileAccordion 0.25s ease forwards;}
.nav-links.open .nav-dropdown::before{display: none;}
.nav-links.open .nav-dropdown-col{border-right: none;padding-right: 0;border-bottom: 1px solid rgba(88,217,0,0.06);padding-bottom: 4px;margin-bottom: 4px;}
.nav-links.open .nav-dropdown-col:last-child{border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.nav-links.open .nav-dropdown a{padding: 10px 16px;font-size: 14px;border-bottom: none;}
.nav-links.open .nav-dropdown a .dd-icon{width: 26px;height: 26px;border-radius: 0;}
.nav-links.open .nav-dropdown a .dd-text strong{font-size: 13px;}
.nav-links.open .nav-dropdown a .dd-text span{font-size: 10px;}
.nav-links.open .nav-dropdown-heading{font-size: 9px;padding: 8px 16px 6px;color: rgba(88,217,0,0.6);}
.nav-links.open::after{content: '';display: block;flex-shrink: 0;height: 80px;}
}
@media (max-width: 480px){
.nav{padding: 0 12px;}
.nav-inner{height: 60px;}
.nav-logo-block img{height: 40px;}
.nav-logo-wordmark em,.nav-logo-wordmark strong{font-size: 22px;}
.nav-cta{padding:7px 14px;font-size:0;gap:0;}
.nav-cta::before{content:"Try Nova";font-size:11px;font-weight:700;letter-spacing:0;color:inherit;}
.nav-cta svg{display:none;}
.nav-btn-demo{padding: 6px 12px;font-size: 10px;}
.nav-btn-demo svg{display: none;}
.nav-links.open{padding: 70px 16px 24px;}
}
@media (max-width: 360px){
.nav-cta{display: none;}
}
@media (min-width: 901px){
.nav-item-dropdown>a .chevron{display: inline-block;}
}
.nav-dropdown a{white-space: nowrap;}
.nav-dropdown-heading{white-space: nowrap;}
.nav-dropdown.product-dd{grid-template-columns: 1fr; min-width: 320px; max-width: 380px;}
.nav-dropdown.solutions-dd{grid-template-columns: 1fr; min-width: 340px; max-width: 400px;}
.nav-dropdown.platform-dd{grid-template-columns: 1fr; min-width: 340px; max-width: 400px;}
@media (max-width: 1024px){
.nav-dropdown.platform-dd{min-width: 900px;}
}
@media (max-width: 900px){
.nav-dropdown.platform-dd,
 .nav-dropdown.product-dd,
 .nav-dropdown.solutions-dd,
 .nav-dropdown.compare-dd{min-width: unset !important; width: 100%;}
}
@media (max-width: 340px){
.nav-logo-wordmark em,
 .nav-logo-wordmark strong{font-size: 18px;}
.nav-logo-block img{height: 36px;}
}
@media (max-height: 500px) and (orientation: landscape){
.nav-inner{height: 56px;}
.nav-logo-block img{height: 40px;}
}
nav .nav-logo img,
nav .nav-logo img:hover,
.nav .nav-logo img,
.nav .nav-logo img:hover,
.nav-logo-block img,
.nav-logo-block img:hover,
.nav-logo-block:hover img{transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  position: static !important;
  z-index: auto !important;}
.nav-dropdown{border-color: #58d900;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(88,217,0,0.55);}
.nav-cta:not(.nav-cta-trial){background:transparent !important;background-image:none !important;color:#ffffff !important;border:none !important;}
.nav-cta:not(.nav-cta-trial):hover{background:#58d900 !important;color:#ffffff !important;}
.nav-cta:not(.nav-cta-trial) svg{color:#ffffff !important;fill:currentColor !important;}
block above are kept
      for now in case they get reintroduced; they don't cost anything since
      no markup currently uses those classes. -->
 </div>
 <!-- Live-incident CTA — replaces the inline ".hero-demo-section" video card
      that used to sit here. The video (YouTube 98ekdP0HuFc, Nova AI agents
      resolving a real production incident autonomously) was moved to its own
      page at /live-incident so the homepage hero stays focused. The eyebrow
      pill that briefly lived above this button (2026-05-23, "Live · Real
      Incident · Autonomous") was removed in the next iteration — the button
      text alone is doing the routing job, the eyebrow read as redundant
      chrome. Background colorway flipped to the site's primary green
      gradient (matching .nav-cta in this same file) so it reads as a
      primary action, not a tertiary ghost link. Styles are scoped to the
      .live-incident-cta-* prefix so they cannot collide with the existing
      .hero-book-demo-btn or .live-dashboard-* blocks below. -->
 <div class="live-incident-cta-wrap reveal reveal-delay-3" style="display:none;justify-content:center;margin:32px auto 8px;">
   <style>
     
     .live-incident-cta-btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:15px 30px;border-radius:0;background:linear-gradient(110deg,#3fb800 0%,#58d900 28%,#9fe870 50%,#58d900 72%,#3fb800 100%);background-size:220% 100%;color:#04140a !important;border:none;font-family:var(--font,'Inter',sans-serif);font-size:13px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none !important;cursor:pointer;overflow:hidden;box-shadow:none;transition:transform 0.25s ease,filter 0.25s ease;animation:liGreenFlow 4.5s linear infinite,liGreenGlow 2.4s ease-in-out infinite;}
@media (max-width:480px){
.nav-cta{padding:7px 14px;font-size:0;gap:0;}
.nav-cta::before{content:"Try Nova";font-size:11px;font-weight:700;letter-spacing:0;color:inherit;}
.nav-cta:not(.nav-cta-trial)::before{content:"Founders";}
.nav-cta svg{display:none;}
}

/* Footer-link tap-target rule moved next to the nav-link rule near the top
   of this file (see the comment there) — rules appended here at EOF were not
   reaching the browser. */