/* =========================================================
   LeaseUp Bulldog: light theme (Oct 2026). Loaded LAST on every static page.
   - Re-points the brand tokens to a light palette (off-white page, white cards,
     near-black text, the same crimson).
   - Product "screens" (phone, app mockup, bulldog video, SMS panels, intro video)
     and the footer keep the dark token set, so they read as screens on the page.
   - Calmer type: modest heading sizes, no red half-headlines.
   Rules here override style.css / pages.css / home.css / compare.css by load order.
   ========================================================= */

:root {
  --bg: #F6F5F3;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #EFEDEA;
  --line: rgba(24, 16, 19, 0.09);
  --line-strong: rgba(24, 16, 19, 0.18);
  --ink: #17111A;
  --ink-soft: #3B3337;
  --ink-mute: #675D62;
  --ink-faint: #736870;
  --accent-light: #B0102A;
  --accent-soft: rgba(200, 16, 46, 0.08);
}

/* dark token set for screens and the footer */
.site-footer, .pf-phone-bezel, .pf-app, .pf-brand-video-frame, .sms-phone,
#intro-overlay, #loader, .pf-callout, .founder-card, .canvas-wrap, .pf-cap-mini {
  --bg: #000000; --bg-elev: #0a0a0a; --bg-elev-2: #111111;
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #ffffff; --ink-soft: rgba(255, 255, 255, 0.8); --ink-mute: rgba(255, 255, 255, 0.66); --ink-faint: rgba(255, 255, 255, 0.55);
  --accent-light: #F87171; --accent-soft: rgba(200, 16, 46, 0.18);
  color: var(--ink);
}

html, body, body.page, body.product-first { background: var(--bg); color: var(--ink); }

/* ---------- header ---------- */
.site-header, .site-header.solid, .site-header.solid.is-scrolled {
  background: rgba(246, 245, 243, 0.92);
  border-bottom: 1px solid var(--line);
}
.site-header .brand { background-image: url('/assets/wordmark-dark.png'); }
.nav a { color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
.header-cta { background: var(--ink); border-color: var(--ink); color: #fff; }
.header-cta:hover { background: var(--accent); border-color: var(--accent); }
.nav-toggle { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.nav-toggle:hover { background: var(--bg-elev-2); }
.nav-drawer-overlay { background: rgba(23, 17, 26, 0.35); }
@media (max-width: 860px) {
  .site-header .nav.nav-drawer { background: rgba(255, 255, 255, 0.98); box-shadow: 0 24px 60px -24px rgba(23, 17, 26, 0.35); }
}

/* ---------- buttons ---------- */
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink-mute); }
.btn-primary { box-shadow: 0 8px 24px -10px rgba(200, 16, 46, 0.45); }

/* ---------- calmer type everywhere ---------- */
h1 em, h2 em, h3 em, .page-title em, .page-section-heading em, .pf-heading em, .pf-hero-title em, .pf-cta-heading em,
.hero-heading em, .section-heading em, .cta-heading em, .form-shell h2 em { color: inherit; font-style: normal; }
.page-title { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; max-width: 24ch; }
.page-section-heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; }
.pf-hero-title { font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.pf-heading { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; line-height: 1.18; letter-spacing: -0.02em; }
.pf-cta-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; }
.hero-heading { font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 700; }
.section-heading { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; }
.cta-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; }
.stats-heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 650; }
.form-shell h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 650; }
.sms-copy h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 650; }
.case-quote { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.home-stat-value, .stat-number { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.case-stat-value, .agg-stat-value { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
.pricing-amount .value { font-size: clamp(3rem, 5vw, 4.2rem); }
.price-value { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.page-eyebrow, .page-section-label { color: var(--accent-light); }
.page-eyebrow .pulse { display: none; }

/* ---------- inner page hero: no glow, no grid ---------- */
.page-hero { border-bottom-color: var(--line); }
.page-hero-glow, .page-hero-grid, .pf-hero-grid, .hero-grid { display: none !important; }

/* ---------- homepage ---------- */
.pf-trust-track { color: rgba(23, 17, 26, 0.62); }
.pf-trust-track span:nth-child(even) { color: rgba(23, 17, 26, 0.35); }
.pf-brand-moment, .pf-product-showcase { background: var(--bg) !important; }
.pf-stats { background: #fff; border-color: var(--line); }
.pf-mini-tag { background: rgba(255, 255, 255, 0.06); }
.pf-cap-mini { background: linear-gradient(180deg, #120c0e, #0a0708); border-radius: 12px; }
.pf-msg-lead { background: rgba(255, 255, 255, 0.06); }
.marquee-outline { -webkit-text-stroke-color: rgba(23, 17, 26, 0.18); }
.align-right .section-inner { background: rgba(255, 255, 255, 0.92); }

/* ---------- forms ---------- */
.form-shell { background: #fff; border-color: var(--line); box-shadow: 0 20px 50px -30px rgba(23, 17, 26, 0.25); }
.form-shell::before { display: none; }
.field input, .field select, .field textarea { background: #fff !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint) !important; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff !important; border-color: var(--accent) !important; }
.field label { color: var(--ink-soft); }

/* ---------- cards and panels used on inner pages ---------- */
.phase-card, .case-card, .agg-stat, .pricing-card, .price-card, .faq-item, .cap-card, .op-card {
  background: #fff;
  border-color: var(--line);
}
.phase-card:hover { border-color: rgba(200, 16, 46, 0.35); }
.phase-card-quote { background: rgba(200, 16, 46, 0.05); }

/* ---------- comparison components (compare.css literals) ---------- */
.cmp-table th, .cmp-table td { border-top-color: var(--line); }
.cmp-table th { color: var(--ink-mute); }
.cmp-table td { color: var(--ink-soft); }
.cmp-table td:first-child { color: var(--ink-mute); }
.cmp-table .is-us { color: var(--ink); }
.cmp-table tr:last-child td { border-bottom-color: var(--line); }
.cmp-card { border-color: var(--line); background: #fff; }
.cmp-card p { color: var(--ink-mute); }
.cmp-list li { border-top-color: var(--line); color: var(--ink-soft); }
.cmp-list li b { color: var(--ink); }
.cmp-note { color: var(--ink-faint); }
.cmp-note a { color: var(--ink-mute); }
.cmp-verdict { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.cmp-verdict p { color: var(--ink-soft); }
.cmp-faq details { border-top-color: var(--line); }
.cmp-faq details:last-child { border-bottom-color: var(--line); }
.cmp-faq p { color: var(--ink-mute); }
.cmp-prose { color: var(--ink-soft); }
.cmp-related a { color: var(--ink-mute); }
.cmp-related a:hover { color: var(--ink); }
a[style*="255,255,255"] { color: var(--ink) !important; }

/* ---------- panels that used translucent black: make them white cards ---------- */
.case-stats, .contact-tile, .pf-cap-card, .quote-card-home, .pricing-card-home, .how-step, .quote-card,
.price-toggle, .tier, .compare-card, .guarantee-card, .calc-card, .features-card, .sticky-price-bar,
.checkout-form-card, .checkout-summary, .refund-tier, .signup-form, .what-youll-get, .meta-row span,
.platform, .stop-card, .contact-card {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 2px rgba(23, 17, 26, 0.04);
}
.compare-cell, .cycle-card, .refund-agree, .refund-math, .sample-msg, .calc-disclaimer, .calc-preset, .tier-cta.ghost {
  background: var(--bg-elev-2) !important; border-color: var(--line) !important;
}
body.checkout-page { background: var(--bg) !important; }
.checkout-field input, .checkout-field select, #checkout-units-input, .field input[type="email"] {
  background: #fff !important; color: var(--ink) !important; border-color: var(--line-strong) !important;
}
.checkout-submit.is-disabled, .checkout-submit.is-disabled:hover { background: var(--bg-elev-2) !important; color: var(--ink-mute) !important; }
.compare-savings strong, .calc-savings-value { color: var(--ink) !important; }
.calc-slider { background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--pct, 7%), #DDD7D9 var(--pct, 7%), #DDD7D9 100%) !important; }
.calc-slider::-webkit-slider-thumb, .calc-slider::-moz-range-thumb { box-shadow: 0 2px 8px rgba(23, 17, 26, 0.3); }
.calc-vs-row .calc-vs-leases { border-top-color: var(--line) !important; }
#calc-units:hover { background: var(--bg-elev-2) !important; }
.checkout-consent a { text-decoration-color: var(--line-strong) !important; }
.form-status.error { color: #B0102A !important; }
.form-status.success { color: #16794A !important; }
.disclosure-quote::before { background: var(--bg) !important; }
.price-toggle button { color: var(--ink-mute); }
.price-toggle button.is-active { color: #fff; }
.pf-cap-card .pf-cap-mini { border: 1px solid rgba(255, 255, 255, 0.06); }