/* ============================================================
   lab.coupons — guide stylesheet
   Loaded after styles.css on /guides/ pages. Uses the design
   tokens defined in styles.css (indigo / emerald / amber).
   Covers exactly the classes emitted by src/guides.js:
   guide, guide-header, guide-list-header, guide-body,
   key-takeaways, guide-faqs, faq, guide-citations,
   related-tests, related-guides, guide-cluster, card, card-grid,
   lead, meta.
   ============================================================ */

.guide{max-width:860px;margin:0 auto}

/* ---------- Guide article header ---------- */
.guide-header{margin:34px 0 30px}
.guide-header h1{margin:0 0 12px;font-size:clamp(1.7rem,1.3rem + 2vw,2.6rem);
  line-height:1.14;font-weight:800;letter-spacing:-.03em}
.guide-header h1::after{content:"";display:block;width:72px;height:5px;border-radius:3px;
  margin-top:16px;background:linear-gradient(90deg,var(--teal),var(--coral))}
.guide-header .lead{font-size:1.125rem;line-height:1.66;color:var(--muted);margin-bottom:16px}
.guide-header .meta{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:6px 14px;background:var(--teal-tint);border:1px dashed var(--border);
  border-radius:var(--radius-pill);font-size:.82rem;font-weight:600;color:var(--teal-strong)}

/* ---------- Guide hub header ---------- */
.guide-list-header{margin:36px 0 30px}
.guide-list-header h1{margin:0 0 12px;font-size:clamp(1.9rem,1.4rem + 2.4vw,2.8rem);
  line-height:1.1;font-weight:800;letter-spacing:-.03em}
.guide-list-header h1::after{content:"";display:block;width:72px;height:5px;border-radius:3px;
  margin-top:16px;background:linear-gradient(90deg,var(--teal),var(--coral))}
.guide-list-header .lead{font-size:1.1rem;line-height:1.7;color:var(--muted);
  max-width:70ch;margin-bottom:18px}

/* ---------- Guide hub clusters ---------- */
.guide-cluster{margin:0 0 40px}
.guide-cluster h2{position:relative;margin:0 0 18px;font-size:1.4rem;font-weight:700;
  letter-spacing:-.02em;padding-bottom:12px;border-bottom:2px dashed var(--border)}

/* ---------- Key takeaways (dashed coupon stub) ---------- */
.key-takeaways{margin:0 0 32px;padding:22px 26px;background:var(--surface);
  border:1px dashed var(--border);border-left:5px solid var(--teal);
  border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.key-takeaways h2{margin:0 0 12px;font-size:1.15rem;font-weight:700}
.key-takeaways ul{list-style:none;margin:0;padding:0}
.key-takeaways li{position:relative;margin-bottom:10px;padding-left:30px;
  line-height:1.62;font-size:.97rem}
.key-takeaways li:last-child{margin-bottom:0}
.key-takeaways li::before{content:"";position:absolute;left:2px;top:6px;width:8px;height:14px;
  border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(45deg)}

/* ---------- Guide body prose ---------- */
.guide-body h2{margin:40px 0 14px;font-size:clamp(1.35rem,1rem + 1vw,1.6rem);
  font-weight:700;letter-spacing:-.02em;scroll-margin-top:90px}
.guide-body h2::before{content:"";display:block;width:40px;height:4px;border-radius:3px;
  margin-bottom:12px;background:linear-gradient(90deg,var(--teal),var(--coral))}
.guide-body h3{margin:26px 0 8px;font-size:1.12rem;font-weight:700}
.guide-body p{margin:0 0 16px;line-height:1.72}
.guide-body ul,.guide-body ol{margin:0 0 18px;padding-left:24px}
.guide-body li{margin-bottom:7px}
.guide-body strong{color:var(--ink)}
.guide-body a{font-weight:600}
.guide-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.95rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  overflow:hidden}
.guide-body th,.guide-body td{border-bottom:1px solid var(--border-soft);padding:11px 14px;
  text-align:left;vertical-align:top}
.guide-body tr:last-child td{border-bottom:0}
.guide-body th{background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.guide-body td.num,.guide-body th.num{text-align:right;font-family:var(--font-num);
  font-variant-numeric:tabular-nums}
.guide-body blockquote{margin:0 0 22px;padding:16px 22px;background:var(--surface-2);
  border-left:4px solid var(--coral);border-radius:var(--radius-sm);color:var(--body)}
.guide-body blockquote p:last-child{margin-bottom:0}
.guide-body img{border-radius:var(--radius-sm)}

/* ---------- FAQ accordions ---------- */
.guide-faqs{margin-top:44px}
.guide-faqs h2{margin:0 0 16px;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.faq{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:15px 46px 15px 18px;font-weight:600;list-style:none;
  position:relative;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--teal-soft);color:var(--teal-strong);
  display:grid;place-items:center;font-weight:700;font-size:1rem}
.faq[open] summary::after{content:"\2013";background:var(--teal);color:#fff}
.faq p{margin:0;padding:0 18px 16px;line-height:1.7;color:var(--body)}

/* ---------- Citations / sources ---------- */
.guide-citations{margin-top:44px}
.guide-citations h2{margin:0 0 16px;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.guide-citations ul{margin:0;padding-left:22px;font-size:.92rem;color:var(--muted)}
.guide-citations li{margin-bottom:9px}

/* ---------- Related tests / guides ---------- */
.related-tests,.related-guides{margin-top:44px}
.related-tests h2,.related-guides h2{margin:0 0 16px;font-size:1.4rem;font-weight:700;
  letter-spacing:-.02em}
.related-tests ul,.related-guides ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 20px}
.related-tests li,.related-guides li{margin:0}
.related-tests a,.related-guides a{font-weight:600}
.related-tests p{margin-top:14px}

@media (max-width:640px){
  .guide-header,.guide-list-header{margin-bottom:22px}
  .guide-header h1{font-size:1.7rem}
  .related-tests ul,.related-guides ul{grid-template-columns:1fr}
}