/* ============================================================
   NODAVIO — DESIGN SYSTEM FOUNDATION
   Built from scratch. Not an extension of the old marketing site.
   ============================================================ */

:root {
  /* Color: Nodavio's own teal identity - kept because it IS the brand,
     not because it was copied from a reference site. Used with more
     restraint and confidence here: solid surfaces, not translucent
     layers over decorative gradients. */
  --ink: 15 17 18;
  --ink-2: 43 48 51;
  --ink-muted: 100 106 110;
  --ink-faint: 150 155 158;
  --paper: 255 255 255;
  --paper-2: 247 246 244;
  --paper-3: 240 239 236;
  --border: 226 224 219;
  --border-strong: 200 197 190;

  --teal: 15 111 122;
  --teal-deep: 8 61 68;
  --teal-ink: 10 89 99;

  /* SURFACES — every full-bleed background on the site lives inside one
     narrow light band: paper, paper-2, paper-3 and the two washes below.
     Nothing full-bleed goes dark, so no boundary anywhere is a
     light-to-dark step and the page reads as a single surface that
     drifts rather than a stack of alternating bands. Contrast comes from
     type, the teal accent, and a handful of small dark controls. */

  /* The cool, frosted end of the band. */

  /* Its warmer, marginally deeper companion, so two tinted sections in
     the same stretch of page don't land on an identical tone. Still
     light: paper-3 is the deepest full-bleed value used anywhere. */

  /* Dissolves both edges of a tinted section to fully transparent, so
     whatever sits behind it - plain paper, or the hero's atmosphere wash
     - carries straight through the seam. Masking to transparent rather
     than fading to opaque white matters: an opaque fade would hide the
     atmosphere behind it, and the hand-off would show up as a line
     wherever a tinted section starts high enough to overlap the wash. */

  --warn: 178 108 42;

  /* Type scale - a deliberate ratio, not ad-hoc pixel values */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.6vw, 1.7rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.5rem, 2rem + 2.2vw, 3.6rem);
  --step-5: clamp(2.6rem, 2rem + 2.8vw, 4.2rem);

  /* Spacing rhythm - used for section padding so vertical rhythm is
     consistent rather than every section inventing its own number */
  --space-section: clamp(72px, 6vw + 40px, 160px);
  --space-section-tight: clamp(48px, 4vw + 24px, 96px);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* A real shadow scale - three tiers instead of 22 ad-hoc values
     invented one at a time as components were built. */
  --shadow-sm: 0 14px 30px -20px rgb(0 0 0 / 0.22);
  --shadow-md: 0 22px 44px -24px rgb(0 0 0 / 0.26);
  --shadow-lg: 0 40px 90px -40px rgb(0 0 0 / 0.28);
  --shadow-dropdown: 0 30px 60px -22px rgb(0 0 0 / 0.3);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  /* The page field itself - see PAGE FIELD below. It lives on body
     rather than a positioned element so it is painted across the whole
     canvas by background propagation, which cannot come up short of
     the document the way a height-bound element can. */
  background:
    repeating-linear-gradient(to bottom,
      rgb(200 230 230 / 0) 0, rgb(200 230 230 / 0.5) 100vh, rgb(200 230 230 / 0) 200vh),
    repeating-linear-gradient(to bottom,
      rgb(var(--paper-3) / 0) 40vh, rgb(var(--paper-3) / 0.85) 190vh, rgb(var(--paper-3) / 0) 340vh),
    rgb(var(--paper));
  color: rgb(var(--ink));
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 28px; }

@media (max-width: 640px) {
  .container, .container-narrow, .container-wide { padding: 0 20px; }
}

/* ============================================================
   MOTION PRIMITIVES — a small, consistent set, not fifty
   one-off animations. Each is opt-in via a class + data-reveal
   is handled by IntersectionObserver in app.js.
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="clip"] { transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 800ms var(--ease); }
[data-reveal="clip"].is-visible { clip-path: inset(0 0 0% 0); }

[data-stagger] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ============================================================
   PAGE FIELD — the site's only background
   Sections paint no background of their own anywhere. One field
   behind each document carries the whole page instead.

   Per-section washes were the earlier approach, and they failed in
   two ways: where two tinted sections sat close together their fades
   met and left a short strip of paper between them, and the tonal
   rhythm ended up dictated by however tall each section happened to
   be, which differs wildly page to page.

   Both layers here are periodic in vh, so a tone lasts about a
   screenful whatever the content above it does, and the ramp between
   tones is a full screen long - far too gradual to resolve as an edge
   anywhere. The two periods (200vh and 300vh) beat against each other
   rather than lining up, so the repeat doesn't announce itself while
   scrolling. Being viewport-relative rather than content-relative is
   what makes the rhythm identical on every page and every device.

   The layers themselves are declared on body, at the top of this file.
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: var(--step--1); font-weight: 600;
  padding: 14px 24px; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
}
.btn-primary { background: rgb(var(--ink)); color: rgb(var(--paper)); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.35); }
.btn-ghost { background: transparent; color: rgb(var(--ink)); border: 1.5px solid rgb(var(--border-strong)); }
.btn-ghost:hover { border-color: rgb(var(--ink)); transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ============================================================
   SECTION EYEBROW / LABEL
   ============================================================ */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--teal-ink));
}

/* ============================================================
   WORD SWAP — vertical phrase rotator. CSS Grid stacking means
   the container's intrinsic size is the widest phrase automatically;
   no JS measurement needed, no layout shift as phrases change.
   ============================================================ */
.word-swap {
  display: inline-grid; vertical-align: top; overflow: hidden;
  /* Grid stacking sizes to the widest phrase's natural (unwrapped) width,
     which is the point - no layout shift as phrases swap. But translated
     phrases run much longer than the English originals, so left unbound
     that natural width can exceed the viewport. max-width lets the browser
     wrap a too-wide phrase onto a second line instead of overflowing;
     shorter phrases are untouched since they never hit the cap. */
  max-width: 100%;
}
.word-swap-item {
  grid-area: 1 / 1;
  max-width: 100%;
  opacity: 0;
  transform: translateY(0.24em);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.word-swap-item.is-active { opacity: 1; transform: translateY(0); }
.word-swap-item.is-leaving { opacity: 0; transform: translateY(-0.24em); }

/* ============================================================
   NAV — simple, confident, not a floating glass pill. Shrinks
   subtly on scroll rather than relying on blur to feel premium.
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 18px 18px 0;
}
.site-nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 12px 12px 12px 26px;
  background: rgb(var(--paper) / 0.9);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: 0 10px 30px -12px rgb(15 40 42 / 0.18), 0 2px 8px -3px rgb(15 40 42 / 0.1);
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow 200ms var(--ease), padding 200ms var(--ease);
}
.site-nav.is-scrolled .site-nav-inner { box-shadow: 0 16px 36px -14px rgb(15 40 42 / 0.26), 0 2px 8px -3px rgb(15 40 42 / 0.12); }
.site-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: rgb(var(--ink)); text-decoration: none; }
.site-logo img { height: 22px; width: auto; }
.site-nav-links { display: flex; align-items: center; gap: 30px; }
.site-nav-links a {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; color: rgb(var(--ink-2)); text-decoration: none; transition: color 200ms var(--ease);
}
.site-nav-links a:hover { color: rgb(var(--ink)); }
.site-nav-links a .chev { width: 9px; height: 9px; opacity: 0.55; }
.nav-trigger {
  display: flex; align-items: center; gap: 5px; font: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 14px; color: rgb(var(--ink-2)); transition: color 200ms var(--ease);
}
.nav-trigger:hover { color: rgb(var(--ink)); }
.nav-trigger .chev { width: 9px; height: 9px; opacity: 0.55; transition: transform 200ms var(--ease); }
.nav-item.is-open .nav-trigger .chev { transform: rotate(180deg); }
.site-nav-actions { display: flex; align-items: center; gap: 16px; }
.site-nav-actions a.login { display: flex; align-items: center; gap: 5px; font-size: 14px; color: rgb(var(--ink-2)); text-decoration: none; }

/* ---------- Nav dropdown - click to open, not hover (hover-gap
   timing causes premature closing on real trackpads/mice). A mega-menu:
   each item is an icon tile + title + one-line description, not a bare
   text link, and children fade/rise in with a short stagger so opening
   it reads as a deliberate motion, not an instant swap. ---------- */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.98);
  width: 360px; background: rgb(var(--paper)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown);
  padding: 10px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.nav-dropdown a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 11px; text-decoration: none;
  opacity: 0; transform: translateY(6px);
  transition: background 160ms var(--ease), opacity 260ms var(--ease), transform 260ms var(--ease);
}
.nav-item.is-open .nav-dropdown a { opacity: 1; transform: translateY(0); }
.nav-dropdown a:nth-child(1) { transition-delay: 20ms; }
.nav-dropdown a:nth-child(2) { transition-delay: 55ms; }
.nav-dropdown a:nth-child(3) { transition-delay: 90ms; }
.nav-dropdown a:nth-child(4) { transition-delay: 125ms; }
.nav-dropdown a:nth-child(5) { transition-delay: 160ms; }
.nav-dropdown a:nth-child(6) { transition-delay: 195ms; }
.nav-dropdown a:hover { background: rgb(var(--paper-2)); }
.nav-dropdown a:hover .mega-item-icon { background: rgb(var(--teal) / 0.14); color: rgb(var(--teal-ink)); }
.mega-item-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--paper-3)); color: rgb(var(--ink-2));
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.mega-item-icon svg { width: 16px; height: 16px; }
.mega-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-item-text strong { font-size: 13.5px; font-weight: 600; color: rgb(var(--ink)); }
.mega-item-text span { font-size: 12px; line-height: 1.35; color: rgb(var(--ink-faint)); }
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown, .nav-dropdown a { transition-duration: 0.001ms !important; }
}

/* ---------- Language switcher — globe icon with a small flag badge
   riding its bottom-right corner, opening the same style of dropdown
   as the nav mega-menus above. ---------- */
.lang-switch { position: relative; }
.lang-switch-trigger {
  display: flex; align-items: center; gap: 0; background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 999px; color: rgb(var(--ink-2)); transition: background 160ms var(--ease), color 160ms var(--ease);
}
.lang-switch-trigger:hover { background: rgb(var(--paper-3)); color: rgb(var(--ink)); }
.lang-switch-globe { position: relative; width: 20px; height: 20px; display: flex; }
.lang-switch-globe svg { width: 20px; height: 20px; }
.lang-switch-flag {
  position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgb(var(--paper)); box-shadow: 0 0 0 1.5px rgb(var(--paper));
}
.lang-switch-flag svg, .lang-option-flag svg { width: 100%; height: 100%; display: block; }
.lang-dropdown {
  position: absolute; top: calc(100% + 14px); right: 0; transform: translateY(-8px) scale(0.98);
  width: 168px; background: rgb(var(--paper)); border: 1px solid rgb(var(--border));
  border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown);
  padding: 6px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.lang-switch.is-open .lang-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.lang-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px; color: rgb(var(--ink-2));
  text-decoration: none; text-align: left; transition: background 160ms var(--ease);
}
.lang-option:hover { background: rgb(var(--paper-2)); color: rgb(var(--ink)); }
.lang-option.is-current { color: rgb(var(--ink)); font-weight: 600; }
.lang-option-flag { width: 18px; height: 13px; border-radius: 3px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgb(var(--border)); }
.lang-option-check { margin-left: auto; width: 14px; height: 14px; color: rgb(var(--teal-ink)); opacity: 0; }
.lang-option.is-current .lang-option-check { opacity: 1; }


/* ---------- Icon-chip CTA button — a small icon tile fused to the
   pill's edge, matching the reference's CTA construction. ---------- */
.btn-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn-chip:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.35); }
.btn-chip-dark { background: rgb(var(--ink)); color: rgb(var(--paper)); }
.btn-chip-icon {
  width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.18);
}
.btn-chip-icon svg { width: 14px; height: 14px; }
.btn-chip-label { padding-right: 14px; }

.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: rgb(var(--ink)); }

/* ---------- Mobile menu panel ---------- */
.mobile-menu {
  display: none; position: fixed; top: 78px; left: 18px; right: 18px; z-index: 49;
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  padding: 10px; max-height: calc(100vh - 100px); overflow-y: auto;
  opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  visibility: hidden; pointer-events: none;
}
.mobile-menu.is-open { display: block; opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.mobile-menu a, .mobile-menu-group-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 12px; font-size: 15px; color: rgb(var(--ink-2)); text-decoration: none;
  border-radius: 9px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit;
}
.mobile-menu a:hover, .mobile-menu-group-title:hover { background: rgb(var(--paper-2)); color: rgb(var(--ink)); }
.mobile-menu-group-title svg { width: 14px; height: 14px; transition: transform 200ms var(--ease); color: rgb(var(--ink-faint)); }
.mobile-menu-group.is-open .mobile-menu-group-title svg { transform: rotate(180deg); }
.mobile-menu-sub { display: none; padding-left: 14px; }
.mobile-menu-group.is-open .mobile-menu-sub { display: block; }
.mobile-menu-sub a { font-size: 14px; color: rgb(var(--ink-muted)); }
.mobile-menu-divider { height: 1px; background: rgb(var(--border-soft)); margin: 8px 4px; }
.mobile-menu-cta { padding: 10px 4px 4px; display: flex; flex-direction: column; gap: 8px; }
/* `.mobile-menu a` above (a class+element selector) outranks the plain
   `.btn` class it shares with these two links, which was silently
   stripping their background/border/pill shape down to bare text. These
   rules need to out-specify it explicitly, not just repeat `.btn`. */
.mobile-menu-cta a.btn {
  justify-content: center; background: rgb(var(--paper)); border-radius: 999px;
  text-align: center; font: inherit; font-weight: 600; font-size: var(--step--1);
}
.mobile-menu-cta a.btn-primary { background: rgb(var(--ink)); color: rgb(var(--paper)); }
.mobile-menu-cta a.btn-ghost { background: transparent; border: 1.5px solid rgb(var(--border-strong)); color: rgb(var(--ink)); }
@media (max-width: 860px) {
  .site-nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
  .site-nav-actions a.login { display: none; }
  .btn-chip-label { padding-right: 12px; font-size: 13px; }
}
@media (max-width: 400px) {
  .site-nav { padding: 14px 12px 0; }
  .site-nav-inner { padding: 8px 8px 8px 16px; }
  .site-logo img { height: 19px; }
  .btn-chip-icon { width: 26px; height: 26px; }
  .btn-chip-label { padding-right: 10px; font-size: 12.5px; }
  .nav-mobile-toggle svg { width: 19px; height: 19px; }
}


/* ============================================================
   HERO — clean, not atmospheric. Typography and product carry it.
   ============================================================ */
/* ============================================================
   ATMOSPHERE — soft grainy gradient wash behind nav + hero.
   Positioned as its own layer (not nested in .hero) so it can sit
   behind the nav too, learned from earlier: a section-scoped
   background can never reach behind a sibling nav element.
   ============================================================ */
.atmosphere {
  /* z-index: -1, not 0 or unset - a positioned element with z-index 0/auto
     paints ABOVE later static in-flow content regardless of DOM order
     (CSS's positioned-vs-static painting order, not source order), which
     let this wash bleed straight through opaque dark sections lower on
     the page. -1 keeps it strictly behind all normal content, still above
     the plain page background. */
  position: absolute; top: 0; left: 0; right: 0; height: 920px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}
.atmosphere::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 780px 560px at 18% -8%, rgb(var(--teal) / 0.38), transparent 62%),
    radial-gradient(ellipse 620px 480px at 88% 6%, rgb(var(--teal) / 0.24), transparent 58%),
    radial-gradient(ellipse 700px 520px at 45% 60%, rgb(var(--teal) / 0.14), transparent 65%),
    linear-gradient(180deg, rgb(228 240 240 / 1), rgb(var(--paper)) 85%);
}
.atmosphere::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('grain.png'); background-repeat: repeat; background-size: 128px 128px;
  opacity: 0.5; mix-blend-mode: multiply;
}
.hero { position: relative; z-index: 1; }

/* ============================================================
   BREADCRUMBS + PAGE HEADER — for the dedicated product pages
   ============================================================ */
.breadcrumbs {
  position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 28px 28px 0;
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(var(--ink-faint));
}
.breadcrumbs a { color: rgb(var(--ink-faint)); text-decoration: none; transition: color 200ms var(--ease); }
.breadcrumbs a:hover { color: rgb(var(--ink)); }
.breadcrumbs span.sep { opacity: 0.5; }
.breadcrumbs span.current { color: rgb(var(--ink-2)); }

.page-header { position: relative; z-index: 1; padding: 32px 0 64px; }
.page-header .container-narrow { text-align: left; }
.page-header-icon {
  width: 46px; height: 46px; border-radius: 13px; background: rgb(var(--paper)); border: 1px solid rgb(var(--border));
  display: flex; align-items: center; justify-content: center; color: rgb(var(--teal-ink)); margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.page-header-icon svg { width: 21px; height: 21px; }
.page-header .eyebrow { display: block; margin-bottom: 12px; }
.page-header h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: rgb(var(--ink)); margin-bottom: 18px; max-width: 16ch; }
.page-header p { font-size: var(--step-1); color: rgb(var(--ink-muted)); line-height: 1.55; max-width: 52ch; margin-bottom: 30px; }
.page-header .hero-ctas { justify-content: flex-start; margin-top: 0; }
@media (max-width: 640px) {
  .page-header h1 { max-width: none; }
}


.hero { padding: clamp(56px, 8vw, 108px) 0 0; text-align: center; }
.hero-inner { max-width: 1040px; margin: 0 auto; }
.hero h1 {
  font-size: var(--step-5); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  color: rgb(var(--ink)); max-width: none;
}
.hero h1 .word-swap-item { color: rgb(var(--teal)); }
.hero-sub {
  margin: 28px auto 0; max-width: 56ch; font-size: var(--step-1); color: rgb(var(--ink-muted)); line-height: 1.55;
}
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 28px; font-size: 12.5px; color: rgb(var(--ink-faint));
  font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.01em;
}

/* ---------- Hero quick-link cards: 4 real capabilities, doubling
   as an at-a-glance summary and navigation, not decoration ---------- */
.hero-cards {
  max-width: 1080px; margin: 64px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hero-card {
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg);
  padding: 26px 22px; text-align: left; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-md);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hero-card-icon {
  width: 42px; height: 42px; border-radius: 12px; background: rgb(var(--teal) / 0.1); color: rgb(var(--teal-ink));
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.hero-card-icon svg { width: 20px; height: 20px; }
.hero-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.hero-card p { font-size: 13px; color: rgb(var(--ink-muted)); line-height: 1.55; }

.hero-visual { margin-top: 76px; }
.hero-visual-frame {
  max-width: 1080px; margin: 0 auto; border-radius: var(--radius-lg);
  border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-visual-frame img { width: 100%; display: block; }

/* ============================================================
   PROBLEM — chaos-to-order visual, not three generic cards.
   ============================================================ */
.problem { padding: var(--space-section) 0; overflow: hidden; position: relative; z-index: 1; }
.problem-head { max-width: 620px; margin: 0 auto 72px; text-align: center; }
.problem-head h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: rgb(var(--ink)); }

/* ---------- Core story zone: Problem + Inventory + AutoDiscovery
   share one continuous background and a connecting thread, rather
   than each being an isolated section with its own color block. ---------- */
.core-story-zone { position: relative; }
.core-story-zone::before {
  content: ''; position: absolute; left: 44px; top: 120px; bottom: 120px; width: 1px;
  background: linear-gradient(to bottom, transparent, rgb(var(--border-strong)) 10%, rgb(var(--border-strong)) 90%, transparent);
  z-index: 0; pointer-events: none;
}
.story-beat {
  position: absolute; left: 44px; width: 9px; height: 9px; border-radius: 999px;
  background: rgb(var(--teal)); transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgb(var(--paper-2));
}
@media (max-width: 980px) {
  .core-story-zone::before, .story-beat { display: none; }
}


.problem-transform {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px;
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
}
.chaos-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chaos-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); font-size: 13px; color: rgb(var(--ink-2));
  box-shadow: var(--shadow-sm);
}
.chaos-tag svg { width: 14px; height: 14px; opacity: 0.6; }
.chaos-tag:nth-child(1) { transform: rotate(-5deg); }
.chaos-tag:nth-child(2) { transform: rotate(3deg); margin-top: 10px; }
.chaos-tag:nth-child(3) { transform: rotate(-3deg); }
.chaos-tag:nth-child(4) { transform: rotate(4deg); margin-top: 6px; }
.chaos-questions { flex-basis: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.chaos-question { font-size: 13.5px; color: rgb(var(--ink-faint)); font-style: italic; }

.problem-arrow { color: rgb(var(--border-strong)); flex-shrink: 0; }
.problem-arrow svg { width: 32px; height: 32px; }

.problem-resolved {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 40px 32px; border-radius: var(--radius-lg); background: rgb(var(--ink)); color: rgb(var(--paper));
}
.problem-resolved .mark { font-weight: 700; font-size: 20px; }
.problem-resolved p { font-size: 13.5px; color: rgb(255 255 255 / 0.65); }

/* ============================================================
   INVENTORY — large, breathing product visual. Different
   composition than Problem: left-aligned text, then the UI
   itself does the work at near-full width.
   ============================================================ */
.inventory { padding: var(--space-section) 0; position: relative; z-index: 1; }
.inventory-composition {
  max-width: 1400px; margin: 0 auto; padding: 0 28px 0 88px;
  display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start;
}
.inventory-head { grid-column: 1; max-width: none; margin: 0; padding: 40px 0 0; }
.inventory-head h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: rgb(var(--ink)); margin-bottom: 16px; }
.inventory-head p { font-size: 15px; color: rgb(var(--ink-muted)); line-height: 1.6; }
.section-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  font-size: 13.5px; font-weight: 600; color: rgb(var(--teal-ink)); text-decoration: none;
}
.section-more svg { width: 13px; height: 13px; transition: transform 200ms var(--ease); }
.section-more:hover svg { transform: translateX(3px); }
.inventory-visual { grid-column: 2; max-width: none; margin: 0; padding: 0; }
.inventory-frame {
  border-radius: var(--radius-lg); border: 1px solid rgb(var(--border));
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.inventory-frame img { width: 100%; display: block; }
@media (max-width: 980px) {
  /* The story-thread this extra left padding was clearing is hidden
     below this same breakpoint (see .core-story-zone::before), so
     there's nothing left to clear here - back to the standard gutter. */
  .inventory-composition { grid-template-columns: 1fr; padding-left: 28px; }
  .inventory-head, .inventory-visual { grid-column: 1; }
  .inventory-head { padding-top: 0; margin-bottom: 32px; }
}

/* ============================================================
   AUTODISCOVERY — technical flow diagram + field ownership split.
   ============================================================ */
.autodiscovery { padding: var(--space-section) 0; position: relative; z-index: 1; }
.autodiscovery-head { max-width: 620px; margin: 0 auto 20px; text-align: center; padding: 0 28px; }
.autodiscovery-head h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: rgb(var(--ink)); margin-bottom: 16px; }
.autodiscovery-head p { font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.6; }

.flow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 900px; margin: 64px auto; padding: 0 28px; flex-wrap: wrap;
}
.flow-node {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 26px; border-radius: var(--radius-md); background: rgb(var(--paper));
  border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-sm);
  min-width: 130px;
}
.flow-node-icon {
  width: 36px; height: 36px; border-radius: 10px; background: rgb(var(--teal) / 0.1); color: rgb(var(--teal-ink));
  display: flex; align-items: center; justify-content: center;
}
.flow-node-icon svg { width: 18px; height: 18px; }
.flow-node span { font-size: 13px; font-weight: 600; color: rgb(var(--ink)); }
.flow-node.is-nodavio { background: rgb(var(--ink)); border-color: rgb(var(--ink)); }
.flow-node.is-nodavio .flow-node-icon { background: rgb(255 255 255 / 0.14); color: rgb(var(--paper)); }
.flow-node.is-nodavio span { color: rgb(var(--paper)); }
.flow-arrow { color: rgb(var(--border-strong)); flex-shrink: 0; }
.flow-arrow svg { width: 22px; height: 22px; }
@media (max-width: 620px) {
  .flow { flex-direction: column; }
  .flow-arrow svg { transform: rotate(90deg); }
}

.fields-split { max-width: 820px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.fields-col h4 { font-size: 12px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--ink-faint)); margin-bottom: 16px; }
.fields-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fields-col li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgb(var(--ink-2)); }
.fields-col li svg { width: 15px; height: 15px; flex-shrink: 0; }
.fields-col.is-auto li svg { color: rgb(var(--teal-ink)); }
.fields-col.is-human li svg { color: rgb(var(--ink-faint)); }
@media (max-width: 560px) {
  .fields-split { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   HISTORY — vertical timeline, progressively revealed.
   ============================================================ */
.history { padding: var(--space-section) 0; color: rgb(var(--ink)); }
.history-head { max-width: 620px; margin: 0 auto 24px; text-align: center; padding: 0 28px; }
.history-head h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: rgb(var(--ink)); margin-bottom: 18px; }
.history-head p { font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.6; }
.history-note { max-width: 560px; margin: 8px auto 0; text-align: center; font-size: 13.5px; color: rgb(var(--ink-faint)); line-height: 1.65; padding: 0 28px; }

.timeline { max-width: 620px; margin: 72px auto 0; padding: 0 28px 0 52px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 33px; top: 6px; bottom: 6px; width: 1px; background: rgb(var(--border-strong)); }
.timeline-item { position: relative; padding-bottom: 44px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -24px; top: 2px; width: 11px; height: 11px; border-radius: 999px;
  background: rgb(var(--teal)); box-shadow: 0 0 0 4px rgb(var(--paper)), 0 0 0 5px rgb(var(--border));
}
.timeline-when { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.04em; color: rgb(var(--teal-ink)); margin-bottom: 6px; }
.timeline-what { font-size: 15px; color: rgb(var(--ink)); }
.timeline-what .diff { color: rgb(var(--ink-muted)); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }

/* ============================================================
   ATTENTION — illustrative signal cards, not a generic grid.
   ============================================================ */
.attention { padding: var(--space-section) 0; }
.attention-head { max-width: 620px; margin: 0 auto 20px; text-align: center; padding: 0 28px; }
.attention-head h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: rgb(var(--ink)); margin-bottom: 16px; }
.attention-head p { font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.6; }
.attention-note { text-align: center; font-size: 12.5px; color: rgb(var(--ink-faint)); margin-bottom: 56px; font-style: italic; }

.signals { max-width: 1000px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.signal-card {
  padding: 24px 20px; border-radius: var(--radius-md); background: rgb(var(--paper));
  border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-sm);
}
.signal-num { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); font-family: 'IBM Plex Mono', monospace; }
.signal-num.is-warn { color: rgb(var(--warn)); }
.signal-label { font-size: 13px; color: rgb(var(--ink-muted)); margin-top: 8px; line-height: 1.4; }
@media (max-width: 780px) {
  .signals { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MAINTENANCE & REPORTS — split layout, screenshot + explanation,
   alternating sides for rhythm.
   ============================================================ */
.split-feature { padding: var(--space-section-tight) 0; }
.split-feature .container-wide { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.split-feature.is-reversed .container-wide { grid-template-columns: 1.15fr 1fr; }
.split-feature.is-reversed .split-text { order: 2; }
.split-text .eyebrow { display: block; margin-bottom: 14px; }
.split-text h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: rgb(var(--ink)); margin-bottom: 16px; }
.split-text p { font-size: 15px; color: rgb(var(--ink-muted)); line-height: 1.65; }
.split-text ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.split-text ul li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: rgb(var(--ink-2)); }
.split-text ul li svg { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; color: rgb(var(--teal-ink)); }
.split-frame { border-radius: var(--radius-lg); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-lg); overflow: hidden; }
.split-frame img { width: 100%; display: block; }
@media (max-width: 900px) {
  .split-feature .container-wide, .split-feature.is-reversed .container-wide { grid-template-columns: 1fr; }
  .split-feature.is-reversed .split-text { order: 0; }
}

/* ============================================================
   USE CASES — tabbed, changes on interaction (not scroll-linked,
   but still visibly alive rather than static).
   ============================================================ */
/* ============================================================
   REPORTS — data as the visual centerpiece, not another
   screenshot-in-a-box split (that's Maintenance's pattern).
   ============================================================ */
.reports-story { padding: var(--space-section-tight) 0; color: rgb(var(--ink)); }
.reports-story-head { max-width: 640px; margin: 0 auto 56px; text-align: center; padding: 0 28px; }
.reports-story-head h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); margin: 14px 0 16px; }
.reports-story-head p { font-size: 15px; color: rgb(var(--ink-muted)); line-height: 1.6; }

.risk-rank { max-width: 760px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; gap: 4px; }
.risk-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgb(var(--border)); }
.risk-row-rank { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgb(var(--ink-muted)); }
.risk-row-name { font-size: 14.5px; font-weight: 600; color: rgb(var(--ink)); }
.risk-row-dept { font-size: 12.5px; color: rgb(var(--ink-muted)); font-weight: 400; margin-left: 8px; }
.risk-bar-track { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgb(var(--border)); overflow: hidden; margin-top: 2px; }
.risk-bar-fill { display: block; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--warn)), rgb(200 90 40)); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease); }
.risk-row.is-visible .risk-bar-fill { transform: scaleX(var(--fill, 1)); }
.risk-row-score { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgb(var(--ink-2)); }

.reports-story-foot { max-width: 640px; margin: 44px auto 0; text-align: center; padding: 0 28px; }
.reports-story-foot .hero-ctas { justify-content: center; }

.usecases { padding: var(--space-section-tight) 0; }
.usecases-head { max-width: 560px; margin: 0 auto 44px; text-align: center; padding: 0 28px; }
.usecases-head h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.usecases-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; padding: 0 28px; }
.usecases-tab {
  font: inherit; font-size: 13.5px; font-weight: 500; color: rgb(var(--ink-muted));
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); border-radius: 999px;
  padding: 10px 20px; cursor: pointer; transition: all 200ms var(--ease);
}
.usecases-tab.is-active { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: rgb(var(--paper)); }
.usecases-panel { max-width: 640px; margin: 0 auto; text-align: center; padding: 0 28px; display: none; }
.usecases-panel.is-active { display: block; animation: uc-fade 380ms var(--ease); }
.usecases-panel h3 { font-size: 20px; font-weight: 700; color: rgb(var(--ink)); margin-bottom: 10px; }
.usecases-panel p { font-size: 15px; color: rgb(var(--ink-muted)); line-height: 1.6; }
@keyframes uc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   BUILT FOR ONE JOB — confident, text-only.
   ============================================================ */
.focused { padding: var(--space-section-tight) 0; text-align: center; }
.focused .container-narrow h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); margin-bottom: 18px; }
.focused .container-narrow p { font-size: 16px; color: rgb(var(--ink-muted)); line-height: 1.65; }

/* ============================================================
   SECURITY — simple factual list, no invented certifications.
   ============================================================ */
.security { padding: var(--space-section-tight) 0; color: rgb(var(--ink)); }
.security-intro { max-width: 640px; margin: 0 auto 56px; text-align: center; padding: 0 28px; }
.security-intro .eyebrow { display: block; margin-bottom: 14px; }
.security-intro p.lead { font-size: var(--step-1); color: rgb(var(--ink-2)); line-height: 1.5; font-weight: 500; }
.security .container h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 52px; color: rgb(var(--ink)); }
.security-grid { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 0 28px; }
.security-item { text-align: center; }
.security-icon {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 12px; background: rgb(var(--teal) / 0.1);
  display: flex; align-items: center; justify-content: center; color: rgb(var(--teal-ink));
}
.security-icon svg { width: 20px; height: 20px; }
.security-item h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: rgb(var(--ink)); }
.security-item p { font-size: 12.5px; color: rgb(var(--ink-muted)); line-height: 1.5; }
@media (max-width: 780px) { .security-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   FOUNDER — human, understated.
   ============================================================ */
.founder { padding: var(--space-section) 0; text-align: center; }
.founder-eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 36px; }
.founder-photo {
  width: 52px; height: 52px; border-radius: 999px; background: linear-gradient(155deg, rgb(var(--teal) / 0.25), rgb(var(--paper-3)));
  border: 1px solid rgb(var(--border)); flex-shrink: 0;
}
.founder-eyebrow-row .eyebrow { text-align: left; }
.founder-quote {
  max-width: 780px; margin: 0 auto 32px; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: rgb(var(--ink));
}
.founder-context { max-width: 540px; margin: 0 auto; font-size: 14.5px; color: rgb(var(--ink-muted)); line-height: 1.65; }
.founder-context .name { display: block; margin-top: 16px; font-size: 13px; color: rgb(var(--ink-faint)); font-family: 'IBM Plex Mono', monospace; }

/* ============================================================
   EARLY ACCESS + FINAL CTA
   ============================================================ */
.early-access { padding: var(--space-section-tight) 0; text-align: center; }
.early-access .container-narrow h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); margin-bottom: 16px; }
.early-access .container-narrow p { font-size: 15px; color: rgb(var(--ink-muted)); line-height: 1.6; margin-bottom: 28px; }

.final-cta { padding: 96px 0; text-align: center; color: rgb(var(--ink)); }
.final-cta h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; color: rgb(var(--ink)); }
.final-cta p { font-size: 15px; color: rgb(var(--ink-muted)); max-width: 46ch; margin: 0 auto 32px; line-height: 1.6; }
.final-cta .hero-ctas { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { padding: 64px 0 32px; border-top: 1px solid rgb(var(--border)); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 28px; margin-bottom: 48px; }
.footer-brand .site-logo { margin-bottom: 12px; }
.footer-brand p { font-size: 13px; color: rgb(var(--ink-faint)); max-width: 30ch; line-height: 1.6; }
.footer-col h5 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--ink-faint)); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: rgb(var(--ink-2)); text-decoration: none; }
.footer-col a:hover { color: rgb(var(--ink)); }
.footer-static { font-size: 13.5px; color: rgb(var(--ink-faint)); }
.footer-bottom { padding-top: 28px; border-top: 1px solid rgb(var(--border)); font-size: 12.5px; color: rgb(var(--ink-faint)); }
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}







@media (max-width: 780px) {
  .problem-transform { grid-template-columns: 1fr; }
  .problem-arrow { transform: rotate(90deg); margin: 0 auto; }
}

@media (max-width: 900px) {
  .hero-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero { text-align: left; }
  .hero-inner { max-width: none; }
  .hero-sub { margin-left: 0; }
  .hero-ctas { justify-content: flex-start; }
  .hero-cards { grid-template-columns: 1fr; margin-top: 48px; }
}



/* ============================================================
   PRODUCT OVERVIEW — capability grid, richer than the hero cards
   ============================================================ */
.capability-grid { max-width: var(--container); margin: 0 auto; padding: 0 28px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.capability-card {
  display: block; text-decoration: none; color: inherit; padding: 30px 26px; border-radius: var(--radius-lg);
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.capability-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgb(var(--border-strong)); }
.capability-card-icon {
  width: 44px; height: 44px; border-radius: 12px; background: rgb(var(--teal) / 0.1); color: rgb(var(--teal-ink));
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.capability-card-icon svg { width: 20px; height: 20px; }
.capability-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.capability-card p { font-size: 13.5px; color: rgb(var(--ink-muted)); line-height: 1.6; margin-bottom: 16px; }
.capability-card .card-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: rgb(var(--teal-ink)); }
.capability-card .card-link svg { width: 12px; height: 12px; transition: transform 200ms var(--ease); }
.capability-card:hover .card-link svg { transform: translateX(3px); }
@media (max-width: 900px) { .capability-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .capability-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SUBPAGE DETAIL SECTIONS — reused across all six product pages
   ============================================================ */
.detail-section { padding: var(--space-section-tight) 0; }

.detail-grid { max-width: var(--container); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.detail-block h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: rgb(var(--ink)); margin-bottom: 12px; }
.detail-block p { font-size: 14.5px; color: rgb(var(--ink-muted)); line-height: 1.65; }
@media (max-width: 780px) { .detail-grid { grid-template-columns: 1fr; gap: 32px; } }

.related-pages { padding: var(--space-section-tight) 0; }
.related-pages-head { max-width: var(--container); margin: 0 auto 32px; padding: 0 28px; }
.related-pages-head h2 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.related-grid { max-width: var(--container); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HISTORY PAGE — the timeline is the page's spine, not a
   section within a generic template. Annotations attach directly
   to specific entries rather than living in separate blocks.
   ============================================================ */
.history-page-hero { padding: 48px 28px 8px; text-align: center; position: relative; z-index: 1; }
.history-page-hero .eyebrow { color: rgb(var(--teal-ink)); }
.history-page-hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: rgb(var(--ink)); margin: 14px auto 16px; max-width: 1040px; }
.history-page-hero p { max-width: 52ch; margin: 0 auto; font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.55; }

.history-spine-section { padding: 48px 0 var(--space-section); color: rgb(var(--ink)); }
.history-spine {
  max-width: 900px; margin: 0 auto; padding: 0 28px 0 52px; position: relative;
  display: grid; grid-template-columns: minmax(0, 460px) 1fr; column-gap: 40px;
}
.history-spine::before { content: ''; position: absolute; left: 33px; top: 6px; bottom: 6px; width: 1px; background: rgb(var(--border-strong)); }
.spine-entry { grid-column: 1; position: relative; padding-bottom: 46px; }
.spine-entry:last-child { padding-bottom: 0; }
.spine-annotation {
  /* An actual frosted-glass panel now that it's sitting on a light
     surface instead of a dark one: translucent white + blur, not just
     a flat tint, so it reads as ice/glass rather than another plain card. */
  grid-column: 2; align-self: start; margin-top: -4px;
  padding: 18px 20px; border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.7); box-shadow: var(--shadow-sm);
}
.spine-annotation p { font-size: 13px; color: rgb(var(--ink-muted)); line-height: 1.55; }
.spine-annotation .label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--teal-ink)); margin-bottom: 8px; }
@media (max-width: 860px) {
  .history-spine { grid-template-columns: 1fr; }
  .spine-annotation { grid-column: 1; margin: 12px 0 30px; }
}

.history-close { padding: var(--space-section-tight) 0; text-align: center; }
.history-close p.lead { max-width: 46ch; margin: 0 auto 28px; font-size: var(--step-1); color: rgb(var(--ink-muted)); line-height: 1.5; }

/* ============================================================
   AUTODISCOVERY PAGE — a genuine data-flow narrative: process,
   then the actual data, then how it lands, then what it enables.
   Four visually distinct stages connected by one spine.
   ============================================================ */
.discovery-hero { padding: 48px 28px 8px; text-align: center; position: relative; z-index: 1; }
.discovery-hero .eyebrow { color: rgb(var(--teal-ink)); }
.discovery-hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: rgb(var(--ink)); margin: 14px auto 16px; max-width: 1040px; }
.discovery-hero p { max-width: 52ch; margin: 0 auto; font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.55; }

.flow-stages { max-width: 720px; margin: 56px auto 0; padding: 0 28px 80px 60px; position: relative; }
.flow-stages::before { content: ''; position: absolute; left: 39px; top: 20px; bottom: 60px; width: 1px; background: linear-gradient(to bottom, rgb(var(--border-strong)), rgb(var(--border-strong)) 85%, transparent); }
.flow-stage { position: relative; padding-bottom: 64px; }
.flow-stage:last-child { padding-bottom: 0; }
.flow-stage-num {
  position: absolute; left: -60px; top: 0; width: 30px; height: 30px; border-radius: 999px;
  background: rgb(var(--paper)); border: 1.5px solid rgb(var(--ink)); color: rgb(var(--ink));
  display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
}
.flow-stage-label { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--teal-ink)); margin-bottom: 8px; }
.flow-stage h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; color: rgb(var(--ink)); margin-bottom: 10px; }
.flow-stage p { font-size: 14.5px; color: rgb(var(--ink-muted)); line-height: 1.6; max-width: 46ch; margin-bottom: 20px; }

/* Stage 2: fields appearing as if discovered live */
.discovery-result { max-width: 420px; border-radius: var(--radius-md); border: 1px solid rgb(var(--border)); background: rgb(var(--paper)); box-shadow: var(--shadow-md); padding: 6px; }
.discovery-result-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 8px; }
.discovery-result-row:nth-child(odd) { background: rgb(var(--paper-2)); }
.discovery-result-row .k { font-size: 12.5px; color: rgb(var(--ink-faint)); }
.discovery-result-row .v { font-size: 12.5px; font-weight: 600; color: rgb(var(--ink)); font-family: 'IBM Plex Mono', monospace; }

/* Stage 3: before/after row transformation */
.before-after { display: flex; align-items: center; gap: 16px; max-width: 460px; flex-wrap: wrap; }
.ba-card { flex: 1; min-width: 180px; border-radius: 10px; border: 1px dashed rgb(var(--border-strong)); padding: 16px; }
.ba-card.is-after { border-style: solid; border-color: rgb(var(--teal)); background: rgb(var(--teal) / 0.04); }
.ba-card .ba-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--ink-faint)); margin-bottom: 10px; display: block; }
.ba-card .ba-line { height: 8px; border-radius: 4px; background: rgb(var(--border-soft)); margin-bottom: 7px; }
.ba-card .ba-line.short { width: 60%; }
.ba-card.is-after .ba-line { background: none; height: auto; font-size: 12px; color: rgb(var(--ink-2)); font-family: 'IBM Plex Mono', monospace; margin-bottom: 5px; }
.ba-arrow { color: rgb(var(--ink-faint)); flex-shrink: 0; }

/* Stage 4: outcome chips */
.outcome-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.outcome-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: rgb(var(--paper-2)); font-size: 13px; color: rgb(var(--ink-2)); }
.outcome-chip svg { width: 14px; height: 14px; color: rgb(var(--teal-ink)); }
@media (max-width: 640px) {
  .flow-stages { padding-left: 44px; }
  .flow-stage-num { left: -44px; width: 26px; height: 26px; font-size: 11px; }
}

/* ============================================================
   MAINTENANCE PAGE — a workflow journey reusing the flow-stages
   spine, with its own distinct stage visuals: issue card,
   checklist template, live checklist, auto-advance, history entry.
   ============================================================ */
.issue-card { max-width: 380px; border-radius: var(--radius-md); border: 1px solid rgb(var(--border)); background: rgb(var(--paper)); box-shadow: var(--shadow-md); padding: 18px 20px; }
.issue-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.issue-card-status { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--warn)); background: rgb(var(--warn) / 0.1); padding: 3px 9px; border-radius: 999px; }
.issue-card-title { font-size: 14px; font-weight: 600; color: rgb(var(--ink)); margin-bottom: 4px; }
.issue-card-meta { font-size: 12px; color: rgb(var(--ink-faint)); }

.checklist-template { max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.checklist-template-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgb(var(--border-soft)); font-size: 13px; color: rgb(var(--ink-2)); }
.checklist-template-row svg { width: 13px; height: 13px; color: rgb(var(--ink-faint)); flex-shrink: 0; }

.advance-visual { display: flex; align-items: center; gap: 12px; }
.advance-node { padding: 10px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid rgb(var(--border)); background: rgb(var(--paper)); color: rgb(var(--ink-faint)); }
.advance-node.is-current { background: rgb(var(--ink)); color: rgb(var(--paper)); border-color: rgb(var(--ink)); }
.advance-visual svg { width: 16px; height: 16px; color: rgb(var(--ink-faint)); }

.history-preview { max-width: 380px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: rgb(var(--ink)); }
.history-preview .dot { width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--teal)); flex-shrink: 0; }
.history-preview .txt { font-size: 12.5px; color: rgb(255 255 255 / 0.8); }
.history-preview .txt .diff { color: rgb(255 255 255 / 0.5); font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }

/* ============================================================
   REPORTS PAGE — a funnel narrative: the whole fleet, then the
   signal that matters, then the decision. New visual technique:
   a fleet grid, not reused from elsewhere on the site.
   ============================================================ */
.reports-page-hero { padding: 48px 28px 8px; text-align: center; position: relative; z-index: 1; }
.reports-page-hero .eyebrow { color: rgb(var(--teal-ink)); }
.reports-page-hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: rgb(var(--ink)); margin: 14px auto 16px; max-width: 1040px; }
.reports-page-hero p { max-width: 52ch; margin: 0 auto; font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.55; }

.funnel-stage { padding: 64px 0; }
.funnel-stage-head { max-width: 560px; margin: 0 auto 40px; text-align: center; padding: 0 28px; }
.funnel-stage-label { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--teal-ink)); margin-bottom: 10px; display: block; }
.funnel-stage-head h2 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); margin-bottom: 12px; }
.funnel-stage-head p { font-size: 14.5px; color: rgb(var(--ink-muted)); line-height: 1.6; }

.fleet-grid { max-width: 520px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.fleet-cell { aspect-ratio: 1; border-radius: 4px; background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); }
.fleet-cell.is-watch { background: rgb(var(--warn) / 0.35); }
.fleet-cell.is-risk { background: rgb(var(--warn)); }

.funnel-stage.is-tinted { color: rgb(var(--ink)); }

.dept-bars { max-width: 480px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; gap: 16px; }
.dept-bar-row { display: flex; align-items: center; gap: 14px; }
.dept-bar-row .name { width: 90px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: rgb(var(--ink-2)); }
.dept-bar-row .track { flex: 1; height: 8px; border-radius: 999px; background: rgb(var(--paper-2)); overflow: hidden; }
.dept-bar-row .track .fill { height: 100%; border-radius: 999px; background: rgb(var(--teal)); }
.dept-bar-row .val { width: 26px; text-align: right; font-size: 12px; color: rgb(var(--ink-faint)); font-family: 'IBM Plex Mono', monospace; }

.decision-panel {
  max-width: 480px; margin: 0 auto; padding: 28px 30px; border-radius: var(--radius-lg);
  background: rgb(var(--ink)); color: rgb(var(--paper)); text-align: left;
}
.decision-panel .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(255 255 255 / 0.45); margin-bottom: 8px; display: block; }
.decision-panel .name { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.decision-panel .sub { font-size: 13px; color: rgb(255 255 255 / 0.55); margin-bottom: 20px; }
.decision-panel .actions { display: flex; gap: 10px; }
@media (max-width: 560px) {
  .fleet-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ============================================================
   INVENTORY PAGE — the product UI itself is the centerpiece.
   A zoom narrative: the whole list, then one machine explored
   in full, then its specific fields called out.
   ============================================================ */
.inv-page-hero { padding: 48px 28px 8px; text-align: center; position: relative; z-index: 1; }
.inv-page-hero .eyebrow { color: rgb(var(--teal-ink)); }
.inv-page-hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: rgb(var(--ink)); margin: 14px auto 16px; max-width: 1040px; }
.inv-page-hero p { max-width: 52ch; margin: 0 auto; font-size: var(--step-0); color: rgb(var(--ink-muted)); line-height: 1.55; }

.inv-visual-block { padding: 40px 0; }
.inv-visual-label { max-width: 640px; margin: 0 auto 24px; text-align: center; padding: 0 28px; }
.inv-visual-label .step { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--teal-ink)); margin-bottom: 8px; display: block; }
.inv-visual-label h2 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.inv-full-frame { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.inv-full-frame .inner { border-radius: var(--radius-lg); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-lg); overflow: hidden; }
.inv-full-frame img { width: 100%; display: block; }

.inv-zoom-connector { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 0; }
.inv-zoom-connector svg { color: rgb(var(--border-strong)); }
.inv-zoom-connector span { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgb(var(--ink-faint)); letter-spacing: 0.02em; }

.field-callouts { max-width: 900px; margin: 56px auto 0; padding: 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.field-callout { padding: 22px 20px; border-radius: var(--radius-md); background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); }
.field-callout .num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgb(var(--teal-ink)); margin-bottom: 10px; display: block; }
.field-callout h4 { font-size: 14.5px; font-weight: 700; color: rgb(var(--ink)); margin-bottom: 8px; }
.field-callout p { font-size: 13px; color: rgb(var(--ink-muted)); line-height: 1.55; }
@media (max-width: 780px) { .field-callouts { grid-template-columns: 1fr; } }

/* ============================================================
   PRODUCT OVERVIEW — a system map showing how the five
   capabilities actually connect, not a flat card grid.
   ============================================================ */
.system-map-section { padding: 24px 0 var(--space-section-tight); }
.system-map { position: relative; max-width: 640px; height: 460px; margin: 0 auto; }
.system-map svg.connectors { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-node {
  position: absolute; width: 148px; padding: 14px 16px; border-radius: var(--radius-md);
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.map-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.map-node.is-center { background: rgb(var(--ink)); color: rgb(var(--paper)); border-color: rgb(var(--ink)); width: 160px; }
.map-node-icon { width: 28px; height: 28px; border-radius: 8px; background: rgb(var(--teal) / 0.12); color: rgb(var(--teal-ink)); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.map-node.is-center .map-node-icon { background: rgb(255 255 255 / 0.14); color: rgb(var(--paper)); }
.map-node-icon svg { width: 14px; height: 14px; }
.map-node h4 { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.map-node p { font-size: 11px; color: rgb(var(--ink-muted)); line-height: 1.4; }
.map-node.is-center p { color: rgb(255 255 255 / 0.6); }
.map-node.pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.map-node.pos-tl { top: 0; left: 0; }
.map-node.pos-tr { top: 0; right: 0; }
.map-node.pos-bl { bottom: 0; left: 0; }
.map-node.pos-br { bottom: 0; right: 0; }
@media (max-width: 720px) {
  .system-map { height: auto; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .system-map svg.connectors { display: none; }
  .map-node { position: static; width: auto; }
  .map-node.pos-center, .map-node.pos-tl, .map-node.pos-tr, .map-node.pos-bl, .map-node.pos-br { transform: none; top: auto; left: auto; right: auto; bottom: auto; }
  .map-node.is-center { order: -1; }
}

/* ============================================================
   PRICING TEASER — homepage summary, links out to the full page.
   ============================================================ */
.pricing-teaser { padding: var(--space-section-tight) 0 0; text-align: center; }
.pricing-teaser .eyebrow { display: block; margin-bottom: 14px; }
.pricing-teaser h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); margin-bottom: 12px; }
.pricing-teaser > .container-narrow > p { font-size: 15px; color: rgb(var(--ink-muted)); }
.pricing-teaser-card {
  max-width: 460px; margin: 40px auto 0; padding: 36px 32px; background: rgb(var(--paper));
  border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.pricing-teaser-figure { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pricing-teaser-amount { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); font-family: 'IBM Plex Mono', monospace; }
.pricing-teaser-currency { font-size: var(--step-1); font-weight: 600; color: rgb(var(--ink-faint)); margin-left: 2px; }
.pricing-teaser-period { display: block; width: 100%; font-size: 13.5px; color: rgb(var(--ink-muted)); margin-top: 4px; }
.pricing-teaser-then {
  margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgb(var(--border-strong));
  font-size: 14px; color: rgb(var(--ink-2));
}
.pricing-teaser-then strong { color: rgb(var(--teal-ink)); font-family: 'IBM Plex Mono', monospace; }
.pricing-teaser-foot { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pricing-teaser-foot > span { font-size: 12px; color: rgb(var(--ink-faint)); }
.section-more {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: rgb(var(--teal-ink)); text-decoration: none;
}
.section-more svg { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.section-more:hover svg { transform: translateX(3px); }

/* ============================================================
   PRICING PAGE — one plan, explained plainly and shown as an
   interactive example rather than a vague sales pitch.
   ============================================================ */
.pricing-hero { padding: var(--space-section-tight) 0; }
.pricing-plan {
  max-width: 620px; margin: 0 auto; padding: 44px 40px; background: rgb(var(--paper));
  border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  text-align: center;
}
.pricing-plan-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgb(var(--teal) / 0.1); color: rgb(var(--teal-ink)); font-size: 12px; font-weight: 600; margin-bottom: 22px; }
.pricing-plan-figure { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pricing-plan-amount { font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem); font-weight: 700; letter-spacing: -0.03em; font-family: 'IBM Plex Mono', monospace; color: rgb(var(--ink)); }
.pricing-plan-currency { font-size: var(--step-2); font-weight: 600; color: rgb(var(--ink-faint)); }
.pricing-plan-unit { display: block; width: 100%; font-size: 14px; color: rgb(var(--ink-muted)); margin-top: 6px; }
.pricing-plan-includes {
  margin-top: 26px; padding: 16px 20px; background: rgb(var(--paper-2)); border-radius: var(--radius-md);
  font-size: 14.5px; color: rgb(var(--ink-2)); line-height: 1.5;
}
.pricing-plan-includes strong { font-family: 'IBM Plex Mono', monospace; color: rgb(var(--teal-ink)); }
.pricing-plan-overage { margin-top: 14px; font-size: 14.5px; color: rgb(var(--ink-2)); }
.pricing-plan-overage strong { font-family: 'IBM Plex Mono', monospace; color: rgb(var(--ink)); }
.pricing-plan-vat { margin-top: 18px; font-size: 12px; color: rgb(var(--ink-faint)); }
.pricing-plan-cta { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Interactive slider example: drag to see the monthly
   price at any fleet size, so the model is felt, not just read. ---------- */
.pricing-calc {
  max-width: 620px; margin: 28px auto 0; padding: 28px 32px; background: rgb(var(--paper));
  border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  text-align: left;
}
.pricing-calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pricing-calc-head h3 { font-size: 14px; font-weight: 600; color: rgb(var(--ink)); }
.pricing-calc-result { font-size: 22px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; color: rgb(var(--teal-ink)); }
.pricing-calc input[type="range"] {
  width: 100%; margin: 14px 0 8px; accent-color: rgb(var(--teal));
}
.pricing-calc-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: rgb(var(--ink-faint)); font-family: 'IBM Plex Mono', monospace; }
.pricing-calc-note { margin-top: 14px; font-size: 12.5px; color: rgb(var(--ink-muted)); line-height: 1.5; }

/* ---------- Plain-language breakdown table ---------- */
.pricing-breakdown { padding: var(--space-section-tight) 0; }
.pricing-breakdown-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.pricing-breakdown-head h2 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); margin-bottom: 10px; }
.pricing-breakdown-head p { font-size: 14.5px; color: rgb(var(--ink-muted)); }
.pricing-table { max-width: 720px; margin: 0 auto; border-collapse: separate; border-spacing: 0; width: 100%; background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pricing-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(var(--ink-faint)); font-weight: 600; padding: 12px 20px; background: rgb(var(--paper-3)); border-bottom: 1px solid rgb(var(--border)); }
.pricing-table td { padding: 16px 20px; font-size: 14px; color: rgb(var(--ink-2)); border-bottom: 1px solid rgb(var(--border)); }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table td.num { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: rgb(var(--ink)); text-align: right; }

/* ---------- FAQ accordion ---------- */
.pricing-faq { padding: var(--space-section-tight) 0; }
.pricing-faq-head { max-width: 560px; margin: 0 auto 36px; text-align: center; }
.pricing-faq-head h2 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid rgb(var(--border)); border-radius: var(--radius-md); background: rgb(var(--paper)); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 14.5px; font-weight: 600; color: rgb(var(--ink));
}
.faq-question svg { width: 16px; height: 16px; flex-shrink: 0; color: rgb(var(--ink-faint)); transition: transform 220ms var(--ease); }
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease); }
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { padding: 0 20px 18px; font-size: 13.5px; color: rgb(var(--ink-muted)); line-height: 1.6; max-width: 62ch; }
@media (max-width: 640px) {
  .pricing-plan { padding: 32px 22px; }
  .pricing-calc, .pricing-teaser-card { padding: 24px 20px; }
}

/* ============================================================
   SUPPORT
   ============================================================ */
.support-channels-section { padding: 8px 0 var(--space-section-tight); }
.support-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.support-channel {
  padding: 28px 26px; border-radius: var(--radius-lg);
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.support-channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgb(var(--border-strong)); }
.support-channel-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px;
  background: rgb(var(--teal) / 0.1); color: rgb(var(--teal-ink));
  display: flex; align-items: center; justify-content: center;
}
.support-channel-icon svg { width: 20px; height: 20px; }
.support-channel h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.support-channel p { font-size: 13.5px; color: rgb(var(--ink-muted)); line-height: 1.6; margin-bottom: 14px; }
@media (max-width: 900px) { .support-channels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .support-channels { grid-template-columns: 1fr; } }

/* ============================================================
   STATUS — states are set by app.js after each live check
   ============================================================ */
.status-section { padding: 8px 0 var(--space-section-tight); }
.status-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: var(--radius-lg); margin-bottom: 24px;
  background: rgb(var(--paper)); border: 1px solid rgb(var(--border)); box-shadow: var(--shadow-sm);
}
.status-banner strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.status-banner-sub { display: block; margin-top: 3px; font-size: 13px; color: rgb(var(--ink-muted)); }
.status-banner-dot, .status-dot {
  width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0;
  background: rgb(var(--ink-faint));
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.status-banner-dot { width: 14px; height: 14px; }
/* One shared vocabulary of states, so the banner and a row can never
   disagree about what a colour means. */
.is-up .status-banner-dot, .status-row.is-up .status-dot {
  background: rgb(var(--teal)); box-shadow: 0 0 0 4px rgb(var(--teal) / 0.14);
}
.is-down .status-banner-dot, .status-row.is-down .status-dot {
  background: rgb(190 60 50); box-shadow: 0 0 0 4px rgb(190 60 50 / 0.14);
}
.is-degraded .status-banner-dot, .status-row.is-degraded .status-dot {
  background: rgb(var(--warn)); box-shadow: 0 0 0 4px rgb(var(--warn) / 0.16);
}

.status-list { list-style: none; margin: 0; padding: 0; border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: rgb(var(--paper)); }
.status-row { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid rgb(var(--border)); }
.status-row:last-child { border-bottom: none; }
.status-name { flex: 1; font-size: 14.5px; font-weight: 600; color: rgb(var(--ink)); }
.status-desc { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: rgb(var(--ink-muted)); }
.status-state { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgb(var(--ink-muted)); white-space: nowrap; }
.status-row.is-up .status-state { color: rgb(var(--teal-ink)); }
.status-row.is-down .status-state { color: rgb(190 60 50); }
.status-note { margin-top: 20px; font-size: 12.5px; color: rgb(var(--ink-faint)); line-height: 1.6; }
@media (max-width: 560px) {
  .status-row { padding: 16px 18px; }
  .status-desc { display: none; }
}

/* ============================================================
   LEGAL — a long document, so it gets a measure and a rail
   ============================================================ */
.legal-section-wrap { padding: 8px 0 var(--space-section); }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-toc { position: sticky; top: 104px; }
.legal-toc h4 {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgb(var(--ink-faint)); margin: 0 0 14px;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.legal-toc a { font-size: 13px; color: rgb(var(--ink-muted)); text-decoration: none; transition: color 180ms var(--ease); }
.legal-toc a:hover { color: rgb(var(--teal-ink)); }
.legal-body { max-width: 68ch; }
.legal-section { padding-bottom: 34px; scroll-margin-top: 110px; }
.legal-section h2 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; color: rgb(var(--ink)); margin-bottom: 12px; }
.legal-section p { font-size: 14.5px; color: rgb(var(--ink-2)); line-height: 1.7; }
.legal-section p + p { margin-top: 12px; }
.legal-meta { margin-top: 18px; font-size: 12.5px; color: rgb(var(--ink-faint)); }
.legal-meta a { color: rgb(var(--teal-ink)); text-decoration: none; }
/* Placeholder sections are marked as placeholders on the page itself -
   an unmarked draft policy reads as a commitment nobody has made. */
.legal-pending {
  padding: 14px 16px; border-radius: var(--radius-md);
  background: rgb(var(--warn) / 0.06); border: 1px dashed rgb(var(--warn) / 0.4);
  font-size: 13.5px !important; color: rgb(var(--ink-muted)) !important;
}
.legal-pending strong { color: rgb(var(--warn)); }
.legal-pending a { color: rgb(var(--teal-ink)); }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; }
  .legal-toc ul { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
}

/* Legal documents have to print: someone will file the terms they agreed to.
   The chrome goes, the table of contents goes, the measure widens. */
@media print {
  .site-nav, .mobile-menu, .site-footer, .breadcrumbs, .legal-toc, .atmosphere { display: none !important; }
  body { background: #fff !important; }
  .legal-layout { display: block !important; }
  .legal-body { max-width: none !important; }
  .legal-section { page-break-inside: avoid; padding-bottom: 18px; }
  .legal-section h2 { page-break-after: avoid; }
  a { text-decoration: none; color: #000 !important; }
}