/* Every page outside the app (founders wall, pricing, legal, contact, guides,
   comparisons) in the same glass look as the app. Loaded after each page's own
   styles and its shared "snappy-dark-recipe" block, which it overrides. The
   moving photo grid stays as the background. Local preview only. */

:root {
  --bg: #1b1c20 !important; --text: #f4f5f8 !important; --muted: #a3a8b5 !important;
  --border: rgba(255, 255, 255, 0.09) !important; --bg-inner: rgba(255, 255, 255, 0.06) !important;
  --frost-bg: rgba(36, 38, 46, 0.66) !important; --card: rgba(36, 38, 46, 0.66) !important;
  --frost-border: rgba(255, 255, 255, 0.09) !important; --dark-inner: rgba(255, 255, 255, 0.06) !important;
  --bg-card: rgba(36, 38, 46, 0.66) !important; --teal: #2D7DD2 !important;
}
html body {
  background: #1b1c20 !important; color: var(--text) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  padding-top: 64px !important; padding-bottom: 96px !important;
}
body h1, body h2, body h3, body h4, body p, body li, body a, body button, body input, body textarea, body select, body td, body th, body label, body span, body small {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
#grid-motion-root { z-index: 0 !important; opacity: 0.45 !important; }
@media (min-width: 1100px) { html body { padding-left: 96px !important; padding-bottom: 24px !important; } }

/* The page's own top bar / back link: replaced by the shared glass shell. */
body > header:not(.article-header), body > nav:not(.g-rail):not(.g-tabs), body > .back-link { display: none !important; }

/* Headings and text: the app's palette. */
body h1, body h2, body h3 { color: #f4f5f8 !important; text-shadow: none !important; letter-spacing: -.015em; }
body h1 em, .hero h1 em { color: #5aa2ec !important; font-style: normal; }
body p, body li { color: #d5d8e0; }
body a:not([class]) { color: #6aaef0; }
.updated, .meta, .deck, .lead, .hero p, .card-sub, .rank-meta, .oneoff-note { color: #a3a8b5 !important; }
.eyebrow, .article-header .eyebrow, .hero-eyebrow { color: #6aaef0 !important; text-shadow: none !important; }

/* Text that used to float on the photos now sits on one glass sheet. */
body > .content, body > main, body > article, body > .article, .pricing-header, .article-header {
  position: relative; z-index: 1;
}
body > .content, body > main, body > article {
  background: rgba(36, 38, 46, 0.66) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 26px !important; padding: 28px 30px !important; margin: 22px auto !important; box-sizing: border-box;
  backdrop-filter: blur(28px) saturate(1.3) !important; -webkit-backdrop-filter: blur(28px) saturate(1.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
@media (max-width: 700px) {
  body > .content, body > main, body > article { margin: 14px 12px !important; padding: 20px 18px !important; border-radius: 22px !important; }
}
/* Pricing and the founders wall keep their own cards; their headers get a soft sheet so the words read. */
.pricing-header, .hero {
  background: rgba(30, 31, 37, 0.5); border-radius: 26px; margin: 22px auto 0 !important; max-width: 1080px;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.pricing-header { padding: 28px 20px !important; }
@media (max-width: 1140px) { .pricing-header, .hero { margin-left: 12px !important; margin-right: 12px !important; } }

/* Every card, box and panel: the app's glass. */
.card, .perk, .wall-slot, .counter, .why-row, .highlight, .plan-card, .oneoff-card, .hero-plan-card, .hero-plan-right,
.secondary-cta-strip, .faq-item, .sub-card, .rank-card, .verdict-card, .feat-card, .ai-box, .method-box, .toc, .tldr,
.cta-block, .example-box, .all-plans-panel, .feature-table-wrap, .guide-card, .step, .faq details, details {
  background: rgba(46, 48, 58, 0.62) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(1.3) !important; -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
}
body > .content .highlight, body > article .toc, body > article .tldr, body > article .method-box, body > article .rank-card,
body > article .cta-block, body > main .card { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero-plan-card, .plan-card.gold { border-color: rgba(245, 158, 11, 0.55) !important; }
.plan-card.featured { border-color: #2D7DD2 !important; }

/* Buttons: one blue accent, pill shapes (the gold annual button stays gold). */
.btn-primary, .btn, .cta-btn, .nav-cta, .plan-cta:not(.gold-btn) {
  background: #2D7DD2 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(45, 125, 210, 0.45) !important;
}
.btn-secondary { background: rgba(255, 255, 255, 0.08) !important; color: #f4f5f8 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 999px !important; }

/* Inputs */
input[type="text"], input[type="email"], input[type="search"], textarea, select {
  background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important; color: #f4f5f8 !important;
}

/* Tables (pricing comparison) */
table th, table td { border-color: rgba(255, 255, 255, 0.08) !important; color: #d5d8e0 !important; }
table th { color: #f4f5f8 !important; }

/* Footers: one glass strip, like the app's. */
body > footer, .page-footer {
  position: relative; z-index: 1; max-width: 1080px; margin: 22px auto 0 !important; box-sizing: border-box;
  background: rgba(30, 31, 37, 0.62) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important; padding: 20px 24px !important; color: #a3a8b5 !important;
  backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important;
}
body > footer a, .page-footer a { color: #c9cdd6 !important; }
body > footer a:hover, .page-footer a:hover { color: #fff !important; }
@media (max-width: 1140px) { body > footer, .page-footer { margin-left: 12px !important; margin-right: 12px !important; } }

/* Pricing on phones: fixes a sideways scroll that is also on the live site. */
.pricing-wrap { box-sizing: border-box; max-width: min(900px, 100%) !important; }
@media (max-width: 700px) { .hero-plan-grid { grid-template-columns: minmax(0, 1fr) !important; } .hero-plan-grid > * { min-width: 0; } }

/* Founders wall: every section gets the same soft sheet as its hero, so the
   headings read over the moving photos. */
.perks, .wall, .why, body > section {
  position: relative; z-index: 1; box-sizing: border-box; max-width: 1080px;
  background: rgba(30, 31, 37, 0.5); border-radius: 26px; margin: 22px auto !important; padding: 30px 26px !important;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
@media (max-width: 1140px) { .perks, .wall, .why, body > section { margin-left: 12px !important; margin-right: 12px !important; } }
@media (max-width: 700px) { .perks, .wall, .why, body > section, .hero { padding: 22px 16px !important; } }

/* A page whose main already holds its own cards (contact) doesn't need a second sheet. */
body > main:has(> .stack, > .card) { background: none !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; }
body > main:has(> .stack, > .card) .card { background: rgba(36, 38, 46, 0.66) !important; backdrop-filter: blur(28px) saturate(1.3) !important; -webkit-backdrop-filter: blur(28px) saturate(1.3) !important; }