/* Guide-page extras. The page chrome (body, header, .content, typography,
   tables, tip/warn, footer) and the whole palette live in site.css, which
   every guide page loads first. Only what is unique to the guides is here. */

.content .lede { font-size: 16.5px; line-height: 1.7; color: var(--ink); }

/* Breadcrumb above the article title. */
.content .crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.content .crumbs a { color: var(--muted); text-decoration: none; }
.content .crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* Call-to-action panel dropped mid-article and at the end. */
.content .cta-box { border: 1px solid var(--border); background: var(--accent-tint); border-radius: 10px; padding: 22px 26px; margin: 30px 0; text-align: center; }
.content .cta-box p { margin: 0 0 14px 0; font-size: 14.5px; color: var(--ink); }
.content .cta-box a.go { display: inline-block; padding: 10px 26px; background: var(--accent); color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600; transition: background .15s; }
.content .cta-box a.go:hover { background: var(--accent-dk); color: #fff; }

/* Guides index cards. */
.content .card-list { display: grid; gap: 14px; margin-top: 22px; }
.content .card { border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; transition: border-color .15s, box-shadow .15s; }
.content .card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(180,85,47,0.10); }
.content .card h3 { margin: 0 0 7px 0; font-size: 17px; }
.content .card h3 a { color: var(--ink); text-decoration: none; }
.content .card h3 a:hover { color: var(--accent); }
.content .card p { margin: 0; font-size: 14px; color: var(--muted); }