/* Guide pages (2026-10-26): long-form how-to pages for search and answer engines. Builds on styles.css + org.css tokens. */
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ink-2); font-size: .95rem; margin-top: 18px; }
.guide-meta .by { color: var(--ink); font-weight: 600; }
.answer { max-width: 70ch; margin: 0 0 2.4em; padding: 22px 24px; border-radius: var(--r-card); background: var(--mist); border: 1px solid var(--rule); font-size: 1.08rem; line-height: 1.65; }
.answer b { display: block; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }
.prose.v4 ol.steps { list-style: none; counter-reset: st; padding: 0; margin: 0 0 1.4em; display: grid; gap: 18px; }
.prose.v4 ol.steps > li { counter-increment: st; position: relative; padding-left: 44px; }
.prose.v4 ol.steps > li::before { content: counter(st); position: absolute; left: 0; top: .05em; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .9rem; font-weight: 600; display: grid; place-items: center; }
.prose.v4 ol.steps > li > strong:first-child { display: block; }
.table-wrap { overflow-x: auto; margin: 0 0 1.6em; }
.prose.v4 table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.prose.v4 th, .prose.v4 td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--rule); }
.prose.v4 th { font-weight: 600; white-space: nowrap; }
.copybox { margin: 0 0 1.6em; padding: 18px 20px; border-radius: var(--r); background: var(--white); border: 1px dashed var(--rule); font-size: .98rem; line-height: 1.6; white-space: pre-line; }
.prose.v4 details { border-top: 1px solid var(--rule); padding: 14px 0; }
.prose.v4 details:last-of-type { border-bottom: 1px solid var(--rule); }
.prose.v4 summary { cursor: pointer; font-weight: 600; }
.prose.v4 details p { margin: 10px 0 0; }
.author { max-width: 70ch; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; margin-top: 3em; padding-top: 24px; border-top: 1px solid var(--rule); font-size: .95rem; color: var(--ink-2); }
.author .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-family: var(--display); font-size: 1.4rem; }
.author strong { color: var(--ink); }
.guide-cta { max-width: 70ch; margin: 2.6em 0 0; padding: 24px; border-radius: var(--r-card); background: var(--night); color: var(--on-night); display: grid; gap: 12px; }
.guide-cta p { margin: 0; color: var(--on-night-2); }
.guide-cta h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--on-night); }
.guide-cta .btn { justify-self: start; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 70ch; }
.guide-list a { display: block; padding: 18px 20px; border-radius: var(--r-card); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); background: var(--white); }
.guide-list a:hover { border-color: var(--coral); }
.guide-list b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin-bottom: 4px; }
.guide-list span { color: var(--ink-2); font-size: .97rem; }
.crumbs { font-size: .9rem; color: var(--ink-2); margin-bottom: 12px; }
.crumbs a { color: inherit; }