.guide-page {
  background:
    linear-gradient(rgba(88, 255, 125, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 255, 125, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 86% 5%, rgba(105, 231, 248, 0.09), transparent 28rem),
    var(--bg);
  background-size: 36px 36px, 36px 36px, auto, auto;
}

.guide-hero {
  display: grid;
  min-height: 31rem;
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.6fr);
  padding-block: clamp(4.5rem, 11vw, 8rem) 3rem;
}

.guide-kicker,
.guide-route,
.guide-meta,
.guide-card span,
.guide-toc > p {
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.guide-hero h1 {
  max-width: 15ch;
  margin: 0.45rem 0 1rem;
  font-family: var(--mono);
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.07em;
  line-height: 0.94;
}

.guide-lede { max-width: 49rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.guide-meta { color: var(--dim); }

.guide-toc {
  border: 1px solid var(--line-hot);
  border-top: 3px solid var(--cyan);
  background: rgba(4, 8, 6, 0.82);
  padding: 1.25rem;
}

.guide-toc ol { margin: 0.8rem 0 0; padding-left: 1.4rem; }
.guide-toc li { border-top: 1px solid var(--line); padding: 0.55rem 0; }
.guide-toc a { color: var(--muted); text-decoration: none; }
.guide-toc a:hover { color: var(--green); }

.guide-body { border-block: 1px solid var(--line); background: rgba(4, 8, 6, 0.42); padding-block: 4rem 6rem; }
.guide-layout { display: grid; align-items: start; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: minmax(0, 1fr) 17rem; }
.guide-copy { max-width: 48rem; }
.guide-copy section { scroll-margin-top: 7rem; margin-bottom: 4rem; }
.guide-copy h2 { margin: 0 0 1rem; font: 750 clamp(1.7rem, 4vw, 2.8rem)/1.05 var(--mono); letter-spacing: -0.045em; }
.guide-copy h3 { margin-top: 2rem; font: 700 1.05rem var(--mono); }
.guide-copy p,
.guide-copy li { color: var(--muted); }
.guide-copy li + li { margin-top: 0.55rem; }
.guide-copy strong { color: var(--text); }

.guide-steps { padding-left: 0; counter-reset: guide-step; list-style: none; }
.guide-steps > li { position: relative; min-height: 4rem; border-top: 1px solid var(--line); counter-increment: guide-step; padding: 1rem 0 1rem 3.4rem; }
.guide-steps > li::before { position: absolute; left: 0; color: var(--cyan); content: counter(guide-step, decimal-leading-zero); font: 800 1.15rem var(--mono); }

.guide-callout { border: 1px solid var(--line-hot); border-left: 3px solid var(--yellow); background: var(--panel); margin: 1.5rem 0; padding: 1rem 1.2rem; }
.guide-callout p { margin: 0; }
.guide-callout-danger { border-left-color: var(--danger); }
.guide-cta { display: inline-flex; border: 1px solid var(--green); background: var(--green); color: var(--bg-deep); font: 800 0.78rem var(--mono); padding: 0.75rem 0.95rem; text-decoration: none; text-transform: uppercase; }
.guide-cta:hover { background: transparent; color: var(--green); }

.guide-related { position: sticky; top: 6rem; }
.guide-related h2 { font: 700 0.78rem var(--mono); text-transform: uppercase; }
.guide-related a { display: block; border-top: 1px solid var(--line); color: var(--muted); padding: 0.7rem 0; text-decoration: none; }
.guide-related a:hover { color: var(--green); }

.guides-index { padding-block: 5rem; }
.guide-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-card { min-height: 17rem; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 1.4rem; text-decoration: none; }
.guide-card:hover { border-color: var(--green); color: var(--text); }
.guide-card h2 { max-width: 18ch; margin: 2.5rem 0 0.8rem; font: 750 clamp(1.5rem, 3vw, 2.2rem)/1.05 var(--mono); letter-spacing: -0.04em; }
.guide-card p { color: var(--muted); }

@media (max-width: 800px) {
  .guide-hero,
  .guide-layout { grid-template-columns: 1fr; }
  .guide-hero { min-height: 0; padding-top: 4rem; }
  .guide-related { position: static; border-top: 1px solid var(--line); padding-top: 1rem; }
  .guide-grid { grid-template-columns: 1fr; }
}