/* GENERATED FILE — do not edit.
 * Built from variables.css, typography.css, layout.css, components.css, utilities.css by css/build.php.
 * Edit those sources, then run: php css/build.php
 */

/* ===== variables.css ===== */
/* ---------- Inter (self-hosted) ----------
 * Inter is licensed under the SIL Open Font License 1.1 — see
 * assets/fonts/LICENSE.txt, which must ship alongside these files.
 *
 * Self-hosted rather than loaded from Google Fonts, on measured grounds: with
 * the third-party font request blocked, /osha-recordkeeping moved from CLS
 * 0.109 to 0 and from FCP/LCP 2.9s to 1.6s in Lighthouse mobile simulation.
 * The third-party stylesheet was render-blocking on a separate origin, so it
 * cost a DNS + TLS handshake before any text could be styled, and the late
 * swap resized content that had already been laid out.
 *
 * One variable file covers every weight the site uses (400-800), which is what
 * Google was already serving — so this is fewer bytes and fewer connections,
 * not a trade. Subsetting matches Google's own latin / latin-ext split.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/**
 * Design tokens. Every color, spacing value, radius, and shadow used anywhere
 * on the site should reference one of these — never a raw hex/px value in a
 * component file. This is what keeps every page consistent.
 */
:root {
  /* Color — per the agreed palette, deliberately narrow (avoid bright colors) */
  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-border: #e2e8f0;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-bg: #eff6ff;
  --color-success: #22c55e;
  --color-success-bg: #f0fdf4;
  --color-danger: #ef4444;
  --color-danger-bg: #fef2f2;

  /* Text on dark surfaces (footer, dark CTA bands) */
  --color-dark-bg: #0f172a;
  --color-dark-bg-secondary: #16213e;
  --color-dark-text: #f8fafc;
  --color-dark-text-secondary: #94a3b8;
  --color-dark-border: rgba(248, 250, 252, 0.1);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale — 4px base, used for every margin/padding/gap */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadow — soft, never heavy */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 16px -4px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 16px 40px -12px rgb(15 23 42 / 0.14), 0 4px 12px -4px rgb(15 23 42 / 0.06);
  --shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.25);

  /* Layout */
  --content-max: 1280px;
  --content-narrow: 760px;

  /* Motion — subtle, consistent easing everywhere */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}

/* ===== typography.css ===== */
/**
 * Type scale. Large, confident headlines; restrained body text. Every
 * heading/body size used on the site should come from here, not a one-off
 * font-size in a component file.
 */

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

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

/* Hero-scale headline — used once per page, at most */
.text-display {
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h1, .h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
}

h2, .h2 {
  font-size: clamp(1.625rem, 2.75vw, 2.125rem);
}

h3, .h3 {
  font-size: 1.375rem;
}

h4, .h4 {
  font-size: 1.125rem;
}

p {
  margin: 0;
}

.text-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.text-body {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.text-small {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.text-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ===== layout.css ===== */
/**
 * Reset, container, and section rhythm. Mobile-first: base rules target
 * mobile, breakpoints add complexity going up.
 */

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

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  background: var(--color-bg);
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
}

/* Content container — max-width per spec, fluid gutters below it */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-narrow {
  width: 100%;
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container, .container-narrow {
    padding-inline: var(--space-8);
  }
}

/* Section rhythm — consistent vertical spacing between every section on every page */
.section {
  padding-block: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-24);
  }
}

.section-tight {
  padding-block: var(--space-10);
}

@media (min-width: 768px) {
  .section-tight {
    padding-block: var(--space-16);
  }
}

.section-bg {
  background: var(--color-bg-secondary);
}

.section-dark {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}

/* typography.css sets color directly on h1-h6 (not just via inheritance), so it
   always wins over .section-dark's inherited color unless overridden explicitly
   here too — this is what was making dark-band headings nearly invisible. */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--color-dark-text);
}

.section-dark .text-body,
.section-dark .text-small,
.section-dark .text-lead {
  color: var(--color-dark-text-secondary);
}

.section-dark .text-eyebrow {
  color: #93c5fd;
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--space-6);
}

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

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

/* Two-column alternating layout (image + text), used across feature sections */
.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  /* Gives the visual side more room — used sparingly, for the sections
   * meant to feel like the flagship/widest compositions on the page. */
  .split-wide {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .split-reverse {
    direction: rtl;
  }
  .split-reverse > * {
    direction: ltr;
  }
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-inline: auto;
}

/* ===== components.css ===== */
/**
 * Component library. Every page is built from these — a page file should
 * rarely need a one-off style block.
 */

/* ---------- Buttons ---------- */
.btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 46px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-sm {
  height: 38px;
  padding-inline: var(--space-5);
  font-size: 0.875rem;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-text-secondary);
  transform: translateY(-1px);
}

.btn-on-dark {
  background: rgba(248, 250, 252, 0.08);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

.btn-on-dark:hover {
  background: rgba(248, 250, 252, 0.14);
  transform: translateY(-1px);
}

.btn-block {
  width: 100%;
}

/* ---------- Badge / eyebrow pill ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgb(37 99 235 / 0.25);
}

.card-flat {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

/* Icon circle used inside feature cards */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  flex-shrink: 0;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
}

.icon-circle-lg {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
}

/* ---------- Site header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo {
  display: flex;
  align-items: center;
}

.site-logo img {
  height: 28px;
  width: auto;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

.site-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-text);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  color: var(--color-text);
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle.is-open .icon-menu {
  display: none;
}

.nav-toggle.is-open .icon-close {
  display: inline-flex;
}

/* Tied to the exact same 900px breakpoint as .site-nav/.nav-toggle so Login and
   Request a Demo never show alongside the hamburger — they live in the mobile
   menu below 900px instead. (Not reusing .hide-mobile: that utility is shared
   with unrelated content elsewhere at a different breakpoint.) */
.header-cta {
  display: none;
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .header-cta {
    display: inline-flex;
  }
}

.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu .container {
  padding-block: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-menu a {
  padding: var(--space-3) 0;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu a:last-child {
  border-bottom: none;
}

@media (min-width: 900px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ---------- Hero ---------- */
/* Layered, atmospheric background — several soft radial glows plus a sparse
 * dot grid, all at low alpha, so the page reads as "lit by the product"
 * rather than a flat white section with a picture on it. Kept as ordinary
 * background-image layers (not pseudo-elements) since nothing here needs a
 * blend mode; the grain texture below is the one layer that does. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-20) var(--space-16);
  overflow: hidden;
  background-color: #fbfcfe;
  background-image:
    radial-gradient(circle, rgb(37 99 235 / 0.05) 1px, transparent 1px),
    radial-gradient(ellipse 55% 42% at 50% 4%, rgb(99 102 241 / 0.09), transparent 70%),
    radial-gradient(ellipse 65% 55% at 50% 60%, rgb(37 99 235 / 0.13), transparent 70%),
    radial-gradient(ellipse 45% 40% at 92% 96%, rgb(34 211 238 / 0.09), transparent 65%),
    radial-gradient(ellipse 40% 35% at 4% 92%, rgb(167 139 250 / 0.07), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 30%, #ffffff, transparent 75%);
  background-size: 26px 26px, auto, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Faint grain so the gradients above read as atmosphere, not a flat digital
 * blend — a tiled SVG turbulence filter at ~2% opacity via overlay blend. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.025;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-32) var(--space-24);
  }
}

.hero-content {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

@media (min-width: 540px) {
  .hero-actions {
    flex-direction: row;
  }
}

.hero-preview {
  position: relative;
  margin-top: var(--space-16);
  max-width: 1180px;
  margin-inline: auto;
}

/* Lets the dashboard's own blue/indigo/aqua tones bleed well past its
 * rounded corners and dissolve into the hero background, so the glow reads
 * as coming from the product rather than stopping abruptly at its edge. */
.hero-preview::before {
  content: '';
  position: absolute;
  inset: -90px;
  z-index: -1;
  filter: blur(50px);
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 28% 32%, rgb(37 99 235 / 0.22), transparent 65%),
    radial-gradient(ellipse 50% 45% at 74% 26%, rgb(99 102 241 / 0.18), transparent 65%),
    radial-gradient(ellipse 48% 45% at 62% 82%, rgb(34 211 238 / 0.15), transparent 65%);
}

@media (min-width: 768px) {
  .hero-preview::before {
    inset: -160px;
    filter: blur(70px);
  }
}

.hero-dashboard-img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dashboard-img {
    animation: none;
  }
}

/* A wide dashboard shot shrinks to illegible tiny text at mobile widths —
 * crop into the KPI row instead of shrinking the whole composition, so the
 * mobile hero stays legible rather than merely decorative. */
@media (max-width: 767px) {
  .hero-dashboard-img {
    height: 220px;
    object-fit: cover;
    object-position: 32% 28%;
    border-radius: var(--radius-md);
  }
}

/* Wide annotated photos (e.g. the Company page story images) crop hard on
 * the sides at a narrow mobile column if the height stays fixed — reducing
 * the height keeps closer to the source aspect ratio so corner content
 * (callout labels, etc.) doesn't get cut off. */
.split-photo {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

@media (max-width: 767px) {
  .split-photo {
    height: 220px;
  }
}

.hero-preview .pv {
  min-height: 380px;
}

@media (min-width: 640px) {
  .hero-preview .pv {
    min-height: 460px;
  }
}

/* ---------- Stats ---------- */
.stat-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.section-dark .stat-value {
  color: var(--color-dark-text);
}

.stat-label {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
}

/* ---------- Testimonial ---------- */
.testimonial-quote {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

/* ---------- FAQ (native <details>, no JS needed) ---------- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .faq-chevron {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--color-text-secondary);
}

.faq-item[open] summary .faq-chevron {
  transform: rotate(180deg);
}

.faq-item p {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
}

/* ---------- Forms ---------- */
.form-field {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.form-input.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger);
}

/* Browser autofill otherwise forces a yellow background + its own text color */
.form-input:-webkit-autofill,
.form-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-bg) inset;
}

.form-error {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-danger);
}

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

.form-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  margin-bottom: var(--space-5);
}

.form-alert.alert-success {
  background: var(--color-success-bg);
  color: #15803d;
  border: 1px solid rgb(34 197 94 / 0.25);
}

.form-alert.alert-danger {
  background: var(--color-danger-bg);
  color: #b91c1c;
  border: 1px solid rgb(239 68 68 / 0.25);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark-bg);
  color: var(--color-dark-text-secondary);
  padding-block: var(--space-16) var(--space-8);
}

/* Column headings. h3 rather than h6: the footer follows page sections that use
   h2, and jumping straight to h6 is a heading-order violation on every page. */
.site-footer h3 {
  color: var(--color-dark-text);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

/* .text-small carries the light-background secondary colour, which measures
   2.35:1 against the dark footer — below the 4.5:1 minimum. On this surface the
   dark-theme token applies instead, at roughly 6.7:1. */
.site-footer .text-small {
  color: var(--color-dark-text-secondary);
}

.site-footer a {
  color: var(--color-dark-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--color-dark-text);
}

.site-footer .site-logo img {
  filter: brightness(0) invert(1);
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.9375rem;
}

.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-dark-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.social-links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-dark-border);
}

.social-links svg {
  width: 16px;
  height: 16px;
}

/* ---------- Breadcrumb (used on secondary-page headers) ---------- */
.page-header {
  padding-block: var(--space-12) var(--space-10);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

/* Standalone breadcrumb bar for pages built on render_hero(), which have no
   .page-header to host the trail. Sits flush above the hero and inherits the
   hero's own background so it reads as part of it. */
.breadcrumb-bar {
  background-color: #fbfcfe;
  padding-block: var(--space-6) 0;
}

.breadcrumb-bar .breadcrumb {
  margin-bottom: 0;
}

.breadcrumb-bar + .hero {
  padding-block-start: var(--space-10);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.breadcrumb svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.breadcrumb a {
  color: var(--color-text-secondary);
}

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

.breadcrumb .current {
  color: var(--color-text);
  font-weight: 500;
}

/* ---------- Legal page body (Privacy Policy / Terms) ---------- */
.legal-content > p {
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.legal-content h2 {
  font-size: 1.375rem;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.0625rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-content ul {
  color: var(--color-text-secondary);
  line-height: 1.7;
  padding-left: 1.25rem;
  margin-bottom: var(--space-6);
}

.legal-content ul li {
  margin-bottom: var(--space-2);
}

.legal-content .legal-contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}

.legal-content .legal-contact svg {
  color: var(--color-accent);
}

/* ---------- Product visuals ----------
 * Composed "product moments" for hero/feature sections — floating cards,
 * KPI stats, rings, bars — never a real app screenshot. Each .pv is a
 * self-contained stage: soft gradient + blurred color blobs behind,
 * one or two focal cards floating above. Keep every composition cropped
 * and partial; nothing here should render like a full app screen.
 */
/* No background, border, or radius of its own — this is layout space, not
 * a container. The illustration inside supplies its own elevation (see
 * .pv-card / .pv-photo) and is meant to read as an object floating in the
 * page's own whitespace, not a card nested inside another card. */
.pv {
  position: relative;
  min-height: 320px;
  padding: var(--space-10) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .pv {
    min-height: 380px;
    padding: var(--space-16) var(--space-12);
  }
}

.pv-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
}

/* Layered shadow — a crisp near shadow, a soft mid shadow, and a wide,
 * very low-opacity blue-tinted shadow standing in for ambient glow beneath
 * the object. This is what makes the illustration read as an elevated
 * product render rather than a flat panel. */
.pv-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 10px 20px -8px rgb(15 23 42 / 0.10),
    0 32px 56px -20px rgb(15 23 42 / 0.14),
    0 40px 70px -24px rgb(37 99 235 / 0.16);
  padding: var(--space-6);
}

/* Same elevation treatment for illustrations that are a plain photo/image
 * rather than a composed .pv-card (e.g. the Reporting screenshot). */
.pv-photo {
  display: block;
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 10px 20px -8px rgb(15 23 42 / 0.10),
    0 32px 56px -20px rgb(15 23 42 / 0.14),
    0 40px 70px -24px rgb(37 99 235 / 0.16);
}

.pv-card-sm {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
}

.pv-float {
  position: absolute;
  z-index: 2;
  transition: transform var(--duration-slow) var(--ease-out);
}

/* A composition with 4+ floating cards is too crowded on a narrow stage —
 * this trims secondary cards below 640px rather than reusing .hide-mobile,
 * whose `display: initial` reset would collapse these to inline and break
 * their box model. */
.pv-float.pv-hide-mobile {
  display: none;
}

@media (min-width: 640px) {
  .pv-float.pv-hide-mobile {
    display: block;
  }
}

.pv:hover .pv-float {
  transform: translateY(-4px) rotate(var(--pv-rot, 0deg));
}

/* ---------- Rings / bars / sparklines ---------- */
.pv-ring {
  display: block;
}

.pv-ring-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
}

.pv-ring-fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
}

.pv-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pv-ring-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1;
}

.pv-ring-caption {
  margin-top: var(--space-1);
  max-width: 78%;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.pv-bar-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.pv-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.pv-sparkline {
  display: block;
  overflow: visible;
}

/* ---------- Stats, trends, pills, avatars ---------- */
.pv-stat-value {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}

.pv-stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.pv-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 700;
}

.pv-trend svg {
  width: 14px;
  height: 14px;
}

.pv-trend-up { color: var(--color-success); }
.pv-trend-down { color: var(--color-danger); }
.pv-trend-flat { color: var(--color-text-secondary); }

.pv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.pv-pill svg { width: 13px; height: 13px; }

.pv-pill-accent { background: var(--color-accent-bg); color: var(--color-accent); }
.pv-pill-success { background: var(--color-success-bg); color: #15803d; }
.pv-pill-danger { background: var(--color-danger-bg); color: #b91c1c; }
.pv-pill-warning { background: #fffbeb; color: #b45309; }
.pv-pill-neutral { background: var(--color-bg-secondary); color: var(--color-text-secondary); }

.pv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Notification / toast card ---------- */
.pv-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 240px;
  border-left: 4px solid var(--color-border);
}

.pv-notification.sev-danger { border-left-color: var(--color-danger); }
.pv-notification.sev-warning { border-left-color: #d97706; }
.pv-notification.sev-accent { border-left-color: var(--color-accent); }
.pv-notification.sev-success { border-left-color: var(--color-success); }

.pv-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.pv-notification-icon svg { width: 16px; height: 16px; }

.pv-notification-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.pv-notification-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* ---------- Certificate card ---------- */
.pv-certificate {
  position: relative;
  text-align: center;
  border: 1px solid rgb(180 140 60 / 0.4);
  background:
    radial-gradient(circle at 50% 0%, rgb(217 180 80 / 0.14), transparent 70%),
    #fffdf8;
}

.pv-certificate::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(180 140 60 / 0.25);
  border-radius: calc(var(--radius-md) - 2px);
  pointer-events: none;
}

.pv-certificate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: #fdf3d8;
  color: #b45309;
  margin-bottom: var(--space-2);
}

.pv-certificate-icon svg { width: 20px; height: 20px; }

.pv-certificate-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.pv-certificate-name {
  margin-top: var(--space-1);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.pv-certificate-course {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* ---------- Timeline snippet ---------- */
.pv-timeline {
  display: flex;
  align-items: center;
}

.pv-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
}

.pv-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-border);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-border);
  z-index: 1;
}

.pv-timeline-item.is-done .pv-timeline-dot,
.pv-timeline-item.is-active .pv-timeline-dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.pv-timeline-item::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.pv-timeline-item:first-child::before {
  display: none;
}

.pv-timeline-item.is-done::before {
  background: var(--color-accent);
}

.pv-timeline-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
}

.pv-timeline-item.is-done .pv-timeline-label,
.pv-timeline-item.is-active .pv-timeline-label {
  color: var(--color-text);
}

.pv-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pv-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pv-mini-bars {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  gap: 5px;
  height: 44px;
}

.pv-mini-bars > span {
  flex: 1;
  border-radius: 3px;
  background: var(--color-accent);
  opacity: 0.85;
}

/* ---------- KPI tile wall (Dashboard) ---------- */
.pv-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.pv-tile {
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.pv-tile:nth-child(3n) {
  border-right: none;
}

.pv-tile:nth-child(n+4) {
  border-bottom: none;
}

/* A full-width strip beneath the tile grid — extra density so the
 * dashboard reads as a wide, data-dense enterprise widget wall rather
 * than a small stat card. */
.pv-tile-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.pv-tile-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pv-tile-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.pv-tile-value {
  margin-top: var(--space-1);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* ---------- Stage stepper (Actions, Documents) ---------- */
.pv-stepper {
  display: flex;
  align-items: flex-start;
  padding-inline: var(--space-2);
}

.pv-stepper-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.pv-stepper-step::before {
  content: '';
  position: absolute;
  top: 21px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.pv-stepper-step:first-child::before {
  display: none;
}

.pv-stepper-step.is-done::before {
  background: #86efac;
}

.pv-stepper-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 2px solid var(--color-border);
}

.pv-stepper-icon svg {
  width: 20px;
  height: 20px;
}

.pv-stepper-step.is-done .pv-stepper-icon {
  background: var(--color-success-bg);
  color: #15803d;
  border-color: #86efac;
  box-shadow: 0 0 0 4px var(--color-success-bg);
}

.pv-stepper-step.is-active .pv-stepper-icon {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-bg);
}

.pv-stepper-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
}

.pv-stepper-step.is-done .pv-stepper-label,
.pv-stepper-step.is-active .pv-stepper-label {
  color: var(--color-text);
}

/* Accent wash behind a stepper to raise its visual weight within a card
 * (used for Documents, where the approval workflow should read as the
 * primary content rather than a footnote under the title). */
.pv-stepper-band {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-3);
}

/* ---------- Calendar grid (Compliance Calendar) ---------- */
.pv-calendar {
  width: 100%;
}

.pv-calendar-head {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.pv-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.pv-calendar-dow {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 2px;
}

.pv-calendar-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.pv-calendar-cell.is-today {
  background: var(--color-accent);
  color: #fff;
}

.pv-calendar-cell.has-event::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

.pv-calendar-cell.tone-accent::after { background: var(--color-accent); }
.pv-calendar-cell.tone-warning::after { background: #d97706; }
.pv-calendar-cell.tone-success::after { background: var(--color-success); }
.pv-calendar-cell.is-today.has-event::after { background: #fff; }

.pv-calendar-legend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.pv-calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.pv-calendar-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- ID card + QR motif (Assets) ---------- */
.pv-idcard {
  width: 232px;
  text-align: center;
}

.pv-idcard-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px dashed var(--color-border);
}

.pv-qr {
  display: inline-grid;
  grid-template-columns: repeat(11, 6px);
  grid-auto-rows: 6px;
  gap: 1.5px;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.pv-qr span {
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
}

.pv-qr span.on {
  background: #0f172a;
}

.pv-qr span.off {
  background: transparent;
}

/* ---------- Combo chart (Reporting) ---------- */
.pv-combo-chart {
  display: block;
  overflow: visible;
}

/* ---------- Feature chapter divider ---------- */
/* Understated category label used to break the features page into
 * chapters (Operations / Compliance / Workforce / Assets) — whitespace
 * and a hairline rather than a heavy section block. */
.pv-chapter {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.pv-chapter-label {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.pv-chapter-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---------------------------------------------------------------------------
   App/browser frame for real product screenshots (pv_screenshot()).
   A quiet chrome bar + rounded corners + soft shadow so a cropped screen
   reads as a live application, not a floating image.
---------------------------------------------------------------------------- */
.app-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg);
}
.app-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}
.app-frame-bar span {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: #cfd6e0;
  display: block;
}
.app-frame img { display: block; width: 100%; height: auto; }

/* Capability shorthand chips (outcome sections) — labels, not cards. */
.cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-6); }
.cap-chip {
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary);
  background: var(--color-bg-secondary); border-radius: var(--radius-full); padding: 6px 14px;
}

/* Capability matrix entries that have a page of their own are links; the ones
   without stay plain text, so the list still reads as a complete inventory. */
.cap-col ul a { color: inherit; text-decoration: none; }
.cap-col ul a:hover, .cap-col ul a:focus-visible { color: var(--color-accent); text-decoration: underline; }

/* Industry card titles link through to the industry page where one exists. */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { color: var(--color-accent); }

/* A chip that names a real module is a link to it. Styled to look identical to
   a plain chip until hover, so the section still reads as a set of labels. */
a.cap-chip { text-decoration: none; transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
a.cap-chip:hover, a.cap-chip:focus-visible { color: var(--color-accent); background: var(--color-accent-bg); }

.flow-title a { color: inherit; text-decoration: none; }
.flow-title a:hover, .flow-title a:focus-visible { color: var(--color-accent); }

/* "The problem" — scattered tools resolving into one platform. */
.problem-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.problem-flow .old-chip { font-size: 0.9rem; color: var(--color-text-secondary); text-decoration: line-through; opacity: 0.65; padding: 6px 10px; }
.problem-flow .flow-arrow { color: var(--color-text-secondary); }
.problem-flow .solved { font-size: 0.9rem; font-weight: 700; color: #fff; background: var(--color-accent); border-radius: var(--radius-full); padding: 8px 18px; }

/* Compact "explore all capabilities" matrix (Features page footer) — labels, no cards, no checks. */
.cap-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
@media (max-width: 860px) { .cap-matrix { grid-template-columns: 1fr; gap: var(--space-8); } }
.cap-col h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin: 0 0 var(--space-4); }
.cap-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cap-col li { font-weight: 600; color: var(--color-text); }

/* ===========================================================================
   ProductPreview — a cropped, gently-animated product viewport.
   Shows the EXPERIENCE, not the whole interface: the real screenshot is larger
   than the visible frame and positioned to expose only the relevant region
   (sidebar/nav cropped out), with a subconscious pan/zoom loop, gradient edge
   masks that dissolve secondary UI into the page, and an optional floating
   cross-module card. All motion is disabled under prefers-reduced-motion.
=========================================================================== */
.product-preview { position: relative; }
.pp-frame {
  border-radius: 15px; overflow: hidden; border: 1px solid var(--color-border);
  box-shadow: 0 34px 64px -34px rgba(15,23,42,.42), 0 12px 26px -14px rgba(15,23,42,.14);
  background: #fff;
}
.pp-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); }
.pp-bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfd6e0; display: block; }
.pp-stage { position: relative; aspect-ratio: var(--pp-ratio, 4 / 3); overflow: hidden; background: #eef1f6; }
.pp-shot {
  position: absolute; width: var(--pp-w, 165%); height: auto;
  left: var(--pp-l, -27%); top: var(--pp-t, -16%);
  transform-origin: 60% 30%; will-change: transform; backface-visibility: hidden;
  animation: pp-drift var(--pp-dur, 13s) ease-in-out infinite alternate;
}
@keyframes pp-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(-1.4%, -2.8%, 0); }
}
/* Edge masks — dissolve secondary interface into the section background. */
.pp-mask {
  position: absolute; inset: 0; pointer-events: none;
  /* Spotlight, not a haze: the central ~60% stays fully clear; only the outer
     edges and lower portion dissolve, and each fade reaches solid ONLY at the
     very edge so the falloff is gradual rather than a flat white overlay. */
  /* Per-side fade starts are variables so each section tunes its own falloff:
     a KPI grid fades all four edges; a wide table keeps left/right sharp and
     fades top/bottom; a card layout fades toward its whitespace. */
  background:
    linear-gradient(to bottom, transparent var(--pp-mb, 68%), var(--pp-fade, #f8fafc) 100%),
    linear-gradient(to top,    transparent var(--pp-mt, 93%), var(--pp-fade, #f8fafc) 100%),
    linear-gradient(to left,   transparent var(--pp-ml, 77%), var(--pp-fade, #f8fafc) 100%),
    linear-gradient(to right,  transparent var(--pp-mr, 79%), var(--pp-fade, #f8fafc) 100%);
}
/* Floating cross-module card — real EHSTEC card styling, isolated. */
.pp-float {
  position: absolute; left: 6%; bottom: 8%; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 11px; padding: 9px 12px;
  box-shadow: 0 16px 34px -16px rgba(15,23,42,.28); max-width: 78%;
  animation: pp-bob 6s ease-in-out infinite alternate;
}
/* Placement variants — drop the card into the frame's quietest region. */
.pp-float--tr { left: auto; right: 4%; bottom: auto; top: 48%; max-width: 44%; }
.pp-float--br { left: auto; right: 4%; top: auto; bottom: 8%; max-width: 54%; }
@keyframes pp-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.pp-float-icon { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.pp-float-icon svg { width: 15px; height: 15px; }
.pp-float-icon--warning { background: #fef3c7; color: #b45309; }
.pp-float-icon--danger  { background: #fee2e2; color: #dc2626; }
.pp-float-icon--brand   { background: var(--color-accent-bg); color: var(--color-accent); }
.pp-float b { display: block; font-size: .78rem; color: var(--color-text); line-height: 1.25; }
.pp-float small { display: block; font-size: .69rem; color: var(--color-text-secondary); margin-top: 2px; }
.pp-float-tag { margin-left: auto; font-size: .64rem; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* Entrance: reveal supplies opacity+translateY; add a gentle scale settle. */
.reveal .product-preview { transform: scale(.985); transition: transform var(--duration-slow) var(--ease-out); }
.reveal.is-visible .product-preview { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .pp-shot, .pp-float { animation: none; }
  .reveal .product-preview { transform: none; }
}
/* On phones the floating overlay would dominate the small frame and wrap into a
   wall of text — drop it and let the cropped viewport carry the story. */
@media (max-width: 639px) {
  .pp-float { display: none; }
}

/* ===========================================================================
   Mega-menu navigation (EHSTEC 2.0 IA)
   Desktop: Product/Solutions/Resources open dropdown panels on hover/focus/click.
   Mobile: the same groups become tap-to-expand accordions in the mobile menu.
=========================================================================== */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.9375rem; font-weight: 500; color: var(--color-text-secondary);
  display: inline-flex; align-items: center; padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-trigger:hover, .nav-item.is-open .nav-trigger { color: var(--color-text); }
/* CSS caret — no icon dependency */
.nav-caret {
  width: 0; height: 0; margin-left: 6px; display: inline-block;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .55;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret,
.nav-item.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }

.mega {
  position: absolute; top: 100%; left: 0; margin-top: 14px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -24px rgba(15,23,42,.30), 0 8px 20px -12px rgba(15,23,42,.12);
  padding: var(--space-4); z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
/* Invisible hover-bridge so the pointer can travel from trigger to panel. */
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-item:hover .mega, .nav-item:focus-within .mega, .nav-item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega-wide { width: min(600px, 92vw); }
.mega-inner { display: grid; gap: 2px; }
.mega-2col { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.mega-groups { grid-template-columns: 1fr 1fr; gap: 12px 28px; align-items: start; }
.mega-link { display: block; padding: 9px 12px; border-radius: 10px; transition: background var(--duration-fast) var(--ease-out); }
.mega-link:hover { background: var(--color-bg-secondary); }
.mega-link-title { display: block; font-size: .92rem; font-weight: 600; color: var(--color-text); }
/* "By workflow" group at the foot of the Product mega — capability pages that
   cut across modules, kept visually distinct from the module grid above. */
.mega-cap {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.mega-cap .mega-heading {
  margin: 0 0 var(--space-2);
}

.mega-cap-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.mega-cap-links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.mega-cap-links a:hover,
.mega-cap-links a:focus-visible {
  color: var(--color-accent);
}

/* The features hub lists a fourth column of workflow pages. /pricing keeps the
   three-column module layout, so this is opt-in rather than global. */
@media (min-width: 1100px) {
  .cap-matrix-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Hub link at the head of a mega-menu — the parent page for everything in the
   panel below it. Styled as a quiet banner rather than a card so it reads as a
   heading with a destination, not as another sibling module. */
.mega-hub {
  display: block;
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.mega-hub:hover,
.mega-hub:focus-visible {
  background: var(--color-bg-secondary);
}

.mega-hub .mega-link-title {
  color: var(--color-accent);
}

.mega-link-desc { display: block; font-size: .78rem; color: var(--color-text-secondary); margin-top: 1px; line-height: 1.35; }
.mega-link-sm { padding: 7px 12px; }
.mega-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--color-text-secondary); font-weight: 700; padding: 4px 12px; margin: 0 0 2px; }

/* Mobile accordion (inside .mobile-menu, < 900px) */
.m-acc { border-bottom: 1px solid var(--color-border); }
.m-acc-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: var(--space-3) 0; font-size: 1rem; font-weight: 600; color: var(--color-text);
}
.m-acc-trigger .nav-caret { opacity: .6; }
.m-acc.is-open .nav-caret { transform: rotate(180deg); }
.m-acc-panel { display: none; padding: 0 0 var(--space-2) var(--space-4); }
.m-acc.is-open .m-acc-panel { display: block; }
.m-acc-panel a { display: block; padding: var(--space-2) 0; color: var(--color-text-secondary); border-bottom: none; font-weight: 500; }
.m-acc-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-secondary); font-weight: 700; margin: var(--space-2) 0 2px; }
.m-simple { display: block; padding: var(--space-3) 0; font-weight: 500; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); }
.m-simple:last-child { border-bottom: none; }

/* ===========================================================================
   Connected-workflow visual — homepage "Everything connects" section.
   Three vertical chains (Inspections / Workforce / Equipment), each running
   from a trigger to a green "resolved/ready" outcome — the platform's
   differentiator made visible.
=========================================================================== */
.connect-flows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .connect-flows { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.flow-col {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px 20px;
}
.flow-title { font-size: .95rem; font-weight: 700; text-align: center; color: var(--color-text); margin: 0 0 18px; }
.flow-chain { display: flex; flex-direction: column; align-items: stretch; }
.flow-step {
  text-align: center; background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 12px 14px; font-size: .9rem; font-weight: 600; color: var(--color-text);
}
.flow-connector { width: 2px; height: 18px; background: var(--color-border); margin: 6px auto; position: relative; }
.flow-connector::after {
  content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--color-border);
}
/* Outcome step — resolved / ready (readable dark green on the success tint). */
.flow-step.is-end { background: var(--color-success-bg); border-color: #86efac; color: #15803d; }

/* ===========================================================================
   EHSTEC AI page
=========================================================================== */
/* AI badge (zap + label), accent-tinted */
.ai-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent);
  background: var(--color-accent-bg); padding: 6px 12px; border-radius: 999px; }
.ai-badge svg { width: 15px; height: 15px; }
.ai-badge-lg { font-size: .82rem; padding: 8px 15px; }

/* Dark hero */
.ai-hero { padding-block: clamp(56px, 8vw, 104px); overflow: hidden; }
.ai-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 880px) { .ai-hero-grid { grid-template-columns: 1fr; } }
.ai-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; }
.ai-hero .text-lead { color: var(--color-dark-text-secondary); max-width: 48ch; }
.ai-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ai-hero-trust { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--color-dark-text-secondary); }
.ai-hero-trust svg { width: 16px; height: 16px; color: var(--color-success); }
.btn-outline-light { border: 1px solid rgba(248,250,252,.28); color: var(--color-dark-text); background: transparent; }
.btn-outline-light:hover { background: rgba(248,250,252,.08); border-color: rgba(248,250,252,.5); }
.ai-badge-onDark { color: #a9c1ff; background: rgba(99,140,255,.14); }

/* AI Summary card (composed) */
.ai-card { padding: 22px 22px 18px; max-width: 460px; margin-inline: auto; }
.ai-card-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 12px 0 4px; }
.ai-insights { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ai-insights li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; color: var(--color-text); line-height: 1.4; }
.ai-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px;
  background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg); }
.ai-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--color-border); font-size: .8rem; color: var(--color-text-secondary); }
.ai-card-foot svg { width: 15px; height: 15px; color: var(--color-success); flex: none; }

/* Forms AI prompt → draft (composed) */
.ai-prompt-wrap { max-width: 460px; margin-inline: auto; }
.ai-prompt { display: flex; align-items: center; gap: 10px; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow-md, 0 8px 20px -12px rgba(15,23,42,.15)); }
.ai-prompt-text { flex: 1; font-size: .95rem; color: var(--color-text); }
.ai-prompt-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--color-accent); color: #fff;
  font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.ai-prompt-btn svg { width: 15px; height: 15px; }
.ai-prompt-arrow { width: 2px; height: 26px; background: var(--color-border); margin: 6px auto; position: relative; }
.ai-prompt-arrow::after { content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-border); }
.ai-draft { padding: 18px 20px; }
.ai-draft-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
.ai-draft-section { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-secondary); margin: 14px 0 8px; }
.ai-draft-q { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--color-text); padding: 5px 0; }
.ai-q-dot { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--color-border); }

/* Benefit + trust card grids */
.ai-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .ai-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ai-benefits { grid-template-columns: 1fr; } }
.ai-benefit { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 20px; }
.ai-benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 14px; }
.ai-benefit-icon svg { width: 20px; height: 20px; }
.ai-benefit h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--color-text); }
.ai-benefit p { font-size: .9rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }

.ai-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .ai-trust { grid-template-columns: 1fr; } }
.ai-trust-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 22px; }
.ai-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--color-success-bg); color: var(--color-success); margin-bottom: 14px; }
.ai-trust-icon svg { width: 21px; height: 21px; }
.ai-trust-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 7px; color: var(--color-text); }
.ai-trust-card p { font-size: .92rem; color: var(--color-text-secondary); margin: 0; line-height: 1.55; }

/* ===========================================================================
   product_flow — animated lifecycle visual for product pages
=========================================================================== */
.flow-card {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(15,23,42,.28), 0 10px 24px -14px rgba(15,23,42,.12);
  padding: 24px; max-width: 440px; margin-inline: auto;
}
.flow-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.flow-entity-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent-bg); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; flex: none; }
.flow-entity-icon svg { width: 22px; height: 22px; }
.flow-entity-text b { display: block; font-size: 1rem; color: var(--color-text); }
.flow-entity-text small { display: block; font-size: .82rem; color: var(--color-text-secondary); }
.flow-status { padding: 24px 0; min-height: 128px; text-align: center; }
.flow-pill { display: inline-flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 700;
  padding: 9px 17px; border-radius: 999px; transition: background .45s ease, color .45s ease; }
.flow-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.flow-pill.tone-danger  { background: var(--color-danger-bg);  color: #b91c1c; }
.flow-pill.tone-warning { background: #fbf0df;                 color: #b45309; }
.flow-pill.tone-info    { background: var(--color-accent-bg);  color: var(--color-accent); }
.flow-pill.tone-success { background: var(--color-success-bg); color: #15803d; }
.flow-caption { margin: 14px auto 0; max-width: 36ch; font-size: .92rem; color: var(--color-text-secondary); }
.flow-rail { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 8px 4px 0; }
.flow-rail::before { content: ""; position: absolute; top: 21px; left: 8%; right: 8%; height: 2px; background: var(--color-border); z-index: 0; }
.flow-node { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg-secondary);
  border: 2px solid var(--color-border); color: var(--color-text-secondary); font-size: .74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: all .3s ease; }
.flow-node.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: scale(1.12); }
.flow-node.is-done { background: var(--color-success); border-color: var(--color-success); color: #fff; }

/* ===========================================================================
   Product-page skeleton — pillars strip + related-module cross-links
=========================================================================== */
.prod-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .prod-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prod-pillars { grid-template-columns: 1fr; } }
.prod-pillar { display: flex; align-items: flex-start; gap: 12px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; }
.prod-pillar-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--color-accent-bg);
  color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.prod-pillar-icon svg { width: 19px; height: 19px; }
.prod-pillar-label { font-size: .95rem; font-weight: 700; color: var(--color-text); }
.prod-pillar-desc { font-size: .82rem; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }

.prod-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .prod-related { grid-template-columns: 1fr; } }
.prod-related-card { display: block; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px; transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.prod-related-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.prod-related-label { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--color-text); }
.prod-related-label svg { width: 16px; height: 16px; color: var(--color-accent); }
.prod-related-desc { font-size: .88rem; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.5; }

/* Stacked composed cards (e.g. asset-readiness list on a product page) */
.stack-visual { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin-inline: auto; }

/* ===========================================================================
   Distinct product-page hero visuals
=========================================================================== */
.hv-card { max-width: 430px; margin-inline: auto; padding: 22px; }
.hv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hv-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); }
.hv-kicker.mb { display: block; margin-bottom: 14px; }
.hv-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: .8rem; color: var(--color-text-secondary); }
.hv-foot svg { width: 15px; height: 15px; color: var(--color-success); flex: none; }
.ac-row-txt b { display: block; font-size: .92rem; color: var(--color-text); line-height: 1.2; }
.ac-row-txt small { display: block; font-size: .78rem; color: var(--color-text-secondary); margin-top: 1px; }

/* Corrective Actions — action record */
.ac-title { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin: 14px 0 4px; }
.ac-meta { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ac-row { display: flex; align-items: center; gap: 11px; }
.ac-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--color-accent-bg); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.ac-ico svg { width: 17px; height: 17px; }

/* Employees — readiness profile */
.rp-head { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.rp-status { margin: 16px 0; }
.rp-reqs { display: flex; flex-direction: column; gap: 10px; }
.rp-req { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--color-text); }
.rp-req > svg { width: 17px; height: 17px; color: var(--color-success); flex: none; }
.rp-req-name { flex: 1; }
.rp-req-ok { font-size: .75rem; font-weight: 700; color: #15803d; background: var(--color-success-bg); padding: 2px 9px; border-radius: 999px; }

/* Contractors — compliance board */
.cb-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.cb-row:last-child { border-bottom: none; }
.cb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cb-success { background: var(--color-success); } .cb-warning { background: #d97706; } .cb-danger { background: var(--color-danger); }
.cb-name { flex: 1; font-size: .95rem; font-weight: 600; color: var(--color-text); }
.cb-status { font-size: .82rem; color: var(--color-text-secondary); }
.cb-success-txt { color: #15803d; } .cb-warning-txt { color: #b45309; } .cb-danger-txt { color: #b91c1c; }

/* Documents — acknowledgement */
.da-head { display: flex; align-items: center; gap: 11px; }
.da-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--color-accent-bg); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.da-ico svg { width: 19px; height: 19px; }
.da-ver { margin-left: auto; font-size: .72rem; font-weight: 700; color: #15803d; background: var(--color-success-bg); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.da-ack { margin: 20px 0 4px; }
.da-ack-top { display: flex; justify-content: space-between; font-size: .85rem; color: var(--color-text-secondary); margin-bottom: 8px; }
.da-ack-top b { color: var(--color-text); }

/* Reporting — KPI dashboard */
.db-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.db-chart { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.db-chart-label { font-size: .78rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 10px; }

/* Flow chain as a solution-page hero: cap width + center so it matches the
   other hero cards instead of stretching full-container. (No effect inside the
   homepage .connect-flows grid, whose tracks are already narrower.) */
.flow-col { max-width: 460px; margin-inline: auto; }

/* ===========================================================================
   Resource library grid (courses, templates)
=========================================================================== */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } }
.res-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.res-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.res-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 14px; }
.res-icon svg { width: 20px; height: 20px; }
.res-cat { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); background: var(--color-bg-secondary); border-radius: 999px; padding: 3px 10px; margin-left: 8px; }
.res-title { font-size: 1.02rem; font-weight: 700; color: var(--color-text); margin: 12px 0 6px; }
.res-desc { font-size: .9rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.res-groups > * + * { margin-top: 44px; }
.res-group-head { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 18px; }

/* ===========================================================================
   Security & Trust page
=========================================================================== */
/* Scan band — the strongest implemented controls, at a glance */
.sec-glance { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin: 32px auto 0; max-width: 800px; padding: 18px 26px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; }
.sec-glance span { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--color-text); }
.sec-glance svg { width: 17px; height: 17px; color: var(--color-success); flex: none; }
/* Responsible AI: compact single row, subordinate to the fundamentals above */
.sec-ai { display: flex; align-items: center; gap: 18px; margin-top: 18px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; }
.sec-ai .ai-trust-icon { margin-bottom: 0; flex: none; }
.sec-ai-body { flex: 1; }
.sec-ai-body h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; color: var(--color-text); }
.sec-ai-body p { font-size: .9rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.sec-ai-link { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--color-accent); white-space: nowrap; }
.sec-ai-link svg { width: 15px; height: 15px; }
@media (max-width: 680px) { .sec-ai { flex-direction: column; align-items: flex-start; } }

/* ---------- Guides (knowledge centre) ----------
   A reading layout, not a product layout: one narrow column, generous leading,
   and headings that are quieter than a marketing H2 because the reader is here
   to read rather than to scan. */
.guide-head { padding-block: var(--space-10) var(--space-8); }
.guide-byline {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin-top: var(--space-6); font-size: 0.875rem; color: var(--color-text-secondary);
}
.guide-body { padding-bottom: var(--space-16); }
.guide-body > h2 {
  font-size: 1.5rem; margin-top: var(--space-12); margin-bottom: var(--space-4);
  scroll-margin-top: var(--space-8);
}
.guide-body > h3 { font-size: 1.125rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.guide-body > p { margin-bottom: var(--space-4); line-height: 1.75; }
.guide-body > ul, .guide-body > ol { margin-bottom: var(--space-6); padding-left: var(--space-6); line-height: 1.7; }
.guide-body > ul li, .guide-body > ol li { margin-bottom: var(--space-2); }
.guide-body a { color: var(--color-accent); }

.guide-toc {
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-10);
}
.guide-toc-head {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-secondary); margin: 0 0 var(--space-3); font-weight: 700;
}
.guide-toc ol { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.guide-toc a { color: var(--color-text); text-decoration: none; }
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--color-accent); text-decoration: underline; }

/* Where teaching stops and the product starts — deliberately obvious. */
.guide-callout {
  border-left: 3px solid var(--color-accent); background: var(--color-accent-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
}
.guide-callout-title { font-weight: 700; margin: 0 0 var(--space-2); }
.guide-callout p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }
.guide-callout a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.guide-callout a:hover { text-decoration: underline; }
.guide-callout svg { width: 16px; height: 16px; }

.guide-refs { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.guide-refs ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.guide-refs a { color: var(--color-accent); }

/* Comparison tables inside guides scroll rather than breaking the column. */
.guide-table { overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.guide-table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 560px; }
.guide-table th, .guide-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.guide-table th { background: var(--color-bg-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.guide-table tbody tr:last-child td { border-bottom: 0; }

.guide-formula {
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0;
  font-size: 1rem; line-height: 1.7;
}
.guide-formula strong { display: block; margin-bottom: var(--space-2); }

/* Resource hub cards. */
.res-cluster { margin-bottom: var(--space-12); }
.res-cluster-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.res-cluster-head h2 { font-size: 1.25rem; margin: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.guide-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.guide-card:hover, .guide-card:focus-visible { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.guide-card h3 { font-size: 1.05rem; margin: 0; color: var(--color-text); }
.guide-card p { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; }
.guide-card .guide-card-meta { font-size: 0.78rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* ===== TRIR / DART calculator (/resources/trir-dart-calculator) ===== */
/* Reuses .form-field / .form-label / .form-input / .form-error so the calculator
   inherits the site's existing input styling and focus treatment rather than
   introducing a second form language. Only the calculator-specific layout,
   results block and privacy note are defined here. */

.calc {
  margin: var(--space-8) 0 var(--space-12);
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.calc-title { margin: 0 0 var(--space-5); font-size: 1.25rem; }
.calc-form .form-field { margin-bottom: var(--space-5); }
.calc-help {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
/* Errors are text, never colour alone — .form-error supplies the colour and the
   message itself carries the meaning for anyone who cannot see it. */
.calc-error:empty { display: none; }
.calc-form .form-input.is-invalid { border-color: var(--color-danger); }

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
/* Comfortable touch targets on a phone; the field user checking a rate is a
   plausible reader. */
.calc-actions .btn { min-height: 44px; }

.calc-results {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
@media (min-width: 640px) {
  .calc-results { grid-template-columns: 1fr 1fr; }
  .calc-result-note { grid-column: 1 / -1; }
}
.calc-result { display: flex; flex-direction: column; gap: var(--space-1); }
.calc-result-label {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.calc-result-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.calc-result-work {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.calc-result-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.calc-privacy {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* ===== utilities.css ===== */
/**
 * Small, single-purpose utility classes — spacing/visibility overrides that
 * don't warrant a named component. Reach for a component class first;
 * these are for the last-mile adjustment.
 */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.section-intro {
  max-width: 620px;
  margin-bottom: var(--space-12);
}

.section-intro.text-center {
  margin-inline: auto;
}

.section-intro .text-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.section-intro h2 {
  margin-bottom: var(--space-4);
}

.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: initial;
  }
}

/* .hide-mobile's `display: initial` resolves to `inline`, which is fine for
 * a plain link — but a `.btn` needs `inline-flex` to keep its icon+label on
 * one line, and if the button is a flex item (e.g. inside .flex-between),
 * `inline` gets "blockified" to `block` per the CSS Display spec, breaking
 * the flex layout entirely and dropping the icon to its own line. Higher
 * specificity here (.btn.hide-mobile) wins over the plain rule above
 * regardless of source order. */
@media (min-width: 768px) {
  .btn.hide-mobile {
    display: inline-flex;
  }
}

.hide-desktop {
  display: initial;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard accessibility, hidden until focused */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Above-the-fold entrance (no JavaScript) ----------
 * Hero blocks must be readable the instant CSS applies, so they are never
 * opacity-gated: .reveal below starts at opacity 0 and only becomes visible
 * when site.js runs its IntersectionObserver, which would both delay LCP and
 * leave the hero blank if the script fails. This entrance animates transform
 * only, runs off a CSS keyframe rather than a class added by script, and
 * leaves the content fully opaque from first paint.
 */
.hero-enter {
  animation: hero-enter var(--duration-slow) var(--ease-out) both;
}

.hero-enter-delay {
  animation-delay: 120ms;
}

@keyframes hero-enter {
  from { transform: translateY(16px); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-enter {
    animation: none;
  }
}

/* ---------- Scroll-reveal (replaces WOW.js) ---------- */
/* Respects reduced-motion by simply staying visible with no transition. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}