/*
 * The chart guides: one reading column, with the example chart drawn full
 * width under the opening so it reads at a useful size on a phone too.
 */

.content { max-width: 760px; }

.guide-head { margin-bottom: 1.5rem; }
.guide-lead { font-size: 1.15rem; color: var(--text-soft); margin-bottom: 1.25rem; }
.guide-note { color: var(--text-muted); font-size: 0.9rem; }

.guide-example { margin: 0 0 1rem; }
.guide-example figcaption {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-align: center;
}

.guide section p { margin-top: 0.6rem; }

.guide-steps { padding-left: 1.4rem; margin-top: 0.6rem; }
.guide-steps li + li { margin-top: 0.4rem; }

.guide-ages { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.guide-ages div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}
.guide-ages dt { font-weight: 700; color: var(--text-head); }
.guide-ages dd { margin-top: 0.25rem; }

.guide-faq {
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
}
.guide-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-head);
}
.guide-faq p { color: var(--text-soft); }

.guide-end { margin: 2.5rem 0 1rem; text-align: center; }
.guide-end p + p { margin-top: 1rem; }

.guide-more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.5rem; }