/* SaaSRanger Blog Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --black:       #0a0804;
  --dark:        #110e09;
  --charcoal:    #1c1610;
  --orange-deep: #c45508;
  --orange:      #e8640a;
  --orange-light:#f07d2a;
  --orange-pale: rgba(232,100,10,0.65); /* fallback for articles that use this undefined var */
  --cream:       #f0e6d3;
  --cream-light: #f8f0e4;
  --cream-pale:  #fdf8f2;
  --muted:       rgba(240,230,211,0.85);
  --border:      rgba(42,31,16,0.12);
  --border-nav:  rgba(232,120,10,0.18); /* dark-nav-only border */

  /* Layout constants — everything aligns to these */
  --gutter: 64px;
  --content-max: 1200px;
  --nav-h: 64px;
}

body {
  font-family: 'Outfit', sans-serif;
  background: #F5EFE4;
  color: #2a1f10;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* ══════════════════════════════════════════
   NAV — fixed bar, full width, guttered
══════════════════════════════════════════ */
nav:not(.breadcrumb):not(.toc) {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(10,8,4,0.95);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--border-nav);
}
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--cream-light); text-decoration: none;
}
.logo em { font-style: normal; color: var(--orange); }
nav:not(.breadcrumb):not(.toc) ul {
  list-style: none; display: flex; align-items: center; gap: 32px;
}
nav:not(.breadcrumb):not(.toc) ul a {
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  transition: color 0.2s;
}
nav:not(.breadcrumb):not(.toc) ul a:hover { color: var(--cream-pale); }
.btn-nav {
  color: var(--orange) !important;
  border: 1px solid rgba(232,100,10,0.5) !important;
  padding: 8px 20px !important; font-size: 13px !important;
  transition: background 0.2s, color 0.2s !important;
  white-space: nowrap;
}
.btn-nav:hover { background: var(--orange) !important; color: var(--black) !important; }

/* ══════════════════════════════════════════
   LAYOUT CONTAINER — used by breadcrumb,
   hero, and post-wrap. Single source of truth.
══════════════════════════════════════════ */
.layout-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 16px) var(--gutter) 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.3px;
  color: rgba(240,230,211,0.5);
}
.breadcrumb a { color: var(--orange); text-decoration: none; transition: opacity 0.2s; }
.breadcrumb a:hover { opacity: 0.8; }
.breadcrumb span { color: rgba(240,230,211,0.35); }

/* ══════════════════════════════════════════
   POST HERO — same container width as wrap
══════════════════════════════════════════ */
.post-hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px var(--gutter) 56px;
  border-bottom: 1px solid var(--border);
}
.post-hero-inner { max-width: 760px; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 16px; margin-bottom: 24px;
  font-size: 13px; color: var(--muted);
}
.post-cat {
  color: var(--orange); font-weight: 700;
  letter-spacing: 2px; font-size: 11px; text-transform: uppercase;
}
.sep { color: rgba(240,230,211,0.25); }
.post-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 700; color: var(--cream-light);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.post-lede {
  font-size: 18px; color: var(--muted);
  line-height: 1.7; font-weight: 300; max-width: 620px;
}

/* ══════════════════════════════════════════
   POST WRAP — same container, two columns
══════════════════════════════════════════ */
.post-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px var(--gutter) 80px;
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 56px;
  align-items: start;
}

/* ── POST BODY ── */
.post-body { min-width: 0; max-width: 640px; font-size: 18px; }
.post-body ul, .post-body ol { font-size: 18px; color: var(--muted); line-height: 1.9; margin: 16px 0 24px 24px; font-weight: 300; }
.post-body li { margin-bottom: 8px; }
.post-body strong { font-size: inherit; }
.post-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700; color: var(--cream-light);
  margin: 56px 0 16px; letter-spacing: -0.01em; line-height: 1.2;
  padding-top: 8px;
  border-top: 1px solid rgba(240,230,211,0.07);
}
.post-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size:18px; font-weight: 600; color: var(--cream-light);
  margin: 36px 0 12px;
}
.post-body p {
  font-size:18px; color: var(--muted);
  line-height: 1.9; margin-bottom: 24px; font-weight: 300;
}
.post-body p + p { margin-top: 4px; }
/* Visual elements: consistent breathing room above and below */
.post-body .chart-block,
.post-body .stat-row,
.post-body .callout,
.post-body table {
  margin-top: 28px;
  margin-bottom: 28px;
}
/* ── CHART BLOCKS ────────────────────────────────────────── */
.chart-block {
  background: var(--charcoal);
  border: 1px solid var(--border);
  padding: 24px 26px;
  margin: 32px 0;
}
.chart-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size:18px; font-weight: 700;
  color: var(--cream-light);
  margin-bottom: 4px;
}
.chart-sub {
  font-size:16px; color: var(--muted);
  margin-bottom: 20px; line-height: 1.5;
}
.chart-source {
  font-size: 11px; color: var(--muted);
  margin-top: 14px; opacity: 0.7;
}

/* ── BAR CHARTS ──────────────────────────────────────────── */
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 80px;
  align-items: center;
  gap: 12px;
}
.bar-label { font-size:16px; color: var(--muted); text-align: right; }
.bar-track {
  background: rgba(240,230,211,0.07);
  height: 22px;
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.bar-fill.hi { background: var(--orange); }
.bar-fill.mid { background: rgba(232,100,10,0.65); }
.bar-fill.lo  { background: rgba(232,100,10,0.35); }
.bar-fill.p0  { background: var(--orange); }
.bar-fill.p1  { background: rgba(232,100,10,0.7); }
.bar-fill.p2  { background: rgba(232,100,10,0.4); }
.bar-pct { font-size: 12px; color: var(--cream-light); font-weight: 600; }

/* ── STAT ROWS ───────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  margin: 28px 0;
}
.stat-cell, .stat-item {
  padding: 22px 20px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.stat-cell:last-child, .stat-item:last-child { border-right: none; }
.stat-n, .stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px; font-weight: 700;
  color: var(--orange); line-height: 1.1;
  margin-bottom: 6px;
}
.stat-l, .stat-label {
  font-size:16px; color: var(--muted);
  line-height: 1.4;
}

/* ── CALLOUTS ────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--orange);
  background: var(--charcoal);
  padding: 18px 22px;
  margin: 28px 0;
}
.callout-label {
  font-size:18px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.callout p { font-size:18px; margin-bottom: 8px; }
.callout p:last-child { margin-bottom: 0; }

/* ── TIMELINE ────────────────────────────────────────────── */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  margin: 28px 0;
}
.tl-cell {
  padding: 20px 18px;
  border-right: 1px solid var(--border);
}
.tl-cell:last-child { border-right: none; }
.tl-phase {
  font-size:16px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 6px;
}
.tl-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size:16px; font-weight: 700;
  color: var(--cream-light); margin-bottom: 10px;
}
.tl-items {
  font-size:16px; color: var(--muted);
  line-height: 1.6;
}
.tl-week {
  display: inline-block;
  background: rgba(232,100,10,0.15);
  color: var(--orange);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; margin-bottom: 8px;
}
.tl-p { font-size:16px; color: var(--muted); line-height: 1.6; }

/* ── COMPARE GRID ────────────────────────────────────────── */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  margin: 28px 0;
}
.compare-rows { display: flex; flex-direction: column; }
.compare-col-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 14px 18px 8px;
  border-bottom: 1px solid var(--border);
}
.compare-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(240,230,211,0.05);
  font-size:18px;
}
.compare-item:last-child { border-bottom: none; }
.compare-name { color: var(--muted); }
.compare-val { color: var(--cream-light); font-weight: 600; }
.compare-total {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size:18px; font-weight: 700;
  color: var(--orange);
  font-family: 'Space Grotesk', sans-serif;
}

/* ── PATTERNS GRID ───────────────────────────────────────── */
.patterns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0;
}
.pattern-card {
  background: var(--charcoal);
  border: 1px solid var(--border);
  padding: 20px 18px;
}
.pattern-n {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 6px;
}
.pattern-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size:18px; font-weight: 700;
  color: var(--cream-light); margin-bottom: 8px;
}
.pattern-desc { font-size:18px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── CHECKLIST ITEMS ─────────────────────────────────────── */
.check-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(240,230,211,0.06);
}
.check-item:last-child { border-bottom: none; }
.check-box {
  width: 18px; height: 18px;
  border: 1px solid var(--border);
  border-radius: 2px;
  flex-shrink: 0; margin-top: 1px;
}
.check-text { font-size:18px; color: var(--cream-light); font-weight: 500; }
.check-why { font-size:16px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.checklist-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px;
}

/* ══════════════════════════════════════════
   GLOBAL OVERFLOW LOCK
══════════════════════════════════════════ */
html { overflow-x: hidden; max-width: 100vw; }

/* ══════════════════════════════════════════
   TOOL CARDS (ai-tools post)
══════════════════════════════════════════ */
.tool-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--charcoal);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  margin: 16px 0;
}
.tool-icon {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c05a07;  /* darkened from var(--orange) for contrast on amber-tinted parchment bg */
  background: rgba(232,100,10,0.12);
  border: 1px solid rgba(232,100,10,0.3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 3px;
  margin-top: 2px;
}
.tool-info { flex: 1; min-width: 0; }
.tool-info h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--cream-light);
  margin: 0 0 8px;
  line-height: 1.3;
}
.tool-info p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 12px;
  font-weight: 300;
}
.tool-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  background: rgba(240,230,211,0.08);
  color: rgba(240,230,211,0.55);
  border-radius: 2px;
  margin-right: 8px;
}
.tool-tag.amber {
  background: rgba(232,100,10,0.12);
  color: var(--orange);
}

/* ── Two-column compare grid (never stacks on desktop) ── */
.compare-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(240,230,211,0.12);
  margin: 32px 0;
  border-radius: 4px;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   600px BREAKPOINT (small phones)
══════════════════════════════════════════ */
@media (max-width: 600px) {
  .compare-grid-2col { grid-template-columns: 1fr; }
  .bar-row   { grid-template-columns: 90px 1fr 70px; gap: 6px; }
  .bar-label { font-size: 16px; }
  .stat-row  { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-bottom: 1px solid var(--border); }
  .patterns-grid  { grid-template-columns: 1fr; }
  .compare-grid   { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
}

/* ── Post body link styles ── */
.post-body strong { color: var(--cream-light); font-weight: 600; }
.post-body a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(232,100,10,0.35);
  transition: text-decoration-color 0.2s;
}
.post-body a:hover { text-decoration-color: var(--orange); }

/* ── SIDEBAR ── */
.sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.toc {
  background: var(--charcoal);
  border: 1px solid var(--border);
  padding: 20px 22px; margin-bottom: 16px;
}
.toc-title, .toc-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px;
}
.toc ol { padding-left: 16px; margin: 0; }
.toc li { margin-bottom: 8px; }
.toc a {
  font-size: 13px; color: rgba(240,230,211,0.65);
  text-decoration: none; line-height: 1.45;
  transition: color 0.2s; display: block;
}
.toc a:hover { color: var(--cream-light); }
.nl-box {
  background: var(--charcoal);
  border: 1px solid var(--border);
  padding: 20px 22px;
}
.nl-box h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--cream-light); margin-bottom: 8px;
}
.nl-box p  { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.nl-box a  { font-size: 13px; color: var(--muted); text-decoration: none; line-height: 1.5; transition: color 0.2s; display: block; margin-bottom: 10px; }
.nl-box a:hover { color: var(--cream-light); }
.nl-form  { display: flex; flex-direction: column; gap: 8px; }
.nl-input {
  background: var(--dark); border: 1px solid var(--border);
  color: var(--cream-light); padding: 10px 14px;
  font-family: 'Outfit', sans-serif; font-size: 14px;
}
.nl-input::placeholder { color: rgba(240,230,211,0.35); }
.nl-btn {
  background: var(--orange); color: var(--black);
  border: none; padding: 10px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s;
}
.nl-btn:hover { background: var(--orange-deep); }

/* ══════════════════════════════════════════
   READ PROGRESS
══════════════════════════════════════════ */
#read-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--orange); width: 0; z-index: 600;
  transition: width 0.1s linear;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border);
  padding: 28px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dark);
}
.fl { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; color:var(--cream-light); text-decoration:none; }
.fl em { font-style: normal; color:var(--orange); }
.fn { display:flex; gap:28px; list-style:none; }
.fn a { font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:rgba(232,220,200,0.5); text-decoration:none; transition:color 0.2s; }
.fn a:hover { color:var(--cream-light); }
.fc { font-size:13px; color:rgba(232,220,200,0.35); }
.footer-inner { text-align: center; width: 100%; }
.footer-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--cream-light);
  text-decoration: none;
  display: inline-block; margin-bottom: 6px;
}
.footer-logo em { font-style: normal; color: var(--orange); }
.footer-tagline { font-size: 13px; color: rgba(240,230,211,0.4); margin-bottom: 4px; }
.footer-copy { font-size: 13px; color: rgba(240,230,211,0.3); }
.footer-copy a { color: var(--orange); text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: var(--black);
  padding: 13px 32px; font-size: 14px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  transition: background 0.2s; font-family: 'Space Grotesk', sans-serif;
  cursor: pointer; border: none;
}
.btn-primary:hover { background: var(--orange-deep); }

/* ══════════════════════════════════════════
   HOVER / FOCUS
══════════════════════════════════════════ */
.post-title a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ══════════════════════════════════════════
   RELATED POSTS
══════════════════════════════════════════ */
.related {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px var(--gutter) 80px;
  border-top: 1px solid var(--border);
}
.related-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 28px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-card {
  background: var(--charcoal);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.related-card-cat {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange);
}
.related-card h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px; font-weight: 700;
  line-height: 1.4; margin: 0; flex: 1;
}
.related-card h4 a { color: var(--cream-light); text-decoration: none; transition: color 0.2s; }
.related-card h4 a:hover { color: var(--orange); }
.read-link {
  font-size: 12px; font-weight: 700;
  color: var(--orange); text-decoration: none;
  letter-spacing: 0.5px; transition: opacity 0.2s;
}
.read-link:hover { opacity: 0.75; }

/* ══════════════════════════════════════════
   MOBILE ≤ 900px  — SINGLE CLEAN BLOCK
══════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── CSS variables ── */
  :root { --gutter: 24px; --nav-h: 56px; }

  /* ── Layout ── */
  .post-wrap {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 56px;
    gap: 0;
  }
  .sidebar { display: block; position: static; max-height: none; overflow-y: visible; order: 0; }
  .sidebar .nl-box { display: none; }
  .post-body { order: 1; max-width: 100%; }

  /* ── Post body font reduction ── */
  .post-body { font-size: 16px; }
  .post-body p, .post-body ul, .post-body ol { font-size: 16px; line-height: 1.75; }

  /* ── Footer ── */
  footer { flex-direction: column; gap: 20px; padding: 28px var(--gutter); text-align: center; }
  .fn { flex-wrap: wrap; justify-content: center; gap: 14px; }

  /* ── Related grid: single column ── */
  .related { padding: 48px 24px 64px; }
  .related-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── Tables: horizontal scroll ── */
  .post-body table,
  .post-body [style*="border-collapse:collapse"] {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── All text in post body: no forced nowrap ── */
  .post-body * { white-space: normal !important; }
  /* Exception: ticker items are intentionally nowrap */
  .ticker-item { white-space: nowrap !important; }

  /* ── All inline chart/visual blocks: contained padding on mobile ── */
  .post-body [style*="background:#1c1610"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* ── Bar chart rows: shrink label + value columns ── */
  .post-body [style*="grid-template-columns:170px"],
  .post-body [style*="grid-template-columns:180px"],
  .post-body [style*="grid-template-columns:190px"],
  .post-body [style*="grid-template-columns:200px"],
  .post-body [style*="grid-template-columns:160px"],
  .post-body [style*="grid-template-columns:150px"],
  .post-body [style*="grid-template-columns:140px"] {
    grid-template-columns: 90px 1fr 70px !important;
    gap: 6px !important;
  }
  /* Bar chart label: first child (span or div) — shrink font on mobile */
  .post-body [style*="grid-template-columns:170px"] > *:first-child,
  .post-body [style*="grid-template-columns:160px"] > *:first-child,
  .post-body [style*="grid-template-columns:150px"] > *:first-child,
  .post-body [style*="grid-template-columns:140px"] > *:first-child {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  /* Bar chart value: last child (span or div) — shrink font on mobile */
  .post-body [style*="grid-template-columns:170px"] > *:last-child,
  .post-body [style*="grid-template-columns:160px"] > *:last-child,
  .post-body [style*="grid-template-columns:150px"] > *:last-child,
  .post-body [style*="grid-template-columns:140px"] > *:last-child {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* ── Compare example rows: shrink label col ── */
  .post-body [style*="grid-template-columns:120px"],
  .post-body [style*="grid-template-columns:110px"],
  .post-body [style*="grid-template-columns:100px"] {
    grid-template-columns: 68px 1fr !important;
    gap: 12px !important;
  }

  /* ── 2-col grids (compare, patterns): stack vertically ── */
  .post-body [style*="grid-template-columns:1fr 1fr"],
  .post-body [style*="grid-template-columns:repeat(2,1fr)"],
  .post-body [style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 3-col grids: stack vertically ── */
  .post-body [style*="grid-template-columns:repeat(3,1fr)"],
  .post-body [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 4-col grids (timelines): 2 columns ── */
  .post-body [style*="grid-template-columns:repeat(4,1fr)"],
  .post-body [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Stat rows: 2 columns max ── */
  .post-body [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Compare grid left column: remove border, add separator ── */
  .post-body [style*="border-right:1px solid rgba(240,230,211,0.12)"] {
    border-right: none !important;
    border-bottom: 2px solid rgba(240,230,211,0.15) !important;
    padding-bottom: 20px !important;
    margin-bottom: 8px !important;
  }

  /* ── Highlight blocks (flex icon+text) ── */
  .post-body [style*="display:flex"][style*="align-items:flex-start"] {
    padding: 18px !important;
    gap: 14px !important;
  }

  /* ── Key figure blocks ── */
  .post-body [style*="border-left:4px solid rgba(232,100,10"] {
    padding: 16px 18px !important;
  }
  .post-body [style*="border-left:3px solid rgba(232,100,10"] {
    padding: 16px 18px !important;
  }

  /* ── Quick answer / callout ── */
  .post-body [style*="border-left:3px solid #e8640a"] {
    padding: 18px 20px !important;
  }


  /* ── Formula/key-figure blocks: stack vertically on mobile ── */
  .post-body [style*="display:flex"][style*="align-items:center"][style*="gap:20px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* ── Min-width flex children: allow full width ── */
  .post-body [style*="min-width"][style*="flex-shrink:0"] {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    width: 100% !important;
    text-align: left !important;
  }
  /* ── Large formula text: reduce size on mobile ── */
  .post-body [style*="font-size:28px"][style*="font-family:'Space Grotesk'"] {
    font-size: 22px !important;
  }
  .post-body [style*="font-size:32px"][style*="font-family:'Space Grotesk'"] {
    font-size: 24px !important;
  }


  /* ── Vertical divider lines: hide when stacked on mobile ── */
  .post-body [style*="width:1px"][style*="height:"][style*="background:rgba(240,230,211"] {
    display: none !important;
  }
  /* ── Bar chart value column: reduce font + allow wrap ── */
  .post-body [style*="grid-template-columns:170px 1fr 120px"] > *:last-child,
  .post-body [style*="grid-template-columns:160px 1fr 120px"] > *:last-child {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* ── CSS class-based components ── */
  .bar-row   { grid-template-columns: 90px 1fr 70px !important; gap: 8px !important; }
  .bar-label { font-size: 16px !important; }
  .stat-row  { grid-template-columns: 1fr 1fr !important; }
  .patterns-grid { grid-template-columns: 1fr !important; }
  .compare-grid  { grid-template-columns: 1fr !important; }
  .chart-block   { padding-left: 18px !important; padding-right: 18px !important; }
  .ticker-item   { font-size: 10px; letter-spacing: 2px; white-space: nowrap; }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════
   PARCHMENT THEME
   Body: #F5EFE4 warm cream. Nav + footer
   stay dark. Orange accents unchanged.
══════════════════════════════════════════ */

/* ── Headings ── */
.post-hero h1,
.post-body h2, .post-body h3,
.chart-title, .tl-label, .pattern-title,
.check-text, .tool-info h4, .compare-val,
.bar-pct, .compare-total,
.nl-box h4, .related-card h4 a,
.eeat-word, .tool-name,
.post-body strong { color: #1a1208 !important; }

/* ── Body / muted text ── */
.post-body p, .post-body ul, .post-body ol,
.post-lede, .post-meta,
.chart-sub, .chart-source,
.bar-label, .stat-l, .stat-label,
.tl-p, .tl-items, .tl-week, .pattern-desc,
.check-why, .callout p,
.tool-info p,
.compare-name,
.nl-box p, .nl-box a,
.fn a, .fc,
.toc a, .related-title { color: rgba(42,31,16,0.80); }
/* Footer sits on dark background — keep cream text, just boost opacity for legibility */
.footer-tagline, .footer-copy, .fc { color: rgba(240,230,211,0.55); }
/* Footer nav links (.fn a) are also dark — restore cream (footer has dark bg) */
footer .fn a                        { color: rgba(232,220,200,0.65) !important; }
/* Overrides for elements whose article inline <style> beats the non-important rules above */
.related-title { color: rgba(42,31,16,0.80) !important; }
.chart-source  { color: rgba(42,31,16,0.60) !important; }
.chart-sub, .bar-label { color: rgba(42,31,16,0.80) !important; }
.tl-items, .tl-week { color: rgba(42,31,16,0.80) !important; }
/* Orange-at-opacity and colored classes — full opacity / darken for parchment contrast */
.eeat-signal    { color: var(--orange) !important; }
.tool-tag.amber { color: #c05a07 !important; }  /* orange on amber-tinted parchment → darkened, ratio ~3.3 */
.faq-icon       { color: #c05a07 !important; }  /* FAQ +/- icon on orange-bg-tinted parchment → darkened */
/* Inline orange-bg badges (e.g. "Week N" labels): both orange bg + orange text → darken text */
.post-body [style*="color:#e8640a"][style*="background:rgba(232,100,10"] { color: #c05a07 !important; }
/* Colored priority/category/cost badge tags — darken vivid hues for parchment contrast */
.tag-p1         { color: #1a5e87 !important; }  /* blue #3498db → dark blue, ratio ~5.3 */
.tag-p2, .tool-cost-free, .tl-p.p2 { color: #166534 !important; }  /* green #2ecc71 → dark green, ratio ~4.5 */
.tl-p.p1        { color: #1a5e87 !important; }  /* bright blue → dark blue */
.tl-p.p3        { color: #7a3e00 !important; }  /* any yellow/amber → dark brown */

/* ── ideas article: .filter-cell has class-based charcoal bg — restore inline cream styles ── */
/* Specificity (0,2,1) beats .post-body strong (0,1,1) and conversion rules (0,2,0) */
.filter-cell strong[style*="color:var(--cream-light)"],
.filter-cell strong[style*="color: var(--cream-light)"] { color: rgba(240,230,211,0.9) !important; }
.filter-cell [style*="color:var(--cream-light)"],
.filter-cell [style*="color: var(--cream-light)"] { color: rgba(240,230,211,0.9) !important; }
/* ── idea-tag colored badges: darken text for contrast on near-white tinted backgrounds ── */
.tag-green  { color: #166534 !important; }
.tag-yellow { color: #854d0e !important; }
.tag-red    { color: #991b1b !important; }
.tag-blue   { color: #1e40af !important; }
/* ── idea-card stays dark — restore light tag colors for dark-bg context ── */
.idea-card .tag-green { color: rgba(46,204,113,0.9) !important; }   /* light green on dark card, ratio ~5.5 */
.idea-card .tag-blue  { color: rgba(52,152,219,0.9) !important; }   /* light blue on dark card, ratio ~4.6 */
/* ── pillar-card stays dark — restore vivid tag colors (blog.css darkened them for parchment) ── */
.pillar-card .tag-p1 { color: #3498db !important; }   /* bright blue on dark charcoal, ratio ~4.6 */
.pillar-card .tag-p2 { color: #2ecc71 !important; }   /* bright green on dark charcoal, ratio ~5.5 */
.pillar-card .tag-p0 { color: #e74c3c !important; }   /* keep red vivid on dark */

/* ── launch-checklist article: class-based cream on parchment → dark ── */
.checklist-title { color: rgba(42,31,16,0.80) !important; }
.checklist-subtitle, .check-label { color: rgba(42,31,16,0.65) !important; }
/* ── launch-checklist: class-based dark text inside charcoal .mistake-card ── */
.mistake-card .mistake-desc  { color: rgba(240,230,211,0.80) !important; }
.mistake-card .mistake-title { color: rgba(240,230,211,0.95) !important; }

/* ── Dark-box component text: restore cream (boxes kept dark, not converted to parchment) ── */
/* Heading / emphasis inside dark boxes */
.chart-block .chart-title,
.chart-block .bar-pct,
.chart-block .compare-val,
.chart-block .compare-total,
.chart-block .tl-label,
.nl-box h4,
.related-card h4 a,
.tool-card .tool-name,
.tool-card .tool-info h4,
.pattern-card .pattern-title,
.eeat-card .eeat-word      { color: rgba(240,230,211,0.9) !important; }
/* Body / muted text inside dark boxes */
.chart-block .chart-sub,
.chart-block .chart-source,
.chart-block .bar-label,
.callout p,
.toc a,
.nl-box p, .nl-box a,
.tool-card .tool-info p,
.pattern-card .pattern-desc { color: rgba(240,230,211,0.65) !important; }

.sep                    { color: rgba(42,31,16,0.45); }
.breadcrumb span        { color: rgba(42,31,16,0.60); }
.breadcrumb             { color: rgba(42,31,16,0.50); }
.post-cat               { color: var(--orange); }

/* ── Card / block backgrounds — forced dark (overrides article-specific near-transparent bgs) ── */
.chart-block, .callout, .toc, .nl-box,
.tool-card, .pattern-card, .related-card, .eeat-card {
  background: var(--charcoal) !important;
}

/* ── Stat rows ── */
.stat-row          { border-color: rgba(42,31,16,0.13); }
.stat-cell,
.stat-item         { border-right-color: rgba(42,31,16,0.13); }

/* ── Section dividers ── */
.post-hero         { border-bottom-color: rgba(42,31,16,0.10); }
.post-body h2      { border-top-color:   rgba(42,31,16,0.10); }
.related           { border-top-color:   rgba(42,31,16,0.10); }

/* ── Bar chart track ── */
.bar-track         { background: rgba(42,31,16,0.10); }

/* ── Checklist ── */
.check-item        { border-bottom-color: rgba(42,31,16,0.09); }
.check-box         { border-color: rgba(42,31,16,0.28); }

/* ── Compare grids ── */
.compare-item      { border-bottom-color: rgba(42,31,16,0.08); }
.compare-grid,
.compare-grid-2col { border-color: rgba(42,31,16,0.13); }
.compare-col-label { border-bottom-color: rgba(42,31,16,0.13); }

/* ── Timeline ── */
.timeline          { border-color: rgba(42,31,16,0.13); }
.tl-cell           { border-right-color: rgba(42,31,16,0.13); }

/* ── Newsletter input ── */
.nl-input {
  background:   #EDE5D8;
  border-color: rgba(42,31,16,0.22);
  color:        #1a1208;
}
.nl-input::placeholder { color: rgba(42,31,16,0.40); }

/* ── Tool tags ── */
.tool-tag {
  background: rgba(42,31,16,0.09);
  color:      rgba(42,31,16,0.55);
}

/* ── Related cards — dark text/link on parchment bg (bg forced parchment by !important rule above) ── */
.related-card h4 a       { color: #1a1208; }
.related-card h4 a:hover { color: var(--orange); }

/* ── Hover states ── */
.toc a:hover      { color: #1a1208; }
.nl-box a:hover   { color: #1a1208; }

/* ── Mobile border for stat cells ── */
@media (max-width: 600px) {
  .stat-cell { border-bottom-color: rgba(42,31,16,0.13); }
}

/* ── Semi-transparent orange-tinted bg inside converted dark containers → neutral ── */
/* Without this, rgba(232,100,10,0.12) over converted parchment makes orange text too low contrast */
.post-body [style*="background:rgba(232,100,10,0.12)"],
.post-body [style*="background: rgba(232,100,10,0.12)"] { background: transparent !important; }

/* ── Inline dark backgrounds in article HTML — kept dark (consistent with charcoal containers) ── */
/* No conversion: #1c1610 / #110e09 / rgba(20,15,8) containers stay dark */

/* ── Inline cream text in article HTML → dark ── */
.post-body [style*="color:#f8f0e4"],
.post-body [style*="color: #f8f0e4"],
.post-body [style*="color:#fdf8f2"],
.post-body [style*="color: #fdf8f2"],
.post-body [style*="color:#f0e6d3"],
.post-body [style*="color: #f0e6d3"] { color: #1a1208 !important; }

/* High-opacity cream (headings, emphasis) → near-black */
.post-body [style*="color:rgba(240,230,211,0.95)"],
.post-body [style*="color:rgba(240,230,211,0.9)"],
.post-body [style*="color:rgba(240,230,211,0.85)"],
.post-body [style*="color:rgba(240,230,211,0.8)"],
.post-body [style*="color:rgba(240,230,211,0.75)"],
.post-body [style*="color:rgba(240,230,211,0.7)"] { color: rgba(42,31,16,0.88) !important; }
/* Mid-opacity cream (body / muted text) → readable dark */
.post-body [style*="color:rgba(240,230,211,0.65)"],
.post-body [style*="color:rgba(240,230,211,0.6)"],
.post-body [style*="color:rgba(240,230,211,0.55)"],
.post-body [style*="color:rgba(240,230,211,0.5)"],
.post-body [style*="color:rgba(240,230,211,0.45)"],
.post-body [style*="color:rgba(240,230,211,0.4)"] { color: rgba(42,31,16,0.78) !important; }
/* Low-opacity cream (captions, footnotes) → legible muted */
.post-body [style*="color:rgba(240,230,211,0.35)"],
.post-body [style*="color:rgba(240,230,211,0.3)"],
.post-body [style*="color:rgba(240,230,211,0.25)"],
.post-body [style*="color:rgba(240,230,211,0.2)"] { color: rgba(42,31,16,0.62) !important; }

/* ── Inline CSS-variable cream/muted text → dark on parchment ── */
.post-body [style*="color:var(--muted)"],
.post-body [style*="color: var(--muted)"] { color: rgba(42,31,16,0.78) !important; }
.post-body [style*="color:var(--cream-pale)"],
.post-body [style*="color: var(--cream-pale)"],
.post-body [style*="color:var(--cream-light)"],
.post-body [style*="color: var(--cream-light)"],
.post-body [style*="color:var(--cream)"],
.post-body [style*="color: var(--cream)"] { color: #1a1208 !important; }

/* ── Restore cream rgba literal text inside all dark containers ── */
/* Specificity (0,3,0) beats the conversion rules at (0,2,0) — among !important decls, higher wins */
.post-body [style*="background:var(--charcoal)"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background: var(--charcoal)"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background:var(--dark)"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background: var(--dark)"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background:#1c1610"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background: #1c1610"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background:#110e09"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background: #110e09"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background:rgba(20,15,8"] [style*="color:rgba(240,230,211,"],
.post-body [style*="background: rgba(20,15,8"] [style*="color:rgba(240,230,211,"] {
  color: rgba(240,230,211,0.7) !important;
}
/* ── Restore hex cream colors inside all dark containers ── */
.post-body [style*="background:var(--charcoal)"] [style*="color:#f0e6d3"],
.post-body [style*="background: var(--charcoal)"] [style*="color:#f0e6d3"],
.post-body [style*="background:var(--charcoal)"] [style*="color: #f0e6d3"],
.post-body [style*="background: var(--charcoal)"] [style*="color: #f0e6d3"],
.post-body [style*="background:var(--charcoal)"] [style*="color:#f8f0e4"],
.post-body [style*="background: var(--charcoal)"] [style*="color:#f8f0e4"],
.post-body [style*="background:var(--charcoal)"] [style*="color:#fdf8f2"],
.post-body [style*="background: var(--charcoal)"] [style*="color:#fdf8f2"],
.post-body [style*="background:var(--dark)"] [style*="color:#f0e6d3"],
.post-body [style*="background: var(--dark)"] [style*="color:#f0e6d3"],
.post-body [style*="background:var(--dark)"] [style*="color:#f8f0e4"],
.post-body [style*="background: var(--dark)"] [style*="color:#f8f0e4"],
.post-body [style*="background:#1c1610"] [style*="color:#f0e6d3"],
.post-body [style*="background: #1c1610"] [style*="color:#f0e6d3"],
.post-body [style*="background:#1c1610"] [style*="color: #f0e6d3"],
.post-body [style*="background: #1c1610"] [style*="color: #f0e6d3"],
.post-body [style*="background:#1c1610"] [style*="color:#f8f0e4"],
.post-body [style*="background: #1c1610"] [style*="color:#f8f0e4"],
.post-body [style*="background:#110e09"] [style*="color:#f0e6d3"],
.post-body [style*="background: #110e09"] [style*="color:#f0e6d3"],
.post-body [style*="background:#110e09"] [style*="color:#f8f0e4"],
.post-body [style*="background: #110e09"] [style*="color:#f8f0e4"],
.post-body [style*="background:rgba(20,15,8"] [style*="color:#f0e6d3"],
.post-body [style*="background: rgba(20,15,8"] [style*="color:#f0e6d3"] {
  color: rgba(240,230,211,0.9) !important;
}
/* ── Restore CSS-variable cream/muted text inside all dark containers ── */
/* Specificity (0,3,0) beats (0,2,0) */
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--cream-light)"],
.post-body [style*="background: var(--charcoal)"] [style*="color:var(--cream-light)"],
.post-body [style*="background:var(--charcoal)"] [style*="color: var(--cream-light)"],
.post-body [style*="background: var(--charcoal)"] [style*="color: var(--cream-light)"],
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--cream)"],
.post-body [style*="background: var(--charcoal)"] [style*="color:var(--cream)"],
.post-body [style*="background:var(--charcoal)"] [style*="color: var(--cream)"],
.post-body [style*="background: var(--charcoal)"] [style*="color: var(--cream)"],
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--cream-pale)"],
.post-body [style*="background: var(--charcoal)"] [style*="color:var(--cream-pale)"],
.post-body [style*="background:var(--dark)"] [style*="color:var(--cream-light)"],
.post-body [style*="background: var(--dark)"] [style*="color:var(--cream-light)"],
.post-body [style*="background:var(--dark)"] [style*="color: var(--cream-light)"],
.post-body [style*="background: var(--dark)"] [style*="color: var(--cream-light)"],
.post-body [style*="background:var(--dark)"] [style*="color:var(--cream)"],
.post-body [style*="background: var(--dark)"] [style*="color:var(--cream)"],
.post-body [style*="background:var(--dark)"] [style*="color:var(--cream-pale)"],
.post-body [style*="background: var(--dark)"] [style*="color:var(--cream-pale)"],
.post-body [style*="background:#1c1610"] [style*="color:var(--cream-light)"],
.post-body [style*="background: #1c1610"] [style*="color:var(--cream-light)"],
.post-body [style*="background:#1c1610"] [style*="color: var(--cream-light)"],
.post-body [style*="background: #1c1610"] [style*="color: var(--cream-light)"],
.post-body [style*="background:#1c1610"] [style*="color:var(--cream)"],
.post-body [style*="background: #1c1610"] [style*="color:var(--cream)"],
.post-body [style*="background:#1c1610"] [style*="color:var(--cream-pale)"],
.post-body [style*="background: #1c1610"] [style*="color:var(--cream-pale)"],
.post-body [style*="background:#110e09"] [style*="color:var(--cream-light)"],
.post-body [style*="background: #110e09"] [style*="color:var(--cream-light)"],
.post-body [style*="background:#110e09"] [style*="color:var(--cream)"],
.post-body [style*="background: #110e09"] [style*="color:var(--cream)"] {
  color: rgba(240,230,211,0.9) !important;
}
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--muted)"],
.post-body [style*="background: var(--charcoal)"] [style*="color:var(--muted)"],
.post-body [style*="background:var(--charcoal)"] [style*="color: var(--muted)"],
.post-body [style*="background: var(--charcoal)"] [style*="color: var(--muted)"],
.post-body [style*="background:var(--dark)"] [style*="color:var(--muted)"],
.post-body [style*="background: var(--dark)"] [style*="color:var(--muted)"],
.post-body [style*="background:var(--dark)"] [style*="color: var(--muted)"],
.post-body [style*="background: var(--dark)"] [style*="color: var(--muted)"],
.post-body [style*="background:#1c1610"] [style*="color:var(--muted)"],
.post-body [style*="background: #1c1610"] [style*="color:var(--muted)"],
.post-body [style*="background:#1c1610"] [style*="color: var(--muted)"],
.post-body [style*="background: #1c1610"] [style*="color: var(--muted)"],
.post-body [style*="background:#110e09"] [style*="color:var(--muted)"],
.post-body [style*="background: #110e09"] [style*="color:var(--muted)"] {
  color: rgba(240,230,211,0.65) !important;
}

/* ── Boost half-opacity orange inside #1c1610 containers — full orange on dark bg ── */
.post-body [style*="background:#1c1610"] [style*="color:rgba(232,100,10,0.5)"],
.post-body [style*="background: #1c1610"] [style*="color:rgba(232,100,10,0.5)"],
.post-body [style*="background:#1c1610"] [style*="color: rgba(232,100,10,0.5)"],
.post-body [style*="background: #1c1610"] [style*="color: rgba(232,100,10,0.5)"] {
  color: var(--orange) !important;
}

/* ── Literal hex dark containers: default text to cream (stays dark, matches charcoal containers) ── */
.post-body [style*="background:#1c1610"],
.post-body [style*="background: #1c1610"],
.post-body [style*="background:#110e09"],
.post-body [style*="background: #110e09"],
.post-body [style*="background:rgba(20,15,8"],
.post-body [style*="background: rgba(20,15,8"] { color: rgba(240,230,211,0.9); }

/* ── Charcoal/dark containers: set default cream text (for elements with no explicit inline color) ── */
.post-body [style*="background:var(--charcoal)"],
.post-body [style*="background: var(--charcoal)"],
.post-body [style*="background:var(--dark)"],
.post-body [style*="background: var(--dark)"] { color: rgba(240,230,211,0.9); }

/* ── Restore <strong> inside charcoal/dark containers (overrides .post-body strong !important) ── */
/* Specificity (0,2,1) beats .post-body strong (0,1,1) among !important rules */
.post-body [style*="background:var(--charcoal)"] strong,
.post-body [style*="background: var(--charcoal)"] strong,
.post-body [style*="background:var(--dark)"] strong,
.post-body [style*="background: var(--dark)"] strong { color: rgba(240,230,211,0.95) !important; }
/* ── Restore <strong> inside CSS-class dark containers (bg set via class, not inline style) ── */
.post-body .callout strong,
.post-body .tool-card strong,
.post-body .chart-block strong,
.post-body .nl-box strong,
.post-body .pattern-card strong,
.post-body .eeat-card strong { color: rgba(240,230,211,0.95) !important; }
/* ── Restore <strong> inside literal #1c1610 inline-style dark containers ── */
.post-body [style*="background:#1c1610"] strong,
.post-body [style*="background: #1c1610"] strong,
.post-body [style*="background:#110e09"] strong { color: rgba(240,230,211,0.95) !important; }
/* Restore semantic red/orange on strong[color] inside charcoal — higher (0,3,1) specificity */
.post-body [style*="background:var(--charcoal)"] strong[style*="color:#e84040"],
.post-body [style*="background: var(--charcoal)"] strong[style*="color:#e84040"] { color: #e84040 !important; }
.post-body [style*="background:var(--charcoal)"] strong[style*="color:var(--orange)"],
.post-body [style*="background: var(--charcoal)"] strong[style*="color:var(--orange)"] { color: var(--orange) !important; }

/* ── Sidebar cream inline colors → dark on parchment ── */
.sidebar [style*="color:rgba(240,230,211,"] { color: rgba(42,31,16,0.65) !important; }
.sidebar [style*="color: rgba(240,230,211,"] { color: rgba(42,31,16,0.65) !important; }
/* ── Restore cream inside sidebar charcoal containers (higher specificity wins) ── */
.sidebar [style*="background:var(--charcoal)"] [style*="color:rgba(240,230,211,"],
.sidebar [style*="background: var(--charcoal)"] [style*="color:rgba(240,230,211,"],
.sidebar [style*="background:var(--charcoal)"] [style*="color: rgba(240,230,211,"],
.sidebar [style*="background: var(--charcoal)"] [style*="color: rgba(240,230,211,"] { color: rgba(240,230,211,0.75) !important; }
/* Default cream text for sidebar charcoal containers (inherited, no inline color) */
.sidebar [style*="background:var(--charcoal)"],
.sidebar [style*="background: var(--charcoal)"] { color: rgba(240,230,211,0.9); }

/* ── #1c1610 literal hex dark containers in SIDEBAR (bg NOT converted) — restore cream text ── */
/* post-body #1c1610 bg IS converted to parchment by blog.css, so no restoration needed there */
.sidebar [style*="background:#1c1610"] [style*="color:rgba(240,230,211,"],
.sidebar [style*="background:#1c1610"] [style*="color: rgba(240,230,211,"] { color: rgba(240,230,211,0.75) !important; }
.sidebar [style*="background:#1c1610"] { color: rgba(240,230,211,0.9); }

/* ── Restore cream text inside dark CSS-variable containers ── */
/* Higher specificity (3 attribute selectors) beats the 2-selector rules above */
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--muted)"],
.post-body [style*="background: var(--charcoal)"] [style*="color:var(--muted)"],
.post-body [style*="background:var(--charcoal)"] [style*="color: var(--muted)"],
.post-body [style*="background:var(--warm-dark)"] [style*="color:var(--muted)"],
.post-body [style*="background: var(--warm-dark)"] [style*="color:var(--muted)"],
.post-body [style*="background:var(--warm-dark)"] [style*="color: var(--muted)"] {
  color: rgba(240,230,211,0.85) !important;
}
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--cream-light)"],
.post-body [style*="background: var(--charcoal)"] [style*="color:var(--cream-light)"],
.post-body [style*="background:var(--charcoal)"] [style*="color: var(--cream-light)"],
.post-body [style*="background:var(--charcoal)"] [style*="color:var(--cream)"],
.post-body [style*="background:var(--charcoal)"] [style*="color: var(--cream)"],
.post-body [style*="background:var(--warm-dark)"] [style*="color:var(--cream-light)"],
.post-body [style*="background: var(--warm-dark)"] [style*="color:var(--cream-light)"],
.post-body [style*="background:var(--warm-dark)"] [style*="color: var(--cream-light)"],
.post-body [style*="background:var(--warm-dark)"] [style*="color:var(--cream)"],
.post-body [style*="background:var(--warm-dark)"] [style*="color: var(--cream)"] {
  color: #f8f0e4 !important;
}

/* ── Inline border colors in article HTML on parchment body → neutral ── */
/* Restore cream borders inside dark containers (higher specificity overrides) */
.post-body [style*="border-color:rgba(240,230,211"],
.post-body [style*="border:1px solid rgba(240,230,211"],
.post-body [style*="border-bottom:1px solid rgba(240,230,211"],
.post-body [style*="border-right:1px solid rgba(240,230,211"] {
  border-color: rgba(42,31,16,0.13) !important;
}
.post-body [style*="background:#1c1610"] [style*="border-bottom:1px solid rgba(240,230,211"],
.post-body [style*="background: #1c1610"] [style*="border-bottom:1px solid rgba(240,230,211"],
.post-body [style*="background:#1c1610"] [style*="border:1px solid rgba(240,230,211"],
.post-body [style*="background: #1c1610"] [style*="border:1px solid rgba(240,230,211"],
.post-body [style*="background:#110e09"] [style*="border-bottom:1px solid rgba(240,230,211"],
.post-body [style*="background: #110e09"] [style*="border-bottom:1px solid rgba(240,230,211"] {
  border-color: rgba(240,230,211,0.12) !important;
}

/* ── Inline bar-track backgrounds ── */
.post-body [style*="background:rgba(240,230,211,0.07)"],
.post-body [style*="background:rgba(240,230,211,0.08)"],
.post-body [style*="background:rgba(240,230,211,0.06)"],
.post-body [style*="background:rgba(240,230,211,0.05)"] {
  background: rgba(42,31,16,0.04) !important; /* lowered from 0.09 — keeps orange text above 2.5 ratio */
}
/* ── Dark-box components: override bar-track conversion (same specificity, later wins) ── */
.post-body .chart-block,
.post-body .callout,
.post-body .toc,
.post-body .nl-box,
.post-body .tool-card,
.post-body .pattern-card,
.post-body .related-card,
.post-body .eeat-card { background: var(--charcoal) !important; }

/* ══════════════════════════════════════════
   BACK-TO-TOP BUTTON
══════════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 400;
  width: 44px; height: 44px;
  background: var(--orange); color: #fff;
  border: none; border-radius: 3px; cursor: pointer;
  font-size: 20px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  transform: translateY(8px);
}
.back-to-top.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.back-to-top:hover { background: var(--orange-deep); }

/* ══════════════════════════════════════════
   HOMEPAGE FEED — PARCHMENT TEXT OVERRIDES
══════════════════════════════════════════ */
.post-title              { color: #1a1208; }
.post-title a            { color: inherit; }
.post-title a:hover      { color: var(--orange); }
.post-excerpt,
.feed-title              { color: rgba(42,31,16,0.65); }
.feed-count,
.post-date, .post-sep,
.post-read               { color: rgba(42,31,16,0.46); }
.feed-header             { border-bottom-color: rgba(42,31,16,0.12); }

/* ══════════════════════════════════════════
   BLOG INDEX CARDS — PARCHMENT OVERRIDES
══════════════════════════════════════════ */
.posts-grid .post-card              { background: #EDE5D8; }
.posts-grid .post-card:hover        { background: #E6DDD0; }
.posts-grid .post-card h3           { color: #1a1208; }
.posts-grid .post-card .excerpt     { color: rgba(42,31,16,0.65); }
.posts-grid .post-card-img          { background: #D9D0C3; }
/* Post-card meta date: muted dark on parchment card bg (scoped to grid, not featured hero) */
.posts-grid .post-meta              { color: rgba(42,31,16,0.55) !important; }
/* Featured-body: convert dark bg to parchment so all children get dark text */
.featured-body                      { background: #EDE5D8 !important; color: rgba(42,31,16,0.65) !important; }
.featured-body h2, .featured-body h3 { color: #1a1208 !important; }
.featured-body .post-meta,
.featured-body .post-meta span      { color: rgba(42,31,16,0.55) !important; }
.featured-body .excerpt             { color: rgba(42,31,16,0.65) !important; }
/* Nav links: restore cream on dark nav bg (var(--muted) resolves dark on parchment pages) */
nav:not(.breadcrumb):not(.toc) ul a { color: rgba(240,230,211,0.85) !important; }
/* Placeholder abbreviations: dark on parchment img bg; full orange on dark featured-img bg */
.post-card-img-placeholder          { color: rgba(42,31,16,0.50) !important; }
.featured-img-placeholder           { color: var(--orange) !important; }

/* Blog index newsletter strip */
.newsletter                { background: #EDE5D8 !important;
                              border-color: rgba(42,31,16,0.13) !important; }
.nl-text h3                { color: #1a1208 !important; }
.nl-text p                 { color: rgba(42,31,16,0.65) !important; }
.nl-input                  { background: #F5EFE4 !important;
                              border-color: rgba(42,31,16,0.25) !important;
                              color: #1a1208 !important; }
.nl-input::placeholder     { color: rgba(42,31,16,0.40) !important; }

/* Blog index category filter pills */
.cat                       { color: rgba(42,31,16,0.60) !important;
                              border-color: rgba(42,31,16,0.18) !important; }
.cat:hover, .cat.active    { color: var(--orange) !important;
                              border-color: rgba(232,100,10,0.70) !important;
                              background: rgba(232,100,10,0.06); }

/* ══════════════════════════════════════════
   HAMBURGER + MOBILE MENU
══════════════════════════════════════════ */
.ham {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 10px 8px;
  flex-shrink: 0;
}
.ham span {
  display: block;
  width: 22px; height: 2px;
  background: var(--cream-light);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mob-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 490;
  background: rgba(10,8,4,0.98);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  padding: 32px var(--gutter);
  gap: 4px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.mob-menu.open { transform: translateX(0); pointer-events: auto; }
.mob-menu a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(240,230,211,0.75);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(240,230,211,0.07);
  transition: color 0.2s;
}
.mob-menu a:hover { color: var(--cream-light); }
.mob-cta { color: var(--orange) !important; }

@media (max-width: 900px) {
  .ham { display: flex; }
  /* Specificity must match/beat the base `nav:not(.breadcrumb):not(.toc) ul`
     rule (0,2,2) or the desktop menu stays visible and overflows. */
  nav:not(.breadcrumb):not(.toc):has(.ham) ul { display: none; }
}

/* ── Nav CTA (blog index "Start Here") ── */
.nav-cta {
  color: var(--orange) !important;
  border: 1px solid rgba(232,100,10,0.5) !important;
  padding: 8px 20px !important; font-size: 13px !important;
  transition: background 0.2s, color 0.2s !important;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--orange) !important; color: var(--black) !important; }

/* ══════════════════════════════════════════
   AUTHOR ATTRIBUTION — appends "· SaaSRanger"
   to post-meta on individual article pages
══════════════════════════════════════════ */
.post-hero .post-meta::after {
  content: '\00B7\00A0SaaSRanger';
  color: var(--orange);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   MOBILE CALLOUT FONT FIX
   Inline font-size:18px on callout p overrides
   the 16px mobile rule — defeat with !important
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .callout p { font-size: 16px !important; line-height: 1.75 !important; }
}

/* ══════════════════════════════════════════
   IMPROVEMENTS v29
══════════════════════════════════════════ */

/* ── Updated date in post-meta ── */
.post-updated { color: var(--orange); font-size: 12px; font-weight: 600; }

/* ── Nav unified: article pages now show Guides · About · Start Here ── */
nav:not(.breadcrumb):not(.toc) ul {
  gap: 24px;
}
nav:not(.breadcrumb):not(.toc) ul a.nav-back {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
}
nav:not(.breadcrumb):not(.toc) ul a.nav-back:hover { color: var(--cream-pale); }

/* ── Author bio box ── */
.author-bio {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}
.author-bio-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--charcoal);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 24px 28px;
}
.author-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--black);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.author-bio-text { flex: 1; min-width: 0; }
.author-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--orange);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.author-bio-text p {
  font-size: 15px; color: var(--muted);
  line-height: 1.7; margin: 0; font-weight: 300;
}
@media (max-width: 900px) {
  .author-bio { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: 48px; }
}

/* ── New 3-column site footer ── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--dark);
}
.site-footer .footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  text-align: left;
}
.footer-col--brand .footer-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--cream-light); text-decoration: none;
  display: inline-block; margin-bottom: 12px;
}
.footer-col--brand .footer-logo em { font-style: normal; color: var(--orange); }
.footer-col--brand .footer-tagline {
  font-size: 14px; color: rgba(240,230,211,0.45);
  line-height: 1.6; max-width: 280px;
}
.footer-col-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(240,230,211,0.4); margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a {
  font-size: 14px; color: rgba(240,230,211,0.55);
  text-decoration: none; transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--orange); }
.site-footer .footer-bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px var(--gutter);
  border-top: 1px solid rgba(240,230,211,0.06);
}
.site-footer .footer-bottom .footer-copy {
  font-size: 12px; color: rgba(240,230,211,0.25);
}
@media (max-width: 900px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px var(--gutter) 28px;
  }
  .footer-col--brand .footer-tagline { max-width: 100%; }
}