/* =====================================================================
   blog-extras.css
   Reading-experience layer for blog posts. Loaded only on pages where
   `blog: true` is set in frontmatter. Maps the source dump's token names
   onto the UI Compass green palette and uses inline SVG (no Font Awesome).
   Add-on to blog.css; do not duplicate selectors that already live there.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Token map — scoped block-level so we do not pollute root.css globals
   --------------------------------------------------------------------- */
.blog-article,
.post-share-rail,
.tldr-box,
.faq-accordion,
.tooltip-term,
.copy-toast,
.tts-mini-player,
.print-header,
.print-footer,
.go-top-progress,
.focus-exit-btn,
body.focus-mode {
  --be-primary:        var(--primary, #006940);
  --be-primary-soft:   rgba(0, 105, 64, 0.08);
  --be-primary-line:   rgba(0, 105, 64, 0.32);
  --be-navy:           #1a1a1a;
  --be-accent:         #d97706;
  --be-accent-soft:    #fef3c7;
  --be-accent-line:    #fcd34d;
  --be-bg:             var(--bodyTextColorWhite, #ffffff);
  --be-bg-soft:        #f7f7f7;
  --be-bg-raised:      #f1f5f9;
  --be-border:         #e5e7eb;
  --be-text:           var(--headerColor, #1e293b);
  --be-text-muted:     #64748b;
  --be-text-faint:     #7a7889;
  --be-success:        #16a34a;
  --be-radius-sm:      8px;
  --be-radius-md:      12px;
  --be-radius-lg:      16px;
  --be-shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --be-shadow-md:      0 4px 12px rgba(15,23,42,.08);
  --be-shadow-lg:      0 10px 28px rgba(15,23,42,.16);
}

body.dark-mode .blog-article,
body.dark-mode .post-share-rail,
body.dark-mode .tldr-box,
body.dark-mode .faq-accordion,
body.dark-mode .copy-toast,
body.dark-mode .tts-mini-player,
body.dark-mode .focus-exit-btn,
body.dark-mode.focus-mode {
  --be-bg:             var(--medium, #1f1f1f);
  --be-bg-soft:        var(--dark, #121212);
  --be-bg-raised:      rgba(255,255,255,0.06);
  --be-border:         rgba(255,255,255,0.10);
  --be-text:           var(--bodyTextColorWhite, #ffffff);
  --be-text-muted:     rgba(255,255,255,0.72);
  --be-text-faint:     rgba(255,255,255,0.5);
  --be-shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --be-shadow-lg:      0 12px 32px rgba(0,0,0,0.55);
}

/* Banner fallback + Print Guide button + Post-meta block live in blog.css
   (FOUC-safe section) so the above-the-fold chrome paints with its tokens
   before this async stylesheet arrives. Edit those rules in blog.css. */

/* The featured-card sidebar styles live in blog.css now — the blog index
   page doesn't load this async stylesheet, so leaving them here was making
   the sidebar image overflow on /blog/. */

/* The post-meta share row + reading-time strip + Focus/Listen pills live in
   blog.css (FOUC-safe section). The share dropdown is hidden until clicked,
   so it stays here. */

/* ---------------------------------------------------------------------
   2. SHARE DROPDOWN
   --------------------------------------------------------------------- */
.share-wrapper {
  position: relative;
  z-index: 30;
}
.share-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  background: var(--be-bg, #ffffff);
  background-color: var(--be-bg, #ffffff);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  box-shadow: var(--be-shadow-lg);
  color: var(--be-text, #1e293b);
  min-width: 12rem;
  padding: 0.4rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 10030;
  isolation: isolate;
}
.share-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.share-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  color: var(--be-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.share-option:hover { background: var(--be-bg-soft); }
.share-option svg {
  width: 1rem;
  height: 1rem;
  color: var(--be-text-muted);
  flex: none;
}
.share-option:hover svg { color: var(--be-primary); }
.share-divider {
  border: none;
  border-top: 1px solid var(--be-border);
  margin: 0.4rem 0;
}
body.dark-mode .share-dropdown {
  background: var(--be-bg, #1f1f1f);
  background-color: var(--be-bg, #1f1f1f);
  color: var(--be-text, #ffffff);
}

/* ---------------------------------------------------------------------
   3. FOCUS MODE (hides chrome, narrows article column)
   --------------------------------------------------------------------- */
body.focus-mode #cs-navigation,
body.focus-mode #banner-1106-14,
body.focus-mode .toc-sidebar,
body.focus-mode .toc-mobile,
body.focus-mode .post-crumbs,
body.focus-mode .post-share,
body.focus-mode .post-share-rail,
body.focus-mode #cs-footer-309,
body.focus-mode #contact-1392,
body.focus-mode .pb-go-top-progress,
body.focus-mode [data-pwa-notify-toggle],
body.focus-mode .audit-fab,
body.focus-mode .blog-sidebar {
  display: none !important;
}
/* In focus mode, keep the read-time + Listen on the right of the meta row
   (Exit focus replaces the Focus button in the corner, so the Focus pill is
   redundant here). */
body.focus-mode #focusModeBtn { display: none !important; }
body.focus-mode .blog-with-toc {
  display: block !important;
  max-width: 46rem !important;
  margin: 0 auto !important;
  padding-top: 4rem;
}
/* Collapse the 3-column body grid back to a single block in focus mode so
   the article reads as one column inside the centered card. */
body.focus-mode .blog-article-body {
  display: block !important;
  margin-top: 0 !important;
}
body.focus-mode .blog-article {
  background: var(--be-bg);
  border-radius: var(--be-radius-lg);
  box-shadow: var(--be-shadow-lg);
  padding: 2rem;
}

.focus-exit-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  background: var(--be-bg);
  border: 1px solid var(--be-border);
  border-radius: 999px;
  color: var(--be-text);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--be-shadow-md);
  z-index: 10001;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.focus-exit-btn:hover {
  background: var(--be-primary);
  border-color: var(--be-primary);
  color: #fff;
}
.focus-exit-btn svg { width: 0.95rem; height: 0.95rem; flex: none; }
body.focus-mode .focus-exit-btn { display: inline-flex; }

/* The .tldr-box rules live in blog.css (FOUC-safe section) since it sits
   above the fold. Edit there. */

/* ---------------------------------------------------------------------
   5. FAQ ACCORDION (native <details>)
   --------------------------------------------------------------------- */
.faq-section {
  background: var(--be-bg);
  border-radius: var(--be-radius-lg);
  border: 1px solid var(--be-border);
  box-shadow: var(--be-shadow-md);
  overflow: hidden;
  margin: 2rem 0;
}
.faq-section-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--be-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.faq-section-header svg { width: 1rem; height: 1rem; color: var(--be-accent); }
.faq-section-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--be-text);
}
.faq-section-body { padding: 1rem 1.5rem 1.5rem; }
.faq-accordion { margin: 0; }
.faq-item {
  background: var(--be-bg-soft);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  color: var(--be-text);
  list-style: none;
  transition: background 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--be-primary);
  transition: transform 0.2s;
  margin-left: 0.75rem;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { background: var(--be-bg); }
.faq-item[open] summary { border-bottom: 1px solid var(--be-border); }
.faq-answer {
  padding: 1rem 1.25rem;
  background: var(--be-bg);
  color: var(--be-text-muted);
  line-height: 1.7;
}
.faq-answer p { margin-bottom: 0.75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a {
  color: var(--be-primary);
  font-weight: 500;
}
.faq-answer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   6. JARGON TOOLTIPS
   --------------------------------------------------------------------- */
.tooltip-term {
  border-bottom: 1px dotted var(--be-accent);
  cursor: help;
  position: relative;
  color: var(--be-primary);
  font-weight: 500;
}
.tooltip-term:hover { color: var(--be-accent); }
.tooltip-term::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--be-navy);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 18rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  box-shadow: var(--be-shadow-md);
  line-height: 1.4;
}
.tooltip-term:hover::after,
.tooltip-term:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
@media print {
  .tooltip-term { border-bottom: none; color: inherit; }
  .tooltip-term::after { display: none; }
}

/* ---------------------------------------------------------------------
   7. COPY TOAST + RESUME-READING TOAST (shared)
   --------------------------------------------------------------------- */
.copy-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 6rem);
  background: var(--be-navy);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
  box-shadow: var(--be-shadow-lg);
}
.copy-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
/* ---------------------------------------------------------------------
   8. LISTEN / TTS MINI PLAYER
   --------------------------------------------------------------------- */
.tts-active {
  background: linear-gradient(120deg, rgba(217, 119, 6, 0.18), rgba(0, 105, 64, 0.12));
  border-radius: 4px;
  padding: 0 2px;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.20);
  transition: background 0.1s;
}
.tts-mini-player {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem 0.75rem;
  background: var(--be-primary);
  border: 1px solid var(--be-primary);
  border-radius: 999px;
  box-shadow: var(--be-shadow-lg);
  color: #fff;
  z-index: 10020;
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
}
.tts-mini-player.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.tts-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tts-mini-btn:hover {
  background: #fff;
  color: var(--be-primary);
  border-color: #fff;
}
.tts-mini-btn svg { width: 0.95rem; height: 0.95rem; }
.tts-mini-status {
  font-size: 0.85rem;
  color: #fff;
  padding: 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .tts-mini-player {
    width: calc(100vw - 1rem);
    justify-content: center;
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .tts-mini-status { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------------------
   9. SAVED / BOOKMARKS PAGE
   --------------------------------------------------------------------- */
.saved-page {
  width: 94%;
  max-width: 70rem;
  margin: 4rem auto 6rem;
}
.saved-page h1 {
  color: var(--be-text);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  margin-bottom: 0.5rem;
}
.saved-page .saved-sub {
  color: var(--be-text-muted);
  margin-bottom: 2rem;
}
.saved-toolbar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--be-bg-soft);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
}
.saved-toolbar input,
.saved-toolbar select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-sm);
  background: var(--be-bg);
  color: var(--be-text);
  font: inherit;
  font-size: 0.9rem;
}
.saved-toolbar input { flex: 1; min-width: 12rem; }
.saved-toolbar input:focus,
.saved-toolbar select:focus {
  outline: 2px solid var(--be-primary);
  outline-offset: 1px;
  border-color: var(--be-primary);
}
.saved-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--be-text-muted);
  background: var(--be-bg-soft);
  border: 1px dashed var(--be-border);
  border-radius: var(--be-radius-md);
}
.saved-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.saved-card {
  padding: 1.25rem 1.5rem;
  background: var(--be-bg);
  border: 1px solid var(--be-border);
  border-radius: var(--be-radius-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.saved-card:hover {
  border-color: var(--be-primary);
  box-shadow: var(--be-shadow-md);
}
.saved-card a {
  color: var(--be-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
}
.saved-card a:hover { color: var(--be-primary); }
.saved-card p {
  color: var(--be-text-muted);
  margin: 0.4rem 0 0;
  line-height: 1.5;
  font-size: 0.95rem;
}
.saved-card .saved-meta {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.saved-card .saved-meta time {
  font-size: 0.8rem;
  color: var(--be-text-faint);
}
.saved-card .saved-remove {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--be-text-faint);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.saved-card .saved-remove:hover { color: #dc2626; }

/* (Removed: standalone .related-guides bottom-of-article block.
   Related posts now render as a second .blog-featured-group in the sidebar
   via featured-post.html, reusing the .featured-card styling above.) */

/* ---------------------------------------------------------------------
   11. PRINT EXTRAS (header + QR footer)
   --------------------------------------------------------------------- */
.print-header,
.print-footer {
  display: none;
}
@media print {
  /* Page setup — generous margins, no header/footer junk from the browser
     (browser usually adds its own URL/date headers; that's user-controlled). */
  @page { margin: 0.6in 0.65in; }

  /* ----- Hide everything that isn't the article ----- */
  #cs-navigation,
  #cs-footer-309,
  #contact-1392,
  .post-share,
  .post-readtime,
  .post-quick-actions,
  .toc-sidebar,
  .toc-mobile,
  .pb-go-top-progress,
  .focus-exit-btn,
  .audit-fab,
  [data-audit-dialog],
  [data-pwa-notify-toggle],
  .pwa-notify-toggle,
  .tts-mini-player,
  .copy-toast,
  .blog-sidebar,                   /* Featured Posts column */
  .banner-print-btn,
  #banner-1106-14 .cs-background,  /* Decorative hero photo behind the title */
  #banner-1106-14 .cs-breadcrumbs, /* Redundant with print-header URL */
  .blog-mainImage,                 /* Decorative hero image inside the article */
  .post-meta-avatar {              /* Photos waste ink at print res */
    display: none !important;
  }

  /* ----- Page basics ----- */
  body {
    background: #fff !important;
    color: #000 !important;
    font: 11pt/1.55 Georgia, "Times New Roman", serif;
  }

  /* ----- Banner — collapse, light background, dark text ----- */
  #banner-1106-14 {
    background: #fff !important;
    background-image: none !important;
    padding: 0 0 0.2in !important;
    margin: 0 0 0.2in !important;
    border-bottom: 2pt solid #333 !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  #banner-1106-14 .cs-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
  }
  #banner-1106-14 .cs-int-title {
    color: #000 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 22pt !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* ----- Layout: single column, full width ----- */
  .blog-container.blog-with-toc,
  .blog-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .main-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .blog-article {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ----- Author / dates strip ----- */
  .post-meta {
    margin: 0 0 0.2in !important;
    padding: 0 0 0.1in !important;
    border-bottom: 1pt solid #ccc !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  .post-meta-line {
    font-size: 10pt !important;
    color: #444 !important;
    gap: 0.4em !important;
  }
  .post-meta-author {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }
  .post-meta-original {
    font-size: 9pt !important;
    color: #666 !important;
  }
  .post-meta-dot { background: #888 !important; }

  /* ----- Body typography ----- */
  .article-content,
  #blog-content {
    padding: 0 !important;
    margin: 0 !important;
    border-top: none !important;
  }
  .article-content p,
  #blog-content p,
  .blog-article #blog-content p {
    font-size: 11pt !important;
    line-height: 1.55 !important;
    color: #000 !important;
    margin: 0 0 0.14in !important;
    orphans: 3;
    widows: 3;
  }
  .article-content h2,
  #blog-content h2,
  .blog-article #blog-content h2 {
    font-size: 15pt !important;
    line-height: 1.25 !important;
    color: #000 !important;
    margin: 0.3in 0 0.1in !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .article-content h3,
  #blog-content h3,
  .blog-article #blog-content h3 {
    font-size: 12.5pt !important;
    line-height: 1.3 !important;
    color: #000 !important;
    margin: 0.2in 0 0.08in !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  .article-content ul,
  .article-content ol,
  #blog-content ul,
  #blog-content ol,
  .blog-article #blog-content ul,
  .blog-article #blog-content ol {
    padding-left: 0.3in !important;
    margin: 0 0 0.14in !important;
  }
  .article-content li,
  #blog-content li {
    font-size: 11pt !important;
    line-height: 1.5 !important;
    margin: 0 0 0.04in !important;
  }
  .article-content a,
  #blog-content a,
  .blog-article #blog-content a,
  .auto-link {
    color: #000 !important;
    text-decoration: underline !important;
    text-decoration-color: #999 !important;
    text-underline-offset: 1pt !important;
  }
  /* No URL annotations after links — the QR footer covers "view online". */
  a[href]::after,
  a[href^="http"]::after,
  a[href^="/"]::after,
  a[href^="#"]::after { content: none !important; }

  /* ----- TL;DR box ----- */
  .tldr-box {
    border: 1pt solid #999 !important;
    background: #fafafa !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 0 0 0.25in !important;
    padding: 0.14in !important;
  }
  .tldr-badge { background: #000 !important; color: #fff !important; }
  .tldr-points li { color: #000 !important; line-height: 1.4 !important; }
  .tldr-points li svg { display: none !important; }
  .tldr-points li::before {
    content: "•";
    margin-right: 0.4em;
    color: #000;
  }

  /* ----- FAQ accordion: force every item open and remove the +/- glyph ----- */
  .faq-section {
    border: 1pt solid #999 !important;
    box-shadow: none !important;
    margin: 0.25in 0 !important;
    background: #fff !important;
  }
  .faq-section-header {
    background: #f5f5f5 !important;
    padding: 0.1in 0.15in !important;
    border-bottom: 1pt solid #999 !important;
  }
  .faq-section-header h2 {
    font-size: 13pt !important;
    margin: 0 !important;
  }
  .faq-section-body { padding: 0.12in 0.15in !important; }
  .faq-item {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 0 0 0.12in !important;
    background: #fff !important;
    border: 1pt solid #ccc !important;
  }
  .faq-item summary {
    padding: 0.08in 0.12in !important;
    background: #fafafa !important;
    border-bottom: 1pt solid #ccc !important;
  }
  .faq-item summary::after,
  .faq-item[open] summary::after { display: none !important; }
  .faq-item .faq-answer {
    display: block !important;
    padding: 0.08in 0.12in !important;
    background: #fff !important;
    color: #000 !important;
  }
  /* details elements need this hack to expand reliably in print preview */
  .faq-item:not([open]) > .faq-answer { display: block !important; }

  /* ----- Print header (injected by print-extras.js) ----- */
  .print-header,
  .print-footer { display: block !important; }
  .print-header {
    border-bottom: 1.5pt solid #333;
    padding-bottom: 0.08in;
    margin-bottom: 0.18in;
    font-size: 9pt;
    color: #555;
    font-family: Georgia, "Times New Roman", serif;
  }
  .print-header strong { color: #000; }
  .print-footer {
    border-top: 1.5pt solid #333;
    padding-top: 0.18in;
    margin-top: 0.3in;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-qr { display: block; margin: 0 auto 0.08in; }
  .print-qr-fallback {
    display: none;
    font-size: 8.5pt;
    color: #666;
    word-break: break-all;
  }
  .print-qr-label {
    display: block;
    font-size: 8.5pt;
    color: #666;
  }

  /* ----- Global page-break safety net ----- */
  p, li { orphans: 3; widows: 3; }
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
  blockquote, pre, table, figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  img { max-width: 100% !important; height: auto !important; }
}