/* ============================================================
   DOCS LAYER — documentation-first treatment for article pages
   Loaded AFTER blog.css. Converts the magazine article into a
   ChatGPT-Learn / Stripe-Docs reading experience:
   · no cover illustrations, no hero artwork, no decorative glow
   · clean left-aligned header with a tight metadata row
   · a sticky "On this page" Table of Contents (auto-built in JS)
   · Key takeaways + Quick answer kept, restyled as docs blocks
   · email-capture / newsletter blocks removed; WhatsApp kept
   ============================================================ */

/* ---------- 0 · CALM DOCS: no decorative fade-in ---------- */
/* docs.css loads only on article pages, so this disables the scroll-reveal
   animation for article content — content is always visible (better for
   reading, SEO, print and background-tab loads). */
.reveal { opacity: 1 !important; transform: none !important; }

/* ---------- 1 · STRIP THE MAGAZINE DECORATION ---------- */
.art-hero .hero-bg { display: none !important; }        /* decorative gradient glow */
.art-cover { display: none !important; }                 /* giant cover illustration */
.art-magnet { display: none !important; }                /* email lead-magnet capture */
#newsletter { display: none !important; }                /* newsletter section */
.b-hero .hero-bg { display: none !important; }

/* ---------- 2 · DOCS HEADER ---------- */
.art-hero {
  padding-top: clamp(20px, 3vw, 34px);
  padding-bottom: 0;
  border-bottom: 0;
}
.art-head { max-width: 768px; }
.art-head .crumb { font-size: 13px; }
.art-head .tag {
  margin-top: 20px;
  background: var(--brand-50);
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent);
  font-size: 12px; letter-spacing: .02em; white-space: nowrap;
}
.art-head h1 {
  margin-top: 14px;
  font-size: clamp(31px, 3.7vw, 44px);
  line-height: 1.1;
  letter-spacing: -.022em;
}
.art-head .standfirst {
  margin-top: 16px;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--body);
  line-height: 1.5;
  max-width: 64ch;
}

/* Metadata row — slim, docs-style. Avatar kept small for E-E-A-T. */
.art-byline {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 11px;
}
.art-byline .by-av { width: 34px; height: 34px; font-size: 12px; }
.art-byline .bi b { font-size: 14px; }
.art-byline .bi small { font-size: 12.5px; color: var(--muted); }

/* ---------- 3 · TWO-COLUMN DOCS SHELL ---------- */
/* The prose stays a centered 768px measure. The TOC floats in the
   right gutter (fixed, never disturbs flow) on wide screens only. */
.doc-toc {
  position: fixed;
  top: 104px;
  left: calc(50% + 400px);
  width: 200px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 24px 0;
  display: none;                 /* shown ≥1280px via media query */
  z-index: 5;
}
.doc-toc .dt-label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 0 12px 14px;
}
.doc-toc ul { display: flex; flex-direction: column; gap: 1px; }
.doc-toc a {
  display: block;
  padding: 6px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  font-weight: 500;
  border-left: 2px solid var(--line);
  transition: color .15s var(--ease), border-color .15s var(--ease);
  text-decoration: none;
}
.doc-toc a:hover { color: var(--ink-2); }
.doc-toc a.is-active {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 600;
}

/* reading-progress sliver at the very top of the viewport */
.doc-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brand); z-index: 60;
  transition: width .08s linear;
}

@media (min-width: 1280px) {
  .doc-toc { display: block; }
}

/* ---------- 4 · INLINE "ON THIS PAGE" (narrow screens) ---------- */
.doc-toc-inline {
  max-width: 768px;
  margin: 30px auto 0;
  border-radius: var(--r-md);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.doc-toc-inline summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}
.doc-toc-inline summary::-webkit-details-marker { display: none; }
.doc-toc-inline summary [data-lucide="list"] { width: 17px; height: 17px; color: var(--brand); }
.doc-toc-inline summary .dti-chev { margin-left: auto; width: 17px; height: 17px; color: var(--muted); transition: transform .2s var(--ease); }
.doc-toc-inline[open] summary .dti-chev { transform: rotate(180deg); }
.doc-toc-inline ol {
  list-style: none; counter-reset: toc;
  padding: 2px 20px 18px; margin: 0;
  display: grid; gap: 2px;
}
.doc-toc-inline li { counter-increment: toc; padding: 0; margin: 0; }
.doc-toc-inline li::before { content: none; }
.doc-toc-inline a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px 6px;
  font-size: 15px; color: var(--ink-2); font-weight: 500;
  border-radius: 8px; text-decoration: none;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.doc-toc-inline a:hover { background: var(--surface); color: var(--brand); }
.doc-toc-inline a::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--brand-300); font-size: 13px; flex: none;
}
@media (min-width: 1280px) {
  .doc-toc-inline { display: none; }   /* rail replaces it on wide screens */
}

/* anchored-heading offset so sticky header doesn't clip jump targets */
.prose h2[id] { scroll-margin-top: 92px; }

/* ---------- 5 · KEY TAKEAWAYS / QUICK ANSWER as docs blocks ---------- */
/* tighten the existing components a touch for the calmer docs rhythm */
.art-takeaways { box-shadow: inset 0 0 0 1px var(--line); }
.art-summary { border-radius: var(--r-md); }

/* ---------- 6 · RELATED GUIDES → text list (no covers) ---------- */
/* drop cover images from the related-guides cards so listings are
   typography-first, matching the new Learn Center. */
.latest-main.cols3 .bpost .cover { display: none !important; }
.latest-main.cols3 .bpost { box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-md); }
.latest-main.cols3 .bpost .pbody { padding: 22px 22px 24px; gap: 10px; }
.latest-main.cols3 .bpost h4 { font-size: 17.5px; }
/* hide author avatar+name on related cards; keep just the date as meta */
.latest-main.cols3 .bpost .byline .by-av { display: none; }
.latest-main.cols3 .bpost .byline { gap: 0; padding-top: 2px; }
.latest-main.cols3 .bpost .byline .bi b { display: none; }
.latest-main.cols3 .bpost .byline .bi small { color: var(--muted); font-size: 12.5px; }

/* ---------- 7 · WHATSAPP-LED FINAL CTA stays, slightly calmer ---------- */
.art-final { border-radius: var(--r-md); }

@media (max-width: 560px) {
  .art-head h1 { font-size: clamp(27px, 7vw, 34px); }
}