/* DMA Motor · official brand layer · 2026-09-28
 * Load after styles.css. Layout, typography and product logic stay unchanged.
 * The darker purple comes from Daniel's original logo. Its light tint is
 * deliberately used for text on dark surfaces, not as a substitute logo colour.
 */
:root {
  --accent: #78166d;
  --accent2: #a42b96;
  --brand-hover: #5f1057;
  --brand-soft: #f7f0f6;
  --brand-border: #dbc7d8;
  --brand-on-dark: #e2abe0;
  --brand-ink: #342331;
  --bg: #111114;
  --surface: #19181d;
  --surface2: #232129;
}
.header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #e5dfe4;
  box-shadow: 0 3px 16px rgba(20, 16, 23, .04);
}
.logo { flex: 0 0 auto; }
.logo img { width: 270px; max-width: 100%; height: auto; }
.menu { color: #28212a; }
.menu a:hover, .menu a.active { color: var(--accent); }
.mobile-toggle {
  color: #28212a;
  background: #fff;
  border-color: var(--brand-border);
  font: inherit;
  font-weight: 700;
}
.mobile-toggle:hover, .mobile-toggle[aria-expanded="true"] {
  color: var(--accent);
  background: var(--brand-soft);
  border-color: var(--accent);
}
.btn { background: var(--accent); color: #fff; }
.btn:hover { background: var(--brand-hover); }
.btn.dark { background: #19181d; color: #fff; }
.btn.dark:hover { background: var(--brand-hover); }
.btn.secondary { background: #fff; color: #19181d; }
.btn.secondary:hover { background: var(--brand-soft); color: var(--accent); }
.btn.ghost { background: transparent; color: #fff; border-color: #6c626d; }
.btn.ghost:hover { background: var(--accent); border-color: var(--accent); }
.cart-count, .badge { background: var(--accent); color: #fff; }
.text-link, .category-tile-link { color: var(--accent); }
.text-link:hover, .category-tile-link:hover { color: var(--brand-hover); }
/* Readable purple accents against the retained dark panels. */
.hero .eyebrow, .page-hero .eyebrow, .section.dark .eyebrow, .callout .eyebrow,
.hero .text-link, .page-hero .text-link, .section.dark .text-link,
.callout .text-link, .footer .text-link { color: var(--brand-on-dark); }
.hero .text-link:hover, .page-hero .text-link:hover,
.section.dark .text-link:hover, .callout .text-link:hover,
.footer .text-link:hover { color: #fff; }
.category:after { background: #78166d12; }
.category .icon, .feature-list b, .step>b, .choice-number, .pill {
  background: var(--brand-soft);
  color: var(--accent);
}
.category:hover, .category-tile:hover { border-color: #b98eb4; }
.filterbar button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.notice { background: var(--brand-soft); border-left-color: var(--accent); color: var(--brand-ink); }
.advisor-strip { background: #faf6fa; border-color: var(--brand-border); }
.advisor-card { border-top-color: var(--accent); }
.proposal-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: #fcf9fc;
}
.proposal-dependency { background: var(--brand-soft); color: #63205a; }
.compare-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.compare-toggle:hover { border-color: var(--accent); }
.compare-bar { border-color: var(--brand-border); }
.compare-head { background: #f7f3f7; }
.compare-label { background: #fcfafc; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible, .page-hero :focus-visible,
.section.dark :focus-visible, .footer :focus-visible { outline-color: var(--brand-on-dark); }
/* Keep the supplied black lettering intact: place the footer logo on white. */
.footer img[src$="dma-logo-v1.png"] {
  display: block;
  width: 290px;
  max-width: 100%;
  height: auto;
  padding: 12px 15px;
  background: #fff;
  border: 1px solid #e8e0e7;
  border-radius: 10px;
}
/* Explicitly preserve the hidden state of existing interactive components. */
.compare-row[hidden], .compare-bar[hidden], .choice-result[hidden],
.choice-suggestion[hidden], .choice-actions [hidden] { display: none; }
@media (max-width: 900px) {
  .menu { background: #fff; color: #28212a; border-top-color: #e5dfe4; }
  .menu a { padding: 5px 0; }
}
@media (max-width: 620px) {
  .nav { gap: 14px; }
  .logo img { width: min(220px, 57vw); height: auto; }
  .mobile-toggle { flex: 0 0 auto; }
}