/* =====================================================================
   PulsarOps AI - site.css
   Design system for the unified event intelligence platform site.

   Owned by the foundation agent. Page agents must NOT edit this file.
   Page-specific CSS belongs in a <style> block in that page's <head>.

   Contents
   01  Reset and document base
   02  Global tokens (palette, type, space, radius, elevation, motion)
   03  Contextual surface tokens + .section--dark / .section--light
   04  Layout primitives (.wrap, .section, .grid, .stack)
   05  Typography (.display, .h1-.h5, .lede, .meta, .eyebrow, .prose)
   06  Sticky header (translucent material + scroll edge)
   07  Primary nav + mobile sheet
   08  Buttons and links
   09  Section header
   10  Cards (.card, .feature-card, .num-card, .blog-card)
   11  Split section
   12  Numbered stage flow
   13  Stat row
   14  Comparison table
   15  Quote block
   16  Media frame (browser chrome for product screenshots)
   17  Logo strip
   18  Checklist and pill row
   19  CTA band
   20  Breadcrumb + pagination
   21  Legal layout (sticky in-page sidebar nav)
   22  Form controls
   23  Accordion
   24  Footer
   25  Reveal-on-scroll utility
   26  Small utilities
   27  Accessibility media queries (motion, transparency, contrast, print)
   ===================================================================== */


/* =====================================================================
   01  RESET AND DOCUMENT BASE
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

a { color: inherit; }

table { border-collapse: collapse; }

:target { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

/* Focus: never remove it, make it unmistakable on both surfaces. */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--blue-500);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--paper-2);
  color: var(--ink-on-paper);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible { transform: translateY(0); }


/* =====================================================================
   02  GLOBAL TOKENS
   ===================================================================== */

:root {
  /* ---- Palette (MIR styleguide + live site) -------------------- */
  --ink-900: #050B18;
  --ink-800: #0A142B;
  --ink-700: #0F1E3D;
  --ink-600: #132749;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  --blue-600: #0C3E8A;
  --blue-500: #2A69CE;
  --blue-400: #5B9BD9;
  --blue-300: #8BBEF8;

  --sky-200: #AAC9E8;
  --slate-400: #8A9BB8;
  /* Derived: the muted ink that clears 4.5:1 on --paper (6.8:1). */
  --slate-700: #48587A;
  /* Derived: hairline for light surfaces. */
  --line-ink: rgba(10, 20, 43, 0.10);
  --line-ink-strong: rgba(10, 20, 43, 0.18);

  --paper: #F7FAFF;
  --paper-2: #FFFFFF;
  --paper-3: #EDF3FC;
  --ink-on-paper: #0A142B;

  --ok: #16A34A;
  --warn: #F59E0B;

  --focus: var(--blue-300);

  /* ---- Type ---------------------------------------------------- */
  /* System-first stack. Inter is used when present locally, otherwise the
     platform UI face. No webfont request, so no render-blocking network hop
     and no external host (the CSP-free static build stays fully self-hosted). */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Size scale. Fluid where it earns it, fixed where it must stay calm. */
  --fs-display: clamp(2.625rem, 1.55rem + 3.4vw, 3.75rem);  /* 42 -> 60 */
  --fs-1:       clamp(2rem, 1.42rem + 1.9vw, 2.75rem);      /* 32 -> 44 */
  --fs-2:       clamp(1.75rem, 1.42rem + 1.05vw, 2.25rem);  /* 28 -> 36 */
  --fs-3:       clamp(1.375rem, 1.22rem + 0.5vw, 1.6875rem);/* 22 -> 27 */
  --fs-4:       1.375rem;   /* 22 */
  --fs-5:       1.125rem;   /* 18 */
  --fs-body:    1rem;       /* 16 */
  --fs-sm:      0.875rem;   /* 14 */
  --fs-meta:    0.8125rem;  /* 13 */
  --fs-micro:   0.6875rem;  /* 11 */

  /* Tracking is size specific. Large display tightens, body sits at zero,
     small caps labels open up. Never one letter-spacing for everything. */
  --tr-display: -0.032em;
  --tr-1: -0.026em;
  --tr-2: -0.021em;
  --tr-3: -0.016em;
  --tr-4: -0.011em;
  --tr-5: -0.006em;
  --tr-body: 0em;
  --tr-meta: 0.004em;
  --tr-eyebrow: 0.14em;

  /* Leading tracks size inversely. */
  --lh-display: 1.02;
  --lh-1: 1.06;
  --lh-2: 1.12;
  --lh-3: 1.22;
  --lh-4: 1.32;
  --lh-lede: 1.55;
  --lh-body: 1.65;
  --lh-tight: 1.4;

  /* ---- Space --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  --section-y: clamp(4.5rem, 2.6rem + 6.2vw, 8.5rem);
  --section-y-sm: clamp(3rem, 2rem + 3.4vw, 5rem);

  --wrap: 1200px;
  --wrap-wide: 1360px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  --header-h: 72px;

  /* ---- Radius -------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* ---- Elevation ----------------------------------------------- */
  /* Light surfaces get real shadows. Dark surfaces get borders and a
     bright inner top edge, because shadow is invisible on near-black. */
  --el-1: 0 1px 2px rgba(10, 20, 43, 0.06),
          0 2px 8px rgba(10, 20, 43, 0.05);
  --el-2: 0 2px 4px rgba(10, 20, 43, 0.06),
          0 12px 28px rgba(10, 20, 43, 0.08);
  --el-3: 0 4px 8px rgba(10, 20, 43, 0.07),
          0 28px 64px rgba(10, 20, 43, 0.14);
  --el-dark-1: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
               0 2px 12px rgba(0, 0, 0, 0.4);
  --el-dark-2: 0 1px 0 rgba(255, 255, 255, 0.07) inset,
               0 18px 48px rgba(0, 0, 0, 0.55);
  --el-dark-3: 0 1px 0 rgba(255, 255, 255, 0.09) inset,
               0 32px 80px rgba(0, 0, 0, 0.65);

  /* ---- Motion -------------------------------------------------- */
  --dur-press: 100ms;
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 0.7, 0.28, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  /* Visual analogue of a critically damped spring, for non-gesture CSS. */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1080px) {
  :root { --header-h: 76px; }
}


/* =====================================================================
   03  CONTEXTUAL SURFACE TOKENS
   Every component reads --fg / --bg / --surface / --border / --accent.
   Set the context once on a section, the components inside adapt.
   Default context is DARK, because the site is dark-led.
   ===================================================================== */

body,
.section--dark,
.ctx-dark {
  --fg: #FFFFFF;
  --fg-2: var(--sky-200);
  --fg-3: var(--slate-400);
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --surface-3: var(--ink-600);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --accent: var(--blue-300);
  --accent-solid: var(--blue-500);
  --accent-soft: rgba(42, 105, 206, 0.16);
  --shadow-1: var(--el-dark-1);
  --shadow-2: var(--el-dark-2);
  --shadow-3: var(--el-dark-3);
  --focus: var(--blue-300);
}

.section--light,
.ctx-light {
  --fg: var(--ink-on-paper);
  --fg-2: var(--slate-700);
  --fg-3: var(--slate-700);
  --bg: var(--paper);
  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --surface-3: #E3ECFA;
  --border: var(--line-ink);
  --border-strong: var(--line-ink-strong);
  --accent: var(--blue-600);
  --accent-solid: var(--blue-500);
  --accent-soft: rgba(42, 105, 206, 0.09);
  --shadow-1: var(--el-1);
  --shadow-2: var(--el-2);
  --shadow-3: var(--el-3);
  --focus: var(--blue-600);
}

body {
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Body scroll lock while the mobile sheet is open. */
body.is-locked { overflow: hidden; }


/* =====================================================================
   04  LAYOUT PRIMITIVES
   ===================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* A full-bleed band. Always pair with .section--dark or .section--light. */
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Hairline seam between two same-tone sections. */
.section--edge-top { border-top: 1px solid var(--border); }
.section--edge-bottom { border-bottom: 1px solid var(--border); }

/* Optional atmospheric wash for dark hero bands. Purely decorative. */
.section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 52% at 50% -8%, rgba(42, 105, 206, 0.30), transparent 70%),
    radial-gradient(46% 40% at 88% 4%, rgba(91, 155, 217, 0.14), transparent 72%);
}

.section--glow > * { position: relative; }

.grid {
  display: grid;
  gap: var(--sp-5);
}

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

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Vertical rhythm helper: .stack > * + * gets a gap. */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--sp-4); }
.stack--sm > * + * { margin-top: var(--sp-2); }
.stack--lg > * + * { margin-top: var(--sp-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.cluster--lg { gap: var(--sp-5); }


/* =====================================================================
   05  TYPOGRAPHY
   ===================================================================== */

.display,
.h1, .h2, .h3, .h4, .h5 {
  color: var(--fg);
  font-weight: 640;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 660;
}

.h1 {
  font-size: var(--fs-1);
  line-height: var(--lh-1);
  letter-spacing: var(--tr-1);
}

.h2 {
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  letter-spacing: var(--tr-2);
}

.h3 {
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  letter-spacing: var(--tr-3);
}

.h4 {
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  letter-spacing: var(--tr-4);
}

.h5 {
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  letter-spacing: var(--tr-5);
  font-weight: 620;
}

/* Editorial device: dim part of a headline so the claim carries. */
.h-soft { color: var(--fg-2); font-weight: 500; }
.h-accent { color: var(--accent); }

/* Standfirst under a headline. Short measure, looser leading. */
.lede {
  font-size: var(--fs-5);
  line-height: var(--lh-lede);
  letter-spacing: var(--tr-5);
  color: var(--fg-2);
  max-width: 62ch;
}

.lede--lg { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); }

.body { color: var(--fg-2); max-width: 68ch; }

.meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-meta);
  color: var(--fg-3);
}

.footnote {
  font-size: var(--fs-meta);
  line-height: 1.55;
  letter-spacing: var(--tr-meta);
  color: var(--fg-3);
  max-width: 74ch;
}

/* Small caps label that sits above a headline. */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  line-height: 1;
  font-weight: 680;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--boxed {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--accent-soft);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* Long-form body copy: blog posts, legal pages, case studies. */
.prose {
  color: var(--fg-2);
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose > * + * { margin-top: var(--sp-4); }

.prose h2 {
  color: var(--fg);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  letter-spacing: var(--tr-3);
  font-weight: 640;
  margin-top: var(--sp-8);
}

.prose h3 {
  color: var(--fg);
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  letter-spacing: var(--tr-4);
  font-weight: 640;
  margin-top: var(--sp-7);
}

.prose ul,
.prose ol {
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.prose li::marker { color: var(--accent); }

.prose strong { color: var(--fg); font-weight: 640; }

.prose a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover { text-decoration-thickness: 2px; }


/* =====================================================================
   06  STICKY HEADER
   A translucent material. Content scrolls underneath it, and the seam
   is a soft scroll edge rather than a hard 1px rule.
   ===================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 11, 24, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

/* Scroll edge effect. A short gradient fade under the bar instead of a
   divider, so the chrome reads as floating glass over the content. */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(5, 11, 24, 0.42), transparent);
  transition: opacity var(--dur) var(--ease-out);
}

/* site.js sets .is-scrolled once the page has moved past ~8px. */
.header.is-scrolled {
  background: rgba(5, 11, 24, 0.82);
  box-shadow: 0 1px 0 var(--line);
}

.header.is-scrolled::after { opacity: 1; }

.header__inner {
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.header__brand:hover { opacity: 0.82; }
.header__brand:active { transform: scale(0.97); }

/* Brand lockup = the transparent PNG mark plus a live-text wordmark.
   logo-white.svg and logo-black.svg both bake in an opaque plate, so neither
   sits on a dark surface. The mark PNG is white artwork on transparency and
   live text stays crisp at every density. */
.header__mark { width: 26px; height: 26px; flex: 0 0 auto; }

.header__word {
  font-size: 1.0625rem;
  font-weight: 660;
  letter-spacing: -0.022em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.header__word i {
  font-style: normal;
  font-weight: 560;
  color: var(--blue-300);
}

.header__spacer { flex: 1 1 auto; }

/* Page content must clear the fixed bar. Put this on <main>. */
.page { padding-top: var(--header-h); }

/* Hero pages usually want the hero to run under the glass instead. */
.page--under-header { padding-top: 0; }


/* =====================================================================
   07  PRIMARY NAV + MOBILE SHEET
   ===================================================================== */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1rem + 1.1vw, 1.375rem);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 520;
  letter-spacing: -0.004em;
  color: var(--sky-200);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-xs);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.nav__link:hover { color: #fff; }
.nav__link:active { transform: scale(0.97); }

.nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blue-300);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-settle);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: #fff; }

/* Hamburger. Icon-only, so it always carries an aria-label. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.nav-toggle:hover { background: rgba(255, 255, 255, 0.07); }
.nav-toggle:active { transform: scale(0.94); }

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-settle);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Scrim behind the sheet. Dim to focus. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(5, 11, 24, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}

.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out), visibility 0s;
}

/* The sheet itself. site.js drives translateY with a spring, so the
   transform here is only the closed resting state before JS takes over. */
.nav-sheet {
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(10, 20, 43, 0.94);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid var(--line-strong);
  box-shadow: var(--el-dark-3);
  transform: translateX(101%);
  visibility: hidden;
}

.nav-sheet.is-open { visibility: visible; }

.nav-sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: var(--tr-4);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.nav-sheet__link:hover { color: var(--blue-300); }
.nav-sheet__link:active { transform: scale(0.98); }
.nav-sheet__link[aria-current="page"] { color: var(--blue-300); }

.nav-sheet__foot {
  margin-top: auto;
  padding-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (max-width: 1079px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
}

@media (min-width: 1080px) {
  .nav-sheet,
  .nav-scrim { display: none; }
}


/* =====================================================================
   08  BUTTONS AND LINKS
   Feedback lands on pointer-down, at 100ms, never on release.
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8125rem 1.375rem;
  min-height: 46px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 620;
  letter-spacing: -0.006em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.btn:active { transform: scale(0.97); }

.btn__icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease-settle);
}

.btn:hover .btn__icon { transform: translateX(3px); }

/* Primary: the one blue button on the screen. */
.btn--primary {
  background: var(--blue-500);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 20px rgba(42, 105, 206, 0.32);
}

.btn--primary:hover {
  background: #3576DC;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
              0 10px 28px rgba(42, 105, 206, 0.42);
}

.btn--primary:active { background: var(--blue-600); }

/* Secondary: outlined, adapts to the surface it sits on. */
.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Ghost: text with a hit area, for tertiary actions and inline "more" links. */
.btn--ghost {
  background: transparent;
  color: var(--accent);
  padding-inline: var(--sp-3);
  min-height: 40px;
}

.btn--ghost:hover { background: var(--accent-soft); }

.btn--lg { padding: 1rem 1.75rem; min-height: 54px; font-size: var(--fs-body); }
.btn--sm { padding: 0.5rem 0.875rem; min-height: 36px; font-size: var(--fs-meta); }
.btn--block { width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Standalone text link with an arrow, used to end a section. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--dur) var(--ease-settle),
              transform var(--dur-press) var(--ease-out);
}

.link-arrow:hover { gap: var(--sp-3); }
.link-arrow:active { transform: scale(0.97); }

.link-inline {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link-inline:hover { text-decoration-thickness: 2px; }


/* =====================================================================
   09  SECTION HEADER
   ===================================================================== */

.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 34rem;
  margin-bottom: var(--sp-9);
}

.sec-head .lede { max-width: 58ch; }
.sec-head--wide { max-width: 46rem; }
.sec-head--center { max-width: 42rem; margin-inline: auto; text-align: center; align-items: center; }
.sec-head--center .lede { margin-inline: auto; text-align: center; }

/* Headline on the left, supporting copy on the right. */
.sec-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: var(--sp-6) var(--sp-9);
  align-items: end;
}

@media (max-width: 860px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

.sec-head__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}


/* =====================================================================
   10  CARDS
   ===================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-settle),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

.card__title {
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  letter-spacing: var(--tr-5);
  font-weight: 640;
  color: var(--fg);
}

.card__body { color: var(--fg-2); font-size: var(--fs-body); }

.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Interactive card: lifts on hover, presses on pointer-down. */
.card--link { cursor: pointer; text-decoration: none; }

.card--link:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

.card--link:active { transform: translateY(-1px) scale(0.99); }

.card--flush { background: transparent; box-shadow: none; }
.card--pad-lg { padding: var(--sp-7); }

/* Feature card: icon plate on top. */
.feature-card { gap: var(--sp-4); }

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent);
}

.feature-card__icon svg { width: 21px; height: 21px; }

/* Numbered card: 01 / 02 / 03 in the corner. */
.num-card { gap: var(--sp-3); padding-top: var(--sp-7); }

.num-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Blog card: optional media, meta line, title, excerpt. */
.blog-card {
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.blog-card__media {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-settle);
}

.blog-card--link:hover .blog-card__media img { transform: scale(1.03); }

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 640;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.blog-card__title {
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  letter-spacing: var(--tr-4);
  font-weight: 640;
  color: var(--fg);
}

.blog-card__excerpt { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6; }


/* =====================================================================
   11  SPLIT SECTION
   Copy on one side, media on the other. .split--flip reverses on desktop
   and always keeps copy first in the DOM for screen readers.
   ===================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  max-width: 34rem;
}

.split__media { min-width: 0; }

/* A left-aligned flex column shrink-wraps its children. Combined with
   text-wrap: balance that collapses a headline into a narrow ribbon, so the
   block-level text children are explicitly stretched back to full width.
   Buttons, links and eyebrows stay shrink-wrapped, which is the point of
   align-items: flex-start in the first place. */
.split__copy > h1, .split__copy > h2, .split__copy > h3, .split__copy > h4,
.split__copy > p, .split__copy > ul, .split__copy > ol, .split__copy > dl,
.split__copy > figure, .split__copy > blockquote,
.sec-head__aside > h1, .sec-head__aside > h2, .sec-head__aside > h3,
.sec-head__aside > p, .sec-head__aside > ul, .sec-head__aside > ol,
.footer__brand > p {
  align-self: stretch;
}

.split--flip .split__copy { order: 2; }
.split--flip .split__media { order: 1; }

.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--top { align-items: start; }

/* Stacked splits with a shared rhythm, for "real screens" sections. */
.split-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 2rem + 5vw, 7rem);
}

@media (max-width: 900px) {
  .split,
  .split--even { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__copy,
  .split--flip .split__media { order: 0; }
}


/* =====================================================================
   12  NUMBERED STAGE FLOW
   Three or four stages, connected. Horizontal on desktop, vertical below.
   ===================================================================== */

.flow {
  display: grid;
  grid-template-columns: repeat(var(--flow-cols, 3), minmax(0, 1fr));
  gap: var(--sp-5);
  counter-reset: flow;
}

.flow--4 { --flow-cols: 4; }

.flow__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* Connector between stages. Hidden on the last one and on small screens. */
.flow__stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--sp-5);
  height: 1px;
  background: linear-gradient(to right, var(--border-strong), transparent);
}

.flow__stage:last-child::after { display: none; }

.flow__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.flow__title {
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  letter-spacing: var(--tr-4);
  font-weight: 640;
  color: var(--fg);
}

.flow__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.flow__list li {
  position: relative;
  padding-left: var(--sp-5);
}

.flow__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.flow__note {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-meta);
  font-style: italic;
  color: var(--fg-3);
}

@media (max-width: 900px) {
  .flow,
  .flow--4 { grid-template-columns: minmax(0, 1fr); }
  .flow__stage::after {
    top: 100%;
    left: 50%;
    width: 1px;
    height: var(--sp-5);
    background: linear-gradient(to bottom, var(--border-strong), transparent);
  }
}


/* =====================================================================
   13  STAT ROW
   ===================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(var(--stats-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stats--3 { --stats-cols: 3; }
.stats--2 { --stats-cols: 2; }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-6);
  background: var(--surface);
}

.stat__value {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 660;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 22ch;
}

/* The footnote that must travel with the ROI block. */
.stats__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 74ch;
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   14  COMPARISON TABLE
   Scrolls inside its own container. The page body never scrolls sideways.
   ===================================================================== */

.cmp {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Without this the sticky thead cells leak their width into the root
     scrollWidth, which would give the page a horizontal scrollbar the
     moment the body overflow-x:hidden safety net is removed. */
  contain: layout;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}

.cmp__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cmp__table th,
.cmp__table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.cmp__table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--fg);
  font-size: var(--fs-meta);
  font-weight: 660;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* The column that is us. */
.cmp__table thead th.is-us,
.cmp__table td.is-us {
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 640;
}

.cmp__table tbody th {
  font-size: var(--fs-micro);
  font-weight: 680;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

.cmp__table td { color: var(--fg-2); }

.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: 0; }

.cmp-yes { color: var(--ok); font-weight: 700; }
.cmp-no { color: var(--fg-3); font-weight: 700; }
.cmp-part { color: var(--warn); font-weight: 640; }

.cmp__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--fg-3);
}

/* The table only overflows on narrow screens, so the hint retires above them. */
@media (min-width: 880px) {
  .cmp__hint { display: none; }
}


/* =====================================================================
   15  QUOTE BLOCK
   ===================================================================== */

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-solid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.quote__text {
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  letter-spacing: var(--tr-3);
  font-weight: 560;
  color: var(--fg);
  text-wrap: pretty;
}

.quote__attr {
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  color: var(--fg-3);
}

.quote--plain {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--accent-solid);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
}


/* =====================================================================
   16  MEDIA FRAME
   Browser-chrome shell that makes a flat product PNG read as a real screen.
   Use .frame--app for the in-product variant (no URL pill).
   ===================================================================== */

.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  box-shadow: var(--el-dark-3);
}

.section--light .frame {
  border-color: var(--line-ink-strong);
  box-shadow: var(--el-3);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 38px;
  padding-inline: var(--sp-4);
  background: linear-gradient(to bottom, #16233F, #101B32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.frame__dots {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.frame__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.frame__dots i:first-child { background: rgba(255, 255, 255, 0.26); }

.frame__pill {
  flex: 1 1 auto;
  max-width: 340px;
  margin-inline: auto;
  padding: 3px var(--sp-4);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--slate-400);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frame__body {
  position: relative;
  background: var(--ink-900);
  line-height: 0;
}

.frame__body img,
.frame__body video {
  width: 100%;
  height: auto;
}

/* Optional caption strip under a frame. */
.frame__caption {
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--slate-400);
  line-height: 1.45;
}

/* App variant: a status label instead of a URL pill. */
.frame--app .frame__pill {
  max-width: none;
  margin: 0;
  background: transparent;
  text-align: left;
  font-weight: 640;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--blue-300);
}

/* Live dot for recordings. */
.frame__live {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(91, 155, 217, 0.22);
}

/* Hero frame gets extra lift and a subtle perspective tilt on wide screens. */
.frame--hero { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6),
                           0 0 0 1px rgba(255, 255, 255, 0.06); }

/* 16:9 responsive embed (YouTube, Vimeo). */
.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-900);
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-to-load facade. Until someone asks for the video, the embed shows
   its own thumbnail instead of an unloaded player, which otherwise paints
   a black plate the size of the frame. site.js swaps the iframe for this
   at load, so with JS off the iframe in the markup still works. */
.embed__facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-900);
  cursor: pointer;
  overflow: hidden;
}

.embed__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}

.embed__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 11, 24, 0.08), rgba(5, 11, 24, 0.42));
  pointer-events: none;
}

.embed__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: var(--r-full);
  background: rgba(10, 20, 43, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid var(--line-strong);
  color: #fff;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-settle),
              background-color var(--dur) var(--ease-out);
}

.embed__facade:hover img { transform: scale(1.02); }
.embed__facade:hover .embed__play { transform: translate(-50%, -50%) scale(1.06); }
.embed__facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .embed__facade img,
  .embed__play { transition: none !important; }
  .embed__facade:hover img { transform: none; }
  .embed__facade:hover .embed__play { transform: translate(-50%, -50%); }
}


/* =====================================================================
   17  LOGO STRIP
   ===================================================================== */

.logo-strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
  text-align: center;
}

.logo-strip__label {
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  color: var(--fg-3);
}

.logo-strip__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) clamp(1.5rem, 0.5rem + 3vw, 3rem);
}

/* Wordmark chips. Used where real logo files are not licensed for the site. */
.logo-chip {
  font-size: var(--fs-meta);
  font-weight: 680;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  opacity: 0.78;
  transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.logo-chip:hover { opacity: 1; color: var(--fg-2); }

.logo-strip img {
  height: 26px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}

.logo-strip img:hover { opacity: 1; filter: none; }


/* =====================================================================
   18  CHECKLIST AND PILL ROW
   ===================================================================== */

.checklist {
  display: grid;
  grid-template-columns: repeat(var(--check-cols, 2), minmax(0, 1fr));
  gap: var(--sp-5);
}

.checklist--1 { --check-cols: 1; }
.checklist--3 { --check-cols: 3; }

.checklist li {
  position: relative;
  padding-left: 36px;
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Disc plus a tick drawn from two borders, so it inherits --accent
   and needs no icon file. */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
}

.checklist li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(0.15em + 6px);
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}

.checklist strong { color: var(--fg); font-weight: 640; }

@media (max-width: 760px) {
  .checklist,
  .checklist--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Pill row: short capability labels under a hero. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  font-size: var(--fs-meta);
  font-weight: 560;
  letter-spacing: var(--tr-meta);
  color: var(--fg-2);
}

.pill--solid { background: var(--surface); }

.pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}


/* =====================================================================
   19  CTA BAND
   ===================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(42, 105, 206, 0.42), transparent 68%),
    linear-gradient(160deg, var(--ink-700), var(--ink-900));
  border: 1px solid var(--line-strong);
  box-shadow: var(--el-dark-2);
  color: #fff;
  --fg: #fff;
  --fg-2: var(--sky-200);
  --fg-3: var(--slate-400);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --accent: var(--blue-300);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-7);
}

.cta-band__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 32rem;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.cta-band--center .cta-band__inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-band--center .cta-band__copy { max-width: 40rem; align-items: center; }


/* =====================================================================
   20  BREADCRUMB + PAGINATION
   ===================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  color: var(--fg-3);
}

.crumbs a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

.crumbs__sep { opacity: 0.5; }

.crumbs [aria-current="page"] { color: var(--fg-2); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-9);
}

.pager__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.pager__item:hover { color: var(--fg); border-color: var(--border-strong); }
.pager__item:active { transform: scale(0.95); }

.pager__item[aria-current="page"] {
  background: var(--accent-solid);
  border-color: transparent;
  color: #fff;
}

.pager__item[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }


/* =====================================================================
   21  LEGAL LAYOUT
   Sticky in-page sidebar nav plus a numbered long-form column.
   ===================================================================== */

.legal {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.legal__side {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  max-height: calc(100dvh - var(--header-h) - var(--sp-9));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legal__side-title {
  font-size: var(--fs-micro);
  font-weight: 680;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--sp-4);
}

.legal__nav { display: flex; flex-direction: column; }

.legal__link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.legal__link:hover { color: var(--fg); }

.legal__link i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-meta);
  color: var(--accent);
}

/* site.js sets .is-active on the section currently in view. */
.legal__link.is-active { color: var(--accent); font-weight: 620; }

.legal__body { min-width: 0; }

.legal__section + .legal__section { margin-top: var(--sp-9); }

.legal__h {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  margin-bottom: var(--sp-4);
}

.legal__h i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--accent);
}

.legal__h span {
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  letter-spacing: var(--tr-3);
  font-weight: 640;
  color: var(--fg);
}

@media (max-width: 960px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__side { position: static; max-height: none; }
  .legal__h { grid-template-columns: 40px minmax(0, 1fr); }
}


/* =====================================================================
   22  FORM CONTROLS
   ===================================================================== */

.form { display: flex; flex-direction: column; gap: var(--sp-5); }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.field__label {
  font-size: var(--fs-meta);
  font-weight: 620;
  letter-spacing: var(--tr-meta);
  color: var(--fg);
}

.field__hint { font-size: var(--fs-meta); color: var(--fg-3); }

.field__error { font-size: var(--fs-meta); color: var(--warn); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.75rem var(--sp-4);
  min-height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder { color: var(--fg-3); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--accent); }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--warn); }

.textarea { min-height: 132px; resize: vertical; }

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%, currentColor 58%, transparent 58%),
    linear-gradient(135deg, transparent 42%, currentColor 42%, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-repeat: no-repeat;
}

.checkbox {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-2);
  cursor: pointer;
}

.checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--blue-500);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

@media (max-width: 640px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   23  ACCORDION
   Height is driven by a spring in site.js. The CSS only sets the closed
   state and the chevron, so an interrupted open/close never jumps.
   ===================================================================== */

.acc { border-top: 1px solid var(--border); }

.acc__item { border-bottom: 1px solid var(--border); }

.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  font-size: var(--fs-5);
  font-weight: 620;
  letter-spacing: var(--tr-5);
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.acc__trigger:hover { color: var(--accent); }
.acc__trigger:active { transform: scale(0.995); }

.acc__chev {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  color: var(--accent);
}

.acc__chev::before,
.acc__chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-settle),
              opacity var(--dur) var(--ease-out);
}

.acc__chev::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc__trigger[aria-expanded="true"] .acc__chev::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.acc__panel { overflow: hidden; height: 0; }

.acc__panel-inner {
  padding-bottom: var(--sp-6);
  color: var(--fg-2);
  max-width: 72ch;
}


/* =====================================================================
   24  FOOTER
   ===================================================================== */

.footer {
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  color: #fff;
  --fg: #fff;
  --fg-2: var(--sky-200);
  --fg-3: var(--slate-400);
  --border: var(--line);
  --accent: var(--blue-300);
  padding-block: var(--section-y-sm);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.4fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  padding-bottom: var(--sp-8);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }

.footer__lockup { display: inline-flex; align-items: center; gap: var(--sp-3); }
.footer__mark { width: 30px; height: 30px; flex: 0 0 auto; }

.footer__word {
  font-size: 1.1875rem;
  font-weight: 660;
  letter-spacing: -0.022em;
  line-height: 1;
  color: #fff;
}

.footer__word i { font-style: normal; font-weight: 560; color: var(--blue-300); }

.footer__tag {
  color: var(--sky-200);
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 26rem;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer__h {
  font-size: var(--fs-micro);
  font-weight: 680;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.footer__link {
  font-size: var(--fs-sm);
  color: var(--sky-200);
  text-decoration: none;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}

.footer__link:hover { color: #fff; }
.footer__link:active { transform: scale(0.97); }

.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--slate-400);
}

.footer__bottom a { color: var(--sky-200); text-decoration: none; }
.footer__bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__sitemap { justify-self: center; }
.footer__bottom > :last-child { justify-self: end; text-align: right; }

.footer__regions { letter-spacing: 0.06em; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .footer__bottom > :last-child { justify-self: center; text-align: center; }
}


/* =====================================================================
   25  REVEAL ON SCROLL
   Initial state only applies when JS is present, so a script failure or a
   no-JS reader always sees the full page.
   ===================================================================== */

.has-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.has-js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out) var(--reveal-delay, 0ms),
              transform 620ms var(--ease-settle) var(--reveal-delay, 0ms);
}

/* Stagger helper: put .reveal-group on a parent, .reveal on the children. */
.has-js .reveal-group > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.has-js .reveal-group > .reveal:nth-child(2) { --reveal-delay: 70ms; }
.has-js .reveal-group > .reveal:nth-child(3) { --reveal-delay: 140ms; }
.has-js .reveal-group > .reveal:nth-child(4) { --reveal-delay: 210ms; }
.has-js .reveal-group > .reveal:nth-child(5) { --reveal-delay: 280ms; }
.has-js .reveal-group > .reveal:nth-child(6) { --reveal-delay: 350ms; }


/* =====================================================================
   26  SMALL UTILITIES
   ===================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hr {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: var(--sp-8);
}

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }
.nowrap { white-space: nowrap; }
.tabnum { font-variant-numeric: tabular-nums; }

/* Back-to-top puck, bottom left, matches the reference craft level. */
.to-top {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 90;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: rgba(10, 20, 43, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--line-strong);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-settle),
              visibility 0s linear var(--dur);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-settle),
              visibility 0s;
}

.to-top:active { transform: scale(0.94); }

/* Bottom left is clear space on a wide screen. On a phone the visualization
   legends and captions sit hard against that corner and the puck covers
   them while you scroll, so it moves to the right, where nothing anchors. */
@media (max-width: 640px) {
  .to-top {
    left: auto;
    right: var(--gutter);
  }
}


/* =====================================================================
   26b  HEADER RESPONSIVE OVERRIDES
   These must sit after section 08, because .btn sets display:inline-flex
   at the same specificity as .header__cta and would otherwise win the
   cascade and keep the 128px header CTA on screen at phone widths. That
   pushed the hamburger past the right edge of the fixed bar, where no
   amount of scrolling could reach it.
   ===================================================================== */

@media (max-width: 1079px) {
  .header__cta { display: none; }
  .nav-toggle { display: inline-flex; flex: 0 0 auto; }
}

/* Below the phablet break the remaining row is brand + spacer + toggle.
   Tighten the gap so the 44px tap target keeps its full size at 320px. */
@media (max-width: 640px) {
  .header__inner { gap: var(--sp-3); }
  .nav-toggle { width: 44px; height: 44px; }
}

@media (max-width: 360px) {
  .header__word { font-size: 1rem; }
}


/* =====================================================================
   27  ACCESSIBILITY MEDIA QUERIES
   ===================================================================== */

/* Reduced motion means a gentler equivalent, not the absence of feedback.
   Presses still respond, reveals still cross-fade, nothing translates. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .has-js .reveal { transform: none; }

  .has-js .reveal.is-in {
    transition: opacity 220ms linear var(--reveal-delay, 0ms) !important;
    transition-duration: 220ms !important;
  }

  .btn,
  .nav__link,
  .nav-sheet__link,
  .card--link,
  .footer__link,
  .to-top,
  .pager__item,
  .acc__trigger {
    transition: opacity 120ms linear, background-color 120ms linear,
                color 120ms linear, border-color 120ms linear !important;
  }

  .btn:active,
  .nav__link:active,
  .card--link:active,
  .to-top:active { transform: none; opacity: 0.72; }

  .nav-sheet { transition: none; }
  .blog-card--link:hover .blog-card__media img { transform: none; }
}

/* Frostier, less see-through chrome. */
@media (prefers-reduced-transparency: reduce) {
  .header,
  .header.is-scrolled { background: var(--ink-900); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header::after { display: none; }
  .header.is-scrolled { box-shadow: 0 1px 0 var(--line-strong); }
  .nav-sheet { background: var(--ink-800); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-scrim { background: rgba(5, 11, 24, 0.86); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .to-top { background: var(--ink-800); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .section--glow::before { display: none; }
}

/* Near-solid surfaces with defined borders. */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(255, 255, 255, 0.34);
    --line-strong: rgba(255, 255, 255, 0.52);
    --line-ink: rgba(10, 20, 43, 0.34);
    --line-ink-strong: rgba(10, 20, 43, 0.55);
    --sky-200: #D6E6F8;
    --slate-400: #B4C6DE;
    --slate-700: #2E3D5C;
  }

  .header,
  .header.is-scrolled { background: var(--ink-900); }
  .card, .flow__stage, .stat, .cmp, .quote, .input, .select, .textarea { border-width: 1.5px; }
  .btn--secondary { border-width: 2px; }
  .section--glow::before { display: none; }
  :focus-visible { outline-width: 3px; }
}

@media print {
  .header, .footer, .nav-sheet, .nav-scrim, .to-top, .cta-band { display: none !important; }
  .page { padding-top: 0; }
  body { background: #fff; color: #000; }
  .section { background: #fff !important; color: #000 !important; padding-block: 1.5rem; }
  .has-js .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* =====================================================================
   MOTION OFF (client feedback 2026-09-29)
   No text fly-ins, no scroll reveals, no scrolling lists. Content is on
   the page when it loads. Hover states and the demo form remain.
   ===================================================================== */
.has-js .reveal,
.has-js .reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
.vendor-flow__track { animation: none !important; transform: none !important; }