/* ============================================================
   blog-post.css — dark-theme overlay for blog articles
   Loads AFTER the article's (token-swapped) inline <style> and
   AFTER /css/appalanche.css. Aligns posts with the site theme:
   dark bg, Instrument Serif + Plus Jakarta, cyan accent, site nav/footer.
   ============================================================ */

/* force site background under the article (inline body sets its own) */
body { background: var(--bg-1) !important; color: var(--ink); }

/* clear the fixed pill nav */
.hero { padding-top: 130px !important; }

/* article links -> cyan */
.body a, .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.body a:hover, .article-body a:hover { color: #67e8f9; }

/* app CTA box used var(--ink) as bg (now light) -> dark elevated panel */
.app-cta { background: linear-gradient(160deg, #111d33, #0b1322) !important; border: 1px solid var(--accent-border, rgba(34,211,238,.28)); }

/* white-bg panels -> dark */
.tx-step { background: transparent !important; }
.tx-step:nth-child(even) { background: rgba(255,255,255,.02) !important; }
.cost-item, .fee-calc, .fee-row { background: transparent !important; }

/* tables: readable header + stripes on dark */
.set-table thead tr, .stage-table thead tr { background: #16243d !important; color: var(--ink) !important; }
.set-table tbody tr:nth-child(even), .stage-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03) !important; }

/* byline avatar -> cyan chip */
.av, .byline-avatar { background: var(--accent) !important; color: #04080f !important; }

/* figure on dark */
.fig figure { background: var(--surface-tinted) !important; border: 1px solid var(--border) !important; }
.fig figcaption { color: var(--ink-muted) !important; border-top: 1px solid var(--border) !important; }

/* injected compliance blocks (class-based, dark) */
.blog-disclaimer { max-width: 720px; margin: 2.5rem auto 0; padding: 1.25rem 1.5rem; border-top: 1px solid var(--border); font-family: var(--font-sans); font-size: .82rem; line-height: 1.6; color: var(--ink-3); }
.blog-disclaimer strong { color: var(--ink-2); }
.blog-roadmap { max-width: 720px; margin: 1.5rem auto 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: rgba(34,211,238,.08); font-family: var(--font-sans); font-size: .86rem; line-height: 1.6; color: var(--ink-2); border-radius: 0 4px 4px 0; }
.blog-roadmap strong { color: var(--accent); }

/* article body max-width sits centered under the site shell */
.body, .article-body, .hero, .fig, .foot { margin-left: auto; margin-right: auto; }

/* related reading — internal-link cluster block */
.blog-related { max-width: 720px; margin: 3rem auto 0; padding: 1.75rem 0 0; border-top: 1px solid var(--border); font-family: var(--font-sans); }
.blog-related h2 { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1rem; }
.blog-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.blog-related li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: var(--surface-tinted); border: 1px solid var(--border); border-radius: 8px; transition: border-color .2s ease, transform .2s ease; }
.blog-related li:hover { border-color: var(--accent-border, rgba(34,211,238,.3)); transform: translateX(2px); }
.blog-related a { color: var(--ink); text-decoration: none; font-size: .98rem; line-height: 1.4; font-weight: 500; }
.blog-related a:hover { color: var(--accent); }
.blog-related .rel-cat { flex: 0 0 auto; font-size: .72rem; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 560px) { .blog-related li { flex-direction: column; gap: .25rem; } .blog-related .rel-cat { white-space: normal; } }

/* medical-care guardrail — health-first / insurance-side devil's advocate note */
.blog-care-note { max-width: 720px; margin: 2.5rem auto 0; padding: 1.4rem 1.65rem; border-left: 3px solid #fbbf24; background: rgba(251,191,36,.07); font-family: var(--font-sans); font-size: .9rem; line-height: 1.7; color: var(--ink-2); border-radius: 0 6px 6px 0; }
.blog-care-note strong { color: #fbbf24; }

/* ============================================================
   EDITORIAL ELEVATION (2026-06-23) — magazine-grade reading layer
   over the post inline styles. Uses post tokens (--accent/--border/
   --ink-muted/--serif/--surface-tinted) + site tokens (--ink-2/3,
   --ease-out). blog-post.css loads last → these win on equal
   specificity. Compliance blocks (care-note, disclaimer) + neutral
   byline preserved — only spacing refined, never removed.
   ============================================================ */

/* — reading rhythm: tighter measure, more air — */
.body { max-width: 720px; }
.body p { line-height: 1.85; margin-bottom: 1.6rem; }

/* lede: first paragraph reads as a serif standfirst with a drop cap */
.body > p:first-of-type {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.3rem; line-height: 1.5; color: var(--ink);
  letter-spacing: -.01em; margin-bottom: 2rem;
}
.body > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-style: normal;
  font-size: 3.6rem; line-height: .78; padding: .3rem .55rem 0 0;
  color: var(--accent);
}

/* headings: more authority + breathing room before sections */
.body h2 { font-size: 1.95rem; line-height: 1.12; margin: 3.5rem 0 1.25rem; padding-top: 0; }
.body h3 {
  position: relative; padding-top: 1.05rem; color: var(--accent);
  font-size: .76rem; letter-spacing: .1em; margin-top: 2.75rem;
}
.body h3::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 14px; height: 2px; background: var(--accent); border-radius: 2px;
}

/* links: editorial underline */
.body a, .article-body a {
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(34,211,238,.42);
  transition: color .18s var(--ease-out), text-decoration-color .18s var(--ease-out);
}
.body a:hover, .article-body a:hover { text-decoration-color: var(--accent); }

/* lists: accent markers, more air */
.body ul, .body ol { margin: 1.6rem 0; padding-left: 1.4em; }
.body li { margin-bottom: .7rem; line-height: 1.78; color: var(--ink); }
.body ul li::marker { color: var(--accent); }

/* pull quote: from divider to glass design object */
.pq {
  border: none; border-left: 4px solid var(--accent);
  background: rgba(34,211,238,.05); padding: 1.75rem 2rem;
  margin: 3rem 0; border-radius: 0 10px 10px 0;
}
.pq, .pq p {
  font-family: var(--serif); font-style: italic; font-size: 1.32rem;
  line-height: 1.45; color: var(--ink); letter-spacing: -.01em;
}
.pq p { margin: 0; }

/* callouts: unified, intentional sidebars */
.ca, .ca-g, .ca-a { border-left-width: 4px; border-radius: 0 8px 8px 0; padding: 1.4rem 1.65rem; margin: 2.5rem 0; }

/* settlement table: editorial data viz */
.set-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.set-table th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: .9rem 1.1rem; }
.set-table td { padding: .9rem 1.1rem; line-height: 1.55; }
.set-table tbody tr { transition: background .18s var(--ease-out); }
.set-table tbody tr:hover { background: rgba(34,211,238,.06) !important; }
.set-range { color: var(--green); font-weight: 600; }

/* treatment-path timeline: refined frame + cyan step markers */
.tx-path { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tx-num { color: var(--accent) !important; font-weight: 700; letter-spacing: .06em; }

/* app CTA: glass panel (was a flat dark box) */
.app-cta {
  background: linear-gradient(150deg, rgba(34,211,238,.10), rgba(45,212,191,.05)) !important;
  border: 1px solid rgba(34,211,238,.20) !important; border-radius: 10px;
  padding: 2.25rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
/* CTA button — the generic `.body a -> cyan` rule above was painting the label
   cyan-on-cyan (invisible). Restore it as our primary button: dark text on the
   cyan→teal gradient, no underline. Higher specificity (a.app-cta-btn) so it wins. */
.body a.app-cta-btn, .app-cta-btn {
  background: linear-gradient(135deg, var(--cyan, #22d3ee), var(--teal, #2dd4bf)) !important;
  color: #04121c !important;
  text-decoration: none !important;
  border-radius: 8px;
  padding: 13px 26px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(34,211,238,.18);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .app-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(34,211,238,.28); }
}

/* figures: breathing room + softer frame */
.fig { margin-top: 2.75rem; margin-bottom: 2.75rem; }
.fig figure { border-radius: 8px; }
.fig figcaption { padding: 1rem 1.25rem; font-size: .8rem; line-height: 1.55; }

/* related-reading + FAQ: spacing polish */
.blog-related li { padding: 1rem 1.25rem; }
.faq-item { padding: 1.4rem 0; border-bottom: 1px solid rgba(34,211,238,.1); }
.faq-q { font-size: .98rem; margin-bottom: .6rem; }