/* ============================================================
   SiteMonit marketing pages — shared styles.
   Brand purple from the app (#8750ff family), used sparingly and flat:
   no gradients, no glass, no gradient text, minimal shadows.
   ============================================================ */
:root {
    --purple: #5b2fd6;
    --ink: #1a1a2e;
    --muted: #6b7280;
    --line: #e5e7eb;
    --paper: #ffffff;
    --paper-alt: #fafaf9;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--paper);
    color: var(--ink);
}
.nav-wrap { background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--ink); font-size: 1.1rem; text-decoration: none; }
.brand i { color: var(--purple); }

.btn-purple { background: var(--purple); border: 1px solid var(--purple); color: #fff; font-weight: 600; border-radius: 8px; }
.btn-purple:hover { background: #4a23b8; border-color: #4a23b8; color: #fff; }
.btn-outline-purple { border: 1px solid var(--line); color: var(--ink); font-weight: 600; border-radius: 8px; background: var(--paper); }
.btn-outline-purple:hover { border-color: var(--purple); color: var(--purple); background: var(--paper); }

h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.hero { border-bottom: 1px solid var(--line); background: var(--paper-alt); }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; max-width: 620px; }
.hero .lead { color: var(--muted); font-size: 1.08rem; max-width: 560px; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.eyebrow.muted, .price-amt.muted { color: var(--muted); }

.card-soft { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.step-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--purple); font-size: .9rem; }
.faq-q { font-weight: 600; }
.honest { background: var(--paper-alt); border: 1px solid var(--line); border-radius: 8px; }
.cta-band { background: var(--paper-alt); border: 1px solid var(--line); border-radius: 8px; }

.cmp { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cmp th, .cmp td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--line); }
.cmp th:first-child { min-width: 220px; }
.cmp thead th { background: var(--paper-alt); font-weight: 600; }
.cmp .us { font-weight: 600; }
.cmp .yes { color: #15803d; }
.cmp .no { color: #9ca3af; }
.cmp .meh { color: var(--muted); }

.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.price-card.popular { border-color: var(--purple); }
.price-amt { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-note { font-size: .8rem; color: var(--muted); }

footer { background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .brand { color: var(--ink); }