/* OLIDMX permanent dark theme — loaded after page-specific styles. */
:root {
  color-scheme: dark;
  --dmx-bg: #181818;
  --dmx-surface: #2b2420;
  --dmx-surface-raised: #3a2e28;
  --dmx-surface-soft: #513e34;
  --dmx-home-card-surface: #352a20;
  --dmx-home-card-surface-raised: #443526;
  --dmx-home-card-stage-base: #211c19;
  --dmx-home-card-stage-raised: #34291f;
  --dmx-ink: #FFF0DE;
  --dmx-muted: #E3CFB7;
  --dmx-muted-soft: #B99D83;
  --dmx-accent: #FFD700;
  --dmx-accent-deep: #FF4500;
  --dmx-border: rgba(255, 240, 222, .26);
  --dmx-border-strong: rgba(255, 215, 0, .58);
  --dmx-halo: rgba(255, 111, 97, .10);
  --dmx-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  /* Keep the ambient lighting easy to tune without touching page rules. */
  --dmx-light-primary: rgba(255, 111, 97, .08);
  --dmx-light-secondary: rgba(218, 165, 32, .05);
  --dmx-light-electric: rgba(255, 69, 0, .045);
  --dmx-light-depth: rgba(245, 232, 216, .025);
  --dmx-product-stage-base: rgba(20, 20, 20, .98);
  --dmx-product-stage-raised: rgba(58, 46, 40, .96);
  --dmx-product-stage-halo: rgba(218, 165, 32, .10);
  --dmx-product-stage-floor: rgba(255, 111, 97, .055);
  --dmx-product-stage-edge: rgba(255, 215, 0, .64);
  --dmx-footer-light: rgba(255, 111, 97, .045);
  --dmx-faq-toggle-size: 28px;
  --dmx-faq-toggle-line: 12px;
  --dmx-faq-toggle-stroke: 1.5px;

  --base: var(--dmx-bg);
  --surface: var(--dmx-surface);
  --elevated: var(--dmx-surface-raised);
  --ink: var(--dmx-ink);
  --accent: var(--dmx-accent);
  --border: var(--dmx-border);
  --border-2: var(--dmx-border-strong);

  --bg: var(--dmx-bg);
  --surface-2: var(--dmx-surface-raised);
  --surface-3: var(--dmx-surface-soft);
  --text: var(--dmx-ink);
  --text-2: var(--dmx-muted);
  --text-3: var(--dmx-muted-soft);
  --navy: var(--dmx-ink);
  --navy-2: #dedee0;
  --indigo: var(--dmx-ink);
  --cyan: var(--dmx-accent);
  --cyan-ink: var(--dmx-accent);
  --focus: rgba(218, 165, 32, .55);

  --shell-base: var(--dmx-bg);
  --shell-surface: var(--dmx-surface);
  --shell-ink: var(--dmx-ink);
  --shell-accent: var(--dmx-accent);
  --shell-border: var(--dmx-border);
  --shell-border-strong: var(--dmx-border-strong);

  --contact-base: var(--dmx-bg);
  --contact-surface: var(--dmx-surface);
  --contact-ink: var(--dmx-ink);
  --contact-accent: var(--dmx-accent);
  --contact-border: var(--dmx-border);
  --series-base: var(--dmx-bg);
  --series-surface: var(--dmx-surface);
  --series-ink: var(--dmx-ink);
  --series-muted: var(--dmx-muted);
  --series-accent: var(--dmx-accent);
  --series-border: var(--dmx-border);
  --usecase-base: var(--dmx-bg);
  --usecase-surface: var(--dmx-surface);
  --usecase-ink: var(--dmx-ink);
  --usecase-muted: var(--dmx-muted);
  --usecase-accent: var(--dmx-accent);
  --usecase-border: var(--dmx-border);
  --faq-base: var(--dmx-bg);
  --faq-surface: var(--dmx-surface);
  --faq-ink: var(--dmx-ink);
  --faq-muted: var(--dmx-muted);
  --faq-accent: var(--dmx-accent);
  --faq-border: var(--dmx-border);
  --context-faq-ink: var(--dmx-ink);
  --context-faq-muted: var(--dmx-muted);
  --context-faq-accent: var(--dmx-accent);
  --context-faq-border: var(--dmx-border);
}

html { background: var(--dmx-bg); }
body,
body.page-inner,
body.page-home,
body.page-series,
body.page-usecases,
body.page-faq {
  color: var(--dmx-ink);
  background: var(--dmx-bg);
}

/* Quiet, static ambient depth for the inner pages. */
body.page-series,
body.page-usecases,
body.page-faq,
body.page-contact {
  background:
    radial-gradient(ellipse at 92% 16%, var(--dmx-light-primary), transparent 38rem),
    radial-gradient(ellipse at 72% 76%, var(--dmx-light-electric), transparent 36rem),
    radial-gradient(ellipse at 6% 78%, var(--dmx-light-secondary), transparent 34rem),
    radial-gradient(ellipse at 62% 100%, var(--dmx-light-depth), transparent 32rem),
    var(--dmx-bg);
  background-attachment: scroll;
  background-repeat: no-repeat;
}

::selection { color: var(--dmx-bg); background: var(--dmx-accent); }
:focus-visible { outline-color: var(--dmx-accent); }

/* Low-key educational links used where a guide can clarify the current topic. */
.context-guide-link {
  color: var(--dmx-accent);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 215, 0, .56);
  text-underline-offset: .18em;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.context-guide-link:hover,
.context-guide-link:focus-visible {
  color: var(--dmx-accent-deep);
  text-decoration-color: currentColor;
}

/* Shared shell */
.dmx-shell-header-frame {
  background: rgba(12, 12, 13, .8);
  border-color: var(--dmx-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}
.page-home .dmx-shell-header-frame {
  background: rgba(12, 12, 13, .62);
  border-color: rgba(255, 255, 255, .1);
}
.dmx-shell-header.is-scrolled .dmx-shell-header-frame {
  background: rgba(12, 12, 13, .94);
  border-color: var(--dmx-border-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
}
.dmx-shell-nav-contact,
.dmx-shell-mobile-nav .dmx-shell-mobile-cta {
  color: var(--dmx-ink);
  background: rgba(216, 217, 220, .07);
  border-color: rgba(216, 217, 220, .24);
}
.dmx-shell-nav-contact:hover {
  color: var(--dmx-ink);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
}
.dmx-shell-nav-contact span { color: inherit; }
.dmx-shell-mobile-nav {
  color: var(--dmx-ink);
  background: rgba(23, 23, 25, .98);
  border-color: var(--dmx-border-strong);
  box-shadow: var(--dmx-shadow);
}
.dmx-shell-mobile-nav a { color: var(--dmx-muted); }
.dmx-shell-mobile-nav a:hover,
.dmx-shell-mobile-nav a.is-active { color: var(--dmx-ink); background: rgba(255, 255, 255, .07); }
.dmx-shell-menu-toggle { background: rgba(255, 255, 255, .055); border-color: var(--dmx-border); }
.dmx-shell-footer {
  color: var(--dmx-ink);
  background:
    radial-gradient(ellipse at 74% 120%, var(--dmx-footer-light), transparent 46rem),
    var(--dmx-bg);
  border-color: var(--dmx-border);
}
.dmx-shell-footer-links a { color: var(--dmx-muted); }
.dmx-shell-footer-links a:hover,
.dmx-shell-footer-links a:focus-visible { color: var(--dmx-accent); }
.dmx-shell-wordmark { color: rgba(255, 255, 255, .11); }
.dmx-shell-footer-bottom { color: var(--dmx-muted-soft); }
.dmx-shell-brand-description { color: var(--dmx-muted-soft); }
.dmx-shell-brand-summary { color: var(--dmx-muted); }
.dmx-shell-parent-brand { color: var(--dmx-muted-soft); }
.dmx-shell-parent-brand p a:hover,
.dmx-shell-parent-brand p a:focus-visible { color: var(--dmx-accent); }
.dmx-shell-parent-brand-logo-link:focus-visible { outline-color: var(--dmx-accent); }

/* Global surfaces, copy and standard components */
main, .section, .sec, .context-faq { color: var(--dmx-ink); }
p, .lead { color: var(--dmx-muted); }
h1, h2, h3, h4 { color: var(--dmx-ink); }
.btn-primary, .series-primary-link { color: var(--dmx-bg); background: var(--dmx-accent); border-color: var(--dmx-accent); box-shadow: 0 12px 26px rgba(255, 255, 255, .06); transition: background .26s ease, border-color .26s ease, box-shadow .26s ease, transform .3s var(--series-ease, ease); }
.btn-primary:hover, .series-primary-link:hover { color: var(--dmx-bg); background: var(--dmx-accent-deep); border-color: var(--dmx-accent-deep); box-shadow: 0 14px 30px rgba(255, 255, 255, .1); }
.btn-secondary { color: var(--dmx-ink); border-color: var(--dmx-border-strong); }
.btn-secondary:hover { color: var(--dmx-ink); background: var(--dmx-surface-raised); border-color: var(--dmx-accent); }
.card, .guide-directory, .contact-panel { background: var(--dmx-surface); border-color: var(--dmx-border); box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.card:hover { border-color: var(--dmx-border-strong); box-shadow: var(--dmx-shadow); }

/* Home */
body.page-home {
  background:
    radial-gradient(ellipse at 84% 34%, rgba(255, 255, 255, .03), transparent 44rem),
    radial-gradient(ellipse at 74% 82%, var(--dmx-light-electric), transparent 40rem),
    radial-gradient(ellipse at 6% 80%, var(--dmx-light-secondary), transparent 34rem),
    radial-gradient(circle at 58% 96%, var(--dmx-light-depth), transparent 28rem),
    var(--dmx-bg);
  background-attachment: scroll;
  background-repeat: no-repeat;
}
.page-home .hero .btn-primary { color: #5a0035; background: var(--dmx-accent); }
.page-home .hero .btn-primary:hover,
.page-home .hero .btn-primary:focus-visible { color: #fff; background: #c43b00; border-color: #c43b00; }
.page-home .brand h2 .mut,
.page-home .label,
.page-home .chapter p { color: var(--dmx-muted); }
.page-home .chapters { background: var(--dmx-border); border-color: var(--dmx-border); }
.page-home .chapter { background: var(--dmx-surface); border-color: var(--dmx-border); }
.page-home .catalog-card,
.page-home .dmx-learning-card {
  background: linear-gradient(145deg, var(--dmx-home-card-surface-raised), var(--dmx-home-card-surface));
  border-color: var(--dmx-border);
}
.page-home .catalog-card-copy { background: var(--dmx-home-card-surface); }
.page-home .catalog-card:hover { border-color: var(--dmx-border-strong); box-shadow: var(--dmx-shadow); }
.page-home .catalog-card .product-image,
.page-home .product-image {
  background:
    radial-gradient(ellipse at 50% 42%, var(--dmx-product-stage-halo), transparent 58%),
    radial-gradient(ellipse at 50% 100%, var(--dmx-product-stage-floor), transparent 46%),
    linear-gradient(145deg, var(--dmx-home-card-stage-raised), var(--dmx-home-card-stage-base));
  box-shadow: none;
}
.page-home .product-image::after { background: transparent; }
.page-home .catalog-card .product-image img {
  mix-blend-mode: normal;
  opacity: 1;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .24));
}
.page-home .catalog-card:hover { border-color: var(--dmx-border-strong); }
.page-home .catalog-card {
  position: relative;
  isolation: isolate;
}
.page-home .catalog-card::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(118deg, transparent 29%, rgba(255, 255, 255, .022) 42%, rgba(255, 255, 255, .085) 49%, rgba(216, 217, 220, .068) 55%, rgba(255, 255, 255, .032) 62%, transparent 73%);
  transform: translateX(-48%);
  transition: opacity .42s ease, transform .58s cubic-bezier(.22, 1, .36, 1);
}
.page-home .catalog-card:hover::before {
  opacity: 1;
  transform: translateX(48%);
}
.page-home .context-faq { background: transparent; }

/* Series and product pages */
.page-series .series-hero-home::after { border-color: rgba(255, 255, 255, .2); box-shadow: 0 0 0 42px rgba(255, 255, 255, .02), 0 0 0 84px rgba(216, 217, 220, .01); }
.page-series .series-hero h1 span { color: rgba(255, 255, 255, .4); }
.page-series .series-product-tabs,
.page-series .series-product-tab-panel,
.page-series .series-spec-card,
.page-series .series-detail-panel { background: var(--dmx-surface); border-color: var(--dmx-border); }
.page-series .series-showcase-visual,
.page-series .series-product-feature-visual,
.page-series .series-product-hero-visual {
  background:
    radial-gradient(ellipse at 50% 42%, var(--dmx-product-stage-halo), transparent 58%),
    radial-gradient(ellipse at 50% 100%, var(--dmx-product-stage-floor), transparent 46%),
    linear-gradient(145deg, var(--dmx-product-stage-raised), var(--dmx-product-stage-base));
  border: 1px solid var(--dmx-product-stage-edge);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.page-series .series-showcase-visual img,
.page-series .series-product-feature-visual img,
.page-series .series-product-hero-visual img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .24)); }
.page-series .series-product-feature {
  background: linear-gradient(145deg, rgba(32, 33, 36, .96), rgba(23, 23, 25, .94));
  border-color: var(--dmx-border);
  border-radius: 24px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.page-series .series-showcase { content-visibility: auto; contain-intrinsic-size: auto 720px; }
@media (hover: hover) and (pointer: fine) {
  .page-series .series-product-feature:hover {
    border-color: var(--dmx-border-strong);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .2), 0 0 24px rgba(255, 255, 255, .025);
    transform: translateY(-2px);
  }
  .page-series .series-product-feature:hover .series-product-feature-visual,
  .page-series .series-showcase-visual:hover,
  .page-series .series-product-hero-visual:hover {
    border-color: rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .028), 0 10px 28px rgba(0, 0, 0, .13);
  }
  .page-home .catalog-card:hover .product-image { border-color: var(--dmx-border); box-shadow: none; }
}
.page-series .series-product-protocol {
  margin: 0;
  color: var(--dmx-accent);
  font: 700 clamp(1rem, 1.45vw, 1.2rem)/1.15 var(--series-font);
  letter-spacing: -.02em;
}
.page-series .series-product-protocol + h3 { margin-top: .55rem; }
.page-series .series-hero-protocol,
.page-series .series-product-hero-copy .series-product-protocol {
  margin: 0;
  color: var(--dmx-accent);
  font: 700 clamp(1.05rem, 1.7vw, 1.35rem)/1.15 var(--series-font);
  letter-spacing: -.02em;
}
.page-series .series-hero-protocol + h1,
.page-series .series-product-hero-copy .series-product-protocol + h1 { margin-top: .6rem; }
.page-series .series-showcase-description,
.page-series .series-intro,
.page-series .series-detail-copy p { color: var(--dmx-muted); }
.page-series .series-product-tabs {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.page-series .series-product-tabpanel {
  background: transparent;
}
.page-series .series-product-tablist {
  gap: clamp(2.25rem, 6vw, 5.5rem);
  border-color: var(--dmx-border);
}
.page-series .series-product-tab { padding-bottom: 1.35rem; }
.page-series .series-product-tab { color: var(--dmx-muted-soft); }
.page-series .series-product-tab:hover,
.page-series .series-product-tab:focus-visible { color: var(--dmx-ink); }
.page-series .series-product-tab::after { height: 2px; background: var(--dmx-accent); }
.page-series .series-product-tab.is-active,
.page-series .series-product-tab[aria-selected="true"] {
  color: var(--dmx-ink);
  border-color: var(--dmx-accent);
  background: transparent;
}
.page-series .series-primary-link.series-secondary-link {
  color: var(--dmx-ink);
  background: rgba(255, 255, 255, .045);
  border-color: var(--dmx-border-strong);
  box-shadow: none;
}
.page-series .series-primary-link.series-secondary-link:hover,
.page-series .series-primary-link.series-secondary-link:focus-visible {
  color: var(--dmx-ink);
  background: rgba(255, 255, 255, .08);
  border-color: var(--dmx-accent-deep);
}
.page-series .series-secondary-link:hover .series-primary-link-arrow { transform: translateX(-4px); }
.page-series .series-tech-table {
  overflow: visible;
  background: transparent;
  border-color: var(--dmx-border);
  border-radius: 0;
}
.page-series .series-tech-row {
  background: transparent;
  border-color: rgba(54, 55, 58, .78);
  transition: none;
}
.page-series .series-tech-row:nth-child(even),
.page-series .series-tech-row:hover { background: transparent; }
.page-series .series-tech-row > * + * { border-left: 0; }
.page-series .series-tech-row dt { color: var(--dmx-muted); }
.page-series .series-tech-row dd { color: var(--dmx-ink); font-weight: 450; }
.page-series .series-tech-row dd span + span::before,
.page-series .series-tech-value-list li + li::before { color: var(--dmx-muted-soft); }
.page-series .series-document-list {
  overflow: visible;
  background: transparent;
  border-color: var(--dmx-border);
  border-radius: 0;
}
.page-series .series-document-link { border-radius: 0; }
.page-series .series-document-link:hover,
.page-series .series-document-link:focus-visible { background: transparent; }
.page-series .series-document-title { color: var(--dmx-ink); }
.page-series .series-document-meta { color: var(--dmx-muted); }

@media (min-width: 901px) {
  .page-series .series-tech-table--master .series-tech-row > :nth-child(2):last-child {
    grid-column: span 3;
  }
}

/* Use cases */
.page-usecases .usecase-back-link { border-color: var(--dmx-border-strong); background: var(--dmx-surface); }
.page-usecases .usecase-back-link:hover { color: var(--dmx-ink); background: rgba(255, 255, 255, .08); border-color: var(--dmx-accent-deep); }
.page-usecases .usecase-project-card,
.page-usecases .usecase-projects-header,
.page-usecases .usecase-content-placeholder { border-color: var(--dmx-border); }
.page-usecases .usecase-project-meta,
.page-usecases .usecase-project-copy p { color: var(--dmx-muted); }

/* Contact */
.page-contact .contact-hero { background: var(--dmx-bg); border-color: var(--dmx-border); }
.page-contact .contact-intro,
.page-contact .contact-details dd,
.page-contact .contact-social-list small { color: var(--dmx-muted); }
.page-contact .contact-panel { background: rgba(23, 23, 25, .84); border-color: var(--dmx-border); }
.page-contact .contact-panel h2 { color: var(--dmx-muted-soft); }
.page-contact .contact-product-links li + li,
.page-contact .contact-social-list li + li { border-color: var(--dmx-border); }
.page-contact .contact-product-links a:hover { color: var(--dmx-accent); }

/* FAQ and context FAQ */
.page-faq .faq-category,
.page-faq .faq-item,
.page-faq .faq-item:last-child,
.context-faq-list,
.context-faq-item,
.context-faq { border-color: var(--dmx-border); }
.page-faq .faq-answer a,
.context-faq-answer a { color: var(--dmx-accent); border-color: var(--dmx-accent); }
.page-faq .faq-answer a:hover,
.page-faq .faq-answer a:focus-visible,
.context-faq-answer a:hover,
.context-faq-answer a:focus-visible { color: var(--dmx-accent-deep); border-color: var(--dmx-accent-deep); }
.page-faq .faq-answer a.context-guide-link,
.context-faq-answer a.context-guide-link {
  color: var(--dmx-accent);
  border-color: transparent;
}
.page-faq .faq-answer a.context-guide-link:hover,
.page-faq .faq-answer a.context-guide-link:focus-visible,
.context-faq-answer a.context-guide-link:hover,
.context-faq-answer a.context-guide-link:focus-visible {
  color: var(--dmx-accent-deep);
  border-color: transparent;
}
/* Keep every FAQ disclosure control identical across the main FAQ,
   contextual FAQ blocks and guide articles. */
.page-faq .faq-item summary,
.context-faq-item summary,
.guide-faq summary {
  grid-template-columns: minmax(0, 1fr) var(--dmx-faq-toggle-size);
}

.page-faq .faq-item summary::after,
.context-faq-item summary::after,
.guide-faq summary::after {
  display: flex;
  flex: 0 0 var(--dmx-faq-toggle-size);
  width: var(--dmx-faq-toggle-size);
  height: var(--dmx-faq-toggle-size);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  content: "";
  color: var(--dmx-muted);
  border: 1px solid var(--dmx-border-strong);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / var(--dmx-faq-toggle-line) var(--dmx-faq-toggle-stroke) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--dmx-faq-toggle-stroke) var(--dmx-faq-toggle-line) no-repeat;
  transform-origin: center;
  transition: color .22s ease, border-color .22s ease, transform .22s ease;
}

.page-home .context-faq-item summary::after,
.page-faq .faq-item summary::after,
.page-guides .guide-faq summary::after {
  border-color: var(--dmx-border);
}

.page-faq .faq-item[open] summary::after,
.context-faq-item[open] summary::after,
.guide-faq details[open] summary::after {
  color: var(--dmx-accent);
  border-color: var(--dmx-accent);
  transform: rotate(45deg);
}

/* Error and redirect pages */
.page-not-found .not-found-page-content { min-height: 68vh; display: grid; place-items: center; padding: 10rem 1.5rem 5rem; text-align: center; }
.page-not-found .not-found-page-container { max-width: 48rem; }
.page-not-found .not-found-page-eyebrow { color: var(--dmx-accent); font: 700 .72rem/1.2 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.page-not-found h1 { margin: 1rem 0; font-size: clamp(2.5rem, 7vw, 5.25rem); }
.page-not-found p { max-width: 42rem; margin: 0 auto 2rem; color: var(--dmx-muted); font-size: 1.05rem; }
.page-not-found .not-found-page-link { display: inline-flex; padding: .85rem 1.35rem; color: var(--dmx-bg); background: var(--dmx-accent); border-radius: 999px; font-weight: 700; }
.page-not-found .not-found-page-link:hover { background: var(--dmx-accent-deep); }

@media (prefers-reduced-motion: reduce) {
  .page-home .catalog-card::before { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
}

/* Shared heading rhythm */
:root {
  --type-hero: 800 clamp(3.75rem, 7.5vw, 6.5rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --type-detail-hero: 800 clamp(3.25rem, 5.4vw, 5.2rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --type-device-card-title: 800 clamp(2.4rem, 4.2vw, 4.4rem) / .98 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --type-device-hero: 800 clamp(3.5rem, 5.8vw, 5.8rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --type-page-title: 800 clamp(3.25rem, 5.7vw, 5.2rem) / 1 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --type-section-title: 700 clamp(2.25rem, 3.8vw, 3.5rem) / 1 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --type-card-title: 700 clamp(1.2rem, 1.8vw, 1.5rem) / 1.15 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --heading-tracking: -.055em;
  --heading-eyebrow-gap: .75rem;
  --heading-copy-gap: 1rem;
  --content-rail-width: 1240px;
  --content-rail-gutter: 2rem;
  --content-rail-gutter-double: 4rem;
  --content-rail-mobile-gutter: 1.25rem;
  --content-rail-mobile-gutter-double: 2.5rem;
  --hero-divider: 1px solid var(--dmx-border);
}

body[class] main h2,
body[class] main h3 {
  margin: 0;
  text-align: left;
  letter-spacing: var(--heading-tracking);
}

body[class] main h2 { font: var(--type-section-title); }
body[class] main h3 { font: var(--type-card-title); }

/* Featured landing-page titles intentionally retain a larger hero scale. */
body.page-home main .hero-series-title,
body.page-series main .series-hero h1,
body.page-usecases main .usecase-hub-hero h1 {
  margin: 0;
  text-align: left;
  font: var(--type-hero);
  letter-spacing: var(--heading-tracking);
}

/* Page-level titles share one scale outside the featured landing heroes. */
body.page-guides main .guide-hub-hero h1,
body.page-faq main .faq-page-header h1,
body.page-contact main .contact-hero h1,
body.page-not-found main h1 {
  margin: 0;
  text-align: left;
  font: var(--type-hero);
  letter-spacing: var(--heading-tracking);
}

/* Detail heroes retain the same hierarchy while keeping long names compact. */
body.page-guides main .guide-article-title h1,
body.page-series main .series-detail-hero h1,
body.page-usecases main .usecase-detail-copy h1,
body.page-usecases main .usecase-project-detail-copy h1 {
  margin: 0;
  text-align: left;
  font: var(--type-detail-hero);
  letter-spacing: var(--heading-tracking);
}

/* Device names are intentionally larger than generic card and detail titles. */
body.page-series main .series-product-feature-copy h2 {
  margin: 0;
  max-inline-size: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
  font: var(--type-device-card-title);
  letter-spacing: var(--heading-tracking);
}

body.page-series main .series-product-hero-copy h1 {
  font: var(--type-device-hero);
}

/* Balance multi-line names where supported; normal wrapping remains the fallback. */
body[class] main h1 {
  max-inline-size: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

body[class] main .guide-eyebrow + h1,
body[class] main .usecase-eyebrow + h1,
body[class] main .faq-eyebrow + h1,
body[class] main .contact-eyebrow + h1,
body[class] main .series-hero-protocol + h1,
body[class] main .series-product-protocol + h1 {
  margin-top: var(--heading-eyebrow-gap);
}

body[class] main h1 + p,
body[class] main h2 + p,
body[class] main h3 + p { margin-top: var(--heading-copy-gap); }

/* Small operational labels remain compact rather than becoming section titles. */
body.page-home main .hero-diagram-title,
body.page-contact main .contact-panel h2,
body.page-faq main .faq-item h3,
body.page-guides main .guide-faq summary,
body.page-usecases main .usecase-gallery-item figcaption h3,
body.page-usecases main .usecase-visual-data-card h3,
body.page-series main .series-product-protocol + h3 {
  font: var(--type-card-title);
  letter-spacing: -.03em;
}

/* Shared page-title rail. Showcase grids keep their own two-column alignment. */
body.page-guides { margin: 0; }
body.page-not-found { margin: 0; }

body.page-series main .series-hero > .series-container,
body.page-series main .series-product-hero > .series-container,
body.page-guides main .guide-hub-hero > .guide-container,
body.page-guides main .guide-article-hero > .guide-container,
body.page-usecases main .usecase-hub-hero > .usecase-container,
body.page-usecases main .usecase-detail > .usecase-container,
body.page-usecases main .usecase-project-detail > .usecase-container,
body.page-faq main .faq-page-header > .faq-container,
body.page-contact main .contact-hero > .contact-container,
body.page-home main > .sec > .container,
body.page-home main > .context-faq > .context-faq-container,
body.page-not-found main .not-found-page-container {
  width: min(var(--content-rail-width), calc(100% - var(--content-rail-gutter-double)));
  margin-inline: auto;
}

body.page-home main > .sec > .container { padding-inline: 0; }

body.page-not-found .not-found-page-content {
  display: block;
  min-height: 68vh;
  padding: 10rem 0 5rem;
  text-align: left;
}

body.page-not-found .not-found-page-container { max-width: none; }
body.page-not-found p { margin-inline: 0; }

/* Shared desktop title plane for all hub pages. */
@media (min-width: 641px) {
  :root { --page-hero-height: 505px; }

  body.page-series main .series-hero,
  body.page-guides main .guide-hub-hero,
  body.page-usecases main .usecase-hub-hero,
  body.page-faq main .faq-page-header,
  body.page-contact main .contact-hero {
    min-height: var(--page-hero-height);
    height: auto;
    padding: 0;
  }

  body.page-series main .series-hero > .series-container,
  body.page-guides main .guide-hub-hero > .guide-container,
  body.page-usecases main .usecase-hub-hero > .usecase-container,
  body.page-faq main .faq-page-header > .faq-container,
  body.page-contact main .contact-hero > .contact-container {
    display: grid;
    min-height: var(--page-hero-height);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 100px 20px 45px 14px 20px auto minmax(0, 1fr);
    align-content: start;
  }

  body.page-series main .series-hero .series-breadcrumb,
  body.page-guides main .guide-hub-hero .guide-breadcrumb,
  body.page-usecases main .usecase-hub-hero .usecase-breadcrumb,
  body.page-faq main .faq-page-header .faq-breadcrumb {
    grid-row: 2;
    align-self: start;
    margin: 0;
  }

  body.page-series main .series-hero .series-eyebrow,
  body.page-guides main .guide-hub-hero .guide-eyebrow,
  body.page-usecases main .usecase-hub-hero .usecase-eyebrow,
  body.page-faq main .faq-page-header .faq-eyebrow,
  body.page-contact main .contact-hero .contact-eyebrow {
    grid-row: 4;
    align-self: start;
    margin: 0;
  }

  body.page-series main .series-hero h1,
  body.page-guides main .guide-hub-hero h1,
  body.page-usecases main .usecase-hub-hero h1,
  body.page-faq main .faq-page-header h1,
  body.page-contact main .contact-hero h1 {
    grid-row: 6;
    align-self: start;
    margin: 0;
    max-width: 1000px;
  }

  body.page-series main .series-hero .series-intro,
  body.page-guides main .guide-hub-hero > .guide-container > p:not(.guide-eyebrow),
  body.page-faq main .faq-page-header .faq-intro,
  body.page-contact main .contact-hero .contact-intro {
    grid-row: 7;
    align-self: start;
    margin: var(--heading-copy-gap) 0 0;
  }
}

/* Keep the first guide section clear of the shared hero boundary. */
body.page-guides main .guide-pathways {
  padding-top: clamp(2.75rem, 5vw, 4rem);
}

/* A single full-width boundary closes every primary title area. */
body.page-series main .series-hero,
body.page-series main .series-product-hero,
body.page-guides main .guide-hub-hero,
body.page-guides main .guide-article-hero,
body.page-usecases main .usecase-hub-hero,
body.page-usecases main .usecase-detail,
body.page-usecases main .usecase-project-detail,
body.page-faq main .faq-page-header,
body.page-contact main .contact-hero,
body.page-not-found main .not-found-page-content {
  border-bottom: var(--hero-divider);
}

@media (max-width: 640px) {
  :root {
    --type-hero: 800 clamp(3.4rem, 14vw, 4.8rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --type-detail-hero: 800 clamp(2.75rem, 12vw, 3.7rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --type-device-card-title: 800 clamp(2.2rem, 10vw, 3.3rem) / .98 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --type-device-hero: 800 clamp(2.65rem, 12.5vw, 4.1rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --type-page-title: var(--type-hero);
    --heading-eyebrow-gap: 1rem;
  }

  body.page-series main .series-hero > .series-container,
  body.page-series main .series-product-hero > .series-container,
  body.page-guides main .guide-hub-hero > .guide-container,
  body.page-guides main .guide-article-hero > .guide-container,
  body.page-usecases main .usecase-hub-hero > .usecase-container,
  body.page-usecases main .usecase-detail > .usecase-container,
  body.page-usecases main .usecase-project-detail > .usecase-container,
  body.page-faq main .faq-page-header > .faq-container,
  body.page-contact main .contact-hero > .contact-container,
  body.page-home main > .sec > .container,
  body.page-home main > .context-faq > .context-faq-container,
  body.page-not-found main .not-found-page-container {
    width: min(var(--content-rail-width), calc(100% - var(--content-rail-mobile-gutter-double)));
  }
}

/* Preserve component-level heading rhythm after the shared type scale is applied. */
body.page-guides main .guide-pathways h2,
body.page-guides main .guide-topic-overview h2 { margin-top: .7rem; }

body.page-guides main .guide-related h2,
body.page-guides main .guide-faq h2 { margin-bottom: 1.4rem; }

/* Embedded guide FAQs follow the same compact question scale as the FAQ page. */
body.page-guides main .guide-faq summary {
  min-height: 84px;
  padding: 1.35rem 0;
  font: 600 clamp(1rem, 1.8vw, 1.18rem)/1.4 'Poppins', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.03em;
}

@media (max-width: 760px) {
  body.page-guides main .guide-faq summary { min-height: 76px; }
}

body.page-usecases main .usecase-visual-data-card h3,
body.page-usecases main .usecase-priorities-grid h3,
body.page-usecases main .usecase-planning-notes-heading h2 { margin-top: .45rem; }

/* Micro-spacing for dense title treatments. */
body.page-home main .chapter h3 { margin-top: 1.25rem; }

/* Use-case detail heroes stay open to the following content without a divider. */
body.page-usecases main .usecase-detail { border-bottom: 0; }

/* Keep application names intact when a detail title wraps. */
body.page-usecases main .usecase-detail-copy h1 {
  overflow-wrap: normal;
  word-break: normal;
}

/* Keep the long Addressing guide title clear and deliberately two-lined. */
body.page-guides main[data-dmx-guide="dmx-addressing-and-universes"] .guide-article-title h1 {
  font-size: clamp(3rem, 3.8vw, 3.75rem);
  line-height: 1.04;
}

@media (max-width: 640px) {
  body.page-guides main[data-dmx-guide="dmx-addressing-and-universes"] .guide-article-title h1 {
    font-size: clamp(2.15rem, 9vw, 3.25rem);
  }
}

/* Use-case showcase rows give their titles the same visual weight as the imagery. */
body.page-usecases main .usecase-showcase-copy h2 {
  font: 800 clamp(2.8rem, 5.8vw, 5.8rem) / 1.04 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* One visual language for every breadcrumb trail. */
body[class] main :is(.series-breadcrumb, .guide-breadcrumb, .usecase-breadcrumb, .faq-breadcrumb) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  color: var(--dmx-muted);
  font: 500 .82rem / 1.4 'Roboto', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

body[class] main :is(.series-breadcrumb, .guide-breadcrumb, .usecase-breadcrumb, .faq-breadcrumb) a {
  color: inherit;
  text-decoration: none;
}

body[class] main :is(.series-breadcrumb, .guide-breadcrumb, .usecase-breadcrumb, .faq-breadcrumb) a:hover,
body[class] main :is(.series-breadcrumb, .guide-breadcrumb, .usecase-breadcrumb, .faq-breadcrumb) a:focus-visible {
  color: var(--dmx-accent);
}

body[class] main :is(.series-breadcrumb, .guide-breadcrumb, .usecase-breadcrumb, .faq-breadcrumb) span[aria-hidden="true"] { opacity: .45; }

/* A warm, high-contrast CTA palette for the series hub only. */
body.page-series :is(.series-showcase-copy, .series-product-feature-copy) .series-primary-link {
  color: #5a0035;
}

body.page-series :is(.series-showcase-copy, .series-product-feature-copy) .series-primary-link:hover,
body.page-series :is(.series-showcase-copy, .series-product-feature-copy) .series-primary-link:focus-visible {
  color: #fff;
  background: #c43b00;
  border-color: #c43b00;
}

@media (min-width: 641px) {
  body.page-series main .series-hero .series-breadcrumb,
  body.page-guides main .guide-hub-hero .guide-breadcrumb,
  body.page-usecases main .usecase-hub-hero .usecase-breadcrumb,
  body.page-faq main .faq-page-header .faq-breadcrumb { margin: 0; }
}