@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Karla:ital,wght@0,200..800;1,200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
  /* Brand Canvas Palette (Light Mode) */
  --color-canvas-bg: #F7F5F0;
  --color-ink-primary: #1A1917;
  --color-ink-secondary: #52504C;
  --color-border-light: rgba(26, 25, 23, 0.08);
  --shadow-light-card: 0 16px 40px -12px rgba(26, 25, 23, 0.06);

  /* Accent & Surface Tokens (tokenized for palette experiment — defaults equal prior literals) */
  --color-accent: #C28256;                       /* borders, washes, hovers, rules */
  --color-accent-text: #C28256;                  /* serif numerals + mono eyebrows on light canvas */
  --color-accent-on-dark: #C28256;               /* accent usage inside tech/dark sections */
  --color-accent-wash-strong: rgba(194, 130, 86, 0.14);
  --color-accent-wash-soft: rgba(194, 130, 86, 0.05);
  --color-card-surface: #FFFFFF;
  --color-ink-hover: #333230;                    /* btn hover charcoal */
  --color-ink-wash: rgba(26, 25, 23, 0.04);
  --color-canvas-tint-1: #EFECE5;                /* System blueprint doc-back tint */

  /* Tech Container Palette (Dark Mode) */
  --color-tech-bg: #0F0E0D;
  --color-tech-surface: #181716;
  --color-tech-text-active: #F7F5F0;
  --color-tech-text-secondary: #D1CFC9;
  --color-tech-text-muted: #8F8D88;
  --color-tech-border: rgba(255, 255, 255, 0.08);
  --color-tech-glow-accent: rgba(217, 119, 6, 0.08); /* Warm copper glow */
  --color-tech-brand: var(--color-accent-on-dark); /* Subtle bronze highlight */

  /* Brand Canvas Extensions */
  --color-off-white: #FBFAF8;
  --color-canvas-tint-2: #FAF9F6;
  --color-star-empty: #E2DED7;
  --color-warm-grey: #E9E4DA;

  /* Tech Container / Dark Mode Extensions */
  --color-tech-dark-wash: #181410;
  --color-tech-copper-dark: #1c1511;
  --color-tech-warm-black: #14100d;
  --color-amber: #FBBF24;
  --color-amber-primary: #F59E0B;

  /* Utility & Interaction State Tokens */
  --color-btn-decline: #E5484D; /* Vibrant decline red */
  --color-btn-accept: #30A46C;  /* Vibrant accept green */
  
  /* Font Family Mappings */
  --font-clean-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-display-condensed: 'Bricolage Grotesque', sans-serif;
  --font-sans: 'Karla', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout Grid Tokens */
  --container-max-width: 1400px;
  --section-gap: clamp(4rem, 8vw, 8rem);
  --card-radius-lg: 24px;
  --card-radius-md: 16px;
  
  /* Motion Presets */
  --transition-spring-weighty: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --transition-smooth-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-standard: 0.3s ease;
}

/* Reset and Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Accessibility Focus States (DESIGN.md / brief §4a) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-canvas-bg);
  color: var(--color-ink-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Custom themed scrollbar (colorize.md) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-canvas-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-star-empty);
  border-radius: 5px;
  border: 2px solid var(--color-canvas-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Scrollbar overrides for dark sections */
.tech-section ::-webkit-scrollbar-track,
.rx-panel ::-webkit-scrollbar-track {
  background: var(--color-tech-bg);
}
.tech-section ::-webkit-scrollbar-thumb,
.rx-panel ::-webkit-scrollbar-thumb {
  background: var(--color-tech-border);
  border: 2px solid var(--color-tech-bg);
}
.tech-section ::-webkit-scrollbar-thumb:hover,
.rx-panel ::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-on-dark);
}

/* Container Utility */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: clamp(1.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 4rem);
}

/* Typography Scales */
h1, h2, h3, h4, .serif-font {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-ink-primary);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.01em;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Sticky Header and Navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color var(--transition-standard), border-color var(--transition-standard), backdrop-filter var(--transition-standard);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background-color: rgba(247, 245, 240, 0.8);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--color-border-light);
}

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

.brand-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--color-ink-primary);
  letter-spacing: -0.02em;
}

.brand-logo span {
  font-size: 0.75rem;
  vertical-align: super;
  margin-left: 2px;
}

.nav-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Buttons System */
.btn {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--transition-spring-weighty), background-color var(--transition-standard), color var(--transition-standard), box-shadow var(--transition-standard);
}

.btn:active {
  transform: scale(0.96) translateY(1px);
}

/* Button hover: lift + thin arrow slides in (brief §6b).
   Arrow is a CSS-drawn chevron — no unicode glyph in the DOM. */
.btn::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 0;
  opacity: 0;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 2.5px;
  transform: translateX(-4px) rotate(-45deg);
  transition: opacity 0.25s ease, margin-left 0.25s var(--transition-spring-weighty), transform 0.25s var(--transition-spring-weighty);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:hover::after {
  opacity: 1;
  margin-left: 0.5rem;
  transform: translateX(0) rotate(-45deg);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-off-white);
  border: 1px solid var(--color-accent);
}

.btn-primary:hover {
  background-color: var(--color-copper-accent-text);
  border-color: var(--color-copper-accent-text);
  box-shadow: 0 4px 14px rgba(194, 130, 86, 0.25);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-border-light);
  color: var(--color-ink-primary);
}

.btn-secondary:hover {
  background-color: var(--color-ink-wash);
}

.btn-dark {
  background-color: var(--color-accent-on-dark);
  color: var(--color-tech-bg);
  border: 1px solid var(--color-accent-on-dark);
}

.btn-dark:hover {
  background-color: var(--color-amber-accent);
  border-color: var(--color-amber-accent);
  color: var(--color-tech-bg);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.btn-dark-outline {
  background-color: transparent;
  border-color: var(--color-tech-border);
  color: var(--color-tech-text-active);
}

.btn-dark-outline:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Hero Section */
.hero-section {
  padding-top: 140px;
  padding-bottom: 40px;
}

.hero-card-container {
  position: relative;
  background-color: var(--color-tech-bg);
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5rem);
  color: var(--color-tech-text-active);
  display: flex;
  flex-direction: column;
  min-height: 520px;
  border: 1px solid var(--color-tech-border);
}

/* Full-bleed hero background image */
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transform-origin: center;
  animation: ken-burns 24s ease-in-out infinite alternate;
}

@keyframes ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Hero staggered load-in (brief §6b) */
.hero-content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 0.7s var(--transition-smooth-reveal) forwards;
}

.hero-content > .hero-eyebrow { animation-delay: 0.05s; }
.hero-content > h1 { animation-delay: 0.13s; }
.hero-content > p:not(.hero-subline) { animation-delay: 0.21s; }
.hero-content > .hero-subline { animation-delay: 0.29s; }
.hero-content > .hero-cta-group { animation-delay: 0.37s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Charcoal gradient overlay so text sits on near-solid dark at the left */
.hero-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-tech-bg) 0%, rgba(15, 14, 13, 0.94) 38%, rgba(15, 14, 13, 0.55) 72%, rgba(15, 14, 13, 0.35) 100%),
              linear-gradient(to bottom, rgba(15, 14, 13, 0.35), rgba(15, 14, 13, 0.55));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hero-eyebrow {
  display: block;
  color: var(--color-tech-brand);
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}

.hero-content h1 {
  color: var(--color-tech-text-active);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.hero-content p {
  color: var(--color-tech-text-secondary);
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: 2rem;
  font-weight: 400;
}

.hero-content .hero-subline {
  font-size: 0.9375rem;
  color: var(--color-tech-text-muted);
  margin-bottom: 2rem;
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.75rem;
  border-radius: 100px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@supports not (backdrop-filter: blur(16px)) {
  .hero-cta-group {
    background: rgba(20, 19, 18, 0.95);
  }
}

/* Infinite Scrolling Marquees */
.marquee-section {
  padding: 2.5rem 0;
  overflow: hidden;
  background-color: var(--color-canvas-bg);
  border-bottom: 1px solid var(--color-border-light);
}

.marquee-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.marquee-title {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-secondary);
  max-width: 250px;
  line-height: 1.4;
}

.marquee-name {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  opacity: 0.65;
}

.marquee-container {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  gap: 4rem;
  animation: scroll-left 35s linear infinite;
  will-change: transform;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track img, .marquee-track svg {
  height: 2rem;
  width: auto;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity var(--transition-standard), filter var(--transition-standard);
}

.marquee-track img:hover, .marquee-track svg:hover {
  opacity: 0.8;
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Section Common Styles */
.section-wrapper {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.section-header {
  margin-bottom: 3.5rem;
  max-width: 800px;
}

.section-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  margin-bottom: 0.75rem;
  display: block;
}

/* Numbered section-label scaffolding (brief §6.1) */
.section-label[data-num] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.section-label[data-num]::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  color: var(--color-accent-text);
  font-weight: 700;
}

/* Bronze rule that draws in beside the numeral (brief §6b) */
.section-label[data-num]::after {
  content: '';
  width: 24px;
  height: 1.5px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--transition-smooth-reveal) 0.15s;
}

.reveal-on-scroll.visible .section-label[data-num]::after,
.section-label[data-num].rule-drawn::after {
  transform: scaleX(1);
}

/* Unified warm photo grade (brief §3 treatment) */
.photo-grade {
  filter: sepia(0.25) contrast(1.05) brightness(0.95) saturate(0.85);
}

/* Subtle grain overlay for dark sections (brief §3) */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tech-section > .container,
.belief-section > .container,
.wins-section > .container,
.filter-section > .container {
  position: relative;
  z-index: 2;
}

/* Scroll-reveal entrances (brief §6.4) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--transition-smooth-reveal), transform 0.7s var(--transition-smooth-reveal);
}

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

/* 4.4 The Operating Belief — pull-quote litany */
.belief-litany {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pull-quote {
  font-family: var(--font-display-condensed);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
  color: var(--color-tech-brand);
}

.belief-litany .pull-quote-bright {
  color: var(--color-tech-text-active);
  margin-top: 1.5rem;
  max-width: 34ch;
}

/* Litany lines reveal sequentially with blur-out (brief §6b filter exception) */
.belief-litany .pull-quote {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(10px);
  transition: opacity 0.6s var(--transition-smooth-reveal), filter 0.6s var(--transition-smooth-reveal), transform 0.6s var(--transition-smooth-reveal);
}

.belief-litany .pull-quote.line-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* 4.5 The System — offer cards (clean 3-col, serif numerals) */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.offer-card {
  background-color: var(--color-canvas-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.3s ease;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  min-width: 0;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-light-card);
  border-color: var(--color-accent);
}

/* Cursor-glow (bronze) on cards — living interaction from brief §6b inventory */
.offer-card::before,
.wins-grid .quote-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--color-accent-wash-strong), transparent 80%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.offer-card:hover::before,
.wins-grid .quote-card:hover::before {
  opacity: 1;
}

.offer-card > *,
.wins-grid .quote-card > * {
  position: relative;
  z-index: 1;
}

.offer-card-header {
  margin-bottom: 1.5rem;
}

.offer-numeral {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent-text);
  display: inline-block;
  transition: transform 0.4s var(--transition-spring-weighty);
}

.offer-card:hover .offer-numeral {
  transform: translateY(-2px);
}

.offer-card-body h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.offer-card-body p {
  font-size: 0.9375rem;
}

.offer-details-btn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s var(--transition-spring-weighty);
  margin-top: 1.5rem;
  align-self: flex-start;
}

.offer-card:hover .offer-details-btn {
  opacity: 1;
  transform: translateY(0);
  border-color: var(--color-tech-border);
  color: var(--color-tech-text-active);
}
.offer-card:hover .offer-details-btn:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

@media (hover: none) {
  .offer-details-btn { opacity: 1; transform: none; }
}

/* System banner + inline mid-page CTA (brief §6.2a) */
.system-banner {
  margin-top: 3.5rem;
  padding: 2.5rem;
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--card-radius-md);
  background-color: var(--color-accent-wash-soft);
}

.system-banner p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--color-ink-primary);
  /* clip-path wipe left→right on viewport entry (brief §6b) */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--transition-smooth-reveal);
}

.system-banner.wipe-in p {
  clip-path: inset(0 0 0 0);
}

.banner-cta {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}

/* Native Dialog Modals styling */
dialog.gtm-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  background: transparent;
  width: 100%;
  max-width: 600px;
  padding: 1.5rem;
  z-index: 1001;
  opacity: 0;
  transform: scale(0.95) translateY(12px);
  transition: opacity 0.3s var(--transition-smooth-reveal), transform 0.3s var(--transition-smooth-reveal), display 0.3s allow-discrete;
}

dialog.gtm-modal[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

dialog.gtm-modal::backdrop {
  background: rgba(15, 14, 13, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease, display 0.3s allow-discrete;
}

dialog.gtm-modal[open]::backdrop {
  opacity: 1;
}

.modal-content {
  background: var(--color-canvas-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.1);
  padding: 3rem;
  position: relative;
}

.close-modal-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: var(--color-ink-wash);
  border: none;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink-primary);
  transition: background var(--transition-standard);
}

.close-modal-btn:hover {
  background: rgba(26, 25, 23, 0.08);
}

.modal-header {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.modal-body {
  margin-top: 1rem;
}

.modal-body h4 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  margin-bottom: 0.75rem;
}

.modal-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Geometric bronze marker (no unicode/emoji per brief §2) */
.modal-list li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background-color: var(--color-tech-brand);
}

.modal-footer-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-ink-secondary);
  border-top: 1px solid var(--color-border-light);
  padding-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Step 2: Select Your Channels Grid */
.tech-section {
  background-color: var(--color-tech-bg);
  color: var(--color-tech-text-active);
  position: relative;
}

.tech-section h2, .tech-section .section-label {
  color: var(--color-tech-text-active);
}

.tech-section p {
  color: var(--color-tech-text-secondary);
}

/* 04 — The Diagnosis (replaces the ROI calculator; no promised numbers) */
.diagnosis-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3.5rem;
  align-items: stretch;
}

.symptom-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.symptom-card {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--color-ink-secondary);
  background: var(--color-canvas-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: transform 0.3s var(--transition-spring-weighty), border-color var(--transition-standard), color var(--transition-standard), box-shadow var(--transition-standard);
}

.symptom-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-light-card);
  color: var(--color-ink-primary);
}

.symptom-card.is-active {
  color: var(--color-ink-primary);
  border-color: var(--color-tech-brand);
  box-shadow: inset 3px 0 0 var(--color-tech-brand), var(--shadow-light-card);
}

.rx-panel {
  background-color: var(--color-tech-bg);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-lg);
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.rx-header {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
  border-bottom: 1px solid var(--color-tech-border);
  padding-bottom: 1.25rem;
}

.rx-body {
  flex: 1;
  padding: 2rem 0 1.5rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.rx-body.rx-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.rx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.rx-chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tech-text-secondary);
  border: 1px solid var(--color-tech-border);
  border-radius: 50px;
  padding: 0.5rem 1rem;
}

.rx-chip-lead {
  color: var(--color-tech-bg);
  background: var(--color-tech-brand);
  border-color: var(--color-tech-brand);
  font-weight: 700;
}

.rx-sequence {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-tech-text-secondary);
}

.rx-footer {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
  border-top: 1px dashed var(--color-tech-border);
  padding-top: 1.5rem;
  margin-bottom: 1.75rem;
}

.rx-cta {
  align-self: flex-start;
}

/* 4.8 Selected Wins (dark) — metric-first cards + side chart */
.wins-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3.5rem;
  align-items: start;
}

.wins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.wins-grid .quote-card {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 180px;
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.3s ease;
}

.wins-grid .quote-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  border-color: var(--color-tech-brand);
}

/* Metric-first: number/outcome is the hero (brief §6.3) */
.wins-grid .quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-tech-text-active);
}

.wins-grid .quote-attribution {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-text-muted);
}

/* Side chart panel */
.wins-chart-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.chart-visual {
  background: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-lg);
  padding: 2.5rem;
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-svg-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* SVG Line Drawing path properties */
.attribution-path {
  fill: none;
  stroke: var(--color-tech-brand);
  stroke-width: 3;
  stroke-linecap: round;
  /* stroke-dasharray and dashoffset handled dynamically in JS */
}

/* Ambient pulse on the bronze end-dot after the draw completes (brief §6b) */
.chart-end-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.chart-end-dot.pulsing {
  animation: dot-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.6; }
}

.chart-stats-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart-stats-panel .section-label {
  color: var(--color-tech-text-muted);
}

.chart-stats-panel p {
  color: var(--color-tech-text-secondary);
}

.counter-value-display {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-tech-text-active);
  margin-top: 0.5rem;
}

/* Post-Wins mid-page CTA (brief §6.2b) */
.wins-cta {
  margin-top: 3.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.wins-cta-line {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--color-tech-text-active);
  max-width: 24ch;
}

.wins-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* 4.9 The Operator (light, editorial two-column) */
.operator-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3.5rem;
  align-items: center;
}

.operator-media {
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-light-card);
}

.operator-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
}

.operator-content .section-label {
  margin-top: 0;
}

.operator-quote {
  color: var(--color-tech-brand);
  margin-top: 1.5rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--transition-smooth-reveal) 0.35s, transform 0.7s var(--transition-smooth-reveal) 0.35s;
}

/* Base p carries no margin, so space the two bio paragraphs without touching
   .operator-quote's own 1.5rem top margin. */
.operator-content > p:first-of-type {
  margin-bottom: 1rem;
}

/* Founder attribution. Nested inside .operator-quote so it inherits the scroll
   reveal; .quote-attribution itself is scoped to .wins-grid and doesn't apply here. */
.operator-content .quote-attribution {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-text-muted);
}

.reveal-on-scroll.visible .operator-quote {
  opacity: 1;
  transform: translateY(0);
}

/* 4.10 The Filter (dark, two-column) */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.filter-col {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-md);
  padding: 2.5rem;
}

.filter-col h3 {
  color: var(--color-tech-text-active);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.filter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-tech-text-secondary);
  font-size: 1rem;
  /* Row stagger entrance (brief §6b) */
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--transition-smooth-reveal), transform 0.5s var(--transition-smooth-reveal);
}

.filter-list li.row-in {
  opacity: 1;
  transform: translateX(0);
}

.filter-mark {
  flex-shrink: 0;
}

.filter-mark-check { color: var(--color-tech-brand); }
.filter-mark-x { color: var(--color-tech-text-muted); }

/* Stroke draw-in on the check/× marks (brief §6b) */
.filter-mark line,
.filter-mark polyline {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.5s var(--transition-smooth-reveal);
}

.filter-list li.row-in .filter-mark line,
.filter-list li.row-in .filter-mark polyline {
  stroke-dashoffset: 0;
}

.filter-closer {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: var(--color-tech-text-active);
}

/* 4.11 Final CTA (light, big serif moment) */
.final-cta-section {
  text-align: center;
}

.final-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}

.final-cta-inner h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 2.5rem;
  /* clip-path wipe on entry (brief §6b) */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--transition-smooth-reveal);
}

.final-cta-section.visible .final-cta-inner h2 {
  clip-path: inset(0 0 0 0);
}

.final-cta-group {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--transition-smooth-reveal) 0.3s, transform 0.6s var(--transition-smooth-reveal) 0.3s;
}

.final-cta-section.visible .final-cta-group {
  opacity: 1;
  transform: translateY(0);
}

.final-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Footer layout */
.site-footer {
  display: none !important;
  background-color: var(--color-canvas-bg);
  border-top: 1px solid var(--color-border-light);
  padding-top: 5rem;
  padding-bottom: 3rem;
  color: var(--color-ink-secondary);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-brand h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-ink-primary);
  margin-bottom: 1rem;
}

.footer-links-col h5 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-ink-primary);
  margin-bottom: 1.25rem;
}

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

.footer-links-col a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--color-ink-secondary);
  transition: color var(--transition-standard);
}

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

.footer-bottom {
  border-top: 1px solid var(--color-border-light);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

/* === Instrument Panel visuals === */
/* Shared primitives: panels, rows, chips, pills, live dot. Existing tokens only. */
.viz { position: relative; }
.viz-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-tech-text-muted);
  line-height: 1;
}
.viz-val {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-tech-text-secondary);
  line-height: 1;
}
.viz-val-hero {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-tech-text-active);
}
.viz-panel {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  padding: 1rem 1.1rem;
}
.viz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.viz-panel-head { margin-bottom: 0.9rem; }
.viz-live-tag { display: inline-flex; align-items: center; gap: 0.4rem; }
.viz-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--color-tech-text-muted);
  flex-shrink: 0;
}
.viz-dot.is-live { background-color: var(--color-accent); }
.viz.live .viz-dot.is-live { animation: viz-pulse 2.4s ease-in-out infinite; }
@keyframes viz-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(194, 130, 86, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(194, 130, 86, 0); }
}
.viz-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: 50px;
  padding: 0.45rem 0.75rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.viz-bar {
  display: inline-block;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-tech-border);
}

/* V1 — Command Deck (hero, right side, cropped by hero card edge) */
.viz-command-deck {
  position: absolute;
  top: 50%;
  right: clamp(-2rem, -1vw, 0rem);
  transform: translateY(-50%);
  width: 460px;
  height: 380px;
  z-index: 2;
  pointer-events: none;
}
.viz-deck-main {
  position: absolute;
  top: 40px;
  right: 0;
  width: 300px;
  z-index: 3;
}
.viz-deck-back {
  position: absolute;
  top: 0;
  right: 150px;
  width: 220px;
  transform: rotate(-7deg);
  z-index: 2;
  opacity: 0.9;
}
.viz-spark {
  height: 64px;
  margin-bottom: 0.9rem;
  border-radius: 8px;
  overflow: hidden;
}
.viz-spark-line {
  fill: none;
  stroke: var(--color-tech-brand);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.viz-metric-rows { display: flex; flex-direction: column; gap: 0.55rem; }
.viz-metric-rows .viz-row + .viz-row { padding-top: 0.55rem; border-top: 1px solid var(--color-tech-border); }
.viz-skeleton-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.viz-skel-row { display: flex; align-items: center; gap: 0.6rem; }
.viz-skel-row .viz-bar { flex: 1; height: 5px; }
.viz-deck-chip-1 { position: absolute; top: 96px; left: 6px; z-index: 4; }
.viz-deck-chip-2 { position: absolute; top: 240px; left: 30px; z-index: 4; }

/* V1 ambient float loops (only when .live) */
.viz-command-deck.live [data-viz-float="main"] { animation: viz-float-main 9s ease-in-out infinite; }
.viz-command-deck.live [data-viz-float="back"] { animation: viz-float-back 7s ease-in-out infinite; }
.viz-command-deck.live [data-viz-float="chip1"] { animation: viz-float-chip 8s ease-in-out infinite; }
.viz-command-deck.live [data-viz-float="chip2"] { animation: viz-float-chip 8s ease-in-out infinite reverse; }
@keyframes viz-float-main { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes viz-float-back { 0%, 100% { transform: rotate(-7deg) translateY(6px); } 50% { transform: rotate(-7deg) translateY(-6px); } }
@keyframes viz-float-chip { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }

/* V2 — offer-card vignettes */
:root {
  /* 01. Copper Accent (Blueprint Vignette) */
  --color-copper-accent: #C28256;
  --color-copper-accent-text: #A57048;
  --color-copper-accent-on-dark: #C28256;
  --color-copper-wash-strong: rgba(194, 130, 86, 0.15);
  --color-copper-wash-soft: rgba(194, 130, 86, 0.05);
  --color-copper-glow-accent: rgba(194, 130, 86, 0.1);

  /* 02. Active Terracotta/Orange (Cadence Campaigns) */
  --color-orange-accent: #D9622B;
  --color-orange-accent-text: #B53F0F;
  --color-orange-accent-on-dark: #F47F42;
  --color-orange-wash-strong: rgba(217, 98, 43, 0.12);
  --color-orange-wash-soft: rgba(217, 98, 43, 0.04);
  --color-orange-glow-accent: rgba(244, 127, 66, 0.07);

  /* 03. Amber / Bronze Accent (AI Build / Agents) */
  --color-amber-accent: #F59E0B;
  --color-amber-accent-text: #D97706;
  --color-amber-accent-on-dark: #FBBF24;
  --color-amber-wash-strong: rgba(245, 158, 11, 0.15);
  --color-amber-wash-soft: rgba(245, 158, 11, 0.05);
  --color-amber-glow-accent: rgba(245, 158, 11, 0.08);

  /* Bronze Accent */
  --color-bronze-accent: #A57048;
  --color-bronze-accent-text: #8C5B38;
  --color-bronze-accent-on-dark: #C28256;
  --color-bronze-wash-strong: rgba(165, 112, 72, 0.15);
  --color-bronze-wash-soft: rgba(165, 112, 72, 0.05);
  --color-bronze-glow-accent: rgba(165, 112, 72, 0.08);
}

.viz-vignette {
  height: 220px;
  margin: -0.5rem 0 1.25rem;
  position: relative;
  background-color: var(--color-canvas-tint-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(26, 25, 23, 0.02);
  transition: background-color 0.45s ease, border-color 0.45s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.viz-blueprint {
  background: linear-gradient(135deg, #E8EFF5 0%, #D0DCE5 100%);
  border: 1px solid rgba(194, 130, 86, 0.2);
  box-shadow: inset 0 2px 8px rgba(194, 130, 86, 0.06);
}

.viz-cadence {
  background: linear-gradient(135deg, #F5EDE6 0%, #EADAD0 100%);
  border: 1px solid rgba(194, 130, 86, 0.25);
  box-shadow: inset 0 2px 8px rgba(194, 130, 86, 0.08);
}

.viz-agents {
  background: linear-gradient(135deg, #F5F1E6 0%, #EADCD0 100%);
  border: 1px solid rgba(194, 130, 86, 0.2);
  box-shadow: inset 0 2px 8px rgba(194, 130, 86, 0.06);
}

/* SVG Dotted Texture Film Grain Overlay */
.grain-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
}

/* Shared Micro Labels */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-secondary);
  opacity: 0.6;
  text-transform: uppercase;
  margin-top: 0.5rem;
  display: block;
  transition: color 0.45s ease, text-shadow 0.45s ease, opacity 0.45s ease;
}

/* VARIANT 1: Blueprint Vignette (Anatomy / Cobalt Blue Theme) */
.offer-card[data-id="sprint"]:hover {
  background-color: var(--color-tech-dark-wash);
  border-color: var(--color-accent);
}

.offer-card[data-id="sprint"]:hover .offer-numeral {
  color: var(--color-tech-text-muted);
}
.offer-card[data-id="sprint"]:hover .offer-card-body h3 {
  color: var(--color-tech-text-active);
}
.offer-card[data-id="sprint"]:hover .offer-card-body p {
  color: var(--color-tech-text-secondary);
}

.offer-card[data-id="sprint"]:hover .viz-vignette {
  background: radial-gradient(circle at center, rgba(194, 130, 86, 0.15) 0%, var(--color-tech-bg) 70%);
  border-color: var(--color-accent);
}

.v1-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

/* Left Operator Avatar */
.v1-operator-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.v1-avatar-frame {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(26, 25, 23, 0.05);
  background-color: var(--color-card-surface);
  transition: transform 0.4s var(--transition-spring-weighty);
}

.v1-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Vector Connector Path */
.v1-connector {
  width: 60px;
  height: 20px;
  flex-shrink: 0;
  z-index: 1;
}

.v1-path-dashed {
  fill: none;
  stroke: var(--color-border-light);
  stroke-width: 1.5;
  transition: stroke 0.45s ease, filter 0.45s ease;
}

.v1-path-solid {
  fill: none;
  stroke: var(--color-copper-accent);
  stroke-width: 1.5;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.6s ease;
}

/* Right Lens containing Blueprint sheets */
.v1-prescription-lens {
  position: relative;
  width: 140px;
  height: 110px;
  z-index: 2;
}

.v1-stage .viz-doc {
  position: absolute;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  background-color: var(--color-card-surface);
  box-shadow: 0 10px 24px -6px rgba(26, 25, 23, 0.04);
  transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.v1-stage .viz-doc-back {
  top: 8px;
  left: 24px;
  width: 110px;
  height: 80px;
  transform: rotate(-4deg);
  background-color: var(--color-copper-wash-soft);
  border-color: var(--color-copper-wash-strong);
  transition: transform 0.5s var(--transition-spring-weighty), background-color 0.45s ease, border-color 0.45s ease;
}

.v1-stage .viz-doc-front {
  top: 14px;
  left: 10px;
  width: 115px;
  height: 80px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.4s var(--transition-spring-weighty), border-color 0.3s ease, background-color 0.45s ease;
}

.v1-stage .viz-doc-title {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--color-copper-accent-text);
  letter-spacing: 0.05em;
  margin-bottom: 0.1rem;
  transition: color 0.45s ease;
}

/* Blueprint Progress Bars (Cobalt Blue) */
.v1-stage .viz-bar {
  position: relative;
  height: 4px;
  background-color: var(--color-copper-wash-soft);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0.18);
  transition: transform 0.6s var(--transition-spring-weighty), background-color 0.45s ease;
  overflow: hidden;
}

.v1-stage .viz-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-copper-accent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Hover Interactions V1 */
.offer-card[data-id="sprint"]:hover .v1-avatar-frame {
  transform: scale(1.08);
  border-color: var(--color-tech-border);
}

.offer-card[data-id="sprint"]:hover .v1-path-solid {
  stroke-dashoffset: 0;
  stroke: var(--color-copper-accent-on-dark);
}

.offer-card[data-id="sprint"]:hover .viz-doc-front {
  transform: translate3d(-4px, -4px, 0);
  background-color: var(--color-tech-copper-dark); /* Dark copper workspace */
  border-color: var(--color-copper-accent-on-dark);
  box-shadow: 0 8px 24px rgba(194, 130, 86, 0.25);
}

.offer-card[data-id="sprint"]:hover .viz-doc-back {
  transform: rotate(-8deg) translate3d(2px, 1px, 0);
  background-color: var(--color-tech-warm-black);
  border-color: rgba(194, 130, 86, 0.2);
}

.offer-card[data-id="sprint"]:hover .viz-doc-title {
  color: var(--color-copper-accent-on-dark);
  text-shadow: 0 0 4px rgba(194, 130, 86, 0.5);
}

.offer-card[data-id="sprint"]:hover .mono-label {
  color: var(--color-copper-accent-on-dark);
  opacity: 1;
  text-shadow: 0 0 4px rgba(194, 130, 86, 0.5);
}

.offer-card[data-id="sprint"]:hover .v1-path-dashed {
  stroke: var(--color-copper-accent-on-dark);
  filter: drop-shadow(0 0 2px var(--color-copper-accent-on-dark));
}

.offer-card[data-id="sprint"]:hover .viz-bar {
  transform: scaleX(1);
  background-color: rgba(255, 255, 255, 0.08);
}

.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(2) { transition-delay: 40ms; }
.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(3) { transition-delay: 80ms; }
.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(4) { transition-delay: 120ms; }
.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(5) { transition-delay: 160ms; }

.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(2)::after { transition-delay: 100ms; opacity: 1; background-color: var(--color-copper-accent-on-dark); }
.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(3)::after { transition-delay: 140ms; opacity: 0.75; background-color: var(--color-copper-accent-on-dark); }
.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(4)::after { transition-delay: 180ms; opacity: 0.5; background-color: var(--color-copper-accent-on-dark); }
.offer-card[data-id="sprint"]:hover .viz-bar:nth-child(5)::after { transition-delay: 220ms; opacity: 0.3; background-color: var(--color-copper-accent-on-dark); }


/* VARIANT 2: Multi-Channel Cadence (Campaign Deck / Terracotta Theme) */
.offer-card[data-id="deployment"]:hover {
  background-color: var(--color-tech-bg);
  border-color: var(--color-tech-border);
}

.offer-card[data-id="deployment"]:hover .offer-numeral {
  color: var(--color-tech-text-muted);
}
.offer-card[data-id="deployment"]:hover .offer-card-body h3 {
  color: var(--color-tech-text-active);
}
.offer-card[data-id="deployment"]:hover .offer-card-body p {
  color: var(--color-tech-text-secondary);
}

.v2-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
  overflow: visible;
}

.offer-card[data-id="deployment"]:hover .viz-vignette {
  background-color: var(--color-tech-bg);
  border-color: var(--color-tech-border);
}

/* Copper radial back-glow */
.v2-glow {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-orange-glow-accent) 0%, rgba(217,119,6,0) 75%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.5s var(--transition-spring-weighty);
  pointer-events: none;
  z-index: 1;
}

.offer-card[data-id="deployment"]:hover .v2-glow {
  opacity: 1;
  transform: scale(1.3);
}

/* 2.5D Stacked campaign cards container */
.v2-campaign-deck {
  position: relative;
  width: 150px;
  height: 110px;
  z-index: 2;
}

.v2-deck-card {
  position: absolute;
  background-color: var(--color-card-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(26, 25, 23, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.5s var(--transition-spring-weighty), 
              border-color 0.4s ease, 
              background-color 0.4s ease, 
              box-shadow 0.4s ease,
              opacity 0.3s ease;
}

/* Card Social (Bottom/Right-Fan) */
.card-social {
  bottom: 0;
  left: 15px;
  width: 135px;
  height: 95px;
  transform: translate3d(18px, 15px, 0) rotate(5deg);
  padding: 0.55rem;
  z-index: 1;
  opacity: 0.8;
}

.card-social-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
  position: relative;
}

.social-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-orange-wash-strong);
  border: 1px solid var(--color-orange-accent);
}

.social-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-profile-info {
  display: flex;
  flex-direction: column;
}

.social-name {
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-ink-primary);
  line-height: 1;
}

.social-meta {
  font-size: 6px;
  font-family: var(--font-mono);
  color: var(--color-ink-secondary);
  opacity: 0.7;
}

.social-share-icon {
  position: absolute;
  right: 0;
  top: 1px;
  color: var(--color-ink-secondary);
  opacity: 0.6;
}

.social-image-mock {
  width: 100%;
  height: 44px;
  background-color: rgba(26, 25, 23, 0.02);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  overflow: hidden;
}

.social-footer {
  display: flex;
  gap: 0.35rem;
}

.social-pill {
  font-size: 6px;
  font-family: var(--font-mono);
  color: var(--color-ink-secondary);
  border: 1px solid var(--color-border-light);
  padding: 0.04rem 0.2rem;
  border-radius: 3px;
  background-color: rgba(26, 25, 23, 0.02);
}

/* Card Email (Middle/Left-Fan) */
.card-email {
  top: 5px;
  left: 5px;
  width: 135px;
  height: 95px;
  transform: translate3d(-18px, 10px, 0) rotate(-4deg);
  padding: 0.55rem;
  z-index: 2;
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.email-header-mock {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 8px;
  font-family: var(--font-mono);
  color: var(--color-ink-secondary);
}

.icon-envelope {
  color: var(--color-orange-accent);
}

.to-field {
  opacity: 0.8;
  font-weight: 500;
}

.email-image-frame {
  width: 100%;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background-color: var(--color-canvas-tint-1);
}

.email-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

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

.email-body-line {
  width: 50px;
  height: 3px;
  background-color: var(--color-border-light);
  border-radius: 1px;
}

.email-btn-mock {
  width: 32px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--color-orange-accent);
  box-shadow: 0 1px 3px rgba(217, 98, 43, 0.2);
}

/* Card Search Ad (Top/Center-Fan) */
.card-search {
  top: 15px;
  left: 10px;
  width: 140px;
  height: 65px;
  transform: translate3d(0, 5px, 0) rotate(1deg);
  padding: 0.55rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 8px 24px rgba(26, 25, 23, 0.08);
}

.search-bar-mock {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(26, 25, 23, 0.03);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--color-border-light);
}

.icon-search {
  color: var(--color-ink-secondary);
  opacity: 0.5;
}

.search-input-text {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--color-ink-secondary);
}

.ad-meta {
  display: flex;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 7px;
  line-height: 1;
}

.ad-badge {
  font-weight: 700;
  color: var(--color-orange-accent-text);
  border: 1px solid var(--color-orange-wash-strong);
  padding: 0 0.12rem;
  border-radius: 2px;
  font-size: 6px;
}

.ad-url {
  color: var(--color-orange-accent-text);
  opacity: 0.95;
  font-weight: 500;
}

.ad-headline {
  width: 90%;
  height: 5px;
  background-color: var(--color-orange-accent);
  border-radius: 1.5px;
}

.ad-desc {
  width: 100%;
  height: 3px;
  background-color: var(--color-border-light);
  border-radius: 1px;
}

/* Tech dark mode card styling transitions on hover V2 */
.offer-card[data-id="deployment"]:hover .v2-deck-card {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 1;
}

.offer-card[data-id="deployment"]:hover .card-search {
  background-color: var(--color-tech-copper-dark);
  border-color: var(--color-copper-accent-on-dark);
}

.offer-card[data-id="deployment"]:hover .card-email {
  background-color: var(--color-tech-copper-dark);
  border-color: var(--color-orange-accent-on-dark);
}

.offer-card[data-id="deployment"]:hover .card-social {
  background-color: var(--color-tech-copper-dark);
  border-color: var(--color-amber-accent-on-dark);
}

.offer-card[data-id="deployment"]:hover .search-bar-mock {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.offer-card[data-id="deployment"]:hover .search-input-text {
  color: var(--color-tech-text-secondary);
}

.offer-card[data-id="deployment"]:hover .ad-headline {
  background-color: var(--color-copper-accent-on-dark);
}

.offer-card[data-id="deployment"]:hover .ad-badge {
  color: var(--color-copper-accent-on-dark);
  border-color: var(--color-copper-accent-on-dark);
}

.offer-card[data-id="deployment"]:hover .ad-url {
  color: var(--color-copper-accent-on-dark);
}

.offer-card[data-id="deployment"]:hover .email-btn-mock {
  background-color: var(--color-orange-accent-on-dark);
  box-shadow: 0 2px 8px rgba(244, 127, 66, 0.3);
}

.offer-card[data-id="deployment"]:hover .social-avatar {
  border-color: var(--color-amber-accent-on-dark);
  background-color: var(--color-amber-wash-strong);
}

.offer-card[data-id="deployment"]:hover .social-name {
  color: var(--color-tech-text-active);
}

.offer-card[data-id="deployment"]:hover .social-meta,
.offer-card[data-id="deployment"]:hover .social-share-icon,
.offer-card[data-id="deployment"]:hover .to-field,
.offer-card[data-id="deployment"]:hover .icon-envelope {
  color: var(--color-tech-text-secondary);
}

.offer-card[data-id="deployment"]:hover .social-image-mock {
  border-color: rgba(255, 255, 255, 0.08);
}

.offer-card[data-id="deployment"]:hover .social-pill,
.offer-card[data-id="deployment"]:hover .email-body-line,
.offer-card[data-id="deployment"]:hover .ad-desc {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
  color: var(--color-tech-text-secondary);
}

/* WIDER Fanning Hover Animation V2 */
.offer-card[data-id="deployment"]:hover .card-social {
  transform: translate3d(70px, 15px, 0) rotate(10deg) scale(1.02);
  z-index: 5;
}

.offer-card[data-id="deployment"]:hover .card-email {
  transform: translate3d(-70px, 12px, 0) rotate(-10deg) scale(1.02);
  z-index: 5;
}

.offer-card[data-id="deployment"]:hover .card-search {
  transform: translate3d(0, -26px, 0) rotate(0deg) scale(1.05);
  z-index: 10;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}


/* VARIANT 3: Automated Booking (Purple Theme) */
#offer-card-automation:hover {
  background-color: var(--color-tech-dark-wash);
  border-color: var(--color-accent);
}

#offer-card-automation:hover .offer-numeral {
  color: var(--color-tech-text-muted);
}
#offer-card-automation:hover .offer-card-body h3 {
  color: var(--color-tech-text-active);
}
#offer-card-automation:hover .offer-card-body p {
  color: var(--color-tech-text-secondary);
}

#offer-card-automation:hover .viz-vignette {
  background: radial-gradient(circle at center, rgba(194, 130, 86, 0.15) 0%, var(--color-tech-bg) 70%);
  border-color: var(--color-accent);
}

.v3-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
}

.v3-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* Prospect card avatar style */
.v3-node .v3-avatar-frame {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  background-color: var(--color-card-surface);
  box-shadow: 0 4px 12px rgba(26, 25, 23, 0.05);
  transition: transform 0.4s var(--transition-spring-weighty), border-color 0.45s ease;
}

.v3-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Flow line connectors */
.v3-connector {
  width: 45px;
  height: 10px;
  flex-shrink: 0;
  z-index: 1;
}

.v3-flow-line {
  fill: none;
  stroke: var(--color-border-light);
  stroke-width: 1.5;
  transition: stroke 0.45s ease;
}

/* Central AI Agent Node */
.v3-agent-core {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--color-amber-wash-soft);
  border: 1px solid var(--color-amber-wash-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-amber-accent);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.1);
  transition: transform 0.4s var(--transition-spring-weighty), 
              background-color 0.45s ease, 
              border-color 0.45s ease, 
              box-shadow 0.45s ease,
              color 0.45s ease;
}

.v3-spark-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.4s var(--transition-spring-weighty);
}

/* Calendar Node */
.v3-calendar-grid {
  width: 52px;
  height: 52px;
  background-color: var(--color-card-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 0.45rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  box-shadow: 0 4px 12px rgba(26, 25, 23, 0.05);
  transition: transform 0.4s var(--transition-spring-weighty), border-color 0.45s ease, background-color 0.45s ease;
}

.cal-slot {
  background-color: rgba(26, 25, 23, 0.03);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: transparent;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.45s ease;
}

.cal-slot.booked {
  background-color: var(--color-amber-wash-soft);
  border: 1px solid var(--color-amber-wash-strong);
  color: var(--color-amber-accent-text);
  font-weight: 700;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.cal-slot.booked::before {
  content: '\2713';
}

/* Hover Interactions V3 */
#offer-card-automation:hover .v3-lead-node .v3-avatar-frame {
  transform: scale(1.08);
  border-color: var(--color-tech-border);
}

#offer-card-automation:hover .v3-flow-line {
  stroke: var(--color-amber-accent-on-dark);
  stroke-dasharray: 4,4;
  animation: flow-dash 1.5s linear infinite;
}

@keyframes flow-dash {
  to { stroke-dashoffset: -20; }
}

#offer-card-automation:hover .v3-agent-core {
  transform: scale(1.15);
  background-color: var(--color-tech-copper-dark); /* Dark amber/copper agent core background */
  border-color: var(--color-amber-accent-on-dark);
  color: var(--color-amber);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

#offer-card-automation:hover .v3-spark-icon {
  transform: scale(1.1) rotate(15deg);
}

#offer-card-automation:hover .v3-calendar-grid {
  transform: scale(1.08);
  background-color: var(--color-tech-copper-dark); /* Dark amber/copper calendar background */
  border-color: var(--color-amber-accent-on-dark);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

#offer-card-automation:hover .cal-slot {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
}

#offer-card-automation:hover .cal-slot.booked {
  background-color: var(--color-amber-primary);
  border-color: var(--color-amber-primary);
  color: var(--color-tech-text-active);
  box-shadow: 0 0 8px var(--color-amber-accent-on-dark);
}



/* V4 — attribution console upgrade */
.viz-tab-row {
  position: absolute;
  top: 1rem; left: 2.5rem;
  display: flex;
  gap: 0.4rem;
  z-index: 3;
}
.viz-tab {
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-tech-border);
  transition: background-color var(--transition-standard);
}
.viz-tab .viz-label { color: var(--color-tech-text-muted); }
.viz-tab:hover { background-color: rgba(255, 255, 255, 0.08); }
.viz-tab.is-active { background-color: var(--color-tech-text-active); border-color: var(--color-tech-text-active); }
.viz-tab.is-active .viz-label { color: var(--color-tech-bg); }
.viz-roas-chip {
  position: absolute;
  top: -14px; right: 16px;
  z-index: 4;
  gap: 0.35rem;
}
.viz-roas-val { color: var(--color-tech-brand); }
.chart-visual.live .viz-roas-chip { animation: viz-float-roas 8s ease-in-out infinite; }
@keyframes viz-float-roas { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.viz-bar-rect {
  fill: var(--color-tech-brand);
  fill-opacity: 0.55;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
}
.viz-bar-rect.viz-bar-alt { fill-opacity: 0.28; }
.viz-bars.bars-in .viz-bar-rect {
  transform: scaleY(1);
  transition: transform 0.5s var(--transition-smooth-reveal);
}

/* === Founder's Morning (section 05) === */
.viz-dot.is-idle {
  background-color: transparent;
  border: 1px solid var(--color-tech-text-muted);
}

/* Scene line above the visual (You-Layer §3) */
.viz-scene-line {
  max-width: 900px;
  margin: 0 auto 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
}

.viz-morning {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

/* — Messaging thread panel (LIGHT app surface) — */
.viz-thread {
  width: 58%;
  background-color: var(--color-off-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.viz-thread-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border-light);
}
.viz-thread-channel {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-ink-primary);
}
.viz-thread-members {
  font-size: 0.6875rem;
  color: var(--color-ink-secondary);
  opacity: 0.7;
}
.viz-thread-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.viz-msg { display: flex; gap: 0.65rem; }
.viz-avatar {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
}
.viz-avatar-bot { background-color: var(--color-tech-brand); color: #fff; }
.viz-avatar-human {
  border-radius: 50%;
  background-color: var(--color-ink-primary);
  color: var(--color-off-white);
}
.viz-msg-main { min-width: 0; }
.viz-msg-meta { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.viz-msg-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-ink-primary);
}
.viz-msg-time { font-size: 0.625rem; color: var(--color-ink-secondary); opacity: 0.6; }
.viz-msg-text {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink-primary);
  margin: 0;
}
.viz-msg-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.viz-msg-list li {
  position: relative;
  padding-left: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink-secondary);
}
.viz-msg-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 3px; height: 3px;
  border-radius: 50%;
  background-color: var(--color-tech-brand);
}
.viz-msg-actions { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
.viz-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  line-height: 1;
}
.viz-btn-filled { background-color: var(--color-ink-primary); color: var(--color-off-white); }
.viz-btn-outline {
  border: 1px solid var(--color-border-light);
  color: var(--color-ink-secondary);
}
.viz-msg-confirm { display: flex; align-items: center; gap: 0.4rem; color: var(--color-ink-secondary); }
.viz-confirm-check { color: var(--color-tech-brand); flex-shrink: 0; }

/* typing-dots indicator */
.viz-typing { display: flex; align-items: center; gap: 0.65rem; }
.viz-typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 0.5rem 0.7rem;
  background-color: rgba(26, 25, 23, 0.05);
  border-radius: 10px;
}
.viz-typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background-color: var(--color-ink-secondary);
  opacity: 0.4;
}

/* — Phone: real photograph (C1) with notifications floating over its edge — */
.viz-phone {
  position: absolute;
  top: 10px;
  right: 0;
  width: 300px;
  transform: rotate(-2deg);
  z-index: 3;
  filter: drop-shadow(0 34px 55px rgba(0, 0, 0, 0.5));
}
.viz-phone-photo {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.viz-phone-photo img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 42%;
}
/* Notification stack floats over the lower-left edge of the phone photo (fallback treatment) */
.viz-notif-stack {
  position: absolute;
  left: -34px;
  bottom: 28px;
  width: 224px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 4;
}
.viz-notif {
  background-color: rgba(247, 245, 240, 0.92);
  border-radius: 13px;
  padding: 0.55rem 0.65rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.viz-notif-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.viz-notif-appicon {
  width: 15px; height: 15px;
  border-radius: 4px;
  background-color: var(--color-tech-brand);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
.viz-notif-app {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  font-weight: 600;
}
.viz-notif-ago { font-size: 0.5rem; color: var(--color-ink-secondary); opacity: 0.6; margin-left: auto; }
.viz-notif-text {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-ink-primary);
  margin: 0;
}
.viz-notif-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.viz-notif-btn {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.625rem;
  padding: 0.3rem 0;
  border-radius: 7px;
  background-color: rgba(26, 25, 23, 0.06);
  color: var(--color-ink-primary);
}
.viz-notif-approve { background-color: var(--color-ink-primary); color: var(--color-off-white); }

/* — Agent strip beneath both — */
.viz-agent-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.5rem;
}
.viz-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 50px;
  border: 1px solid var(--color-tech-border);
  background-color: var(--color-tech-surface);
}
.viz-agent-chip .viz-label { color: var(--color-tech-text-secondary); }

/* Closing mono strip */
.viz-console-strip {
  max-width: 900px;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-text-muted);
}

/* — Founder's Morning motion — */
.viz-morning [data-viz-msg],
.viz-morning .viz-typing {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--transition-smooth-reveal), transform 0.45s var(--transition-smooth-reveal);
}
.viz-morning [data-viz-msg].msg-in,
.viz-morning .viz-typing.msg-in { opacity: 1; transform: translateY(0); }
.viz-morning .viz-typing { display: none; }
.viz-morning .viz-typing.msg-in { display: flex; }
.viz-typing.msg-in .viz-typing-dots span { animation: viz-typing-bounce 1.2s ease-in-out infinite; }
.viz-typing.msg-in .viz-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.viz-typing.msg-in .viz-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes viz-typing-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.viz-phone [data-viz-notif] {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s var(--transition-smooth-reveal), transform 0.4s var(--transition-smooth-reveal);
}
.viz-phone.notif-in [data-viz-notif] { opacity: 1; transform: translateY(0); }
.viz-morning.live [data-viz-float="phone"] { animation: viz-float-phone 9s ease-in-out infinite; }
@keyframes viz-float-phone {
  0%, 100% { transform: rotate(-2deg) translateY(-4px); }
  50% { transform: rotate(-2deg) translateY(4px); }
}
.viz-morning.live .viz-notif-approve.pulse-once {
  animation: viz-approve-pulse 1s ease-in-out;
}
@keyframes viz-approve-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 130, 86, 0); }
  50% { box-shadow: 0 0 0 5px rgba(194, 130, 86, 0.4); }
}

/* — Human Layer — narrative bridges + CTA composite (human-layer-brief §3–§4) */

/* Narrative bridges: a quiet hand-off row at the end of a section */
.bridge {
  position: relative;
  min-height: 120px;
  padding: 1.5rem 0 2.75rem;
  overflow: visible;
}
.bridge-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.bridge-line {
  font-family: var(--font-display-condensed);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
.bridge-turn { display: inline-flex; align-items: center; gap: 0.6rem; }
.bridge-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-tech-brand);
  letter-spacing: 0.02em;
}
.bridge-arrow { color: var(--color-tech-brand); opacity: 0.9; }
.bridge-dark .bridge-line { color: var(--color-tech-text-secondary); }
.bridge-light .bridge-line { color: var(--color-ink-secondary); }

/* Artifact chip — overlaps the row edge, slight tilt, ambient float */
.bridge-chip {
  position: absolute;
  right: clamp(1.25rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  width: 180px;
  margin: 0;
  border-radius: 12px;
  z-index: 2;
}
.bridge-chip-photo {
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}
.bridge-chip-photo img { display: block; width: 100%; height: 120px; object-fit: cover; }
.bridge-chip-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}
.bridge-tally { display: inline-flex; align-items: center; gap: 0.45rem; }
.bridge-tally .mono { font-size: 0.625rem; letter-spacing: 0.04em; color: var(--color-tech-text-secondary); }

/* Bridge motion: line fades up, arrow draws in, chip floats */
.bridge .bridge-line,
.bridge .bridge-turn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--transition-smooth-reveal), transform 0.55s var(--transition-smooth-reveal);
}
.bridge .bridge-turn { transition-delay: 0.12s; }
.bridge.visible .bridge-line,
.bridge.visible .bridge-turn { opacity: 1; transform: translateY(0); }
.bridge-arrow-stem { stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset 0.6s var(--transition-smooth-reveal) 0.2s; }
.bridge-arrow-head { opacity: 0; transition: opacity 0.3s ease 0.7s; }
.bridge.visible .bridge-arrow-stem { stroke-dashoffset: 0; }
.bridge.visible .bridge-arrow-head { opacity: 1; }
.bridge-chip[data-viz-float="bridge"] { animation: bridge-float 8s ease-in-out infinite; }
@keyframes bridge-float {
  0%, 100% { transform: translateY(calc(-50% - 3px)) rotate(-2deg); }
  50% { transform: translateY(calc(-50% + 3px)) rotate(-2deg); }
}

/* C2 — Final CTA atmosphere composite (laptop photo + compressed thread) */
.final-cta-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.final-cta-inner { position: relative; z-index: 2; }
.final-cta-atmosphere { position: relative; }
.cta-photo-card {
  margin: 0;
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-light-card);
}
.cta-photo-card img { display: block; width: 100%; height: 360px; object-fit: cover; }
.cta-thread {
  position: absolute;
  right: 6%;
  bottom: 12%;
  width: min(58%, 280px);
  background-color: var(--color-off-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transform: rotate(-1.5deg);
}
.cta-thread-body { padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.85rem; }
.cta-thread[data-viz-float="cta-thread"] { animation: cta-thread-float 10s ease-in-out infinite; }
@keyframes cta-thread-float {
  0%, 100% { transform: rotate(-1.5deg) translateY(-3px); }
  50% { transform: rotate(-1.5deg) translateY(3px); }
}

/* === You-Layer captions (§3) === */

/* === 03 The Toolbox — glow-cards (messaging-v2 §3) === */
.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.glow-card.toolbox-card {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-md);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Cursor-glow (reuses the --mouse-x/y vars set by app.js on .glow-card) */
.glow-card.toolbox-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(194, 130, 86, 0.16), transparent 80%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.glow-card.toolbox-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  border-color: var(--color-tech-brand);
}

.glow-card.toolbox-card:hover::before {
  opacity: 1;
}

.glow-card.toolbox-card > * {
  position: relative;
  z-index: 1;
}

.toolbox-card-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-tech-text-active);
  margin-bottom: 1.1rem;
}

.toolbox-deliverables {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.toolbox-deliverables li {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-tech-text-muted);
  transition: color 0.3s ease;
}

/* Hover brightening of the deliverable lines */
.glow-card.toolbox-card:hover .toolbox-deliverables li {
  color: var(--color-tech-text-secondary);
}

/* Stagger reveal — cards rise+fade when the section becomes visible */
.toolbox-grid .glow-card.toolbox-card {
  opacity: 0;
  transform: translateY(20px);
}

.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--transition-smooth-reveal), transform 0.6s var(--transition-smooth-reveal);
}

.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(1) { transition-delay: 0ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(2) { transition-delay: 70ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(3) { transition-delay: 140ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(4) { transition-delay: 210ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(5) { transition-delay: 280ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(6) { transition-delay: 350ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(7) { transition-delay: 420ms; }
.toolbox-section.visible .toolbox-grid .glow-card.toolbox-card:nth-child(8) { transition-delay: 490ms; }

.toolbox-strip {
  max-width: 900px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-text-muted);
}

@media (max-width: 1024px) {
  .toolbox-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .toolbox-grid { grid-template-columns: 1fr; }
}

/* Mobile: phone full-width foreground on top, thread stacks beneath, no tilt */
@media (max-width: 768px) {
  .viz-morning { display: flex; flex-direction: column; gap: 1.5rem; }
  .viz-phone {
    position: relative;
    order: -1;
    top: auto; right: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .viz-morning.live [data-viz-float="phone"] { animation: none; }
  .viz-phone-photo img { height: 300px; }
  .viz-notif-stack { left: 0; right: 0; bottom: 16px; width: auto; margin: 0 0.75rem; }
  .viz-thread { width: 100%; }
  .viz-agent-strip { justify-content: flex-start; }

  /* Bridges: line + numeral only, chip hidden (brief §3) */
  .bridge-chip { display: none; }
  .bridge-inner { flex-direction: column; gap: 0.75rem; }
  .bridge-line { font-size: 1.3rem; }

  /* C2: photo card stacks below CTAs at reduced height (brief §4) */
  .final-cta-layout { grid-template-columns: 1fr; gap: 2rem; }
  .cta-photo-card img { height: 240px; }
  .cta-thread { width: min(70%, 300px); }
}

/* V1 mobile variant: hide back panel, main panel + one chip below CTAs, full width, no tilt */
@media (max-width: 1024px) {
  .viz-command-deck {
    position: relative;
    top: auto; right: auto;
    transform: none;
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }
  .viz-deck-back { display: none; }
  .viz-deck-main { position: relative; top: auto; right: auto; width: 100%; }
  .viz-deck-chip-2 { display: none; }
  .viz-deck-chip-1 { position: relative; top: auto; left: auto; margin-top: -12px; margin-left: 1rem; }
  .viz-command-deck.live [data-viz-float="main"],
  .viz-command-deck.live [data-viz-float="chip1"] { animation: none; }
}

/* Reduced-motion kill-switch for Instrument Panel loops */
@media (prefers-reduced-motion: reduce) {
  .viz-command-deck.live [data-viz-float],
  .chart-visual.live .viz-roas-chip,
  .viz-morning.live [data-viz-float],
  .viz.live .viz-dot.is-live { animation: none !important; }
  .viz-bars .viz-bar-rect { transform: scaleY(1) !important; }
  /* Founder's Morning: show the full first conversation statically. */
  .viz-morning [data-viz-msg] { opacity: 1 !important; transform: none !important; }
  .viz-morning .viz-typing { display: none !important; }
  .viz-phone [data-viz-notif] { opacity: 1 !important; transform: none !important; }
  /* Human Layer: bridges static + fully drawn; composite floats off. */
  .bridge .bridge-line,
  .bridge .bridge-turn { opacity: 1 !important; transform: none !important; }
  .bridge-arrow-stem { stroke-dashoffset: 0 !important; }
  .bridge-arrow-head { opacity: 1 !important; }
  .bridge-chip[data-viz-float="bridge"],
  .cta-thread[data-viz-float="cta-thread"] { animation: none !important; }
}

/* =========================================================
   PROOF LAYER — Toolbox Variant B (flagships + typographic)
   Ported from the approved toolbox-b prototype (since deleted). Reveals wire
   through the shared .reveal-on-scroll observer in animations.js:
   the section gains .visible → .proof-layer.visible fires each
   vignette's arrival sequence (no inline observers on the live page).
   Deviations from preview per diagnosis-spec §A flagship swap:
   - Analytics vignette (M4) omitted — Analytics is demoted to the
     typographic row, so its .v-analytics/.slide CSS is unused.
   - The Wall (M5) is a standard 2×2 grid cell — the .flagship-full
     full-width-row and .candidate-tag treatments are removed.
   - Flagship feeling-quote delays remapped to the new grid order
     (Web, Local, Outbound, Wall).
   ========================================================= */

/* App-surface tokens (crisp, light — NOT the warm boutique look) */
.proof-layer {
  --app-surface:    #FFFFFF;
  --app-surface-2:  #FBFAFA;
  --app-ink:        #1A1917;
  --app-ink-muted:  #8F8D88;
  --app-ink-soft:   #52504C;
  --app-hairline:   rgba(26, 25, 23, 0.10);
  --app-hairline-2: rgba(26, 25, 23, 0.06);
  --app-bronze:     var(--color-accent);
  --app-radius:     11px;
}

/* ---- Layout: 2x2 flagship grid ---- */
.flagship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}

.flagship-card {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--transition-spring-weighty),
              box-shadow 0.3s ease, border-color 0.3s ease;
  opacity: 0;
  transform: translateY(24px);
}
.proof-layer.visible .flagship-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--transition-smooth-reveal),
              transform 0.6s var(--transition-smooth-reveal);
}
.proof-layer.visible .flagship-card:nth-child(1) { transition-delay: 0ms; }
.proof-layer.visible .flagship-card:nth-child(2) { transition-delay: 90ms; }
.proof-layer.visible .flagship-card:nth-child(3) { transition-delay: 180ms; }
.proof-layer.visible .flagship-card:nth-child(4) { transition-delay: 270ms; }

.flagship-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.30);
  border-color: var(--color-tech-brand);
}

/* The mockup stage — vignette dominant, bleeds to edges */
.proof {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, #F3F1EC 0%, #E8E5DE 100%);
  border-bottom: 1px solid var(--color-tech-border);
}

/* Deliverable footer strip inside each flagship card */
.flagship-meta {
  padding: 1.5rem 1.75rem 1.75rem;
}
.flagship-meta .name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-tech-text-active);
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}
.flagship-meta .deliverables {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.flagship-meta .deliverables li {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-tech-text-muted);
  transition: color 0.3s ease;
}
.flagship-card:hover .flagship-meta .deliverables li {
  color: var(--color-tech-text-secondary);
}

/* ===== Feeling quotes (§5a — the client's voice, breaking out of the app surface) ===== */
.quote {
  position: absolute;
  z-index: 6;
  max-width: 70%;
  padding: 13px 18px 14px 34px;
  background: var(--color-canvas-bg);
  border: 1px solid var(--app-hairline);
  border-radius: 12px;
  box-shadow: 0 18px 42px -16px rgba(26, 25, 23, 0.32);
  opacity: 0;
  transform: translateY(10px) rotate(-1.5deg);
}
.q-mark {
  position: absolute;
  left: 12px; top: 9px;
  font-family: var(--font-display-condensed);
  font-size: 2rem;
  line-height: 1;
  color: var(--app-bronze);
}
.q-line {
  display: block;
  font-family: var(--font-display-condensed);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--app-ink);
}
.proof-layer.visible .quote {
  opacity: 1;
  transform: translateY(0) rotate(-1.5deg);
  transition: opacity 0.6s var(--transition-smooth-reveal),
              transform 0.6s var(--transition-smooth-reveal);
}
.quote-tr { top: 16px; right: 16px; }
.quote-bl { bottom: 16px; left: 16px; }
.quote-br { bottom: 16px; right: 16px; }
/* fade-up follows each vignette's completed arrival sequence (new grid order) */
.proof-layer.visible .flagship-grid .flagship-card:nth-child(1) .quote { transition-delay: 2.0s; }   /* Web */
.proof-layer.visible .flagship-grid .flagship-card:nth-child(2) .quote { transition-delay: 1.9s; }   /* Local */
.proof-layer.visible .flagship-grid .flagship-card:nth-child(3) .quote { transition-delay: 2.3s; }   /* Outbound */
.proof-layer.visible .flagship-grid .flagship-card:nth-child(4) .quote { transition-delay: 3.55s; }  /* Wall — after note→strike→hero→bar */

/* =========================================================
   M1 — WEB & CONVERSION: "While You Slept"
   ========================================================= */
.v-web {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 22px 0;
}
.phone {
  position: relative;
  width: 62%;
  max-width: 260px;
  flex: 1;
  margin-top: 4px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, #23211E 0%, #171614 100%);
  padding: 12px 12px 0;
  box-shadow: 0 26px 60px -18px rgba(26,25,23,0.55);
  border: 1px solid rgba(26,25,23,0.4);
  border-bottom: none;
  overflow: hidden;
}
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(130% 90% at 50% 0%, #3B4A5A 0%, #202A34 55%, #12171D 100%);
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 5px; border-radius: 4px;
  background: rgba(0,0,0,0.55);
}
.lock-status {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.5rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  padding: 2px 4px 0;
}
.lock-time {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 10px 0 3px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.lock-date {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 12px;
}
.lock-notes {
  display: flex; flex-direction: column; gap: 6px;
}
.note {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,255,255,0.90);
  border-radius: 11px;
  padding: 7px 9px;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
}
.note .n-ico {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--app-bronze);
  display: flex; align-items: center; justify-content: center;
}
.note .n-ico svg { width: 11px; height: 11px; stroke: #FFFFFF; fill: none; stroke-width: 2; }
.note .n-body { flex: 1; min-width: 0; }
.note .n-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.5625rem; font-weight: 700;
  color: var(--app-ink);
}
.note .n-time {
  font-family: var(--font-mono);
  font-size: 0.4375rem; font-weight: 400;
  color: var(--app-ink-muted);
  flex: 0 0 auto;
}
.note .n-text {
  font-family: var(--font-sans);
  font-size: 0.5625rem; line-height: 1.35;
  color: var(--app-ink-soft);
  margin-top: 2px;
}
.proof-layer.visible .note { animation: noteIn 0.5s var(--transition-spring-weighty) forwards; }
.proof-layer.visible .note:nth-child(1) { animation-delay: 0.55s; }
.proof-layer.visible .note:nth-child(2) { animation-delay: 0.95s; }
.proof-layer.visible .note:nth-child(3) { animation-delay: 1.35s; }
@keyframes noteIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.web-evidence {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--app-hairline);
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: 0 8px 20px -10px rgba(26,25,23,0.3);
  backdrop-filter: blur(3px);
}
.web-evidence .ev-thumb {
  width: 20px; height: 15px; border-radius: 3px;
  border: 1px solid var(--app-hairline);
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px;
}
.web-evidence .ev-thumb i { height: 2px; border-radius: 1px; background: var(--app-hairline); }
.web-evidence .ev-thumb.after i:first-child { background: var(--app-bronze); }
.web-evidence .ev-arrow {
  font-family: var(--font-mono); font-size: 0.5625rem; color: var(--app-ink-muted);
}
.web-evidence .ev-old {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--app-ink-muted); text-decoration: line-through;
}
.web-evidence .ev-new {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  color: var(--app-bronze);
}

/* =========================================================
   M2 — LOCAL SEARCH: "The Phone Rings First"
   ========================================================= */
.v-local {
  position: absolute;
  inset: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.call {
  flex: 1 1 auto;
  position: relative;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, #2E3B34 0%, #1B231E 60%, #121713 100%);
  box-shadow: 0 22px 50px -18px rgba(26,25,23,0.5);
  padding: 18px 14px 16px;
  display: flex; flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  overflow: hidden;
}
.call-status {
  font-family: var(--font-mono);
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.call-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  margin: 18px 0 12px;
  background: linear-gradient(135deg, var(--color-accent) 0%, #9E663F 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 7px rgba(194,130,86,0.15);
}
.call-avatar svg { width: 26px; height: 26px; stroke: #FFFFFF; fill: none; stroke-width: 1.6; }
.call-name {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500; line-height: 1.1;
  text-align: center;
}
.call-via {
  font-family: var(--font-sans);
  font-size: 0.5625rem; color: rgba(255,255,255,0.6);
  margin-top: 4px; text-align: center;
}
.call-actions {
  display: flex; gap: 22px; margin-top: auto; padding-top: 14px;
}
.call-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.call-btn svg { width: 15px; height: 15px; stroke: #FFFFFF; fill: none; stroke-width: 1.8; }
.call-btn.decline { background: var(--color-btn-decline); }
.call-btn.accept  { background: var(--color-btn-accept); }
.call-pulse {
  position: absolute;
  left: calc(50% + 26px); bottom: 22px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--color-btn-accept);
  opacity: 0;
  transform: translateX(-50%);
}
.proof-layer.visible .call-pulse { animation: callPulse 2.6s ease-out 0.8s infinite; }
@keyframes callPulse {
  0%   { opacity: 0.6; transform: translateX(-50%) scale(1); }
  100% { opacity: 0;   transform: translateX(-50%) scale(2.1); }
}
.local-right {
  flex: 0 0 auto;
  display: flex; align-items: stretch;
  gap: 10px;
}
.sms {
  flex: 1 1 auto;
  align-self: center;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-radius: 12px 12px 12px 4px;
  padding: 9px 11px;
  box-shadow: 0 8px 20px -12px rgba(26,25,23,0.24);
  font-family: var(--font-sans);
  font-size: 0.6875rem; line-height: 1.4; color: var(--app-ink);
}
.weekstrip { display: flex; gap: 4px; flex: 0 0 auto; align-items: center; }
.day {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px 5px;
  border: 1px solid var(--app-hairline-2);
  border-radius: 8px;
  background: var(--app-surface);
}
.day .d-lbl { font-family: var(--font-mono); font-size: 0.4375rem; letter-spacing: 0.05em; color: var(--app-ink-muted); }
.day .d-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--app-hairline); }
.day.on {
  border-color: var(--app-bronze);
  background: rgba(194,130,86,0.08);
}
.day.on .d-lbl { color: var(--app-bronze); font-weight: 700; }
.day.on .d-dot { background: var(--app-bronze); opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; }
.proof-layer.visible .day.on .d-dot { animation: dayFill 0.45s var(--transition-spring-weighty) 1.2s forwards; }
@keyframes dayFill { to { opacity: 1; transform: scale(1); } }
.local-evidence {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 12px; height: 12px; display: block; }
.star-fill { fill: var(--app-bronze); }
.star-empty { fill: var(--color-star-empty); }
.local-evidence .ev-txt {
  font-family: var(--font-mono);
  font-size: 0.5625rem; color: var(--app-ink-muted);
}

/* =========================================================
   M3 — OUTBOUND & ABM: "The Reply"
   ========================================================= */
.v-outbound {
  position: absolute;
  inset: 24px 28px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 13px;
}
.msg { max-width: 82%; }
.msg-sent {
  align-self: flex-start;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px;
  box-shadow: 0 6px 16px -10px rgba(26,25,23,0.2);
}
.msg-sent .who { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-ink-muted); margin-bottom: 7px; }
.msg-sent .line { height: 6px; border-radius: 4px; background: var(--app-hairline); margin-bottom: 5px; }
.msg-sent .line:nth-child(2) { width: 100%; }
.msg-sent .line:nth-child(3) { width: 72%; }
.reply-wrap { display: flex; align-items: flex-start; gap: 10px; align-self: flex-end; max-width: 88%; }
.reply-arrow { flex: 0 0 auto; margin-top: 14px; }
.reply-arrow svg { width: 18px; height: 18px; stroke: var(--app-bronze); fill: none; stroke-width: 1.75; }
.msg-reply {
  background: var(--app-surface);
  border: 1px solid var(--app-bronze);
  border-radius: 12px 12px 4px 12px;
  padding: 13px 15px;
  box-shadow: 0 14px 34px -14px rgba(194,130,86,0.45);
}
.msg-reply .who { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-bronze); margin-bottom: 7px; }
.msg-reply .text {
  font-family: var(--font-sans);
  font-size: 0.8125rem; line-height: 1.5; color: var(--app-ink);
}
.reply-wrap { opacity: 0; transform: translateX(16px); }
.proof-layer.visible .reply-wrap {
  opacity: 1; transform: translateX(0);
  transition: opacity 0.55s var(--transition-smooth-reveal) 0.6s,
              transform 0.6s var(--transition-spring-weighty) 0.6s;
}
.cal-accept {
  align-self: stretch;
  display: flex; align-items: center; gap: 10px;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-left: 2px solid var(--app-bronze);
  border-radius: 8px;
  padding: 9px 12px;
  box-shadow: 0 8px 20px -12px rgba(26,25,23,0.22);
  opacity: 0;
  transform: translateY(6px);
}
.cal-accept .ca-check {
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.cal-accept .ca-check svg { width: 18px; height: 18px; stroke: var(--app-bronze); fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.cal-accept .ca-check path {
  stroke-dasharray: 26; stroke-dashoffset: 26;
}
.cal-accept .ca-text {
  font-family: var(--font-mono);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--app-ink);
}
.cal-accept .ca-text span { color: var(--app-ink-muted); font-weight: 400; }
.proof-layer.visible .cal-accept {
  animation: caRow 0.5s var(--transition-smooth-reveal) 1.3s forwards;
}
@keyframes caRow { to { opacity: 1; transform: translateY(0); } }
.proof-layer.visible .cal-accept .ca-check path {
  animation: caCheck 0.5s var(--transition-smooth-reveal) 1.65s forwards;
}
@keyframes caCheck { to { stroke-dashoffset: 0; } }

/* =========================================================
   M5 — NARRATIVE & POSITIONING: "The Wall" (§5c)
   Standard 2×2 grid cell (full-width row + candidate tag removed).
   ========================================================= */
.proof.proof-wall {
  background: var(--color-warm-grey);
}
.proof-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 100% at 50% 42%, transparent 52%, rgba(26, 25, 23, 0.13) 100%);
}
.v-wall {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.wall-label {
  position: absolute;
  z-index: 4;
  top: 14px; right: 16px;
  font-family: var(--font-mono);
  font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(26, 25, 23, 0.42);
}
.wall-note {
  position: absolute;
  z-index: 2;
  padding: 12px 18px;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 12px 24px -14px rgba(26, 25, 23, 0.45),
              0 2px 4px -2px rgba(26, 25, 23, 0.12);
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.82) translateY(8px);
  transform-origin: center;
}
.wn-text {
  font-family: var(--font-sans);
  font-size: 0.92rem; line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--app-ink);
}
.wn-white  { background: var(--color-off-white); }
.wn-cream  { background: var(--color-canvas-bg); }
.wn-bronze { background: linear-gradient(rgba(194, 130, 86, 0.14), rgba(194, 130, 86, 0.14)), var(--color-off-white); }
.wn-tape {
  position: absolute;
  z-index: 3;
  top: -7px; left: 50%;
  width: 34px; height: 13px;
  border-radius: 1px;
  background: rgba(194, 130, 86, 0.22);
  box-shadow: 0 1px 2px rgba(26, 25, 23, 0.08);
  transform: translateX(-50%) rotate(-8deg);
}
.wall-note:nth-of-type(even) .wn-tape { transform: translateX(-50%) rotate(9deg); }
.wn-strike {
  position: absolute;
  left: 14px; right: 14px; top: 52%;
  height: 12px;
  transform: translateY(-50%);
  overflow: visible;
}
.wn-strike path {
  fill: none;
  stroke: rgba(26, 25, 23, 0.72);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.wall-note.note-1 { --rot: -5deg; top: 9%;  left: 5%; }
.wall-note.note-2 { --rot: 4deg;  top: 6%;  left: 36%; }
.wall-note.note-3 { --rot: -3deg; top: 13%; right: 5%; }
.wall-note.note-4 { --rot: 5deg;  top: 42%; left: 13%; }
.wall-note.note-5 { --rot: -4deg; top: 38%; right: 11%; }

.wall-hero {
  position: absolute;
  z-index: 3;
  left: 50%; bottom: 13%;
  width: 40%;
  padding: 13px 20px 15px;
  background: #FFFFFF;
  border: 1px solid var(--app-hairline);
  border-radius: 6px;
  box-shadow: 0 20px 44px -20px rgba(26, 25, 23, 0.42),
              0 3px 8px -5px rgba(26, 25, 23, 0.16);
  text-align: left;
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
}
.wall-hero-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  margin-bottom: 8px;
}
.wall-hero-bar {
  display: block;
  height: 10px;
  width: 78%;
  border-radius: 5px;
  background: var(--app-bronze);
  transform: scaleX(0);
  transform-origin: left;
}

/* M5 arrival sequence */
@keyframes notePop {
  to { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1) translateY(0); }
}
@keyframes noteDim {
  from { opacity: 1; }
  to   { opacity: 0.62; }
}
@keyframes strikeDraw { to { stroke-dashoffset: 0; } }
@keyframes heroRise {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes underlineDraw { to { transform: scaleX(1); } }

.proof-layer.visible .wall-note {
  animation:
    notePop 0.5s var(--transition-spring-weighty) both,
    noteDim 0.55s var(--transition-smooth-reveal) forwards;
}
.proof-layer.visible .wall-note.note-1 { animation-delay: 0.35s, 1.75s; }
.proof-layer.visible .wall-note.note-2 { animation-delay: 0.47s, 1.75s; }
.proof-layer.visible .wall-note.note-3 { animation-delay: 0.59s, 1.75s; }
.proof-layer.visible .wall-note.note-4 { animation-delay: 0.71s, 1.75s; }
.proof-layer.visible .wall-note.note-5 { animation-delay: 0.83s, 1.75s; }
.proof-layer.visible .wn-strike path {
  animation: strikeDraw 0.5s var(--transition-smooth-reveal) forwards;
}
.proof-layer.visible .note-1 .wn-strike path { animation-delay: 1.55s; }
.proof-layer.visible .note-2 .wn-strike path { animation-delay: 1.63s; }
.proof-layer.visible .note-3 .wn-strike path { animation-delay: 1.71s; }
.proof-layer.visible .note-4 .wn-strike path { animation-delay: 1.79s; }
.proof-layer.visible .note-5 .wn-strike path { animation-delay: 1.87s; }
.proof-layer.visible .wall-hero {
  animation: heroRise 0.6s var(--transition-spring-weighty) 2.5s forwards;
}
.proof-layer.visible .wall-hero-bar {
  animation: underlineDraw 0.55s var(--transition-smooth-reveal) 2.9s forwards;
}
.proof-wall .quote {
  background: #FFFFFF;
  border-color: rgba(26, 25, 23, 0.16);
  box-shadow: 0 18px 40px -16px rgba(26, 25, 23, 0.38),
              0 3px 8px -4px rgba(26, 25, 23, 0.16);
}

/* =========================================================
   TYPOGRAPHIC ROW (4 across) — reuses .glow-card pattern
   ========================================================= */
.typo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.typo-row .glow-card.toolbox-card {
  opacity: 0;
  transform: translateY(20px);
}
.toolbox-moment {
  font-family: var(--font-display-condensed);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-tech-text-secondary);
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-tech-border);
}
.proof-layer.visible .typo-row .glow-card.toolbox-card {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.6s var(--transition-smooth-reveal),
              transform 0.6s var(--transition-smooth-reveal);
}
.proof-layer.visible .typo-row .glow-card.toolbox-card:nth-child(1) { transition-delay: 340ms; }
.proof-layer.visible .typo-row .glow-card.toolbox-card:nth-child(2) { transition-delay: 400ms; }
.proof-layer.visible .typo-row .glow-card.toolbox-card:nth-child(3) { transition-delay: 460ms; }
.proof-layer.visible .typo-row .glow-card.toolbox-card:nth-child(4) { transition-delay: 520ms; }

/* ---- Proof Layer responsive ---- */
@media (max-width: 900px) {
  .flagship-grid { grid-template-columns: 1fr; }
  .typo-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .proof:not(.proof-wall) {
    aspect-ratio: 16 / 12 !important;
    min-height: 250px;
  }
  /* M5 "The Wall" stacks: notes compress to a 2-col cluster,
     dominant card full-width beneath. */
  .proof.proof-wall { min-height: 0; aspect-ratio: auto; }
  .proof-wall .v-wall {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 40px 16px 20px;
  }
  .proof-wall .wall-note {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: calc(50% - 10px);
    white-space: normal;
    transform: rotate(var(--rot, 0deg)) !important;
  }
  .proof-wall .wn-text { white-space: normal; }
  .proof-wall .wn-strike { top: 50%; }
  .proof-wall .wall-hero {
    position: relative !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100%; max-width: 100%;
    margin-top: 4px;
  }
  .proof-wall .quote {
    position: relative;
    inset: auto;
    margin: 20px auto 0;
  }
}
@media (max-width: 560px) {
  .hero-content .hero-subline {
    display: none;
  }
  .typo-row { grid-template-columns: 1fr; }
  .flagship-grid { gap: 1.25rem; }
  .quote { max-width: 82%; }
  .q-line { font-size: 0.95rem; }
  .proof:not(.proof-wall) {
    aspect-ratio: 4 / 3 !important;
    min-height: 290px;
  }
  .v-web .phone {
    width: 72% !important;
  }
  .v-local .local-right {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .v-local .weekstrip {
    display: none !important;
  }
  .v-local .local-evidence {
    display: none !important;
  }
}

/* ---- Proof Layer reduced-motion kill switch ---- */
@media (prefers-reduced-motion: reduce) {
  .flagship-card, .reply-wrap,
  .typo-row .glow-card.toolbox-card,
  .note, .cal-accept,
  .day.on .d-dot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .quote {
    opacity: 1 !important;
    transform: rotate(-1.5deg) !important;
    transition: none !important;
  }
  .call-pulse { animation: none !important; opacity: 0 !important; }
  .cal-accept .ca-check path { stroke-dashoffset: 0 !important; animation: none !important; }
  /* M5 "The Wall" completed state: notes dimmed + struck, card risen + bar drawn */
  .wall-note {
    opacity: 0.62 !important;
    transform: rotate(var(--rot, 0deg)) !important;
    animation: none !important;
  }
  .wn-strike path { stroke-dashoffset: 0 !important; animation: none !important; }
  .wall-hero {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
  .wall-hero-bar { transform: scaleX(1) !important; animation: none !important; }
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .diagnosis-layout, .footer-top,
  .wins-layout, .operator-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .operator-layout {
    gap: 2.5rem;
  }
  .hero-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .offer-grid, .wins-grid, .filter-grid {
    grid-template-columns: 1fr;
  }
  .offer-card {
    padding: 2rem 1.5rem;
  }
  .offer-card[data-id="sprint"] {
    background-color: #F2F6FA;
    border-color: rgba(26, 25, 23, 0.12);
  }
  .offer-card[data-id="deployment"] {
    background-color: #F8F3EE;
    border-color: rgba(26, 25, 23, 0.12);
  }
  .offer-card[data-testid="offer-card-automation"] {
    background-color: #FAF7EE;
    border-color: rgba(26, 25, 23, 0.12);
  }
  .footer-top {
    gap: 2rem;
  }
  .hero-cta-group, .final-cta-group, .wins-cta-group, .banner-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .marquee-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .marquee-title {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .offer-card {
    padding: 1.75rem 1.25rem;
  }
  .v1-stage, .v2-stage, .v3-stage {
    transform: scale(0.85);
    transform-origin: center center;
  }
  .brand-logo {
    font-size: 1.25rem;
    white-space: nowrap;
  }
  .nav-actions {
    gap: 0.5rem;
  }
  .nav-actions .btn {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .rx-panel {
    padding: 2rem 1.5rem;
  }
  .symptom-card {
    font-size: 1.125rem;
    padding: 1rem 1.25rem;
  }
}

/* Global reduced-motion kill-switch (brief §6b) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-bg-image { animation: none !important; }
  .hero-content > * { opacity: 1 !important; transform: none !important; }
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
  .belief-litany .pull-quote { opacity: 1 !important; filter: none !important; transform: none !important; }
  .system-banner p, .final-cta-inner h2 { clip-path: none !important; }
  .filter-list li { opacity: 1 !important; transform: none !important; }
  .filter-mark line, .filter-mark polyline { stroke-dashoffset: 0 !important; }
  .chart-end-dot.pulsing { animation: none !important; }
  .section-label[data-num]::after { transform: scaleX(1) !important; }
  .operator-quote, .final-cta-group { opacity: 1 !important; transform: none !important; }
  .toolbox-grid .glow-card.toolbox-card { opacity: 1 !important; transform: none !important; }
}

/* === wave2: shared components === */
/* Built by A1 (Design System Engineer) per strategy/wave1/design-specs.md
   §1.1 verticals marquee row · §1.2 THE PATH treatment · §1.4 nav quiet link
   §2.3 .build-card + demo theaters (CSS moved from preview/demos/*.html —
   those pages now consume this block + js/demos.js). Existing tokens only. */

/* --- §1.1 Marquee second row: verticals (counter-scrolling, ambient) --- */
.marquee-container--verticals { margin-top: 0.875rem; }
.marquee-track--verticals {
  display: flex;
  gap: 4rem;
  animation: scroll-right 55s linear infinite;
  will-change: transform;
}
.marquee-container:hover .marquee-track--verticals { animation-play-state: paused; }
.marquee-track--verticals span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--color-ink-secondary);
  opacity: 0.45;
  /* Ambient, not interactive: no hover brighten (spec §1.1) */
}
/* scroll-left reversed: the two rows must visibly drift apart */
@keyframes scroll-right {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (max-width: 768px) {
  .marquee-track--verticals span { font-size: 0.625rem; }
}

/* --- §1.2 THE PATH connective label (threshold line between intro and grid) --- */
.path-label {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 2.5rem 0 2rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--color-ink-secondary);
  opacity: 0.7;
}
.path-label::before,
.path-label::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.35;
}

/* --- §1.2 Numeral connectors: add .path-connect to offer cards 01 and 02 --- */
/* The connector line lives outside the card edge, so the card un-clips;
   the cursor-glow layer gets its radius back explicitly to compensate. */
.offer-card.path-connect { overflow: visible; }
.offer-card.path-connect::before { border-radius: var(--card-radius-md); }
.offer-card.path-connect .viz-vignette { overflow: hidden; }
/* "Next" chevron out of the numeral (btn::after border trick, bronze, 0.35) */
.offer-card.path-connect .offer-numeral::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.6rem;
  border: solid var(--color-accent);
  border-width: 0 1.5px 1.5px 0;
  padding: 3px;
  transform: rotate(-45deg) translateY(-4px);
  opacity: 0.35;
}
/* Desktop: horizontal line across the grid gap at the numeral midline */
.offer-card.path-connect::after {
  content: '';
  position: absolute;
  /* numeral midline: 2.5rem card padding + half the 2.5rem numeral */
  top: 3.75rem;
  right: -1.5rem; /* .offer-grid gap */
  width: 1.5rem;
  height: 1.5px;
  background-color: var(--color-accent);
  opacity: 0.3;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--transition-smooth-reveal);
}
/* Draw staggered ~150ms after card reveal completes (cards use 0.7s reveal) */
.reveal-on-scroll.visible .offer-card.path-connect::after,
.offer-card.path-connect.connector-drawn::after { transform: scaleX(1); }
.reveal-on-scroll.visible .offer-card.path-connect:nth-child(1)::after { transition-delay: 0.85s; }
.reveal-on-scroll.visible .offer-card.path-connect:nth-child(2)::after { transition-delay: 1.0s; }
/* 2-col grid band (769–1024px): connectors hidden — geometry no longer linear */
@media (max-width: 1024px) {
  .offer-card.path-connect::after { display: none; }
}
/* Stacked cards (<768px): the path turns vertical — short bronze rule below */
@media (max-width: 768px) {
  .offer-card.path-connect::after {
    display: block;
    top: auto;
    bottom: -1.75rem;
    left: 50%;
    right: auto;
    width: 1.5px;
    height: 24px;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .reveal-on-scroll.visible .offer-card.path-connect::after,
  .offer-card.path-connect.connector-drawn::after { transform: scaleY(1); }
}

/* --- §1.4 Nav quiet link (light canvas + dark-surface variant) --- */
.nav-route-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--color-ink-secondary);
  text-decoration: none;
  transition: color var(--transition-standard);
}
/* Trailing CSS chevron — always visible, smaller than the button arrows */
.nav-route-link::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.45rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  padding: 2px;
  opacity: 0.6;
  transform: rotate(-45deg);
  transition: transform 0.25s var(--transition-spring-weighty), opacity 0.25s ease;
}
/* Hover: color shift (chosen over underline — spec says pick one) + 3px slide */
.nav-route-link:hover { color: var(--color-ink-primary); }
.nav-route-link:hover::after {
  transform: translateX(3px) rotate(-45deg);
  opacity: 1;
}
/* Dark-surface variant (hero quiet link) */
.nav-route-link--dark { color: var(--color-tech-text-muted); }
.nav-route-link--dark:hover { color: var(--color-tech-text-secondary); }
/* Hero placement helper: below .hero-cta-group, outside the pill group */
.hero-route-link { margin-top: 1rem; }

/* --- §2.3 .build-card — framed working software (extends viz-panel grammar) --- */
.build-card {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Standard card lift + border warm-in; no cursor-glow (two glow surfaces max) */
.build-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.30);
  border-color: var(--color-tech-brand);
}
/* Frame header: mono title-strip left, status chip right */
.build-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-tech-border);
}
.build-card-slug {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-text-muted);
}
.build-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-text-secondary);
  border: 1px solid var(--color-tech-border);
  border-radius: 50px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}
/* status dot reuses .viz-dot / .viz-dot.is-live inside the chip */
/* Demo well: inset viewport, tech-bg inside the tech-surface card */
.build-card-well {
  position: relative;
  margin: 1.25rem;
  background-color: var(--color-tech-bg);
  border: 1px solid var(--color-tech-border);
  border-radius: calc(var(--card-radius-md) - 4px);
  overflow: hidden;
}
/* Corner honesty tag inside the well */
.build-card-sim-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  z-index: 5;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-tech-text-muted);
  pointer-events: none;
}
/* Caption row: one-sentence what-it-does + mono closer */
.build-card-caption {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.build-card-caption p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-tech-text-secondary);
  margin: 0;
}
.build-card-closer {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-tech-text-muted);
}
/* Placeholder frame (cards awaiting case details ship visibly unfinished) */
.build-card-placeholder {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-tech-text-muted);
  border: 1px dashed var(--color-tech-border);
  border-radius: calc(var(--card-radius-md) - 4px);
  margin: 1.25rem;
}

/* Demos hosted inside a build-card well shed their own standalone frame */
.build-card-well .demo-mct,
.build-card-well .demo-air {
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  background-color: transparent;
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* --- Demo theater: Missed-Call Text-Back (.demo-mct-*) --- */
.demo-mct {
  background-color: var(--color-tech-bg);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  color: var(--color-tech-text-active);
  max-width: 960px;
  margin: 0 auto;
}
.demo-mct-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.demo-mct-title h2, .demo-mct-title h3 {
  color: var(--color-tech-text-active);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.5rem;
}
.demo-mct-title p {
  color: var(--color-tech-text-secondary);
  max-width: 46ch;
  font-size: 0.9375rem;
}
.demo-mct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-brand);
  margin-bottom: 0.9rem;
}
.demo-mct-play {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  border: 1px solid var(--color-tech-border);
  background-color: var(--color-tech-text-active);
  color: var(--color-tech-bg);
  cursor: pointer;
  transition: transform 0.2s var(--transition-spring-weighty), background-color var(--transition-standard);
}
.demo-mct-play:hover { background-color: var(--color-tech-text-secondary); transform: translateY(-1px); }
.demo-mct-play:active { transform: scale(0.96); }
.demo-mct-play[disabled] { opacity: 0.45; cursor: default; transform: none; }

.demo-mct-stage {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.demo-mct-phone {
  width: 100%;
  max-width: 320px;
  border-radius: 28px;
  border: 1px solid var(--color-tech-border);
  background-color: #0B0A09;
  box-shadow: 0 34px 55px rgba(0, 0, 0, 0.5);
  padding: 10px;
}
.demo-mct-screen {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--color-off-white);
  height: 480px;
  display: flex;
  flex-direction: column;
}
.demo-mct-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.9rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
}
.demo-mct-call {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to bottom, #181716, #0F0E0D);
  color: var(--color-tech-text-active);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
  transition: opacity 0.5s var(--transition-smooth-reveal), transform 0.5s var(--transition-smooth-reveal);
}
.demo-mct-call.demo-mct-gone { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.demo-mct-call-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-tech-text-muted);
}
.demo-mct-call-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
}
.demo-mct-call-sub { font-size: 0.75rem; color: var(--color-tech-text-muted); font-family: var(--font-mono); }
.demo-mct-ringdot {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent-on-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.5rem;
  position: relative;
}
.demo-mct-ringdot::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent-on-dark);
}
.demo-mct-call.demo-mct-ringing .demo-mct-ringdot::before {
  animation: demo-mct-ring 1.4s ease-out infinite;
}
@keyframes demo-mct-ring {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.demo-mct-ringdot svg { color: var(--color-accent-on-dark); }
.demo-mct-call-status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tech-text-secondary);
  min-height: 1em;
}
.demo-mct-thread-head {
  padding: 0.5rem 0.9rem 0.6rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: center;
}
.demo-mct-thread-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-ink-primary);
}
.demo-mct-thread-sub { font-size: 0.5625rem; color: var(--color-ink-secondary); font-family: var(--font-mono); letter-spacing: 0.04em; }
.demo-mct-thread {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  scroll-behavior: smooth;
}
.demo-mct-bubble {
  max-width: 82%;
  padding: 0.55rem 0.75rem;
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--transition-smooth-reveal), transform 0.4s var(--transition-smooth-reveal);
}
.demo-mct-bubble.demo-mct-in { opacity: 1; transform: translateY(0); }
.demo-mct-bubble-biz {
  align-self: flex-start;
  background-color: rgba(26, 25, 23, 0.06);
  color: var(--color-ink-primary);
  border-bottom-left-radius: 4px;
}
.demo-mct-bubble-caller {
  align-self: flex-end;
  background-color: var(--color-ink-primary);
  color: var(--color-off-white);
  border-bottom-right-radius: 4px;
}
.demo-mct-bubble-time {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  opacity: 0;
  transition: opacity 0.4s ease;
  background: none; padding: 0.1rem 0; max-width: none;
  transform: none;
}
.demo-mct-bubble-time.demo-mct-in { opacity: 0.65; }
.demo-mct-typing {
  align-self: flex-start;
  display: none;
  gap: 4px;
  padding: 0.55rem 0.7rem;
  background-color: rgba(26, 25, 23, 0.06);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.demo-mct-typing.demo-mct-in { display: inline-flex; }
.demo-mct-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background-color: var(--color-ink-secondary);
  opacity: 0.4;
  animation: demo-mct-bounce 1.2s ease-in-out infinite;
}
.demo-mct-typing span:nth-child(2) { animation-delay: 0.18s; }
.demo-mct-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes demo-mct-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.demo-mct-owner { display: flex; flex-direction: column; gap: 1.25rem; }
.demo-mct-panel {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  padding: 1rem 1.1rem;
}
.demo-mct-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.demo-mct-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-tech-text-muted);
  line-height: 1;
}
.demo-mct-livetag { display: inline-flex; align-items: center; gap: 0.4rem; }
.demo-mct-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--color-tech-text-muted);
  flex-shrink: 0;
}
.demo-mct.demo-mct-running .demo-mct-dot {
  background-color: var(--color-accent);
  animation: demo-mct-pulse 2.4s ease-in-out infinite;
}
@keyframes demo-mct-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(194, 130, 86, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(194, 130, 86, 0); }
}
.demo-mct-log { display: flex; flex-direction: column; }
.demo-mct-log-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-tech-border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-tech-text-secondary);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--transition-smooth-reveal), transform 0.5s var(--transition-smooth-reveal);
}
.demo-mct-log-row:first-child { border-top: none; }
.demo-mct-log-row.demo-mct-in { opacity: 1; transform: translateX(0); }
.demo-mct-log-t { color: var(--color-tech-text-muted); flex-shrink: 0; }
.demo-mct-log-row strong { color: var(--color-accent-on-dark); font-weight: 700; }
.demo-mct-notif {
  background-color: rgba(247, 245, 240, 0.95);
  border-radius: 13px;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.45s var(--transition-smooth-reveal), transform 0.45s var(--transition-smooth-reveal);
}
.demo-mct-notif.demo-mct-in { opacity: 1; transform: translateY(0); }
.demo-mct-notif-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.demo-mct-notif-appicon {
  width: 16px; height: 16px; border-radius: 4px;
  background-color: var(--color-tech-brand);
  color: #fff;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
.demo-mct-notif-app {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  font-weight: 600;
  font-family: var(--font-sans);
}
.demo-mct-notif-ago { font-size: 0.5rem; color: var(--color-ink-secondary); opacity: 0.6; margin-left: auto; font-family: var(--font-sans); }
.demo-mct-notif-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-ink-primary);
  margin: 0 0 0.15rem;
}
.demo-mct-notif-text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-ink-primary);
  margin: 0;
}
.demo-mct-owner-note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-tech-text-secondary);
  font-family: var(--font-sans);
}
.demo-mct-caption {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-tech-border);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
  text-align: center;
}
@media (max-width: 760px) {
  .demo-mct-stage { grid-template-columns: 1fr; }
  .demo-mct-phone { margin: 0 auto; }
}

/* --- Demo theater: AI Receptionist (.demo-air-*) --- */
.demo-air {
  background-color: var(--color-tech-bg);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  color: var(--color-tech-text-active);
  max-width: 960px;
  margin: 0 auto;
}
.demo-air-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.demo-air-title h2, .demo-air-title h3 {
  color: var(--color-tech-text-active);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0.5rem;
}
.demo-air-title p {
  color: var(--color-tech-text-secondary);
  max-width: 48ch;
  font-size: 0.9375rem;
}
.demo-air-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--color-tech-brand);
  margin-bottom: 0.9rem;
}
.demo-air-play {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  border: 1px solid var(--color-tech-border);
  background-color: var(--color-tech-text-active);
  color: var(--color-tech-bg);
  cursor: pointer;
  transition: transform 0.2s var(--transition-spring-weighty), background-color var(--transition-standard);
}
.demo-air-play:hover { background-color: var(--color-tech-text-secondary); transform: translateY(-1px); }
.demo-air-play:active { transform: scale(0.96); }
.demo-air-play[disabled] { opacity: 0.45; cursor: default; transform: none; }
.demo-air-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.demo-air-tab {
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-tech-border);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-tech-text-muted);
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.demo-air-tab:hover { background-color: rgba(255, 255, 255, 0.08); }
.demo-air-tab.demo-air-active {
  background-color: var(--color-tech-text-active);
  border-color: var(--color-tech-text-active);
  color: var(--color-tech-bg);
  font-weight: 700;
}
.demo-air-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.demo-air-chat {
  background-color: var(--color-off-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.demo-air-chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border-light);
}
.demo-air-chat-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-ink-primary);
}
.demo-air-chat-sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  opacity: 0.75;
}
.demo-air-chat-body {
  height: 430px;
  overflow-y: auto;
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scroll-behavior: smooth;
}
.demo-air-bubble {
  max-width: 86%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--transition-smooth-reveal), transform 0.35s var(--transition-smooth-reveal);
}
.demo-air-bubble.demo-air-in { opacity: 1; transform: translateY(0); }
.demo-air-bubble-caller {
  align-self: flex-end;
  background-color: var(--color-ink-primary);
  color: var(--color-off-white);
  border-bottom-right-radius: 4px;
}
.demo-air-bubble-ai {
  align-self: flex-start;
  background-color: rgba(26, 25, 23, 0.06);
  color: var(--color-ink-primary);
  border-bottom-left-radius: 4px;
}
.demo-air-who {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: var(--color-accent-text);
}
.demo-air-bubble-caller .demo-air-who { color: rgba(251, 250, 248, 0.6); }
.demo-air-bubble-ai.demo-air-typing-now .demo-air-text::after {
  content: '';
  display: inline-block;
  width: 1.5px; height: 0.9em;
  margin-left: 2px;
  vertical-align: -0.1em;
  background-color: var(--color-accent);
  animation: demo-air-caret 0.9s step-end infinite;
}
@keyframes demo-air-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.demo-air-sysline {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  border: 1px dashed var(--color-border-light);
  border-radius: 50px;
  padding: 0.35rem 0.8rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.demo-air-sysline.demo-air-in { opacity: 0.85; }
.demo-air-dots {
  align-self: flex-start;
  display: none;
  gap: 4px;
  padding: 0.55rem 0.7rem;
  background-color: rgba(26, 25, 23, 0.06);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.demo-air-dots.demo-air-in { display: inline-flex; }
.demo-air-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background-color: var(--color-ink-secondary);
  opacity: 0.4;
  animation: demo-air-bounce 1.2s ease-in-out infinite;
}
.demo-air-dots span:nth-child(2) { animation-delay: 0.18s; }
.demo-air-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes demo-air-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.demo-air-owner { display: flex; flex-direction: column; gap: 1.25rem; }
.demo-air-panel {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--card-radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  padding: 1rem 1.1rem;
}
.demo-air-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.demo-air-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-tech-text-muted);
  line-height: 1;
}
.demo-air-livetag { display: inline-flex; align-items: center; gap: 0.4rem; }
.demo-air-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--color-tech-text-muted);
}
.demo-air.demo-air-running .demo-air-dot {
  background-color: var(--color-accent);
  animation: demo-air-pulse 2.4s ease-in-out infinite;
}
@keyframes demo-air-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(194, 130, 86, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(194, 130, 86, 0); }
}
.demo-air-rules { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.demo-air-rules li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-tech-border);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-tech-text-secondary);
}
.demo-air-rules li:first-child { border-top: none; }
.demo-air-rules li::before {
  content: '';
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 2px;
  background-color: var(--color-tech-brand);
  transform: translateY(-1px);
}
.demo-air-notif {
  background-color: rgba(247, 245, 240, 0.95);
  border-radius: 13px;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.45s var(--transition-smooth-reveal), transform 0.45s var(--transition-smooth-reveal);
}
.demo-air-notif.demo-air-in { opacity: 1; transform: translateY(0); }
.demo-air-notif-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.demo-air-notif-appicon {
  width: 16px; height: 16px; border-radius: 4px;
  background-color: var(--color-tech-brand);
  color: #fff;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
.demo-air-notif-app {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-secondary);
  font-weight: 600;
}
.demo-air-notif-ago { font-family: var(--font-sans); font-size: 0.5rem; color: var(--color-ink-secondary); opacity: 0.6; margin-left: auto; }
.demo-air-notif-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-ink-primary);
  margin: 0 0 0.15rem;
}
.demo-air-notif-text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-ink-primary);
  margin: 0;
}
.demo-air-caption {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-tech-border);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
  text-align: center;
}
@media (max-width: 820px) {
  .demo-air-stage { grid-template-columns: 1fr; }
  .demo-air-chat-body { height: 380px; }
}

/* --- wave2 reduced-motion additions (extends the existing kill-switch) --- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track--verticals { animation: none !important; }
  .offer-card.path-connect::after { transform: scaleX(1) !important; }
  .demo-mct *, .demo-air * { animation: none !important; transition: none !important; }
  /* Demo theaters render their end-state; js/demos.js hides the trigger buttons */
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .offer-card.path-connect::after { transform: scaleY(1) !important; }
}

/* === /ai page === */
/* Component-level foundations only; page assembly is A3's surface. */

/* Light .viz-panel variant for the delivery-telemetry skeleton (spec §2.4) */
.viz-panel--light {
  background-color: var(--color-card-surface);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-light-card);
}
.viz-panel--light .viz-label { color: var(--color-ink-secondary); }
.viz-panel--light .viz-bar { background-color: var(--color-border-light); }

/* Quiet routing line (cross-links, spec §2.6) — nav-route-link register, block */
.route-line {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}

/* === /local page === */
/* Register overrides per design-specs §3: warmer, bigger, stiller.
   Scope: <body class="local-page"> (or any .local-page wrapper). */
.local-page { --section-gap: clamp(5rem, 10vw, 10rem); }
.local-page p {
  font-size: 1.125rem;
  line-height: 1.65;
}
.local-page h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
/* The demo closer line warms to sans sentence-case on /local (spec §3.2) */
.local-page .build-card-closer {
  font-family: var(--font-sans);
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--color-tech-text-secondary);
}
/* Demo copy inside the theaters keeps its own scale (app fidelity beats register) */
.local-page .demo-mct p, .local-page .demo-air p,
.local-page .build-card-caption p { font-size: 0.9375rem; line-height: 1.55; }
.local-page .demo-mct-title p, .local-page .demo-air-title p { font-size: 0.9375rem; }
/* Short bronze rule above plain-card titles (spec §3.3) */
.local-rule {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-accent);
  margin-bottom: 1rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--transition-smooth-reveal) 0.15s;
}
.reveal-on-scroll.visible .local-rule { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .local-rule { transform: scaleX(1) !important; }
}

@media (max-width: 767px) {
  .site-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--color-canvas-bg, #F7F5F0) !important;
  }
  .hero-cta-group {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(26, 25, 23, 0.8) !important;
  }
  dialog.gtm-modal::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(15, 14, 13, 0.85) !important;
  }
  .hero-bg-image {
    animation: none !important;
  }
}
/* === wave2: shared placeholder system (compositions §0) === */
/* NOTE (A2/Homepage): compositions §0 designates this a SHARED foundation for
   all three pages (the A1 block). It was absent from main.css at build time, so
   the homepage engineer added it here to render the [N]/[15]/[METRIC]/[12+]/
   [ATTRIBUTION]/[BOOKING LINK] apertures as designed dashed-bronze tags rather
   than broken glass. /ai + /local consume the same classes verbatim. */
.ph-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  border: 1px dashed var(--color-accent);
  color: var(--color-accent-text);
  background-color: var(--color-accent-wash-soft);
  white-space: nowrap;
  vertical-align: middle;
}
/* Dark-surface variant (tech sections, hero, wins) */
.tech-section .ph-tag, .hero-card-container .ph-tag, .ph-tag--dark {
  border-color: var(--color-accent-on-dark);
  color: var(--color-accent-on-dark);
  background-color: rgba(194, 130, 86, 0.08);
}
/* Placeholder panels for whole missing content blocks (/ai showcase, /local proof) */
.ph-well {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 180px;
  border: 1px dashed var(--color-tech-border);
  border-radius: calc(var(--card-radius-md) - 4px);
  background-color: var(--color-tech-bg);
}
.ph-well .viz-skeleton-rows { width: 60%; opacity: 0.5; }
/* Disabled-styled submit (newsletter placeholder) */
.ph-disabled { opacity: 0.45; pointer-events: none; cursor: default; }

/* === wave2: homepage deltas === */
/* Homepage-only refinements per compositions §1 (A2). Shared components live in
   the wave2 shared block; these target index.html structures only. */

/* §1.1 — stack the names + verticals marquee rows in a column beside the title */
.marquee-rows { flex: 1; min-width: 0; }

/* §1.2 PICK #21 — the section-header's 3.5rem owns the gap above THE PATH strip */
.path-label { margin-top: 0; }

/* §0.2 — hero eyebrow apertures match the surrounding mono size (line is mono) */
.hero-eyebrow .ph-tag { font-size: inherit; }

/* §1.3 — Card 03 "The AI Build" is a doorway to /ai */
a.offer-card-doorway { text-decoration: none; color: inherit; cursor: pointer; }
/* A doorway shows its handle: button + chevron visible at rest (01/02 stay reveal-on-hover) */
#offer-card-automation .offer-details-btn { opacity: 1; transform: none; }
#offer-card-automation .offer-details-btn::after {
  opacity: 0.5;
  margin-left: 8px;
  transform: translateX(0) rotate(-45deg);
}
#offer-card-automation:hover .offer-details-btn::after {
  opacity: 1;
  transform: translateX(4px) rotate(-45deg);
}
/* One-side warm-in = "exit this way": right edge only (PICK #2, inset box-shadow) */
#offer-card-automation:hover {
  background-color: var(--color-tech-dark-wash);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-light-card), inset -2px 0 0 0 var(--color-accent);
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* Second doorway confirmation strip below the button (PICK #3) */
.offer-doorway-strip {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  opacity: 0.55;
}

/* §1.2 — system-banner AI clause: the footnote-that's-still-visible */
.banner-ai-clause { opacity: 0.75; font-size: 0.85em; }

/* §1.4 PICK #5 — booking-link fallback: scroll target + honest-once disclosure */
.booking-anchor { display: block; scroll-margin-top: 6rem; }
.booking-tbd-disclosure { display: flex; justify-content: flex-end; margin-top: 0.75rem; }

/* §1.5 PICK #6 — illustrative caption (museum-plate register) under decorative viz */
.viz-illustrative-caption {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
  opacity: 0.75;
  text-align: right;
}
/* Hero deck: free-floating below-right, outside the panel. The deck bleeds up
   to 2rem past the overflow:hidden hero-card-container, so inset the caption by
   2rem to keep its right-aligned tail from clipping (spec said right:0). */
.viz-command-deck .viz-illustrative-caption {
  position: absolute;
  bottom: -1.75rem;
  right: 2rem;
}
/* Wins chart: static line below the panel */
.wins-chart-panel .viz-illustrative-caption { margin-top: 1rem; }
/* Deck stacks below CTAs at <=1024px — caption goes static, left-aligned */
@media (max-width: 1024px) {
  .viz-command-deck .viz-illustrative-caption {
    position: static;
    margin-top: 0.75rem;
    text-align: left;
  }
}

/* === wave2: /local page deltas === */
.local-hero .hero-card-overlay {
  background: linear-gradient(to right, var(--color-tech-bg) 0%, rgba(15, 14, 13, 0.94) 33%, rgba(15, 14, 13, 0.25) 66%, rgba(15, 14, 13, 0.15) 100%),
              linear-gradient(to bottom, rgba(15, 14, 13, 0.15), rgba(15, 14, 13, 0.35));
}
.local-hero .hero-bg-image {
  opacity: 0.9;
  filter: brightness(0.98);
}
.local-hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.cta-pill-group {
  display: inline-flex;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-tech-border);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
}
.local-tel-link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-tech-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.local-tel-link:hover {
  color: var(--color-accent);
}
.hero-response-time {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--color-tech-text-secondary);
}

.local-demos {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}
.local-demos-container {
  max-width: 720px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.local-demos-container .build-card {
  max-width: 100%;
  margin: 0;
}
.local-demos-container .build-card-well {
  min-height: 400px;
}
.local-demos-container .build-card-caption p.demo-card-intro {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-tech-text-secondary);
  margin-bottom: 1rem;
}
.local-demos-container .demo-micro-cta {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-accent-on-dark);
  text-decoration: none;
  margin-left: 0.5rem;
  transition: opacity 0.2s ease;
}
.local-demos-container .demo-micro-cta:hover {
  opacity: 0.8;
}

.local-builds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}
@media (max-width: 767px) {
  .local-builds-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.local-plain-card {
  background-color: var(--color-card-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  padding: 2.5rem;
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 240px;
}
.local-plain-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-light-card);
  border-color: var(--color-accent);
}
.local-plain-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-ink-primary);
  margin-bottom: 1rem;
}
.local-plain-card p {
  color: var(--color-ink-secondary);
  font-size: 1rem;
  line-height: 1.6;
}
.local-plain-card p.example-sentence {
  margin-top: auto;
  padding-top: 1.25rem;
}
.local-builds-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  font-family: var(--font-sans);
}
.local-builds-strip span {
  font-size: 1.125rem;
  color: var(--color-ink-secondary);
}
@media (max-width: 640px) {
  .local-builds-strip {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

.local-bridge-photo-wrapper {
  width: 100%;
  overflow: hidden;
}
.local-bridge-photo {
  width: 100%;
  height: clamp(280px, 38vw, 420px);
  object-fit: cover;
  display: block;
}

.local-training-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 960px;
  margin: 3.5rem auto 0;
}
@media (max-width: 767px) {
  .local-training-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.training-panel {
  background-color: var(--color-card-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.5s var(--transition-spring-weighty), box-shadow 0.3s ease;
}
.training-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-light-card);
}
.training-panel-header h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink-primary);
  margin-bottom: 1rem;
}
.training-panel-desc {
  color: var(--color-ink-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.training-price-wrapper {
  margin-bottom: 1.5rem;
}
.training-divider {
  border: 0;
  height: 1px;
  background-color: var(--color-border-light);
  margin: 0 0 1.5rem 0;
}
.training-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2rem;
}
.training-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-ink-secondary);
  line-height: 1.4;
}
.training-checklist li svg {
  margin-top: 0.25rem;
}
.training-cta-wrapper {
  margin-top: auto;
}
.training-cta-wrapper .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.training-cta-note {
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
  text-align: center;
  margin-top: 0.75rem;
  opacity: 0.8;
}
.local-training-outro {
  text-align: center;
  max-width: 720px;
  margin: 4rem auto 0;
}
.local-training-quote {
  font-family: var(--font-display-condensed);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-accent-text);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
.training-closing-note {
  font-size: 1rem;
  color: var(--color-ink-secondary);
  line-height: 1.6;
}

.local-human-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) {
  .local-human-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .local-human-photo-col {
    order: 1;
  }
  .local-human-text-col {
    order: 2;
  }
}
.local-human-figure {
  margin: 0;
}
.local-andrew-photo {
  width: 100%;
  max-height: 560px;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--card-radius-md);
  box-shadow: var(--shadow-light-card);
  display: block;
}
.local-photo-caption {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-ink-secondary);
}
.local-human-text-col .section-label {
  margin-bottom: 1.5rem;
}
.local-human-quote {
  font-family: var(--font-display-condensed);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-accent-text);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}
.local-human-bio {
  color: var(--color-ink-secondary);
}

.local-retainer {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}
.local-retainer-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.local-retainer-title {
  color: var(--color-tech-text-active);
  margin-bottom: 1.5rem;
}
.local-retainer-body {
  color: var(--color-tech-text-secondary);
  margin-bottom: 2rem;
}
.local-retainer-services {
  font-size: 1.125rem;
  color: var(--color-tech-text-secondary);
  margin-bottom: 3.5rem;
}
.local-retainer-price {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tech-text-muted);
  margin-bottom: 2.5rem;
}
.local-retainer-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.local-retainer-note {
  font-size: 0.8125rem;
  color: var(--color-tech-text-secondary);
  opacity: 0.7;
}

.local-proof {
  text-align: center;
}
.proof-strip-container {
  margin-top: 3rem;
}
.proof-names {
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-secondary);
  opacity: 0.75;
  margin-bottom: 0.75rem;
}
.proof-caption {
  color: var(--color-ink-secondary);
  max-width: 52ch;
  margin: 0 auto;
}

.local-final-cta .final-cta-card-container {
  position: relative;
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2.5rem;
}
.final-cta-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.final-cta-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(15, 14, 13, 0.75) 0%, rgba(15, 14, 13, 0.9) 70%, var(--color-tech-bg) 100%);
  z-index: 1;
}
.final-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta-content h2 {
  color: var(--color-tech-text-active);
  margin-bottom: 1rem;
}
.final-cta-sub {
  color: var(--color-tech-text-secondary);
  margin-bottom: 2.5rem;
}
.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.local-final-tel-link {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-tech-text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}
.local-final-tel-link:hover {
  color: var(--color-tech-text-active);
  text-decoration: underline;
}
.final-cta-service-area {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--color-tech-text-muted);
}
@media (max-width: 640px) {
  .local-final-cta .final-cta-card-container {
    min-height: 420px;
    padding: 4rem 1.5rem;
  }
}

/* Relocated Verticals Served Section (Upgraded) */
.verticals-served-wrapper {
  margin: 6rem 0 4rem;
  width: 100%;
}

.verticals-container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: start;
}

/* Left Column: Typography & Badges */
.verticals-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.verticals-heading {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--color-tech-text-active);
}

.verticals-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-tech-text-secondary);
  max-width: 60ch;
  margin: 0;
}

.verticals-meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-tech-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.meta-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-on-dark);
}

/* Right Column: Asymmetric Grid */
.verticals-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.vertical-tag {
  background-color: var(--color-tech-surface);
  border: 1px solid var(--color-tech-border);
  color: var(--color-tech-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.85rem 0.5rem;
  text-align: center;
  border-radius: var(--card-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  
  /* Initial hidden state for reveal-on-scroll */
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  
  /* Transition for reveal and hover states */
  transition: 
    opacity 0.6s var(--transition-smooth-reveal),
    transform 0.6s var(--transition-smooth-reveal),
    border-color 0.3s ease, 
    color 0.3s ease, 
    background-color 0.3s ease, 
    box-shadow 0.3s ease;
}

/* Staggered entrance reveal linked to scroll container */
.wins-section.visible .vertical-tag {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 70ms sequential stagger delays for entrance reveal */
.wins-section.visible .vertical-tag:nth-child(1) { transition-delay: 0.00s; }
.wins-section.visible .vertical-tag:nth-child(2) { transition-delay: 0.07s; }
.wins-section.visible .vertical-tag:nth-child(3) { transition-delay: 0.14s; }
.wins-section.visible .vertical-tag:nth-child(4) { transition-delay: 0.21s; }
.wins-section.visible .vertical-tag:nth-child(5) { transition-delay: 0.28s; }
.wins-section.visible .vertical-tag:nth-child(6) { transition-delay: 0.35s; }
.wins-section.visible .vertical-tag:nth-child(7) { transition-delay: 0.42s; }
.wins-section.visible .vertical-tag:nth-child(8) { transition-delay: 0.49s; }
.wins-section.visible .vertical-tag:nth-child(9) { transition-delay: 0.56s; }
.wins-section.visible .vertical-tag:nth-child(10) { transition-delay: 0.63s; }
.wins-section.visible .vertical-tag:nth-child(11) { transition-delay: 0.70s; }
.wins-section.visible .vertical-tag:nth-child(12) { transition-delay: 0.77s; }
.wins-section.visible .vertical-tag:nth-child(13) { transition-delay: 0.84s; }
.wins-section.visible .vertical-tag:nth-child(14) { transition-delay: 0.91s; }
.wins-section.visible .vertical-tag:nth-child(15) { transition-delay: 0.98s; }
.wins-section.visible .vertical-tag:nth-child(16) { transition-delay: 1.05s; }

/* Asymmetric Span Rules */
.vertical-tag.span-2 { grid-column: span 2; }
.vertical-tag.span-3 { grid-column: span 3; }
.vertical-tag.span-4 { grid-column: span 4; }
.vertical-tag.span-6 { grid-column: span 6; }

/* Visual Hierarchy: Key strengths persistent highlight & slow pulse sweep */
.vertical-tag[data-priority="high"] {
  border-color: rgba(194, 130, 86, 0.25);
  color: var(--color-tech-text-secondary);
  animation: tagPulseSweep 8s infinite ease-in-out;
}

/* Non-synchronous prime-number offset durations and delays for priority tags */
.vertical-tag[data-priority="high"]:nth-child(3)  { animation-duration: 7s;  animation-delay: 0.5s; }
.vertical-tag[data-priority="high"]:nth-child(9)  { animation-duration: 9s;  animation-delay: 1.8s; }
.vertical-tag[data-priority="high"]:nth-child(11) { animation-duration: 11s; animation-delay: 3.2s; }
.vertical-tag[data-priority="high"]:nth-child(14) { animation-duration: 13s; animation-delay: 5.0s; }
.vertical-tag[data-priority="high"]:nth-child(16) { animation-duration: 8s;  animation-delay: 2.5s; }

/* Periodic scanning light sweep keyframes (amber/copper tones, no neon outer glows) */
@keyframes tagPulseSweep {
  0%, 100% {
    border-color: rgba(194, 130, 86, 0.25);
    background-color: var(--color-tech-surface);
  }
  50% {
    border-color: var(--color-accent-on-dark);
    background-color: var(--color-tech-glow-accent);
  }
}

/* Hover Morph - Premium Easing & Hardware Accelerated Motion */
.vertical-tag:hover {
  border-color: var(--color-accent-on-dark);
  color: var(--color-tech-text-active);
  background-color: var(--color-tech-glow-accent);
  transform: translate3d(0, -4px, 0);
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.3), 
    0 0 12px rgba(217, 119, 6, 0.08);
  /* Reset transition delay immediately on hover so hover response is snappy */
  transition-delay: 0s !important;
  /* Halt the active keyframe animation during direct hover */
  animation: none !important;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
  .verticals-container {
    gap: 2.5rem;
  }
}

@media (max-width: 1024px) {
  .verticals-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

  /* Map column spans to fit standard grid rows on a 4-column base */
  .vertical-tag.span-2,
  .vertical-tag.span-3,
  .vertical-tag.span-4 {
    grid-column: span 2;
  }
  .vertical-tag.span-6 {
    grid-column: span 4;
  }
}

@media (max-width: 768px) {
  .verticals-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vertical-tag.span-2,
  .vertical-tag.span-3,
  .vertical-tag.span-4,
  .vertical-tag.span-6 {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .verticals-grid {
    grid-template-columns: 1fr;
  }
  
  .verticals-meta {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Mockup and Viz isolation to retain clean sans-serif typography */
.proof, .viz, .viz-panel, .v1-stage, .v2-deck-card, [class*="-mock"], [class*="social-"] {
  --font-display: var(--font-clean-sans);
  --font-display-condensed: var(--font-clean-sans);
  --font-sans: var(--font-clean-sans);
}

/* === Redesigned Diagnosis Section: Auto-Rotating Accordion Carousel === */
.diagnosis-rotate-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.diagnosis-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.diagnosis-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-ink-secondary);
  margin: 0;
  max-width: 48ch;
}

.rx-rotate-viewport {
  position: relative;
  width: 100%;
  height: 380px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  perspective: 1000px;
  padding: 80px 0.25rem;
}

.rx-rotate-viewport::-webkit-scrollbar {
  display: none;
}

.rx-rotate-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  transform-style: preserve-3d;
}

.symptom-card {
  width: 100%;
  background-color: var(--color-card-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--card-radius-md);
  padding: 1.25rem 1.5rem;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: 
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease, 
    box-shadow 0.35s ease, 
    background-color 0.35s ease;
  transform-style: preserve-3d;
}

.symptom-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.symptom-card:hover {
  border-color: rgba(194, 130, 86, 0.4);
  background-color: var(--color-canvas-tint-2);
}

/* 3D Stack / Cylinder Perspective Rules based on dist attribute */
.rx-rotate-viewport:not(.rx-no-3d) .symptom-card[data-dist="0"] {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  z-index: 3;
  border-color: rgba(194, 130, 86, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #FAF6F2 100%);
  box-shadow: 0 16px 32px -8px rgba(194, 130, 86, 0.08);
}

.rx-rotate-viewport:not(.rx-no-3d) .symptom-card[data-dist="1"],
.rx-rotate-viewport:not(.rx-no-3d) .symptom-card[data-dist="-1"] {
  transform: translate3d(0, 0, -30px) scale(0.94);
  opacity: 0.65;
  z-index: 2;
  box-shadow: 0 8px 16px -4px rgba(26, 25, 23, 0.04);
}

.rx-rotate-viewport:not(.rx-no-3d) .symptom-card[data-dist="2"],
.rx-rotate-viewport:not(.rx-no-3d) .symptom-card[data-dist="-2"] {
  transform: translate3d(0, 0, -60px) scale(0.88);
  opacity: 0.3;
  z-index: 1;
}

/* Distant cards have low opacity but are still visible and clickable for Playwright and users */
.rx-rotate-viewport:not(.rx-no-3d) .symptom-card[data-dist]:not([data-dist="0"]):not([data-dist="1"]):not([data-dist="-1"]):not([data-dist="2"]):not([data-dist="-2"]) {
  transform: translate3d(0, 0, -90px) scale(0.8);
  opacity: 0.15;
  z-index: 0;
}

/* Expanded card state styling */
.symptom-card.is-expanded {
  border-color: var(--color-accent) !important;
  background: linear-gradient(135deg, #ffffff 0%, #FAF6F2 100%) !important;
  box-shadow: 0 20px 40px -12px rgba(194, 130, 86, 0.15) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1 !important;
  z-index: 5 !important;
}

/* Dim sibling cards when one is expanded, keeping them visible and clickable */
.rx-rotate-viewport:not(.rx-no-3d) .rx-rotate-list:has(.is-expanded) .symptom-card:not(.is-expanded) {
  opacity: 0.3 !important;
  transform: translate3d(0, 0, -50px) scale(0.95) !important;
}

.symptom-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.symptom-title {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-ink-primary);
  flex-grow: 1;
  line-height: 1.35;
  text-align: center;
}

.rx-accordion-content {
  max-height: 0px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: 
    max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.rx-accordion-content .rx-header {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0.4rem;
}

.rx-accordion-content .rx-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem 0;
}

.rx-accordion-content .rx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rx-accordion-content .rx-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  background-color: var(--color-canvas-tint-1);
  color: var(--color-ink-secondary);
  border: 1px solid var(--color-border-light);
}

.rx-accordion-content .rx-chip-lead {
  background-color: var(--color-accent-wash-strong);
  color: var(--color-copper-accent-text);
  border-color: rgba(194, 130, 86, 0.2);
  font-weight: 600;
}

.rx-accordion-content .rx-sequence {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink-primary);
  margin: 0;
}

.rx-accordion-content .rx-footer {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-secondary);
  opacity: 0.8;
  margin-top: 1.25rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 0.6rem;
}

.rx-accordion-content .rx-col {
  margin-top: 1rem;
  display: flex;
}

.rx-accordion-content .rx-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 240px;
  padding: 0.65rem 1.25rem;
  font-size: 0.8rem;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .diagnosis-rotate-layout {
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .diagnosis-rotate-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 100%;
  }
  
  .diagnosis-desc {
    max-width: 100%;
  }

  .rx-rotate-viewport {
    height: 380px;
  }
}

.diagnosis-disclaimer-wrapper {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 1rem;
  max-width: 48ch;
}

.rx-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.4;
  opacity: 0.9;
}

/* WebGL/2D Canvas Constellation Shader Background */
#gtm-shader-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}