/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  --bg:      #F5F0E6;
  --bg-alt:  #EDE8DE;
  --bg-card: #FDFAF5;
  --ink:     #0C0C0C;
  --ink-2:   #5A5550;
  --ink-3:   #6A6560;
  --red:     #C0282E;
  --red-dk:  #961E23;
  --red-lt:  #DD5A60; /* was #D94D53 — nudged for real WCAG AA margin on dark panels (was 4.53:1 on --void-card, now 5.0+:1) */
  --rule:    #D0C9BC;
  --rule-2:  #A09890;
  --rule-soft: #E8E3DB;
  --live:    #4A9B6E;

  /* Dark "spec sheet" panels — full-bleed contrast moments (industries,
     stat blocks, hero metrics strip). Warmer than pure black so it sits
     next to the cream ground without vibrating. Crimson stays the only
     accent hue: --gold-line is --red at low opacity for schematic trace
     lines on dark panels, not a second color. */
  --void:      #0A0908;
  --void-card: #16130F;
  --void-line: rgba(245,240,230,0.10);
  --gold-line: rgba(192,40,46,0.20);
  --void-ink:    #F5F0E6; /* literal, not var(--bg) — these are two different
                            semantic roles that only happen to share a value
                            (page background vs. text-on-a-dark-panel) */
  --void-ink-2:  rgba(245,240,230,0.62);
  --void-ink-3:  rgba(245,240,230,0.50);

  --xl:  clamp(3.5rem, 8vw, 6.5rem);
  --lg:  clamp(2.5rem, 5vw, 4rem);
  --md:  clamp(1.8rem, 3.5vw, 2.8rem);
  --gap: clamp(5rem, 10vw, 9rem);
  --w:   1200px;
  --edge: clamp(1.5rem, 4vw, 3rem);
  /* nav + sticky bar align to the .wrap content edge on wide screens */
  --gutter: max(var(--edge), calc((100% - var(--w)) / 2 + var(--edge)));

  /* Signature deceleration curve — confident, no bounce/overshoot.
     Used for hover lifts, card elevation and the FAQ accordion so
     motion across the site settles the same way everywhere instead
     of falling back to the browser's default linear-ish ease. Plain
     color/opacity fades keep an ordinary ease; this is for anything
     that moves or changes depth. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════
   BASE — Space Grotesk replaces Inter
═══════════════════════════════════════ */
html { scroll-behavior: smooth; color-scheme: light; }

/* Smooth cross-document navigation between pages (Chromium today;
   Safari/Firefox simply ignore this rule and keep their normal
   instant navigation — pure progressive enhancement, nothing to
   feature-detect). Browsers that support this already skip it
   automatically under prefers-reduced-motion, but stating it
   explicitly here keeps that behavior from depending on the
   browser's default rather than a declared intent. */
@media not (prefers-reduced-motion: reduce) {
  @view-transition { navigation: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--ink); color: var(--bg);
  padding: 0.5rem 1rem; font-size: 0.8rem;
  font-family: 'Space Grotesk', sans-serif;
  z-index: 9999; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Visually hidden but readable by assistive tech — used for the
   workflow diagram's tab-switch announcements. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Paper grain — adds depth, removes digital flatness */
.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 900;
  opacity: 0.03;
}

/* Scroll progress — thin crimson line, fills as you read */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--red);
  z-index: 950;
  transition: width 0.1s linear;
}

/* Selection + scrollbar — small details that read as deliberate */
::selection { background: var(--red); color: var(--bg); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule-2); border: 2px solid var(--bg); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
html { scrollbar-width: thin; scrollbar-color: var(--rule-2) var(--bg); }

/* Custom cursor — desktop only, and only once the script confirms
   the replacement dot initialized successfully (see script below).
   Never gated on a bare pointer:fine check alone, so a JS error
   anywhere on this page can't leave a visitor with no cursor. */
@media (pointer: fine) {
  html.cur-ready, html.cur-ready * { cursor: none !important; }
  html.cur-ready input[type="text"],
  html.cur-ready textarea { cursor: text !important; }
  html.cur-ready input[type="range"] { cursor: pointer !important; }
  .cursor {
    position: fixed;
    width: 7px; height: 7px;
    background: var(--red);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.15s ease;
    opacity: 0;
  }
  .cursor.on    { opacity: 1; }
  .cursor.big   { width: 30px; height: 30px; background: transparent; border: 1.5px solid var(--red); }
}

/* ═══════════════════════════════════════
   TYPE HELPERS
═══════════════════════════════════════ */
em.r {
  font-style: italic;
  color: var(--red);
  font-weight: 400;
  font-family: 'Cormorant Garamond', serif;
}
.sec-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lbl {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 1.75rem;
}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.sec     { padding: var(--gap) 0; }
.sec-alt { background: var(--bg-alt); }

/* ═══════════════════════════════════════
   REVEALS
═══════════════════════════════════════ */
.ry { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.ry.on { opacity: 1; transform: translateY(0); }
/* Light stagger for hero entrances and card grids that use .ry */
.vt-hero .vt-lede.ry { transition-delay: .1s; }
.vt-hero .vt-ctas.ry { transition-delay: .2s; }
.bl-grid .bl-card:nth-child(1).ry { transition-delay: 0s; }
.bl-grid .bl-card:nth-child(2).ry { transition-delay: .08s; }
.bl-grid .bl-card:nth-child(3).ry { transition-delay: .16s; }
.bl-grid .bl-card:nth-child(4).ry { transition-delay: .24s; }
.bl-grid .bl-card:nth-child(5).ry { transition-delay: .32s; }
.bl-grid .bl-card:nth-child(6).ry { transition-delay: .4s; }
.rx { opacity: 0; transform: translateX(-18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rx.on { opacity: 1; transform: translateX(0); }
/* Hash-landing pages (this page's own nav, every industry page's
   nav/footer, bookmarks, shared links) jump straight to a section —
   html{scroll-behavior:smooth} already spends ~300-400ms getting
   there. Layering a 0.6-0.7s fade on top left a visible "still
   arriving" tail after the scroll settled. JS adds this class before
   revealing, so that specific path shows content at full opacity
   immediately instead of catching the fade partway through; normal
   scroll-triggered reveals elsewhere on the page are untouched. */
.no-reveal-anim .ry, .no-reveal-anim .rx { transition: none !important; transition-delay: 0s !important; }

/* ═══════════════════════════════════════
   BUTTONS — unified language, arrow-slide on hover
═══════════════════════════════════════ */
.arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.arrow.down { display: inline-block; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }

.btn-dk {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
  padding: 15px 32px; text-decoration: none;
  transition: background 0.22s, border-color 0.22s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  white-space: nowrap;
}
.btn-dk:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(192,40,46,0.22); }
.btn-dk:hover .arrow { transform: translateX(4px); }
.btn-dk:active { transform: scale(0.98) translateY(0); box-shadow: none; }

.btn-lt {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-2);
  padding: 15px 32px; text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  white-space: nowrap;
}
.btn-lt:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12,12,12,0.18); }
.btn-lt:hover .arrow.down { transform: translateY(3px); }
.btn-lt:active { transform: scale(0.98) translateY(0); box-shadow: none; }

.link-r {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--red); font-size: 0.9rem; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.link-r:hover { border-bottom-color: var(--red); }
.link-r:hover .arrow { transform: translateX(4px); }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
nav {
  position: fixed; inset: 0 0 auto 0;
  height: 64px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  z-index: 800;
  transition: border-color 0.3s, background 0.3s, backdrop-filter 0.3s;
}
nav.stuck {
  border-bottom-color: var(--rule);
  background: rgba(245, 240, 230, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'DM Mono', monospace;
  font-weight: 500; font-size: 0.8rem; letter-spacing: 0.25em;
  color: var(--ink); text-decoration: none; flex-shrink: 0;
}
.nav-logo-img { display: block; height: 24px; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: 2.25rem;
  list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem; letter-spacing: 0.02em;
  color: var(--ink-2); text-decoration: none; transition: color 0.18s;
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
/* Scroll-spy active state — small crimson dot beneath the current section's link */
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: '';
  position: absolute; left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--red);
}
.nav-r { display: flex; align-items: center; gap: 1rem; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink); border: 1px solid var(--ink);
  padding: 8px 18px; background: transparent; text-decoration: none;
  transition: background 0.2s, color 0.2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); }
.nav-cta:hover .arrow { transform: translateX(3px); }
.ham-btn {
  display: none; background: none; border: none;
  color: var(--ink); line-height: 0;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════ */
.mob-menu {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 850;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2rem; opacity: 0;
  transition: opacity 0.25s ease;
}
.mob-menu.open { opacity: 1; pointer-events: all; }
.mob-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 2.2rem;
  color: var(--ink); text-decoration: none;
  transition: color 0.2s;
}
.mob-menu a:hover { color: var(--red); }
.mob-x {
  position: absolute; top: 18px;
  right: clamp(1.5rem, 4vw, 3rem);
  background: none; border: none;
  color: var(--ink); font-size: 1.1rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════
   STICKY BOTTOM BAR
═══════════════════════════════════════ */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  min-height: 52px;
  background: var(--ink);
  border-top: 1px solid rgba(245, 240, 230, 0.08);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  z-index: 700;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-bar.vis { transform: translateY(0); }
.sticky-bar-l {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: rgba(245, 240, 230, 0.62);
  background: none; border: none; cursor: pointer;
  padding: 0; transition: color 0.2s;
}
.sticky-bar-l:hover { color: rgba(245, 240, 230, 0.95); }
.sticky-bar-l .arrow.up {
  display: inline-block; font-size: 0.85rem;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.sticky-bar-l:hover .arrow.up { transform: translateY(-3px); }
.sticky-bar-r {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--bg); text-decoration: none;
  border: 1px solid rgba(245, 240, 230, 0.28);
  padding: 7px 18px;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.sticky-bar-r:hover { background: var(--red); border-color: var(--red); }
.sticky-bar-r:hover .arrow { transform: translateX(3px); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 64px;
}
.hero-in {
  width: 100%; max-width: var(--w);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem);
}
.hero-grid {
  display: grid; grid-template-columns: 1.35fr 0.65fr;
  align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
}
.hero-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.18em;
  color: var(--ink-3); margin-bottom: 2.5rem;
  opacity: 0; animation: fu 0.6s ease forwards 0.1s;
}
.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.1rem, 6.3vw, 5.6rem); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: 2rem; text-wrap: balance;
  opacity: 0; animation: fu 0.85s ease forwards 0.22s;
}
.hero-h1 em.r { font-size: 1.08em; }
.hero-p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; line-height: 1.78;
  color: var(--ink-2); max-width: 560px;
  margin-bottom: 2.75rem;
  opacity: 0; animation: fu 0.8s ease forwards 0.4s;
}
.hero-ctas {
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: fu 0.8s ease forwards 0.52s;
}

/* ── Hero signature graphic — "the node": a lighter, non-interactive
   derivative of the #wf2svg workflow diagram's own visual language
   (same shadow-filter approach, same node/edge vocabulary), reused
   here as the hero's mark rather than a generic decorative shape.
   The whole thing links through to the live diagram it's drawn from. */
.hero-graphic {
  display: block; justify-self: end; align-self: center;
  width: 100%; max-width: 440px;
  text-decoration: none; transition: transform 0.2s ease;
}
.hero-graphic:hover { transform: translateY(-3px); }
.hnm { width: 100%; height: auto; display: block; overflow: visible; }
.hnm-edge {
  fill: none; stroke: var(--rule-2); stroke-width: 1.7;
  stroke-linecap: round; opacity: 0.75;
}
.hnm-flow-dot { fill: var(--red); opacity: 0.6; }
.hnm-node { animation: hnmDrift 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hnm-hub-rect { fill: var(--bg-card); stroke: var(--red); stroke-width: 2; }
.hnm-hub-icon { fill: var(--red); }
.hnm-sat-circle { fill: var(--bg-card); stroke: #E5DFD5; stroke-width: 1.3; }
.hnm-sat-icon { fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

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

/* Node-motif watermark — the same hub-and-satellite visual language as
   the hero graphic, reused as quiet background texture on dark panels
   so the motif reads as a system (hero + 2 watermarks), not a one-off.
   Deliberately NOT using .hnm-node/hnmDrift: this needs to sit well
   behind the section's real content, not draw a second focal point,
   so it's fully static and drawn in a single flat low-opacity stroke
   rather than the hero's filled/shadowed treatment. */
.hnm-watermark {
  position: absolute; pointer-events: none; z-index: 0;
  opacity: 0.035; overflow: visible;
}
.hnm-watermark-edge, .hnm-watermark-hub, .hnm-watermark-sat {
  fill: none; stroke: var(--bg); stroke-width: 1.2;
}
.hnm-watermark-dot { fill: var(--bg); }

.fine-print {
  font-family: 'DM Mono', monospace; font-size: 0.83rem;
  letter-spacing: 0.02em; color: var(--ink-2);
  margin-top: 1.25rem;
}

@keyframes fu {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   MARQUEE
═══════════════════════════════════════ */
.mq-wrap {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
  height: 52px; overflow: hidden;
  display: flex; align-items: center;
}
.mq-track {
  display: flex; white-space: nowrap;
  animation: mq 35s linear infinite;
  will-change: transform;
}
.mq-set { display: flex; align-items: center; }
.mq-w {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--ink-3); padding: 0 1.2rem;
}
.mq-d { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink-3); }
@keyframes mq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ═══════════════════════════════════════
   PROBLEM
═══════════════════════════════════════ */
.prob-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 5rem; align-items: start;
}
.prob-sticky { position: sticky; top: 88px; }
.prob-sub {
  font-size: 1rem; line-height: 1.78;
  color: var(--ink-2);
}
.prob-point {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem; align-items: start;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.prob-point:first-child { border-top: 1px solid var(--rule); }
.prob-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--red); padding-top: 0.2rem;
}
.prob-txt { font-size: 0.93rem; line-height: 1.72; color: var(--ink-2); }

/* ═══════════════════════════════════════
   PHILOSOPHY STRIP
═══════════════════════════════════════ */
.phil-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.phil-in {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 2rem; max-width: var(--w);
  margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.phil-rule {
  display: block; width: 36px; height: 1px;
  background: var(--rule-2);
}
.phil-q {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  color: var(--ink); line-height: 1.42;
  letter-spacing: -0.01em; max-width: 700px;
}

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.svc-intro {
  font-size: 1.05rem; line-height: 1.78;
  color: var(--ink-2); max-width: 720px; margin-bottom: 1rem;
}
.svc-intro .link-r { margin-left: 0.3rem; white-space: nowrap; }
.svc-status {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 2.5rem;
}
.svc-status .ii-status { margin-left: 0; } /* this badge shrink-wraps its own content, unlike the integrations-grid rows .ii-status was originally written for — that inherited auto-margin assumes extra row width to push against */

/* Flagship offer block — the two productized, fixed-price systems */
.svc-flag-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; margin-bottom: 3rem;
}
.svc-flag {
  background: var(--bg-card);
  border: 1px solid var(--rule); border-top: 2px solid var(--red);
  padding: 2.25rem 2rem;
}
.svc-flag-n {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
  color: var(--red); display: block; margin-bottom: 0.9rem;
}
.svc-flag-t {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 1.35rem; color: var(--ink); margin-bottom: 0.85rem; line-height: 1.25;
}
.svc-flag-p { font-size: 0.9rem; line-height: 1.72; color: var(--ink-2); margin-bottom: 1.5rem; }
.svc-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.svc-pill {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-2); border: 1px solid var(--rule-2);
  padding: 0.32rem 0.7rem;
}
.svc-deliv { list-style: none; margin-bottom: 1.75rem; }
.svc-deliv li {
  font-size: 0.86rem; line-height: 1.65; color: var(--ink-2);
  padding-left: 1.1rem; position: relative; margin-bottom: 0.5rem;
}
.svc-deliv li::before {
  content: '—'; position: absolute; left: 0; color: var(--red);
}

/* Secondary row — the four custom-build services, deliberately quieter */
.svc-sec-label {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--ink-3); border-top: 1px solid var(--rule);
  padding-top: 1.75rem; margin-bottom: 1.5rem;
}
.svc-sec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--rule);
}
.sc2 {
  background: var(--bg-card); padding: 20px 18px;
  transition: background 0.15s;
}
.sc2:hover { background: var(--bg); }
.sc2-n {
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  color: var(--red); display: block; margin-bottom: 0.55rem;
}
.sc2-t { font-size: 0.85rem; font-weight: 500; color: var(--ink); margin-bottom: 0.45rem; line-height: 1.3; }
.sc2-d { font-size: 0.78rem; line-height: 1.62; color: var(--ink-2); }

/* Custom Automation closer — same dashed-border language as Industries' catch-all */
.svc-custom {
  background: var(--bg); border: 1px dashed var(--rule-2);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.5rem 1.75rem; margin-top: 1px;
}
.svc-custom-n { font-size: 1.3rem; color: var(--ink-3); flex-shrink: 0; }
.svc-custom-body { flex: 1; }
.svc-custom-t { font-size: 0.93rem; font-weight: 500; color: var(--ink); margin-bottom: 0.3rem; }
.svc-custom-d { font-size: 0.83rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 0.75rem; }

/* Product / Custom Automation cards are clickable — the visible,
   keyboard-focusable control is always the inner .svc-flag-open /
   .svc-custom-open button (native <button>, real tab stop, real
   accessible name). The card's own click listener just widens the
   mouse target to the whole card; it is never itself a tab stop, so
   there's exactly one focusable control per card, not two competing
   ones. cursor:pointer signals the whole surface is live. */
/* Quiet bare-icon on all six closed Services cards (01–06) — the
   exact same treatment as Industries' .ind-card.sec2 .ind-icon
   (same opacity, same color, same weight), just reused outside the
   .ind-card context. Not a new heavier chip — deliberately stays
   quieter than the icon-chip badge inside the opened panel, so the
   closed card previews what's inside without competing with it. */
.svc-flag .ind-icon, .sc2 .ind-icon {
  color: var(--red-lt); opacity: 0.85; margin-bottom: 1rem; display: block;
}
.svc-flag, .svc-custom, .sc2 { cursor: pointer; }
.svc-flag-open, .svc-custom-open, .sc2-open {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
}
.sc2-open { display: inline-flex; margin-top: 0.9rem; font-size: 0.78rem; }

/* ═══════════════════════════════════════
   DETAIL PANEL — shared spec-sheet modal.
   One FocusTrap-managed panel, populated from a data object per
   caller (content in, panel out) — consumed by both product cards
   (Voice, Lead Growth) AND the Custom Automation card. Not three
   one-off modals; the void "spec sheet" treatment already used for
   Industries/FAQ/stat panels, applied here to a dialog.
═══════════════════════════════════════ */
.dp-overlay {
  position: fixed; inset: 0;
  background: rgba(12,12,12,.72);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.dp-overlay.open { opacity: 1; pointer-events: all; }
.dp-panel {
  background: var(--void);
  border: 1px solid var(--void-line); border-top: 2px solid var(--red);
  max-width: 760px; width: 100%;
  max-height: 88vh; overflow: hidden;
  position: relative;
  transform: translateY(16px);
  transition: transform 0.25s ease;
  display: flex; flex-direction: column;
}
.dp-overlay.open .dp-panel { transform: translateY(0); }
/* Scroll container is a separate inner element from .dp-panel on
   purpose. .dp-close is position:absolute against .dp-panel — if
   .dp-panel itself were the overflow:auto element (the original
   bug), .dp-close would scroll away with the content on any panel
   long enough to scroll (confirmed live in 07-panel-voice-footer-
   scrolled.png: the ✕ was gone once the user scrolled). Keeping
   .dp-panel static and only .dp-scroll scrollable pins the close
   button on screen for the entire read, on every card incl. the
   4-step Custom Automation panel, which is the tallest one. */
.dp-scroll {
  overflow-y: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  flex: 1 1 auto;
  min-height: 0;
}
.dp-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: var(--void); border-radius: 50%; z-index: 2;
  border: none; cursor: pointer;
  color: var(--void-ink-3); font-size: 1rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.dp-close:hover { color: var(--void-ink); }
.dp-eyebrow {
  display: block; font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--red-lt); margin-bottom: 0.85rem;
}
/* Header badge — reuses Industries' exact icon-chip treatment
   (gold-line = --red at 20% opacity behind a solid --red icon) so
   every icon-chip on the site carries the same single accent hue,
   never a rainbow of category colors. Sits above the existing
   eyebrow/title, doesn't replace either. */
.dp-badge-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.dp-badge {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  background: var(--gold-line); display: flex; align-items: center; justify-content: center;
}
.dp-badge-icon { fill: none; stroke: var(--red); stroke-width: 1.7; width: 19px; height: 19px; }
.dp-cat {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--void-ink-2); text-transform: uppercase;
}
.dp-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--void-ink);
  margin-bottom: 0.75rem; line-height: 1.15;
  padding-right: 2.5rem;
}
.dp-tagline {
  font-size: 0.95rem; line-height: 1.7; color: var(--void-ink-2);
  max-width: 560px; margin-bottom: 2.25rem;
  padding-bottom: 2.25rem; border-bottom: 1px solid var(--void-line);
}
.dp-body { display: flex; flex-direction: column; gap: 2rem; }
.dp-h3 {
  font-family: 'DM Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.14em; color: var(--void-ink-3);
  margin-bottom: 1rem;
}
.dp-prose { font-size: 0.9rem; line-height: 1.75; color: var(--void-ink-2); max-width: 620px; }
/* Capability grid — replaces the old dash-bullet .dp-list. Numeral +
   bold label + supporting line, split from the EXACT same DETAIL_DATA
   strings at their existing " — " separator (render-time split, zero
   content changes) — where a string has no clean single dash to split
   on (or has two, e.g. a mid-sentence parenthetical aside), it's kept
   as one full-sentence card instead of forcing an awkward break. */
.dp-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dp-cap-card {
  border: 1px solid var(--void-line); padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.dp-cap-num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--red-lt); }
.dp-cap-label { font-size: 0.87rem; font-weight: 600; color: var(--void-ink); line-height: 1.4; }
.dp-cap-body { font-size: 0.82rem; color: var(--void-ink-2); line-height: 1.55; }
@media (max-width: 640px) {
  .dp-cap-grid { grid-template-columns: 1fr; }
}
.dp-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dp-pill {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--void-ink-2); border: 1px solid var(--void-line);
  padding: 0.32rem 0.7rem;
}
.dp-steps { list-style: none; }
.dp-step { display: flex; gap: 1rem; margin-bottom: 1.1rem; }
.dp-step:last-child { margin-bottom: 0; }
.dp-step-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  color: var(--red-lt); flex-shrink: 0; width: 1.6rem; padding-top: 0.1rem;
}
.dp-step-txt { font-size: 0.87rem; line-height: 1.65; color: var(--void-ink-2); }
.dp-step-txt strong { color: var(--void-ink); font-weight: 500; }
.dp-transcript-note {
  font-size: 0.78rem; color: var(--void-ink-3); font-style: italic;
  margin-bottom: 1rem;
}
.dp-transcript { border: 1px solid var(--void-line); }
.dp-t-turn { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--void-line); }
.dp-t-turn:last-child { border-bottom: none; }
.dp-t-who {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
}
.dp-t-caller .dp-t-who { color: var(--void-ink-3); }
.dp-t-ai .dp-t-who { color: var(--red-lt); }
.dp-t-ai { background: rgba(192,40,46,0.06); }
.dp-t-bubble { font-size: 0.87rem; line-height: 1.6; color: var(--void-ink-2); margin: 0; }
/* CTA band — same layered offset-card language as .imp-exhibit
   (Impact section), scaled down for an in-panel footer: a --red-dk
   backing card sits behind a --void-card surface, both barely
   rotated. Replaces the old plain border-top footer row so the CTA
   reads as a distinct closing moment, not just the last line. */
.dp-cta-band { position: relative; margin-top: 2.5rem; }
.dp-cta-band-back { display: none; }
.dp-cta-band-in {
  position: relative; z-index: 1;
  background: var(--void-card); border: 1px solid var(--void-line); border-top: 2px solid var(--red);
  padding: 1.5rem 1.75rem;
}
.dp-cta-line { font-size: 0.85rem; color: var(--void-ink-2); max-width: 480px; margin-bottom: 1.1rem; }
.dp-cta-band .dp-footer { margin-top: 0; padding-top: 0; border-top: none; }
.dp-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
}
.dp-price-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--red-lt); font-size: 0.86rem; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
/* Author display:inline-flex above beats the UA [hidden]{display:none}
   rule regardless of specificity (author > UA origin) — without this,
   an <a href> with the `hidden` IDL property set stays visible AND
   stays in the native tab order. Custom Automation sets this hidden
   (no fixed pricing to link to); this is what actually removes it. */
.dp-price-link[hidden] { display: none; }
.dp-price-link:hover { border-bottom-color: var(--red-lt); }
.dp-price-link:hover .arrow { transform: translateX(4px); }
.dp-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--red); color: var(--void-ink); text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  padding: 0.85rem 1.6rem;
  transition: background 0.2s;
}
.dp-cta:hover { background: var(--red-dk); }

@media (max-width: 480px) {
  .dp-footer { flex-direction: column; align-items: stretch; }
  .dp-cta { justify-content: center; }
}

/* ═══════════════════════════════════════
   WORKFLOW SHOWCASE (v2 — data-driven diagram)
═══════════════════════════════════════ */
.wf-sub {
  font-size: 0.95rem; color: var(--ink-2);
  max-width: 620px; line-height: 1.7; margin-top: 1rem;
}
.wf-note {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink-3);
  margin-top: 1.25rem; max-width: 560px; line-height: 1.6;
}
.wf2-showcase {
  /* The --wf-* custom properties below replace what used to be
     one-off hardcoded hex values scattered through this component
     (magic numbers with no link back to a variable if the palette
     ever moves) — tokenizing them here keeps that fix without
     polluting the global :root namespace with wf2-only names. */
  --wf-hover-border: #D8D1C4;
  --wf-tab-active-d: #B8B0A2;
  --wf-panel-grad-1: #FCFAF6;
  --wf-panel-grad-2: #F8F5EF;
  --wf-node-fill: #FFFFFF;
  --wf-node-stroke: #E5DFD5;
  --wf-icon: #857C6C;
  --wf-badge-txt: #726A5C;
  --wf-badge-ai-bg: #FBEAEA;
  --wf-final-tag: #E8A5A5;
  --wf-icon-sub: #8A806C;
  --wf-trace: #C9C0AC;
  margin-top: 4rem;
}
.wf2-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .wf2-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .wf2-tabs {
    display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--edge) * -1); padding: 0 var(--edge) 0.6rem;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .wf2-tabs::-webkit-scrollbar { display: none; }
  .wf2-tab { flex: 0 0 min(78vw, 260px); scroll-snap-align: start; }
}
.wf2-tab {
  text-align: left; background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: 12px;
  padding: 0.95rem 1.3rem; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  min-width: 0;
}
.wf2-tab:hover { border-color: var(--wf-hover-border); box-shadow: 0 4px 16px rgba(20,16,10,0.06); transform: translateY(-1px); }
.wf2-tab.active { background: var(--ink); border-color: var(--ink); box-shadow: 0 6px 20px rgba(20,16,10,0.14); }
.wf2-tab-t {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.3rem; letter-spacing: -0.01em;
}
.wf2-tab.active .wf2-tab-t { color: var(--bg); }
.wf2-tab-d { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; color: var(--ink-3); line-height: 1.45; }
.wf2-tab.active .wf2-tab-d { color: var(--wf-tab-active-d); }

.wf2-canvas-shell {
  border: 1px solid var(--rule-soft); border-radius: 20px;
  background: linear-gradient(180deg, var(--wf-panel-grad-1) 0%, var(--wf-panel-grad-2) 100%);
  position: relative; box-shadow: 0 1px 2px rgba(20,16,10,0.03), 0 12px 40px rgba(20,16,10,0.05);
}
.wf2-canvas-scroll { overflow-x: auto; overflow-y: hidden; padding: 8px; }
.wf2-svg { width: 100%; min-width: 1040px; height: auto; display: block; }
.wf2-dragtip {
  position: absolute; top: 14px; right: 16px;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-3); background: var(--bg-card);
  border: 1px solid var(--rule); padding: 5px 10px 5px 8px;
  pointer-events: none; opacity: 1; transition: opacity 0.4s ease;
  z-index: 2;
}
.wf2-dragtip-hide { opacity: 0; }
@media (max-width: 768px) { .wf2-dragtip { display: none; } }

.wf2-scrolltip {
  position: absolute; bottom: 14px; right: 16px;
  display: inline-flex; align-items: center;
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-3); background: var(--bg-card);
  border: 1px solid var(--rule); padding: 5px 10px;
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  z-index: 2;
}
.wf2-canvas-shell.wf2-scrollable .wf2-scrolltip { opacity: 1; }
.wf2-scrolltip-hide { opacity: 0 !important; }

/* Edge-fade — makes the fixed-size, pan-to-explore canvas read as
   intentionally scrollable rather than looking cut off, at any
   viewport narrow enough that the diagram doesn't fully fit. */
.wf2-canvas-shell::after {
  content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 40px; border-radius: 0 19px 19px 0;
  background: linear-gradient(90deg, rgba(248,245,239,0) 0%, var(--wf-panel-grad-2) 80%);
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  z-index: 1;
}
.wf2-canvas-shell.wf2-scrollable::after { opacity: 1; }
.wf2-canvas-shell.wf2-scroll-end::after { opacity: 0; }

/* Nodes — premium enterprise cards */
.wf2-node-rect {
  fill: var(--wf-node-fill); stroke: var(--wf-node-stroke); stroke-width: 1.2;
  filter: url(#wf2softshadow);
  transition: stroke 0.18s, filter 0.18s, opacity 0.25s, transform 0.18s;
}
.wf2-node-circle {
  fill: var(--wf-node-fill); stroke: var(--wf-node-stroke); stroke-width: 1.2;
  filter: url(#wf2softshadow);
  transition: stroke 0.18s, filter 0.18s, opacity 0.25s, transform 0.18s;
}
.wf2-node-tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; fill: var(--ink-3); transition: opacity 0.25s; }
.wf2-node-label { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; fill: var(--ink); letter-spacing: -0.01em; transition: opacity 0.25s; }
.wf2-node-sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; fill: var(--ink-3); transition: opacity 0.25s; }
.wf2-node-circle-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; fill: var(--ink); transition: opacity 0.25s; }
.wf2-node-circle-tag { font-family: 'JetBrains Mono', monospace; font-size: 8.4px; font-weight: 700; letter-spacing: 0.05em; fill: var(--ink-3); transition: opacity 0.25s; }
.wf2-icon { color: var(--wf-icon); opacity: 0.9; fill: none; stroke: currentColor; stroke-width: 1.7; transition: opacity 0.25s, color 0.15s; }
.wf2-badge-bg { fill: var(--bg); }
.wf2-badge-txt { font-family: 'JetBrains Mono', monospace; font-size: 8.4px; font-weight: 700; letter-spacing: 0.03em; fill: var(--wf-badge-txt); }
.wf2-status-dot { fill: var(--live); }

/* Role accents */
.wf2-role-ai .wf2-node-rect { stroke: var(--red); stroke-width: 1.8; filter: url(#wf2redshadow); }
.wf2-role-ai .wf2-node-tag { fill: var(--red); }
.wf2-role-ai .wf2-icon { color: var(--red); opacity: 1; }
.wf2-role-ai .wf2-badge-bg { fill: var(--wf-badge-ai-bg); }
.wf2-role-ai .wf2-badge-txt { fill: var(--red); }
.wf2-role-gate .wf2-node-rect { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 3.5; }
.wf2-role-final .wf2-node-rect { fill: var(--ink); stroke: var(--ink); }
.wf2-role-final .wf2-node-tag { fill: var(--wf-final-tag); }
.wf2-role-final .wf2-node-label { fill: #FFFFFF; }
.wf2-role-final .wf2-icon { color: var(--ink-3); opacity: 0.9; }
.wf2-role-infra .wf2-node-rect { fill: var(--bg-card); stroke: var(--rule-soft); }
.wf2-role-infra .wf2-node-tag { fill: var(--ink-3); }
.wf2-role-trigger .wf2-node-tag { fill: var(--live); }
.wf2-role-sub .wf2-icon { opacity: 1; color: var(--wf-icon-sub); }

/* AI nodes breathe subtly to signal "live processing" */
.wf2-pulse .wf2-node-rect { animation: wf2Pulse 2.8s ease-in-out infinite; }
@keyframes wf2Pulse {
  0%, 100% { filter: url(#wf2redshadow); }
  50% { filter: url(#wf2redshadowBig); }
}

/* Edges */
.wf2-edge {
  fill: none; stroke: var(--wf-trace); stroke-width: 1.6; stroke-linecap: round;
  transition: stroke 0.15s, stroke-width 0.15s, opacity 0.25s;
}
.wf2-edge-infra { stroke-dasharray: 1.5 4.5; stroke: var(--rule); }
.wf2-edge-cfg { stroke-dasharray: 1.5 4.5; stroke: var(--rule); }
.wf2-edge-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; fill: var(--ink-3); transition: opacity 0.25s; }
.wf2-flow-dot { fill: var(--red); opacity: 0.75; filter: drop-shadow(0 0 3px rgba(192,40,46,0.5)); }

/* Hover interactivity — lift + highlight */
.wf2-node { cursor: pointer; }
.wf2-draggable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wf2-draggable:active, .wf2-dragging { cursor: grabbing; }
.wf2-dragging .wf2-node-rect, .wf2-dragging .wf2-node-circle { filter: url(#wf2redshadowBig); stroke: var(--red); }
.wf2-node.wf2-active { transform: translateY(-3px); }
.wf2-node.wf2-active .wf2-node-rect { stroke: var(--red); stroke-width: 2; filter: url(#wf2redshadowBig); }
.wf2-node.wf2-active .wf2-node-circle { stroke: var(--red); stroke-width: 1.8; filter: url(#wf2redshadowBig); }
.wf2-node.wf2-active .wf2-icon { color: var(--red); opacity: 1; }
.wf2-edge.wf2-active { stroke: var(--red); stroke-width: 2.2; }
.wf2-dim { opacity: 0.25; }

/* Fade transition on tab switch */
.wf2-fading .wf2-node-tag, .wf2-fading .wf2-node-label, .wf2-fading .wf2-node-sub,
.wf2-fading .wf2-node-circle-label, .wf2-fading .wf2-node-circle-tag, .wf2-fading .wf2-edge-label,
.wf2-fading .wf2-node-rect, .wf2-fading .wf2-node-circle, .wf2-fading .wf2-icon,
.wf2-fading .wf2-edge, .wf2-fading .wf2-flow-dot, .wf2-fading .wf2-badge-bg, .wf2-fading .wf2-badge-txt,
.wf2-fading .wf2-status-dot { opacity: 0; transition: opacity 0.18s; }

.wf2-legend {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: 1rem 0 0; font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink-3);
}
.wf2-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.wf2-dot { width: 14px; height: 2px; display: inline-block; }
.wf2-dot-flow { background: var(--rule-2); }
.wf2-dot-infra { background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 6px); }
.wf2-dot-cfg { background: repeating-linear-gradient(90deg, var(--rule-2) 0 3px, transparent 3px 6px); }

.wf2-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--ink); color: var(--bg); padding: 0.5rem 0.75rem;
  font-family: 'DM Mono', monospace; font-size: 0.75rem; max-width: 220px;
  opacity: 0; transition: opacity 0.15s; transform: translate(-50%, -100%);
}
.wf2-tip.show { opacity: 1; }

/* ═══════════════════════════════════════
   INTEGRATIONS
═══════════════════════════════════════ */
.integ-sub {
  font-size: 1rem; line-height: 1.72;
  color: var(--ink-2); max-width: 540px;
  margin-bottom: 2rem;
}
/* Reinforcement stat row — small credibility signal before the stack */
.integ-stats {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.11em;
  color: var(--ink-2);
  padding: 1rem 0 1.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.75rem;
}
.integ-stats-d { color: var(--ink-3); margin: 0 0.85rem; }

/* Categorized groups */
.integ-cat { margin-bottom: 2.25rem; }
.integ-cat:last-of-type { margin-bottom: 0; }
.integ-cat-lbl {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--red);
  margin-bottom: 0.9rem;
}
.integ-cat-ct {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--ink-3);
}
/* Flex-based grid — adapts cleanly to categories of any size, no empty gaps */
/* Real grid, not wrapping flex. The old `flex: 1 1 230px` let every
   row stretch its items to fill the line, so tile width depended on
   how many tools happened to be in that category — 275px in a 4-item
   row, 367px in a 3-item row, 552px in a 2-item row, and a 1104px
   full-width slab whenever a category had a single entry. Fixed
   columns keep every tile identical everywhere; a short category
   simply leaves the remaining cells empty instead of inflating.
   Borders live on the items (collapsed with -1px margins) rather
   than being faked by a 1px gap over a rule-coloured container, so
   empty cells show the section background instead of a grey block. */
.integ-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; background: transparent;
}
.integ-item {
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  margin: 0 -1px -1px 0;
  padding: 16px 18px;
  display: flex; gap: 13px; align-items: center;
  position: relative;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.integ-item:hover { background: var(--bg); border-color: var(--ink); z-index: 1; }
.ii {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 7px; overflow: hidden; display: block;
  position: relative;
}
.ii svg { display: block; width: 34px; height: 34px; }
.ii-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ii-n {
  font-size: 0.84rem; font-weight: 500;
  color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ii-c {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--ink-3);
}
/* Live-status dot — reinforces these are real, active integrations */
.ii-status {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); flex-shrink: 0;
  position: relative; margin-left: auto;
}
.ii-status::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; background: var(--live);
  opacity: 0.35;
  animation: statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.35; }
  50% { transform: scale(1.5); opacity: 0; }
}
.integ-cat-last .integ-item { grid-column: 1 / -1; } /* the open-ended "Any REST API" catch-all is deliberately a full-width closing row */
.integ-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.12em;
  color: var(--ink-3); margin-top: 0.5rem;
}

/* ═══════════════════════════════════════
   PROCESS
═══════════════════════════════════════ */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 4rem; position: relative;
}
.steps::before {
  content: ''; position: absolute;
  top: 6px; left: 0; right: 0;
  height: 1px; background: var(--rule); z-index: 0;
}
.step { padding-right: 2rem; position: relative; }
.step + .step { padding-left: 1.5rem; }
.step-dot {
  width: 13px; height: 13px; background: var(--red);
  display: block; margin-bottom: 1.5rem;
  position: relative; z-index: 1;
}
.step-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.18em;
  color: var(--ink-3); display: block; margin-bottom: 0.55rem;
}
.step-t { font-size: 0.93rem; font-weight: 600; color: var(--ink); margin-bottom: 0.55rem; }
.step-d { font-size: 0.83rem; line-height: 1.72; color: var(--ink-2); }

/* ═══════════════════════════════════════
   IMPACT
═══════════════════════════════════════ */
.imp-exhibit {
  position: relative; margin: 4rem auto 0;
  max-width: 600px;
}
.imp-exhibit-back { display: none; }
.imp-grid {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--void);
  border-top: 2px solid var(--red);
  display: grid; grid-template-columns: repeat(2, 1fr);
  box-shadow: 0 1px 2px rgba(20,16,10,0.06), 0 18px 44px rgba(20,16,10,0.14);
}
.imp-item { padding: 1.75rem; position: relative; }
.imp-item:nth-of-type(1) { border-right: 1px solid var(--void-line); border-bottom: 1px solid var(--void-line); }
.imp-item:nth-of-type(2) { border-bottom: 1px solid var(--void-line); }
.imp-item:nth-of-type(3) { border-right: 1px solid var(--void-line); }
.imp-n {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--void-ink); line-height: 1;
  display: block; margin-bottom: 0.65rem;
  letter-spacing: -0.01em;
}
.imp-l {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.09em;
  color: var(--void-ink-3); line-height: 1.8;
}
.imp-fine { margin-top: 2rem; max-width: 62ch; }
.imp-quote-wrap {
  border-top: 1px solid var(--rule);
  padding-top: 3rem; max-width: 680px;
  margin: 3rem auto 0; text-align: center;
}
.imp-q {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.42rem;
  color: var(--ink-2); line-height: 1.6;
  margin-bottom: 0.9rem;
}
/* <p> not <footer> — no CSS bleed */
.imp-attr { font-size: 0.8rem; color: var(--ink-3); }

/* ═══════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════ */
.test-feature {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 3.5rem 0;
  margin-bottom: 3rem;
  text-align: center;
  position: relative;
}
.test-feature::before {
  content: '“'; position: absolute; top: 1.25rem; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 5rem; line-height: 1; color: var(--red); opacity: 0.14;
  pointer-events: none;
}
.test-big {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  color: var(--ink); line-height: 1.42;
  letter-spacing: -0.01em;
  max-width: 820px; margin: 0 auto 1rem;
  position: relative;
}
.test-big-attr {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3);
}
.test-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule);
}
.test-card {
  background: var(--bg-card); padding: 28px 24px; position: relative;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.test-card:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(20,16,10,0.05), 0 18px 38px rgba(20,16,10,0.09); z-index: 2; }
.test-q {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.05rem;
  color: var(--ink-2); line-height: 1.7;
  margin-bottom: 1rem;
}
.test-attr {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3);
}

/* ═══════════════════════════════════════
   VOID SECTION — reusable full-bleed dark panel
   utility. Crimson stays the only accent hue on
   dark: labels/links use --red-lt for legibility,
   never a second color.
═══════════════════════════════════════ */
.sec-void { background: var(--void); }
.sec-void .lbl { color: var(--red-lt); }
.sec-void .sec-h { color: var(--void-ink); }
.sec-void .wf-sub, .sec-void .wf-note { color: var(--void-ink-2); }
.sec-void .wf2-legend { color: var(--void-ink-3); }
.sec-void .wf2-dot-flow { background: var(--void-ink-3); }
.sec-void .wf2-dot-infra { background: repeating-linear-gradient(90deg, var(--void-ink-3) 0 3px, transparent 3px 6px); }
.sec-void .wf2-dot-cfg  { background: repeating-linear-gradient(90deg, var(--void-ink-3) 0 3px, transparent 3px 6px); }
.sec-void .faq-left p { color: var(--void-ink-2); }
.sec-void .faq-item { border-bottom: 1px solid var(--void-line); }
.sec-void .faq-item:first-child { border-top: 1px solid var(--void-line); }
.sec-void .faq-qt { color: var(--void-ink); }
.sec-void .faq-q:hover .faq-qt { color: var(--red-lt); }
.sec-void .faq-ic { color: var(--red-lt); }
.sec-void .faq-body { color: var(--void-ink-2); }

/* ═══════════════════════════════════════
   INDUSTRIES — void cards, tiered by GTM weight.
   Core Trades + Recruiting are the two confirmed
   flagship verticals (full detail). Real Estate
   and Insurance are live but secondary. Dental
   and MedSpa are expansion niches — a compact row,
   not full cards.
═══════════════════════════════════════ */
.ind-flag-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-top: 3.5rem;
}
.ind-sec-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-top: 1.25rem;
}
.ind-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--void-card); border: 1px solid var(--void-line);
  transition: border-color 0.35s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.ind-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(192,40,46,0.15), 0 8px 30px rgba(192,40,46,0.12); }
.ind-card.flag { padding: 2.25rem 2rem 2rem; position: relative; overflow: hidden; }
.ind-card.sec2 { padding: 1.5rem 1.5rem 1.75rem; }
.ind-card-body { position: relative; }

.ind-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.75rem; }
.ind-chip {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--gold-line); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ind-chip:hover { background: rgba(192,40,46,0.30); transform: scale(1.08); }
.ind-icon { fill: none; stroke: currentColor; stroke-width: 1.7; width: 20px; height: 20px; }
.ind-card.flag .ind-chip .ind-icon { width: 22px; height: 22px; color: var(--red-lt); }
.ind-card.sec2 .ind-icon { color: var(--red-lt); opacity: 0.85; margin-bottom: 1rem; display: block; }
.ind-icon.xs { width: 15px; height: 15px; color: var(--red-lt); opacity: 0.8; flex-shrink: 0; }

.ind-tag {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em;
  padding: 0.35rem 0.7rem; white-space: nowrap; flex-shrink: 0;
}
.ind-tag.hot { color: var(--red-lt); border: 1px solid var(--red-dk); }
.ind-tag.quiet { color: var(--void-ink-3); display: inline-block; margin-top: 1rem; }
.ind-tag.outline { color: var(--void-ink-2); border: 1px solid var(--void-line); }

.ind-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
  color: var(--red-lt); display: block; margin-bottom: 0.75rem;
}
.ind-num.sm { font-size: 0.75rem; margin-bottom: 0.6rem; }

.ind-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 1.28rem; color: var(--void-ink); line-height: 1.25;
  margin-bottom: 0.9rem;
}
.ind-name.sm { font-size: 1.02rem; margin-bottom: 0.5rem; }

.ind-d { font-size: 0.85rem; line-height: 1.65; color: var(--void-ink-2); }
.ind-d.sm { font-size: 0.8rem; }

/* Expansion niches — compact row, deliberately quieter than the tiers above */
.ind-niches {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.75rem;
  margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--void-line);
}
.ind-niches-lbl {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--void-ink-3); margin-right: 0.25rem;
}
.ind-niche {
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--void-ink-2);
  font-size: 0.84rem; padding: 0.4rem 0; transition: color 0.15s;
}
.ind-niche:hover { color: var(--void-ink); }
.ind-niche-num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--void-ink-3); }

/* Closing catch-all — outlined, not filled: an invitation, not a ranked vertical */
.ind-custom {
  display: flex; align-items: center; gap: 1.5rem;
  margin-top: 1.5rem; padding: 1.5rem 1.75rem;
  border: 1px dashed var(--void-line);
}
.ind-custom .ind-icon { width: 22px; height: 22px; color: var(--void-ink-3); flex-shrink: 0; }
.ind-custom-t { flex: 1; }
.ind-custom .ind-d.sm { color: var(--void-ink-3); }


/* ═══════════════════════════════════════
   WORK — Cormorant titles
═══════════════════════════════════════ */
#work { border-top: 1px solid var(--rule); }
.wk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule); margin-top: 4rem;
}
.wc {
  background: var(--bg-card); padding: 30px 28px;
  min-height: 400px; display: flex; position: relative;
  flex-direction: column; transition: background 0.15s, transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.wc:hover { background: var(--bg); transform: translateY(-4px); box-shadow: 0 2px 6px rgba(20,16,10,0.05), 0 20px 42px rgba(20,16,10,0.10); z-index: 2; }
.wc-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  color: var(--red); display: block; margin-bottom: 1rem;
}
.wc-meta { display: flex; flex-wrap: wrap; margin-bottom: 1.25rem; }
.wc-m {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3);
}
.wc-m + .wc-m::before { content: '·'; margin: 0 0.7em; letter-spacing: 0; color: var(--ink-3); }
.wc-t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.22rem; font-weight: 600;
  color: var(--ink); margin-bottom: 0.85rem;
  line-height: 1.28; letter-spacing: -0.01em;
}
.wc-b { font-size: 0.875rem; line-height: 1.75; color: var(--ink-2); flex: 1; }
.wc-foot {
  margin-top: 1.4rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.wc-r {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; color: var(--red);
  letter-spacing: 0.06em; display: block; margin-bottom: 0.3rem;
}
.wc-s {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.faq-layout {
  display: grid; grid-template-columns: 1fr 1.8fr;
  gap: 5rem; align-items: start;
}
.faq-left { position: sticky; top: 88px; }
.faq-left p { font-size: 1rem; line-height: 1.75; color: var(--ink-2); margin-top: 1rem; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; padding: 1.4rem 0;
  background: none; border: none; text-align: left; gap: 2rem;
}
.faq-q:hover .faq-qt { color: var(--red); }
.faq-qt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.97rem; font-weight: 500;
  color: var(--ink); line-height: 1.4;
  transition: color 0.2s;
}
.faq-ic {
  font-family: 'DM Mono', monospace; font-size: 1.1rem;
  color: var(--red); flex-shrink: 0;
  transition: transform 0.3s ease; line-height: 1;
}
.faq-item.open .faq-ic { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
/* padding-bottom has to collapse in step with the row — grid track
   sizing can't shrink a track below a child's own padding, so left
   at 1.5rem it silently floored every "closed" answer at ~24px
   instead of 0, leaving every collapsed answer still visible. */
.faq-a > .faq-body { overflow: hidden; min-height: 0; padding-bottom: 0; transition: padding-bottom 0.45s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > .faq-body { padding-bottom: 1.5rem; }
.faq-body {
  font-size: 0.875rem; line-height: 1.82;
  color: var(--ink-2);
  max-width: 620px;
}

/* .faq-list — single-column FAQ wrapper used on industry pages (no sticky sidebar) */
.faq-list { max-width: 720px; margin-top: 1rem; }

/* DIY vs. hiring vs. DialCraft comparison table — void-panel only
   (lives inside the FAQ's .sec-void), so it uses the --void-* tokens
   directly rather than needing a .sec-void .cmp-* override pair, the
   same reasoning as .guar-* below not needing one either. */
.cmp-wrap { margin-top: 5rem; padding-top: 3.5rem; border-top: 1px solid var(--void-line); }
.cmp-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--md); font-weight: 500;
  color: var(--void-ink); margin-bottom: 2rem; text-wrap: balance;
}
.cmp-h em.r { color: var(--red-lt); }
.cmp-scroll-hint {
  display: none;
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.06em; color: var(--void-ink-3);
  margin: -0.5rem 0 0.75rem; text-align: right;
}
@media (max-width: 700px) {
  .cmp-scroll-hint { display: block; }
}
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp-table th, .cmp-table td {
  text-align: left; padding: 0.95rem 1.1rem;
  font-size: 0.85rem; line-height: 1.5;
  border-bottom: 1px solid var(--void-line);
  vertical-align: top;
}
.cmp-table thead th {
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--void-ink-3); font-weight: 600; border-bottom-width: 1px;
}
.cmp-table tbody th {
  font-weight: 600; color: var(--void-ink); white-space: nowrap;
}
.cmp-table tbody td { color: var(--void-ink-2); }
.cmp-table td.cmp-hl, .cmp-table th.cmp-hl {
  color: var(--void-ink); background: rgba(192,40,46,0.08);
  font-weight: 500; border-left: 2px solid var(--red);
}
@media (max-width: 640px) {
  .cmp-wrap { margin-top: 3.5rem; padding-top: 2.5rem; }
}

/* ═══════════════════════════════════════
   ROI CALCULATOR
═══════════════════════════════════════ */
/* Elevated to the same layered offset-card family as .imp-exhibit —
   same inset/rotation/shadow formula, unscaled, since the offset is
   a fixed visual amount, not proportional to container width. */
.roi-exhibit { position: relative; margin-top: 3.5rem; }
.roi-exhibit-back { display: none; }
.roi-box {
  position: relative; z-index: 1; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule); border-top: 2px solid var(--red);
  box-shadow: 0 1px 2px rgba(20,16,10,0.06), 0 18px 44px rgba(20,16,10,0.12);
}
.roi-inputs {
  padding: 3.25rem; background: var(--bg-card); min-width: 0;
  display: flex; flex-direction: column; gap: 2.5rem; justify-content: center;
}
.roi-field label {
  display: block; font-size: 0.8rem; color: var(--ink-2);
  margin-bottom: 0.9rem; font-family: 'Space Grotesk', sans-serif;
}
.roi-field input[type="range"] {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 28px; /* generous hit-area for mouse/trackpad/touch */
  background: transparent; outline: none;
  margin-bottom: 0.7rem; cursor: pointer;
  touch-action: none; /* stop the browser treating the drag as a page-scroll gesture */
  -webkit-tap-highlight-color: transparent;
}
.roi-field input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; background: var(--rule-2); border-radius: 1.5px;
}
.roi-field input[type="range"]::-moz-range-track {
  height: 3px; background: var(--rule-2); border-radius: 1.5px;
}
.roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); cursor: pointer; border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--red);
  margin-top: -10px; /* centers the 22px thumb on the 3px track */
}
.roi-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--bg-card);
  background: var(--red); cursor: pointer; box-shadow: 0 0 0 1px var(--red);
}
.roi-val { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--ink); }

/* Output — staged as a "build record" readout: void panel, engineered figures */
.roi-output {
  padding: 3.25rem; background: var(--void); min-width: 0;
  display: flex; flex-direction: column; gap: 1.5rem; justify-content: center;
}
.roi-output-lbl {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--red-lt); margin-bottom: 0.4rem; display: block;
}
.roi-out-item {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; row-gap: 0.35rem; column-gap: 1rem;
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--void-line);
}
.roi-out-item:last-child { border-bottom: none; padding-bottom: 0; }
.roi-out-l { font-size: 0.85rem; color: var(--void-ink-2); }
.roi-out-n { font-family: 'JetBrains Mono', monospace; font-size: 1.65rem; color: var(--void-ink); font-weight: 500; white-space: nowrap; }
.roi-out-s { font-size: 0.75rem; color: var(--void-ink-3); font-weight: 400; margin-left: 2px; }
.roi-out-item.hi .roi-out-n { color: var(--red-lt); font-size: 2.05rem; }
.roi-out-item.hi .roi-out-l { color: var(--void-ink); font-weight: 600; }
.roi-disclaimer {
  font-family: 'DM Mono', monospace; font-size: 0.75rem;
  color: var(--ink-3); margin-top: 1.25rem; max-width: 560px;
}
.roi-tier-note {
  font-size: 0.85rem; color: var(--ink-2); margin-top: 1.5rem;
  max-width: 620px; line-height: 1.6;
}
.roi-tier-note strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════════════
   PRICING — two productized systems + custom
═══════════════════════════════════════ */
.pr-sub {
  font-size: 0.93rem; color: var(--ink-2);
  max-width: 555px; line-height: 1.75; margin-bottom: 2rem;
}
.cur-toggle {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem; margin-top: 1.75rem; margin-bottom: 3rem;
}
.cur-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 14px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink-3);
  cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cur-btn:hover { border-color: var(--ink-2); color: var(--ink); }
.cur-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cur-note { font-size: 0.78rem; color: var(--ink-3); font-style: italic; }
@media (max-width: 640px) { .cur-note { width: 100%; order: 10; margin-top: 0.3rem; } }
/* Row-for-row alignment across all three tiers.
   Previously every card set its own vertical rhythm, so nothing lined
   up: the RECOMMENDED badge sat in normal flow and pushed the featured
   card's whole content down ~27px, Enterprise had no setup-fee line so
   its rule floated 30px high, and `transform: scale(1.035)` shifted the
   middle card's text off every sibling's baseline (while also rendering
   that text at a fractional scale — the reason it looked softer than
   the cards either side of it).

   Fix: the badge is taken out of flow, the scale is replaced with an
   elevation-only treatment, and each card becomes a subgrid sharing the
   parent's nine rows — so tier, name, price, volume, setup, rule,
   features, fit-line and button each align across all three, whatever
   the copy length. Browsers without subgrid fall back to the flex rule
   below, which still pins every button to the card foot. */
.pr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  align-items: stretch;
  margin-top: 1.5rem;
}
.pc {
  background: var(--bg-card); padding: 32px;
  border: 1px solid var(--rule);
  position: relative;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pc .pc-btn { margin-top: auto; }

@supports (grid-template-rows: subgrid) {
  .pr-grid { grid-template-rows: repeat(9, auto); }
  .pc {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 9;
    row-gap: 0; /* don't inherit the parent's 1px hairline gap between card rows */
  }
  .pc .pc-btn { margin-top: 0; align-self: end; }
}

.pc.feat {
  border-color: var(--ink);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(20,16,10,0.05), 0 28px 56px rgba(20,16,10,0.12);
}
/* Crimson accent bar — signals "this is the recommended tier" */
.pc.feat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--red);
}
.pc:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 2px 6px rgba(20,16,10,0.05), 0 18px 38px rgba(20,16,10,0.09); }
.pc.feat:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(20,16,10,0.06), 0 34px 64px rgba(20,16,10,0.15); }

/* Floating tab, centred on the card's top edge — out of the document
   flow so it can't displace the pricing rows underneath it. */
.pop {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--bg); background: var(--red);
  padding: 6px 14px; border-radius: 2px;
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; z-index: 2; cursor: help;
  box-shadow: 0 4px 14px rgba(192,40,46,0.28);
}
.pop-tip { color: var(--bg); }
.pop-tip {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 0.5rem;
  width: max-content; max-width: 220px;
  background: var(--ink); color: var(--bg);
  font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  padding: 0.6rem 0.8rem; line-height: 1.4;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none; z-index: 5;
}
.pop:hover .pop-tip, .pop:focus .pop-tip, .pop:focus-within .pop-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.pc-name { font-size: 0.97rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.pc-tier {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--ink-3); margin-bottom: 1.35rem; display: block;
}
.pc-pr { display: flex; align-items: baseline; gap: 0.2rem; margin-bottom: 1.35rem; }
.pc-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.3rem; font-weight: 600;
  line-height: 1; color: var(--ink); letter-spacing: -0.01em;
}
.pc-amt.custom { font-size: 2.3rem; letter-spacing: 0.01em; } /* was 1.7rem — an odd-one-out in a row of three prices; matched to the numeric tiers so the price line reads as one rhythm */
.pc-per { font-size: 0.83rem; color: var(--ink-3); }
.pc-hr { border: none; border-top: 1px solid var(--rule); margin-bottom: 1.35rem; }
.pc-feats { list-style: none; margin-bottom: 1.4rem; }
.pc-feats li {
  font-size: 0.875rem; color: var(--ink-2);
  line-height: 2; padding-left: 0.85rem; position: relative;
}
.pc-feats li::before { content: '·'; position: absolute; left: 0; }
.pc-feats li.pc-inherit { font-style: italic; color: var(--ink-3); font-size: 0.8rem; }
.pc-feats li.pc-inherit::before { content: '→'; font-style: normal; }
.pc-best { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 1.4rem; line-height: 1.5; }
.pc-btn {
  display: block; text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
  padding: 11px 20px; text-decoration: none;
  transition: background 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease);
}
.pc-btn.dk { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.pc-btn.dk:hover { background: var(--red); border-color: var(--red); }
.pc-btn.lt { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); }
.pc-btn.lt:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pr-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--ink-3); margin-top: 1.9rem;
}
.pr-addon {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); margin-top: 3rem; border: 1px solid var(--rule);
}
.pr-addon-item { background: var(--bg); padding: 2rem 2.25rem; }
.pr-addon-tag {
  display: block; font-family: 'DM Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.09em; color: var(--ink-3); margin-bottom: 0.9rem;
}
.pr-addon-t { font-size: 1.02rem; color: var(--ink); margin-bottom: 0.65rem; }
.pr-addon-t strong { font-weight: 600; }
.pr-addon-d { font-size: 0.85rem; color: var(--ink-2); line-height: 1.65; margin-bottom: 1rem; }

/* ═══════════════════════════════════════
   SPECIALIZED SYSTEMS
═══════════════════════════════════════ */
.spec-product { margin-top: 3.5rem; }
.spec-product:first-of-type { margin-top: 3rem; }
.spec-product-h { margin-bottom: 1.75rem; max-width: 640px; }
.spec-h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 1.7rem; color: var(--ink); margin-bottom: 0.5rem;
}
.spec-p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.65; }
.pr-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pc-mins {
  font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--red);
  margin-top: 0.4rem;
}
.pc-setup {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink-3);
  margin-top: 0.25rem;
}
.pr-prod-tag {
  display: block; font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--red); margin-bottom: 0.6rem;
}
/* Custom Automation closer — same dashed-border "outside the standard
   list, still available" language as .svc-custom in Services, adapted
   with a price slot + CTA since this lives in the pricing section. */
.pr-custom {
  display: flex; align-items: center; gap: 2rem;
  background: var(--bg); border: 1px dashed var(--rule-2);
  padding: 2.25rem 2.5rem; margin-top: 3.5rem;
  transition: background 0.15s;
}
.pr-custom:hover { background: var(--bg-card); }
.pr-custom-n {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
  font-size: 2.4rem; line-height: 1; color: var(--ink-3); flex-shrink: 0;
}
.pr-custom-body { flex: 1; min-width: 0; }
.pr-custom-t {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 1.35rem; color: var(--ink); margin: 0.15rem 0 0.6rem;
}
.pr-custom-d { font-size: 0.86rem; line-height: 1.7; color: var(--ink-2); max-width: 560px; }
.pr-custom-cta { flex-shrink: 0; text-align: center; min-width: 190px; }
.pr-custom-cta .pc-amt.custom { display: block; margin-bottom: 0.75rem; }

/* ═══════════════════════════════════════
   VERTICAL-PAGE TIER SUMMARY — condensed 3-tier
   pricing block used on industry pages. Full tier
   detail lives in the homepage pricing cards (.pc);
   this is a lighter-weight pointer to it.
═══════════════════════════════════════ */
.vt-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-top: 2rem;
}
.vt-tier {
  background: var(--bg-card); padding: 1.75rem 1.5rem;
  border: 1px solid var(--rule); text-align: left;
  position: relative; transition: border-color 0.2s, transform 0.2s;
}
.vt-tier:hover { border-color: var(--ink); transform: translateY(-2px); }
.vt-tier.feat { border-color: var(--ink); }
.vt-tier.feat:hover { transform: translateY(-2px); }
.vt-tier.feat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--red);
}
/* Same bug as the homepage pricing cards, same fix. The "MOST
   POPULAR" badge sat in normal flow and pushed the featured tier's
   whole content down by its own height, and the Enterprise tier had
   no setup-fee line, so its description floated higher than the
   other two. Enterprise now carries a matching setup line (see the
   industry-page markup), and the badge moves out of flow into a
   floating tab — the identical shape of fix already applied to
   .pc / .pop on the homepage, just for this simpler 4-row card. */
.vt-tiers { grid-template-rows: repeat(4, auto); }
@supports (grid-template-rows: subgrid) {
  .vt-tier { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
}
.vt-tier-pop {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--bg); background: var(--red);
  padding: 6px 14px; border-radius: 2px;
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; z-index: 2; cursor: help;
  box-shadow: 0 4px 14px rgba(192,40,46,0.28);
  margin-bottom: 0;
}
.vt-tier-pop .pop-tip { bottom: 100%; top: auto; margin-bottom: 0.5rem; margin-top: 0; left: 50%; transform: translateY(4px) translateX(-50%); }
.vt-tier-pop:hover .pop-tip, .vt-tier-pop:focus .pop-tip, .vt-tier-pop:focus-within .pop-tip { transform: translateY(0) translateX(-50%); }
@media (max-width: 640px) {
  .vt-tier-pop { padding: 6px 14px; margin: 0; }
}
.vt-tier-name { font-weight: 700; font-size: 1.05rem; display: block; }
.vt-tier-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.9rem; font-weight: 600; margin: 0.5rem 0 0.15rem;
}
.vt-tier-price span { font-size: 0.85rem; font-weight: 400; color: var(--ink-3); }
.vt-tier-setup {
  font-family: 'DM Mono', monospace; font-size: 0.75rem;
  color: var(--ink-3); margin-bottom: 0.9rem;
}
.vt-tier-d { font-size: 0.85rem; line-height: 1.6; color: var(--ink-2); }
.vt-tier-note {
  font-size: 0.85rem; color: var(--ink-2); margin-top: 1.5rem; line-height: 1.7;
}
.vt-tier-note a { color: var(--red); text-decoration: none; }
.vt-tier-note a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .vt-tiers { grid-template-columns: 1fr; }
  .vt-tier.feat { order: -1; }
}

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
.ab-layout {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 6rem; align-items: start;
}
.ab-text p {
  font-size: 0.93rem; line-height: 1.85;
  color: var(--ink-2); margin-bottom: 1.3rem;
}
.ab-text p:last-child { margin-bottom: 0; }
.fo-block { position: sticky; top: 88px; }
.fo-img {
  width: 100%; aspect-ratio: 3 / 4;
  background: var(--bg); border: 1px solid var(--rule);
  display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.1rem;
}
/* Founder mark — a deliberate dark panel (matching the "spec sheet"
   dark sections used elsewhere), not an empty box standing in for
   a missing photo. Faint diagonal hairline + corner ticks read as
   a designed mark, not a placeholder waiting to be replaced. */
.fo-img-mark {
  background: var(--void);
  border-color: var(--void);
  position: relative;
  overflow: hidden;
}
.fo-img-mark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 47%, var(--gold-line) 47%, var(--gold-line) 53%, transparent 53%);
}
.fo-img-mark::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--void-line);
}
.fo-img span {
  font-family: 'DM Mono', monospace;
  font-size: 1.3rem; color: var(--ink-3); letter-spacing: 0.1em;
}
.fo-name { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.fo-role { font-size: 0.84rem; color: var(--ink-3); margin-bottom: 1rem; }
.chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.chip {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.12em;
  color: var(--ink-3); border: 1px solid var(--rule);
  padding: 4px 9px; border-radius: 2px;
}

/* ═══════════════════════════════════════
   GUARANTEE — ghost numeral + coverage breakdown
═══════════════════════════════════════ */
#guarantee {
  background: var(--ink); text-align: center;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 4vw, 3rem);
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(245,240,230,.08);
}
/* Giant faint serif numeral — editorial "stamp" texture behind the headline */
.guar-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 600;
  font-size: clamp(14rem, 34vw, 28rem);
  color: rgba(245,240,230,.028);
  line-height: 1;
  pointer-events: none; user-select: none;
  z-index: 0; white-space: nowrap;
}
.guar-wrap { position: relative; z-index: 1; }
.guar-rule {
  display: block; width: 32px; height: 1.5px;
  background: var(--red-lt);
  margin: 0 auto 1.5rem;
}
.guar-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.18em;
  color: rgba(245,240,230,.5);
  display: block; margin-bottom: 1.75rem;
}
.guar-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--lg); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--void-ink); margin-bottom: 1.5rem; text-wrap: balance;
}
.guar-h em.r { color: var(--red-lt); }
.guar-p {
  font-size: 0.97rem; line-height: 1.78; font-weight: 400;
  color: rgba(245,240,230,.78);
  max-width: 560px; margin: 0 auto;
}
/* Structured coverage breakdown — turns flat text into a "warranty card" */
.guar-cover {
  display: flex; justify-content: center;
  max-width: 580px; margin: 2.75rem auto 2.25rem;
  border-top: 1px solid rgba(245,240,230,.14);
  border-bottom: 1px solid rgba(245,240,230,.14);
}
.guar-cover-item {
  flex: 1; padding: 1.4rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.guar-cover-item + .guar-cover-item { border-left: 1px solid rgba(245,240,230,.14); }
.guar-cover-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--red-lt);
}
.guar-cover-t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem; font-weight: 500; line-height: 1.3;
  color: rgba(245,240,230,.88);
}
.guar-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: rgba(245,240,230,.48);
}

/* ═══════════════════════════════════════
   CTA
═══════════════════════════════════════ */
#cta {
  text-align: center;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 3rem);
}
.cta-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--lg); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.012em;
  margin-bottom: 1.5rem; text-wrap: balance;
}
.cta-p {
  font-size: 0.97rem; line-height: 1.75;
  color: var(--ink-2); max-width: 490px;
  margin: 0 auto 2.75rem;
}
/* Primary CTA — large, ALL CAPS, high contrast */
.cta-actions { display: flex; align-items: center; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.cta-big-btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  padding: 20px 52px; text-decoration: none;
  transition: background 0.22s, transform 0.15s;
  white-space: nowrap;
}
.cta-big-btn:hover { background: var(--red); }
.cta-big-btn:hover .arrow { transform: translateX(5px); }
.cta-big-btn:active { transform: scale(0.98); }
/* Secondary ghost text link — underline style */
.cta-ghost {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cta-ghost:hover { color: var(--red); border-color: var(--red); }
/* "What happens next" 3-step sequence */
.cta-steps {
  display: flex; align-items: center;
  justify-content: center; gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.75rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--rule);
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.cta-step { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.cta-step-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--red);
}
.cta-step-t {
  font-size: 0.78rem; line-height: 1.5;
  color: var(--ink-2); text-align: center;
}
.cta-step-div {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; color: var(--ink-3);
  flex-shrink: 0;
}
.cta-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--ink-3); margin-top: 1.5rem;
}
.cta-pp-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--ink-3); margin-top: 0.75rem;
}
.cta-pp-link {
  color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 3px; transition: color 0.2s;
}
.cta-pp-link:hover { color: var(--ink); }

/* ═══════════════════════════════════════
   PRIVACY POLICY MODAL
═══════════════════════════════════════ */
.pp-overlay {
  position: fixed; inset: 0;
  background: rgba(12,12,12,.72);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.pp-overlay.open { opacity: 1; pointer-events: all; }
.pp-modal {
  background: var(--bg);
  max-width: 640px; width: 100%;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  transform: translateY(16px);
  transition: transform 0.25s ease;
  display: flex; flex-direction: column;
}
.pp-overlay.open .pp-modal { transform: translateY(0); }
.pp-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: var(--bg); border-radius: 50%; z-index: 2;
  border: none; cursor: pointer;
  color: var(--ink-3); font-size: 1rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.pp-close:hover { color: var(--ink); }
.pp-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--ink-3); margin-bottom: 2rem;
}
.pp-h3 {
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink); margin: 1.5rem 0 0.5rem;
}
.pp-h3:first-of-type { margin-top: 0; }
.pp-p {
  font-size: 0.875rem; line-height: 1.78;
  color: var(--ink-2);
}
/* Same reason as .dp-scroll above: .pp-content is the thing that
   scrolls, not .pp-modal, so .pp-close (absolute against .pp-modal)
   stays pinned through a full Terms/Privacy read instead of
   scrolling off with paragraph 9. */
.pp-content {
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3rem);
  flex: 1 1 auto;
  min-height: 0;
}
.pp-content::-webkit-scrollbar { width: 6px; }
.pp-content::-webkit-scrollbar-thumb { background: var(--rule); }

/* ═══════════════════════════════════════
   COMMAND PALETTE — ⌘K quick nav
═══════════════════════════════════════ */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem; color: var(--ink-2);
  border: 1px solid var(--rule); background: transparent;
  padding: 7px 10px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.cmdk-trigger:hover { border-color: var(--ink); color: var(--ink); }
.cmdk-trigger kbd {
  font-family: 'DM Mono', monospace; font-size: 0.75rem;
  background: var(--bg-alt); border: 1px solid var(--rule);
  padding: 1px 5px; border-radius: 3px; color: var(--ink-3);
}
@media (max-width: 1024px) { .cmdk-trigger { display: none; } }

.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(12,12,12,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1.5rem 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.cmdk-overlay.open { opacity: 1; pointer-events: all; }
.cmdk-box {
  background: var(--bg); width: 100%; max-width: 560px;
  border: 1px solid var(--rule);
  max-height: 70vh; display: flex; flex-direction: column;
  transform: translateY(-10px); transition: transform 0.2s ease;
  overflow: hidden;
}
.cmdk-overlay.open .cmdk-box { transform: translateY(0); }
.cmdk-input-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.cmdk-search-ic { color: var(--ink-3); flex-shrink: 0; }
.cmdk-input {
  flex: 1; border: none; background: none; outline: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 1rem;
  color: var(--ink);
}
.cmdk-input::placeholder { color: var(--ink-3); }
.cmdk-esc {
  font-family: 'DM Mono', monospace; font-size: 0.75rem;
  color: var(--ink-3); border: 1px solid var(--rule);
  padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}
.cmdk-results { overflow-y: auto; padding: 0.5rem; }
.cmdk-group-lbl {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--ink-3); padding: 0.65rem 0.75rem 0.35rem;
  display: block;
}
.cmdk-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.75rem; cursor: pointer; text-decoration: none;
  color: var(--ink); border-radius: 2px;
}
.cmdk-item-t { font-size: 0.92rem; font-weight: 500; }
.cmdk-item-d { font-size: 0.78rem; color: var(--ink-3); flex-shrink: 0; text-align: right; }
.cmdk-item.active, .cmdk-item:hover { background: var(--bg-alt); }
.cmdk-item.active .cmdk-item-t, .cmdk-item:hover .cmdk-item-t { color: var(--red); }
.cmdk-empty { padding: 2rem 1.25rem; text-align: center; color: var(--ink-3); font-size: 0.88rem; }
.cmdk-results::-webkit-scrollbar { width: 6px; }
.cmdk-results::-webkit-scrollbar-thumb { background: var(--rule); }

/* ═══════════════════════════════════════
   SITE FOOTER — scoped class, not bare footer
═══════════════════════════════════════ */
.site-footer { background: var(--ink); padding: clamp(3rem, 6vw, 5rem) 0 0; }
.ft-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1.1fr;
  gap: 4rem; padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.ft-logo-img { display: block; height: 24px; width: auto; margin-bottom: 0.6rem; }
.ft-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: rgba(245,240,230,.48);
  display: block; margin-bottom: 1rem;
}
.ft-line { font-size: 0.875rem; color: rgba(245,240,230,.72); line-height: 1.7; font-weight: 400; }
.ft-col-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: rgba(245,240,230,.48);
  display: block; margin-bottom: 1.1rem;
}
.ft-nav { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.ft-nav a { font-size: 0.875rem; color: rgba(245,240,230,.68); text-decoration: none; transition: color 0.2s; font-weight: 400; }
.ft-nav a:hover { color: rgba(245,240,230,1); }
.ft-contact { font-size: 0.875rem; color: rgba(245,240,230,.68); font-weight: 400; display: flex; flex-direction: column; gap: 0.55rem; }
.ft-wa { color: inherit; text-decoration: none; transition: color 0.2s; display: block; width: fit-content; }
.ft-wa:hover { color: rgba(245,240,230,1); }
.ft-social { display: flex; gap: 1rem; margin-top: 1.1rem; }
.ft-social-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.8rem; color: rgba(245,240,230,.5);
  text-decoration: none; transition: color 0.2s;
}
.ft-social-link:hover { color: rgba(245,240,230,.9); }
.ft-tz {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.12em;
  color: rgba(245,240,230,.5); margin-top: 0.75rem;
}
.ft-bottom {
  border-top: 1px solid rgba(160,152,144,.22);
  padding: 1.4rem 0;
  display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}
.ft-legal { font-size: 0.78rem; color: rgba(245,240,230,.5); font-weight: 400; }
.ft-legal a { color: rgba(245,240,230,.5); text-decoration: none; transition: color 0.2s; }
.ft-legal a:hover { color: rgba(245,240,230,.9); }
.ft-legal-r { display: flex; gap: 1.5rem; align-items: center; }

/* ═══════════════════════════════════════
   FOCUS
═══════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .prob-layout, .faq-layout, .ab-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .prob-sticky, .faq-left, .fo-block { position: static; }
  .integ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta.d { display: none; }
  .ham-btn { display: inline-flex; }

  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-graphic { justify-self: center; max-width: 280px; margin-top: 0.5rem; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }

  .ind-flag-row, .ind-sec-row { grid-template-columns: 1fr; }
  .ind-custom { flex-wrap: wrap; gap: 1rem; }
  .ind-custom .ind-tag { margin-left: auto; }
  .imp-item { padding: 1.25rem 1rem; }
  .svc-flag-row { grid-template-columns: 1fr; }
  .svc-sec-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-custom { flex-wrap: wrap; }

  .steps { grid-template-columns: 1fr; margin-top: 3rem; }
  .steps::before { display: none; }
  .step { padding: 0 0 2rem 2.25rem; border-left: 1px solid var(--rule); }
  .step + .step { padding-left: 2.25rem; }
  .step-dot { position: absolute; left: -7px; top: 0; margin-bottom: 0; }

  .imp-grid { grid-template-columns: repeat(2, 1fr); }
  .imp-item:nth-of-type(2n+1):not(:first-child)::before { display: none; }
  .imp-item:nth-of-type(n+3) { padding-top: 1.5rem; }

  .test-grid { grid-template-columns: 1fr; }
  .wk-grid  { grid-template-columns: 1fr; }
  .pr-grid  { grid-template-columns: 1fr; }
  .pr-grid { grid-template-rows: none; }
  .pc { display: flex; grid-row: auto; }
  .pc .pc-btn { margin-top: auto; align-self: auto; }
  .pc.feat { padding-top: 32px; }
  .integ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-grid  { grid-template-columns: 1fr; gap: 2.25rem; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .cursor { display: none; }
  .sticky-bar-l { display: none; }
  .cta-actions { flex-direction: column; gap: 1.5rem; }
  .cta-big-btn { padding: 18px 36px; font-size: 0.84rem; }
  .guar-cover-t { font-size: 0.75rem; }
  .guar-cover-item { padding: 1.1rem 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ry, .rx { transition: none; }
  .hero-tag, .hero-h1, .hero-p, .hero-ctas { animation: none; opacity: 1; transform: none; }
  .hnm-node { animation: none; }
  .hero-graphic { transition: none; }
  .mq-track { animation: none; }
  .cursor { display: none; }
  html.cur-ready, html.cur-ready * { cursor: auto !important; }
  .ii-status::after { animation: none; opacity: 0.35; }
  .vd-call-eq i { animation: none; transform: scaleY(0.7); }

  /* Workflow diagram "AI node breathing" pulse */
  .wf2-pulse .wf2-node-rect { animation: none; }

  /* Sticky bottom bar reveal */
  .sticky-bar { transition: none; }

  /* FAQ accordion expand/collapse + icon rotate */
  .faq-a { transition: none; }
  .faq-a > .faq-body { transition: none; }
  .faq-ic { transition: none; }

  /* Card hover lifts */
  .test-card { transition: none; }
  .ind-card { transition: none; }
  .ind-chip { transition: none; }
  .wc { transition: none; }
  .pc { transition: none; }
  .vt-tier { transition: none; }

  /* Buttons + arrow icons */
  .btn-dk, .btn-lt, .cta-big-btn { transition: none; }
  .arrow, .arrow.down, .sticky-bar-l .arrow.up { transition: none; }

  /* Workflow diagram tab, node, and tooltip interactions */
  .wf2-tab { transition: none; }
  .wf2-node-rect, .wf2-node-circle { transition: none; }
  .wf2-tip { transition: none; }

  /* Command palette + Terms/Privacy modal open */
  .cmdk-overlay, .cmdk-box { transition: none; }
  .pp-overlay, .pp-modal { transition: none; }
  .dp-overlay, .dp-panel { transition: none; }

  /* Workflow diagram scroll-hint fade */
  .wf2-scrolltip { transition: none; }
  .wf2-canvas-shell::after { transition: none; }

  /* Workflow diagram tab-switch fade — needs the same compound
     selector (not just .wf2-node-rect alone) to actually win: a
     bare .wf2-node-rect{transition:none} above loses to
     .wf2-fading .wf2-node-rect{transition:opacity .18s} on
     specificity, regardless of source order, so the fade wasn't
     really suppressed until this was added. */
  .wf2-fading .wf2-node-tag, .wf2-fading .wf2-node-label, .wf2-fading .wf2-node-sub,
  .wf2-fading .wf2-node-circle-label, .wf2-fading .wf2-node-circle-tag, .wf2-fading .wf2-edge-label,
  .wf2-fading .wf2-node-rect, .wf2-fading .wf2-node-circle, .wf2-fading .wf2-icon,
  .wf2-fading .wf2-edge, .wf2-fading .wf2-flow-dot, .wf2-fading .wf2-badge-bg, .wf2-fading .wf2-badge-txt,
  .wf2-fading .wf2-status-dot { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONAL RESPONSIVE FIXES — appended only.
   Nothing above this block has been changed or removed, so desktop
   (1024px and up) renders exactly as before. Everything below is scoped
   to max-width / min-width ranges under 1024px only.
═══════════════════════════════════════════════════════════════════════ */

/* Belt-and-braces: guarantee zero horizontal scroll on any device */
html { overflow-x: hidden; max-width: 100%; }

/* ── TABLET (769px – 1023px) ──────────────────────────────────────────
   The existing @media (max-width:1024px) rule already stacks the sticky
   two-column sections. These rules fix the pieces that are still dense
   or overlapping at tablet widths specifically. */
@media (min-width: 769px) and (max-width: 1024px) {

  /* At ~769–900px the centered .nav-links block and the right-aligned
     .nav-cta button run into each other (nav-links is centered on the
     full nav width while the CTA is pinned right — the math only works
     out above ~900px). Switch to the hamburger menu to avoid overlap. */
  .nav-links { display: none; }
  .nav-cta.d { display: none; }
  .ham-btn   { display: inline-flex; }

  /* Four text-heavy process columns are too narrow at tablet widths —
     reuse the vertical timeline treatment already built for mobile. */
  .steps         { grid-template-columns: 1fr; margin-top: 3rem; }
  .steps::before { display: none; }
  .step          { padding: 0 0 2rem 2.25rem; border-left: 1px solid var(--rule); }
  .step + .step  { padding-left: 2.25rem; }
  .step-dot      { position: absolute; left: -7px; top: 0; margin-bottom: 0; }

  /* 3-column card grids get cramped between 769–1023px — drop to a
     clean 2-up layout, with the leftover card spanning the full row
     (same pattern already used by .svc-custom in Services). */
  .wk-grid, .test-grid, .pr-grid { grid-template-columns: repeat(2, 1fr); }
  .wk-grid > .wc:last-child,
  .test-grid > .test-card:last-child,
  .pr-grid:not(.pr-grid-2) > .pc:last-child { grid-column: 1 / -1; }
  /* Subgrid alignment only holds while all three tiers share one row;
     in the 2-up + full-width-orphan layout each card owns its own rows
     again, so drop back to the flex rule (button pinned to the foot). */
  .pr-grid { grid-template-rows: none; }
  .pc { display: flex; grid-row: auto; }
  .pc .pc-btn { margin-top: auto; align-self: auto; }

  /* Hero: min-height:100vh + vertical centering was tuned for desktop,
     where the two-line-wrapped h1 fills most of the viewport. At
     769–1024px the two-column grid is still active but wraps to fewer,
     shorter lines, so centering leaves a large, unbalanced gap above
     the eyebrow label (and crowds the CTAs against the bottom edge).
     Let the hero size to its content instead — .hero-in already
     carries generous top/bottom padding of its own. */
  #hero { min-height: auto; }
}

/* From ~900px up there's enough room for the full desktop-style nav —
   restore it before hitting the existing 1024px desktop breakpoint.
   This band was already tight with 5 links (logo and nav-links sat
   ~14px apart by rough measure); adding a 6th link (Blog) pushes it
   into an actual overlap without the gap/size reduction below. */
@media (min-width: 901px) and (max-width: 1024px) {
  .nav-links { display: flex; gap: 1rem; }
  .nav-links a { font-size: 0.8rem; }
  .nav-cta.d { display: inline-flex; }
  .ham-btn   { display: none; }
}

/* ── MOBILE (up to 768px) — extra fixes beyond the existing rules ───── */
@media (max-width: 768px) {

  /* Workflow showcase: tabs stack full-width, canvas scrolls horizontally */
  /* tabs: horizontal swipe row, defined with the .wf2-tabs rules above */
  .wf2-legend { font-size: 0.75rem; gap: 1rem; }
  /* diagram is drawn on a 1560-unit canvas: render it larger on phones so node text is readable (it scrolls/drags) */
  .wf2-svg { min-width: 1240px; }

  /* ROI calculator: stack inputs above outputs on phones */
  .roi-exhibit-back { inset: 10px -6px -6px 10px; }
  .roi-box { grid-template-columns: 1fr; }
  .roi-inputs { border-bottom: 1px solid var(--rule); padding: 2.25rem; }
  .roi-output { padding: 2.25rem; }
  .roi-out-item.hi .roi-out-n { font-size: 1.85rem; }
  .roi-out-n { white-space: normal; } /* let long values (the price range) wrap instead of clipping */

  /* Pricing addon (audit / founding client): stack on phones */
  .pr-addon { grid-template-columns: 1fr; }

  /* Custom automation closer: stack vertically, full-width CTA */
  .pr-custom { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.75rem; }
  .pr-custom-cta { width: 100%; text-align: left; }
  .pr-custom-cta .pc-btn { display: block; }

  /* The "what happens next" step row wraps awkwardly as a horizontal
     flex row on narrow phones — stack it vertically instead, with the
     divider arrow rotated to point down between steps. */
  .cta-steps    { flex-direction: column; padding: 1.5rem; }
  .cta-step     { flex-direction: row; justify-content: flex-start; gap: 0.85rem; }
  .cta-step-t   { text-align: left; }
  .cta-step-div { transform: rotate(90deg); }

  /* Larger tap target already guaranteed on .ham-btn and .mob-x via min-width/min-height */
  .mob-menu { overflow-y: auto; padding: 2rem 0; }
}

/* ── SMALL PHONES (≤400px) ────────────────────────────────────────────
   A handful of buttons use white-space:nowrap for crisp desktop framing.
   On the narrowest phones, let them wrap instead of forcing overflow. */
@media (max-width: 400px) {
  .btn-dk, .btn-lt, .nav-cta, .cta-big-btn, .cta-ghost, .sticky-bar-r {
    white-space: normal;
    text-align: center;
  }
}

/* ═══════════════════════════════════════
   PRINT
   No print styles existed before — printing any page (a prospect
   printing the pricing or an industry page to share/review offline)
   rendered full dark sections, sticky nav, and modals as-is: heavy
   ink use, nav/CTA chrome that means nothing on paper, and collapsed
   FAQ answers missing entirely. This keeps only the content.
═══════════════════════════════════════ */
@media print {
  #nav, .mob-menu, .cmdk-trigger, .cmdk-overlay, #cta, .skip-link,
  .pp-overlay, .dp-overlay, .ham-btn, .cur-toggle, .art-share, .cmp-scroll-hint { display: none !important; }

  .sec-void, .sec-void * { background: #fff !important; color: #000 !important; }

  /* Expand every FAQ answer — collapsed accordion state on paper just looks like a missing answer */
  .faq-a { grid-template-rows: 1fr !important; }
  .faq-a > .faq-body { padding-bottom: 1rem !important; }

  /* The comparison table's horizontal-scroll/min-width is a screen-only
     affordance — print has no scrolling, so let the table size itself
     naturally to the page instead of being forced to its 640px screen
     minimum (which could otherwise get clipped at typical page margins). */
  .cmp-scroll { overflow: visible; }
  .cmp-table { min-width: 0; width: 100%; }

  * { box-shadow: none !important; text-shadow: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  body { background: #fff !important; }
}

/* ═══════════════════════════════════════
   VOICE DEMO CALLOUT — live "call it yourself" proof card
   Sits in #work, visually distinct from the illustrative wk-grid
   cards below it: this one is real and actionable, not a scenario.
═══════════════════════════════════════ */
.vd-call {
  background: var(--void); border: 1px solid var(--void-line);
  border-radius: 20px; padding: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2.25rem; position: relative; overflow: hidden;
}
.vd-call::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, transparent 65%);
}
.vd-call-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.vd-call-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'DM Mono', monospace; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; color: var(--live);
  border: 1px solid rgba(74,155,110,0.35); border-radius: 3px;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
}
.vd-call-badge .ii-status { margin-left: 0; }
.vd-call-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; flex-shrink: 0; }
.vd-call-eq i {
  display: block; width: 3px; border-radius: 2px; background: var(--red-lt);
  animation: eqBounce 1.1s ease-in-out infinite;
}
.vd-call-eq i:nth-child(1) { height: 40%; animation-delay: -0.9s; }
.vd-call-eq i:nth-child(2) { height: 70%; animation-delay: -0.6s; }
.vd-call-eq i:nth-child(3) { height: 100%; animation-delay: -0.3s; }
.vd-call-eq i:nth-child(4) { height: 55%; animation-delay: -0.75s; }
.vd-call-eq i:nth-child(5) { height: 30%; animation-delay: -0.15s; }
@keyframes eqBounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
.vd-call-main { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem 2.5rem; }
.vd-call-body { flex: 1 1 340px; min-width: 240px; }
.vd-call-h {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.15;
  color: var(--void-ink); margin-bottom: 0.6rem;
}
.vd-call-h em.r { color: var(--red-lt); }
.vd-call-p { font-size: 0.92rem; color: var(--void-ink-2); line-height: 1.65; max-width: 460px; }
.vd-call-cta { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.vd-call-num {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 600;
  color: var(--void-ink); background: var(--red);
  border: 1px solid var(--red); border-radius: 0;
  padding: 1rem 1.85rem; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(192,40,46,0.28);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.vd-call-num:hover { background: var(--red-dk); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(192,40,46,0.38); }
.vd-call-num svg { flex-shrink: 0; }
.vd-call-note {
  font-family: 'DM Mono', monospace; font-size: 0.75rem;
  color: var(--void-ink-3); letter-spacing: 0.04em; padding-left: 0.2rem;
}
@media (max-width: 640px) {
  .vd-call-main { gap: 1.5rem; }
  .vd-call-cta { width: 100%; }
  .vd-call-num { width: 100%; justify-content: center; font-size: 0.95rem; padding: 0.9rem 1.2rem; white-space: normal; text-align: center; }
}

/* ═══════════════════════════════════════
   BLOG ARTICLE PAGES
   Previously duplicated as an inline <style> block in each of the 6
   blog post files (with tiny formatting drift between them, and one
   rule — the ol li::marker line below — present in 4 of 6 but missing
   from the other 2). Consolidated here once so every post is
   guaranteed identical and a future style change only has to happen
   in one place.
═══════════════════════════════════════ */
.art-wrap { max-width: 720px; margin: 0 auto; padding: 128px clamp(1.5rem,4vw,3rem) 80px; }
.breadcrumb { font-family:'DM Mono',monospace; font-size: 0.75rem; color:var(--ink-3); letter-spacing:0.06em; margin-bottom: 2rem; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.breadcrumb a:hover { color: var(--ink); border-color: var(--ink); }
.art-tag { font-family:'DM Mono',monospace; font-size:0.75rem; color:var(--red); letter-spacing:0.06em; text-transform:uppercase; }
.art-h1 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size: clamp(2rem,4.5vw,3rem); line-height:1.12; color:var(--ink); margin: 0.9rem 0 1.25rem; }
.art-meta { font-family:'DM Mono',monospace; font-size:0.78rem; color:var(--ink-3); border-bottom:1px solid var(--rule); padding-bottom: 2rem; margin-bottom: 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.art-body p { font-size: 1.02rem; line-height: 1.85; color: var(--ink-2); margin-bottom: 1.4rem; }
.art-body h2 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size: 1.5rem; color: var(--ink); margin: 2.75rem 0 1.1rem; }
.art-body ul, .art-body ol { margin: 0 0 1.4rem 1.3rem; color: var(--ink-2); }
.art-body li { font-size: 1.02rem; line-height: 1.8; margin-bottom: 0.5rem; }
.art-body ol li::marker { font-family: 'JetBrains Mono', monospace; color: var(--red); }
.art-body strong { color: var(--ink); font-weight: 600; }
.art-body blockquote {
  border-left: 2px solid var(--red); padding-left: 1.5rem; margin: 2rem 0;
  font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--ink);
}
.art-cta {
  margin-top: 3.5rem; padding: 2.25rem; border: 1px solid var(--rule); background: var(--bg-card);
  text-align: center;
}
.art-cta p { font-size: 0.95rem; color: var(--ink-2); margin-bottom: 1.25rem; }

/* Share row — sits inline with .art-meta on desktop (flex space-between
   above), wraps to its own line on mobile */
.art-share { display: flex; align-items: center; gap: 0.6rem; }
.art-share-lbl { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); margin-right: 0.2rem; }
.art-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--rule);
  color: var(--ink-3); background: transparent; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.art-share-btn:hover { border-color: var(--ink); color: var(--ink); }
.art-share-btn.copied { border-color: var(--live); color: var(--live); }

/* Related reading grid at the end of each post */
.art-related { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.art-related-lbl {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 1.25rem;
}
.art-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); }
.art-related-card {
  background: var(--bg-card); padding: 1.5rem; text-decoration: none; display: block;
  transition: background 0.2s, transform 0.3s var(--ease);
}
.art-related-card:hover { background: var(--bg); transform: translateY(-2px); }
.art-related-tag { font-family:'DM Mono',monospace; font-size: 0.75rem; color: var(--red); letter-spacing: 0.06em; text-transform: uppercase; }
.art-related-title { display: block; font-family:'Cormorant Garamond',serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-top: 0.5rem; line-height: 1.3; }
@media (max-width: 640px) {
  .art-related-grid { grid-template-columns: 1fr; }
  .art-meta { flex-direction: column; align-items: flex-start; }
  .art-share { margin-top: 0.4rem; }
  /* 28px was fine as a mouse target; touch guidelines want ~44px minimum */
  .art-share-btn { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM PASS — Sept 2026
   ───────────────────────────────────────────────────────────────────
   Appended last so it overrides earlier rules without editing them in
   place. Everything here is either (a) a fix for something that read
   as unfinished, or (b) a deliberate lift in material quality. Kept in
   one block, commented per change, so it can be reviewed or reverted
   as a unit.
═══════════════════════════════════════════════════════════════════ */

/* ── Elevation scale ──────────────────────────────────────────────
   Shadows were being written ad hoc per component, so a card, a
   modal and a dropdown all sat at slightly different, unrelated
   depths. Three tokens instead: each is a tight contact shadow plus
   a wide ambient one, which is what makes an edge read as lifted off
   the page rather than as a grey blur stuck underneath it. */
:root {
  --lift-1: 0 1px 2px rgba(20,16,10,0.04), 0 6px 16px rgba(20,16,10,0.05);
  --lift-2: 0 2px 6px rgba(20,16,10,0.05), 0 18px 38px rgba(20,16,10,0.09);
  --lift-3: 0 4px 12px rgba(20,16,10,0.07), 0 36px 72px rgba(20,16,10,0.14);
  --ring:   0 0 0 1px var(--rule);
}

/* ── Section labels ───────────────────────────────────────────────
   "01 — THE PROBLEM" was floating unanchored above each section. A
   short crimson rule in front of it ties the numbering to the
   crimson used for every other index mark on the page. */
.lbl {
  display: inline-flex; align-items: center; gap: 0.7em;
}
.lbl::before {
  content: ''; width: 22px; height: 1px;
  background: var(--red); flex-shrink: 0;
}

/* ── Focus ring ───────────────────────────────────────────────────
   A 2px crimson outline on a cream background sat at roughly 4.9:1 —
   passable, but thin. Doubling it into a ring (dark halo + crimson)
   keeps it legible on the dark "void" panels too, where a crimson
   outline alone almost disappeared. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 1px;
}
.sec-void :focus-visible,
.roi-output :focus-visible,
.site-footer :focus-visible,
.sticky-bar :focus-visible {
  outline-color: var(--red-lt);
  box-shadow: 0 0 0 5px rgba(10,9,8,0.9);
}

/* ── Card surfaces ────────────────────────────────────────────────
   Every light card used a flat 1px rule and nothing else, so the
   whole page sat on one plane. A hairline top highlight (the way
   light catches a raised edge) plus the shared lift tokens gives the
   surfaces a material, without introducing a second visual language. */
.wc, .test-card, .sc2, .svc-flag, .pr-addon-item {
  transition: border-color 0.3s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.wc:hover, .test-card:hover, .sc2:hover, .svc-flag:hover {
  box-shadow: var(--lift-2);
}

/* ── Impact exhibit ───────────────────────────────────────────────
   Was a 600px 2×2 block floating in a 1200px column — the four
   headline numbers, the most quotable content on the page, occupied
   less than half its width and read as a sidebar. Four across at
   desktop, at full column width, with the figures scaled up to match
   their new role. */
@media (min-width: 861px) {
  .imp-exhibit { max-width: none; }
  .imp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .imp-item { padding: 2.4rem 1.9rem; }
  .imp-item:nth-of-type(1),
  .imp-item:nth-of-type(2),
  .imp-item:nth-of-type(3) {
    border-right: 1px solid var(--void-line);
    border-bottom: none;
  }
  .imp-item:nth-of-type(4) { border-right: none; }
  .imp-n { font-size: clamp(2.2rem, 3.4vw, 3.1rem); margin-bottom: 0.85rem; }
  .imp-l { font-size: 0.75rem; }
}

/* ── Founder mark ─────────────────────────────────────────────────
   The previous treatment drew one thick crimson diagonal straight
   across a black rectangle, which read as a broken image rather than
   a designed mark. Replaced with the same drafting language the rest
   of the site already speaks: a fine blueprint grid, corner
   registration ticks, a soft centre vignette, and the monogram
   sitting on the plate rather than floating over a stripe. */
.fo-img-mark {
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(192,40,46,0.16) 0%, rgba(192,40,46,0) 62%),
    var(--void);
}
.fo-img-mark::before {
  background-image:
    linear-gradient(to right, var(--void-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--void-line) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center;
  opacity: 0.55;
}
.fo-img-mark::after {
  inset: 14px;
  border: 1px solid rgba(245,240,230,0.14);
  /* corner registration ticks, drawn as four short crimson rules */
  background:
    linear-gradient(var(--red), var(--red)) left top / 14px 1px no-repeat,
    linear-gradient(var(--red), var(--red)) left top / 1px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) right top / 14px 1px no-repeat,
    linear-gradient(var(--red), var(--red)) right top / 1px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--red), var(--red)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--red), var(--red)) right bottom / 1px 14px no-repeat;
}
.fo-img-mark svg { position: relative; z-index: 1; width: 62% !important; height: auto !important; }

/* ── ROI readout ──────────────────────────────────────────────────
   On narrow screens the price range broke mid-figure ("From $997–"
   on one line, "$1,497/month USD" on the next), which reads as a
   layout accident rather than a range. Stack the label above the
   figure instead of fighting for the same line, and keep the figure
   itself unbroken. */
@media (max-width: 860px) {
  .roi-out-item { flex-direction: column; align-items: flex-start; row-gap: 0.45rem; }
  .roi-out-n { white-space: nowrap; font-size: 1.5rem; }
  .roi-out-item.hi .roi-out-n { font-size: 1.8rem; }
  #roiPlanPrice { font-size: 1.28rem; }
}

/* ── Philosophy strip ─────────────────────────────────────────────
   The pull-quote carries hard <br> breaks tuned for a wide measure.
   Below ~640px those fought the natural wrap and produced stranded
   two-word lines; let the text set itself at that width. */
@media (max-width: 640px) {
  .phil-q br { display: none; }
}

/* ── Hero CTAs on small screens ───────────────────────────────────
   The two buttons wrapped onto separate lines at different widths
   (the label decided the width), so they read as two unrelated
   controls rather than a primary/secondary pair. */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-dk, .hero-ctas .btn-lt { justify-content: center; }
}

/* ── Services: second-tier cards ──────────────────────────────────
   Four cards across a 390px viewport left ~170px of measure, which
   broke headings like "Document Processing & AI Extraction" over
   four lines. One column below 480px. */
@media (max-width: 480px) {
  .svc-sec-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Scroll progress ──────────────────────────────────────────────
   A flat 2px crimson bar; giving it a soft leading edge makes it
   read as a filling indicator rather than a stuck border. */
.scroll-progress {
  background: linear-gradient(90deg, var(--red-dk) 0%, var(--red) 82%, var(--red-lt) 100%);
  box-shadow: 0 0 10px rgba(192,40,46,0.35);
}

/* ── Nav ──────────────────────────────────────────────────────────
   The stuck state changed background and border at the same speed as
   everything else, so it snapped. Slower, and the logo shrinks very
   slightly, which is what makes a sticky header feel attached to the
   scroll rather than pinned on top of it. */
nav { transition: border-color 0.4s var(--ease), background 0.4s var(--ease), backdrop-filter 0.4s var(--ease); }
.nav-logo-img { transition: height 0.4s var(--ease); }
nav.stuck .nav-logo-img { height: 21px; }

/* ── Buttons ──────────────────────────────────────────────────────
   Hover was a straight colour swap. A small lift plus the shared
   elevation token makes the primary actions feel pressable. */
.btn-dk, .btn-lt, .nav-cta, .cta-big-btn, .pc-btn {
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.btn-dk:hover, .cta-big-btn:hover, .pc-btn.dk:hover {
  transform: translateY(-2px); box-shadow: var(--lift-2);
}
.btn-lt:hover, .pc-btn.lt:hover { transform: translateY(-2px); box-shadow: var(--lift-1); }
.btn-dk:active, .btn-lt:active, .cta-big-btn:active, .pc-btn:active { transform: translateY(0); }

/* ── Chips and pills ──────────────────────────────────────────────
   Squared 2px corners on the tech pills against fully square cards
   read as an unresolved decision. Consistent small radius. */
.svc-pill, .chip, .ind-tag, .pr-prod-tag { border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn-dk, .btn-lt, .nav-cta, .cta-big-btn, .pc-btn,
  .wc, .test-card, .sc2, .svc-flag, .nav-logo-img, nav { transition: none; }
  .btn-dk:hover, .btn-lt:hover, .cta-big-btn:hover, .pc-btn:hover,
  .pc:hover, .pc.feat:hover { transform: none; }
  nav.stuck .nav-logo-img { height: 24px; }
}

/* ── Anchor landing ───────────────────────────────────────────────
   Nothing in the stylesheet reserved room for the 64px fixed nav, so
   every in-page anchor (#services, #pricing, #about … plus every
   /#pricing link from the industry and blog pages, and every Command
   Palette result) scrolled the target section's top edge to y=0 —
   flush against the underside of the nav. The generous section
   padding meant no text was actually hidden, but the section's own
   top edge and background change landed with zero clearance, which
   is why arriving at a dark .sec-void section felt abrupt.
   scroll-padding-top on the scroll container covers every path at
   once: hash on load, hash change, nav clicks and scrollIntoView. */
html { scroll-padding-top: 86px; }

/* ── Integrations at phone width ──────────────────────────────────
   Two 170px tiles side by side left no measure for the tool name —
   "WhatsApp Business", "ActiveCampaign" and "Anthropic Claude" were
   all being ellipsised. One column below 480px.
   Declared here, after the 768px two-column rule, because both
   selectors carry the same specificity and source order decides. */
@media (max-width: 480px) {
  .integ-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM PASS 2 — Sept 2026
   ───────────────────────────────────────────────────────────────────
   A second, purely additive layer on top of the first premium pass.
   Nothing here fixes a defect — everything is a deliberate material
   or motion upgrade, each scoped so it can be reviewed independently.
   Site-wide via assets/site.css, so it reaches every page that shares
   it (industry pages, blog, 404, legal) without per-page edits.
═══════════════════════════════════════════════════════════════════ */

/* ── Film grain on dark panels ────────────────────────────────────
   Every .sec-void section (About, FAQ, Guarantee, the dark half of
   Work/Integrations) and the footer were a completely flat fill —
   correct, but the kind of flat that reads as "colour swatch" rather
   than "printed surface." A fixed-size fractal-noise texture,
   compressed to a narrow band around mid-grey and applied with
   background-blend-mode (so it composites at the background-paint
   step, underneath every element — no z-index, no wrapper markup,
   nothing that can end up covering text) adds the same quiet
   material grain that makes a dark page in print — or on a site
   like Linear's — feel considered rather than flat. Applied as a
   background-image alongside the existing background-color, so it
   changes exactly nothing about layout. */
.sec-void, .site-footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.55' intercept='0.5'/%3E%3CfeFuncG type='linear' slope='0.55' intercept='0.5'/%3E%3CfeFuncB type='linear' slope='0.55' intercept='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ── Nav links: sliding underline ─────────────────────────────────
   Hover was a colour swap only. A hairline that grows in from the
   left is the same idea already used for .link-r elsewhere on the
   page, just brought to the nav for consistency. Left off the
   active link, which already carries the crimson dot beneath it —
   adding both made the current section look over-marked. */
.nav-links a::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -10px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover:not(.active)::before { transform: scaleX(1); }

/* ── Pull-quote: a mark, not just a line ──────────────────────────
   The philosophy strip was doing all its work with italics alone.
   A single oversized quotation glyph — the classic editorial
   device for a pull-quote — gives it the weight the line "the best
   automation is invisible" is meant to carry. Sized and placed to
   clear the text entirely, so it never competes with the words. */
.phil-q { position: relative; }
.phil-q::before {
  content: '\201C';
  position: absolute; top: -2.6rem; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: normal; font-size: 5rem; line-height: 1;
  color: var(--red); opacity: 0.16;
  pointer-events: none;
}

/* ── Featured pricing card: ambient light ─────────────────────────
   The "Growth" card was distinguished by a crimson top bar and a
   heavier shadow — correct, but static. A soft crimson glow bleeding
   from the top and bottom edges only (never sideways, so it can't
   wash into the Professional or Enterprise cards beside it) reads as
   the card catching its own light source — the same cue as the
   crimson glow already used on the dark industry cards' hover state,
   now applied here at rest, at a fraction of the intensity. */
.pc.feat::after {
  content: '';
  position: absolute; inset: -22px 0;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(192,40,46,0.16), transparent 72%),
    radial-gradient(60% 55% at 50% 100%, rgba(192,40,46,0.10), transparent 72%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

/* ── Hero graphic: a light source behind the system ───────────────
   The node-map SVG sat on the flat hero background with nothing
   grounding it. A soft, off-white radial glow behind it — the shape
   a desk lamp makes on a wall — gives the diagram some depth without
   adding a single new visible line to the drawing itself. */
.hero-graphic { position: relative; }
.hero-graphic::before {
  content: '';
  position: absolute; inset: -12%;
  background: radial-gradient(closest-side, rgba(192,40,46,0.07), rgba(192,40,46,0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* ── Primary buttons: a sweep of light on hover ───────────────────
   Hover on every solid CTA was a flat colour change. A single
   diagonal highlight that sweeps across on hover — the same
   "light catching an edge" cue as the card lifts elsewhere — is a
   common tell of a considered interface; absent, buttons read as
   default browser affordances no matter how well the colours are
   tuned. Off-screen at rest, so it costs nothing until hovered, and
   travels once per hover rather than looping. */
.btn-dk, .btn-lt, .nav-cta, .cta-big-btn, .pc-btn {
  position: relative; overflow: hidden;
}
.btn-dk::before, .btn-lt::before, .nav-cta::before, .cta-big-btn::before, .pc-btn::before {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s var(--ease);
  pointer-events: none;
}
.btn-dk:hover::before, .btn-lt:hover::before, .nav-cta:hover::before, .cta-big-btn:hover::before, .pc-btn:hover::before {
  left: 130%;
}

@media (prefers-reduced-motion: reduce) {
  .btn-dk::before, .btn-lt::before, .nav-cta::before, .cta-big-btn::before, .pc-btn::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM PASS 3 — Sept 2026
   ───────────────────────────────────────────────────────────────────
   Third additive layer. Same rule as the last one: nothing here is a
   fix, everything is a deliberate lift, scoped so each is reviewable
   on its own.
═══════════════════════════════════════════════════════════════════ */

/* ── Command palette: give the box a shadow ───────────────────────
   The overlay already dims and blurs the page behind it — a proper
   modal treatment. But the box floating in front of that blur had a
   flat 1px border and no shadow of its own, so it read as a panel
   pasted onto the dimmed backdrop rather than a surface floating
   above it. One shadow token fixes that relationship. */
.cmdk-box { box-shadow: var(--lift-3); }

/* ── Testimonials: the same quotation mark as the pull-quote ──────
   The philosophy strip got an oversized quotation glyph in the last
   pass; the testimonial cards carry real quotes too but had nothing
   marking them as such beyond italics. Same device, left-aligned and
   scaled down to suit a card instead of a full-width strip, so the
   two quote treatments on the page read as one deliberate system
   rather than two different ideas. */
.test-card { padding-top: 40px; }
.test-card::before {
  content: '\201C';
  position: absolute; top: 6px; left: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem; line-height: 1;
  color: var(--red); opacity: 0.22;
  pointer-events: none;
}

/* ── Footer links: the same sliding underline as the nav ──────────
   Footer nav was a plain colour fade — the one remaining link group
   on the page not using the underline sweep introduced for the main
   nav. Brought in line, at the dimmer opacity that suits sitting on
   dark ground. */
.ft-nav a { position: relative; display: inline-block; }
.ft-nav a::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: rgba(245,240,230,.55);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.ft-nav a:hover::before { transform: scaleX(1); }

/* ── Comparison table: row hover ───────────────────────────────────
   "DIY vs. hiring vs. DialCraft" is the densest reading task on the
   page — five criteria across three columns — and had no hover
   feedback at all, so tracing a single row across the table meant
   the reader's eye did all the work. A soft row tint removes that
   friction; the DialCraft column keeps its own red-tinted highlight
   underneath, the two just compose. */
.cmp-table tbody tr { transition: background 0.15s ease; }
.cmp-table tbody tr:hover { background: rgba(245,240,230,0.04); }
.cmp-table tbody tr:hover td.cmp-hl, .cmp-table tbody tr:hover th.cmp-hl { background: rgba(192,40,46,0.13); }

/* ── Integration icons: a touch of life on hover ───────────────────
   The tiles already swap border and background on hover; scaling the
   icon slightly inside its frame is the same "something responded to
   you" cue as the button lifts elsewhere, applied to the smallest
   interactive unit on the page. */
.ii svg { transition: transform 0.3s var(--ease); }
.integ-item:hover .ii svg { transform: scale(1.1); }

/* ── Nav: separation from content once stuck ───────────────────────
   nav.stuck already animates in a blurred background; without a
   shadow the boundary between it and the content scrolling beneath
   was drawn by a single 1px line, which under the backdrop-blur was
   easy to miss. A soft contact shadow makes the layering unambiguous
   at a glance. */
nav.stuck { box-shadow: 0 1px 0 var(--rule), 0 12px 24px -8px rgba(20,16,10,0.08); }

@media (prefers-reduced-motion: reduce) {
  .ii svg, .ft-nav a::before, .cmp-table tbody tr { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM PASS 4 — Sept 2026: legal pages
   ───────────────────────────────────────────────────────────────────
   Privacy and Terms were plain top-to-bottom text — the one corner of
   the site with no navigational structure of its own, on the two
   pages most likely to be scanned for one specific clause rather than
   read start to finish. A sticky "On this page" jump list turns a
   9-section legal document into something a visitor can actually
   navigate, and ties it visually back into the numbered-section
   language ("01 — SERVICES" etc.) used everywhere else on the site.
═══════════════════════════════════════════════════════════════════ */
.leg-hero { max-width: 980px; }
.leg-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 3.5rem; align-items: start; }
/* Not position:sticky: the site sets body{overflow-x:hidden} (needed to
   contain decorative bleed elements elsewhere), and per spec, a
   non-visible overflow-x with no overflow-y set computes overflow-y as
   auto — which makes <body> a scroll container and breaks sticky
   positioning for anything nested inside it. A static column is the
   safe fix; the TOC still does its job as a jump list, it just doesn't
   follow the scroll. */
.leg-toc-lbl {
  display: block; font-family: 'DM Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 0.9rem;
}
.leg-toc ul { list-style: none; }
.leg-toc li { margin-bottom: 0.65rem; }
.leg-toc a {
  display: flex; gap: 0.6rem; align-items: baseline;
  font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); text-decoration: none;
  transition: color 0.15s;
}
.leg-toc a:hover { color: var(--ink); }
.leg-toc-n { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--red); flex-shrink: 0; }
.pp-h3 { scroll-margin-top: 96px; }
@media (max-width: 900px) {
  .leg-layout { grid-template-columns: 1fr; gap: 0; }
  .leg-toc {
    position: static; margin-bottom: 2.5rem; padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .leg-toc ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .leg-toc li { margin-bottom: 0; }
}

/* ═══════════════════════════════════════
   INDUSTRY PAGES — shared hero/list styles
   (previously duplicated as an inline <style> in each of the 6 pages)
═══════════════════════════════════════ */
.vt-hero { padding: 128px var(--edge) 64px; max-width: var(--w); margin: 0 auto; }
.breadcrumb { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.06em; margin-bottom: 2rem; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.breadcrumb a:hover { color: var(--ink); border-color: var(--ink); }
.vt-h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--ink); max-width: 900px; margin-bottom: 1.5rem; text-wrap: balance;
}
.vt-h1 em { font-style: italic; color: var(--red); font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.vt-lede { font-size: 1.1rem; color: var(--ink-2); max-width: 620px; line-height: 1.7; margin-bottom: 2.25rem; }
.vt-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.vt-list { list-style: none; margin-top: 1.5rem; }
.vt-list li { font-size: 0.95rem; color: var(--ink-2); padding: 0.9rem 0; border-bottom: 1px solid var(--rule); padding-left: 1.4rem; position: relative; }
.vt-list li::before { content: '—'; position: absolute; left: 0; color: var(--red); }
.vt-note { font-family: 'DM Mono', monospace; font-size: 0.83rem; color: var(--ink-2); max-width: 600px; line-height: 1.6; margin-top: 1rem; }