/* ── LeadCove · v1 marketing site ───────────────────────────────────
   Palette inspired by the name: navy = trust, teal/seafoam = fresh,
   cream = warm. Typography pairs Inter (UI) with Fraunces (display)
   so headings have character without feeling ornate.
   ────────────────────────────────────────────────────────────────── */

:root {
  --navy:       #0B2545;
  --navy-2:     #13335f;
  --teal:       #0E9F95;
  --teal-2:     #0B807A;
  --sand:       #F5EDE1;
  --sand-2:     #EFE5D2;
  --cream:      #FBF8F3;
  --ink:        #0F172A;
  --ink-2:      #334155;
  --muted:      #64748B;
  --hairline:   #E2E8F0;
  --card:       #ffffff;
  --shadow-sm:  0 1px 2px rgba(11,37,69,.05);
  --shadow-md:  0 8px 24px rgba(11,37,69,.08);
  --shadow-lg:  0 28px 64px rgba(11,37,69,.14);
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --f-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-display:  'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-2); text-decoration: none; }
a:hover { color: var(--teal); }

/* ── Nav ────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 14px 40px;
  background: rgba(251,248,243,0.88);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.brand-mark { width: 28px; height: 28px; color: var(--teal); }
.brand-wordmark { font-family: var(--f-display); font-size: 20px; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a { color: var(--ink-2); font-weight: 500; font-size: 14px; }
.nav-links a:hover { color: var(--navy); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 10px;
  font-weight: 600; font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .06s ease-out, box-shadow .15s, background .15s, border-color .15s;
}
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-2); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
/* btn-ghost — Sign-in companion to Sign-up. Per Xavi 2026-05-02:
   "you cannot just have the outline for a button with same color
   inside as outside, not good enough." Filled white bg + navy
   border + navy text — reads as a true secondary button, distinct
   from Sign up's navy-filled primary, both visible on cream hero
   bg. On dark backgrounds (the .cta section) the .cta override
   below takes precedence. */
.btn-ghost {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 12px; }
.btn-full { width: 100%; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 40px 96px;
}
.hero-inner { max-width: 620px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 99px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-2);
  background: linear-gradient(180deg, rgba(14,159,149,0.13), rgba(14,159,149,0.06));
  border: 1px solid rgba(14,159,149,0.30);
  box-shadow: 0 1px 2px rgba(11,37,69,0.04), inset 0 1px 0 rgba(255,255,255,0.55);
  margin-bottom: 22px;
  white-space: nowrap;
  max-width: 100%;
}
.eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(14,159,149,0.7);
  animation: lc-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes lc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,159,149,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(14,159,149,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,159,149,0); }
}
.eyebrow-text { color: var(--navy); letter-spacing: 0.04em; }
.eyebrow-divider {
  width: 1px;
  height: 12px;
  background: rgba(14,159,149,0.35);
  flex-shrink: 0;
}
.eyebrow-tag {
  color: var(--teal-2);
  font-weight: 700;
  letter-spacing: 0.10em;
}
@media (max-width: 480px) {
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    gap: 8px;
  }
  .eyebrow-divider { display: none; }
  .eyebrow-tag { display: none; }
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 22px;
}
.accent { color: var(--teal); }
.hero-sub {
  font-size: 18px;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
/* ── Hero proof strip — single integrated "live data" component ───── */
.hero-proof { margin-top: 40px; }

.proof-strip {
  position: relative;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(14,159,149,0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(251,248,243,0.92) 100%);
  border: 1px solid rgba(11,37,69,0.1);
  border-radius: 16px;
  padding: 18px 22px 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 1px 0 rgba(11,37,69,0.04),
    0 12px 32px -8px rgba(11,37,69,0.12),
    0 24px 48px -16px rgba(11,37,69,0.08);
  /* faint dotted grid for tech feel */
  background-image:
    radial-gradient(rgba(11,37,69,0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(251,248,243,0.92) 100%);
  background-size: 18px 18px, 100% 100%;
  background-position: 0 0, 0 0;
}

/* "Live" tag in the corner */
.proof-strip-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-2);
  background: #fff;
  border: 1px solid rgba(14,159,149,0.35);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(11,37,69,0.06);
}
.proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(14,159,149,0.5);
  animation: proof-pulse 2.2s ease-in-out infinite;
}
@keyframes proof-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,159,149,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(14,159,149,0); }
}

/* 3-column grid with internal dividers */
.proof-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 4px;
}
.proof-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  position: relative;
}
.proof-cell + .proof-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(11,37,69,0.12) 30%, rgba(11,37,69,0.12) 70%, transparent);
}

.proof-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--teal);
  background: rgba(14,159,149,0.1);
  border: 1px solid rgba(14,159,149,0.22);
  border-radius: 9px;
  padding: 5px;
}

.proof-data { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proof-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.proof-num-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 5px;
}
.proof-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  /* Removed `white-space: nowrap` — was causing the third proof cell's
     "no extra software needed" label to overflow the pill on narrower
     widths. Wrapping to two lines is fine here; the cells are flex
     children and reflow gracefully. */
  line-height: 1.3;
}

@media (max-width: 720px) {
  .proof-strip-grid { grid-template-columns: 1fr; gap: 4px; }
  .proof-cell { padding: 12px 6px; }
  .proof-cell + .proof-cell::before {
    left: 18px; right: 18px; top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right, transparent, rgba(11,37,69,0.12), transparent);
  }
}

/* ── Hero mockup ────────────────────────────────────────────────── */
.hero-visual { display: flex; justify-content: center; }
.mock-dashboard {
  width: 100%; max-width: 520px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform .3s ease;
}
.mock-dashboard:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.mock-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px; background: #081a31; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #ff5f57; }
.dot-y { background: #febc2e; }
.dot-g { background: #28c840; }
.mock-title { margin-left: 10px; font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 500; }
.mock-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mock-stat {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: rgba(255,255,255,0.05);
  padding: 10px 14px; border-radius: 10px;
  margin-right: 8px;
}
.mock-body > .mock-stat:nth-of-type(1),
.mock-body > .mock-stat:nth-of-type(2),
.mock-body > .mock-stat:nth-of-type(3) {
  display: inline-flex;
}
.mock-body {
  flex-direction: row; flex-wrap: wrap;
}
.mock-stat b { font-family: var(--f-display); font-size: 20px; color: #fff; font-weight: 600; }
.mock-stat span { font-size: 11px; color: rgba(255,255,255,0.65); }

.mock-card {
  flex-basis: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.mock-card.tier-a { border-left: 3px solid var(--teal); }
.mock-card.tier-b { border-left: 3px solid #f5b93a; }
.mock-card-head { display: flex; justify-content: space-between; align-items: center; }
.mock-card-head b { color: #fff; font-size: 14px; }
.mock-badge {
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px;
  background: rgba(14,159,149,0.18); color: #3fdecd; border: 1px solid rgba(14,159,149,0.3);
}
.mock-card.tier-b .mock-badge { background: rgba(245,185,58,0.15); color: #f5b93a; border-color: rgba(245,185,58,0.3); }
.mock-card-sub { font-size: 12px; color: rgba(255,255,255,0.6); }
.mock-card-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.mock-card-row > span:first-child { font-size: 12px; color: rgba(255,255,255,0.85); }
.mock-btn {
  font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 8px;
  background: var(--teal); color: #fff;
}

/* ── Tier-pill mockups (matches dashboard's tier-bar) ───────────── */
.mock-body-stacked { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.mock-tier-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
}
.mock-tier {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 6px;
  padding: 7px 8px;
  border: 1px solid transparent;
}
.mock-tier-range {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.mock-tier-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-tier-action {
  font-size: 8px;
  opacity: 0.78;
  line-height: 1.25;
}
.mock-tier-a    { background: linear-gradient(180deg,rgba(42,157,92,.30),rgba(42,157,92,.10)); border-color: rgba(78,202,132,.5); color: #4eca84; }
.mock-tier-b    { background: linear-gradient(180deg,rgba(212,144,10,.22),rgba(212,144,10,.08)); border-color: rgba(212,144,10,.4); color: #f5b93a; }
.mock-tier-c    { background: linear-gradient(180deg,rgba(45,125,210,.22),rgba(45,125,210,.08)); border-color: rgba(45,125,210,.4); color: #5aa4e0; }
.mock-tier-hold { background: linear-gradient(180deg,rgba(217,79,79,.22),rgba(217,79,79,.08)); border-color: rgba(217,79,79,.4); color: #f07070; }
.mock-tier-raw  { background: linear-gradient(180deg,rgba(100,116,139,.22),rgba(100,116,139,.08)); border-color: rgba(100,116,139,.5); color: #94a3b8; }
.mock-tier-out  { background: linear-gradient(180deg,rgba(94,234,212,.22),rgba(94,234,212,.08)); border-color: rgba(94,234,212,.5); color: #5eead4; }
.mock-tier-fu   { background: linear-gradient(180deg,rgba(14,159,149,.22),rgba(14,159,149,.08)); border-color: rgba(14,159,149,.5); color: #0E9F95; }
.mock-tier-int  { background: linear-gradient(180deg,rgba(245,158,11,.22),rgba(245,158,11,.08)); border-color: rgba(245,158,11,.5); color: #f59e0b; }

/* ── Tour band — multi-view carousel ─────────────────────────── */
.tour-band {
  background:
    radial-gradient(ellipse at top right, rgba(14,159,149,0.12) 0%, transparent 55%),
    var(--cream);
  padding-top: 80px;
  padding-bottom: 80px;
}
.tour-header {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}
.tour-header h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin: 8px 0 14px;
  line-height: 1.15;
}
.tour-header .section-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.tour-scroller {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px 24px 28px;
  margin: 0 -24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(11,37,69,0.18) transparent;
}
.tour-scroller::-webkit-scrollbar { height: 8px; }
.tour-scroller::-webkit-scrollbar-thumb { background: rgba(11,37,69,0.18); border-radius: 4px; }
.tour-slide {
  flex: 0 0 auto;
  width: min(540px, 86vw);
  margin: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
}
/* Uniform tour-slide image size (Xavi 2026-05-02): each slide's
   mockup pane locked to the same 16:10 aspect ratio. Variable mockup
   content (different numbers of cards, etc.) clips cleanly inside
   the box instead of stretching the slide vertically. Result: every
   slide is the same height, the carousel reads as a clean strip
   instead of a ragged staircase. */
.tour-slide .mock-dashboard,
.tour-slide .mock-dashboard-tour {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tour-slide figcaption {
  margin-top: 16px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.tour-slide figcaption strong { color: var(--navy); font-weight: 600; }
.mock-dashboard-tour {
  transform: none;   /* no perspective tilt inside the carousel */
}
.mock-dashboard-tour:hover { transform: none; }
.tour-hint {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.tour-hint span { color: var(--teal); margin: 0 6px; }

/* ── Lead-modal mock (action stack + sections) ──────────────── */
.mock-modal-body {
  padding: 18px;
  background: var(--navy);
  color: rgba(255,255,255,0.92);
}
.mock-modal-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.mock-modal-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
.mock-action-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.mock-action-row-secondary { padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.1); margin-top: 6px; }
.mock-action-btn {
  font-size: 11px; font-weight: 600;
  padding: 6px 12px; border-radius: 7px;
  background: var(--teal); color: #fff;
}
.mock-action-btn-sm {
  font-size: 10px;
  padding: 5px 10px; border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.1);
}
.mock-action-btn-ghost {
  font-size: 11px;
  padding: 6px 12px; border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}
.mock-section-title {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  margin: 16px 0 8px;
  text-transform: uppercase;
}
.mock-owner-block {
  border-left: 3px solid var(--teal);
  background: rgba(14,159,149,0.07);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 6px;
}
.mock-owner-head {
  font-size: 12px; font-weight: 700;
  color: var(--teal);
  margin-bottom: 4px;
}
.mock-field {
  display: flex; justify-content: space-between;
  font-size: 11px;
  padding: 3px 0;
}
.mock-field span:first-child { color: rgba(255,255,255,0.55); }
.mock-field span:last-child { color: rgba(255,255,255,0.92); }

/* ── Upload flow mock ──────────────────────────────────────── */
.mock-mapping {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
}
.mock-map-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  padding: 4px 0;
  color: rgba(255,255,255,0.85);
}
.mock-map-row span:first-child { font-weight: 600; min-width: 110px; color: rgba(255,255,255,0.65); }
.mock-arrow { color: var(--teal); font-weight: 700; }
.mock-map-row code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10px;
  background: rgba(14,159,149,0.15);
  color: #5eead4;
  padding: 2px 6px;
  border-radius: 4px;
}
.mock-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  margin: 12px 0;
}
.mock-meta strong { color: rgba(255,255,255,0.7); font-weight: 500; margin-right: 4px; }

/* ── By Area mock ──────────────────────────────────────────── */
.mock-area-row {
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  padding: 7px 0;
  color: rgba(255,255,255,0.85);
}
.mock-area-name { color: rgba(255,255,255,0.92); font-weight: 500; }
.mock-area-bar {
  display: block;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.mock-area-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5eead4 0%, var(--teal) 100%);
  border-radius: 4px;
}
.mock-area-count { font-family: var(--f-display); font-weight: 600; color: var(--teal); text-align: right; }

/* ── Glossary keys mock ───────────────────────────────────── */
.mock-key-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px;
  padding: 5px 0;
  color: rgba(255,255,255,0.78);
}
.mock-key-pill {
  flex-shrink: 0;
  font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  min-width: 64px; text-align: center;
}
.mock-key-gray   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.mock-key-teal   { background: rgba(14,159,149,0.18); color: #5eead4; }
.mock-key-orange { background: rgba(245,158,11,0.20); color: #f5b93a; }
.mock-key-purple { background: rgba(108,92,231,0.20); color: #a294f0; }
.mock-key-green  { background: rgba(78,202,132,0.20); color: #4eca84; }
.mock-key-tier-a { background: rgba(78,202,132,0.20); color: #4eca84; }
.mock-key-tier-b { background: rgba(245,185,58,0.20); color: #f5b93a; }

/* ── Bands (generic section wrapper) ────────────────────────────── */
/* Symmetric padding (Xavi 2026-05-02 — "should be equal top/bottom").
   Was 96/96 — visually too generous, sections felt over-spaced and
   the page read as long-er than necessary. Tightened to 64/64 across
   the board. .band-tight kept smaller for the hero-adjacent plans
   block. Section-sub margin-bottom reduced 48→32 for tighter heading
   stacks. */
.band {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
}
.band + .band { border-top: 1px solid var(--hairline); }

/* ── Promise band — featured callout: no data, no charge ─────── */
.promise-band {
  background:
    radial-gradient(ellipse at top right, rgba(14,159,149,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(11,37,69,0.92) 30%, rgba(11,37,69,1) 100%);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.promise-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.promise-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #4ed6c8;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.promise-headline {
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.05;
  margin: 0 0 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}
.promise-lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 720px;
  margin: 0 auto 50px;
}
.promise-lede strong { color: #4ed6c8; font-weight: 700; }
.promise-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 30px;
  text-align: left;
}
.promise-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 20px;
  backdrop-filter: blur(6px);
}
.promise-point-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(14,159,149,0.18);
  color: #4ed6c8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}
.promise-point-title {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}
.promise-point-body {
  font-size: 13px;
  color: rgba(255,255,255,0.74);
  line-height: 1.55;
}
@media (max-width: 800px) {
  .promise-points { grid-template-columns: 1fr; gap: 14px; }
}
.section-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-2);
  margin: 0 0 12px;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 16px;
  max-width: 720px;
}
.section-sub {
  color: var(--ink-2); font-size: 16px; max-width: 660px; margin: 0 0 32px;
}

/* ── Problem ────────────────────────────────────────────────────── */
.problem { background: #fff; margin: 0; max-width: none; padding-left: 40px; padding-right: 40px; }
.problem > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.problem-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 28px;
}
.problem-icon { font-size: 32px; margin-bottom: 12px; }
.problem-card h3 {
  font-family: var(--f-display); font-weight: 600; font-size: 20px;
  color: var(--navy); margin: 0 0 8px; letter-spacing: -0.01em;
}
.problem-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; }

/* ── How ────────────────────────────────────────────────────────── */
.how-list { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; gap: 0; }
.how-list li {
  display: grid; grid-template-columns: 120px 1fr; gap: 36px;
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
}
.how-list li:last-child { border-bottom: 1px solid var(--hairline); }
.how-num {
  font-family: var(--f-display);
  font-size: 44px; font-weight: 600;
  color: var(--teal);
  letter-spacing: -0.03em;
}
.how-body h3 {
  font-family: var(--f-display); font-size: 24px; font-weight: 600;
  color: var(--navy); margin: 4px 0 8px; letter-spacing: -0.015em;
}
.how-body p { color: var(--ink-2); font-size: 15.5px; margin: 0; max-width: 720px; }

/* ── Stats band (right under hero) ──────────────────────────────── */
.stats-band {
  background: var(--navy);
  color: #fff;
  padding: 56px 40px;
}
.stats-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-number {
  font-family: var(--f-display);
  font-size: clamp(42px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--teal);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.stat-unit {
  font-size: 18px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0;
}
.stat-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 4px;
}
.stat-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.stat-sub strong { color: var(--teal); }
@media (max-width: 900px) {
  .stats-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 520px) {
  .stats-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Newbie path section ────────────────────────────────────────── */
.newbies {
  background: linear-gradient(135deg, var(--cream) 0%, var(--sand) 100%);
  max-width: none;
  padding: 96px 40px;
}
.newbies-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.newbies-copy h2.section-title {
  margin-bottom: 16px;
}
.newbies-lead {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 24px;
  line-height: 1.6;
}
.newbies-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newbies-list li {
  font-size: 14.5px;
  color: var(--ink-2);
  padding-left: 26px;
  position: relative;
  line-height: 1.55;
}
.newbies-list li::before {
  content: '→';
  position: absolute; left: 0; top: 0;
  color: var(--teal);
  font-weight: 700;
}
.newbies-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
}
.newbies-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-2);
  margin-bottom: 14px;
}
.newbies-card-headline {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 24px;
}
.newbies-card-meta {
  display: flex;
  gap: 28px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.newbies-card-meta > div { display: flex; flex-direction: column; gap: 2px; }
.newbies-card-num {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1;
}
.newbies-card-suf {
  font-size: 12px;
  color: var(--muted);
}
.newbies-card-bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.newbies-card-bullets > div {
  padding-left: 6px;
}
@media (max-width: 900px) {
  .newbies-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Pricing · "How it works" 4-step flow ───────────────────────── */
.pricing-howitworks {
  margin: 36px 0 48px;
  padding: 28px 0 12px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.howitworks-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent, #E8822A);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 28px;
}
.howitworks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                     /* line connectors fill the gap visually */
  position: relative;
  align-items: stretch;
}
/* Horizontal connector line behind the step circles */
.howitworks-grid::before {
  content: '';
  position: absolute;
  top: 36px;            /* aligns with the center of the step number circle */
  left: 12.5%;          /* start at center of step 1 */
  right: 12.5%;         /* end at center of step 4 */
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(11,37,69,0.10) 0%,
    rgba(14,159,149,0.40) 25%,
    rgba(232,130,42,0.40) 50%,
    rgba(14,159,149,0.40) 75%,
    rgba(11,37,69,0.10) 100%
  );
  z-index: 0;
}
.howitworks-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 14px;
}
.howitworks-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy, #0B2545);
  color: var(--navy, #0B2545);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(11, 37, 69, 0.10);
  transition: transform .15s, box-shadow .15s;
}
/* Color-cycle the numbers so each step pops differently */
.howitworks-step:nth-child(1) .howitworks-num { background: var(--navy, #0B2545); color: #fff; border-color: var(--navy, #0B2545); }
.howitworks-step:nth-child(2) .howitworks-num { background: var(--teal-2, #0E9F95); color: #fff; border-color: var(--teal-2, #0E9F95); }
.howitworks-step:nth-child(3) .howitworks-num { background: var(--accent, #E8822A); color: #fff; border-color: var(--accent, #E8822A); }
.howitworks-step:nth-child(4) .howitworks-num { background: #2A9D5C; color: #fff; border-color: #2A9D5C; }
.howitworks-step:hover .howitworks-num {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(11, 37, 69, 0.18);
}
.howitworks-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy, #0B2545);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.howitworks-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2, #475569);
  max-width: 220px;
}
.howitworks-body strong { color: var(--navy, #0B2545); font-weight: 700; }
@media (max-width: 800px) {
  .howitworks-grid { grid-template-columns: 1fr; gap: 24px; }
  .howitworks-grid::before { display: none; }      /* connector irrelevant when stacked */
  .howitworks-step { flex-direction: row; text-align: left; gap: 16px; padding: 0; }
  .howitworks-num { margin-bottom: 0; flex-shrink: 0; }
  .howitworks-body { max-width: none; }
}

/* "Pick your plan" hero-adjacent section — promoted to immediately
   under the hero per Xavi 2026-04-29. Tighter top padding than a
   normal .band so the plans don't feel disconnected from the hero
   pitch above. */
.band-tight { padding-top: 40px; padding-bottom: 40px; }
.plans-hero { background: #fff; }
.plans-hero .section-eyebrow,
.plans-hero .section-title,
.plans-hero .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.plans-hero .section-sub { max-width: 640px; }
.plans-hero .pricing-grid-3 { margin-top: 32px; }

/* Compare section's "Row 2 (DO)" reference card — replaces the full
   plan cards that used to live here (now in #plans up top). Single-
   line reassurance + a button back up to the plans section. */
.compare-solution-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(14,159,149,0.06), rgba(14,159,149,0.02));
  border: 1px solid rgba(14,159,149,0.30);
  border-left: 4px solid var(--teal-2, #0E9F95);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 18px 0;
}
.compare-solution-headline {
  font-size: 16px;
  line-height: 1.45;
  color: var(--navy);
  flex: 1 1 auto;
  min-width: 240px;
}
.compare-solution-headline strong { color: var(--navy); }

/* Pricing section "back to plans" CTA — lives where the duplicate
   plan cards used to live before they got promoted up top. */
.pricing-back-to-plans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 36px;
}
.pricing-back-to-plans-sub {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}

/* ── Pricing add-on callout ──────────────────────────────────────── */
.pricing-addon {
  margin: 18px auto 0;
  background: #fff;
  border: 1px dashed var(--border2);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  display: grid;                                /* grid keeps pill column + body column aligned across cards */
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  max-width: 880px;
}
.pricing-addon + .pricing-addon { margin-top: 14px; }   /* tighter stacking between two cards */
.addon-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-2);
  background: rgba(14,159,149,0.1);
  border: 1px solid rgba(14,159,149,0.3);
  padding: 7px 14px;
  border-radius: 99px;
  flex-shrink: 0;
  text-align: center;
  width: 100%;                                  /* fill the 180px grid column for parity */
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.addon-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}
.addon-body strong { color: var(--navy); }
@media (max-width: 720px) {
  .pricing-addon { grid-template-columns: 1fr; gap: 12px; padding: 18px 22px; }
  .addon-tag { width: auto; max-width: 200px; padding: 6px 12px; min-height: 0; }
}

/* ── Enterprise (4+ agents) callout ──────────────────────────────── */
.pricing-enterprise {
  margin-top: 24px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-md);
}
.enterprise-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.enterprise-headline {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.enterprise-body {
  font-size: 14.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}
.enterprise-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.enterprise-cta .btn-primary {
  background: var(--teal);
  white-space: nowrap;
}
.enterprise-cta .btn-primary:hover { background: var(--teal-2); }
.enterprise-fine {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 760px) {
  .pricing-enterprise { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
}

/* ── Compare (cost vs. alternatives) ────────────────────────────── */
.compare { background: #fff; max-width: none; padding-left: 40px; padding-right: 40px; }
.compare > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.compare-grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 16px; }

/* Two-row compare structure: alternatives ON TOP, LeadCove plans BELOW. */
.compare-row { margin-top: 36px; }
.compare-row + .compare-row { margin-top: 24px; }
.compare-row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.row-label-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 99px;
  border: 2px solid;
  white-space: nowrap;
}
.row-label-tag.bad  { color: #d94f4f; background: rgba(217,79,79,0.1);   border-color: #d94f4f; }
.row-label-tag.good { color: #fff;    background: var(--teal);            border-color: var(--teal); }
.row-label-text {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* Divider between the two rows */
.compare-vs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 8px;
}
.compare-vs-line {
  flex: 1; height: 1px; background: var(--hairline);
}
.compare-vs-word {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-2);
}

/* "Rejected" alternative cards — visually crossed out */
.compare-card-rejected {
  background: rgba(217, 79, 79, 0.04);
  border-color: rgba(217, 79, 79, 0.25);
  position: relative;
  opacity: 0.78;
}
.compare-card-rejected:hover { opacity: 0.88; }
.compare-card-rejected .compare-name {
  color: rgba(217, 79, 79, 0.9);
}
/* Credits-included badge on each plan card */
.compare-credits {
  display: block;
  font-size: 13px;
  color: var(--ink-2, #475569);
  margin: -6px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(11, 37, 69, 0.15);
}
.compare-credits strong { color: var(--navy, #0B2545); font-weight: 700; }

/* "What's a credit?" educational callout */
.credit-explainer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(14,159,149,0.07), rgba(14,159,149,0.02));
  border: 1px solid rgba(14,159,149,0.20);
  border-left: 4px solid var(--teal-2, #0E9F95);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 16px 0 24px;
}
.credit-explainer-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: var(--teal-2, #0E9F95);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}
.credit-explainer-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2, #334155);
}
.credit-explainer-text strong { color: var(--navy, #0B2545); font-weight: 700; }
.credit-explainer-text em { font-style: italic; }

/* "No prospecting cap" banner — drives home that the monthly credits
   number is an *allowance*, not a ceiling. Different visual treatment
   from .credit-explainer (gold-on-navy, infinity glyph) so the eye
   reads them as two distinct reassurances stacked. */
.no-cap-banner {
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, #0B2545 0%, #13335f 100%);
  border: 1px solid #0B2545;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 22px;
  color: #fff;
}
.no-cap-banner-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--accent, #E8822A);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.no-cap-banner-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.no-cap-banner-text strong {
  color: #fff;
  font-weight: 700;
}
.no-cap-banner-text em {
  font-style: italic;
  color: #fde68a;
}

/* Add-on packs callout below monthly plans */
.compare-addon-callout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px;
  align-items: center;
  background: var(--card, #fff);
  border: 1px solid rgba(11,37,69,0.12);
  border-radius: 14px;
  padding: 24px 26px;
  margin-top: 24px;
}
.addon-callout-side .addon-callout-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent, #E8822A);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.addon-callout-side .addon-callout-headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy, #0B2545);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.addon-callout-side p {
  font-size: 13px;
  color: var(--ink-2, #475569);
  line-height: 1.55;
  margin: 0;
}
.addon-callout-packs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.addon-pack-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(180deg, #fafbfc, #fff);
  border: 1px solid rgba(11,37,69,0.10);
  border-radius: 10px;
  padding: 14px 8px;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.addon-pack-mini:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #E8822A);
  box-shadow: 0 6px 16px rgba(11,37,69,0.10);
}
.addon-pack-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2, #475569);
  margin-bottom: 4px;
}
.addon-pack-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy, #0B2545);
  line-height: 1.1;
}
.addon-pack-credits {
  font-size: 11px;
  color: var(--ink-2, #475569);
  margin-top: 2px;
}
.addon-pack-best {
  background: linear-gradient(180deg, rgba(232,130,42,0.08), #fff);
  border-color: rgba(232,130,42,0.40);
}
.addon-pack-best .addon-pack-name { color: var(--accent, #E8822A); }
@media (max-width: 800px) {
  .compare-addon-callout { grid-template-columns: 1fr; }
  .addon-callout-packs { grid-template-columns: repeat(2, 1fr); }
}

.compare-card-rejected .compare-cost { position: relative; }
.compare-cost-strike .num,
.compare-cost-strike .per {
  color: rgba(15, 23, 42, 0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(217, 79, 79, 0.7);
  text-decoration-thickness: 3px;
}
/* Big red ✗ stamp in the top-right corner */
.compare-stamp {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(217, 79, 79, 0.14);
  border: 2px solid #d94f4f;
  color: #d94f4f;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
}

/* "Good" cards — LeadCove plans, clean and inviting */
.compare-card-good {
  background: #fff;
  border-color: var(--hairline);
  border-width: 2px;
  border-color: rgba(14, 159, 149, 0.35);
  box-shadow: 0 4px 18px rgba(14, 159, 149, 0.08);
}
.compare-card-good.compare-card-featured {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.compare-card-good.compare-card-featured .compare-name,
.compare-card-good.compare-card-featured .compare-tag,
.compare-card-good.compare-card-featured .compare-cost .num,
.compare-card-good.compare-card-featured .compare-cost .per,
.compare-card-good.compare-card-featured .compare-list li {
  color: #fff;
}
.compare-card-good.compare-card-featured .compare-cost .per { color: rgba(255,255,255,0.6); }
.compare-card-good.compare-card-featured .compare-list li { color: rgba(255,255,255,0.85); }
/* The credits-included row had navy text + slate sub-text that was
   invisible on the navy featured card. Force white tones + lighter
   dashed divider on the featured variant. */
.compare-card-good.compare-card-featured .compare-credits {
  color: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.compare-card-good.compare-card-featured .compare-credits strong {
  color: #fff;
}

.compare-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.compare-card-head .compare-name { margin-bottom: 0; }
.compare-tag {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 900px) {
  .compare-grid-3 { grid-template-columns: 1fr; }
  .compare-row + .compare-row { margin-top: 16px; }
  .compare-vs { margin: 24px 0 4px; }
}
.compare-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 26px 24px 22px;
  position: relative;
  display: flex; flex-direction: column;
}
.compare-card-featured {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.compare-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--teal); color: #fff;
  padding: 5px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.compare-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.compare-card-featured .compare-name { color: rgba(255,255,255,0.65); }

.compare-cost {
  font-family: var(--f-display);
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 18px;
}
.compare-cost .num {
  font-size: 36px; font-weight: 600; color: var(--navy);
  letter-spacing: -0.025em;
}
.compare-card-featured .compare-cost .num { color: #fff; }
.compare-cost .per { font-size: 13px; color: var(--muted); }
.compare-card-featured .compare-cost .per { color: rgba(255,255,255,0.6); }

.compare-list {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.compare-list li {
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
  padding-left: 22px; position: relative;
}
.compare-card-featured .compare-list li { color: rgba(255,255,255,0.85); }
.compare-list li.bad::before {
  content: '✗'; position: absolute; left: 0; top: 0;
  color: #d94f4f; font-weight: 700;
}
.compare-list li.good::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: #4eca84; font-weight: 700;
}

.compare-bar {
  height: 6px; background: rgba(11,37,69,0.06);
  border-radius: 99px; overflow: hidden;
}
.compare-card-featured .compare-bar { background: rgba(255,255,255,0.1); }
.compare-bar > span {
  display: block; height: 100%;
  border-radius: 99px;
}
.compare-footnote {
  margin-top: 36px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
  max-width: 800px;
}
@media (max-width: 1000px) {
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
  .compare-card-featured { transform: none; }
}
@media (max-width: 540px) {
  .compare-grid { grid-template-columns: 1fr; }
}

/* ── Product tour / screenshots ─────────────────────────────────── */
.product-tour { background: #fff; max-width: none; padding-left: 40px; padding-right: 40px; }
.product-tour > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.screenshot-grid {
  /* Was an asymmetric main+side layout (4:5 main spanning 2 rows + a
     16:10 side cell). Simplified to two equal 16:10 cells in a
     single row 2026-05-02 after the analytics screenshot was
     deleted — left an empty grid cell that looked broken. Both
     screenshots now share identical dimensions for visual parity. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
.screenshot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column;
}
.screenshot-main { /* legacy, no longer applies — kept harmless */ }
.screenshot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #081a31;
}
.screenshot figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: #fff; font-size: 13px; font-weight: 500;
}
.screenshot-fallback {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center; flex-direction: column; text-align: center;
  padding: 24px; color: rgba(255,255,255,0.75);
  background: linear-gradient(135deg, #0B2545 0%, #13335f 60%, #0E9F95 180%);
}
.screenshot.no-image { background: transparent; }
.screenshot.no-image img { display: none; }
.screenshot.no-image .screenshot-fallback { display: flex; }
.screenshot-placeholder-label {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.screenshot-placeholder-sub {
  font-size: 12px; color: rgba(255,255,255,0.55);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.screenshot-placeholder-sub code {
  background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px;
  color: #3fdecd;
}
@media (max-width: 960px) {
  .screenshot-grid { grid-template-columns: 1fr; }
  .screenshot-main { grid-row: auto; aspect-ratio: 16 / 10; }
}

/* ── Features ───────────────────────────────────────────────────── */
.features { background: #fff; max-width: none; padding-left: 40px; padding-right: 40px; }
.features > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  background: var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 36px;
  border: 1px solid var(--hairline);
}
.feature {
  background: #fff;
  padding: 26px;
}
.feature h4 {
  font-weight: 700; font-size: 15.5px; color: var(--navy); margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.feature p { color: var(--ink-2); font-size: 14px; margin: 0; }

/* ── Coverage section ───────────────────────────────────────────── */
.coverage { background: var(--cream); }
.coverage .section-sub {
  max-width: 720px; margin: 12px auto 36px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.lc-fl-map-wrap {
  max-width: 880px;
  margin: 24px auto 12px;
  position: relative;
}
.lc-fl-map {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(11,37,69,0.10));
}
.lc-county {
  fill: var(--teal);
  fill-opacity: 0.78;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill-opacity .15s, transform .15s ease-out, filter .15s;
  transform-origin: center;
  transform-box: fill-box;
}
.lc-county:hover {
  fill-opacity: 1;
  fill: var(--teal-2);
  filter: drop-shadow(0 4px 8px rgba(11,37,69,0.25));
  stroke-width: 1.8;
}
.lc-fl-map-hover {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 8px 14px;
  background: rgba(11,37,69,0.92);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s;
}
.lc-fl-map-hover.is-active {
  background: var(--teal-2);
}
.lc-fl-map-credit {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 18px 0 0;
}

/* ── Pricing ────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* all 4 packs on one row */
  gap: 16px;
  margin-top: 48px;
  align-items: stretch;
}

/* 3-card variant for the monthly plans (Starter/Pro/Power). The base
   .pricing-grid was originally tuned for 4 prepaid packs across the
   row — when we render 3 monthly plans it appears left-aligned with
   empty space on the right. This narrower 3-col template + auto
   margins centers the row properly. */
.pricing-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .pricing-grid-3 {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}
.tier {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.tier-featured {
  border: 2px solid var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
}
.tier-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff;
  padding: 5px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Plan name — Starter / Pro / Power. Per Xavi 2026-04-29: "the titles
   starter pro and power need to be a cooler bigger font maybe? just
   need to stand out more for branding purposes." Using the display
   font at section-title scale, mixed case, navy color so the plan
   identity reads as a real brand element rather than a label. */
.tier-name {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  text-transform: none;
  margin-bottom: 4px;
}
.tier-featured .tier-name { color: var(--teal-2); }
.tier-price {
  font-family: var(--f-display);
  font-size: 52px; font-weight: 600; color: var(--navy);
  margin: 10px 0 4px; letter-spacing: -0.03em;
  display: inline-flex; align-items: baseline;
}
.tier-price .dollar { font-size: 28px; margin-right: 2px; color: var(--ink-2); }
.tier-price .per { font-size: 16px; color: var(--muted); margin-left: 4px; }
.tier-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.tier-list {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.tier-list li {
  font-size: 14px; color: var(--ink-2);
  padding-left: 24px; position: relative;
}
.tier-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* ── FAQ ────────────────────────────────────────────────────────── */
/* When the FAQ section drops its subtitle ("Common questions."), the
   tiny 12px eyebrow doesn't read as a real section header. This larger
   variant brings it up to the visual weight of section titles
   elsewhere on the page. Per Xavi 2026-04-29: "common questions not
   needed just FAW [FAQ] but a little bigger font." */
.section-eyebrow.faq-eyebrow-large {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.faq-grid { margin-top: 36px; display: flex; flex-direction: column; gap: 4px; }
.faq details {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: box-shadow .15s;
}
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary {
  font-weight: 600; font-size: 15.5px; color: var(--navy);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 20px; color: var(--teal); font-weight: 400;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }

/* ── CTA / Waitlist ─────────────────────────────────────────────── */
.cta { background: var(--navy); max-width: none; color: #fff; padding: 64px 40px; }
.cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); background: rgba(14,159,149,0.14);
  border: 1px solid rgba(14,159,149,0.35);
  padding: 6px 14px; border-radius: 99px; margin-bottom: 20px;
}
.cta-form { gap: 10px; flex-wrap: wrap; }
.cta-form input[name="city"] { flex: 0 1 200px; }

.cities {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
}
.cities-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-right: 8px; }
.city-pill {
  font-size: 12.5px; font-weight: 500;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8);
}
.city-pill.city-live {
  background: rgba(14,159,149,0.18);
  border-color: rgba(14,159,149,0.45);
  color: #3fdecd;
  font-weight: 600;
}
.city-pill.city-muted {
  background: transparent; border-style: dashed;
  color: rgba(255,255,255,0.55);
}
.city-pill.city-soft {
  background: rgba(255,255,255,0.04);
  border-style: dashed;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}
.cta h2 {
  font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 44px); font-weight: 600;
  margin: 0 0 14px; letter-spacing: -0.02em;
}
.cta p { color: rgba(255,255,255,0.75); font-size: 17px; margin: 0 0 36px; }
.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
  row-gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}
.cta-form input {
  padding: 13px 16px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff; font-size: 15px;
  font-family: var(--f-sans);
  width: 100%;
  min-width: 0;
}
.cta-form input[name="email"] { grid-column: 1 / 2; }
.cta-form input[name="city"]  { grid-column: 2 / 3; }
.cta-form button              { grid-column: 1 / -1; justify-self: center; min-width: 220px; margin-top: 12px; margin-bottom: 14px; }
.cta-form input::placeholder { color: rgba(255,255,255,0.5); }
.cta-form input:focus { outline: none; border-color: var(--teal); background: rgba(255,255,255,0.12); }
.cta-form .btn-primary { background: var(--teal); }
.cta-form .btn-primary:hover { background: var(--teal-2); }

/* CTA section overrides for the .hero-ctas button row.
   Two bugs Xavi 2026-05-02 caught after the waitlist→Sign-up
   refactor:
     1. .btn-ghost defaults to dark text + light border (designed for
        the cream-colored hero/header). Inside .cta (dark navy bg)
        that's invisible. Force white text + white-tinted border.
     2. .hero-ctas has no justify-content; in the centered CTA
        section the buttons piled up on the left. Centered explicitly. */
.cta .hero-ctas {
  justify-content: center;
  margin-bottom: 24px;
}
/* CTA Sign-in button on dark navy. Iron rule from Xavi (re-affirmed
   2026-05-02): "you cannot just have the outline for a button with
   same color inside as outside, not good enough." 12% white on navy
   was still failing the contrast bar — flipped to SOLID white fill +
   navy text. Sign up stays brand-teal — white vs teal complement
   each other instead of competing, both are unambiguously clickable. */
.cta .btn-ghost {
  color: var(--navy);
  border-color: #fff;
  background: #fff;
}
.cta .btn-ghost:hover {
  color: #fff;
  border-color: var(--teal);
  background: var(--teal);
}
.cta .btn-primary {
  background: var(--teal);
  border-color: var(--teal);
}
.cta .btn-primary:hover {
  background: var(--teal-2);
  border-color: var(--teal-2);
}
.cta .cta-fine {
  text-align: center;
  margin-top: 4px;
}
.cta .cta-fine a { color: var(--teal); }
.cta-fine { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 36px; }
@media (max-width: 480px) {
  .cta-form { grid-template-columns: 1fr; }
  .cta-form input[name="email"],
  .cta-form input[name="city"] { grid-column: 1 / -1; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
/* Wrap the footer so the dark band runs edge-to-edge (matching the navy
   CTA above it), with the columns themselves contained at 1240px. */
.footer-wrap { background: #07172e; }
.footer {
  color: rgba(255,255,255,0.7);
  padding: 56px 40px 36px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto;
}
.footer .brand { color: #fff; font-size: 20px; }
.footer .brand-mark { color: var(--teal); }
.footer-tag { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,0.5); max-width: 260px; }
.footer-col h5 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; margin: 0 0 14px;
}
.footer-col a {
  display: block; font-size: 14px; color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.footer-col a:hover { color: #fff; }
.footer-bar {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 24px; padding-top: 20px;
  font-size: 12px; color: rgba(255,255,255,0.45);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav { padding: 12px 20px; gap: 12px; }
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; padding: 44px 20px 56px; gap: 40px; }
  .hero-visual { order: 2; }
  .band { padding: 64px 20px; }
  .problem-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .tier-featured { transform: none; }
  .how-list li { grid-template-columns: 1fr; gap: 10px; }
  .footer { grid-template-columns: 1fr 1fr; padding: 40px 20px 24px; gap: 28px; }
  .mock-dashboard { transform: none; }
}
@media (max-width: 520px) {
  .hero-proof { grid-template-columns: 1fr; gap: 14px; }
  .footer { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   Optional top-up packs subsection — lives FAR below the monthly plans,
   intentionally subdued. Smaller cards, muted background, copy that
   says "you probably don't need this." We never want a visitor to
   read this and think they have to buy a pack on top of their plan.
   ────────────────────────────────────────────────────────────────── */
.topups-band {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  /* Tighter top per Xavi 2026-04-29: "this section needs less padding
     on top and a little bit of padding under it." */
  padding: 28px 20px 36px;
}
.topups-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.topups-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  background: rgba(100, 116, 139, 0.10);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.topups-title {
  font-size: 24px;
  font-weight: 700;
  color: #0B2545;
  margin: 0 0 10px;
}
.topups-sub {
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 26px;
}
.topups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .topups-grid { grid-template-columns: repeat(2, 1fr); }
}
.topup-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 10px;
  text-align: center;
  position: relative;
}
.topup-card-best {
  border-color: rgba(14, 159, 149, 0.4);
  box-shadow: 0 0 0 2px rgba(14, 159, 149, 0.08);
}
.topup-best-flag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #0E9F95;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.topup-name {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.topup-price {
  font-size: 22px;
  font-weight: 700;
  color: #0B2545;
  margin-top: 4px;
}
.topup-credits {
  font-size: 13px;
  font-weight: 600;
  color: #0E9F95;
  margin-top: 2px;
}
.topup-rate {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}
.topups-fine {
  font-size: 12px;
  color: #94a3b8;
  margin: 22px auto 0;
  font-style: italic;
}