/* Synapse visual language, adapted to Balas. Geometry and motion belong to
   the existing page styles: no spacing, grids, sizes, or animation overrides. */
:root {
  --synapse-primary: #0097d6;
  --synapse-secondary: #ffffff;
  --synapse-accent: #79e3fc;
  --synapse-background: #fdfdfd;
  --synapse-surface: #e6fcff;
  --synapse-ink: #003c63;
  --synapse-muted: #646464;
  --synapse-border: #d9dee7;
  --synapse-action: #0076b0;
  --synapse-action-hover: #00588a;
  --synapse-display: Arial;
  --synapse-body: Arial;
  --synapse-mono: Arial;
  --synapse-radius: 8px;

  /* Shared pages and the editorial company / ERP pages use different names. */
  --navy: var(--synapse-ink);
  --blue: var(--synapse-action);
  --cyan: var(--synapse-accent);
  --muted: var(--synapse-muted);
  --line: var(--synapse-border);
  --light: var(--synapse-surface);
  --white: var(--synapse-secondary);
  --paper: var(--synapse-background);
  --paper-warm: var(--synapse-surface);
  --paper-dark: #d5f2fa;
  --ink: var(--synapse-ink);
  --ink-soft: #00588a;
  --ink-mute: var(--synapse-muted);
  --ink-faint: var(--synapse-muted);
  --coral: var(--synapse-action);
  --coral-dark: var(--synapse-action-hover);
  --coral-soft: var(--synapse-accent);
  --bone: var(--synapse-secondary);
  --line-soft: #e7eef2;
  --line-faint: #eff4f6;
  --serif: Arial;
  --sans: Arial;
  --body: Arial;
  --mono: Arial;
}

html body {
  background-color: var(--synapse-background);
  color: var(--synapse-ink);
  font-family: Arial;
}
html body :is(button, input, textarea, select) {
  font-family: Arial;
  caret-color: var(--synapse-action);
}
html body :is(h1, h2, h3, h4, h5, h6) {
  font-family: Arial;
}
html body :is(h1, h2, .section-title) { font-weight: 500 !important; }
html body :is(h3, h4, h5, h6) { font-weight: 600 !important; }
html body :is(.eyebrow, .demo-eyebrow, .ls-label, .label, .tag,
  .role-no, .home-type-meta, .whitepaper-type, .customer-industry,
  .customer-feature-kicker, .demo-step-number, .breadcrumb, .breadcrumbs) {
  font-family: Arial;
}
html body ::selection { background: var(--synapse-accent); color: var(--synapse-ink); }
html body :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--synapse-action);
}
html body :is(input, textarea)::placeholder { color: var(--synapse-muted); opacity: 1; }
html body :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--synapse-action); }
html body .brand-tagline { color: var(--synapse-ink); }

/* Primary, secondary and hover hierarchy retains each control's dimensions. */
html body :is(.button, .btn-primary, .ls-button, .demo-submit) {
  background: var(--synapse-action) !important;
  border-color: var(--synapse-action) !important;
  color: var(--synapse-secondary) !important;
}
html body :is(.button, .btn-primary, .ls-button, .demo-submit):hover {
  background: var(--synapse-action-hover) !important;
  border-color: var(--synapse-action-hover) !important;
}
html body :is(.button.secondary, .btn-ghost) {
  background: var(--synapse-secondary) !important;
  color: var(--synapse-ink) !important;
  border-color: var(--synapse-border) !important;
}
html body :is(.button.secondary, .btn-ghost):hover {
  background: var(--synapse-surface) !important;
  border-color: var(--synapse-action) !important;
}
html body :is(.button:not(.explore-pill), .btn:not(.explore-pill),
  .ls-button, .demo-field input, .demo-field textarea, .demo-options label,
  .home-contact-form input:not([type='checkbox']), .home-contact-form textarea) {
  border-radius: var(--synapse-radius);
}
html body :is(.textlink, .industry-action, .demo-contact a) { color: var(--synapse-action); }
html body :is(.solution-filter, .pill, .home-contact-tabs button) {
  border-color: var(--synapse-border);
  color: var(--synapse-ink);
}
html body :is(.solution-filter.active, .pill.active,
  .home-contact-tabs button[aria-selected='true']) {
  background: var(--synapse-action);
  color: var(--synapse-secondary);
  border-color: var(--synapse-action);
}
html body :is(.solution-filter, .pill, .home-contact-tabs button):hover {
  background: var(--synapse-surface);
  color: var(--synapse-ink);
}
html body :is(.solution-filter.active, .pill.active,
  .home-contact-tabs button[aria-selected='true']):hover {
  background: var(--synapse-action-hover);
  color: var(--synapse-secondary);
}

/* The incumbent light and dark section hierarchy stays intact. */
html body .header { background-color: #fffffff5; border-bottom-color: var(--synapse-border); }
html body :is(.hero, .demo-hero) {
  background: linear-gradient(115deg, var(--synapse-surface), var(--synapse-background) 70%);
}
html body :is(.tint, .demo-next, .home-demo-layout) { background-color: var(--synapse-surface); }
html body :is(.card, .solution-card, .solution-index-card, .challenge,
  .role-card, .demo-form-card, .ls-card, .work-promise-card) {
  border-color: var(--synapse-border);
  border-radius: var(--synapse-radius);
}
html body :is(.card, .solution-index-card, .demo-form-card, .ls-card) {
  background-color: var(--synapse-secondary);
}
html body .demo-form-card { box-shadow: 0 16px 40px #003c630a; }
html body :is(.demo-field input, .demo-field textarea, .demo-options label) {
  border-color: var(--synapse-border);
}
html body :is(.demo-check, .demo-options label:has(input:checked), .demo-email-status) {
  background-color: var(--synapse-surface);
  color: var(--synapse-ink);
}
html body :is(.dark, .closing, .footer) { background-color: var(--synapse-ink); }
html body :is(.dark, .closing, .footer) :is(.eyebrow, .textlink) { color: var(--synapse-accent); }
html body .dark p { color: #d5f2fa; }

/* Homepage: same three-column opening, bento navigation and photo masks. */
body.homepage {
  --home-navy: var(--synapse-ink);
  --home-accent: var(--synapse-primary);
  --home-text: var(--synapse-ink);
  --home-muted: var(--synapse-muted);
  --home-surface: var(--synapse-surface);
}
body.homepage :is(.home-hero, .hero-message) { background: var(--synapse-background); }
body.homepage :is(.hero-expertise, .hero-portrait) { background: var(--synapse-surface); }
body.homepage #content .hero-message h1,
body.homepage #content .hero-sector-bento h3 { color: var(--synapse-ink); }
body.homepage #content .hero-message :is(.intro, .hero-note) { color: var(--synapse-muted); }
body.homepage .hero-sector-bento .hero-sector {
  background: var(--synapse-secondary);
  border-color: var(--synapse-border);
  border-radius: var(--synapse-radius);
}
body.homepage .hero-sector-bento :is(.hero-sector-manufacturing,
  .hero-sector-logistics, .hero-sector-distribution) { background: #d5f2fa; }
body.homepage .hero-sector-bento .hero-sector-retail {
  background: var(--synapse-ink);
  border-color: var(--synapse-ink);
}
body.homepage #content .hero-sector-bento .hero-sector-retail h3 { color: var(--synapse-secondary); }
body.homepage #content .hero-sector-bento p { color: #365e72; }
body.homepage #content .hero-sector-bento .hero-sector-retail p { color: #d5f2fa; }
body.homepage .hero-sector-bento .industry-symbol,
body.homepage .hero-sector-bento .hero-sector::after { color: var(--synapse-action); }
body.homepage .hero-sector-bento .hero-sector-retail :is(.industry-symbol, .industry-symbol svg),
body.homepage .hero-sector-bento .hero-sector-retail::after { color: var(--synapse-accent); }
body.homepage .hero-sector-bento .hero-sector:hover {
  background: var(--synapse-surface);
  border-color: var(--synapse-action);
}
body.homepage .hero-sector-bento .hero-sector-retail:hover {
  background: var(--synapse-action-hover);
  border-color: var(--synapse-action-hover);
}
body.homepage .hero-sector-bento ::selection { background: var(--synapse-accent); color: var(--synapse-ink); }
body.homepage .trust { background-color: var(--synapse-secondary); }
body.homepage #about-us .co-value-card {
  border-color: var(--synapse-border);
  border-radius: var(--synapse-radius);
  background: var(--synapse-secondary);
  color: var(--synapse-ink);
}
body.homepage #about-us :is(.co-value-icon, .co-value-title) { color: var(--synapse-ink); }
body.homepage #about-us .co-value-icon { background: var(--synapse-surface); border-radius: var(--synapse-radius); }
body.homepage #content #about-us :is(.co-value-message, .co-value-description) { color: var(--synapse-muted); }
body.homepage #ai :is(.eyebrow, .ai-step .icon) { color: var(--synapse-accent); }
html body.homepage #ai .button.explore-pill {
  background-color: var(--synapse-ink) !important;
}
html body.homepage #ai .button.explore-pill:hover {
  background-color: var(--synapse-action-hover) !important;
}
body.homepage #content .home-hub-heading h2 span { color: var(--synapse-action); }
body.homepage .home-contact-tabs { background: var(--synapse-surface); }
body.homepage .home-demo-layout { background: var(--synapse-surface); border-radius: var(--synapse-radius); }
body.homepage .home-contact-form :is(input, textarea)::placeholder { color: var(--synapse-muted); }

/* LS Central has its own token scope and form/button font declarations. */
html body .ls-central {
  --ls-navy: var(--synapse-ink);
  --ls-blue: var(--synapse-action);
  --ls-tint: var(--synapse-surface);
  --ls-line: var(--synapse-border);
  --ls-muted: var(--synapse-muted);
  font-family: Arial;
}
html body .ls-central .ls-button { font-family: Arial; }
html body .ls-central :is(.ls-card, .ls-retail-image) { border-radius: var(--synapse-radius); }