/* ============================================================
   CREWTHAT — SERVICE-DISPLAY COLOR REBALANCE
   ------------------------------------------------------------
   Scoped to `body.svc-page` (services.html ONLY). Rebalances the
   service-display palette so brand red is a RESTRAINED ACCENT, not
   a dominant field. Same design language, tokens, type, spacing,
   glass/card treatment as the rest of the app — this is a color-
   emphasis change only.

   Red is RESERVED for: primary CTAs (.pub-btn.primary), the active/
   selected filter chip (.svc-chip.active), and form-focus state.
   Everything that was decoratively red (section eyebrows, the big
   ambient hero glow, the request-panel accent bar) becomes neutral
   or a sparing gold.

   Presentation-only. Loaded LAST on services.html (after premium.css
   + cohesion.css) so it wins. Fully reversible: delete this file +
   its <link> and the `svc-page` body class.
   ============================================================ */

/* ── 1. Calmer page backdrop ─────────────────────────────────
   premium.css paints body.pub with a strong red top-radial. On the
   service page, drop the red and lean on a faint neutral sheen +
   sparing gold/blue (keeps depth + brand warmth without the red wash). */
body.svc-page {
  background:
    radial-gradient(120% 80% at 50% -15%, rgba(255,255,255,0.045), transparent 55%),
    radial-gradient(100% 75% at 92% 6%, rgba(255,176,32,0.07), transparent 52%),
    radial-gradient(120% 95% at 6% 100%, rgba(58,158,232,0.06), transparent 55%),
    linear-gradient(180deg, #141621 0%, #0c0d12 55%, #0a0a0c 100%) !important;
  background-attachment: fixed;
}

/* Hero glow: red → gold + blue (same shape, calmer hue). */
body.svc-page .pub-hero::before {
  background:
    radial-gradient(ellipse 55% 45% at 18% 25%, rgba(255,176,32,0.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 84% 70%, rgba(58,158,232,0.08), transparent 60%) !important;
}

/* ── 2. Section eyebrows / kickers: red → neutral structure ───
   These repeat on every section ("Plans & tool sets", "The full
   suite", "Don't see it?", "Questions"). Red here is the single
   biggest source of red-as-field. Make the label a calm muted
   gray; keep a small GOLD tick for a restrained warm accent. */
body.svc-page .pub-section-head .kicker {
  color: var(--pub-dim, #8b93a3);
}
body.svc-page .pub-section-head .kicker::before {
  background: var(--grad-gold, #ffb020) !important;
}

/* ── 3. Request-panel accent bar: red → gold ─────────────────
   The "Don't see it?" panel carried a red top bar + red glow. */
body.svc-page .pub-panel::after {
  background: var(--grad-gold, #ffb020) !important;
  box-shadow: var(--glow-soft-gold, 0 0 40px -8px rgba(255,176,32,0.4)) !important;
}

/* ── 4. Add-on tier badge: warm-red text → neutral gold ──────
   Tones the lone reddish tier label so the tier row reads as a
   calm green/gold/blue/neutral set rather than green/gold/blue/red. */
body.svc-page .svc-tier.tier-add {
  color: var(--pub-gold, #ffb020);
  border-color: rgba(255,176,32,0.4);
}

/* ── KEEP RED (intentional accents — do not neutralize) ──────
   .pub-btn.primary  → primary CTA (See plans / Request access)
   .svc-chip.active  → active/selected filter chip
   .pub-field/.svc-search :focus → focus state (accessible focus)
   .pub-brand .dot   → logo mark
   These remain brand red by design. */

/* Active filter chip: keep red, but soften the raw fill slightly so
   it reads as "selected accent" rather than a hot block. */
body.svc-page .svc-chip.active {
  background: var(--ct-red, #cc1f1f);
  border-color: var(--ct-red, #cc1f1f);
  box-shadow: 0 0 0 1px rgba(204,31,31,0.25), 0 6px 18px -10px rgba(204,31,31,0.55);
}