/* Pipelines for AI — v2: warm consultant aesthetic */

:root {
  /* Warm paper palette */
  --paper:      #F7F4EC;
  --paper-2:    #F1ECDF;
  --paper-3:    #E8E1CE;
  --ink:        #141618;
  --ink-2:      #2B2F33;
  --ink-dim:    #5B6168;
  --ink-faint:  #5F6670;
  --rule:       #D9D1BC;
  --rule-2:     #C7BFA9;

  /* Accents */
  --blue:       #2B5CFF;
  --blue-soft:  #E1E9FF;
  --blue-ink:   #1C3BBF;
  --terracotta: #C86B4B;
  --terra-soft: #F3DACC;
  --sage:       #6E8B6C;
  --sage-soft:  #DCE8DA;
  --mustard:    #C99B3B;
  --mustard-soft: #F4E2BD;
  --mustard-ink:  #7E5E14;

  /* Status */
  --ok:         #5E8C60;
  --warn:       #C99B3B;
  --bad:        #C1553B;

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;

  --wrap: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 560px) {
  .wrap { padding: 0 24px; }
}

a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

section { padding: 96px 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: none; }

/* ============ NAV ============ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 236, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 400; font-size: 17px; letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark {
  --pipe-body: var(--blue);
  --pipe-end: var(--blue-ink);
  --pipe-mouth: var(--ink);
  --pipe-mouth-inner: #0A0B0D;
  --pipe-dot: var(--paper);
  width: 42px;
  height: auto;
  flex: 0 0 auto;
  display: block;
}
.brand-mark .pipe-body { fill: var(--pipe-body); }
.brand-mark .pipe-end { fill: var(--pipe-end); }
.brand-mark .pipe-mouth { fill: var(--pipe-mouth); }
.brand-mark .pipe-mouth-inner { fill: var(--pipe-mouth-inner); }
.brand-mark .pipe-dot { fill: var(--pipe-dot); }
.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
  min-width: 0;
}
.brand-name {
  font-family: 'Poppins', var(--sans);
  font-size: 17.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name span { font-weight: 400; }
.brand-name strong {
  font-weight: 800;
  color: inherit;
}
.brand .org {
  font-family: var(--mono);
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .brand .org { display: none; }
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  color: var(--ink-dim); font-size: 14.5px;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.nav-alt {
  color: var(--ink);
  padding: 6px 12px;
  margin-left: 4px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-links a.nav-alt .arr {
  color: var(--terracotta);
  font-weight: 600;
  transition: transform 160ms ease;
}
.nav-links a.nav-alt:hover { background: white; border-color: var(--terracotta); color: var(--ink); }
.nav-links a.nav-alt:hover .arr { transform: translateX(2px); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--blue); text-decoration: none; color: var(--paper); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 140ms ease, background 140ms ease;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 160ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 24px 18px;
  background: rgba(247, 244, 236, 0.98);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.nav-mobile a {
  padding: 14px 4px;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid rgba(217,209,188,0.5);
  text-decoration: none;
}
.nav-mobile a:last-child { border-bottom: 0; }
.nav-mobile a.nm-alt {
  margin-top: 6px;
  color: var(--terracotta);
}
.nav-mobile a.nm-alt .arr {
  display: inline-block;
  margin-left: 4px;
  transition: transform 160ms ease;
}
.nav-mobile a.nm-alt:hover .arr { transform: translateX(2px); }

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 821px) {
  .nav-mobile { display: none !important; }
}
@media (max-width: 560px) {
  .nav-inner { padding: 14px 18px; }
  .brand { gap: 8px; }
  .brand-mark { width: 34px; }
  .brand-name { font-size: 15px; }
  .nav-cta {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* ============ SECTION HEADS ============ */
.sec-head {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  margin-bottom: 56px;
  align-items: start;
}
.sec-kicker {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 14px;
}
.sec-kicker .num {
  display: inline-block;
  color: var(--ink-faint);
  margin-right: 10px;
}
.sec-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 820px;
  color: var(--ink);
}
.sec-title em {
  font-style: normal;
  color: var(--blue);
  font-weight: 500;
}
.sec-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  max-width: 740px;
}

@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .sec-title { font-size: 32px; }
  .sec-sub { font-size: 17px; }
  .sec-kicker { padding-top: 0; }
  section { padding: 72px 0; }
}

/* ============ HERO ============ */
.hero {
  padding: 56px 0 88px;
  background:
    radial-gradient(1100px 600px at 85% -10%, var(--terra-soft) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 20%, var(--blue-soft) 0%, transparent 55%),
    var(--paper);
  border-top: none;
}
.hero-meta {
  display: flex; gap: 14px 24px; align-items: center; flex-wrap: wrap;
  color: var(--ink-dim);
  font-size: 13px;
  margin-bottom: 40px;
  font-family: var(--mono);
}
.hero-meta .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12.5px;
}
.hero-meta .pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}

.hero h1 {
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 1000px;
  color: var(--ink);
}
.hero h1 .accent { color: var(--blue); }
.hero h1 .dim { color: var(--ink-faint); }
.hero-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 720px;
  margin: 0 0 18px;
}
.hero-lede strong { color: var(--ink); font-weight: 600; }
.hero-promise {
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 0 14px;
  border-left: 3px solid var(--blue);
  padding-left: 18px;
}
.hero-fineprint {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  max-width: 720px;
  margin: 0 0 36px;
  padding-left: 21px;
}
@media (max-width: 720px) {
  .hero-promise { font-size: 19px; padding-left: 14px; }
  .hero-fineprint { padding-left: 17px; }
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.hero .hero-ctas .btn-primary {
  padding: 18px 28px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 14px 36px -22px rgba(20,22,24,0.55);
}
.hero .hero-ctas .btn-ghost {
  padding: 16px 22px;
  font-size: 15.5px;
}

.hero-microtrust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-microtrust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-microtrust .mt-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-faint);
  opacity: 0.55;
}

.hero-alt-cta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--ink-faint);
}
.hero-alt-cta a {
  color: var(--blue-ink);
  font-weight: 500;
  border-bottom: 1px solid rgba(28,59,191,0.25);
}
.hero-alt-cta a:hover { border-bottom-color: var(--blue-ink); text-decoration: none; }
.hero-alt-cta .hac-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.hero-trust {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  max-width: 580px;
  padding: 16px 20px;
  margin: 0 0 64px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 14px 36px -28px rgba(20,22,24,0.18);
}
.hero-trust .ht-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.hero-trust .ht-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,92,255,0.16);
}
.hero-trust p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.hero-trust strong { color: var(--ink); font-weight: 600; }
.hero-trust .ht-aside {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .hero-trust { display: flex; max-width: none; padding: 14px 16px; }
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 140ms ease;
  cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--blue); text-decoration: none; color: var(--paper); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { background: var(--paper-2); text-decoration: none; }
.btn .arrow { transition: transform 140ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

@media (max-width: 820px) {
  .hero h1 { font-size: 44px; }
  .hero-lede { font-size: 17px; }
}

/* ============ HERO FLOW DIAGRAM ============ */
.hero-flow {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 48px 40px 36px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 30px 60px -40px rgba(20,22,24,0.15);
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hero-flow .caption {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-flow svg { width: 100%; height: auto; }

@media (max-width: 560px) {
  .hero-flow {
    padding: 28px 22px 24px;
    border-radius: 16px;
  }
  .hero-flow .caption {
    white-space: normal;
    line-height: 1.45;
  }
  .hero-flow svg {
    min-width: 620px;
  }
}

/* ============ PROBLEM / BEFORE-AFTER ============ */
.ba-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 16px;
}
.ba-card {
  padding: 36px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  position: relative;
}
.ba-card.before {
  background: #FBEFEB;
  border-color: #EBD4CB;
}
.ba-card.after {
  background: #EAF1FF;
  border-color: #CFDCFF;
}
.ba-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.ba-card.before .ba-label { background: var(--terracotta); color: white; }
.ba-card.after .ba-label { background: var(--blue); color: white; }
.ba-card h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.ba-card p {
  color: var(--ink-dim);
  font-size: 15.5px;
  margin: 0 0 20px;
  line-height: 1.5;
}
.ba-card svg { width: 100%; height: auto; }

.problem-symptoms {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.problem-symptoms li {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--rule);
  list-style: none;
}
.problem-symptoms li:last-child { border-right: none; padding-right: 0; }
.problem-symptoms li:not(:first-child) { padding-left: 24px; }
.problem-symptoms .n {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--terracotta);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 10px;
}
.problem-symptoms h3, .problem-symptoms h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ink);
}
.problem-symptoms p {
  font-size: 14.5px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .ba-wrap { grid-template-columns: 1fr; }
  .problem-symptoms { grid-template-columns: 1fr 1fr; }
  .problem-symptoms li { border-right: none; border-bottom: 1px solid var(--rule); padding: 22px 0 !important; }
}

/* ============ APP PICTOGRAM GRID ============ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.app-cell {
  background: var(--paper);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.app-cell:hover { background: var(--paper-2); }
.app-cell .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
}
.app-cell .icon svg { width: 24px; height: 24px; }
.app-cell .name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.app-cell .holds {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.45;
  margin: 0;
}
.app-cell .mini {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.app-cell .mini span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  padding: 3px 8px;
  background: var(--paper-2);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

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

/* ============ API CALLOUT ============ */
.api-callout {
  margin-top: 32px;
  margin-left: 200px;
  max-width: 920px;
  padding: 24px 28px;
  background: var(--paper-2);
  border: 1px dashed var(--rule-2);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.api-callout .ac-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.api-callout .ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
}
.api-callout .ico svg { width: 20px; height: 20px; }
.api-callout h3, .api-callout h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.api-callout p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.55;
}
.api-callout p strong { color: var(--ink); font-weight: 600; }
.api-callout .modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.api-callout .modes span {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-dim);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .api-callout { margin-left: 0; max-width: none; padding: 22px 20px; }
}

/* ============ SPREADSHEET AUTOMATION ============ */
.sheet-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
}
.sheet-layout > *,
.sheet-copy,
.sheet-wrap-outer,
.sheet-frame {
  min-width: 0;
  max-width: 100%;
}
.sheet-copy h3 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--ink);
}
.sheet-copy h3 em { font-style: normal; color: var(--blue); }
.sheet-copy p {
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 440px;
}
.sheet-copy .sheet-notes {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}
.sheet-copy .sheet-note {
  padding-left: 22px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.sheet-copy .sheet-note::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--blue);
  background: white;
}
.sheet-copy .sheet-note strong { color: var(--ink); font-weight: 600; }

/* Spreadsheet mock */
.sheet-frame {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20,22,24,0.22);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.sheet-menubar {
  background: #F3F2ED;
  border-bottom: 1px solid #E2DDCF;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-dim);
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.sheet-menubar .title {
  font-weight: 500; color: var(--ink);
}
.sheet-menubar .live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ok);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.sheet-menubar .live .d {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(94,140,96,0.2);
  animation: pulse 2s ease-in-out infinite;
}
.sheet-formulabar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: #FAF8F2;
  border-bottom: 1px solid #E2DDCF;
  font-size: 12px;
}
.sheet-formulabar .fx {
  font-weight: 600;
  color: var(--ink-faint);
  font-style: italic;
  padding-right: 10px;
  border-right: 1px solid #E2DDCF;
}
.sheet-formulabar .formula {
  color: var(--blue-ink);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.sheet-table th, .sheet-table td {
  border-right: 1px solid #E2DDCF;
  border-bottom: 1px solid #E2DDCF;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  height: 28px;
  overflow: hidden;
}
.sheet-table th {
  background: #F3F2ED;
  font-weight: 500;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-align: center;
  height: 24px;
}
.sheet-table thead tr:nth-child(2) th {
  background: #F7F5EE;
  color: var(--ink);
  text-align: left;
  padding: 0 10px;
  font-weight: 600;
  font-family: var(--sans);
  font-size: 12px;
}
.sheet-table td {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: white;
}
.sheet-table td.idx {
  background: #F3F2ED;
  color: var(--ink-faint);
  text-align: center;
  font-size: 11px;
  font-family: var(--sans);
  border-right: 1px solid #E2DDCF;
  width: 32px;
}
.sheet-table td.num { text-align: right; color: var(--ink); }
.sheet-table td.pos { color: var(--ok); }
.sheet-table td.neg { color: var(--bad); }
.sheet-table td.src {
  color: var(--ink-faint);
  font-size: 10.5px;
}
.sheet-table tr.new td { background: #FFF8DE; }
.sheet-table tr.updated td.num { background: #E7F0E7; }

.sheet-row-hidden { opacity: 0; }
.sheet-row-enter {
  animation: sheetRowEnter 700ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sheetRowEnter {
  0% { opacity: 0; transform: translateY(-4px); }
  40% { background: #FFF8DE; }
  100% { opacity: 1; transform: translateY(0); }
}
.sheet-cell-flash {
  animation: cellFlash 900ms ease-out;
}
@keyframes cellFlash {
  0% { background: #FFEA8B; }
  100% { background: transparent; }
}

.sheet-statusbar {
  background: #F3F2ED;
  border-top: 1px solid #E2DDCF;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-dim);
  display: flex; justify-content: space-between; align-items: center;
}
.sheet-statusbar .tab {
  padding: 2px 12px;
  background: white;
  border: 1px solid #E2DDCF;
  border-bottom: 1px solid white;
  border-radius: 4px 4px 0 0;
  color: var(--ink);
  font-weight: 500;
  position: relative; top: 1px;
  white-space: nowrap;
}
.sheet-statusbar { flex-wrap: wrap; gap: 8px 16px; }

/* Before/after badges on spreadsheet */
.sheet-stamp {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(20,22,24,0.25);
  z-index: 5;
  white-space: nowrap;
}
.sheet-stamp.before {
  background: var(--terracotta);
  color: white;
  top: -30px;
  left: -14px;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.7);
}
.sheet-stamp.after {
  background: var(--blue);
  color: white;
  bottom: -30px;
  right: -14px;
}

.sheet-wrap-outer { position: relative; }
.sheet-scroll,
.dash-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .sheet-layout { grid-template-columns: 1fr; gap: 28px; }
  .sheet-copy p { max-width: none; }
}
@media (max-width: 560px) {
  .sheet-wrap-outer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sheet-wrap-outer .sheet-frame {
    flex: 1 0 100%;
  }
  .sheet-stamp {
    position: static;
    box-shadow: none;
  }
  .sheet-menubar {
    gap: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
  }
  .sheet-menubar > span:nth-child(2) {
    display: none;
  }
  .sheet-formulabar {
    padding: 6px 10px;
  }
}

/* ============ HOW-IT-WORKS ============ */
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
}
.how-step {
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--rule);
  position: relative;
}
.how-step:last-child { border-right: none; }
.how-step:not(:first-child) { padding-left: 28px; }
.how-step .step-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--terracotta);
  margin-bottom: 16px;
}
.how-step .step-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-ink);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.how-step .step-icon svg { width: 26px; height: 26px; }
.how-step h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.how-step p {
  font-size: 15.5px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr 1fr; }
  .how-step { border-right: none; border-bottom: 1px solid var(--rule); padding: 28px 0 !important; }
}

/* ============ Q&A CONVERSATION CARDS ============ */
.qa-list {
  display: grid;
  gap: 48px;
  max-width: 820px;
  margin: 0 auto;
}
.qa-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qa-q {
  align-self: flex-end;
  max-width: 80%;
  background: var(--blue);
  color: white;
  padding: 16px 22px 18px;
  border-radius: 20px 20px 4px 20px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  box-shadow: 0 10px 24px -14px rgba(43,92,255,0.5);
}
.qa-q .tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.qa-a {
  align-self: flex-start;
  max-width: 90%;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 22px 26px;
  border-radius: 4px 20px 20px 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  box-shadow: 0 10px 24px -18px rgba(20,22,24,0.15);
}
.qa-a .tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.qa-a strong { color: var(--ink); font-weight: 600; }
.qa-a .hi { background: #FFE6A5; padding: 1px 6px; border-radius: 4px; font-weight: 500; }
.qa-a .sources {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qa-a .sources .srci {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--blue);
}
.qa-a .sources .src-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 4px;
  border-right: 1px solid var(--rule);
  margin-right: 4px;
}

@media (max-width: 720px) {
  .qa-q, .qa-a { max-width: 95%; }
}

/* ============ LIVE DASHBOARD ============ */
.dash-frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(20,22,24,0.2);
}
.dash-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
}
.dash-bar .title { color: var(--ink); font-weight: 500; }
.dash-bar .meta { display: flex; gap: 16px; color: var(--ink-dim); align-items: center; }
.dash-bar .meta .status {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ok); font-weight: 500;
}
.dash-bar .meta .status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(94,140,96,0.2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(94,140,96,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(94,140,96,0.05); }
}

.dash-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.dash-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  padding: 14px 18px;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.dash-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  vertical-align: middle;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tr:hover td { background: var(--paper-2); }

.dash-src { display: flex; align-items: center; gap: 12px; }
.dash-src .logo {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: -0.02em;
  overflow: hidden;
}
.dash-src .logo svg { width: 20px; height: 20px; display: block; }
.dash-src .logo.blue    { background: var(--blue);       color: white; border-color: var(--blue); }
.dash-src .logo.terra   { background: var(--terracotta); color: white; border-color: var(--terracotta); }
.dash-src .logo.sage    { background: var(--sage);       color: white; border-color: var(--sage); }
.dash-src .logo.mustard { background: var(--mustard);    color: white; border-color: var(--mustard); }
/* brand-specific (authentic colors) */
.dash-src .logo.shopify  { background: #95BF47; border-color: #95BF47; color: white; }
.dash-src .logo.klaviyo  { background: #141618; border-color: #141618; color: white; }
.dash-src .logo.meta     { background: #0866FF; border-color: #0866FF; color: white; }
.dash-src .logo.google   { background: #ffffff; border-color: var(--rule); }
.dash-src .logo.gorgias  { background: #F05936; border-color: #F05936; color: white; }
.dash-src .logo.stripe   { background: #635BFF; border-color: #635BFF; color: white; }
.dash-src .logo.recharge { background: #1A1A1A; border-color: #1A1A1A; color: white; }
.dash-src .logo.netsuite { background: #1C4A8C; border-color: #1C4A8C; color: white; }
.dash-src .logo.shipbob  { background: #FFD200; border-color: #E8BE00; color: #141618; }
.dash-src .nm { font-weight: 500; color: var(--ink); font-size: 15px; white-space: nowrap; }

.dash-table .cat { color: var(--ink-dim); font-size: 13.5px; }
.dash-table .num { font-family: var(--mono); color: var(--ink); }
.dash-table .delta {
  font-family: var(--mono);
  color: var(--ok);
  font-size: 13px;
}
.dash-table .fresh { font-family: var(--mono); color: var(--ink-dim); font-size: 13px; }
.dash-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ok);
  font-weight: 500;
  text-transform: uppercase;
}
.dash-status .d {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}
.dash-status.warn { color: var(--warn); }
.dash-status.warn .d { background: var(--warn); }

.dash-foot {
  padding: 14px 20px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
}
.dash-foot .ask {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
}
.dash-foot .ask .qmark { color: var(--blue); font-weight: 600; margin-right: 8px; }

@media (max-width: 720px) {
  .dash-bar,
  .dash-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .dash-bar .meta {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}

/* ============ WITHOUT / WITH COMPARISON ============ */
.vs-table {
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
}
.vs-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.vs-row:last-child { border-bottom: none; }
.vs-row.head {
  background: var(--paper-2);
}
.vs-row.head > div {
  padding: 16px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
.vs-row.head .w { color: var(--terracotta); }
.vs-row.head .r { color: var(--blue); }

.vs-row {
  position: relative;
}
.vs-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--rule);
}
.vs-row:last-child::after { display: none; }
.vs-row > .label {
  padding: 22px;
  font-weight: 600;
  color: var(--ink);
  font-size: 15.5px;
  border-right: 1px solid var(--rule);
  background: var(--paper);
}
.vs-row > .without,
.vs-row > .with {
  padding: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-dim);
  border-right: 1px solid var(--rule);
}
.vs-row > .without { background: #FBF3EE; }
.vs-row > .with { background: #EEF2FF; border-right: none; }

@media (max-width: 800px) {
  .vs-row { grid-template-columns: 1fr; }
  .vs-row > .label, .vs-row > .without, .vs-row > .with {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .vs-row.head { display: none; }
}

/* ============ DELIVERABLES ============ */
.deliv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.deliv-cell {
  background: var(--paper);
  padding: 32px 28px;
  display: flex; gap: 20px;
}
.deliv-cell:hover { background: var(--paper-2); }
.deliv-cell .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  flex-shrink: 0;
  padding-top: 3px;
}
.deliv-cell h3, .deliv-cell h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.deliv-cell p {
  font-size: 15px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}

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

/* ============ TIMELINE ============ */
.tl {
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
}
.tl-head {
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.tl-head > div {
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.tl-head > div:first-child { text-align: left; color: var(--ink-dim); }

.tl-row {
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr);
  border-bottom: 1px solid var(--rule);
  min-height: 80px;
  align-items: stretch;
  --phase-on: var(--blue);
  --phase-soft: var(--blue-soft);
  --phase-soft-ink: var(--blue-ink);
}
.tl-row--plan {
  --phase-on: var(--terracotta);
  --phase-soft: var(--terra-soft);
  --phase-soft-ink: var(--terracotta);
}
.tl-row--connect {
  --phase-on: var(--blue);
  --phase-soft: var(--blue-soft);
  --phase-soft-ink: var(--blue-ink);
}
.tl-row--organize {
  --phase-on: var(--sage);
  --phase-soft: var(--sage-soft);
  --phase-soft-ink: var(--sage);
}
.tl-row--activate {
  --phase-on: var(--mustard);
  --phase-soft: var(--mustard-soft);
  --phase-soft-ink: var(--mustard-ink);
}
.tl-row:last-child { border-bottom: none; }
.tl-phase {
  padding: 18px 16px;
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.tl-phase .ti {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.tl-phase .ti svg { width: 16px; height: 16px; color: var(--phase-on); }
.tl-phase small { color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); }

.tl-cell {
  position: relative;
  border-right: 1px solid var(--rule);
  display: flex; align-items: center;
  padding: 10px 8px;
}
.tl-cell:last-child { border-right: none; }
.tl-bar {
  height: 28px;
  border-radius: 999px;
  display: flex; align-items: center;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: transparent;
  width: 100%;
}
.tl-bar.on { background: var(--phase-on); color: white; }
.tl-bar.soft { background: var(--phase-soft); color: var(--phase-soft-ink); }

@media (max-width: 900px) {
  .tl-head, .tl-row { grid-template-columns: 140px repeat(6, 1fr); font-size: 11px; }
  .tl-phase .ti { font-size: 13px; }
  .tl-bar { padding: 0 6px; font-size: 9.5px; }
}

/* ============ MATURITY LADDER ============ */
.ladder {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}
.ladder-rung {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: all 200ms ease;
}
.ladder-rung .step-num {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-dim);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.ladder-rung h3, .ladder-rung h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ladder-rung p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.45;
}
.ladder-rung .state {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ladder-rung.you {
  background: #FBEFEB;
  border-color: #EBD4CB;
}
.ladder-rung.you .step-num { background: var(--terracotta); color: white; border-color: var(--terracotta); }
.ladder-rung.you .state { color: var(--terracotta); }
.ladder-rung.target {
  background: #EEF2FF;
  border-color: #CFDCFF;
  border-width: 2px;
  transform: scale(1.02);
}
.ladder-rung.target .step-num { background: var(--blue); color: white; border-color: var(--blue); }
.ladder-rung.target .state { color: var(--blue); }

/* ============ FIT ============ */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.fit-card {
  padding: 36px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.fit-card.yes { background: #EEF6EF; border-color: #CFE4D0; }
.fit-card.no { background: var(--paper-2); }
.fit-card h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--ink);
}
.fit-card h3 .ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.fit-card.yes h3 .ico { background: var(--sage); color: white; }
.fit-card.no h3 .ico { background: var(--ink-faint); color: white; }
.fit-card ul { list-style: none; padding: 0; margin: 0; }
.fit-card li {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  padding-left: 26px;
  position: relative;
  margin-bottom: 14px;
}
.fit-card li:last-child { margin-bottom: 0; }
.fit-card.yes li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  transform: rotate(-45deg);
}
.fit-card.no li::before {
  content: '';
  position: absolute; left: 4px; top: 11px;
  width: 12px; height: 2px;
  background: var(--ink-faint);
}

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

/* ============ WHY NOW ============ */
.whynow-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.whynow-pullquote {
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  padding-left: 24px;
  border-left: 3px solid var(--blue);
}
.whynow-pullquote em { font-style: normal; color: var(--blue); }
.whynow-body p { font-size: 16px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 16px; }
.whynow-body p strong { color: var(--ink); font-weight: 600; }
.whynow-chart {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
}
.whynow-chart svg { width: 100%; height: auto; }

@media (max-width: 900px) { .whynow-layout { grid-template-columns: 1fr; } }

/* ============ TWO TYPES OF DATA ============ */
.two-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
.td-card {
  border-radius: 18px;
  border: 1px solid var(--rule);
  padding: 32px;
  position: relative;
}
.td-card.enterprise {
  background: var(--paper-2);
}
.td-card.operational {
  background: #EEF2FF;
  border-color: #CFDCFF;
  border-width: 2px;
}
.td-card .td-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  font-weight: 500;
}
.td-card.enterprise .td-tag { background: var(--paper-3); color: var(--ink-dim); }
.td-card.operational .td-tag { background: var(--blue); color: white; }
.td-card h3 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.td-card .sub {
  font-size: 15px;
  color: var(--ink-dim);
  margin: 0 0 20px;
  line-height: 1.5;
}
.td-card .examples {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--rule);
}
.td-card .examples span {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.td-card.operational .examples span { background: white; border-color: #CFDCFF; color: var(--ink); }
.td-card .what-for {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
}
.td-card .what-for strong { color: var(--ink); font-weight: 600; }
.td-card .badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--blue);
  color: white;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
}
.problem-gap {
  margin-top: 40px;
  padding: 24px 28px;
  background: #FBEFEB;
  border: 1px solid #EBD4CB;
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}
.problem-gap .pg-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--terracotta);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.problem-gap .pg-icon svg { width: 22px; height: 22px; }
.problem-gap p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.problem-gap p strong { color: var(--terracotta); font-weight: 600; }
.problem-gap p em { color: var(--blue-ink); font-style: normal; font-weight: 600; }

@media (max-width: 820px) {
  .two-data { grid-template-columns: 1fr; }
}

/* ============ THE OFFER ============ */
.offer-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}
.offer {
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
}
.offer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at 90% 0%, rgba(43,92,255,0.35) 0%, transparent 60%),
    radial-gradient(400px 260px at 0% 100%, rgba(200,107,75,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.offer > * { position: relative; }
.offer .o-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra-soft);
  margin-bottom: 14px;
}
.offer h3 {
  font-size: 32px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 8px;
  color: white;
}
.offer .o-sub {
  font-size: 15.5px;
  color: #C7BFA9;
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 520px;
}
.offer .o-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(217,209,188,0.2);
}
.offer .o-price .from {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--terra-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.offer .o-price .amt {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: white;
  line-height: 1;
}
.offer .o-price .unit {
  font-size: 15px;
  color: #8E949B;
}
.offer .o-range {
  margin: -16px 0 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #C7BFA9;
  max-width: 520px;
}
.offer .o-range strong { color: #fff; font-weight: 600; }

.offer .o-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: -8px 0 32px;
  padding: 16px 18px;
  background: rgba(43,92,255,0.10);
  border: 1px solid rgba(43,92,255,0.35);
  border-radius: 12px;
  color: #E1E9FF;
  font-size: 14.5px;
  line-height: 1.5;
}
.offer .o-guarantee strong { color: #fff; font-weight: 600; }
.offer .o-guarantee .og-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(43,92,255,0.22);
  color: #B9CCFF;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.offer .o-guarantee .og-ico svg { width: 18px; height: 18px; }

.offer .o-incl {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-soft);
  margin-bottom: 18px;
}
.offer .o-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.offer .o-group { display: flex; flex-direction: column; gap: 10px; }
.offer .o-group-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-soft);
  opacity: 0.72;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(217,209,188,0.14);
}
.offer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
.offer .o-group ul { grid-template-columns: 1fr 1fr; }
.offer .o-group:last-child ul,
.offer .o-group:nth-child(2) ul { grid-template-columns: 1fr; }
.offer li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.45;
  color: #E8E1CE;
}
.offer li .chk {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(43,92,255,0.2);
  display: grid; place-items: center;
  margin-top: 1px;
  flex-shrink: 0;
}
.offer li .chk svg { width: 12px; height: 12px; }
.offer li strong { color: white; font-weight: 600; }
.offer .o-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(217,209,188,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.offer .o-foot .own {
  font-size: 14px;
  color: var(--terra-soft);
}
.offer .o-foot .own strong { color: white; font-weight: 600; }
.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.offer .o-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: white;
  color: var(--ink);
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
}
.offer .o-cta:hover { background: var(--blue); color: white; text-decoration: none; }
.offer .o-cta-secondary {
  background: transparent;
  color: white;
  border: 1px solid rgba(247,244,236,0.35);
}
.offer .o-cta-secondary:hover {
  background: rgba(247,244,236,0.08);
  border-color: rgba(247,244,236,0.6);
}
.offer .o-sample-link {
  flex-basis: 100%;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--terra-soft);
  text-align: right;
  text-decoration: underline;
  text-decoration-color: rgba(247,244,236,0.25);
  text-underline-offset: 4px;
}
.offer .o-sample-link:hover {
  color: #fff;
  text-decoration-color: rgba(247,244,236,0.6);
}
@media (max-width: 720px) {
  .offer .o-sample-link { text-align: left; }
}

/* Maintenance card */
.maint {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px;
}
.maint .m-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding: 4px 10px;
  background: var(--terra-soft);
  border-radius: 999px;
  margin-bottom: 14px;
}
.maint h3, .maint h4 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.maint .m-price {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.maint .m-price .sub {
  font-size: 14px;
  color: var(--ink-faint);
  font-weight: 400;
}
.maint p {
  font-size: 14.5px;
  color: var(--ink-dim);
  margin: 0 0 20px;
  line-height: 1.5;
}
.maint ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.maint li {
  font-size: 14px;
  color: var(--ink-dim);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}
.maint li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px;
  border: 1.5px solid var(--terracotta);
  border-radius: 50%;
}
.maint .m-opt {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.maint-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
}
.maint-cta:hover {
  background: var(--blue);
  color: white;
  text-decoration: none;
}

@media (max-width: 920px) {
  .offer-wrap { grid-template-columns: 1fr; }
  .offer ul,
  .offer .o-group ul { grid-template-columns: 1fr; }
  .offer h3 { font-size: 26px; }
  .offer .o-price .amt { font-size: 44px; }
}

/* ============ CTA ============ */
.cta {
  background:
    radial-gradient(800px 400px at 80% 0%, var(--blue-soft) 0%, transparent 60%),
    radial-gradient(600px 400px at 20% 100%, var(--terra-soft) 0%, transparent 60%),
    var(--paper);
  text-align: left;
}
.cta h2 {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0 0 20px;
  max-width: 880px;
}
.cta h2 em { font-style: normal; color: var(--blue); }
.cta .lede {
  font-size: 19px;
  color: var(--ink-dim);
  max-width: 720px;
  margin: 0 0 36px;
  line-height: 1.55;
}
.booking-panel {
  max-width: 980px;
  margin: 50px 0 0;
  padding: 34px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  grid-template-areas:
    "copy scheduler"
    "notes scheduler";
  gap: 30px 48px;
  align-items: start;
  background: transparent;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.booking-copy {
  grid-area: copy;
}
.booking-copy h3 {
  max-width: 560px;
  margin: 16px 0 14px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.booking-copy p {
  max-width: 660px;
  margin: 0;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.55;
}
.booking-scheduler {
  grid-area: scheduler;
  width: 100%;
  padding: 22px;
  background: rgba(255,255,255,0.54);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 24px 62px -50px rgba(20,22,24,0.44);
}
.booking-scheduler-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(217,209,188,0.86);
}
.booking-scheduler-head strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.2;
}
.booking-scheduler-head strong[data-state="ok"] { color: var(--ok); }
.booking-scheduler-head strong[data-state="err"] { color: var(--bad); }
.booking-scheduler-head strong[data-state="pending"] { color: var(--mustard); }
.booking-eyebrow {
  display: block;
  font-family: var(--mono);
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.booking-refresh {
  flex: 0 0 auto;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 12px;
  cursor: pointer;
}
.booking-refresh:hover { background: var(--paper-2); color: var(--ink); }
.booking-refresh:disabled { opacity: 0.55; cursor: wait; }
.booking-slots {
  max-height: 378px;
  overflow: auto;
  padding: 14px 4px 2px 0;
  scrollbar-width: thin;
}
.booking-day + .booking-day { margin-top: 16px; }
.booking-day h3, .booking-day h4 {
  margin: 0 0 8px;
  font-family: var(--mono);
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.booking-slot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.booking-slot {
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.booking-slot:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(43,92,255,0.1);
}
.booking-slot span {
  font-size: 14.5px;
  line-height: 1.15;
  font-weight: 600;
}
.booking-slot small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-empty {
  margin: 14px 0 4px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.45;
}
.booking-slots.booking-slots--iframe {
  max-height: none;
  overflow: visible;
  padding: 0;
}
.booking-iframe {
  display: block;
  width: 100%;
  min-height: 680px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 720px) {
  .booking-iframe { min-height: 760px; }
}
.booking-form {
  padding-top: 14px;
}
.booking-selected {
  margin: 0 0 14px;
  padding: 12px 0;
  background: transparent;
  border-top: 1px solid rgba(217,209,188,0.9);
  border-bottom: 1px solid rgba(217,209,188,0.9);
  border-radius: 0;
  color: var(--blue-ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.booking-fields {
  display: grid;
  gap: 9px;
}
.booking-fields input,
.booking-fields textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
}
.booking-fields textarea {
  min-height: 82px;
  resize: vertical;
}
.booking-fields input:focus,
.booking-fields textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(43,92,255,0.12);
}
.booking-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 12px;
}
.booking-form-actions .btn {
  width: 100%;
  justify-content: center;
  margin: 0;
  padding: 10px 14px;
}
.booking-success {
  margin-top: 14px;
  padding: 14px;
  background: rgba(225,233,255,0.72);
  border: 1px solid rgba(43,92,255,0.18);
  border-radius: 12px;
}
.booking-success strong {
  display: block;
  color: var(--blue-ink);
}
.booking-success p {
  margin: 5px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.4;
}
.booking-success a {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.booking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.booking-meta span {
  padding: 6px 9px;
  border: 1px solid rgba(199,191,169,0.72);
  border-radius: 999px;
  background: rgba(247,244,236,0.76);
}
.booking-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  min-width: 184px;
}
.booking-actions .btn {
  width: 100%;
  justify-content: center;
  margin: 0;
}
.booking-notes {
  grid-area: notes;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 560px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.booking-notes div {
  position: relative;
  min-width: 0;
  padding: 15px 0 16px 48px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(217,209,188,0.78);
  border-radius: 0;
}
.booking-notes div:last-child { border-bottom: 0; }
.booking-notes span {
  display: block;
  position: absolute;
  left: 0;
  top: 17px;
  margin: 0;
  font-family: var(--mono);
  color: var(--terracotta);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.booking-notes strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 1.2;
}
.booking-notes p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.45;
}
.cta-form {
  margin-top: 40px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: 720px;
}
.cta-form .promise {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.cta-form .promise strong { color: var(--ink); }
.cta-form .input {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  background: transparent;
}
.cta-form input,
.cta-form textarea {
  padding: 12px 18px;
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14.5px;
  min-width: 0;
  color: var(--ink);
  outline: none;
}
.cta-form textarea {
  resize: vertical;
  min-height: 92px;
}
.capture-wide { grid-column: 1 / -1; }
.cta-form button {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}
.cta-form button:hover { background: var(--blue); }
.form-hidden { display: none; }
.form-status {
  grid-column: 1 / -1;
  min-height: 18px;
  margin-top: -14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--bad); }
.foot-sub-col .form-status {
  margin-top: 10px;
  min-height: 16px;
  color: rgba(247,244,236,0.45);
}
.foot-sub-col .form-status.ok { color: #9ACB9A; }
.foot-sub-col .form-status.err { color: #F0A28E; }

@media (max-width: 820px) {
  .cta h2 { font-size: 36px; }
  .booking-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "scheduler"
      "notes";
    gap: 26px;
  }
  .booking-scheduler { width: 100%; }
  .booking-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .booking-notes { grid-template-columns: 1fr; }
  .cta-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .booking-panel {
    margin-top: 34px;
    padding: 26px 0;
  }
  .booking-copy h3 { font-size: 24px; }
  .booking-copy p { font-size: 15px; }
  .booking-scheduler {
    padding: 18px;
    border-radius: 14px;
  }
  .booking-slot-list { grid-template-columns: 1fr; }
  .booking-slots { max-height: 324px; }
  .booking-form-actions { grid-template-columns: 1fr; }
  .booking-actions { grid-template-columns: 1fr; }
  .booking-notes {
    gap: 0;
    padding-top: 8px;
  }
  .booking-notes div {
    padding: 14px 0 14px 42px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(217,209,188,0.72);
    border-radius: 0;
  }
  .booking-notes span {
    left: 0;
    top: 16px;
  }
  .booking-notes div:last-child { border-bottom: 0; padding-bottom: 0; }
  .booking-notes p { display: block; }
  .cta-form {
    padding: 22px;
    gap: 20px;
  }
  .cta-form .input {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cta-form input,
  .cta-form textarea {
    min-width: 0;
    width: 100%;
  }
  .cta-form button {
    width: 100%;
    justify-content: center;
  }
}

/* ============ FOOTER ============ */
/* ============ FOUNDER ============ */
#founder { padding-top: 40px; padding-bottom: 60px; }
.founder-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  padding: 36px 36px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 30px 80px -56px rgba(20,22,24,0.25);
}
.founder-photo {
  width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(43,92,255,0.18) 0%, transparent 60%),
    linear-gradient(155deg, var(--blue-soft) 0%, var(--terra-soft) 100%);
  display: grid;
  place-items: end center;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(20,22,24,0.06);
}
.founder-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  position: relative;
  z-index: 1;
}
.founder-monogram {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
}
.founder-monogram .fm-pipe {
  --pipe-body: var(--blue);
  --pipe-end: var(--blue-ink);
  --pipe-mouth: var(--ink);
  --pipe-mouth-inner: #0A0B0D;
  --pipe-dot: var(--paper);
  width: 100px;
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.4;
}
.founder-monogram .fm-initials {
  font-family: 'Poppins', var(--sans);
  font-weight: 800;
  font-size: 72px;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
}

.founder-body {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.founder-body > * { min-width: 0; }
.founder-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.founder-name strong { font-weight: 600; }
.founder-name .founder-role {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  min-width: 0;
  overflow-wrap: anywhere;
}
.founder-name .founder-role a {
  color: var(--blue-ink);
  text-decoration: underline;
  text-decoration-color: rgba(28,59,191,0.4);
  text-underline-offset: 3px;
}
.founder-name .founder-role a:hover { text-decoration-color: var(--blue-ink); }

.founder-lede {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.founder-lede strong { color: var(--ink); font-weight: 600; }

.founder-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 22px 0 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fs-cell {
  display: grid;
  gap: 6px;
  padding: 0 18px;
  border-right: 1px solid var(--rule);
}
.fs-cell:first-child { padding-left: 0; }
.fs-cell:last-child { border-right: 0; padding-right: 0; }
.fs-cell strong {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.0;
}
.fs-cell span {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.founder-audience {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  flex-wrap: wrap;
  min-width: 0;
}
.founder-audience > * { min-width: 0; }
.founder-audience strong {
  color: var(--ink);
  font-weight: 600;
}
.founder-audience a {
  color: var(--blue-ink);
  border-bottom: 1px solid rgba(28,59,191,0.25);
  text-decoration: none;
}
.founder-audience a:hover { border-bottom-color: var(--blue-ink); }
.founder-audience .fa-mark {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 8px;
  box-shadow: 0 0 0 4px rgba(43,92,255,0.12);
}

.founder-close {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  font-style: italic;
  border-left: 2px solid var(--blue);
  padding-left: 14px;
}

@media (max-width: 820px) {
  .founder-card {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 24px;
  }
  .founder-photo {
    width: 140px;
    justify-self: start;
  }
  .founder-monogram .fm-initials { font-size: 50px; }
  .founder-monogram .fm-pipe { width: 60px; top: 14px; }
  .founder-name {
    flex-direction: column;
    gap: 6px;
  }
  .founder-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ============ FAQ ============ */
#faq { padding-top: 40px; padding-bottom: 40px; }
.faq-list {
  display: grid;
  gap: 10px;
  max-width: 920px;
  margin-left: 200px;
}
@media (max-width: 820px) {
  .faq-list { margin-left: 0; max-width: none; }
}
.faq-item {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.faq-item[open] {
  border-color: rgba(43,92,255,0.35);
  box-shadow: 0 14px 40px -28px rgba(43,92,255,0.25);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-ink); }
.faq-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 50%;
  background: var(--paper-2);
  transition: background 160ms ease;
}
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  background: var(--ink);
  border-radius: 1px;
  top: 50%; left: 50%;
  transition: transform 200ms ease, opacity 160ms ease;
}
.faq-mark::before {
  width: 10px; height: 1.6px;
  transform: translate(-50%, -50%);
}
.faq-mark::after {
  width: 1.6px; height: 10px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-mark { background: rgba(43,92,255,0.15); }
.faq-item[open] .faq-mark::before { background: var(--blue-ink); }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-body {
  padding: 0 22px 20px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}
.faq-body p { margin: 0; }
.faq-body strong { color: var(--ink); font-weight: 600; }
.faq-body p + p { margin-top: 12px; }

/* ============ FOR BUILDERS BAND ============ */
.builders-band {
  padding: 24px 0 40px;
}
.builders-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px 28px;
  align-items: center;
  padding: 22px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.builders-card:hover {
  border-color: rgba(43,92,255,0.45);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -28px rgba(43,92,255,0.4);
}
.builders-card .bb-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(43,92,255,0.10);
  color: var(--blue-ink);
  flex: 0 0 auto;
}
.builders-card .bb-mark svg { width: 22px; height: 22px; }
.builders-card .bb-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 6px;
}
.builders-card h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.builders-card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.5;
}
.builders-card .bb-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-ink);
  white-space: nowrap;
}
.builders-card .bb-cta .arrow { transition: transform 140ms ease; display: inline-block; }
.builders-card:hover .bb-cta .arrow { transform: translateX(3px); }

@media (max-width: 760px) {
  .builders-card {
    grid-template-columns: auto 1fr;
    gap: 14px 18px;
    padding: 20px;
  }
  .builders-card .bb-cta {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ============ MID-PAGE CTA BAND ============ */
.mid-cta {
  padding: 40px 0 20px;
}
.mid-cta-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 36px 44px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(20,22,24,0.5);
}
.mid-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 90% 120%, rgba(43,92,255,0.28), transparent 60%),
    radial-gradient(500px 250px at 10% -20%, rgba(200,107,75,0.2), transparent 60%);
  pointer-events: none;
}
.mid-cta-card > * { position: relative; z-index: 1; }

.mid-cta-mark { display: flex; gap: 6px; }
.mid-cta-mark span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper);
  opacity: 0.5;
}
.mid-cta-mark span:nth-child(1) { background: var(--blue); opacity: 1; }
.mid-cta-mark span:nth-child(2) { background: var(--terracotta); opacity: 1; }
.mid-cta-mark span:nth-child(3) { background: var(--mustard); opacity: 1; }

.mid-cta-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,244,236,0.6);
  margin-bottom: 8px;
}
.mid-cta-body h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--paper);
  max-width: 640px;
}
.mid-cta-body h3 em {
  font-style: normal;
  color: #9FB4FF;
}
.mid-cta-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.mid-cta-actions .btn-primary {
  background: var(--paper);
  color: var(--ink);
}
.mid-cta-actions .btn-primary:hover {
  background: white;
  color: var(--ink);
}
.mid-cta-actions .btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(247,244,236,0.3);
}
.mid-cta-actions .btn-ghost:hover {
  background: rgba(247,244,236,0.08);
  color: var(--paper);
  border-color: rgba(247,244,236,0.5);
}
@media (max-width: 900px) {
  .mid-cta-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .mid-cta-body h3 { font-size: 22px; }
  .mid-cta-actions { flex-wrap: wrap; }
}

/* ============ SITE FOOTER ============ */
.site-footer {
  margin-top: 80px;
  padding: 72px 0 28px;
  background: var(--ink);
  color: rgba(247,244,236,0.7);
  font-size: 14.5px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(43,92,255,0.18), transparent 55%),
    radial-gradient(700px 350px at 5% 100%, rgba(200,107,75,0.12), transparent 60%);
  pointer-events: none;
}
.site-footer > .wrap { position: relative; z-index: 1; }

/* Top row */
.foot-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(247,244,236,0.1);
}
.foot-brand-col { max-width: 520px; }
.foot-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--paper);
}
.foot-logo .brand-mark {
  --pipe-body: #88A4FF;
  --pipe-end: #3F5EAF;
  --pipe-mouth: var(--paper);
  --pipe-mouth-inner: var(--ink);
  --pipe-dot: var(--ink);
  width: 60px;
}
.foot-logo .brand-name {
  color: var(--paper);
  font-size: 21px;
}
.foot-logo .org {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,244,236,0.45);
}
.foot-org {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(247,244,236,0.45);
  letter-spacing: 0.06em;
  margin-top: 6px;
  margin-left: 20px;
}
.foot-tagline {
  margin: 22px 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247,244,236,0.75);
  max-width: 460px;
}
.foot-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border: 1px solid rgba(247,244,236,0.18);
  border-radius: 999px;
  color: rgba(247,244,236,0.7);
  text-transform: uppercase;
}
.fb-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}
.fb-badge .dot.ok {
  background: #6FB871;
  box-shadow: 0 0 8px rgba(111,184,113,0.6);
}

/* Subscribe column */
.foot-sub-col {}
.foot-sub-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.foot-sub-col h3, .foot-sub-col h4 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.foot-sub-col p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247,244,236,0.65);
  max-width: 380px;
}
.foot-sub-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 460px;
  transition: border-color 140ms ease;
}
.foot-sub-form input,
.foot-sub-form textarea {
  min-width: 0;
  background: rgba(247,244,236,0.06);
  border: 1px solid rgba(247,244,236,0.14);
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit;
  color: var(--paper);
  outline: none;
  font-size: 14.5px;
  transition: border-color 140ms ease;
}
.foot-sub-form textarea {
  resize: vertical;
  min-height: 76px;
}
.foot-sub-form input:focus,
.foot-sub-form textarea:focus {
  border-color: rgba(247,244,236,0.35);
}
.foot-sub-form input::placeholder,
.foot-sub-form textarea::placeholder { color: rgba(247,244,236,0.4); }
.foot-sub-form button {
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.foot-sub-form button:hover { background: var(--blue); color: var(--paper); }
.foot-sub-form button:disabled { background: var(--sage); color: var(--paper); cursor: default; }

.foot-sub-form--slim {
  grid-template-columns: 1fr auto;
  max-width: 420px;
  gap: 8px;
}
.foot-sub-form--slim button {
  grid-column: auto;
  justify-self: stretch;
}
.foot-sub-fine {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(247,244,236,0.35);
}

/* Link columns */
.foot-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding: 48px 0 40px;
  border-bottom: 1px solid rgba(247,244,236,0.1);
}
.foot-col-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,244,236,0.45);
  margin-bottom: 16px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a {
  color: rgba(247,244,236,0.8);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 120ms ease;
}
.foot-col a:hover { color: var(--paper); }

/* Bottom legal strip */
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 16px;
  font-size: 13px;
  color: rgba(247,244,236,0.45);
  font-family: var(--mono);
  letter-spacing: 0.05em;
}
.foot-mini-links { display: flex; gap: 28px; }
.foot-mini-links a {
  color: rgba(247,244,236,0.55);
  text-decoration: none;
  transition: color 120ms ease;
}
.foot-mini-links a:hover { color: var(--paper); }

/* Giant wordmark */
.foot-mark {
  margin: clamp(30px, 4vw, 56px) auto 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(64px, 11.6vw, 176px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247,244,236,0.12);
  text-align: center;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
}
.foot-mark span {
  -webkit-text-stroke: 1px rgba(200,107,75,0.28);
  padding: 0 0.15em;
}

/* ============ THANK YOU ============ */
.thanks {
  padding: 64px 0 96px;
  background:
    radial-gradient(800px 400px at 80% 0%, var(--blue-soft) 0%, transparent 60%),
    radial-gradient(600px 400px at 10% 100%, var(--terra-soft) 0%, transparent 60%),
    var(--paper);
}

/* Layout: sidebar TOC + body */
.thanks-wrap {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 56px;
  align-items: start;
}
.thanks-body { min-width: 0; }
.thanks-body > section { max-width: 880px; margin-left: auto; margin-right: auto; }
@media (max-width: 1024px) {
  .thanks-wrap { grid-template-columns: 1fr; gap: 24px; }
}

/* Sidebar TOC */
.thanks-toc {
  position: sticky;
  top: 96px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.thanks-toc .ttoc-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px 16px;
}
.thanks-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--paper-3);
}
.thanks-toc li { margin: 0; }
.thanks-toc a {
  display: block;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}
.thanks-toc a:hover { color: var(--ink); text-decoration: none; }
.thanks-toc a.is-active {
  color: var(--ink);
  border-left-color: var(--blue);
  font-weight: 600;
}
@media (max-width: 1024px) {
  .thanks-toc {
    position: static;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--paper-3);
  }
  .thanks-toc .ttoc-label { margin: 0 0 10px; }
  .thanks-toc ol {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-left: 0;
    gap: 6px;
    padding-bottom: 6px;
    width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .thanks-toc li { flex: 0 0 auto; }
  .thanks-toc a {
    padding: 8px 14px;
    margin-left: 0;
    border: 1px solid var(--paper-3);
    border-left-width: 1px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .thanks-toc a.is-active {
    border-color: var(--blue);
    background: var(--blue-soft);
  }
}

/* Confirmation hero */
.thanks-hero {
  margin: 0 auto 56px;
}
.thanks-receipt {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding: 12px 18px 12px 14px;
  background: var(--paper);
  border: 1px solid rgba(110,139,108,0.4);
  border-radius: 999px;
  box-shadow: 0 14px 30px -22px rgba(110,139,108,0.5);
}
.thanks-receipt .tr-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.thanks-receipt .tr-check svg { width: 14px; height: 14px; }
.thanks-receipt .tr-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
  margin-bottom: 4px;
}
.thanks-receipt strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.thanks-hero h1 {
  margin: 0 0 22px;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.thanks-hero h1 em {
  font-style: normal;
  color: var(--blue);
}
.thanks-lede {
  max-width: 720px;
  margin: 0 0 32px;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1.6;
}
.thanks-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.thanks-meta .tm-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-right: 18px;
  border-right: 1px solid var(--rule);
}
.thanks-meta .tm-cell:last-child { border-right: 0; padding-right: 0; }
.thanks-meta .tm-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.thanks-meta .tm-cell strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.thanks-meta .tm-cell a {
  font-size: 14px;
  color: var(--blue-ink);
  font-family: var(--mono);
  text-decoration: none;
}
.thanks-meta .tm-cell a:hover { text-decoration: underline; }

/* Generic thank-you sections */
.thanks-section {
  max-width: 880px;
  margin: 0 auto 56px;
  padding: 36px 40px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.thanks-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.thanks-section-head .tss-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 500;
}
.thanks-section-head h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.thanks-section-head h2 em {
  font-style: normal;
  color: var(--blue);
}
.thanks-section-sub {
  margin: 0 0 24px;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.55;
  max-width: 680px;
}

/* Timeline */
.thanks-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  position: relative;
}
.thanks-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--rule-2), var(--rule));
}
.thanks-timeline li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
}
.thanks-timeline .tt-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--blue);
  margin-top: 2px;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--paper);
}
.thanks-timeline li:nth-child(4) .tt-dot { border-color: var(--terracotta); }
.thanks-timeline li:nth-child(5) .tt-dot { border-color: var(--sage); }
.thanks-timeline .tt-when {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.thanks-timeline strong {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 4px;
}
.thanks-timeline p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* Checklist */
.thanks-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.thanks-checklist li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.thanks-checklist .tc-mark {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--blue-ink);
  background: rgba(43,92,255,0.10);
  border-radius: 8px;
  display: grid;
  place-items: center;
  height: 28px;
  width: 36px;
}
.thanks-checklist strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.thanks-checklist p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* Promise reminder */
.thanks-promise {
  max-width: 880px;
  margin: 0 auto 56px;
  padding: 22px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: rgba(43,92,255,0.08);
  border: 1px solid rgba(43,92,255,0.30);
  border-radius: 16px;
}
.thanks-promise .tp-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(43,92,255,0.18);
  color: var(--blue-ink);
  display: grid; place-items: center;
  margin-top: 2px;
}
.thanks-promise .tp-ico svg { width: 20px; height: 20px; }
.thanks-promise .tp-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 6px;
}
.thanks-promise p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.thanks-promise strong { color: var(--ink); font-weight: 600; }

/* Founder note */
.thanks-founder {
  max-width: 880px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
  padding: 28px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.thanks-founder .tf-photo {
  width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(43,92,255,0.18) 0%, transparent 60%),
    linear-gradient(155deg, var(--blue-soft) 0%, var(--terra-soft) 100%);
  display: grid;
  place-items: end center;
  box-shadow: inset 0 0 0 1px rgba(20,22,24,0.06);
}
.thanks-founder .tf-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.thanks-founder .tf-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.thanks-founder .tf-body p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.thanks-founder .tf-sign {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.thanks-founder .tf-sign a { color: var(--blue-ink); text-decoration: none; }
.thanks-founder .tf-sign a:hover { text-decoration: underline; }

/* Bottom CTA strip */
.thanks-cta-strip {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  box-shadow: 0 30px 80px -50px rgba(20,22,24,0.55);
}
.thanks-cta-strip strong {
  display: block;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.thanks-cta-strip p {
  margin: 0;
  font-size: 14px;
  color: rgba(247,244,236,0.65);
}
.thanks-cta-strip .btn-primary {
  background: var(--paper);
  color: var(--ink);
}
.thanks-cta-strip .btn-primary:hover { background: var(--blue); color: var(--paper); }
.thanks-cta-strip .btn-ghost {
  color: var(--paper);
  border-color: rgba(247,244,236,0.25);
}
.thanks-cta-strip .btn-ghost:hover { background: rgba(247,244,236,0.08); }
.thanks-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Legacy thanks-card (kept for any old links) */
.thanks-card {
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 44px;
  box-shadow: 0 30px 70px -45px rgba(20,22,24,0.28);
}
.thanks-card h1 {
  margin: 0 0 18px;
  font-size: 52px;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.thanks-card h1 em { font-style: normal; color: var(--blue); }
.thanks-card p { max-width: 620px; margin: 0 0 28px; color: var(--ink-dim); font-size: 18px; line-height: 1.55; }
.thanks-card .hero-ctas { margin-bottom: 0; }
.thanks-note {
  margin-top: 28px !important;
  font-family: var(--mono);
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--ink-faint) !important;
}

@media (max-width: 720px) {
  .thanks { padding: 40px 0 64px; }
  .thanks-hero h1 { font-size: 36px; }
  .thanks-lede { font-size: 16px; }
  .thanks-section { padding: 26px 22px; }
  .thanks-section-head h2 { font-size: 24px; }
  .thanks-section-head { flex-direction: column; gap: 6px; align-items: flex-start; }
  .thanks-meta { flex-direction: column; gap: 14px; padding: 16px 18px; }
  .thanks-meta .tm-cell { border-right: 0; padding-right: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .thanks-meta .tm-cell:last-child { border-bottom: 0; padding-bottom: 0; }
  .thanks-promise { flex-direction: column; gap: 14px; padding: 20px; }
  .thanks-founder { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .thanks-founder .tf-photo { width: 120px; }
  .thanks-cta-strip { grid-template-columns: 1fr; padding: 24px; }
}

@media (max-width: 960px) {
  .foot-top { grid-template-columns: 1fr; gap: 48px; }
  .foot-links { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .thanks { padding: 64px 0; }
  .thanks-card {
    padding: 30px 24px;
    border-radius: 14px;
  }
  .thanks-card h1 { font-size: 34px; }
  .thanks-card p { font-size: 16px; }
  .foot-sub-form {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .foot-sub-form button {
    justify-content: center;
  }
  .foot-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  .foot-mini-links { flex-wrap: wrap; gap: 18px; }
  .foot-mark {
    font-size: clamp(36px, 13vw, 64px);
    white-space: nowrap;
  }
}

/* ============ SAMPLE AGREEMENT ============ */
.agreement {
  padding: 64px 0 96px;
  background: var(--paper);
}
.agreement-hero {
  max-width: 760px;
  margin: 0 auto 56px;
}
.agreement-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding: 6px 12px;
  background: rgba(193,98,68,0.08);
  border: 1px solid rgba(193,98,68,0.25);
  border-radius: 999px;
  margin-bottom: 24px;
}
.agreement-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
}
.agreement-lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 28px;
}
.agreement-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  background: rgba(43,92,255,0.06);
  border: 1px solid rgba(43,92,255,0.22);
  border-radius: 14px;
}
.agreement-callout .ac-ico {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(43,92,255,0.16);
  color: var(--blue-ink);
  display: grid; place-items: center;
  margin-top: 2px;
}
.agreement-callout .ac-ico svg { width: 16px; height: 16px; }
.agreement-callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.agreement-callout a { color: var(--blue-ink); }

.agreement-doc {
  max-width: 760px;
  margin: 0 auto 48px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 8px 0;
}
.agreement-clause {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 36px;
  border-bottom: 1px solid var(--rule);
}
.agreement-clause:last-child { border-bottom: 0; }
.agreement-clause .ac-num {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding-top: 4px;
}
.agreement-clause > h2,
.agreement-clause > p,
.agreement-clause > ul {
  grid-column: 2;
  min-width: 0;
}
.agreement-clause h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.agreement-clause p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.agreement-clause p:last-child { margin-bottom: 0; }
.agreement-clause strong { color: var(--ink); font-weight: 600; }
.agreement-clause ul {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.agreement-clause ul:last-child { margin-bottom: 0; }
.agreement-clause li { margin-bottom: 6px; }
.agreement-clause li:last-child { margin-bottom: 0; }
.agreement-clause em { color: var(--ink); font-style: italic; }

.agreement-clause--closing {
  background: rgba(43,92,255,0.04);
  border-radius: 0 0 22px 22px;
}
.agreement-clause--closing .ac-num {
  color: var(--blue-ink);
  font-size: 16px;
}
.agreement-clause--closing h2 { color: var(--blue-ink); }

.agreement-cta {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 22px;
}
.agreement-cta strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 6px;
  color: #fff;
}
.agreement-cta p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(247,244,236,0.72);
  max-width: 460px;
}
.agreement-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.agreement-cta .btn-primary {
  background: #fff;
  color: var(--ink);
}
.agreement-cta .btn-primary:hover { background: var(--blue); color: #fff; }
.agreement-cta .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(247,244,236,0.28);
}
.agreement-cta .btn-ghost:hover {
  background: rgba(247,244,236,0.06);
  border-color: rgba(247,244,236,0.5);
}

@media (max-width: 720px) {
  .agreement-clause {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 24px;
  }
  .agreement-clause .ac-num { padding-top: 0; }
  .agreement-clause > h2,
  .agreement-clause > p,
  .agreement-clause > ul { grid-column: 1; }
  .agreement-doc { border-radius: 18px; }
  .agreement-cta {
    padding: 24px;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
  }
  .agreement-cta-actions { width: 100%; }
  .agreement-cta-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============ TWEAKS PANEL ============ */
.tweaks {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 50px -20px rgba(20,22,24,0.3);
  font-size: 14px;
  z-index: 80;
  display: none;
}
.tweaks.on { display: block; }
.tweaks .t-title {
  font-weight: 600;
  margin-bottom: 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  font-family: var(--mono);
}
.tweaks .t-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.tweaks .t-row label { color: var(--ink-dim); font-size: 13px; }
.tweaks button, .tweaks select {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--sans);
}

/* sticky in-page nav anchor offsets */
section[id] { scroll-margin-top: 80px; }

/* ============ ROADS / ANALOGY SECTION ============ */
.roads {
  padding: 88px 0 96px;
  background:
    radial-gradient(800px 400px at 10% 20%, var(--blue-soft) 0%, transparent 55%),
    radial-gradient(700px 380px at 95% 90%, var(--terra-soft) 0%, transparent 55%),
    var(--paper);
  border-top: 1px solid var(--rule);
}
.roads .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
  display: inline-flex; gap: 12px; align-items: center;
}
.roads .eyebrow .b { width: 22px; height: 1px; background: var(--terracotta); display:inline-block; }

.roads h2 {
  font-size: 44px; line-height: 1.1;
  font-weight: 500; letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 860px;
}
.roads h2 em { font-style: normal; color: var(--blue); font-weight: 500; }
.roads h2 .dim { color: var(--ink-faint); font-weight: 400; }

.roads .lede {
  font-size: 19px; line-height: 1.6;
  color: var(--ink-dim);
  max-width: 780px;
  margin: 0 0 8px;
}
.roads .lede strong { color: var(--ink); font-weight: 500; }
.roads .lede + .lede { margin-top: 10px; }

/* Two-panel analogy */
.roads-panels {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 24px;
  align-items: stretch;
}
.road-panel {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 50px -45px rgba(20,22,24,0.25);
}
.road-panel.bad { background: var(--paper-2); }
.road-panel .ktop {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.road-panel.bad .ktop  { color: var(--terracotta); }
.road-panel.good .ktop { color: var(--blue); }
.road-panel .ktop .d {
  width: 7px; height: 7px; border-radius: 50%;
}
.road-panel.bad .ktop .d  { background: var(--terracotta); }
.road-panel.good .ktop .d { background: var(--blue); box-shadow: 0 0 0 3px rgba(43,92,255,0.18); }

.road-panel h3 {
  margin: 0;
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}
.road-panel p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.55;
}
.road-panel svg { width: 100%; height: auto; margin-top: 4px; }

/* Proof strip */
.roads-proof {
  margin-top: 48px;
  display: grid;
  gap: 28px;
  padding: 28px 0 0;
  border-top: 1px solid var(--rule);
}
.roads-proof .rp-head {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
.roads-proof .k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding-top: 4px;
}
.roads-proof .statement {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 820px;
  letter-spacing: -0.005em;
}
.roads-proof .statement strong { color: var(--ink); font-weight: 500; }
.roads-proof .statement .em {
  color: var(--blue-ink); font-weight: 500;
}

.vertical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.vcard {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: white;
}
.vcard .vc-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.vcard .vc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.vcard p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}
@media (max-width: 720px) {
  .vertical-grid { grid-template-columns: 1fr; }
}

.roads-verticals {
  margin-top: 20px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.roads-verticals .vpill {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.roads-verticals .vpill .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}
.roads-verticals .vpill:nth-child(2) .d { background: var(--blue); }
.roads-verticals .vpill:nth-child(3) .d { background: var(--terracotta); }
.roads-verticals .vpill:nth-child(4) .d { background: var(--mustard); }

.roads-missing {
  margin-top: 40px;
  padding: 22px 26px;
  border: 1px dashed var(--rule-2);
  border-radius: 12px;
  background: var(--paper-2);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 980px;
}
.roads-missing .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-right: 10px;
}
.roads-missing strong { font-weight: 500; color: var(--ink); }

@media (max-width: 900px) {
  .roads h2 { font-size: 30px; }
  .roads-panels { grid-template-columns: 1fr; }
  .roads-proof .rp-head { grid-template-columns: 1fr; gap: 12px; }
  .roads-proof .statement { font-size: 17px; }
}

/* ============ DIAGRAM MOTION ============ */
.flow-lines path,
.road-network path,
.stack-flow path,
.tool-step {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.motion-watch.is-visible .flow-lines path {
  stroke-dasharray: 16 12;
  animation: svgFlow 2.4s linear infinite;
}
.motion-watch.is-visible .flow-lines path:nth-child(2) { animation-delay: 120ms; }
.motion-watch.is-visible .flow-lines path:nth-child(3) { animation-delay: 240ms; }
.motion-watch.is-visible .flow-lines path:nth-child(4) { animation-delay: 360ms; }
.motion-watch.is-visible .flow-lines path:nth-child(5) { animation-delay: 480ms; }
.motion-watch.is-visible .flow-lines path:nth-child(6) { animation-delay: 600ms; }

.motion-watch.is-visible .flow-lines-warm path { stroke-dasharray: 12 14; }
.motion-watch.is-visible .flow-lines-blue path { stroke-dasharray: 18 12; }

.motion-watch.is-visible .road-network path {
  stroke-dasharray: 10 10;
  animation: svgFlow 2.1s linear infinite;
}
.motion-watch.is-visible .road-network path:nth-child(2) { animation-delay: 90ms; }
.motion-watch.is-visible .road-network path:nth-child(3) { animation-delay: 180ms; }
.motion-watch.is-visible .road-network path:nth-child(4) { animation-delay: 270ms; }
.motion-watch.is-visible .road-network path:nth-child(5) { animation-delay: 360ms; }
.motion-watch.is-visible .road-network path:nth-child(6) { animation-delay: 450ms; }
.motion-watch.is-visible .road-network path:nth-child(7) { animation-delay: 540ms; }
.motion-watch.is-visible .road-network path:nth-child(8) { animation-delay: 630ms; }

.motion-watch.is-visible .road-lane-dashes line {
  animation: svgFlow 1.4s linear infinite;
}
.motion-watch.is-visible .road-car {
  animation: diagramBreath 3.8s ease-in-out infinite;
}

.motion-watch.is-visible .tangle-lines path {
  animation: tangleDrift 3.8s linear infinite;
}
.motion-watch.is-visible .tangle-lines path:nth-child(2) { animation-delay: 180ms; }
.motion-watch.is-visible .tangle-lines path:nth-child(3) { animation-delay: 360ms; }
.motion-watch.is-visible .tangle-lines path:nth-child(4) { animation-delay: 540ms; }
.motion-watch.is-visible .tangle-lines path:nth-child(5) { animation-delay: 720ms; }
.motion-watch.is-visible .tangle-lines path:nth-child(6) { animation-delay: 900ms; }

.motion-watch.is-visible .stack-layer {
  animation: stackLayerPulse 6.4s ease-in-out infinite;
}
.stack-layer-1 { --stack-delay: 0s; }
.stack-layer-2 { --stack-delay: 650ms; }
.stack-layer-3 { --stack-delay: 1300ms; }
.stack-layer-4 { --stack-delay: 1950ms; }
.motion-watch.is-visible .stack-layer {
  animation-delay: var(--stack-delay, 0s);
}
.motion-watch.is-visible .stack-flow path {
  stroke-dasharray: 14 12;
  animation: svgFlow 2.6s linear infinite;
}
.motion-watch.is-visible .stack-flow-blue path { stroke-dasharray: 18 12; }
.motion-watch.is-visible .stack-flow-muted path { stroke-dasharray: 10 10; }

.tool-step-1 { --tool-delay: 0s; }
.tool-step-2 { --tool-delay: 380ms; }
.tool-step-3 { --tool-delay: 760ms; }
.tool-step-4 { --tool-delay: 1140ms; }
.tool-step-5 { --tool-delay: 1520ms; }
.tool-step-6 { --tool-delay: 1900ms; }
.tool-step-7 { --tool-delay: 2280ms; }
.motion-watch.is-visible .tool-step {
  stroke-dasharray: 18 12;
  animation: toolStepFlow 4.8s ease-in-out infinite;
  animation-delay: var(--tool-delay, 0s);
}

@keyframes svgFlow {
  to { stroke-dashoffset: -48; }
}

@keyframes tangleDrift {
  to { stroke-dashoffset: -18; }
}

@keyframes diagramBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.74; }
}

@keyframes stackLayerPulse {
  0%, 48%, 100% {
    opacity: 1;
    stroke-width: 1.4;
  }
  16% {
    opacity: 0.9;
    stroke-width: 3;
  }
}

@keyframes toolStepFlow {
  0%, 10% {
    opacity: 0.35;
    stroke-dashoffset: 30;
  }
  30%, 58% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  78%, 100% {
    opacity: 0.35;
    stroke-dashoffset: -30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-watch.is-visible .flow-lines path,
  .motion-watch.is-visible .road-network path,
  .motion-watch.is-visible .road-lane-dashes line,
  .motion-watch.is-visible .road-car,
  .motion-watch.is-visible .tangle-lines path,
  .motion-watch.is-visible .stack-layer,
  .motion-watch.is-visible .stack-flow path,
  .motion-watch.is-visible .tool-step,
  .sheet-menubar .live .d,
  .dash-bar .meta .status .dot,
  .sheet-row-enter,
  .sheet-cell-flash {
    animation: none !important;
  }

  .motion-watch.is-visible .flow-lines path,
  .motion-watch.is-visible .road-network path,
  .motion-watch.is-visible .stack-flow path,
  .motion-watch.is-visible .tool-step {
    stroke-dasharray: none;
  }
}