/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

:root {
  /* Handle-inspired palette — clean white, near-black ink, flat greys */
  --background: #ffffff;
  --surface: #ffffff;          /* page bg, pure white */
  --card: #f7f7f7;             /* neutral grey — cards */
  --card-2: #f0f0f0;           /* slightly darker for variation */
  --foreground: #0a0a0a;       /* near-black text */
  --muted: #6b6b6b;            /* muted body text */
  --muted-2: #9a9a9a;
  --border: #e8e8e8;
  --border-side: rgba(0, 0, 0, 0.07);
  --accent: #000000;           /* black accent / buttons */
  --accent-fg: #ffffff;
  --highlight: transparent;    /* emphasis comes from weight, not colour */

  /* Brand lime, sampled from the sprig in the logo, as background washes */
  --brand: #b8c56a;
  --tint-1: #f3f7e4;           /* section wash */
  --tint-2: #eaf1cf;           /* card fill */
  --tint-3: #dfe9b8;           /* hover / emphasis block */
  --tint-line: #d5e2a8;        /* borders inside tinted areas */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --container: 1152px; /* max-w-6xl */
}

body {
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

/* ── Layout container with dotted side borders (reception signature) ── */
.frame {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}
@media (min-width: 768px) {
  .frame { padding: 0 20px; }
}

/* Side rails removed — every page reads clean and edge-to-edge, matching
   the home. .frame-bordered is kept as a no-op so existing markup is safe. */
.frame-bordered::before,
.frame-bordered::after { content: none; }

/* ── Section ── */
.section { padding: 60px 0; position: relative; }
@media (min-width: 768px) { .section { padding: 80px 0; } }
@media (min-width: 1024px) { .section { padding: 100px 0; } }

.section-tight { padding: 40px 0; }

/* ── Typography ── */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--foreground);
}
.display-2 {
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--foreground);
}
.display-3 {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.lead {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 560px;
}
@media (min-width: 768px) {
  .lead { font-size: 17px; }
}

/* Handle reserves JetBrains Mono for uppercase micro-labels only. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-transform: uppercase;
}

.subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--foreground);
  line-height: 1.38;
}

.description { font-size: 15px; line-height: 1.63; color: var(--muted); }

/* Handle sets headlines in one solid weight with no highlight box.
   .hl stays in the markup as an emphasis hook but renders flat. */
.hl {
  background: none;
  font-style: normal;
  padding: 0;
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(253, 252, 252, 0.8);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 768px) { .nav-inner { padding: 0 20px; gap: 28px; } }

.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--foreground);
  line-height: 1;
}
.nav-mark .brand-icon,
.footer-mark .brand-icon {
  height: 18px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  gap: 8px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .nav-links { display: flex; align-items: center; }
}
.nav-link {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--foreground); }

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 768px) {
  .nav-actions { margin-left: 0; }
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover { background: #1a1a1a; }
.btn-ghost {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: #fafafa; }
.btn-lg {
  padding: 12px 22px;
  font-size: 15px;
}
.btn-arrow svg { width: 14px; height: 14px; transition: transform 0.2s; }
.btn-arrow:hover svg { transform: translateX(2px); }

/* ── Hero ── */
.hero {
  padding: 96px 0 56px;
  text-align: center;
}
@media (min-width: 768px) { .hero { padding: 128px 0 80px; } }
@media (min-width: 1024px) { .hero { padding: 160px 0 96px; } }

.hero .eyebrow { margin-bottom: 28px; }
.hero .display { margin-bottom: 24px; max-width: 920px; margin-left: auto; margin-right: auto; }
.hero .lead { margin: 0 auto 36px; }
.hero-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Hero video / preview ── */
.hero-preview {
  padding: 0 0 56px;
}
@media (min-width: 768px) { .hero-preview { padding: 0 0 80px; } }
@media (min-width: 1024px) { .hero-preview { padding: 0 0 112px; } }

.preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.18);
}
.preview-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fdfcfc 0%, #f5f3f1 100%);
  display: flex;
  flex-direction: column;
}
.preview-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.preview-dots { display: flex; gap: 6px; }
.preview-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
}
.preview-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--card);
  padding: 4px 12px;
  border-radius: 999px;
}
.preview-body {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
}
@media (max-width: 768px) {
  .preview-body { grid-template-columns: 1fr; }
  .preview-side { display: none; }
}
.preview-side {
  background: var(--background);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
}
.preview-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}
.preview-side-item.is-active { background: var(--card); color: var(--foreground); font-weight: 500; }
.preview-side-icon { width: 14px; height: 14px; opacity: 0.6; }

.preview-main {
  padding: 20px 22px;
  overflow: hidden;
}
.preview-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.preview-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.preview-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
}
.preview-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
}
.preview-row.is-live {
  border-color: rgba(0,0,0,0.16);
  background: linear-gradient(90deg, rgba(254, 248, 212, 0.5), var(--background) 60%);
}
.preview-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4cdc1, #a8a094);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--foreground);
  flex-shrink: 0;
}
.preview-avatar.b { background: linear-gradient(135deg, #c5d4e3, #91a6bf); }
.preview-avatar.c { background: linear-gradient(135deg, #e3c5cd, #bf91a0); }
.preview-name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.preview-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.preview-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.preview-pulse.live { color: var(--foreground); }
.preview-pulse.live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.preview-play {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--accent-fg);
  display: grid;
  place-items: center;
}

/* ── Dashboard preview (real product mirror) ── */
.dash-main {
  padding: 16px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dash-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.dash-header-actions { display: flex; gap: 6px; }
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
}
.dash-btn svg { width: 11px; height: 11px; opacity: 0.6; }
.dash-btn-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.dash-kpi {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.dash-kpi-label {
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-kpi-num {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--foreground);
}
.dash-kpi-num small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 1px;
}
.dash-kpi-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  line-height: 1.15;
}
.dash-kpi-sub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0;
  line-height: 1.3;
}

.dash-chart-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dash-chart-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 10px;
}
.dash-chart {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-bottom: 14px;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-left: 2px;
}
.dash-chart::before {
  content: '';
  position: absolute;
  inset: 0 0 14px 0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 100% 25%;
  pointer-events: none;
}
.dash-bar {
  flex: 1;
  background: #16a34a;
  border-radius: 1px 1px 0 0;
  min-width: 4px;
  max-width: 8px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.dash-bar:hover { opacity: 1; }
.dash-chart-axis {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--muted);
}

.dash-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-search {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  font-size: 11px;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-search svg { width: 11px; height: 11px; opacity: 0.5; }
.dash-pill {
  font-size: 10.5px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-pill svg { width: 9px; height: 9px; opacity: 0.5; }
.dash-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

.dash-table {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.dash-tr {
  display: grid;
  grid-template-columns: 50px 1.2fr 1.5fr 1.2fr 1fr 60px 90px 50px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
}
.dash-th {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.dash-row {
  border-bottom: 1px solid var(--border);
}
.dash-row:last-child { border-bottom: none; }
.dash-row .dash-cell { color: var(--foreground); font-weight: 500; }
.dash-row .dash-cell-muted { color: var(--muted); font-weight: 400; }
.dash-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  font-weight: 500;
}
.dash-score-bad { color: #c0392b; font-weight: 600; }
.dash-score-warn { color: #d97706; font-weight: 600; }
.dash-score-ok { color: #16a34a; font-weight: 600; }
.dash-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0.5; }
.dash-actions svg { width: 11px; height: 11px; }

/* ── Stage / Window (Platform Hero v2 design) ── */
.stage-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 56px auto 0;
  position: relative;
}
@media (min-width: 768px) { .stage-wrap { margin-top: 72px; } }
.stage-clip {
  position: relative;
  max-height: 920px;
  overflow: hidden;
  border-radius: 14px;
}
.stage-clip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom,
    rgba(251,251,250,0) 0%,
    rgba(251,251,250,.7) 50%,
    rgba(251,251,250,.96) 88%,
    #fbfbfa 100%);
  pointer-events: none;
  z-index: 5;
}

.window {
  --w-fg: #0a0a0a;
  --w-fg-2: #3a3a3a;
  --w-muted: #6e6e6e;
  --w-muted-2: #9a9a9a;
  --w-line: #ececec;
  --w-line-2: #dcdcdc;
  --w-hover: #f7f7f7;
  --w-chip: #f3f3f3;
  --w-accent: #5cb677;
  --w-accent-2: #3f9b5c;
  --w-accent-soft: #eef6ee;
  --w-accent-bd: #cfe3ce;
  --w-warn-bg: #fff7e0;
  --w-warn-fg: #8a5a00;
  --w-warn-bd: #f0d999;
  --w-score: #b8521a;
  background: #fbfbfa;
  color: var(--w-fg);
  border: 1px solid var(--w-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -28px rgba(13,13,13,.18),
    0 10px 22px -12px rgba(13,13,13,.08);
}
.winbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--w-line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--w-muted);
  background: #ffffff;
}
.winbar .dots { display: inline-flex; gap: 6px; }
.winbar .dots i {
  width: 9px; height: 9px;
  border-radius: 9999px;
  display: inline-block;
  background: #dcdcdc;
}
.winbar .url {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--w-fg-2);
  margin: 0 auto;
}
.winbar .url .slash { color: #cfcfcf; }
.winbar .url .path { color: var(--w-fg); font-weight: 500; }

.app { display: grid; grid-template-columns: 208px 1fr; min-height: 480px; }
.side {
  border-right: 1px solid var(--w-line);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #ffffff;
}
.nav-i {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--w-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.nav-i .lucide-i {
  width: 15px;
  height: 15px;
  color: var(--w-muted-2);
  flex-shrink: 0;
}
.nav-i.active { background: var(--w-chip); color: var(--w-fg); }
.nav-i.active .lucide-i { color: var(--w-fg); }
.nav-i .beta {
  margin-left: auto;
  background: transparent;
  color: var(--w-muted-2);
  border: 1px solid var(--w-line);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-sans);
}

.main-app { display: flex; flex-direction: column; min-width: 0; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 16px;
}
.top h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--w-fg);
}
.top-r { display: flex; gap: 8px; align-items: center; }
.btn-app {
  border: 1px solid var(--w-line);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--w-fg);
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-app .lucide-i {
  width: 13px;
  height: 13px;
  color: var(--w-fg-2);
}

.page {
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fbfbfa;
}

/* KPIs (Window-scoped) */
.window .kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.window .kpi {
  border: 1px solid var(--w-line);
  border-radius: 10px;
  background: #fff;
  padding: 14px 14px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms, box-shadow 160ms;
}
.window .kpi .l {
  font-size: 11px;
  color: var(--w-muted);
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.window .kpi .v {
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--w-fg);
}
.window .kpi .v .nm {
  font-size: 16px;
  letter-spacing: -.005em;
  font-weight: 500;
  display: block;
}
.window .kpi .v .u {
  font-size: 13px;
  font-weight: 500;
  color: var(--w-muted);
  margin-left: 1px;
}
.window .kpi .d {
  font-size: 10.5px;
  margin-top: auto;
  color: var(--w-muted);
  padding-top: 8px;
}

.panel {
  border: 1px solid var(--w-line);
  border-radius: 10px;
  background: #fff;
  padding: 16px 18px;
}
.panel-h {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  text-align: center;
}
.panel-h .pt {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--w-fg);
}

.chart-wrap { position: relative; }
svg.chart { width: 100%; height: 140px; display: block; }
.chart-wrap .ax {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--w-muted);
  font-family: var(--font-mono);
  margin-top: 4px;
}

/* filters */
.filt-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
}
.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--w-line);
  border-radius: 9px;
  padding: 0 11px;
  height: 34px;
  background: #fff;
}
.search-input .lucide-i { width: 13px; height: 13px; color: var(--w-muted); }
.search-input span {
  flex: 1;
  font-size: 12px;
  color: var(--w-muted);
}
.filt-pill {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--w-line);
  border-radius: 9px;
  font-size: 11.5px;
  color: var(--w-fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  font-family: inherit;
  font-weight: 500;
}
.filt-pill .lucide-i { width: 11px; height: 11px; color: var(--w-muted); }
.count-label {
  font-size: 11px;
  color: var(--w-muted);
  font-family: var(--font-mono);
  padding: 0 4px;
}

/* table */
.ltbl {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--w-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.lt-row {
  display: grid;
  grid-template-columns: 64px minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.2fr) 134px 50px 80px 36px;
  column-gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--w-line);
  font-size: 12px;
}
.lt-row:last-child { border-bottom: 0; }
.lt-row.head {
  font-size: 10.5px;
  color: var(--w-muted);
  font-weight: 500;
  padding: 10px 18px;
  border-bottom: 1px solid var(--w-line);
  background: #fafaf9;
}
.lt-row .nmc, .lt-row .biz, .lt-row .clo { min-width: 0; overflow: hidden; }
.lt-row .dt { font-family: var(--font-mono); color: var(--w-fg-2); }
.lt-row .nmc { font-weight: 500; color: var(--w-fg); }
.lt-row .clo, .lt-row .biz { color: var(--w-fg-2); }
.lt-row .amt {
  font-family: var(--font-mono);
  color: var(--w-fg);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.lt-row .sc {
  font-weight: 500;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--w-score);
  text-align: right;
}
.lt-row .sc.good { color: var(--w-accent-2); }
.lt-row .sc.bad { color: #a44a4a; }
.lt-row .actions {
  display: inline-flex;
  gap: 8px;
  color: var(--w-muted);
  justify-self: end;
}
.lt-row .actions .lucide-i { width: 12px; height: 12px; }

/* skeleton */
.skel {
  display: inline-block;
  height: 9px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ececec 0%, #dcdcdc 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
  vertical-align: middle;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 10.5px;
  border: 1px solid;
  font-weight: 500;
  justify-self: start;
  white-space: nowrap;
}
.b-pend { background: var(--w-warn-bg); color: var(--w-warn-fg); border-color: var(--w-warn-bd); }
.b-won { background: var(--w-accent-soft); color: var(--w-accent-2); border-color: var(--w-accent-bd); }
.b-lost { background: #fbe7e7; color: #922b2b; border-color: #e9b6b6; }

/* ── Interactive states (hover, selection, menus, tooltip) ── */
.window .kpi { cursor: pointer; transition: border-color 160ms, box-shadow 160ms; }
.window .kpi:hover { border-color: var(--w-line-2); box-shadow: 0 1px 2px rgba(13,13,13,0.04); }
.window .kpi.sel { border-color: var(--w-fg); box-shadow: 0 0 0 1px var(--w-fg) inset; }

.nav-i { cursor: pointer; transition: background 120ms, color 120ms; }
.nav-i:hover { background: var(--w-hover); color: var(--w-fg); }
.nav-i:hover .lucide-i { color: var(--w-fg-2); }
.nav-i.soon { cursor: not-allowed; }
.nav-i.soon:hover { background: transparent; color: var(--w-muted); }
.nav-i.soon:hover .lucide-i { color: var(--w-muted-2); }

.filt-pill { cursor: pointer; position: relative; transition: background 120ms, border-color 120ms; }
.filt-pill:hover { background: var(--w-hover); border-color: var(--w-line-2); }
.btn-app { cursor: pointer; transition: background 120ms, border-color 120ms; }
.btn-app:hover { background: var(--w-hover); }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--w-line);
  border-radius: 10px;
  padding: 5px;
  min-width: 180px;
  box-shadow: 0 16px 32px -12px rgba(13,13,13,0.18);
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  font-weight: 400;
}
.menu.open { display: flex; }
.menu .it {
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--w-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu .it:hover { background: var(--w-hover); }
.menu .it.on { background: var(--w-chip); }
.menu .it .lucide-i {
  width: 11px;
  height: 11px;
  margin-left: auto;
  opacity: 0;
  color: var(--w-accent);
}
.menu .it.on .lucide-i { opacity: 1; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: #0d0d0d;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 5;
  line-height: 1.4;
}
.tooltip b { color: #a7e0a7; font-weight: 500; }
.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0d0d0d;
}
.tooltip.show { opacity: 1; }

/* views */
.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 12px; }

/* Closing Intelligence view */
.ci-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ci-stat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.closer-row {
  display: grid;
  grid-template-columns: 18px 100px minmax(80px, 1fr) 56px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--w-line);
  font-size: 12px;
}
.closer-row:last-child { border-bottom: 0; }
.closer-row.head {
  font-size: 10.5px;
  color: var(--w-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--w-line);
  padding-bottom: 9px;
}
.closer-row .rk {
  font-family: var(--font-mono);
  color: var(--w-muted);
  font-size: 10.5px;
  text-align: center;
}
.closer-row .nm-skel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.closer-row .av {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: var(--w-chip);
  color: var(--w-muted-2);
  font-size: 9px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.closer-row .meter {
  height: 5px;
  background: var(--w-chip);
  border-radius: 9999px;
  overflow: hidden;
  flex: 1;
  display: flex;
}
.closer-row .meter > i {
  display: block;
  height: 100%;
  background: var(--w-accent);
  border-radius: 9999px;
}
.closer-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--w-fg);
  text-align: right;
  font-weight: 500;
  font-size: 11.5px;
}
.closer-row .meter-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.closer-row .meter-cell .pct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--w-muted);
  width: 36px;
  text-align: right;
}
.ccrow {
  max-width: 100%;
}

@media (max-width: 880px) {
  .ci-row { grid-template-columns: 1fr; }
  .ci-stat { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .window .kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .window .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .lt-row { grid-template-columns: 1fr 110px 50px; gap: 8px; }
  .lt-row .dt, .lt-row .clo, .lt-row .biz, .lt-row .amt, .lt-row .actions { display: none; }
}

.redact {
  display: inline-block;
  background: #d8d3cd;
  color: transparent;
  border-radius: 4px;
  user-select: none;
  vertical-align: middle;
  line-height: 1;
  padding: 0 2px;
}

/* ── Marquee ── */
.marquee {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--background);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 60s linear infinite;
}
.marquee-content { display: flex; align-items: center; flex-shrink: 0; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item .num { color: var(--foreground); font-weight: 500; }
.marquee-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--muted-2);
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Section header (left-right grid like reception) ── */
.section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
  align-items: end;
}
@media (min-width: 768px) {
  .section-header { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
}
.section-header h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.section-header .description { padding-top: 6px; }

/* ── Bento grid ── */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Three columns only from 1024 up. At 768 they left 230px-wide cards, and
   the densest mockup (fb-visual) needed 380px of height to render without
   clipping — a portrait box that tall reads as broken. Below 1024 the
   cards go full width, where every mockup fits in ~266px. */
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 16px 16px; row-gap: 80px; }
}

.bento-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.bento-card-wide { grid-column: 1 / -1; }
/* Same 1024 breakpoint as the 3-column grid above: spanning 2 columns in
   the 1-column layout would spawn an implicit extra column. */
@media (min-width: 1024px) {
  .bento-card-2 { grid-column: span 2; }
}

/* The mockups inside are position:absolute, so this box can never grow to
   fit them — 4/3 alone was clipping the last line of five of the six
   visuals. The floor guarantees the tallest mockup (~266px) fits; the
   ceiling stops a full-width card from stretching the box to 500px+.
   Both are plain lengths, so every card in a row lands on the same
   height whatever the viewport. */
.bento-visual {
  position: relative;
  /* width must be pinned: with aspect-ratio set, a definite min-height
     makes the browser derive the WIDTH from it (284 × 4/3 = 379px), which
     overflowed the card and knocked the rounded corners out of alignment,
     leaving a green sliver down the sides. */
  width: 100%;
  /* Square: the card is the thing with the radius, and it clips us
     (overflow: hidden), so its corners stay perfectly flush with ours. */
  border-radius: 0;
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 4 / 3;
  min-height: 284px;
  max-height: 340px;
}
/* One hairline where the mockup meets the text — the other three edges are
   the card's own border now. */
.bento-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075);
  pointer-events: none;
}
.bento-visual-tall { aspect-ratio: 3 / 4; }
.bento-visual-wide { aspect-ratio: 16 / 9; }
/* The bottom padding was 0, so the description sat 1px off the card's
   border — the text looked like it was falling out of the card. */
.bento-card .bento-text {
  padding: 16px 24px 24px 28px;
}
.bento-card .subhead { letter-spacing: 0.01em; }
.bento-card .description { margin-top: 4px; padding-top: 0; }

/* ── Visual: Live Transfers ── */
.lt-visual {
  position: absolute;
  inset: 18px;
  background: var(--background);
  border-radius: 16px;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lt-visual-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.lt-visual-bar .preview-dots .preview-dot { width: 7px; height: 7px; }
.lt-visual-bar .preview-url { font-size: 10px; padding: 2px 10px; margin-left: auto; }
.lt-visual-body { padding: 14px; flex: 1; overflow: hidden; }
.lt-visual-body .preview-h { margin-bottom: 12px; }
.lt-visual-body .preview-title { font-size: 14px; }
.lt-visual-body .preview-pill { font-size: 10px; padding: 3px 8px; }
.lt-visual-body .preview-row { padding: 8px 10px; margin-bottom: 6px; }
.lt-visual-body .preview-avatar { width: 24px; height: 24px; font-size: 9px; }
.lt-visual-body .preview-name { font-size: 11.5px; }
.lt-visual-body .preview-meta { font-size: 9.5px; }
.lt-visual-body .preview-pulse { font-size: 9px; }
.lt-visual-body .preview-play { width: 20px; height: 20px; }

/* ── Visual: Closing Intelligence (score card) ── */
.ci-visual {
  position: absolute;
  inset: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ci-score-bar {
  background: var(--background);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.08);
}
.ci-score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ci-score-name { font-size: 12px; font-weight: 500; }
.ci-score-deal { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }
.ci-score-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.ci-score-big {
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}
.ci-score-big.bad { color: #c0392b; }
.ci-score-big.ok { color: #16a34a; }
.ci-score-suffix { font-size: 12px; color: var(--muted); }
.ci-score-bar-bg {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.ci-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--foreground);
}
.ci-score-bar-fill.bad { background: #c0392b; }
.ci-score-bar-fill.ok { background: #16a34a; }
.ci-score-bar-fill.warn { background: #d97706; }

/* ── Visual: Player ── */
.pl-visual {
  position: absolute;
  inset: 22px;
  background: var(--background);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pl-title { font-size: 12px; font-weight: 500; }
.pl-time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pl-controls { display: flex; align-items: center; gap: 12px; }
.pl-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--foreground);
  color: var(--accent-fg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pl-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
}
.pl-wave span {
  flex: 1;
  background: var(--border);
  border-radius: 1px;
  max-width: 3px;
}
.pl-wave span.played { background: var(--foreground); }
.pl-feedback {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  padding: 10px 12px;
  background: var(--card);
  border-radius: 10px;
  margin-top: 4px;
}
.pl-feedback strong { color: var(--foreground); font-weight: 500; }

/* ── Visual: Ranking ── */
.rk-visual {
  position: absolute;
  inset: 22px;
  background: var(--background);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.rk-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.rk-title { font-size: 12px; font-weight: 500; }
.rk-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rk-row {
  display: grid;
  grid-template-columns: 18px 1fr 90px 28px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 11.5px;
  border-top: 1px solid var(--border);
}
.rk-row:first-of-type { border-top: none; }
.rk-rank { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); }
.rk-name { font-size: 11.5px; font-weight: 500; }
.rk-bar {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.rk-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--foreground);
}
.rk-bar-fill.warn { background: #d97706; }
.rk-bar-fill.bad { background: #c0392b; }
.rk-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-align: right; }

/* ── Visual: Feedback bullets ── */
.fb-visual {
  position: absolute;
  inset: 22px;
  background: var(--background);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fb-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.fb-title { font-size: 12px; font-weight: 500; }
.fb-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fb-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  flex: 1;
  min-height: 0;
}
.fb-list li {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  display: flex;
  gap: 7px;
}
.fb-list li::before {
  content: '→';
  color: var(--foreground);
  flex-shrink: 0;
}
.fb-list strong { color: var(--foreground); font-weight: 500; }

/* ── Visual: Big quote (with stat) ── */
.stat-visual {
  position: absolute;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-num {
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--foreground);
}
.stat-num small { font-size: 0.5em; color: var(--muted); font-weight: 400; margin-left: 4px; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stat-foot {
  font-size: 13px;
  color: var(--muted);
  max-width: 80%;
}

/* ── Visual: Phone notification ── */
.ph-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}
.ph-card {
  width: 92%;
  max-width: 320px;
  background: var(--background);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.18);
}
.ph-card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ph-card-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--foreground);
  color: var(--accent-fg);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}
.ph-card-app {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ph-card-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
}
.ph-card-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.ph-card-body {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Loop / How it works (numbered grid) ── */
.loop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .loop { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.loop-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.loop-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
}
.loop-item h4 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.loop-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Posts ── */
.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .posts { grid-template-columns: repeat(3, 1fr); }
}
.post {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.post::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.075);
  pointer-events: none;
}
.post-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
  color: var(--accent-fg);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
}
.post-name { font-size: 13.5px; font-weight: 500; }
.post-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); letter-spacing: 0.04em; }
.post-body { font-size: 14.5px; color: var(--foreground); line-height: 1.55; opacity: 0.85; }
.post-body strong { font-weight: 500; opacity: 1; }
.post-stat {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.07);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Big quote ── */
.quote-wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}
.quote {
  font-weight: 300;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin-bottom: 28px;
}
.quote em {
  font-style: normal;
  background: none;
  padding: 0;
}
.quote-by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.quote-by-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a, #4a4a4a);
  color: var(--accent-fg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

/* ── FAQ ── */
.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .faq { grid-template-columns: 1fr 1fr; gap: 0 32px; }
}
.faq-row {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.faq-row summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s;
  color: var(--muted);
}
.faq-row[open] .faq-icon { transform: rotate(45deg); color: var(--foreground); }
.faq-a {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  padding-bottom: 20px;
  max-width: 520px;
}

/* ── CTA ── */
.cta {
  padding: 80px 0 100px;
  text-align: center;
}
@media (min-width: 768px) { .cta { padding: 120px 0; } }
.cta h2 { margin-bottom: 16px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cta p { color: var(--muted); max-width: 520px; margin: 0 auto 28px; font-size: 16px; }

/* ── Footer ── */
.footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--background);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1fr auto; gap: 32px; }
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.footer-links { display: flex; gap: 16px; }
.footer-links a {
  font-size: 13px;
  color: var(--muted);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--foreground); }
.footer-bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 24px 20px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-2);
}

/* ── Footer SMS disclosure (A2P 10DLC, Widget-First) ── */
.footer-sms {
  max-width: var(--container);
  margin: 24px auto 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted-2);
}
.footer-sms a { color: var(--muted); text-decoration: underline; }
.footer-sms a:hover { color: var(--foreground); }

/* ── Animations ── */
/* Handle-style reveal: rise + settle from a slightly smaller scale */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.72s cubic-bezier(0, 0, 0.2, 1),
    transform 0.72s cubic-bezier(0, 0, 0.2, 1);
  will-change: transform, opacity;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
[data-animate][data-delay="1"] { transition-delay: 0.08s; }
[data-animate][data-delay="2"] { transition-delay: 0.16s; }
[data-animate][data-delay="3"] { transition-delay: 0.24s; }
[data-animate][data-delay="4"] { transition-delay: 0.32s; }
[data-animate][data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════
   Creator platform — fork chooser, seller track
   ══════════════════════════════════════════════════════════ */

/* ── Fork chooser (home) ── */
.fork {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 860px) { .fork { grid-template-columns: 1fr; } }

.fork-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 36px 34px;
  background: var(--card);
  border: 1px solid var(--border-side);
  border-radius: var(--radius-lg);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), background 220ms, box-shadow 220ms;
}
.fork-card:hover {
  transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.35);
}
.fork-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.fork-card h3 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.fork-card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  flex: 1;
}
.fork-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: .93rem;
  font-weight: 500;
}
.fork-go svg { width: 14px; height: 14px; transition: transform 220ms; }
.fork-card:hover .fork-go svg { transform: translateX(4px); }

/* ── The leak: before/after contact-rate bars ── */
.leak {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 760px) { .leak { grid-template-columns: 1fr; } }

.leak-card {
  padding: 32px 30px;
  background: var(--card);
  border: 1px solid var(--border-side);
  border-radius: var(--radius-lg);
}
.leak-card.is-after { background: var(--card-2); color: var(--foreground); }
.leak-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.leak-card.is-after .leak-label { color: var(--muted-2); }
.leak-num {
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 10px 0 4px;
}
.leak-sub { font-size: .95rem; color: var(--muted); }
.leak-card.is-after .leak-sub { color: var(--muted); }

.leak-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 22px; }
.leak-dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(0,0,0,.10);
}
.leak-dots i.on { background: #5cb677; }
.leak-card.is-after .leak-dots i { background: rgba(0,0,0,.10); }
.leak-card.is-after .leak-dots i.on { background: #5cb677; }

/* ── Channel attack chips ── */
.chan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chan span,
.chan-row span:not(.chan-lead) {
  padding: 7px 13px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: .84rem;
  font-weight: 500;
}

/* ── Big proof stat row ── */
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } }
.proof-item { background: var(--surface); padding: 30px 28px; }
.proof-item .n {
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.proof-item .k {
  margin-top: 6px;
  font-size: .92rem;
  color: var(--muted);
}

/* ── Seller dashboard: buyer breakdown table ── */
.st-row {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) 78px 90px 96px 100px 88px;
  column-gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--w-line);
  font-size: 12px;
}
.st-row:last-child { border-bottom: 0; }
.st-row.head {
  font-size: 10.5px;
  color: var(--w-muted);
  font-weight: 500;
  padding: 10px 18px;
}
.st-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.st-row .rate { text-align: right; font-variant-numeric: tabular-nums; color: #2f8f4e; font-weight: 500; }
.st-row .rev { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ── Legend for dual-series chart ── */
.panel-h { position: relative; }
.lgnd {
  display: flex;
  gap: 16px;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.lgnd span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--w-muted); }
.lgnd i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ── Channel chips as a full-width row under the loop ── */
.chan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-side);
}
.chan-row .chan-lead {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: 4px;
}

/* ── Rail: the two-sided infrastructure diagram (home) ── */
.rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-side);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
@media (max-width: 900px) { .rail { grid-template-columns: 1fr; } }

.rail-end {
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.rail-tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rail-end .rail-what { font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em; }
.rail-end .rail-who { font-size: .92rem; color: var(--muted); }
.rail-end.is-out { text-align: right; align-items: flex-end; }
@media (max-width: 900px) {
  .rail-end.is-out { text-align: left; align-items: flex-start; }
}

.rail-mid {
  background: var(--background);
  border-left: 1px solid var(--border-side);
  border-right: 1px solid var(--border-side);
  color: var(--foreground);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rail-mid .rail-tag { color: var(--muted-2); }
.rail-steps { display: flex; align-items: center; gap: 10px; }
.rail-steps b {
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
}
.rail-steps svg { width: 12px; height: 12px; opacity: .35; flex: none; }
@media (max-width: 460px) {
  .rail-steps { flex-direction: column; gap: 7px; }
  .rail-steps svg { transform: rotate(90deg); }
}

/* Typographic line break — drop it on narrow screens so the line flows */
@media (max-width: 640px) { br.br-wide { display: none; } }

/* ── Manifesto (argument chain, light like the rest of the page) ── */
.manifesto {
  background: var(--surface);
  color: var(--foreground);
  padding: 84px 0;
}
@media (min-width: 768px) { .manifesto { padding: 112px 0; } }
@media (min-width: 1024px) { .manifesto { padding: 140px 0; } }

.mf-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 30px;
}
.mf-open {
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.0;
  letter-spacing: -.04em;
  max-width: 900px;
}
.mf-open .hl-dark {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mf-sub {
  margin-top: 22px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
}

/* Argument chain */
.mf-chain {
  margin-top: 64px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
.mf-beat {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
@media (max-width: 720px) {
  .mf-beat { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
}
.mf-n {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--muted-2);
  padding-top: 6px;
}
.mf-beat h3 {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.mf-beat p {
  margin-top: 9px;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 660px;
}

.mf-close {
  margin-top: 62px;
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 860px;
}

/* ══════════════════════════════════════════════════════════
   Technical-drawing language (schematic figures on dotted grid)
   ══════════════════════════════════════════════════════════ */

/* ── Current reality: dense prose before the pitch ── */
.reality { max-width: 780px; }
.reality .rl-kicker {
  font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.28;
  margin-bottom: 20px;
}
.reality p {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--muted);
}
.reality p + p { margin-top: 15px; }
.reality b { color: var(--foreground); font-weight: 500; }

/* ── Problem grid with schematic figures ── */
.probs {
  margin-top: 66px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 780px) { .probs { grid-template-columns: 1fr; } }

.prob {
  padding: 40px 44px 44px;
  border-top: 1px solid var(--border-side);
}
.prob:nth-child(odd) { border-right: 1px solid var(--border-side); }
@media (max-width: 780px) {
  .prob { padding: 34px 0 38px; }
  .prob:nth-child(odd) { border-right: 0; }
}
.prob h4 {
  margin-top: 26px;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.prob p {
  margin-top: 9px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Dotted grid canvas — the Handle-style engineering paper */
.grid-fig {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 300 / 128;
}
.grid-fig::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.22) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(to right, rgba(0,0,0,.22) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(to right, rgba(0,0,0,.22) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 2px, transparent 2px 5px);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%, 1px 100%, 1px 100%;
  background-position:
    0 0, 0 50%, 0 100%,
    0 0, 33.333% 0, 66.666% 0, 100% 0;
}
.grid-fig svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gf-line {
  fill: none;
  stroke: #0d0d0d;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gf-ghost {
  fill: none;
  stroke: rgba(0,0,0,.28);
  stroke-width: 1.4;
  stroke-dasharray: 3 3.5;
  stroke-linecap: round;
}
.gf-dot { fill: #0d0d0d; }
.gf-dot-open { fill: var(--surface); stroke: #0d0d0d; stroke-width: 1.3; }
.gf-bar { fill: none; stroke: #0d0d0d; stroke-width: 1.3; }
.gf-bar-ghost { fill: none; stroke: rgba(0,0,0,.28); stroke-width: 1.3; stroke-dasharray: 3 3.5; }

/* Draw-in animation: strokes trace themselves once in view */
.grid-fig .gf-line,
.grid-fig .gf-ghost {
  stroke-dashoffset: var(--dash, 0);
}
[data-animate] .grid-fig .gf-line {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,.7,.28,1) .1s;
}
[data-animate].is-visible .grid-fig .gf-line { stroke-dashoffset: 0; }

[data-animate] .grid-fig .gf-dot,
[data-animate] .grid-fig .gf-dot-open,
[data-animate] .grid-fig .gf-bar,
[data-animate] .grid-fig .gf-bar-ghost,
[data-animate] .grid-fig .gf-ghost {
  opacity: 0;
  transition: opacity .5s ease .55s;
}
[data-animate].is-visible .grid-fig .gf-dot,
[data-animate].is-visible .grid-fig .gf-dot-open,
[data-animate].is-visible .grid-fig .gf-bar,
[data-animate].is-visible .grid-fig .gf-bar-ghost,
[data-animate].is-visible .grid-fig .gf-ghost { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] .grid-fig .gf-line { transition: none; stroke-dashoffset: 0; }
  [data-animate] .grid-fig * { transition: none; opacity: 1; }
}

/* ── Impact: animated counters ── */
.impact {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-side);
}
@media (max-width: 900px) { .impact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .impact { grid-template-columns: 1fr; } }

.impact-item { background: var(--surface); padding: 34px 30px 30px; }
.impact-item .n {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.impact-item .n .u { font-size: .5em; font-weight: 400; letter-spacing: -.01em; }
.impact-item .k {
  margin-top: 14px;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 210px;
}

/* Five-step variant of the numbered loop */
@media (min-width: 768px) and (max-width: 1023px) {
  .loop.loop-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .loop.loop-5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }
}

/* ── Scroll-linked scale on the product mockup (Handle signature) ── */
.stage-wrap {
  transform-origin: 50% 0%;
  will-change: transform;
}
.stage-wrap[data-scale] {
  transform: scale(var(--s, 0.9));
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .stage-wrap[data-scale] { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   Brand tint — lime washes sampled from the logo sprig
   ══════════════════════════════════════════════════════════ */

/* Alternating section wash so the page has rhythm without going dark */
.section-tint { background: var(--tint-1); }

/* Manifesto sits on the wash — it's the statement moment of the page */
.manifesto { background: var(--tint-1); }
.mf-chain { border-top-color: var(--tint-line); }
.mf-beat { border-bottom-color: var(--tint-line); }

/* Fork cards pick up the tint and deepen on hover */
.fork-card { background: var(--tint-2); border-color: var(--tint-line); }
.fork-card:hover { background: var(--tint-3); }

/* Impact numbers sit on white cells inside a tinted grid gap */
.section-tint .impact { background: var(--tint-line); }
.section-tint .impact-item { background: var(--tint-1); }

/* Leak comparison: the "with Intro" side carries the brand */
.leak-card.is-after { background: var(--tint-2); }
.leak-card.is-after .leak-dots i { background: rgba(0,0,0,.09); }
.leak-card.is-after .leak-dots i.on { background: var(--brand); }
.leak-dots i.on { background: var(--brand); }

/* ── Framing: flush the outer edges of grids with the section edge ──
   Cards carry internal padding for breathing room, but the first and
   last columns would otherwise sit inset from the headings above them. */
.impact-item:first-child { padding-left: 0; }
@media (min-width: 901px) {
  .impact-item:nth-child(4) { padding-right: 0; }
}

@media (min-width: 781px) {
  .prob:nth-child(odd)  { padding-left: 0; }
  .prob:nth-child(even) { padding-right: 0; }
}


/* ── Manifesto proof: the traction line that closes the argument ── */
.mf-proof {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--tint-line);
}
.mf-proof-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
.mf-proof-stat {
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--muted);
  max-width: 720px;
}
.mf-proof-stat b {
  font-weight: 500;
  color: var(--foreground);
}

/* Containers never paint their own background — only sections do. */
.frame,
.frame-bordered { background: transparent; }

/* ── Seams: stacked sections double their padding where they meet.
   Any section following another drops its top padding, so a seam is
   one section's breathing room instead of two stacked together. ── */
.manifesto + .section,
.section + .section { padding-top: 0; }
@media (min-width: 1024px) {
  .manifesto { padding-bottom: 104px; }
}

/* ── Manifesto outro: the closing line and the traction proof sit on
   plain background, outside the tinted argument section ── */
.mf-outro { background: var(--background); }
.mf-outro .mf-close { margin-top: 0; }
.mf-outro .mf-proof { border-top-color: var(--border); }

/* The tint should end with the argument, not trail 100px of empty green
   below it. The last beat used to carry that breathing room in its own
   padding; the proof banner doesn't, so it sat flush on the seam. Give the
   section back just enough to clear the banner — matching the grid gap
   above it, so the banner reads as centered in its own space. */
.manifesto { padding-bottom: 56px; }
@media (min-width: 768px)  { .manifesto { padding-bottom: 64px; } }
@media (min-width: 1024px) { .manifesto { padding-bottom: 72px; } }
.mf-beat:last-child { border-bottom: 0; }

/* ── Home vertical rhythm ──
   Two seams were off in opposite directions: a screenful of nothing
   between the hero and the manifesto, and the closing statement
   crowding the last beat. */

/* Hero -> manifesto: 277px was most of a laptop screen */
@media (min-width: 1024px) {
  .hero { padding-bottom: 56px; }
  .manifesto { padding-top: 88px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { padding-bottom: 48px; }
  .manifesto { padding-top: 72px; }
}

/* The closing statement needs room after the argument, so it reads as
   a conclusion rather than a fifth beat. Beats the seam rule above. */
.manifesto + .section.mf-outro { padding-top: 84px; }

/* The lead's bottom margin exists to clear the hero CTAs. When it's the
   last thing in the hero, that margin is just dead space. */
.hero .lead:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   Home polish — same palette, more presence
   ══════════════════════════════════════════════════════════ */

/* ── Hero: brand-lime glow behind the headline ── */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1180px, 132vw);
  aspect-ratio: 1 / 0.78;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 42%,
      rgba(184, 197, 106, 0.30) 0%,
      rgba(184, 197, 106, 0.13) 34%,
      rgba(184, 197, 106, 0.04) 56%,
      transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.hero > .frame { position: relative; z-index: 1; }

/* ── Word-by-word reveal for the headline ── */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition:
    opacity 0.62s cubic-bezier(0, 0, 0.2, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.words-ready .word { will-change: transform, opacity; }
.words-in .word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .word { opacity: 1; transform: none; transition: none; }
}

/* ── Hero CTA ── */
.hero-cta { margin-top: 34px; }

/* ── Context ticker: where a warm intro already wins ── */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker-group span {
  display: inline-flex;
  align-items: center;
  padding: 0 30px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--foreground);
  white-space: nowrap;
}
.ticker-group i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ── Proof: the number carries the weight ── */
.mf-proof-big {
  font-size: clamp(56px, 9vw, 116px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  margin: 6px 0 14px;
}
.mf-proof-big .u {
  font-size: 0.44em;
  font-weight: 400;
  letter-spacing: -0.02em;
  vertical-align: baseline;
}
.mf-proof-cap {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.5;
  color: var(--muted);
  max-width: none;
  white-space: nowrap;
}
/* On narrow phones one line would overflow — let it wrap there. */
@media (max-width: 560px) {
  .mf-proof-cap { white-space: normal; font-size: 14px; max-width: 320px; margin: 0 auto; }
}
.mf-proof-note {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted-2);
  max-width: none;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 620px) {
  .mf-proof-note { white-space: normal; max-width: 320px; font-size: 13px; }
}

/* ── Fork cards: lift and warm on hover ── */
.fork-card {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.fork-card:hover {
  transform: translateY(-6px);
  background: var(--tint-3);
  box-shadow: 0 26px 52px -26px rgba(40, 50, 12, 0.34);
}
.fork-card .fork-go svg { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.fork-card:hover .fork-go svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .fork-card, .fork-card .fork-go svg { transition: none; }
  .fork-card:hover { transform: none; }
}

/* ── Manifesto beats: the number lights up as you pass ── */
.mf-beat .mf-n { transition: color 0.3s ease; }
.mf-beat:hover .mf-n { color: var(--brand); }

/* ── Grain: a whisper of texture so the flat white reads richer ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── The hero glow breathes, slowly enough to feel rather than see ── */
.hero::before { animation: heroGlow 14s ease-in-out infinite; }
@keyframes heroGlow {
  0%, 100% { opacity: 1;    transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.82; transform: translateX(-50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   Manifesto, restaged — thesis holds still, argument moves
   ══════════════════════════════════════════════════════════ */

.mf-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 88px;
  align-items: start;
}
@media (max-width: 940px) {
  .mf-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* The thesis pins while the beats scroll past it */
.mf-lead { position: sticky; top: 108px; }
@media (max-width: 940px) { .mf-lead { position: static; } }

.mf-chain {
  margin-top: 0;
  border-top: 0;
  display: grid;
  gap: 0;
}

/* Beats stack: big number, heading, body */
.mf-beat {
  display: block;
  padding: 34px 0 36px;
  border-bottom: 1px solid var(--tint-line);
}
.mf-beat:first-child { padding-top: 4px; }
.mf-beat:last-child { border-bottom: 0; }

.mf-n {
  font-family: var(--font-sans);
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  padding-top: 0;
  margin-bottom: 16px;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mf-beat h3 { margin-top: 0; }
.mf-beat p { max-width: 100%; }

/* Reading spotlight: beats recede until they reach the middle of the
   viewport. Applied by script, so without JS everything stays legible. */
.mf-chain.focus-mode .mf-beat {
  opacity: 0.3;
  transition: opacity 0.5s ease;
}
.mf-chain.focus-mode .mf-beat.in-focus { opacity: 1; }
.mf-chain.focus-mode .mf-beat.in-focus .mf-n { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .mf-chain.focus-mode .mf-beat { opacity: 1; }
  .mf-n { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   Craft pass — nav, fork cards, the proof moment
   ══════════════════════════════════════════════════════════ */

/* ── Nav: weightless at rest, grounded once you scroll ── */
.nav {
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px -12px rgba(0, 0, 0, 0.22);
}
.nav-inner { transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.nav.is-stuck .nav-inner { height: 58px; }

/* ── Mobile: surface Sell / Buy / Partners as a second nav row.
   They were display:none below 768px, so Partners was unreachable on
   phones. Row 1 keeps the logo + Talk to us; the pills wrap under. ── */
@media (max-width: 767px) {
  .nav-inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 9px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav.is-stuck .nav-inner { height: auto; }
  .nav-actions { order: 2; }
  .nav-links {
    display: flex;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    /* Centred, the pill row stopped 13px short of the container edge, so
       Partners and Talk to us sat on two different right margins. Ending
       the row flush puts both rows on the same edge — and it holds if a
       pill label ever changes length. */
    justify-content: flex-end;
    gap: 7px;
  }
  .nav-link[href$=".html"] { padding: 7px 13px; font-size: 13px; }
  .nav-link.nav-link-partners[href$=".html"] { gap: 6px; }
  /* The two-row nav is ~105px tall, so 120px left the headline sitting
     15px under the pills — the hero read as glued to the header. This
     clears the fixed nav and still leaves real breathing room. */
  .hero { padding-top: 164px; }
}

/* Nav links: a lime rule sweeps in from the left */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ── Eyebrows carry a lime tick ── */
.eyebrow, .mf-eyebrow, .mf-proof-label { position: relative; padding-left: 15px; }
.eyebrow::before, .mf-eyebrow::before, .mf-proof-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-50%);
}
.mf-proof-label::before { top: 0.55em; }

/* ── Fork cards: destinations, not rectangles ── */
.fork-card {
  position: relative;
  overflow: hidden;
  padding-bottom: 34px;
}
/* Schematic figure, echoing the drawings on the seller page */
.fork-fig {
  position: absolute;
  right: -18px;
  top: 50%;
  width: 168px;
  height: 96px;
  transform: translateY(-50%);
  opacity: 0.28;
  pointer-events: none;
  transition: opacity 0.42s ease, transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}
.fork-card:hover .fork-fig {
  opacity: 0.5;
  transform: translateY(-50%) translateX(-6px);
}
.fork-fig svg { width: 100%; height: 100%; overflow: visible; }
.fork-fig .ff-line {
  fill: none;
  stroke: #4c5a1e;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.fork-fig .ff-dot { fill: #4c5a1e; }

/* The arrow gets a circle it can move inside */
.fork-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fork-go svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid var(--tint-line);
  background: rgba(255, 255, 255, 0.5);
  box-sizing: content-box;
  transition:
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.fork-card:hover .fork-go svg {
  transform: translateX(4px);
  background: var(--foreground);
  border-color: var(--foreground);
  color: #fff;
}

/* ── The proof becomes a moment ── */
.mf-proof {
  position: relative;
  text-align: center;
  border-top: 0;
  padding-top: 64px;
  margin-top: 56px;
}
.mf-proof::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 1px;
  background: var(--tint-line);
  transform: translateX(-50%);
}
.mf-proof::after {
  content: '';
  position: absolute;
  top: 34%;
  left: 50%;
  width: min(760px, 96vw);
  aspect-ratio: 1 / 0.5;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(184, 197, 106, 0.20) 0%,
    rgba(184, 197, 106, 0.07) 42%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mf-proof > * { position: relative; z-index: 1; }
.mf-proof-label { display: inline-block; padding-left: 15px; }
.mf-proof-cap { margin: 0 auto; }

/* Pointer drift on the hero glow. `translate` is its own property, so it
   composes with the transform the breathing animation is already using
   instead of fighting it for the same declaration. */
.hero::before {
  translate: var(--gx, 0) var(--gy, 0);
  transition: translate 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { translate: none; transition: none; }
}

/* The figure was crossing the body copy. Park it in the top-right
   corner, where the two-line heading already leaves room, and keep the
   heading clear of it. */
.fork-fig {
  top: 26px;
  right: 22px;
  bottom: auto;
  width: 128px;
  height: 72px;
  transform: none;
  opacity: 0.22;
}
.fork-card:hover .fork-fig {
  opacity: 0.42;
  transform: translateX(-5px);
}
.fork-card h3 { max-width: calc(100% - 150px); }
@media (max-width: 620px) {
  .fork-fig { display: none; }
  .fork-card h3 { max-width: 100%; }
}

/* ── Manifesto, tightened ──
   With one-sentence bodies the beats no longer need the padding of
   full paragraphs, and the numbers can come down a size. */
.mf-beat { padding: 24px 0 26px; }
.mf-beat:first-child { padding-top: 2px; }
.mf-n {
  font-size: clamp(32px, 3.4vw, 42px);
  margin-bottom: 11px;
}
.mf-beat h3 { font-size: clamp(18px, 2vw, 23px); }
.mf-beat p { margin-top: 7px; }
.mf-grid { gap: 72px; }

/* ══════════════════════════════════════════════════════════
   Manifesto as a composition, not a list
   ══════════════════════════════════════════════════════════ */

/* Thesis sits above the argument, full measure. No sticky column —
   with four short beats there is nothing long enough to scroll past. */
.mf-grid { display: block; }
.mf-lead {
  position: static;
  max-width: 620px;
  margin-bottom: 52px;
}

/* Four beats as a 2x2 of white cards. Inverting the contrast — white on
   the tint, where everything else is tint on white — makes the argument
   read as its own object on the page. */
.mf-chain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border-top: 0;
  margin-top: 0;
}
@media (max-width: 760px) {
  .mf-chain { grid-template-columns: 1fr; gap: 12px; }
}

.mf-beat {
  position: relative;
  display: block;
  background: #ffffff;
  border: 1px solid var(--tint-line);
  border-radius: 18px;
  padding: 30px 30px 32px;
  overflow: hidden;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
.mf-beat:first-child { padding-top: 30px; }
.mf-beat:last-child { border-bottom: 1px solid var(--tint-line); }

.mf-beat:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 22px 44px -26px rgba(40, 50, 12, 0.38);
}
@media (prefers-reduced-motion: reduce) {
  .mf-beat { transition: none; }
  .mf-beat:hover { transform: none; }
}

/* An oversized ghost number bleeds off the corner of each card */
.mf-n {
  position: absolute;
  top: -14px;
  right: 14px;
  font-size: 86px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--tint-2);
  margin: 0;
  pointer-events: none;
  transition: color 0.35s ease;
}
.mf-beat:hover .mf-n { color: var(--tint-3); }

.mf-beat h3 {
  position: relative;
  margin-top: 0;
  margin-bottom: 9px;
  max-width: calc(100% - 46px);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.25;
}
.mf-beat p {
  position: relative;
  margin-top: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* The reading spotlight belonged to a tall single column; a 2x2 grid
   shows every beat at once, so it is gone. */
.mf-chain.focus-mode .mf-beat,
.mf-chain.focus-mode .mf-beat.in-focus { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   Manifesto banner — the word announces itself
   ══════════════════════════════════════════════════════════ */

.mf-banner {
  position: relative;
  margin-bottom: 46px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--tint-line);
}

/* Outlined display type. Solid pale fill is the fallback; the stroke
   only takes over where the browser supports it, so the word is never
   invisible. */
.mf-word {
  font-family: var(--font-sans);
  font-size: clamp(56px, 13.5vw, 186px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--tint-2);
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .mf-word {
    color: transparent;
    -webkit-text-stroke: 1.7px var(--tint-line);
  }
}

/* The heading still needs to exist for screen readers and search */
.mf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mf-kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--brand);
  flex: none;
}

/* The thesis is no longer the section heading, so it carries its own
   display sizing rather than inheriting h2 rules. */
.mf-open {
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  max-width: 900px;
  color: var(--foreground);
}

/* The outlined word fills with brand lime as you read through the
   section — reading progress expressed as type rather than as a bar. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mf-word {
    background-image: linear-gradient(
      90deg,
      var(--brand) 0%,
      var(--brand) var(--fill, 0%),
      transparent var(--fill, 0%));
    -webkit-background-clip: text;
            background-clip: text;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mf-word { --fill: 100%; }
}

/* ══════════════════════════════════════════════════════════
   Craft pass — sellers & buyers
   Shared components, so both pages pick this up at once.
   ══════════════════════════════════════════════════════════ */

/* ── Outlined section label, the manifesto word at section scale ── */
.section-word {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(36px, 6.6vw, 88px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--card);
  margin-bottom: 8px;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .section-word { color: transparent; -webkit-text-stroke: 1.4px var(--border); }
  .section-tint .section-word,
  .manifesto .section-word { -webkit-text-stroke-color: var(--tint-line); }
}

/* ── Problem cards lift with their figure ── */
.prob {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.32s ease;
  border-radius: 18px;
}
.prob:hover { transform: translateY(-4px); background: rgba(184, 197, 106, 0.055); }
.prob:hover .gf-line { stroke: #3f4b16; }
.prob .gf-line { transition: stroke 0.32s ease; }

/* ── Numbered steps get the ghost numeral ── */
.loop-item { position: relative; overflow: hidden; }
.loop-num {
  font-size: 58px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--card) !important;
  margin-bottom: 6px;
  transition: color 0.35s ease;
}
.loop-item:hover .loop-num { color: var(--tint-2) !important; }

/* ── Bento cards ── */
.bento-card {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
.bento-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand);
  box-shadow: 0 22px 44px -28px rgba(40, 50, 12, 0.34);
}

/* ── Impact numbers warm on hover ── */
.impact-item { transition: background-color 0.32s ease; }
.impact-item:hover { background: rgba(184, 197, 106, 0.07); }
.impact-item .n { transition: color 0.32s ease; }
.impact-item:hover .n { color: #4c5a1e; }

/* ── FAQ rows ── */
.faq-row {
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.faq-row:hover { background: rgba(184, 197, 106, 0.06); }
.faq-row summary { transition: color 0.25s ease; }
.faq-icon { transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; }
.faq-row[open] .faq-icon { transform: rotate(45deg); }
.faq-row:hover .faq-icon { background: var(--tint-2); }

@media (prefers-reduced-motion: reduce) {
  .prob, .bento-card, .faq-icon { transition: none; }
  .prob:hover, .bento-card:hover { transform: none; }
}

/* An 84px word on a 0.9 line-height needs real clearance under it —
   8px left it sitting on the copy that follows. */
.section-word { margin-bottom: 26px; }
.section-word + .section-header { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   Bring the home's palette to sellers & buyers
   ══════════════════════════════════════════════════════════ */

/* The outlined labels were stroked in --border (#e8e8e8) — near-white
   on white, so they barely read. Lime, and a touch heavier. */
@supports (-webkit-text-stroke: 1px black) {
  .section-word {
    color: transparent;
    -webkit-text-stroke: 1.8px var(--tint-line);
  }
  .section-tint .section-word,
  .manifesto .section-word { -webkit-text-stroke-color: var(--brand); }
}
.section-word { color: var(--tint-2); }

/* Cards pick up the tint the home's fork cards already use, so the
   three pages read as one palette instead of lime on the home and
   grey everywhere else. */
.bento-card {
  background: var(--tint-2);
  border: 1px solid var(--tint-line);
}
.bento-card:hover { background: var(--tint-3); }

.prob { border-top-color: var(--tint-line); }
.prob:nth-child(odd) { border-right-color: var(--tint-line); }

.impact { background: var(--tint-line); }
.impact-item { background: var(--surface); }
.impact-item:hover { background: var(--tint-1); }

.faq-row { border-bottom-color: var(--tint-line); }
.loop-num { color: var(--tint-2) !important; }
.loop-item:hover .loop-num { color: var(--tint-3) !important; }

/* Section rules and dividers follow the same warmth */
.section-header { border-color: var(--tint-line); }
.chan-row { border-top-color: var(--tint-line); }
.reality .rl-kicker { color: var(--foreground); }

/* ══════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  border-top: 1px solid var(--tint-line);
  background: var(--tint-1);
  padding: 68px 0 0;
  overflow: hidden;
}

.footer-top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 44px;
}
@media (min-width: 768px) { .footer-top { padding: 0 20px; gap: 64px; } }
@media (max-width: 720px) { .footer-top { grid-template-columns: 1fr; gap: 40px; } }

.footer-brand .footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 16px;
}
.footer-tagline {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: none;
  white-space: nowrap;
  margin-bottom: 24px;
}

/* Link columns */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 460px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: 0.94rem;
  color: var(--muted);
  padding: 5px 0;
  position: relative;
  width: fit-content;
  transition: color 0.25s ease;
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col a:hover { color: var(--foreground); }
.footer-col a:hover::after { transform: scaleX(1); }

/* The wordmark, oversized and cropped by the page edge */
.footer-word {
  margin-top: 56px;
  font-size: clamp(74px, 20vw, 290px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  text-align: center;
  color: var(--tint-2);
  user-select: none;
  pointer-events: none;
  margin-bottom: -0.16em;
}
@supports (-webkit-text-stroke: 1px black) {
  .footer-word { color: transparent; -webkit-text-stroke: 2px var(--tint-line); }
}

.footer-legal {
  border-top: 1px solid var(--tint-line);
  margin-top: 34px;
}
.footer-legal-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 16px 26px;
}
@media (min-width: 768px) { .footer-legal-inner { padding: 22px 20px 26px; } }

.footer-sms {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.footer-sms a { text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted-2);
}

/* ── Cross band: catches the visitor who landed on the wrong side ── */
.crossband {
  border-top: 1px solid var(--tint-line);
  background: var(--tint-1);
}
.crossband-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
@media (min-width: 768px) { .crossband-inner { padding: 44px 20px; } }

.crossband-text {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
  max-width: 620px;
}
.crossband-text b { font-weight: 500; border-bottom: 2px solid var(--brand); }
.crossband-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}
.crossband-go svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid var(--tint-line);
  background: rgba(255, 255, 255, 0.6);
  box-sizing: content-box;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}
.crossband-go:hover svg {
  transform: translateX(4px);
  background: var(--foreground);
  border-color: var(--foreground);
  color: #fff;
}

/* ── Closing headline ──
   .cta h2 kept a 720px cap from when the display type was smaller. At
   72px the first line no longer fits, so the <br> stopped controlling
   the break and the heading spilled to three ragged lines. */
.cta h2 {
  max-width: none;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.04;
}
@media (max-width: 620px) {
  .cta h2 { max-width: 100%; }
}

/* White-label now has two cards, not three — a 2-up grid so they don't
   sit in a 3-column track with an empty third column. */
@media (min-width: 768px) {
  #brand .bento { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}

/* ══════════════════════════════════════════════════════════
   Header track links → pill buttons
   Targets the full-page links (home's "I sell/buy leads") only,
   so the # section anchors on sellers/buyers stay as text.
   ══════════════════════════════════════════════════════════ */
.nav-link[href$=".html"] {
  font-weight: 500;
  color: var(--foreground);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}
.nav-link[href$=".html"]::after { display: none; }
.nav-link[href$=".html"]:hover {
  background: var(--card);
  border-color: #d7d7d7;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.22);
}
.nav-links { gap: 8px; }

/* Partners pill — same crisp white pill as the others, set apart by a
   lime dot + lime ink rather than a clashing fill.
   Specificity is bumped past .nav-link[href$=".html"] so it wins. */
.nav-link.nav-link-partners[href$=".html"] {
  color: #4c5a1e;
  border-color: var(--border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-link.nav-link-partners[href$=".html"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.nav-link.nav-link-partners[href$=".html"]:hover {
  background: var(--tint-1);
  border-color: var(--tint-line);
  color: #4c5a1e;
}
.nav-link.nav-link-partners[href$=".html"][aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #1c220a;
}
.nav-link.nav-link-partners[href$=".html"][aria-current="page"]::before { background: #1c220a; }

/* ══════════════════════════════════════════════════════════
   Home polish pass 2 — alignment, tone, finish
   ══════════════════════════════════════════════════════════ */

/* The closing statement + $120MM become one centered finale that
   mirrors the centered hero. Was left-aligned close over a centered
   proof — the page's one real alignment jump. */
.mf-outro .frame { text-align: center; }
.mf-close { margin-left: auto; margin-right: auto; }
.mf-proof { margin-top: 52px; }

/* ── Fork: premium destination cards ── */
.fork { gap: 18px; }
.fork-card { padding: 36px 34px 30px; gap: 14px; }

/* Eyebrow becomes a small tag, echoing the header pills */
.fork-eyebrow {
  align-self: flex-start;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--tint-line);
  color: var(--foreground);
  font-size: .66rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.fork-card:hover .fork-eyebrow { border-color: var(--brand); }

/* Push the CTA to the bottom so both cards' arrows line up, whatever
   the body length */
.fork-go { margin-top: auto; padding-top: 6px; }

/* Give the title a hair more presence */
.fork-card h3 { font-size: 1.7rem; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════
   Manifesto & proof — more presence
   ══════════════════════════════════════════════════════════ */

/* "We started with B2B" becomes a real badge — it should read as a
   deliberate statement: of every industry, we began with B2B. */
.mf-proof-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--tint-2);
  border: 1px solid var(--tint-line);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foreground);
  font-weight: 500;
  margin-bottom: 6px;
}
.mf-proof-label::before {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

/* Manifesto cards: the ghost number lights up and grows as you pass,
   and the card lifts with a lime edge — more life, same content. */
.mf-beat .mf-n {
  transform-origin: top right;
  transition:
    color 0.4s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.mf-beat:hover .mf-n {
  color: var(--brand);
  transform: scale(1.08);
}
.mf-beat:hover {
  border-color: var(--brand);
  box-shadow: 0 26px 50px -30px rgba(40, 50, 12, 0.45);
}
.mf-beat h3 { position: relative; z-index: 1; }
.mf-beat p { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   Manifesto cards — less text, more air, more motion
   ══════════════════════════════════════════════════════════ */

/* With one-line bodies the cards can breathe. Anchor the text to the
   bottom and let the ghost number float top-right like a watermark. */
.mf-beat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 216px;
  padding: 32px 32px 30px;
}

/* Bigger number now there's room for it */
.mf-beat .mf-n {
  font-size: 104px;
  top: -6px;
  right: 18px;
}

.mf-beat h3 {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.2;
  margin-bottom: 8px;
  max-width: 15ch;
}

/* The single support line, crisp and quiet under the statement */
.mf-beat p {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   Manifesto lead — thesis beside a schematic of a real intro
   ══════════════════════════════════════════════════════════ */
.mf-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 56px;
  align-items: center;
  margin-bottom: 52px;
  max-width: none;
}
@media (max-width: 900px) {
  .mf-lead { grid-template-columns: 1fr; gap: 34px; }
  .mf-diagram { max-width: 340px; }
}

/* The schematic: audience + you (the creator) + buyer, merging into a
   live intro. Drawn in the site's line language, strokes tracing in. */
.mf-diagram svg { width: 100%; height: auto; overflow: visible; display: block; }
.mf-diagram .il {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.mf-diagram.is-visible .il {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.7, 0.28, 1) 0.15s;
  stroke-dashoffset: 0;
}
.mf-diagram .idot { fill: var(--foreground); }
.mf-diagram .icore { fill: var(--brand); stroke: var(--foreground); stroke-width: 1.6; }
.mf-diagram .ichat { fill: #fff; stroke: var(--foreground); stroke-width: 1.6; }
.mf-diagram .iline { stroke: var(--tint-line); stroke-width: 3.5; stroke-linecap: round; }
.mf-diagram .ilabel {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted-2);
}
.mf-diagram .il-core { fill: #4c5a1e; }

/* Nodes fade in just after the lines finish tracing */
.mf-diagram .idot,
.mf-diagram .icore,
.mf-diagram .ichat,
.mf-diagram .iline,
.mf-diagram .ilabel { opacity: 0; transition: opacity 0.5s ease 0.7s; }
.mf-diagram.is-visible .idot,
.mf-diagram.is-visible .icore,
.mf-diagram.is-visible .ichat,
.mf-diagram.is-visible .iline,
.mf-diagram.is-visible .ilabel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mf-diagram .il { stroke-dashoffset: 0; transition: none; }
  .mf-diagram .idot, .mf-diagram .icore, .mf-diagram .ichat,
  .mf-diagram .iline, .mf-diagram .ilabel { opacity: 1; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   Manifesto figure — a lead vs an intro
   ══════════════════════════════════════════════════════════ */
.mf-figure {
  margin: 8px 0 0;
  padding: 40px 30px 36px;
  background: #fff;
  border: 1px solid var(--tint-line);
  border-radius: 22px;
}
.mf-figure svg { width: 100%; height: auto; overflow: visible; display: block; }

/* cold lane — muted, dashed, decaying */
.gf-cold { fill: none; stroke: var(--muted-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gf-cold-open { fill: var(--surface); stroke: var(--muted-2); stroke-width: 1.7; stroke-dasharray: 3 4; }
.gf-dash { fill: none; stroke: var(--muted-2); stroke-width: 1.7; stroke-dasharray: 5 6; stroke-linecap: round; }

/* warm lane — solid, dark, lime accents */
.gf-solid { fill: none; stroke: var(--foreground); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gf-warm { fill: none; stroke: var(--foreground); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gf-warm-line { stroke: var(--tint-line); stroke-width: 3.6; stroke-linecap: round; }
.gf-warm-ring { fill: none; stroke: var(--brand); stroke-width: 2.6; }
.gf-warm-fill { fill: var(--brand); }
.gf-warm-fill-big { fill: var(--brand); stroke: var(--foreground); stroke-width: 1.9; }
.gf-check { fill: none; stroke: #0d0d0d; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.gf-lab { font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.gf-lab-cold { fill: var(--muted-2); }
.gf-lab-warm { fill: #4c5a1e; }
.gf-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }

/* draw-in: connectors trace, everything else fades just after */
.mf-figure .gf-dash, .mf-figure .gf-solid { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mf-figure.is-visible .gf-dash { stroke-dasharray: 5 6; }
.mf-figure.is-visible .gf-solid {
  transition: stroke-dashoffset 0.85s cubic-bezier(.22,.7,.28,1) .15s;
  stroke-dashoffset: 0;
}
.mf-figure .gf-cold, .mf-figure .gf-cold-open, .mf-figure .gf-warm,
.mf-figure .gf-warm-line, .mf-figure .gf-warm-ring, .mf-figure .gf-warm-fill,
.mf-figure .gf-warm-fill-big, .mf-figure .gf-check, .mf-figure text {
  opacity: 0; transition: opacity .5s ease .55s;
}
.mf-figure.is-visible .gf-cold, .mf-figure.is-visible .gf-cold-open,
.mf-figure.is-visible .gf-warm, .mf-figure.is-visible .gf-warm-line,
.mf-figure.is-visible .gf-warm-ring, .mf-figure.is-visible .gf-warm-fill,
.mf-figure.is-visible .gf-warm-fill-big, .mf-figure.is-visible .gf-check,
.mf-figure.is-visible text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mf-figure .gf-dash { stroke-dasharray: 5 6; }
  .mf-figure .gf-solid { stroke-dashoffset: 0; }
  .mf-figure * { opacity: 1 !important; transition: none !important; }
}

/* On phones the figure would shrink until the labels are unreadable.
   Keep it at a legible size and let it scroll inside its own card. */
@media (max-width: 680px) {
  .mf-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 22px;
  }
  .mf-figure svg { min-width: 540px; }
}

/* ══════════════════════════════════════════════════════════
   Seller problem — two big paths, both capped
   ══════════════════════════════════════════════════════════ */
.probs-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 54px;
  border: 1px solid var(--tint-line);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 780px) { .probs-2 { grid-template-columns: 1fr; } }

.probs-2 .prob {
  border: 0;
  padding: 46px 46px 48px;
  transition: background-color 0.3s ease;
}
.probs-2 .prob:first-child { border-right: 1px solid var(--tint-line); }
@media (max-width: 780px) {
  .probs-2 .prob:first-child { border-right: 0; border-bottom: 1px solid var(--tint-line); }
}
.probs-2 .prob:hover { background: rgba(184, 197, 106, 0.05); }

.probs-2 .grid-fig { max-width: 100%; width: 100%; aspect-ratio: 300 / 118; margin-bottom: 28px; }

.prob-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.probs-2 .prob h4 {
  margin-top: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.probs-2 .prob p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 34ch;
}

/* ── Manifesto figure: live motion on the warm lane ── */

/* A signal travels the intro lane — it's alive, unlike the dead cold lane */
.gf-signal { fill: var(--brand); opacity: 0; }
.mf-figure.is-visible .gf-signal {
  animation: gf-travel 2.6s cubic-bezier(0.5, 0, 0.5, 1) 1.1s infinite;
}
@keyframes gf-travel {
  0%,6%   { transform: translateX(0);     opacity: 0; }
  14%     { opacity: 1; }
  90%     { opacity: 1; }
  100%    { transform: translateX(415px); opacity: 0; }
}

/* The closed node breathes a soft lime ring */
.gf-pulse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.mf-figure.is-visible .gf-pulse {
  animation: gf-pulsering 2.4s ease-out 1.4s infinite;
}
@keyframes gf-pulsering {
  0%       { transform: scale(1);   opacity: 0.55; }
  70%,100% { transform: scale(1.9); opacity: 0; }
}

/* The check draws itself once the line reaches the close */
.mf-figure .gf-check { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; }
.mf-figure.is-visible .gf-check {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.6, 0, 0.4, 1) 1s;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gf-signal { display: none; }
  .mf-figure.is-visible .gf-pulse { animation: none; opacity: 0; }
  .mf-figure .gf-check { stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════
   Manifesto figure v2 — close-rate comparison, cycling domains
   ══════════════════════════════════════════════════════════ */
.cvx { max-width: 580px; margin: 0 auto; }

.cvx-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 30px; }
.cvx-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cvx-ctx { font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; }
.cvx-domain {
  display: inline-block;
  color: #4c5a1e;
  border-bottom: 2px solid var(--brand);
  min-width: 88px;
  transition: opacity .3s ease;
}

.cvx-bars { display: flex; flex-direction: column; gap: 18px; }
.cvx-row { display: grid; grid-template-columns: 108px 1fr 54px; align-items: center; gap: 16px; }
.cvx-name { font-size: .92rem; color: var(--muted); }
.cvx-track {
  height: 15px;
  border-radius: 999px;
  background: var(--card);
  overflow: hidden;
}
.cvx-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width .95s cubic-bezier(.22,.7,.28,1);
}
.cvx-fill-cold { background: var(--muted-2); }
.cvx-fill-warm { background: var(--brand); }
.cvx-val { font-size: 1rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.cvx-val-warm { color: #4c5a1e; }

.cvx-foot { margin-top: 28px; font-size: 1rem; color: var(--muted); }
.cvx-mult { color: var(--foreground); font-weight: 600; font-size: 1.2rem; }

@media (max-width: 560px) {
  .cvx-row { grid-template-columns: 92px 1fr 46px; gap: 12px; }
  .cvx-name { font-size: .84rem; }
}

/* the figure no longer holds a wide SVG, so drop the mobile scroll shim */
@media (max-width: 680px) {
  .mf-figure { overflow-x: visible; padding: 34px 26px 32px; }
}

/* ══════════════════════════════════════════════════════════
   Manifesto proof — rotating cited stats
   ══════════════════════════════════════════════════════════ */
.prf { max-width: 620px; margin: 0 auto; }
.prf-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}
.prf-num {
  font-size: clamp(52px, 8vw, 92px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -.045em;
  color: #4c5a1e;
}
.prf-txt {
  margin-top: 14px;
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--foreground);
  max-width: 440px;
}
.prf-src {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.prf-src b { color: var(--foreground); font-weight: 500; }

/* the whole card cross-fades + lifts a touch between stats */
.prf-num, .prf-txt, .prf-src {
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.prf.is-swapping .prf-num,
.prf.is-swapping .prf-txt,
.prf.is-swapping .prf-src {
  opacity: 0;
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .prf-num, .prf-txt, .prf-src { transition: none; }
}

/* Keep the proof card a steady height as the phrase length changes */
.prf-txt { min-height: 2.6em; }

/* ══════════════════════════════════════════════════════════
   Manifesto cases — two cold paths vs the intro
   ══════════════════════════════════════════════════════════ */
.mf-cases {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 620px;
}
.mf-case {
  position: relative;
  padding-left: 34px;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.4;
  color: var(--muted);
}
.mf-case::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mf-case.is-cold::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mf-case.is-warm {
  color: var(--foreground);
  font-weight: 500;
}
.mf-case.is-warm::before {
  top: -0.02em;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23b8c56a'/%3E%3Cpath d='M6 11.2l3.2 3.2L16 7.5' fill='none' stroke='%230d0d0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mf-case-k { font-weight: 600; color: var(--muted-2); }
.mf-case.is-warm .mf-case-k { color: #4c5a1e; }

/* The lead no longer has a side diagram — stack thesis then cases full width */
.mf-lead { display: block; }
.mf-lead .mf-open { max-width: 680px; }
.mf-cases { margin-top: 30px; }

/* ── Cases, dressed up: cold paths recede, the intro is the answer ── */
.mf-cases { gap: 12px; }

/* Cold paths sit quiet — they don't work */
.mf-case.is-cold {
  color: var(--muted-2);
  padding: 4px 0 4px 34px;
}
.mf-case.is-cold .mf-case-k { color: var(--muted-2); }

/* The intro becomes an elevated lime card — the answer stands out */
.mf-case.is-warm {
  margin-top: 8px;
  padding: 20px 24px 20px 56px;
  background: var(--tint-2);
  border: 1px solid var(--tint-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -26px rgba(40, 50, 12, 0.42);
  font-size: clamp(17px, 2vw, 21px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.mf-case.is-warm::before { left: 22px; top: 22px; }
.mf-case.is-warm:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -28px rgba(40, 50, 12, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .mf-case.is-warm { transition: none; }
  .mf-case.is-warm:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   Manifesto quiz — pick where the deal closes, click to reveal
   ══════════════════════════════════════════════════════════ */
.quiz { margin-top: 30px; max-width: 620px; display: flex; flex-direction: column; gap: 12px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  border: 1px solid var(--tint-line);
  border-radius: 14px;
  background: var(--surface);
  font: inherit;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.35;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color .22s ease, background-color .22s ease, color .22s ease,
    transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, opacity .3s ease;
}
.quiz-opt:hover {
  border-color: var(--brand);
  color: var(--foreground);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -18px rgba(40, 50, 12, 0.45);
}
.quiz-mark {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--tint-line);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color .25s ease, border-color .25s ease;
}
.quiz-mark svg { width: 15px; height: 15px; display: none; }

.quiz.is-done .quiz-opt,
.quiz.is-done .quiz-opt:hover { cursor: default; transform: none; box-shadow: none; }
.quiz-opt.is-correct {
  border-color: var(--brand);
  background: var(--tint-2);
  color: var(--foreground);
  font-weight: 500;
}
.quiz-opt.is-correct .quiz-mark { background: var(--brand); border-color: var(--brand); color: #0d0d0d; }
.quiz-opt.is-correct .q-check { display: block; }
.quiz-opt.is-wrong { opacity: .5; }
.quiz-opt.is-wrong .quiz-mark { border-color: var(--muted-2); color: var(--muted-2); }
.quiz-opt.is-wrong .q-cross { display: block; }

.quiz-reveal {
  margin-top: 6px;
  padding: 2px 4px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.45;
  color: var(--foreground);
  animation: quizReveal .4s cubic-bezier(.16, 1, .3, 1);
}
.quiz-reveal b { color: #4c5a1e; font-weight: 600; }
@keyframes quizReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-opt { transition: none; }
  .quiz-reveal { animation: none; }
}

/* ── Manifesto, centered to match the rest of the page ── */
.manifesto .frame { text-align: center; }
.mf-banner { text-align: center; }
.manifesto .mf-open { margin-left: auto; margin-right: auto; }
.manifesto .quiz { margin-left: auto; margin-right: auto; }
.manifesto .quiz-opt { justify-content: flex-start; text-align: left; }
.mf-figure-banner .prf { text-align: center; }
.mf-figure-banner .prf-txt { margin-left: auto; margin-right: auto; }
.prf-tag { justify-content: center; }
.prf-foot { justify-content: center; }

/* ══════════════════════════════════════════════════════════
   Proof banner — compact, horizontal, cited
   ══════════════════════════════════════════════════════════ */
.mf-figure-banner {
  padding: 16px 26px 15px;
  background: linear-gradient(145deg, var(--tint-1) 0%, #ffffff 125%);
  border-color: var(--tint-line);
}
@media (max-width: 680px) { .mf-figure-banner { padding: 15px 20px 14px; } }

.mf-figure-banner .prf { max-width: none; margin: 0; }
.prf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 9px;
}
.prf-tag::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(184, 197, 106, 0.6);
  animation: prfPulse 2.4s ease-out infinite;
}
@keyframes prfPulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 197, 106, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(184, 197, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 197, 106, 0); }
}
@media (prefers-reduced-motion: reduce) { .prf-tag::before { animation: none; } }

.prf-row { display: block; }
.mf-figure-banner .prf-num {
  display: block;
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -.045em;
  color: #4c5a1e;
}
.mf-figure-banner .prf-txt {
  display: block;
  margin: 6px auto 0;
  font-size: clamp(14px, 1.4vw, 16.5px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--foreground);
  max-width: 380px;
  min-height: 2.2em;
}
.prf-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--tint-line);
}
.mf-figure-banner .prf-src {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--muted-2);
}
.mf-figure-banner .prf-src b { color: var(--foreground); font-weight: 500; }
.prf-dots { display: inline-flex; gap: 6px; flex: none; }
.prf-dots i {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--tint-line);
  transition: width .35s cubic-bezier(.16, 1, .3, 1), background-color .35s ease;
}
.prf-dots i.on { width: 18px; background: var(--brand); }
@media (max-width: 620px) { .mf-figure-banner .prf-src { white-space: normal; } }

/* ══════════════════════════════════════════════════════════
   Partners page
   ══════════════════════════════════════════════════════════ */
.hero-note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted-2);
}

/* Proof + invitation — one clean claim, then "be our partner" */
.pproof { text-align: center; max-width: 680px; margin: 0 auto; }
.pproof .mf-proof-big { margin-top: 2px; }
.pproof-referral {
  margin-top: 22px;
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--foreground);
}
.pproof-invite {
  margin-top: 34px;
  font-size: 15px;
  color: var(--muted);
}
.pproof-cta { margin-top: 16px; display: flex; justify-content: center; }

/* Program cards — extend the fork card */
.prog-card { padding-bottom: 32px; }
.prog-offer {
  margin-top: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--tint-line);
  border-radius: 12px;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--foreground);
}
.prog-offer b { color: #4c5a1e; font-weight: 600; }
.prog-cta { margin-top: auto; align-self: flex-start; }

/* The math — calculator cards */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 780px) { .calc-grid { grid-template-columns: 1fr; } }
.calc {
  background: #fff;
  border: 1px solid var(--tint-line);
  border-radius: 20px;
  padding: 32px 32px 30px;
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1), box-shadow 0.42s ease;
}
.calc:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(40,50,12,0.4); }
@media (prefers-reduced-motion: reduce) { .calc, .calc:hover { transition: none; transform: none; } }
.calc-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}
.calc-rows { display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 0.95rem; }
.calc-row span { color: var(--muted); }
.calc-row b { color: var(--foreground); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-out { margin-top: 22px; }
.calc-out-n {
  display: block;
  font-size: clamp(40px, 5.4vw, 62px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #4c5a1e;
  font-variant-numeric: tabular-nums;
}
.calc-out-n .u { font-size: 0.5em; font-weight: 400; }
.calc-out-k { display: block; margin-top: 12px; font-size: 0.95rem; color: var(--muted); }
.calc-note { margin-top: 26px; font-size: 0.82rem; line-height: 1.5; color: var(--muted-2); max-width: 640px; }

/* Let's be clear — guardrails list */
.clear-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .clear-list { grid-template-columns: 1fr; } }
.clear-item {
  background: #fff;
  border: 1px solid var(--tint-line);
  border-radius: 18px;
  padding: 28px 28px 30px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted);
}
.clear-k { display: block; margin-bottom: 8px; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em; color: var(--foreground); }

/* Final CTA fine print */
.cta-fine { margin: 22px auto 0; max-width: 560px; font-size: 0.78rem; line-height: 1.5; color: var(--muted-2); }

/* ══════════════════════════════════════════════════════════
   Centered section rhythm — applied site-wide
   ══════════════════════════════════════════════════════════ */
.section-word { text-align: center; }
.section-header {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.section-header .description { padding-top: 0; max-width: 520px; }

/* How-it-works / step loops, centered */
.loop-item { align-items: center; text-align: center; }

/* Partners-specific pieces */
.partners .prog-card { text-align: center; align-items: center; }
.partners .prog-card .fork-eyebrow { align-self: center; }
.partners .prog-card .prog-offer { align-self: stretch; }
.partners .prog-card .prog-cta { align-self: center; }
@media (min-width: 768px) { .loop.loop-3 { grid-template-columns: repeat(3, 1fr); } }
.partners .clear-item { text-align: center; }
.partners .calc-note { margin-left: auto; margin-right: auto; text-align: center; }

/* ── Payout calculator ── */
.calcx { max-width: 640px; margin: 8px auto 0; text-align: center; }
.calcx-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--tint-2);
  border: 1px solid var(--tint-line); margin-bottom: 36px;
}
.calcx-tab {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  padding: 9px 20px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: background-color .22s ease, color .22s ease;
}
.calcx-tab.is-on { background: var(--foreground); color: #fff; }

.calcx-controls { display: grid; gap: 26px; text-align: left; margin-bottom: 34px; }
.calcx-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; font-size: 14px; color: var(--muted);
}
.calcx-label b {
  font-size: 18px; font-weight: 600; color: var(--foreground);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.calcx-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--fill, 50%), var(--tint-line) var(--fill, 50%));
  outline: none; cursor: pointer;
}
.calcx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--foreground); border: 3px solid #fff;
  box-shadow: 0 2px 8px -1px rgba(0,0,0,.35);
  cursor: grab; transition: transform .15s ease;
}
.calcx-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.calcx-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--foreground); border: 3px solid #fff;
  box-shadow: 0 2px 8px -1px rgba(0,0,0,.35); cursor: grab;
}
.calcx-range::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }

.calcx-out {
  padding: 34px 24px; border-radius: 22px;
  background: var(--tint-1); border: 1px solid var(--tint-line);
}
.calcx-out-k {
  display: block; font-size: 13px; color: #4c5a1e;
  font-weight: 500; margin-bottom: 10px; letter-spacing: .01em;
}
.calcx-out-big {
  font-size: clamp(48px, 8vw, 84px); font-weight: 500;
  line-height: .95; letter-spacing: -.05em; color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.calcx-out-big .u { font-size: .42em; font-weight: 400; vertical-align: baseline; }
.calcx-out-sub { display: block; margin-top: 14px; font-size: 15px; color: var(--muted); }
.calcx-out-sub b { color: var(--foreground); font-weight: 600; }
.calcx-out-note { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted-2); }

/* ══════════════════════════════════════════════════════════
   Fork + program cards — destinations read as buttons, not panels
   ══════════════════════════════════════════════════════════
   These were tinted like every other content card on the page, so
   nothing said "click me". Now they sit quiet and near-white at rest,
   and answer the pointer: a lime wash rises from the bottom edge, the
   border picks up the brand, and the arrow inverts to black.

   Two shapes share the treatment: a.fork-card (the home's two
   destinations, links) and .prog-card (partners' two programs, divs
   whose CTA is a button inside). Plain .fork-card is deliberately not
   included — nothing else should read as clickable. */
a.fork-card,
.prog-card {
  background: #ffffff;
  border-color: #e6e9dc;
  box-shadow: 0 14px 34px -28px rgba(40, 50, 12, 0.4);
}
a.fork-card:hover,
.prog-card:hover {
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: 0 28px 56px -28px rgba(40, 50, 12, 0.45);
}

/* The wash itself — painted behind the content, revealed on hover */
a.fork-card::after,
.prog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    0deg,
    rgba(184, 197, 106, 0.30) 0%,
    rgba(184, 197, 106, 0.05) 55%,
    transparent 100%
  );
  transition: opacity 0.5s ease;
}
a.fork-card:hover::after,
.prog-card:hover::after { opacity: 1; }

/* Content rides above the wash. .fork-fig is absolutely positioned and
   has to stay that way, hence the :not(). */
a.fork-card > *:not(.fork-fig),
.prog-card > * { position: relative; z-index: 1; }

a.fork-card h3,
.prog-card h3 { color: var(--foreground); }
a.fork-card p,
.prog-card p { color: var(--muted); }

a.fork-card .fork-eyebrow,
.prog-card .fork-eyebrow {
  background: #ffffff;
  border-color: #dfe4d0;
  color: var(--foreground);
}
a.fork-card:hover .fork-eyebrow,
.prog-card:hover .fork-eyebrow { border-color: var(--brand); }

/* The offer strip sat on --surface, which now matches the card. Tint it
   so it still reads as a panel inside the card. */
.prog-card .prog-offer {
  background: var(--tint-1);
  border: 1px solid var(--tint-line);
}

/* Schematic figure — home cards only; the program cards have none */
a.fork-card .fork-fig { opacity: 0.3; }
a.fork-card:hover .fork-fig { opacity: 0.55; }
a.fork-card .fork-fig .ff-line { stroke: #6f8033; }
a.fork-card .fork-fig .ff-dot { fill: #6f8033; }

/* The CTA carries the affordance: outlined arrow that fills in on hover */
a.fork-card .fork-go { color: var(--foreground); }
a.fork-card .fork-go svg {
  border-color: #dfe4d0;
  background: #ffffff;
}
a.fork-card:hover .fork-go svg {
  background: var(--foreground);
  border-color: var(--foreground);
  color: #ffffff;
}

/* Keyboard users get the same signal a hover gives */
a.fork-card:focus-visible,
.prog-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.fork-card::after,
  .prog-card::after { transition: none; }
}


/* ─────────────────────────────────────────────────────────────────
   WAITLIST MODAL
   Every [data-waitlist] CTA opens the GHL "Waitlist Intro" form here.
   The iframe src and its resize script are attached on first open, so
   no page pays for a third-party embed the visitor may never ask for.
   ───────────────────────────────────────────────────────────────── */

.wl-modal[hidden] { display: none; }

/* The page holds still behind the modal */
body.wl-open { overflow: hidden; }

.wl-modal {
  position: fixed;
  inset: 0;
  /* Above the GHL chat bubble, which parks itself near the top of the stack */
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.wl-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(780px, calc(100dvh - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.wl-panel:focus { outline: none; }

.wl-modal.is-open .wl-backdrop { opacity: 1; }
.wl-modal.is-open .wl-panel { opacity: 1; transform: none; }

/* ── Header ─────────────────────────────────────────────────────── */
.wl-head {
  padding: 30px 32px 18px;
  border-bottom: 1px solid var(--border);
  /* The brand wash marks this as the moment of contact */
  background: linear-gradient(180deg, var(--tint-1) 0%, var(--surface) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.wl-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.wl-title {
  font-size: clamp(22px, 4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--foreground);
  margin: 0;
}

.wl-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 0;
}

/* ── Close ──────────────────────────────────────────────────────── */
.wl-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wl-close svg { width: 13px; height: 13px; }

.wl-close:hover {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--accent-fg);
}

.wl-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ── Form well ──────────────────────────────────────────────────────
   form_embed.js writes an inline height onto the iframe once the form
   reports its size; until then min-height keeps it usable, and the
   well scrolls if the form outgrows the panel.                       */
.wl-body {
  /* Basis auto, not 0: the panel has no definite height of its own, so a
     zero-basis body collapses instead of growing to the form's height. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 12px;
}

.wl-body iframe {
  display: block;
  width: 100%;
  min-height: 460px;
  border: none;
  border-radius: 6px;
}

/* Holds the panel's shape while the third-party form is still loading */
.wl-loading {
  display: grid;
  place-items: center;
  min-height: 460px;
  font-size: 14px;
  color: var(--muted-2);
}

.wl-modal.is-ready .wl-loading { display: none; }

/* ── Small screens: the sheet takes the width it needs ──────────── */
@media (max-width: 560px) {
  .wl-modal { padding: 0; place-items: end stretch; }

  .wl-panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    transform: translateY(28px);
  }

  .wl-head { padding: 26px 22px 16px; }
  .wl-body { padding: 8px 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-backdrop,
  .wl-panel { transition: none; }
  .wl-panel { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   CORNER CTA
   Holds the spot the GHL chat bubble used to, and opens the same form
   as every other CTA. It waits until the hero's own button has
   scrolled away, so the two never compete.
   ───────────────────────────────────────────────────────────────── */

.wl-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s ease,
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.18s ease;
}

.wl-launcher svg { width: 15px; height: 15px; }

.wl-launcher.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wl-launcher:hover { background: #1c1c1c; }

.wl-launcher:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* It has done its job once the form is up */
body.wl-open .wl-launcher {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .wl-launcher {
    right: 14px;
    bottom: 14px;
    padding: 11px 17px;
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-launcher { transition: opacity 0.2s ease; transform: none; }
  .wl-launcher.is-in { transform: none; }
}