/* GutIQ premium design system — the CEREBRA aesthetic as reusable classes.
   Opt-in: wrap a page's content in .pm and use .pm-* components. Scoped so it
   never touches the marketing pages that don't opt in. */
/* Tokens on :root so .pm-* components work anywhere, even sprinkled into
   existing pages without a full .pm wrapper. */
:root {
  --g:#2D7A5F; --g2:#1F5C46; --ink:#0C0C0C; --cream:#FBFAF6; --bd:#E5E2DC; --bd2:#ECE8DF;
  --mut:#7A6E5A; --warm:#4A4231; --gold:#D4A853; --lite:#F8F7F4;
  --serif:'DM Serif Display',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif;
}
.pm { font-family:var(--sans); color:var(--ink); }
.pm *{ box-sizing:border-box; }

/* typography */
.pm-eyebrow{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--g2); }
.pm-h1{ font-family:var(--serif); font-weight:400; font-size:2.5rem; line-height:1.06; letter-spacing:.005em; color:var(--ink); }
.pm-h2{ font-family:var(--serif); font-weight:400; font-size:1.6rem; line-height:1.1; color:var(--ink); }
.pm-h3{ font-family:var(--serif); font-weight:400; font-size:1.15rem; color:var(--ink); }
.pm-lede{ color:var(--mut); font-size:1rem; line-height:1.65; }
.pm-mut{ color:var(--mut); }
.pm-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }

/* surfaces */
.pm-card{ background:#fff; border:1px solid var(--bd); border-radius:1.1rem; padding:1.75rem; }
.pm-card-soft{ background:var(--cream); border:1px solid var(--bd); border-radius:1rem; padding:1.25rem; }
.pm-hero{ position:relative; overflow:hidden; background:var(--ink); color:var(--lite); border:0; border-radius:1.1rem; padding:2rem; }
.pm-hero::before{ content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(45,122,95,.35) 1px,transparent 1px); background-size:22px 22px; }
.pm-hero > *{ position:relative; }
.pm-hero .pm-eyebrow{ color:var(--gold); }
.pm-hero .pm-h1,.pm-hero .pm-h2{ color:#fff; }

/* controls */
.pm-btn{ display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(135deg,var(--g),var(--g2)); color:#fff; border:0;
  border-radius:.75rem; padding:.7rem 1.35rem; font-family:var(--sans); font-weight:600; font-size:.9rem; cursor:pointer; transition:.15s; text-decoration:none; }
.pm-btn:hover{ box-shadow:0 10px 30px rgba(45,122,95,.32); transform:translateY(-1px); }
.pm-btn:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.pm-btn-ghost{ display:inline-flex; align-items:center; gap:.5rem; background:transparent; color:var(--g2); border:1px solid var(--bd);
  border-radius:.75rem; padding:.7rem 1.35rem; font-weight:600; font-size:.9rem; cursor:pointer; transition:.15s; text-decoration:none; }
.pm-btn-ghost:hover{ border-color:var(--g); background:var(--cream); }
.pm-pill{ font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; padding:.2rem .55rem; border-radius:.4rem;
  background:rgba(45,122,95,.1); color:var(--g2); }
.pm-pill.gold{ background:rgba(212,168,83,.14); color:#94711f; }

/* forms */
.pm-input,.pm-textarea{ width:100%; border:1px solid var(--bd); background:var(--cream); border-radius:.7rem; padding:.7rem .85rem;
  font-family:var(--sans); font-size:.92rem; color:var(--ink); transition:.15s; }
.pm-input:focus,.pm-textarea:focus{ outline:0; border-color:var(--g); box-shadow:0 0 0 4px rgba(45,122,95,.08); }
.pm-field-label{ display:block; font-size:.85rem; font-weight:600; color:var(--warm); margin-bottom:.4rem; }

/* subtle dot-grid page canvas */
.pm-canvas{ background:var(--cream); background-image:radial-gradient(rgba(45,122,95,.045) 1px,transparent 1px); background-size:24px 24px; }