.guide-body { --sand: #f4f7f1; background: var(--paper); }
.guide-header {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 34px; align-items: center;
  padding: 38px max(5vw, 30px); color: white;
  background: radial-gradient(circle at 90% 10%, rgba(201,223,114,.18), transparent 25%), linear-gradient(135deg, var(--forest), #0d2f20);
}
.guide-header img { width: 190px; }
.guide-header h1 { margin: 8px 0 7px; font: 500 clamp(30px, 4vw, 48px)/1 Georgia, serif; }
.guide-header p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.7); }
.guide-content { width: min(1180px, calc(100% - 36px)); margin: 36px auto 80px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 38px; }
.guide-index { position: sticky; top: 20px; align-self: start; display: grid; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.guide-index strong { margin-bottom: 9px; color: var(--forest); font: 500 18px Georgia, serif; }
.guide-index a { padding: 7px 0; color: var(--muted); font-size: 12px; }
.guide-article section { scroll-margin-top: 20px; margin-bottom: 18px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.guide-article h2 { margin: 7px 0 17px; font: 500 30px Georgia, serif; }
.guide-article h3 { margin: 18px 0 10px; color: var(--forest); font: 500 22px Georgia, serif; }
.guide-article p { color: var(--muted); line-height: 1.65; }
.guide-article b { color: var(--forest); }
.guide-article code { padding: 2px 5px; border-radius: 4px; color: var(--forest); background: var(--sand); }
.guide-callout, .guide-warning { margin: 12px 0; padding: 18px; border-radius: 11px; background: var(--sand); }
.guide-callout strong, .guide-warning strong { color: var(--forest); }
.guide-callout p, .guide-warning p { margin: 5px 0 0; }
.guide-warning { border-left: 4px solid #b76b55; }
.guide-steps { display: grid; gap: 10px; padding-left: 22px; color: var(--muted); line-height: 1.55; }
.guide-steps li::marker { color: var(--leaf); font-weight: 800; }
.example-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
.example-grid > div { padding: 14px; border-radius: 10px; background: var(--sand); }
.example-grid .wide { grid-column: 1 / -1; }
.example-grid span, .example-grid strong { display: block; }
.example-grid span { margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.example-grid strong { color: var(--forest); }
.expected-result { padding: 18px; border-radius: 11px; color: white; background: var(--forest); }
.expected-result span, .expected-result strong { display: block; }
.expected-result span { margin-bottom: 7px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.guide-checklist { display: grid; gap: 10px; padding: 0; list-style: none; }
.guide-checklist li { position: relative; padding: 13px 15px 13px 42px; border-radius: 9px; color: var(--muted); background: var(--sand); }
.guide-checklist li::before { content: "✓"; position: absolute; left: 15px; color: var(--leaf); font-weight: 900; }
@media (max-width: 850px) {
  .guide-header { grid-template-columns: 1fr; gap: 18px; }
  .guide-header img { width: 150px; }
  .guide-header .primary-button { justify-self: start; }
  .guide-content { grid-template-columns: 1fr; }
  .guide-index { position: static; grid-template-columns: repeat(2, 1fr); }
  .guide-index strong { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .guide-header { padding: 28px 20px; }
  .guide-content { width: calc(100% - 24px); margin-top: 18px; }
  .guide-index { display: none; }
  .guide-article section { padding: 22px 18px; }
  .example-grid { grid-template-columns: 1fr; }
  .example-grid .wide { grid-column: auto; }
}