/* Materials guides: existing DAN design tokens, scoped to new content. */
.guide-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.guide-hero__copy { padding: clamp(36px, 6vw, 90px); align-self: center; }
.guide-hero__copy .eyebrow { margin-top: var(--dan-space-7); }
.guide-hero__copy .lead { margin-block: var(--dan-space-6); max-width: 36rem; }
.guide-hero__copy h1 { font-size: var(--dan-font-size-h1); }
.guide-hero__image { min-width: 0; }
.guide-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.guide-breadcrumb { font-size: var(--dan-font-size-xs); color: var(--dan-color-text-muted); line-height: 1.8; }
.guide-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.guide-jump { border-bottom: var(--dan-border-subtle); }
.guide-jump .container { display: flex; flex-wrap: wrap; gap: var(--dan-space-2) var(--dan-space-6); padding-block: var(--dan-space-5); }
.guide-jump a { font-size: var(--dan-font-size-sm); padding-block: var(--dan-space-2); text-decoration: underline; text-underline-offset: 5px; }
.guide-section { scroll-margin-top: 120px; }
.guide-section__heading { display: grid; grid-template-columns: .18fr 1fr; gap: var(--dan-space-6); margin-bottom: var(--dan-space-8); }
.guide-section__heading .lead { margin-top: var(--dan-space-5); max-width: var(--dan-container-prose); }
.guide-section__heading > .eyebrow { padding-top: var(--dan-space-3); }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dan-space-8) var(--dan-space-6); }
.guide-card__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.guide-card__body { padding-top: var(--dan-space-5); }
.guide-card__body p { margin-top: var(--dan-space-4); max-width: 35rem; }
.guide-card__body .text-link { display: inline-block; margin-top: var(--dan-space-5); }
.guide-cards--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dan-space-7); }
.guide-cards--steps .guide-card { border-top: var(--dan-border-subtle); }
.guide-cards--steps h3 { font-size: var(--dan-font-size-h4); }
.guide-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dan-space-6); }
.guide-swatches figure { margin: 0; min-width: 0; }
.guide-swatches img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border: var(--dan-border-subtle); }
.guide-swatches figcaption { font-size: var(--dan-font-size-sm); margin-top: var(--dan-space-3); overflow-wrap: anywhere; }
.guide-note { margin-top: var(--dan-space-7); color: var(--dan-color-text-muted); font-size: var(--dan-font-size-sm); }
.guide-faq { max-width: var(--dan-container-content); margin-left: auto; }
.guide-faq details { border-top: var(--dan-border-subtle); }
.guide-faq details:last-child { border-bottom: var(--dan-border-subtle); }
.guide-faq summary { position: relative; list-style: none; padding: var(--dan-space-5) var(--dan-space-7) var(--dan-space-5) 0; font-size: var(--dan-font-size-h4); cursor: pointer; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.guide-faq details[open] > summary::after { content: '−'; }
.guide-faq details > div { padding-bottom: var(--dan-space-5); max-width: var(--dan-container-prose); }
.guide-model-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dan-space-6); }
.guide-model-links img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.guide-model-links > a > span { display: flex; justify-content: space-between; padding-block: var(--dan-space-4); border-bottom: var(--dan-border-subtle); }
.guide-cta { margin-top: var(--dan-space-6); }
.guide-related-title { font-size: var(--dan-font-size-h3); }
.guide-related { display: flex; flex-wrap: wrap; gap: var(--dan-space-5) var(--dan-space-7); margin-top: var(--dan-space-6); }
.guide-related a { padding-block: var(--dan-space-3); border-bottom: var(--dan-border-subtle); }
.dan-content-guide a:focus-visible, .guide-faq summary:focus-visible { outline: 2px solid var(--dan-color-focus); outline-offset: 5px; }
@media (max-width: 60rem) {
 .guide-hero { grid-template-columns: 1fr; min-height: auto; }
 .guide-hero__copy { padding: var(--dan-space-8) var(--dan-gutter); }
 .guide-hero__image img { aspect-ratio: 16 / 9; height: auto; max-height: 480px; }
 .guide-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .guide-model-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .guide-section__heading { grid-template-columns: 1fr; gap: var(--dan-space-3); }
 .guide-cards--steps { gap: var(--dan-space-5); }
}
@media (max-width: 40rem) {
 .guide-hero__copy .eyebrow { margin-top: var(--dan-space-5); }
 .guide-cards, .guide-cards--steps { grid-template-columns: 1fr; }
 .guide-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dan-space-5); }
 .guide-model-links { gap: var(--dan-space-4); }
 .guide-jump .container { gap: var(--dan-space-2) var(--dan-space-4); }
 .guide-related { flex-direction: column; align-items: flex-start; }
 .guide-faq summary { font-size: 1.1rem; }
}