/* The guide: a dark hero, then a paper reading column with a sticky contents list. */
.guide-page { background: var(--paper); }

.guide-hero { padding: clamp(120px, 16vw, 168px) 0 clamp(56px, 8vw, 88px); position: relative; overflow: hidden; }
.guide-hero-inner { position: relative; max-width: 980px; }
.guide-hero .display { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.02em; margin: 14px 0 20px; }
.guide-hero .display em { color: var(--mint); }
.guide-hero .lead { max-width: 680px; color: var(--dim); }

.guide-quick { list-style: none; counter-reset: q; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 40px 0 0; padding: 0; }
.guide-quick li { counter-increment: q; position: relative; padding: 18px 18px 18px 54px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 4px; }
.guide-quick li::before { content: counter(q); position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--mono); color: var(--ink); background: var(--mint); }
.guide-quick b { color: var(--cream); font-weight: 600; }
.guide-quick span { color: var(--dim); font-size: 14px; line-height: 1.45; }

.guide-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-width: 0; gap: clamp(32px, 5vw, 72px); padding-top: 64px; padding-bottom: 96px; color: var(--text); }

.guide-body > * { min-width: 0; }
.guide-toc { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.toc-title { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-paper); }
.guide-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--green); border-left-color: var(--mint-deep); }

.guide-article { max-width: 760px; }
.g-sec { position: relative; padding: 8px 0 56px; scroll-margin-top: 96px; border-bottom: 1px solid var(--line-paper); margin-bottom: 48px; }
.g-sec:last-child { border-bottom: 0; }
.g-num { font: 500 12px/1 var(--mono); color: var(--mint-deep); letter-spacing: 0.12em; margin: 0 0 10px; }
.g-num::before { content: "§ "; }
.g-sec h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 18px; color: var(--text); }
.g-sec h3 { font: 600 19px/1.3 var(--sans); margin: 32px 0 12px; color: var(--text); }
.g-sec h4 { font: 600 16px/1.3 var(--sans); margin: 0 0 6px; color: var(--text); }
.g-sec p, .g-sec li, .g-sec dd { font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.g-sec p { margin: 0 0 16px; }
.g-sec a { color: var(--green); text-underline-offset: 3px; }
.g-sec code { font: 14px/1 var(--mono); background: var(--raised); border: 1px solid var(--line-paper); border-radius: 6px; padding: 2px 6px; color: var(--text); overflow-wrap: anywhere; }
.g-sec .kbd { font: 500 13px/1.9 var(--sans); padding: 1px 8px; border-radius: 7px; background: var(--raised); border: 1px solid var(--line-paper); box-shadow: 0 1px 0 var(--line-paper); color: var(--text); white-space: nowrap; }
.g-path { font-weight: 600; color: var(--text); }

.g-steps { margin: 0 0 16px; padding-left: 20px; }
.g-steps li { margin: 0 0 12px; padding-left: 4px; }
.g-steps li::marker { color: var(--mint-deep); }
.g-steps b { color: var(--text); font-weight: 600; }

.g-note { padding: 16px 18px; border-radius: 14px; background: #e9f3ec; border: 1px solid #cfe5d7; color: var(--green-deep) !important; }
.g-note b { color: var(--green-deep); }
.g-note.warn { background: #fbf1df; border-color: #f0dcb4; color: #6b4a12 !important; }
.g-note.warn b { color: #6b4a12; }

.g-roles, .g-faq, .g-table { margin: 0 0 16px; display: grid; gap: 10px; }
.g-roles div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 16px; background: var(--raised); border: 1px solid var(--line-paper); border-radius: 14px; }
.g-roles dt { font: 600 15px/1.65 var(--sans); color: var(--green); }
.g-roles dd, .g-faq dd, .g-table dd { margin: 0; }

.g-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.g-card { padding: 18px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line-paper); }
.g-card:first-child { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 179, 92, 0.16); }
.g-card p { font-size: 15px; margin: 0; }

.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 20px; }
.g-two > div { padding: 18px 18px 6px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line-paper); }
.g-ticks { list-style: none; padding: 0; margin: 10px 0 0; }
.g-ticks li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 15px; line-height: 1.5; }
.g-ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; border-radius: 50%; }
.g-ticks.ask li::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(227, 179, 92, 0.22); }
.g-ticks.ok li::before { background: var(--mint-deep); box-shadow: 0 0 0 3px rgba(47, 154, 114, 0.18); }

.g-recipe { position: relative; padding: 24px 24px 10px; margin: 0 0 18px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-paper); scroll-margin-top: 96px; }
.g-recipe h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.g-recipe ol { margin: 0 0 14px; padding-left: 22px; }
.g-recipe li { margin-bottom: 10px; padding-left: 4px; }
.g-recipe li::marker { font: 600 14px var(--mono); color: var(--mint-deep); }
.g-recipe em { color: var(--text); }

.g-code { margin: 0 0 16px; padding: 18px 20px; border-radius: 14px; background: var(--stage); color: var(--cream); overflow-x: auto; }
.g-code code { font: 13.5px/1.7 var(--mono); background: none; border: 0; padding: 0; color: inherit; white-space: pre; }

.g-faq div { padding: 16px 18px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-paper); }
.g-faq dt { font: 600 16px/1.4 var(--sans); color: var(--text); margin-bottom: 4px; }
.g-table div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-paper); }
.g-table dt { font-weight: 600; color: var(--text); font-size: 15px; }

@media (max-width: 1020px) {
  .guide-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-body { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .guide-toc { position: static; }
  .guide-toc ol { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .guide-toc a { border: 1px solid var(--line-paper); border-radius: 999px; padding: 6px 12px; margin: 0; background: var(--raised); }
}
@media (max-width: 700px) {
  .guide-quick, .g-cards, .g-two { grid-template-columns: 1fr; }
  .g-roles div, .g-table div { grid-template-columns: 1fr; gap: 4px; }
  .g-recipe { padding: 20px 18px 6px; }
}
@media (prefers-reduced-motion: reduce) { .guide-toc a { transition: none; } }