@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
:root{--paper:#131313!important;--paper-alt:#1a1a1a!important;--surface:rgba(255,255,255,0.04)!important;--surface-2:rgba(255,255,255,0.06)!important;--ink:#f3f3f3!important;--ink-soft:rgba(243,243,243,0.78)!important;--muted:rgba(243,243,243,0.60)!important;--line:rgba(255,255,255,0.10)!important;--line-strong:rgba(255,255,255,0.18)!important;--accent:#00dbe7!important;--accent-strong:#d0bcff!important;--accent-soft:rgba(0,219,231,0.10)!important;--green:#6ee7b7!important;--amber:#ffd166!important;--red:#ff6b8b!important;--font-body:"Space Grotesk",system-ui,sans-serif!important;--font-display:"Space Grotesk",system-ui,sans-serif!important;--max:1180px!important;--liquid:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important}
body{background:#131313!important;color:#f3f3f3!important;font-family:"Space Grotesk",system-ui,sans-serif!important}
.brand-mark{background:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important;border:0!important;color:#131313!important;font-weight:800!important;letter-spacing:0!important;border-radius:10px!important}
.site-header{background:rgba(19,19,19,0.78)!important;border-bottom:1px solid rgba(255,255,255,0.10)!important}
.button-primary{background:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important;border-color:transparent!important;color:#131313!important}
.card,.panel,.review-card,.top-card,.category-card,.audience-card,.step-card,.pick-card{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.10)!important;border-radius:16px!important;color:#f3f3f3!important}
.card p,.review-card p,.audience-card p,.step-card p{color:rgba(243,243,243,0.78)!important}
.eyebrow,.tier-badge,.status-badge,.card-eyebrow{color:#00dbe7!important;font-family:"JetBrains Mono",monospace!important}
input,select,textarea{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.10)!important;color:#f3f3f3!important;border-radius:12px}
.newsletter,.newsletter-inline{display:block!important;max-width:1180px!important;margin:48px auto!important;padding:36px clamp(20px,4vw,48px)!important;background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.10)!important;border-radius:24px!important}
.newsletter h2,.newsletter-inline h2{color:#f3f3f3!important;font-family:"Space Grotesk",system-ui,sans-serif!important;font-weight:700!important}
.newsletter p,.newsletter-inline p{color:rgba(243,243,243,0.78)!important}
.newsletter-form,.newsletter form{display:grid!important;grid-template-columns:1fr auto!important;gap:12px!important;margin-top:16px!important}
.newsletter-form input[type="email"],.newsletter form input[type="email"]{border-radius:999px!important;min-height:48px!important}
.newsletter-form button[type="submit"],.newsletter form button[type="submit"]{background:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important;color:#131313!important;border:0!important;border-radius:999px!important;font-weight:700!important;min-height:48px!important;padding:0 22px!important;cursor:pointer!important}
.footer,.site-footer{background:#1a1a1a!important;color:rgba(243,243,243,0.78)!important;border-top:1px solid rgba(255,255,255,0.10)!important;padding:48px 0 32px!important}
.footer-grid{display:flex!important;flex-direction:column!important;gap:28px!important}
@media(min-width:720px){.footer-grid{flex-direction:row!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:40px 56px!important}}
.footer strong,.site-footer strong{color:#f3f3f3!important;font-size:1.3rem!important;font-weight:700!important;display:block!important;margin-bottom:6px!important}
.footer-links,.site-footer nav.footer-links,.site-footer nav{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:18px 24px!important}
.footer-links a,.site-footer nav a{color:rgba(243,243,243,0.78)!important;border-bottom:0!important;text-decoration:none!important;white-space:nowrap!important}
.footer-links a:hover,.site-footer nav a:hover{color:#00dbe7!important}
p.footer-contact::before{content:"Questions? Disputes?"!important;display:block!important;color:rgba(243,243,243,0.60)!important;font-family:"JetBrains Mono",monospace!important;font-size:0.7rem!important;letter-spacing:0.14em!important;text-transform:uppercase!important;margin-bottom:4px!important}
.footer-contact a{color:#00dbe7!important;font-weight:600!important}
.badge-page .accent-card,.badge-page .accent-card h3,.badge-page .accent-card p,.badge-page .accent-card li,.badge-page .price-line,.badge-page .price-line strong,.badge-page .accent-card .price-note{color:#f3f3f3!important}
.badge-page .accent-card .plan-label{color:#00dbe7!important}
.badge-page .price-line span{color:rgba(243,243,243,0.78)!important}
.badge-page .dark-button{background:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important;color:#131313!important;font-weight:700!important;border:0!important;text-decoration:none!important}
.badge-page .dark-button:hover{background:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important;color:#131313!important;opacity:0.92}
.badge-page .hero-panel,.badge-page .problem-card,.badge-page .step-card,.badge-page .faq-card,.badge-page .checkout-card,.badge-page .embed-card{background:rgba(255,255,255,0.04)!important;color:#f3f3f3!important;border-color:rgba(255,255,255,0.10)!important}
.badge-page .hero-panel h1,.badge-page .hero-panel h2,.badge-page .hero-panel h3,.badge-page .problem-card h3,.badge-page .step-card h3,.badge-page .faq-card h3,.badge-page .embed-card h3{color:#f3f3f3!important}
.badge-page .hero-panel p,.badge-page .problem-card p,.badge-page .step-card p,.badge-page .faq-card p{color:rgba(243,243,243,0.78)!important}
.integrations-page .cta-card{background:rgba(255,255,255,0.04)!important;color:#f3f3f3!important;border:1px solid rgba(255,255,255,0.10)!important;border-radius:16px!important}
.integrations-page .cta-card h3{color:#f3f3f3!important}
.integrations-page .cta-card p{color:rgba(243,243,243,0.78)!important}
.integrations-page .cta-card .button-primary{background:linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important;color:#131313!important;border:0!important}
*[style*="background:#fff"],*[style*="background: #fff"],*[style*="background:#ffffff"],*[style*="background:white"]{background:rgba(255,255,255,0.04)!important}
*[style*="color:#1a1a1a"],*[style*="color:#17202a"],*[style*="color:#0b141f"]{color:#f3f3f3!important}
*[style*="color:#374151"],*[style*="color:#6b7280"]{color:rgba(243,243,243,0.78)!important}
svg text[fill="#1a1a1a"]{fill:#f3f3f3!important}
svg path[stroke="#3d7bb5"]{stroke:#00dbe7!important}
section table{background:rgba(255,255,255,0.04)!important;border-color:rgba(255,255,255,0.10)!important}
section table td{color:#f3f3f3!important;border-color:rgba(255,255,255,0.10)!important}
section table th{color:rgba(243,243,243,0.78)!important;background:rgba(255,255,255,0.06)!important}

/* Reviews view-toggle bug — page CSS sets `.review-grid-wrap { display: grid }`
   at specificity (0,2,0), which beats the UA stylesheet's `[hidden]{display:none}`
   at (0,1,0). Result: clicking "Compact" leaves the cards visible. Force
   the `hidden` attribute to win on these wrappers. */
.reviews-page .review-grid-wrap[hidden],
.reviews-page .review-table-wrap[hidden],
.reviews-page [data-review-cards][hidden],
.reviews-page [data-review-table][hidden] { display: none !important; }

/* Component-level dark overrides — 2026-05-13.
   Generator templates emit inline light-mode CSS in <style> blocks (~3,271
   declarations across 1,609 pages). Mass-rewriting the generators is out of
   scope for this fix; instead, override the known semantic selectors here so
   they render dark while preserving tier meaning (amber=warn, red=fail). */

/* Compare verdict pills (1,556 compare pages) */
.cmp-verdict-pass { background: rgba(110,231,183,0.12)!important; color:#6ee7b7!important; border:1px solid rgba(255,255,255,0.10)!important }
.cmp-verdict-partial_pass { background: rgba(255,209,102,0.12)!important; color:#ffd166!important; border:1px solid rgba(255,255,255,0.10)!important }
.cmp-verdict-fail { background: rgba(255,107,139,0.12)!important; color:#ff6b8b!important; border:1px solid rgba(255,255,255,0.10)!important }

/* Best-of vertical-page cards + tier pills (38 best pages) */
.vertical-page .vp-card { background: rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.10)!important; color:#f3f3f3!important }
.vertical-page .vp-card * { color: inherit }
.vp-tier-vital { background: rgba(110,231,183,0.14)!important; color:#6ee7b7!important }
.vp-tier-steady { background: rgba(0,219,231,0.14)!important; color:#00dbe7!important }
.vp-tier-fading { background: rgba(255,209,102,0.14)!important; color:#ffd166!important }
.vp-tier-flatline { background: rgba(255,107,139,0.14)!important; color:#ff6b8b!important }

/* Incident severity */
.sev-low { background: rgba(0,219,231,0.12)!important; color:#00dbe7!important }
.sev-medium { background: rgba(255,209,102,0.12)!important; color:#ffd166!important }
.sev-high { background: rgba(255,154,71,0.14)!important; color:#ffb27a!important }
.sev-critical { background: rgba(255,107,139,0.16)!important; color:#ff6b8b!important }

/* Banners + watchlists + flagged review markers */
.private-beta-banner { background: rgba(255,209,102,0.10)!important; border-left-color:#ffd166!important; color:#f3f3f3!important }
.disclosure { background: rgba(255,209,102,0.10)!important; border-left-color:#ffd166!important; color:#f3f3f3!important }
.vendor-banner { background: rgba(255,209,102,0.10)!important; border:1px solid rgba(255,209,102,0.30)!important; color:#ffd166!important }
.vendor-warn { background: rgba(255,209,102,0.10)!important; border-left-color:#ffd166!important; color:#f3f3f3!important }
.review-card .flagged-banner { background: rgba(255,209,102,0.10)!important; color:#ffd166!important }
.wl-form { background: rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.10)!important; color:#f3f3f3!important }
.wl-form input, .wl-form textarea, .wl-form select { background: rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.10)!important; color:#f3f3f3!important }

/* Form inputs across login/submit/claim/playground */
.login-form input, .submit-form input, .submit-form textarea, .claim-form input, .pg-tool input, .pg-tool select {
  background: rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.14)!important; color:#f3f3f3!important; border-radius:8px!important
}
.login-form input::placeholder, .submit-form input::placeholder, .submit-form textarea::placeholder, .claim-form input::placeholder, .pg-tool input::placeholder {
  color: rgba(243,243,243,0.48)!important
}

/* Error states (red on dark) */
.login-status.error, .login-error-banner, .submit-status.error, .claim-status.error, .submit-result.error {
  background: rgba(255,107,139,0.10)!important; border-color: rgba(255,107,139,0.40)!important; color:#ff6b8b!important
}

/* Homepage tiles that hardcode #fff */
.use-case-tile,
.home-step-card { background: rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.10)!important; color:#f3f3f3!important }
.home-step-card h3, .use-case-tile h3 { color:#f3f3f3!important }
.home-step-card p, .use-case-tile p { color: rgba(243,243,243,0.78)!important }
.scorecard-preview { background: rgba(255,255,255,0.04)!important; border:1px solid rgba(255,255,255,0.10)!important; color:#f3f3f3!important }

/* Homepage scorecard summary panel has hardcoded #0b141f bg; let it stay (it's already dark) but ensure text is readable */
.scorecard-summary { background: #0b141f!important; color: #f6fbff!important }
.scorecard-summary h3 { color: #f6fbff!important }
.scorecard-summary p { color: rgba(232,238,245,0.82)!important }

/* Homepage problem-copy paragraph color (set to #2a3542 on light) */
.story-section p, .story-section .problem-copy p { color: rgba(243,243,243,0.78)!important }
.story-section.alt { background: rgba(255,255,255,0.02)!important }

/* Hover variants in scoped pages */
.badge-page .dark-button:hover { background: linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important; color:#131313!important; opacity:0.92!important }
.gate-page .cta-card .button-primary:hover { background: linear-gradient(135deg,#00dbe7 0%,#d0bcff 100%)!important; color:#131313!important; opacity:0.92!important }

/* Catch additional inline-background patterns not covered above */
*[style*="background:#fff"], *[style*="background: #fff"], *[style*="background:#ffffff"], *[style*="background: #ffffff"], *[style*="background:white"], *[style*="background: white"] {
  background: rgba(255,255,255,0.04)!important
}
*[style*="border:1px solid rgba(0,0,0,0.2)"], *[style*="border: 1px solid rgba(0,0,0,0.2)"] {
  border-color: rgba(255,255,255,0.14)!important
}

/* mobile overflow fix 2026-06-02: the .newsletter / .newsletter-inline rule
   above uses max-width:1180px + margin:48px auto with no explicit width, so on
   a narrow flex container the card sizes to max-content (~407px) and overflows
   the viewport by ~33px. Pin it to full container width on small screens. */
@media(max-width:760px){
  .newsletter, .newsletter-inline {
    width: 100%!important;
    max-width: 100%!important;
    margin: 32px 0!important;
  }
  /* stack the email+button form so the 1fr-auto row can't overflow the
     now-constrained card (theme-dark forces 1fr auto !important above). */
  .newsletter-form, .newsletter form {
    grid-template-columns: 1fr!important;
  }
}