/* Phase 2 — Codami look for public marketing / help / product / funnel pages.
   Requires design_tokens.css. Loaded via partials/_chrome_assets.html. */

/* Help page heroes (shared hero_section.html) */
.hero.help-hero,
.help-hero {
  position: relative;
  margin: 0;
  padding: clamp(48px, 8vw, 88px) 24px;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(15, 98, 254, 0.12), transparent 34%),
    linear-gradient(180deg, var(--soft) 0%, var(--surface) 72%, #fff 100%);
  border-bottom: 1px solid var(--line);
}

.hero.help-hero h1,
.hero.help-hero h2,
.help-hero h1,
.help-hero h2 {
  color: var(--ink) !important;
  letter-spacing: -0.04em;
}

.hero.help-hero p,
.help-hero p {
  color: var(--muted) !important;
}

/* Legacy about-hero used by some pages */
.about-hero {
  background:
    radial-gradient(circle at top right, rgba(15, 98, 254, 0.14), transparent 34%),
    linear-gradient(180deg, var(--soft) 0%, var(--surface) 100%) !important;
  color: var(--ink);
}

.about-hero h1,
.about-hero h2,
.about-hero p {
  color: inherit;
}

/* Product / funnel hero wash */
.hero-bg {
  background:
    radial-gradient(circle at top right, rgba(15, 98, 254, 0.12), transparent 32%),
    linear-gradient(180deg, var(--soft) 0%, #fff 100%) !important;
}

.brand-btn {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.brand-btn:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-1px);
}

.soft-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 42px #16314e14 !important;
}

.value-icon,
.contact-card-icon {
  color: var(--accent) !important;
}

.form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.2) !important;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline-color: var(--accent) !important;
}

/* Bespoke queries — drop purple/indigo for Codami blue */
body.bespoke-queries-page .bespoke-hero {
  background-color: var(--soft) !important;
}

body.bespoke-queries-page .process-step {
  border-color: var(--line) !important;
}

body.bespoke-queries-page .step-icon {
  color: var(--accent) !important;
}

/* FAQ active state */
body.faq-page .faq-question:focus-visible {
  outline-color: var(--accent) !important;
}

body.faq-page .faq-item.active .faq-question {
  color: var(--accent) !important;
}

/* Knowledge base */
body.knowledge-base-page .kb-search-input {
  border-color: #9ec0ff !important;
}

body.knowledge-base-page .kb-search-icon {
  color: var(--accent) !important;
}

/* Guide pages */
body.guide-page {
  --brand-blue-1: #0f62fe;
  --brand-blue-2: #0f62fe;
  --brand-blue-3: #0043ce;
  --page-bg: var(--surface);
  --border: var(--line);
  --card-bg: var(--panel);
  font-family: var(--font-sans) !important;
}

body.guide-page .hero {
  background:
    radial-gradient(1200px 400px at 50% -20%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, #0f62fe, #0043ce) !important;
}