/* Practical family guides, using the existing brand tokens and components. */
.article-meta { flex-wrap: wrap; }
.article-byline { color: var(--muted); margin-top: 1.25rem; font-size: .95rem; }
.direct-answer { margin-top: 0; }
.direct-answer p:last-child { margin-bottom: 0; }
.article-body ul:not(.store-links), .article-body ol { line-height: 1.7; }
.article-body li { margin-bottom: .7rem; }
.article-figure img { width: 100%; height: auto; }
.related-guides { padding: 1.5rem; margin-top: 3.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.related-guides h2 { font-size: 1.5rem; }
.related-guides ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.article-body .article-cta { padding: 2rem; }
.plan-template { padding: 1.5rem; background: var(--sage); border: 1px solid var(--border); border-radius: var(--radius); }
.plan-template dl { margin: 1rem 0 0; }
.plan-template dt { font-weight: 700; margin-top: 1.1rem; }
.plan-template dd { margin: .3rem 0 0; color: var(--muted); }
.comparison-scroll { max-width: 100%; overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: .75rem; }
.service-table { width: 100%; min-width: 37rem; border-collapse: collapse; font-size: .95rem; line-height: 1.6; }
.service-table caption { text-align: left; font-weight: 700; color: var(--green); padding: 1rem; }
.service-table th, .service-table td { text-align: left; vertical-align: top; padding: 1rem; border-top: 1px solid var(--border); }
.service-table thead th { background: var(--sage); }
.service-table td { color: var(--muted); }
.guide-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; padding-block: 4rem; }
.guide-index-card { padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: white; }
.guide-index-card h2 { font-size: clamp(1.6rem,2.5vw,2rem); margin-block: 1rem; line-height: 1.2; }
.guide-index-card h2 a { color: var(--text); text-decoration: none; }
.guide-index-card h2 a:hover { text-decoration: underline; }
.guide-index-card p { color: var(--muted); }
.guide-hub-cta { padding-block: 4rem; background: var(--sage); }
.guide-hub-cta p { margin-top: 1.25rem; color: var(--muted); }
@media(max-width:48rem) { .guide-index { grid-template-columns: 1fr; } .guide-index-card { padding: 1.5rem; } .article-body .article-cta { padding: 1.5rem; } }