/* Crawlable content sections under the tools: example lists, how-to, FAQ, related links. */
.guide { max-width: 860px; margin: 56px auto 0; }
.guide > h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); text-transform: uppercase; border-bottom: 3px double var(--ink); padding-bottom: 10px; margin: 46px 0 14px; }
.guide > h2:first-child { margin-top: 0; }
.guide > p { color: #3b3830; max-width: 720px; }
.guide h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin: 26px 0 10px; display: inline-block; background: var(--accent-2); color: #fff; padding: 3px 10px; border-radius: 2px; }

/* Copyable example lists */
.copy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.copy-list li { background: var(--card-hi); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--ink); padding: 12px 14px 12px 16px; display: flex; gap: 12px; align-items: flex-start; }
.copy-list li p { margin: 0; flex: 1; }
.copy-list button { flex: none; font: 700 .72rem var(--font-head); text-transform: uppercase; border: 1.5px solid var(--ink); background: var(--bg); border-radius: 3px; padding: 5px 9px; cursor: pointer; }
.copy-list button:hover { background: var(--accent); }
.copy-list.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.copy-list.compact li { padding: 10px 12px; align-items: center; }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { counter-increment: step; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: 16px; position: relative; padding-top: 40px; }
.steps li::before { content: counter(step); position: absolute; top: 10px; left: 14px; font: 700 1rem var(--font-head); background: var(--accent); border: 2px solid var(--ink); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 2px; }

/* FAQ */
.faq details { border: 2px solid var(--ink); border-radius: var(--radius); background: var(--card-hi); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.1rem var(--font-head); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 16px 14px; color: #3b3830; }

/* Related tools */
.related { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.related a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--ink); text-decoration: none; color: var(--ink); font-weight: 600; }
.related a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.related span { font-size: 1.5rem; }