@import url('/styles/legal.css');

.guide-layout h1 { max-width: 22ch; }
.guide-figure {
    margin: 0 0 1.25rem;
    padding: 1rem;
    background: var(--legal-ground);
    border: 1px solid var(--legal-line);
    border-radius: .6rem;
}
.guide-figure img { display: block; width: 100%; height: auto; background: #fff; }
.guide-gallery {
    display: grid;
    gap: 1rem;
}
@media (min-width: 40rem) {
    .guide-gallery { grid-template-columns: 1fr; }
}
.guide-figure figcaption {
    margin: .75rem 0 0;
    color: var(--legal-muted);
    font-size: .92rem;
}
.guide-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.guide-table {
    width: 100%;
    min-width: 28rem;
    border-collapse: collapse;
    font-size: .95rem;
}
.guide-table th,
.guide-table td {
    padding: .7rem .65rem;
    text-align: start;
    border-bottom: 1px solid var(--legal-line);
    vertical-align: top;
}
.guide-table th { color: var(--legal-primary); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.guide-callout {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: #f8eff0;
    border: 1px solid var(--legal-line);
    border-radius: .5rem;
}
.guide-faq details {
    border-bottom: 1px solid var(--legal-line);
}
.guide-faq summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: .85rem 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq details[open] summary { color: var(--legal-action); }
.guide-faq details p { margin: 0 0 1rem; }
.guide-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 1.25rem 0 0;
}
.guide-cta .header-link { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
    .guide-faq summary { transition: none; }
}