/* ══════════════════════════════════════════════════════════════════════
   proqal-pro.css — v4.5.0
   Marketing pages — professional palette override.
   Loaded AFTER proqal-v2.css so it wins. Neutralises the purple/cyan
   "playful SaaS" colors into a refined deep-green + charcoal palette.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Refined palette — deep green primary, charcoal text, cream backgrounds */
  --pro-green:    #0f5132;
  --pro-green-d:  #093422;
  --pro-green-l:  #198754;
  --pro-charcoal: #1a2433;
  --pro-slate:    #2b3849;
  --pro-muted:    #5d6b7f;
  --pro-cream:    #faf9f6;
  --pro-paper:    #ffffff;
  --pro-border:   #e7e3da;
  --pro-gold:     #b8924a;
}

/* ── Body / page background — calm cream, not white-vivid ──────── */
body, html {
  background: var(--pro-cream) !important;
  color: var(--pro-charcoal) !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  letter-spacing: -0.005em;
}

/* ── Site header — minimal, no gradients ──────────────────────── */
.site-hdr {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pro-border) !important;
  box-shadow: none !important;
}
.hdr-logo, .hdr-logo span {
  color: var(--pro-charcoal) !important;
  background: none !important;
  -webkit-text-fill-color: var(--pro-charcoal) !important;
}
.hdr-logo .accent { color: var(--pro-green) !important; -webkit-text-fill-color: var(--pro-green) !important; }
.hdr-nav a {
  color: var(--pro-slate) !important;
  font-weight: 500;
  background: none !important;
}
.hdr-nav a:hover { color: var(--pro-green) !important; }

/* ── Hero — refined, no rainbow gradients ─────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(15, 81, 50, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(184, 146, 74, 0.04) 0%, transparent 50%),
    var(--pro-cream) !important;
}
.hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--pro-charcoal) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
}
.hero h1 .grad, .hero h1 .accent, .hero h1 span {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--pro-green) !important;
  color: var(--pro-green) !important;
  font-style: italic !important;
}
.hero .lead {
  color: var(--pro-muted) !important;
  font-size: 1.08rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  max-width: 640px;
}
.hero-eyebrow {
  background: rgba(15, 81, 50, 0.08) !important;
  color: var(--pro-green) !important;
  border: 1px solid rgba(15, 81, 50, 0.18) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  background: var(--pro-green) !important;
  box-shadow: 0 0 0 4px rgba(15, 81, 50, 0.18) !important;
}

/* ── Buttons — refined, no rainbow gradients ──────────────────── */
.btn, .btn-grad, .btn-ghost, .btn-primary, .btn-xl, .signin-submit {
  font-family: inherit !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  border-radius: 8px !important;
}
.btn-grad, .btn-primary {
  background: var(--pro-green) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px rgba(15, 81, 50, 0.20) !important;
}
.btn-grad:hover, .btn-primary:hover {
  background: var(--pro-green-d) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 22px rgba(15, 81, 50, 0.30) !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--pro-charcoal) !important;
  border: 1px solid var(--pro-border) !important;
}
.btn-ghost:hover {
  background: var(--pro-paper) !important;
  border-color: var(--pro-slate) !important;
  color: var(--pro-green) !important;
}

/* ── Sign-in modal — refined ──────────────────────────────────── */
.signin-bg {
  background: rgba(26, 36, 51, 0.55) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.signin-card {
  background: var(--pro-paper) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(26, 36, 51, 0.35) !important;
  border: 1px solid var(--pro-border) !important;
  overflow: hidden;
}
.signin-head {
  background: var(--pro-green) !important;
  background-image: linear-gradient(135deg, var(--pro-green), var(--pro-green-d)) !important;
  color: white;
  padding: 22px 28px !important;
}
.signin-head h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: white !important;
}
.signin-head p { color: rgba(255,255,255,0.85) !important; font-size: 0.86rem; }
.signin-close { color: rgba(255,255,255,0.7) !important; }
.signin-close:hover { color: white !important; }
.signin-body {
  padding: 24px 28px !important;
}
.signin-body label { color: var(--pro-slate) !important; font-weight: 500; font-size: 0.86rem; }
.signin-body input {
  border: 1px solid var(--pro-border) !important;
  border-radius: 8px !important;
  background: var(--pro-paper) !important;
  font-family: inherit;
  padding: 10px 14px !important;
}
.signin-body input:focus {
  outline: none !important;
  border-color: var(--pro-green) !important;
  box-shadow: 0 0 0 3px rgba(15, 81, 50, 0.12) !important;
}
.signin-submit {
  background: var(--pro-green) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(15, 81, 50, 0.25) !important;
}
.signin-submit:hover { background: var(--pro-green-d) !important; }
.signin-foot { color: var(--pro-muted) !important; font-size: 0.84rem; padding: 14px 28px !important; }
.signin-foot a { color: var(--pro-green) !important; }
.signin-err {
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}
.signin-loader {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: pro-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes pro-spin { to { transform: rotate(360deg); } }

/* ── Override the purple "Find Workspace" modal too ───────────── */
#findWorkspaceModal .signin-head {
  background: var(--pro-charcoal) !important;
  background-image: linear-gradient(135deg, var(--pro-charcoal), var(--pro-slate)) !important;
}
#findSubmit {
  background: var(--pro-charcoal) !important;
  box-shadow: 0 4px 14px rgba(26, 36, 51, 0.30) !important;
}
#findSubmit:hover { background: var(--pro-slate) !important; }

/* ── Section headings — serif, refined ────────────────────────── */
h1, h2, h3.section-title, .section h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--pro-charcoal) !important;
  letter-spacing: -0.015em !important;
}

/* ── Feature cards, pricing cards, etc — neutralize ───────────── */
.card, .feature-card, .pricing-card, .tier-card {
  background: var(--pro-paper) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(26, 36, 51, 0.04) !important;
  transition: box-shadow 0.18s, transform 0.18s !important;
}
.card:hover, .feature-card:hover, .pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 36, 51, 0.07) !important;
}
.tier-card.featured, .pricing-card.featured {
  border-color: var(--pro-green) !important;
  border-width: 2px !important;
  box-shadow: 0 12px 32px rgba(15, 81, 50, 0.12) !important;
}

/* ── Replace purple/cyan accents wholesale ────────────────────── */
*[style*="#8b5cf6"], *[style*="#7c3aed"], *[style*="#06b6d4"] {
  background-color: var(--pro-green) !important;
  background-image: none !important;
  color: var(--pro-paper) !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer, footer {
  background: var(--pro-charcoal) !important;
  color: rgba(255,255,255,0.7) !important;
}
.footer a, footer a { color: rgba(255,255,255,0.85) !important; }
.footer a:hover, footer a:hover { color: white !important; }

/* ── Subtle refinements ──────────────────────────────────────── */
.container { max-width: 1180px !important; }
section { padding: 64px 0 !important; }
section.hero { padding: 72px 0 64px !important; }

/* ── v4.5.5 chooser modal ───────────────────────────────────────── */
#pqb-chooser-bg {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(26, 36, 51, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pqb-chooser-card {
  background: var(--pro-paper, #fff); width: 100%; max-width: 480px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px -16px rgba(15, 23, 41, 0.4);
  border: 1px solid var(--pro-border, #e7e3da);
  animation: pqb-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.pqb-chooser-head {
  padding: 22px 26px 16px;
  background: linear-gradient(135deg, var(--pro-green, #0f5132), var(--pro-green-d, #093422));
  color: white;
}
.pqb-chooser-head h3 {
  margin: 0 0 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 1.25rem; color: white;
}
.pqb-chooser-head p { margin: 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); }
.pqb-chooser-list { padding: 12px; max-height: 60vh; overflow-y: auto; }
.pqb-chooser-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; margin-bottom: 6px;
  background: var(--pro-paper, #fff); border: 1px solid var(--pro-border, #e7e3da);
  border-radius: 12px; cursor: pointer; text-align: left;
  font-family: inherit; transition: all 0.16s;
}
.pqb-chooser-item:hover {
  border-color: var(--pro-green, #0f5132);
  background: rgba(15, 81, 50, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 81, 50, 0.10);
}
.pqb-chooser-ico {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(15, 81, 50, 0.10); color: var(--pro-green, #0f5132);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.pqb-chooser-text { flex: 1; min-width: 0; }
.pqb-chooser-title { font-weight: 600; color: var(--pro-charcoal, #1a2433); }
.pqb-chooser-sub { font-size: 0.82rem; color: var(--pro-muted, #5d6b7f); margin-top: 2px; }
.pqb-chooser-arrow { color: var(--pro-muted, #5d6b7f); font-size: 1.1rem; }
.pqb-chooser-close {
  width: 100%; padding: 12px 16px; border: none;
  background: var(--pro-cream, #faf9f6); color: var(--pro-muted, #5d6b7f);
  font-family: inherit; font-size: 0.9rem; cursor: pointer;
  border-top: 1px solid var(--pro-border, #e7e3da);
}
.pqb-chooser-close:hover { color: var(--pro-charcoal, #1a2433); }

@keyframes pqb-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}