/* WebMeteor — shared stylesheet
   Two page templates live on this site:
   1. Bootstrap pages (home, about, features, pricing, contact) — unscoped,
      relies on the Bootstrap CDN stylesheet already loaded on those pages.
   2. "Graphite" pages (terms, privacy, refund, grievance, support, company,
      404) — a self-hosted, font-face-based template. All Graphite rules are
      scoped under body.gx-page so they never leak onto the Bootstrap pages.
*/

/* ============================================================
   1. Bootstrap-page shared styles
   ============================================================ */
body{color:#1a1a2e}
.wm-hero{background:linear-gradient(135deg,#e8f4fd 0%,#f0f9ff 100%)}
.wm-demo-card{background:#fff}
.wm-dot{width:12px;height:12px;display:inline-block}
.wm-byo-banner{background:#fff3cd;border-bottom:1px solid #ffe69c}
.wm-byo-link{font-weight:600}
.legal-foot{border-top:1px solid #e5e5e5;margin-top:3rem;padding-top:1.5rem;font-size:.9rem;color:#555}
.legal-foot a{color:#0d6efd}
.legal-nav a{margin-right:1rem}
.legal-wrap{max-width:880px;margin:0 auto;padding:0 1rem}
.legal-wrap.py-page{padding:2rem 1rem 3rem}
.legal-wrap h1{margin-bottom:.25rem}
.legal-wrap h2{margin-top:2rem;font-size:1.35rem}
details{margin-bottom:.75rem;background:#fff;border:1px solid #e5e5e5;border-radius:.5rem;padding:.75rem 1rem}
details summary{font-weight:600;cursor:pointer}
details p{margin-top:.5rem;color:#555}
address{font-style:normal}

/* ============================================================
   2. Graphite-page shared styles (body.gx-page)
   ============================================================ */
@font-face{font-family:'IBM Plex Sans';font-weight:400 700;font-display:swap;src:url('/assets/fonts/ibm-plex-sans.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500 700;font-display:swap;src:url('/assets/fonts/space-grotesk.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400 600;font-display:swap;src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2')}
:root{
  --g-bg:#f6f7f9;--g-surface:#ffffff;--g-border:#e3e6ea;--g-text:#12161c;--g-text-2:#5b6572;--g-text-3:#8b95a3;
  --g-accent:#4f46e5;--font-ui:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Space Grotesk',var(--font-ui);--font-mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root{--g-bg:#0c0e12;--g-surface:#14171d;--g-border:#242932;--g-text:#e7eaef;--g-text-2:#9aa4b2;--g-text-3:#6b7482;--g-accent:#7c74ff}}
body.gx-page{margin:0;font-family:var(--font-ui);color:var(--g-text);background:var(--g-bg);line-height:1.6}
body.gx-page a{color:var(--g-accent)}
body.gx-page .topbar{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.25rem;background:var(--g-surface);border-bottom:1px solid var(--g-border)}
body.gx-page .topbar .brand{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--g-text);text-decoration:none}
body.gx-page .wrap{max-width:860px;margin:0 auto;padding:2.5rem 1.25rem 3rem}
body.gx-page h1{font-family:var(--font-display);font-size:2rem;margin:0 0 .35rem}
body.gx-page h2{font-family:var(--font-display);font-size:1.3rem;margin:2.2rem 0 .6rem}
body.gx-page .meta{color:var(--g-text-3);font-size:.85rem;font-family:var(--font-mono);margin-bottom:1.5rem}
body.gx-page ul{padding-left:1.25rem}
body.gx-page li{margin-bottom:.5rem}
body.gx-page address{font-style:normal;color:var(--g-text-2)}
body.gx-page .callout{background:var(--g-surface);border:1px solid var(--g-border);border-left:3px solid var(--g-accent);border-radius:10px;padding:1rem 1.25rem;margin:1rem 0}
body.gx-page footer{background:#0c0e12;color:#c4ccd6;padding:2.75rem 1.25rem 1.75rem;margin-top:2rem}
body.gx-page .foot-inner{max-width:1080px;margin:0 auto}
body.gx-page .foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1.75rem}
body.gx-page .foot-brand b{font-family:var(--font-display);font-size:1.05rem;color:#fff}
body.gx-page .foot-tag{font-size:.85rem;color:#8b95a3;line-height:1.6;max-width:280px;margin-top:.5rem}
body.gx-page footer h6{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:#6b7482;margin:0 0 .75rem;font-weight:600}
body.gx-page footer ul{list-style:none;padding:0;margin:0}
body.gx-page footer li{margin-bottom:.5rem}
body.gx-page footer a{color:#c4ccd6;text-decoration:none;font-size:.88rem}
body.gx-page footer a:hover{color:#fff}
body.gx-page .foot-rule{border:0;border-top:1px solid #242932;margin:1.75rem 0 1rem}
body.gx-page .foot-tm{font-size:.75rem;color:#6b7482;line-height:1.6;margin-bottom:.9rem}
body.gx-page .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:#8b95a3}
@media (max-width:720px){body.gx-page .foot-cols{grid-template-columns:1fr 1fr}}

/* 404-only additions */
body.gx-page .code{font-family:var(--font-mono);font-size:.9rem;color:var(--g-text-3);letter-spacing:.08em;margin-bottom:.75rem}
body.gx-page .wrap.wrap-center{max-width:640px;padding:5rem 1.25rem 5rem;text-align:center}
body.gx-page p.lead{color:var(--g-text-2);margin:0 0 2rem}
body.gx-page .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
body.gx-page .btn{display:inline-block;padding:.65rem 1.4rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.92rem}
body.gx-page .btn-primary{background:var(--g-accent);color:#fff}
body.gx-page .btn-secondary{background:var(--g-surface);color:var(--g-text);border:1px solid var(--g-border)}
body.gx-page .links{color:var(--g-text-3);font-size:.88rem}
body.gx-page .links a{color:var(--g-text-2);margin:0 .5rem}