/* Extensions Market — shared premium layer (v1)
   Loaded AFTER each page's inline <style>, so equal-specificity rules here win.
   Uses only tokens every page defines: --bg, --surface, --border, --text, --muted. */

@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root { --pm-ease: cubic-bezier(.22,1,.36,1); }

/* ---- display type ---- */
h1, h2, .step-num {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ---- gradient-border glass cards (neutral, keeps each page's accents) ---- */
.feature-card, .rt-card, .ext-card {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03)) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.3);
}
.feature-card, .rt-card, .ext-card, .pricing-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.feature-card:hover, .rt-card:hover, .ext-card:hover, .pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px rgba(0,0,0,.42);
}

/* ---- buttons: lift polish only, colors stay per-page ---- */
.btn-primary, .nav-cta { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease; }
.btn-primary:hover, .nav-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary:active, .nav-cta:active { transform: translateY(0); }

/* ---- JS-injected hero backdrop (aurora + grid) ---- */
.pm-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pm-bg::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 440px at 80% 10%, var(--pm-a1, rgba(255,255,255,.05)), transparent 62%),
              radial-gradient(600px 420px at 8% 90%, var(--pm-a2, rgba(255,255,255,.035)), transparent 62%); }
.pm-bg::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 55% 12%, #000 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 70% at 55% 12%, #000 18%, transparent 72%); }
.hero { position: relative; }
.hero > *:not(.pm-bg) { position: relative; z-index: 3; }

/* ---- scroll reveal (gated: no-JS / crawlers / reduced-motion see everything) ---- */
html.pm-js .pm-r { opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--pm-ease), transform .6s var(--pm-ease); transition-delay: var(--pm-d, 0ms); }
html.pm-js .pm-r.pm-in { opacity: 1; transform: none; }

/* ---- mobile fixes for pre-existing overflow (comparison tables, nav, blog grid) ---- */
@media (max-width: 700px) {
  .comp-table, .vs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Product pages use the legacy inline nav (.nav-center of links, .nav-about).
   The homepage's new mega-menu nav owns its own mobile rules inline (burger at
   860px). Both want .nav-center hidden on phones, so this shared rule serves both. */
@media (max-width: 640px) {
  nav { padding-left: 14px; padding-right: 14px; }
  .nav-links, .nav-center { display: none; }
  .nav-cta { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .nav-right { gap: 10px; }
  .nav-about { font-size: 13px; }
}
/* homepage blog grid: base repeat(4,1fr) rule sits after its own media queries and
   always wins there — re-assert the responsive intent from this later stylesheet */
@media (max-width: 900px) { .blog-preview-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-preview-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .pm-bg::before, .pm-bg::after { display: none; }
  html.pm-js .pm-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .feature-card, .rt-card, .ext-card, .pricing-card, .btn-primary, .nav-cta { transition: none !important; }
  .feature-card:hover, .rt-card:hover, .ext-card:hover, .pricing-card:hover { transform: none; }
}