/* Diagnostics page styles — minimal, leveraging base.css */
.hero-plate { position: relative; padding: var(--space-32) 0 var(--space-32); }
.hero-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-24); align-items: center; }
.hero-copy p { color: color-mix(in oklab, var(--color-text) 90%, black 10%); }
.hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }
.hero-media img { display: block; width: 100%; height: auto; }
.ctas { margin-top: var(--space-16); }

@media (max-width: 960px) {
  .hero-wrap { grid-template-columns: 1fr; }
}

.section { margin-block: var(--space-40); }
.breadcrumbs { border-bottom: 1px solid var(--color-border); background: var(--color-surface-1); }

/* Before/After items spacing */
.ba figcaption { color: var(--gray-200); font-size: var(--fs-200); margin-top: var(--space-8); }

/* Badges group wraps nicely */
.badges { flex-wrap: wrap; }

/* Details summary styling for FAQ */
details { border-bottom: 1px solid var(--color-border); padding-block: var(--space-12); }
details > summary { cursor: pointer; font-weight: 600; outline-offset: 2px; }
details[open] > summary { color: var(--color-primary); }

/* Code blocks fine-tuning */
pre { font-size: 0.9rem; }

/* Subtle copper edge for hero */
.hero-plate::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); opacity: 0.6; }