/* MadLeadz app styles — implements The Mad Botter design system
   ("engineering paper meets terminal"): paper surfaces, hairline rules,
   uppercase condensed headings, lowercase mono eyebrows. */

* { box-sizing: border-box; }

/* Offset in-page anchor jumps so the sticky nav never covers the target. */
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* MadLeadz product accent (brand green in product duty) — from the design comp. */
:root {
  --ml-teal: #8cc63f;
  --ml-teal-deep: #6fa32f;
  --ml-teal-soft: #edf5e0;
  --radius-card: 8px;
}

@keyframes mlpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
}

.container { width: min(1140px, 100% - 40px); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  color: var(--text-heading);
  margin: 0 0 16px;
}
h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  text-transform: lowercase;
  color: var(--purple);
  display: block;
  margin-bottom: 12px;
}

.lede { font-size: var(--text-lede); color: var(--text-secondary); max-width: 620px; }

/* --- Nav --- */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
  color: var(--ink-deep);
  text-decoration: none;
}
.wordmark .dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--ml-teal);
  animation: mlpulse 2s infinite;
}
.wordmark .accent { color: var(--ml-teal); }
@media (prefers-reduced-motion: reduce) { .wordmark .dot { animation: none; } }
/* Radar logo mark — replaces the legacy pulse dot in the wordmark. */
.wordmark-mark { width: 26px; height: 26px; display: block; flex: none; }
.site-footer .wordmark-mark { width: 20px; height: 20px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-nav);
  text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.nav-links a:hover { color: var(--purple-deep); }
.nav-signout {
  font-family: var(--font-mono); font-size: var(--text-caption);
  background: none; border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 6px 12px; color: var(--muted); cursor: pointer;
}
.nav-toggle {
  display: none; line-height: 0; cursor: pointer;
  background: none; border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 10px 11px; color: var(--ink);
}
.nav-toggle:hover { border-color: var(--purple); color: var(--purple-deep); }

/* Base links: inline content links inherit brand purple, never the UA blue. */
a { color: var(--purple-deep); }
a:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 3px; }

/* --- Hero (grid-paper motif) --- */
.hero {
  background-color: var(--paper-soft);
  background-image:
    linear-gradient(rgba(123, 74, 160, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 74, 160, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-nav);
  text-transform: uppercase; text-decoration: none; text-align: center;
  border: none; border-radius: 6px; cursor: pointer;
  padding: 13px 26px;
  transition: transform 160ms ease, background-color 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn-primary, a.btn-primary, a.btn-primary:visited,
input[type="submit"].btn-primary { background: var(--action-primary); color: #fff; }
.btn-primary:hover { background: var(--action-primary-hover); color: #fff; }
.btn-secondary { background: var(--action-secondary); color: var(--tmb-black); }
.btn-ghost {
  background: var(--surface-card); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-google, .btn-microsoft {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: 6px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  text-transform: none; letter-spacing: 0;
  padding: 11px 20px;
}
.btn-google:hover, .btn-microsoft:hover { background: #f8f9fa; border-color: #d2d5d9; }
.btn-ghost:hover { border-color: var(--purple); color: var(--purple-deep); }
.btn-full { display: block; width: 100%; }

/* --- Landing: hero grid + lead brief showcase --- */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: 52px; align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-note { margin-top: 18px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.eyebrow-teal { color: var(--ml-teal-deep); }

/* Hero CTA: Google is the anchor (elevated); "see how it works" is a quiet link. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.hero-cta .btn-google { box-shadow: var(--shadow-soft); padding: 13px 22px; }
.hero-cta .btn-google:focus-visible { box-shadow: var(--shadow-soft), 0 0 0 3px var(--focus-ring); }
.hero-cta .btn-ghost {
  background: transparent; border-color: transparent; color: var(--purple);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.hero-cta .btn-ghost:hover {
  transform: none; border-color: transparent; color: var(--purple-deep);
  text-decoration-color: currentColor;
}

.brief-card {
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--ml-teal);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(140, 198, 63, 0.07), transparent 46%), #fff;
  box-shadow: 0 6px 22px rgba(123, 74, 160, 0.1);
  overflow: hidden;
}
.brief-card .brief-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted);
}
.brief-card .relevance {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 700; color: var(--green-deep); text-transform: uppercase;
}
.brief-card .relevance .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); }
.brief-card .brief-body { padding: 20px 18px; }
.brief-card .brief-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  text-transform: uppercase; line-height: 1; color: var(--ink-deep);
}
.brief-card .brief-role { margin-top: 5px; color: var(--paper-dim); font-size: 0.98rem; }
.brief-card .brief-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 16px 0; font-size: 0.9rem;
}
.brief-card .brief-facts .k { color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; }
.brief-card .brief-signal { border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.brief-card .brief-signal p { margin: 0 0 8px; font-size: 0.98rem; }
.brief-card .brief-source {
  display: flex; gap: 14px;
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted);
}
.brief-card .brief-source a { color: var(--purple); text-decoration: none; }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; border-radius: 999px; padding: 3px 9px;
}
.pill-signal { color: var(--ml-teal-deep); background: var(--ml-teal-soft); margin-bottom: 8px; }
.pill-verified {
  font-size: 0.68rem; color: var(--green-deep);
  border: 1px solid var(--green); padding: 1px 7px;
}

/* --- Landing: how it works + pricing --- */
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .three-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .three-grid { grid-template-columns: 1fr; } }
.step-num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--ml-teal-deep); }
.step-card h3 { margin: 10px 0 8px; font-size: 1.5rem; }
.step-card p { margin: 0; color: var(--paper-dim); font-size: 0.98rem; }

.section-alt { background: var(--paper-soft); border-bottom: 1px solid var(--line); }

.price-card { display: flex; flex-direction: column; position: relative; }
.price-card .tier {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; color: var(--muted);
}
.price-card .tier-featured { color: var(--ml-teal-deep); }
.price-card .price {
  margin: 8px 0 2px; font-family: var(--font-display); font-weight: 700;
  font-size: 3.4rem; line-height: 0.9; color: var(--purple-deep);
}
.price-card .price .per { font-family: var(--font-body); font-size: 0.9rem; font-weight: 800; color: var(--muted); }
.price-card .who { margin: 4px 0 18px; color: var(--paper-dim); font-size: 0.92rem; }
.price-card .features { display: flex; flex-direction: column; gap: 9px; font-size: 0.95rem; flex: 1; }
.price-card .features .f { display: flex; gap: 9px; }
.price-card .features .yes { color: var(--green-deep); font-weight: 800; }
.price-card .features .no { color: var(--muted); }
.price-card .cta { margin-top: 20px; }
.price-card.featured { border-color: var(--ml-teal); box-shadow: 0 6px 22px rgba(123, 74, 160, 0.1); }
.popular-badge {
  position: absolute; top: -12px; left: 26px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: #fff; background: var(--purple); border-radius: 999px; padding: 3px 11px;
}

/* --- Landing footer --- */
.site-footer { padding: 40px 0; }
.site-footer .inner {
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  align-items: center; justify-content: space-between;
}
.site-footer .tag { color: var(--muted); font-size: 0.85rem; margin-left: 8px; }
.site-footer .glass { margin: 0; color: var(--purple-deep); font-family: var(--font-mono); font-size: 0.82rem; }

/* --- Cards & callouts --- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-soft, 0 2px 10px rgba(123, 74, 160, 0.06));
  padding: 24px;
}
.callout {
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 14px 18px; margin: 18px 0;
  background: var(--surface-card);
}
.callout-ok { box-shadow: inset 5px 0 0 var(--green); }
.callout-danger { box-shadow: inset 5px 0 0 var(--danger); }

/* --- Stat readouts --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 26px 0; }
/* Five stat cards: auto-fit strands one on its own row at tablet width, so pin
   the full row from where it fits. */
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-card {
  background: var(--surface-card);
  background-image: linear-gradient(135deg, rgba(123, 74, 160, 0.08), transparent 48%);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 18px 20px;
}
.stat-card .stat-label {
  font-family: var(--font-mono); font-size: var(--text-caption);
  text-transform: lowercase; color: var(--muted);
}
.stat-card .stat-value {
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--purple-deep); margin-top: 6px;
}

/* --- First-run matches: lead cards streaming in --- */
.lead-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-top: 20px;
}
.lead-card {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--green);
  border-radius: 8px; padding: 16px 18px;
  background: var(--surface-card); box-shadow: var(--shadow-soft);
}
.lead-card-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; line-height: 1; color: var(--ink-deep);
}
.lead-card-role { margin-top: 5px; color: var(--paper-dim); font-size: 0.92rem; }
.lead-card-email { margin-top: 10px; font-size: 0.9rem; }
.lead-card-why {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line-strong); font-size: 0.9rem;
}

/* --- Tables --- */
/* Scroll wide tables inside their own box so the page never scrolls sideways
   on mobile (the data tables exceed 375px otherwise). */
.table-wrap { overflow-x: auto; max-width: 100%; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.table-wrap > table.data { margin-top: 0; }

/* Scroll-shadow cue: a soft fade on whichever edge still has columns
   off-screen, so a narrow screen shows the table scrolls sideways. The cover
   layers (background-attachment: local) ride with the content and hide the
   shadow at the very ends, so it only appears while there's more to scroll.
   Cover colour must match the page background behind the table. */
.table-wrap-fade {
  background:
    linear-gradient(to right, var(--surface-page) 30%, transparent) 0 0 / 44px 100% no-repeat local,
    linear-gradient(to left, var(--surface-page) 30%, transparent) 100% 0 / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(35, 31, 32, 0.16), transparent) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(35, 31, 32, 0.16), transparent) 100% 0 / 16px 100% no-repeat scroll;
}
table.data { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.data th {
  font-family: var(--font-mono); font-size: var(--text-caption); text-transform: lowercase;
  text-align: left; color: var(--muted); font-weight: 400;
  border-bottom: 1px solid var(--line-strong); padding: 8px 10px;
}
table.data td { border-bottom: 1px solid var(--line); padding: 10px; font-size: var(--text-small); }

/* Prev / page-count / next controls under a paginated table. */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

/* Lead tables grouped by ICP: a labeled header row before each group. */
tr.icp-group td {
  background: var(--paper-soft); color: var(--purple-deep);
  font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.01em;
  border-top: 2px solid var(--line-strong);
}

/* Keep the ICP table's action column (Edit) visible when the table scrolls
   horizontally on narrow screens — otherwise it's swiped off the right edge. */
@media (max-width: 640px) {
  .icp-table th:last-child, .icp-table td:last-child {
    position: sticky; right: 0; background: var(--surface-page);
    box-shadow: -8px 0 8px -8px rgba(35, 31, 32, 0.18);
  }
}

.badge {
  font-family: var(--font-mono); font-size: var(--text-caption);
  border-radius: 6px; padding: 2px 8px;
}
.badge-verified { background: rgba(140, 198, 63, 0.18); color: var(--green-deep); }
.badge-risky { background: rgba(234, 163, 60, 0.18); color: #a86a12; }

/* --- Forms --- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-caption);
  text-transform: lowercase; color: var(--muted); margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="number"] {
  width: 100%; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-base);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 11px 13px; background: var(--surface-card); color: var(--ink);
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus,
.field input[type="url"]:focus,
.field input[type="search"]:focus,
.field input[type="tel"]:focus,
.field input[type="number"]:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--green); }
.field textarea {
  width: 100%; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.4;
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 11px 13px; background: var(--surface-card); color: var(--ink);
  resize: vertical;
}
.field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--green); }

/* Auth cards: every control spans the card, Google button included
   (button_to wraps the button in a form that must also stretch). */
.card form.button_to { width: 100%; }
.card .btn-google, .card .btn-microsoft { width: 100%; justify-content: center; }
.card input[type="submit"], .card .btn-full { padding: 13px 26px; }
.field .hint { font-size: var(--text-caption); color: var(--muted); margin-top: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks input { accent-color: var(--purple); }
.checks label {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-small); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 12px; cursor: pointer;
}
.checks label:has(input:checked) { background: var(--surface-selected); box-shadow: inset 4px 0 0 var(--green); }
.checks input[type="checkbox"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.section { padding: 42px 0; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* --- Mobile nav: collapse links behind a hamburger dropdown --- */
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--container-pad, 20px) 16px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-nav.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 12px 4px; }
  .nav-links form { width: 100%; }
  .nav-links .btn-google,
  .nav-links .nav-signout { width: 100%; min-height: 44px; justify-content: center; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-google { width: 100%; justify-content: center; }
  .hero-cta .btn-ghost { text-align: center; }
}