/* Palette sampled from belltowerdigital.com/integrations/, 23 October 2026.
   A separate layer preserves the original sector colors for comparison. */
:root,
body[data-sector] {
  --ink: #0b193c;
  --muted: #4e6380;
  --paper: #fff;
  --line: #d5dfeb;
  --accent: #2865bd;
  --tint: #eaf4ff;
  --bright: #dcecff;
  --navy: #132f59;
  --panel: linear-gradient(145deg, #173a69, #102749);
}

body { background: var(--paper); }
#main { background: radial-gradient(ellipse at 76% 12%, #dcecff 0, #edf6ff 25%, #f6faff 48%, #fff 74%); }
.site-header { background: #fff; border-color: #edf1f7; }
.site-header nav .active { border-color: var(--accent); }
.brand small { color: var(--muted); }
.header-cta, .primary { background: var(--navy); color: #fff; }
.hero-copy .eyebrow { color: #225bac; }
h1 em { color: #2f70cb; }
.lead { color: var(--ink); }
.text-link { border-color: #94b2d4; }
.shape-one { background: #c8dfff; }
.shape-two { background: #e2efff; }

/* Keep the product artwork on light surfaces inside the navy explorer. */
.explorer {
  background: var(--panel);
  border-color: #ffffff60;
  box-shadow: 0 18px 60px #132f591c;
  color: #fff;
}
.explorer-top .eyebrow { color: #d7e7fc; }
.example-pill { background: #ffffff0b; border: 1px solid #ffffff4a; color: #e2edfc; }
.sector-tabs { background: #10274970; }
.sector-tabs button { color: #d7e7fc; }
.sector-tabs button[aria-selected=true] { background: #fff; color: var(--navy); box-shadow: 0 2px 7px #0b193c20; }
.sector-tabs button:hover:not([aria-selected=true]) { background: #ffffff0b; }
.panel-heading p, .selection-hint { color: #c5d8ee; }
.selection-hint span { color: #b5d4fc; }
.system { background: #fff; border-color: #d5dfeb; }
.system:hover { border-color: #94bfee; box-shadow: 0 6px 18px #0b193c20; }
.system[aria-pressed=true] { background: #eaf4ff; border-color: #94bfee; box-shadow: inset 0 0 0 1px #94bfee; }
.brand-title small, .system-label { color: var(--muted); }
.flow { background: #eaf4ff; border-color: #d5dfeb; color: var(--ink); }
.flow-kicker { color: #285fa9; }
.flow-tag { border-color: #bdd0e7; color: #405775; }
.flow-steps li { border-color: #d5dfeb; }
.flow-details, .flow-description { color: #405775; }
.explorer-footer { border-color: #ffffff29; }
.explorer-footer a, .explorer-footer a span { color: #e2edfc; }
.explorer-footer p { color: #c5d8ee; }
.explorer button:focus-visible, .explorer a:focus-visible,
.explorer input:focus-visible, .explorer select:focus-visible {
  outline-color: #94bfee;
}

/* The catalog keeps the same contrast whether browsing or searching. */
.integration-search input, .catalog-filter-row select { border-color: #d5dfeb; }
.integration-search input::placeholder { color: var(--muted); }
.search-icon { border-color: var(--muted); }
.search-icon::after { background: var(--muted); }
.catalog-browse button, .catalog-filter-row button,
.catalog-scroll-hint, .search-help a { color: #d7e7fc; }
.catalog-browse>span, .catalog-filter-row label,
.search-status, .search-help { color: #c5d8ee; }
.search-result { border-color: #d5dfeb; }
.search-result-copy>span { color: var(--muted); }
.search-result-copy .catalog-result-type { color: var(--accent); }
.search-list { scrollbar-color: #94b2d4 #102749; }
.catalog-placeholder { background: #edf6ff; color: #4e6380; }
.marketing-filters button { background: #ffffff08; border-color: #ffffff4a; color: #d7e7fc; }
.marketing-filters button[aria-pressed=true] { background: #eaf4ff; border-color: #bdd0e7; color: var(--navy); }
.marketing-filters button:hover { border-color: #94bfee; }
.benefits { border-color: var(--line); }
.mint, .peach, .violet { background: #dcecff; color: #285fa9; }
.benefits p span, .preview-note { color: var(--muted); }

/* Reuse the live page's dark workflow frame and pale blue check step. */
#workflow-demo[data-wf-sector] {
  --wf-ink: var(--ink);
  --wf-muted: var(--muted);
  --wf-accent: var(--accent);
  --wf-tint: var(--tint);
  --wf-bright: var(--bright);
  --wf-border: var(--line);
}
#workflow-demo .wf-plan-link { background: var(--navy); border-color: var(--navy); color: #fff; }
#workflow-demo .wf-plan-link:hover { background: #173a69; border-color: #173a69; }
#workflow-demo .wf-tabs { background: #edf6ff; border-color: var(--line); }
#workflow-demo .wf-tabs button { color: var(--muted); }
#workflow-demo .wf-tabs button[aria-selected=true] { background: var(--navy); color: #fff; box-shadow: 0 2px 7px #132f5913; }
#workflow-demo .wf-demo { background: var(--panel); border-color: #ffffff60; box-shadow: 0 12px 38px #132f5914; }
#workflow-demo .wf-selection { border-color: #ffffff29; }
#workflow-demo .wf-selection p { color: #c5d8ee; }
#workflow-demo .wf-selection strong,
#workflow-demo .wf-selection a { color: #fff; }
#workflow-demo .wf-demo-bar .wf-eyebrow,
#workflow-demo .wf-progress { color: #d7e7fc; }
#workflow-demo .wf-demo-note,
#workflow-demo .wf-local-note { color: #c5d8ee; }
#workflow-demo .wf-demo-note>span { background: #b5d4fc; }
#workflow-demo .wf-card { border-color: #d5dfeb; box-shadow: 0 4px 15px #0b193c0a; }
#workflow-demo .wf-tools-card { background: #eaf4ff; }
#workflow-demo .wf-card:not(:last-child)::after { color: #d7e7fc; }
#workflow-demo .wf-field input,
#workflow-demo .wf-field select { border-color: #c5d3e4; }
#workflow-demo .wf-field input:hover,
#workflow-demo .wf-field select:hover { border-color: #94b2d4; }
#workflow-demo .wf-consent { color: #405775; }
#workflow-demo .wf-run,
#workflow-demo .wf-plan-grid .wf-plan-contact { background: var(--navy); }
#workflow-demo .wf-tool-status { color: var(--muted); background: #edf1f7; }
#workflow-demo .wf-tool[data-wf-state=skipped] { background: #f6faff; }
#workflow-demo .wf-tool[data-wf-state=skipped] .wf-tool-status { color: var(--muted); background: #edf1f7; }
#workflow-demo .wf-result-empty { background: #f6faff; border-color: #c5d3e4; }
#workflow-demo .wf-contact,
#workflow-demo .wf-next-step,
#workflow-demo .wf-benefits { border-color: var(--line); }
#workflow-demo .wf-plan-banner { color: #d7e7fc; }
#workflow-demo .wf-plan-banner strong { background: #ffffff0b; border-color: #ffffff4a; color: #e2edfc; }
#workflow-demo .wf-plan-footnote { color: #c5d8ee; }
#workflow-demo .wf-selection a:focus-visible,
#workflow-demo .wf-demo:focus-visible { outline-color: #94bfee; }