/* ============================================================
   FunnelLedger — Shared design system
   Used by index.html, product.html, pricing.html,
   agencies.html, wizzy.html
   ============================================================ */

:root {
  --bg: #FAFAF7;
  --bg-alt: #F2EFE8;
  --ink: #0F1419;
  --ink-2: #2A323B;
  --ink-muted: #5A6470;
  --line: #E2DDD2;
  --line-soft: #ECE7DC;
  --brand: #0B6E6E;
  --brand-2: #084F4F;
  --lead: #E8B548;
  --mql: #9CB071;
  --sql: #4A6FA5;
  --opp: #7A4FA5;
  --customer: #0B6E6E;
  --warn: #C95F4A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  letter-spacing: -0.022em;
  line-height: 1.05;
  color: var(--ink);
}
h1 { font-size: clamp(3rem, 8.5vw, 6.25rem); font-weight: 700; line-height: 0.96; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.625rem); font-weight: 600; }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; }
p { color: var(--ink-muted); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
strong { font-weight: 600; color: var(--ink); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.75rem; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 1.75rem; }

/* ====== Nav ====== */
nav.site {
  position: sticky; top: 0; z-index: 50;
  height: 66px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(250, 250, 247, 0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
nav.site.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 2rem;
  height: 66px;
  min-height: 66px;
  padding: 0;
}
.logo { display: inline-flex; align-items: center; gap: 0.625rem; justify-self: start; min-width: 180px; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.logo svg { width: 26px; height: 26px; flex: 0 0 26px; }
.logo svg path[fill="#E8B548"] { fill: #E8B548; }
.logo svg path[fill="#B88D34"] { fill: #B88D34; }
.logo svg path[fill="#F2C76A"] { fill: #F2C76A; }
.nav-links { display: flex; gap: 1.65rem; align-items: center; justify-content: center; justify-self: center; min-width: 540px; }
.nav-links a { color: var(--ink-muted); font-size: 0.9375rem; font-weight: 500; transition: color 0.15s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { display: flex; gap: 0.625rem; align-items: center; justify-content: flex-end; justify-self: end; min-width: 180px; }
.nav-cta .btn { height: 40px; min-height: 40px; align-items: center; justify-content: center; }
.nav-cta .btn-primary { min-width: 143px; }

/* ====== Buttons ====== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--brand); transform: translateY(-1px); }
.btn-ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-brand { background: var(--brand); color: var(--bg); }
.btn-brand:hover { background: var(--brand-2); transform: translateY(-1px); }
.btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; }
.btn-arrow { transition: transform 0.2s; }
.btn:hover .btn-arrow { transform: translateX(2px); }

/* ====== Hero (homepage) ====== */
.hero { padding: 5rem 0 7rem; position: relative; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand);
  background: rgba(11, 110, 110, 0.08);
  padding: 0.4rem 0.75rem 0.4rem 0.6875rem;
  border-radius: 100px;
  margin-bottom: 2rem;
  text-transform: uppercase;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
h1 .accent {
  color: var(--ink);
  position: relative;
  display: inline-block;
  padding: 0 0.035em;
  background: none;
  z-index: 1;
}
.page-hero h1 .accent,
.pull-stat-hero h1 .accent {
  white-space: nowrap;
}
h1 .accent::after {
  content: '';
  position: absolute;
  left: -0.035em;
  right: -0.035em;
  bottom: -0.015em;
  height: 0.16em;
  background:
    linear-gradient(90deg, rgba(255, 143, 112, 0.72), rgba(255, 92, 53, 0.78) 42%, rgba(255, 117, 84, 0.72));
  border-radius: 0.12em 0.06em 0.11em 0.05em;
  transform: rotate(-0.7deg) skewX(-3deg);
  transform-origin: left center;
  box-shadow: 0 0.04em 0.08em rgba(255, 92, 53, 0.12);
  z-index: -1;
  pointer-events: none;
}
@keyframes heroMarkSweep {
  from { transform: scaleX(0) skewX(-1.5deg); }
  to   { transform: scaleX(1) skewX(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .accent::after { animation: none; transform: scaleX(1); }
}
.hero p.lead {
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-top: 2rem;
  max-width: 30rem;
  color: var(--ink-2);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center;
  margin-top: 2.5rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.hero-meta-item { display: flex; align-items: center; gap: 0.5rem; }
.hero-meta-item svg { color: var(--brand); }

/* ====== Page hero (sub pages) ====== */
.page-hero { padding: 4.5rem 0 3.5rem; text-align: center; }
.page-hero .eyebrow { margin-bottom: 1.25rem; }
.page-hero h1 { max-width: 32rem; margin: 0 auto; font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.page-hero p.lead { font-size: 1.125rem; max-width: 36rem; margin: 1.25rem auto 0; color: var(--ink-2); }
.page-hero .hero-cta { justify-content: center; margin-top: 2rem; }

/* ====== Brick stage / animation ====== */
.brick-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 520px;
  position: relative;
}
.brick-stage svg { max-width: 100%; height: auto; }
.brick { animation: brickIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; transform-origin: 50% 100%; }
.brick-1 { animation-delay: 0.1s; }
.brick-2 { animation-delay: 0.22s; }
.brick-3 { animation-delay: 0.34s; }
.brick-4 { animation-delay: 0.46s; }
.brick-5 { animation-delay: 0.58s; }
.brick-6 {
  animation: brickIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s backwards,
             dormantBreath 5.5s ease-in-out 2s infinite;
}
@keyframes dormantBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.76; }
}
.pulse-slow { animation: pulseSlow 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.5); opacity: 0.3; }
}
@keyframes brickIn {
  0%   { opacity: 0; transform: translateY(-28px); }
  100% { opacity: 1; transform: translateY(0); }
}
.brick-label { animation: labelIn 0.5s ease 0.85s backwards; }
@keyframes labelIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.pulse-dot { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }

/* ====== Sections ====== */
section { padding: 6rem 0; }
section.tight { padding: 4.5rem 0; }
.section-eyebrow {
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand);
  margin-bottom: 1.25rem;
}
.section-eyebrow::before { content: '— '; opacity: 0.5; }
.section-head { max-width: 38rem; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head p { font-size: 1.0625rem; margin-top: 0.875rem; }

/* ====== Problem ====== */
.problem { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start;
}
.problem-list { display: grid; gap: 0.875rem; }
.problem-item {
  display: flex; gap: 1rem;
  padding: 1.25rem 1.375rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s;
}
.problem-item:hover { border-color: var(--ink-muted); }
.problem-item .marker {
  width: 9px; height: 9px; border-radius: 2px;
  margin-top: 8px;
  flex-shrink: 0;
}
.problem-item:nth-child(1) .marker { background: var(--lead); }
.problem-item:nth-child(2) .marker { background: var(--mql); }
.problem-item:nth-child(3) .marker { background: var(--sql); }
.problem-item:nth-child(4) .marker { background: var(--opp); }
.problem-item h3 { margin-bottom: 0.25rem; }
.problem-item p { font-size: 0.9375rem; line-height: 1.5; }

/* ====== Pillars ====== */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.pillar {
  padding: 2rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 30px -16px rgba(15, 20, 25, 0.18); }
.pillar-icon {
  width: 64px; height: 64px;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.pillar h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.pillar p { font-size: 0.9375rem; line-height: 1.55; }
.pillar-tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.75rem; font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ====== Time machine ====== */
.timemachine { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tm-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: center; }
.tm-bullets { list-style: none; margin-top: 1.75rem; display: grid; gap: 1rem; }
.tm-bullets li { display: flex; gap: 0.875rem; align-items: start; }
.tm-bullets li > svg { flex-shrink: 0; margin-top: 5px; color: var(--brand); }
.tm-bullets li strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 0.125rem; font-size: 0.9375rem; }
.tm-bullets li > div { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.5; }

.tm-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1rem;
  box-shadow: 0 18px 40px -22px rgba(15, 20, 25, 0.18);
}
.tm-card-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
.tm-title { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--ink); letter-spacing: -0.01em; }
.tm-sub { font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.125rem; }
.tm-active-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--brand); background: rgba(11, 110, 110, 0.08); padding: 0.3rem 0.625rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em; }
.tm-active-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: pulse 2.4s ease-in-out infinite; }

.tm-timeline { padding: 1.25rem 0 0.875rem; border-bottom: 1px solid var(--line-soft); }
.tm-log { padding-top: 0.5rem; }
.tm-entry {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6875rem 0.5rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.tm-entry + .tm-entry { border-top: 1px solid var(--line-soft); }
.tm-entry:hover { background: var(--bg-alt); }
.tm-marker {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--ink-muted);
  margin-left: 3px;
}
.tm-entry.tm-current .tm-marker {
  background: transparent;
  border: 2px solid var(--brand);
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-left: 2px;
}
.tm-row1 { display: flex; gap: 0.625rem; align-items: baseline; }
.tm-ver { font-family: 'SF Mono', Monaco, monospace; color: var(--ink); font-weight: 600; font-size: 0.8125rem; }
.tm-date { color: var(--ink-muted); font-size: 0.75rem; }
.tm-desc { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.125rem; line-height: 1.4; }
.tm-pill-active {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--brand);
  background: rgba(11, 110, 110, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tm-btn-restore {
  font-family: inherit;
  font-size: 0.75rem; font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.3rem 0.625rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tm-btn-restore:hover { border-color: var(--brand); color: var(--brand); background: var(--bg); }
.tm-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0.5rem 0; border-top: 1px solid var(--line-soft); margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink-muted); }
.tm-diff-link { color: var(--brand); font-weight: 500; }
.tm-diff-link:hover { text-decoration: underline; }

/* ====== Benchmark / dark section ====== */
.benchmark, .dark-section {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(250, 250, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(250, 250, 247, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.06) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  color: var(--bg);
}
.benchmark .section-eyebrow, .dark-section .section-eyebrow { color: var(--lead); }
.benchmark h2, .dark-section h2, .dark-section h3 { color: var(--bg); }
.benchmark p, .dark-section p { color: rgba(250, 250, 247, 0.66); }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.625rem;
  margin-top: 3rem;
}
.industry {
  padding: 1.125rem 0.75rem;
  border: 1px solid rgba(250, 250, 247, 0.12);
  border-radius: 10px;
  font-size: 0.875rem;
  text-align: center;
  color: rgba(250, 250, 247, 0.85);
  transition: border-color 0.15s, background 0.15s;
}
.industry:hover { border-color: rgba(232, 181, 72, 0.5); background: rgba(232, 181, 72, 0.04); }
.benchmark-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(250, 250, 247, 0.12);
}
.stat .num { font-family: 'Inter Tight', sans-serif; font-size: 2.5rem; font-weight: 600; color: var(--bg); letter-spacing: -0.02em; }
.stat .label { font-size: 0.875rem; color: rgba(250, 250, 247, 0.66); margin-top: 0.25rem; }

/* ====== Wizzy section ====== */
.wizzy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.wizzy-card {
  padding: 2.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 18px;
  position: relative;
}
.wizzy-terminal {
  background: var(--ink);
  border-radius: 10px;
  padding: 1.125rem 1.25rem;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(250, 250, 247, 0.92);
  margin-top: 1rem;
}
.term-prompt { color: var(--lead); }
.term-cmd { color: rgba(250, 250, 247, 0.92); }
.term-out { color: rgba(250, 250, 247, 0.6); }
.term-ok { color: var(--mql); }
.term-warn { color: var(--lead); }
.badge-free {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand);
  background: rgba(11, 110, 110, 0.1);
  padding: 0.3rem 0.625rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

/* ====== Agencies section ====== */
.agencies { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agencies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.portal-tile {
  aspect-ratio: 1.2;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 0.875rem;
  font-size: 0.75rem; gap: 0.375rem;
}
.portal-tile .name { font-weight: 600; color: var(--ink); font-size: 0.8125rem; }
.portal-tile .health-bar { height: 4px; border-radius: 100px; background: var(--line); overflow: hidden; margin-top: auto; }
.portal-tile .health-bar > span { display: block; height: 100%; border-radius: 100px; }
.portal-tile .meta { color: var(--ink-muted); font-size: 0.7rem; }

/* ====== Pricing tiers ====== */
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.tier {
  padding: 2rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(15, 20, 25, 0.18); }
.tier.tier-featured { border-color: var(--brand); background: var(--bg); box-shadow: 0 18px 40px -22px rgba(11, 110, 110, 0.32); }
.tier-tag {
  position: absolute;
  top: -10px; left: 1.75rem;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--bg);
  background: var(--brand);
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tier h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.tier .tier-desc { font-size: 0.875rem; color: var(--ink-muted); margin-bottom: 1.5rem; }
.tier-price { display: flex; align-items: baseline; gap: 0.375rem; margin-bottom: 0.375rem; }
.tier-price .amt { font-family: 'Inter Tight', sans-serif; font-size: 2.5rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.tier-price .unit { font-size: 0.875rem; color: var(--ink-muted); }
.tier-price-note { font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: 1.5rem; }
.tier .btn { width: 100%; justify-content: center; }
.tier-feat { list-style: none; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); display: grid; gap: 0.625rem; }
.tier-feat li { display: flex; gap: 0.625rem; font-size: 0.875rem; color: var(--ink-2); align-items: start; }
.tier-feat li svg { flex-shrink: 0; margin-top: 4px; color: var(--brand); }

/* ====== Comparison table ====== */
.compare-wrap { margin-top: 3rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg); }
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.compare th, .compare td {
  padding: 0.875rem 1.125rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.compare thead th {
  background: var(--bg-alt);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.compare tbody th {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.875rem;
}
.compare td { color: var(--ink-muted); font-size: 0.875rem; text-align: center; }
.compare td:first-child, .compare th:first-child { text-align: left; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare .check { color: var(--brand); }
.compare .dash { color: var(--line); }
.compare-section-row th { background: var(--bg-alt); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }

/* ====== FAQ ====== */
.faq { display: grid; gap: 0.625rem; margin-top: 3rem; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.15s;
}
.faq-item:hover { border-color: var(--ink-muted); }
.faq-item summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9375rem;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--ink-muted);
  font-weight: 400;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body { padding: 0 1.25rem 1.125rem; font-size: 0.9375rem; color: var(--ink-muted); line-height: 1.55; }

/* ====== Step list (for wizzy install) ====== */
.steps { margin-top: 3rem; display: grid; gap: 1.25rem; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step-num {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
}
.step h3 { margin-bottom: 0.375rem; font-size: 1.0625rem; }
.step p { font-size: 0.9375rem; line-height: 1.55; margin-bottom: 0.875rem; }
.step pre {
  background: var(--ink);
  color: rgba(250, 250, 247, 0.92);
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.8125rem;
  overflow-x: auto;
}

/* ====== Feature row (product page) ====== */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.feature-row:last-child { border-bottom: none; }
.feature-row.reverse > div:first-child { order: 2; }
.feature-row .feat-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.feature-row .feat-eyebrow .stage-chip { width: 12px; height: 12px; border-radius: 3px; }
.feature-row h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 0.75rem; }
.feature-row p { font-size: 1rem; line-height: 1.55; }
.feature-row ul.feat-list { list-style: none; margin-top: 1.5rem; display: grid; gap: 0.625rem; }
.feature-row ul.feat-list li { display: flex; gap: 0.625rem; font-size: 0.9375rem; color: var(--ink-2); align-items: start; }
.feature-row ul.feat-list li::before {
  content: '';
  width: 14px;
  height: 10px;
  margin-top: 6px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><polygon points='10,9 13,7 13,1 10,3' fill='%23084F4F'/><polygon points='0,3 10,3 13,1 3,1' fill='%231F8888'/><polygon points='0,9 10,9 10,3 0,3' fill='%230B6E6E'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ====== Visual cards (product page mocks) ====== */
.viz-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 18px 40px -22px rgba(15, 20, 25, 0.18);
}
.viz-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
.viz-card-title { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.viz-card-sub { font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.125rem; }
.viz-card-body { padding-top: 1.125rem; }

.gauge-wrap { display: flex; align-items: center; gap: 1.25rem; padding: 0.5rem 0; }
.gauge-num { font-family: 'Inter Tight', sans-serif; font-size: 3rem; font-weight: 600; color: var(--ink); line-height: 1; }
.gauge-meta { font-size: 0.75rem; color: var(--ink-muted); }
.gauge-bar { flex: 1; height: 6px; background: var(--line); border-radius: 100px; overflow: hidden; position: relative; }
.gauge-bar > span { display: block; height: 100%; background: linear-gradient(to right, var(--lead), var(--mql)); border-radius: 100px; }

.alert-list { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.alert {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.8125rem;
}
.alert-dot { width: 8px; height: 8px; border-radius: 50%; }
.alert-msg { color: var(--ink-2); }
.alert-time { color: var(--ink-muted); font-size: 0.75rem; }

.bench-row { display: grid; grid-template-columns: 1fr 80px 60px; gap: 0.75rem; align-items: center; padding: 0.5rem 0; font-size: 0.8125rem; border-bottom: 1px solid var(--line-soft); }
.bench-row:last-child { border-bottom: none; }
.bench-row .bench-label { color: var(--ink); font-weight: 500; }
.bench-row .bench-bar { height: 4px; background: var(--line); border-radius: 100px; overflow: hidden; }
.bench-row .bench-bar > span { display: block; height: 100%; border-radius: 100px; }
.bench-row .bench-val { font-family: 'SF Mono', Monaco, monospace; font-size: 0.75rem; color: var(--ink-muted); text-align: right; }

/* ====== Final CTA ====== */
.final-cta { padding: 7rem 0; text-align: center; }
.final-cta h2 { max-width: 36rem; margin: 0 auto 1.25rem; }
.final-cta p { max-width: 32rem; margin: 0 auto 2rem; font-size: 1.0625rem; }
.final-cta .hero-cta { justify-content: center; }

/* ====== Footer ====== */
footer {
  background: #0A0F12 !important;
  background-image: none !important;
  border-top: 1px solid rgba(250, 250, 247, 0.06);
  padding: 2.5rem 0 3rem;
  color: rgba(250, 250, 247, 0.55);
  font-size: 0.875rem;
}
footer .logo { color: rgba(250, 250, 247, 0.9); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: rgba(250, 250, 247, 0.55); transition: color 0.15s ease; }
.footer-links a:hover { color: rgba(250, 250, 247, 0.95); }

/* ============================================================
   Brick visual system — load-bearing brand component
   Use the .brick-mark inline as a list marker, decorative
   chip, or section-divider element.
   ============================================================ */

.brick-mark {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
}
.brick-mark.brick-lg { width: 22px; height: 16px; }
.brick-mark.brick-xl { width: 32px; height: 23px; }

/* default = brand teal */
.brick-mark .b-front { fill: var(--brand); }
.brick-mark .b-top   { fill: #1F8888; }
.brick-mark .b-side  { fill: var(--brand-2); }

.brick-mark.brick-lead .b-front { fill: var(--lead); }
.brick-mark.brick-lead .b-top   { fill: #F2C76A; }
.brick-mark.brick-lead .b-side  { fill: #B88D34; }

.brick-mark.brick-mql .b-front { fill: var(--mql); }
.brick-mark.brick-mql .b-top   { fill: #B5C58D; }
.brick-mark.brick-mql .b-side  { fill: #6F814E; }

.brick-mark.brick-sql .b-front { fill: var(--sql); }
.brick-mark.brick-sql .b-top   { fill: #6E91C2; }
.brick-mark.brick-sql .b-side  { fill: #2F4D7E; }

.brick-mark.brick-opp .b-front { fill: var(--opp); }
.brick-mark.brick-opp .b-top   { fill: #9D74C5; }
.brick-mark.brick-opp .b-side  { fill: #563474; }

.brick-mark.brick-customer .b-front { fill: var(--customer); }
.brick-mark.brick-customer .b-top   { fill: #1F8888; }
.brick-mark.brick-customer .b-side  { fill: #074E4E; }

/* Brick divider — horizontal row of small bricks between sections */
.brick-divider {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  opacity: 0.85;
}

/* Override feat-list bullets to use brick markers via class */
.feat-list.bricks { display: grid; gap: 0.625rem; list-style: none; margin-top: 1.5rem; }
.feat-list.bricks li { display: flex; gap: 0.75rem; font-size: 0.9375rem; color: var(--ink-2); align-items: start; line-height: 1.55; }
.feat-list.bricks li::before { content: none; }
.feat-list.bricks li > .brick-mark { margin-top: 5px; }

/* Upgrade problem-item flat squares to mini isometric bricks */
.problem-item .marker {
  width: 16px; height: 12px;
  border-radius: 0;
  background: none;
  margin-top: 6px;
  position: relative;
}
.problem-item .marker svg { width: 100%; height: 100%; }

/* ============================================================
   Pricing tier elevation
   Lift the featured tier visually so the eye lands there first.
   ============================================================ */

.tiers-grid { align-items: stretch; }
.tier { position: relative; }
.tier.tier-featured {
  border: 1.5px solid var(--brand);
  box-shadow: 0 24px 50px -24px rgba(11, 110, 110, 0.35), 0 4px 0 0 var(--brand) inset;
  transform: translateY(-12px);
  background: linear-gradient(180deg, rgba(11, 110, 110, 0.025) 0%, var(--bg) 60%);
  z-index: 2;
}
.tier.tier-featured:hover { transform: translateY(-15px); }
.tier.tier-featured .tier-tag {
  background: var(--brand);
  top: -14px;
  padding: 0.4rem 0.875rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px -4px rgba(11, 110, 110, 0.4);
}

/* ============================================================
   Pricing brick-stack visual
   Each tier rendered as a stack of bricks where each brick is
   a feature group. The featured tier glows.
   ============================================================ */

.tier-bricks-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0 0;
  align-items: end;
}
.tier-stack { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.tier-stack .stack-label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  margin-top: 0.625rem;
  letter-spacing: -0.005em;
}
.tier-stack .stack-price {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.tier-stack--featured .stack-label { color: var(--brand); }
.tier-stack--featured .stack-bricks { filter: drop-shadow(0 8px 16px rgba(11, 110, 110, 0.3)); }

/* ============================================================
   Pull-stat hero (used on agencies page)
   ============================================================ */

.pull-stat-hero {
  padding: 4rem 0 3rem;
  text-align: center;
}
.pull-stat-hero .pull-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--brand);
  background: rgba(11, 110, 110, 0.08);
  padding: 0.4rem 0.75rem; border-radius: 100px;
  margin-bottom: 1.5rem;
}
.pull-stat-hero h1 {
  max-width: 36rem; margin: 0 auto 1rem;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}
.pull-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 920px;
  margin: 3rem auto 0;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pull-stat {
  text-align: center;
  padding: 0 1.5rem;
  border-right: 1px solid var(--line);
  position: relative;
}
.pull-stat:last-child { border-right: none; }
.pull-stat .pull-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--brand);
  line-height: 1;
}
.pull-stat .pull-label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-top: 0.625rem;
}
.pull-stat .pull-sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 0.25rem;
  line-height: 1.45;
}

/* ============================================================
   Sankey funnel — visualization of lifecycle drop-off
   The dramatic "where contacts go" moment.
   ============================================================ */

.sankey-section {
  padding: 6rem 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.sankey-section .section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.sankey-wrap {
  background: radial-gradient(ellipse at top, #1A2228 0%, #0E1417 60%, #0A0F12 100%);
  border: 1px solid rgba(60, 70, 75, 0.55);
  border-radius: 20px;
  padding: 2.25rem 1.75rem 1.5rem;
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(250, 250, 247, 0.05), inset 0 0 60px rgba(11, 110, 110, 0.04);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.sankey-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 181, 72, 0.45), transparent);
}
.sankey-wrap::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(232, 181, 72, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.sankey {
  width: 100%;
  height: auto;
  display: block;
}

.sankey-band {
  transition: opacity 0.3s ease;
}
.sankey-section.in-view .sankey-band {
  animation: sankeyBandIn 1.1s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.sankey-section.in-view .sankey-band-1 { animation-delay: 0.15s; }
.sankey-section.in-view .sankey-band-2 { animation-delay: 0.3s; }
.sankey-section.in-view .sankey-band-3 { animation-delay: 0.45s; }
.sankey-section.in-view .sankey-band-4 { animation-delay: 0.6s; }
.sankey-section.in-view .sankey-drop-1 { animation-delay: 0.5s; }
.sankey-section.in-view .sankey-drop-2 { animation-delay: 0.65s; }
.sankey-section.in-view .sankey-drop-3 { animation-delay: 0.8s; }
.sankey-section.in-view .sankey-drop-4 { animation-delay: 0.95s; }

@keyframes sankeyBandIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sankey-block { transition: filter 0.2s ease; }
.sankey-block:hover { filter: brightness(1.08); cursor: default; }

.sankey-pain {
  margin-top: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(250, 250, 247, 0.08);
  position: relative;
}
.sankey-pain-eyebrow {
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lead);
  margin-bottom: 1.25rem;
}
.sankey-pain-note {
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: rgba(250, 250, 247, 0.55);
  line-height: 1.55;
  margin: -0.5rem 0 1.25rem;
  max-width: 60ch;
}
.sankey-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.sankey-pain-item {
  display: grid;
  gap: 0.5rem;
}
.sankey-pain-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bg);
  letter-spacing: -0.005em;
}
.sankey-pain-body {
  font-size: 0.8125rem;
  color: rgba(250, 250, 247, 0.55);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .sankey-pain-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sankey-pain-grid { grid-template-columns: 1fr; }
}

.sankey-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.25rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(250, 250, 247, 0.08);
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: rgba(250, 250, 247, 0.5);
  flex-wrap: wrap;
  gap: 0.625rem;
  position: relative;
}
.sankey-foot span:last-child { color: var(--lead); font-weight: 500; }

@media (max-width: 760px) {
  .sankey-wrap { padding: 1rem; overflow-x: auto; }
  .sankey { min-width: 720px; }
}

/* ============================================================
   Manifesto — pure conviction moment, no graphic, no CTA
   Big type. Two lines. The rhetorical anchor of the page.
   ============================================================ */

.manifesto {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(250, 250, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(250, 250, 247, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.06) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  color: var(--bg);
  padding: clamp(5rem, 12vw, 9rem) 0;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 181, 72, 0.4), transparent);
}
.manifesto::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 181, 72, 0.4), transparent);
}
.manifesto-tag {
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lead);
  margin-bottom: 2.25rem;
  display: block;
}
.manifesto-tag::before { content: '/ '; opacity: 0.6; }
.manifesto h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--bg);
  max-width: 26ch;
}
.manifesto h2 .m-line { display: block; }
.manifesto h2 .m-quiet { color: rgba(250, 250, 247, 0.45); }
.manifesto h2 .m-mark { color: var(--lead); position: relative; display: inline-block; }
.manifesto-foot {
  margin-top: 2.5rem;
  font-family: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;
  font-size: 0.8125rem;
  color: rgba(250, 250, 247, 0.55);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.manifesto-foot::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(250, 250, 247, 0.35);
}

/* ============================================================
   System Architecture — three-layer stack
   Visualizes HubSpot CRM → FunnelLedger intelligence → outputs.
   Establishes the "layer on top of HubSpot" claim.
   ============================================================ */

.architecture {
  padding: 6rem 0;
  background-color: #0E1417;
  background-image:
    linear-gradient(rgba(250, 250, 247, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(250, 250, 247, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.08) 1px, transparent 1px),
    radial-gradient(ellipse at top, rgba(26, 34, 40, 0.4) 0%, transparent 60%);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px, auto;
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.architecture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 181, 72, 0.4), transparent);
}
.architecture::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -5%;
  width: 40%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(11, 110, 110, 0.1) 0%, transparent 65%);
  pointer-events: none;
}
.architecture > .container { position: relative; z-index: 1; }
.architecture .section-head { text-align: center; margin: 0 auto 3rem; max-width: 38rem; }
.architecture .section-head h2 { color: var(--bg); }
.architecture .section-head p { color: rgba(250, 250, 247, 0.62); }

.arch-stack {
  max-width: 780px;
  margin: 1rem auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.arch-layer {
  border-radius: 14px;
  padding: 1.5rem 1.625rem;
  position: relative;
  border: 1px solid transparent;
  transition: transform 0.2s ease;
}
.arch-layer::before {
  /* subtle inner light from upper-left */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%);
  pointer-events: none;
}
.arch-layer:hover { transform: translateY(-1px); }

/* Premium unified treatment is handled in the layer-specific blocks below */

.arch-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.arch-label {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.arch-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.625rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* Outputs layer (top) — dark panel, cream-tinted accent */
.arch-outputs {
  background: linear-gradient(180deg, rgba(232, 220, 195, 0.05) 0%, rgba(232, 220, 195, 0.014) 100%), #181D21;
  border: 1px solid rgba(232, 220, 195, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(232, 220, 195, 0.12),
    0 14px 36px -10px rgba(0, 0, 0, 0.45);
}
.arch-outputs .arch-label { color: rgba(245, 240, 230, 0.95); }
.arch-outputs .arch-tag {
  background: rgba(232, 220, 195, 0.08);
  color: rgba(232, 220, 195, 0.72);
  border: 1px solid rgba(232, 220, 195, 0.18);
}

/* FunnelLedger layer (middle, brand-prominent) — deepest tinted teal */
.arch-funnelledger {
  background: linear-gradient(135deg, rgba(11, 110, 110, 0.55) 0%, rgba(8, 79, 79, 0.72) 100%), #0E2828;
  color: var(--bg);
  border: 1px solid rgba(31, 140, 140, 0.48);
  padding: 1.625rem 1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(31, 140, 140, 0.3),
    0 18px 40px -10px rgba(11, 110, 110, 0.22),
    0 28px 60px -16px rgba(0, 0, 0, 0.55);
}
.arch-funnelledger .arch-label { color: var(--bg); font-size: 1rem; }
.arch-funnelledger .arch-tag {
  background: rgba(250, 250, 247, 0.13);
  color: var(--bg);
  border: 1px solid rgba(250, 250, 247, 0.24);
}

/* HubSpot layer (bottom) — dark panel, warm-tinted accent */
.arch-hubspot {
  background: linear-gradient(180deg, rgba(240, 200, 170, 0.055) 0%, rgba(240, 200, 170, 0.016) 100%), #1B1611;
  border: 1px solid rgba(240, 200, 170, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(240, 200, 170, 0.14),
    0 14px 36px -10px rgba(0, 0, 0, 0.45);
}
.arch-hubspot .arch-label { color: rgba(248, 220, 195, 0.95); }
.arch-hubspot .arch-tag {
  background: rgba(240, 200, 170, 0.09);
  color: rgba(240, 200, 170, 0.74);
  border: 1px solid rgba(240, 200, 170, 0.22);
}

/* Chips (used in outputs and HubSpot layers) */
.arch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.arch-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.65);
}
.arch-outputs .arch-chip {
  color: rgba(245, 240, 230, 0.92);
  border-color: rgba(232, 220, 195, 0.22);
  background: rgba(232, 220, 195, 0.07);
}
.arch-hubspot .arch-chip {
  color: rgba(248, 230, 215, 0.92);
  border-color: rgba(240, 200, 170, 0.22);
  background: rgba(240, 200, 170, 0.07);
}
.arch-chip-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Modules (inside FunnelLedger layer) */
.arch-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
}
.arch-module {
  background: rgba(250, 250, 247, 0.08);
  border: 1px solid rgba(250, 250, 247, 0.18);
  border-radius: 10px;
  padding: 0.875rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.arch-module:hover { background: rgba(250, 250, 247, 0.14); border-color: rgba(250, 250, 247, 0.3); }
.arch-mod-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.125rem;
}
.arch-mod-name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--bg);
  letter-spacing: -0.005em;
}
.arch-mod-sub {
  font-size: 0.7rem;
  color: rgba(250, 250, 247, 0.7);
  line-height: 1.45;
}

/* Vertical connector — animated flowing dots between layers */
.arch-arrow {
  display: flex;
  justify-content: center;
  padding: 0.375rem 0;
}
.arch-flow {
  position: relative;
  width: 4px;
  height: 36px;
  overflow: hidden;
}
.arch-flow-dot {
  position: absolute;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(11, 110, 110, 0.55);
  bottom: -6px;
  opacity: 0;
}
.arch-stack.in-view .arch-flow-dot {
  animation: archDotFlow 2.4s linear infinite;
}
.arch-stack.in-view .arch-flow-dot:nth-child(1) { animation-delay: 0s; }
.arch-stack.in-view .arch-flow-dot:nth-child(2) { animation-delay: 0.8s; }
.arch-stack.in-view .arch-flow-dot:nth-child(3) { animation-delay: 1.6s; }

@keyframes archDotFlow {
  0%   { bottom: -6px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { bottom: 42px; opacity: 0; }
}

/* Sequential entrance animations — only run when JS adds .js-anim */
.arch-stack.js-anim .arch-hubspot,
.arch-stack.js-anim .arch-funnelledger,
.arch-stack.js-anim .arch-outputs { opacity: 0; }
.arch-stack.js-anim .arch-module { opacity: 0; }
.arch-stack.js-anim .arch-chip { opacity: 0; }

.arch-stack.js-anim.in-view .arch-hubspot {
  animation: archLayerIn 0.7s 0s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.arch-stack.js-anim.in-view .arch-funnelledger {
  animation: archLayerIn 0.7s 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
             archEasyPulse 6s 1.4s ease-in-out infinite;
}
.arch-stack.js-anim.in-view .arch-outputs {
  animation: archLayerIn 0.7s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.arch-stack.js-anim.in-view .arch-module {
  animation: archModIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.arch-stack.js-anim.in-view .arch-module:nth-child(1) { animation-delay: 0.5s; }
.arch-stack.js-anim.in-view .arch-module:nth-child(2) { animation-delay: 0.6s; }
.arch-stack.js-anim.in-view .arch-module:nth-child(3) { animation-delay: 0.7s; }
.arch-stack.js-anim.in-view .arch-module:nth-child(4) { animation-delay: 0.8s; }

.arch-stack.js-anim.in-view .arch-hubspot .arch-chip {
  animation: archChipIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.arch-stack.js-anim.in-view .arch-hubspot .arch-chip:nth-child(1) { animation-delay: 0.18s; }
.arch-stack.js-anim.in-view .arch-hubspot .arch-chip:nth-child(2) { animation-delay: 0.23s; }
.arch-stack.js-anim.in-view .arch-hubspot .arch-chip:nth-child(3) { animation-delay: 0.28s; }
.arch-stack.js-anim.in-view .arch-hubspot .arch-chip:nth-child(4) { animation-delay: 0.33s; }
.arch-stack.js-anim.in-view .arch-hubspot .arch-chip:nth-child(5) { animation-delay: 0.38s; }
.arch-stack.js-anim.in-view .arch-hubspot .arch-chip:nth-child(6) { animation-delay: 0.43s; }

.arch-stack.js-anim.in-view .arch-outputs .arch-chip {
  animation: archChipIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.arch-stack.js-anim.in-view .arch-outputs .arch-chip:nth-child(1) { animation-delay: 0.95s; }
.arch-stack.js-anim.in-view .arch-outputs .arch-chip:nth-child(2) { animation-delay: 1.0s; }
.arch-stack.js-anim.in-view .arch-outputs .arch-chip:nth-child(3) { animation-delay: 1.05s; }
.arch-stack.js-anim.in-view .arch-outputs .arch-chip:nth-child(4) { animation-delay: 1.1s; }
.arch-stack.js-anim.in-view .arch-outputs .arch-chip:nth-child(5) { animation-delay: 1.15s; }

@keyframes archLayerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes archModIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes archChipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes archEasyPulse {
  0%, 100% { box-shadow: 0 18px 40px -22px rgba(11, 110, 110, 0.35); }
  50%      { box-shadow: 0 26px 60px -20px rgba(11, 110, 110, 0.55); }
}

/* Module hover — small lift + brick rotation */
.arch-module { cursor: default; }
.arch-module:hover {
  background: rgba(250, 250, 247, 0.16);
  border-color: rgba(250, 250, 247, 0.4);
  transform: translateY(-2px);
}
.arch-module .brick-mark { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.arch-module:hover .brick-mark { transform: rotate(-8deg) scale(1.12); }

/* Output chip pinged state — destination of ping */
.arch-outputs .arch-chip {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, color 0.25s ease;
}
.arch-outputs .arch-chip.arch-pinged {
  background: rgba(31, 140, 140, 0.18);
  border-color: rgba(31, 140, 140, 0.8);
  color: #DFF5F5;
  font-weight: 600;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 4px rgba(31, 140, 140, 0.18), 0 8px 18px -8px rgba(11, 110, 110, 0.5);
}
.arch-chip-dot { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.arch-outputs .arch-chip.arch-pinged .arch-chip-dot {
  transform: scale(1.4);
}

/* The traveling ping particle */
.arch-ping {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 14px rgba(11, 110, 110, 0.7), 0 0 6px rgba(11, 110, 110, 0.9);
  pointer-events: none;
  z-index: 100;
  margin: -3px 0 0 -3px;
  animation: archPing 0.75s cubic-bezier(0.4, 0, 0.25, 1) forwards;
}
.arch-ping.arch-ping-lead { background: var(--lead); box-shadow: 0 0 14px rgba(232, 181, 72, 0.7); }
.arch-ping.arch-ping-mql { background: var(--mql); box-shadow: 0 0 14px rgba(156, 176, 113, 0.7); }
.arch-ping.arch-ping-sql { background: var(--sql); box-shadow: 0 0 14px rgba(74, 111, 165, 0.7); }
.arch-ping.arch-ping-customer { background: var(--customer); box-shadow: 0 0 14px rgba(11, 110, 110, 0.7); }
@keyframes archPing {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--ping-dx, 0), var(--ping-dy, 0)) scale(0.6); opacity: 0; }
}

/* 3D feel is now provided by the extruded pseudo-element faces on each layer.
   No global rotateX needed (would conflict with skewed top/side faces). */

@media (prefers-reduced-motion: reduce) {
  .arch-module .brick-mark,
  .arch-outputs .arch-chip { transition: none !important; }
  .arch-ping { display: none !important; }
  .arch-stack .arch-layer { transform: none !important; }
}

/* Reduced motion: disable all of this */
@media (prefers-reduced-motion: reduce) {
  .arch-stack.js-anim .arch-layer,
  .arch-stack.js-anim .arch-module,
  .arch-stack.js-anim .arch-chip {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .arch-flow-dot { animation: none !important; opacity: 0 !important; }
  .arch-stack.in-view .arch-funnelledger { animation: none !important; }
}

/* ============================================================
   Trust strip — Safe by default trio
   Sits just below the hero, surfaces existing safety claims.
   ============================================================ */

.trust-strip {
  padding: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.trust-item {
  padding: 1.25rem 1.5rem;
  display: flex; gap: 0.875rem; align-items: start;
  border-right: 1px solid var(--line-soft);
}
.trust-item:last-child { border-right: none; }
.trust-item .trust-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(11, 110, 110, 0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.trust-item h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.125rem;
}
.trust-item p {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* ============================================================
   Findings showcase — the "holy shit" moment
   Dramatizes what Wizzy actually detects on a real portal.
   ============================================================ */

.findings-showcase { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.findings-showcase .section-head { text-align: center; margin: 0 auto 3rem; }

.findings-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgba(15, 20, 25, 0.22);
}
.findings-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-alt);
  flex-wrap: wrap;
  gap: 1rem;
}
.findings-title {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.8125rem;
  color: var(--ink);
  font-weight: 600;
}
.findings-sub {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}
.findings-score {
  display: flex; align-items: baseline; gap: 0.375rem;
  font-size: 0.875rem; color: var(--ink-muted);
}
.findings-score strong {
  font-family: 'Inter Tight', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.findings-section { padding: 1.5rem 1.75rem; }
.findings-section + .findings-section { border-top: 1px solid var(--line-soft); }
.findings-section--reco { background: linear-gradient(180deg, rgba(11, 110, 110, 0.025), transparent); }
.findings-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  margin-bottom: 1rem;
}

.finding {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px dashed var(--line-soft);
}
.finding:last-child { border-bottom: none; padding-bottom: 0; }
.finding:first-child { padding-top: 0; }
.finding-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.finding-dot.warn { background: var(--lead); box-shadow: 0 0 0 4px rgba(232, 181, 72, 0.18); }
.finding-dot.info { background: var(--sql); box-shadow: 0 0 0 4px rgba(74, 111, 165, 0.18); }
.finding-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.finding-meta {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}
.finding-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.finding-num.warn { color: #B88D34; }

.reco {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.625rem 0;
}
.reco-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  height: 22px;
  margin-top: 1px;
}
.reco-tag.high { background: rgba(232, 181, 72, 0.18); color: #B88D34; }
.reco-tag.med { background: rgba(11, 110, 110, 0.1); color: var(--brand); }
.reco-text {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.reco-text strong { font-weight: 600; }

.findings-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.75rem;
  background: var(--ink);
  color: rgba(250, 250, 247, 0.66);
  font-size: 0.8125rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.findings-foot strong { color: var(--bg); font-weight: 500; }
.findings-foot a { color: var(--lead); font-weight: 500; }
.findings-foot a:hover { text-decoration: underline; }

/* ============================================================
   Safe to activate — operational governance pipeline
   Four-step pipeline section that makes the safety claim
   tangible. Sits between findings showcase and time machine.
   ============================================================ */

.safe-to-activate { padding: 6rem 0; background: var(--bg); }
.safe-to-activate .section-head { max-width: 40rem; }
.safe-to-activate .section-head p {
  font-size: 1.0625rem;
  margin-top: 0.875rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.safety-pipeline {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 3rem;
}
.safety-step {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.625rem;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.safety-step:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -20px rgba(11, 110, 110, 0.25);
}
.safety-step-head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem;
}
.safety-num {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(11, 110, 110, 0.1);
  color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.safety-icon { color: var(--brand); flex-shrink: 0; }
.safety-step h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.safety-step p {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.safety-arrow {
  display: flex;
  align-items: center;
  color: var(--line);
  flex-shrink: 0;
  padding-top: 1.25rem;
}

.safe-to-activate .safe-foot {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.safe-to-activate .safe-foot strong { color: var(--ink); font-weight: 600; }
.safe-to-activate .safe-foot svg { color: var(--brand); flex-shrink: 0; }

/* ============================================================
   Source attribution strip — Benchmarks powered by
   Renders source names as styled wordmarks.
   ============================================================ */

.source-strip {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(250, 250, 247, 0.12);
}
.source-strip-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 250, 247, 0.5);
  text-align: center;
  margin-bottom: 1.5rem;
}
.source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
  justify-content: center;
  align-items: center;
}
.source-mark {
  display: inline-flex; align-items: baseline;
  gap: 0.375rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(250, 250, 247, 0.85);
  padding: 0.625rem 0;
  transition: color 0.15s;
}
.source-mark:hover { color: var(--bg); }
.source-mark .source-amp {
  color: rgba(250, 250, 247, 0.5);
  font-weight: 400;
  font-style: italic;
}
.source-mark.serif { font-family: 'Georgia', serif; font-weight: 700; letter-spacing: 0; }
.source-mark.mono { font-family: 'SF Mono', Monaco, monospace; font-size: 1rem; letter-spacing: -0.01em; font-weight: 500; }
.source-mark.upper { text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; }

/* ============================================================
   Resources / education pages
   ============================================================ */
.resource-hero {
  padding: 4.5rem 0 3rem;
  text-align: center;
}
.resource-hero .eyebrow { margin-bottom: 1.25rem; }
.resource-hero h1 {
  max-width: 840px;
  margin: 0 auto;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
}
.resource-hero .lead {
  max-width: 720px;
  margin: 1.25rem auto 0;
  font-size: 1.125rem;
  color: var(--ink-2);
}
.resource-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding: 2rem 0 5rem;
}
.resource-toc {
  position: sticky;
  top: 88px;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
}
.resource-toc-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.75rem;
}
.resource-toc a {
  display: block;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 0.48rem 0;
  border-top: 1px solid var(--line-soft);
}
.resource-toc a:hover { color: var(--ink); }
.resource-content {
  min-width: 0;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: 0 18px 48px rgba(15,20,25,0.055);
}
.resource-content h2 {
  margin-top: 2.8rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.resource-content h2:first-child { margin-top: 0; }
.resource-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: 1.18rem;
}
.resource-content p,
.resource-content li {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.7;
}
.resource-content p + p { margin-top: 0.9rem; }
.resource-content ul,
.resource-content ol {
  padding-left: 1.3rem;
  margin: 0.75rem 0 1.1rem;
}
.resource-content li + li { margin-top: 0.4rem; }
.answer-box,
.resource-cta,
.source-note {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(11,110,110,0.055);
  padding: 1rem 1.15rem;
  margin: 1.3rem 0;
}
.answer-box strong,
.resource-cta strong { color: var(--ink); }
.resource-cta {
  background: rgba(232,181,72,0.16);
  border-color: rgba(232,181,72,0.4);
}
.source-note {
  background: rgba(15,20,25,0.035);
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.resource-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0 1.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
}
.resource-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.resource-table th,
.resource-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
  line-height: 1.48;
}
.resource-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(250,250,247,0.78);
}
.resource-table tr:last-child td { border-bottom: none; }
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-bottom: 5rem;
}
.resource-card {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  padding: 1.25rem;
  min-height: 230px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(15,20,25,0.045);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.resource-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11,110,110,0.35);
}
.resource-card .kicker,
.article-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.resource-card h2 {
  font-size: 1.28rem;
  line-height: 1.1;
}
.resource-card p {
  font-size: 0.93rem;
  line-height: 1.55;
}
.resource-card .read-link {
  align-self: end;
  font-weight: 600;
  color: var(--ink);
}
.related-resources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.related-resources a {
  display: inline-flex;
  margin: 0.35rem 0.65rem 0.35rem 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255,255,255,0.55);
  font-size: 0.9rem;
}
.related-resources a:hover {
  border-color: var(--brand);
  color: var(--ink);
}
.industry-stage-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.3rem 0 1.8rem;
}
.industry-stage-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(250,250,247,0.74)),
    rgba(255,255,255,0.72);
  padding: 1.15rem;
  box-shadow: 0 12px 28px rgba(15,20,25,0.04);
}
.industry-stage-card h3 {
  margin-top: 0.45rem;
  margin-bottom: 0.55rem;
}
.industry-stage-card p {
  font-size: 0.93rem;
}
.stage-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.stage-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.28rem 0.58rem;
  border: 1px solid rgba(11,110,110,0.22);
  border-radius: 999px;
  background: rgba(11,110,110,0.065);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.stage-evidence {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}
.stage-evidence strong {
  color: var(--ink);
}

/* ====== Responsive ====== */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; gap: 1rem; }
  .nav-cta { grid-column: 2; }
  .logo, .nav-cta { min-width: 0; }
}
@media (max-width: 960px) {
  .trust-strip-inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .trust-item:last-child { border-bottom: none; }
  .findings-head { flex-direction: column; align-items: flex-start; }
  .safety-pipeline { flex-direction: column; gap: 1rem; }
  .safety-arrow { transform: rotate(90deg); justify-content: center; padding: 0; }
  .arch-modules { grid-template-columns: repeat(2, 1fr); }
  .source-row { gap: 1rem 2rem; }
  .hero-grid, .problem-grid, .wizzy-grid, .agencies-grid, .feature-row { grid-template-columns: 1fr; gap: 3rem; }
  .feature-row.reverse > div:first-child { order: 1; }
  .pillars-grid, .tiers-grid { grid-template-columns: 1fr; }
  .tm-grid { grid-template-columns: 1fr; gap: 3rem; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .benchmark-stats { grid-template-columns: 1fr; gap: 1.5rem; }
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; gap: 1rem; }
  .nav-cta { grid-column: 2; }
  .logo, .nav-cta { min-width: 0; }
  .resource-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .resource-toc { position: static; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  .industry-stage-library { grid-template-columns: 1fr; }
  .hero { padding: 3rem 0 5rem; }
  section { padding: 4rem 0; }
  .feature-row { padding: 3rem 0; }
  .brick-stage { min-height: 380px; }
  .compare-wrap { overflow-x: auto; }
  .compare { min-width: 540px; }
}
@media (max-width: 960px) {
  .tier.tier-featured { transform: translateY(0); }
  .tier-bricks-hero { grid-template-columns: 1fr; gap: 1.25rem; padding: 1rem 1.5rem; }
  .pull-stat-grid { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem 0; }
  .pull-stat { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
  .pull-stat:last-child { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 560px) {
  .nav-cta .btn-ghost { display: none; }
  .footer-links { gap: 0.8rem 1rem; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-content { border-radius: 14px; }
}

/* ============================================================
   Graph-paper technical background (homepage)
   ============================================================ */
body.home-graph {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(15, 20, 25, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 20, 25, 0.024) 1px, transparent 1px),
    linear-gradient(rgba(15, 20, 25, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 20, 25, 0.045) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
/* Sections that need a solid background can opt-in via .solid-bg */
body.home-graph .hero,
body.home-graph .sankey-section,
body.home-graph section:not(.problem):not(.architecture):not(.timemachine):not(.manifesto):not(.founding-dark):not(.benchmark):not(.dark-section):not(.agencies):not(.agency-section) {
  background: transparent;
}

/* ============================================================
   Hero flowchain — stages flowing into Dormant cube + reason
   ============================================================ */
.hero-flowchain {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.flowchain {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 460px;
  border: 1px solid rgba(229, 224, 214, 0.84);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(250,250,247,0.54)),
    radial-gradient(circle at 62% 52%, rgba(11,110,110,0.1), transparent 18rem);
  box-shadow:
    0 20px 50px rgba(15, 20, 25, 0.075),
    inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
}
.flowchain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,20,25,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,20,25,0.027) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.flowchain-source {
  position: absolute;
  left: 1rem;
  top: 1rem;
  bottom: 1rem;
  width: 132px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 0.5rem;
  z-index: 3;
}
.src-node {
  border-radius: 12px;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(229,224,214,0.9);
  box-shadow: 0 8px 22px rgba(15,20,25,0.055);
}
.src-node span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.src-node.quiet { opacity: 0.72; }
.src-node.node-lead span { color: #B88D34; }
.src-node.node-mql span { color: #5E7045; }
.src-node.node-sql span { color: #375987; }
.src-node.node-opp span { color: #5E3D7D; }
.src-node.node-customer span { color: #0B6E6E; }

.flowchain-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.flow-path {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.42;
  stroke-dasharray: 4 7;
}
.flow-path.path-lead { stroke: #E8B548; }
.flow-path.path-mql { stroke: #9CB071; }
.flow-path.path-sql { stroke: #4A6FA5; }

.flow-packet {
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(15,20,25,0.2));
}
.flow-packet.packet-lead {
  fill: #E8B548;
  offset-path: path("M160 60 C240 60 250 220 290 220");
  animation: packetMove 5.8s ease-in-out infinite;
}
.flow-packet.packet-mql {
  fill: #9CB071;
  offset-path: path("M160 145 C240 145 250 230 290 230");
  animation: packetMove 4.2s ease-in-out infinite;
  animation-delay: 0.7s;
}
.flow-packet.packet-sql {
  fill: #4A6FA5;
  offset-path: path("M160 230 C240 230 250 240 290 240");
  animation: packetMove 6.6s ease-in-out infinite;
  animation-delay: 1.4s;
}
@keyframes packetMove {
  0%, 12% { opacity: 0; offset-distance: 0%; transform: scale(0.8); }
  22% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  88%, 100% { opacity: 0; offset-distance: 100%; transform: scale(0.7); }
}

.flow-cube-zone {
  position: absolute;
  top: 50%;
  left: 58%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  z-index: 4;
  perspective: 700px;
}
.flow-cube {
  position: absolute;
  inset: 22px 26px 18px 12px;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(32deg);
  animation: cubeBreath 5.4s ease-in-out infinite;
}
.fc-face {
  position: absolute;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(11, 110, 110, 0.28);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
.fc-front {
  transform: translateZ(36px);
  display: grid;
  place-items: center;
  background: rgba(250,250,247,0.5);
}
.fc-back { transform: rotateY(180deg) translateZ(36px); }
.fc-right { transform: rotateY(90deg) translateZ(36px); background: rgba(11,110,110,0.09); }
.fc-left { transform: rotateY(-90deg) translateZ(36px); }
.fc-top { transform: rotateX(90deg) translateZ(36px); background: rgba(232,181,72,0.08); }
.fc-bottom { transform: rotateX(-90deg) translateZ(36px); background: rgba(42,50,59,0.045); }
.fc-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0F1419;
}
.fc-gridline {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(11,110,110,0.1);
  border-radius: 2px;
}
.fc-gridline::before,
.fc-gridline::after {
  content: '';
  position: absolute;
  background: rgba(11,110,110,0.09);
}
.fc-gridline::before { left: 50%; top: 0; width: 1px; height: 100%; }
.fc-gridline::after { top: 50%; left: 0; height: 1px; width: 100%; }
.fc-port {
  position: absolute;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--port-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--port-color), transparent 75%);
  animation: portPulse 4s ease-in-out infinite;
}
.fc-port.port-lead { top: 22px; --port-color: var(--lead); animation-delay: 0.2s; }
.fc-port.port-mql { top: 42px; --port-color: var(--mql); animation-delay: 0.8s; }
.fc-port.port-sql { top: 62px; --port-color: var(--sql); animation-delay: 1.5s; }
@keyframes portPulse {
  0%, 70%, 100% { opacity: 0.55; transform: scale(0.9); }
  25% { opacity: 1; transform: scale(1); }
}
@keyframes cubeBreath {
  0%, 100% { transform: rotateX(-18deg) rotateY(32deg) translateY(0); }
  50% { transform: rotateX(-18deg) rotateY(32deg) translateY(-3px); }
}

.flow-reason {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 150px;
  min-height: 70px;
  transform: translateY(-50%);
  z-index: 5;
  border: 1px solid rgba(11,110,110,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 14px 30px rgba(15,20,25,0.075);
  display: grid;
  place-items: center;
  padding: 0.75rem;
  text-align: center;
}
.flow-reason::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 50%;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(11,110,110,0), rgba(11,110,110,0.34));
}
.flow-reason .reason-swap {
  position: absolute;
  inset: 0.75rem;
  display: grid;
  place-items: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  color: var(--brand-2);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(5px);
  animation: reasonSwap 9s ease-in-out infinite;
}
.flow-reason .reason-swap:nth-child(1) { animation-delay: 0s; }
.flow-reason .reason-swap:nth-child(2) { animation-delay: 3s; }
.flow-reason .reason-swap:nth-child(3) { animation-delay: 6s; }
@keyframes reasonSwap {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  14%, 28% { opacity: 1; transform: translateY(0); }
  36%, 100% { opacity: 0; transform: translateY(-5px); }
}

/* ============================================================
   Leakage pair: brick stack + live ledger
   ============================================================ */
.leakage-pair {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2rem;
}
.leakage-stack {
  display: flex;
  align-items: center;
  justify-content: center;
}
.leakage-stack svg { max-width: 100%; height: auto; }

.ledger {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.7)),
    var(--bg);
  border: 1px solid rgba(229, 224, 214, 0.94);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 28px 80px rgba(15, 20, 25, 0.11),
    inset 0 1px 0 rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
}
.ledger-top {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(250,250,247,0.6);
}
.ledger-brand { display: flex; align-items: center; gap: 0.65rem; }
.ledger-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ledger-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ledger-name { font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em; color: var(--ink); }
.ledger-sub {
  margin-top: 0.1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}
.ledger-live {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: rgba(11, 110, 110, 0.09);
  color: var(--brand);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.ledger-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.88); }
  45% { opacity: 1; transform: scale(1); }
}
.ledger-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(250,250,247,0.32);
}
.ledger-metric {
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--line-soft);
}
.ledger-metric:last-child { border-right: none; }
.lm-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
}
.lm-value {
  font-family: 'Inter Tight', sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.lm-value.warn { color: #B88D34; }
.lm-value.ok { color: var(--brand); }
.ledger-thead,
.ledger-row {
  display: grid;
  grid-template-columns: 54px 1.3fr 88px 1.05fr;
  gap: 0.7rem;
  align-items: center;
}
.ledger-thead {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(244,241,234,0.56);
}
.ledger-rows {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}
.ledger-row {
  padding: 0.78rem 1rem;
  border-bottom: 1px solid rgba(229, 224, 214, 0.56);
  background: rgba(255,255,255,0.42);
  transition: background 420ms ease, transform 420ms ease, opacity 420ms ease;
}
.ledger-row.is-new {
  background: rgba(232, 181, 72, 0.11);
  transform: translateY(-2px);
}
.ledger-row.is-faded { opacity: 0.5; }
.lr-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.lr-move { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.stage-pill {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 0.48rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  background: rgba(15, 20, 25, 0.06);
  white-space: nowrap;
}
.stage-pill.sp-lead { color: #B88D34; background: rgba(232,181,72,0.16); }
.stage-pill.sp-mql { color: #5E7045; background: rgba(156,176,113,0.18); }
.stage-pill.sp-sql { color: #375987; background: rgba(74,111,165,0.16); }
.stage-pill.sp-opp { color: #5E3D7D; background: rgba(122,79,165,0.15); }
.stage-pill.sp-customer { color: #0B6E6E; background: rgba(11,110,110,0.13); }
.stage-pill.sp-dormant { color: #5F6965; background: rgba(142,153,148,0.16); }
.lr-arrow { color: var(--ink-muted); font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; }
.ledger-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  height: 22px;
  padding: 0 0.52rem;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ledger-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ledger-status.st-approved { color: var(--brand); background: rgba(11,110,110,0.09); }
.ledger-status.st-posted { color: #5F6965; background: rgba(142,153,148,0.12); }
.ledger-status.st-flagged { color: #B88D34; background: rgba(232,181,72,0.13); }
.ledger-status.st-blocked { color: #2A323B; background: rgba(42,50,59,0.08); }
.lr-reason {
  font-size: 0.74rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger-bottom {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--line-soft);
  background: rgba(250,250,247,0.64);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.85rem;
}
.ledger-system { font-size: 0.74rem; color: var(--ink-muted); line-height: 1.4; }
.ledger-system strong { color: var(--ink); font-weight: 650; }
.ledger-hash {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: var(--ink-muted);
  padding: 0.36rem 0.5rem;
  border-radius: 7px;
  background: rgba(15,20,25,0.045);
}

@media (max-width: 1060px) {
  .leakage-pair { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 700px) {
  .ledger-thead, .ledger-row { grid-template-columns: 46px 1fr 82px; }
  .lr-reason { display: none; }
  .ledger-metrics { grid-template-columns: repeat(2, 1fr); }
  .ledger-metric:nth-child(2) { border-right: none; }
  .ledger-metric:nth-child(1), .ledger-metric:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  .ledger-thead { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.4rem; align-items: start; }
  .lr-time { display: none; }
  .ledger-bottom { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-packet, .flow-cube, .fc-port, .reason-swap, .ledger-live::before { animation: none !important; }
}

/* ============================================================
   Funnel-leaks section — convert dark Sankey wrapper to light
   when it contains the leakage-pair
   ============================================================ */
.sankey-section:has(.leakage-pair) {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sankey-section:has(.leakage-pair) .sankey-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
.sankey-section:has(.leakage-pair) .sankey-wrap::before,
.sankey-section:has(.leakage-pair) .sankey-wrap::after { display: none; }
.sankey-section:has(.leakage-pair) .sankey-pain {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.sankey-section:has(.leakage-pair) .sankey-pain-eyebrow {
  color: var(--brand);
}
.sankey-section:has(.leakage-pair) .sankey-pain-note {
  color: var(--ink-muted);
}
.sankey-section:has(.leakage-pair) .sankey-pain-title {
  color: var(--ink);
}
.sankey-section:has(.leakage-pair) .sankey-pain-body {
  color: var(--ink-muted);
}
.sankey-section:has(.leakage-pair) .sankey-foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.sankey-section:has(.leakage-pair) .sankey-foot span:last-child {
  color: var(--brand);
}

/* ============================================================
   WIZZY MASCOT — canvas source, scoped under .wizzy-lockup
   Size controllable via --pixel on the lockup.
   ============================================================ */
.wizzy-lockup {
  --deep: #073D3B;
  --deep2: #0B4F4B;
  --teal: #0B6E6E;
  --teal2: #227C73;
  --cream: #F4F0D7;
  --gold: #E8B548;
  --wand: #4C3A22;
  --shadow: rgba(15, 20, 25, 0.14);
  --pixel: 12px;
  display: grid;
  justify-items: center;
  gap: 0;
}
.wizzy-lockup.wizzy-small {
  --pixel: 7px;
}
.wizzy-lockup .mascot-wrap {
  position: relative;
  width: 252px;
  height: 210px;
  filter: drop-shadow(0 18px 18px var(--shadow));
  animation: mascotFloat 4.6s ease-in-out infinite;
}
.wizzy-lockup.wizzy-small .mascot-wrap {
  width: 147px;
  height: 122px;
}
.wizzy-lockup .mascot {
  position: absolute;
  left: 38px;
  top: 18px;
  width: 156px;
  height: 156px;
}
.wizzy-lockup.wizzy-small .mascot {
  left: 22px;
  top: 10px;
  width: 91px;
  height: 91px;
}
.wizzy-lockup .px {
  position: absolute;
  width: var(--pixel);
  height: var(--pixel);
  background: var(--c);
  left: calc(var(--x) * var(--pixel));
  top: calc(var(--y) * var(--pixel));
}
.wizzy-lockup .px.soft { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); }
.wizzy-lockup .faceplate {
  position: absolute;
  left: calc(3 * var(--pixel));
  top: calc(4 * var(--pixel));
  width: calc(8 * var(--pixel));
  height: calc(4 * var(--pixel));
  background: var(--cream);
  box-shadow:
    calc(0 * var(--pixel)) calc(1 * var(--pixel)) 0 rgba(244,240,215,0.72),
    inset 0 1px 0 rgba(255,255,255,0.42);
}
.wizzy-lockup .eye {
  position: absolute;
  width: calc(1.55 * var(--pixel));
  height: calc(1.9 * var(--pixel));
  background: #062D2B;
  top: calc(5 * var(--pixel));
  animation: blink 5.8s steps(1, end) infinite;
}
.wizzy-lockup .eye.left { left: calc(4 * var(--pixel)); }
.wizzy-lockup .eye.right { left: calc(8.2 * var(--pixel)); }
.wizzy-lockup .beak {
  position: absolute;
  left: calc(6.45 * var(--pixel));
  top: calc(7.2 * var(--pixel));
  width: calc(1.15 * var(--pixel));
  height: calc(1.15 * var(--pixel));
  background: var(--gold);
  box-shadow: calc(0.5 * var(--pixel)) calc(0.55 * var(--pixel)) 0 var(--gold);
}
.wizzy-lockup .wand-arm {
  position: absolute;
  right: 34px;
  top: 84px;
  width: 72px;
  height: 72px;
  transform-origin: 12px 54px;
  animation: wandWave 4.6s ease-in-out infinite;
}
.wizzy-lockup.wizzy-small .wand-arm {
  right: 20px;
  top: 49px;
  width: 42px;
  height: 42px;
  transform-origin: 7px 31.5px;
}
.wizzy-lockup .wand {
  position: absolute;
  left: 31px;
  top: 10px;
  width: 13px;
  height: 70px;
  background: var(--wand);
  transform: rotate(15deg);
  box-shadow:
    0 12px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(7,61,59,0.25);
}
.wizzy-lockup.wizzy-small .wand {
  left: 18px;
  top: 6px;
  width: 8px;
  height: 41px;
}
.wizzy-lockup .wand::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -10px;
  width: 20px;
  height: 16px;
  background: var(--gold);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
}
.wizzy-lockup.wizzy-small .wand::before {
  left: -2px;
  top: -6px;
  width: 12px;
  height: 9px;
}
.wizzy-lockup .hand {
  position: absolute;
  left: 18px;
  top: 54px;
  width: 24px;
  height: 22px;
  background: var(--teal2);
  box-shadow: -10px 8px 0 var(--deep2);
}
.wizzy-lockup.wizzy-small .hand {
  left: 11px;
  top: 32px;
  width: 14px;
  height: 13px;
  box-shadow: -6px 5px 0 var(--deep2);
}
.wizzy-lockup .spark {
  position: absolute;
  background: var(--gold);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(242,178,30,0.48));
  animation: sparkPop 2.2s steps(1, end) infinite;
}
.wizzy-lockup .spark.big {
  right: 8px;
  top: 20px;
  width: 14px;
  height: 42px;
  animation-delay: 0.15s;
}
.wizzy-lockup .spark.big::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 14px;
  width: 42px;
  height: 14px;
  background: var(--gold);
}
.wizzy-lockup .spark.small {
  right: 0;
  top: 82px;
  width: 11px;
  height: 11px;
  animation-delay: 0.48s;
}
.wizzy-lockup .spark.diamond {
  right: 32px;
  top: 108px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  animation-delay: 0.78s;
}
.wizzy-lockup .spark.tiny {
  right: 54px;
  top: 56px;
  width: 8px;
  height: 8px;
  animation-delay: 1.12s;
}
.wizzy-lockup .ground {
  position: absolute;
  left: 48px;
  right: 64px;
  bottom: 10px;
  height: 3px;
  background: rgba(7,61,59,0.28);
  transform: scaleX(0.78);
  animation: shadowPulse 4.6s ease-in-out infinite;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes shadowPulse {
  0%, 100% { opacity: 0.5; transform: scaleX(0.76); }
  50% { opacity: 0.28; transform: scaleX(0.64); }
}
@keyframes wandWave {
  0%, 100% { transform: rotate(0deg); }
  22% { transform: rotate(-7deg); }
  38% { transform: rotate(8deg); }
  52% { transform: rotate(-3deg); }
}
@keyframes sparkPop {
  0%, 8%, 100% { opacity: 0; transform: scale(0.7); }
  18%, 46% { opacity: 1; transform: scale(1); }
  62% { opacity: 0; transform: scale(1.15); }
}
@keyframes blink {
  0%, 88%, 100% { transform: scaleY(1); }
  90%, 92% { transform: scaleY(0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .wizzy-lockup *,
  .wizzy-lockup .mascot-wrap * {
    animation: none !important;
  }
  .wizzy-lockup .spark { opacity: 1; }
}

/* Dark founding cohort section with graph paper */
body.home-graph .founding-dark,
.founding-dark {
  background-color: #0E1417 !important;
  background-image:
    radial-gradient(ellipse at top, rgba(26, 34, 40, 1) 0%, rgba(14, 20, 23, 0) 60%),
    linear-gradient(rgba(250, 250, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(250, 250, 247, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, 0.06) 1px, transparent 1px) !important;
  background-size: auto, 28px 28px, 28px 28px, 140px 140px, 140px 140px !important;
}

/* Responsive safety net (WI-T132): force any grid carrying an inline
   grid-template-columns to a single column on small viewports. Inline styles
   beat stylesheet media queries on specificity, so !important is required to
   reach grids whose column count is set inline (pricing tiers, agency card
   rows, wizzy card rows, the homepage two-paths grid). Desktop layout is
   unchanged. */
@media (max-width: 760px) {
  .stack-mobile { grid-template-columns: 1fr !important; }
}

/* Contrast fix (WI-T133b): the global `strong { color: var(--ink) }` is dark,
   so any bold lead-in inside a dark section renders dark-on-dark and becomes
   unreadable (seen on who-we-are "What we are building"). Force <strong> to the
   light text color inside every dark-background wrapper. Covers current and
   future dark sections so this class of bug cannot recur. */
.dark-section strong,
.agency-section strong,
.founding-dark strong,
.safe-default-band strong,
.dark-who strong,
.manifesto strong { color: var(--bg); }