/* Guides (/guides/*): plain-language how-tos for rescues (vault DECISIONS D-61).
   Colour routes through --r-guide-* roles mapped to the palette. */
.guide {
  --r-guide-band:   var(--stone);
  --r-guide-card:   var(--paper);
  --r-guide-rule:   var(--rule);
  --r-guide-kicker: var(--teal);
  --r-guide-mark:   var(--teal);
  --r-guide-later:  var(--teal-wash);
  background: var(--paper);
}
.guide-hero { padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); background: var(--r-guide-band); }
.guide-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin: .4rem 0 1rem; max-width: 18em; }
.guide-hero .lede { max-width: 40rem; line-height: 1.5; }
.guide-toc { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: 1.6rem; }
.guide-toc a { font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--ink); background: var(--r-guide-card);
  border: 1px solid var(--r-guide-rule); border-radius: 99px; padding: .4rem .85rem; }
.guide-toc a:hover { border-color: var(--r-guide-mark); }

.guide-sec { padding: clamp(2.6rem, 5vw, 3.8rem) 0; scroll-margin-top: 5rem; }
.guide-sec--alt { background: var(--r-guide-band); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem 3rem; align-items: start; }
.guide-copy { max-width: 42rem; }
.guide-copy p { line-height: 1.6; }
.guide-lead { font-size: 1.12rem; color: var(--ink); margin-top: 0; }
.guide-intro { max-width: 44rem; color: var(--ink-soft); margin: 0 0 1.6rem; line-height: 1.55; }
.guide-note { font-size: .88rem; color: var(--ink-soft); margin: 1.1rem 0 0; }

.guide-reasons, .guide-checklist { margin: 0; padding-left: 1.2rem; display: grid; gap: .85rem; line-height: 1.55; }
.guide-reasons li::marker { color: var(--r-guide-mark); }
.guide-checklist li::marker { color: var(--r-guide-mark); font-weight: 700; }

.guide-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.guide-pick { background: var(--r-guide-card); border: 1px solid var(--r-guide-rule); border-top: 3px solid var(--r-card-top);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; }
.guide-pick h3 { font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.guide-price { font-weight: 600; color: var(--ink); margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.guide-pick p { color: var(--ink-soft); line-height: 1.5; }
.guide-pick .arrow-link { margin-top: auto; padding-top: .4rem; }

.guide-reg { background: var(--r-guide-card); border: 1px solid var(--r-guide-rule); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 0 0 .9rem; max-width: 52rem; scroll-margin-top: 5rem; }
.guide-reg > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; flex-wrap: wrap; padding: 1.05rem 1.3rem; }
.guide-reg > summary::-webkit-details-marker { display: none; }
.guide-reg > summary::after { content: "+"; font-size: 1.3rem; font-weight: 600; color: var(--r-guide-mark); margin-left: auto; }
.guide-reg[open] > summary::after { content: "\2212"; }
.guide-reg > summary:focus-visible { outline: 3px solid var(--r-guide-mark); outline-offset: 2px; border-radius: var(--radius); }
.guide-reg-name { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.guide-reg-sum { font-size: .92rem; color: var(--ink-soft); }
.guide-steps { margin: 0; padding: 0 1.3rem .4rem 2.7rem; display: grid; gap: .9rem; line-height: 1.58; }
.guide-steps li::marker { color: var(--r-guide-mark); font-weight: 700; }
.guide-later { margin: .6rem 1.3rem 1.2rem; padding: .85rem 1rem; background: var(--r-guide-later); border-radius: 10px;
  font-size: .95rem; line-height: 1.55; }

@media (max-width: 900px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-picks { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .guide-steps { padding-left: 2.2rem; padding-right: 1rem; }
  .guide-reg > summary { padding: .95rem 1rem; }
  .guide-later { margin-left: 1rem; margin-right: 1rem; }
}
.guide-copy ul + p, .guide-copy ol + p { margin-top: 1.3rem; }
.guide code { font-size: .92em; background: var(--r-guide-later); border-radius: 5px; padding: .05em .35em; overflow-wrap: anywhere; }