/* Self-hosted fonts (latin subset, variable woff2 from Google Fonts) — replaces a render-blocking
   cross-origin @import and lets the CSP drop the two Google Fonts origins. Each family is one
   variable file covering its weight range. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrainsmono.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/newsreader.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/newsreader-italic.woff2') format('woff2');
}

:root {
  --bg-color: #D7D7D0;
  --bg-surface: #E2E2DC;
  --bg-card: #D0D0C9;
  --border-color: rgba(20, 20, 20, 0.12);
  --border-active: rgba(20, 20, 20, 0.35);
  --text-primary: #141414;
  --text-secondary: #5F5F5B;
  --text-muted: #858580;
  --signal-green: #15803D;
  --signal-amber: #B45309;
  --signal-blue: #1D4ED8;
  --font-serif: 'Newsreader', 'Georgia', serif;
  --font-sans: 'Inter', 'system-ui', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius-default: 2px;
  --radius-md: 4px;
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --max-width: 1280px;

  /* Fluid type & spacing scale (mobile-first). clamp() lets display type and
     section rhythm scale smoothly with the viewport, so headings no longer jump
     at breakpoints and each size needs one declaration instead of a media-query
     override per element. min values are tuned to fit a 360px phone. */
  --step-hero: clamp(2.75rem, 9vw, 4rem);      /* homepage h1 */
  --step-display: clamp(2.25rem, 8vw, 3.5rem); /* sub-page h1 */
  --step-title: clamp(1.9rem, 4.5vw, 2.75rem); /* section titles */
  --space-section-y: clamp(3.25rem, 8vw, 6rem);
  --space-section-x: clamp(1.25rem, 5vw, 4rem);

  /* Motion system — one easing + duration set so every entrance/reveal reads as
     the same hand. The feature demos already use these curves; the scroll-reveal
     below and future work should reference these tokens rather than re-inventing. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 0.35s;
  --dur-2: 0.6s;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

/* Scroll-reveal (reveal.js). Only active once JS tags <html> with .js-reveal and adds .reveal to an
   element, so without JS everything is visible. Excluded under reduced motion (reveal.js no-ops). */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* Accessible keyboard focus — a visible ring on interactive elements (was relying on UA defaults). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.rollup-tab:focus-visible,
.currency-opt:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: rgba(20, 20, 20, 0.15);
  border-radius: var(--radius-default);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 20, 20, 0.35);
}

/* Layout Elements - Hairline Blueprint Grids */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0;
}

.grid-layout {
  display: grid;
  /* minmax(0, 1fr) — not a bare 1fr — so the track can shrink below its
     content's min-width. A bare 1fr is minmax(auto, 1fr); on mobile that let
     wide grid content inflate the track past the viewport, which forced the
     whole page wider than the screen (the "pinch to zoom out" bug). */
  grid-template-columns: minmax(0, 1fr);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.section-grid {
  border-bottom: 1px solid var(--border-color);
  display: grid;
  /* minmax(0, 1fr) so the content column can shrink below its content's min-width — needed for the
     horizontal-scroll carousel to scroll instead of inflating the column (and the page). */
  grid-template-columns: 240px minmax(0, 1fr);
}

@media (max-width: 968px) {
  .section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Mobile horizontal-overflow guard. Flex/grid children default to
     min-width:auto, so their content can push a track wider than the screen
     and inflate the whole page (forcing a zoomed-out view). Letting content
     boxes shrink to 0 makes text wrap and keeps every page within the viewport.
     Excludes the demo mockups, which scroll inside their own frame instead. */
  main *:not(.feature-visual):not(.pivot-mock):not(.proof-graph-wrap),
  footer * {
    min-width: 0;
  }
}

/* Sticky / Sidebar Section Counter */
.section-meta {
  padding: 4rem 2rem;
  border-right: 1px solid var(--border-color);
  position: relative;
  background: var(--bg-surface);
}

.section-meta-sticky {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 968px) {
  .section-meta {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 2rem;
  }
  .section-meta-sticky {
    position: relative;
    top: 0;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.counter-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.counter-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Primary Content Columns */
.section-content {
  padding: var(--space-section-y) var(--space-section-x);
}

/* Typography Hierarchy */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.serif-display {
  font-family: var(--font-serif);
}

.drop-cap::first-letter {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  float: left;
  line-height: 0.8;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  color: var(--text-primary);
  font-style: italic;
}

.section-title {
  font-size: var(--step-title);
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 640px;
  line-height: 1.6;
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: rgba(215, 215, 208, 0.85);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0 2rem;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* "for Unleashed" lockup beside the header wordmark. Hidden on phones so the
   logo + hamburger still fit. */
.logo-suffix {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-left: 0.6rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--border-color);
  white-space: nowrap;
}
/* On phones, drop "for Unleashed" onto its own line under the wordmark rather than beside it. */
@media (max-width: 640px) {
  .logo { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .logo-suffix { margin-left: 0; padding-left: 0; border-left: none; font-size: 1rem; }
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

nav a {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
}

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

/* Blueprint Outline Card (Grid Box) */
.blueprint-card {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  padding: 1.75rem;
  border-radius: var(--radius-default);
  transition: var(--transition);
  position: relative;
}

.blueprint-card:hover {
  border-color: var(--border-active);
}

.blueprint-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.blueprint-card-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.blueprint-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(20, 20, 20, 0.2);
  color: var(--text-secondary);
  border-radius: var(--radius-default);
}

.blueprint-card-content {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Corner Crop Marks (CAD / Viewfinder aesthetic) */
.crop-mark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--text-primary);
  border-style: solid;
  z-index: 10;
  pointer-events: none;
}

.crop-tl {
  top: -3px;
  left: -3px;
  border-width: 2px 0 0 2px;
}

.crop-tr {
  top: -3px;
  right: -3px;
  border-width: 2px 2px 0 0;
}

.crop-bl {
  bottom: -3px;
  left: -3px;
  border-width: 0 0 2px 2px;
}

.crop-br {
  bottom: -3px;
  right: -3px;
  border-width: 0 2px 2px 0;
}

/* Editorial Testimonial Pull-Quote Section */
.editorial-quote {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 5rem 4rem;
  background: var(--bg-color);
}

.quote-block {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  max-width: 960px;
}

@media (max-width: 768px) {
  .quote-block {
    font-size: 1.75rem;
  }
}

.attribution-block {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.attribution-line {
  width: 1px;
  height: 28px;
  background: rgba(20, 20, 20, 0.25);
}

.attribution-author {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.attribution-role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Technical Video Player Container */
.technical-video-frame {
  position: relative;
  border: 1px solid var(--border-color);
  background: #C9C9C2;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--radius-default);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.duration-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--text-primary);
  color: var(--bg-color);
  padding: 0.25rem 0.5rem;
  letter-spacing: 0.1em;
  z-index: 5;
  border-radius: var(--radius-default);
}

.play-button-overlay {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 5;
}

.play-button-overlay svg {
  color: var(--bg-color);
  margin-left: 3px;
}

.technical-video-frame:hover .play-button-overlay {
  transform: scale(1.08);
  background: var(--text-primary);
}

.video-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(20, 20, 20, 0.08);
}

/* 3D Isometric Projection Layer Diagrams */
.iso-plane-wrapper {
  perspective: 900px;
  padding: 3rem 0;
  display: flex;
  justify-content: center;
}

.iso-plane {
  transform: rotateX(55deg) rotateZ(-30deg);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 280px;
  position: relative;
}

.iso-layer {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  border-radius: var(--radius-default);
  color: var(--text-primary);
  text-align: center;
  position: relative;
  transition: var(--transition);
}

.iso-layer:hover {
  border-color: var(--border-active);
  transform: translateZ(6px);
}

.iso-projection-line {
  border-left: 1px dashed rgba(20, 20, 20, 0.25);
  position: absolute;
  width: 1px;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
}

/* Buttons with Interactive Inversion */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85rem 2rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: var(--radius-default);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  position: relative;
}

.btn-primary {
  background-color: var(--text-primary);
  color: var(--bg-color);
  border-color: var(--text-primary);
  border-radius: 999px;
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--text-primary);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px dashed var(--border-active);
  border-radius: 999px;
}

.btn-secondary:hover {
  border-color: var(--text-primary);
  background: rgba(20, 20, 20, 0.03);
}

.btn-secondary .crop-mark {
  border-color: var(--text-primary);
}

.btn-sm {
  padding: 0.55rem 1.35rem;
  font-size: 0.8rem;
}

/* Reassurance chip (e.g. "Read-only access" in the How it works steps) */
.secure-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: rgba(20, 20, 20, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

/* "Request your ERP" form (roadmap section) */
.erp-request {
  max-width: 680px;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

.erp-request-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}

.erp-request-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

.erp-request-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* [hidden] alone loses to the display:flex above, so hide the form explicitly. */
.erp-request-form[hidden] {
  display: none;
}

.erp-input {
  flex: 1 1 220px;
  padding: 0.7rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-default);
}

.erp-input::placeholder {
  color: var(--text-secondary);
}

.erp-input:focus {
  outline: none;
  border-color: var(--text-primary);
}

.erp-request-form .btn {
  flex: 0 0 auto;
}

.erp-request-status {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.erp-request-status[data-error] {
  color: var(--signal-amber);
}

/* Header Sign In / Trial Now Pill Group */
.nav-cta-group {
  display: flex;
  align-items: center;
  background: rgba(20, 20, 20, 0.06);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.nav-cta-signin {
  padding: 0.45rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 999px;
  transition: var(--transition);
}

.nav-cta-signin:hover {
  color: var(--text-primary);
}

.nav-cta-trial {
  padding: 0.45rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bg-color);
  background: var(--text-primary);
  border-radius: 999px;
  transition: var(--transition);
}

.nav-cta-trial:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .nav-cta-signin {
    display: none;
  }
  .nav-cta-group {
    background: none;
    padding: 0;
  }
}

/* Mobile-only CTAs that live inside the open menu panel. Hidden on desktop;
   revealed (and the header's own status pill + CTA group hidden) at <=768px. */
.nav-mobile-cta {
  display: none;
}

/* System Status Indicator */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-color);
  background: rgba(20, 20, 20, 0.03);
  padding: 0.35rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  border-radius: var(--radius-default);
}

.status-dot-wrapper {
  position: relative;
  display: flex;
  height: 8px;
  width: 8px;
}

.status-dot-ping {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: var(--signal-green);
  opacity: 0.75;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-dot {
  position: relative;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  background-color: var(--signal-green);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Hero Section */
.hero {
  padding-top: 140px;
  padding-bottom: 6rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

/* Horizontal insets for the hero content. Was an inline 4rem, which didn't
   collapse on mobile and forced the layout wider than the viewport. */
.hero-inner {
  padding: 0 var(--space-section-x);
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--step-hero);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.hero-title span {
  font-style: italic;
}

.hero-description {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

.hero-visual {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-default);
  padding: 1.5rem;
}

/* ============================================================
   Hero dashboard (Phase 3) — KPIs + revenue combo chart,
   built/animated by hero-demo.js. Leads with the product.
   ============================================================ */
.hero-dashboard {
  --bar: oklch(0.44 0.13 255);
  --trend: var(--signal-amber);
  position: relative;
}
.hero-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--signal-green);
}
.hero-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); margin: 0.9rem 0 1.1rem; }
.hero-kpi { background: var(--bg-card); padding: 0.55rem 0.65rem; }
.hero-kpi-lbl { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.hero-kpi-val { font-family: var(--font-serif); font-size: 1.15rem; color: var(--text-primary); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.hero-kpi-delta { font-family: var(--font-mono); font-size: 0.55rem; color: var(--signal-green); margin-left: 0.35rem; }
.hero-chart-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.hero-chart-label span:first-child { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.hero-chart { width: 100%; }
.hero-chart-svg { width: 100%; height: auto; display: block; }
.hero-grid { stroke: var(--chart-grid, rgba(20,20,20,0.09)); stroke-width: 1; }
.hero-bar { fill: var(--bar); opacity: 0.9; transform: scaleY(0); transform-origin: center bottom; transform-box: fill-box; }
.hero-trend { fill: none; stroke: var(--trend); stroke-width: 2; }
.hero-trend-dot { fill: var(--trend); opacity: 0; }
.hero-xlabel { font-family: var(--font-mono); font-size: 8px; fill: var(--chart-tick, #5c5c55); }

#hero-demo.is-playing .hero-bar {
  transform: scaleY(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--bi, 0) * 0.05s + 0.15s);
}
#hero-demo.is-playing .hero-trend { transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s; }
#hero-demo.is-playing .hero-trend-dot { opacity: 1; transition: opacity 0.4s ease 1.3s; }

@media (prefers-reduced-motion: reduce) {
  #hero-demo .hero-bar { transform: none; transition: none !important; }
  #hero-demo .hero-trend { transition: none !important; }
  #hero-demo .hero-trend-dot { opacity: 1; }
}

/* Deployment section: the sync-network sphere as the "we replicate & keep in sync" visual */
.deploy-intro { display: grid; grid-template-columns: 1fr 0.9fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
.deploy-copy { max-width: 680px; }
.deploy-visual {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-default);
  padding: 1.25rem;
}
.deploy-visual .hero-graphic-wrap { margin-top: 0.5rem; }
@media (max-width: 968px) {
  .deploy-intro { grid-template-columns: 1fr; gap: 2rem; }
  .deploy-visual { max-width: 460px; }
}

/* Technical Dashboard Mockup */
.mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.mockup-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.mockup-cell {
  border: 1px solid var(--border-color);
  padding: 1rem;
  background: rgba(255, 255, 255, 0.2);
}

.mockup-cell-lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.mockup-cell-val {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--text-primary);
  margin-top: 0.25rem;
}

.mockup-code-block {
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.05);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  height: 120px;
  overflow: hidden;
}

/* Simulator Section */
.simulator-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
}

.erp-selector {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.erp-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: var(--radius-default);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  text-align: left;
}

.erp-btn:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
}

.erp-btn.active {
  border-color: var(--text-primary);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.erp-btn-name {
  font-weight: 500;
  font-size: 0.9rem;
}

.erp-btn-counter {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Simulator Display */
.sim-terminal {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  border-radius: var(--radius-default);
  display: flex;
  flex-direction: column;
  height: 420px;
}

.sim-terminal-header {
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.sim-terminal-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.raw-table-preview {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  overflow-y: auto;
  flex-grow: 1;
}

.sim-console-btn-container {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}

.console-btn {
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  padding: 0.5rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--radius-default);
}

.console-btn:hover {
  background: var(--text-primary);
  color: var(--bg-color);
}

.sim-enhanced-output {
  display: none;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

.sim-enhanced-output.visible {
  display: flex;
}

.sim-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-color);
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-color);
}

.kpi-cell {
  background: var(--bg-surface);
  padding: 0.85rem;
  text-align: center;
}

.kpi-val {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-primary);
}

.kpi-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.terminal-graph {
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.02);
  height: 120px;
  position: relative;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

.terminal-log-stream {
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  height: 70px;
  overflow-y: auto;
}

.terminal-log-stream div {
  margin-bottom: 0.2rem;
}

.stream-success {
  color: var(--signal-green);
}

.stream-info {
  color: var(--text-secondary);
}

/* Feature Blueprint Grid */
.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-color);
}

.blueprint-grid .blueprint-card {
  border: none;
  border-right: 1px solid var(--border-color);
  background: transparent;
  padding: 3rem 2rem;
}

.blueprint-grid .blueprint-card:last-child {
  border-right: none;
}

.blueprint-grid .blueprint-card:hover {
  background: rgba(0, 0, 0, 0.02);
}

.feature-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

@media (max-width: 1024px) {
  .blueprint-grid {
    grid-template-columns: 1fr;
  }
  .blueprint-grid .blueprint-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .blueprint-grid .blueprint-card:last-child {
    border-bottom: none;
  }
}

/* ROI Calculator Blueprint */
.calculator-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border: 1px solid var(--border-color);
}

.calc-inputs-col {
  padding: 3rem;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background: var(--bg-surface);
}

.calc-results-col {
  padding: 3rem;
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 968px) {
  .calculator-layout {
    grid-template-columns: 1fr;
  }
  .calc-inputs-col {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 2rem;
  }
  .calc-results-col {
    padding: 2rem;
  }
}

.slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.slider-lbl {
  color: var(--text-secondary);
}

.slider-val {
  color: var(--text-primary);
  font-weight: 700;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: var(--border-color);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 1px solid var(--bg-color);
  transition: var(--transition);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.calc-total-wrap {
  text-align: center;
  margin-bottom: 2rem;
}

.calc-total-lbl {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.calc-total-val {
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--text-primary);
  line-height: 1;
  margin-top: 0.5rem;
}

.calc-ledger {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
}

.calc-ledger-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.calc-ledger-lbl {
  color: var(--text-secondary);
}

.calc-ledger-val {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* Sub-page Previews */
.previews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-color);
}

.previews-grid .blueprint-card {
  border: none;
  border-right: 1px solid var(--border-color);
  background: transparent;
  padding: 3rem 2rem;
}

.previews-grid .blueprint-card:last-child {
  border-right: none;
}

.previews-grid .blueprint-card:hover {
  background: rgba(0, 0, 0, 0.02);
}

.preview-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: 2rem;
}

.preview-link-arrow svg {
  transition: var(--transition);
}

.blueprint-card:hover .preview-link-arrow svg {
  transform: translateX(4px);
}

@media (max-width: 968px) {
  .previews-grid {
    grid-template-columns: 1fr;
  }
  .previews-grid .blueprint-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .previews-grid .blueprint-card:last-child {
    border-bottom: none;
  }
}

/* CTA Banner Redesign */
.cta-technical-banner {
  border: 1px solid var(--border-color);
  padding: 5rem 3rem;
  background: var(--bg-surface);
  text-align: center;
}

.cta-header-wrap {
  max-width: 620px;
  margin: 0 auto;
}

.cta-title {
  font-family: var(--font-serif);
  font-size: var(--step-display);
  margin-bottom: 1rem;
}

.cta-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
}

/* Footer Section */
footer {
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-surface);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding: 5rem 3rem;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

@media (max-width: 968px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem 2rem;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 240px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col a {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
  }
}

/* Company notice under the footer bar. UK companies must show their registered name, place of
   registration, number and registered office on their website (Company, LLP and Business Names
   Regulations 2015), so it's on every marketing page rather than only the legal pages. */
.footer-legal {
  margin: 0;
  padding: 0 3rem 2rem;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-legal {
    /* Extra bottom room so the floating Chat button (chat-launcher.js) never covers the text. */
    padding: 0 2rem 5rem;
    text-align: center;
  }
}

/* Monoline Stack Diagram */
.pipeline-diagram {
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.02);
  padding: 1.5rem;
  margin-top: 2rem;
}

.diagram-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.diagram-node {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border-radius: var(--radius-default);
}

.diagram-connector {
  flex-grow: 1;
  height: 1px;
  background: var(--border-color);
  position: relative;
  margin: 0 0.5rem;
}

.diagram-connector::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal-blue);
  animation: data-flow-pulse 2s linear infinite;
}

@keyframes data-flow-pulse {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Sub-page layouts: Editorial Theme */
.sub-hero {
  padding: 120px 0 4rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.sub-hero-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.sub-hero-title {
  font-family: var(--font-serif);
  font-size: var(--step-display);
  font-weight: 300;
  margin-bottom: 1rem;
}

.sub-hero-subtitle {
  font-family: var(--font-sans);
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.6;
}

.sub-content-grid {
  border-bottom: 1px solid var(--border-color);
}

.ledger-layout {
  display: flex;
  flex-direction: column;
}

.ledger-row {
  display: grid;
  grid-template-columns: 200px 1fr 180px;
  border-bottom: 1px solid var(--border-color);
  padding: 2rem;
  align-items: center;
}

.ledger-row:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .ledger-row {
    /* !important overrides the per-row inline `grid-template-columns: 260px 1fr`
       on the pricing FAQ — inline styles otherwise win and keep a fixed 260px
       column that overflows the phone. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem;
    padding: 1.5rem;
  }
}

.ledger-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.ledger-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--text-primary);
}

.ledger-desc {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.ledger-action {
  text-align: right;
}

@media (max-width: 768px) {
  .ledger-action {
    text-align: left;
  }
}

/* Hero Constellation Visual */
.hero-graphic-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-graphic-svg {
  width: 100%;
  height: auto;
}

.node-label {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-pulse {
  opacity: 0;
  animation: hub-breathe 8s linear infinite;
}

@keyframes hub-breathe {
  0% { r: 22; opacity: 0; stroke-width: 1; }
  5% { opacity: 0.6; }
  15% { r: 38; opacity: 0; stroke-width: 0.5; }
  100% { r: 38; opacity: 0; stroke-width: 0.5; }
}

.source-pulse {
  opacity: 0;
  animation: source-breathe 10s linear infinite;
}

@keyframes source-breathe {
  0% { opacity: 0; }
  5% { opacity: 0.4; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

.insight-node {
  opacity: 0;
  animation: node-appear 12s linear infinite;
}

@keyframes node-appear {
  0%, 85% { opacity: 0; }
  92% { opacity: 1; }
  100% { opacity: 1; }
}

.flow-trace {
  fill: none;
  stroke: var(--signal-amber);
  stroke-width: 1;
  stroke-dasharray: 40 200;
  stroke-dashoffset: 200;
  opacity: 0;
  animation: trace-flow 12s linear infinite;
}

@keyframes trace-flow {
  0% { stroke-dashoffset: 200; opacity: 0; }
  5% { opacity: 0.5; }
  15% { opacity: 0.3; }
  20% { stroke-dashoffset: -200; opacity: 0; }
  100% { stroke-dashoffset: -200; opacity: 0; }
}

.data-particle {
  opacity: 0;
  animation: particle-fade 3s ease-in-out infinite;
}

.data-particle.amber {
  fill: var(--signal-amber);
}

.data-particle.dark {
  fill: var(--text-primary);
}

@keyframes particle-fade {
  0%, 10% { opacity: 0; }
  20% { opacity: 0.9; }
  80% { opacity: 0.9; }
  90%, 100% { opacity: 0; }
}

/* Testimonial Section */
.testimonial-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}

.testimonial-media {
  border-right: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 3rem;
  display: flex;
  align-items: center;
}

.testimonial-media-frame {
  position: relative;
  border: 1px solid var(--border-color);
  background: #C9C9C2;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--radius-default);
  aspect-ratio: 4/3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-avatar-initials {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.85);
  color: var(--bg-color);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.testimonial-avatar-name {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(20, 20, 20, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 5;
}

.testimonial-copy {
  padding: 5rem 4rem;
}

.testimonial-copy .quote-block {
  max-width: none;
}

.testimonial-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

.testimonial-logo-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

@media (max-width: 968px) {
  .testimonial-layout {
    grid-template-columns: 1fr;
  }
  .testimonial-media {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 2rem;
  }
  .testimonial-copy {
    padding: 3rem 2rem;
  }
}

/* Proof Section */
.proof-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 968px) {
  .proof-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Insight Gap Chart */
.insight-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.insight-axis {
  stroke: rgba(20, 20, 20, 0.3);
  stroke-width: 1;
  stroke-dasharray: 1 4;
}

.insight-tick {
  stroke: rgba(20, 20, 20, 0.3);
  stroke-width: 1;
}

.insight-axis-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--text-muted);
}

.insight-line-base {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.insight-dot-base {
  fill: var(--text-secondary);
}

.insight-line-lift {
  fill: none;
  stroke: var(--signal-amber);
  stroke-width: 2.25;
}

.insight-dot-lift {
  fill: var(--signal-amber);
}

.insight-gap-line {
  stroke: var(--text-primary);
  stroke-width: 1;
}

.insight-gap-arrowhead {
  fill: var(--text-primary);
}

.insight-label-box {
  fill: var(--bg-color);
  stroke: var(--border-color);
  stroke-width: 1;
}

.insight-label-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.insight-label-text.base {
  fill: var(--text-secondary);
}

.insight-label-text.lift {
  fill: var(--signal-amber);
}

.insight-gap-box {
  fill: var(--text-primary);
}

.insight-gap-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  fill: var(--bg-color);
}

/* Product Explanation Comparison */
.product-compare-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .product-compare-layout {
    grid-template-columns: 1fr;
  }
}

/* Empty State Block (e.g. no open roles) */
.empty-state-block {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 4.5rem 2rem;
  text-align: center;
  position: relative;
}

/* Pricing Page */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-color);
}

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

.pricing-single {
  border: 1px solid var(--border-color);
}

.price-tier-card {
  border-right: 1px solid var(--border-color);
  background: transparent;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-tier-card:last-child {
  border-right: none;
}

.price-tier-card.featured {
  background: var(--bg-surface);
}

.price-tier-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--text-primary);
  color: var(--bg-color);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
}

.price-tier-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.price-tier-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.price-tier-value {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  color: var(--text-primary);
}

.price-tier-period {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.price-tier-alt-currency {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.price-tier-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.price-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2.5rem;
  flex-grow: 1;
}

.price-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.price-feature-list li::before {
  content: '✓';
  color: var(--signal-green);
  font-weight: 700;
}

@media (max-width: 968px) {
  .pricing-grid,
  .pricing-grid.two-col {
    grid-template-columns: 1fr;
  }
  .price-tier-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .price-tier-card:last-child {
    border-bottom: none;
  }
}

/* How It Works Steps */
.how-it-works-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-color);
}

.how-step {
  padding: 3rem 2.5rem;
  border-right: 1px solid var(--border-color);
}

.how-step:last-child {
  border-right: none;
}

.how-step-connector {
  display: none;
}

.how-step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.how-step-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.how-step-desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .how-it-works-layout {
    grid-template-columns: 1fr;
  }
  .how-step {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 2rem;
  }
  .how-step:last-child {
    border-bottom: none;
  }
}

/* Report Builder Demo — drag-and-drop workspace
   Staged from the September 2026 UI director report (Pillar 1). Nothing in index.html or the
   sub-pages marks these up yet; they are here so a builder demo section can be dropped in
   without re-deriving the styling. The app itself does not use these — it builds the same
   surface with dnd-kit in Backend/components/dashboards/. */
.builder-workspace {
  border: 1px dashed var(--border-active);
  background: rgba(0, 0, 0, 0.02);
  padding: 1.5rem;
  min-height: 380px;
  position: relative;
}
.builder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.draggable-card {
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.draggable-card:active {
  cursor: grabbing;
  transform: scale(0.98);
  border-color: var(--text-primary);
}
.drag-handle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: grab;
  margin-right: 0.5rem;
}

/* Suggestion Banner Demo — same provenance (Pillar 2), same "staged, not yet marked up" caveat. */
.ai-suggestion-banner {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
}
.ai-suggestion-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(21, 128, 61, 0.1);
  color: var(--signal-green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-default);
}
.ai-suggestion-msg {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-left: 0.75rem;
}

/* Mobile Nav Toggle */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}

@media (max-width: 768px) {
  nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 2rem;
  }
  nav.mobile-active {
    display: block;
  }
  nav ul {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
    text-align: center;
  }
  .menu-btn {
    display: block;
  }

  /* The header only has room for the logo + hamburger on phones. Hide the
     status pill and the desktop CTA group; the CTAs reappear inside the menu.
     Scoped to `header .status-indicator` (not #global-status) so it also covers
     the static sibling pages, whose pill carries no id. */
  header .status-indicator,
  .nav-cta-group {
    display: none;
  }
  .header-container {
    padding: 0 1.25rem;
  }

  /* The two CTAs, surfaced as full-width buttons at the foot of the menu panel. */
  .nav-mobile-cta {
    display: block;
    margin-top: 0.25rem;
  }
  .nav-mobile-cta:first-of-type {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
  }
  .nav-mobile-signin,
  .nav-mobile-trial {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    min-height: 44px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .nav-mobile-signin {
    border: 1px solid var(--border-active);
    color: var(--text-primary);
  }
  .nav-mobile-trial {
    background: var(--text-primary);
    color: var(--bg-color);
  }
}

/* Hero: stack to a single column and shed the desktop insets on tablet/mobile,
   so the copy gets full width and the decorative sync-network sits below it
   (Phase 3 will replace the hero visual outright). */
@media (max-width: 968px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-visual {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 108px;
    padding-bottom: 4rem;
  }
  .hero-actions {
    flex-wrap: wrap;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
  }
  /* Contain any feature/proof mockup that would otherwise widen the page.
     `clip` (not `auto`) avoids a visible scrollbar for the sub-pixel overhang
     of the crop-mark corners now that the mockups themselves fit the viewport. */
  .feature-visual,
  .proof-graph-wrap {
    overflow-x: clip;
  }
}

/* ============================================================
   Currency toggle — pricing page
   Leads with the visitor's detected currency (GBP/USD), remembered
   in a first-party cookie; this segmented control lets them switch.
   ============================================================ */
.currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(20, 20, 20, 0.06);
  border-radius: 999px;
  padding: 3px;
  margin-top: 1.75rem;
}
.currency-opt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}
.currency-opt:hover { color: var(--text-primary); }
.currency-opt.active {
  background: var(--text-primary);
  color: var(--bg-color);
}

/* ============================================================
   Sync Network — hero visualization
   Vanilla port of the app's dashboard / data-health SyncNetwork
   (Backend/components/dashboard/sync-network.tsx): a wireframe
   geodesic hub with resource nodes orbiting on a Fibonacci sphere,
   spokes with travelling "live" pulses, ambient auto-rotation,
   drag-to-spin. JS in sync-network.js drives the per-frame math.
   ============================================================ */
@property --sync-flow { syntax: "<number>"; inherits: false; initial-value: 1; }

.sync-net {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 380px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  cursor: grab;
  perspective: 1000px;
}
.sync-net.dragging { cursor: grabbing; }

.sync-net-scene { position: absolute; inset: 0; }

.sync-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 14px rgba(30, 51, 83, 0.28));
  pointer-events: none;
}
.sync-hub svg { overflow: visible; }

.sync-rotator {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.sync-node { position: absolute; top: 50%; left: 50%; }
.sync-node-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sync-ball {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.sync-fill { position: absolute; border-radius: 50%; }
.sync-fill.pulsing { animation: sync-node-pulse 3s ease-in-out infinite; }
.sync-ball svg { position: relative; z-index: 10; }
.sync-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.sync-track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #1E3353;
  opacity: 0.18;
}
.sync-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 8px 1px var(--signal-green);
  opacity: 0;
}
.sync-flow-dot {
  animation-name: sync-flow-travel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes sync-flow-travel {
  0%   { --sync-flow: 1;   opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { --sync-flow: 0.1; opacity: 0; }
}
@keyframes sync-node-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-flow-dot { animation-name: none; opacity: 0; }
  .sync-fill.pulsing { animation: none; }
}

/* ============================================================
   Feature deep-dive sections — 2026 revamp
   Each key feature gets a split layout: an in-brand UI mockup
   on one side, explanatory copy on the other. Alternating sides
   (.reverse) give the long scroll rhythm without new chrome.
   ============================================================ */
.feature-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 4rem;
  align-items: center;
}
.feature-split.reverse .feature-visual { order: 2; }
.feature-split.reverse .feature-copy { order: 1; }

@media (max-width: 968px) {
  .feature-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
  /* Mobile reading order: heading first (so you know what you're looking at),
     then the visual, then the orange eyebrow + text. display:contents lifts the
     copy's children into the feature-split grid so they can be ordered around
     the visual; this applies to both normal and reversed splits. */
  .feature-split > .feature-copy { display: contents; }
  .feature-split .section-title { order: 1; }
  .feature-split .feature-visual { order: 2; }
  .feature-split .feature-eyebrow { order: 3; margin-bottom: 0; }
  .feature-split .feature-lead { order: 4; margin-bottom: 0; }
  .feature-split .feature-points { order: 5; }
}

.feature-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin-bottom: 1.25rem;
}
.feature-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--signal-amber);
}

.feature-copy .section-title {
  font-size: 2rem;
}

.feature-lead {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.feature-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Signature-feature bullets: icon + title, descriptor revealed on hover/tap (feature-points.js) */
.feature-point { display: block; border-bottom: 1px solid var(--border-color); padding-bottom: 0.85rem; }
.feature-point:last-child { border-bottom: none; padding-bottom: 0; }
.fp-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.fp-icon { color: var(--signal-amber); flex: none; transition: transform var(--dur-1) var(--ease-out); }
.fp-title { font-weight: 600; }
.fp-tip {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
  padding-left: calc(12px + 0.55rem);
  transition: max-height var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out), margin-top var(--dur-1) var(--ease-out);
}
.feature-point:hover .fp-tip,
.feature-point:focus-within .fp-tip,
.feature-point.is-open .fp-tip {
  max-height: 9rem;
  opacity: 1;
  margin-top: 0.4rem;
}
.feature-point:hover .fp-icon,
.feature-point:focus-within .fp-icon,
.feature-point.is-open .fp-icon { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .fp-tip, .fp-icon { transition: none; }
}
/* No-JS fallback styling (feature-points.js adds .feature-point and takes over). */
.feature-points li:not(.feature-point) {
  display: flex;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.feature-points li:not(.feature-point)::before {
  content: '';
  flex: none;
  margin-top: 0.5rem;
  width: 5px;
  height: 5px;
  background: var(--text-primary);
  border-radius: 50%;
}
.feature-points li b {
  color: var(--text-primary);
  font-weight: 600;
}

/* Shared mockup shell — a mini "app window" that stays inside the
   blueprint language (hairlines, mono chrome, no shadows). */
.feature-visual {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-default);
  padding: 1.5rem;
  position: relative;
}
.mock-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mock-dot-row {
  display: flex;
  gap: 5px;
}
.mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border-active);
}

/* --- RollUps mockup: a grouped table where one row is a RollUp --- */
.rollup-caption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1rem;
  text-align: center;
}
/* Reserves the tallest scene's height (min-height set by rollup-demo.js) so the table below can
   collapse and switch scenes without pushing the rest of the page around. Table stays top-aligned. */
.rollup-frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.rollup-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
}
.rollup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.rollup-row:last-child { border-bottom: none; }
.rollup-row .rollup-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-primary);
}
.rollup-row.is-rollup {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 500;
}
.rollup-row.is-rollup .rollup-val {
  color: var(--signal-amber);
  font-weight: 600;
}
.rollup-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.rollup-layers { color: var(--signal-amber); display: flex; }
.rollup-row.member {
  padding-left: 2.1rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  background: rgba(0,0,0,0.015);
}
.rollup-row.member .rollup-val { color: var(--text-secondary); }

/* Dynamic RollUps demo (Products / Customers / Suppliers) — members collapse into the RollUp line */
#rollup-demo .rollup-row.member {
  overflow: hidden;
  max-height: 3rem;
  transition: max-height 0.45s ease, opacity 0.4s ease, padding-top 0.45s ease, padding-bottom 0.45s ease;
}
#rollup-demo .rollup-table.collapsed .rollup-row.member {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  #rollup-demo .rollup-row.member { transition: none; max-height: none; }
}
.rollup-tabs {
  display: flex;
  gap: 0;
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 3px;
  background: rgba(20, 20, 20, 0.04);
  width: fit-content;
}
.rollup-tab {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}
.rollup-tab:hover { color: var(--text-primary); }
.rollup-tab.active {
  background: var(--text-primary);
  color: var(--bg-color);
}

/* Two-up variant of the sub-page previews grid — used while the Customer Outcomes
   card is hidden (no case studies yet), so the remaining two cards stay balanced. */
.previews-grid.two-up {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 968px) {
  .previews-grid.two-up {
    grid-template-columns: 1fr;
  }
}

/* --- Detail-report mockup --- */
.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.report-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--text-primary);
}
.report-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.health-ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
}
.health-ring text {
  font-family: var(--font-mono);
  font-weight: 600;
}
.report-snapshot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  margin-bottom: 1.1rem;
}
.report-snapshot .snap-cell {
  background: var(--bg-card);
  padding: 0.75rem 0.85rem;
}
.snap-lbl {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.snap-val {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-top: 0.2rem;
}
.snap-delta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  margin-left: 0.35rem;
}
.snap-delta.up { color: var(--signal-green); }
.heat-row {
  display: flex;
  gap: 3px;
  margin-bottom: 1rem;
}
.heat-cell {
  flex: 1;
  height: 22px;
  border-radius: 1px;
  background: var(--signal-amber);
}
.report-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--signal-amber);
  background: var(--bg-surface);
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ============================================================
   Replenishment demo (Forecasting signature feature 02.5)
   A faithful vanilla recreation of the app's two-panel product
   replenishment chart, drawn/animated by replenishment-demo.js.
   Colours mirror the app's chart tokens (globals.css --series-1/2).
   ============================================================ */
#replenishment-demo {
  --stock: oklch(0.44 0.13 255);   /* --series-1: stock on hand (blue) */
  --demand: oklch(0.44 0.13 35);   /* --series-2: weekly demand (orange) */
  --chart-grid: rgba(20, 20, 20, 0.09);
  --chart-tick: #5c5c55;
  --chart-seam: rgba(20, 20, 20, 0.34);
  --chart-red: #dc2626;
}

/* Stat row — 3-up on mobile, 6-up on wider cards (mirrors the app dialog). */
.repl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
}
@media (min-width: 560px) {
  .repl-stats { grid-template-columns: repeat(6, 1fr); }
}
.repl-stat { background: var(--bg-card); padding: 0.5rem 0.6rem; }
.repl-stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.repl-stat-val {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.repl-stat.is-amber .repl-stat-val { color: var(--signal-amber); }

/* Panels */
.repl-panel-divider { border-top: 1px solid var(--border-color); margin-top: 0.6rem; padding-top: 0.6rem; }
.repl-panel-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; padding: 0 0.1rem; }
.repl-panel-label span:first-child {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.repl-rule { height: 1px; flex: 1; background: var(--border-color); }
.repl-chart { width: 100%; }
.repl-svg { width: 100%; height: auto; display: block; }

/* Chart furniture (initial = hidden where animated) */
.repl-grid { stroke: var(--chart-grid); stroke-width: 1; }
.repl-tick { font-family: var(--font-mono); font-size: 8px; fill: var(--chart-tick); }
.repl-area-stock, .repl-area-proj { fill: var(--stock); opacity: 0; }
.repl-line-stock { fill: none; stroke: var(--stock); stroke-width: 2; }
.repl-line-proj { fill: none; stroke: var(--stock); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0; }
.repl-reorder { stroke: var(--signal-amber); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; }
.repl-reorder-lbl { font-family: var(--font-mono); font-size: 8px; fill: var(--signal-amber); opacity: 0; }
.repl-seam { stroke: var(--chart-seam); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.repl-seam-lbl { font-family: var(--font-mono); font-size: 8px; fill: var(--chart-tick); opacity: 0; }
.repl-orderby { opacity: 0; }
.repl-orderby-line { stroke: var(--chart-red); stroke-width: 1.5; }
.repl-orderby-lbl { font-family: var(--font-mono); font-size: 8px; fill: var(--chart-red); }
.repl-bar { fill: var(--demand); opacity: 0.9; transform: scaleY(0); transform-origin: center bottom; transform-box: fill-box; }
.repl-bar-clip { font-family: var(--font-mono); font-size: 8px; fill: var(--text-muted); opacity: 0; }
.repl-note { margin-top: 0.75rem; opacity: 0; }

/* Reveal timeline (added when the card scrolls into view) */
#replenishment-demo.is-playing .repl-line-stock { transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
#replenishment-demo.is-playing .repl-area-stock { opacity: 0.16; transition: opacity 0.6s ease 0.45s; }
#replenishment-demo.is-playing .repl-reorder,
#replenishment-demo.is-playing .repl-seam { opacity: 1; transition: opacity 0.5s ease 0.35s; }
#replenishment-demo.is-playing .repl-reorder-lbl,
#replenishment-demo.is-playing .repl-seam-lbl { opacity: 1; transition: opacity 0.5s ease 0.55s; }
#replenishment-demo.is-playing .repl-line-proj { opacity: 1; transition: opacity 0.6s ease 1.15s; }
#replenishment-demo.is-playing .repl-area-proj { opacity: 0.06; transition: opacity 0.6s ease 1.15s; }
#replenishment-demo.is-playing .repl-orderby { opacity: 1; transition: opacity 0.5s ease 1.4s; }
#replenishment-demo.is-playing .repl-bar {
  transform: scaleY(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--bi, 0) * 0.07s + 0.25s);
}
#replenishment-demo.is-playing .repl-bar-clip { opacity: 1; transition: opacity 0.4s ease 1s; }
#replenishment-demo.is-playing .repl-note { opacity: 1; transition: opacity 0.5s ease 1.5s; }

@media (prefers-reduced-motion: reduce) {
  #replenishment-demo .repl-line-stock,
  #replenishment-demo .repl-bar { transition: none !important; }
  #replenishment-demo .repl-area-stock { opacity: 0.16; }
  #replenishment-demo .repl-area-proj { opacity: 0.06; }
  #replenishment-demo .repl-line-proj,
  #replenishment-demo .repl-reorder,
  #replenishment-demo .repl-reorder-lbl,
  #replenishment-demo .repl-seam,
  #replenishment-demo .repl-seam-lbl,
  #replenishment-demo .repl-orderby,
  #replenishment-demo .repl-bar-clip,
  #replenishment-demo .repl-note { opacity: 1; }
  #replenishment-demo .repl-bar { transform: none; }
}

/* ============================================================
   Insight report demo (signature feature 02.2)
   Health ring + snapshot + "every factor shown" health bars,
   built/animated by insight-demo.js.
   ============================================================ */
.insight-ring { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.insight-ring-svg { width: 56px; height: 56px; display: block; }
.insight-ring-track { fill: none; stroke: var(--border-color); stroke-width: 5; }
.insight-ring-arc { fill: none; stroke: var(--signal-amber); stroke-width: 5; stroke-linecap: round; }
.insight-ring-num { font-family: var(--font-serif); font-size: 18px; fill: var(--text-primary); }
.insight-ring-status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.insight-ring-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-amber); }

.insight-factors { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.insight-factors-cap {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.insight-factor-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.3rem;
}
.insight-factor-score { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.insight-factor-track { height: 3px; width: 100%; background: var(--border-color); }
.insight-factor-bar { height: 100%; width: 0; }

.insight-note { margin-top: 1rem; opacity: 0; }

/* Reveal timeline */
#insight-demo.is-playing .insight-ring-arc { transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }
#insight-demo.is-playing .insight-factor-bar { width: var(--w); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
#insight-demo.is-playing .insight-factor:nth-child(2) .insight-factor-bar { transition-delay: 0.15s; }
#insight-demo.is-playing .insight-factor:nth-child(3) .insight-factor-bar { transition-delay: 0.3s; }
#insight-demo.is-playing .insight-factor:nth-child(4) .insight-factor-bar { transition-delay: 0.45s; }
#insight-demo.is-playing .insight-factor:nth-child(5) .insight-factor-bar { transition-delay: 0.6s; }
#insight-demo.is-playing .insight-note { opacity: 1; transition: opacity 0.5s ease 0.9s; }

@media (prefers-reduced-motion: reduce) {
  #insight-demo .insight-ring-arc { transition: none !important; }
  #insight-demo .insight-factor-bar { width: var(--w); transition: none !important; }
  #insight-demo .insight-note { opacity: 1; }
}

/* Pivot demo animation (signature feature 02.3) — two datasets sliding onto shared rows */
.pivot-tag {
  font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); margin-left: 0.3rem; padding: 0.05rem 0.28rem;
  border: 1px solid var(--border-color); border-radius: 2px;
}
/* On a phone the dataset tags would push the 3-column grid past the card; the amber/neutral
   colour coding already tells the two datasets apart, so drop the tags there. */
@media (max-width: 768px) { .pivot-tag { display: none; } }
#pivot-demo .pv-group { opacity: 0; }
#pivot-demo .pv-sales { opacity: 0; transform: translateX(-14px); }
#pivot-demo .pv-purch { opacity: 0; transform: translateX(14px); }
#pivot-demo.is-playing .pv-group,
#pivot-demo.is-playing .pv-sales,
#pivot-demo.is-playing .pv-purch {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  #pivot-demo .pv-group,
  #pivot-demo .pv-sales,
  #pivot-demo .pv-purch { opacity: 1; transform: none; }
}

/* --- Pivot mockup: drill-across grid over two datasets --- */
.pivot-mock {
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.pivot-sources {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid var(--border-color);
}
.pivot-source {
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-left: 1px solid var(--border-color);
  text-align: right;
}
.pivot-source:first-child {
  border-left: none;
  text-align: left;
  color: var(--text-muted);
}
.pivot-source.sales { color: var(--text-primary); }
.pivot-source.purch { color: var(--signal-amber); }
.pivot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  font-size: 0.76rem;
}
.pivot-grid > div {
  padding: 0.55rem 0.75rem;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  text-align: right;
}
.pivot-grid > div:nth-child(3n+1) {
  border-left: none;
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.pivot-grid > div.purch-cell { color: var(--signal-amber); }
.pivot-grid .pivot-foot {
  border-bottom: none;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 600;
}

/* --- Export mockup: column picker --- */
.export-search {
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.25);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.export-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
}
.export-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.export-item:last-child { border-bottom: none; }
.export-check {
  width: 13px;
  height: 13px;
  border: 1px solid var(--border-active);
  border-radius: 2px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-color);
  font-size: 9px;
}
.export-check.on {
  background: var(--text-primary);
  border-color: var(--text-primary);
}
.export-item .export-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.export-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
}
.export-foot .export-count b { color: var(--signal-amber); }
.export-formats { display: flex; gap: 0.4rem; }

/* Export demo animation (signature feature 02.4) — checkboxes tick on */
#export-demo [data-check] { transition: background 0.25s ease, border-color 0.25s ease; }
#export-demo [data-check].on { animation: export-check-pop 0.32s ease; }
@keyframes export-check-pop {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #export-demo [data-check] { animation: none !important; transition: none !important; }
}
.export-fmt {
  border: 1px solid var(--border-active);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6rem;
  color: var(--text-primary);
}
.export-fmt.on { background: var(--text-primary); color: var(--bg-color); }

/* --- Connect / deployment mockup --- */
.connect-field {
  margin-bottom: 0.85rem;
}
.connect-field .connect-lbl {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.35rem;
}
.connect-input {
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.25);
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.15em;
}
.connect-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--signal-green);
}
.connect-status .status-dot,
.connect-status .status-dot-ping { background-color: var(--signal-green); }

/* --- Essentials trio (trial / share / modern UI) --- */
.essentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-color);
}
.essential-card {
  padding: 2.75rem 2rem;
  border-right: 1px solid var(--border-color);
}
.essential-card:last-child { border-right: none; }
.essential-icon {
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.essential-card h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 0.65rem;
}
.essential-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
@media (max-width: 968px) {
  .essentials-grid { grid-template-columns: 1fr; }
  .essential-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .essential-card:last-child { border-bottom: none; }
}

/* --- ERP roadmap ledger --- */
.erp-roadmap {
  border: 1px solid var(--border-color);
}
.erp-line {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
}
.erp-line:last-child { border-bottom: none; }
.erp-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--text-primary);
}
.erp-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
}
/* The umbrella page links each live product (public/umbrella.html). */
.erp-name a,
.erp-desc a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.erp-name a:hover,
.erp-desc a:hover {
  color: var(--text-primary);
}
.erp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}
.erp-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.erp-status.live { color: var(--signal-green); border-color: rgba(21,128,61,0.35); }
.erp-status.live .dot { background: var(--signal-green); }
.erp-status.next { color: var(--signal-amber); border-color: rgba(180,83,9,0.35); }
.erp-status.next .dot { background: var(--signal-amber); }
.erp-status.planned { color: var(--text-muted); }
.erp-status.planned .dot { background: var(--text-muted); }
@media (max-width: 768px) {
  .erp-line {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.5rem;
  }
}

/* ============================================================
   "What could you see?" — concrete insight examples (Pass 2)
   ============================================================ */
.see-carousel { position: relative; }
.see-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.see-track::-webkit-scrollbar { display: none; }

.see-card {
  flex: 0 0 clamp(255px, 78vw, 360px);
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-default);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Carousel controls: prev/next + dots */
.see-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.see-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-active);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}
.see-nav:hover:not(:disabled) { background: rgba(20, 20, 20, 0.04); }
.see-nav:disabled { opacity: 0.3; cursor: default; }
.see-dots { display: flex; gap: 0.5rem; align-items: center; }
.see-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--border-active);
  transition: var(--transition);
}
.see-dot.active { background: var(--signal-amber); transform: scale(1.25); }
.see-visual {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-default);
  padding: 0.9rem 0.9rem 2.4rem;
  margin-bottom: 1.1rem;
}
.see-svg { width: 100%; height: auto; display: block; }
.see-callout {
  position: absolute;
  left: 0.9rem;
  bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--signal-amber);
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.see-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-amber);
  margin-bottom: 0.5rem;
}
.see-stat {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.see-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.see-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.see-cta-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* mini-visual furniture */
.see-axis { stroke: var(--border-active); stroke-width: 1; }
.see-dot { fill: var(--text-muted); }
.see-dot-late { fill: var(--signal-amber); }
.see-gap { stroke: var(--signal-amber); stroke-width: 1.5; stroke-dasharray: 3 3; }
.see-bar-track { fill: rgba(20, 20, 20, 0.08); }
.see-bar-up { fill: var(--signal-green); }
.see-bar-down { fill: var(--signal-amber); }
.see-vlabel { font-family: var(--font-mono); font-size: 9px; fill: var(--text-muted); }
.see-vdelta { font-family: var(--font-mono); font-size: 9px; }
.see-vdelta.up { fill: var(--signal-green); }
.see-vdelta.down { fill: var(--signal-amber); }
.see-big { font-family: var(--font-serif); font-size: 26px; fill: var(--text-primary); }
.see-edge { stroke: var(--border-active); stroke-width: 1; }
.see-node { fill: var(--text-secondary); }
.see-node.hub { fill: var(--signal-blue); }

/* ============================================================
   Outcomes — the questions Elanalytics answers (Pass 2)
   ============================================================ */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.outcome-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-default);
  background: var(--bg-card);
  padding: 1.5rem;
}
.outcome-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.75rem; }
.outcome-num { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); }
.outcome-cat { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-amber); }
.outcome-title { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.25; color: var(--text-primary); margin-bottom: 0.5rem; }
.outcome-desc { font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }

/* ============================================================
   Keep Unleashed. See more. — why an additional layer (Pass 2)
   ============================================================ */
.ku-flow { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.ku-node {
  flex: 1 1 180px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-default);
  background: var(--bg-card);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ku-node-mid { border-color: var(--border-active); background: var(--bg-surface); }
.ku-node-name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text-primary); }
.ku-node-sub { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ku-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.2rem; }
.ku-points { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ku-points li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: var(--bg-surface);
}
.ku-points li::before { content: '✓'; color: var(--signal-green); margin-right: 0.4rem; }

@media (max-width: 640px) {
  .ku-flow { flex-direction: column; }
  /* the 180px flex-basis is a width for the desktop row; in a column it would become a height */
  .ku-node { flex: 0 0 auto; }
  .ku-arrow { transform: rotate(90deg); }
}