/* ============================================================
   QUARRI - Shared Stylesheet (v4: full-width, asymmetric, calmer)
   Design system. One source of truth. No per-page styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --bone:       #f7f6f3;
  --dark:       #0c0c0c;
  --warm:       #da7756;
  --muted:      #8a8a8a;
  --rule:       #e8e7e3;
  --ink:        #111111;
  --ink-soft:   #4a4a4a;
  --white:      #ffffff;

  /* Type */
  --font:       'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  --t-display:  clamp(52px, 6.8vw, 120px);
  --t-h1:       clamp(44px, 5.4vw, 88px);
  --t-h2:       clamp(34px, 4.2vw, 64px);
  --t-h3:       clamp(20px, 1.8vw, 26px);
  --t-eyebrow:  12px;
  --t-lead:     clamp(18px, 1.5vw, 22px);
  --t-body:     17px;
  --t-small:    15px;
  --t-micro:    12px;

  /* Layout */
  --content:    1320px;
  --narrow:     1080px;
  --gutter:     40px;
  --pad-y:      clamp(120px, 16vh, 180px);
  --pad-y-sm:   clamp(72px, 10vh, 100px);
  --radius:     14px;

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);

  /* Chart animation tokens (addendum §B.1) */
  --ease-snap:    cubic-bezier(0.16, 1, 0.3, 1);     /* alias for --ease, used by charts */
  --ease-pop:     cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack - dot/label arrivals */
  --dur-line:     900ms;
  --dur-bar:      600ms;
  --dur-fade:     250ms;
  --dur-pop:      350ms;
  --stagger:      60ms;
  --stagger-slow: 100ms;

  /* Scroll progress (set by JS) */
  --scroll: 0%;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul { list-style: none; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wide  { max-width: var(--content); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: var(--narrow); }

section {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
  position: relative;
}

@media (max-width: 720px) {
  section { padding-top: var(--pad-y-sm); padding-bottom: var(--pad-y-sm); }
}

/* The split - sticky-left intro, scrolling-right content. LHS gets more room. */
.split {
  display: grid;
  grid-template-columns: minmax(380px, 1.1fr) minmax(0, 1.5fr);
  gap: clamp(56px, 9vw, 140px);
  align-items: start;
}

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 56px; }
}

.split-left {
  position: sticky;
  top: 120px;
  align-self: start;
}

@media (max-width: 960px) {
  .split-left { position: static; }
}

/* Full-width section intro (alternative to .split for sections where rows need room) */
.section-intro {
  max-width: 920px;
}

.section-intro .lead {
  margin-top: 32px;
  max-width: 640px;
}

/* Diagonal divider - brand fingerprint */
.divider-diagonal {
  height: 18px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 7px,
    var(--rule) 7px,
    var(--rule) 8px
  );
  opacity: 0.6;
}

.divider-diagonal.on-dark {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 7px,
    rgba(255, 255, 255, 0.14) 7px,
    rgba(255, 255, 255, 0.14) 8px
  );
  opacity: 1;
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--warm);
  margin-bottom: 32px;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--warm) 4px,
    var(--warm) 5px
  );
  display: inline-block;
}

.h-display {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -3px;
  line-height: 0.98;
  color: var(--ink);
}

h1, .h1 { font-size: var(--t-h1); font-weight: 300; letter-spacing: -2.2px; line-height: 1; color: var(--ink); }
h2, .h2 { font-size: var(--t-h2); font-weight: 300; letter-spacing: -1.6px; line-height: 1.04; color: var(--ink); }
h3, .h3 { font-size: var(--t-h3); font-weight: 400; letter-spacing: -0.4px; line-height: 1.25; color: var(--ink); }

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 620px;
}

p { font-size: var(--t-body); font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.small { font-size: var(--t-small); font-weight: 400; }
.micro { font-size: var(--t-micro); color: var(--muted); }
.warm-mark { color: var(--warm); }

/* On-dark overrides */
.on-dark { background: var(--dark); color: var(--white); }
.on-dark .h-display, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .lead, .on-dark p { color: rgba(255, 255, 255, 0.62); }
.on-dark .micro { color: rgba(255, 255, 255, 0.4); }

/* On-dark variants for components that originally style light */
.on-dark .flow-stack { border-left-color: rgba(255, 255, 255, 0.18); }
.on-dark .flow-list li { color: var(--white); }
.on-dark .flow-divider {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 6px,
    rgba(255, 255, 255, 0.18) 6px,
    rgba(255, 255, 255, 0.18) 7px
  );
}

.on-dark .cap-bucket { border-top-color: rgba(255, 255, 255, 0.14); }
.on-dark .cap-bucket:last-child { border-bottom-color: rgba(255, 255, 255, 0.14); }
.on-dark .cap-bucket-name { color: var(--white); }
.on-dark .cap-bucket-tags { color: rgba(255, 255, 255, 0.62); }

.on-dark .trust-row {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
}

/* Subtle dark-on-dark texture variant (for visual rhythm in mostly-dark pages) */
.on-dark.bg-textured {
  background-color: var(--dark);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 22px,
    rgba(255, 255, 255, 0.025) 22px,
    rgba(255, 255, 255, 0.025) 23px
  );
}

/* ---------- Scroll progress rail (fixed LHS) ---------- */
.scroll-rail {
  position: fixed;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(120, 120, 120, 0.18);
  z-index: 40;
  pointer-events: none;
}

.scroll-rail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--scroll, 0%);
  background: var(--warm);
}

.scroll-rail::after {
  content: '';
  position: absolute;
  top: var(--scroll, 0%);
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm);
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(218, 119, 86, 0.6);
}

@media (max-width: 960px) {
  .scroll-rail { display: none; }
}

/* ---------- Top navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 246, 243, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.nav-logo {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav-logo .nav-mark {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}
.nav-logo .nav-wordmark {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--ink);
  line-height: 1;
}

.nav-links { display: flex; align-items: center; gap: 36px; }

/* Scoped to NON-button links - prevents the link-fade and dark color from beating .btn-primary's white text */
.nav-links a:not(.btn) {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 0.18s ease;
  position: relative;
}

.nav-links a:not(.btn):hover { opacity: 1; }
.nav-links a:not(.btn).is-active { opacity: 1; }

.nav-group { position: relative; }
.nav-group > a { cursor: default; }
.nav-group > a::after { content: ' \25BE'; font-size: 9px; margin-left: 4px; opacity: 0.5; }

.nav-group .nav-pop {
  position: absolute;
  top: calc(100% + 18px);
  left: -16px;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.nav-group:hover .nav-pop, .nav-group:focus-within .nav-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-pop a {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  opacity: 0.85;
  font-size: 14px;
}

.nav-pop a:hover { background: var(--bone); opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform 0.18s var(--ease), background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

/* Buttons - explicit colors + forced-color-adjust to override Windows high-contrast mode */
.btn-primary {
  background: var(--ink);
  color: var(--white);
  forced-color-adjust: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--warm);
  color: var(--white);
}
.btn-warm {
  background: var(--warm);
  color: var(--white);
  forced-color-adjust: none;
}
.btn-warm:hover {
  transform: translateY(-2px);
  background: #c8694b;
  color: var(--white);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 14px 4px;
}
.btn-ghost:hover { color: var(--warm); }

.on-dark .btn-primary {
  background: var(--white);
  color: var(--ink);
  forced-color-adjust: none;
}
.on-dark .btn-primary:hover {
  background: var(--warm);
  color: var(--white);
}
.on-dark .btn-ghost { color: var(--white); }

.btn-arrow::after { content: ' \2192'; transition: transform 0.18s var(--ease); }
.btn:hover.btn-arrow::after { transform: translateX(4px); }

/* ---------- HERO - full-width H1, 2/1 split below ---------- */
.hero {
  padding-top: clamp(120px, 18vh, 200px);
  padding-bottom: clamp(120px, 18vh, 200px);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(56px, 8vw, 120px);
  align-items: center;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
}

.hero-watermark {
  position: absolute;
  top: 30%;
  right: -180px;
  width: clamp(360px, 40vw, 700px);
  color: var(--warm);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  animation: hero-drift 18s ease-in-out infinite;
  transform-origin: center;
}

@keyframes hero-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 56px;
  align-items: center;
}

/* Hero RHS - static "from / to" stack (no pulses) */
.flow-stack {
  border-left: 1px solid var(--rule);
  padding: 8px 0 8px 36px;
}

.flow-block { padding: 16px 0; }

.flow-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 18px;
  display: block;
}

.flow-list { display: flex; flex-direction: column; gap: 10px; }

.flow-list li {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 300;
  letter-spacing: -0.3px;
  color: var(--ink);
  line-height: 1.2;
}

.flow-divider {
  height: 12px;
  margin: 8px 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 6px,
    var(--rule) 6px,
    var(--rule) 7px
  );
}

/* ---------- Pillars - stacked head + description inside .split RHS ---------- */
.pillars-block { margin-top: 0; }

.pillar-row {
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  /* not clickable - no hover */
}

.pillar-row:last-child { border-bottom: 1px solid var(--rule); }

@media (max-width: 880px) {
  .pillar-row { padding: 32px 0; }
}

.pillar-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 16px;
}

.pillar-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--warm);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.pillar-word {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 300;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--ink);
}

.pillar-row p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 580px;
  font-weight: 300;
}

/* ---------- KNOWLEDGE LAYER - vertical 3-tier stack ---------- */
.kl {
  padding-top: clamp(120px, 18vh, 200px);
  padding-bottom: clamp(120px, 18vh, 200px);
}

.kl-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(56px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(72px, 10vh, 112px);
}

@media (max-width: 960px) {
  .kl-header { grid-template-columns: 1fr; gap: 32px; }
}

.kl-header .lead { color: rgba(255, 255, 255, 0.62); }

/* New 4-node horizontal flow: Sources → Quarri → LLM → Outputs (+ feedback loop) */
.kl-flow {
  margin-top: clamp(56px, 8vh, 88px);
  padding: 48px clamp(20px, 3vw, 36px) 32px;
  border: 1px solid rgba(218, 119, 86, 0.25);
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(218, 119, 86, 0.06), transparent 70%);
  position: relative;
}

.kl-flow-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: clamp(10px, 1.5vw, 24px);
  align-items: stretch;
}

@media (max-width: 960px) {
  .kl-flow-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.kl-flow-node {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.kl-flow-node--quarri {
  background: rgba(218, 119, 86, 0.10);
  border-color: rgba(218, 119, 86, 0.5);
}

/* Logo / mark at top of node */
.kl-flow-logo {
  height: 36px;
  width: 36px;
  margin-bottom: 4px;
  display: block;
}

.kl-flow-logo--quarri {
  /* Pure transparent white-version PNG */
}

.kl-flow-logo--claude {
  color: var(--warm);
}

.kl-flow-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
}

.kl-flow-node--quarri .kl-flow-tag {
  color: var(--warm);
}

.kl-flow-name {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.6px;
  color: var(--white);
  line-height: 1.1;
}

.kl-flow-node--quarri .kl-flow-name {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -1.4px;
}

.kl-flow-node--quarri .kl-flow-name .dot { color: var(--warm); }

.kl-flow-list {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-top: 6px;
}

.kl-flow-arrow {
  align-self: center;
  font-size: 22px;
  color: var(--warm);
  font-weight: 300;
}

/* Mobile: swap the desktop right-arrow for a properly-centred down-arrow.
   Placed AFTER the desktop rule so cascade order ensures it wins on small
   screens. Hide the original "→" character (font-size:0), then render "↓"
   via ::before in its own flex-centred 40px slot so it never overlaps the
   next block. */
@media (max-width: 960px) {
  .kl-flow-arrow {
    transform: none;
    padding: 0;
    font-size: 0;
    line-height: 1;
    height: 40px;
    position: relative;
    display: block;
    align-self: stretch;
  }
  .kl-flow-arrow::before {
    content: '\2193'; /* DOWNWARDS ARROW */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    color: var(--warm);
    line-height: 1;
  }
}

.kl-flow-feedback {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed rgba(218, 119, 86, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  flex-wrap: wrap;
}

.kl-flow-feedback-icon {
  font-size: 20px;
  color: var(--warm);
  line-height: 1;
}

.kl-flow-feedback-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.kl-flow-feedback-text .warm-mark {
  color: var(--warm);
  font-weight: 500;
}

/* ---------- Why Deterministic - 2-tier diagram + benefits grid ---------- */
.det-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(56px, 8vh, 88px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.det-layer {
  width: 100%;
  text-align: center;
  padding: 36px 28px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--white);
}

.det-layer--det {
  background: var(--dark);
  color: var(--white);
  border-color: var(--warm);
  padding: 56px 28px;
}

.det-layer-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.det-layer--det .det-layer-tag {
  color: var(--warm);
}

.det-layer-name {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
}

.det-layer--det .det-layer-name {
  color: var(--white);
  font-size: clamp(40px, 5vw, 72px);
}

.det-layer-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto;
}

.det-layer--det .det-layer-desc {
  color: rgba(255, 255, 255, 0.7);
}

/* Bullet points inside det-layer (problem/solution narrative) */
.det-layer-points {
  list-style: none;
  padding: 0;
  margin: 16px auto 0;
  max-width: 460px;
  text-align: left;
  display: inline-block;
}

.det-layer-points li {
  padding: 7px 0 7px 24px;
  position: relative;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Problem tier: × marks */
.det-layer--prob .det-layer-points li::before {
  content: '\00D7';
  position: absolute;
  left: 2px;
  top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}

/* Solution tier: diagonal-line tick (brand motif) */
.det-layer--det .det-layer-points li {
  color: rgba(255, 255, 255, 0.85);
}

.det-layer--det .det-layer-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 3px,
    var(--warm) 3px,
    var(--warm) 4px
  );
}

.det-arrow {
  font-size: 28px;
  color: var(--warm);
  padding: 18px 0;
  font-weight: 300;
  line-height: 1;
}

/* Benefits grid (4 callouts under the diagram) */
.det-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: clamp(72px, 10vh, 112px);
}

@media (max-width: 880px) {
  .det-benefits { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 600px) {
  .det-benefits { grid-template-columns: 1fr; gap: 24px; }
}

.det-benefit {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  text-align: center;
}

.det-benefit-num {
  font-family: var(--mono);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 14px;
}

.det-benefit-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- Live demos: tabbed interface (theme tabs + sub-tabs + iframe stage) ---------- */
.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  margin-top: clamp(48px, 8vh, 80px);
  border-bottom: 1px solid var(--rule);
}

.demo-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.2px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.demo-tab:hover { color: var(--ink); }

.demo-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--warm);
}

.demo-tab-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--warm);
  letter-spacing: 1.5px;
}

.demo-tab-name {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
}

.demo-subtabs-wrap {
  margin-top: 28px;
  position: relative;
}

.demo-subtabs {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-subtabs.is-active {
  display: flex;
}

.demo-subtab {
  padding: 9px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.demo-subtab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.demo-subtab.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.demo-stage {
  margin-top: 36px;
}

.demo-caption {
  margin-bottom: 24px;
}

.demo-caption-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 14px;
}

.demo-caption-title {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--ink);
  line-height: 1.3;
  max-width: 880px;
}

.demo-frame {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  aspect-ratio: 16 / 10;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.05);
}

/* All iframes pre-rendered & stacked - switch via .is-active toggle (no src reload) */
.demo-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.demo-frame iframe.is-active {
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 720px) {
  .demo-frame { aspect-ratio: 4 / 3; }
}

/* ---------- Section corner watermarks ---------- */
.section-watermark {
  position: absolute;
  width: clamp(280px, 32vw, 520px);
  color: var(--warm);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.on-dark .section-watermark { opacity: 0.10; }

.watermark-tr { top: -60px; right: -100px; }
.watermark-tl { top: -60px; left: -100px; transform: scaleX(-1); }
.watermark-br { bottom: -60px; right: -100px; transform: scaleY(-1); }
.watermark-bl { bottom: -60px; left: -100px; transform: scale(-1, -1); }

/* Sections with watermarks need overflow clipped */
section.has-watermark { overflow: hidden; }

/* ---------- Stats band - real deployment numbers (marquee) ---------- */
.stat-band {
  padding-top: clamp(96px, 14vh, 140px);
  padding-bottom: clamp(96px, 14vh, 140px);
  overflow: hidden;
}

.stat-band .section-intro {
  margin-bottom: clamp(56px, 8vh, 88px);
}

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: clamp(56px, 7vw, 112px);
  width: max-content;
  align-items: baseline;
  animation: marquee-scroll 55s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-stat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  min-width: 220px;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.marquee-num {
  font-family: var(--mono);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 500;
  letter-spacing: -2.5px;
  line-height: 1;
  color: var(--white);
}

.marquee-num .warm-mark { color: var(--warm); }

.marquee-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: 40px 64px;
  }
}

/* ---------- Capability buckets - verticalised industrial workflows ---------- */
.cap-buckets { margin-top: clamp(56px, 8vh, 88px); }

.cap-bucket {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(0, 2fr);
  gap: clamp(48px, 7vw, 120px);
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  transition: background 0.4s var(--ease);
}

.cap-bucket:last-child { border-bottom: 1px solid var(--rule); }
/* not clickable - no hover */

@media (max-width: 880px) {
  .cap-bucket { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
}

.cap-bucket-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
}

.cap-bucket-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--warm);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.cap-bucket-name {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--ink);
}

.cap-bucket-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.6;
}

.cap-bucket-tags span {
  display: inline-block;
}

.cap-bucket-tags .sep {
  color: var(--warm);
  opacity: 0.55;
}

/* ---------- Capability pill list (single-bucket, comprehensive) ---------- */
.cap-list {
  margin-top: clamp(56px, 8vh, 88px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: baseline;
  max-width: 1180px;
}

.cap-list-item {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
  padding: 11px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--white);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.cap-list-item:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.cap-list-item.is-emphasis {
  border-color: var(--warm);
  color: var(--ink);
  background: rgba(218, 119, 86, 0.06);
}

.on-dark .cap-list-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.78);
}

.on-dark .cap-list-item:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

/* ---------- Video placeholder section ---------- */
.video-placeholder {
  margin-top: clamp(56px, 8vh, 88px);
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(218, 119, 86, 0.10), transparent 60%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 28px,
      rgba(255, 255, 255, 0.025) 28px,
      rgba(255, 255, 255, 0.025) 29px
    );
}

.video-play {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
  box-shadow: 0 0 0 0 rgba(218, 119, 86, 0.6);
  animation: video-pulse 2.4s ease-in-out infinite;
}

.video-play:hover {
  transform: scale(1.06);
  animation-play-state: paused;
}

.video-play::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 26px solid var(--white);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 6px;
}

@keyframes video-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(218, 119, 86, 0.5); }
  50%      { box-shadow: 0 0 0 18px rgba(218, 119, 86, 0); }
}

.video-placeholder-label {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  z-index: 1;
}

.video-placeholder-meta {
  position: absolute;
  bottom: 24px;
  right: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

@media (max-width: 720px) {
  .video-play { width: 64px; height: 64px; }
  .video-play::after { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-play { animation: none !important; }
}

/* ============================================================
   INDUSTRY-PAGE CHART LIBRARY (no iframes - animated SVG)
   ============================================================ */

/* Shared chart frame */
.chart-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}

.chart-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   UNIVERSAL MOTION CHOREOGRAPHY (Jitter-style - per user)
   - Charts start fully BLANK (svg opacity:0)
   - On reveal, the whole SVG fades in (350ms) so elements appear together
   - Internal stagger animations run simultaneously (left-to-right wave)
   - Warm anomaly indicators continue to pulse after reveal
   ============================================================ */
.chart-frame:not(.is-revealed) svg {
  opacity: 0;
}
.chart-frame.is-revealed svg {
  opacity: 1;
  transition: opacity 500ms var(--ease-snap);
}

/* Default stagger - deliberate but not piecemeal. Per-chart can override
   via inline style="--stagger: ...ms" on the .chart-frame element. */
.chart-frame {
  --stagger: 80ms;
}

/* ---------- Continuous pulse loops on warm signal indicators ---------- */
@keyframes warm-pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes warm-pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(218, 119, 86, 0.45)); }
  50%      { filter: drop-shadow(0 0 14px rgba(218, 119, 86, 0.95)); }
}

/* Chart 02 (cash flow): warm position-dot at the breach point pulses */
.chart-frame.is-revealed .data-dot.warm {
  animation: warm-pulse-glow 2s 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Chart 03 (lumber quality): PINE PREMIUM value-text pulses */
.chart-frame.chart-bar--horizontal.is-revealed .bar-value.warm {
  animation: warm-pulse-soft 2.2s 2.4s ease-in-out infinite;
}

/* Chart 05 (inventory ladder): CMP R critical chip pulses */
.chart-frame.chart-bar--ladder.is-revealed .status-chip.warm {
  animation: warm-pulse-glow 2s 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Reduced-motion override: stop all warm-pulse loops (already covered by global rule
   in @media (prefers-reduced-motion) below, but explicit here for clarity) */

/* ---------- Shared text classes (addendum §B.2) ----------
   .value  - primary value label (large, paint-stroked for legibility on data)
   .callout - small anomaly callout (warm, paint-stroked)
   .eyebrow - small mono caps tag above grouped elements
   paint-order trick keeps text legible when overlapping coloured fills/glows. */
.chart-frame text.value {
  fill: var(--white);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  paint-order: stroke fill;
  stroke: var(--dark);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.chart-frame text.value.warm { fill: var(--warm); }

.chart-frame text.callout {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: var(--dark);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.chart-frame text.eyebrow {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---------- chart-flow: PDF → arrow → structured rows ---------- */
.chart-flow {
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.chart-flow .doc-rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1.2;
}

.chart-flow .doc-line {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* Path animation uses pathLength="100" attribute on the SVG path -
   this normalises dasharray so it always matches the line length */
.chart-flow .arrow-line {
  stroke: var(--warm);
  stroke-width: 1.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 400ms var(--ease-snap);
}

.chart-frame.is-revealed .arrow-line { stroke-dashoffset: 0; }
/* Two-segment timing (sped up - per user). arrow-1 draws first;
   arrow-2 waits for the Q-node to pop in before it starts drawing. */
.chart-flow .arrow-line.arrow-1 { transition-duration: 400ms; }
.chart-flow .arrow-line.arrow-2 { transition-duration: 400ms; transition-delay: 600ms; }

.chart-flow .arrow-head { fill: var(--warm); opacity: 0; transition: opacity 0.3s ease 900ms; }
.chart-frame.is-revealed .arrow-head { opacity: 1; }

.chart-flow .flow-pulse {
  fill: var(--warm);
  filter: drop-shadow(0 0 6px var(--warm));
  opacity: 0;
}

/* Pulse motion done via SMIL animateMotion in the SVG markup itself */

.chart-flow .out-row {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Zebra striping (addendum §B.9 chart 01) - alternates row tone for scanability */
.chart-flow .out-row.alt { fill: rgba(255, 255, 255, 0.04); }
/* Warm modifier (addendum §B.4) - high-confidence row signal is carried by
   warm text + the row-anchor stripe; no full orange box around the rect. */
.chart-flow .out-row.warm rect { fill: rgba(218, 119, 86, 0.08); }

.chart-frame.is-revealed .out-row { opacity: 1; transform: translateX(0); }
.chart-frame.is-revealed .out-row.r2 { transition-delay: 1.6s; }
.chart-frame.is-revealed .out-row.r3 { transition-delay: 1.85s; }
.chart-frame.is-revealed .out-row.r4 { transition-delay: 2.1s; }
.chart-frame.is-revealed .out-row.r5 { transition-delay: 2.35s; }

/* Generic --i stagger (addendum §B.5) - works for any element count.
   Use style="--i: 0" / style="--i: 1" etc. on the element.
   Replaces the .r1/.d1/.b1 hard-coded modifier pattern going forward. */
.chart-frame.is-revealed [style*="--i:"] {
  transition-delay: calc(var(--stagger) * var(--i, 0) + var(--stagger-base, 0ms));
}

.chart-flow .label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.chart-flow .row-text {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 11px;
}

/* ---------- Q-node: the Quarri hub between paper and structured rows
                (addendum §B.9 chart 01) - sped up per user ---------- */
.chart-flow .quarri-node {
  fill: var(--dark);
  stroke: var(--warm);
  stroke-width: 1.5;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity   var(--dur-fade) var(--ease-pop) 450ms,
    transform var(--dur-pop)  var(--ease-pop) 450ms;
}
.chart-frame.is-revealed .quarri-node { opacity: 1; transform: scale(1); }

/* Quarri logo image inside the Q-node (replaces the old text glyph) */
.chart-flow .quarri-logo {
  opacity: 0;
  transition: opacity var(--dur-fade) ease 600ms;
}
.chart-frame.is-revealed .quarri-logo { opacity: 1; }

/* Warm cell-anchor stripe for the highlighted out-row's value column */
.chart-flow .row-anchor {
  stroke: var(--warm);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.4s;
}
.chart-frame.is-revealed .row-anchor { opacity: 1; }

/* ---------- chart-line: animated line with pulse dots + forecast band ---------- */
.chart-line {
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.chart-line .axis {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.chart-line .axis-tick {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
}

.chart-line .grid-line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.chart-line .data-line {
  fill: none;
  stroke: var(--warm);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* Tightened from 1.6s to 1.0s for a less janky chart 02 sequence (per user). */
  transition: stroke-dashoffset 1.0s var(--ease-snap) 200ms;
}

.chart-frame.is-revealed .data-line { stroke-dashoffset: 0; }

.chart-line .forecast-band {
  fill: var(--warm);
  opacity: 0;
  transition: opacity 0.5s ease 1.1s;
}

.chart-frame.is-revealed .forecast-band { opacity: 0.10; }

.chart-line .forecast-line {
  fill: none;
  stroke: var(--warm);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: 0;
  transition: opacity 0.4s ease 1.1s;
}

.chart-frame.is-revealed .forecast-line { opacity: 0.7; }

/* Floor / threshold line for chart 02 (addendum §B.9 chart 02).
   Tightened delays for chart 02 cohesion (per user). */
.chart-line .floor-line {
  fill: none;
  stroke: var(--warm);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.1s;
}
.chart-frame.is-revealed .floor-line { opacity: 0.65; }

.chart-line .floor-label {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.3s;
}
.chart-frame.is-revealed .floor-label { opacity: 0.8; }

/* Floor-breach area: warm fill between cash-position line and floor where position drops below */
.chart-line .floor-breach {
  fill: var(--warm);
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.5s;
}
.chart-frame.is-revealed .floor-breach { opacity: 0.18; }

/* Cash-flow bars in chart-line context (chart 02 lower region). They fade in left-to-right
   using the --i stagger pattern from each <rect class="cash-bar" style="--i: N"> */
.chart-line .cash-bar {
  fill: rgba(255, 255, 255, 0.35);
  clip-path: inset(0 0 0 0);
  transition: opacity var(--dur-bar) var(--ease-snap);
  opacity: 0;
}
.chart-frame.is-revealed .cash-bar { opacity: 1; }
.chart-line .cash-bar.neg { fill: rgba(255, 255, 255, 0.22); }

/* Dots: opacity-only animation (no transform - more reliable on SVG circles) */
.chart-line .data-dot {
  fill: var(--warm);
  filter: drop-shadow(0 0 4px var(--warm));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.chart-frame.is-revealed .data-dot { opacity: 1; }
.chart-frame.is-revealed .data-dot.d1 { transition-delay: 0.6s; }
.chart-frame.is-revealed .data-dot.d2 { transition-delay: 0.9s; }
.chart-frame.is-revealed .data-dot.d3 { transition-delay: 1.2s; }
.chart-frame.is-revealed .data-dot.d4 { transition-delay: 1.5s; }

/* Warm modifier on data-dot (addendum §B.4) - signal dot, can carry a halo loop */
.chart-line .data-dot.warm {
  fill: var(--warm);
  filter: drop-shadow(0 0 6px var(--warm));
}

/* Warm modifier on data-line (addendum §B.4) - used for the cumulative/secondary line */
.chart-line .data-line.warm { stroke: var(--warm); stroke-width: 2.4; }

.chart-line .alert-spike {
  stroke: var(--warm);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.6s ease 2s;
}

.chart-frame.is-revealed .alert-spike { stroke-dashoffset: 0; }

.chart-line .alert-pulse {
  fill: var(--warm);
  opacity: 0;
  transition: opacity 0.3s ease 2.4s;
  /* Correctness fix (addendum §B.7) - without these the scale animates from
     SVG origin (top-left) instead of the pulse's own centre. */
  transform-origin: center;
  transform-box: fill-box;
}

.chart-frame.is-revealed .alert-pulse {
  opacity: 1;
  animation: alert-pulse 1.8s 2.4s ease-in-out infinite;
}

/* Capped pulse (addendum §B.7) - scale 1.25 max with opacity tween,
   so it breathes rather than engulfs its neighbouring label. */
@keyframes alert-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.25); opacity: 0.40; }
}

.chart-line .alert-label {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease 2.6s;
}

.chart-frame.is-revealed .alert-label { opacity: 1; }

.chart-line .label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---------- chart-bar: vertical bars with benchmark line ---------- */
.chart-bar {
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.chart-bar .axis {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.chart-bar .grid-line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

/* Bars use clip-path inset to "grow from bottom" - more reliable than scaleY on SVG */
.chart-bar .bar {
  fill: rgba(255, 255, 255, 0.40);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s var(--ease);
}

.chart-frame.is-revealed .bar { clip-path: inset(0 0 0 0); }
.chart-frame.is-revealed .bar.b2 { transition-delay: 0.10s; }
.chart-frame.is-revealed .bar.b3 { transition-delay: 0.20s; }
.chart-frame.is-revealed .bar.b4 { transition-delay: 0.30s; }
.chart-frame.is-revealed .bar.b5 { transition-delay: 0.40s; }
.chart-frame.is-revealed .bar.b6 { transition-delay: 0.50s; }
.chart-frame.is-revealed .bar.b7 { transition-delay: 0.60s; }

.chart-bar .bar.warm {
  fill: var(--warm);
  filter: drop-shadow(0 0 10px rgba(218, 119, 86, 0.55));
}

.chart-bar .benchmark-line {
  stroke: var(--warm);
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s ease 1s;
}

.chart-frame.is-revealed .benchmark-line { stroke-dashoffset: 0; }

.chart-bar .bar-label {
  fill: rgba(255, 255, 255, 0.5);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-anchor: middle;
}

.chart-bar .label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.chart-bar .benchmark-text {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- chart-bar--horizontal: horizontal bars sweeping left-to-right
              (addendum §B.9 chart 03) ----------
   NOTE: chart-bar--horizontal lives on the SAME element as chart-frame, so the
   reveal selector chains the classes (chart-frame.chart-bar--horizontal.is-revealed)
   rather than using a descendant combinator. */
.chart-bar.chart-bar--horizontal .bar {
  fill: rgba(255, 255, 255, 0.40);
  /* Sweep from the left: clip starts hiding from the right (100%) and reveals to 0 */
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-bar) var(--ease-snap);
}
.chart-frame.chart-bar--horizontal.is-revealed .bar { clip-path: inset(0 0 0 0); }
.chart-bar.chart-bar--horizontal .bar.warm {
  fill: var(--warm);
  filter: drop-shadow(0 0 8px rgba(218, 119, 86, 0.45));
}

/* Sparkline: 7-day micro-trend rendered as line strokes inside each row */
.chart-bar .sparkline-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-bar) var(--ease-snap);
}
.chart-frame.chart-bar--horizontal.is-revealed .sparkline-path { stroke-dashoffset: 0; }
.chart-bar .sparkline-path.warm { stroke: var(--warm); }

/* Row label (product/grade) and value (% number) for the horizontal-bar chart */
.chart-bar .row-label {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.chart-bar .row-label.alt {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 9px;
}
.chart-bar .bar-value {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  /* paint-order keeps it legible against bar fills/glows */
  paint-order: stroke fill;
  stroke: var(--dark);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.chart-bar .bar-value.warm { fill: var(--warm); }

/* Vertical target/threshold line for horizontal bars */
.chart-bar.chart-bar--horizontal .benchmark-line {
  stroke: var(--warm);
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s ease 1s;
}

/* Quality-target SOLID continuous warm vertical line (chart 03 - REBUILT per user).
   Fade-in reveal (no stroke-dasharray which was creating literal gaps in the line). */
.chart-bar.chart-bar--horizontal .quality-target {
  stroke: var(--warm);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 2px rgba(218, 119, 86, 0.5));
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
}
.chart-frame.chart-bar--horizontal.is-revealed .quality-target {
  opacity: 0.9;
}

/* ---------- chart-bar--ladder: per-product inventory rows (input/output/lead-time)
              (addendum §B.9 chart 05) ---------- */
.chart-bar.chart-bar--ladder .ladder-bar {
  fill: rgba(255, 255, 255, 0.35);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-bar) var(--ease-snap);
}
.chart-frame.chart-bar--ladder.is-revealed .ladder-bar { clip-path: inset(0 0 0 0); }
.chart-bar.chart-bar--ladder .ladder-bar.warm { fill: var(--warm); }
.chart-bar.chart-bar--ladder .ladder-bar.muted { fill: rgba(255, 255, 255, 0.18); }

/* Status chip (left side of each row) */
.chart-bar.chart-bar--ladder .status-chip {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-pop);
}
.chart-frame.chart-bar--ladder.is-revealed .status-chip { opacity: 1; }
.chart-bar.chart-bar--ladder .status-chip.warm {
  fill: var(--warm);
  stroke: var(--warm);
}

/* Hairline markers (safety stock + 7d demand) */
.chart-bar.chart-bar--ladder .hairline {
  stroke: var(--warm);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.4s;
}
.chart-frame.chart-bar--ladder.is-revealed .hairline { opacity: 0.65; }

/* Sub-label for input/output/lead-time row labels */
.chart-bar.chart-bar--ladder .sub-label {
  fill: rgba(255, 255, 255, 0.45);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Product name + status text inside chip */
.chart-bar.chart-bar--ladder .product-name {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.chart-bar.chart-bar--ladder .product-name.alt {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 8px;
}
.chart-bar.chart-bar--ladder .status-text {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.chart-bar.chart-bar--ladder .status-text.on-warm {
  fill: var(--dark);
  font-weight: 500;
}

/* ---------- chart-combo: bar + line on dual y-axis
              (addendum §B.9 chart 04 / new category) ---------- */
.chart-combo {
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Reuse the same scaffolding rules as chart-bar/chart-line */
.chart-combo .axis      { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.chart-combo .axis-tick {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
}
.chart-combo .axis-tick.warm { fill: var(--warm); }
.chart-combo .grid-line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.chart-combo .label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Bars: rise from baseline (clip-path inset). Reuse the .bar machinery. */
.chart-combo .bar {
  fill: rgba(255, 255, 255, 0.35);
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-bar) var(--ease-snap);
}
.chart-frame.chart-combo.is-revealed .bar { clip-path: inset(0 0 0 0); }

/* Bar value labels - paint-stroked for legibility against bar fills */
.chart-combo .bar-value {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 10px;
  text-anchor: middle;
  paint-order: stroke fill;
  stroke: var(--dark);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* Margin line - warm signal, draws left-to-right */
.chart-combo .data-line {
  fill: none;
  stroke: var(--warm);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-line) var(--ease-snap) 0.6s;
}
.chart-frame.chart-combo.is-revealed .data-line { stroke-dashoffset: 0; }

/* Margin dots - pop with easeOutBack */
.chart-combo .data-dot {
  fill: var(--warm);
  filter: drop-shadow(0 0 4px rgba(218,119,86,0.6));
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity   var(--dur-fade) var(--ease-pop),
    transform var(--dur-pop)  var(--ease-pop);
}
.chart-frame.chart-combo.is-revealed .data-dot { opacity: 1; transform: scale(1); }

/* Reference lines (cost benchmark + margin target) */
.chart-combo .benchmark-line {
  stroke: var(--warm);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.6s;
}
.chart-frame.chart-combo.is-revealed .benchmark-line { opacity: 0.55; }

.chart-combo .benchmark-text {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.8s;
}
.chart-frame.chart-combo.is-revealed .benchmark-text { opacity: 0.75; }

.chart-combo .bar-label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-anchor: middle;
}

/* Eyebrow tag specifically inside chart-combo, supports a .warm variant */
.chart-combo text.eyebrow.warm { fill: var(--warm); }

/* ---------- chart-heat: region × week heatmap with anomaly cell + callout box
              (addendum §B.9 chart 06) ---------- */
.chart-heat {
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.chart-heat .label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Region row labels - two-tier (country block + region) */
.chart-heat .region-label {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.chart-heat .region-label.alt {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 8px;
}

/* Week column labels */
.chart-heat .week-label {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-anchor: middle;
}

/* Heatmap cells - scale-in via easeOutBack with --i / --col stagger */
.chart-heat .cell {
  opacity: 0;
  transform: scale(0.85);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity   var(--dur-fade) var(--ease-pop),
    transform var(--dur-fade) var(--ease-pop);
}
.chart-frame.chart-heat.is-revealed .cell { opacity: 1; transform: scale(1); }

/* Stagger driver: per-cell delay via --i (0..19) */
.chart-frame.chart-heat.is-revealed .cell {
  transition-delay: calc(var(--stagger) * var(--i, 0));
}

/* Warm anomaly cell - drop-shadow glow + sustained pulse loop on the box only */
.chart-heat .cell.warm {
  filter: drop-shadow(0 0 12px rgba(218, 119, 86, 0.55));
}
.chart-frame.chart-heat.is-revealed .cell.warm {
  animation: heat-pulse 2.2s 2.4s ease-in-out infinite;
}
@keyframes heat-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.92; }
}

/* In-cell numeric values */
.chart-heat .cell-value {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke-width: 2.5px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 1.6s;
}
.chart-frame.chart-heat.is-revealed .cell-value { opacity: 1; }

/* Right-side callout box (line/SKU info) - slides in from right */
.chart-heat .heat-callout {
  fill: rgba(218, 119, 86, 0.08);
  stroke: var(--warm);
  stroke-width: 1;
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity   var(--dur-fade) var(--ease-snap) 2s,
    transform var(--dur-fade) var(--ease-snap) 2s;
}
.chart-frame.chart-heat.is-revealed .heat-callout { opacity: 1; transform: translateX(0); }

.chart-heat .heat-callout-text {
  fill: var(--warm);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-fade) ease 2.2s;
}
.chart-frame.chart-heat.is-revealed .heat-callout-text { opacity: 1; }

/* Column-marker triangle pointing down at the spike column */
.chart-heat .column-marker {
  fill: var(--warm);
  opacity: 0;
  transition: opacity var(--dur-fade) ease 2s;
}
.chart-frame.chart-heat.is-revealed .column-marker { opacity: 1; }

/* ---------- Mobile: hide axis ticks at narrow viewports (addendum §B.8) ----------
   At <540px viewport the chart-frame is ~320–340px wide, so 9px viewBox-units
   scale to ~6.4px CSS - illegible. Hiding ticks is safer than shrinking critical
   labels into illegibility. */
@media (max-width: 540px) {
  .chart-frame .axis-tick { display: none; }
}

/* ---------- Reduced-motion: respect user preference (addendum §C.4 / §D) ----------
   Charts still REVEAL via .is-revealed class but animations and transitions are
   instantaneous. The pulse loops (alert-pulse, flow-pulse) are stopped. */
@media (prefers-reduced-motion: reduce) {
  .chart-frame *,
  .chart-frame *::before,
  .chart-frame *::after {
    transition-duration: 0.01ms !important;
    transition-delay:    0ms !important;
    animation-duration:  0.01ms !important;
    animation-delay:     0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   FORESTRY: magazine asymmetric layout
   ============================================================ */
.demo-magazine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.demo-magazine--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.demo-magazine--reverse .demo-magazine-chart { order: 2; }

@media (max-width: 880px) {
  .demo-magazine,
  .demo-magazine--reverse { grid-template-columns: 1fr; gap: 40px; }
  .demo-magazine--reverse .demo-magazine-chart { order: 0; }
}

.demo-magazine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--warm);
  margin-bottom: 28px;
}

.demo-magazine-eyebrow::before {
  content: '';
  width: 28px;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--warm) 4px,
    var(--warm) 5px
  );
  display: inline-block;
}

.demo-magazine-title {
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 24px;
}

.demo-magazine-lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 28px;
}

.demo-magazine-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.demo-magazine-points li {
  position: relative;
  padding: 14px 0 14px 24px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}

.demo-magazine-points li:last-child { border-bottom: 1px solid var(--rule); }

.demo-magazine-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 14px;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 3px,
    var(--warm) 3px,
    var(--warm) 4px
  );
}

/* ============================================================
   MANUFACTURING: card + side-callouts layout
   ============================================================ */
.demo-card-layout {
  margin-top: clamp(56px, 8vh, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 880px) {
  .demo-card-layout { grid-template-columns: 1fr; gap: 40px; }
}

.demo-card-callouts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-card-callout {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warm);
  border-radius: 0 12px 12px 0;
  padding: 22px 24px;
}

.demo-card-callout-num {
  font-family: var(--mono);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}

.demo-card-callout-num .warm-mark { color: var(--warm); }

.demo-card-callout-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- Full-bleed image placeholder section ---------- */
.img-band {
  padding: 0;
  margin: 0;
  width: 100%;
}

.img-placeholder {
  position: relative;
  background: var(--dark);
  width: 100%;
  aspect-ratio: 21 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--white);
}

.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(218, 119, 86, 0.10), transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 36px,
      rgba(255, 255, 255, 0.025) 36px,
      rgba(255, 255, 255, 0.025) 37px
    );
}

.img-placeholder-icon {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-placeholder-icon::before,
.img-placeholder-icon::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.img-placeholder-icon::before {
  inset: 22px;
}

.img-placeholder-icon::after {
  inset: 38px;
  background: var(--warm);
  border-color: var(--warm);
}

.img-placeholder-label {
  position: absolute;
  bottom: 32px;
  left: clamp(20px, 3vw, 48px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  z-index: 1;
}

.img-placeholder-caption {
  position: absolute;
  bottom: 32px;
  right: clamp(20px, 3vw, 48px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

@media (max-width: 720px) {
  .img-placeholder { aspect-ratio: 4 / 3; }
  .img-placeholder-icon { width: 64px; height: 64px; }
  .img-placeholder-icon::before { inset: 14px; }
  .img-placeholder-icon::after { inset: 24px; }
}

/* ---------- Photo variant of the img-band (replaces the placeholder system
              when we have a real image to drop in) ---------- */
.img-band__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--dark);
}
.img-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slight darken so photo never overpowers the caption / next section */
  filter: brightness(0.92) saturate(0.95);
}
.img-band__photo::after {
  /* Subtle bottom-edge darkening so caption stays legible on bright photos */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.img-band__caption {
  position: absolute;
  bottom: clamp(20px, 3vh, 36px);
  right: clamp(20px, 3vw, 48px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 1;
}
.img-band__caption::before {
  content: '// ';
  color: var(--warm);
  margin-right: 4px;
}
@media (max-width: 720px) {
  .img-band__photo { aspect-ratio: 4 / 3; }
}

/* ---------- Bespoke deployment - 4-item grid ---------- */
.bespoke-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: clamp(56px, 8vh, 88px);
}

@media (max-width: 880px) {
  .bespoke-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 600px) {
  .bespoke-grid { grid-template-columns: 1fr; gap: 24px; }
}

.bespoke-item {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  /* not clickable - no hover */
}

.bespoke-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--warm);
  letter-spacing: 1px;
  display: block;
  margin-bottom: 18px;
}

.bespoke-item h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.2;
}

.bespoke-item p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Industry rows - match pillar format ---------- */
.ind-list { margin-top: clamp(56px, 8vh, 88px); }

.ind-row {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(0, 2fr) auto;
  gap: clamp(48px, 7vw, 120px);
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
  text-decoration: none;
}

.ind-row:last-child { border-bottom: 1px solid var(--rule); }
.ind-row:hover { background: var(--bone); padding-left: 16px; padding-right: 16px; }
.ind-row:hover .ind-arrow { transform: translateX(8px); color: var(--warm); }

@media (max-width: 880px) {
  .ind-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px 0;
  }
  .ind-row > .ind-arrow { display: none; }
}

.ind-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
}

.ind-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--warm);
  letter-spacing: 1px;
  flex-shrink: 0;
}

.ind-name {
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 1;
  color: var(--ink);
}

.ind-row p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  font-weight: 300;
}

.ind-arrow {
  font-size: 24px;
  color: var(--rule);
  font-weight: 300;
  transition: transform 0.3s var(--ease), color 0.2s ease;
  align-self: center;
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 16px; margin-top: 0; }

/* When a card-grid (or product-grid) follows a section-intro, give it breathing room */
.section-intro + .card-grid,
.section-intro + .product-grid {
  margin-top: clamp(56px, 8vh, 88px);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--1 { grid-template-columns: 1fr; }

@media (max-width: 880px) {
  .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 44px 36px;
  transition: border-color 0.2s ease, transform 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.card:hover { border-color: var(--ink); transform: translateY(-4px); }

/* Cards on dark sections */
.on-dark .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.on-dark .card:hover {
  border-color: rgba(255, 255, 255, 0.40);
}
.on-dark .card h3 { color: var(--white); }
.on-dark .card p { color: rgba(255, 255, 255, 0.62); }
.on-dark .card-link { color: var(--white); }

.card-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 24px;
}

.card h3 { margin-bottom: 16px; font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -0.6px; }
.card p { font-size: 15px; line-height: 1.55; flex-grow: 1; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  align-self: flex-start;
}

.card-link::after { content: '\2192'; transition: transform 0.18s var(--ease); }
.card:hover .card-link::after { transform: translateX(6px); }

/* ---------- Quote ---------- */
.quote { padding: clamp(140px, 20vh, 220px) 0; }

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
}

@media (max-width: 880px) {
  .quote-grid { grid-template-columns: 1fr; gap: 48px; }
}

.quote-mark {
  display: block;
  width: 84px;
  height: 24px;
  margin-bottom: 56px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 6px,
    var(--warm) 6px,
    var(--warm) 7px
  );
}

.quote blockquote {
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 300;
  letter-spacing: -1.2px;
  line-height: 1.18;
  color: var(--white);
}

.quote-attr-block {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 28px;
}

.quote-attr-block .attr {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm);
}

.quote-attr-block .role {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  max-width: 240px;
}

/* ---------- Bottom CTA ---------- */
.cta-block {
  padding: clamp(140px, 22vh, 240px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-block .h-display { max-width: 1100px; margin: 0 auto; }
.cta-block .lead { margin: 32px auto 0; }
.cta-block .hero-cta-row { justify-content: center; }

/* ---------- Trust strip ---------- */
.trust-row {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-soft);
}

.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.trust-row span::before {
  content: '';
  width: 16px;
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    var(--warm) 4px,
    var(--warm) 5px
  );
}

/* ---------- Footer ---------- */
footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 720px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

footer h4 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 22px;
}

footer ul li { margin-bottom: 12px; }

footer a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease;
}

footer a:hover { color: var(--warm); }

footer .footer-logo {
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
footer .footer-logo .nav-mark {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}
footer .footer-logo .nav-wordmark {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--white);
  line-height: 1;
}

footer .footer-tag {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 340px;
}

footer .footer-bottom {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Mobile nav ---------- */
.nav-toggle { display: none; font-size: 22px; color: var(--ink); }

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

  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    padding: 20px 32px 28px;
  }

  .nav.is-open .nav-links a { padding: 14px 0; width: 100%; }
  .nav.is-open .nav-pop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 16px;
    background: transparent;
  }
  .nav-group > a::after { content: ''; }
}

/* ---------- Section index (top-right corner of each numbered section) ---------- */
.section-index {
  position: absolute;
  top: clamp(40px, 7vh, 72px);
  right: clamp(24px, 4vw, 60px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(17, 17, 17, 0.32);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.section-index .total {
  color: rgba(17, 17, 17, 0.16);
}

.on-dark .section-index { color: rgba(255, 255, 255, 0.32); }
.on-dark .section-index .total { color: rgba(255, 255, 255, 0.14); }

/* ---------- Textured bone background (faint diagonal pattern) ---------- */
.bg-textured {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 22px,
    rgba(218, 119, 86, 0.04) 22px,
    rgba(218, 119, 86, 0.04) 23px
  );
}

/* ---------- Product gallery (real screenshots) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: clamp(56px, 8vh, 88px);
}

.product-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 960px) {
  .product-grid,
  .product-grid--2 { grid-template-columns: 1fr; gap: 24px; }
}

.product-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
}

.product-img-wrap {
  background: var(--bone);
  padding: 28px 28px 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-img-wrap img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
}

.product-card figcaption,
.product-card-foot {
  padding: 24px 32px 32px;
}

.product-card-head {
  padding: 36px 32px 24px;
  border-bottom: 1px solid var(--rule);
}

.product-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm);
  display: block;
  margin-bottom: 16px;
}

.product-card h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Large title for the team-flavoured product cards */
.product-card-title {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 0;
}

.product-card p {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.55;
}

.product-card .card-link {
  margin-top: 20px;
  display: inline-flex;
}

.product-card:hover .card-link::after { transform: translateX(6px); }

/* ---------- Scroll reveal ---------- */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}

.reveal { transform: translateY(24px); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }

.reveal.is-revealed,
.reveal-left.is-revealed,
.reveal-right.is-revealed {
  opacity: 1;
  transform: none;
}

.reveal.delay-1, .reveal-left.delay-1, .reveal-right.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2, .reveal-left.delay-2, .reveal-right.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3, .reveal-left.delay-3, .reveal-right.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4, .reveal-left.delay-4, .reveal-right.delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .scroll-rail { display: none; }
  .hero-watermark { animation: none !important; }
  .marquee-track { animation: none !important; }
}

/* ---------- Utility ---------- */
.mt-0  { margin-top: 0; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.center { text-align: center; }

/* ============================================================
   MOBILE / TOUCH OPTIMISATION LAYER
   Patterns lifted from the pitch deck (quarri-deck-full-vfm v2.3):
   safe-area insets for iOS notch, dynamic viewport units for browser-chrome
   resilience, hover-only effects gated on (hover: hover), proper touch-action,
   word-break for long labels, momentum scrolling on overflow areas.
   ============================================================ */

/* 1) Word-wrap & box-sizing safety on every element so long labels never
      blow out narrow viewports */
*, *::before, *::after {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 2) Honour the iOS safe area on body so the page is never hidden by the notch */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* 3) Make hover effects only fire on devices that ACTUALLY have hover.
      Touch devices simulate :hover after tap which leaves elements stuck
      in hover state. Re-scope our key hover rules. */
@media (hover: none) {
  .nav-group:hover .nav-pop { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  .nav-group:focus-within .nav-pop { opacity: 1; visibility: visible; transform: translateY(0); }
  .product-card:hover { transform: none; border-color: var(--rule); }
  .ind-row:hover { transform: none; }
  .card:hover { transform: none; }
  .tier-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .addon-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .nav-pop a:hover { background: transparent; }
  .nav-links a:not(.btn):hover { opacity: 0.65; }
}

/* 4) Touch-action: explicit pan-y on full-page scrollers (helps iOS resolve
      gesture intent quickly). All standard pages just want vertical pan. */
html, body { touch-action: pan-y; }
/* But iframes (HubSpot scheduler, pricing chart) need full freedom */
.scheduler-shell iframe,
.pricing-shell iframe { touch-action: auto; }

/* 5) Disable iOS double-tap zoom on tap-targets that should feel button-like.
      `touch-action: manipulation` removes the 300ms tap delay and prevents
      the accidental zoom. */
button, .btn, a.btn, .nav-toggle, .nav-links a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(218, 119, 86, 0.18);
}

/* 6) Prevent unwanted text selection on decorative chrome (eyebrows, axis ticks) */
.eyebrow, .axis-tick, .label, .section-index, .product-tag, .scroll-rail {
  -webkit-user-select: none;
  user-select: none;
}

/* 7) Smoother momentum scrolling on horizontal overflows (cap-list pills,
      marquee, etc.) */
.cap-list, .marquee {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ============================================================
   MOBILE LAYOUT POLISH (≤ 720px)
   - Stack hero grid vertically with proper spacing
   - Tighten section paddings using safe-area
   - Compress oversize typography one more notch
   - Stack two-column splits and demo-magazine layouts
   ============================================================ */
@media (max-width: 720px) {
  /* Use small/dynamic viewport units where we have 100vh so the iOS bottom
     bar never crops content */
  .hero {
    min-height: auto;
    padding-top:    max(96px, env(safe-area-inset-top));
    padding-bottom: max(64px, env(safe-area-inset-bottom));
  }

  /* Hero grid stacks (was 2-col) */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Display H1 — one notch tighter on phones */
  .h-display {
    font-size: clamp(36px, 9vw, 56px);
    letter-spacing: -1.5px;
  }

  /* Magazine layout (chart + text on industries) stacks vertically */
  .demo-magazine,
  .demo-magazine--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* In reverse layout on mobile, put chart back on top of text for narrative */
  .demo-magazine--reverse .demo-magazine-chart { order: 0; }

  /* Demo card layout (chart + callouts) stacks too */
  .demo-card-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Footer: stack columns to one each */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Section index is decorative — push it out of the way on small screens */
  .section-index {
    top: 16px;
    right: 16px;
    font-size: 10px;
  }

  /* Scroll-rail is fine on mobile but tuck it tighter */
  .scroll-rail { left: 12px; }

  /* CTA row wraps cleanly */
  .hero-cta-row { flex-wrap: wrap; gap: 12px; }
  .btn { padding: 14px 22px; font-size: 14px; }

  /* Marquee — slow it down a touch and let it flow without clipping  */
  .marquee-stat { padding: 0 24px; }
}

/* ============================================================
   EXTRA-SMALL PHONES (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --gutter: 20px;     /* was 40px */
    --pad-y:    clamp(72px, 12vh, 100px);
    --pad-y-sm: clamp(48px, 8vh, 72px);
  }

  .h-display { font-size: clamp(32px, 10vw, 44px); }
  h1, .h1 { font-size: clamp(32px, 9vw, 44px); }
  h2, .h2 { font-size: clamp(26px, 7vw, 36px); }

  .lead { font-size: 16px; }

  /* Tighten image-band caption position */
  .img-band__caption {
    bottom: max(12px, env(safe-area-inset-bottom));
    right: 16px;
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  /* Ensure flow-stack (used in heroes) is full-width on narrow phones */
  .flow-stack { padding: 24px 20px; }

  /* Pillars block stacks number above word on tightest phones */
  .pillar-head { gap: 12px; }

  /* Cap-list pills wrap better */
  .cap-list { gap: 8px; }
  .cap-list-item { padding: 8px 12px; font-size: 11px; }

  /* Bespoke grid 2-up minimum even on small phones */
  .bespoke-grid { grid-template-columns: 1fr; gap: 24px; }

  /* Card grids stack */
  .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
  .product-grid, .product-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   LANDSCAPE PHONES (short viewports)
   Reduce vertical padding so hero content stays in view
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding-top:    max(48px, env(safe-area-inset-top));
    padding-bottom: 40px;
  }
  .h-display { font-size: clamp(28px, 6vw, 44px); }
  section {
    padding-top:    var(--pad-y-sm);
    padding-bottom: var(--pad-y-sm);
  }
}

/* ============================================================
   BOTTOM-SAFE-AREA on dark CTA blocks so iOS bottom bar
   never overlaps the "Book a demo" button
   ============================================================ */
.cta-block {
  padding-bottom: max(var(--pad-y), calc(var(--pad-y) + env(safe-area-inset-bottom)));
}

/* ============================================================
   IFRAME SHELLS (pricing, scheduler) — mobile sizing
   Keep height generous on tall phones so the embedded UI
   doesn't get cramped, but allow scrolling within
   ============================================================ */
@media (max-width: 720px) {
  .scheduler-shell { border-radius: 8px; }
  .scheduler-shell iframe { height: 1100px; }
  .pricing-shell { border-radius: 8px; }
  .pricing-shell iframe { height: 2400px; }
}