/* ===========================================================
   FirstRing design system — 2026 refresh
   Loaded AFTER each page's own <style> block so it wins.
   Every page themes off the same custom properties, so
   redefining them here converts the bulk of each page.
   =========================================================== */

:root,
html body {
  /* surfaces */
  --bg:       #ffffff;
  --surface:  #f7f8f9;
  --card:     #ffffff;
  --border:   #e3e6ea;

  /* ink */
  --text:     #14181f;
  --muted:    #5b636f;

  /* accents — one, used sparingly */
  --accent:   #00647a;
  --accent-dk:#004d5e;
  --accent2:  #b8451a;
  --green:    #15803d;

  /* six-step type scale, nothing between */
  --t1: 0.875rem;
  --t2: 1rem;
  --t3: 1.1875rem;
  --t4: 1.5rem;
  --t5: 2rem;
  --t6: 2.875rem;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
html body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: var(--t2);
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4,
body .logo, body .pain-title, body .step-title,
body .feature-text strong, body .btn-primary, body .btn-nav,
body .stat-num, body .price, body .plan-name, body .faq-q {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
}

body h1 { font-size: var(--t6) !important; line-height: 1.1 !important; }
body h2 { font-size: var(--t5) !important; line-height: 1.2 !important; }
body h3 { font-size: var(--t3) !important; line-height: 1.35 !important; }

/* accent words inside headings: keep emphasis, drop the neon */
body h1 span, body h2 span, body h3 span { color: var(--accent) !important; }

body p, body li, body .hero-sub, body .section-sub,
body .pain-desc, body .step-desc, body .feature-text {
  font-family: var(--sans) !important;
}

body a { color: var(--accent); }

/* ---------- navigation ---------- */
body nav {
  background: #fff !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  gap: 2rem !important;
  padding: 1rem 5% !important;
}
body nav .logo {
  color: var(--text) !important;
  font-size: var(--t3) !important;
  font-weight: 600 !important;
  white-space: nowrap;       /* fixes the logo/nav collision */
  flex-shrink: 0;
  margin-right: auto;
}
body nav .logo span { color: var(--text) !important; }
body .nav-links {
  display: flex;
  align-items: center;
  gap: 1.35rem !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
body .nav-links a {
  color: var(--muted) !important;
  font-size: var(--t1) !important;
  text-decoration: none;
  white-space: nowrap;
}
body .nav-links a:hover { color: var(--text) !important; }
body .btn-nav {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-size: var(--t1) !important;
  padding: 0.6rem 1.15rem !important;
  box-shadow: none !important;
}
body .btn-nav:hover { background: var(--accent-dk) !important; }

body .mobile-menu { background: #fff !important; border-color: var(--border) !important; }
body .mobile-menu a { color: var(--text) !important; }
body .hamburger span { background: var(--text) !important; }

/* ---------- buttons ---------- */
body .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: var(--t2) !important;
  padding: 0.85rem 1.6rem !important;
  border: 1px solid transparent !important;
}
body .btn-primary:hover { background: var(--accent-dk) !important; transform: none !important; }
body .btn-secondary {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid #cfd4da !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.6rem !important;
}
body .btn-secondary:hover { border-color: var(--muted) !important; }

/* ---------- layout: left-align, the biggest single tell ---------- */
/* .hero is a centred flex column, so text-align alone does nothing */
body .hero, body .section, body .section-head, body .cta-section {
  text-align: left !important;
  align-items: flex-start !important;
  min-height: auto !important;
}
body .hero {
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 7rem 5% 4rem !important;
}
body .hero h1, body .hero .hero-sub, body .hero .badge { max-width: 660px; }
body .trust-bar { justify-content: flex-start !important; }
body .hero-sub, body .section-sub {
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: var(--muted) !important;
  font-size: var(--t3) !important;
}
body .cta-group { justify-content: flex-start !important; }

/* ---------- badges / eyebrows: no pills ---------- */
body .industry-badge, body .section-label, body .badge, body .pill,
body .section-tag, body .eyebrow, body .label {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0.35rem 0 !important;
  color: var(--muted) !important;
  font-size: var(--t1) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

/* ---------- cards & panels ---------- */
body .pain-card, body .feature-item, body .how-it-works,
body .plan, body .pricing-card, body .faq-item, body .card,
body .step, body .transcript, body .stat-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  background-image: none !important;
}
body .pain-title, body .step-title { font-size: var(--t3) !important; }
body .pain-desc, body .step-desc, body .feature-text {
  color: var(--muted) !important;
  font-size: var(--t2) !important;
}
body .feature-text strong { color: var(--text) !important; font-size: var(--t2) !important; }
body .feature-check { color: var(--accent) !important; }
body .step-num {
  background: none !important;
  color: var(--accent) !important;
  font-family: var(--serif) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---------- FAQ ---------- */
body .faq-q { font-size: var(--t2) !important; color: var(--text) !important; }
body .faq-a { color: var(--muted) !important; }

/* ---------- pricing ---------- */
body .price, body .plan-price { color: var(--text) !important; font-size: var(--t5) !important; }
body .plan.featured, body .pricing-card.featured {
  border-color: var(--accent) !important;
  border-width: 1.5px !important;
}

/* ---------- chat / transcript demo ---------- */
body .msg-bubble { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
body .msg-avatar { background: var(--accent) !important; color: #fff !important; }
body .msg-name { color: var(--muted) !important; }

/* ---------- forms ---------- */
body input, body textarea, body select {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid #cfd4da !important;
  border-radius: 5px !important;
  font-family: var(--sans) !important;
}
body input:focus, body textarea:focus, body select:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: -1px;
  border-color: var(--accent) !important;
}
body label, body .field label { color: var(--text) !important; }

/* ---------- kill the dark-theme decorations ---------- */
body [style*="linear-gradient"],
body .hero::before, body .hero::after,
body .glow, body .orb, body .gradient-bg {
  background-image: none !important;
}
body * { text-shadow: none !important; }

/* the fake-scarcity bar */
body #scarcity-bar, body .scarcity-bar, body .announcement-bar { display: none !important; }

/* ---------- footer ---------- */
body footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
body footer a { color: var(--muted) !important; text-decoration: none; }
body footer a:hover { color: var(--text) !important; }

/* ---------- blog / long-form ---------- */
body article, body .post, body .post-body { color: var(--text) !important; }
body article p, body .post-body p { font-size: var(--t3) !important; line-height: 1.7 !important; }
body blockquote {
  border-left: 3px solid var(--accent) !important;
  background: none !important;
  color: var(--text) !important;
  padding-left: 1.25rem !important;
}
body code, body pre { background: var(--surface) !important; color: var(--text) !important; }

/* ---------- trust bar: the checkmark row is a classic tell ---------- */
body .trust-bar {
  gap: 1.75rem !important;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem !important;
  margin-top: 2rem !important;
  max-width: 660px;
}
body .trust-item { color: var(--muted) !important; font-size: var(--t1) !important; }
body .trust-item .check, body .check { color: var(--accent) !important; }

/* accent spans used for highlighted words */
body .highlight, body .highlight2 { color: var(--accent) !important; background: none !important; }

/* stats */
body .stat { align-items: flex-start !important; text-align: left !important; }
body .stat-num, body .stat b {
  font-family: var(--serif) !important;
  color: var(--text) !important;
  font-size: var(--t5) !important;
}

/* no horizontal overflow anywhere */
html, body { overflow-x: hidden !important; max-width: 100vw; }
body img, body svg, body iframe { max-width: 100%; height: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  body .nav-links { display: none !important; }
  body nav .hamburger { display: flex !important; }
}
@media (max-width: 860px) {
  :root, html body { --t6: 2.125rem; --t5: 1.625rem; --t4: 1.3125rem; --t3: 1.0625rem; }
  body nav { gap: 1rem !important; padding: 0.85rem 5% !important; }
  body .hero { padding: 5.5rem 5% 3rem !important; }
  body .trust-bar { gap: 0.75rem 1.25rem !important; flex-wrap: wrap; }
}